Replace toggle with icon button so it is more clear what the toggle does without adding a label

src/components/auth/client/Sign_Out.tsx

@@ -15,10 +15,8 @@ export default function Sign_Out() {
           className="rounded-full border-2 border-white m-auto mr-1 md:mr-2
           max-w-[25px] md:max-w-[35px]"
         />
-        <Button onClick={() => signOut()}
+        <Button onClick={() => signOut()} variant="secondary"
           className="w-full p-2 rounded-xl text-sm md:text-lg"
-          //bg-gradient-to-tl from-[#35363F] to=[#24191A]
-          //hover:bg-gradient-to-tr hover:from-[#35363F] hover:to-[#23242F]"
         >
           Sign Out
         </Button>
@@ -26,5 +24,3 @@ export default function Sign_Out() {
     );
   }
 };
-
-        //<User_Avatar session={session} />

src/components/ui/TV_Toggle.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { Switch } from "~/components/ui/shadcn/switch";
+import Image from "next/image";
 import { useTVMode } from "~/components/context/TVModeContext";
 import { useSession } from "next-auth/react";
 
@@ -8,12 +8,16 @@ export default function TV_Toggle() {
   const { data: session } = useSession();
   if (!session) return <div/>;
   return (
-    <Switch
+    <button onClick={toggleTVMode} className="mr-4 mt-1">
-      checked={tvMode}
+      {tvMode ? (
-      onCheckedChange={toggleTVMode}
+        <Image src="/images/exit_fullscreen.png" alt="Exit TV Mode"
-      className="bg-gradient-to-br from-[#595959] to-[#444444]
+          width={25} height={25}
-        hover:bg-gradient-to-bl hover:from-[#484848] hover:to-[#333333]
-        mx-4 mt-2"
         />
+      ) : (
+        <Image src="/images/fullscreen.png" alt="Enter TV Mode"
+          width={25} height={25}
+        />
+      )}
+    </button>
   );
 }