diff --git a/backend/src/socket/enum/player.enum.ts b/backend/src/socket/enum/player.enum.ts
index 903d484..79361c5 100644
--- a/backend/src/socket/enum/player.enum.ts
+++ b/backend/src/socket/enum/player.enum.ts
@@ -9,4 +9,5 @@ export enum stateOptions {
   WALK = 'walk',
   ROLL = 'roll',
   JUMP = 'jump',
+  ATTACK = 'attack',
 }
diff --git a/frontend/src/assets/character/attack/attack.png b/frontend/src/assets/character/attack/attack.png
new file mode 100644
index 0000000..6f8249a
Binary files /dev/null and b/frontend/src/assets/character/attack/attack.png differ
diff --git a/frontend/src/assets/character/sprite.json b/frontend/src/assets/character/sprite.json
index d575f5d..785a05a 100644
--- a/frontend/src/assets/character/sprite.json
+++ b/frontend/src/assets/character/sprite.json
@@ -3,190 +3,211 @@
     {
       "filename": "base1",
       "frame": {
-        "x": 33,
-        "y": 17,
-        "w": 30,
-        "h": 30
+        "x": 0,
+        "y": 0,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "base2",
       "frame": {
-        "x": 129,
-        "y": 17,
-        "w": 30,
-        "h": 30
+        "x": 96,
+        "y": 0,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "base3",
       "frame": {
-        "x": 225,
-        "y": 17,
-        "w": 30,
-        "h": 30
+        "x": 192,
+        "y": 0,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "base4",
       "frame": {
-        "x": 321,
-        "y": 17,
-        "w": 30,
-        "h": 30
+        "x": 288,
+        "y": 0,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "base5",
       "frame": {
-        "x": 417,
-        "y": 17,
-        "w": 30,
-        "h": 30
+        "x": 384,
+        "y": 0,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "base6",
       "frame": {
-        "x": 513,
-        "y": 17,
-        "w": 30,
-        "h": 30
+        "x": 480,
+        "y": 0,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "base7",
       "frame": {
-        "x": 609,
-        "y": 17,
-        "w": 30,
-        "h": 30
+        "x": 576,
+        "y": 0,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "base8",
       "frame": {
-        "x": 705,
-        "y": 17,
-        "w": 30,
-        "h": 30
+        "x": 672,
+        "y": 0,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "base9",
       "frame": {
-        "x": 801,
-        "y": 17,
-        "w": 30,
-        "h": 30
+        "x": 768,
+        "y": 0,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
+      }
+    },
+    {
+      "filename": "base10",
+      "frame": {
+        "x": 864,
+        "y": 0,
+        "w": 96,
+        "h": 64
+      },
+      "rotated": false,
+      "trimmed": false,
+      "spriteSourceSize": {
+        "x": 0,
+        "y": 0,
+        "w": 96,
+        "h": 64
+      },
+      "sourceSize": {
+        "w": 96,
+        "h": 64
       }
     },
     {
@@ -378,1138 +399,1285 @@
         "h": 0
       }
     },
+    {
+      "filename": "nohair10",
+      "frame": {
+        "x": 0,
+        "y": 0,
+        "w": 0,
+        "h": 0
+      },
+      "rotated": false,
+      "trimmed": false,
+      "spriteSourceSize": {
+        "x": 0,
+        "y": 0,
+        "w": 0,
+        "h": 0
+      },
+      "sourceSize": {
+        "w": 0,
+        "h": 0
+      }
+    },
     {
       "filename": "longhair1",
       "frame": {
-        "x": 33,
-        "y": 81,
-        "w": 30,
-        "h": 30
+        "x": 0,
+        "y": 64,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "longhair2",
       "frame": {
-        "x": 129,
-        "y": 81,
-        "w": 30,
-        "h": 30
+        "x": 96,
+        "y": 64,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "longhair3",
       "frame": {
-        "x": 225,
-        "y": 81,
-        "w": 30,
-        "h": 30
+        "x": 192,
+        "y": 64,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "longhair4",
       "frame": {
-        "x": 321,
-        "y": 81,
-        "w": 30,
-        "h": 30
+        "x": 288,
+        "y": 64,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "longhair5",
       "frame": {
-        "x": 417,
-        "y": 81,
-        "w": 30,
-        "h": 30
+        "x": 384,
+        "y": 64,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "longhair6",
       "frame": {
-        "x": 513,
-        "y": 81,
-        "w": 30,
-        "h": 30
+        "x": 480,
+        "y": 64,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "longhair7",
       "frame": {
-        "x": 609,
-        "y": 81,
-        "w": 30,
-        "h": 30
+        "x": 576,
+        "y": 64,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "longhair8",
       "frame": {
-        "x": 705,
-        "y": 81,
-        "w": 30,
-        "h": 30
+        "x": 672,
+        "y": 64,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "longhair9",
       "frame": {
-        "x": 801,
-        "y": 81,
-        "w": 30,
-        "h": 30
+        "x": 768,
+        "y": 64,
+        "w": 96,
+        "h": 64
+      },
+      "rotated": false,
+      "trimmed": false,
+      "spriteSourceSize": {
+        "x": 0,
+        "y": 0,
+        "w": 96,
+        "h": 64
+      },
+      "sourceSize": {
+        "w": 96,
+        "h": 64
+      }
+    },
+    {
+      "filename": "longhair10",
+      "frame": {
+        "x": 864,
+        "y": 64,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "mophair1",
       "frame": {
-        "x": 33,
-        "y": 145,
-        "w": 30,
-        "h": 30
+        "x": 0,
+        "y": 128,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "mophair2",
       "frame": {
-        "x": 129,
-        "y": 145,
-        "w": 30,
-        "h": 30
+        "x": 96,
+        "y": 128,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "mophair3",
       "frame": {
-        "x": 225,
-        "y": 145,
-        "w": 30,
-        "h": 30
+        "x": 192,
+        "y": 128,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "mophair4",
       "frame": {
-        "x": 321,
-        "y": 145,
-        "w": 30,
-        "h": 30
+        "x": 288,
+        "y": 128,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "mophair5",
       "frame": {
-        "x": 417,
-        "y": 145,
-        "w": 30,
-        "h": 30
+        "x": 384,
+        "y": 128,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "mophair6",
       "frame": {
-        "x": 513,
-        "y": 145,
-        "w": 30,
-        "h": 30
+        "x": 480,
+        "y": 128,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "mophair7",
       "frame": {
-        "x": 609,
-        "y": 145,
-        "w": 30,
-        "h": 30
+        "x": 576,
+        "y": 128,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "mophair8",
       "frame": {
-        "x": 705,
-        "y": 145,
-        "w": 30,
-        "h": 30
+        "x": 672,
+        "y": 128,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "mophair9",
       "frame": {
-        "x": 801,
-        "y": 145,
-        "w": 30,
-        "h": 30
+        "x": 768,
+        "y": 128,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
+      }
+    },
+    {
+      "filename": "mophair10",
+      "frame": {
+        "x": 864,
+        "y": 128,
+        "w": 96,
+        "h": 64
+      },
+      "rotated": false,
+      "trimmed": false,
+      "spriteSourceSize": {
+        "x": 0,
+        "y": 0,
+        "w": 96,
+        "h": 64
+      },
+      "sourceSize": {
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "shorthair1",
       "frame": {
-        "x": 33,
-        "y": 209,
-        "w": 30,
-        "h": 30
+        "x": 0,
+        "y": 192,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "shorthair2",
       "frame": {
-        "x": 129,
-        "y": 209,
-        "w": 30,
-        "h": 30
+        "x": 96,
+        "y": 192,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "shorthair3",
       "frame": {
-        "x": 225,
-        "y": 209,
-        "w": 30,
-        "h": 30
+        "x": 192,
+        "y": 192,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "shorthair4",
       "frame": {
-        "x": 321,
-        "y": 209,
-        "w": 30,
-        "h": 30
+        "x": 288,
+        "y": 192,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "shorthair5",
       "frame": {
-        "x": 417,
-        "y": 209,
-        "w": 30,
-        "h": 30
+        "x": 384,
+        "y": 192,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "shorthair6",
       "frame": {
-        "x": 513,
-        "y": 209,
-        "w": 30,
-        "h": 30
+        "x": 480,
+        "y": 192,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "shorthair7",
       "frame": {
-        "x": 609,
-        "y": 209,
-        "w": 30,
-        "h": 30
+        "x": 576,
+        "y": 192,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "shorthair8",
       "frame": {
-        "x": 705,
-        "y": 209,
-        "w": 30,
-        "h": 30
+        "x": 672,
+        "y": 192,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "shorthair9",
       "frame": {
-        "x": 801,
-        "y": 209,
-        "w": 30,
-        "h": 30
+        "x": 768,
+        "y": 192,
+        "w": 96,
+        "h": 64
+      },
+      "rotated": false,
+      "trimmed": false,
+      "spriteSourceSize": {
+        "x": 0,
+        "y": 0,
+        "w": 96,
+        "h": 64
+      },
+      "sourceSize": {
+        "w": 96,
+        "h": 64
+      }
+    },
+    {
+      "filename": "shorthair10",
+      "frame": {
+        "x": 864,
+        "y": 192,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "spikeyhair1",
       "frame": {
-        "x": 33,
-        "y": 273,
-        "w": 30,
-        "h": 30
+        "x": 0,
+        "y": 256,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "spikeyhair2",
       "frame": {
-        "x": 129,
-        "y": 273,
-        "w": 30,
-        "h": 30
+        "x": 96,
+        "y": 256,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "spikeyhair3",
       "frame": {
-        "x": 225,
-        "y": 273,
-        "w": 30,
-        "h": 30
+        "x": 192,
+        "y": 256,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "spikeyhair4",
       "frame": {
-        "x": 321,
-        "y": 273,
-        "w": 30,
-        "h": 30
+        "x": 288,
+        "y": 256,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "spikeyhair5",
       "frame": {
-        "x": 417,
-        "y": 273,
-        "w": 30,
-        "h": 30
+        "x": 384,
+        "y": 256,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "spikeyhair6",
       "frame": {
-        "x": 513,
-        "y": 273,
-        "w": 30,
-        "h": 30
+        "x": 480,
+        "y": 256,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "spikeyhair7",
       "frame": {
-        "x": 609,
-        "y": 273,
-        "w": 30,
-        "h": 30
+        "x": 576,
+        "y": 256,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "spikeyhair8",
       "frame": {
-        "x": 705,
-        "y": 273,
-        "w": 30,
-        "h": 30
+        "x": 672,
+        "y": 256,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "spikeyhair9",
       "frame": {
-        "x": 801,
-        "y": 273,
-        "w": 30,
-        "h": 30
+        "x": 768,
+        "y": 256,
+        "w": 96,
+        "h": 64
+      },
+      "rotated": false,
+      "trimmed": false,
+      "spriteSourceSize": {
+        "x": 0,
+        "y": 0,
+        "w": 96,
+        "h": 64
+      },
+      "sourceSize": {
+        "w": 96,
+        "h": 64
+      }
+    },
+    {
+      "filename": "spikeyhair10",
+      "frame": {
+        "x": 864,
+        "y": 256,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "bowlhair1",
       "frame": {
-        "x": 33,
-        "y": 337,
-        "w": 30,
-        "h": 30
+        "x": 0,
+        "y": 320,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "bowlhair2",
       "frame": {
-        "x": 129,
-        "y": 337,
-        "w": 30,
-        "h": 30
+        "x": 96,
+        "y": 320,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "bowlhair3",
       "frame": {
-        "x": 225,
-        "y": 337,
-        "w": 30,
-        "h": 30
+        "x": 192,
+        "y": 320,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "bowlhair4",
       "frame": {
-        "x": 321,
-        "y": 337,
-        "w": 30,
-        "h": 30
+        "x": 288,
+        "y": 320,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "bowlhair5",
       "frame": {
-        "x": 417,
-        "y": 337,
-        "w": 30,
-        "h": 30
+        "x": 384,
+        "y": 320,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "bowlhair6",
       "frame": {
-        "x": 513,
-        "y": 337,
-        "w": 30,
-        "h": 30
+        "x": 480,
+        "y": 320,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "bowlhair7",
       "frame": {
-        "x": 609,
-        "y": 337,
-        "w": 30,
-        "h": 30
+        "x": 576,
+        "y": 320,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "bowlhair8",
       "frame": {
-        "x": 705,
-        "y": 337,
-        "w": 30,
-        "h": 30
+        "x": 672,
+        "y": 320,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "bowlhair9",
       "frame": {
-        "x": 801,
-        "y": 337,
-        "w": 30,
-        "h": 30
+        "x": 768,
+        "y": 320,
+        "w": 96,
+        "h": 64
+      },
+      "rotated": false,
+      "trimmed": false,
+      "spriteSourceSize": {
+        "x": 0,
+        "y": 0,
+        "w": 96,
+        "h": 64
+      },
+      "sourceSize": {
+        "w": 96,
+        "h": 64
+      }
+    },
+    {
+      "filename": "bowlhair10",
+      "frame": {
+        "x": 864,
+        "y": 320,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "curlyhair1",
       "frame": {
-        "x": 33,
-        "y": 401,
-        "w": 30,
-        "h": 30
+        "x": 0,
+        "y": 384,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "curlyhair2",
       "frame": {
-        "x": 129,
-        "y": 401,
-        "w": 30,
-        "h": 30
+        "x": 96,
+        "y": 384,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "curlyhair3",
       "frame": {
-        "x": 225,
-        "y": 401,
-        "w": 30,
-        "h": 30
+        "x": 192,
+        "y": 384,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "curlyhair4",
       "frame": {
-        "x": 321,
-        "y": 401,
-        "w": 30,
-        "h": 30
+        "x": 288,
+        "y": 384,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "curlyhair5",
       "frame": {
-        "x": 417,
-        "y": 401,
-        "w": 30,
-        "h": 30
+        "x": 384,
+        "y": 384,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "curlyhair6",
       "frame": {
-        "x": 513,
-        "y": 401,
-        "w": 30,
-        "h": 30
+        "x": 480,
+        "y": 384,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "curlyhair7",
       "frame": {
-        "x": 609,
-        "y": 401,
-        "w": 30,
-        "h": 30
+        "x": 576,
+        "y": 384,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "curlyhair8",
       "frame": {
-        "x": 705,
-        "y": 401,
-        "w": 30,
-        "h": 30
+        "x": 672,
+        "y": 384,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     },
     {
       "filename": "curlyhair9",
       "frame": {
-        "x": 801,
-        "y": 401,
-        "w": 30,
-        "h": 30
+        "x": 768,
+        "y": 384,
+        "w": 96,
+        "h": 64
+      },
+      "rotated": false,
+      "trimmed": false,
+      "spriteSourceSize": {
+        "x": 0,
+        "y": 0,
+        "w": 96,
+        "h": 64
+      },
+      "sourceSize": {
+        "w": 96,
+        "h": 64
+      }
+    },
+    {
+      "filename": "curlyhair10",
+      "frame": {
+        "x": 864,
+        "y": 384,
+        "w": 96,
+        "h": 64
       },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {
         "x": 0,
         "y": 0,
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       },
       "sourceSize": {
-        "w": 30,
-        "h": 30
+        "w": 96,
+        "h": 64
       }
     }
   ],
diff --git a/frontend/src/assets/character/tool/attack.png b/frontend/src/assets/character/tool/attack.png
new file mode 100644
index 0000000..4a4b33b
Binary files /dev/null and b/frontend/src/assets/character/tool/attack.png differ
diff --git a/frontend/src/assets/icon/checkBox.svg b/frontend/src/assets/icon/checkBox.svg
new file mode 100644
index 0000000..f1680bd
--- /dev/null
+++ b/frontend/src/assets/icon/checkBox.svg
@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.5312 21.875H2.34375C1.04932 21.875 0 20.8257 0 19.5312V2.34375C0 1.04932 1.04932 0 2.34375 0H19.5312C20.8257 0 21.875 1.04932 21.875 2.34375V19.5312C21.875 20.8257 20.8257 21.875 19.5312 21.875ZM9.53682 17.087L18.5212 8.10259C18.8263 7.79751 18.8263 7.30283 18.5212 6.99775L17.4164 5.89292C17.1113 5.58784 16.6166 5.58779 16.3115 5.89292L8.98438 13.22L5.56353 9.79912C5.25845 9.49404 4.76377 9.49404 4.45864 9.79912L3.35381 10.904C3.04873 11.209 3.04873 11.7037 3.35381 12.0088L8.43193 17.0869C8.73706 17.3921 9.23169 17.3921 9.53682 17.087V17.087Z" fill="black"/>
+</svg>
diff --git a/frontend/src/assets/icon/close.svg b/frontend/src/assets/icon/close.svg
new file mode 100644
index 0000000..330e579
--- /dev/null
+++ b/frontend/src/assets/icon/close.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.2524 8.80078L17.1387 3.91455C17.7383 3.31494 17.7383 2.34277 17.1387 1.74268L16.0527 0.656738C15.4531 0.0571289 14.481 0.0571289 13.8809 0.656738L8.99463 5.54297L4.1084 0.656738C3.50879 0.0571289 2.53662 0.0571289 1.93652 0.656738L0.850586 1.74268C0.250977 2.34228 0.250977 3.31445 0.850586 3.91455L5.73682 8.80078L0.850586 13.687C0.250977 14.2866 0.250977 15.2588 0.850586 15.8589L1.93652 16.9448C2.53613 17.5444 3.50879 17.5444 4.1084 16.9448L8.99463 12.0586L13.8809 16.9448C14.4805 17.5444 15.4531 17.5444 16.0527 16.9448L17.1387 15.8589C17.7383 15.2593 17.7383 14.2871 17.1387 13.687L12.2524 8.80078Z" fill="black"/>
+</svg>
diff --git a/frontend/src/assets/icon/help.svg b/frontend/src/assets/icon/help.svg
new file mode 100644
index 0000000..fe02260
--- /dev/null
+++ b/frontend/src/assets/icon/help.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="26" viewBox="0 0 18 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.17634 0.19437C5.27992 0.106431 2.72016 1.64589 0.674528 4.44825C0.303442 4.95661 0.398272 5.66723 0.891078 6.05873L2.96085 7.70296C3.45855 8.09833 4.18105 8.02482 4.58869 7.53711C5.84605 6.03282 6.773 5.17129 8.68301 5.2144C10.1848 5.24829 12.0205 6.25672 11.9876 7.71299C11.9628 8.81388 11.0412 9.35875 9.53964 10.1566C7.78856 11.0871 5.47304 12.242 5.40493 15.2602L5.39414 15.738C5.37954 16.385 5.89223 16.9214 6.53928 16.936L10.077 17.0158C10.7241 17.0305 11.2604 16.5178 11.275 15.8707L11.2814 15.5889C11.3286 13.4967 17.4456 13.5475 17.5734 7.88579C17.6697 3.62204 13.3199 0.287885 9.17634 0.19437ZM8.27571 18.414C6.41114 18.3719 4.85996 19.8546 4.81788 21.7192C4.7758 23.5837 6.25851 25.1349 8.12307 25.177C9.98764 25.219 11.5388 23.7363 11.5809 21.8718C11.623 20.0072 10.1403 18.4561 8.27571 18.414Z" fill="white"/>
+</svg>
diff --git a/frontend/src/assets/icon/keyboardA.svg b/frontend/src/assets/icon/keyboardA.svg
new file mode 100644
index 0000000..d216176
--- /dev/null
+++ b/frontend/src/assets/icon/keyboardA.svg
@@ -0,0 +1,5 @@
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1.5" y="1.5" width="77" height="77" rx="13.5" stroke="black" stroke-width="3"/>
+<path d="M25 8.5H55C62.4558 8.5 68.5 14.5442 68.5 22V52C68.5 59.4558 62.4558 65.5 55 65.5H25C17.5442 65.5 11.5 59.4558 11.5 52V22C11.5 14.5442 17.5442 8.5 25 8.5Z" stroke="black" stroke-width="3"/>
+<path d="M28.7141 37H24.5948L30.8714 18.8182H35.8253L42.093 37H37.9737L33.4194 22.973H33.2773L28.7141 37ZM28.4567 29.8533H38.1868V32.854H28.4567V29.8533Z" fill="black"/>
+</svg>
diff --git a/frontend/src/assets/icon/keyboardArrow.svg b/frontend/src/assets/icon/keyboardArrow.svg
new file mode 100644
index 0000000..8c3816f
--- /dev/null
+++ b/frontend/src/assets/icon/keyboardArrow.svg
@@ -0,0 +1,14 @@
+<svg width="254" height="167" viewBox="0 0 254 167" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="88.5" y="88.5" width="77" height="77" rx="13.5" stroke="black" stroke-width="3"/>
+<path d="M112 95.5H142C149.456 95.5 155.5 101.544 155.5 109V139C155.5 146.456 149.456 152.5 142 152.5H112C104.544 152.5 98.5 146.456 98.5 139V109C98.5 101.544 104.544 95.5 112 95.5Z" stroke="black" stroke-width="3"/>
+<path d="M124.432 105.818V118.505L129.164 113.755L131.241 115.815L122.932 124.107L114.64 115.815L116.682 113.755L121.431 118.505V105.818H124.432Z" fill="black"/>
+<rect x="88.5" y="1.5" width="77" height="77" rx="13.5" stroke="black" stroke-width="3"/>
+<path d="M112 8.5H142C149.456 8.5 155.5 14.5442 155.5 22V52C155.5 59.4558 149.456 65.5 142 65.5H112C104.544 65.5 98.5 59.4558 98.5 52V22C98.5 14.5442 104.544 8.5 112 8.5Z" stroke="black" stroke-width="3"/>
+<path d="M121.431 37V24.3136L116.7 29.0632L114.622 27.0036L122.932 18.7116L131.224 27.0036L129.182 29.0632L124.432 24.3136V37H121.431Z" fill="black"/>
+<rect x="1.5" y="88.5" width="77" height="77" rx="13.5" stroke="black" stroke-width="3"/>
+<path d="M25 95.5H55C62.4558 95.5 68.5 101.544 68.5 109V139C68.5 146.456 62.4558 152.5 55 152.5H25C17.5442 152.5 11.5 146.456 11.5 139V109C11.5 101.544 17.5442 95.5 25 95.5Z" stroke="black" stroke-width="3"/>
+<path d="M35.4169 124.994L26.468 116.045L35.4169 107.097L37.4766 109.138L32.07 114.545H44.7386V117.546H32.07L37.4766 122.944L35.4169 124.994Z" fill="black"/>
+<rect x="175.5" y="88.5" width="77" height="77" rx="13.5" stroke="black" stroke-width="3"/>
+<path d="M199 95.5H229C236.456 95.5 242.5 101.544 242.5 109V139C242.5 146.456 236.456 152.5 229 152.5H199C191.544 152.5 185.5 146.456 185.5 139V109C185.5 101.544 191.544 95.5 199 95.5Z" stroke="black" stroke-width="3"/>
+<path d="M210.447 124.994L208.387 122.952L213.794 117.546H201.125V114.545H213.794L208.387 109.147L210.447 107.097L219.396 116.045L210.447 124.994Z" fill="black"/>
+</svg>
diff --git a/frontend/src/assets/icon/keyboardR.svg b/frontend/src/assets/icon/keyboardR.svg
new file mode 100644
index 0000000..c40bbf0
--- /dev/null
+++ b/frontend/src/assets/icon/keyboardR.svg
@@ -0,0 +1,5 @@
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1.5" y="1.5" width="77" height="77" rx="13.5" stroke="black" stroke-width="3"/>
+<path d="M25 8.5H55C62.4558 8.5 68.5 14.5442 68.5 22V52C68.5 59.4558 62.4558 65.5 55 65.5H25C17.5442 65.5 11.5 59.4558 11.5 52V22C11.5 14.5442 17.5442 8.5 25 8.5Z" stroke="black" stroke-width="3"/>
+<path d="M25.5803 37V18.8182H32.7536C34.1267 18.8182 35.2985 19.0638 36.2692 19.555C37.2457 20.0404 37.9885 20.7299 38.4975 21.6236C39.0124 22.5114 39.2699 23.556 39.2699 24.7575C39.2699 25.9648 39.0095 27.0036 38.4886 27.8736C37.9678 28.7377 37.2132 29.4006 36.2248 29.8622C35.2423 30.3239 34.0527 30.5547 32.6559 30.5547H27.853V27.4652H32.0344C32.7683 27.4652 33.378 27.3646 33.8633 27.1634C34.3486 26.9621 34.7096 26.6603 34.9464 26.2578C35.189 25.8554 35.3104 25.3552 35.3104 24.7575C35.3104 24.1538 35.189 23.6448 34.9464 23.2305C34.7096 22.8162 34.3456 22.5025 33.8544 22.2894C33.3691 22.0704 32.7565 21.9609 32.0167 21.9609H29.4244V37H25.5803ZM35.3991 28.7259L39.918 37H35.6744L31.2532 28.7259H35.3991Z" fill="black"/>
+</svg>
diff --git a/frontend/src/assets/icon/keyboardShift.svg b/frontend/src/assets/icon/keyboardShift.svg
new file mode 100644
index 0000000..559eea6
--- /dev/null
+++ b/frontend/src/assets/icon/keyboardShift.svg
@@ -0,0 +1,5 @@
+<svg width="140" height="80" viewBox="0 0 140 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1.5" y="1.5" width="137" height="77" rx="13.5" stroke="black" stroke-width="3"/>
+<path d="M25 8.5H115C122.456 8.5 128.5 14.5442 128.5 22V52C128.5 59.4558 122.456 65.5 115 65.5H25C17.5442 65.5 11.5 59.4558 11.5 52V22C11.5 14.5442 17.5442 8.5 25 8.5Z" stroke="black" stroke-width="3"/>
+<path d="M36.8551 27.2521L33.3928 27.4652C33.3336 27.1693 33.2063 26.9029 33.011 26.6662C32.8157 26.4235 32.5582 26.2312 32.2386 26.0891C31.925 25.9412 31.5491 25.8672 31.1112 25.8672C30.5252 25.8672 30.031 25.9915 29.6286 26.2401C29.2261 26.4827 29.0249 26.8082 29.0249 27.2166C29.0249 27.5421 29.1551 27.8174 29.4155 28.0423C29.6759 28.2672 30.1228 28.4477 30.756 28.5838L33.2241 29.081C34.5498 29.3532 35.5382 29.7912 36.1893 30.3949C36.8403 30.9986 37.1658 31.7917 37.1658 32.7741C37.1658 33.6679 36.9025 34.4521 36.3757 35.1268C35.8549 35.8015 35.1387 36.3282 34.2273 36.707C33.3217 37.0799 32.2771 37.2663 31.0934 37.2663C29.2882 37.2663 27.85 36.8905 26.7788 36.1388C25.7134 35.3813 25.089 34.3514 24.9055 33.0494L28.6254 32.854C28.7378 33.4045 29.0101 33.8247 29.4421 34.1147C29.8742 34.3988 30.4276 34.5408 31.1023 34.5408C31.7652 34.5408 32.2978 34.4136 32.7003 34.1591C33.1087 33.8987 33.3158 33.5643 33.3217 33.1559C33.3158 32.8126 33.1708 32.5315 32.8867 32.3125C32.6026 32.0876 32.1647 31.916 31.5728 31.7976L29.2113 31.3271C27.8796 31.0607 26.8883 30.5991 26.2372 29.9421C25.5921 29.2852 25.2695 28.4477 25.2695 27.4297C25.2695 26.5537 25.5063 25.7991 25.9798 25.1658C26.4592 24.5326 27.1309 24.0443 27.995 23.701C28.8651 23.3577 29.883 23.1861 31.049 23.1861C32.7713 23.1861 34.1267 23.5501 35.1151 24.2781C36.1094 25.006 36.6894 25.9974 36.8551 27.2521ZM43.3293 29.1165V37H39.5473V18.8182H43.2227V25.7695H43.3825C43.6903 24.9646 44.1875 24.3343 44.874 23.8786C45.5606 23.4169 46.4217 23.1861 47.4575 23.1861C48.4044 23.1861 49.2301 23.3932 49.9344 23.8075C50.6446 24.2159 51.195 24.8048 51.5857 25.5742C51.9822 26.3377 52.1775 27.2521 52.1716 28.3175V37H48.3896V28.9922C48.3956 28.1518 48.1825 27.4978 47.7504 27.0302C47.3243 26.5626 46.7265 26.3288 45.9571 26.3288C45.4422 26.3288 44.9865 26.4383 44.5899 26.6573C44.1993 26.8763 43.8915 27.1959 43.6666 27.6161C43.4477 28.0304 43.3352 28.5305 43.3293 29.1165ZM55.1479 37V23.3636H58.9299V37H55.1479ZM57.0478 21.6058C56.4855 21.6058 56.0031 21.4194 55.6007 21.0465C55.2041 20.6677 55.0059 20.215 55.0059 19.6882C55.0059 19.1674 55.2041 18.7205 55.6007 18.3477C56.0031 17.9689 56.4855 17.7795 57.0478 17.7795C57.61 17.7795 58.0894 17.9689 58.486 18.3477C58.8884 18.7205 59.0897 19.1674 59.0897 19.6882C59.0897 20.215 58.8884 20.6677 58.486 21.0465C58.0894 21.4194 57.61 21.6058 57.0478 21.6058ZM69.2925 23.3636V26.2045H60.8763V23.3636H69.2925ZM62.8028 37V22.3782C62.8028 21.3898 62.9952 20.5701 63.3799 19.919C63.7705 19.268 64.3032 18.7797 64.9779 18.4542C65.6526 18.1287 66.4191 17.9659 67.2773 17.9659C67.8573 17.9659 68.387 18.0103 68.8664 18.0991C69.3517 18.1879 69.7127 18.2678 69.9495 18.3388L69.2748 21.1797C69.1268 21.1323 68.9433 21.0879 68.7243 21.0465C68.5113 21.0051 68.2923 20.9844 68.0674 20.9844C67.511 20.9844 67.1234 21.1146 66.9044 21.375C66.6854 21.6295 66.5759 21.9876 66.5759 22.4492V37H62.8028ZM78.8562 23.3636V26.2045H70.6442V23.3636H78.8562ZM72.5085 20.0966H76.2905V32.8097C76.2905 33.1589 76.3438 33.4311 76.4503 33.6264C76.5568 33.8158 76.7048 33.949 76.8942 34.0259C77.0895 34.1029 77.3144 34.1413 77.5689 34.1413C77.7464 34.1413 77.924 34.1265 78.1016 34.0969C78.2791 34.0614 78.4152 34.0348 78.5099 34.017L79.1048 36.8313C78.9154 36.8905 78.649 36.9586 78.3058 37.0355C77.9625 37.1184 77.5452 37.1687 77.054 37.1864C76.1425 37.2219 75.3435 37.1006 74.657 36.8224C73.9763 36.5443 73.4466 36.1122 73.0678 35.5263C72.689 34.9403 72.5026 34.2005 72.5085 33.3068V20.0966Z" fill="black"/>
+</svg>
diff --git a/frontend/src/assets/icon/keyboardSpace.svg b/frontend/src/assets/icon/keyboardSpace.svg
new file mode 100644
index 0000000..4e5e337
--- /dev/null
+++ b/frontend/src/assets/icon/keyboardSpace.svg
@@ -0,0 +1,5 @@
+<svg width="200" height="80" viewBox="0 0 200 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1.5" y="1.5" width="197" height="77" rx="13.5" stroke="black" stroke-width="3"/>
+<path d="M25 8.5H175C182.456 8.5 188.5 14.5442 188.5 22V52C188.5 59.4558 182.456 65.5 175 65.5H25C17.5442 65.5 11.5 59.4558 11.5 52V22C11.5 14.5442 17.5442 8.5 25 8.5Z" stroke="black" stroke-width="3"/>
+<path d="M74.8551 34.2521L71.3928 34.4652C71.3336 34.1693 71.2063 33.9029 71.011 33.6662C70.8157 33.4235 70.5582 33.2312 70.2386 33.0891C69.925 32.9412 69.5491 32.8672 69.1112 32.8672C68.5252 32.8672 68.031 32.9915 67.6286 33.2401C67.2261 33.4827 67.0249 33.8082 67.0249 34.2166C67.0249 34.5421 67.1551 34.8174 67.4155 35.0423C67.6759 35.2672 68.1228 35.4477 68.756 35.5838L71.2241 36.081C72.5498 36.3532 73.5382 36.7912 74.1893 37.3949C74.8403 37.9986 75.1658 38.7917 75.1658 39.7741C75.1658 40.6679 74.9025 41.4521 74.3757 42.1268C73.8549 42.8015 73.1387 43.3282 72.2273 43.707C71.3217 44.0799 70.2771 44.2663 69.0934 44.2663C67.2882 44.2663 65.85 43.8905 64.7788 43.1388C63.7134 42.3813 63.089 41.3514 62.9055 40.0494L66.6254 39.854C66.7378 40.4045 67.0101 40.8247 67.4421 41.1147C67.8742 41.3988 68.4276 41.5408 69.1023 41.5408C69.7652 41.5408 70.2978 41.4136 70.7003 41.1591C71.1087 40.8987 71.3158 40.5643 71.3217 40.1559C71.3158 39.8126 71.1708 39.5315 70.8867 39.3125C70.6026 39.0876 70.1647 38.916 69.5728 38.7976L67.2113 38.3271C65.8796 38.0607 64.8883 37.5991 64.2372 36.9421C63.5921 36.2852 63.2695 35.4477 63.2695 34.4297C63.2695 33.5537 63.5063 32.7991 63.9798 32.1658C64.4592 31.5326 65.1309 31.0443 65.995 30.701C66.8651 30.3577 67.883 30.1861 69.049 30.1861C70.7713 30.1861 72.1267 30.5501 73.1151 31.2781C74.1094 32.006 74.6894 32.9974 74.8551 34.2521ZM77.5473 49.1136V30.3636H81.276V32.6541H81.4447C81.6104 32.2872 81.8501 31.9143 82.1638 31.5355C82.4834 31.1508 82.8977 30.8312 83.4067 30.5767C83.9216 30.3163 84.5608 30.1861 85.3243 30.1861C86.3186 30.1861 87.236 30.4465 88.0764 30.9673C88.9169 31.4822 89.5886 32.2605 90.0917 33.3022C90.5948 34.3379 90.8463 35.6371 90.8463 37.1996C90.8463 38.7206 90.6007 40.005 90.1095 41.0526C89.6241 42.0942 88.9613 42.8844 88.1208 43.4229C87.2863 43.9556 86.3512 44.2219 85.3154 44.2219C84.5815 44.2219 83.9571 44.1006 83.4422 43.858C82.9332 43.6153 82.516 43.3105 82.1904 42.9435C81.8649 42.5707 81.6163 42.1948 81.4447 41.8161H81.3293V49.1136H77.5473ZM81.2494 37.1818C81.2494 37.9927 81.3618 38.6999 81.5867 39.3036C81.8116 39.9073 82.1372 40.3778 82.5633 40.7152C82.9894 41.0466 83.5073 41.2124 84.1169 41.2124C84.7325 41.2124 85.2533 41.0437 85.6794 40.7063C86.1056 40.363 86.4281 39.8896 86.6471 39.2859C86.872 38.6763 86.9845 37.9749 86.9845 37.1818C86.9845 36.3946 86.875 35.7022 86.656 35.1044C86.437 34.5066 86.1144 34.0391 85.6883 33.7017C85.2622 33.3643 84.7384 33.1957 84.1169 33.1957C83.5014 33.1957 82.9806 33.3584 82.5544 33.6839C82.1342 34.0095 81.8116 34.4711 81.5867 35.0689C81.3618 35.6667 81.2494 36.371 81.2494 37.1818ZM97.2561 44.2575C96.3861 44.2575 95.6108 44.1065 94.9301 43.8047C94.2495 43.4969 93.7109 43.0442 93.3144 42.4464C92.9237 41.8427 92.7284 41.091 92.7284 40.1914C92.7284 39.4338 92.8675 38.7976 93.1457 38.2827C93.4239 37.7678 93.8026 37.3535 94.282 37.0398C94.7615 36.7261 95.306 36.4893 95.9156 36.3295C96.5311 36.1697 97.1762 36.0573 97.8509 35.9922C98.644 35.9093 99.2832 35.8324 99.7686 35.7614C100.254 35.6844 100.606 35.572 100.825 35.424C101.044 35.276 101.153 35.0571 101.153 34.767V34.7138C101.153 34.1515 100.976 33.7165 100.621 33.4087C100.272 33.101 99.7745 32.9471 99.1294 32.9471C98.4487 32.9471 97.9072 33.098 97.5047 33.3999C97.1022 33.6958 96.8359 34.0687 96.7057 34.5185L93.2078 34.2344C93.3854 33.4058 93.7346 32.6896 94.2554 32.0859C94.7762 31.4763 95.448 31.0088 96.2707 30.6832C97.0993 30.3518 98.0581 30.1861 99.1471 30.1861C99.9047 30.1861 100.63 30.2749 101.322 30.4524C102.021 30.63 102.639 30.9052 103.178 31.2781C103.722 31.6509 104.151 32.1303 104.465 32.7163C104.779 33.2963 104.935 33.9917 104.935 34.8026V44H101.349V42.109H101.242C101.023 42.5352 100.73 42.911 100.363 43.2365C99.9964 43.5561 99.5555 43.8076 99.0406 43.9911C98.5257 44.1687 97.9308 44.2575 97.2561 44.2575ZM98.3392 41.6474C98.8956 41.6474 99.3868 41.5379 99.8129 41.3189C100.239 41.094 100.573 40.7921 100.816 40.4134C101.059 40.0346 101.18 39.6055 101.18 39.1261V37.679C101.062 37.7559 100.899 37.8269 100.692 37.892C100.491 37.9512 100.263 38.0075 100.008 38.0607C99.7538 38.1081 99.4993 38.1525 99.2448 38.1939C98.9903 38.2294 98.7594 38.262 98.5523 38.2915C98.1084 38.3567 97.7207 38.4602 97.3893 38.6023C97.0579 38.7443 96.8004 38.9367 96.6169 39.1793C96.4334 39.4161 96.3417 39.712 96.3417 40.0671C96.3417 40.582 96.5281 40.9756 96.901 41.2479C97.2798 41.5142 97.7592 41.6474 98.3392 41.6474ZM114.031 44.2663C112.634 44.2663 111.433 43.9704 110.426 43.3786C109.426 42.7808 108.657 41.9522 108.118 40.8928C107.585 39.8333 107.319 38.6141 107.319 37.2351C107.319 35.8383 107.588 34.6132 108.127 33.5597C108.672 32.5002 109.444 31.6746 110.444 31.0827C111.444 30.485 112.634 30.1861 114.013 30.1861C115.203 30.1861 116.244 30.4021 117.138 30.8342C118.032 31.2662 118.739 31.8729 119.26 32.6541C119.781 33.4354 120.068 34.3527 120.121 35.4062H116.552C116.451 34.7256 116.185 34.1781 115.753 33.7638C115.327 33.3436 114.768 33.1335 114.075 33.1335C113.489 33.1335 112.977 33.2933 112.539 33.6129C112.107 33.9266 111.77 34.3853 111.527 34.989C111.285 35.5927 111.163 36.3236 111.163 37.1818C111.163 38.0518 111.282 38.7917 111.518 39.4013C111.761 40.0109 112.101 40.4755 112.539 40.7951C112.977 41.1147 113.489 41.2745 114.075 41.2745C114.507 41.2745 114.895 41.1857 115.238 41.0082C115.587 40.8306 115.874 40.5732 116.099 40.2358C116.33 39.8925 116.481 39.4812 116.552 39.0018H120.121C120.062 40.0434 119.778 40.9608 119.269 41.7539C118.766 42.5411 118.07 43.1566 117.182 43.6005C116.295 44.0444 115.244 44.2663 114.031 44.2663ZM128.757 44.2663C127.354 44.2663 126.147 43.9822 125.135 43.4141C124.129 42.84 123.353 42.0291 122.809 40.9815C122.264 39.928 121.992 38.6822 121.992 37.244C121.992 35.8413 122.264 34.6102 122.809 33.5508C123.353 32.4914 124.12 31.6657 125.108 31.0739C126.102 30.482 127.268 30.1861 128.606 30.1861C129.506 30.1861 130.343 30.3311 131.118 30.6211C131.9 30.9052 132.58 31.3343 133.16 31.9084C133.746 32.4825 134.202 33.2045 134.528 34.0746C134.853 34.9387 135.016 35.9508 135.016 37.1108V38.1495H123.501V35.8058H131.456C131.456 35.2612 131.337 34.7789 131.101 34.3587C130.864 33.9384 130.535 33.61 130.115 33.3732C129.701 33.1306 129.219 33.0092 128.668 33.0092C128.094 33.0092 127.585 33.1424 127.141 33.4087C126.703 33.6692 126.36 34.0213 126.111 34.4652C125.863 34.9032 125.735 35.3915 125.73 35.93V38.1584C125.73 38.8331 125.854 39.4161 126.102 39.9073C126.357 40.3986 126.715 40.7773 127.177 41.0437C127.638 41.31 128.186 41.4432 128.819 41.4432C129.239 41.4432 129.624 41.384 129.973 41.2656C130.322 41.1473 130.621 40.9697 130.87 40.733C131.118 40.4962 131.308 40.2062 131.438 39.8629L134.936 40.0938C134.758 40.9342 134.394 41.6681 133.844 42.2955C133.299 42.9169 132.595 43.4022 131.731 43.7514C130.873 44.0947 129.881 44.2663 128.757 44.2663Z" fill="black"/>
+</svg>
diff --git a/frontend/src/assets/info-boardAndRank.png b/frontend/src/assets/info-boardAndRank.png
new file mode 100644
index 0000000..234cfae
Binary files /dev/null and b/frontend/src/assets/info-boardAndRank.png differ
diff --git a/frontend/src/assets/info-chat.png b/frontend/src/assets/info-chat.png
new file mode 100644
index 0000000..6147a1f
Binary files /dev/null and b/frontend/src/assets/info-chat.png differ
diff --git a/frontend/src/assets/info-friends.png b/frontend/src/assets/info-friends.png
new file mode 100644
index 0000000..a322402
Binary files /dev/null and b/frontend/src/assets/info-friends.png differ
diff --git a/frontend/src/assets/info-mypage.png b/frontend/src/assets/info-mypage.png
new file mode 100644
index 0000000..12d41ef
Binary files /dev/null and b/frontend/src/assets/info-mypage.png differ
diff --git a/frontend/src/assets/info-setting.png b/frontend/src/assets/info-setting.png
new file mode 100644
index 0000000..2987ae2
Binary files /dev/null and b/frontend/src/assets/info-setting.png differ
diff --git a/frontend/src/assets/info-walkAndUser.png b/frontend/src/assets/info-walkAndUser.png
new file mode 100644
index 0000000..8331bce
Binary files /dev/null and b/frontend/src/assets/info-walkAndUser.png differ
diff --git a/frontend/src/assets/sidebarImg.png b/frontend/src/assets/sidebarImg.png
new file mode 100644
index 0000000..fe2115e
Binary files /dev/null and b/frontend/src/assets/sidebarImg.png differ
diff --git a/frontend/src/component/Game/Phaser/Player/myPlayer.ts b/frontend/src/component/Game/Phaser/Player/myPlayer.ts
index 8e8d2b0..161248e 100644
--- a/frontend/src/component/Game/Phaser/Player/myPlayer.ts
+++ b/frontend/src/component/Game/Phaser/Player/myPlayer.ts
@@ -29,9 +29,12 @@ export class MyPlayer extends Player {
     }
   }
 
-  checkAndSetState(state: string, time: number = 0) {
+  checkAndSetState(state: string, time: number = 0, isAttack: boolean) {
     if (this.isChangeState) this.state = state;
-
+    if (isAttack) {
+      this.isAttack = true;
+      setTimeout(() => (this.isAttack = false), time);
+    }
     if (time) {
       this.isChangeState = false;
       setTimeout(() => (this.isChangeState = true), time);
@@ -45,47 +48,55 @@ export class MyPlayer extends Player {
       this.state = 'wait';
       this.scene.input.keyboard.removeAllKeys(true);
     } else {
-      const cursors = this.scene.input.keyboard.createCursorKeys();
-      const keyR = this.scene.input.keyboard.addKey(
-        Phaser.Input.Keyboard.KeyCodes.R
-      );
-      const keyShift = this.scene.input.keyboard.addKey(
-        Phaser.Input.Keyboard.KeyCodes.SHIFT
-      );
-      const keySpace = this.scene.input.keyboard.addKey(
-        Phaser.Input.Keyboard.KeyCodes.SPACE
-      );
+      if (!this.isAttack) {
+        const cursors = this.scene.input.keyboard.createCursorKeys();
+        const keyR = this.scene.input.keyboard.addKey(
+          Phaser.Input.Keyboard.KeyCodes.R
+        );
+        const keyA = this.scene.input.keyboard.addKey(
+          Phaser.Input.Keyboard.KeyCodes.A
+        );
+        const keyShift = this.scene.input.keyboard.addKey(
+          Phaser.Input.Keyboard.KeyCodes.SHIFT
+        );
+        const keySpace = this.scene.input.keyboard.addKey(
+          Phaser.Input.Keyboard.KeyCodes.SPACE
+        );
 
-      // motion
-      if (keyR.isDown) {
-        this.speed = 1.5;
-        this.checkAndSetState('roll', 100);
-      } else if (keyShift.isDown) {
-        this.speed = 1.2;
-        this.checkAndSetState('run');
-      } else if (keySpace.isDown) {
-        this.speed = 1;
-        this.checkAndSetState('jump', 500);
-      } else {
-        this.speed = 1;
-        this.checkAndSetState('walk');
-      }
+        // motion
+        if (keyR.isDown) {
+          this.speed = 1.5;
+          this.checkAndSetState('roll', 100, false);
+        } else if (keyA.isDown) {
+          this.speed = 1;
+          this.checkAndSetState('attack', 800, true);
+        } else if (keyShift.isDown) {
+          this.speed = 1.2;
+          this.checkAndSetState('run', 0, false);
+        } else if (keySpace.isDown) {
+          this.speed = 1;
+          this.checkAndSetState('jump', 500, false);
+        } else {
+          this.speed = 1;
+          this.checkAndSetState('walk', 0, false);
+        }
 
-      this.getBody().setVelocity(0, 0);
+        this.getBody().setVelocity(0, 0);
 
-      sortHeldDirection(this, cursors);
-      if (this.heldDirection.length) {
-        const move: any = calcMoveToPos(this, this.heldDirection);
-        this.getBody().setVelocity(move.x * this.speed, move.y * this.speed);
+        sortHeldDirection(this, cursors);
+        if (this.heldDirection.length) {
+          const move: any = calcMoveToPos(this, this.heldDirection);
+          this.getBody().setVelocity(move.x * this.speed, move.y * this.speed);
 
-        if (move.x !== 0) {
-          const direction = move.x > 0 ? 'right' : 'left';
-          changeDirection(this, direction);
-        }
+          if (move.x !== 0) {
+            const direction = move.x > 0 ? 'right' : 'left';
+            changeDirection(this, direction);
+          }
 
-        changePosition(this, move.x * this.speed, move.y * this.speed);
-      } else {
-        this.checkAndSetState('wait');
+          changePosition(this, move.x * this.speed, move.y * this.speed);
+        } else {
+          this.checkAndSetState('wait', 0, false);
+        }
       }
     }
 
diff --git a/frontend/src/component/Game/Phaser/Player/player.ts b/frontend/src/component/Game/Phaser/Player/player.ts
index daebb60..bbf8163 100644
--- a/frontend/src/component/Game/Phaser/Player/player.ts
+++ b/frontend/src/component/Game/Phaser/Player/player.ts
@@ -4,10 +4,12 @@ export class Player extends Phaser.Physics.Arcade.Sprite {
   character: Phaser.GameObjects.Sprite | undefined;
   hair: Phaser.GameObjects.Sprite | undefined;
   dust: Phaser.GameObjects.Sprite | undefined;
+  tool: Phaser.GameObjects.Sprite | undefined;
   nicknameText: Phaser.GameObjects.Text | undefined;
   direction: string;
   isChangeState: boolean;
   isCanMove: boolean;
+  isAttack: boolean;
   state: string;
   x: number;
   y: number;
@@ -37,6 +39,7 @@ export class Player extends Phaser.Physics.Arcade.Sprite {
     this.heldDirection = [];
     this.id = id;
     this.isCanMove = true;
+    this.isAttack = false;
 
     this.character = this.scene.add.sprite(this.x, this.y, 'character-wait');
     this.character.setScale(3);
@@ -44,6 +47,9 @@ export class Player extends Phaser.Physics.Arcade.Sprite {
     this.hair = this.scene.add.sprite(this.x, this.y, `${this.hairName}-wait`);
     this.hair.setScale(3);
 
+    this.tool = this.scene.add.sprite(this.x, this.y, 'attackTool');
+    this.tool.setScale(3);
+
     this.dust = this.scene.add.sprite(this.x - 20, this.y + 5, 'dust');
     this.dust.setScale(3);
 
@@ -67,6 +73,7 @@ export class Player extends Phaser.Physics.Arcade.Sprite {
   delete() {
     this.character?.destroy();
     this.hair?.destroy();
+    this.tool?.destroy();
     this.nicknameText?.destroy();
     this.dust?.destroy();
   }
diff --git a/frontend/src/component/Game/game.ts b/frontend/src/component/Game/game.ts
index fb8d230..d674b2c 100644
--- a/frontend/src/component/Game/game.ts
+++ b/frontend/src/component/Game/game.ts
@@ -14,6 +14,8 @@ import walkImg from '../../assets/character/walk/walk.png';
 import runImg from '../../assets/character/run/run.png';
 import rollImg from '../../assets/character/roll/roll.png';
 import jumpImg from '../../assets/character/jump/jump.png';
+import attackImg from '../../assets/character/attack/attack.png';
+import attackTool from '../../assets/character/tool/attack.png';
 import { stringObjectType } from '../../types/types';
 
 const characterImg: stringObjectType = {
@@ -22,6 +24,7 @@ const characterImg: stringObjectType = {
   run: runImg,
   roll: rollImg,
   jump: jumpImg,
+  attack: attackImg,
 };
 
 export default class Game extends Phaser.Scene {
@@ -92,7 +95,7 @@ export default class Game extends Phaser.Scene {
     this.load.audio('christmas', [christmas]);
 
     // 캐릭터 동작
-    const actions = ['wait', 'walk', 'run', 'roll', 'jump'];
+    const actions = ['wait', 'walk', 'run', 'roll', 'jump', 'attack'];
 
     actions.forEach((action: string) => {
       this.load.atlas(action, characterImg[action], spriteJSON);
@@ -103,6 +106,11 @@ export default class Game extends Phaser.Scene {
       frameWidth: 24,
       frameHeight: 9,
     });
+
+    this.load.spritesheet('attackTool', attackTool, {
+      frameWidth: 96,
+      frameHeight: 64,
+    });
   }
 
   create() {
@@ -128,6 +136,7 @@ export default class Game extends Phaser.Scene {
       { action: 'run', start: 1, end: 8 },
       { action: 'roll', start: 2, end: 5 },
       { action: 'jump', start: 1, end: 9 },
+      { action: 'attack', start: 1, end: 10 },
     ];
 
     const hairInfo = [
@@ -180,6 +189,16 @@ export default class Game extends Phaser.Scene {
       repeat: -1,
     });
 
+    this.anims.create({
+      key: 'attackTool',
+      frames: this.anims.generateFrameNames('attackTool', {
+        start: 0,
+        end: 9,
+      }),
+      frameRate: 10,
+      repeat: -1,
+    });
+
     emitter.emit('ready');
   }
 
diff --git a/frontend/src/component/Game/util.ts b/frontend/src/component/Game/util.ts
index b3651b7..1951040 100644
--- a/frontend/src/component/Game/util.ts
+++ b/frontend/src/component/Game/util.ts
@@ -13,6 +13,13 @@ export const changeState = (player: any) => {
     player.dust.visible = false;
     player.dust.stop();
   }
+  if (player.state === 'attack') {
+    player.tool.visible = true;
+    player.tool.play('attackTool');
+  } else {
+    player.tool.visible = false;
+    player.tool.stop();
+  }
 };
 
 export const changeDirection = (player: any, direction: string) => {
@@ -22,6 +29,7 @@ export const changeDirection = (player: any, direction: string) => {
   player.character.toggleFlipX();
   player.hair.toggleFlipX();
   player.dust.toggleFlipX();
+  player.tool.toggleFlipX();
 
   player.direction = direction;
 };
@@ -58,6 +66,7 @@ export const changePosition = (player: any, x: number, y: number) => {
 
   player.character.setPosition(player.x, player.y);
   player.hair.setPosition(player.x, player.y);
+  player.tool.setPosition(player.x, player.y);
 
   player.nicknameText.x = player.x - player.nickname.length * 3.5;
   player.nicknameText.y = player.y + 25;
diff --git a/frontend/src/component/Info/Help.tsx b/frontend/src/component/Info/Help.tsx
new file mode 100644
index 0000000..bfc5b5f
--- /dev/null
+++ b/frontend/src/component/Info/Help.tsx
@@ -0,0 +1,74 @@
+import { useEffect, useState } from 'react';
+import help from '../../assets/icon/help.svg';
+import BoardAndRankInfo from './HelpDescription/BoardAndRankInfo';
+import KeyBoardInfo from './HelpDescription/KeyBoardInfo';
+import SidebarInfo from './HelpDescription/SidebarInfo';
+import WalkAndUserInfo from './HelpDescription/WalkAndUserInfo';
+
+import * as style from './info.styled';
+
+const Help = () => {
+  const [isShowModal, setIsShowModal] = useState(false);
+  const [animation, setAnimation] = useState('show');
+  const [setOpen, isSetOpen] = useState(false);
+
+  const setOpenModal = () => {
+    isSetOpen(!setOpen);
+  };
+
+  const handleModal = () => {
+    if (isShowModal) {
+      setAnimation('close');
+      setTimeout(() => setIsShowModal(false), 300);
+
+      const setValue = setOpen ? 'open' : 'close';
+      localStorage.setItem('openHelp', setValue);
+    } else {
+      setAnimation('show');
+      setIsShowModal(true);
+    }
+  };
+
+  useEffect(() => {
+    const openHelp = localStorage.getItem('openHelp');
+    if (openHelp === 'open') {
+      setIsShowModal(true);
+      isSetOpen(true);
+    }
+  }, []);
+
+  return (
+    <>
+      {isShowModal && (
+        <>
+          <section css={style.modal(animation)}>
+            <button
+              type="button"
+              css={style.closeBtn}
+              onClick={handleModal}></button>
+            <h3 css={style.header}>📋 Notice</h3>
+            <div css={style.content}>
+              <KeyBoardInfo />
+              <SidebarInfo />
+              <BoardAndRankInfo />
+              <WalkAndUserInfo />
+            </div>
+            <div css={style.helpSettingWrapper}>
+              <p>우측 하단의 물음표 버튼을 클릭해서 도움말을 볼 수 있습니다.</p>
+              <div css={style.helpSetting(setOpen)}>
+                <p>접속시 도움말 켜기</p>
+                <button type="button" onClick={setOpenModal}></button>
+              </div>
+            </div>
+          </section>
+        </>
+      )}
+      <button
+        type="button"
+        onClick={handleModal}
+        css={style.info(help)}></button>
+    </>
+  );
+};
+
+export default Help;
diff --git a/frontend/src/component/Info/HelpDescription/BoardAndRankInfo.tsx b/frontend/src/component/Info/HelpDescription/BoardAndRankInfo.tsx
new file mode 100644
index 0000000..1ea4b46
--- /dev/null
+++ b/frontend/src/component/Info/HelpDescription/BoardAndRankInfo.tsx
@@ -0,0 +1,30 @@
+import * as style from './boardAndRankInfo.styled';
+import * as commonStyle from './common.styled';
+import boardAndRankImg from '../../../assets/info-boardAndRank.png';
+
+const BoardAndRankInfo = () => {
+  return (
+    <div css={commonStyle.infoContainer}>
+      <h4 css={commonStyle.header}>- Board & Rank</h4>
+      <div css={style.description}>
+        <img src={boardAndRankImg} alt="보드와 순위 이미지" width={'100%'} />
+        <p>
+          오른쪽 하단의 트로피 모양의 버튼을 클릭하면 SleepyBoard가 보여집니다.
+        </p>
+        <p>
+          상단의 탭을 클릭하여 <strong>업적</strong>을 보거나,{' '}
+          <strong>걸음수 랭킹</strong>을 볼 수 있습니다.
+        </p>
+        <p>
+          탭 아래의 필터를 클릭해 모든 유저, 좋아요, 친구, 기간을 설정할 수
+          있습니다.
+        </p>
+        <p>
+          걸음수 갱신은 <span>매일 자정</span>에 이루어집니다.
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default BoardAndRankInfo;
diff --git a/frontend/src/component/Info/HelpDescription/KeyBoardInfo.tsx b/frontend/src/component/Info/HelpDescription/KeyBoardInfo.tsx
new file mode 100644
index 0000000..63ce3c1
--- /dev/null
+++ b/frontend/src/component/Info/HelpDescription/KeyBoardInfo.tsx
@@ -0,0 +1,43 @@
+import * as style from './keyBoardInfo.styled';
+import * as commonStyle from './common.styled';
+import keyboardArrow from '../../../assets/icon/keyboardArrow.svg';
+import keyboardSpace from '../../../assets/icon/keyboardSpace.svg';
+import keyboardShift from '../../../assets/icon/keyboardShift.svg';
+import keyboardA from '../../../assets/icon/keyboardA.svg';
+import keyboardR from '../../../assets/icon/keyboardR.svg';
+
+const KeyBoardInfo = () => {
+  return (
+    <div css={commonStyle.infoContainer}>
+      <h4 css={commonStyle.header}>- 기본키 조작법</h4>
+      <div css={style.description}>
+        <ul>
+          <li>
+            <img src={keyboardArrow} alt="방향키 이미지" height={'80px'} />
+            <p>화살표 방향키로 이동할 수 있습니다.</p>
+          </li>
+          <li>
+            <img src={keyboardSpace} alt="space키 이미지" height={'40px'} />
+            <p>space키로 점프할 수 있습니다.</p>
+          </li>
+        </ul>
+        <ul>
+          <li>
+            <img src={keyboardA} alt="A키 이미지" height={'40px'} />
+            <p>A키로 공격 모션을 취할 수 있습니다.</p>
+          </li>
+          <li>
+            <img src={keyboardR} alt="R키 이미지" height={'40px'} />
+            <p>R키로 구르기를 할 수 있습니다.</p>
+          </li>
+          <li>
+            <img src={keyboardShift} alt="shift키 이미지" height={'40px'} />
+            <p>shift키로 달리기를 할 수 있습니다.</p>
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default KeyBoardInfo;
diff --git a/frontend/src/component/Info/HelpDescription/SidebarInfo.tsx b/frontend/src/component/Info/HelpDescription/SidebarInfo.tsx
new file mode 100644
index 0000000..e1b77ad
--- /dev/null
+++ b/frontend/src/component/Info/HelpDescription/SidebarInfo.tsx
@@ -0,0 +1,114 @@
+import * as style from './sidebarInfo.styled';
+import * as commonStyle from './common.styled';
+import sidebarImg from '../../../assets/sidebarImg.png';
+import mypageImg from '../../../assets/info-mypage.png';
+import friendsImg from '../../../assets/info-friends.png';
+import chatImg from '../../../assets/info-chat.png';
+import settingImg from '../../../assets/info-setting.png';
+
+const SidebarInfo = () => {
+  return (
+    <div css={commonStyle.infoContainer}>
+      <h4 css={commonStyle.header}>- 사이드바</h4>
+      <div css={style.description}>
+        <img src={sidebarImg} alt="사이드바 이미지" width={'100%'} />
+        <p>
+          왼쪽 상단의 <span>{'>'}</span> 버튼을 클릭하면 사이드바를 볼 수
+          있습니다.
+        </p>
+        <p>
+          사이드바 상단의 버튼을 클릭해 다음과 같은 기능을 사용할 수 있습니다.
+        </p>
+        <ul css={style.subContentBox}>
+          <li css={style.subContent}>
+            <img
+              src={mypageImg}
+              alt="마이페이지 이미지"
+              height={'200px'}
+              width={'100px'}
+            />
+            <div css={style.subDescription}>
+              <h4 css={style.subTitle}>1. 마이페이지</h4>
+              <p>
+                <strong>캐릭터 변경, 닉네임 수정, 로그아웃, 회원탈퇴</strong>를
+                할 수 있습니다.
+              </p>
+              <p>
+                회원탈퇴를 하는 경우{' '}
+                <span>같은 계정으로 다시는 회원가입할 수 없습니다.</span>
+              </p>
+            </div>
+          </li>
+          <li css={style.subContent}>
+            <img
+              src={friendsImg}
+              alt="친구목록 이미지"
+              height={'200px'}
+              width={'100px'}
+            />
+            <div css={style.subDescription}>
+              <h4 css={style.subTitle}>2. 친구목록</h4>
+              <p>
+                <strong>친구목록</strong>을 볼 수 있습니다.
+              </p>
+              <p>
+                유저를 검색해서 <strong>친구추가</strong> 할 수 있습니다.
+              </p>
+              <p>
+                친구목록의 아이콘을 클릭해 <strong>1:1 채팅 및 친구끊기</strong>
+                가 가능합니다.
+              </p>
+              <p>
+                친구를 아래로 드래그해서 <strong>영상통화</strong>가 가능합니다.
+              </p>
+            </div>
+          </li>
+          <li css={style.subContent}>
+            <img
+              src={chatImg}
+              alt="일대일 채팅 이미지"
+              height={'200px'}
+              width={'100px'}
+            />
+            <div css={style.subDescription}>
+              <h4 css={style.subTitle}>3. 1:1 채팅</h4>
+              <p>
+                <strong>채팅방 목록</strong>이 보여집니다.
+              </p>
+              <p>
+                각각 채팅방에는{' '}
+                <strong>닉네임, 시각, 마지막 메세지, 읽지않은 메세지</strong>가
+                표시됩니다.
+              </p>
+              <p>
+                채팅방을 클릭해 다른 유저와 <strong>실시간 1:1 채팅</strong>을
+                할 수 있습니다.
+              </p>
+            </div>
+          </li>
+          <li css={style.subContent}>
+            <img
+              src={settingImg}
+              alt="환경설정 이미지"
+              height={'200px'}
+              width={'100px'}
+            />
+            <div css={style.subDescription}>
+              <h4 css={style.subTitle}>4. 환경설정</h4>
+              <p>
+                <strong>배경음악 및 눈내리기 효과를 on/off</strong> 할 수
+                있습니다.
+              </p>
+              <p>
+                영상통화에 사용되는 <strong>기기(카메라, 마이크)를 설정</strong>
+                할 수 있습니다.
+              </p>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default SidebarInfo;
diff --git a/frontend/src/component/Info/HelpDescription/WalkAndUserInfo.tsx b/frontend/src/component/Info/HelpDescription/WalkAndUserInfo.tsx
new file mode 100644
index 0000000..d87e42f
--- /dev/null
+++ b/frontend/src/component/Info/HelpDescription/WalkAndUserInfo.tsx
@@ -0,0 +1,25 @@
+import * as style from './boardAndRankInfo.styled';
+import * as commonStyle from './common.styled';
+import walkAndUserImg from '../../../assets/info-walkAndUser.png';
+
+const WalkAndUserInfo = () => {
+  return (
+    <div css={commonStyle.infoContainer}>
+      <h4 css={commonStyle.header}>- 걸음수 & 접속유저</h4>
+      <div css={style.description}>
+        <img
+          src={walkAndUserImg}
+          alt="걸음수와 접속유저 이미지"
+          width={'100%'}
+        />
+        <p>
+          오른쪽 하단에 자신의 <strong> 걸음수</strong>와{' '}
+          <strong>접속유저</strong>가 표시됩니다.
+        </p>
+        <p>방향키로 이동했을때 걸음수가 증가하며 랭킹에 반영됩니다.</p>
+      </div>
+    </div>
+  );
+};
+
+export default WalkAndUserInfo;
diff --git a/frontend/src/component/Info/HelpDescription/boardAndRankInfo.styled.ts b/frontend/src/component/Info/HelpDescription/boardAndRankInfo.styled.ts
new file mode 100644
index 0000000..5af223d
--- /dev/null
+++ b/frontend/src/component/Info/HelpDescription/boardAndRankInfo.styled.ts
@@ -0,0 +1,12 @@
+import { css } from '@emotion/react';
+import theme from '../../../styles/theme';
+
+export const description = css`
+  width: 100%;
+
+  & > p {
+    padding: 15px;
+    font-size: 14px;
+    text-align: center;
+  }
+`;
diff --git a/frontend/src/component/Info/HelpDescription/common.styled.ts b/frontend/src/component/Info/HelpDescription/common.styled.ts
new file mode 100644
index 0000000..269c8ea
--- /dev/null
+++ b/frontend/src/component/Info/HelpDescription/common.styled.ts
@@ -0,0 +1,28 @@
+import { css } from '@emotion/react';
+import theme from '../../../styles/theme';
+
+export const infoContainer = css`
+  width: 100%;
+  padding: 20px;
+  margin-bottom: 10px;
+
+  background-color: ${theme.white05};
+  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
+  border-radius: 20px;
+
+  strong {
+    color: ${theme.deepGreen};
+    font-weight: 700;
+  }
+
+  span {
+    color: ${theme.red};
+    font-weight: 700;
+  }
+`;
+
+export const header = css`
+  font-size: 18px;
+  font-weight: 700;
+  padding-bottom: 15px;
+`;
diff --git a/frontend/src/component/Info/HelpDescription/keyBoardInfo.styled.ts b/frontend/src/component/Info/HelpDescription/keyBoardInfo.styled.ts
new file mode 100644
index 0000000..c8900ba
--- /dev/null
+++ b/frontend/src/component/Info/HelpDescription/keyBoardInfo.styled.ts
@@ -0,0 +1,27 @@
+import { css } from '@emotion/react';
+
+export const description = css`
+  display: flex;
+  justify-content: space-around;
+  width: 100%;
+  height: 250px;
+
+  ul {
+    display: flex;
+    height: 100%;
+    flex-flow: column;
+    justify-content: space-between;
+    height: 100%;
+    padding: 0 20px;
+
+    img {
+      justify-items: center;
+      margin-top: 5px;
+    }
+
+    p {
+      font-size: 14px;
+      padding: 10px 0;
+    }
+  }
+`;
diff --git a/frontend/src/component/Info/HelpDescription/sidebarInfo.styled.ts b/frontend/src/component/Info/HelpDescription/sidebarInfo.styled.ts
new file mode 100644
index 0000000..cf82cf2
--- /dev/null
+++ b/frontend/src/component/Info/HelpDescription/sidebarInfo.styled.ts
@@ -0,0 +1,56 @@
+import { css } from '@emotion/react';
+import theme from '../../../styles/theme';
+
+export const description = css`
+  width: 100%;
+
+  & > p {
+    padding: 15px;
+    font-size: 14px;
+    text-align: center;
+
+    span {
+      width: 14px;
+      height: 14px;
+      display: inline-block;
+      background-color: ${theme.black06};
+      color: ${theme.white};
+      border-radius: 4px;
+    }
+  }
+`;
+
+export const subContentBox = css``;
+
+export const subContent = css`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
+
+  :nth-of-type(1) {
+    margin-top: 20px;
+  }
+  :nth-last-of-type(1) {
+    margin-bottom: 0;
+  }
+`;
+
+export const subTitle = css`
+  padding-bottom: 30px;
+  font-weight: 700;
+`;
+
+export const subDescription = css`
+  flex-grow: 1;
+  height: 200px;
+  padding: 10px 20px;
+  background-color: ${theme.white05};
+
+  & > p {
+    width: 100%;
+    padding-bottom: 15px;
+    font-size: 14px;
+  }
+`;
diff --git a/frontend/src/component/Info/HelpDescription/walkAndUserInfo.styled.ts b/frontend/src/component/Info/HelpDescription/walkAndUserInfo.styled.ts
new file mode 100644
index 0000000..546e8b3
--- /dev/null
+++ b/frontend/src/component/Info/HelpDescription/walkAndUserInfo.styled.ts
@@ -0,0 +1,11 @@
+import { css } from '@emotion/react';
+
+export const description = css`
+  width: 100%;
+
+  & > p {
+    padding: 15px;
+    font-size: 14px;
+    text-align: center;
+  }
+`;
diff --git a/frontend/src/component/Info/index.tsx b/frontend/src/component/Info/index.tsx
index 1067bc1..8edd851 100644
--- a/frontend/src/component/Info/index.tsx
+++ b/frontend/src/component/Info/index.tsx
@@ -1,10 +1,12 @@
 import * as style from './info.styled';
+import Help from './Help';
 import Users from './Users';
 import Walk from './Walk';
 
 const Info = () => {
   return (
     <ul css={style.infoBox}>
+      <Help />
       <Walk />
       <Users />
     </ul>
diff --git a/frontend/src/component/Info/info.styled.ts b/frontend/src/component/Info/info.styled.ts
index bff60d6..6846e3b 100644
--- a/frontend/src/component/Info/info.styled.ts
+++ b/frontend/src/component/Info/info.styled.ts
@@ -1,5 +1,8 @@
 import { css } from '@emotion/react';
 import theme from '../../styles/theme';
+import close from '../../assets/icon/close.svg';
+import checkBox from '../../assets/icon/checkBox.svg';
+import { flexCenter } from '../../styles/mixin.styled';
 
 export const infoBox = css`
   display: flex;
@@ -10,7 +13,7 @@ export const infoBox = css`
 
 export const info = (content: string) => css`
   display: flex;
-  justify-content: space-between;
+  justify-content: space-around;
   align-items: center;
   font-size: 14px;
   color: ${theme.white};
@@ -22,13 +25,121 @@ export const info = (content: string) => css`
 
   ::after {
     content: '';
-    display: block;
+    display: 'block';
     width: 20px;
     height: 15px;
-    margin-left: 5px;
     background-image: url(${content});
     background-position: center;
     background-repeat: no-repeat;
     background-size: contain;
   }
 `;
+
+export const modal = (animation: string) => css`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-flow: column;
+
+  width: 60%;
+  min-width: 600px;
+  max-width: 800px;
+  height: 60%;
+  min-height: 400px;
+  max-height: 600px;
+  padding: 20px;
+
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -60%);
+  border-radius: 20px;
+  background-color: rgba(255, 255, 255, 0.9);
+
+  overflow: auto;
+  ::-webkit-scrollbar {
+    display: none;
+  }
+
+  animation: ${animation} 0.3s ease-in-out;
+
+  @keyframes show {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes close {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+`;
+
+export const closeBtn = css`
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  width: 20px;
+  height: 20px;
+  opacity: 0.7;
+  padding: 5px;
+
+  ::after {
+    content: '';
+    display: block;
+    width: 20px;
+    height: 20px;
+    background-image: url(${close});
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain;
+  }
+`;
+
+export const header = css`
+  font-weight: 700;
+  font-size: 30px;
+  line-height: 30px;
+  padding: 20px;
+  margin-bottom: 10px;
+  text-align: center;
+`;
+
+export const content = css`
+  overflow: auto;
+  padding: 5px;
+
+  ::-webkit-scrollbar {
+    display: none;
+  }
+`;
+
+export const helpSettingWrapper = css`
+  width: 100%;
+  font-size: 12px;
+  padding-top: 20px;
+  text-align: center;
+`;
+
+export const helpSetting = (isCheck: boolean) => css`
+  ${flexCenter}
+  padding-top: 10px;
+
+  button {
+    margin-left: 5px;
+    width: 14px;
+    height: 14px;
+    background-image: url(${checkBox});
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    opacity: ${isCheck ? 1 : 0.3};
+  }
+`;
diff --git a/frontend/src/component/SleepyBoard/index.tsx b/frontend/src/component/SleepyBoard/index.tsx
index f1fc1f1..c81f165 100644
--- a/frontend/src/component/SleepyBoard/index.tsx
+++ b/frontend/src/component/SleepyBoard/index.tsx
@@ -24,6 +24,10 @@ const SleepyBoard = () => {
       {isShowModal && (
         <>
           <section css={style.modal(animation)}>
+            <button
+              type="button"
+              css={style.closeBtn}
+              onClick={handleModal}></button>
             <Tab selected={tab} setTab={setTab} />
             {tab === 'board' ? <SleepyBoardContainer /> : <RankContainer />}
           </section>
diff --git a/frontend/src/component/SleepyBoard/sleepyboard.styled.ts b/frontend/src/component/SleepyBoard/sleepyboard.styled.ts
index 1725a92..91c5b06 100644
--- a/frontend/src/component/SleepyBoard/sleepyboard.styled.ts
+++ b/frontend/src/component/SleepyBoard/sleepyboard.styled.ts
@@ -3,6 +3,7 @@ import tree from '../../assets/tree.svg';
 import trophy from '../../assets/trophy.svg';
 import like from '../../assets/icon/like.svg';
 import unlike from '../../assets/icon/unlike.svg';
+import close from '../../assets/icon/close.svg';
 import { flexCenter } from '../../styles/mixin.styled';
 import theme from '../../styles/theme';
 
@@ -314,3 +315,24 @@ export const infoMsg = css`
   text-align: center;
   padding: 20px;
 `;
+
+export const closeBtn = css`
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  width: 20px;
+  height: 20px;
+  opacity: 0.7;
+  padding: 5px;
+
+  ::after {
+    content: '';
+    display: block;
+    width: 20px;
+    height: 20px;
+    background-image: url(${close});
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain;
+  }
+`;