diff --git a/index.html b/index.html
index 6c3f1de..58a184d 100644
--- a/index.html
+++ b/index.html
@@ -15,9 +15,28 @@
 
     body {
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      background: url('public/1a20a0c3fd5129b8be5fa15e37a4d0d6.jpg') no-repeat center center fixed;
+      background-size: cover;
+      background-attachment: fixed;
+      background-position: center center;
+      background-repeat: no-repeat;
+      image-rendering: -webkit-optimize-contrast;
+      image-rendering: crisp-edges;
       min-height: 100vh;
       padding: 20px;
+      position: relative;
+    }
+
+    body::before {
+      content: '';
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.4);
+      z-index: -1;
+      pointer-events: none;
     }
 
     .container {
@@ -25,22 +44,187 @@
       margin: 0 auto;
     }
 
+    /* Navigation Styles */
+    .navbar {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      background: rgba(255, 255, 255, 0.1);
+      backdrop-filter: blur(15px);
+      -webkit-backdrop-filter: blur(15px);
+      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+      z-index: 1000;
+      transition: all 0.3s ease;
+    }
+
+    .nav-container {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 0 20px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      height: 70px;
+    }
+
+    .nav-logo {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 20px;
+      font-weight: 700;
+      color: #fff;
+      text-decoration: none;
+    }
+
+    .logo-icon {
+      font-size: 24px;
+    }
+
+    .nav-menu {
+      display: flex;
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      gap: 30px;
+      align-items: center;
+    }
+
+    .nav-item {
+      margin: 0;
+    }
+
+    .nav-link {
+      color: rgba(255, 255, 255, 0.9);
+      text-decoration: none;
+      font-weight: 500;
+      font-size: 15px;
+      padding: 8px 16px;
+      border-radius: 20px;
+      transition: all 0.3s ease;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+
+    .nav-link:hover {
+      color: #fff;
+      background: rgba(255, 255, 255, 0.1);
+      transform: translateY(-1px);
+    }
+
+    .nav-github {
+      background: rgba(255, 255, 255, 0.15);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+    }
+
+    .nav-github:hover {
+      background: rgba(255, 255, 255, 0.25);
+      transform: translateY(-2px);
+    }
+
+    .github-icon {
+      font-size: 16px;
+    }
+
+    .nav-toggle {
+      display: none;
+      flex-direction: column;
+      cursor: pointer;
+      gap: 4px;
+    }
+
+    .bar {
+      width: 25px;
+      height: 3px;
+      background: #fff;
+      border-radius: 2px;
+      transition: all 0.3s ease;
+    }
+
     header {
       text-align: center;
       color: #fff;
-      padding: 40px 20px;
+      padding: 220px 20px 100px;
+      min-height: 85vh;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
     }
 
     h1 {
-      font-size: 48px;
-      margin-bottom: 10px;
-      font-weight: 700;
+      font-size: 72px;
+      margin-bottom: 20px;
+      font-weight: 800;
+      text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
+      color: #fff;
+      letter-spacing: -1px;
+      line-height: 1.1;
     }
 
     .tagline {
-      font-size: 20px;
-      opacity: 0.9;
-      margin-bottom: 30px;
+      font-size: 28px;
+      opacity: 0.95;
+      margin-bottom: 20px;
+      max-width: 800px;
+      line-height: 1.4;
+      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
+      font-weight: 400;
+    }
+
+    .hero-features {
+      display: flex;
+      flex-wrap: nowrap;
+      gap: 15px;
+      max-width: 1200px;
+      margin: 60px auto 0;
+      padding: 0 20px;
+      overflow-x: auto;
+      justify-content: center;
+    }
+
+    .feature-highlight {
+      background: rgba(255, 255, 255, 0.15);
+      backdrop-filter: blur(10px);
+      border-radius: 12px;
+      padding: 15px 12px;
+      text-align: center;
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      transition: all 0.3s ease;
+      min-width: 160px;
+      flex-shrink: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .feature-highlight:hover {
+      transform: translateY(-5px);
+      background: rgba(255, 255, 255, 0.2);
+      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+    }
+
+    .feature-emoji {
+      font-size: 28px;
+      display: block;
+      margin-bottom: 8px;
+    }
+
+    .feature-highlight h3 {
+      color: #fff;
+      font-size: 14px;
+      font-weight: 600;
+      margin-bottom: 4px;
+    }
+
+    .feature-highlight p {
+      color: rgba(255, 255, 255, 0.9);
+      font-size: 11px;
+      margin: 0;
+      line-height: 1.2;
     }
 
     .badges {
@@ -67,9 +251,14 @@
       border-radius: 16px;
       padding: 30px;
       margin-bottom: 30px;
+      margin-top: 100px;
       box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
     }
 
+    .demo-section:first-of-type {
+      margin-top: 350px;
+    }
+
     .demo-section h2 {
       color: #fff;
       margin-bottom: 20px;
@@ -84,9 +273,10 @@
 
     .demo-grid {
       display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
       gap: 20px;
       margin-top: 20px;
+      padding: 0 10px;
     }
 
     .demo-item {
@@ -94,6 +284,7 @@
       padding: 20px;
       border-radius: 12px;
       text-align: center;
+      width: 100%;
     }
 
     .demo-item h3 {
@@ -195,7 +386,94 @@
       }
 
       .demo-grid {
-        grid-template-columns: 1fr;
+        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+        gap: 15px;
+      }
+
+      .demo-item {
+        width: 100%;
+      }
+
+      .hero-features {
+        flex-wrap: wrap;
+        gap: 10px;
+        margin-top: 30px;
+        justify-content: center;
+      }
+
+      header {
+        padding: 150px 20px 60px;
+        min-height: 75vh;
+      }
+
+      .feature-highlight {
+        padding: 12px 8px;
+        min-width: 130px;
+      }
+
+      .feature-emoji {
+        font-size: 24px;
+      }
+
+      /* Mobile Navigation */
+      .nav-menu {
+        position: fixed;
+        left: -100%;
+        top: 70px;
+        flex-direction: column;
+        background: rgba(0, 0, 0, 0.95);
+        backdrop-filter: blur(20px);
+        width: 100%;
+        text-align: center;
+        transition: 0.3s;
+        padding: 30px 0;
+        gap: 0;
+      }
+
+      .nav-menu.active {
+        left: 0;
+      }
+
+      .nav-item {
+        margin: 10px 0;
+      }
+
+      .nav-link {
+        padding: 15px 20px;
+        font-size: 16px;
+        border-radius: 0;
+        width: 100%;
+        justify-content: center;
+      }
+
+      .nav-toggle {
+        display: flex;
+      }
+
+      .nav-toggle.active .bar:nth-child(2) {
+        opacity: 0;
+      }
+
+      .nav-toggle.active .bar:nth-child(1) {
+        transform: translateY(7px) rotate(45deg);
+      }
+
+      .nav-toggle.active .bar:nth-child(3) {
+        transform: translateY(-7px) rotate(-45deg);
+      }
+
+      header {
+        padding: 220px 20px 80px;
+        min-height: 90vh;
+      }
+
+      h1 {
+        font-size: 48px;
+        letter-spacing: -0.5px;
+      }
+
+      .tagline {
+        font-size: 20px;
       }
     }
 
@@ -251,39 +529,94 @@
 </head>
 <body>
   <div class="container">
+    <!-- Navigation Bar -->
+    <nav class="navbar">
+      <div class="nav-container">
+        <div class="nav-logo">
+          <span class="logo-icon"></span>
+          <span class="logo-text">Social Share</span>
+        </div>
+        <ul class="nav-menu">
+          <li class="nav-item">
+            <a href="#features" class="nav-link">Features</a>
+          </li>
+          <li class="nav-item">
+            <a href="#demo" class="nav-link">Demo</a>
+          </li>
+          <li class="nav-item">
+            <a href="#docs" class="nav-link">Docs</a>
+          </li>
+          <li class="nav-item">
+            <a href="#examples" class="nav-link">Examples</a>
+          </li>
+          <li class="nav-item">
+            <a href="https://github.com/ankitkr104/SocialShareButton" class="nav-link nav-github" target="_blank" rel="noopener">
+              <span class="github-icon">⭐</span>
+              GitHub
+            </a>
+          </li>
+        </ul>
+        <div class="nav-toggle">
+          <span class="bar"></span>
+          <span class="bar"></span>
+          <span class="bar"></span>
+        </div>
+      </div>
+    </nav>
     <header>
-      <h1>🚀 SocialShareButton</h1>
-      <p class="tagline">A lightweight, modern, and highly customizable social sharing component</p>
-      <div class="badges">
-        <span class="badge">📦 Zero Dependencies</span>
-        <span class="badge">⚡ &lt; 10KB</span>
-        <span class="badge">📱 Mobile Ready</span>
-        <span class="badge">♿ Accessible</span>
-        <span class="badge">🎨 Customizable</span>
+      <h1>Social Share Button</h1>
+      <p class="tagline">A lightweight, modern, and highly<br>customizable social sharing component</p>
+      
+      <div class="hero-features">
+        <div class="feature-highlight">
+          <span class="feature-emoji"></span>
+          <h3>Zero Dependencies</h3>
+          <p>No external libraries required</p>
+        </div>
+        <div class="feature-highlight">
+          <span class="feature-emoji"></span>
+          <h3>&lt; 10KB</h3>
+          <p>Lightweight and fast loading</p>
+        </div>
+        <div class="feature-highlight">
+          <span class="feature-emoji"></span>
+          <h3>Mobile Ready</h3>
+          <p>Responsive on all devices</p>
+        </div>
+        <div class="feature-highlight">
+          <span class="feature-emoji"></span>
+          <h3>Accessible</h3>
+          <p>WCAG compliant design</p>
+        </div>
+        <div class="feature-highlight">
+          <span class="feature-emoji"></span>
+          <h3>Customizable</h3>
+          <p>Fully themeable and flexible</p>
+        </div>
       </div>
     </header>
 
     <!-- Features Section -->
-    <div class="demo-section">
-      <h2>✨ Key Features</h2>
+    <div class="demo-section" id="features">
+      <h2>Key Features</h2>
       <div class="feature-grid">
         <div class="feature-card">
-          <div class="feature-icon">🌐</div>
+          <div class="feature-icon"></div>
           <h3>7+ Platforms</h3>
           <p>WhatsApp, Facebook, X, LinkedIn, Telegram, Reddit, Email</p>
         </div>
         <div class="feature-card">
-          <div class="feature-icon">🎨</div>
+          <div class="feature-icon"></div>
           <h3>Themeable</h3>
           <p>Dark and light themes with full CSS customization</p>
         </div>
         <div class="feature-card">
-          <div class="feature-icon">⚙️</div>
+          <div class="feature-icon"></div>
           <h3>Framework Agnostic</h3>
           <p>Works with React, Vue, Angular, or vanilla JS</p>
         </div>
         <div class="feature-card">
-          <div class="feature-icon">📐</div>
+          <div class="feature-icon"></div>
           <h3>Responsive</h3>
           <p>Optimized for all screen sizes</p>
         </div>
@@ -291,8 +624,8 @@ <h3>Responsive</h3>
     </div>
 
     <!-- Button Styles Demo -->
-    <div class="demo-section">
-      <h2>🎨 Button Styles</h2>
+    <div class="demo-section" id="demo">
+      <h2>Button Styles</h2>
       <p>Choose from multiple pre-built styles or create your own</p>
       <div class="demo-grid">
         <div class="demo-item">
@@ -385,7 +718,7 @@ <h3>Messaging</h3>
     </div>
 
     <!-- Quick Start -->
-    <div class="demo-section">
+    <div class="demo-section" id="docs">
       <h2>🚀 Quick Start</h2>
       <p>Get started in seconds with minimal setup</p>
       
@@ -405,7 +738,7 @@ <h2>🚀 Quick Start</h2>
     </div>
 
     <!-- React Example -->
-    <div class="demo-section">
+    <div class="demo-section" id="examples">
       <h2>⚛️ React Integration</h2>
       <p>First-class React support with hooks</p>
       
@@ -590,6 +923,37 @@ <h2 style="color: #fff; margin-bottom: 20px;">Ready to Get Started?</h2>
       buttonText: 'Share'
     });
     });
+
+    // Mobile Navigation Toggle
+    const navToggle = document.querySelector('.nav-toggle');
+    const navMenu = document.querySelector('.nav-menu');
+
+    navToggle.addEventListener('click', () => {
+      navToggle.classList.toggle('active');
+      navMenu.classList.toggle('active');
+    });
+
+    // Close mobile menu when clicking on a link
+    document.querySelectorAll('.nav-link').forEach(link => {
+      link.addEventListener('click', () => {
+        navToggle.classList.remove('active');
+        navMenu.classList.remove('active');
+      });
+    });
+
+    // Smooth scrolling for anchor links
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+      anchor.addEventListener('click', function (e) {
+        e.preventDefault();
+        const target = document.querySelector(this.getAttribute('href'));
+        if (target) {
+          target.scrollIntoView({
+            behavior: 'smooth',
+            block: 'start'
+          });
+        }
+      });
+    });
   </script>
 </body>
 </html>
diff --git a/public/1a20a0c3fd5129b8be5fa15e37a4d0d6.jpg b/public/1a20a0c3fd5129b8be5fa15e37a4d0d6.jpg
new file mode 100644
index 0000000..8a892c2
Binary files /dev/null and b/public/1a20a0c3fd5129b8be5fa15e37a4d0d6.jpg differ
diff --git a/public/b3be0e7f4ed77dcde93fbc0612986bd2.jpg b/public/b3be0e7f4ed77dcde93fbc0612986bd2.jpg
new file mode 100644
index 0000000..42cd39c
Binary files /dev/null and b/public/b3be0e7f4ed77dcde93fbc0612986bd2.jpg differ