MAJOR UPDATE/FEAT: Overhaul of DashboardPage to include VODs;

REFACTOR: General formatting; UPDATE: Shrink Logo upon opening sidebar on certain pages
2025-03-02 14:45:37 +00:00
parent 5a49bc8e7b
commit 0a4bbc73e5
15 changed files with 1333 additions and 1431 deletions
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -11,7 +11,7 @@ import CategoriesPage from "./pages/AllCategoriesPage";
 import ResultsPage from "./pages/ResultsPage";
 import { SidebarProvider } from "./context/SidebarContext";
 import { QuickSettingsProvider } from "./context/QuickSettingsContext";
-import StreamDashboardPage from "./pages/StreamDashboardPage";
+import DashboardPage from "./pages/DashboardPage";
 import { Brightness } from "./context/BrightnessContext";
 import LoadingScreen from "./components/Layout/LoadingScreen";
 import Following from "./pages/Following";
@@ -19,8 +19,9 @@ import FollowedCategories from "./pages/FollowedCategories";

 function App() {
 	const [isLoggedIn, setIsLoggedIn] = useState(false);
-  const [userId, setUserId] = useState<number | null>(null);
 	const [username, setUsername] = useState<string | null>(null);
+	const [userId, setUserId] = useState<number | null>(null);
+	const [isLive, setIsLive] = useState(false);
 	const [isLoading, setIsLoading] = useState(true);

 	useEffect(() => {
@@ -51,49 +52,24 @@ function App() {
 					isLoggedIn,
 					username,
 					userId,
+					isLive,
 					setIsLoggedIn,
 					setUsername,
 					setUserId,
+					setIsLive,
 				}}
 			>
 				<SidebarProvider>
 					<QuickSettingsProvider>
 						<BrowserRouter>
 							<Routes>
-                  <Route
-                    path="/"
-                    element={
-                      isLoggedIn ? (
-                        <HomePage variant="personalised" />
-                      ) : (
-                        <HomePage />
-                      )
-                    }
-                  />
-                  <Route
-                    path="/go-live"
-                    element={
-                      isLoggedIn ? (
-                        <StreamDashboardPage />
-                      ) : (
-                        <Navigate to="/" replace />
-                      )
-                    }
-                  />
+								<Route path="/" element={<HomePage />} />
+								<Route path="/dashboard" element={isLoggedIn ? <DashboardPage /> : <Navigate to="/" replace />} />
 								<Route path="/:streamerName" element={<StreamerRoute />} />
 								<Route path="/user/:username" element={<UserPage />} />
-                  <Route
-                    path="/reset_password/:token"
-                    element={<ResetPasswordPage />}
-                  ></Route>
-                  <Route
-                    path="/category/:categoryName"
-                    element={<CategoryPage />}
-                  ></Route>
-                  <Route
-                    path="/categories"
-                    element={<CategoriesPage />}
-                  ></Route>
+								<Route path="/reset_password/:token" element={<ResetPasswordPage />}></Route>
+								<Route path="/category/:categoryName" element={<CategoryPage />}></Route>
+								<Route path="/categories" element={<CategoriesPage />}></Route>
 								<Route path="/results" element={<ResultsPage />}></Route>
 								<Route path="/404" element={<NotFoundPage />} />
 								<Route path="/user/:username/following" element={<Following />} />
--- a/frontend/src/components/Auth/RegisterForm.tsx
+++ b/frontend/src/components/Auth/RegisterForm.tsx
@@ -78,7 +78,6 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
        const data = await response.json();

        if (data.account_created) {
-          //TODO Handle successful registration (e.g., redirect or show success message)
          console.log("Registration Successful! Account created successfully");
          setIsLoggedIn(true);
          window.location.reload();
--- a/frontend/src/components/Layout/DynamicPageContent.tsx
+++ b/frontend/src/components/Layout/DynamicPageContent.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import Navbar from "../Navigation/Navbar";
 import { useSidebar } from "../../context/SidebarContext";
-import Footer from "./Footer";

 interface DynamicPageContentProps extends React.HTMLProps<HTMLDivElement> {
  children: React.ReactNode;
@@ -28,7 +27,7 @@ const DynamicPageContent: React.FC<DynamicPageContentProps> = ({
      <Navbar variant={navbarVariant} />
      <div
        id="content"
-        className={`min-w-[850px] ${
+        className={`flex-grow min-w-[850px] ${
          showSideBar ? "w-[85vw] translate-x-[15vw]" : "w-[100vw]"
        } items-start transition-all duration-[500ms] ease-in-out ${contentClassName}`}
      >
--- a/frontend/src/components/Layout/ListItem.tsx
+++ b/frontend/src/components/Layout/ListItem.tsx
@@ -3,6 +3,7 @@ import { StreamType } from "../../types/StreamType";
 import { CategoryType } from "../../types/CategoryType";
 import { UserType } from "../../types/UserType";
 import { VodType } from "../../types/VodType";
+import { DownloadIcon, UploadIcon } from "lucide-react";

 // Base props that all item types share
 interface BaseListItemProps {
@@ -11,7 +12,7 @@ interface BaseListItemProps {
 }

 // Stream item component
-interface StreamListItemProps extends BaseListItemProps, Omit<StreamType, 'type'> {}
+interface StreamListItemProps extends BaseListItemProps, Omit<StreamType, "type"> {}

 const StreamListItem: React.FC<StreamListItemProps> = ({
 	title,
@@ -30,19 +31,13 @@ const StreamListItem: React.FC<StreamListItemProps> = ({
 			>
 				<div className="relative w-full aspect-video overflow-hidden rounded-t-lg">
 					{thumbnail ? (
-            <img
-              src={thumbnail}
-              alt={title}
-              className="absolute top-0 left-0 w-full h-full object-cover"
-            />
+						<img src={thumbnail} alt={title} className="absolute top-0 left-0 w-full h-full object-cover" />
 					) : (
 						<div className="absolute top-0 left-0 w-full h-full bg-gray-600" />
 					)}
 				</div>
 				<div className="p-3">
-          <h3 className="font-semibold text-lg text-center truncate max-w-full">
-            {title}
-          </h3>
+					<h3 className="font-semibold text-lg text-center truncate max-w-full">{title}</h3>
 					<p className="font-bold">{username}</p>
 					<p className="text-sm text-gray-300">{streamCategory}</p>
 					<p className="text-sm text-gray-300">{viewers} viewers</p>
@@ -53,15 +48,9 @@ const StreamListItem: React.FC<StreamListItemProps> = ({
 };

 // Category item component
-interface CategoryListItemProps extends BaseListItemProps, Omit<CategoryType, 'type'> {}
+interface CategoryListItemProps extends BaseListItemProps, Omit<CategoryType, "type"> {}

-const CategoryListItem: React.FC<CategoryListItemProps> = ({
-  title,
-  viewers,
-  thumbnail,
-  onItemClick,
-  extraClasses = "",
-}) => {
+const CategoryListItem: React.FC<CategoryListItemProps> = ({ title, viewers, thumbnail, onItemClick, extraClasses = "" }) => {
 	return (
 		<div className="p-4">
 			<div
@@ -70,19 +59,13 @@ const CategoryListItem: React.FC<CategoryListItemProps> = ({
 			>
 				<div className="relative w-full aspect-video overflow-hidden rounded-t-lg">
 					{thumbnail ? (
-            <img
-              src={thumbnail}
-              alt={title}
-              className="absolute top-0 left-0 w-full h-full object-cover"
-            />
+						<img src={thumbnail} alt={title} className="absolute top-0 left-0 w-full h-full object-cover" />
 					) : (
 						<div className="absolute top-0 left-0 w-full h-full bg-gray-600" />
 					)}
 				</div>
 				<div className="p-3">
-          <h3 className="font-semibold text-lg text-center truncate max-w-full">
-            {title}
-          </h3>
+					<h3 className="font-semibold text-lg text-center truncate max-w-full">{title}</h3>
 					<p className="text-sm text-gray-300">{viewers} viewers</p>
 				</div>
 			</div>
@@ -91,15 +74,9 @@ const CategoryListItem: React.FC<CategoryListItemProps> = ({
 };

 // User item component
-interface UserListItemProps extends BaseListItemProps, Omit<UserType, 'type'> {}
+interface UserListItemProps extends BaseListItemProps, Omit<UserType, "type"> {}

-const UserListItem: React.FC<UserListItemProps> = ({
-  title,
-  username,
-  isLive,
-  onItemClick,
-  extraClasses = "",
-}) => {
+const UserListItem: React.FC<UserListItemProps> = ({ title, username, isLive, onItemClick, extraClasses = "" }) => {
 	return (
 		<div className="p-4 pb-10">
 			<div
@@ -111,9 +88,7 @@ const UserListItem: React.FC<UserListItemProps> = ({
 					alt={`user ${username}`}
 					className="rounded-xl border-[0.15em] border-[var(--bg-color)] cursor-pointer"
 				/>
-        <button className="text-[calc((2vw+2vh)/2)] font-bold hover:underline w-full py-2">
-          {title}
-        </button>
+				<button className="text-[calc((2vw+2vh)/2)] font-bold hover:underline w-full py-2">{title}</button>

 				{isLive && (
 					<p className="absolute font-black bottom-5 opacity-0 group-hover:translate-y-full group-hover:opacity-100 group-hover:-bottom-1 transition-all">
@@ -126,63 +101,66 @@ const UserListItem: React.FC<UserListItemProps> = ({
 };

 // VODs item component
-interface VodListItemProps extends BaseListItemProps, Omit<VodType, "type"> {}
+interface VodListItemProps extends BaseListItemProps, Omit<VodType, "type"> {
+	variant?: string;
+}

 const VodListItem: React.FC<VodListItemProps> = ({
 	title,
-  streamer,
-  datetime,
-  category,
-  length,
+	username,
+	category_name,
 	views,
+	length,
+	datetime,
 	thumbnail,
-  url,
 	onItemClick,
 	extraClasses = "",
+	variant,
 }) => {
 	return (
 		<div className="p-4">
 			<div
-        className={`${extraClasses} overflow-hidden flex-shrink-0 flex flex-col bg-purple-900 rounded-lg cursor-pointer mx-auto hover:bg-purple-600 hover:scale-105 transition-all`}
-        onClick={() => window.open(url, "_blank")}
+				className={`${extraClasses} overflow-hidden flex-shrink-0 flex flex-col bg-gray-900 rounded-lg cursor-pointer mx-auto hover:bg-gray-800 hover:scale-105 transition-all`}
+				onClick={onItemClick}
 			>
 				<div className="relative w-full aspect-video overflow-hidden rounded-t-lg">
-          {thumbnail ? (
-            <img
-              src={thumbnail}
-              alt={title}
-              className="absolute top-0 left-0 w-full h-full object-cover"
-            />
-          ) : (
-            <div className="absolute top-0 left-0 w-full h-full bg-gray-600" />
-          )}
+					{/* Thumbnail */}
+					<img src={thumbnail} alt={title} className="absolute top-0 left-0 w-full h-full object-cover" />
+
+					{/* Duration badge */}
+					<div className="absolute bottom-2 right-2 bg-black/80 text-white px-2 py-1 text-xs rounded">{length}</div>
 				</div>
+
 				<div className="p-3">
-          <h3 className="font-semibold text-lg text-center truncate max-w-full">
-            {title}
-          </h3>
-          <p className="font-bold">{streamer}</p>
-          <p className="text-sm text-gray-300">{category}</p>
-          <p className="text-sm text-gray-300">{new Date(datetime).toLocaleDateString()} | {length} mins</p>
-          <p className="text-sm text-gray-300">{views} views</p>
+					<h3 className="font-semibold text-lg text-white truncate max-w-full">{title}</h3>
+					<p className="text-sm text-gray-300">{username}</p>
+					<p className="text-sm text-gray-400">{category_name}</p>
+					<div className="flex justify-between items-center mt-2">
+						<p className="text-xs text-gray-500">{datetime}</p>
+						<p className="text-xs text-gray-500">{views} views</p>
 					</div>
 				</div>
 			</div>
+			{variant === "vodDashboard" && (
+				<div className="flex justify-evenly items-stretch rounded-b-lg">
+					<button
+						className="flex justify-around w-full h-full bg-black/50 hover:bg-black/80 p-2 mx-1 font-semibold rounded-full border border-transparent hover:border-white"
+						onClick={() => console.log("Publish")}
+					>
+						<UploadIcon />
+						Publish
+					</button>
+					<button
+						className="flex justify-around w-full h-full bg-black/50 hover:bg-black/80 p-2 mx-1 font-semibold rounded-full border border-transparent hover:border-white"
+						onClick={() => console.log("Download")}
+					>
+						<DownloadIcon />
+						Download
+					</button>
+				</div>
+			)}
+		</div>
 	);
 };

-// Legacy wrapper component for backward compatibility
-export interface ListItemProps {
-  type: "stream" | "category" | "user";
-  id: number;
-  title: string;
-  username?: string;
-  streamCategory?: string;
-  viewers: number;
-  thumbnail?: string;
-  onItemClick?: () => void;
-  extraClasses?: string;
-  isLive?: boolean;
-}
-
 export { StreamListItem, CategoryListItem, UserListItem, VodListItem };
--- a/frontend/src/components/Layout/ListRow.tsx
+++ b/frontend/src/components/Layout/ListRow.tsx
@@ -1,25 +1,17 @@
-import {
-  ArrowLeftIcon,
-  ArrowRightIcon,
-} from "lucide-react";
-import React, {
-  forwardRef,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from "react";
+import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
+import React, { forwardRef, useImperativeHandle, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import "../../assets/styles/listRow.css";
 import { StreamListItem, CategoryListItem, UserListItem, VodListItem } from "./ListItem";
 import { StreamType } from "../../types/StreamType";
 import { CategoryType } from "../../types/CategoryType";
 import { UserType } from "../../types/UserType";
-import { VodType } from "../../types/VodType"
+import { VodType } from "../../types/VodType";

 type ItemType = StreamType | CategoryType | UserType | VodType;

 interface ListRowProps {
-  variant?: "default" | "search";
+	variant?: "default" | "search" | "vodDashboard";
 	type: "stream" | "category" | "user" | "vod";
 	title?: string;
 	description?: string;
@@ -92,38 +84,24 @@ const ListRow = forwardRef<ListRowRef, ListRowProps>((props, ref) => {
 		}
 	};

-  const isStreamType = (item: ItemType): item is StreamType => 
-    item.type === "stream";
+	const isStreamType = (item: ItemType): item is StreamType => item.type === "stream";

-  const isCategoryType = (item: ItemType): item is CategoryType => 
-    item.type === "category";
+	const isCategoryType = (item: ItemType): item is CategoryType => item.type === "category";

-  const isUserType = (item: ItemType): item is UserType => 
-    item.type === "user";
+	const isUserType = (item: ItemType): item is UserType => item.type === "user";

-  const isVodType = (item: ItemType): item is VodType => 
-    item.type === "vod";
+	const isVodType = (item: ItemType): item is VodType => item.type === "vod";

 	return (
 		<div
 			className={`${extraClasses} flex relative rounded-[1.5rem] text-white transition-all ${
-        variant === "search"
-          ? "items-center"
-          : "flex-col space-y-4 py-6 px-5 mx-2 mt-5"
+				variant === "search" ? "items-center" : "flex-col space-y-4 py-6 px-5 mx-2 mt-5"
 			}`}
 		>
 			{/* List Details */}
-      <div
-        className={`text-center ${
-          variant === "search" ? "min-w-fit px-auto w-[15vw]" : ""
-        }`}
-      >
+			<div className={`text-center ${variant === "search" ? "min-w-fit px-auto w-[15vw]" : ""}`}>
 				<h2
-          className={`${
-            titleClickable
-              ? "cursor-pointer hover:underline"
-              : "cursor-default"
-          } text-2xl font-bold`}
+					className={`${titleClickable ? "cursor-pointer hover:underline" : "cursor-default"} text-2xl font-bold`}
 					onClick={titleClickable ? handleTitleClick : undefined}
 				>
 					{title}
@@ -135,16 +113,8 @@ const ListRow = forwardRef<ListRowRef, ListRowProps>((props, ref) => {
 			<div className="relative overflow-hidden flex flex-grow items-center z-0">
 				{!wrap && currentItems.length > amountForScroll && (
 					<>
-            <ArrowLeftIcon
-              onClick={slideLeft}
-              size={30}
-              className="absolute left-0 cursor-pointer z-[999]"
-            />
-            <ArrowRightIcon
-              onClick={slideRight}
-              size={30}
-              className="absolute right-0 cursor-pointer z-[999]"
-            />
+						<ArrowLeftIcon onClick={slideLeft} size={30} className="absolute left-0 cursor-pointer z-[999]" />
+						<ArrowRightIcon onClick={slideRight} size={30} className="absolute right-0 cursor-pointer z-[999]" />
 					</>
 				)}

@@ -199,22 +169,21 @@ const ListRow = forwardRef<ListRowRef, ListRowProps>((props, ref) => {
 											extraClasses={itemExtraClasses}
 										/>
 									);
-                }
-                else if (type === "vod" && isVodType(item)) {
+								} else if (type === "vod" && isVodType(item)) {
 									return (
 										<VodListItem
-                      key={`vod-${item.id}`}
-                      id={item.id}
+											key={`vod-${item.vod_id}`}
+											vod_id={item.vod_id}
 											title={item.title}
-                      streamer={item.streamer}
+											username={item.username}
 											datetime={item.datetime}
-                      category={item.category}
+											category_name={item.category_name}
 											length={item.length}
 											views={item.views}
-                      url={item.url}
 											thumbnail={item.thumbnail}
-                      onItemClick={() => window.open(item.url, "_blank")}
+											onItemClick={() => onItemClick(item.vod_id.toString())}
 											extraClasses={itemExtraClasses}
+											variant={variant}
 										/>
 									);
 								}
--- a/frontend/src/components/Navigation/Navbar.tsx
+++ b/frontend/src/components/Navigation/Navbar.tsx
@@ -1,12 +1,7 @@
 import React, { useEffect } from "react";
 import Logo from "../Layout/Logo";
 import Button, { ToggleButton } from "../Input/Button";
-import {
-  LogInIcon,
-  LogOutIcon,
-  SettingsIcon,
-  Radio as LiveIcon,
-} from "lucide-react";
+import { LogInIcon, LogOutIcon, SettingsIcon, Radio as LiveIcon } from "lucide-react";
 import SearchBar from "../Input/SearchBar";
 import AuthModal from "../Auth/AuthModal";
 import { useAuthModal } from "../../hooks/useAuthModal";
@@ -46,8 +41,7 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
 	// Keyboard shortcut to toggle sidebar
 	useEffect(() => {
 		const handleKeyPress = (e: KeyboardEvent) => {
-      if (e.key === "q" && document.activeElement == document.body)
-        handleQuickSettings();
+			if (e.key === "q" && document.activeElement == document.body) handleQuickSettings();
 		};

 		document.addEventListener("keydown", handleKeyPress);
@@ -60,20 +54,14 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
 	return (
 		<div
 			id="navbar"
-      className={`relative flex justify-evenly items-center ${
-        variant === "home"
-          ? "h-[45vh] flex-col"
-          : "h-[15vh] col-span-2 flex-row"
-      }`}
+			className={`relative flex justify-evenly items-center ${variant === "home" ? "h-[45vh] flex-col" : "h-[15vh] col-span-2 flex-row"}`}
 		>
 			{isLoggedIn && window.innerWidth > 900 && <Sidebar />}
-      <Logo variant={variant} />
+			<Logo extraClasses={variant != "home" && showSideBar && !window.location.pathname.includes("dashboard") ? "scale-0" : "duration-[3s]"} variant={variant} />
 			{/* Login / Logout Button */}
 			<Button
 				extraClasses={`absolute top-[2vh] ${
-          showSideBar
-            ? "left-[16vw] duration-[0.5s]"
-            : "left-[20px] duration-[1s]"
+					showSideBar ? "left-[16vw] duration-[0.5s]" : "left-[20px] duration-[1s]"
 				} text-[1rem] flex items-center flex-nowrap z-[99]`}
 				onClick={() => (isLoggedIn ? handleLogout() : setShowAuthModal(true))}
 			>
@@ -91,9 +79,7 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
 			</Button>
 			{/* Quick Settings Sidebar */}
 			<ToggleButton
-        extraClasses={`absolute group text-[1rem] top-[2vh] ${
-          showQuickSettings ? "right-[21vw]" : "right-[20px]"
-        } cursor-pointer z-[20]`}
+				extraClasses={`absolute group text-[1rem] top-[2vh] ${showQuickSettings ? "right-[21vw]" : "right-[20px]"} cursor-pointer z-[20]`}
 				onClick={() => handleQuickSettings()}
 				toggled={showQuickSettings}
 			>
@@ -109,15 +95,13 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
 			{variant != "no-searchbar" && <SearchBar />}

 			{/* Stream Button */}
-      {isLoggedIn && !window.location.pathname.includes("go-live") && (
+			{isLoggedIn && !window.location.pathname.includes("dashboard") && (
 				<Button
-          extraClasses={`${
-            variant === "home" ? "absolute top-[2vh] right-[10vw]" : ""
-          } flex flex-row items-center`}
-          onClick={() => (window.location.href = "/go-live")}
+					extraClasses={`${variant === "home" ? "absolute top-[2vh] right-[10vw]" : ""} flex flex-row items-center`}
+					onClick={() => (window.location.href = "/dashboard")}
 				>
 					<LiveIcon className="h-15 w-15 mr-2" />
-          Go Live
+					Stream Dashboard
 				</Button>
 			)}

--- a/frontend/src/components/Stream/ChatPanel.tsx
+++ b/frontend/src/components/Stream/ChatPanel.tsx
@@ -6,11 +6,7 @@ import { useAuthModal } from "../../hooks/useAuthModal";
 import { useAuth } from "../../context/AuthContext";
 import { useSocket } from "../../context/SocketContext";
 import { useChat } from "../../context/ChatContext";
-import {
-  ArrowLeftFromLineIcon,
-  ArrowRightFromLineIcon,
-  CrownIcon,
-} from "lucide-react";
+import { ArrowLeftFromLineIcon, ArrowRightFromLineIcon, CrownIcon } from "lucide-react";

 interface ChatMessage {
 	chatter_username: string;
@@ -24,10 +20,7 @@ interface ChatPanelProps {
 	onViewerCountChange?: (count: number) => void;
 }

-const ChatPanel: React.FC<ChatPanelProps> = ({
-  streamId,
-  onViewerCountChange,
-}) => {
+const ChatPanel: React.FC<ChatPanelProps> = ({ streamId, onViewerCountChange }) => {
 	const { isLoggedIn, username, userId } = useAuth();
 	const { showChat, setShowChat } = useChat();
 	const { showAuthModal, setShowAuthModal } = useAuthModal();
@@ -98,8 +91,7 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
 	// Auto-scroll to bottom when new messages arrive
 	useEffect(() => {
 		if (chatContainerRef.current) {
-      chatContainerRef.current.scrollTop =
-        chatContainerRef.current.scrollHeight;
+			chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight;
 		}
 	}, [messages]);

@@ -177,31 +169,18 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
 			</button>

 			{/* Chat Header */}
-      <h2 className="cursor-default text-xl font-bold mb-4 text-white text-center flex-none">
-        Stream Chat
-      </h2>
+			<h2 className="cursor-default text-xl font-bold mb-4 text-white text-center flex-none">Stream Chat</h2>

 			{/* Message List */}
-      <div
-        ref={chatContainerRef}
-        id="chat-message-list"
-        className="w-full h-full overflow-y-auto mb-4 space-y-2 rounded-md"
-      >
+			<div ref={chatContainerRef} id="chat-message-list" className="w-full h-full overflow-y-auto mb-4 space-y-2 rounded-md">
 				{messages.map((msg, index) => (
-          <div
-            key={index}
-            className="flex items-start space-x-2 bg-gray-800 rounded p-2 text-white relative"
-          >
+					<div key={index} className="flex items-start space-x-2 bg-gray-800 rounded p-2 text-white relative">
 						{/* User avatar with image */}
 						<div
 							className={`w-2em h-2em rounded-full overflow-hidden flex-shrink-0 ${
 								msg.chatter_username === username ? "" : "cursor-pointer"
 							}`}
-              onClick={() =>
-                msg.chatter_username === username
-                  ? null
-                  : (window.location.href = `/user/${msg.chatter_username}`)
-              }
+							onClick={() => (msg.chatter_username === username ? null : (window.location.href = `/user/${msg.chatter_username}`))}
 						>
 							<img
                src="/images/monkey.png"
@@ -216,24 +195,16 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
 								{/* Username */}
 								<span
 									className={`flex items-center gap-2 font-bold text-[1em] ${
-                    msg.chatter_username === username
-                      ? "text-purple-600"
-                      : "text-green-400 cursor-pointer"
+										msg.chatter_username === username ? "text-purple-600" : "text-green-400 cursor-pointer"
 									}`}
-                  onClick={() =>
-                    msg.chatter_username === username
-                      ? null
-                      : (window.location.href = `/user/${msg.chatter_username}`)
-                  }
+									onClick={() => (msg.chatter_username === username ? null : (window.location.href = `/user/${msg.chatter_username}`))}
 								>
 									{msg.chatter_username}
 									{msg.is_subscribed && <CrownIcon size={20} color="gold" />}
 								</span>
 							</div>
 							{/* Message content */}
-              <div className="message w-full text-[0.9em] mt-0.5em flex flex-col overflow-hidden">
-                {msg.message}
-              </div>
+							<div className="message w-full text-[0.9em] mt-0.5em flex flex-col overflow-hidden">{msg.message}</div>
 						</div>

 						{/* Time sent */}
@@ -263,18 +234,12 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
 							onClick={() => !isLoggedIn && setShowAuthModal(true)}
 						/>

-            <button
-              onClick={sendChat}
-              className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700"
-            >
+						<button onClick={sendChat} className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700">
 							Send
 						</button>
 					</>
 				) : (
-          <Button
-            extraClasses="text-[1rem] flex items-center flex-nowrap"
-            onClick={() => setShowAuthModal(true)}
-          >
+					<Button extraClasses="text-[1rem] flex items-center flex-nowrap" onClick={() => setShowAuthModal(true)}>
 						Login to Chat
 					</Button>
 				)}
--- a/frontend/src/components/Stream/StreamDashboard.tsx
+++ b/frontend/src/components/Stream/StreamDashboard.tsx
@@ -0,0 +1,389 @@
+import React, { useState, useEffect } from "react";
+import Button from "../../components/Input/Button";
+import Input from "../../components/Input/Input";
+import { useCategories } from "../../hooks/useContent";
+import { X as CloseIcon, Eye as ShowIcon, EyeOff as HideIcon } from "lucide-react";
+import { debounce } from "lodash";
+import VideoPlayer from "../../components/Stream/VideoPlayer";
+import { CategoryType } from "../../types/CategoryType";
+import { StreamListItem } from "../../components/Layout/ListItem";
+import { getCategoryThumbnail } from "../../utils/thumbnailUtils";
+
+interface StreamData {
+	title: string;
+	category_name: string;
+	viewer_count: number;
+	start_time: string;
+	stream_key: string;
+}
+
+interface StreamDashboardProps {
+	username: string;
+	userId: number;
+	isLive: boolean;
+}
+
+const StreamDashboard: React.FC<StreamDashboardProps> = ({ username, userId, isLive }) => {
+	const [streamData, setStreamData] = useState<StreamData>({
+		title: "",
+		category_name: "",
+		viewer_count: 0,
+		start_time: "",
+		stream_key: "",
+	});
+	const [timeStarted, setTimeStarted] = useState("");
+	const [streamDetected, setStreamDetected] = useState(false);
+	const [isCategoryFocused, setIsCategoryFocused] = useState(false);
+	const [filteredCategories, setFilteredCategories] = useState<CategoryType[]>([]);
+	const [thumbnail, setThumbnail] = useState<File | null>(null);
+	const [thumbnailPreview, setThumbnailPreview] = useState<{
+		url: string;
+		isCustom: boolean;
+	}>({ url: "", isCustom: false });
+	const [debouncedCheck, setDebouncedCheck] = useState<Function | null>(null);
+	const [showKey, setShowKey] = useState(false);
+
+	const { categories } = useCategories("/api/categories/popular/100");
+
+	useEffect(() => {
+		// Set filtered categories when categories load
+		if (categories.length > 0) {
+			setFilteredCategories(categories);
+		}
+	}, [categories]);
+
+	useEffect(() => {
+		const categoryCheck = debounce((categoryName: string) => {
+			const isValidCategory = categories.some((cat: CategoryType) => cat.title.toLowerCase() === categoryName.toLowerCase());
+
+			if (isValidCategory && !thumbnailPreview.isCustom) {
+				const defaultThumbnail = getCategoryThumbnail(categoryName);
+				setThumbnailPreview({ url: defaultThumbnail, isCustom: false });
+			}
+		}, 300);
+
+		setDebouncedCheck(() => categoryCheck);
+
+		return () => {
+			categoryCheck.cancel();
+		};
+	}, [categories, thumbnailPreview.isCustom]);
+
+	useEffect(() => {
+		if (username) {
+			checkStreamStatus();
+		}
+	}, [username]);
+
+	const checkStreamStatus = async () => {
+		try {
+			if (isLive) {
+				const streamResponse = await fetch(`/api/streams/${userId}/data`, { credentials: "include" });
+				const streamData = await streamResponse.json();
+				setStreamData({
+					title: streamData.title,
+					category_name: streamData.category_name,
+					viewer_count: streamData.num_viewers,
+					start_time: streamData.start_time,
+					stream_key: streamData.stream_key,
+				});
+
+				const time = Math.floor(
+					(Date.now() - new Date(streamData.start_time).getTime()) / 60000 // Convert to minutes
+				);
+
+				if (time < 60) setTimeStarted(`${time}m ago`);
+				else if (time < 1440) setTimeStarted(`${Math.floor(time / 60)}h ${time % 60}m ago`);
+				else setTimeStarted(`${Math.floor(time / 1440)}d ${Math.floor((time % 1440) / 60)}h ${time % 60}m ago`);
+			} else {
+				// Just need the stream key if not streaming
+				const response = await fetch(`/api/user/${username}/stream_key`, { credentials: "include" });
+				const keyData = await response.json();
+				setStreamData((prev) => ({
+					...prev,
+					stream_key: keyData.stream_key,
+				}));
+			}
+		} catch (error) {
+			console.error("Error checking stream status:", error);
+		}
+	};
+
+	const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		const { name, value } = e.target;
+		setStreamData((prev) => ({ ...prev, [name]: value }));
+
+		if (name === "category_name") {
+			const filtered = categories.filter((cat: CategoryType) => cat.title.toLowerCase().includes(value.toLowerCase()));
+			setFilteredCategories(filtered);
+			if (debouncedCheck) {
+				debouncedCheck(value);
+			}
+		}
+	};
+
+	const handleCategorySelect = (categoryName: string) => {
+		console.log("Selected category:", categoryName);
+		setStreamData((prev) => ({ ...prev, category_name: categoryName }));
+		setFilteredCategories([]);
+		if (debouncedCheck) {
+			debouncedCheck(categoryName);
+		}
+	};
+
+	const handleThumbnailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		if (e.target.files && e.target.files[0]) {
+			const file = e.target.files[0];
+			setThumbnail(file);
+			setThumbnailPreview({
+				url: URL.createObjectURL(file),
+				isCustom: true,
+			});
+		} else {
+			setThumbnail(null);
+			if (streamData.category_name && debouncedCheck) {
+				debouncedCheck(streamData.category_name);
+			} else {
+				setThumbnailPreview({ url: "", isCustom: false });
+			}
+		}
+	};
+
+	const clearThumbnail = () => {
+		setThumbnail(null);
+		if (streamData.category_name) {
+			console.log("Clearing thumbnail as category is set and default category thumbnail will be used");
+			const defaultThumbnail = getCategoryThumbnail(streamData.category_name);
+			setThumbnailPreview({ url: defaultThumbnail, isCustom: false });
+		} else {
+			setThumbnailPreview({ url: "", isCustom: false });
+		}
+	};
+
+	const isFormValid = () => {
+		return (
+			streamData.title.trim() !== "" &&
+			streamData.category_name.trim() !== "" &&
+			categories.some((cat: CategoryType) => cat.title.toLowerCase() === streamData.category_name.toLowerCase()) &&
+			streamDetected
+		);
+	};
+
+	const handlePublishStream = async () => {
+		console.log("Starting stream with data:", streamData);
+
+		const formData = new FormData();
+		formData.append("data", JSON.stringify(streamData));
+
+		try {
+			const response = await fetch("/api/publish_stream", {
+				method: "POST",
+				body: formData,
+			});
+
+			if (response.ok) {
+				console.log("Stream published successfully");
+				window.location.reload();
+			} else if (response.status === 403) {
+				console.error("Unauthorized - Invalid stream key or already streaming");
+			} else {
+				console.error("Failed to publish stream");
+			}
+		} catch (error) {
+			console.error("Error publishing stream:", error);
+		}
+	};
+
+	const handleUpdateStream = async () => {
+		console.log("Updating stream with data:", streamData);
+
+		const formData = new FormData();
+		formData.append("key", streamData.stream_key);
+		formData.append("title", streamData.title);
+		formData.append("category_name", streamData.category_name);
+		if (thumbnail) {
+			formData.append("thumbnail", thumbnail);
+		}
+
+		try {
+			const response = await fetch("/api/update_stream", {
+				method: "POST",
+				body: formData,
+			});
+
+			if (response.ok) {
+				console.log("Stream updated successfully");
+				window.location.reload();
+			} else {
+				console.error("Failed to update stream");
+			}
+		} catch (error) {
+			console.error("Error updating stream:", error);
+		}
+	};
+
+	const handleEndStream = async () => {
+		console.log("Ending stream...");
+
+		const formData = new FormData();
+		formData.append("key", streamData.stream_key);
+
+		try {
+			const response = await fetch("/api/end_stream", {
+				method: "POST",
+				body: formData,
+			});
+
+			if (response.ok) {
+				console.log("Stream ended successfully");
+				window.location.reload();
+			} else {
+				console.error("Failed to end stream");
+			}
+		} catch (error) {
+			console.error("Error ending stream:", error);
+		}
+	};
+
+	return (
+		<div className="flex flex-col flex-grow mx-auto px-4">
+			<div className="flex flex-grow gap-8 items-stretch pb-4">
+				{/* Left side - Stream Settings */}
+				<div className="flex flex-col flex-grow">
+					<h2 className="text-center text-2xl font-bold text-white mb-4">Stream Settings</h2>
+					<div className="flex flex-col flex-grow justify-evenly space-y-6 bg-gray-800 rounded-lg p-6 shadow-xl">
+						<div>
+							<label className="block text-white mb-2">Stream Title</label>
+							<Input
+								name="title"
+								value={streamData.title}
+								onChange={handleInputChange}
+								placeholder="Enter your stream title"
+								extraClasses="w-[70%] focus:w-[70%]"
+								maxLength={50}
+							/>
+						</div>
+
+						<div className="relative">
+							<label className="block text-white mb-2">Category</label>
+							<Input
+								name="category_name"
+								value={streamData.category_name}
+								onChange={handleInputChange}
+								onFocus={() => setIsCategoryFocused(true)}
+								onBlur={() => setTimeout(() => setIsCategoryFocused(false), 200)}
+								placeholder="Select or type a category"
+								extraClasses="w-[70%] focus:w-[70%]"
+								maxLength={50}
+								autoComplete="off"
+								type="search"
+							/>
+							{isCategoryFocused && filteredCategories.length > 0 && (
+								<div className="absolute z-10 w-full bg-gray-700 mt-1 rounded-md shadow-lg max-h-48 overflow-y-auto">
+									{filteredCategories.map((category) => (
+										<div
+											key={category.title}
+											className="px-4 py-2 hover:bg-gray-600 cursor-pointer text-white"
+											onClick={() => handleCategorySelect(category.title)}
+										>
+											{category.title}
+										</div>
+									))}
+								</div>
+							)}
+						</div>
+
+						<div>
+							<label className="block text-white mb-2">Stream Thumbnail</label>
+							<div className="relative flex flex-row items-center justify-center">
+								<input type="file" accept="image/*" onChange={handleThumbnailChange} className="hidden" id="thumbnail-upload" />
+								<label
+									htmlFor="thumbnail-upload"
+									className="cursor-pointer inline-block bg-gray-700 hover:bg-gray-600 text-white py-2 px-4 rounded-lg transition-colors"
+								>
+									{thumbnail ? "Change Thumbnail" : "Choose Thumbnail"}
+								</label>
+								<span className="ml-3 text-gray-400">{thumbnail ? thumbnail.name : "No file selected"}</span>
+								{thumbnailPreview.isCustom && (
+									<button
+										onClick={clearThumbnail}
+										className="absolute right-0 top-0 p-1 bg-red-500 rounded-full hover:bg-red-600 transition-colors"
+									>
+										<CloseIcon size={16} className="text-white" />
+									</button>
+								)}
+							</div>
+							{!thumbnailPreview.isCustom && (
+								<p className="text-gray-400 mt-2 text-sm text-center">No thumbnail selected - the default category image will be used</p>
+							)}
+						</div>
+
+						{isLive && (
+							<div className="bg-gray-700 p-4 rounded-lg">
+								<h3 className="text-white font-semibold mb-2">Stream Info</h3>
+								<p className="text-gray-300">Viewers: {streamData.viewer_count}</p>
+								<p className="text-gray-300">
+									Started: {new Date(streamData.start_time!).toLocaleTimeString()}
+									{` (${timeStarted})`}
+								</p>
+							</div>
+						)}
+						<div className="flex items-center mx-auto p-10 bg-gray-900 w-fit rounded-xl py-4">
+							<label className="block text-white mr-8">Stream Key</label>
+							<Input type={showKey ? "text" : "password"} value={streamData.stream_key} readOnly extraClasses="w-fit pr-[30px]" disabled />
+							<button type="button" onClick={() => setShowKey(!showKey)} className="-translate-x-[30px] top-1/2 h-6 w-6 text-white">
+								{showKey ? <HideIcon className="h-6 w-6" /> : <ShowIcon className="h-6 w-6" />}
+							</button>
+						</div>
+
+						<div className="flex flex-col w-fit mx-auto items-center justify-center pt-6 gap-6">
+							<div className="flex gap-8">
+								<Button
+									onClick={isLive ? handleUpdateStream : handlePublishStream}
+									disabled={!isFormValid()}
+									extraClasses="text-2xl px-8 py-4 disabled:opacity-50 disabled:cursor-not-allowed"
+								>
+									{isLive ? "Update Stream" : "Start Streaming"}
+								</Button>
+								{isLive && (
+									<Button onClick={handleEndStream} extraClasses="text-2xl px-8 py-4 hover:text-red-500 hover:border-red-500">
+										End Stream
+									</Button>
+								)}
+							</div>
+							{!streamDetected && (
+								<p className="text-red-500 text-sm">No stream input detected. Please start streaming using your broadcast software.</p>
+							)}
+						</div>
+					</div>
+				</div>
+
+				{/* Right side - Preview */}
+				<div className="w-[25vw] flex flex-col">
+					<h2 className="text-center text-2xl font-bold text-white mb-4">Stream Preview</h2>
+					<div className="flex flex-col gap-4 bg-gray-800 rounded-lg p-4 w-full h-fit flex-grow justify-around">
+						<div className="flex flex-col">
+							<p className="text-white text-center pb-4">Video</p>
+							<VideoPlayer streamer={username ?? undefined} extraClasses="border border-white" onStreamDetected={setStreamDetected} />
+						</div>
+						<div className="flex flex-col">
+							<p className="text-white text-center">List Item</p>
+							<StreamListItem
+								id={1}
+								title={streamData.title || "Stream Title"}
+								username={username || ""}
+								streamCategory={streamData.category_name || "Category"}
+								viewers={streamData.viewer_count}
+								thumbnail={thumbnailPreview.url || ""}
+								onItemClick={() => {}}
+								extraClasses="max-w-[20vw]"
+							/>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default StreamDashboard;
--- a/frontend/src/components/Stream/VodsDashboard.tsx
+++ b/frontend/src/components/Stream/VodsDashboard.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+import ListRow from "../Layout/ListRow";
+import { VodType } from "../../types/VodType";
+
+interface VodsDashboardProps {
+	vods: VodType[];
+}
+
+const VodsDashboard: React.FC<VodsDashboardProps> = ({ vods }) => {
+	const handleVodClick = (vodUrl: string) => {
+		window.open(vodUrl, "_blank");
+	};
+
+	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={vods}
+					wrap={false}
+					onItemClick={handleVodClick}
+					extraClasses="bg-black/50"
+					itemExtraClasses="w-[20vw]"
+				/>
+			)}
+		</div>
+	);
+};
+
+export default VodsDashboard;
--- a/frontend/src/context/AuthContext.tsx
+++ b/frontend/src/context/AuthContext.tsx
@@ -4,14 +4,14 @@ interface AuthContextType {
 	isLoggedIn: boolean;
 	username: string | null;
 	userId: number | null;
+	isLive: boolean;
 	setIsLoggedIn: (value: boolean) => void;
 	setUsername: (value: string | null) => void;
 	setUserId: (value: number | null) => void;
+	setIsLive: (value: boolean) => void;
 }

-export const AuthContext = createContext<AuthContextType | undefined>(
-  undefined
-);
+export const AuthContext = createContext<AuthContextType | undefined>(undefined);

 export function useAuth() {
 	const context = useContext(AuthContext);
--- a/frontend/src/hooks/useContent.ts
+++ b/frontend/src/hooks/useContent.ts
@@ -4,28 +4,23 @@ import { useAuth } from "../context/AuthContext";
 import { StreamType } from "../types/StreamType";
 import { CategoryType } from "../types/CategoryType";
 import { UserType } from "../types/UserType";
-import { VodType } from "../types/VodType"
+import { VodType } from "../types/VodType";
 import { getCategoryThumbnail } from "../utils/thumbnailUtils";

-// Process API data into our VodType structure
 const processVodData = (data: any[]): VodType[] => {
-  
 	return data.map((vod) => ({
 		type: "vod",
-    id: vod.id,  // Ensure this matches API response
+		vod_id: vod.vod_id,
 		title: vod.title,
-    streamer: vod.streamer, // Ensure backend sends streamer name or ID
-    datetime: new Date(vod.datetime).toLocaleString(),
-    category: vod.category,
-    length: vod.length,
+		username: vod.username,
+		datetime: formatDate(vod.datetime),
+		category_name: vod.category_name,
+		length: formatDuration(vod.length),
 		views: vod.views,
-    url: vod.url,
-    thumbnail: "../../images/category_thumbnails/abstract.webp",
+		thumbnail: vod.thumbnail, //TODO
 	}));
 };

-
-
 // Helper function to process API data into our consistent types
 const processStreamData = (data: any[]): StreamType[] => {
 	return data.map((stream) => ({
@@ -36,17 +31,16 @@ const processStreamData = (data: any[]): StreamType[] => {
 		streamCategory: stream.category_name,
 		viewers: stream.num_viewers,
 		thumbnail: getCategoryThumbnail(stream.category_name, stream.thumbnail),
-  }))
+	}));
 };

 const processCategoryData = (data: any[]): CategoryType[] => {
-  console.log("Raw API VOD Data:", data); // Debugging
 	return data.map((category) => ({
 		type: "category",
 		id: category.category_id,
 		title: category.category_name,
 		viewers: category.num_viewers,
-    thumbnail: getCategoryThumbnail(category.category_name)
+		thumbnail: getCategoryThumbnail(category.category_name),
 	}));
 };

@@ -104,18 +98,12 @@ export function useFetchContent<T>(
 export function useStreams(customUrl?: string): {
 	streams: StreamType[];
 	isLoading: boolean;
-  error: string | null 
+	error: string | null;
 } {
 	const { isLoggedIn } = useAuth();
-  const url = customUrl || (isLoggedIn 
-    ? "/api/streams/recommended" 
-    : "/api/streams/popular/4");
+	const url = customUrl || (isLoggedIn ? "/api/streams/recommended" : "/api/streams/popular/4");

-  const { data, isLoading, error } = useFetchContent<StreamType>(
-    url,
-    processStreamData,
-    [isLoggedIn, customUrl]
-  );
+	const { data, isLoading, error } = useFetchContent<StreamType>(url, processStreamData, [isLoggedIn, customUrl]);

 	return { streams: data, isLoading, error };
 }
@@ -123,21 +111,12 @@ export function useStreams(customUrl?: string): {
 export function useCategories(customUrl?: string): {
 	categories: CategoryType[];
 	isLoading: boolean;
-  error: string | null 
+	error: string | null;
 } {
 	const { isLoggedIn } = useAuth();
-  const url = customUrl || (isLoggedIn 
-    ? "/api/categories/recommended" 
-    : "/api/categories/popular/4");
-  
-  const { data, isLoading, error } = useFetchContent<CategoryType>(
-    url,
-    processCategoryData,
-    [isLoggedIn, customUrl]
-  );
-
-  console.log("Fetched Cat Data:", data);  // Debugging
+	const url = customUrl || (isLoggedIn ? "/api/categories/recommended" : "/api/categories/popular/4");

+	const { data, isLoading, error } = useFetchContent<CategoryType>(url, processCategoryData, [isLoggedIn, customUrl]);

 	return { categories: data, isLoading, error };
 }
@@ -145,32 +124,40 @@ export function useCategories(customUrl?: string): {
 export function useVods(customUrl?: string): {
 	vods: VodType[];
 	isLoading: boolean;
-  error: string | null 
+	error: string | null;
 } {
-  const url = customUrl || "api/vods/all"; 
-  const { data, isLoading, error } = useFetchContent<VodType>(
-    url,
-    processVodData,
-    [customUrl]
-  );
-
+	const url = customUrl || "api/vods/all"; //TODO: Change this to the correct URL or implement it
+	const { data, isLoading, error } = useFetchContent<VodType>(url, processVodData, [customUrl]);

 	return { vods: data, isLoading, error };
 }

-
 export function useUsers(customUrl?: string): {
 	users: UserType[];
 	isLoading: boolean;
-  error: string | null 
+	error: string | null;
 } {
 	const url = customUrl || "/api/users/popular";

-  const { data, isLoading, error } = useFetchContent<UserType>(
-    url,
-    processUserData,
-    [customUrl]
-  );
+	const { data, isLoading, error } = useFetchContent<UserType>(url, processUserData, [customUrl]);

 	return { users: data, isLoading, error };
 }
+
+// Format duration from seconds to HH:MM:SS
+const formatDuration = (seconds: number): string => {
+	const hours = Math.floor(seconds / 3600);
+	const minutes = Math.floor((seconds % 3600) / 60);
+	const remainingSeconds = seconds % 60;
+
+	if (hours > 0) {
+		return `${hours}:${minutes.toString().padStart(2, "0")}:${remainingSeconds.toString().padStart(2, "0")}`;
+	}
+	return `${minutes}:${remainingSeconds.toString().padStart(2, "0")}`;
+};
+
+// Format date to a more readable format
+const formatDate = (dateString: string): string => {
+	const date = new Date(dateString);
+	return date.toLocaleDateString() + " " + date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+};
--- a/frontend/src/pages/DashboardPage.tsx
+++ b/frontend/src/pages/DashboardPage.tsx
@@ -0,0 +1,100 @@
+import React, { useState, useEffect } from "react";
+import DynamicPageContent from "../components/Layout/DynamicPageContent";
+import { useAuth } from "../context/AuthContext";
+import StreamDashboard from "../components/Stream/StreamDashboard";
+import { CircleDotIcon as RecordIcon, SquarePlayIcon as PlaybackIcon, Undo2Icon } from "lucide-react";
+import VodsDashboard from "../components/Stream/VodsDashboard";
+import { useVods } from "../hooks/useContent";
+
+interface DashboardPageProps {
+	tab?: "dashboard" | "stream" | "vod";
+}
+
+const DashboardPage: React.FC<DashboardPageProps> = ({ tab = "dashboard" }) => {
+	const { username, isLive, userId, setIsLive } = useAuth();
+	const { vods } = useVods(`/api/vods/${username}`);
+	const [selectedTab, setSelectedTab] = useState<"dashboard" | "stream" | "vod">(tab);
+
+	const colors = {
+		stream: "red-500",
+		vod: "green-500",
+		dashboard: "white",
+	};
+
+	useEffect(() => {
+		if (username) {
+			checkUserStatus();
+		}
+	}, [username]);
+
+	const checkUserStatus = async () => {
+		if (!username) return;
+
+		try {
+			const response = await fetch(`/api/user/${username}/status`);
+			const data = await response.json();
+			setIsLive(data.is_live);
+		} catch (error) {
+			console.error("Error checking user status:", error);
+		}
+	};
+
+	return (
+		<DynamicPageContent className="flex flex-col min-h-screen bg-gradient-radial from-purple-600 via-blue-900 to-black">
+			<div id="dashboard" className="flex flex-col justify-evenly items-center h-full text-white">
+				<div className="flex w-full px-[10vw]">
+					{selectedTab != "dashboard" && (
+						<Undo2Icon
+							size={50}
+							className={`absolute cursor-pointer hover:text-${colors[selectedTab]} transition-all`}
+							onClick={() => setSelectedTab("dashboard")}
+						/>
+					)}
+					<h1 className="text-5xl w-full cursor-default text-center">
+						Welcome <em className="text-[--bg-color] font-black">{username}</em>
+					</h1>
+				</div>
+				<h2 className={`text-${colors[selectedTab]} cursor-default text-4xl text-center font-bold bg-black/30 rounded-full px-4 py-2 my-4`}>
+					{selectedTab === "stream" ? "Streaming" : selectedTab === "vod" ? "VODs" : "Dashboard"}
+				</h2>
+
+				{selectedTab == "dashboard" ? (
+					<div id="tab-select" className="flex justify-evenly items-center h-full w-full text-[calc((4vh+4vw)/2)] font-bold">
+						<div
+							id="stream-tab"
+							className={`relative ${
+								isLive ? "bg-[#ff0000] hover:bg-[#ff0000]/80" : "bg-black/30 hover:bg-black/40"
+							} flex flex-col justify-evenly items-center text-center w-[50vh] h-[50vh] rounded-xl cursor-pointer hover:scale-105 transition-all bg-`}
+							onClick={() => setSelectedTab("stream")}
+						>
+							{isLive && (
+								<div className="absolute -bottom-5 left-1/2 transform -translate-x-1/2 bg-white text-[#ff0000] text-[2rem] font-black tracking-widest py-1 sm:px-5 px-4 z-30 flex items-center justify-center rounded-tr-xl rounded-bl-xl rounded-tl-xl rounded-br-xl">
+									LIVE
+								</div>
+							)}
+							<RecordIcon color={isLive ? "white" : "red"} size={100} />
+							<h1>Streaming</h1>
+						</div>
+						<div
+							id="vod-tab"
+							className="relative flex flex-col justify-evenly items-center bg-black/30 hover:bg-black/40 text-white w-[50vh] h-[50vh] rounded-xl cursor-pointer hover:scale-105 transition-all"
+							onClick={() => vods.length > 0 && setSelectedTab("vod")}
+						>
+							<PlaybackIcon size={100} />
+							<h1 className="text-white">VODs</h1>
+							<h3 className={`${vods.length > 0 ? "text-white" : "text-gray-600"} absolute bottom-5 text-sm`}>
+								{vods.length} VOD{vods.length != 1 && "s"} available
+							</h3>
+						</div>
+					</div>
+				) : selectedTab === "stream" && username && userId ? (
+					<StreamDashboard username={username} userId={userId} isLive={isLive} />
+				) : (
+					<VodsDashboard vods={vods} />
+				)}
+			</div>
+		</DynamicPageContent>
+	);
+};
+
+export default DashboardPage;
--- a/frontend/src/pages/StreamDashboardPage.tsx
+++ b/frontend/src/pages/StreamDashboardPage.tsx
@@ -1,480 +0,0 @@
-import React, { useState, useEffect } from "react";
-import DynamicPageContent from "../components/Layout/DynamicPageContent";
-import Button from "../components/Input/Button";
-import Input from "../components/Input/Input";
-import { useCategories } from "../hooks/useContent";
-import {
-  X as CloseIcon,
-  Eye as ShowIcon,
-  EyeOff as HideIcon,
-} from "lucide-react";
-import { useAuth } from "../context/AuthContext";
-import { debounce } from "lodash";
-import VideoPlayer from "../components/Stream/VideoPlayer";
-import { CategoryType } from "../types/CategoryType";
-import { StreamListItem } from "../components/Layout/ListItem";
-import { getCategoryThumbnail } from "../utils/thumbnailUtils";
-
-interface StreamData {
-  title: string;
-  category_name: string;
-  viewer_count: number;
-  start_time: string;
-  stream_key: string;
-}
-
-const StreamDashboardPage: React.FC = () => {
-  const { username } = useAuth();
-  const [isStreaming, setIsStreaming] = useState(false);
-  const [streamData, setStreamData] = useState<StreamData>({
-    title: "",
-    category_name: "",
-    viewer_count: 0,
-    start_time: "",
-    stream_key: "",
-  });
-  const [streamDetected, setStreamDetected] = useState(false);
-  const [timeStarted, setTimeStarted] = useState("");
-  const [isCategoryFocused, setIsCategoryFocused] = useState(false);
-  const [filteredCategories, setFilteredCategories] = useState<CategoryType[]>(
-    []
-  );
-  const [thumbnail, setThumbnail] = useState<File | null>(null);
-  const [thumbnailPreview, setThumbnailPreview] = useState<{
-    url: string;
-    isCustom: boolean;
-  }>({ url: "", isCustom: false });
-  const [debouncedCheck, setDebouncedCheck] = useState<Function | null>(null);
-  const [showKey, setShowKey] = useState(false);
-
-  const {
-    categories,
-    isLoading: categoriesLoading,
-    error: categoriesError,
-  } = useCategories("/api/categories/popular/100");
-
-  useEffect(() => {
-    // Set filtered categories when categories load
-    if (categories.length > 0) {
-      setFilteredCategories(categories);
-    }
-  }, [categories]);
-
-  useEffect(() => {
-    const categoryCheck = debounce((categoryName: string) => {
-      const isValidCategory = categories.some(
-        (cat) => cat.title.toLowerCase() === categoryName.toLowerCase()
-      );
-
-      if (isValidCategory && !thumbnailPreview.isCustom) {
-        const defaultThumbnail = getCategoryThumbnail(categoryName);
-        setThumbnailPreview({ url: defaultThumbnail, isCustom: false });
-      }
-    }, 300);
-
-    setDebouncedCheck(() => categoryCheck);
-
-    return () => {
-      categoryCheck.cancel();
-    };
-  }, [categories, thumbnailPreview.isCustom]);
-
-  useEffect(() => {
-    if (username) {
-      checkStreamStatus();
-    }
-  }, [username]);
-
-  const checkStreamStatus = async () => {
-    if (!username) return;
-
-    try {
-      const response = await fetch(`/api/user/${username}/status`);
-      const data = await response.json();
-      setIsStreaming(data.is_live);
-
-      if (data.is_live) {
-        const streamResponse = await fetch(
-          `/api/streams/${data.user_id}/data`,
-          { credentials: "include" }
-        );
-        const streamData = await streamResponse.json();
-        setStreamData({
-          title: streamData.title,
-          category_name: streamData.category_name,
-          viewer_count: streamData.num_viewers,
-          start_time: streamData.start_time,
-          stream_key: streamData.stream_key,
-        });
-
-        console.log("Stream data:", streamData);
-
-        const time = Math.floor(
-          (Date.now() - new Date(streamData.start_time).getTime()) / 60000 // Convert to minutes
-        );
-
-        if (time < 60) setTimeStarted(`${time}m ago`);
-        else if (time < 1440)
-          setTimeStarted(`${Math.floor(time / 60)}h ${time % 60}m ago`);
-        else
-          setTimeStarted(
-            `${Math.floor(time / 1440)}d ${Math.floor((time % 1440) / 60)}h ${
-              time % 60
-            }m ago`
-          );
-      } else {
-        // Just need the stream key if not streaming
-        const response = await fetch(`/api/user/${username}/stream_key`);
-        const keyData = await response.json();
-        setStreamData((prev) => ({
-          ...prev,
-          stream_key: keyData.stream_key,
-        }));
-      }
-    } catch (error) {
-      console.error("Error checking stream status:", error);
-    }
-  };
-
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const { name, value } = e.target;
-    setStreamData((prev) => ({ ...prev, [name]: value }));
-
-    if (name === "category_name") {
-      const filtered = categories.filter((cat) =>
-        cat.title.toLowerCase().includes(value.toLowerCase())
-      );
-      setFilteredCategories(filtered);
-      if (debouncedCheck) {
-        debouncedCheck(value);
-      }
-    }
-  };
-
-  const handleCategorySelect = (categoryName: string) => {
-    console.log("Selected category:", categoryName);
-    setStreamData((prev) => ({ ...prev, category_name: categoryName }));
-    setFilteredCategories([]);
-    if (debouncedCheck) {
-      debouncedCheck(categoryName);
-    }
-  };
-
-  const handleThumbnailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (e.target.files && e.target.files[0]) {
-      const file = e.target.files[0];
-      setThumbnail(file);
-      setThumbnailPreview({
-        url: URL.createObjectURL(file),
-        isCustom: true,
-      });
-    } else {
-      setThumbnail(null);
-      if (streamData.category_name && debouncedCheck) {
-        debouncedCheck(streamData.category_name);
-      } else {
-        setThumbnailPreview({ url: "", isCustom: false });
-      }
-    }
-  };
-
-  const clearThumbnail = () => {
-    setThumbnail(null);
-    if (streamData.category_name) {
-      console.log(
-        "Clearing thumbnail as category is set and default category thumbnail will be used"
-      );
-      const defaultThumbnail = getCategoryThumbnail(streamData.category_name);
-      setThumbnailPreview({ url: defaultThumbnail, isCustom: false });
-    } else {
-      setThumbnailPreview({ url: "", isCustom: false });
-    }
-  };
-
-  const isFormValid = () => {
-    return (
-      streamData.title.trim() !== "" &&
-      streamData.category_name.trim() !== "" &&
-      categories.some(
-        (cat) =>
-          cat.title.toLowerCase() === streamData.category_name.toLowerCase()
-      ) &&
-      streamDetected
-    );
-  };
-
-  const handlePublishStream = async () => {
-    console.log("Starting stream with data:", streamData);
-
-    try {
-      const response = await fetch("/api/publish_stream", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify(streamData),
-      });
-
-      if (response.ok) {
-        console.log("Stream published successfully");
-        window.location.reload();
-      } else if (response.status === 403) {
-        console.error("Unauthorized - Invalid stream key or already streaming");
-      } else {
-        console.error("Failed to publish stream");
-      }
-    } catch (error) {
-      console.error("Error publishing stream:", error);
-    }
-  };
-
-  const handleUpdateStream = async () => {
-    console.log("Updating stream with data:", streamData);
-
-    try {
-      const response = await fetch("/api/update_stream", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          key: streamData.stream_key,
-          title: streamData.title,
-          category_name: streamData.category_name,
-          thumbnail: thumbnail,
-        }),
-      });
-
-      if (response.ok) {
-        console.log("Stream updated successfully");
-        window.location.reload();
-      } else {
-        console.error("Failed to update stream");
-      }
-    } catch (error) {
-      console.error("Error updating stream:", error);
-    }
-  };
-
-  const handleEndStream = async () => {
-    console.log("Ending stream...");
-    
-    try {
-      const response = await fetch("/api/end_stream", {
-        method: "POST",
-        headers: {
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ key: streamData.stream_key }),
-      });
-
-      if (response.ok) {
-        console.log("Stream ended successfully");
-        window.location.reload();
-      } else {
-        console.error("Failed to end stream");
-      }
-    } catch (error) {
-      console.error("Error ending stream:", error);
-    }
-  };
-
-  return (
-    <DynamicPageContent className="flex flex-col min-h-screen bg-gradient-radial from-purple-600 via-blue-900 to-black">
-      <div
-        id="streamer-dashboard"
-        className="flex flex-col flex-grow mx-auto px-4"
-      >
-        <h1 className="text-4xl font-bold text-white text-center">
-          {isStreaming ? "Stream Dashboard" : "Start Streaming"}
-        </h1>
-
-        <div className="flex flex-grow gap-8 items-stretch pb-4">
-          {/* Left side - Stream Settings */}
-          <div className="flex flex-col flex-grow">
-            <h2 className="text-center text-2xl font-bold text-white mb-4">
-              Stream Settings
-            </h2>
-            <div className="flex flex-col flex-grow justify-evenly space-y-6 bg-gray-800 rounded-lg p-6 shadow-xl">
-              <div>
-                <label className="block text-white mb-2">Stream Title</label>
-                <Input
-                  name="title"
-                  value={streamData.title}
-                  onChange={handleInputChange}
-                  placeholder="Enter your stream title"
-                  extraClasses="w-[70%] focus:w-[70%]"
-                  maxLength={50}
-                />
-              </div>
-
-              <div className="relative">
-                <label className="block text-white mb-2">Category</label>
-                <Input
-                  name="category_name"
-                  value={streamData.category_name}
-                  onChange={handleInputChange}
-                  onFocus={() => setIsCategoryFocused(true)}
-                  onBlur={() =>
-                    setTimeout(() => setIsCategoryFocused(false), 200)
-                  }
-                  placeholder="Select or type a category"
-                  extraClasses="w-[70%] focus:w-[70%]"
-                  maxLength={50}
-                  autoComplete="off"
-                  type="search"
-                />
-                {isCategoryFocused && filteredCategories.length > 0 && (
-                  <div className="absolute z-10 w-full bg-gray-700 mt-1 rounded-md shadow-lg max-h-48 overflow-y-auto">
-                    {filteredCategories.map((category) => (
-                      <div
-                        key={category.title}
-                        className="px-4 py-2 hover:bg-gray-600 cursor-pointer text-white"
-                        onClick={() => handleCategorySelect(category.title)}
-                      >
-                        {category.title}
-                      </div>
-                    ))}
-                  </div>
-                )}
-              </div>
-
-              <div>
-                <label className="block text-white mb-2">
-                  Stream Thumbnail
-                </label>
-                <div className="relative flex flex-row items-center justify-center">
-                  <input
-                    type="file"
-                    accept="image/*"
-                    onChange={handleThumbnailChange}
-                    className="hidden"
-                    id="thumbnail-upload"
-                  />
-                  <label
-                    htmlFor="thumbnail-upload"
-                    className="cursor-pointer inline-block bg-gray-700 hover:bg-gray-600 text-white py-2 px-4 rounded-lg transition-colors"
-                  >
-                    {thumbnail ? "Change Thumbnail" : "Choose Thumbnail"}
-                  </label>
-                  <span className="ml-3 text-gray-400">
-                    {thumbnail ? thumbnail.name : "No file selected"}
-                  </span>
-                  {thumbnailPreview.isCustom && (
-                    <button
-                      onClick={clearThumbnail}
-                      className="absolute right-0 top-0 p-1 bg-red-500 rounded-full hover:bg-red-600 transition-colors"
-                    >
-                      <CloseIcon size={16} className="text-white" />
-                    </button>
-                  )}
-                </div>
-                {!thumbnailPreview.isCustom && (
-                  <p className="text-gray-400 mt-2 text-sm text-center">
-                    No thumbnail selected - the default category image will be
-                    used
-                  </p>
-                )}
-              </div>
-
-              {isStreaming && (
-                <div className="bg-gray-700 p-4 rounded-lg">
-                  <h3 className="text-white font-semibold mb-2">Stream Info</h3>
-                  <p className="text-gray-300">
-                    Viewers: {streamData.viewer_count}
-                  </p>
-                  <p className="text-gray-300">
-                    Started:{" "}
-                    {new Date(streamData.start_time!).toLocaleTimeString()}
-                    {` (${timeStarted})`}
-                  </p>
-                </div>
-              )}
-              <div className="flex items-center mx-auto p-10 bg-gray-900 w-fit rounded-xl py-4">
-                <label className="block text-white mr-8">Stream Key</label>
-                <Input
-                  type={showKey ? "text" : "password"}
-                  value={streamData.stream_key}
-                  readOnly
-                  extraClasses="w-fit pr-[30px]"
-                  disabled
-                />
-                <button
-                  type="button"
-                  onClick={() => setShowKey(!showKey)}
-                  className="-translate-x-[30px] top-1/2 h-6 w-6 text-white"
-                >
-                  {showKey ? (
-                    <HideIcon className="h-6 w-6" />
-                  ) : (
-                    <ShowIcon className="h-6 w-6" />
-                  )}
-                </button>
-              </div>
-
-              <div className="flex flex-col w-fit mx-auto items-center justify-center pt-6 gap-6">
-                <div className="flex gap-8">
-                  <Button
-                    onClick={
-                      isStreaming ? handleUpdateStream : handlePublishStream
-                    }
-                    disabled={!isFormValid()}
-                    extraClasses="text-2xl px-8 py-4 disabled:opacity-50 disabled:cursor-not-allowed"
-                  >
-                    {isStreaming ? "Update Stream" : "Start Streaming"}
-                  </Button>
-                  {isStreaming && (
-                    <Button
-                      onClick={handleEndStream}
-                      extraClasses="text-2xl px-8 py-4 hover:text-red-500 hover:border-red-500"
-                    >
-                      End Stream
-                    </Button>
-                  )}
-                </div>
-                {!streamDetected && (
-                  <p className="text-red-500 text-sm">
-                    No stream input detected. Please start streaming using your
-                    broadcast software.
-                  </p>
-                )}
-              </div>
-            </div>
-          </div>
-
-          {/* Right side - Preview */}
-          <div className="w-[25vw] flex flex-col">
-            <h2 className="text-center text-2xl font-bold text-white mb-4">
-              Stream Preview
-            </h2>
-            <div className="flex flex-col gap-4 bg-gray-800 rounded-lg p-4 w-full h-fit flex-grow justify-around">
-              <div className="flex flex-col">
-                <p className="text-white text-center pb-4">Video</p>
-                <VideoPlayer
-                  streamer={username ?? undefined}
-                  extraClasses="border border-white"
-                  onStreamDetected={setStreamDetected}
-                />
-              </div>
-              <div className="flex flex-col">
-                <p className="text-white text-center">List Item</p>
-                <StreamListItem
-                  id={1}
-                  title={streamData.title || "Stream Title"}
-                  username={username || ""}
-                  streamCategory={streamData.category_name || "Category"}
-                  viewers={streamData.viewer_count}
-                  thumbnail={thumbnailPreview.url || ""}
-                  onItemClick={() => {}}
-                  extraClasses="max-w-[20vw]"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </DynamicPageContent>
-  );
-};
-
-export default StreamDashboardPage;
--- a/frontend/src/types/VodType.ts
+++ b/frontend/src/types/VodType.ts
@@ -1,12 +1,11 @@
 export interface VodType {
    type: "vod";
-    id: number;
+    vod_id: number;
    title: string;
-    streamer: string;
+    username: string;
    datetime: string;
-    category: string;
-    length: number;
+    category_name: string;
+    length: string;
    views: number;
-    url: string;
    thumbnail: string;
 }
--- a/web_server/utils/stream_utils.py
+++ b/web_server/utils/stream_utils.py
@@ -85,7 +85,7 @@ def get_latest_vod(user_id: int):
    Returns data of the most recent stream by a streamer
    """
    with Database() as db:
-        latest_vod = db.fetchone("""SELECT * FROM vods WHERE user_id = ? ORDER BY vod_id DESC;""", (user_id,))
+        latest_vod = db.fetchone("""SELECT vods.*, category_name FROM vods JOIN categories ON vods.category_id = categories.category_id WHERE user_id = ? ORDER BY vod_id DESC;""", (user_id,))
    return latest_vod

 def get_user_vods(user_id: int):
@@ -93,7 +93,7 @@ def get_user_vods(user_id: int):
    Returns data of all vods by a streamer
    """
    with Database() as db:
-        vods = db.fetchall("""SELECT * FROM vods WHERE user_id = ?;""", (user_id,))
+        vods = db.fetchall("""SELECT vods.*, category_name FROM vods JOIN categories ON vods.category_id = categories.category_id WHERE user_id = ? ORDER BY vod_id DESC;""", (user_id,))
    return vods

 def get_all_vods():