diff --git a/.vscode/settings.json b/.vscode/settings.json
index 6f3a291..da1ed86 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +1,5 @@
 {
-    "liveServer.settings.port": 5501
+    "liveServer.settings.port": 5501,
+    "files.refactoring.autoSave": false,
+    "notebook.codeActionsOnSave": {}
 }
\ No newline at end of file
diff --git a/css/common.css b/css/common.css
index d925181..4a6b234 100644
--- a/css/common.css
+++ b/css/common.css
@@ -29,6 +29,11 @@ h3 {
     margin-bottom: 1rem;
 }
 
+/* Section */
+section {
+    border-radius: 12px;
+}
+
 /* ===================================================
    ===== Navbar =====
 =================================================== */
@@ -36,19 +41,40 @@ h3 {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    background-color: #333;
+    background-color: #7a7878;
     padding: 10px 20px;
-    color: white;
+    color: rgb(201, 238, 99);
     position: fixed;
     width: 100%;
     top: 0;
     z-index: 1000;
 }
 
+/* Brand container (logo + name) */
+.brand {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    /* space between logo and text */
+    font-size: 1.4rem;
+    font-weight: 600;
+    color: rgb(201, 238, 99);
+    text-decoration: none;
+}
+
+/* Logo image */
 .logo {
+    height: 32px;
+    width: 32px;
+    object-fit: contain;
+    border-radius: 6px;
+    /* optional for a softer look */
+}
+
+/* .logo {
     font-size: 20px;
     font-weight: bold;
-}
+} */
 
 .nav-links {
     list-style: none;
@@ -58,7 +84,7 @@ h3 {
 
 .nav-links li a {
     text-decoration: none;
-    color: white;
+    color: rgb(201, 238, 99);
     transition: color 0.3s;
 }
 
@@ -112,7 +138,7 @@ h3 {
 .container {
     width: 85%;
     margin: auto;
-    padding: 3rem 0;
+    padding: 1rem 0;
 }
 
 /* Fade-in animation */
diff --git a/css/main.css b/css/main.css
index 63c8896..20dc181 100644
--- a/css/main.css
+++ b/css/main.css
@@ -8,7 +8,7 @@
   justify-content: center;
   align-items: center;
   text-align: center;
-  color: #fff;
+  color: rgb(201, 238, 99);
   position: relative;
 }
 
@@ -164,7 +164,7 @@ body.dark header.navbar {
 }
 
 body.dark nav ul li a {
-  color: #e0e0e0;
+  color: rgb(201, 238, 99);
 }
 
 body.dark nav ul li a:hover {
@@ -219,7 +219,7 @@ body.dark #darkModeToggle:hover {
   display: flex;
   justify-content: center;
   width: 100%;
-  margin-top: 40px;
+  /* margin-top: 10px; */
 }
 
 /* Elegant visitor counter */
@@ -240,7 +240,7 @@ body.dark #darkModeToggle:hover {
   /* glow */
   backdrop-filter: blur(12px);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
-  margin: 0 auto;
+  /* margin: 0 auto; */
 }
 
 /* Hover effect for interactivity */
diff --git a/css/mini-services.css b/css/mini-services.css
index 04591c7..52aadab 100644
--- a/css/mini-services.css
+++ b/css/mini-services.css
@@ -12,7 +12,8 @@
 #services-preview .service-card:hover {
   transform: translateY(-8px) scale(1.03);
   box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
-  background: #fff3e0; /* Slight highlight color */
+  background: #fff3e0;
+  /* Slight highlight color */
 }
 
 #services-preview .service-card i {
@@ -24,7 +25,8 @@
 
 #services-preview .service-card:hover i {
   transform: rotate(10deg) scale(1.1);
-  color: #ff8c42; /* Slight color change on hover */
+  color: #ff8c42;
+  /* Slight color change on hover */
 }
 
 #services-preview .service-card h3 {
@@ -32,13 +34,14 @@
 }
 
 #services-preview .service-card:hover h3 {
-  color: #d2691e; /* Darker highlight on hover */
+  color: #d2691e;
+  /* Darker highlight on hover */
 }
 
 /* ===================================================
    ===== Mini Services Preview Section =====
 =================================================== */
-#services-preview{
+#services-preview {
   text-align: center;
 }
 
@@ -66,7 +69,7 @@ body.dark {
   color: #e0e0e0;
 }
 
-body.dark #services-preview .service-card { 
+body.dark #services-preview .service-card {
   background: #242424;
   color: #e0e0e0;
 }
@@ -74,7 +77,8 @@ body.dark #services-preview .service-card {
 body.dark #services-preview .service-card:hover {
   transform: translateY(-8px) scale(1.03);
   box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
-  background: #fff3e0; /* Slight highlight color */
+  background: #fff3e0;
+  /* Slight highlight color */
 }
 
 body.dark #services-preview .service-card p {
@@ -82,5 +86,6 @@ body.dark #services-preview .service-card p {
 }
 
 body.dark .service-card:hover p {
-  color: #000000; /* Darker highlight on hover */
+  color: #000000;
+  /* Darker highlight on hover */
 }
\ No newline at end of file
diff --git a/images/logo.jpeg b/images/logo.jpeg
new file mode 100644
index 0000000..7067b4b
Binary files /dev/null and b/images/logo.jpeg differ
diff --git a/index.html b/index.html
index 3785120..7147b6b 100644
--- a/index.html
+++ b/index.html
@@ -32,15 +32,22 @@
 <body>
   <!-- Header / Navbar -->
   <nav class="navbar">
-    <div class="logo">Vimal Tech</div>
+    <div>
+      <a href="index.html" class="brand">
+        <img src="/images/logo.jpeg" alt="Brand Logo" class="logo">
+        <span class="brand-name">Vimal Tech</span>
+      </a>
+    </div>
 
     <ul class="nav-links" id="nav-links">
       <li><a href="#hero" class="active">Home</a></li>
       <li><a href="#about">About</a></li>
       <li><a href="#tech-stack">Tech Stack</a></li>
-      <li><a href="services.html">Services</a></li> <!-- New Services link -->
+      <li><a href="#services-preview">Services-Preview</a></li>
+      <li><a href="#visitor-counter">Visitor-Counter</a></li>
       <li><a href="#skills">Skills</a></li>
       <li><a href="#projects">Projects</a></li>
+      <li><a href="services.html">Services</a></li> <!-- New Services link -->
       <li><a href="#contact">Contact</a></li>
     </ul>
     <!-- hamburger icon -->
@@ -104,12 +111,24 @@ <h3>Project Consulting</h3>
       </div>
     </div>
 
-    <div class="services-preview" style="margin-top:20px">
+    <div class="services-preview" style="margin-top:20px; margin-bottom:10px">
       <a href="services.html" target="_blank" class="btn">View All Services</a><br /><br />
       <a href="https://alexfoodcorner.netlify.app/" target="_blank" class="btn">Alex Food Corner Live Project</a>
     </div>
   </section>
 
+  <!-- Visitor Counter Section -->
+  <section id="visitor-counter" class="container fade-in counter-container">
+    <div class="visitor-count-card">
+      <div class="visitor-count">
+        <h2 style="color: #222">Visitor Counter</h2>
+        <h3 style="color: #604848">
+          👋 Total Visitors: <span id="visitorCount">Loading...</span>
+        </h3>
+      </div>
+    </div>
+  </section>
+
   <!-- Skills Section -->
   <section id="skills" class="container fade-in">
     <h2>Skills</h2>
@@ -218,18 +237,6 @@ <h3>Desktop Chat Application (Local Area Network)</h3>
     </div>
   </section><br />
 
-  <!-- Visitor Counter Section -->
-  <section class="container fade-in counter-container">
-    <div class="visitor-count-card">
-      <div class="visitor-count">
-        <h2 style="color: #222">Visitor Counter</h2>
-        <h3 style="color: #604848">
-          👋 Total Visitors: <span id="visitorCount">Loading...</span>
-        </h3>
-      </div>
-    </div>
-  </section><br />
-
   <!-- Contact Section -->
   <section id="contact" class="container fade-in">
     <h2>Contact Me</h2>
diff --git a/services.html b/services.html
index 9449eff..63ebdb1 100644
--- a/services.html
+++ b/services.html
@@ -32,7 +32,13 @@
 <body>
     <!-- Navbar -->
     <nav class="navbar">
-        <div class="logo">Vimal Tech</div>
+        <div>
+            <a href="index.html" class="brand">
+                <img src="/images/logo.jpeg" alt="Brand Logo" class="logo">
+                <span class="brand-name">Vimal Tech</span>
+            </a>
+        </div>
+
         <ul class="nav-links" id="nav-links">
             <li><a href="index.html">Home</a></li>
             <li><a href="services.html" class="active">Services</a></li>