diff --git a/src/styles/main.css.ts b/src/app/global.css.ts
similarity index 95%
rename from src/styles/main.css.ts
rename to src/app/global.css.ts
index b1123fc4..e562d948 100644
--- a/src/styles/main.css.ts
+++ b/src/app/global.css.ts
@@ -1,6 +1,6 @@
 import { globalStyle } from '@vanilla-extract/css';
 
-import { vars } from '@/styles/vars.css';
+import { vars } from '@/shared/styles';
 
 globalStyle('*', {
   margin: 0,
diff --git a/src/app/index.tsx b/src/app/index.tsx
index d680d108..d71950c6 100644
--- a/src/app/index.tsx
+++ b/src/app/index.tsx
@@ -1,6 +1,7 @@
 import { QueryClientProvider } from '@tanstack/react-query';
 import { RouterProvider } from 'react-router-dom';
 
+import './global.css';
 import router from './router';
 
 import FullScreenPrompt from '@/components/prompt';
diff --git a/src/components/button/ColoredButton/index.css.ts b/src/components/button/ColoredButton/index.css.ts
index fc6040bd..72977804 100644
--- a/src/components/button/ColoredButton/index.css.ts
+++ b/src/components/button/ColoredButton/index.css.ts
@@ -4,9 +4,7 @@ import { recipe } from '@vanilla-extract/recipes';
 import * as constants from '@/components/button/constants';
 import type { colorType } from '@/components/button/types';
 
-import { flexOptions } from '@/styles/common.css';
-import { sprinkles } from '@/styles/sprinkles.css';
-import { vars } from '@/styles/vars.css';
+import { flexOptions, sprinkles, vars } from '@/shared/styles';
 
 const colorVariants = constants.BUTTON_COLOR.reduce(
   (variants, color) => {
diff --git a/src/components/button/ColoredIconButton/index.css.ts b/src/components/button/ColoredIconButton/index.css.ts
index a642b474..5cd5d959 100644
--- a/src/components/button/ColoredIconButton/index.css.ts
+++ b/src/components/button/ColoredIconButton/index.css.ts
@@ -4,9 +4,7 @@ import { recipe } from '@vanilla-extract/recipes';
 import * as constants from '@/components/button/constants';
 import type { colorType } from '@/components/button/types';
 
-import { flexOptions } from '@/styles/common.css';
-import { sprinkles } from '@/styles/sprinkles.css';
-import { vars } from '@/styles/vars.css';
+import { flexOptions, sprinkles, vars } from '@/shared/styles';
 
 const colorVariants = constants.BUTTON_COLOR.reduce(
   (variants, color) => {
diff --git a/src/components/button/SettingNavigationButton/index.css.ts b/src/components/button/SettingNavigationButton/index.css.ts
index 98d95192..ebf47172 100644
--- a/src/components/button/SettingNavigationButton/index.css.ts
+++ b/src/components/button/SettingNavigationButton/index.css.ts
@@ -1,8 +1,7 @@
 import { style } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
 
-import { sprinkles } from '@/styles/sprinkles.css';
-import { vars } from '@/styles/vars.css';
+import { sprinkles, vars } from '@/shared/styles';
 
 const position = {
   leftTop: {
diff --git a/src/components/button/SettingTextButton/index.css.ts b/src/components/button/SettingTextButton/index.css.ts
index 8d619ab9..ba97e561 100644
--- a/src/components/button/SettingTextButton/index.css.ts
+++ b/src/components/button/SettingTextButton/index.css.ts
@@ -5,9 +5,7 @@ import * as constants from './constants';
 
 import type { settingTextButtonColorType } from '@/components/button/types';
 
-import { borderDarkOptions } from '@/styles/common.css';
-import { sprinkles } from '@/styles/sprinkles.css';
-import { vars } from '@/styles/vars.css';
+import { borderDarkOptions, sprinkles, vars } from '@/shared/styles';
 
 export const button = style([
   borderDarkOptions({ color: 'black', width: '2x' }),
diff --git a/src/components/chip/index.css.ts b/src/components/chip/index.css.ts
index 9f671857..f172186b 100644
--- a/src/components/chip/index.css.ts
+++ b/src/components/chip/index.css.ts
@@ -3,8 +3,7 @@ import { recipe } from '@vanilla-extract/recipes';
 
 import { color } from './variants.css';
 
-import { flexOptions } from '@/styles/common.css';
-import { sprinkles } from '@/styles/sprinkles.css';
+import { flexOptions, sprinkles } from '@/shared/styles';
 
 const base = style([
   flexOptions({
diff --git a/src/components/chip/variants.css.ts b/src/components/chip/variants.css.ts
index c72a0292..759da279 100644
--- a/src/components/chip/variants.css.ts
+++ b/src/components/chip/variants.css.ts
@@ -1,5 +1,4 @@
-import { sprinkles } from '@/styles/sprinkles.css';
-import { variant } from '@/styles/utils';
+import { sprinkles, variant } from '@/shared/styles';
 
 export const color = variant(
   ['red', 'yellow', 'green', 'blue', 'pink', 'navy'] as const,
diff --git a/src/components/frame/constants.ts b/src/components/frame/constants.ts
index 248156a1..3b8bb99a 100644
--- a/src/components/frame/constants.ts
+++ b/src/components/frame/constants.ts
@@ -1,6 +1,5 @@
-import { vars } from '@/styles/vars.css';
-
 import { IPHONE_14_PRO_MAX, IPHONE_SE } from '@/shared/constants';
+import { vars } from '@/shared/styles';
 
 export const FRAME_STYLE = {
   width: {
diff --git a/src/components/frame/frame.css.ts b/src/components/frame/frame.css.ts
index a223badb..5e96911d 100644
--- a/src/components/frame/frame.css.ts
+++ b/src/components/frame/frame.css.ts
@@ -2,8 +2,7 @@ import { style } from '@vanilla-extract/css';
 
 import { FRAME_STYLE } from './constants';
 
-import { sprinkles } from '@/styles/sprinkles.css';
-import { vars } from '@/styles/vars.css';
+import { sprinkles, vars } from '@/shared/styles';
 
 export const base = style([
   sprinkles({
diff --git a/src/components/frame/with-buttons/button.css.ts b/src/components/frame/with-buttons/button.css.ts
index c2d03596..cbf4c918 100644
--- a/src/components/frame/with-buttons/button.css.ts
+++ b/src/components/frame/with-buttons/button.css.ts
@@ -1,8 +1,11 @@
 import { style } from '@vanilla-extract/css';
 
-import { borderDarkOptions, flexOptions } from '@/styles/common.css';
-import { sprinkles } from '@/styles/sprinkles.css';
-import { vars } from '@/styles/vars.css';
+import {
+  borderDarkOptions,
+  flexOptions,
+  sprinkles,
+  vars,
+} from '@/shared/styles';
 
 const BUTTON_SIZE = '24px';
 
diff --git a/src/components/frame/with-buttons/index.css.ts b/src/components/frame/with-buttons/index.css.ts
index 8c07b91e..536d70cb 100644
--- a/src/components/frame/with-buttons/index.css.ts
+++ b/src/components/frame/with-buttons/index.css.ts
@@ -4,8 +4,7 @@ import { calc } from '@vanilla-extract/css-utils';
 import { FRAME_STYLE } from '../constants';
 import { base } from '../frame.css';
 
-import { borderDarkOptions, flexOptions } from '@/styles/common.css';
-import { sprinkles } from '@/styles/sprinkles.css';
+import { borderDarkOptions, flexOptions, sprinkles } from '@/shared/styles';
 
 export const frame = style([
   base,
diff --git a/src/components/frame/with-buttons/menu-button/game-info/index.css.ts b/src/components/frame/with-buttons/menu-button/game-info/index.css.ts
index a79f45f6..5305410d 100644
--- a/src/components/frame/with-buttons/menu-button/game-info/index.css.ts
+++ b/src/components/frame/with-buttons/menu-button/game-info/index.css.ts
@@ -1,8 +1,6 @@
 import { style } from '@vanilla-extract/css';
 
-import { flexOptions } from '@/styles/common.css';
-import { sprinkles } from '@/styles/sprinkles.css';
-import { vars } from '@/styles/vars.css';
+import { flexOptions, sprinkles, vars } from '@/shared/styles';
 
 export const boxWrapper = style([flexOptions({ option: 'columnCenter' })]);
 
diff --git a/src/components/image-box/index.css.ts b/src/components/image-box/index.css.ts
index d14b6c74..921552dd 100644
--- a/src/components/image-box/index.css.ts
+++ b/src/components/image-box/index.css.ts
@@ -3,8 +3,7 @@ import { recipe } from '@vanilla-extract/recipes';
 
 import { backgroundColor, borderColor, borderSize, size } from './variants.css';
 
-import { flexOptions } from '@/styles/common.css';
-import { sprinkles } from '@/styles/sprinkles.css';
+import { flexOptions, sprinkles } from '@/shared/styles';
 
 const base = style([
   sprinkles({
diff --git a/src/components/image-box/variants.css.ts b/src/components/image-box/variants.css.ts
index 1047c0ab..5dbbb5f0 100644
--- a/src/components/image-box/variants.css.ts
+++ b/src/components/image-box/variants.css.ts
@@ -1,8 +1,6 @@
 import { style } from '@vanilla-extract/css';
 
-import { borderLightOptions } from '@/styles/common.css';
-import { sprinkles } from '@/styles/sprinkles.css';
-import { variant } from '@/styles/utils';
+import { borderLightOptions, sprinkles, variant } from '@/shared/styles';
 
 export const size = variant(
   {
diff --git a/src/components/input/index.css.ts b/src/components/input/index.css.ts
index efd493eb..6e58d745 100644
--- a/src/components/input/index.css.ts
+++ b/src/components/input/index.css.ts
@@ -3,8 +3,7 @@ import { recipe } from '@vanilla-extract/recipes';
 
 import { size } from './variants.css';
 
-import { sprinkles } from '@/styles/sprinkles.css';
-import { vars } from '@/styles/vars.css';
+import { sprinkles, vars } from '@/shared/styles';
 
 const base = style([
   sprinkles({
diff --git a/src/components/input/variants.css.ts b/src/components/input/variants.css.ts
index 5b9c68ec..e606ecc3 100644
--- a/src/components/input/variants.css.ts
+++ b/src/components/input/variants.css.ts
@@ -2,8 +2,7 @@ import { style } from '@vanilla-extract/css';
 
 import { INPUT_STYLE } from './constants';
 
-import { borderDarkOptions } from '@/styles/common.css';
-import { sprinkles } from '@/styles/sprinkles.css';
+import { borderDarkOptions, sprinkles } from '@/shared/styles';
 
 export const size = {
   widthFull: style([
diff --git a/src/components/modal/constants.ts b/src/components/modal/constants.ts
index 8ca0401d..c0bc7758 100644
--- a/src/components/modal/constants.ts
+++ b/src/components/modal/constants.ts
@@ -2,7 +2,7 @@ import { calc } from '@vanilla-extract/css-utils';
 
 import { FRAME_STYLE } from '@/components/frame';
 
-import { vars } from '@/styles/vars.css';
+import { vars } from '@/shared/styles';
 
 export const MIN_MODAL_HEIGHT = calc
   .subtract(FRAME_STYLE.height.min, calc.multiply(FRAME_STYLE.padding, 4))
diff --git a/src/components/modal/index.css.ts b/src/components/modal/index.css.ts
index 3d953d76..73a0b90b 100644
--- a/src/components/modal/index.css.ts
+++ b/src/components/modal/index.css.ts
@@ -2,8 +2,7 @@ import { style } from '@vanilla-extract/css';
 
 import * as constants from './constants';
 
-import { borderDarkOptions, flexOptions } from '@/styles/common.css';
-import { sprinkles } from '@/styles/sprinkles.css';
+import { borderDarkOptions, flexOptions, sprinkles } from '@/shared/styles';
 
 export const modal = style([
   sprinkles({
diff --git a/src/components/player-info/index.css.ts b/src/components/player-info/index.css.ts
index 2045f8a4..e62a1a94 100644
--- a/src/components/player-info/index.css.ts
+++ b/src/components/player-info/index.css.ts
@@ -1,7 +1,6 @@
 import { style } from '@vanilla-extract/css';
 
-import { flexOptions } from '@/styles/common.css';
-import { sprinkles } from '@/styles/sprinkles.css';
+import { flexOptions, sprinkles } from '@/shared/styles';
 
 export const playerInfoWrapper = style([
   flexOptions({ option: 'rowCenter' }),
diff --git a/src/components/player-info/text-box/index.css.ts b/src/components/player-info/text-box/index.css.ts
index f154c07c..425ef159 100644
--- a/src/components/player-info/text-box/index.css.ts
+++ b/src/components/player-info/text-box/index.css.ts
@@ -1,7 +1,6 @@
 import { recipe } from '@vanilla-extract/recipes';
 
-import { sprinkles } from '@/styles/sprinkles.css';
-import { variant } from '@/styles/utils';
+import { sprinkles, variant } from '@/shared/styles';
 
 const colorVariants = variant(['white'] as const, (color) =>
   sprinkles({
diff --git a/src/components/prompt/index.css.ts b/src/components/prompt/index.css.ts
index ffcb10a1..07ae0b69 100644
--- a/src/components/prompt/index.css.ts
+++ b/src/components/prompt/index.css.ts
@@ -1,8 +1,7 @@
 import { style } from '@vanilla-extract/css';
 
-import { sprinkles } from '@/styles/sprinkles.css';
-
 import { IPHONE_SE } from '@/shared/constants';
+import { sprinkles } from '@/shared/styles';
 
 export const fullscreenPromptStyle = style([
   sprinkles({
diff --git a/src/components/ranking/index.css.ts b/src/components/ranking/index.css.ts
index e863834b..c95b2ca5 100644
--- a/src/components/ranking/index.css.ts
+++ b/src/components/ranking/index.css.ts
@@ -1,8 +1,7 @@
 import { style } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
 
-import { flexOptions } from '@/styles/common.css';
-import { sprinkles } from '@/styles/sprinkles.css';
+import { flexOptions, sprinkles } from '@/shared/styles';
 
 export const rankingItemBox = recipe({
   base: [
diff --git a/src/features/room-setting/index.css.ts b/src/features/room-setting/index.css.ts
index 82d06be8..2c0eb71e 100644
--- a/src/features/room-setting/index.css.ts
+++ b/src/features/room-setting/index.css.ts
@@ -1,9 +1,7 @@
 import { style } from '@vanilla-extract/css';
 
-import { borderLightOptions, flexOptions } from '@/styles/common.css';
-import { sprinkles } from '@/styles/sprinkles.css';
-
 import { MAP_ID_LIST } from '@/models/map';
+import { borderLightOptions, flexOptions, sprinkles } from '@/shared/styles';
 
 export const modalTwoButtonWrapper = style([
   flexOptions({
diff --git a/src/main.tsx b/src/main.tsx
index 86d66b5b..8bb157f6 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,6 +1,5 @@
 import ReactDOM from 'react-dom/client';
 
 import App from '@/app';
-import '@/styles/main.css';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(<App />);
diff --git a/src/models/tier/ui/variants.css.ts b/src/models/tier/ui/variants.css.ts
index 7026df2d..80a6d78a 100644
--- a/src/models/tier/ui/variants.css.ts
+++ b/src/models/tier/ui/variants.css.ts
@@ -2,8 +2,7 @@ import { style } from '@vanilla-extract/css';
 
 import { TIER } from '../constants';
 
-import { variant } from '@/styles/utils';
-
+import { variant } from '@/shared/styles';
 
 export const tier = variant([...TIER], (name) =>
   style({
diff --git a/src/pages/collection/ui/menu/index.css.ts b/src/pages/collection/ui/menu/index.css.ts
index 1f9789fd..88c244eb 100644
--- a/src/pages/collection/ui/menu/index.css.ts
+++ b/src/pages/collection/ui/menu/index.css.ts
@@ -3,8 +3,7 @@ import { recipe } from '@vanilla-extract/recipes';
 
 import * as constants from '../../constants';
 
-import { flexOptions } from '@/styles/common.css';
-import { sprinkles } from '@/styles/sprinkles.css';
+import { flexOptions, sprinkles } from '@/shared/styles';
 
 export const collections = style([
   sprinkles({
diff --git a/src/pages/collection/ui/page.css.ts b/src/pages/collection/ui/page.css.ts
index 7260f186..46100d45 100644
--- a/src/pages/collection/ui/page.css.ts
+++ b/src/pages/collection/ui/page.css.ts
@@ -1,7 +1,6 @@
 import { style } from '@vanilla-extract/css';
 
-import { flexOptions } from '@/styles/common.css';
-import { sprinkles } from '@/styles/sprinkles.css';
+import { flexOptions, sprinkles } from '@/shared/styles';
 
 export const gridBox = style({
   display: 'flex',
diff --git a/src/pages/error/index.css.ts b/src/pages/error/index.css.ts
index b22dbaec..3267f0a4 100644
--- a/src/pages/error/index.css.ts
+++ b/src/pages/error/index.css.ts
@@ -1,7 +1,6 @@
 import { style } from '@vanilla-extract/css';
 
-import { flexOptions } from '@/styles/common.css';
-import { sprinkles } from '@/styles/sprinkles.css';
+import { flexOptions, sprinkles } from '@/shared/styles';
 
 export const errorWrapper = style([
   flexOptions({ option: 'columnCenter' }),
diff --git a/src/pages/finder/page.css.ts b/src/pages/finder/page.css.ts
index afe88706..dfc7a6f4 100644
--- a/src/pages/finder/page.css.ts
+++ b/src/pages/finder/page.css.ts
@@ -1,8 +1,7 @@
 import { style } from '@vanilla-extract/css';
 import { calc } from '@vanilla-extract/css-utils';
 
-import { flexOptions } from '@/styles/common.css';
-import { sprinkles } from '@/styles/sprinkles.css';
+import { flexOptions, sprinkles } from '@/shared/styles';
 
 export const contentWrapper = sprinkles({
   width: 'full',
diff --git a/src/pages/finder/ui/index.css.ts b/src/pages/finder/ui/index.css.ts
index b3c7f28a..c2a64747 100644
--- a/src/pages/finder/ui/index.css.ts
+++ b/src/pages/finder/ui/index.css.ts
@@ -1,8 +1,7 @@
 import { style } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
 
-import { flexOptions } from '@/styles/common.css';
-import { sprinkles } from '@/styles/sprinkles.css';
+import { flexOptions, sprinkles } from '@/shared/styles';
 
 export const modalTwoButtonWrapper = style([
   flexOptions({
diff --git a/src/pages/home/UserDashboard/index.css.ts b/src/pages/home/UserDashboard/index.css.ts
index f715beca..20be8cce 100644
--- a/src/pages/home/UserDashboard/index.css.ts
+++ b/src/pages/home/UserDashboard/index.css.ts
@@ -1,6 +1,6 @@
 import { createVar, style } from '@vanilla-extract/css';
 
-import { sprinkles } from '@/styles/sprinkles.css';
+import { sprinkles } from '@/shared/styles';
 
 export const dashboardWrapper = style([
   sprinkles({
diff --git a/src/pages/home/index.css.ts b/src/pages/home/index.css.ts
index 749fe30d..61d4514c 100644
--- a/src/pages/home/index.css.ts
+++ b/src/pages/home/index.css.ts
@@ -2,8 +2,7 @@ import { style } from '@vanilla-extract/css';
 
 import * as constants from './constants';
 
-import { flexOptions } from '@/styles/common.css';
-import { sprinkles } from '@/styles/sprinkles.css';
+import { flexOptions, sprinkles } from '@/shared/styles';
 
 export const fullWrapper = style([
   flexOptions({ option: 'column' }),
diff --git a/src/pages/landing/index.css.ts b/src/pages/landing/index.css.ts
index 4d52a89a..e05e63e8 100644
--- a/src/pages/landing/index.css.ts
+++ b/src/pages/landing/index.css.ts
@@ -3,9 +3,7 @@ import { calc } from '@vanilla-extract/css-utils';
 
 import { INPUT_STYLE } from '@/components/input/constants';
 
-import { flexOptions } from '@/styles/common.css';
-import { sprinkles } from '@/styles/sprinkles.css';
-import { vars } from '@/styles/vars.css';
+import { flexOptions, sprinkles, vars } from '@/shared/styles';
 
 export const landingWrapper = style([
   flexOptions({ option: 'columnCenter' }),
diff --git a/src/pages/logIn/index.css.ts b/src/pages/logIn/index.css.ts
index 07e427a1..d6a2ade5 100644
--- a/src/pages/logIn/index.css.ts
+++ b/src/pages/logIn/index.css.ts
@@ -1,6 +1,6 @@
 import { style } from '@vanilla-extract/css';
 
-import { sprinkles } from '@/styles/sprinkles.css';
+import { sprinkles } from '@/shared/styles';
 
 export { contentWrapper, buttonWrapper } from '@/pages/landing/index.css';
 
diff --git a/src/pages/play/lobby/Players/index.css.ts b/src/pages/play/lobby/Players/index.css.ts
index d7f4418a..67d04e9d 100644
--- a/src/pages/play/lobby/Players/index.css.ts
+++ b/src/pages/play/lobby/Players/index.css.ts
@@ -3,9 +3,7 @@ import { recipe } from '@vanilla-extract/recipes';
 
 import * as constants from '@/pages/play/lobby/constants';
 
-import { flexOptions } from '@/styles/common.css';
-import { sprinkles } from '@/styles/sprinkles.css';
-import { variant } from '@/styles/utils';
+import { flexOptions, sprinkles, variant } from '@/shared/styles';
 
 export const playerWrapper = style([
   flexOptions({ option: 'row' }),
diff --git a/src/pages/play/lobby/constants/index.ts b/src/pages/play/lobby/constants/index.ts
index fc6c8309..f4a600dc 100644
--- a/src/pages/play/lobby/constants/index.ts
+++ b/src/pages/play/lobby/constants/index.ts
@@ -1,6 +1,6 @@
 import { calc } from '@vanilla-extract/css-utils';
 
-import { vars } from '@/styles/vars.css';
+import { vars } from '@/shared/styles';
 
 export { PLAYER_COLORS } from '@/models/player';
 
diff --git a/src/pages/play/lobby/index.css.ts b/src/pages/play/lobby/index.css.ts
index b115b500..359046ac 100644
--- a/src/pages/play/lobby/index.css.ts
+++ b/src/pages/play/lobby/index.css.ts
@@ -3,8 +3,7 @@ import { calc } from '@vanilla-extract/css-utils';
 
 import * as constants from './constants';
 
-import { borderDarkOptions, flexOptions } from '@/styles/common.css';
-import { sprinkles } from '@/styles/sprinkles.css';
+import { borderDarkOptions, flexOptions, sprinkles } from '@/shared/styles';
 
 export const lobby = style([
   {
diff --git a/src/pages/play/mode/index.css.ts b/src/pages/play/mode/index.css.ts
index 7c17f97b..4bf2bfe9 100644
--- a/src/pages/play/mode/index.css.ts
+++ b/src/pages/play/mode/index.css.ts
@@ -4,8 +4,7 @@ import { COLORED_ICON_BUTTON_SIZE_PIXEL } from '@/components/button/constants';
 
 import { MYRANKINGITEMBOX_HEIGHT } from '@/pages/ranking/constants';
 
-import { flexOptions } from '@/styles/common.css';
-import { sprinkles } from '@/styles/sprinkles.css';
+import { flexOptions, sprinkles } from '@/shared/styles';
 
 export const wrapper = style([
   {
diff --git a/src/pages/ranking/constants.ts b/src/pages/ranking/constants.ts
index fdd74a8d..b7161707 100644
--- a/src/pages/ranking/constants.ts
+++ b/src/pages/ranking/constants.ts
@@ -1,6 +1,6 @@
 import { calc } from '@vanilla-extract/css-utils';
 
-import { vars } from '@/styles/vars.css';
+import { vars } from '@/shared/styles';
 
 export const TITLE_TEXT_WIDTH = '193px';
 export const TITLE_TEXT_HEIGHT = '56px';
diff --git a/src/pages/ranking/index.css.ts b/src/pages/ranking/index.css.ts
index da3241c7..146ddacd 100644
--- a/src/pages/ranking/index.css.ts
+++ b/src/pages/ranking/index.css.ts
@@ -2,8 +2,7 @@ import { style } from '@vanilla-extract/css';
 
 import * as constants from './constants';
 
-import { flexOptions } from '@/styles/common.css';
-import { sprinkles } from '@/styles/sprinkles.css';
+import { flexOptions, sprinkles } from '@/shared/styles';
 
 export const rankingFullWrapper = style([
   sprinkles({
diff --git a/src/pages/result/ui/index.css.ts b/src/pages/result/ui/index.css.ts
index 56e13e5b..68e9a6ca 100644
--- a/src/pages/result/ui/index.css.ts
+++ b/src/pages/result/ui/index.css.ts
@@ -3,8 +3,7 @@ import { recipe } from '@vanilla-extract/recipes';
 
 import * as constants from '../constants';
 
-import { flexOptions } from '@/styles/common.css';
-import { sprinkles } from '@/styles/sprinkles.css';
+import { flexOptions, sprinkles } from '@/shared/styles';
 
 export const gameResultWrapper = style([
   flexOptions({ option: 'columnCenter' }),
diff --git a/src/pages/settings/index.css.ts b/src/pages/settings/index.css.ts
index 91668a55..dda8385b 100644
--- a/src/pages/settings/index.css.ts
+++ b/src/pages/settings/index.css.ts
@@ -1,7 +1,6 @@
 import { style } from '@vanilla-extract/css';
 
-import { flexOptions } from '@/styles/common.css';
-import { sprinkles } from '@/styles/sprinkles.css';
+import { flexOptions, sprinkles } from '@/shared/styles';
 
 export const centerBoxWrapper = style([
   flexOptions({ option: 'columnCenter' }),
diff --git a/src/pages/tutorial/index.css.ts b/src/pages/tutorial/index.css.ts
index 430b3fc3..bc633ecf 100644
--- a/src/pages/tutorial/index.css.ts
+++ b/src/pages/tutorial/index.css.ts
@@ -1,7 +1,6 @@
 import { style } from '@vanilla-extract/css';
 
-import { flexOptions } from '@/styles/common.css';
-import { sprinkles } from '@/styles/sprinkles.css';
+import { flexOptions, sprinkles } from '@/shared/styles';
 
 export const left = style([
   sprinkles({
diff --git a/src/styles/common.css.ts b/src/shared/styles/common.css.ts
similarity index 97%
rename from src/styles/common.css.ts
rename to src/shared/styles/common.css.ts
index f10073eb..4de2d6ba 100644
--- a/src/styles/common.css.ts
+++ b/src/shared/styles/common.css.ts
@@ -2,7 +2,7 @@
 
 import { recipe } from '@vanilla-extract/recipes';
 
-import { sprinkles } from '@/styles/sprinkles.css';
+import { sprinkles } from './sprinkles.css';
 
 export const flexOptions = recipe({
   base: sprinkles({ display: 'flex' }),
diff --git a/src/styles/font.css.ts b/src/shared/styles/font.css.ts
similarity index 100%
rename from src/styles/font.css.ts
rename to src/shared/styles/font.css.ts
diff --git a/src/shared/styles/index.ts b/src/shared/styles/index.ts
new file mode 100644
index 00000000..5d73490d
--- /dev/null
+++ b/src/shared/styles/index.ts
@@ -0,0 +1,4 @@
+export { sprinkles } from './sprinkles.css';
+export { vars } from './vars.css';
+export * from './common.css';
+export * from './utils';
diff --git a/src/styles/sprinkles.css.ts b/src/shared/styles/sprinkles.css.ts
similarity index 100%
rename from src/styles/sprinkles.css.ts
rename to src/shared/styles/sprinkles.css.ts
diff --git a/src/styles/utils.ts b/src/shared/styles/utils.ts
similarity index 100%
rename from src/styles/utils.ts
rename to src/shared/styles/utils.ts
diff --git a/src/styles/vars.css.ts b/src/shared/styles/vars.css.ts
similarity index 96%
rename from src/styles/vars.css.ts
rename to src/shared/styles/vars.css.ts
index 6309e9c1..181f3db5 100644
--- a/src/styles/vars.css.ts
+++ b/src/shared/styles/vars.css.ts
@@ -1,11 +1,6 @@
 import { createGlobalTheme } from '@vanilla-extract/css';
 
-import {
-  loadingNumFont,
-  loadingTextFont,
-  numFont,
-  textFont,
-} from '@/styles/font.css';
+import { loadingNumFont, loadingTextFont, numFont, textFont } from './font.css';
 
 export const vars = createGlobalTheme(':root', {
   size: {
diff --git a/src/styles/README.md b/src/styles/README.md
deleted file mode 100644
index 09b59cca..00000000
--- a/src/styles/README.md
+++ /dev/null
@@ -1,5 +0,0 @@
-# styles
-
-### description
-
-모든 페이지에서 활용하는 공통 style을 정의합니다.