diff --git a/package-lock.json b/package-lock.json
index 4227343..cb653de 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -34,6 +34,7 @@
         "react-hotkeys-hook": "^4.4.1",
         "react-i18next": "^14.1.1",
         "react-router-dom": "^6.21.0",
+        "react-tweet": "^3.2.1",
         "url": "^0.11.1",
         "usehooks-ts": "^3.1.0"
       },
@@ -1679,6 +1680,14 @@
         "win32"
       ]
     },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.12",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.12.tgz",
+      "integrity": "sha512-KMZNXiGibsW9kvZAO1Pam2JPTDBm+KSHMMHWdsyI/1DbIZjT2A6Gy3hblVXUMEDvUAKq+e0vL0X0o54owWji7g==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -2410,6 +2419,11 @@
       "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
       "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
     },
+    "node_modules/client-only": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
+      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
+    },
     "node_modules/clsx": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
@@ -5103,6 +5117,28 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/react-tweet": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/react-tweet/-/react-tweet-3.2.1.tgz",
+      "integrity": "sha512-dktP3RMuwRB4pnSDocKpSsW5Hq1IXRW6fONkHhxT5EBIXsKZzdQuI70qtub1XN2dtZdkJWWxfBm/Q+kN+vRYFA==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.3",
+        "clsx": "^2.0.0",
+        "swr": "^2.2.4"
+      },
+      "peerDependencies": {
+        "react": ">= 18.0.0",
+        "react-dom": ">= 18.0.0"
+      }
+    },
+    "node_modules/react-tweet/node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/react-window": {
       "version": "1.8.10",
       "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.10.tgz",
@@ -5610,6 +5646,18 @@
         "node": ">=12.0.0"
       }
     },
+    "node_modules/swr": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-2.2.5.tgz",
+      "integrity": "sha512-QtxqyclFeAsxEUeZIYmsaQ0UjimSq1RZ9Un7I68/0ClKK/U3LoyQunwkQfJZr2fc22DfIXLNDc2wFyTEikCUpg==",
+      "dependencies": {
+        "client-only": "^0.0.1",
+        "use-sync-external-store": "^1.2.0"
+      },
+      "peerDependencies": {
+        "react": "^16.11.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.3.6",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.6.tgz",
@@ -5889,6 +5937,14 @@
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
       "integrity": "sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ=="
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz",
+      "integrity": "sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/usehooks-ts": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-3.1.0.tgz",
diff --git a/package.json b/package.json
index 99810fe..4e1bf2e 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
     "react-hotkeys-hook": "^4.4.1",
     "react-i18next": "^14.1.1",
     "react-router-dom": "^6.21.0",
+    "react-tweet": "^3.2.1",
     "url": "^0.11.1",
     "usehooks-ts": "^3.1.0"
   },
diff --git a/src/assets/screenshot.png b/src/assets/screenshot.png
new file mode 100644
index 0000000..3d14c86
Binary files /dev/null and b/src/assets/screenshot.png differ
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index b84b8ec..6aae11f 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -9,14 +9,14 @@ export default function Navbar() {
 
   return (
     <>
-      <div className="py-5 px-8 sm:px-4 flex justify-between items-center">
-        <div className="flex items-center">
+      <div className="py-4 px-12 sm:px-4 flex justify-between items-center">
+        <div className="flex items-center justify-between w-full">
           <Link to="/">
-            <img src={logo} alt="logo" className="me-2 h-[48px] sm:h-[32px]" />
+            <img src={logo} alt="logo" className="h-[48px] sm:h-[32px]" />
           </Link>
-          <div className="md:hidden flex space-x-6 ml-6">
+          <div className="md:hidden flex gap-12">
             <Link
-              className="text-lg font-semibold hover:text-indigo-700"
+              className="text-lg font-semibold hover:text-sky-800 transition-colors duration-300"
               onClick={() =>
                 document
                   .getElementById("features")
@@ -27,46 +27,46 @@ export default function Navbar() {
             </Link>
             <Link
               to="/editor"
-              className="text-lg font-semibold hover:text-indigo-700"
+              className="text-lg font-semibold hover:text-sky-800 transition-colors duration-300"
             >
               Editor
             </Link>
             <Link
               to="/templates"
-              className="text-lg font-semibold hover:text-indigo-700"
+              className="text-lg font-semibold hover:text-sky-800 transition-colors duration-300"
             >
               Templates
             </Link>
           </div>
-        </div>
-        <div className="md:hidden block space-x-3">
-          <a
-            title="Jump to Github"
-            className="px-3 py-2 bg-zinc-100 hover:opacity-60 transition-all duration-300 rounded-full text-2xl"
-            href="https://github.com/drawdb-io/drawdb"
-            target="_blank"
-            rel="noreferrer"
-          >
-            <i className="opacity-70 bi bi-github" />
-          </a>
-          <a
-            title="Follow us on X"
-            className="px-3 py-2 bg-zinc-100 hover:opacity-60 transition-all duration-300 rounded-full text-2xl"
-            href="https://x.com/drawDB_"
-            target="_blank"
-            rel="noreferrer"
-          >
-            <i className="opacity-70 bi bi-twitter-x" />
-          </a>
-          <a
-            title="Join the community on Discord"
-            className="px-3 py-2 bg-zinc-100 hover:opacity-60 transition-all duration-300 rounded-full text-2xl"
-            href="https://discord.gg/BrjZgNrmR6"
-            target="_blank"
-            rel="noreferrer"
-          >
-            <i className="opacity-70 bi bi-discord" />
-          </a>
+          <div className="md:hidden block space-x-3 ms-12">
+            <a
+              title="Jump to Github"
+              className="px-2 py-2 hover:opacity-60 transition-all duration-300 rounded-full text-2xl"
+              href="https://github.com/drawdb-io/drawdb"
+              target="_blank"
+              rel="noreferrer"
+            >
+              <i className="opacity-70 bi bi-github" />
+            </a>
+            <a
+              title="Follow us on X"
+              className="px-2 py-2 hover:opacity-60 transition-all duration-300 rounded-full text-2xl"
+              href="https://x.com/drawDB_"
+              target="_blank"
+              rel="noreferrer"
+            >
+              <i className="opacity-70 bi bi-twitter-x" />
+            </a>
+            <a
+              title="Join the community on Discord"
+              className="px-2 py-2 hover:opacity-60 transition-all duration-300 rounded-full text-2xl"
+              href="https://discord.gg/BrjZgNrmR6"
+              target="_blank"
+              rel="noreferrer"
+            >
+              <i className="opacity-70 bi bi-discord" />
+            </a>
+          </div>
         </div>
         <button
           onClick={() => setOpenMenu((prev) => !prev)}
diff --git a/src/components/SimpleCanvas.jsx b/src/components/SimpleCanvas.jsx
index 2ea0f58..78a2840 100644
--- a/src/components/SimpleCanvas.jsx
+++ b/src/components/SimpleCanvas.jsx
@@ -28,7 +28,7 @@ function Table({ table, grab }) {
         // Required for onPointerLeave to trigger when a touch pointer leaves
         // https://stackoverflow.com/a/70976017/1137077
         e.target.releasePointerCapture(e.pointerId);
-        
+
         if (!e.isPrimary) return;
 
         grab(e);
@@ -197,7 +197,7 @@ export default function SimpleCanvas({ diagram, zoom }) {
 
   return (
     <svg
-      className="w-full h-full cursor-grab"
+      className="w-full h-full cursor-grab rounded-3xl"
       onPointerUp={(e) => e.isPrimary && releaseTable()}
       onPointerMove={(e) => e.isPrimary && moveTable(e)}
       onPointerLeave={(e) => e.isPrimary && releaseTable()}
diff --git a/src/index.css b/src/index.css
index dba02a3..11a352b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -18,6 +18,15 @@
   }
 }
 
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+  border-color: #ffffff;
+}
+
 .semi-form-vertical .semi-form-field {
   margin: 0;
   padding-top: 8px !important;
@@ -125,3 +134,51 @@
   background-image: radial-gradient(rgb(118, 118, 209) 1px, white 1px);
   background-size: 20px 20px;
 }
+
+.sliding-vertical span {
+  animation: top-to-bottom 9s linear infinite 0s;
+  -ms-animation: top-to-bottom 9s linear infinite 0s;
+  -webkit-animation: top-to-bottom 9s linear infinite 0s;
+  opacity: 0;
+  overflow: hidden;
+  position: absolute;
+}
+
+.sliding-vertical span:nth-child(2) {
+  animation-delay: 3s;
+  -ms-animation-delay: 3s;
+  -webkit-animation-delay: 3s;
+}
+.sliding-vertical span:nth-child(3) {
+  animation-delay: 6s;
+  -ms-animation-delay: 6s;
+  -webkit-animation-delay: 6s;
+}
+
+@keyframes top-to-bottom {
+  0% {
+    opacity: 0;
+  }
+  5% {
+    opacity: 0;
+    transform: translateY(-18px);
+  }
+  10% {
+    opacity: 1;
+    transform: translateY(0px);
+  }
+  25% {
+    opacity: 1;
+    transform: translateY(0px);
+  }
+  30% {
+    opacity: 0;
+    transform: translateY(18px);
+  }
+  80% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 0;
+  }
+}
diff --git a/src/pages/LandingPage.jsx b/src/pages/LandingPage.jsx
index aa33036..daaf7b9 100644
--- a/src/pages/LandingPage.jsx
+++ b/src/pages/LandingPage.jsx
@@ -4,7 +4,6 @@ import { IconCrossStroked } from "@douyinfe/semi-icons";
 import SimpleCanvas from "../components/SimpleCanvas";
 import Navbar from "../components/Navbar";
 import { diagram } from "../data/heroDiagram";
-import { Steps } from "@douyinfe/semi-ui";
 import mysql_icon from "../assets/mysql.png";
 import postgres_icon from "../assets/postgres.png";
 import sqlite_icon from "../assets/sqlite.png";
@@ -12,23 +11,42 @@ import mariadb_icon from "../assets/mariadb.png";
 import sql_server_icon from "../assets/sql-server.png";
 import discord from "../assets/discord.png";
 import github from "../assets/github.png";
+import screenshot from "../assets/screenshot.png";
 import FadeIn from "../animations/FadeIn";
-import SlideIn from "../animations/SlideIn";
+import axios from "axios";
+import { languages } from "../i18n/i18n";
+import { Tweet } from "react-tweet";
+
+function shortenNumber(number) {
+  if (number < 1000) return number;
+
+  if (number >= 1000 && number < 1_000_000)
+    return `${(number / 1000).toFixed(1)}k`;
+}
 
 export default function LandingPage() {
   const [showSurvey, setShowSurvey] = useState(true);
+  const [stats, setStats] = useState({ stars: 18000, forks: 1200 });
 
   useEffect(() => {
+    const fetchStats = async () => {
+      await axios
+        .get("https://api.github-star-counter.workers.dev/user/drawdb-io")
+        .then((res) => setStats(res.data));
+    };
+
     document.body.setAttribute("theme-mode", "light");
     document.title =
       "drawDB | Online database diagram editor and SQL generator";
-  });
+
+    fetchStats();
+  }, []);
 
   return (
     <div>
-      <div className="flex flex-col h-screen">
+      <div className="flex flex-col h-screen bg-zinc-100">
         {showSurvey && (
-          <div className="text-white font-semibold py-1.5 px-4 text-sm text-center bg-gradient-to-r from-slate-700 from-10% via-slate-500 to-slate-700">
+          <div className="text-white font-semibold py-1.5 px-4 text-sm text-center bg-gradient-to-r from-[#12495e] from-10% via-slate-500 to-[#12495e]">
             <Link to="/survey" className="hover:underline">
               Help us improve! Share your feedback.
             </Link>
@@ -39,27 +57,40 @@ export default function LandingPage() {
             </div>
           </div>
         )}
-        <Navbar />
-        <div className="flex-1 flex-col relative">
+        <FadeIn duration={0.6}>
+          <Navbar />
+        </FadeIn>
+
+        {/* Hero section */}
+        <div className="flex-1 flex-col relative mx-4 md:mx-0 mb-4 rounded-3xl bg-white">
           <div className="h-full md:hidden">
             <SimpleCanvas diagram={diagram} zoom={0.85} />
           </div>
-          <div className="hidden md:block h-full bg-dots"></div>
-          <div className="absolute left-12 top-[50%] translate-y-[-50%] md:left-[50%] md:translate-x-[-50%] p-8 md:p-3 md:w-full text-zinc-800 text-center">
+          <div className="hidden md:block h-full bg-dots" />
+          <div className="absolute left-12 w-[45%] top-[50%] translate-y-[-54%] md:left-[50%] md:translate-x-[-50%] p-8 md:p-3 md:w-full text-zinc-800">
             <FadeIn duration={0.75}>
-              <div className="text-4xl font-bold tracking-wide">
-                <h1 className="py-1 bg-gradient-to-r from-slate-700 from-10% via-slate-500 to-slate-700 inline-block text-transparent bg-clip-text">
+              <div className="md:px-3">
+                <h1 className="text-[42px] md:text-3xl font-bold tracking-wide bg-gradient-to-r from-sky-900 from-10% via-slate-500 to-[#12495e] inline-block text-transparent bg-clip-text">
                   Draw, Copy, and Paste
                 </h1>
-              </div>
-              <div className="text-lg font-semibold mt-3">
-                Free, simple, and intuitive database design tool and SQL
-                generator.
+                <div className="text-lg font-medium mt-1 sliding-vertical">
+                  Free and open source, simple, and intuitive database design
+                  editor, data-modeler, and SQL generator.{" "}
+                  <span className="ms-2 sm:block sm:ms-0 text-slate-500 bg-white font-bold whitespace-nowrap">
+                    No sign up
+                  </span>
+                  <span className="ms-2 sm:block sm:ms-0 text-slate-500 bg-white font-bold whitespace-nowrap">
+                    Free of charge
+                  </span>
+                  <span className="ms-2 sm:block sm:ms-0 text-slate-500 bg-white font-bold whitespace-nowrap">
+                    Quick and easy
+                  </span>
+                </div>
               </div>
             </FadeIn>
-            <div className="mt-4 flex gap-4 justify-center font-semibold">
+            <div className="mt-4 flex gap-4 justify-start font-semibold md:block md:mt-12">
               <button
-                className="bg-white shadow-lg px-9 py-2 rounded border border-zinc-200 hover:bg-zinc-100 transition-all duration-300"
+                className="bg-white shadow-lg px-9 py-3 rounded-full border border-zinc-200 hover:bg-zinc-100 transition-all duration-300"
                 onClick={() =>
                   document
                     .getElementById("learn-more")
@@ -70,100 +101,108 @@ export default function LandingPage() {
               </button>
               <Link
                 to="/editor"
-                className="bg-slate-700 text-white px-4 py-2 rounded shadow-lg hover:bg-slate-600 transition-all duration-200"
+                className="md:mt-2 inline-block bg-sky-900 text-white ps-7 pe-6 py-3 rounded-full shadow-lg hover:bg-sky-800 transition-all duration-300"
               >
-                Try it for yourself
+                Try it for yourself <i className="bi bi-arrow-right ms-1"></i>
               </Link>
             </div>
           </div>
         </div>
       </div>
+
+      {/* Learn more */}
       <div id="learn-more">
-        <div className="bg-zinc-100 py-20 px-24 md:px-8 rounded-b-[40px]">
-          <FadeIn duration={1}>
-            <div className="text-2xl text-slate-900 font-bold text-center mb-10 md:hidden">
-              Entity-Relationship diagrams simplified
+        <div className="bg-zinc-100 py-10 px-28 md:px-8">
+          <div className="flex justify-center items-center gap-28 md:block">
+            <div className="text-center mb-4">
+              <div className="text-5xl md:text-3xl font-bold text-sky-800">
+                {shortenNumber(stats.stars)}
+              </div>
+              <div className="ms-1 mt-1 font-medium tracking-wide">
+                GitHub stars
+              </div>
             </div>
-            <div className="md:hidden">
-              <Steps type="basic" current={3}>
-                <Steps.Step
-                  title="Create tables"
-                  description="Define tables with the necessary fields and indices."
-                />
-                <Steps.Step
-                  title="Add relationships"
-                  description="Build relationships by simply dragging"
-                />
-                <Steps.Step
-                  title="Export"
-                  description="Export to your preferred SQL flavor"
-                />
-              </Steps>
+            <div className="text-center mb-4">
+              <div className="text-5xl md:text-3xl font-bold text-sky-800">
+                {shortenNumber(stats.forks)}
+              </div>
+              <div className="ms-1 mt-1 font-medium tracking-wide">
+                GitHub forks
+              </div>
             </div>
-          </FadeIn>
-          <div className="mt-20 text-center w-[75%] sm:w-full mx-auto shadow-sm rounded-lg border p-12 bg-white">
-            <div className="text-2xl font-bold text-slate-900 mb-8">
-              Why drawDB?
+            <div className="text-center mb-4">
+              <div className="text-5xl md:text-3xl font-bold text-sky-800">
+                {shortenNumber(languages.length)}
+              </div>
+              <div className="ms-1 mt-1 font-medium tracking-wide">
+                Languages
+              </div>
             </div>
-            <div className="grid grid-cols-3 gap-4 md:grid-cols-1 h-full">
-              <SlideIn delay={0} duration={0.4} className="h-full">
-                <div className="h-full border rounded-lg p-6 hover:bg-slate-100 transition-all duration-300">
-                  <span className="text-white bg-green-400 rounded-full py-2.5 px-3">
-                    <i className="fa-solid fa-credit-card"></i>
-                  </span>
-                  <div className="mt-6 text-lg font-semibold text-slate-700">
-                    Free
-                  </div>
-                  <div className="text-sm mt-3">
-                    drawDB is completely free of charge.
-                  </div>
-                </div>
-              </SlideIn>
-              <SlideIn delay={1 * 0.4} duration={0.4} className="h-full">
-                <div className="h-full border rounded-lg p-6 hover:bg-slate-100 transition-all duration-300">
-                  <span className="text-white bg-blue-400 rounded-full py-2.5 px-3">
-                    <i className="fa-solid fa-user-xmark"></i>
-                  </span>
-                  <div className="mt-6 text-lg font-semibold text-slate-700">
-                    No registration
-                  </div>
-                  <div className="text-sm mt-3">
-                    No need to sign up or login. Just jump into development.
-                  </div>
-                </div>
-              </SlideIn>
-              <SlideIn delay={2 * 0.4} duration={0.4} className="h-full">
-                <div className="h-full border rounded-lg p-6 hover:bg-slate-100 transition-all duration-300">
-                  <span className="text-white bg-emerald-400 rounded-full py-2.5 px-3">
-                    <i className="fa-regular fa-star "></i>
-                  </span>
-                  <div className="mt-6 text-lg font-semibold text-slate-700">
-                    Simple to use
-                  </div>
-                  <div className="text-sm mt-3">
-                    Intuitive design that&apos;s easy to navigate.
-                  </div>
-                </div>
-              </SlideIn>
+            <div className="w-96 md:w-full h-full md:text-center">
+              <div>
+                Join our community, become one of us. Help us become bigger and
+                better, support us by donating.
+              </div>
+              <a
+                href="https://buymeacoffee.com/drawdb"
+                className="inline-block bg-white hover:bg-zinc-50 transition-all duration-300 rounded-full px-9 py-2.5 shadow mt-2"
+              >
+                Support us{" "}
+                <i className="ms-2 text-rose-600 fa-regular fa-heart"></i>
+              </a>
             </div>
           </div>
+          <div className="mt-16 w-[75%] text-center sm:w-full mx-auto shadow-sm rounded-2xl border p-6 bg-white space-y-3">
+            <div className="text-lg font-medium">
+              Build diagrams with a few clicks, see the full picture, export SQL
+              scripts, customize your editor, and more.
+            </div>
+            <img src={screenshot} className="mx-auto" />
+          </div>
+          <div className="text-lg font-medium text-center mt-12 mb-6">
+            Design for your database
+          </div>
+          <div className="flex justify-center items-center gap-8 md:block">
+            {dbs.map((s, i) => (
+              <img
+                key={"icon-" + i}
+                src={s.icon}
+                style={{ height: s.height }}
+                className="opacity-70 hover:opacity-100 transition-opacity duration-300 md:scale-[0.7] md:mx-auto"
+              />
+            ))}
+          </div>
         </div>
+        <svg
+          viewBox="0 0 1440 54"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          width="100%"
+          className="bg-transparent"
+        >
+          <path
+            d="M0 54C0 54 320 0 720 0C1080 0 1440 54 1440 54V0H0V100Z"
+            fill="#f4f4f5"
+          />
+        </svg>
       </div>
-      <div id="features" className="py-20 px-36 md:px-8">
+
+      {/* Features */}
+      <div id="features" className="py-8 px-36 md:px-8">
         <FadeIn duration={1}>
-          <div className="text-2xl font-bold text-center">
-            Here is what drawDB offers
+          <div className="text-base font-medium text-center text-sky-900">
+            More than just an editor
           </div>
-          <div className="text-sm opacity-75 text-center">
-            More coming soon...
+          <div className="text-2xl mt-1 font-medium text-center">
+            What drawDB has to offer
           </div>
           <div className="grid grid-cols-3 gap-8 mt-10 md:grid-cols-2 sm:grid-cols-1">
             {features.map((f, i) => (
               <div
-                key={i}
-                className="rounded-xl hover:bg-zinc-100 border shadow-sm hover:-translate-y-2 transition-all duration-300"
+                key={"feature" + i}
+                className="flex rounded-xl hover:bg-zinc-100 border border-zinc-100 shadow-sm hover:-translate-y-2 transition-all duration-300"
               >
-                <div className="bg-sky-700 py-1 rounded-t-xl" />
+                <div className="bg-sky-700 px-0.5 rounded-l-xl" />
                 <div className="px-8 py-4 ">
                   <div className="text-lg font-semibold mb-3">{f.title}</div>
                   {f.content}
@@ -174,68 +213,48 @@ export default function LandingPage() {
           </div>
         </FadeIn>
       </div>
-      <div className="bg-zinc-100 py-20 px-32 md:px-8 rounded-t-[40px]">
-        <div className="text-center text-2xl font-bold mb-4">
-          We support these DBMS
+
+      {/* Tweets */}
+      <div className="px-40 mt-6 md:px-8">
+        <div className="text-center text-2xl md:text-xl font-medium">
+          What the internet says about us
         </div>
-        <div className="grid grid-cols-5 place-items-center items-baseline sm:grid-cols-1 sm:gap-4">
-          <img
-            src={mysql_icon}
-            className="opacity-70 hover:opacity-100 transition-all duration-300 h-20"
-          />
-          <img
-            src={postgres_icon}
-            className="opacity-70 hover:opacity-100 transition-all duration-300 h-12"
-          />
-          <img
-            src={sqlite_icon}
-            className="opacity-70 hover:opacity-100 transition-all duration-300 h-16"
-          />
-          <img
-            src={mariadb_icon}
-            className="opacity-70 hover:opacity-100 transition-all duration-300 h-16"
-          />
-          <img
-            src={sql_server_icon}
-            className="opacity-70 hover:opacity-100 transition-all duration-300 h-16"
-          />
+        <div
+          data-theme="light"
+          className="grid grid-cols-2 place-items-center md:grid-cols-1"
+        >
+          <Tweet id="1816111365125218343" />
+          <Tweet id="1817933406337905021" />
+          <Tweet id="1785457354777006524" />
+          <Tweet id="1776842268042756248" />
         </div>
-        <div className="mt-16 mb-2 text-2xl font-bold text-center">
+      </div>
+
+      {/* Contact us */}
+      <svg
+        viewBox="0 0 1440 54"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        width="100%"
+        className="bg-transparent -scale-100"
+      >
+        <path
+          d="M0 48 C0 48 320 0 720 0C1080 0 1440 48 1440 48V0H0V100Z"
+          fill="#f4f4f5"
+        />
+      </svg>
+      <div className="bg-zinc-100 py-8 px-32 md:px-8">
+        <div className="mt-4 mb-2 text-2xl font-bold text-center">
           Reach out to us
         </div>
         <div className="text-lg text-center mb-4">
-          Your feedback is important to us. Share your thoughts and help us
-          improve.
+          We love hearing from you. Join our community on Discord, GitHub, and
+          X.
         </div>
         <div className="px-36 text-center md:px-8">
-          <div className="w-full flex gap-8 sm:block">
-            <Link
-              to="/survey"
-              className="w-full flex items-center gap-2 font-semibold justify-center bg-white shadow-lg px-9 py-2 rounded border border-zinc-200 hover:bg-zinc-100 transition-all duration-300"
-            >
-              <div>Take a survey</div>
-              <i className="bi bi-arrow-right"></i>
-            </Link>
-            <Link
-              to="/bug-report"
-              className="sm:mt-2 w-full flex items-center gap-2 font-semibold justify-center bg-white shadow-lg px-9 py-2 rounded border border-zinc-200 hover:bg-zinc-100 transition-all duration-300"
-            >
-              <div>Report a bug</div>
-              <i className="bi bi-arrow-right"></i>
-            </Link>
-          </div>
-          <div className="mt-10">
-            Connect with us at
+          <div className="md:block md:space-y-3 flex gap-3 justify-center">
             <a
-              href="mailto:drawdb@outlook.com"
-              className="text-blue-500 font-semibold hover:underline ms-1.5"
-            >
-              drawdb@outlook.com
-            </a>
-          </div>
-          <div className="sm:block flex gap-3 justify-center">
-            <a
-              className="inline-block mt-2"
+              className="inline-block"
               href="https://github.com/drawdb-io/drawdb"
               target="_blank"
               rel="noreferrer"
@@ -248,7 +267,7 @@ export default function LandingPage() {
               </div>
             </a>
             <a
-              className="inline-block mt-2"
+              className="inline-block"
               href="https://discord.gg/BrjZgNrmR6"
               target="_blank"
               rel="noreferrer"
@@ -260,9 +279,35 @@ export default function LandingPage() {
                 </div>
               </div>
             </a>
+            <a
+              className="inline-block"
+              href="https://discord.gg/BrjZgNrmR6"
+              target="_blank"
+              rel="noreferrer"
+            >
+              <div className="text-white bg-zinc-800 hover:opacity-90 transition-all duration-300 flex items-center gap-4 px-12 py-4 rounded-lg">
+                <i className="text-2xl bi bi-twitter-x" />
+                <div className="text-lg  font-bold">Follow us on X</div>
+              </div>
+            </a>
+          </div>
+          <div className="my-8">
+            <div>
+              If you&apos;re finding drawDB useful and would like to help us in
+              improving and adding new features, consider making a donation.
+            </div>
+            <div>Your support means a lot to us!</div>
+            <a
+              href="https://buymeacoffee.com/drawdb"
+              className="inline-block bg-white hover:bg-zinc-50 transition-all duration-300 rounded-full px-16 py-2.5 shadow mt-2"
+            >
+              Support us{" "}
+              <i className="ms-2 text-rose-600 fa-regular fa-heart"></i>
+            </a>
           </div>
         </div>
       </div>
+
       <div className="bg-red-700 py-1 text-center text-white text-xs font-semibold px-3">
         Attention! The diagrams are saved in your browser. Before clearing the
         browser make sure to back up your data.
@@ -275,6 +320,14 @@ export default function LandingPage() {
   );
 }
 
+const dbs = [
+  { icon: mysql_icon, height: 80 },
+  { icon: postgres_icon, height: 48 },
+  { icon: sqlite_icon, height: 64 },
+  { icon: mariadb_icon, height: 64 },
+  { icon: sql_server_icon, height: 64 },
+];
+
 const features = [
   {
     title: "Export",
@@ -373,7 +426,7 @@ const features = [
     content: (
       <div>
         Add custom types for object-relational databases, or create custom JSON
-        schemes and alias types.
+        schemes.
       </div>
     ),
     footer: "",