diff --git a/summoner-battle/public/index.html b/summoner-battle/public/index.html
index 1dbdca6..7ba839f 100644
--- a/summoner-battle/public/index.html
+++ b/summoner-battle/public/index.html
@@ -9,6 +9,7 @@
       name="description"
       content="Web site created using create-react-app"
     />
+    <script src="https://kit.fontawesome.com/2628447209.js" crossorigin="anonymous"></script>
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
diff --git a/summoner-battle/src/.DS_Store b/summoner-battle/src/.DS_Store
index 195c004..7e59362 100644
Binary files a/summoner-battle/src/.DS_Store and b/summoner-battle/src/.DS_Store differ
diff --git a/summoner-battle/src/app/store.js b/summoner-battle/src/app/store.js
index 4963ba8..3703866 100644
--- a/summoner-battle/src/app/store.js
+++ b/summoner-battle/src/app/store.js
@@ -1,10 +1,12 @@
 import { configureStore } from '@reduxjs/toolkit';
 import counterReducer from '../features/counter/counterSlice';
 import battleReducer from '../features/battle/battleSlice';
+import bossReducer from '../features/boss/bossSlice';
 
 export const store = configureStore({
   reducer: {
     counter: counterReducer,
+    boss: bossReducer,
     battle: battleReducer,
   },
 });
diff --git a/summoner-battle/src/features/.DS_Store b/summoner-battle/src/features/.DS_Store
index 84b0b43..1bf66ce 100644
Binary files a/summoner-battle/src/features/.DS_Store and b/summoner-battle/src/features/.DS_Store differ
diff --git a/summoner-battle/src/features/boss/Boss.js b/summoner-battle/src/features/boss/Boss.js
new file mode 100644
index 0000000..457dce8
--- /dev/null
+++ b/summoner-battle/src/features/boss/Boss.js
@@ -0,0 +1,268 @@
+import React, { useState } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import {
+  attackToBoss,
+  attackCancel,
+  atkCriCancel,
+  addSkillPoint,
+  minusSkillPoint,
+  selectBoss,
+  selectPlayer,
+} from './bossSlice';
+import styles from './Boss.module.css';
+
+export function Boss({ attacked }) {
+  const boss = useSelector(selectBoss);
+  const player = useSelector(selectPlayer);
+  const dispatch = useDispatch();
+  const [summon, fixSummon] = useState({
+    isThreeStar: true,
+    isFourStar: false,
+    isFiveStar: false,
+    element: 'fire',
+  });
+
+  document.addEventListener('keydown', (e) => {
+    if (e.code === 'Digit3') {
+      fixToThree(summon.element);
+    }
+    if (e.code === 'Digit4') fixToFour(summon.element);
+    if (e.code === 'Digit5') fixToFive(summon.element);
+  });
+  function fixToThree(element) {
+    fixSummon({
+      isThreeStar: true,
+      isFourStar: false,
+      isFiveStar: false,
+      element,
+    });
+  }
+  function fixToFour(element) {
+    fixSummon({
+      isThreeStar: false,
+      isFourStar: true,
+      isFiveStar: false,
+      element,
+    });
+  }
+  function fixToFive(element) {
+    fixSummon({
+      isThreeStar: false,
+      isFourStar: false,
+      isFiveStar: true,
+      element,
+    });
+  }
+  return (
+    <div>
+      <div className={styles.row}>HP 
+        <span className={styles.hp}>{boss.hp}</span>/
+        <span className={styles.hp}>{boss.maxHp}</span>
+      </div>
+      <img className={boss.hp === 0 ? styles.boss_die : styles.boss}/>
+      <div className={styles.player}>
+        <div>
+          <h2>플레이어 스킬</h2>
+          <div>
+            <div>소환 성공: {player.damage}/1</div>
+            <div className={styles.skills}>
+              <div>
+                소환 대성공 : {player.fourStar}/3
+              </div>
+              <div>
+                <button onClick={() => dispatch(addSkillPoint('fourStar'))}>
+                  +
+                </button>
+                <button onClick={() => dispatch(minusSkillPoint('fourStar'))}>
+                  -
+                </button>
+              </div>
+            </div>
+            <div className={styles.skills}>
+              <div>
+                대박 소환 : {player.fiveStar}/3
+              </div>
+              <div>
+                <button onClick={() => dispatch(addSkillPoint('fiveStar'))}>
+                  +
+                </button>
+                <button onClick={() => dispatch(minusSkillPoint('fiveStar'))}>
+                  -
+                </button>
+              </div>
+            </div>
+            <div className={styles.skills}>
+              <div>
+                불의 소환사 : {player.fire}/5
+              </div>
+              <div>
+                <button onClick={() => dispatch(addSkillPoint('fire'))}>+</button>
+                <button onClick={() => dispatch(minusSkillPoint('fire'))}>
+                  -
+                </button>
+              </div>
+            </div>
+            <div className={styles.skills}>
+              <div>
+                물의 소환사 : {player.water}/5
+              </div>
+              <div>
+                <button onClick={() => dispatch(addSkillPoint('water'))}>
+                  +
+                </button>
+                <button onClick={() => dispatch(minusSkillPoint('water'))}>
+                  -
+              </button>
+              </div>
+            </div>
+            <div className={styles.skills}>
+              <div>
+                바람의 소환사 : {player.wind}/5
+              </div>
+              <div>
+                <button onClick={() => dispatch(addSkillPoint('wind'))}>+</button>
+                <button onClick={() => dispatch(minusSkillPoint('wind'))}>
+                  -
+                </button>
+              </div>
+            </div>
+            <div className={styles.skills}>
+              <div>
+                빛의 소환사 : {player.light}/3
+              </div>
+              <div>
+                <button onClick={() => dispatch(addSkillPoint('light'))}>
+                  +
+                </button>
+                <button onClick={() => dispatch(minusSkillPoint('light'))}>
+                  -
+              </button>
+              </div>
+            </div>
+            <div className={styles.skills}>
+              <div>
+                어둠의 소환사 : {player.dark}/3
+              </div>
+              <div>
+                <button onClick={() => dispatch(addSkillPoint('dark'))}>+</button>
+                <button onClick={() => dispatch(minusSkillPoint('dark'))}>
+                  -
+                </button>
+              </div>
+            </div>
+            <div className={styles.skills}>
+              <div>
+                행운의 소환사 : {player.luck}/3
+              </div>
+              <div>
+                <button onClick={() => dispatch(addSkillPoint('luck'))}>+</button>
+                <button onClick={() => dispatch(minusSkillPoint('luck'))}>
+                  -
+                </button>
+              </div>
+            </div>
+            <div className={styles.skills}>
+              <div>
+                강력한 소환사 : {player.power}/3
+              </div>
+              <div>
+                <button onClick={() => dispatch(addSkillPoint('power'))}>
+                  +
+                </button>
+                <button onClick={() => dispatch(minusSkillPoint('power'))}>
+                  -
+              </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div>
+        <div>소환된 몬스터</div>
+        <div>
+          <input
+            name="star"
+            id="3"
+            type="radio"
+            onClick={() => fixToThree(summon.element)}
+            defaultChecked
+          />
+          3성
+          <input
+            name="star"
+            id="4"
+            type="radio"
+            onClick={() => fixToFour(summon.element)}
+          />
+          4성
+          <input
+            name="star"
+            id="5"
+            type="radio"
+            onClick={() => fixToFive(summon.element)}
+          />
+          5성
+        </div>
+        <div>
+          <input
+            name="element"
+            id="fire"
+            type="radio"
+            onClick={() => fixSummon({ ...summon, element: 'fire' })}
+            defaultChecked
+          />
+          불속성
+          <input
+            name="element"
+            id="water"
+            type="radio"
+            onClick={() => fixSummon({ ...summon, element: 'water' })}
+          />
+          물속성
+          <input
+            name="element"
+            id="wind"
+            type="radio"
+            onClick={() => fixSummon({ ...summon, element: 'wind' })}
+          />
+          바람속성
+          <input
+            name="element"
+            id="light"
+            type="radio"
+            onClick={() => fixSummon({ ...summon, element: 'light' })}
+          />
+          빛속성
+          <input
+            name="element"
+            id="dark"
+            type="radio"
+            onClick={() => fixSummon({ ...summon, element: 'dark' })}
+          />
+          어둠속성
+        </div>
+      </div>
+      <button
+        className={styles.button}
+        aria-label="Attack"
+        onClick={() => dispatch(attackToBoss(summon))}
+      >
+        공격
+      </button>
+      <button
+        className={styles.button}
+        aria-label="Attack"
+        onClick={() => dispatch(attackCancel(summon))}
+      >
+        공격 취소 (일반)
+      </button>
+      <button
+        className={styles.button}
+        aria-label="Attack"
+        onClick={() => dispatch(atkCriCancel(summon))}
+      >
+        공격 취소 (치명)
+      </button>
+    </div>
+  );
+}
diff --git a/summoner-battle/src/features/boss/Boss.module.css b/summoner-battle/src/features/boss/Boss.module.css
new file mode 100644
index 0000000..8fdc5eb
--- /dev/null
+++ b/summoner-battle/src/features/boss/Boss.module.css
@@ -0,0 +1,128 @@
+  .row {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .skills {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  
+  .skills div {
+    padding-right: 25px;
+  }
+
+  .player{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: fixed;
+    text-align: left;
+    top: 150px;
+    right: 10px;
+  }
+  .row > button {
+    margin-left: 4px;
+    margin-right: 8px;
+  }
+
+  .player button {
+    margin-left: 2px;
+    margin-right: 2px;
+  }
+
+  .row:not(:last-child) {
+    margin-bottom: 16px;
+  }
+  
+  .value {
+    font-size: 78px;
+    padding-left: 16px;
+    padding-right: 16px;
+    margin-top: 2px;
+    font-family: 'Courier New', Courier, monospace;
+  }
+
+  .hp {
+    font-size: 46px;
+    padding-left: 16px;
+    padding-right: 16px;
+    margin-top: 2px;
+    font-family: 'Courier New', Courier, monospace;
+  }
+  
+  .button {
+    appearance: none;
+    background: none;
+    font-size: 24px;
+    padding-left: 12px;
+    padding-right: 12px;
+    outline: none;
+    border: 2px solid transparent;
+    color: rgb(112, 76, 182);
+    padding-bottom: 4px;
+    margin: 4px 5px;
+    cursor: pointer;
+    background-color: rgba(112, 76, 182, 0.1);
+    border-radius: 2px;
+    transition: all 0.15s;
+  }
+  
+  .textbox {
+    font-size: 32px;
+    padding: 2px;
+    width: 64px;
+    text-align: center;
+    margin-right: 4px;
+  }
+  
+  .button:hover,
+  .button:focus {
+    border: 2px solid rgba(112, 76, 182, 0.4);
+  }
+  
+  .button:active {
+    background-color: rgba(112, 76, 182, 0.2);
+  }
+  
+  .asyncButton {
+    composes: button;
+    position: relative;
+  }
+  
+  .asyncButton:after {
+    content: '';
+    background-color: rgba(112, 76, 182, 0.15);
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    opacity: 0;
+    transition: width 1s linear, opacity 0.5s ease 1s;
+  }
+  
+  .asyncButton:active:after {
+    width: 0%;
+    opacity: 1;
+    transition: 0s;
+  }
+  
+  .boss {
+    width: 50%;
+    height: 500px;
+    background-size: cover;
+    background-position: center;
+    background-image: url('./boss1.jpeg');
+  }
+  
+  .boss_die {
+
+    width: 80%;
+    height: 500px;
+    background-size: cover;
+    background-position: center;
+    background-image: url('./boss2.jpeg');
+  }
\ No newline at end of file
diff --git a/summoner-battle/src/features/boss/boss1.jpeg b/summoner-battle/src/features/boss/boss1.jpeg
new file mode 100644
index 0000000..8d7fbe9
Binary files /dev/null and b/summoner-battle/src/features/boss/boss1.jpeg differ
diff --git a/summoner-battle/src/features/boss/boss2.jpeg b/summoner-battle/src/features/boss/boss2.jpeg
new file mode 100644
index 0000000..59134c2
Binary files /dev/null and b/summoner-battle/src/features/boss/boss2.jpeg differ
diff --git a/summoner-battle/src/features/boss/bossSlice.js b/summoner-battle/src/features/boss/bossSlice.js
new file mode 100644
index 0000000..2f8354d
--- /dev/null
+++ b/summoner-battle/src/features/boss/bossSlice.js
@@ -0,0 +1,198 @@
+import { createSlice } from '@reduxjs/toolkit';
+import skills, { skillMax } from './skills';
+
+const initialState = {
+  boss: {
+    maxHp: 10000,
+    hp: 10000,
+    phase: 1,
+    p1: 7000,
+    p2: 5000,
+    p3: 2500,
+    p4: 1000,
+    avoidRate: 0.15,
+    legend: false,
+    transcendence: false,
+  },
+  player: {
+    damage: 1,
+    fourStar: 1,
+    fiveStar: 1,
+    fire: 1,
+    water: 1,
+    wind: 1,
+    light: 1,
+    dark: 1,
+    luck: 1,
+    power: 1,
+  },
+  summon: {
+    isThreeStar: true,
+    isFourStar: false,
+    isFiveStar: false,
+    element: 'fire',
+  },
+};
+
+function calculateAttackDamage(player, situation) {
+  let finalDamage = player.damage * 10;
+  if (situation.element === 'dark' || situation.element === 'light') {
+    finalDamage += skills.DLD[player[situation.element]];
+  } else {
+    finalDamage += skills.ED[player[situation.element]];
+  }
+
+  if (situation.isFourStar) {
+    finalDamage += skills.SD4[player.fourStar];
+  } else if (situation.isFiveStar) {
+    finalDamage += skills.SD5[player.fiveStar];
+  }
+
+  if (Date.now() % 100 < skills.CRP[player.luck] * 100) {
+    (finalDamage *= skills.CRD[player.power]);
+  }
+  console.log(`${finalDamage}의 데미지!`);
+  return Math.floor(finalDamage);
+}
+
+function calculateAtkCriDamage(player, situation) {
+  let finalDamage = player.damage * 10;
+  if (situation.element === 'dark' || situation.element === 'light') {
+    finalDamage += skills.DLD[player[situation.element]];
+  } else {
+    finalDamage += skills.ED[player[situation.element]];
+  }
+
+  if (situation.isFourStar) {
+    finalDamage += skills.SD4[player.fourStar];
+  } else if (situation.isFiveStar) {
+    finalDamage += skills.SD5[player.fiveStar];
+  }
+
+    finalDamage *= skills.CRD[player.power];
+  
+  console.log(`${finalDamage}의 데미지(크리티컬) 취소!`);
+  return Math.floor(finalDamage);
+}
+
+function calculateNormalDamage(player, situation) {
+  let finalDamage = player.damage * 10;
+  if (situation.element === 'dark' || situation.element === 'light') {
+    finalDamage += skills.DLD[player[situation.element]];
+  } else {
+    finalDamage += skills.ED[player[situation.element]];
+  }
+
+  if (situation.isFourStar) {
+    finalDamage += skills.SD4[player.fourStar];
+  } else if (situation.isFiveStar) {
+    finalDamage += skills.SD5[player.fiveStar];
+  }
+
+  console.log(`${finalDamage}의 데미지(일반) 취소!`);
+  return finalDamage;
+}
+
+export const battleSlice = createSlice({
+  name: 'battle',
+  initialState,
+  reducers: {
+    attackToBoss: (state, action) => {
+      const boss = state.boss;
+      state.boss.hp -= calculateAttackDamage(state.player, action.payload);
+      if (state.boss.hp < boss.p4) {
+        state.boss.phase = 5;
+      } else if (state.boss.hp < boss.p3) {
+        state.boss.phase = 4;
+      } else if (state.boss.hp < boss.p2) {
+        state.boss.phase = 3;
+      } else if (state.boss.hp < boss.p1) {
+        state.boss.phase = 2;
+      }
+    },
+    attackCancel: (state, action) => {
+      const boss = state.boss;
+      state.boss.hp += calculateNormalDamage(state.player, action.payload);
+      if (state.boss.hp < boss.p4) {
+        state.boss.phase = 5;
+      } else if (state.boss.hp < boss.p3) {
+        state.boss.phase = 4;
+      } else if (state.boss.hp < boss.p2) {
+        state.boss.phase = 3;
+      } else if (state.boss.hp < boss.p1) {
+        state.boss.phase = 2;
+      }
+    },
+    atkCriCancel: (state, action) => {
+      const boss = state.boss;
+      state.boss.hp += calculateAtkCriDamage(state.player, action.payload);
+      if (state.boss.hp < boss.p4) {
+        state.boss.phase = 5;
+      } else if (state.boss.hp < boss.p3) {
+        state.boss.phase = 4;
+      } else if (state.boss.hp < boss.p2) {
+        state.boss.phase = 3;
+      } else if (state.boss.hp < boss.p1) {
+        state.boss.phase = 2;
+      }
+    },
+    addSkillPoint: (state, action) => {
+      if (skillMax[action.payload] > state.player[action.payload])
+        state.player[action.payload] += 1;
+    },
+    minusSkillPoint: (state, action) => {
+      if (state.player[action.payload] > 1) state.player[action.payload] -= 1;
+    },
+    fixToThree: (state) => {
+      state.summon = {
+        ...state.summon,
+        isThreeStar: true,
+        isFourStar: false,
+        isFiveStar: false,
+      };
+    },
+    fixToFour: (state) => {
+      state.summon = {
+        ...state.summon,
+        isThreeStar: false,
+        isFourStar: true,
+        isFiveStar: false,
+      };
+    },
+    fixToFive: (state) => {
+      state.summon = {
+        ...state.summon,
+        isThreeStar: false,
+        isFourStar: false,
+        isFiveStar: true,
+      };
+    },
+    fixElement: (state, action) => {
+      state.summon = {
+        ...state.summon,
+        element: action.payload,
+      };
+    },
+    incrementByAmount: (state, action) => {
+      state.value += action.payload;
+    },
+  },
+});
+
+export const selectBoss = (state) => state.boss.boss;
+export const selectPlayer = (state) => state.boss.player;
+export const selectSummon = (state) => state.boss.summon;
+
+export const {
+  attackToBoss,
+  attackCancel,
+  atkCriCancel,
+  addSkillPoint,
+  minusSkillPoint,
+  fixElement,
+  fixToFive,
+  fixToThree,
+  fixToFour,
+} = battleSlice.actions;
+
+export default battleSlice.reducer;
diff --git a/summoner-battle/src/features/boss/skills.js b/summoner-battle/src/features/boss/skills.js
new file mode 100644
index 0000000..262cbdd
--- /dev/null
+++ b/summoner-battle/src/features/boss/skills.js
@@ -0,0 +1,28 @@
+export const FourStarDamage = [0, 10, 20, 30];
+export const FiveStarDamage = [0, 30 ,50 ,100];
+export const ElementsDamage = [0, 0, 10, 20, 30, 40];
+export const DarkLightDamage = [0, 0, 20, 40];
+export const CriticalDamage = [0, 1.2, 1.5, 2];
+export const CriticalPercent = [0, 0.1, 0.15, 0.25];
+export const skillMax = {
+    damage: 1,
+    fourStar: 3,
+    fiveStar: 3,
+    fire: 5,
+    water: 5,
+    wind: 5,
+    light: 3,
+    dark: 3,
+    luck: 3,
+    power: 3,
+}
+const Skills = {
+    SD5: FiveStarDamage,
+    SD4: FourStarDamage,
+    ED: ElementsDamage,
+    DLD: DarkLightDamage,
+    CRD: CriticalDamage,
+    CRP: CriticalPercent,
+};
+
+export default Skills;
\ No newline at end of file
diff --git a/summoner-battle/src/pages/battle/Battle.module.css b/summoner-battle/src/pages/battle/Battle.module.css
new file mode 100644
index 0000000..6e58588
--- /dev/null
+++ b/summoner-battle/src/pages/battle/Battle.module.css
@@ -0,0 +1,79 @@
+.row {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .row > button {
+    margin-left: 4px;
+    margin-right: 8px;
+  }
+  .row:not(:last-child) {
+    margin-bottom: 16px;
+  }
+  
+  .value {
+    font-size: 78px;
+    padding-left: 16px;
+    padding-right: 16px;
+    margin-top: 2px;
+    font-family: 'Courier New', Courier, monospace;
+  }
+  
+  .button {
+    appearance: none;
+    background: none;
+    font-size: 32px;
+    padding-left: 12px;
+    padding-right: 12px;
+    outline: none;
+    border: 2px solid transparent;
+    color: rgb(112, 76, 182);
+    padding-bottom: 4px;
+    cursor: pointer;
+    background-color: rgba(112, 76, 182, 0.1);
+    border-radius: 2px;
+    transition: all 0.15s;
+  }
+  
+  .textbox {
+    font-size: 32px;
+    padding: 2px;
+    width: 64px;
+    text-align: center;
+    margin-right: 4px;
+  }
+  
+  .button:hover,
+  .button:focus {
+    border: 2px solid rgba(112, 76, 182, 0.4);
+  }
+  
+  .button:active {
+    background-color: rgba(112, 76, 182, 0.2);
+  }
+  
+  .asyncButton {
+    composes: button;
+    position: relative;
+  }
+  
+  .asyncButton:after {
+    content: '';
+    background-color: rgba(112, 76, 182, 0.15);
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    opacity: 0;
+    transition: width 1s linear, opacity 0.5s ease 1s;
+  }
+  
+  .asyncButton:active:after {
+    width: 0%;
+    opacity: 1;
+    transition: 0s;
+  }
+  
\ No newline at end of file
diff --git a/summoner-battle/src/pages/boss/App.css b/summoner-battle/src/pages/boss/App.css
index 01cc586..4e8a8a0 100644
--- a/summoner-battle/src/pages/boss/App.css
+++ b/summoner-battle/src/pages/boss/App.css
@@ -1,4 +1,6 @@
 .App {
+  background-image: url('./bg.jpg');
+  background-size: cover;
   text-align: center;
 }
 
@@ -37,3 +39,36 @@
     transform: translateY(0px);
   }
 }
+
+.fix-at-top{
+  text-align: right;
+  position: fixed;
+  top: 15px;
+  right: 30px;
+}
+
+
+.fix-at-top p i {
+  margin-left: 12px;
+}
+.fix-at-top p {
+  font-weight: bold;
+}
+
+.fix-at-top button {
+  margin: 0 0 0 10px;
+}
+
+.fa-power-off.true{
+  color: white;
+  background-color: greenyellow;
+  padding: 10px;
+  border-radius: 100%;
+}
+
+.fa-power-off.false{
+  color: white;
+  background-color: red;
+  padding: 10px;
+  border-radius: 100%;
+}
\ No newline at end of file
diff --git a/summoner-battle/src/pages/boss/Boss.module.css b/summoner-battle/src/pages/boss/Boss.module.css
new file mode 100644
index 0000000..6e58588
--- /dev/null
+++ b/summoner-battle/src/pages/boss/Boss.module.css
@@ -0,0 +1,79 @@
+.row {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .row > button {
+    margin-left: 4px;
+    margin-right: 8px;
+  }
+  .row:not(:last-child) {
+    margin-bottom: 16px;
+  }
+  
+  .value {
+    font-size: 78px;
+    padding-left: 16px;
+    padding-right: 16px;
+    margin-top: 2px;
+    font-family: 'Courier New', Courier, monospace;
+  }
+  
+  .button {
+    appearance: none;
+    background: none;
+    font-size: 32px;
+    padding-left: 12px;
+    padding-right: 12px;
+    outline: none;
+    border: 2px solid transparent;
+    color: rgb(112, 76, 182);
+    padding-bottom: 4px;
+    cursor: pointer;
+    background-color: rgba(112, 76, 182, 0.1);
+    border-radius: 2px;
+    transition: all 0.15s;
+  }
+  
+  .textbox {
+    font-size: 32px;
+    padding: 2px;
+    width: 64px;
+    text-align: center;
+    margin-right: 4px;
+  }
+  
+  .button:hover,
+  .button:focus {
+    border: 2px solid rgba(112, 76, 182, 0.4);
+  }
+  
+  .button:active {
+    background-color: rgba(112, 76, 182, 0.2);
+  }
+  
+  .asyncButton {
+    composes: button;
+    position: relative;
+  }
+  
+  .asyncButton:after {
+    content: '';
+    background-color: rgba(112, 76, 182, 0.15);
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    opacity: 0;
+    transition: width 1s linear, opacity 0.5s ease 1s;
+  }
+  
+  .asyncButton:active:after {
+    width: 0%;
+    opacity: 1;
+    transition: 0s;
+  }
+  
\ No newline at end of file
diff --git a/summoner-battle/src/pages/boss/bg.jpg b/summoner-battle/src/pages/boss/bg.jpg
new file mode 100644
index 0000000..d7ba62c
Binary files /dev/null and b/summoner-battle/src/pages/boss/bg.jpg differ
diff --git a/summoner-battle/src/pages/boss/index.js b/summoner-battle/src/pages/boss/index.js
index 01d1425..4a4e3a4 100644
--- a/summoner-battle/src/pages/boss/index.js
+++ b/summoner-battle/src/pages/boss/index.js
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import './App.css';
-import { Battle } from '../../features/battle/Battle';
+import { Boss } from '../../features/boss/Boss';
 import { socket } from '../../socket';
 import { useDispatch } from 'react-redux';
 
@@ -23,7 +23,6 @@ function Main() {
     socket.on('player', (args) => {
       const { 속성, 등급 } = args;
       if (!(속성 && 등급)) return;
-
       console.log(`소환 정보 - 속성: ${속성} / 등급: ${등급}`);
       dispatch(
         attackToBoss({
@@ -39,13 +38,13 @@ function Main() {
   return (
     <div className="App">
       <h1>보스모드</h1>
+      <div className="fix-at-top">
+        <p>웹소켓 서버 연결 상태  <i className={`fa-solid fa-power-off ${isSocketServerConnected}`} /></p>
+        <button onClick={() => socket.connect()}>연결</button>
+        <button onClick={() => socket.disconnect()}>해제</button>
+      </div>
 
-      <p>웹소켓 서버 연결 상태: {'' + isSocketServerConnected}</p>
-      <button onClick={() => socket.connect()}>연결</button>
-      <button onClick={() => socket.disconnect()}>해제</button>
-
-      <Battle id="1" />
-      <Battle id="2" />
+      <Boss />
       <Link to="/">
         <button>뒤로가기</button>
       </Link>