diff --git a/_data/pages/what-is-starknet.yml b/_data/pages/what-is-starknet.yml
index a5edef05b2..0f9d4ae4bf 100644
--- a/_data/pages/what-is-starknet.yml
+++ b/_data/pages/what-is-starknet.yml
@@ -5,8 +5,9 @@ page_last_updated: true
 blocks:
   - type: page_header
     title: "What is Starknet? "
+    description: ""
   - type: markdown
-    body: >
+    body: >-
       Starknet is a Validity-Rollup (aka ZK-Rollup) Layer 2 network that
       operates on top of Ethereum, enabling dApps to massively scale without
       compromising on security.
@@ -61,6 +62,8 @@ blocks:
         The Core contract verifies the proof's authenticity and confirms receiving the State Diff, subsequently updating the Starknet state on the Ethereum blockchain. This updated state is then added to an Ethereum block, distributed across the node network for validation and voting. When the block accumulates sufficient votes, it achieves "finalized" status, cementing its place as an immutable part of Ethereum.
       title: Secure Settlement on Ethereum
       description: Chapter 4 explains how to secure settlement on Ethereum
+    chapterDescriptionFullWidth: true
+    playlistOnBottom: false
   - type: link_list
     heading: Further reading
     listSize: lg
diff --git a/workspaces/cms-config/src/blocks.ts b/workspaces/cms-config/src/blocks.ts
index a985890f5e..7735dedaa7 100644
--- a/workspaces/cms-config/src/blocks.ts
+++ b/workspaces/cms-config/src/blocks.ts
@@ -692,6 +692,20 @@ export const blocks = [
     label: "Education video section",
     widget: "object",
     fields: [
+      {
+        label: "Chapter description full width",
+        name: "chapterDescriptionFullWidth",
+        widget: "boolean",
+        default: false,
+        required: false,
+      },
+      {
+        label: "Chapters playlist on bottom of video desktop",
+        name: "playlistOnBottom",
+        widget: "boolean",
+        default: true,
+        required: false,
+      },
       {
         crowdin: true,
         label: 'Chapter 1',
diff --git a/workspaces/cms-data/src/pages.ts b/workspaces/cms-data/src/pages.ts
index 642022439e..3efe2ab66d 100644
--- a/workspaces/cms-data/src/pages.ts
+++ b/workspaces/cms-data/src/pages.ts
@@ -158,6 +158,8 @@ export interface VideoSectionBlock {
   readonly sequencer: ChapterInfo;
   readonly prover: ChapterInfo;
   readonly 'eth-settlement': ChapterInfo;
+  readonly chapterDescriptionFullWidth: boolean;
+  readonly playlistOnBottom: boolean;
 }
 
 export interface NewsletterBlock {
diff --git a/workspaces/website/src/blocks/VideoSectionBlock.tsx b/workspaces/website/src/blocks/VideoSectionBlock.tsx
index f429631ea6..ff93bc733b 100644
--- a/workspaces/website/src/blocks/VideoSectionBlock.tsx
+++ b/workspaces/website/src/blocks/VideoSectionBlock.tsx
@@ -2,7 +2,7 @@
  * Module dependencies
  */
 
-import { Box } from "@chakra-ui/react";
+import { Box, Show } from "@chakra-ui/react";
 import {
   VideoSectionBlock as VideoSectionProps,
   ChapterInfo
@@ -26,6 +26,8 @@ type ChapterType = Chapter & ChapterInfo;
  */
 
 export default function VideoSectionBlock(props: VideoSectionProps) {
+  const { playlistOnBottom, chapterDescriptionFullWidth } = props;
+
   const normalizedPlaylist = useMemo(() => {
     return playlist.map((chapter) => {
       const chapterInfo = props[chapter.id as keyof VideoSectionProps] as ChapterInfo;
@@ -55,23 +57,26 @@ export default function VideoSectionBlock(props: VideoSectionProps) {
         onChapterChange={(id) => 
           setCurrentChapter(normalizedPlaylist.find((p) => p.id === id) ?? normalizedPlaylist[0])
         }
-        playlistOnBottom
+        playlistOnBottom={playlistOnBottom}
       />
 
-      <Box mt="md">
-        <CategoryTabs
-          activeItemId={currentChapter.id}
-          onTabClick={(id) => 
-            setCurrentChapter(normalizedPlaylist.find((p) => p.id === id) ?? normalizedPlaylist[0])
-          }
-          items={normalizedPlaylist.map((p) => ({
-            id: p.id,
-            label: p.subtitle,
-          }))}
-        />
+      <Box marginTop={{ base: "32px", lg: !playlistOnBottom ? "64px" : "32px"  }}>
+        <Show above="lg">   
+          <CategoryTabs
+            activeItemId={currentChapter.id}
+            onTabClick={(id) => 
+              setCurrentChapter(normalizedPlaylist.find((p) => p.id === id) ?? normalizedPlaylist[0])
+            }
+            items={normalizedPlaylist.map((p) => ({
+              id: p.id,
+              label: p.subtitle,
+            }))}
+            playlistOnBottom={playlistOnBottom}
+          />
+        </Show>
 
         <Box
-          maxW="656px"
+          maxW={chapterDescriptionFullWidth ? "100%" : "656px"}
           marginInline="auto"
           marginTop={'32px'}
         >
diff --git a/workspaces/website/src/components/CategoryTabs/CategoryTabs.tsx b/workspaces/website/src/components/CategoryTabs/CategoryTabs.tsx
index 8c7742c31a..dd475afb2b 100644
--- a/workspaces/website/src/components/CategoryTabs/CategoryTabs.tsx
+++ b/workspaces/website/src/components/CategoryTabs/CategoryTabs.tsx
@@ -49,9 +49,9 @@ export const CategoryTabs = ({
         width="100%"
         padding={'0 24px'}
       >
-        {items.map((item) => {
+        {items.map((item, index) => {
           return (
-            <Box>
+            <Box key={item.label + index}>
               <Button
                 as={item.link ? "a" : "button"}
                 href={item.link}
diff --git a/workspaces/website/src/components/VideoPlayer/player-core/VideoPlayerCore.tsx b/workspaces/website/src/components/VideoPlayer/player-core/VideoPlayerCore.tsx
index f79204c09e..e41ee67292 100644
--- a/workspaces/website/src/components/VideoPlayer/player-core/VideoPlayerCore.tsx
+++ b/workspaces/website/src/components/VideoPlayer/player-core/VideoPlayerCore.tsx
@@ -26,6 +26,7 @@ import { isFinalChapter } from "./utils";
 import "./player-overrides.css";
 import { FinalChapterLeftCTA } from "./chapter-cta/FinalChapterLeftCTA";
 import { FinalChapterRightCTA } from "./chapter-cta/FinalChapterRightCTA";
+import { Box } from "@chakra-ui/react";
 
 export type PlayerRef = React.MutableRefObject<Player | null>;
 
@@ -231,7 +232,15 @@ export function VideoPlayerCore({
     totalDuration - currentTime < 5;
 
   return (
-    <div style={videoWrapperStyle} ref={videoWrapperRef}>
+    <Box
+      sx={{
+        ".video-js, .video-js .vjs-tech, .vjs-poster img": {
+          borderRadius: "8px",
+        },
+      }} 
+      style={videoWrapperStyle} 
+      ref={videoWrapperRef}
+    >
       <div style={videoPositionStyle} onClick={onPlayToggle}>
         <VideoJS
           options={videojsOptions}
@@ -308,6 +317,6 @@ export function VideoPlayerCore({
           onShare={onShareModalOpen}
         />
       )}
-    </div>
+    </Box>
   );
 }
diff --git a/workspaces/website/src/components/VideoPlayer/player-core/control-bar/CustomControl.tsx b/workspaces/website/src/components/VideoPlayer/player-core/control-bar/CustomControl.tsx
index 1eb929d9a7..3a1136e7bd 100644
--- a/workspaces/website/src/components/VideoPlayer/player-core/control-bar/CustomControl.tsx
+++ b/workspaces/website/src/components/VideoPlayer/player-core/control-bar/CustomControl.tsx
@@ -109,6 +109,8 @@ export default function CustomControl(props: CustomControlProps) {
           bg: "rgba(0, 0, 0, .75)",
           backdropBlur: "sm",
           alignItems: "center",
+          borderBottomLeftRadius: "8px",
+          borderBottomRightRadius: "8px",
         }}
       >
         <PlayButton playingStatus={playingStatus} handlePlay={onPlayToggle} />
diff --git a/workspaces/website/src/components/VideoPlayer/player-website/BottomPlaylist.tsx b/workspaces/website/src/components/VideoPlayer/player-website/BottomPlaylist.tsx
index fc475babe2..6ec6d981e0 100644
--- a/workspaces/website/src/components/VideoPlayer/player-website/BottomPlaylist.tsx
+++ b/workspaces/website/src/components/VideoPlayer/player-website/BottomPlaylist.tsx
@@ -5,7 +5,6 @@
 
 import { Box, Image } from "@chakra-ui/react";
 import { Chapter } from "../constants";
-import { useOverflow } from "../hooks/useOverflow";
 import { useRef } from "react";
 
 /**
@@ -30,12 +29,10 @@ export default function BottomPlaylist({
   onChapterSelect
 }: BottomPlaylistProps) {
   const ref = useRef<HTMLDivElement>(null);
-  const { hasOverflowX } = useOverflow(ref);
 
   return (
     <Box
       borderColor="border.divider"
-      borderRightWidth={hasOverflowX ? "1px" : "0px"}
       borderStyle="solid"
       display="flex"
       flexDirection={{ base: "row", lg: 'row' }}
@@ -46,8 +43,7 @@ export default function BottomPlaylist({
       }}
       marginTop={'24px'}
       maxH={{ base: "auto", lg: 'auto' }}
-      overflow={'auto'}
-      paddingRight={hasOverflowX ? "sm" : undefined}
+      overflowX="auto"
       ref={ref}
       sx={{
         overflow: "auto",
diff --git a/workspaces/website/src/components/VideoPlayer/player-website/ChaptersPlaylist.tsx b/workspaces/website/src/components/VideoPlayer/player-website/ChaptersPlaylist.tsx
index 4c4c030183..62218bad63 100644
--- a/workspaces/website/src/components/VideoPlayer/player-website/ChaptersPlaylist.tsx
+++ b/workspaces/website/src/components/VideoPlayer/player-website/ChaptersPlaylist.tsx
@@ -1,6 +1,13 @@
 import { Box, Image, useBreakpointValue } from "@chakra-ui/react";
 import { Chapter } from "../constants";
 import { useUpdateEffect } from "react-use";
+import styled from "@emotion/styled";
+
+const ChaptersPlaylistWrapper = styled(Box)`
+  ::-webkit-scrollbar {
+    width: thin;
+  }
+`;
 
 type ChaptersPlaylistProps = {
   height: number;
@@ -29,19 +36,25 @@ export default function ChaptersPlaylist({
   }, [currentChapter, isMobile]);
 
   return (
-    <Box
+    <ChaptersPlaylistWrapper
       sx={{
-        overflow: "scroll",
         maxHeight: height,
-        gap: "16px",
         cursor: "pointer",
       }}
       display={{ base: "flex", lg: "grid" }}
       maxH={{ base: "auto", lg: height }}
+      gap={{ base: "40px", lg: "16px" }}
+      paddingBottom={{ base: "12px", lg: "0px" }}
+      overflowY="auto"
+      overflowX="auto"
       flexWrap="nowrap"
     >
       {chapters.map((chapter) => {
         const isActive = chapter.id === currentChapter;
+        const textColor = isActive
+          ? "heading-navy-fg"
+          : "content.accent.disabled";
+
         return (
           <Box
             key={chapter.id}
@@ -52,62 +65,59 @@ export default function ChaptersPlaylist({
               gap: "16px",
               pointer: "cursor",
             }}
-            minW={{ base: "151px", lg: "auto" }}
+            maxW={{ base: "151px", md: "175px", lg: "100%" }}
             flexDir={{ base: "column", lg: "row" }}
             flexWrap="nowrap"
-            padding={{ base: "0px 0px 2rem", lg: "0px 1rem 0px" }}
+            padding={{ lg: "0px 4px 0px 0px" }}
             height="max-content"
           >
-            <Box
-              maxW={{ base: "151px", lg: "99px", xl: "151px" }}
-              height="min-content"
-            >
+            <Box minW={{ base: "151px", md: "175px" }}>
               <Image
                 src={chapter.thumbnail}
                 width={{
                   base: "151px",
-                  lg: "99px",
-                  xl: "151px",
+                  md: "175px"
                 }}
                 height="auto"
                 alt={chapter.title}
                 style={{
-                  // borderBottom: isActive ? "1px solid#EC796B" : "",
-                  borderRadius: "10px",
+                  borderRadius: "8px",
                 }}
                 aspectRatio="16/9"
+                objectFit="cover"
               />
             </Box>
-            <Box display="flex" flexDir="column" gap="4px">
+
+            <Box display="flex" width="100%" flexDir="column" gap="4px" color={textColor}>            
               <Box
-                as="h5"
-                fontSize="sm"
-                fontWeight="bold"
-                color={isActive ? "heading-navy-fg" : "fg-muted"}
+                fontSize="12px"
+                fontWeight={500}
                 lineHeight="normal"
+                display="flex"
+                justifyContent="space-between"
               >
+                {chapter.subtitle}
+                <Box
+                  display={{
+                    base: "block"
+                  }}
+                >
+                  {chapter.durationTime}
+                </Box>
+              </Box>
+
+              <Box as="h5" fontSize="15px" fontWeight="600" lineHeight="21px">
                 {chapter.title}
               </Box>
+
               <Box
                 as="p"
                 fontSize="12px"
-                lineHeight="15px"
-                sx={{
-                  maxW: "200px",
-                  color: isActive ? "heading-navy-fg" : "fg-muted",
-                }}
-              >
-                {chapter.description}
-              </Box>
-              <Box
-                as="p"
-                fontSize="xs"
-                lineHeight={1}
-                sx={{
-                  color: isActive ? "heading-navy-fg" : "fg-muted",
-                }}
+                lineHeight="normal"
                 flex={1}
-                display="flex"
+                display={{
+                  base: "none"
+                }}
                 alignItems="flex-end"
               >
                 {chapter.durationTime}
@@ -116,6 +126,6 @@ export default function ChaptersPlaylist({
           </Box>
         );
       })}
-    </Box>
+    </ChaptersPlaylistWrapper>
   );
 }
diff --git a/workspaces/website/src/components/VideoPlayer/player-website/VideoPlayerWebsite.tsx b/workspaces/website/src/components/VideoPlayer/player-website/VideoPlayerWebsite.tsx
index 018c75cfc8..1102ef09f7 100644
--- a/workspaces/website/src/components/VideoPlayer/player-website/VideoPlayerWebsite.tsx
+++ b/workspaces/website/src/components/VideoPlayer/player-website/VideoPlayerWebsite.tsx
@@ -86,7 +86,7 @@ export function VideoPlayerWebsite({
         display: "grid",
         position: "relative",
       }}
-      gap="2xl"
+      gap="32px"
       gridTemplateColumns={{
         base: "1fr",
         lg: playlistOnBottom ? "1fr" : "2fr 1fr",