diff --git a/src/renderer/features/shared/components/play-button.tsx b/src/renderer/features/shared/components/play-button.tsx
new file mode 100644
index 00000000..66152c31
--- /dev/null
+++ b/src/renderer/features/shared/components/play-button.tsx
@@ -0,0 +1,23 @@
+import { motion } from 'framer-motion';
+import { RiPlayFill } from 'react-icons/ri';
+import styled from 'styled-components';
+import { ButtonProps, _Button } from '/@/renderer/components';
+
+const MotionButton = styled(motion(_Button))`
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+`;
+
+export const PlayButton = ({ ...props }: Omit<ButtonProps, 'children'>) => {
+  return (
+    <MotionButton
+      variant="filled"
+      whileHover={{ scale: 1.1 }}
+      whileTap={{ scale: 0.95 }}
+      {...props}
+    >
+      <RiPlayFill size={15} />
+    </MotionButton>
+  );
+};
diff --git a/src/renderer/features/shared/index.ts b/src/renderer/features/shared/index.ts
index 7a034b9a..647f6b02 100644
--- a/src/renderer/features/shared/index.ts
+++ b/src/renderer/features/shared/index.ts
@@ -1,2 +1,4 @@
 export * from './components/animated-page';
 export * from './queries/music-folders-query';
+export * from './components/play-button';
+export * from './utils';
diff --git a/src/renderer/features/shared/utils.ts b/src/renderer/features/shared/utils.ts
new file mode 100644
index 00000000..f1d568e0
--- /dev/null
+++ b/src/renderer/features/shared/utils.ts
@@ -0,0 +1,16 @@
+import { Play } from '/@/renderer/types';
+
+export const PLAY_TYPES = [
+  {
+    label: 'Play',
+    play: Play.NOW,
+  },
+  {
+    label: 'Add to queue (last)',
+    play: Play.LAST,
+  },
+  {
+    label: 'Add to queue (next)',
+    play: Play.NEXT,
+  },
+];