diff --git a/src/components/Playlists/Playlists.tsx b/src/components/Playlists/Playlists.tsx
index d514927..853abab 100644
--- a/src/components/Playlists/Playlists.tsx
+++ b/src/components/Playlists/Playlists.tsx
@@ -1,29 +1,38 @@
-import React from "react";
-import { smallScreenSizeString } from "../../constants/Misc.ts";
-import { CardContentContainerComment } from "../common/Comments/Comments-styles";
 import {
-  CrowdfundSubTitle,
-  CrowdfundSubTitleRow,
-} from "../Publish/PublishVideo/PublishVideo-styles.tsx";
-import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
-import { useNavigate } from "react-router-dom";
+  Box,
+  SxProps,
+  Theme,
+  Typography,
+  useMediaQuery,
+  useTheme,
+} from "@mui/material";
+import React from "react";
+import { CardContentContainerComment } from "../common/Comments/Comments-styles";
 
+interface PlaylistsProps {
+  playlistData;
+  currentVideoIdentifier;
+  onClick;
+  sx?: SxProps<Theme>;
+}
 export const Playlists = ({
   playlistData,
   currentVideoIdentifier,
   onClick,
-}) => {
+  sx,
+}: PlaylistsProps) => {
   const theme = useTheme();
   const isScreenSmall = !useMediaQuery(`(min-width:700px)`);
-  const videoPlayerHeight = "33.75vw"; // This is videoplayer width * 9/16 (inverse of aspect ratio)
+  const PlaylistsHeight = "36vw"; // This is videoplayer width * 9/16 (inverse of aspect ratio)
 
   return (
     <Box
       sx={{
+        width: "100%",
+        height: isScreenSmall ? "200px" : PlaylistsHeight,
+        ...sx,
         display: "flex",
         flexDirection: "column",
-        width: "100%",
-        height: isScreenSmall ? "200px" : videoPlayerHeight,
       }}
     >
       <CardContentContainerComment
diff --git a/src/components/ResponsiveImage.tsx b/src/components/ResponsiveImage.tsx
index d781b65..3a78b00 100644
--- a/src/components/ResponsiveImage.tsx
+++ b/src/components/ResponsiveImage.tsx
@@ -28,7 +28,7 @@ const ResponsiveImage: React.FC<ResponsiveImageProps> = ({
     }, endTimeMilliSeconds);
   };
 
-  useEffect(() => endLoading(30), [endLoading]);
+  useEffect(() => endLoading(60), [endLoading]);
 
   return (
     <Box
diff --git a/src/pages/ContentPages/PlaylistContent/PlaylistContent.tsx b/src/pages/ContentPages/PlaylistContent/PlaylistContent.tsx
index af587bd..e8afbf0 100644
--- a/src/pages/ContentPages/PlaylistContent/PlaylistContent.tsx
+++ b/src/pages/ContentPages/PlaylistContent/PlaylistContent.tsx
@@ -1,15 +1,11 @@
-import { Box, Grid, Typography, useMediaQuery } from "@mui/material";
+import { Box, SxProps, Theme, Typography, useMediaQuery } from "@mui/material";
 import React from "react";
 import { CommentSection } from "../../../components/common/Comments/CommentSection.tsx";
 import { SuperLikesSection } from "../../../components/common/SuperLikesList/SuperLikesSection.tsx";
 import { DisplayHtml } from "../../../components/common/TextEditor/DisplayHtml.tsx";
 import { VideoPlayer } from "../../../components/common/VideoPlayer/VideoPlayer.tsx";
 import { Playlists } from "../../../components/Playlists/Playlists.tsx";
-import {
-  fontSizeSmall,
-  minFileSize,
-  smallScreenSizeString,
-} from "../../../constants/Misc.ts";
+import { fontSizeSmall, minFileSize } from "../../../constants/Misc.ts";
 import { formatBytes } from "../../../utils/numberFunctions.ts";
 import { formatDate } from "../../../utils/time.ts";
 import { VideoActionsBar } from "../VideoContent/VideoActionsBar.tsx";
@@ -46,7 +42,11 @@ export const PlaylistContent = () => {
     loadingSuperLikes,
   } = usePlaylistContentState();
 
-  const isScreenSmall = !useMediaQuery(`(min-width:700px)`);
+  const isScreenSmall = !useMediaQuery(`(min-width:950px)`);
+
+  const playlistsSX: SxProps<Theme> = isScreenSmall
+    ? { width: "100%", marginTop: "10px" }
+    : { width: "35%", position: "absolute", right: "20px" };
 
   return videoData && videoData?.videos?.length === 0 ? (
     <Box
@@ -70,41 +70,36 @@ export const PlaylistContent = () => {
     >
       <VideoPlayerContainer
         sx={{
-          width: "100%",
-          display: "grid",
-          gridTemplateColumns: isScreenSmall ? "1fr" : "60vw auto",
-          gap: "20px",
+          width: isScreenSmall ? "100%" : "60%",
+          alignSelf: "start",
+          paddingRight: isScreenSmall ? "10px" : "0px",
+          marginBottom: "20px",
         }}
       >
         {videoReference && (
-          <Box
-            sx={{
-              aspectRatio: "16/9",
+          <VideoPlayer
+            name={videoReference?.name}
+            service={videoReference?.service}
+            identifier={videoReference?.identifier}
+            user={channelName}
+            jsonId={id}
+            poster={videoCover || ""}
+            nextVideo={nextVideo}
+            onEnd={onEndVideo}
+            autoPlay={doAutoPlay}
+            ref={containerRef}
+            videoStyles={{
+              video: { aspectRatio: "16 / 9" },
             }}
-          >
-            <VideoPlayer
-              name={videoReference?.name}
-              service={videoReference?.service}
-              identifier={videoReference?.identifier}
-              user={channelName}
-              jsonId={id}
-              poster={videoCover || ""}
-              nextVideo={nextVideo}
-              onEnd={onEndVideo}
-              autoPlay={doAutoPlay}
-              ref={containerRef}
-              videoStyles={{
-                videoContainer: { aspectRatio: "16 / 9" },
-                video: { aspectRatio: "16 / 9" },
-              }}
-            />
-          </Box>
+            duration={videoData?.duration}
+          />
         )}
         {playlistData && (
           <Playlists
             playlistData={playlistData}
             currentVideoIdentifier={videoData?.id}
             onClick={getVideoData}
+            sx={playlistsSX}
           />
         )}
       </VideoPlayerContainer>
@@ -179,8 +174,8 @@ export const PlaylistContent = () => {
             cursor: !descriptionHeight
               ? "default"
               : isExpandedDescription
-              ? "default"
-              : "pointer",
+                ? "default"
+                : "pointer",
           }}
           className={
             !descriptionHeight ? "" : isExpandedDescription ? "" : "hover-click"
@@ -208,8 +203,8 @@ export const PlaylistContent = () => {
               height: !descriptionHeight
                 ? "auto"
                 : isExpandedDescription
-                ? "auto"
-                : `${descriptionHeight}px`,
+                  ? "auto"
+                  : `${descriptionHeight}px`,
               overflow: "hidden",
             }}
           >
diff --git a/src/pages/ContentPages/VideoContent/VideoContent.tsx b/src/pages/ContentPages/VideoContent/VideoContent.tsx
index 626e43a..2562bc2 100644
--- a/src/pages/ContentPages/VideoContent/VideoContent.tsx
+++ b/src/pages/ContentPages/VideoContent/VideoContent.tsx
@@ -8,12 +8,9 @@ import { DisplayHtml } from "../../../components/common/TextEditor/DisplayHtml.t
 import { VideoPlayer } from "../../../components/common/VideoPlayer/VideoPlayer.tsx";
 import {
   fontSizeSmall,
-  largeScreenSizeString,
   minFileSize,
-  smallScreenSizeString,
   smallVideoSize,
 } from "../../../constants/Misc.ts";
-import { useIsMobile } from "../../../hooks/useIsMobile.ts";
 import { formatBytes } from "../../../utils/numberFunctions.ts";
 import { formatDate } from "../../../utils/time.ts";
 import { VideoActionsBar } from "./VideoActionsBar.tsx";
@@ -25,7 +22,6 @@ import {
   VideoPlayerContainer,
   VideoTitle,
 } from "./VideoContent-styles.tsx";
-import { useSignal } from "@preact/signals-react";
 
 export const VideoContent = () => {
   const {
diff --git a/src/pages/Home/Components/VideoList.tsx b/src/pages/Home/Components/VideoList.tsx
index 5e34386..131d530 100644
--- a/src/pages/Home/Components/VideoList.tsx
+++ b/src/pages/Home/Components/VideoList.tsx
@@ -1,7 +1,7 @@
 import BlockIcon from "@mui/icons-material/Block";
 import EditIcon from "@mui/icons-material/Edit";
 import { Avatar, Box, Tooltip, Typography, useTheme } from "@mui/material";
-import React, { useMemo, useState } from "react";
+import React, { useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import { PlaylistSVG } from "../../../assets/svgs/PlaylistSVG.tsx";