diff --git a/public/styles.css b/public/styles.css
index c68bb26..629fe8e 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -18,11 +18,36 @@
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 }
 
+/* Global Typography & Elements */
+h1, h2, h3, h4, h5, h6 {
+    color: var(--text-primary);
+    margin-bottom: 1rem;
+    font-weight: 700;
+}
+
+h1 {
+    font-size: 2.5rem;
+    line-height: 1.2;
+    letter-spacing: -0.025em;
+}
+
+p {
+    margin-bottom: 1rem;
+    color: var(--text-secondary);
+}
+
+.gradient-text {
+    background: var(--primary-gradient);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    display: inline-block;
+}
+
 body {
     background-color: var(--bg-light);
     color: var(--text-primary);
     line-height: 1.6;
-    padding-top: 80px; /* Space for sticky header */
 }
 
 .container {
@@ -34,7 +59,7 @@ body {
 
 /* Header Styles */
 .main-header {
-    position: fixed;
+    position: sticky;
     top: 0;
     left: 0;
     right: 0;
@@ -210,6 +235,10 @@ body {
 }
 
 @media (max-width: 768px) {
+    .main-header {
+        height: auto;
+    }
+
     .header-container {
         flex-direction: column;
         height: auto;
@@ -219,11 +248,26 @@ body {
     .nav-menu {
         margin-top: 15px;
         gap: 15px;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+    
+    .container {
+        padding: 20px;
+    }
+    
+    h1 {
+        font-size: 2rem;
+    }
+    
+    .projects-grid {
+        grid-template-columns: 1fr;
     }
     
     .footer-container {
         grid-template-columns: 1fr;
         text-align: center;
+        gap: 25px;
     }
     
     .footer-brand p {
@@ -236,21 +280,6 @@ body {
     }
 }
 
-/* Responsive design */
-@media (max-width: 768px) {
-    .container {
-        padding: 20px;
-    }
-    
-    h1 {
-        font-size: 2rem;
-    }
-    
-    .projects-grid {
-        grid-template-columns: 1fr;
-    }
-}
-
 /* Footer styles */
 footer {
     margin-top: 40px;
diff --git a/views/about.ejs b/views/about.ejs
index 7b1741c..3e35d78 100644
--- a/views/about.ejs
+++ b/views/about.ejs
@@ -16,15 +16,6 @@
             text-align: left;
         }
 
-        .about-container h1 {
-            font-size: 2.5rem;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-
         .about-container h2 {
             font-size: 1.3rem;
             color: #4a5568;
@@ -56,7 +47,7 @@
 
         <div class="container">
             <div class="about-container">
-                <h1>About Nexus Core</h1>
+                <h1 class="gradient-text">About Nexus Core</h1>
                 <p>Nexus Core is a dedicated hub for modern web development, focusing on building clean, interactive,
                     and user-friendly web interfaces using the latest technologies.</p>
                 <h2>What I Do</h2>
diff --git a/views/contact.ejs b/views/contact.ejs
index 5027a3c..035d376 100644
--- a/views/contact.ejs
+++ b/views/contact.ejs
@@ -139,54 +139,56 @@
     <%- include('partials/header') %>
 
         <div class="container">
-            <h1>Get In Touch</h1>
-            <p>Nexus Core is open for collaborations, project inquiries, and general questions. We'd love to hear from
-                you!</p>
-
-            <div class="contact-info">
-                <h3>Contact Information</h3>
-                <p><strong>Email:</strong> contact@nexuscore.io</p>
-                <p><strong>Location:</strong> India</p>
-                <p><strong>Availability:</strong> Open to new opportunities and collaborations</p>
-
-                <div class="social-links">
-                    <a href="#" class="social-link" title="GitHub">GH</a>
-                    <a href="#" class="social-link" title="LinkedIn">LI</a>
-                    <a href="#" class="social-link" title="Twitter">TW</a>
-                </div>
-            </div>
-
-            <div id="statusMessage" class="status-message"></div>
-
-            <form id="contactForm">
-                <div class="form-group">
-                    <label for="name">Name</label>
-                    <input type="text" id="name" name="name" required placeholder="Enter your name">
-                </div>
-
-                <div class="form-group">
-                    <label for="email">Email</label>
-                    <input type="email" id="email" name="email" required placeholder="Enter your email">
+            <div class="contact-container">
+                <h1 class="gradient-text">Get In Touch</h1>
+                <p>Nexus Core is open for collaborations, project inquiries, and general questions. We'd love to hear from
+                    you!</p>
+
+                <div class="contact-info">
+                    <h3>Contact Information</h3>
+                    <p><strong>Email:</strong> contact@nexuscore.io</p>
+                    <p><strong>Location:</strong> India</p>
+                    <p><strong>Availability:</strong> Open to new opportunities and collaborations</p>
+
+                    <div class="social-links">
+                        <a href="#" class="social-link" title="GitHub">GH</a>
+                        <a href="#" class="social-link" title="LinkedIn">LI</a>
+                        <a href="#" class="social-link" title="Twitter">TW</a>
+                    </div>
                 </div>
 
-                <div class="form-group">
-                    <label for="subject">Subject</label>
-                    <select id="subject" name="subject">
-                        <option value="" disabled selected>Select a subject</option>
-                        <option value="collaboration">Collaboration</option>
-                        <option value="project">Project Inquiry</option>
-                        <option value="job">Job Opportunity</option>
-                        <option value="question">General Question</option>
-                    </select>
-                </div>
-
-                <div class="form-group">
-                    <label for="message">Message</label>
-                    <textarea id="message" name="message" required placeholder="Your message here..."></textarea>
-                </div>
-
-                <button type="submit" class="btn">Send Message</button>
-            </form>
+                <div id="statusMessage" class="status-message"></div>
+
+                <form id="contactForm">
+                    <div class="form-group">
+                        <label for="name">Name</label>
+                        <input type="text" id="name" name="name" required placeholder="Enter your name">
+                    </div>
+
+                    <div class="form-group">
+                        <label for="email">Email</label>
+                        <input type="email" id="email" name="email" required placeholder="Enter your email">
+                    </div>
+
+                    <div class="form-group">
+                        <label for="subject">Subject</label>
+                        <select id="subject" name="subject">
+                            <option value="" disabled selected>Select a subject</option>
+                            <option value="collaboration">Collaboration</option>
+                            <option value="project">Project Inquiry</option>
+                            <option value="job">Job Opportunity</option>
+                            <option value="question">General Question</option>
+                        </select>
+                    </div>
+
+                    <div class="form-group">
+                        <label for="message">Message</label>
+                        <textarea id="message" name="message" required placeholder="Your message here..."></textarea>
+                    </div>
+
+                    <button type="submit" class="btn" style="width: 100%;">Send Message</button>
+                </form>
+            </div>
         </div>
 
         <%- include('partials/footer') %>
diff --git a/views/index.ejs b/views/index.ejs
index 30bb2c3..07229df 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -179,9 +179,11 @@
 
         <div class="container">
             <div class="home-container">
-                <h1>Welcome to Nexus Core Hub</h1>
-                <p>Explore a collection of modern, responsive web projects designed for the next generation of digital
-                    experiences. Navigate through the showcase below!</p>
+                <div class="welcome-section">
+                    <h1>Welcome to Nexus Core Hub</h1>
+                    <p>Explore a collection of modern, responsive web projects designed for the next generation of digital
+                        experiences. Navigate through the showcase below!</p>
+                </div>
 
                 <div class="nav-buttons-grid">
                     <a href="/navbar" class="nav-button navbar">
diff --git a/views/navbar.ejs b/views/navbar.ejs
index de6e279..4619b39 100644
--- a/views/navbar.ejs
+++ b/views/navbar.ejs
@@ -6,106 +6,74 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Nexus Core Hub</title>
     <link rel="stylesheet" href="/styles.css">
+    <link rel="icon"
+        href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🧭</text></svg>"
+        type="image/svg+xml">
     <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-        }
-
-        body {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            min-height: 100vh;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            color: #333;
-        }
-
-        .container {
+        .hub-card {
             background: white;
-            border-radius: 15px;
-            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
-            padding: 40px;
+            border-radius: 20px;
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
+            padding: 50px 40px;
             max-width: 800px;
-            width: 90%;
-            text-align: center;
+            width: 100%;
             margin: 40px auto;
-        }
-
-        h1 {
-            font-size: 2.5rem;
-            margin-bottom: 20px;
-            color: #4a5568;
-        }
-
-        p {
-            font-size: 1.2rem;
-            margin-bottom: 30px;
-            color: #718096;
-            line-height: 1.6;
+            text-align: center;
+            border: 1px solid rgba(255, 255, 255, 0.8);
         }
 
         .nav-grid {
             display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
             gap: 20px;
-            margin-top: 30px;
+            margin: 40px 0;
         }
 
         .nav-card {
             background: #f7fafc;
-            border-radius: 10px;
-            padding: 20px;
-            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
-            transition: transform 0.3s ease, box-shadow 0.3s ease;
+            border-radius: 15px;
+            padding: 25px 20px;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.02);
+            transition: all 0.3s ease;
             text-decoration: none;
-            display: block;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
             color: inherit;
+            border: 1px solid transparent;
         }
 
         .nav-card:hover {
             transform: translateY(-5px);
-            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+            box-shadow: 0 10px 25px rgba(102, 126, 234, 0.15);
+            border-color: rgba(102, 126, 234, 0.2);
             text-decoration: none;
-            color: inherit;
         }
 
         .nav-card h3 {
-            color: #4a5568;
+            color: var(--text-primary);
             margin-bottom: 10px;
+            font-size: 1.25rem;
         }
 
         .nav-card p {
-            font-size: 1rem;
+            font-size: 0.95rem;
+            color: var(--text-secondary);
             margin-bottom: 0;
-        }
-
-        .btn {
-            display: inline-block;
-            background: #667eea;
-            color: white;
-            padding: 12px 30px;
-            border-radius: 25px;
-            text-decoration: none;
-            margin-top: 20px;
-            transition: background 0.3s ease;
-        }
-
-        .btn:hover {
-            background: #5a6fd8;
-            transform: scale(1.05);
+            line-height: 1.5;
         }
 
         @media (max-width: 768px) {
-            .container {
-                padding: 20px;
+            .hub-card {
+                padding: 30px 20px;
+                margin: 20px auto;
             }
 
-            h1 {
-                font-size: 2rem;
+            .nav-grid {
+                grid-template-columns: 1fr;
+                gap: 15px;
+                margin: 30px 0;
             }
         }
     </style>
@@ -115,30 +83,32 @@
     <%- include('partials/header') %>
 
         <div class="container">
-            <h1>Nexus Core Collection</h1>
-            <p>Explore our library of HTML, CSS, and JS web projects designed for modern standards. Search and navigate
-                through the hub below.</p>
-
-            <div class="nav-grid">
-                <a href="/" class="nav-card">
-                    <h3>Landing Page</h3>
-                    <p>Interactive landing page with animated project cards</p>
-                </a>
-                <a href="/about" class="nav-card">
-                    <h3>About</h3>
-                    <p>Learn more about me and my tech stack</p>
-                </a>
-                <a href="/portfolio" class="nav-card">
-                    <h3>Portfolio</h3>
-                    <p>Professional portfolio showcasing skills and projects</p>
-                </a>
-                <a href="/contact" class="nav-card">
-                    <h3>Contact Form</h3>
-                    <p>Complete contact page with form validation</p>
-                </a>
+            <div class="hub-card">
+                <h1 class="gradient-text">Nexus Core Collection</h1>
+                <p>Explore our library of HTML, CSS, and JS web projects designed for modern standards. Search and navigate
+                    through the hub below.</p>
+
+                <div class="nav-grid">
+                    <a href="/" class="nav-card">
+                        <h3>Landing Page</h3>
+                        <p>Interactive landing page with animated project cards</p>
+                    </a>
+                    <a href="/about" class="nav-card">
+                        <h3>About</h3>
+                        <p>Learn more about me and my tech stack</p>
+                    </a>
+                    <a href="/portfolio" class="nav-card">
+                        <h3>Portfolio</h3>
+                        <p>Professional portfolio showcasing skills and projects</p>
+                    </a>
+                    <a href="/contact" class="nav-card">
+                        <h3>Contact Form</h3>
+                        <p>Complete contact page with form validation</p>
+                    </a>
+                </div>
+
+                <a href="https://github.com/NexusCore" class="btn">View on GitHub</a>
             </div>
-
-            <a href="https://github.com/NexusCore" class="btn">View on GitHub</a>
         </div>
 
         <%- include('partials/footer') %>
diff --git a/views/portfolio.ejs b/views/portfolio.ejs
index 11f2a8b..caabf1a 100644
--- a/views/portfolio.ejs
+++ b/views/portfolio.ejs
@@ -15,7 +15,7 @@
     <%- include('partials/header') %>
 
         <div class="container">
-            <h1>Nexus Core Portfolio</h1>
+            <h1 class="gradient-text">Nexus Core Portfolio</h1>
             <p>Explore our showcase of innovative web solutions and computer science projects. We are dedicated to
                 building efficient, modern, and high-performance digital products.</p>