diff --git a/packages/react/src/components/channel/ChannelCard.tsx b/packages/react/src/components/channel/ChannelCard.tsx
index 054acc02d..e9bdc48eb 100644
--- a/packages/react/src/components/channel/ChannelCard.tsx
+++ b/packages/react/src/components/channel/ChannelCard.tsx
@@ -1,12 +1,13 @@
 import { formatCount } from "@/lib/time";
 import { Button } from "@/shadcn/ui/button";
-import { ReactNode } from "react";
+import { ReactNode, useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { ChannelMenu } from "./ChannelMenu";
 import { ChannelImg } from "./ChannelImg";
 import { TopicBadge } from "../topic/TopicBadge";
 import { ChannelSocials } from "./ChannelSocials";
 import type { SetOptional } from "type-fest";
+import { Link, useNavigate } from "react-router-dom";
 
 type WithNonOptional<T, NonOptionalKeys extends keyof T> = Pick<
   T,
@@ -49,45 +50,74 @@ export function ChannelCard({
   inactive,
 }: ChannelCardProps) {
   const { t } = useTranslation();
+  const navigate = useNavigate();
+
+  const channelHref = `/channel/${id}`;
+
+  const goToChannelClickHandler = useCallback(
+    (evt: React.MouseEvent<HTMLElement, MouseEvent>) => {
+      if ((evt.target as HTMLElement).closest("a")) {
+        console.info("no action b/c closest element is a link.", evt);
+        return;
+      }
+      console.info("JS video click handling", evt);
+      // clicked a non-link part of the channel card.
+      if (evt.ctrlKey) {
+        /** Control clicking a non-link part always goes to the external link no matter what the context */
+        window.open(channelHref, "_blank");
+        evt.preventDefault();
+        evt.stopPropagation();
+      } else {
+        navigate(channelHref);
+        evt.preventDefault();
+        evt.stopPropagation();
+      }
+    },
+    [channelHref, navigate],
+  );
 
   switch (size) {
     case "xs":
     case "sm":
       return (
-        <div className="flex items-center gap-4 rounded-lg bg-base-3 p-4">
-          <ChannelImg
-            className={`h-12 w-12 ${inactive && "opacity-80 saturate-50"}`}
-            channelId={id}
-          />
-          <div className="flex flex-col overflow-hidden">
-            <div className="text-xs text-base-11">
-              {org}
-              {group && ` / ${group}`}
-            </div>
-            <div className="line-clamp-1 text-lg font-bold">{name}</div>
-            <div className="text-sm text-base-11">
-              {showSubscribers &&
-                t("component.channelInfo.subscriberCount", {
-                  n: formatCount(subscriber_count ?? "0"),
-                })}
-              {showVideoCount &&
-                ` / ${t("component.channelInfo.videoCount", {
-                  0: video_count ?? "0",
-                })}`}
-              {showClipCount &&
-                ` / ${t("component.channelInfo.clipCount", {
-                  n: clip_count ?? "0",
-                })}`}
-            </div>
-            {size === "sm" && (
-              <div className="mt-1 flex max-w-full gap-1 overflow-x-auto">
-                {top_topics?.map((topic) => (
-                  <TopicBadge size="sm" topic={topic} />
-                ))}
+        <div
+          className="flex items-center gap-4 rounded-lg bg-base-3 p-4 hover:cursor-pointer"
+          onClick={goToChannelClickHandler}
+        >
+          <Link to={channelHref} className="flex grow items-center gap-4">
+            <ChannelImg
+              className={`h-12 w-12 ${inactive && "opacity-80 saturate-50"}`}
+              channelId={id}
+            />
+            <div className="flex flex-col overflow-hidden">
+              <div className="text-xs text-base-11">
+                {org}
+                {group && ` / ${group}`}
               </div>
-            )}
-          </div>
-          <div className="grow" />
+              <div className="line-clamp-1 text-lg font-bold">{name}</div>
+              <div className="text-sm text-base-11">
+                {showSubscribers &&
+                  t("component.channelInfo.subscriberCount", {
+                    n: formatCount(subscriber_count ?? "0"),
+                  })}
+                {showVideoCount &&
+                  ` / ${t("component.channelInfo.videoCount", {
+                    0: video_count ?? "0",
+                  })}`}
+                {showClipCount &&
+                  ` / ${t("component.channelInfo.clipCount", {
+                    n: clip_count ?? "0",
+                  })}`}
+              </div>
+              {size === "sm" && (
+                <div className="mt-1 flex max-w-full gap-1 overflow-x-auto">
+                  {top_topics?.map((topic) => (
+                    <TopicBadge size="sm" topic={topic} />
+                  ))}
+                </div>
+              )}
+            </div>
+          </Link>
           {children ?? (
             <ChannelSocials
               size="sm"
@@ -103,39 +133,42 @@ export function ChannelCard({
       return (
         // Set min-height because react-virtuoso will break if the height is not fixed
         <div
-          className={
-            "group relative flex h-full min-h-[24rem] w-full flex-col items-center gap-2 rounded-md bg-base-3 p-4"
-          }
+          className="group relative flex h-full min-h-[24rem] w-full flex-col items-center gap-2 rounded-md bg-base-3 p-4 hover:cursor-pointer"
+          onClick={goToChannelClickHandler}
         >
-          <ChannelMenu
-            {...{
-              id,
-              name,
-              type,
-              english_name,
-              org,
-              group,
-              lang,
-              photo,
-            }}
+          <Link
+            to={channelHref}
+            className="flex grow flex-col items-center gap-2"
           >
-            <Button
-              size="icon-lg"
-              variant="ghost"
-              className="absolute right-4 top-4 hidden rounded-full group-hover:flex"
+            <ChannelMenu
+              {...{
+                id,
+                name,
+                type,
+                english_name,
+                org,
+                group,
+                lang,
+                photo,
+              }}
             >
-              <div className="i-heroicons:ellipsis-vertical" />
-            </Button>
-          </ChannelMenu>
-          <ChannelImg
-            className={`-z-0 -mb-36 mt-4 h-32 w-32 opacity-20 blur-2xl ${inactive ? "brightness-75 saturate-50" : "saturate-150"}`}
-            channelId={id}
-          />
-          <ChannelImg
-            className={`z-10 h-24 w-24 ${inactive && "brightness-75 saturate-50"}`}
-            channelId={id}
-          />
-          {/* {inactive && (
+              <Button
+                size="icon-lg"
+                variant="ghost"
+                className="absolute right-4 top-4 hidden rounded-full group-hover:flex"
+              >
+                <div className="i-heroicons:ellipsis-vertical" />
+              </Button>
+            </ChannelMenu>
+            <ChannelImg
+              className={`-z-0 -mb-36 mt-4 h-32 w-32 opacity-20 blur-2xl ${inactive ? "brightness-75 saturate-50" : "saturate-150"}`}
+              channelId={id}
+            />
+            <ChannelImg
+              className={`z-10 h-24 w-24 ${inactive && "brightness-75 saturate-50"}`}
+              channelId={id}
+            />
+            {/* {inactive && (
                     <div
                       className="i-fa:graduation-cap absolute z-10 h-24 w-24 text-[40px] leading-10"
                       style={{
@@ -144,37 +177,42 @@ export function ChannelCard({
                       }}
                     ></div>
                   )} */}
-          <div
-            className={`${inactive && "text-base-10"} z-10 line-clamp-2 text-center text-lg font-bold`}
-          >
-            {name}
-          </div>
-          <div className="flex flex-col items-center">
-            <div className="whitespace-nowrap text-sm text-base-11">
-              {t("component.channelInfo.subscriberCount", {
-                n: formatCount(subscriber_count ?? "0"),
-              })}
+            <div
+              className={`${inactive && "text-base-10"} z-10 line-clamp-2 text-center text-lg font-bold`}
+            >
+              {name}
+            </div>
+            <div className="flex flex-col items-center">
+              <div className="whitespace-nowrap text-sm text-base-11">
+                {t("component.channelInfo.subscriberCount", {
+                  n: formatCount(subscriber_count ?? "0"),
+                })}
+              </div>
+              <div className="flex flex-wrap justify-center gap-x-1 gap-y-0 text-sm text-base-11">
+                <span className="whitespace-nowrap">
+                  {t("component.channelInfo.videoCount", {
+                    0: video_count ?? 0,
+                  })}
+                </span>
+                <span>/</span>
+                <span className="whitespace-nowrap">
+                  {t("component.channelInfo.clipCount", {
+                    n: clip_count ?? "0",
+                  })}
+                </span>
+              </div>
             </div>
-            <div className="flex flex-wrap justify-center gap-x-1 gap-y-0 text-sm text-base-11">
-              <span className="whitespace-nowrap">
-                {t("component.channelInfo.videoCount", { 0: video_count ?? 0 })}
-              </span>
-              <span>/</span>
-              <span className="whitespace-nowrap">
-                {t("component.channelInfo.clipCount", { n: clip_count ?? "0" })}
-              </span>
+            <div className="mt-1 flex flex-wrap justify-center gap-0.5">
+              {top_topics?.map((topic) => (
+                <TopicBadge
+                  size="sm"
+                  topic={topic}
+                  className="border-base-7 capitalize text-base-10 "
+                />
+              ))}
             </div>
-          </div>
-          <div className="mt-1 flex flex-wrap justify-center gap-0.5">
-            {top_topics?.map((topic) => (
-              <TopicBadge
-                size="sm"
-                topic={topic}
-                className="border-base-7 capitalize text-base-10 "
-              />
-            ))}
-          </div>
-          <div className="flex grow" />
+          </Link>
+
           {children ?? (
             <ChannelSocials
               id={id}
diff --git a/packages/react/src/routes/watch.tsx b/packages/react/src/routes/watch.tsx
index b241902ac..095193fdc 100644
--- a/packages/react/src/routes/watch.tsx
+++ b/packages/react/src/routes/watch.tsx
@@ -21,6 +21,7 @@ import {
 } from "@/store/player";
 import { queueAtom } from "@/store/queue";
 import { useAtom, useAtomValue } from "jotai";
+import { useEffect } from "react";
 import { Helmet } from "react-helmet-async";
 import { useLocation, useParams } from "react-router-dom";
 
@@ -53,7 +54,7 @@ export default function Watch() {
   });
 
   const queue = useAtomValue(queueAtom);
-  const miniPlayer = useAtomValue(miniPlayerAtom);
+  const [miniPlayer, setMiniPlayer] = useAtom(miniPlayerAtom);
   const theaterMode = useAtomValue(theaterModeAtom);
   const [chatOpen, setChatOpen] = useAtom(chatOpenAtom);
   const [tlOpen, setTLOpen] = useAtom(tlOpenAtom);
@@ -62,6 +63,11 @@ export default function Watch() {
   const smOrMd = !useIsLgAndUp();
 
   const url = idToVideoURL(id!, currentVideo?.link);
+
+  useEffect(() => {
+    setMiniPlayer(false);
+  }, []);
+
   return (
     <>
       <Helmet>