diff --git a/assets/screenshot1.png b/assets/screenshot1.png
index 859770f..4169001 100644
Binary files a/assets/screenshot1.png and b/assets/screenshot1.png differ
diff --git a/assets/screenshot2.png b/assets/screenshot2.png
index 8cbaf94..e421c59 100644
Binary files a/assets/screenshot2.png and b/assets/screenshot2.png differ
diff --git a/assets/screenshot3.png b/assets/screenshot3.png
index 546f7fc..43e3663 100644
Binary files a/assets/screenshot3.png and b/assets/screenshot3.png differ
diff --git a/backend/src/index.ts b/backend/src/index.ts
index dde7764..76359db 100644
--- a/backend/src/index.ts
+++ b/backend/src/index.ts
@@ -113,8 +113,12 @@ const noVerifyHttpsAgent = new https.Agent({
             while (true) {
                 const r = await axios.get(`${process.env.PLEX_SERVER ?? "http://localhost:32400"}/identity`, {
                     timeout: 5000,
-                }).catch(() => null);
-
+                    httpAgent: process.env.DISABLE_TLS_VERIFY === "true" ? noVerifyHttpsAgent : undefined,
+                    httpsAgent: process.env.DISABLE_TLS_VERIFY === "true" ? noVerifyHttpsAgent : undefined,
+                }).catch((e) => {
+                    console.error('Error reaching PLEX_SERVER:', e.message);
+                    return null;
+                });
                 if (r && r.status === 200) {
                     status.error = false;
                     return resolve();
diff --git a/frontend/src/components/HeroDisplay.tsx b/frontend/src/components/HeroDisplay.tsx
index 70f2f2f..44f7e57 100644
--- a/frontend/src/components/HeroDisplay.tsx
+++ b/frontend/src/components/HeroDisplay.tsx
@@ -11,7 +11,7 @@ import { useSearchParams, useNavigate } from "react-router-dom";
 import { usePreviewPlayer } from "../states/PreviewPlayerState";
 import ReactPlayer from "react-player";
 import { useBigReader } from "./BigReader";
-import { WatchListButton } from "./MovieItem";
+import { HeroWatchListButton } from "./MovieItem";
 import { getBackendURL } from "../backendURL";
 import { queryBuilder } from "../plex/QuickFunctions";
 import { getTranscodeImageURL } from "../plex";
@@ -318,7 +318,7 @@ function HeroDisplay({ item }: { item: Plex.Metadata }) {
               </Typography>
             </Button>
 
-            <WatchListButton item={item} />
+            <HeroWatchListButton item={item} />
           </Box>
         </Box>
       </Box>
diff --git a/frontend/src/components/MetaScreen.tsx b/frontend/src/components/MetaScreen.tsx
index 86be36a..bae48a5 100755
--- a/frontend/src/components/MetaScreen.tsx
+++ b/frontend/src/components/MetaScreen.tsx
@@ -50,7 +50,7 @@ import { usePreviewPlayer } from "../states/PreviewPlayerState";
 import MovieItem from "./MovieItem";
 import { useBigReader } from "./BigReader";
 import { useInView } from "react-intersection-observer";
-import { WatchListButton } from "./MovieItem";
+import { HeroWatchListButton } from "./MovieItem";
 import { alpha } from "@mui/material/styles";
 import { AnimatePresence, motion } from "framer-motion";
 import { useConfirmModal } from "./ConfirmModal";
@@ -668,7 +668,7 @@ function MetaScreen() {
                 </Button>
 
                 <Tooltip placement="top" arrow title="Watchlist">
-                  <WatchListButton item={data as Plex.Metadata} />
+                  <HeroWatchListButton item={data as Plex.Metadata} />
                 </Tooltip>
 
                 {data && <RatingButton item={data} />}
diff --git a/frontend/src/components/MovieItem.tsx b/frontend/src/components/MovieItem.tsx
index 2161fdc..8939e87 100644
--- a/frontend/src/components/MovieItem.tsx
+++ b/frontend/src/components/MovieItem.tsx
@@ -7,6 +7,7 @@ import {
   CheckCircleRounded,
   VolumeOffRounded,
   VolumeUpRounded,
+  StarRounded,
 } from "@mui/icons-material";
 import {
   Box,
@@ -360,7 +361,7 @@ function MovieItem({
           display: "flex",
           flexDirection: "column",
           alignItems: "flex-start",
-          justifyContent: "flex-end",
+          justifyContent: "flex-start",
           width: itemsPerPage
             ? `calc((100vw / ${itemsPerPage}) - 10px - (5vw / ${itemsPerPage}))`
             : "100%",
@@ -370,38 +371,34 @@ function MovieItem({
           backgroundColor: "rgba(18, 18, 22, 0.7)",
           backdropFilter: "blur(15px)",
           border: "1px solid rgba(255,255,255,0.08)",
-
-          borderRadius: "6px",
+          borderRadius: "8px",
           overflow: "hidden",
-          mb: "0px",
           position: "relative",
           boxShadow: "0px 2px 8px rgba(0, 0, 0, 0.3)",
+          willChange: "transform",
+          backfaceVisibility: "hidden",
+          transformOrigin:
+            itemsPerPage && index !== undefined
+              ? (index % itemsPerPage) === 0
+                ? "left center"
+                : (index % itemsPerPage) === itemsPerPage - 1
+                ? "right center"
+                : "center center"
+              : "center center",
+          transition:
+            "transform 0.4s cubic-bezier(0.25,0.10,0.25,1.00), box-shadow 0.4s cubic-bezier(0.25,0.10,0.25,1.00), border-color 0.4s cubic-bezier(0.25,0.10,0.25,1.00)",
+          cursor: "pointer",
 
           "&:hover": {
-            transform: "scale(1.08)",
-            transition: "all 0.4s cubic-bezier(0.25,0.10,0.25,1.00)",
+            transform: "scale(1.15)",
             zIndex: 10,
-            boxShadow: "0px 4px 15px rgba(0, 0, 0, 0.4)",
+            boxShadow: "0px 8px 24px rgba(0, 0, 0, 0.5)",
             border: "1px solid rgba(255,255,255,0.15)",
-            backgroundColor: "rgba(18, 18, 22, 0.85)",
-            position: "relative",
-            pb: "10px",
-            mb: "-42px",
           },
 
-          [`&:hover > :nth-child(${
-            item.type === "episode" ||
-            (item.type === "movie" && item.viewOffset)
-              ? 4
-              : 3
-          })`]: {
-            height: "32px",
-            opacity: 1,
+          "&:hover .movie-item-hover-overlay": {
+            opacity: "1 !important",
           },
-
-          transition:
-            "all 0.4s cubic-bezier(0.25,0.10,0.25,1.00), transform 0.4s cubic-bezier(0.25,0.10,0.25,1.00)",
-          cursor: "pointer",
         }}
         onContextMenu={(e) => {
           e.preventDefault();
@@ -411,10 +408,7 @@ function MovieItem({
                   mouseX: e.clientX + 2,
                   mouseY: e.clientY - 6,
                 }
-              : // repeated contextmenu when it is already open closes it with Chrome 84 on Ubuntu
-                // Other native context menus might behave different.
-                // With this behavior we prevent contextmenu from the backdrop to re-locale existing context menus.
-                null
+              : null
           );
         }}
         onClick={async () => {
@@ -444,35 +438,40 @@ function MovieItem({
           setHovered(false);
         }}
       >
+        {/* Thumbnail area */}
         <Box
-          style={{
+          sx={{
             width: "100%",
             aspectRatio: "16/9",
-
-            backgroundImage: ["episode"].includes(item.type)
-              ? `url(${getTranscodeImageURL(item.thumb, 1200, 680)})`
-              : `url(${getTranscodeImageURL(item.art, 1200, 680)})`,
-            backgroundSize: "cover",
-            backgroundPosition: "center",
-
             position: "relative",
+            overflow: "hidden",
+            flexShrink: 0,
           }}
         >
+          {/* Background image */}
           <Box
             sx={{
               position: "absolute",
-              // make it take up the full width of the parent
-              width: "100%",
-              aspectRatio: "16/9",
-              left: 0,
-              top: 0,
+              inset: 0,
+              backgroundImage: ["episode"].includes(item.type)
+                ? `url(${getTranscodeImageURL(item.thumb, 1200, 680)})`
+                : `url(${getTranscodeImageURL(item.art, 1200, 680)})`,
+              backgroundSize: "cover",
+              backgroundPosition: "center",
+            }}
+          />
+
+          {/* Preview playback overlay */}
+          <Box
+            sx={{
+              position: "absolute",
+              inset: 0,
               opacity: previewPlaybackState.playing ? 1 : 0,
-              transition: "all 2s cubic-bezier(0.25,0.10,0.25,1.00)",
+              transition: "opacity 2s cubic-bezier(0.25,0.10,0.25,1.00)",
               backgroundColor: previewPlaybackState.playing
                 ? "rgba(18, 25, 39, 0.95)"
                 : "transparent",
               pointerEvents: "none",
-
               overflow: "hidden",
             }}
           >
@@ -500,21 +499,76 @@ function MovieItem({
             />
           </Box>
 
+          {/* Hover overlay with buttons */}
+          <Box
+            className="movie-item-hover-overlay"
+            sx={{
+              position: "absolute",
+              inset: 0,
+              background:
+                "linear-gradient(0deg, rgba(0,0,0,0.6) 0%, transparent 40%)",
+              opacity: 0,
+              transition: "opacity 0.3s ease",
+              display: "flex",
+              flexDirection: "row",
+              alignItems: "flex-end",
+              justifyContent: "flex-end",
+              padding: "8px",
+              gap: "6px",
+              zIndex: 5,
+              pointerEvents: "none",
+            }}
+          >
+            <IconButton
+              size="small"
+              sx={{
+                backgroundColor: "rgba(18, 25, 39, 0.55)",
+                backdropFilter: "blur(12px)",
+                border: "1px solid rgba(255,255,255,0.15)",
+                color: "#fff",
+                width: "30px",
+                height: "30px",
+                pointerEvents: "auto",
+                transition: "background-color 0.2s ease",
+                "&:hover": {
+                  backgroundColor: "rgba(18, 25, 39, 0.8)",
+                },
+              }}
+              disabled={playButtonLoading}
+              onClick={async (e) => {
+                e.stopPropagation();
+                await handlePlay();
+              }}
+            >
+              {playButtonLoading ? (
+                <CircularProgress size={14} color="inherit" />
+              ) : (
+                <PlayArrowRounded sx={{ fontSize: "18px" }} />
+              )}
+            </IconButton>
+
+            <WatchListButton item={item} />
+          </Box>
+
+          {/* Mute button for preview */}
           <IconButton
+            size="small"
             sx={{
-              backgroundColor: "rgba(18, 25, 39, 0.8)",
-              backdropFilter: "blur(10px)",
-              border: "1px solid rgba(255,255,255,0.2)",
+              backgroundColor: "rgba(18, 25, 39, 0.55)",
+              backdropFilter: "blur(12px)",
+              border: "1px solid rgba(255,255,255,0.15)",
               opacity: previewPlaybackState.url ? 1 : 0,
-              transition: "all 1s cubic-bezier(0.25,0.10,0.25,1.00)",
+              transition: "opacity 0.4s ease, background-color 0.2s ease",
               position: "absolute",
-              bottom: "10px",
-              right: "10px",
+              top: "8px",
+              left: "8px",
               zIndex: 10,
+              padding: "1px",
               "&:hover": {
-                backgroundColor: "rgba(18, 25, 39, 0.95)",
-                transform: "scale(1.05)",
+                backgroundColor: "rgba(18, 25, 39, 0.8)",
               },
+              width: "28px",
+              height: "28px",
             }}
             onClick={(e) => {
               e.stopPropagation();
@@ -527,44 +581,88 @@ function MovieItem({
             }}
           >
             {MetaScreenPlayerMuted ? (
-              <VolumeOffRounded fontSize="small" />
+              <VolumeOffRounded sx={{ fontSize: "12px" }} />
             ) : (
-              <VolumeUpRounded fontSize="small" />
+              <VolumeUpRounded sx={{ fontSize: "12px" }} />
             )}
           </IconButton>
 
+          {/* Watched badge */}
           {((item.type === "show" && item.leafCount === item.viewedLeafCount) ||
             (item.type === "movie" &&
               item?.viewCount !== undefined &&
               item.viewCount > 0)) && (
             <Box
-              style={{
+              sx={{
                 position: "absolute",
-                top: "10px",
-                right: "10px",
-                backgroundColor: "rgba(18, 25, 39, 0.9)",
-                backdropFilter: "blur(10px)",
-                border: "1px solid rgba(255,255,255,0.2)",
-                borderRadius: "50%",
-                width: "32px",
-                height: "32px",
+                top: "8px",
+                right: "8px",
+                backgroundColor: "rgba(18, 25, 39, 0.55)",
+                backdropFilter: "blur(12px)",
+                border: "1px solid rgba(255,255,255,0.15)",
+                borderRadius: "4px",
+                padding: "2px 6px",
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center",
+                gap: "4px",
                 zIndex: 10,
               }}
             >
               <Tooltip title="Watched" arrow placement="top">
-                <CheckCircleOutlineRounded
-                  fontSize="small"
-                  sx={{
-                    color: (theme) => theme.palette.primary.light,
-                  }}
-                />
+                <Box sx={{ display: "flex", alignItems: "center", gap: "4px" }}>
+                  <CheckCircleOutlineRounded
+                    sx={{
+                      fontSize: "14px",
+                      color: (theme) => theme.palette.primary.light,
+                    }}
+                  />
+                  <Typography
+                    sx={{
+                      fontSize: "10px",
+                      fontWeight: "700",
+                      letterSpacing: "0.05em",
+                      color: "rgba(255,255,255,0.9)",
+                    }}
+                  >
+                    Watched
+                  </Typography>
+                </Box>
               </Tooltip>
             </Box>
           )}
+
+          {/* Content rating badge on thumbnail */}
+          {item.contentRating && (
+            <Box
+              sx={{
+                position: "absolute",
+                top: "8px",
+                left: previewPlaybackState.url ? "40px" : "8px",
+                transition: "left 0.4s ease",
+                backgroundColor: "rgba(18, 25, 39, 0.55)",
+                backdropFilter: "blur(12px)",
+                border: "1px solid rgba(255,255,255,0.15)",
+                borderRadius: "4px",
+                padding: "1px 6px",
+                zIndex: 10,
+              }}
+            >
+              <Typography
+                sx={{
+                  fontSize: "10px",
+                  fontWeight: "700",
+                  letterSpacing: "0.05em",
+                  color: "rgba(255,255,255,0.9)",
+                }}
+              >
+                {item.contentRating}
+              </Typography>
+            </Box>
+          )}
         </Box>
+
+        {/* Progress bar */}
         {(item.type === "episode" ||
           (item.type === "movie" && item.viewOffset)) && (
           <LinearProgress
@@ -572,66 +670,106 @@ function MovieItem({
             value={((item?.viewOffset ?? 0) / item.duration) * 100}
             sx={{
               width: "100%",
-              height: "4px",
-              bgcolor: "rgba(255, 255, 255, 0.1)",
-              borderRadius: "2px",
+              height: "3px",
+              flexShrink: 0,
+              bgcolor: "rgba(255, 255, 255, 0.08)",
               "& .MuiLinearProgress-bar": {
                 backgroundColor: (theme) => theme.palette.primary.main,
-                borderRadius: "2px",
               },
             }}
           />
         )}
+
+        {/* Info section */}
         <Box
-          style={{
+          sx={{
             width: "100%",
-            height: "auto",
             display: "flex",
             flexDirection: "column",
             alignItems: "flex-start",
-            justifyContent: "flex-end",
-            padding: "16px",
+            justifyContent: "flex-start",
+            padding: "10px 12px 12px",
             userSelect: "none",
-            transition: "all 0.4s cubic-bezier(0.25,0.10,0.25,1.00)",
-            transform: "translateX(0%)",
             position: "relative",
             zIndex: 5,
+            gap: "2px",
           }}
         >
-          <Typography
+          {/* Type label & rating row */}
+          <Box
             sx={{
-              fontSize: "11px",
-              fontWeight: "600",
-              letterSpacing: "0.1em",
-              color: (theme) => theme.palette.primary.light,
-              textTransform: "uppercase",
-              opacity: 0.9,
-              mb: 0.5,
+              width: "100%",
+              display: "flex",
+              flexDirection: "row",
+              alignItems: "center",
+              justifyContent: "space-between",
+              mb: "2px",
             }}
           >
-            {item.type} {item.type === "episode" && item.index}
-          </Typography>
+            <Typography
+              sx={{
+                fontSize: "10px",
+                fontWeight: "700",
+                letterSpacing: "0.1em",
+                color: (theme) => theme.palette.primary.light,
+                textTransform: "uppercase",
+                opacity: 0.9,
+                lineHeight: 1,
+              }}
+            >
+              {item.type === "episode"
+                ? `S${item.parentIndex} · E${item.index}`
+                : item.type}
+            </Typography>
+
+            {item.audienceRating && (
+              <Box
+                sx={{
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "2px",
+                }}
+              >
+                <StarRounded
+                  sx={{
+                    fontSize: "13px",
+                    color: "#f5c518",
+                  }}
+                />
+                <Typography
+                  sx={{
+                    fontSize: "11px",
+                    fontWeight: "600",
+                    color: "rgba(255,255,255,0.8)",
+                    lineHeight: 1,
+                  }}
+                >
+                  {item.audienceRating.toFixed(1)}
+                </Typography>
+              </Box>
+            )}
+          </Box>
 
+          {/* Title */}
           <Typography
             sx={{
-              fontSize: "1.1rem",
+              fontSize: "0.95rem",
               fontWeight: "600",
               color: (theme) => theme.palette.text.primary,
               textOverflow: "ellipsis",
               overflow: "hidden",
               whiteSpace: "nowrap",
-              maxLines: 1,
-              maxInlineSize: "100%",
-              marginTop: ["episode"].includes(item.type) ? "2px" : "0px",
+              width: "100%",
               lineHeight: 1.3,
               "@media (max-width: 2000px)": {
-                fontSize: "1rem",
+                fontSize: "0.9rem",
               },
             }}
           >
             {item.title}
           </Typography>
 
+          {/* Show title for episodes */}
           {["episode"].includes(item.type) && item.grandparentTitle && (
             <Typography
               onClick={(e) => {
@@ -642,85 +780,76 @@ function MovieItem({
                 });
               }}
               sx={{
-                fontSize: "0.85rem",
+                fontSize: "0.8rem",
                 fontWeight: "500",
                 color: (theme) => theme.palette.text.secondary,
-                opacity: 0.8,
-                mb: 1,
-                transition: "all 0.4s cubic-bezier(0.25,0.10,0.25,1.00)",
+                opacity: 0.7,
+                transition: "all 0.3s ease",
                 cursor: "pointer",
                 "&:hover": {
                   opacity: 1,
                   color: (theme) => theme.palette.primary.light,
-                  textDecoration: "none",
                 },
                 textOverflow: "ellipsis",
                 overflow: "hidden",
-                maxLines: 1,
-                maxInlineSize: "100%",
+                whiteSpace: "nowrap",
+                width: "100%",
               }}
             >
               {item.grandparentTitle}
             </Typography>
           )}
+
+          {/* Metadata row */}
           <Box
             sx={{
               width: "100%",
               display: "flex",
               flexDirection: "row",
               alignItems: "center",
-              justifyContent: "space-between",
+              flexWrap: "nowrap",
               mt: "4px",
-              gap: 1,
+              gap: 0.75,
+              overflow: "hidden",
             }}
           >
-            {/* {item.rating && (
-            <Typography
-              sx={{
-                fontSize: "medium",
-                fontWeight: "light",
-                color: "#FFFFFF",
-                ml: 1,
-              }}
-            >
-              {item.rating}
-            </Typography>
-          )}
-          {item.contentRating && (
-            <Typography
-              sx={{
-                fontSize: "medium",
-                fontWeight: "light",
-                color: "#FFFFFF",
-                ml: 1,
-                border: "1px dotted #AAAAAA",
-                borderRadius: "5px",
-                px: 1,
-                py: -0.5,
-              }}
-            >
-              {item.contentRating}
-            </Typography>
-          )} */}
-            {/* {item.type === "episode" && item.index && (
-            <Typography
-              sx={{
-                fontSize: "medium",
-                fontWeight: "light",
-                color: "#FFFFFF",
-                ml: 1,
-              }}
-            >
-              S{item.parentIndex} E{item.index}
-            </Typography>
-          )} */}
+            {item.year && (
+              <Typography
+                sx={{
+                  fontSize: "11px",
+                  fontWeight: "500",
+                  color: (theme) => theme.palette.text.secondary,
+                  opacity: 0.7,
+                  flexShrink: 0,
+                }}
+              >
+                {item.year}
+              </Typography>
+            )}
+            {item.year &&
+              ((item.duration && ["episode", "movie"].includes(item.type)) ||
+                (item.type === "show" &&
+                  item.leafCount &&
+                  (item.seasonCount ?? item.childCount))) && (
+                <Typography
+                  sx={{
+                    fontSize: "11px",
+                    color: "rgba(255,255,255,0.25)",
+                    flexShrink: 0,
+                    lineHeight: 1,
+                  }}
+                >
+                  ·
+                </Typography>
+              )}
             {item.duration && ["episode", "movie"].includes(item.type) && (
               <Typography
                 sx={{
-                  fontSize: "12px",
+                  fontSize: "11px",
                   fontWeight: "500",
                   color: (theme) => theme.palette.text.secondary,
-                  opacity: 0.8,
+                  opacity: 0.7,
+                  flexShrink: 0,
                 }}
               >
                 {durationToText(item.duration)}
@@ -731,91 +860,49 @@ function MovieItem({
               (item.seasonCount ?? item.childCount) && (
                 <Typography
                   sx={{
-                    fontSize: "12px",
+                    fontSize: "11px",
                     fontWeight: "500",
                     color: (theme) => theme.palette.text.secondary,
-                    opacity: 0.8,
+                    opacity: 0.7,
+                    flexShrink: 0,
                   }}
                 >
                   {(item.seasonCount ?? item.childCount ?? 1) > 1
                     ? `${item.childCount} Seasons`
-                    : `${item.leafCount} Episode${
-                        item.leafCount > 1 ? "s" : ""
-                      }`}
+                    : `${item.leafCount} Ep${item.leafCount > 1 ? "s" : ""}`}
                 </Typography>
               )}
 
-            {item.year && (
-              <Typography
-                sx={{
-                  fontSize: "12px",
-                  fontWeight: "500",
-                  color: (theme) => theme.palette.text.secondary,
-                  opacity: 0.8,
-                }}
-              >
-                {item.year}
-              </Typography>
+            {item.Genre && item.Genre.length > 0 && (
+              <>
+                <Typography
+                  sx={{
+                    fontSize: "11px",
+                    color: "rgba(255,255,255,0.25)",
+                    flexShrink: 0,
+                    lineHeight: 1,
+                  }}
+                >
+                  ·
+                </Typography>
+                <Typography
+                  sx={{
+                    fontSize: "11px",
+                    fontWeight: "500",
+                    color: (theme) => theme.palette.text.secondary,
+                    opacity: 0.7,
+                    textOverflow: "ellipsis",
+                    overflow: "hidden",
+                    whiteSpace: "nowrap",
+                    minWidth: 0,
+                  }}
+                >
+                  {item.Genre[0].tag}
+                </Typography>
+              </>
             )}
           </Box>
         </Box>
-
-        <Box
-          sx={{
-            width: "100%",
-            height: "0px", // 32px
-            overflow: hovered ? "visible" : "hidden",
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            justifyContent: "center",
-            transition: "all 0.4s cubic-bezier(0.25,0.10,0.25,1.00)",
-          }}
-        >
-          <Box
-            className="movie-item-buttons"
-            sx={{
-              width: "100%",
-              display: "flex",
-              flexDirection: "row",
-              alignItems: "center",
-              justifyContent: "space-between",
-              padding: "0px 16px",
-              gap: 1,
-            }}
-          >
-            <Button
-              variant="contained"
-              sx={{
-                width: "100%",
-                height: "100%",
-                letterSpacing: "0.1em",
-                textTransform: "uppercase",
-                gap: 0.5,
-                transition: "all 0.4s cubic-bezier(0.25,0.10,0.25,1.00)",
-                padding: "0px 10px",
-                fontSize: "13px",
-                fontWeight: 600,
-                boxShadow: "none",
-              }}
-              disabled={playButtonLoading}
-              onClick={async (e) => {
-                e.stopPropagation();
-                await handlePlay();
-              }}
-            >
-              {playButtonLoading ? (
-                <CircularProgress size={16} color="inherit" />
-              ) : (
-                <>
-                  <PlayArrowRounded style={{ fontSize: "18px" }} /> Play
-                </>
-              )}
-            </Button>
-
-            <WatchListButton item={item} />
-          </Box>
-        </Box>
       </Box>
     </>
   );
@@ -828,16 +915,20 @@ export function WatchListButton({ item }: { item: Plex.Metadata }) {
   const [isLoading, setIsLoading] = React.useState(false);
 
   return (
-    <Button
-      variant="contained"
+    <IconButton
+      size="small"
       sx={{
-        height: "38px",
-        transition: "all 0.4s cubic-bezier(0.25,0.10,0.25,1.00)",
-        boxShadow: "none",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        position: "relative",
+        backgroundColor: "rgba(18, 25, 39, 0.55)",
+        backdropFilter: "blur(12px)",
+        border: "1px solid rgba(255,255,255,0.15)",
+        color: "#fff",
+        width: "30px",
+        height: "30px",
+        pointerEvents: "auto",
+        transition: "background-color 0.2s ease",
+        "&:hover": {
+          backgroundColor: "rgba(18, 25, 39, 0.8)",
+        },
       }}
       onClick={(e) => {
         e.stopPropagation();
@@ -855,10 +946,55 @@ export function WatchListButton({ item }: { item: Plex.Metadata }) {
       }}
     >
       {isLoading ? (
-        <CircularProgress size={14} color="inherit" />
+        <CircularProgress size={12} color="inherit" />
       ) : (
         <>
           {WatchList.isOnWatchList(item.guid) ? (
+            <BookmarkRounded sx={{ fontSize: "16px" }} />
+          ) : (
+            <BookmarkBorderRounded sx={{ fontSize: "16px" }} />
+          )}
+        </>
+      )}
+    </IconButton>
+  );
+}
+
+export function HeroWatchListButton({ item }: { item: Plex.Metadata }) {
+  const WatchList = useWatchListCache();
+  const [isLoading, setIsLoading] = React.useState(false);
+
+  const isOnWatchList = WatchList.isOnWatchList(item.guid);
+
+  return (
+    <Button
+      variant="contained"
+      sx={{
+        fontWeight: "bold",
+        letterSpacing: "0.1em",
+        textTransform: "uppercase",
+        transition: "all 0.2s ease-in-out",
+        height: "38.5px"
+      }}
+      onClick={(e) => {
+        e.stopPropagation();
+        if (!item || isLoading) return;
+        setIsLoading(true);
+
+        WatchListCacheEmitter.once("watchListUpdate", () => {
+          setIsLoading(false);
+        });
+
+        if (isOnWatchList) return WatchList.removeItem(item.guid);
+
+        WatchList.addItem(item);
+      }}
+    >
+      {isLoading ? (
+        <CircularProgress size={16} color="inherit" />
+      ) : (
+        <>
+          {isOnWatchList ? (
             <BookmarkRounded fontSize="small" />
           ) : (
             <BookmarkBorderRounded fontSize="small" />
diff --git a/frontend/src/pages/Watch.tsx b/frontend/src/pages/Watch.tsx
index c30815c..679d320 100755
--- a/frontend/src/pages/Watch.tsx
+++ b/frontend/src/pages/Watch.tsx
@@ -69,7 +69,7 @@ export { SessionID };
 
 const getUrl = (
   data: Plex.Metadata,
-  quality: { bitrate?: number; auto?: boolean }
+  quality: { bitrate?: number; auto?: boolean },
 ) => {
   console.log("Metadata:", data);
   const bitrate = quality
@@ -116,7 +116,7 @@ function Watch() {
   });
 
   const [volume, setVolume] = useState<number>(
-    parseInt(localStorage.getItem("volume") ?? "100")
+    parseInt(localStorage.getItem("volume") ?? "100"),
   );
 
   const lastAppliedTime = useRef<number>(0);
@@ -168,7 +168,7 @@ function Watch() {
           getLibraryMeta(Metadata?.grandparentRatingKey as string).then(
             (show) => {
               setShowMetadata(show);
-            }
+            },
           );
         }
       } else {
@@ -184,7 +184,7 @@ function Watch() {
         serverPreferences.machineIdentifier
       }/com.plexapp.plugins.library/library/metadata/${
         (Metadata as Plex.Metadata).ratingKey
-      }`
+      }`,
     ).then((queue) => {
       setPlayQueue(queue);
     });
@@ -194,7 +194,7 @@ function Watch() {
 
   const [showControls, setShowControls] = useState(true);
   useEffect(() => {
-    let timeout: NodeJS.Timeout;
+    let timeout: number;
     let whenMouseMoves = () => {
       clearTimeout(timeout);
       setShowControls(true);
@@ -273,7 +273,7 @@ function Watch() {
       if (data.time) {
         const dif = absoluteDifference(
           player.current?.getCurrentTime() ?? 0,
-          data.time
+          data.time,
         );
 
         if (dif > 2) player.current?.seekTo(data.time, "seconds");
@@ -325,7 +325,7 @@ function Watch() {
         parseInt(itemID),
         Math.floor(player.current.getDuration()) * 1000,
         buffering ? "buffering" : playing ? "playing" : "paused",
-        Math.floor(player.current.getCurrentTime()) * 1000
+        Math.floor(player.current.getCurrentTime()) * 1000,
       );
 
       if (!timelineUpdateData) return;
@@ -384,7 +384,7 @@ function Watch() {
         } = JSON.parse(audioTrackPref);
 
         console.log(
-          `Preferred Audio Track - Index: ${audioTrackPrefParsed.index}, Title: ${audioTrackPrefParsed.title}`
+          `Preferred Audio Track - Index: ${audioTrackPrefParsed.index}, Title: ${audioTrackPrefParsed.title}`,
         );
 
         const audioTrack = metadata.Media?.[0].Part[0].Stream.sort((a, b) => {
@@ -401,11 +401,11 @@ function Watch() {
 
         if (audioTrack) {
           console.log(
-            `Selected Audio Track - Index: ${audioTrack.index}, Title: ${audioTrack.extendedDisplayTitle}`
+            `Selected Audio Track - Index: ${audioTrack.index}, Title: ${audioTrack.extendedDisplayTitle}`,
           );
           await putAudioStream(
             metadata.Media?.[0].Part[0].id ?? 0,
-            audioTrack.id
+            audioTrack.id,
           );
         }
       }
@@ -417,7 +417,7 @@ function Watch() {
         } = JSON.parse(subtitleTrackPref);
 
         console.log(
-          `Preferred Subtitle Track - Index: ${subtitleTrackPrefParsed.index}, Title: ${subtitleTrackPrefParsed.title}`
+          `Preferred Subtitle Track - Index: ${subtitleTrackPrefParsed.index}, Title: ${subtitleTrackPrefParsed.title}`,
         );
 
         if (subtitleTrackPrefParsed.index === -1) {
@@ -429,7 +429,7 @@ function Watch() {
                 Math.abs(a.index - subtitleTrackPrefParsed.index) -
                 Math.abs(b.index - subtitleTrackPrefParsed.index)
               );
-            }
+            },
           ).find((stream) => {
             return (
               stream.streamType === 3 &&
@@ -439,11 +439,11 @@ function Watch() {
 
           if (subtitleTrack) {
             console.log(
-              `Selected Subtitle Track - Index: ${subtitleTrack.index}, Title: ${subtitleTrack.extendedDisplayTitle}`
+              `Selected Subtitle Track - Index: ${subtitleTrack.index}, Title: ${subtitleTrack.extendedDisplayTitle}`,
             );
             await putSubtitleStream(
               metadata.Media?.[0].Part[0].id ?? 0,
-              subtitleTrack.id
+              subtitleTrack.id,
             );
           }
         }
@@ -527,7 +527,7 @@ function Watch() {
                     return navigate(
                       `/browse/${metadata.librarySectionID}?${queryBuilder({
                         mid: metadata.ratingKey,
-                      })}`
+                      })}`,
                     );
 
                   if (!playQueue) return;
@@ -538,7 +538,7 @@ function Watch() {
                         mid: metadata.grandparentRatingKey,
                         pid: metadata.parentRatingKey,
                         iid: metadata.ratingKey,
-                      })}`
+                      })}`,
                     );
 
                   navigate(`/watch/${next.ratingKey}`);
@@ -637,8 +637,8 @@ function Watch() {
                   url.searchParams.set(
                     "t",
                     Math.floor(
-                      (player.current?.getCurrentTime() ?? 0) * 1000
-                    ).toString()
+                      (player.current?.getCurrentTime() ?? 0) * 1000,
+                    ).toString(),
                   );
                   window.location.href = url.toString();
                 } else window.location.reload();
@@ -657,14 +657,14 @@ function Watch() {
                   navigate(
                     `/browse/${metadata.librarySectionID}?${queryBuilder({
                       mid: metadata.ratingKey,
-                    })}`
+                    })}`,
                   );
 
                 if (metadata.type === "episode")
                   navigate(
                     `/browse/${metadata.librarySectionID}?${queryBuilder({
                       mid: metadata.grandparentRatingKey,
-                    })}`
+                    })}`,
                   );
               }}
             >
@@ -734,7 +734,7 @@ function Watch() {
             src={`${getTranscodeImageURL(
               metadata?.thumb as string,
               1500,
-              1500
+              1500,
             )}`}
             alt=""
             style={{
@@ -1072,7 +1072,7 @@ function Watch() {
 
                 {getCurrentVideoLevels(
                   metadata.Media[0].videoResolution,
-                  `${Math.floor(metadata.Media[0].bitrate / 1000)}Mbps`
+                  `${Math.floor(metadata.Media[0].bitrate / 1000)}Mbps`,
                 ).map((qualityOption) => (
                   <Box
                     sx={{
@@ -1112,7 +1112,7 @@ function Watch() {
                       else if (qualityOption.bitrate)
                         localStorage.setItem(
                           "quality",
-                          qualityOption.bitrate.toString()
+                          qualityOption.bitrate.toString(),
                         );
 
                       const progress = player.current?.getCurrentTime() ?? 0;
@@ -1165,7 +1165,7 @@ function Watch() {
                 })}
 
                 {metadata?.Media[0].Part[0].Stream.filter(
-                  (stream) => stream.streamType === 2 // Audio
+                  (stream) => stream.streamType === 2, // Audio
                 ).map((stream) => (
                   <Box
                     sx={{
@@ -1190,7 +1190,7 @@ function Watch() {
                       setTunePage(0);
                       await putAudioStream(
                         metadata.Media?.[0].Part[0].id ?? 0,
-                        stream.id
+                        stream.id,
                       );
 
                       await loadMetadata(itemID);
@@ -1204,7 +1204,7 @@ function Watch() {
                         JSON.stringify({
                           index: stream.index,
                           title: stream.extendedDisplayTitle,
-                        })
+                        }),
                       );
 
                       const progress = player.current?.getCurrentTime() ?? 0;
@@ -1271,7 +1271,7 @@ function Watch() {
                     setTunePage(0);
                     await putSubtitleStream(
                       metadata.Media?.[0].Part[0].id ?? 0,
-                      0
+                      0,
                     );
                     await loadMetadata(itemID);
                     await getUniversalDecision(itemID, {
@@ -1284,7 +1284,7 @@ function Watch() {
                       JSON.stringify({
                         index: -1,
                         title: "None",
-                      })
+                      }),
                     );
 
                     const progress = player.current?.getCurrentTime() ?? 0;
@@ -1298,7 +1298,7 @@ function Watch() {
                   }}
                 >
                   {metadata?.Media[0].Part[0].Stream.filter(
-                    (stream) => stream.selected && stream.streamType === 3 // Subtitle
+                    (stream) => stream.selected && stream.streamType === 3, // Subtitle
                   ).length === 0 && (
                     <CheckRounded
                       sx={{
@@ -1312,7 +1312,7 @@ function Watch() {
                 </Box>
 
                 {metadata?.Media[0].Part[0].Stream.filter(
-                  (stream) => stream.streamType === 3
+                  (stream) => stream.streamType === 3,
                 ).map((stream) => (
                   <Box
                     sx={{
@@ -1337,7 +1337,7 @@ function Watch() {
                       setTunePage(0);
                       await putSubtitleStream(
                         metadata.Media?.[0].Part[0].id ?? 0,
-                        stream.id
+                        stream.id,
                       );
 
                       await loadMetadata(itemID);
@@ -1351,7 +1351,7 @@ function Watch() {
                         JSON.stringify({
                           index: stream.index,
                           title: stream.extendedDisplayTitle,
-                        })
+                        }),
                       );
 
                       const progress = player.current?.getCurrentTime() ?? 0;
@@ -1406,7 +1406,7 @@ function Watch() {
                     (marker) =>
                       marker.startTimeOffset / 1000 <= progress &&
                       marker.endTimeOffset / 1000 >= progress &&
-                      marker.type === "intro"
+                      marker.type === "intro",
                   ).length > 0
                 }
               >
@@ -1434,7 +1434,7 @@ function Watch() {
                         boxShadow: "0 8px 24px rgba(0,0,0,0.4)",
                         border: `1px solid ${alpha(
                           theme.palette.primary.main,
-                          0.5
+                          0.5,
                         )}`,
                       },
                     }}
@@ -1446,7 +1446,7 @@ function Watch() {
                           (marker) =>
                             marker.startTimeOffset / 1000 <= progress &&
                             marker.endTimeOffset / 1000 >= progress &&
-                            marker.type === "intro"
+                            marker.type === "intro",
                         )[0].endTimeOffset / 1000;
                       player.current.seekTo(time + 1);
                     }}
@@ -1486,7 +1486,7 @@ function Watch() {
                       marker.startTimeOffset / 1000 <= progress &&
                       marker.endTimeOffset / 1000 >= progress &&
                       marker.type === "credits" &&
-                      !marker.final
+                      !marker.final,
                   ).length > 0
                 }
               >
@@ -1514,7 +1514,7 @@ function Watch() {
                         boxShadow: "0 8px 24px rgba(0,0,0,0.4)",
                         border: `1px solid ${alpha(
                           theme.palette.primary.main,
-                          0.5
+                          0.5,
                         )}`,
                       },
                     }}
@@ -1527,7 +1527,7 @@ function Watch() {
                             marker.startTimeOffset / 1000 <= progress &&
                             marker.endTimeOffset / 1000 >= progress &&
                             marker.type === "credits" &&
-                            !marker.final
+                            !marker.final,
                         )[0].endTimeOffset / 1000;
                       player.current.seekTo(time + 1);
                     }}
@@ -1567,7 +1567,7 @@ function Watch() {
                       marker.startTimeOffset / 1000 <= progress &&
                       marker.endTimeOffset / 1000 >= progress &&
                       marker.type === "credits" &&
-                      marker.final
+                      marker.final,
                   ).length > 0
                 }
               >
@@ -1608,6 +1608,7 @@ function Watch() {
                     height: "100vh",
                     display: "flex",
                     flexDirection: "column",
+                    overflow: "hidden",
                     background:
                       settings["DISABLE_WATCHSCREEN_DARKENING"] === "true"
                         ? "transparent"
@@ -1637,7 +1638,7 @@ function Watch() {
                             parseInt(itemID),
                             Math.floor(player.current?.getDuration() * 1000),
                             "stopped",
-                            Math.floor(player.current?.getCurrentTime() * 1000)
+                            Math.floor(player.current?.getCurrentTime() * 1000),
                           );
                         if (metadata.type === "movie")
                           navigate(
@@ -1645,7 +1646,7 @@ function Watch() {
                               metadata.librarySectionID
                             }?${queryBuilder({
                               mid: metadata.ratingKey,
-                            })}`
+                            })}`,
                           );
 
                         if (metadata.type === "episode")
@@ -1654,7 +1655,7 @@ function Watch() {
                               metadata.librarySectionID
                             }?${queryBuilder({
                               mid: metadata.grandparentRatingKey,
-                            })}`
+                            })}`,
                           );
                       }}
                       sx={{
@@ -1664,7 +1665,7 @@ function Watch() {
                         backdropFilter: "blur(20px)",
                         border: `1px solid ${alpha(
                           theme.palette.divider,
-                          0.2
+                          0.2,
                         )}`,
                         "&:hover": {
                           backgroundColor: "rgba(0,0,0,0.8)",
@@ -1676,19 +1677,38 @@ function Watch() {
                     </IconButton>
                   </Box>
 
+                  {/* Standalone Backdrop Blur Background */}
                   <Box
-                    ref={playbackBarRef}
                     sx={{
-                      mt: "auto",
-                      mb: 0,
-                      mx: 0,
+                      position: "absolute",
+                      left: 0,
+                      right: 0,
+                      height: playbackBarRef.current?.clientHeight || 200,
                       background:
                         "linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.9) 100%)",
                       backdropFilter: "blur(20px)",
+                      WebkitBackdropFilter: "blur(20px)",
+                      zIndex: -1,
                       borderTop: `1px solid ${alpha(
                         theme.palette.divider,
-                        0.1
+                        0.1,
                       )}`,
+                      transition: "bottom 0.5s ease",
+                    }}
+                    style={{
+                      bottom:
+                        showControls || !playing
+                          ? 0
+                          : -(playbackBarRef.current?.clientHeight || 200),
+                    }}
+                  />
+
+                  <Box
+                    ref={playbackBarRef}
+                    sx={{
+                      mt: "auto",
+                      mb: 0,
+                      mx: 0,
                       display: "flex",
                       flexDirection: "column",
                       justifyContent: "space-between",
@@ -1697,11 +1717,13 @@ function Watch() {
                       px: 4,
                       py: 2,
 
+                      transition: "transform 0.5s ease",
+                    }}
+                    style={{
                       transform:
                         showControls || !playing
                           ? "translateY(0)"
                           : "translateY(100%)",
-                      transition: "transform 0.5s ease",
                     }}
                   >
                     {/* Progress Bar Section */}
@@ -1753,7 +1775,7 @@ function Watch() {
                             return getTranscodeImageURL(
                               `/library/parts/${metadata.Media[0].Part[0].id}/indexes/sd/${value}`,
                               240,
-                              135
+                              135,
                             );
                           }}
                         />
@@ -1770,7 +1792,7 @@ function Watch() {
                         }}
                       >
                         {getFormatedTime(
-                          (player.current?.getDuration() ?? 0) - progress
+                          (player.current?.getDuration() ?? 0) - progress,
                         )}
                       </Typography>
                     </Box>
@@ -1997,7 +2019,7 @@ function Watch() {
                           backdropFilter: "blur(20px)",
                           border: `1px solid ${alpha(
                             theme.palette.divider,
-                            0.1
+                            0.1,
                           )}`,
                           py: 3,
                           px: 2,
@@ -2077,9 +2099,9 @@ function Watch() {
 
                   const seekTo = params.has("t")
                     ? parseInt(params.get("t") as string)
-                    : (metadata?.viewOffset && metadata?.viewOffset > 5
+                    : ((metadata?.viewOffset && metadata?.viewOffset > 5
                         ? metadata?.viewOffset
-                        : null) ?? null;
+                        : null) ?? null);
 
                   if (!seekTo) return;
                   if (lastAppliedTime.current === seekTo) return;
@@ -2115,7 +2137,7 @@ function Watch() {
                   if (!err.error) return;
                   const message = err.error.message.replace(
                     /https?:\/\/[^\s]+/g,
-                    "Media"
+                    "Media",
                   );
 
                   setShowError(message);
@@ -2141,7 +2163,7 @@ function Watch() {
                     return navigate(
                       `/browse/${metadata.librarySectionID}?${queryBuilder({
                         mid: metadata.ratingKey,
-                      })}`
+                      })}`,
                     );
                   }
 
@@ -2153,7 +2175,7 @@ function Watch() {
                         mid: metadata.grandparentRatingKey,
                         pid: metadata.parentRatingKey,
                         iid: metadata.ratingKey,
-                      })}`
+                      })}`,
                     );
                   }
 
@@ -2309,7 +2331,7 @@ function TuneSettingTab(
   props: {
     pageNum: number;
     text: string;
-  }
+  },
 ) {
   return (
     <Box
@@ -2374,7 +2396,7 @@ export function getFormatedTime(time: number) {
 
 export function getCurrentVideoLevels(
   resolution: string,
-  extraForOriginal = "Auto"
+  extraForOriginal = "Auto",
 ) {
   const levels: {
     title: string;
@@ -2408,7 +2430,7 @@ export function getCurrentVideoLevels(
           { title: "Convert to 480p", bitrate: 1500, extra: "1.5Mbps" },
           { title: "Convert to 360p", bitrate: 750, extra: "0.7Mbps" },
           { title: "Convert to 240p", bitrate: 300, extra: "0.3Mbps" },
-        ]
+        ],
       );
       break;
     case "4k":
@@ -2458,7 +2480,7 @@ export function getCurrentVideoLevels(
           { title: "Convert to 480p", bitrate: 1500, extra: "1.5Mbps" },
           { title: "Convert to 360p", bitrate: 750, extra: "0.7Mbps" },
           { title: "Convert to 240p", bitrate: 300, extra: "0.3Mbps" },
-        ]
+        ],
       );
       break;
 
@@ -2495,7 +2517,7 @@ export function getCurrentVideoLevels(
           { title: "Convert to 480p", bitrate: 1500, extra: "1.5Mbps" },
           { title: "Convert to 360p", bitrate: 750, extra: "0.7Mbps" },
           { title: "Convert to 240p", bitrate: 300, extra: "0.3Mbps" },
-        ]
+        ],
       );
       break;
   }
diff --git a/frontend/src/pages/browse/BrowseLibrary.tsx b/frontend/src/pages/browse/BrowseLibrary.tsx
index b81c1d3..2af7eb9 100644
--- a/frontend/src/pages/browse/BrowseLibrary.tsx
+++ b/frontend/src/pages/browse/BrowseLibrary.tsx
@@ -278,7 +278,10 @@ function BrowseLibrary() {
 export default BrowseLibrary;
 
 function DisplayMovieItem({ item }: { item: Plex.Metadata }) {
-  const { inView, ref } = useInView();
+  const { inView, ref } = useInView({
+    triggerOnce: true,
+    rootMargin: "200px 0px",
+  });
 
   return (
     <div
@@ -288,8 +291,9 @@ function DisplayMovieItem({ item }: { item: Plex.Metadata }) {
         transition: "opacity 0.35s ease-in-out",
       }}
     >
-      {inView && <MovieItem item={item} />}
-      {!inView && (
+      {inView ? (
+        <MovieItem item={item} />
+      ) : (
         <Box style={{ width: "100%" }}>
           <Box sx={{ width: "100%", height: "auto", aspectRatio: "16/9" }} />
           <Box sx={{ width: "100%", height: "104px" }} />
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index f3d2e4a..4bbebe5 100755
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -12,7 +12,7 @@
     // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
 
     /* Language and Environment */
-    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+    "target": "es2024",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
     // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
     // "jsx": "preserve",                                /* Specify what JSX code is generated. */
     // "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
diff --git a/version.txt b/version.txt
index 13175fd..c9929e3 100644
--- a/version.txt
+++ b/version.txt
@@ -1 +1 @@
-1.4.1
\ No newline at end of file
+1.4.2
\ No newline at end of file