diff --git a/foto/icons8-apple-inc-50.png b/foto/icons8-apple-inc-50.png
new file mode 100644
index 0000000..56ef21c
Binary files /dev/null and b/foto/icons8-apple-inc-50.png differ
diff --git a/foto/icons8-linux-50.png b/foto/icons8-linux-50.png
new file mode 100644
index 0000000..769bda0
Binary files /dev/null and b/foto/icons8-linux-50.png differ
diff --git a/foto/icons8-windows-50.png b/foto/icons8-windows-50.png
new file mode 100644
index 0000000..5c9ad94
Binary files /dev/null and b/foto/icons8-windows-50.png differ
diff --git a/foto/photo_6114138241281147881_y.jpg b/foto/photo_6114138241281147881_y.jpg
new file mode 100644
index 0000000..7b806bd
Binary files /dev/null and b/foto/photo_6114138241281147881_y.jpg differ
diff --git a/index.html b/index.html
index eb46a6c..077b8e9 100644
--- a/index.html
+++ b/index.html
@@ -18,14 +18,16 @@
 <body>
     <header class="header">
     <nav class="nav-container">
-        <a href="#" class="logo">
+        <a href="index.html" class="logo">
             <img src="foto/logo (1).png" alt="Tabular Logo">
+            <span class="logo-text">Tabular</span>
         </a>
         <ul class="nav-menu" id="navMenu">
             <li><a href="#fitur" class="nav-link">Fitur</a></li>
             <li><a href="#database" class="nav-link">Support</a></li>
-            <li><a href="#demo" class="nav-link">Demo</a></li>
-            <li><a href="#kontak" class="nav-link">Kontak</a></li>
+            <li><a href="#docs" class="nav-link">Docs</a></li>
+            <li><a href="#download" class="nav-link">Download</a></li>
+            <li><a href="#about" class="nav-link">About</a></li>
         </ul>
         <div class="menu-toggle" id="menuToggle">
             <span></span>
@@ -36,11 +38,13 @@
 </header>
         <section class="hero">
         <div class="hero-content">
-            <h1 id="heroTitle">Database Management Made Easy</h1>
+            <h1 id="heroTitle">Tabular Make Easy For Analytics Database</h1>
             <p id="heroDesc">Modern, native, and friendly GUI tool for relational databases: MySQL, PostgreSQL, SQLite & more.</p>
             <div class="cta-buttons">
-                <button class="cta-button primary" id="ctaButtonMac">Download for Mac</button>
-                <button class="cta-button secondary" id="ctaButtonOther">Other Platforms</button>
+                 <button class="cta-button primary" id="ctaButtonMac" onclick="window.location.href='https://github.com/tabular-id/tabular/releases/download/v0.2.3/Tabular-0.2.3.dmg'">Download for Mac</button>
+                 <a href="#download">
+                 <button class="cta-button secondary" id="ctaButtonOther">Other Platforms</button>
+                 </a>
             </div>
         </div>
         <div class="hero-image">
@@ -115,12 +119,6 @@ <h4>MySQL</h4>
         </div>
         <h4>PostgreSQL</h4>
     </div>
-    <div class="db-card" data-db="MongoDB">
-        <div class="db-icon">
-            <img src="foto/mongodb.png" alt="">
-        </div>
-        <h4>MongoDB</h4>
-    </div>
     <div class="db-card" data-db="SQLite">
         <div class="db-icon">
             <img src="foto/sqlite.png" alt="SQLite">
@@ -133,63 +131,21 @@ <h4>SQLite</h4>
         </div>
         <h4>Redis</h4>
     </div>
-    <div class="db-card" data-db="Oracle">
-        <div class="db-icon">
-            <img src="foto/oracle.png" alt="Oracle">
-        </div>
-        <h4>Oracle</h4>
-    </div>
     <div class="db-card" data-db="microsoftsqlserver">
         <div class="db-icon">
             <img src="foto/microsoftsqlserver.png" alt="microsoftsqlserver">
         </div>
         <h4>SQL Server</h4>
     </div>
-    <div class="db-card" data-db="mariadb">
-        <div class="db-icon">
-            <img src="foto/mariadb.png" alt="mariadb">
-        </div>
-        <h4>Maria DB</h4>
-    </div>
-    <div class="db-card" data-db="Amazon">
+        <div class="db-card" data-db="MongoDB">
         <div class="db-icon">
-            <img src="foto/amazonredshift.png" alt="Amazon">
-        </div>
-        <h4>Amazon Red Shift</h4>
-    </div>
-    <div class="db-card" data-db="Cockroach">
-        <div class="db-icon">
-            <img src="foto/cockroachdb.png" alt="Cockroach">
-        </div>
-        <h4>Cockroach DB</h4>
-    </div>
-    <div class="db-card" data-db="Cassandra">
-        <div class="db-icon">
-            <img src="foto/cassandra.png" alt="Cassandra">
-        </div>
-        <h4>Cassandra</h4>
-    </div>
-    <div class="db-card" data-db="bigquery">
-        <div class="db-icon">
-            <img src="foto/bigquery.png" alt="bigquery">
-        </div>
-        <h4>Big Query</h4>
-    </div>
-    <div class="db-card" data-db="clickhouse">
-        <div class="db-icon">
-            <img src="foto/clickhouse.png" alt="clickhouse">
-        </div>
-        <h4>Click House</h4>
-    </div>
-    <div class="db-card" data-db="Turso">
-        <div class="db-icon">
-            <img src="foto/tursodb.png" alt="Turso">
+            <img src="foto/mongodb.png" alt="">
         </div>
-        <h4>Turso DB</h4>
+        <h4>MongoDB Coming Soon</h4>
     </div>
 </div>
 </section>
-    <section class="screenshots-section" id="demo">
+    <section class="screenshots-section" id="docs">
     <h2 class="section-title">See Tabular in Action</h2>
     <div class="screenshots-grid">
         <div class="screenshot-card">
@@ -208,7 +164,7 @@ <h3>Query Management Made Simple</h3>
             <p>This view shows a list of SQL query files neatly organized into folders such as ADMIN, DATA, and VOLT. Each file contains ready-to-execute SQL commands for various database needs.</p>
         </div>
         <div class="screenshot-card">
-            <img src="foto/photo_6102487347921797599_y.jpg" alt="Quick Actions for Your Data" onclick="openLightbox(this.src)">
+            <img src="foto/photo_6114138241281147881_y.jpg" alt="Quick Actions for Your Data" onclick="openLightbox(this.src)">
             <h3>Quick Actions for Your Data</h3>
             <p>This view shows the right-click feature on table data, which allows users to copy cells, copy rows as CSV, or directly export to a CSV/XLSX file.</p>
         </div>
@@ -217,19 +173,44 @@ <h3>Quick Actions for Your Data</h3>
       <img src="" alt="Preview">
     </div>
 </section>
-    <footer class="footer" id="kontak">
-        <div class="footer-content">
-            <div class="social-links">
-                <a href="#" class="social-link">📱</a>
-                <a href="#" class="social-link">💬</a>
-                <a href="#" class="social-link">📧</a>
-                <a href="#" class="social-link">🐙</a>
+ <section id="download">
+        <h2>Download for Your Platform</h2>
+        <div class="platforms">
+            <div class="platform">
+                <img src="foto/icons8-windows-50.png" alt="Windows">
+                <h3>Windows</h3>
+                <button class="platform-button primary" onclick="window.location.href='https://github.com/tabular-id/tabular/releases/download/v0.2.2/Tabular-0.2.2.exe'">Download</button>
+            </div>
+            <div class="platform">
+                <img src="foto/icons8-apple-inc-50.png" alt="macOS">
+                <h3>macOS</h3>
+                <button class="platform-button primary" onclick="window.location.href='https://github.com/tabular-id/tabular/releases/download/v0.2.3/Tabular-0.2.3.dmg'">Download</button>
             </div>
-            <p>&copy; 2025 Tabular. Dibuat dengan ❤️ untuk generasi digital natives.</p>
-            <p style="margin-top: 0.5rem; opacity: 0.8;">Open source • Community driven • Privacy focused</p>
+            <div class="platform">
+                <img src="foto/icons8-linux-50.png" alt="Linux">
+                <h3>Linux</h3>
+                <button class="platform-button primary" onclick="window.location.href=''">Download</button>
+            </div>
+        </div>
+    </section>
+    
+    <section class="about-tabular" id="kontak">
+        <div class="logo">
+            <img src="foto/logo (1).png" alt="Tabular Logo">
+        </div>
+        <h2>About Tabular</h2>
+        <p>Your SQL Editor, Forged with Rust: Fast, Safe, Efficient.</p>
+        <div class="version-info">
+            Version 0.2.2<br>
+            Built with ❤️ using Rust
         </div>
-    </footer>
-    <script src="main.js"></script>     <script>function openLightbox(src) {
+        <a href="https://github.com/tabular-id/tabular" class="github-link">https://github.com/tabular-id/tabular</a>
+        <p class="credit">Credit: Jayuda</p>
+        <p class="copyright">© 2025 PT. Vneu Teknologi Indonesia</p>
+    </section>
+    <script src="main.js"></script>
+    
+    <script>function openLightbox(src) {
       const lightbox = document.getElementById("lightbox");
       lightbox.querySelector("img").src = src;
       lightbox.classList.add("active");
diff --git a/main.js b/main.js
index 310a95d..25dd92c 100644
--- a/main.js
+++ b/main.js
@@ -23,8 +23,9 @@ document.addEventListener("DOMContentLoaded", function () {
     ease: "back.out(1.5)",
   });
 
-  gsap.utils.toArray('.section-title').forEach(title => {
-    gsap.fromTo(title, 
+  gsap.utils.toArray(".section-title").forEach((title) => {
+    gsap.fromTo(
+      title,
       { opacity: 0, y: 30 },
       {
         opacity: 1,
@@ -33,14 +34,15 @@ document.addEventListener("DOMContentLoaded", function () {
         scrollTrigger: {
           trigger: title,
           start: "top 80%",
-          toggleActions: "play none none reverse"
-        }
+          toggleActions: "play none none reverse",
+        },
       }
     );
   });
 
-  gsap.utils.toArray('.feature-card').forEach((card, i) => {
-    gsap.fromTo(card,
+  gsap.utils.toArray(".feature-card").forEach((card, i) => {
+    gsap.fromTo(
+      card,
       { opacity: 0, y: 30 },
       {
         opacity: 1,
@@ -50,14 +52,15 @@ document.addEventListener("DOMContentLoaded", function () {
         scrollTrigger: {
           trigger: card,
           start: "top 85%",
-          toggleActions: "play none none reverse"
-        }
+          toggleActions: "play none none reverse",
+        },
       }
     );
   });
 
-  gsap.utils.toArray('.screenshot-card').forEach((card, i) => {
-    gsap.fromTo(card,
+  gsap.utils.toArray(".screenshot-card").forEach((card, i) => {
+    gsap.fromTo(
+      card,
       { opacity: 0, y: 40 },
       {
         opacity: 1,
@@ -68,14 +71,15 @@ document.addEventListener("DOMContentLoaded", function () {
         scrollTrigger: {
           trigger: card,
           start: "top 85%",
-          toggleActions: "play none none reverse"
-        }
+          toggleActions: "play none none reverse",
+        },
       }
     );
   });
 
-  gsap.utils.toArray('.db-card').forEach((card, i) => {
-    gsap.fromTo(card,
+  gsap.utils.toArray(".db-card").forEach((card, i) => {
+    gsap.fromTo(
+      card,
       { opacity: 0, scale: 0.9 },
       {
         opacity: 1,
@@ -86,8 +90,71 @@ document.addEventListener("DOMContentLoaded", function () {
         scrollTrigger: {
           trigger: card,
           start: "top 85%",
-          toggleActions: "play none none reverse"
-        }
+          toggleActions: "play none none reverse",
+        },
+      }
+    );
+  });
+
+  gsap.utils.toArray(".platform").forEach((platform, i) => {
+    gsap.fromTo(
+      platform,
+      { opacity: 0, y: 30 },
+      {
+        opacity: 1,
+        y: 0,
+        duration: 0.8,
+        delay: i * 0.15,
+        ease: "power2.out",
+        scrollTrigger: {
+          trigger: platform,
+          start: "top 85%",
+          toggleActions: "play none none reverse",
+        },
+      }
+    );
+  });
+
+  const aboutSection = document.querySelector(".about-tabular");
+  const aboutElements = [
+    aboutSection.querySelector(".logo"),
+    aboutSection.querySelector("h2"),
+    aboutSection.querySelector("p"),
+    aboutSection.querySelector(".version-info"),
+    aboutSection.querySelector(".github-link"),
+    aboutSection.querySelector(".credit"),
+    aboutSection.querySelector(".copyright"),
+  ];
+
+  gsap.fromTo(
+    aboutSection,
+    { opacity: 0 },
+    {
+      opacity: 1,
+      duration: 1,
+      scrollTrigger: {
+        trigger: aboutSection,
+        start: "top 80%",
+        toggleActions: "play none none reverse",
+      },
+    }
+  );
+
+  aboutElements.forEach((element, i) => {
+    gsap.fromTo(
+      element,
+      { opacity: 0, y: 20 },
+      {
+        opacity: 1,
+        y: 0,
+        duration: 0.6,
+        delay: i * 0.1,
+        ease: "power2.out",
+        scrollTrigger: {
+          trigger: aboutSection,
+          start: "top 80%",
+          toggleActions: "play none none reverse",
+        },
       }
     );
   });
@@ -110,16 +177,16 @@ document.addEventListener("DOMContentLoaded", function () {
     }
   });
 
-  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+  document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
     anchor.addEventListener("click", function (e) {
       e.preventDefault();
       const target = document.querySelector(this.getAttribute("href"));
       if (target) {
         window.scrollTo({
           top: target.offsetTop - 90,
-          behavior: "smooth"
+          behavior: "smooth",
         });
-        
+
         navMenu.classList.remove("active");
         const spans = menuToggle.querySelectorAll("span");
         spans[0].style.transform = "none";
@@ -128,4 +195,4 @@ document.addEventListener("DOMContentLoaded", function () {
       }
     });
   });
-});
\ No newline at end of file
+});
diff --git a/style.css b/style.css
index 328306b..f28825b 100644
--- a/style.css
+++ b/style.css
@@ -5,7 +5,7 @@
 }
 
 body {
-  font-family: 'Inter', sans-serif;
+  font-family: "Inter", sans-serif;
   background-color: #f8fafc;
   color: #1e293b;
   line-height: 1.6;
@@ -27,6 +27,7 @@ body {
 }
 
 .nav-container {
+  height: 50px;
   max-width: 1200px;
   margin: 0 auto;
   display: flex;
@@ -35,14 +36,26 @@ body {
 }
 
 .logo img {
-  height: 40px;
+  height: 85px;
   transition: transform 0.3s ease;
 }
 
 .logo:hover img {
   transform: scale(1.03);
 }
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
 
+.logo-text {
+  font-family: "Montserrat", sans-serif;
+  font-size: 1.8rem;
+  font-weight: 700;
+  color: #1e293b;
+  letter-spacing: -0.5px;
+}
 .nav-menu {
   display: flex;
   list-style: none;
@@ -59,7 +72,7 @@ body {
 }
 
 .nav-link::after {
-  content: '';
+  content: "";
   position: absolute;
   bottom: -6px;
   left: 0;
@@ -108,7 +121,15 @@ body {
 }
 
 .hero-content h1 {
-  font-family: 'Montserrat', sans-serif;
+  font-family: "Montserrat", sans-serif;
+  font-size: 3.5rem;
+  font-weight: 700;
+  color: #1e293b;
+  margin-bottom: 1.2rem;
+}
+
+.hero-download h1 {
+  font-family: "Montserrat";
   font-size: 3.5rem;
   font-weight: 700;
   color: #1e293b;
@@ -172,7 +193,7 @@ body {
 
 .section-title {
   text-align: center;
-  font-family: 'Montserrat', sans-serif;
+  font-family: "Montserrat", sans-serif;
   font-size: 2.2rem;
   font-weight: 600;
   color: #1e293b;
@@ -282,7 +303,7 @@ body {
 
 .section-title {
   text-align: center;
-  font-family: 'Montserrat', sans-serif;
+  font-family: "Montserrat", sans-serif;
   font-size: 2.2rem;
   font-weight: 600;
   color: #1e293b;
@@ -339,67 +360,92 @@ body {
 }
 
 .lightbox {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: rgba(0, 0, 0, 0.8);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      visibility: hidden;
-      opacity: 0;
-      transition: opacity 0.3s ease;
-      z-index: 999;
-    }
-    .lightbox.active {
-      visibility: visible;
-      opacity: 1;
-    }
-    .lightbox img {
-      max-width: 90%;
-      max-height: 90%;
-      border-radius: 10px;
-    }
-
-.footer {
-  background-color: white;
-  padding: 4rem 1rem 2rem;
-  border-top: 1px solid #e2e8f0;
-  text-align: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.8);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  z-index: 999;
+}
+.lightbox.active {
+  visibility: visible;
+  opacity: 1;
+}
+.lightbox img {
+  max-width: 90%;
+  max-height: 90%;
+  border-radius: 10px;
 }
 
-.footer-content {
-  max-width: 600px;
-  margin: 0 auto;
+.about-tabular {
+  padding: 4rem 0;
+  text-align: center;
+  background-color: #1e293b;
+  color: white;
 }
 
-.social-links {
-  margin-bottom: 1.5rem;
+.about-tabular .logo {
+  width: 100px;
+  height: 100px;
+  margin: 0 auto 2rem;
   display: flex;
   justify-content: center;
-  gap: 1.5rem;
-  font-size: 1.8rem;
+  align-items: center;
+  border-radius: 50%;
+  background-color: white;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
-.social-link {
-  color: #64748b;
-  text-decoration: none;
-  transition: color 0.3s ease, transform 0.2s ease;
+.about-tabular .logo img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
 }
 
-.social-link:hover {
+.about-tabular h2 {
+  font-family: "Montserrat", sans-serif;
+  font-size: 2.2rem;
+  font-weight: 600;
+  margin-bottom: 1rem;
+}
+
+.about-tabular p {
+  font-size: 1.1rem;
+  margin-bottom: 1rem;
+}
+
+.about-tabular .version-info {
+  font-size: 1.1rem;
+  margin-bottom: 1rem;
+}
+
+.about-tabular .github-link {
+  display: inline-block;
+  font-size: 1rem;
+  text-decoration: none;
   color: #4c6ef5;
-  transform: scale(1.1) translateY(-2px);
+  transition: color 0.3s ease;
 }
 
-.footer p {
-  color: #64748b;
-  font-size: 0.95rem;
-  margin: 0.5rem 0;
+.about-tabular .github-link:hover {
+  color: #3a5175;
+}
+
+.about-tabular .credit {
+  font-size: 0.9rem;
+  margin-bottom: 1rem;
 }
 
+.about-tabular .copyright {
+  font-size: 0.9rem;
+}
 @media (max-width: 992px) {
   .hero {
     flex-direction: column;
@@ -448,3 +494,82 @@ body {
     font-size: 2rem;
   }
 }
+#download {
+  padding: 4rem 0;
+  text-align: center;
+}
+#download h2 {
+  font-family: "Montserrat", sans-serif;
+  font-size: 2.2rem;
+  font-weight: 600;
+  color: #1e293b;
+  margin-bottom: 3rem;
+}
+.platforms {
+  display: flex;
+  justify-content: center;
+  gap: 2rem;
+  margin-top: 2rem;
+  flex-wrap: wrap;
+}
+
+.platform {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.5rem;
+  padding: 2rem;
+  border-radius: 12px;
+  background: white;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  border: 1px solid #e2e8f0;
+  transition: transform 0.3s ease;
+  max-width: 220px;
+}
+
+.platform:hover {
+  transform: translateY(-6px);
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
+}
+
+.platform img {
+  width: 48px;
+  height: 48px;
+}
+
+.platform h3 {
+  font-size: 1.3rem;
+  color: #1e293b;
+  margin: 0;
+}
+
+.platform a {
+  text-decoration: none;
+}
+
+.platform-button {
+  padding: 12px 24px;
+  font-size: 1rem;
+  font-weight: 600;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  width: 100%;
+}
+
+.platform-button.primary {
+  background-color: #4c6ef5;
+  color: white;
+}
+
+.platform-button.secondary {
+  background-color: white;
+  color: #4c6ef5;
+  border: 2px solid #4c6ef5;
+}
+
+.platform-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 15px rgba(76, 110, 245, 0.2);
+}
