diff --git a/apps/web/src/app/live/[id]/page.tsx b/apps/web/src/app/live/[id]/page.tsx
new file mode 100644
index 0000000..4644ba8
--- /dev/null
+++ b/apps/web/src/app/live/[id]/page.tsx
@@ -0,0 +1,24 @@
+import '@vidstack/react/player/styles/default/theme.css';
+import '@vidstack/react/player/styles/default/layouts/audio.css';
+import '@vidstack/react/player/styles/default/layouts/video.css';
+
+import Chat from '../../../components/Chat';
+import LiveVideoPlayer from '../../../components/LiveVideoPlayer';
+
+export default function LiveStreamPage() {
+  return (
+    <>
+    <div className="flex w-full h-screen">
+      <LiveVideoPlayer
+        src={
+          'https://stream.mux.com/v69RSHhFelSm4701snP22dYz2jICy4E4FUyk02rW4gxRM.m3u8'
+        }
+        poster={
+          'https://image.mux.com/v69RSHhFelSm4701snP22dYz2jICy4E4FUyk02rW4gxRM/thumbnail.webp?time=30'
+        }
+      />
+      <Chat />
+    </div>
+    </>
+  );
+}
diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index 592d0eb..6b077d1 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -1,19 +1,11 @@
 import Navbar from '../components/Navbar';
 import VideosList from '../components/VideosList';
-import getUsers from '../../utils/API/getUsers';
-import { User } from '@clerk/nextjs/server';
 
 export default async function Page() {
-  const users = await getUsers();
   return (
     <>
       <Navbar />
       <VideosList />
-      <ol>
-        {users.data && users.data.map((user: User) => (
-          <li key={user.id}>{user?.username}</li>
-        ))}
-      </ol>
     </>
   );
 }
diff --git a/apps/web/src/components/Chat.tsx b/apps/web/src/components/Chat.tsx
new file mode 100644
index 0000000..5570527
--- /dev/null
+++ b/apps/web/src/components/Chat.tsx
@@ -0,0 +1,72 @@
+import { Button } from '@org/shared';
+import { Textarea } from '@org/shared';
+import { SendIcon } from 'lucide-react';
+
+export default function Chat() {
+    return(
+        <div className="bg-background border-l flex flex-col w-[400px]">
+        <div className="border-b px-4 py-3 text-lg font-medium">Live Chat</div>
+        <div className="flex-1 overflow-auto p-4 space-y-4">
+          <div className="flex items-start gap-3">
+            <div className="rounded-full bg-primary text-primary-foreground w-8 h-8 flex items-center justify-center text-sm font-medium">
+              JD
+            </div>
+            <div>
+              <div className="font-medium">John Doe</div>
+              <div className="text-muted-foreground text-sm">
+                Hey, this is looking great!
+              </div>
+            </div>
+          </div>
+          <div className="flex items-start gap-3">
+            <div className="rounded-full bg-secondary text-secondary-foreground w-8 h-8 flex items-center justify-center text-sm font-medium">
+              SA
+            </div>
+            <div>
+              <div className="font-medium">Sarah Adams</div>
+              <div className="text-muted-foreground text-sm">
+                Wow, the video quality is amazing!
+              </div>
+            </div>
+          </div>
+          <div className="flex items-start gap-3">
+            <div className="rounded-full bg-accent text-accent-foreground w-8 h-8 flex items-center justify-center text-sm font-medium">
+              MJ
+            </div>
+            <div>
+              <div className="font-medium">Michael Johnson</div>
+              <div className="text-muted-foreground text-sm">
+                Can not wait to see more of this!
+              </div>
+            </div>
+          </div>
+          <div className="flex items-start gap-3">
+            <div className="rounded-full bg-muted text-muted-foreground w-8 h-8 flex items-center justify-center text-sm font-medium">
+              EM
+            </div>
+            <div>
+              <div className="font-medium">Emily Miller</div>
+              <div className="text-muted-foreground text-sm">
+                This is so cool, I am loving it!
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="border-t p-4">
+          <div className="relative">
+            <Textarea
+              placeholder="Type your message..."
+              className="pr-12 rounded-md"
+            />
+            <Button
+              type="submit"
+              size="icon"
+              className="absolute top-1/2 right-2 -translate-y-1/2"
+            >
+              <SendIcon className="w-5 h-5" />
+            </Button>
+          </div>
+        </div>
+      </div>
+    )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/LiveVideoPlayer.tsx b/apps/web/src/components/LiveVideoPlayer.tsx
new file mode 100644
index 0000000..81d33af
--- /dev/null
+++ b/apps/web/src/components/LiveVideoPlayer.tsx
@@ -0,0 +1,32 @@
+import { MediaPlayer, MediaProvider, PlayerSrc, Poster } from '@vidstack/react';
+import {
+  DefaultVideoLayout,
+  defaultLayoutIcons,
+} from '@vidstack/react/player/layouts/default';
+
+interface VideoPlayerProps {
+  src: PlayerSrc;
+  poster: string;
+}
+
+export default function LiveVideoPlayer({ src, poster }: VideoPlayerProps) {
+  return (
+    <div className="w-full h-full" style={{ maxWidth: '80%' }}>
+      <MediaPlayer
+        src="https://stream.mux.com/v69RSHhFelSm4701snP22dYz2jICy4E4FUyk02rW4gxRM.m3u8"
+        poster="https://image.mux.com/v69RSHhFelSm4701snP22dYz2jICy4E4FUyk02rW4gxRM/thumbnail.webp?time=30"
+        viewType="video"
+        streamType="live"
+        className="h-full"
+        logLevel="warn"
+        crossOrigin
+        playsInline
+      >
+        <MediaProvider>
+          <Poster className="vds-poster" />
+        </MediaProvider>
+        <DefaultVideoLayout icons={defaultLayoutIcons} />
+      </MediaPlayer>
+    </div>
+  );
+}
diff --git a/package-lock.json b/package-lock.json
index eab8b73..1bb251e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,11 +13,11 @@
         "@clerk/nextjs": "^5.2.8",
         "@clerk/themes": "^2.1.14",
         "@nestjs/common": "^10.0.2",
-        "@nestjs/config": "^3.2.3",
         "@nestjs/core": "^10.0.2",
         "@nestjs/platform-express": "^10.0.2",
         "@radix-ui/react-avatar": "^1.1.0",
         "@radix-ui/react-slot": "^1.1.0",
+        "@vidstack/react": "^1.11.30",
         "axios": "^1.6.0",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
@@ -2743,6 +2743,28 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.5",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.5.tgz",
+      "integrity": "sha512-8GrTWmoFhm5BsMZOTHeGD2/0FLKLQQHvO/ZmQga4tKempYRLz8aqJGqXVuQgisnMObq2YZ2SgkwctN1LOOxcqA==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.5"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.8.tgz",
+      "integrity": "sha512-kx62rP19VZ767Q653wsP1XZCGIirkE09E0QUGNYTM/ttbbQHqcGPdSfWFxUyyNLc/W6aoJRBajOSXhP6GXjC0Q==",
+      "dependencies": {
+        "@floating-ui/core": "^1.6.0",
+        "@floating-ui/utils": "^0.2.5"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.5.tgz",
+      "integrity": "sha512-sTcG+QZ6fdEUObICavU+aB3Mp8HY4n14wYHdxK4fXjPmv3PXZZeY5RaguJmGyeH/CJQhX3fqKUtS4qc1LoHwhQ=="
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.14",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -3772,28 +3794,6 @@
         }
       }
     },
-    "node_modules/@nestjs/config": {
-      "version": "3.2.3",
-      "resolved": "https://registry.npmjs.org/@nestjs/config/-/config-3.2.3.tgz",
-      "integrity": "sha512-p6yv/CvoBewJ72mBq4NXgOAi2rSQNWx3a+IMJLVKS2uiwFCOQQuiIatGwq6MRjXV3Jr+B41iUO8FIf4xBrZ4/w==",
-      "dependencies": {
-        "dotenv": "16.4.5",
-        "dotenv-expand": "10.0.0",
-        "lodash": "4.17.21"
-      },
-      "peerDependencies": {
-        "@nestjs/common": "^8.0.0 || ^9.0.0 || ^10.0.0",
-        "rxjs": "^7.1.0"
-      }
-    },
-    "node_modules/@nestjs/config/node_modules/dotenv-expand": {
-      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-10.0.0.tgz",
-      "integrity": "sha512-GopVGCpVS1UKH75VKHGuQFqS1Gusej0z4FyQkPdwjil2gNIv+LNsqBlboOzpJFZKVT95GkCyWJbBSdFEFUWI2A==",
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/@nestjs/core": {
       "version": "10.3.10",
       "resolved": "https://registry.npmjs.org/@nestjs/core/-/core-10.3.10.tgz",
@@ -6159,7 +6159,6 @@
       "version": "15.7.12",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
       "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==",
-      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/@types/qs": {
@@ -6180,7 +6179,6 @@
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.1.tgz",
       "integrity": "sha512-V0kuGBX3+prX+DQ/7r2qsv1NsdfnCLnTgnRJ1pYnxykBhGMz+qj+box5lq7XsO5mtZsBqpjwwTu/7wszPfMBcw==",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@types/prop-types": "*",
@@ -6585,6 +6583,22 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/@vidstack/react": {
+      "version": "1.11.30",
+      "resolved": "https://registry.npmjs.org/@vidstack/react/-/react-1.11.30.tgz",
+      "integrity": "sha512-Y9Xx4Y+bXRtlZKR+PfUGl6UX0rH6Lui5sHzdh0Jj4MZFCWv+hM9h5BaV2k97vLGEYpGDl/11imENCrHFWgR3HA==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.4.4",
+        "media-captions": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.0.0",
+        "react": "^18.0.0"
+      }
+    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.12.1.tgz",
@@ -9291,7 +9305,6 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/damerau-levenshtein": {
@@ -9792,6 +9805,7 @@
       "version": "16.4.5",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.5.tgz",
       "integrity": "sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==",
+      "dev": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=12"
@@ -15447,6 +15461,7 @@
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/lodash.clonedeepwith": {
@@ -15659,6 +15674,14 @@
       "dev": true,
       "license": "CC0-1.0"
     },
+    "node_modules/media-captions": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/media-captions/-/media-captions-1.0.4.tgz",
+      "integrity": "sha512-cyDNmuZvvO4H27rcBq2Eudxo9IZRDCOX/I7VEyqbxsEiD2Ei7UYUhG/Sc5fvMZjmathgz3fEK7iAKqvpY+Ux1w==",
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
diff --git a/package.json b/package.json
index 54a274f..688512e 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "@nestjs/platform-express": "^10.0.2",
     "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
+    "@vidstack/react": "^1.11.30",
     "axios": "^1.6.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
@@ -48,6 +49,7 @@
     "@swc/cli": "~0.3.12",
     "@swc/core": "~1.5.7",
     "@swc/helpers": "~0.5.11",
+    "@types/cookie-parser": "^1.4.7",
     "@types/jest": "^29.4.0",
     "@types/node": "18.16.9",
     "@types/react": "18.3.1",
@@ -73,7 +75,6 @@
     "ts-jest": "^29.1.0",
     "ts-node": "10.9.1",
     "typescript": "~5.5.2",
-    "@types/cookie-parser": "^1.4.7",
     "webpack-cli": "^5.1.4"
   }
 }
diff --git a/shared/src/components/ui/textarea.tsx b/shared/src/components/ui/textarea.tsx
new file mode 100644
index 0000000..69f346f
--- /dev/null
+++ b/shared/src/components/ui/textarea.tsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+
+import { cn } from "@org/shared/lib/utils"
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }
diff --git a/shared/src/index.ts b/shared/src/index.ts
index d22b42e..73200fb 100644
--- a/shared/src/index.ts
+++ b/shared/src/index.ts
@@ -1,4 +1,5 @@
 // Use this file to export React client components (e.g. those with 'use client' directive) or other non-server utilities
 
 export * from './components/ui/button';
-export * from './components/ui/avatar'
\ No newline at end of file
+export * from './components/ui/avatar';
+export * from './components/ui/textarea';
\ No newline at end of file