diff --git a/src/renderer/features/shared/components/play-button.tsx b/src/renderer/features/shared/components/play-button.tsx
index 66152c31..4c0adb5f 100644
--- a/src/renderer/features/shared/components/play-button.tsx
+++ b/src/renderer/features/shared/components/play-button.tsx
@@ -4,9 +4,16 @@ import styled from 'styled-components';
 import { ButtonProps, _Button } from '/@/renderer/components';
 
 const MotionButton = styled(motion(_Button))`
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 50px;
   height: 50px;
+  background-color: var(--primary-color);
+  border: none;
   border-radius: 50%;
+  opacity: 0.8;
+  transition: background-color 0.2s linear;
 `;
 
 export const PlayButton = ({ ...props }: Omit<ButtonProps, 'children'>) => {
@@ -17,7 +24,7 @@ export const PlayButton = ({ ...props }: Omit<ButtonProps, 'children'>) => {
       whileTap={{ scale: 0.95 }}
       {...props}
     >
-      <RiPlayFill size={15} />
+      <RiPlayFill size={20} />
     </MotionButton>
   );
 };