diff --git a/frontend/src/components/Stream/VodsDashboard.tsx b/frontend/src/components/Stream/VodsDashboard.tsx
index b52a8ef..ab39a1b 100644
--- a/frontend/src/components/Stream/VodsDashboard.tsx
+++ b/frontend/src/components/Stream/VodsDashboard.tsx
@@ -1,37 +1,48 @@
 import React from "react";
 import ListRow from "../Layout/ListRow";
 import { VodType } from "../../types/VodType";
+import { useNavigate } from "react-router-dom";
 
 interface VodsDashboardProps {
-	vods: VodType[];
+  vods: VodType[];
 }
 
 const VodsDashboard: React.FC<VodsDashboardProps> = ({ vods }) => {
-	const handleVodClick = (vodUrl: string) => {
-		window.open(vodUrl, "_blank");
-	};
+  const navigate = useNavigate();
 
-	return (
-		<div className="w-full">
-			<h2 className="text-3xl font-bold text-white mb-6">Past Broadcasts</h2>
+  const handleVodClick = (vodId: string) => {
+    if (vods.length > 0) {
+      navigate(`/stream/${vods[0].username}/vods/${vodId}`);
+    }
+  };
 
-			{vods.length === 0 ? (
-				<div className="text-center text-gray-400 py-8">
-					<p>No past broadcasts found</p>
-				</div>
-			) : (
-				<ListRow
-					type="vod"
-					variant="vodDashboard"
-					items={vods}
-					wrap={false}
-					onItemClick={handleVodClick}
-					extraClasses="bg-black/50"
-					itemExtraClasses="w-[20vw]"
-				/>
-			)}
-		</div>
-	);
+  // Ensure each VOD has a hardcoded thumbnail path
+  const thumbnails = vods.map((vod) => ({
+    ...vod,
+    thumbnail: `/vods/${vod.username}/${vod.vod_id}.png`,
+  }));
+
+  return (
+    <div className="w-full">
+      <h2 className="text-3xl font-bold text-white mb-6">Past Broadcasts</h2>
+
+      {vods.length === 0 ? (
+        <div className="text-center text-gray-400 py-8">
+          <p>No past broadcasts found</p>
+        </div>
+      ) : (
+        <ListRow
+          type="vod"
+          variant="vodDashboard"
+          items={thumbnails} // Use modified VODs with hardcoded thumbnail
+          wrap={false}
+          onItemClick={handleVodClick}
+          extraClasses="bg-black/50"
+          itemExtraClasses="w-[20vw]"
+        />
+      )}
+    </div>
+  );
 };
 
 export default VodsDashboard;
diff --git a/frontend/src/pages/Vods.tsx b/frontend/src/pages/Vods.tsx
index 5387a4f..934fbc2 100644
--- a/frontend/src/pages/Vods.tsx
+++ b/frontend/src/pages/Vods.tsx
@@ -50,7 +50,7 @@ const Vods: React.FC = () => {
       <div className="mt-[3em] w-screen flex justify-center">
         <div
           id="vods-container"
-          className="w-[96vw] bg-slate-50/35 rounded-lg p-4 overflow-x-auto whitespace-nowrap scrollbar-hide"
+          className="w-[96vw] bg-slate-50/35 rounded-lg p-4 overflow-x-auto whitespace-nowrap scrollbar-hide pb-7"
         >
           <h1 className="text-2xl font-bold text-center mb-4">{username}'s VODs</h1>