diff --git a/src/stories/player/parts/bookmark.tsx b/src/stories/player/parts/bookmark.tsx
index 6fba6278..705d9d9c 100644
--- a/src/stories/player/parts/bookmark.tsx
+++ b/src/stories/player/parts/bookmark.tsx
@@ -44,6 +44,9 @@ const StyledGrabber = styled.div<{ isEnd?: boolean }>`
 const activeBookMark = css`
   height: 250%;
   transform: translateY(-30%);
+  cursor: pointer;
+  z-index: 2;
+  border-radius: 4px;
 
   ${StyledGrabber} {
     display: block;
@@ -56,17 +59,15 @@ const Rect = styled.div<{ hue?: string; isActive?: boolean }>`
   background-color: ${({ hue, theme }) => getColor(hue || theme.palette.grey[800], undefined, undefined, 0.8)};
   z-index: 1;
   border-radius: 2px;
+  color: white;
+  transition: width 0.1s ease;
+
   &:hover {
-    ${activeBookMark}
-    border-radius: 4px;
     background-color: ${({ hue, theme }) => hue || theme.palette.grey[800]};
-    cursor: pointer;
-    z-index: 2;
+    ${activeBookMark}
   }
-  color: white;
-  ${({ isActive }) => isActive && activeBookMark}
 
-  transition: width 0.1s ease;
+  ${({ isActive }) => isActive && activeBookMark}
 `;
 const StyledTooltip = styled(Tooltip)<{ tooltipColor: string }>`
   margin-bottom: ${({ theme }) => theme.space.sm};