diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
index 7999535..afcc1f0 100644
--- a/apps/web/app/page.tsx
+++ b/apps/web/app/page.tsx
@@ -1,4 +1,5 @@
 import { Button } from "@/components/ui/button";
+import Image from "next/image";
 import Link from "next/link";
 import React from "react";
 
@@ -6,25 +7,30 @@ export default function Page(): JSX.Element {
   return (
     <main className="flex flex-col h-full">
       <div>
-        <img
+        <Image
           src="/light-ray.svg"
+          alt="Purple light ray"
+          width="1024"
+          height="800"
           className="absolute animate-in fade-in slide-in-from-bottom-1"
-          style={{ color: "transparent", animationDuration: "5s" }}
+          style={{ color: "transparent", animationDuration: "10s" }}
         />
         <div className="flex flex-row w-full">
-          <video
-            className=""
-            style={{
-              display: "block",
-              width: "920px",
-              height: "700px",
-            }}
-            playsInline
-            loop={true}
-            autoPlay={true}
-            muted={true}
-            src="/earth.mp4"
-          ></video>
+          <div className="flex">
+            <video
+              className="w-full max-w-2xl rounded-lg animation-scale-in-fade"
+              style={{
+                display: "block",
+                width: "920px",
+                height: "700px",
+              }}
+              playsInline
+              loop={true}
+              autoPlay={true}
+              muted={true}
+              src="/earth.mp4"
+            ></video>
+          </div>
           <div className="content-center">
             <Link href={`room/queue`}>
               <Button className="bg-red-500 min-w-max">Start a chat</Button>
diff --git a/apps/web/public/light-ray.svg b/apps/web/public/light-ray.svg
index 1d57db6..7f219ed 100644
--- a/apps/web/public/light-ray.svg
+++ b/apps/web/public/light-ray.svg
@@ -1,4 +1,4 @@
-<svg width="800" height="800" viewBox="0 0 1233 1289" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="1233" height="1289" viewBox="0 0 1233 1289" fill="none" xmlns="http://www.w3.org/2000/svg">
   <g filter="url(#filter0_f_2811_2735)">
     <ellipse cx="94.1737" cy="824.195" rx="94.1737" ry="824.195" transform="matrix(0.347047 -0.937848 0.628306 0.777966 -236.488 -311.402)" fill="#6200EE"/>
     <ellipse cx="94.1737" cy="824.195" rx="94.1737" ry="824.195" transform="matrix(0.347047 -0.937848 0.628306 0.777966 -236.488 -311.402)" fill="#6200EE"/>
@@ -11,7 +11,7 @@
       <feFlood flood-opacity="0" result="BackgroundImageFix"/>
       <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
       <feGaussianBlur stdDeviation="200" result="effect1_foregroundBlur_2811_2735"/>
-    </filter>
+      </filter>
     <filter id="filter1_f_2811_2735" x="-104.738" y="-328.26" width="1274.53" height="1396.42" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
       <feFlood flood-opacity="0" result="BackgroundImageFix"/>
       <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>