diff --git a/src/stories/player/parts/controls.tsx b/src/stories/player/parts/controls.tsx
index 3236077c..8625277f 100644
--- a/src/stories/player/parts/controls.tsx
+++ b/src/stories/player/parts/controls.tsx
@@ -14,9 +14,11 @@ import { PlayerTooltip } from "./tooltip";
 import { formatDuration } from "../utils";
 import useDebounce from "../../../hooks/useDebounce";
 import { CutStart } from "./CutStart";
+import { theme } from "../../theme";
 
 export const ControlsWrapper = styled.div<WrapperProps>`
-  ${({ showControls }) => showControls ? "position: relative;" : "position: absolute;"}
+  ${({ showControls }) =>
+    showControls ? "position: relative;" : "position: absolute;"}
   bottom: 0;
   left: 0;
   right: 0;
@@ -84,7 +86,7 @@ export const Controls = ({
   const [marks, setMarks] = useState<IBookmark[] | undefined>(bookmarks);
   const [updatedMark, setUpdatedMark] = useState<IBookmark>();
   const progressRef = useRef<HTMLDivElement>(null);
-  const { context, setCurrentTime } = useVideoContext()
+  const { context, setCurrentTime } = useVideoContext();
   const debouncedMark = useDebounce(updatedMark, 500);
   const [cutStart, setCutStart] = useState<number>(0);
 
@@ -228,19 +230,21 @@ export const Controls = ({
           progress={progress}
           handleSkipAhead={handleSkipAhead}
           duration={duration}
-          />
+        />
         {isCutting && <CutStart left={cutStart} />}
         <CurrentTimeMarker left={progress} />
       </ProgressContainer>
 
       <ControlsBar>
-        <StyledDiv style={{ width: "20%", justifyContent: "start" }}>
+        <StyledDiv
+          style={{ width: "20%", justifyContent: "start", gap: theme.space.sm }}
+        >
           <AudioButton />
           <TimeLabel current={relCurrentTime} duration={duration} />
         </StyledDiv>
         <ControlsGroupCenter style={{ width: "60%" }} />
 
-        <StyledDiv style={{ width: "20%", justifyContent: "end" }}>
+        <StyledDiv style={{ width: "20%", justifyContent: "end", gap: theme.space.sm  }}>
           <Cutter
             onCutHandler={onCutHandler}
             isCutting={isCutting}
diff --git a/src/stories/player/parts/controlsCenterGroup.tsx b/src/stories/player/parts/controlsCenterGroup.tsx
index 49d46636..b40d094f 100644
--- a/src/stories/player/parts/controlsCenterGroup.tsx
+++ b/src/stories/player/parts/controlsCenterGroup.tsx
@@ -14,6 +14,7 @@ const StyledDiv = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: ${({ theme }) => theme.space.xxs};
 `;
 
 export const ControlsGroupCenter = (props: HTMLAttributes<HTMLDivElement>) => {
@@ -45,6 +46,7 @@ export const ControlsGroupCenter = (props: HTMLAttributes<HTMLDivElement>) => {
   return (
     <StyledDiv {...props}>
       <ControlButton
+        size={"small"}
         onClick={(e) => {
           if (videoRef) {
             videoRef.currentTime = 0;
@@ -55,6 +57,7 @@ export const ControlsGroupCenter = (props: HTMLAttributes<HTMLDivElement>) => {
         <PreviousIcon />
       </ControlButton>
       <ControlButton
+        size={"small"}
         onClick={(e) => {
           onRewind();
           e.stopPropagation();
@@ -62,14 +65,15 @@ export const ControlsGroupCenter = (props: HTMLAttributes<HTMLDivElement>) => {
       >
         <RewindIcon />
       </ControlButton>
-      <ControlButton size={"large"} onClick={togglePlay}>
+      <ControlButton onClick={togglePlay}>
         {isPlaying ? (
-          <PauseIcon style={{ width: "24px", height: "24px" }} />
+          <PauseIcon style={{ width: "20px", height: "20px" }} />
         ) : (
-          <PlayIcon style={{ width: "24px", height: "24px" }} />
+          <PlayIcon style={{ width: "20px", height: "20px" }} />
         )}
       </ControlButton>
       <ControlButton
+        size={"small"}
         onClick={(e) => {
           onForward();
           e.stopPropagation();
@@ -78,6 +82,7 @@ export const ControlsGroupCenter = (props: HTMLAttributes<HTMLDivElement>) => {
         <ForwardIcon />
       </ControlButton>
       <ControlButton
+        size={"small"}
         isPill
         onClick={(e) => {
           const newSpeed = getNextPlaybackRate(playBackRate);