diff --git a/package-lock.json b/package-lock.json
index b10c05a..e5f7379 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,7 +24,7 @@
         "eslint-plugin-vitest": "^0.5.4",
         "espree": "^10.3.0",
         "globals": "^15.13.0",
-        "gsap": "^3.12.5",
+        "gsap": "^3.13.0",
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
         "jsdom": "^25.0.1",
@@ -6955,10 +6955,10 @@
       "license": "MIT"
     },
     "node_modules/gsap": {
-      "version": "3.12.7",
-      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.12.7.tgz",
-      "integrity": "sha512-V4GsyVamhmKefvcAKaoy0h6si0xX7ogwBoBSs2CTJwt7luW0oZzC0LhdkyuKV8PJAXr7Yaj8pMjCKD4GJ+eEMg==",
-      "license": "Standard 'no charge' license: https://gsap.com/standard-license. Club GSAP members get more: https://gsap.com/licensing/. Why GreenSock doesn't employ an MIT license: https://gsap.com/why-license/"
+      "version": "3.13.0",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.13.0.tgz",
+      "integrity": "sha512-QL7MJ2WMjm1PHWsoFrAQH/J8wUeqZvMtHO58qdekHpCfhvhSL4gSiz6vJf5EeMP0LOn3ZCprL2ki/gjED8ghVw==",
+      "license": "Standard 'no charge' license: https://gsap.com/standard-license."
     },
     "node_modules/has-flag": {
       "version": "4.0.0",
diff --git a/package.json b/package.json
index 9c3ff58..de4f7e9 100644
--- a/package.json
+++ b/package.json
@@ -79,7 +79,7 @@
     "eslint-plugin-vitest": "^0.5.4",
     "espree": "^10.3.0",
     "globals": "^15.13.0",
-    "gsap": "^3.12.5",
+    "gsap": "^3.13.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jsdom": "^25.0.1",
diff --git a/src/lib/assets/images/landing/user1.png b/src/lib/assets/images/landing/user1.png
index 18c6bd1..c93de52 100644
Binary files a/src/lib/assets/images/landing/user1.png and b/src/lib/assets/images/landing/user1.png differ
diff --git a/src/lib/assets/images/landing/user2.png b/src/lib/assets/images/landing/user2.png
index b301cfc..18f0665 100644
Binary files a/src/lib/assets/images/landing/user2.png and b/src/lib/assets/images/landing/user2.png differ
diff --git a/src/lib/assets/images/landing/video.jpg b/src/lib/assets/images/landing/video.jpg
new file mode 100644
index 0000000..38775cc
Binary files /dev/null and b/src/lib/assets/images/landing/video.jpg differ
diff --git a/src/lib/components/main/navbar/navbar.svelte b/src/lib/components/main/navbar/navbar.svelte
index a3c08f5..df55df0 100644
--- a/src/lib/components/main/navbar/navbar.svelte
+++ b/src/lib/components/main/navbar/navbar.svelte
@@ -24,7 +24,7 @@
     <div class="flex min-h-[80px] w-full max-w-[1280px] items-center justify-between gap-10">
         <div class="my-auto flex items-center gap-1.5 self-stretch whitespace-nowrap text-2xl">
             <a href={user ? "/home" : "/"}>
-                <LogoHorizontal class="h-full w-full" />
+                <LogoHorizontal class="h-full min-h-6 w-full min-w-28" />
             </a>
         </div>
         <div class="flex space-x-2">
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 4e7449c..96a20c0 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -4,6 +4,7 @@
     import { gsap } from "gsap";
     import { TextPlugin } from "gsap/TextPlugin";
     import { ScrollTrigger } from "gsap/ScrollTrigger";
+    import * as Dialog from "$components/ui/dialog";
     import { cn } from "$lib/utils";
 
     gsap.registerPlugin(TextPlugin);
@@ -11,6 +12,7 @@
 
     import User1 from "$assets/images/landing/user1.png?enhanced";
     import User2 from "$assets/images/landing/user2.png?enhanced";
+    import VideoImg from "$assets/images/landing/video.jpg?enhanced";
     import {
         AbiltiesImg,
         LangsImg,
@@ -21,6 +23,7 @@
     } from "$assets/images/landing";
 
     import { Button } from "$components/ui/button";
+    import { Play } from "lucide-svelte";
     import ScrollUpButton from "$components/misc/scroll-up-button.svelte";
 
     // let { data }: PageProps = $props();
@@ -84,7 +87,6 @@
             text: "magic",
             ease: "none"
         });
-
         gsap.from([img1, img2], {
             opacity: 0,
             y: 20,
@@ -108,7 +110,7 @@
 </script>
 
 <section class="relative mb-12 flex flex-col items-center">
-    <div class="mb-8 mt-20 flex flex-col items-center md:mt-24">
+    <div class="mb-1 mt-20 flex flex-col items-center md:mb-8 md:mt-24">
         <h1 class="clip-path-inset absolute h-px w-px overflow-hidden whitespace-nowrap">
             Head-to-head coding battle with magic
         </h1>
@@ -116,17 +118,14 @@
             aria-hidden="true"
             class={cn(
                 mounted ? "" : "opacity-0",
-                "hero-title relative mb-4 flex h-32 flex-col gap-2 text-center text-5xl font-semibold text-neutral-100 md:mb-0 md:text-6xl"
+                "hero-title relative mb-4 flex flex-col gap-2 text-center text-4xl font-semibold text-neutral-100 sm:text-5xl md:mb-0 md:max-w-[875px] md:text-6xl"
             )}
         >
             <div>
                 <span class="word-1 inline-block">Head-to-head</span>
                 <span class="word-2 inline-block">coding</span>
                 <span class="word-3 inline-block">battle</span>
-            </div>
-            <div class="flex w-full justify-center">
                 <span class="word-4 inline-block">with</span>
-                &nbsp;
                 <span
                     class="word-5 mt-1 inline-block rounded-sm bg-rose/10 px-2 font-mono
                          text-rose shadow-rose text-shadow-center md:mt-1.5"
@@ -134,7 +133,7 @@
             </div>
         </div>
     </div>
-    <Button class="text-md font-medium lg:text-lg" href="/practice">Play now</Button>
+    <Button class="play-button text-md font-medium lg:text-lg" href="/practice">Play now</Button>
     <div
         class={cn(
             mounted ? "" : "opacity-0",
@@ -156,29 +155,52 @@
     </div>
 </section>
 
-<section class="mb-12 flex flex-col items-center overflow-hidden">
-    <div class="mb-6 flex flex-col items-center">
-        <h2 class="font-icon text-4xl">How to play?</h2>
+<section class="mb-12 flex flex-col items-center">
+    <div class="mb-4 flex flex-col items-center md:mb-6">
+        <h2 class="font-icon text-3xl md:text-4xl">How to play?</h2>
     </div>
-    <iframe
-        src="https://www.youtube.com/embed/O7C7Tl8N2rY?si=ZAHdwBFe4OrhlUMm"
-        class="aspect-video max-w-xl"
-        width="100%"
-        height="100%"
-        title="YouTube video player"
-        frameborder="0"
-        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-        referrerpolicy="strict-origin-when-cross-origin"
-        allowfullscreen
-    ></iframe>
+    <Dialog.Root>
+        <Dialog.Trigger
+            aria-label="Demo Video"
+            class="group relative mx-auto max-w-xl cursor-pointer rounded-lg shadow-lg transition-transform"
+        >
+            <enhanced:img
+                src={VideoImg}
+                alt="How to play video thumbnail"
+                class="aspect-video w-full rounded-xl object-cover"
+            />
+            <div class="absolute inset-0 flex items-center justify-center bg-black/20">
+                <div
+                    class="flex h-16 w-16 items-center justify-center rounded-full bg-white/90 shadow-lg transition-all hover:scale-125 hover:bg-white group-hover:scale-125"
+                >
+                    <Play class="ml-1 h-8 w-8 fill-black text-black" />
+                </div>
+            </div>
+        </Dialog.Trigger>
+        <Dialog.Content class="max-h-screen overflow-auto sm:max-w-4xl">
+            <div class="mt-4">
+                <iframe
+                    src="https://www.youtube.com/embed/O7C7Tl8N2rY?si=ZAHdwBFe4OrhlUMm"
+                    class="aspect-video w-full"
+                    width="100%"
+                    height="100%"
+                    title="YouTube video player"
+                    frameborder="0"
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                    referrerpolicy="strict-origin-when-cross-origin"
+                    allowfullscreen
+                ></iframe>
+            </div>
+        </Dialog.Content>
+    </Dialog.Root>
 </section>
 
 <section
     class="features-section mx-auto mb-12 flex max-w-[1280px] flex-col
          items-center overflow-hidden"
 >
-    <div class="mb-6 flex flex-col items-center">
-        <h2 class="mb-2 font-icon text-4xl">Features</h2>
+    <div class="mb-4 flex flex-col items-center md:mb-6">
+        <h2 class="mb-2 font-icon text-3xl md:text-4xl">Features</h2>
     </div>
     <div class="mb-6 grid gap-4 md:grid-cols-2 lg:grid-cols-3">
         {#each features as feature}