diff --git a/frontend/.gitignore b/frontend/.gitignore
index 3fd9fc08..8327f411 100644
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -25,4 +25,6 @@ dist-ssr
 
 .vite
 
-.dist
\ No newline at end of file
+.dist
+
+tsconfig.tsbuildinfo
\ No newline at end of file
diff --git a/frontend/src/components/client/Player.tsx b/frontend/src/components/client/Player.tsx
index 0481789d..7482c0e0 100644
--- a/frontend/src/components/client/Player.tsx
+++ b/frontend/src/components/client/Player.tsx
@@ -1,32 +1,28 @@
 import styled from 'styled-components';
 import { useState } from 'react';
-
 import playerLoading from '@assets/player_loading.gif';
 import PlayIcon from '@assets/play_icon.svg';
-
-interface ContainerProps {
-  onStreaming: boolean;
-}
-
 const Player = () => {
   const [onStreaming, setOnStreaming] = useState(false);
-
   return (
     <Container $onStreaming={onStreaming}>
-      <LivePlayerInner>{!onStreaming && <PlayButton onClick={() => setOnStreaming(true)} />}</LivePlayerInner>
+      <LivePlayerInner>
+        {!onStreaming && (
+          <PlayButton onClick={() => setOnStreaming(true)}>
+            <PlayIcon />
+          </PlayButton>
+        )}
+      </LivePlayerInner>
     </Container>
   );
 };
-
 export default Player;
-
-const Container = styled.div<ContainerProps>`
-  background: ${({ onStreaming, theme }) =>
-    onStreaming ? theme.tokenColors['surface-default'] : `url(${playerLoading}) no-repeat center / cover`};
+const Container = styled.div<{ $onStreaming: boolean }>`
+  background: ${({ $onStreaming, theme }) =>
+    $onStreaming ? theme.tokenColors['surface-default'] : `url(${playerLoading}) no-repeat center / cover`};
   padding-top: 56.25%;
   position: relative;
 `;
-
 const LivePlayerInner = styled.div`
   position: absolute;
   left: 0;
@@ -38,13 +34,21 @@ const LivePlayerInner = styled.div`
   align-items: center;
   justify-content: center;
 `;
-
-const PlayButton = styled(PlayIcon)`
+const PlayButton = styled.button`
   width: 55px;
   height: 55px;
+  background: none;
+  border: none;
+  padding: 0;
   cursor: pointer;
-
+  display: flex;
+  align-items: center;
+  justify-content: center;
   &:active {
     opacity: 0.8;
   }
+  svg {
+    width: 100%;
+    height: 100%;
+  }
 `;
diff --git a/frontend/src/styles/theme.ts b/frontend/src/styles/theme.ts
index 58f915e4..f3a8fbf8 100644
--- a/frontend/src/styles/theme.ts
+++ b/frontend/src/styles/theme.ts
@@ -1,4 +1,4 @@
-import { TypographyToken, ColorToken } from '@types/style';
+import { TypographyToken, ColorToken } from '@type/style';
 
 export const colorMap = {
   gray: {
diff --git a/frontend/src/types/style.ts b/frontend/src/type/style.ts
similarity index 88%
rename from frontend/src/types/style.ts
rename to frontend/src/type/style.ts
index 0a18fdd5..e61d0b0c 100644
--- a/frontend/src/types/style.ts
+++ b/frontend/src/type/style.ts
@@ -1,4 +1,4 @@
-export type colorToken =
+export type ColorToken =
   | 'surface-default'
   | 'surface-alt'
   | 'text-weak'
@@ -12,7 +12,7 @@ export type colorToken =
   | 'red-default'
   | 'border-default';
 
-export type typographyToken =
+export type TypographyToken =
   | 'display-bold48'
   | 'display-bold24'
   | 'display-bold20'
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index a09e45b2..6a6e078f 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -16,7 +16,7 @@
       "@pages/*": ["src/pages/*"],
       "@assets/*": ["src/assets/*"],
       "@styles/*": ["src/styles/*"],
-      "@types/*": ["src/types/*"]
+      "@type/*": ["src/type/*"]
     },
     "types": ["vite/client"]
   },