UPDATE/FEAT: Proper handling of profile pictures where a fallback to the default pfp is used;

REFACTOR: Remove unnecessary props from users on `ResultsPage`;
REFACTOR: General formatting

frontend/src/components/Layout/ListItem.tsx

@@ -84,7 +84,11 @@ const UserListItem: React.FC<UserListItemProps> = ({ title, username, isLive, on
 				onClick={onItemClick}
 			>
 				<img
-          src="/images/monkey.png"
+					src={`/user/${username}/profile_picture`}
+					onError={(e) => {
+						e.currentTarget.src = "/images/pfps/default.png";
+						e.currentTarget.onerror = null;
+					}}
 					alt={`user ${username}`}
 					className="rounded-xl border-[0.15em] border-[var(--bg-color)] cursor-pointer"
 				/>

frontend/src/components/Navigation/Sidebar.tsx

@@ -4,6 +4,7 @@ import { useNavigate } from "react-router-dom";
 import { useAuth } from "../../context/AuthContext";
 import { useSidebar } from "../../context/SidebarContext";
 import { ToggleButton } from "../Input/Button";
+import { getCategoryThumbnail } from "../../utils/thumbnailUtils";
 
 interface Streamer {
 	user_id: number;
@@ -56,12 +57,7 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses = "" }) => {
 	// Keyboard shortcut to toggle sidebar
 	useEffect(() => {
 		const handleKeyPress = (e: KeyboardEvent) => {
-      if (
+			if (e.key === "s" && document.activeElement == document.body && isLoggedIn) handleSideBar();
-        e.key === "s" &&
-        document.activeElement == document.body &&
-        isLoggedIn
-      )
-        handleSideBar();
 		};
 
 		document.addEventListener("keydown", handleKeyPress);
@@ -76,9 +72,7 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses = "" }) => {
 			<ToggleButton
 				onClick={() => handleSideBar()}
 				extraClasses={`absolute group text-[1rem] top-[9vh] ${
-          showSideBar
+					showSideBar ? "left-[16vw] duration-[0.5s]" : "left-[20px] duration-[1s]"
-            ? "left-[16vw] duration-[0.5s]"
-            : "left-[20px] duration-[1s]"
 				} ease-in-out cursor-pointer z-[50]`}
 				toggled={showSideBar}
 			>
@@ -93,55 +87,38 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses = "" }) => {
 			<div
 				id={`sidebar-${sidebarId.current}`}
 				className={`fixed top-0 left-0 w-[15vw] h-screen overflow-x-hidden flex flex-col bg-[var(--sideBar-bg)] text-[var(--sideBar-text)] text-center overflow-y-auto scrollbar-hide
-        transition-all duration-500 ease-in-out ${
+        transition-all duration-500 ease-in-out ${showSideBar ? "translate-x-0" : "-translate-x-full"} z-50 ${extraClasses}`}
-          showSideBar ? "translate-x-0" : "-translate-x-full"
-        } ${extraClasses}`}
 			>
 				{/* Profile Info */}
 				<div className="flex flex-row items-center border-b-4 border-[var(--profile-border)] justify-evenly bg-[var(--sideBar-profile-bg)] py-[1em]">
 					<img
-            src="/images/monkey.png"
+						src={`/user/${username}/profile_picture`}
+						onError={(e) => {
+							e.currentTarget.src = "/images/pfps/default.png";
+							e.currentTarget.onerror = null;
+						}}
 						alt="profile picture"
 						className="w-[3em] h-[3em] rounded-full border-[0.15em] border-purple-500 cursor-pointer"
 						onClick={() => navigate(`/user/${username}`)}
 					/>
 					<div className="text-center flex flex-col items-center justify-center">
-            <h5 className="font-thin text-[0.85rem] cursor-default text-[var(--sideBar-profile-text)]">
+						<h5 className="font-thin text-[0.85rem] cursor-default text-[var(--sideBar-profile-text)]">Logged in as</h5>
-              Logged in as
+						<button className="font-black text-[1.4rem] hover:underline" onClick={() => navigate(`/user/${username}`)}>
-            </h5>
+							<div className="text-[var(--sideBar-profile-text)]">{username}</div>
-            <button
-              className="font-black text-[1.4rem] hover:underline"
-              onClick={() => navigate(`/user/${username}`)}
-            >
-              <div className="text-[var(--sideBar-profile-text)]">
-                {username}
-              </div>
 						</button>
 					</div>
 				</div>
 
-        <div
+				<div id="following" className="flex flex-col flex-grow justify-evenly p-4 gap-4">
-          id="following"
-          className="flex flex-col flex-grow justify-evenly p-4 gap-4"
-        >
 					<div
 						className="bg-[var(--follow-bg)] rounded-[1em] hover:scale-105 transition-all ease-in-out duration-300"
-            onMouseEnter={(e) =>
+						onMouseEnter={(e) => (e.currentTarget.style.boxShadow = "var(--follow-shadow)")}
-              (e.currentTarget.style.boxShadow = "var(--follow-shadow)")
-            }
 						onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
 					>
-            <h1 className="text-[2vw] font-bold text-2xl p-[0.75rem] cursor-default">
+						<h1 className="text-[2vw] font-bold text-2xl p-[0.75rem] cursor-default">Following</h1>
-              Following
-            </h1>
 					</div>
-          <div
+					<div id="streamers-followed" className="flex flex-col flex-grow items-center">
-            id="streamers-followed"
+						<h2 className="border-b-4 border-t-4 w-[125%] text-2xl cursor-default">Streamers</h2>
-            className="flex flex-col flex-grow items-center"
-          >
-            <h2 className="border-b-4 border-t-4 w-[125%] text-2xl cursor-default">
-              Streamers
-            </h2>
 						<div className="flex flex-col flex-grow justify-evenly w-full">
 							{followedStreamers.map((streamer) => (
 								<button
@@ -155,33 +132,21 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses = "" }) => {
 						</div>
 					</div>
 
-          <div
+					<div id="categories-followed" className="flex flex-col flex-grow items-center">
-            id="categories-followed"
+						<h2 className="border-b-4 border-t-4 w-[125%] text-2xl cursor-default">Categories</h2>
-            className="flex flex-col flex-grow items-center"
-          >
-            <h2 className="border-b-4 border-t-4 w-[125%] text-2xl cursor-default">
-              Categories
-            </h2>
 
 						{/* Followed Categories */}
-            <div
+						<div id="categories-followed" className="grid grid-cols-1 gap-4 p-4 w-full">
-              id="categories-followed"
-              className="grid grid-cols-1 gap-4 p-4 w-full"
-            >
 							{followedCategories.map((category) => {
 								return (
 									<div
 										key={`${sidebarId.current}-category-${category.category_id}`}
 										className="group relative flex flex-col items-center justify-center h-full max-h-[50px] border border-[--text-color]
                      rounded-lg overflow-hidden hover:shadow-lg transition-all text-white hover:text-purple-500 cursor-pointer"
-                    onClick={() =>
+										onClick={() => (window.location.href = `/category/${category.category_name}`)}
-                      (window.location.href = `/category/${category.category_name}`)
-                    }
 									>
 										<img
-                      src={`/images/category_thumbnails/${category.category_name
+											src={getCategoryThumbnail(category.category_name)}
-                        .toLowerCase()
-                        .replace(/ /g, "_")}.webp`}
 											alt={category.category_name}
 											className="w-full h-28 object-cover group-hover:blur-[3px] transition-all"
 										/>

frontend/src/components/Stream/ChatPanel.tsx

@@ -183,7 +183,11 @@ const ChatPanel: React.FC<ChatPanelProps> = ({ streamId, onViewerCountChange })
 							onClick={() => (msg.chatter_username === username ? null : (window.location.href = `/user/${msg.chatter_username}`))}
 						>
 							<img
-                src="/images/monkey.png"
+								src={`/user/${msg.chatter_username}/profile_picture`}
+								onError={(e) => {
+									e.currentTarget.src = "/images/pfps/default.png";
+									e.currentTarget.onerror = null;
+								}}
 								alt="User Avatar"
 								className="w-full h-full object-cover"
 								style={{ width: "2.5em", height: "2.5em" }}

frontend/src/pages/ResultsPage.tsx

@@ -84,9 +84,7 @@ const ResultsPage: React.FC = ({ }) => {
               id: user.user_id,
               type: "user",
               title: `${user.is_live ? "🔴" : ""} ${user.username}`,
-              viewers: 0,
+              username: user.username
-              username: user.username,
-              thumbnail: user.profile_picture,
             }))}
             title="Users"
             onItemClick={(username: string) =>

frontend/src/pages/UserPage.tsx

@@ -28,12 +28,9 @@ interface UserProfileData {
 }
 
 const UserPage: React.FC = () => {
-  const [userPageVariant, setUserPageVariant] = useState<
+	const [userPageVariant, setUserPageVariant] = useState<"personal" | "streamer" | "user" | "admin">("user");
-    "personal" | "streamer" | "user" | "admin"
-  >("user");
 	const [profileData, setProfileData] = useState<UserProfileData>();
-  const { isFollowing, checkFollowStatus, followUser, unfollowUser } =
+	const { isFollowing, checkFollowStatus, followUser, unfollowUser } = useFollow();
-    useFollow();
 	const { showAuthModal, setShowAuthModal } = useAuthModal();
 	const { username: loggedInUsername } = useAuth();
 	const { username } = useParams();
@@ -41,20 +38,23 @@ const UserPage: React.FC = () => {
 	const navigate = useNavigate();
 
 	// Saves uploaded image as profile picture for the user
-  const saveUploadedImage = async (event) => {
+	const saveUploadedImage = async (event: React.ChangeEvent<HTMLInputElement>) => {
-    const img = event.target.files[0];
+		const files = event.target.files;
+		if (!files) return;
+		const img = files[0];
 		if (img) {
 			const formData = new FormData();
-      formData.append('image', img);
+			formData.append("image", img);
 
 			try {
-        const response = await fetch('/api/user/profile_picture/upload', {
+				const response = await fetch("/api/user/profile_picture/upload", {
-          method: 'POST',
+					method: "POST",
 					body: formData,
 				});
 
 				if (response.ok) {
 					console.log("Success");
+					window.location.reload();
 				}
 			} catch (error) {
 				console.log("Failure");
@@ -93,10 +93,7 @@ const UserPage: React.FC = () => {
 									currentStreamCategory: streamData.category_id,
 									currentStreamViewers: streamData.num_viewers,
 									currentStreamStartTime: streamData.start_time,
-                  currentStreamThumbnail: getCategoryThumbnail(
+									currentStreamThumbnail: getCategoryThumbnail(streamData.category_name, streamData.thumbnail),
-                    streamData.category_name,
-                    streamData.thumbnail
-                  ),
 								};
 							});
 							let variant: "user" | "streamer" | "personal" | "admin";
@@ -119,12 +116,10 @@ const UserPage: React.FC = () => {
 	}, [username]);
 
 	if (!profileData) return <LoadingScreen />;
-  console.log(isUser)
+
 	return (
-    <DynamicPageContent
+		<DynamicPageContent className="min-h-screen text-white flex flex-col">
-      className={`min-h-screen text-white flex flex-col`}
+			<div className="flex justify-evenly self-center items-center h-full px-4 pt-14 pb-8 mx-auto max-w-[80vw] w-full">
-    >
-      <div className="flex justify-evenly justify-self-center items-center h-full px-4 py-8 max-w-[80vw] w-full">
 				<div className="grid grid-cols-4 grid-rows-[0.1fr_4fr] w-full gap-8">
 					{/* Profile Section - TOP  */}
 
@@ -151,9 +146,7 @@ const UserPage: React.FC = () => {
                rounded-full flex-shrink-0 border-4 border-[var(--user-pfp-border)] inset-0 z-20"
 							style={{ boxShadow: "var(--user-pfp-border-shadow)" }}
 						>
-              <label
+							<label className={`relative ${isUser ? "cursor-pointer group" : ""} overflow-visible`}>
-                className={`relative ${isUser ? "cursor-pointer group" : ""} overflow-visible`}
-              >
 								{/* If user is live then displays a live div */}
 								{Boolean(profileData.isLive) && (
 									<div className="absolute -bottom-2 left-1/2 transform -translate-x-1/2 bg-red-600 text-white text-sm font-bold 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">
@@ -161,7 +154,11 @@ const UserPage: React.FC = () => {
 									</div>
 								)}
 								<img
-                  src="/images/monkey.png"
+									src={`/user/${profileData.username}/profile_picture`}
+									onError={(e) => {
+										e.currentTarget.src = "/images/pfps/default.png";
+										e.currentTarget.onerror = null;
+									}}
 									alt={`${profileData.username}'s profile`}
 									className="sm:w-full h-full object-cover rounded-full relative z-0"
 								/>
@@ -169,18 +166,11 @@ const UserPage: React.FC = () => {
 								{/* If current user is the profile user then allow profile picture swap */}
 								{isUser && (
 									<>
-                    <div className="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity duration-200 rounded-full"></div>
+										<div className="absolute top-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity duration-200 rounded-full"></div>
-                    <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
+										<div className="absolute top-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
-                      <CameraIcon
+											<CameraIcon size={32} className="text-white bg-black/50 p-1 rounded-full" />
-                        size={32}
-                        className="text-white bg-black/50 p-1 rounded-full"
-                      />
 										</div>
-                    <input
+										<input type="file" className="hidden" onChange={saveUploadedImage} accept="image/*" />
-                      type="file"
-                      className="hidden"
-                      onChange={saveUploadedImage}
-                      accept="image/*" />
 									</>
 								)}
 							</label>
@@ -195,14 +185,8 @@ const UserPage: React.FC = () => {
 						{userPageVariant === "streamer" && (
 							<>
 								<div className="flex items-center space-x-2 mb-6">
-                  <span className="text-gray-400">
+									<span className="text-gray-400">{profileData.followerCount.toLocaleString()} followers</span>
-                    {profileData.followerCount.toLocaleString()} followers
+									{profileData.isPartnered && <span className="bg-purple-600 text-white text-sm px-2 py-1 rounded">Partner</span>}
-                  </span>
-                  {profileData.isPartnered && (
-                    <span className="bg-purple-600 text-white text-sm px-2 py-1 rounded">
-                      Partner
-                    </span>
-                  )}
 								</div>
 
 								{/* (Un)Follow Button  */}
@@ -214,12 +198,7 @@ const UserPage: React.FC = () => {
 										Follow
 									</Button>
 								) : (
-                  <Button
+									<Button extraClasses="w-full bg-[#a80000] z-50" onClick={() => unfollowUser(profileData?.id, setShowAuthModal)}>
-                    extraClasses="w-full bg-[#a80000]"
-                    onClick={() =>
-                      unfollowUser(profileData?.id, setShowAuthModal)
-                    }
-                  >
 										Unfollow
 									</Button>
 								)}
@@ -232,17 +211,11 @@ const UserPage: React.FC = () => {
 						className="col-span-1 bg-[var(--user-sideBox)] rounded-lg p-6 grid grid-rows-[auto_1fr] text-center items-center justify-center"
 					>
 						{/* User Type (e.g., "USER") */}
-            <small className="text-green-400">
+						<small className="text-green-400">{userPageVariant.toUpperCase()}</small>
-              {userPageVariant.toUpperCase()}
-            </small>
 
 						<div className="mt-6 text-center">
-              <h2 className="text-xl font-semibold mb-3">
+							<h2 className="text-xl font-semibold mb-3">About {profileData.username}</h2>
-                About {profileData.username}
+							<p className="text-gray-300 whitespace-pre-wrap">{profileData.bio}</p>
-              </h2>
-              <p className="text-gray-300 whitespace-pre-wrap">
-                {profileData.bio}
-              </p>
 						</div>
 					</div>
 
@@ -255,9 +228,7 @@ const UserPage: React.FC = () => {
 							<>
 								{profileData.isLive ? (
 									<div className="mb-8">
-                    <h2 className="text-2xl bg-[#ff0000] border py-4 px-12 font-black mb-4 rounded-[4rem]">
+										<h2 className="text-2xl bg-[#ff0000] border py-4 px-12 font-black mb-4 rounded-[4rem]">Currently Live!</h2>
-                      Currently Live!
-                    </h2>
 										<StreamListItem
 											id={profileData.id}
 											title={profileData.currentStreamTitle || ""}
@@ -277,9 +248,7 @@ const UserPage: React.FC = () => {
 								{/* ↓↓ VODS ↓↓ */}
 								<div>
 									<h2 className="text-2xl font-bold mb-4">Past Broadcasts</h2>
-                  <div className="text-gray-400 rounded-none">
+									<div className="text-gray-400 rounded-none">No past broadcasts found</div>
-                    No past broadcasts found
-                  </div>
 								</div>
 							</>
 						)}
@@ -289,9 +258,7 @@ const UserPage: React.FC = () => {
 								{/* ↓↓ VODS ↓↓ */}
 								<div>
 									<h2 className="text-2xl font-bold mb-4">Past Broadcasts</h2>
-                  <div className="text-gray-400 rounded-none">
+									<div className="text-gray-400 rounded-none">No past broadcasts found</div>
-                    No past broadcasts found
-                  </div>
 								</div>
 							</>
 						)}
@@ -305,45 +272,30 @@ const UserPage: React.FC = () => {
 						<div
 							className="bg-[var(--user-follow-bg)] rounded-[1em] hover:scale-105 transition-all ease-in-out duration-300 
                  flex items-center justify-center w-full p-4 content-start"
-              onMouseEnter={(e) =>
+							onMouseEnter={(e) => (e.currentTarget.style.boxShadow = "var(--follow-shadow)")}
-                (e.currentTarget.style.boxShadow = "var(--follow-shadow)")
-              }
 							onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
 						>
-              <button
+							<button className="text-[var(--follow-text)] whitespace-pre-wrap" onClick={() => navigate(`/user/${username}/following`)}>
-                className="text-[var(--follow-text)] whitespace-pre-wrap"
-                onClick={() => navigate(`/user/${username}/following`)}
-              >
 								Following
 							</button>
 						</div>
 						<div
 							className="bg-[var(--user-follow-bg)] rounded-[1em] hover:scale-105 transition-all ease-in-out duration-300 
                  flex items-center justify-center w-full p-4 content-start"
-              onMouseEnter={(e) =>
+							onMouseEnter={(e) => (e.currentTarget.style.boxShadow = "var(--follow-shadow)")}
-                (e.currentTarget.style.boxShadow = "var(--follow-shadow)")
-              }
 							onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
 						>
 							<ul className="list-none">
-                <li className="text-[var(--follow-text)] whitespace-pre-wrap list-none">
+								<li className="text-[var(--follow-text)] whitespace-pre-wrap list-none">Streamers</li>
-                  Streamers
-                </li>
 							</ul>
 						</div>
 						<div
 							className="bg-[var(--user-follow-bg)] rounded-[1em] hover:scale-105 transition-all ease-in-out duration-300 
                  flex items-center justify-center w-full p-4 content-start"
-              onMouseEnter={(e) =>
+							onMouseEnter={(e) => (e.currentTarget.style.boxShadow = "var(--follow-shadow)")}
-                (e.currentTarget.style.boxShadow = "var(--follow-shadow)")
-              }
 							onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
 						>
-              <button
+							<button onClick={() => navigate(`/user/${username}/yourCategories`)}>Categories</button>
-                onClick={() => navigate(`/user/${username}/yourCategories`)}
-              >
-                Categories
-              </button>
 						</div>
 					</div>
 				</div>

frontend/src/pages/VideoPage.tsx

@@ -25,8 +25,7 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
 	const [streamData, setStreamData] = useState<StreamType>();
 	const [viewerCount, setViewerCount] = useState(0);
 	const { showSideBar } = useSidebar();
-  const { isFollowing, checkFollowStatus, followUser, unfollowUser } =
+	const { isFollowing, checkFollowStatus, followUser, unfollowUser } = useFollow();
-    useFollow();
 	const { showAuthModal, setShowAuthModal } = useAuthModal();
 	const [isStripeReady, setIsStripeReady] = useState(false);
 	const [showCheckout, setShowCheckout] = useState(false);
@@ -98,9 +97,7 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
 
 			// Format as DD:HH:MM:SS
 			setTimeStarted(
-        `${days.toString().padStart(2, "0")}:${hours
+				`${days.toString().padStart(2, "0")}:${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:${seconds
-          .toString()
-          .padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:${seconds
 					.toString()
 					.padStart(2, "0")}`
 			);
@@ -144,10 +141,7 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
 						<VideoPlayer />
 					</div>
 
-          <ChatPanel
+					<ChatPanel streamId={streamerId} onViewerCountChange={(count: number) => setViewerCount(count)} />
-            streamId={streamerId}
-            onViewerCountChange={(count: number) => setViewerCount(count)}
-          />
 
 					{/* Stream Data */}
 					<div
@@ -157,25 +151,27 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
 						{/* Streamer Icon */}
 						<div className="flex flex-col items-center mb-[1em]">
 							<img
-                src="/images/monkey.png"
+								src={`/user/${streamerName}/profile_picture`}
+								onError={(e) => {
+									e.currentTarget.src = "/images/pfps/default.png";
+									e.currentTarget.onerror = null;
+								}}
 								alt="streamer"
 								className="w-[3em] h-[3em] rounded-full border-[0.15em] border-purple-500 cursor-pointer"
 								onClick={() => navigate(`/user/${streamerName}`)}
 							/>
-              <button
+							<button className="text-white font-bold hover:underline mt-[0.5em]" onClick={() => navigate(`/user/${streamerName}`)}>
-                className="text-white font-bold hover:underline mt-[0.5em]"
-                onClick={() => navigate(`/user/${streamerName}`)}
-              >
 								{streamerName}
 							</button>
 						</div>
 
 						{/* Stream Title */}
 						<div className="flex flex-col items-start flex-grow">
-              <h2 className="text-[0.75em] lg:text-[0.85em] xl:text-[1em] font-bold">
+							<h2 className="text-[0.75em] lg:text-[0.85em] xl:text-[1em] font-bold">{streamData ? streamData.title : "Loading..."}</h2>
-                {streamData ? streamData.title : "Loading..."}
+							<a
-              </h2>
+								href={streamData ? `/category/${streamData.streamCategory}` : "#"}
-              <a href={streamData ? `/category/${streamData.streamCategory}` : "#"} className="text-[0.75em] lg:text-[0.85em] xl:text-[1em] text-gray-400">
+								className="text-[0.75em] lg:text-[0.85em] xl:text-[1em] text-gray-400"
+							>
 								{streamData ? streamData.streamCategory : "Loading..."}
 							</a>
 						</div>
@@ -205,28 +201,20 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
 						{/* Stream Stats */}
 						<div className="flex flex-col items-center">
 							<div className="flex items-center gap-[0.5em]">
-                <img
+								<img src="/images/icons/user.png" alt="Viewers Icon" className="w-[1em] h-[1em] md:w-[1.2em] md:h-[1.2em]" />
-                  src="../../../images/icons/user.png"
-                  alt="Viewers Icon"
-                  className="w-[1em] h-[1em] md:w-[1.2em] md:h-[1.2em]"
-                />
 								<span className="font-bold text-[1.2em]">{viewerCount}</span>
 							</div>
 						</div>
 
 						<div className="flex flex-col items-center p-4 min-w-fit">
-              <span className="text-[0.75em]">
+							<span className="text-[0.75em]">{streamData ? timeStarted : "Loading..."}</span>
-                {streamData ? timeStarted : "Loading..."}
-              </span>
 						</div>
 
 						{/* Subscribe Button */}
 						<div className="flex flex-col items-center">
 							<button
 								className={`bg-red-600 text-white font-bold px-[1.5em] py-[0.5em] rounded-md 
-    ${
+    ${isStripeReady ? "hover:bg-red-700" : "opacity-20 cursor-not-allowed"} transition-all`}
-      isStripeReady ? "hover:bg-red-700" : "opacity-20 cursor-not-allowed"
-    } transition-all`}
 								onClick={() => {
 									if (!isLoggedIn) {
 										setShowAuthModal(true);
@@ -241,16 +229,11 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
 					</div>
 					{showCheckout && (
 						<Suspense fallback={<div>Loading checkout...</div>}>
-              <CheckoutForm
+							<CheckoutForm onClose={() => setShowCheckout(false)} streamerID={streamerId} />
-                onClose={() => setShowCheckout(false)}
-                streamerID={streamerId}
-              />
 						</Suspense>
 					)}
 					{/* {showReturn && <Return />} */}
-          {showAuthModal && (
+					{showAuthModal && <AuthModal onClose={() => setShowAuthModal(false)} />}
-            <AuthModal onClose={() => setShowAuthModal(false)} />
-          )}
 				</div>
 			</DynamicPageContent>
 		</SocketProvider>