diff --git a/assets/main.css b/assets/main.css
index e99b35f..4895981 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -1,73 +1,138 @@
-/* Basic styles for better layout */
-body {
-  font-family: 'Roboto', sans-serif;
-  margin: 0;
-  background-color: #f4f4f4;
-  color: #333;
-}
-
-header {
-  background-color: #3f51b5;
-  color: white;
-  text-align: center;
-  padding: 20px;
-}
-
-header h1 {
-  margin: 0;
-  font-size: 2.5rem;
-}
-
-nav {
-  background-color: #303f9f;
-  text-align: center;
-  padding: 10px 0;
-}
-
-nav ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-nav ul li {
-  display: inline;
-  margin-right: 20px;
-}
-
-nav ul li a {
-  color: white;
-  font-weight: 700;
-  text-decoration: none;
-  padding: 10px;
-}
-
-nav ul li a:hover {
-  background-color: #ff5722;
-  color: white;
-  border-radius: 5px;
-}
-
-main {
-  max-width: 1000px;
-  margin: 40px auto;
-  padding: 20px;
-  background: white;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  border-radius: 8px;
-}
-
-main img {
-  max-width: 100%;
-  height: auto;
-  border-radius: 8px;
-  margin-bottom: 20px;
-}
-
-footer {
-  background-color: #3f51b5;
-  color: white;
-  text-align: center;
-  padding: 20px;
-  margin-top: 40px;
-}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{{ page.title }} - {{ site.title }}</title>
+  
+  <!-- Link to main CSS (ensure it exists in your assets folder) -->
+  <link rel="stylesheet" href="{{ '/assets/main.css' | relative_url }}">
+
+  <!-- Google Fonts for better typography -->
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
+
+  <style>
+    /* Basic reset */
+    body {
+      font-family: 'Roboto', sans-serif;
+      margin: 0;
+      padding: 0;
+      background-color: #f8f9fa; /* Light background for a softer look */
+      color: #333;
+      line-height: 1.6; /* Improve readability */
+    }
+
+    header {
+      background-color: #007bff; /* Brand color for header */
+      color: white;
+      padding: 40px 0; /* More padding for a more spacious feel */
+      text-align: center;
+      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
+    }
+
+    header h1 {
+      margin: 0;
+      font-size: 2.5rem;
+      letter-spacing: 1px; /* Slight spacing for elegance */
+    }
+
+    nav {
+      background-color: #0056b3; /* Darker shade for the navigation */
+      text-align: center;
+      padding: 15px 0;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
+    }
+
+    nav ul {
+      list-style-type: none;
+      margin: 0;
+      padding: 0;
+    }
+
+    nav ul li {
+      display: inline;
+      margin-right: 30px; /* Increased spacing for better separation */
+      position: relative; /* For absolute positioning of separator */
+    }
+
+    nav ul li:not(:last-child)::after {
+      content: ''; /* Separator line */
+      position: absolute;
+      right: -15px; /* Space from the text */
+      top: 50%; /* Center the line vertically */
+      width: 1px; /* Line width */
+      height: 20px; /* Line height */
+      background-color: white; /* Line color */
+      transform: translateY(-50%); /* Center the line */
+    }
+
+    nav ul li a {
+      text-decoration: none;
+      color: white;
+      font-weight: 500; /* Slightly lighter font weight */
+      transition: color 0.3s; /* Smooth transition for hover effect */
+    }
+
+    nav ul li a:hover {
+      color: #ffeb3b; /* Yellow highlight on hover */
+    }
+
+    main {
+      max-width: 800px; /* Reduce max width for better focus */
+      margin: 20px auto;
+      padding: 30px; /* Increase padding for content */
+      background: white;
+      border-radius: 8px; /* Rounded corners for a softer look */
+      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Deeper shadow for emphasis */
+    }
+
+    main img {
+      max-width: 100%;
+      height: auto;
+      border-radius: 8px; /* Match images with rounded corners */
+    }
+
+    footer {
+      background-color: #007bff; /* Match footer with header */
+      color: white;
+      text-align: center;
+      padding: 15px 0; /* Slightly reduced padding */
+      margin-top: 40px;
+      position: relative;
+      bottom: 0; /* Stick footer at the bottom if content is short */
+      width: 100%; /* Full width for footer */
+    }
+
+    footer p {
+      margin: 0; /* Remove margin from footer text */
+      font-size: 0.9rem; /* Smaller text size for footer */
+    }
+  </style>
+</head>
+<body>
+
+  <header>
+    <h1>{{ site.title }}</h1>
+  </header>
+
+  <nav>
+    <ul>
+      <li><a href="{{ '/' | relative_url }}">Home</a></li>
+      <li><a href="{{ '/projects' | relative_url }}">Projects</a></li>
+      <li><a href="{{ '/education' | relative_url }}">Education</a></li>
+      <li><a href="{{ '/professional' | relative_url }}">Professional</a></li>
+      <li><a href="{{ '/certificates' | relative_url }}">Certificates</a></li>
+    </ul>
+  </nav>
+
+  <main>
+    {{ content }}
+  </main>
+
+  <footer>
+    <p>&copy; {{ site.time | date: '%Y' }} {{ site.author.name }}</p>
+  </footer>
+
+</body>
+</html>
+
