diff --git a/public/monster-ball1.svg b/public/monster-ball1.svg
new file mode 100644
index 0000000..bc2391b
--- /dev/null
+++ b/public/monster-ball1.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="137" height="159" viewBox="0 0 137 159" fill="none">
+  <path d="M-19.9026 109.122L25.3471 82.9973M70.7716 56.7715L116.021 30.6465M119.042 29.0191C141.687 68.242 128.248 118.396 89.0255 141.042C49.8026 163.687 -0.351587 150.248 -22.9969 111.025C-45.6423 71.8023 -32.2035 21.6482 7.01937 -0.997192C46.2423 -23.6426 96.3964 -10.2038 119.042 29.0191ZM69.7737 57.464C76.7094 69.477 72.5935 84.8378 60.5805 91.7735C48.5676 98.7092 33.2068 94.5932 26.2711 82.5803C19.3354 70.5674 23.4514 55.2065 35.4643 48.2709C47.4772 41.3352 62.8381 45.4511 69.7737 57.464Z" stroke="black" stroke-opacity="0.03" stroke-width="12" style="mix-blend-mode:darken"/>
+</svg>
\ No newline at end of file
diff --git a/public/monster-ball2.svg b/public/monster-ball2.svg
new file mode 100644
index 0000000..2ea40e2
--- /dev/null
+++ b/public/monster-ball2.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="87" height="158" viewBox="0 0 87 158" fill="none">
+  <path d="M18.8894 113.275L58.7951 90.2354M98.8549 67.1069L138.761 44.0673M141.424 42.6321C161.395 77.2227 149.544 121.454 114.953 141.425C80.3624 161.395 36.1315 149.544 16.1606 114.953C-3.81037 80.3626 8.04126 36.1317 42.6319 16.1607C77.2226 -3.81019 121.453 8.04145 141.424 42.6321ZM97.9749 67.7176C104.091 78.3118 100.462 91.8586 89.8675 97.9751C79.2733 104.092 65.7266 100.462 59.61 89.8677C53.4934 79.2735 57.1233 65.7267 67.7175 59.6102C78.3116 53.4936 91.8584 57.1235 97.9749 67.7176Z" stroke="black" stroke-opacity="0.03" stroke-width="12" style="mix-blend-mode:darken"/>
+</svg>
\ No newline at end of file
diff --git a/src/components/card/PokemonCard.tsx b/src/components/card/PokemonCard.tsx
index 1bf89ff..ffdd796 100644
--- a/src/components/card/PokemonCard.tsx
+++ b/src/components/card/PokemonCard.tsx
@@ -8,9 +8,9 @@ import { useLocation } from 'react-router-dom';
 interface PokemonCardProp {
   pokemonCardData: filteredPokemonData;
   pokemonNickName?: {
-    pokemonNickName1: string;
-    pokemonNickName2: string;
-    pokemonName: string;
+    pokemonNickName1: string | null;
+    pokemonNickName2: string | null;
+    pokemonName: string | null;
   };
   isOpen?: boolean;
 }
@@ -38,8 +38,12 @@ const PokemonCard = ({
       : `${styles[mainClassName]} ${typeClass}`;
   };
 
+  const setMyClassName = (className: string) => {
+    return isMyPage ? styles[`${className}__my`] : styles[className];
+  };
+
   const renderStatus = () => {
-    const statusClassName = isMyPage ? styles.status__my : styles.status;
+    const statusClassName = setMyClassName('status');
     const columnIndex = [0, 1, 2];
 
     return columnIndex.map((index) => (
@@ -73,15 +77,19 @@ const PokemonCard = ({
     >
       <div className={setClassName('pokemon_number')}>{`No.${data?.id}`}</div>
       <div className={styles.white_block}>
+        <img
+          className={setMyClassName('monster_ball_left')}
+          src="/monster-ball1.svg"
+          alt=""
+        />
+        <img
+          className={setMyClassName('monster_ball_right')}
+          src="/monster-ball2.svg"
+          alt=""
+        />
         <div className={setClassName('container')}>
-          <div className={styles.container__top}>
-            <div
-              className={
-                isMyPage
-                  ? `${styles.type_containter__my}`
-                  : `${styles.type_containter}`
-              }
-            >
+          <div className={setMyClassName('container__top')}>
+            <div className={setMyClassName('type_containter')}>
               {data?.types.map((pokemonType: TypesType) => (
                 <Plate
                   key={pokemonType.type.name}
@@ -90,85 +98,37 @@ const PokemonCard = ({
               ))}
             </div>
             <img
-              className={
-                isMyPage
-                  ? `${styles.pokemon_image__my}`
-                  : `${styles.pokemon_image}`
-              }
+              className={setMyClassName('pokemon_image')}
               src={
                 data.id !== 1013 ? data.sprites : '/pokemonImg/그우린차.webp'
               }
               alt="포켓몬 이미지"
             />
             <div className={styles.pokemon_intro}>
-              <div
-                className={
-                  isMyPage
-                    ? `${styles.pokemon_name__my}`
-                    : `${styles.pokemon_name}`
-                }
-              >
-                <span
-                  className={
-                    isMyPage
-                      ? `${styles.text__small__my}`
-                      : `${styles.text__small}`
-                  }
-                >
+              <div className={setMyClassName('pokemon_name')}>
+                <span className={setMyClassName('text_small')}>
                   {pokemonNickName?.pokemonNickName1}
                 </span>
-                <span
-                  className={
-                    isMyPage
-                      ? `${styles.text__small__my}`
-                      : `${styles.text__small}`
-                  }
-                >
+                <span className={setMyClassName('text_small')}>
                   {pokemonNickName?.pokemonNickName2}
                 </span>
               </div>
-              <span
-                className={
-                  isMyPage
-                    ? `${styles.text__large__my}`
-                    : `${styles.text__large}`
-                }
-              >
+              <span className={setMyClassName('text_large')}>
                 {pokemonNickName?.pokemonName}
               </span>
             </div>
           </div>
-          <div
-            className={
-              isMyPage
-                ? `${styles.container__my__bottom}`
-                : `${styles.container__bottom}`
-            }
-          >
+          <div className={setMyClassName('container__bottom')}>
             {renderStatus()}
             <div>
               <img
-                className={isMyPage ? `${styles.logo__my}` : `${styles.logo}`}
+                className={setMyClassName('logo')}
                 src="/logo-pokehub.png"
                 alt="PoketHub"
               />
               <div className={styles.total_stat}>
-                <span
-                  className={
-                    isMyPage
-                      ? `${styles.text__small__my}`
-                      : `${styles.text__small}`
-                  }
-                >
-                  Total
-                </span>
-                <span
-                  className={
-                    isMyPage
-                      ? `${styles.text__large__my}`
-                      : `${styles.text__large}`
-                  }
-                >
+                <span className={setMyClassName('text_small')}>Total</span>
+                <span className={setMyClassName('text_large')}>
                   {data?.stats.reduce(
                     (acc, baseStat) => acc + baseStat.base_stat,
                     0,
diff --git a/src/components/card/pokemonCard.module.scss b/src/components/card/pokemonCard.module.scss
index ac6fe6d..85954cd 100644
--- a/src/components/card/pokemonCard.module.scss
+++ b/src/components/card/pokemonCard.module.scss
@@ -1,25 +1,37 @@
 @import 'src/styles/theme.scss';
 
-.wrapper {
+.wrapper,
+.wrapper__my {
   width: 350px;
   height: 485px;
   border-radius: 23px;
   border: 3px solid #000;
   padding: 15px;
   position: relative;
+
+  &__my {
+    width: 183px;
+    height: 253px;
+    border-radius: 12px;
+    border: 2px solid #000;
+    padding: 8px;
+  }
 }
 
-.wrapper__my {
-  width: 183px;
-  height: 253px;
-  flex-shrink: 0;
-  border-radius: 12px;
-  border: 2px solid #000;
-  padding: 8px;
-  position: relative;
+.monster_ball_left {
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.monster_ball_right {
+  position: absolute;
+  top: 40%;
+  right: 5%;
 }
 
-.pokemon_number {
+.pokemon_number,
+.pokemon_number__my {
   font-size: 15px;
   font-weight: 700;
   color: #fff;
@@ -32,10 +44,227 @@
   height: 34px;
   position: absolute;
   border-radius: 23px 0px;
+
+  &__my {
+    font-size: 8px;
+    width: 38px;
+    height: 17px;
+  }
+}
+
+.white_block,
+.white_block__my {
+  width: 100%;
+  height: 100%;
+  border-radius: 10px;
+  background-color: #fff;
+
+  &__my {
+    border-radius: 5px;
+  }
+}
+
+.container,
+.container__my {
+  width: 100%;
+  height: 100%;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+
+  &__my {
+    border-radius: 5px;
+  }
+}
+
+.container__top,
+.container__top__my {
+  gap: 10px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+
+  &__my {
+    gap: 5px;
+  }
+}
+
+.container__bottom,
+.container__bottom__my {
+  margin: 0 15px 15px 15px;
+  padding: 10px;
+  border-radius: 6px;
+  border: 1px solid #eae6e6;
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+  z-index: 1;
+
+  > div {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  &__my {
+    margin: 0 8px 7px 8px;
+    padding: 8px;
+    border-radius: 3px;
+  }
+}
+
+.type_containter,
+.type_containter__my {
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+
+  &__my {
+    top: 6px;
+    right: 6px;
+    gap: 3px;
+  }
+}
+
+.pokemon_image {
+  width: 150px;
+  height: 150px;
+  z-index: 1;
+}
+
+.pokemon_image__my {
+  width: 78px;
+  height: 78px;
+}
+
+.pokemon_intro,
+.pokemon_intro__my {
+  gap: 7px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  &__my {
+    gap: 4px;
+  }
+}
+
+.pokemon_name,
+.pokemon_name__my {
+  display: flex;
+  gap: 5px;
+
+  &__my {
+    gap: 3px;
+  }
+}
+
+.status,
+.status__my {
+  font-size: 13px;
+  display: flex;
+  flex-direction: column;
+  width: 49%;
+
+  &__my {
+    font-size: 6px;
+
+    & span {
+      color: #000;
+    }
+  }
+}
+
+.logo {
+  width: 70px;
+}
+
+.logo__my {
+  width: 35px;
+}
+
+.total_stat {
+  align-items: flex-end;
+  display: flex;
+  gap: 5px;
+}
+
+.text_small,
+.text_small__my {
+  font-weight: 500;
+  font-size: 13px;
+
+  &__my {
+    font-size: 8px;
+    color: #000;
+  }
+}
+
+.text_large,
+.text_large__my {
+  font-size: 25px;
+  font-weight: 700;
+
+  &__my {
+    font-size: 13px;
+    color: #000;
+  }
 }
 
+@each $type, $color in $type-colors {
+  .wrapper.#{$type} {
+    background-color: $color;
+  }
+
+  .pokemon_number.#{$type} {
+    background-color: $color;
+  }
+
+  .container.#{$type} {
+    background-color: rgba($color, 0.3);
+  }
+
+  .wrapper__my.#{$type} {
+    background-color: $color;
+  }
+
+  .pokemon_number__my.#{$type} {
+    background-color: $color;
+    color: #fff;
+  }
+
+  .container__my.#{$type} {
+    background-color: rgba($color, 0.3);
+  }
+}
+@import 'src/styles/theme.scss';
+
+.wrapper,
+.wrapper__my {
+  width: 350px;
+  height: 485px;
+  border-radius: 23px;
+  border: 3px solid #000;
+  padding: 15px;
+  position: relative;
+
+  &__my {
+    width: 183px;
+    height: 253px;
+    border-radius: 12px;
+    border: 2px solid #000;
+    padding: 8px;
+  }
+}
+
+.pokemon_number,
 .pokemon_number__my {
-  font-size: 8px;
+  font-size: 15px;
   font-weight: 700;
   color: #fff;
   display: flex;
@@ -43,159 +272,168 @@
   justify-content: center;
   top: 0;
   left: 0;
-  width: 38px;
-  height: 17px;
+  width: 74px;
+  height: 34px;
   position: absolute;
   border-radius: 23px 0px;
+  z-index: 1;
+
+  &__my {
+    font-size: 8px;
+    width: 38px;
+    height: 17px;
+  }
 }
 
-.white_block {
+.white_block,
+.white_block__my {
   width: 100%;
   height: 100%;
   border-radius: 10px;
   background-color: #fff;
+  position: relative;
+
+  &__my {
+    border-radius: 5px;
+  }
 }
 
-.white_block__my {
-  width: 100%;
-  height: 100%;
-  border-radius: 5px;
-  background-color: #fff;
+.monster_ball_left,
+.monster_ball_left__my {
+  position: absolute;
+  left: 0;
+  top: 0;
+
+  &__my {
+    transform: scale(0.5) translate(-50%, -50%);
+  }
+}
+
+.monster_ball_right,
+.monster_ball_right__my {
+  position: absolute;
+  top: 40%;
+  right: 0;
+
+  &__my {
+    transform: scale(0.5) translate(50%, -50%);
+  }
 }
 
-.container {
+.container,
+.container__my {
   width: 100%;
   height: 100%;
   border-radius: 10px;
   display: flex;
   flex-direction: column;
 
-  &__top {
-    gap: 10px;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    position: relative;
-  }
-
-  &__bottom {
-    margin: 0 15px 15px 15px;
-    padding: 10px;
-    border-radius: 6px;
-    border: 1px solid #eae6e6;
-    background: #fff;
-    display: flex;
-    flex-direction: column;
-
-    > div {
-      display: flex;
-      justify-content: space-between;
-    }
+  &__my {
+    border-radius: 5px;
   }
 }
 
-.container__my {
-  width: 100%;
+.container__top,
+.container__top__my {
+  gap: 10px;
   height: 100%;
-  border-radius: 5px;
   display: flex;
   flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: relative;
 
-  &__top {
+  &__my {
     gap: 5px;
-    height: 100%;
+  }
+}
+
+.container__bottom,
+.container__bottom__my {
+  margin: 0 15px 15px 15px;
+  padding: 10px;
+  border-radius: 6px;
+  border: 1px solid #eae6e6;
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+  z-index: 1;
+
+  > div {
     display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    position: relative;
+    justify-content: space-between;
   }
 
-  &__bottom {
+  &__my {
     margin: 0 8px 7px 8px;
     padding: 8px;
     border-radius: 3px;
-    border: 1px solid #eae6e6;
-    background: #fff;
-    display: flex;
-    flex-direction: column;
-
-    > div {
-      display: flex;
-      justify-content: space-between;
-    }
   }
 }
 
-.type_containter {
+.type_containter,
+.type_containter__my {
   position: absolute;
   top: 15px;
   right: 15px;
   display: flex;
   flex-direction: column;
   gap: 5px;
-}
 
-.type_containter__my {
-  position: absolute;
-  top: 6px;
-  right: 6px;
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
+  &__my {
+    top: 6px;
+    right: 6px;
+    gap: 3px;
+  }
 }
 
 .pokemon_image {
   width: 150px;
   height: 150px;
+  z-index: 1;
 }
 
 .pokemon_image__my {
   width: 78px;
   height: 78px;
+  z-index: 1;
 }
 
-.pokemon_intro {
+.pokemon_intro,
+.pokemon_intro__my {
   gap: 7px;
   display: flex;
   flex-direction: column;
   align-items: center;
-}
 
-.pokemon_intro__my {
-  gap: 4px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+  &__my {
+    gap: 4px;
+  }
 }
 
-.pokemon_name {
+.pokemon_name,
+.pokemon_name__my {
   display: flex;
   gap: 5px;
-}
 
-.pokemon_name__my {
-  display: flex;
-  gap: 3px;
+  &__my {
+    gap: 3px;
+  }
 }
 
-.status {
+.status,
+.status__my {
   font-size: 13px;
   display: flex;
   flex-direction: column;
   width: 49%;
-}
 
-.status__my {
-  font-size: 6px;
-  display: flex;
-  flex-direction: column;
-  width: 49%;
+  &__my {
+    font-size: 6px;
 
-  & span {
-    color: #000;
+    & span {
+      color: #000;
+    }
   }
 }
 
@@ -213,26 +451,24 @@
   gap: 5px;
 }
 
-.text {
-  &__small {
-    font-size: 13px;
-    font-weight: 500;
-  }
+.text_small,
+.text_small__my {
+  font-weight: 500;
+  font-size: 13px;
 
-  &__small__my {
+  &__my {
     font-size: 8px;
-    font-weight: 500;
     color: #000;
   }
+}
 
-  &__large {
-    font-size: 25px;
-    font-weight: 700;
-  }
+.text_large,
+.text_large__my {
+  font-size: 25px;
+  font-weight: 700;
 
-  &__large__my {
+  &__my {
     font-size: 13px;
-    font-weight: 700;
     color: #000;
   }
 }
diff --git a/src/components/cardEdit/cards.module.scss b/src/components/cardEdit/cards.module.scss
deleted file mode 100644
index 9dd8c18..0000000
--- a/src/components/cardEdit/cards.module.scss
+++ /dev/null
@@ -1,373 +0,0 @@
-.card_page_wrapper {
-  width: 100%;
-  display: flex;
-  gap: 40px;
-  flex-direction: column;
-  align-items: center;
-}
-
-.product_card_wrapper {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-
-  > span {
-    margin-bottom: 20px;
-  }
-}
-
-.product_card_container_decoration {
-  &__top {
-    width: 100%;
-    height: 21px;
-    border-radius: 15px 15px 0px 0px;
-    border: 3px solid #000;
-    background: #ff5050;
-  }
-
-  &__bottom {
-    height: 21px;
-    border-radius: 0px 0px 15px 15px;
-    border: 3px solid #000;
-    background: #0f60ce;
-  }
-}
-
-.product_card_container {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  gap: 10%;
-  height: 588px;
-  border-left: 3px solid #000;
-  border-right: 3px solid #000;
-  background: #fff;
-}
-
-.select_wrapper {
-  width: 100%;
-  justify-content: space-between;
-  display: flex;
-}
-
-.pokemon_select_wrapper {
-  display: flex;
-  flex-direction: column;
-  border-radius: 10px;
-  border: 1px solid #ebebeb;
-  background-color: #fff;
-  padding: 17px 21px;
-  justify-content: space-between;
-  width: fit-content;
-  gap: 10px;
-
-  div {
-    display: flex;
-    gap: 15px;
-  }
-}
-
-.pokemon_select_wrapper > div > .border_button {
-  width: 120px;
-  height: 204px;
-  border-radius: 15px;
-  border: 3px solid #0f60ce;
-  font-size: 21px;
-  font-weight: 500;
-}
-
-.pokemon_select_wrapper > div > .page_button {
-  cursor: pointer;
-  width: 32px;
-  border: none;
-  outline: none;
-  border-radius: 10px;
-  color: #b5b5b5;
-  background-color: #f8f8f8;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 20px;
-}
-
-.pokemon_select_wrapper > div > .title {
-  font-size: 28px;
-  font-weight: 500;
-}
-
-.border_button {
-  cursor: pointer;
-  outline: none;
-  color: #0f60ce;
-  border: 2px solid #0f60ce;
-  background-color: #fff;
-  color: #0f60ce;
-  font-weight: 500;
-  font-family: GmarketSansMedium;
-  transition: 0.2s ease;
-
-  &:hover {
-    background-color: #0f60ce;
-    color: #fff;
-  }
-}
-
-.cards {
-  &__row_cards {
-    display: flex;
-    gap: 15px;
-
-    &__column {
-      gap: 15px;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-    }
-
-    &__card {
-      width: 121px;
-      height: 121px;
-      border-radius: 15px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      border: 2.3px solid #e5e5e5;
-      background: #fff;
-
-      img {
-        width: 100px;
-        height: 100px;
-      }
-    }
-
-    span {
-      font-size: 18px;
-      font-weight: 400;
-      margin-bottom: 10px;
-    }
-
-    button {
-      width: 99px;
-      height: 34px;
-      border-radius: 8px;
-      font-size: 13px;
-    }
-  }
-}
-
-.editor_wrapper {
-  justify-content: space-between;
-  display: flex;
-  flex-direction: column;
-  width: 350px;
-  height: 485px;
-
-  &__top {
-    display: flex;
-    flex-direction: column;
-    gap: 15px;
-    height: 80%;
-  }
-
-  &__bottom {
-    display: flex;
-    flex-direction: column;
-    gap: 15px;
-    height: 100%;
-    justify-content: flex-end;
-  }
-
-  ul {
-    margin-left: 10%;
-  }
-}
-
-.pokemon_name_editor {
-  display: flex;
-  flex-direction: column;
-  height: 60%;
-  justify-content: space-between;
-
-  > li {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    button {
-      width: 51px;
-      height: 34px;
-      border-radius: 8px;
-    }
-
-    > div {
-      display: flex;
-      gap: 15px;
-      align-items: center;
-    }
-  }
-}
-
-.name_input {
-  cursor: text;
-  text-align: end;
-  outline: none;
-  border: none;
-  color: #000;
-  font-size: 18px;
-  font-weight: 500;
-  font-family: GmarketSansMedium;
-}
-
-.status_title {
-  display: flex;
-  justify-content: space-between;
-
-  > div {
-    display: flex;
-    gap: 8px;
-  }
-}
-
-.status_bar_container {
-  display: flex;
-  flex-direction: column;
-
-  > li {
-    display: flex;
-    justify-content: space-between;
-
-    > div {
-      width: 70%;
-    }
-  }
-}
-
-.title {
-  font-size: 28px;
-  font-weight: 700;
-}
-
-.list_name {
-  font-size: 18px;
-}
-
-.search_form_wrapper {
-  width: 100%;
-  height: 100px;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  position: relative;
-  align-items: flex-start;
-}
-
-.search__wrapper {
-  z-index: 3;
-  position: absolute;
-  top: 40px;
-  left: 0;
-  background-color: #fff;
-  padding: 15px 20px;
-  min-height: 71px;
-  border-radius: 15px;
-  border: 2.3px solid #000;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 20px;
-}
-
-.search__inner {
-  display: flex;
-  width: 365px;
-  height: 36px;
-  border-bottom: 1px solid #000;
-}
-
-.search__input {
-  width: 100%;
-  outline: none;
-  border: none;
-  background-color: transparent;
-}
-
-.search__button {
-  outline: none;
-  background-color: transparent;
-  border: none;
-}
-
-.dropdown_wrapper {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 20px;
-}
-
-.dropdown__container {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(110px, 1fr));
-  gap: 10px;
-}
-
-.dropdown__list {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 7px;
-
-  div {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 4px;
-    border: 1px solid #e3e3e3;
-    width: 110px;
-    height: 110px;
-
-    img {
-      width: 80%;
-    }
-  }
-
-  span {
-    font-size: 18px;
-    font-weight: 400;
-  }
-}
-
-.pagination_wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-}
-
-.pagination_button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  border: none;
-  outline: none;
-  background-color: transparent;
-  width: 23px;
-  height: 20px;
-}
-
-.button__action {
-  font-size: 18px;
-  font-weight: 700;
-}
-
-.arrow_button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: transparent;
-  width: 30px;
-  height: 30px;
-  border: 1px solid;
-  border-radius: 10px;
-}
diff --git a/src/components/cardEdit/CardPage.tsx b/src/components/cardMaker/CardEditPage.tsx
similarity index 66%
rename from src/components/cardEdit/CardPage.tsx
rename to src/components/cardMaker/CardEditPage.tsx
index 1db9e57..f5db2d7 100644
--- a/src/components/cardEdit/CardPage.tsx
+++ b/src/components/cardMaker/CardEditPage.tsx
@@ -1,7 +1,7 @@
 import useSelectedPokemonForCard from '@/store/useSelectedPokemonForCard';
-import CardsRowLike from '@/components/cardEdit/CardsRowLike';
-import CardsRowRandom from '@/components/cardEdit/CardsRowRandom';
-import styles from './cards.module.scss';
+import SelectPokemonLike from '@/components/cardMaker/selectPokemon/SelectPokemonLike';
+import SelectPokemonRandom from '@/components/cardMaker/selectPokemon/SelectPokemonRandom';
+import styles from './cardEditPage.module.scss';
 import PokemonCard from '../card/PokemonCard';
 import CardEditor from './CardEditor';
 import Inner from '../Inner';
@@ -10,10 +10,10 @@ import useUserStore from '@/store/useUsersStore';
 import { MouseEvent } from 'react';
 import { filteredPokemonData } from '@/lib/type';
 import { useGetAllPokemon } from '@/query/qeuries';
-import PokemonSearch from './PokemonSearch';
-import { useEffect } from 'react'; // 추가
+import SearchPokemon from './searchPokemon/SearchPokemon';
+import { useEffect } from 'react';
 
-const CardPage = () => {
+const CardEditPage = () => {
   const { user } = useUserStore();
   const {
     pokemonData,
@@ -66,29 +66,38 @@ const CardPage = () => {
     }
   };
 
+  const pokemonNickName = {
+    pokemonNickName1,
+    pokemonNickName2,
+    pokemonName,
+  };
+
   return (
     <Inner>
-      <div className={styles.card_page_wrapper}>
-        <PokemonSearch />
-        <div className={styles.product_card_wrapper}>
+      <div className={styles.wrapper}>
+        <SearchPokemon />
+        <div className={styles.card_wrapper}>
           <span className={styles.title}>카드 제작</span>
-          <div className={styles.product_card_container_decoration__top}></div>
-          <div className={styles.product_card_container}>
-            <PokemonCard pokemonCardData={filteredPokemonData} />
-            <CardEditor />
+          <div className={styles.card_decoration}>
+            <div className={styles.card_container}>
+              <PokemonCard
+                pokemonCardData={filteredPokemonData}
+                pokemonNickName={pokemonNickName}
+              />
+              <CardEditor />
+            </div>
           </div>
-          <div
-            className={styles.product_card_container_decoration__bottom}
-          ></div>
         </div>
         <div className={styles.select_wrapper}>
-          <CardsRowLike />
-          <CardsRowRandom />
+          <SelectPokemonLike />
+          <SelectPokemonRandom />
         </div>
+        <button className={styles.save_button} onClick={onSave}>
+          저장하기
+        </button>
       </div>
-      <button onClick={onSave}>저장하기</button>
     </Inner>
   );
 };
 
-export default CardPage;
+export default CardEditPage;
diff --git a/src/components/cardEdit/CardEditor.tsx b/src/components/cardMaker/CardEditor.tsx
similarity index 76%
rename from src/components/cardEdit/CardEditor.tsx
rename to src/components/cardMaker/CardEditor.tsx
index 7c1841f..aacc1d5 100644
--- a/src/components/cardEdit/CardEditor.tsx
+++ b/src/components/cardMaker/CardEditor.tsx
@@ -1,10 +1,5 @@
-import {
-  POKEMON_NICKNAME1,
-  POKEMON_NICKNAME2,
-  POKEMON_STATS,
-  POKEMON_TYPES,
-} from '@/lib/constants';
-import styles from './cards.module.scss';
+import { POKEMON_STATS, POKEMON_TYPES } from '@/lib/constants';
+import styles from './cardEditor.module.scss';
 import useSelectedPokemonForCard from '@/store/useSelectedPokemonForCard';
 import StatusBar from '../detail/StatusBar';
 import Plate from '../plate/Plate';
@@ -19,9 +14,8 @@ const CardEditor = () => {
     pokemonNickName1,
     pokemonNickName2,
     pokemonName,
-    setPokemonNickName1,
-    setPokemonNickName2,
     setPokemonName,
+    generateRandomNicknames,
   } = useSelectedPokemonForCard();
 
   useEffect(() => {
@@ -30,11 +24,8 @@ const CardEditor = () => {
   }, [pokemonData, setPokemonName]);
 
   useEffect(() => {
-    const randomIndex1 = Math.floor(Math.random() * POKEMON_NICKNAME1.length);
-    const randomIndex2 = Math.floor(Math.random() * POKEMON_NICKNAME2.length);
-    setPokemonNickName1(POKEMON_NICKNAME1[randomIndex1]);
-    setPokemonNickName2(POKEMON_NICKNAME2[randomIndex2]);
-  }, [setPokemonNickName1, setPokemonNickName2]);
+    generateRandomNicknames();
+  }, [generateRandomNicknames]);
 
   const renderStatusBar = (baseStat: Stat, index: number, statName: string) => (
     <li key={index}>
@@ -53,10 +44,10 @@ const CardEditor = () => {
   );
 
   return (
-    <div className={styles.editor_wrapper}>
-      <div className={styles.editor_wrapper__top}>
+    <div className={styles.wrapper}>
+      <div className={styles.wrapper__top}>
         <span className={styles.title}>몬스터 이름</span>
-        <ul className={styles.pokemon_name_editor}>
+        <ul className={styles.name_editor}>
           <li>
             <span className={styles.list_name}>별칭 1</span>
             <div>
@@ -82,7 +73,7 @@ const CardEditor = () => {
           </li>
         </ul>
       </div>
-      <div className={styles.editor_wrapper__bottom}>
+      <div className={styles.wrapper__bottom}>
         <div className={styles.status_title}>
           <span className={styles.title}>스테이터스</span>
           <div>{pokemonData?.types.map(renderPlate)}</div>
diff --git a/src/components/cardMaker/cardEditPage.module.scss b/src/components/cardMaker/cardEditPage.module.scss
new file mode 100644
index 0000000..b841119
--- /dev/null
+++ b/src/components/cardMaker/cardEditPage.module.scss
@@ -0,0 +1,77 @@
+.wrapper {
+  width: 100%;
+  display: flex;
+  gap: 40px;
+  flex-direction: column;
+  align-items: center;
+}
+
+.card_wrapper {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.card_decoration {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+
+  &::before {
+    content: '';
+    width: 100%;
+    height: 21px;
+    border-radius: 15px 15px 0px 0px;
+    box-sizing: border-box;
+    border: 3px solid #000;
+    background: #ff5050;
+  }
+
+  &::after {
+    content: '';
+    width: 100%;
+    height: 21px;
+    box-sizing: border-box;
+    border-radius: 0px 0px 15px 15px;
+    border: 3px solid #000;
+    background: #0f60ce;
+  }
+}
+
+.card_container {
+  border-left: 3px solid #000;
+  border-right: 3px solid #000;
+  background: #fff;
+  width: 100%;
+  height: 588px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10%;
+}
+
+.select_wrapper {
+  width: 100%;
+  justify-content: space-between;
+  display: flex;
+}
+
+.save_button {
+  color: #fff;
+  text-align: center;
+  font-size: 21px;
+  font-weight: 500;
+  width: 280px;
+  height: 60px;
+  border-radius: 8px;
+  background-color: #0f60ce;
+  border: none;
+  cursor: pointer;
+  font-family: GmarketSansMedium;
+}
+
+.title {
+  font-size: 28px;
+  font-weight: 700;
+}
diff --git a/src/components/cardMaker/cardEditor.module.scss b/src/components/cardMaker/cardEditor.module.scss
new file mode 100644
index 0000000..f165622
--- /dev/null
+++ b/src/components/cardMaker/cardEditor.module.scss
@@ -0,0 +1,93 @@
+.wrapper {
+  justify-content: space-between;
+  display: flex;
+  flex-direction: column;
+  width: 350px;
+  height: 485px;
+}
+
+.wrapper__top,
+.wrapper__bottom {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  height: 100%;
+
+  &__bottom {
+    justify-content: flex-end;
+  }
+
+  ul {
+    margin-left: 10%;
+  }
+}
+
+.name_editor {
+  display: flex;
+  flex-direction: column;
+  flex: 0.8;
+  justify-content: space-between;
+
+  > li {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    button {
+      width: 51px;
+      height: 34px;
+      border-radius: 8px;
+    }
+
+    > div {
+      display: flex;
+      gap: 15px;
+      align-items: center;
+    }
+  }
+}
+
+.name_input {
+  cursor: text;
+  text-align: end;
+  outline: none;
+  border: none;
+  color: #000;
+  font-size: 18px;
+  font-weight: 500;
+  font-family: GmarketSansMedium;
+}
+
+.status_title {
+  display: flex;
+  justify-content: space-between;
+
+  > div {
+    display: flex;
+    gap: 8px;
+  }
+}
+
+.status_bar_container {
+  display: flex;
+  flex-direction: column;
+
+  > li {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    > div {
+      width: 70%;
+    }
+  }
+}
+
+.title {
+  font-size: 28px;
+  font-weight: 700;
+}
+
+.list_name {
+  font-size: 18px;
+}
diff --git a/src/components/cardEdit/SearchDropdown.tsx b/src/components/cardMaker/searchPokemon/SearchDropdown.tsx
similarity index 84%
rename from src/components/cardEdit/SearchDropdown.tsx
rename to src/components/cardMaker/searchPokemon/SearchDropdown.tsx
index 33ea855..188a0ca 100644
--- a/src/components/cardEdit/SearchDropdown.tsx
+++ b/src/components/cardMaker/searchPokemon/SearchDropdown.tsx
@@ -1,4 +1,4 @@
-import styles from './cards.module.scss';
+import styles from './search.module.scss';
 import useSelectedPokemonForCard from '@/store/useSelectedPokemonForCard';
 import { PokemonType } from '@/lib/type';
 import { useState } from 'react';
@@ -6,7 +6,6 @@ import { POKEMON_NAME } from '@/lib/pokemonName';
 import { reverseObject } from '@/lib/util/reverseObject';
 import { IoChevronForward } from '@react-icons/all-files/io5/IoChevronForward';
 import { IoChevronBack } from '@react-icons/all-files/io5/IoChevronBack';
-import { POKEMON_NICKNAME1, POKEMON_NICKNAME2 } from '@/lib/constants';
 
 interface SearchDropdownProps {
   searchResults: (PokemonType | undefined)[] | null;
@@ -14,16 +13,13 @@ interface SearchDropdownProps {
 }
 
 const SearchDropdown = ({ searchResults, setIsOpen }: SearchDropdownProps) => {
-  const { setPokemonNickName1, setPokemonNickName2, setPokemonData } =
+  const { setPokemonData, generateRandomNicknames } =
     useSelectedPokemonForCard();
   const [currentPage, setCurrentPage] = useState(1);
   const POKEMONS_PER_PAGE = 12;
 
   const handleClick = (pokemon: PokemonType | null) => {
-    const randomIndex1 = Math.floor(Math.random() * POKEMON_NICKNAME1.length);
-    const randomIndex2 = Math.floor(Math.random() * POKEMON_NICKNAME2.length);
-    setPokemonNickName1(POKEMON_NICKNAME1[randomIndex1]);
-    setPokemonNickName2(POKEMON_NICKNAME2[randomIndex2]);
+    generateRandomNicknames();
     setPokemonData(pokemon);
     setIsOpen(false);
   };
@@ -52,7 +48,7 @@ const SearchDropdown = ({ searchResults, setIsOpen }: SearchDropdownProps) => {
         key={pageNumber}
         onClick={() => setCurrentPage(pageNumber)}
         className={`${styles.pagination_button} ${
-          currentPage === pageNumber ? styles.button__action : ''
+          currentPage === pageNumber ? styles.action : ''
         }`}
       >
         {pageNumber}
@@ -80,10 +76,10 @@ const SearchDropdown = ({ searchResults, setIsOpen }: SearchDropdownProps) => {
 
   return (
     <div className={styles.dropdown_wrapper}>
-      <ul className={styles.dropdown__container}>
+      <ul className={styles.dropdown_container}>
         {currentPagePokemons?.map((pokemon: PokemonType | undefined) => (
           <li
-            className={styles.dropdown__list}
+            className={styles.dropdown_list}
             key={pokemon?.id}
             onClick={() => handleClick(pokemon ? pokemon : null)}
           >
diff --git a/src/components/cardEdit/PokemonSearch.tsx b/src/components/cardMaker/searchPokemon/SearchPokemon.tsx
similarity index 88%
rename from src/components/cardEdit/PokemonSearch.tsx
rename to src/components/cardMaker/searchPokemon/SearchPokemon.tsx
index 11bf520..7821ccf 100644
--- a/src/components/cardEdit/PokemonSearch.tsx
+++ b/src/components/cardMaker/searchPokemon/SearchPokemon.tsx
@@ -1,5 +1,5 @@
 import { FormEvent, useState, useMemo, useRef, useEffect } from 'react';
-import styles from './cards.module.scss';
+import styles from './search.module.scss';
 import { POKEMON_NAME } from '@/lib/pokemonName';
 import { reverseObject } from '@/lib/util/reverseObject';
 import { POKEMON_TYPES } from '@/lib/constants';
@@ -8,7 +8,7 @@ import { IoSearch } from '@react-icons/all-files/io5/IoSearch';
 import { PokemonType, TypesType } from '@/lib/type';
 import SearchDropdown from './SearchDropdown';
 
-const PokemonSearch = () => {
+const SearchPokemon = () => {
   const [text, setText] = useState<string>('');
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const wrapperRef = useRef<HTMLDivElement>(null);
@@ -61,16 +61,16 @@ const PokemonSearch = () => {
   return (
     <div className={styles.search_form_wrapper}>
       <span className={styles.title}>포켓몬 검색하기</span>
-      <form className={styles.search__wrapper} onSubmit={onSubmit}>
-        <label className={styles.search__inner}>
+      <form className={styles.search_wrapper} onSubmit={onSubmit}>
+        <label className={styles.search_container}>
           <input
             onChange={(event) => setText(event.target.value)}
             value={text}
             type="text"
             placeholder="포켓몬 이름, 타입을 입력해 주세요"
-            className={styles.search__input}
+            className={styles.input}
           />
-          <button type="submit" className={styles.search__button}>
+          <button type="submit" className={styles.submit_button}>
             <IoSearch />
           </button>
         </label>
@@ -87,4 +87,4 @@ const PokemonSearch = () => {
   );
 };
 
-export default PokemonSearch;
+export default SearchPokemon;
diff --git a/src/components/cardMaker/searchPokemon/search.module.scss b/src/components/cardMaker/searchPokemon/search.module.scss
new file mode 100644
index 0000000..9e28778
--- /dev/null
+++ b/src/components/cardMaker/searchPokemon/search.module.scss
@@ -0,0 +1,129 @@
+// SearchPokemon
+
+.search_form_wrapper {
+  width: 100%;
+  height: 100px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  position: relative;
+  align-items: flex-start;
+}
+
+.search_wrapper {
+  z-index: 3;
+  position: absolute;
+  top: 40px;
+  left: 0;
+  background-color: #fff;
+  padding: 15px 20px;
+  min-height: 71px;
+  border-radius: 15px;
+  border: 2.3px solid #000;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+}
+
+.search_container {
+  display: flex;
+  width: 365px;
+  height: 36px;
+  border-bottom: 1px solid #000;
+}
+
+.input {
+  width: 100%;
+  outline: none;
+  border: none;
+  background-color: transparent;
+}
+
+.submit_button {
+  outline: none;
+  background-color: transparent;
+  border: none;
+}
+
+// SearchDropdown
+
+.dropdown_wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+}
+
+.dropdown_container {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(110px, 1fr));
+  gap: 10px;
+}
+
+.dropdown_list {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 7px;
+
+  div {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    border: 1px solid #e3e3e3;
+    width: 110px;
+    height: 110px;
+
+    img {
+      width: 80%;
+    }
+  }
+
+  span {
+    font-size: 18px;
+    font-weight: 400;
+  }
+}
+
+.pagination_wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+}
+
+.pagination_button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border: none;
+  outline: none;
+  background-color: transparent;
+  width: 23px;
+  height: 20px;
+}
+
+.action {
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.arrow_button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+  width: 30px;
+  height: 30px;
+  border: 1px solid;
+  border-radius: 10px;
+}
+
+.title {
+  font-size: 28px;
+  font-weight: 700;
+}
diff --git a/src/components/cardEdit/CardsRowLayout.tsx b/src/components/cardMaker/selectPokemon/SelectPokemonLayout.tsx
similarity index 63%
rename from src/components/cardEdit/CardsRowLayout.tsx
rename to src/components/cardMaker/selectPokemon/SelectPokemonLayout.tsx
index a8371d6..876f742 100644
--- a/src/components/cardEdit/CardsRowLayout.tsx
+++ b/src/components/cardMaker/selectPokemon/SelectPokemonLayout.tsx
@@ -1,38 +1,34 @@
 import { PokemonType } from '@/lib/type';
-import styles from './cards.module.scss';
+import styles from './select.module.scss';
 import { POKEMON_NAME } from '@/lib/pokemonName';
 import { reverseObject } from '@/lib/util/reverseObject';
 import useSelectedPokemonForCard from '@/store/useSelectedPokemonForCard';
 import { useCallback } from 'react';
-import { POKEMON_NICKNAME1, POKEMON_NICKNAME2 } from '@/lib/constants';
 
-interface CardsRowLayoutProps {
+interface SelectPokemonLayoutProps {
   pokemonArray: (PokemonType | null)[];
 }
 
-const CardsRowLayout = ({ pokemonArray }: CardsRowLayoutProps) => {
-  const { setPokemonNickName1, setPokemonNickName2, setPokemonData } =
+const SelectPokemonLayout = ({ pokemonArray }: SelectPokemonLayoutProps) => {
+  const { setPokemonData, generateRandomNicknames } =
     useSelectedPokemonForCard();
 
   const handlePokemonSelection = useCallback(
     (pokemon: PokemonType | null) => {
+      generateRandomNicknames();
       pokemon && setPokemonData(pokemon);
-      const randomIndex1 = Math.floor(Math.random() * POKEMON_NICKNAME1.length);
-      const randomIndex2 = Math.floor(Math.random() * POKEMON_NICKNAME2.length);
-      setPokemonNickName1(POKEMON_NICKNAME1[randomIndex1]);
-      setPokemonNickName2(POKEMON_NICKNAME2[randomIndex2]);
     },
-    [setPokemonData, setPokemonNickName1, setPokemonNickName2],
+    [setPokemonData, generateRandomNicknames],
   );
 
   return (
-    <div className={styles.cards__row_cards}>
+    <div className={styles.layout_wrapper}>
       {pokemonArray.map((pokemonData, index) => (
         <div
           key={pokemonData ? pokemonData.id : index}
-          className={styles.cards__row_cards__column}
+          className={styles.layout_container}
         >
-          <div className={styles.cards__row_cards__card}>
+          <div className={styles.image}>
             {pokemonData ? (
               <img
                 src={
@@ -62,4 +58,4 @@ const CardsRowLayout = ({ pokemonArray }: CardsRowLayoutProps) => {
   );
 };
 
-export default CardsRowLayout;
+export default SelectPokemonLayout;
diff --git a/src/components/cardEdit/CardsRowLike.tsx b/src/components/cardMaker/selectPokemon/SelectPokemonLike.tsx
similarity index 85%
rename from src/components/cardEdit/CardsRowLike.tsx
rename to src/components/cardMaker/selectPokemon/SelectPokemonLike.tsx
index 41753ee..168d985 100644
--- a/src/components/cardEdit/CardsRowLike.tsx
+++ b/src/components/cardMaker/selectPokemon/SelectPokemonLike.tsx
@@ -1,11 +1,11 @@
-import CardsRowLayout from './CardsRowLayout';
-import styles from './cards.module.scss';
+import SelectPokemonLayout from './SelectPokemonLayout';
+import styles from './select.module.scss';
 import { IoChevronForward } from '@react-icons/all-files/io5/IoChevronForward';
 import { IoChevronBack } from '@react-icons/all-files/io5/IoChevronBack';
 import useLikedStore from '@/store/useLikedStore';
 import { useState, useMemo, useCallback } from 'react';
 
-const CardsRowLike = () => {
+const SelectPokemonLike = () => {
   const { pokemonData } = useLikedStore();
   const [index, setIndex] = useState(0);
 
@@ -39,7 +39,7 @@ const CardsRowLike = () => {
   }, [pokemonData, index]);
 
   return (
-    <div className={styles.pokemon_select_wrapper}>
+    <div className={styles.select_wrapper}>
       <span className={styles.title}>내가 찜한 포켓몬</span>
       <div>
         <button
@@ -49,7 +49,7 @@ const CardsRowLike = () => {
         >
           <IoChevronBack />
         </button>
-        <CardsRowLayout pokemonArray={likePokemonArray} />
+        <SelectPokemonLayout pokemonArray={likePokemonArray} />
         <button
           className={styles.page_button}
           onClick={nextSlide}
@@ -62,4 +62,4 @@ const CardsRowLike = () => {
   );
 };
 
-export default CardsRowLike;
+export default SelectPokemonLike;
diff --git a/src/components/cardEdit/CardsRowRandom.tsx b/src/components/cardMaker/selectPokemon/SelectPokemonRandom.tsx
similarity index 68%
rename from src/components/cardEdit/CardsRowRandom.tsx
rename to src/components/cardMaker/selectPokemon/SelectPokemonRandom.tsx
index f9f9cf5..f801a00 100644
--- a/src/components/cardEdit/CardsRowRandom.tsx
+++ b/src/components/cardMaker/selectPokemon/SelectPokemonRandom.tsx
@@ -1,14 +1,12 @@
 import { PokemonType } from '@/lib/type';
 import { useGetAllPokemon } from '@/query/qeuries';
 import { useCallback, useEffect, useState } from 'react';
-import CardsRowLayout from './CardsRowLayout';
-import styles from './cards.module.scss';
+import SelectPokemonLayout from './SelectPokemonLayout';
+import styles from './select.module.scss';
 
-const CardsRowRandom = () => {
+const SelectPokemonRandom = () => {
   const { data } = useGetAllPokemon(1017);
-  const [randomPokemonArray, setRandomPokemonArray] = useState<PokemonType[]>(
-    [],
-  );
+  const [randomPokemons, setRandomPokemons] = useState<PokemonType[]>([]);
 
   const getRandomPokemon = useCallback(() => {
     if (data && data.length > 0) {
@@ -20,7 +18,7 @@ const CardsRowRandom = () => {
         const randomPokemon = data[randomIndex];
         tempArray.push(randomPokemon);
       }
-      setRandomPokemonArray(tempArray);
+      setRandomPokemons(tempArray);
     }
   }, [data]);
 
@@ -29,10 +27,10 @@ const CardsRowRandom = () => {
   }, [getRandomPokemon]);
 
   return (
-    <div className={styles.pokemon_select_wrapper}>
+    <div className={styles.select_wrapper}>
       <span className={styles.title}>랜덤 포켓몬</span>
       <div>
-        <CardsRowLayout pokemonArray={randomPokemonArray} />
+        <SelectPokemonLayout pokemonArray={randomPokemons} />
         <button className={styles.border_button} onClick={getRandomPokemon}>
           랜덤
         </button>
@@ -41,4 +39,4 @@ const CardsRowRandom = () => {
   );
 };
 
-export default CardsRowRandom;
+export default SelectPokemonRandom;
diff --git a/src/components/cardMaker/selectPokemon/select.module.scss b/src/components/cardMaker/selectPokemon/select.module.scss
new file mode 100644
index 0000000..b9beb38
--- /dev/null
+++ b/src/components/cardMaker/selectPokemon/select.module.scss
@@ -0,0 +1,111 @@
+//SelectPokemonLayout
+
+.layout_wrapper {
+  display: flex;
+  gap: 15px;
+
+  span {
+    font-size: 18px;
+    font-weight: 400;
+    margin-bottom: 10px;
+  }
+
+  button {
+    width: 99px;
+    height: 34px;
+    border-radius: 8px;
+    font-size: 13px;
+  }
+}
+
+.layout_container {
+  gap: 15px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.image {
+  width: 121px;
+  height: 121px;
+  border-radius: 15px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 2.3px solid #e5e5e5;
+  background: #fff;
+
+  img {
+    width: 100px;
+    height: 100px;
+  }
+}
+
+// SelectPokemonLike, SelectPokemonRandom
+
+.select_wrapper {
+  display: flex;
+  flex-direction: column;
+  border-radius: 10px;
+  border: 1px solid #ebebeb;
+  background-color: #fff;
+  padding: 17px 21px;
+  justify-content: space-between;
+  width: fit-content;
+  gap: 10px;
+
+  div {
+    display: flex;
+    gap: 15px;
+  }
+}
+
+.select_wrapper > div > .border_button {
+  width: 120px;
+  height: 204px;
+  border-radius: 15px;
+  border: 3px solid #0f60ce;
+  font-size: 21px;
+  font-weight: 500;
+}
+
+.select_wrapper > div > .page_button {
+  cursor: pointer;
+  width: 32px;
+  border: none;
+  outline: none;
+  border-radius: 10px;
+  color: #b5b5b5;
+  background-color: #f8f8f8;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+}
+
+.select_wrapper > div > .title {
+  font-size: 28px;
+  font-weight: 500;
+}
+
+.border_button {
+  cursor: pointer;
+  outline: none;
+  color: #0f60ce;
+  border: 2px solid #0f60ce;
+  background-color: #fff;
+  color: #0f60ce;
+  font-weight: 500;
+  font-family: GmarketSansMedium;
+  transition: 0.2s ease;
+
+  &:hover {
+    background-color: #0f60ce;
+    color: #fff;
+  }
+}
+
+.title {
+  font-size: 28px;
+  font-weight: 700;
+}
diff --git a/src/components/detail/EvolutionChain.tsx b/src/components/detail/EvolutionChain.tsx
index c2e1ecb..4f6a517 100644
--- a/src/components/detail/EvolutionChain.tsx
+++ b/src/components/detail/EvolutionChain.tsx
@@ -1,5 +1,5 @@
 import { PokemonType } from '@/lib/type';
-import PokemonListElementLayout from '../list/PokemonListElementLayout';
+import PokemonDexElementLayout from '../dex/PokemonDexElementLayout';
 import styles from './Detail.module.scss';
 import { POKEMON_NAME } from '@/lib/pokemonName';
 import { reverseObject } from '@/lib/util/reverseObject';
@@ -96,7 +96,7 @@ const EvolutionChain = ({
                       {preEvolutionPokemon && (
                         <>
                           <div className={styles.evolves__pre__evolution}>
-                            <PokemonListElementLayout
+                            <PokemonDexElementLayout
                               data={preEvolutionPokemon}
                               className={styles.evolves__list}
                               onClick={() =>
@@ -113,7 +113,7 @@ const EvolutionChain = ({
                                 width={141}
                                 height={141}
                               />
-                            </PokemonListElementLayout>
+                            </PokemonDexElementLayout>
                             <div
                               className={styles.evolves__pre__evolution__name}
                             >
@@ -139,7 +139,7 @@ const EvolutionChain = ({
                             className={styles.evolves__final__evolution__box}
                             key={pokemonData.id}
                           >
-                            <PokemonListElementLayout
+                            <PokemonDexElementLayout
                               data={pokemonData}
                               className={styles.evolves__list}
                               onClick={() =>
@@ -156,7 +156,7 @@ const EvolutionChain = ({
                                 width={141}
                                 height={141}
                               />
-                            </PokemonListElementLayout>
+                            </PokemonDexElementLayout>
                             <div
                               className={styles.evolves__final__evolution__name}
                             >
@@ -178,7 +178,7 @@ const EvolutionChain = ({
                             key={pokemonData.id}
                             className={styles.evolves__common__evolution}
                           >
-                            <PokemonListElementLayout
+                            <PokemonDexElementLayout
                               data={pokemonData}
                               className={styles.evolves__list}
                               onClick={() =>
@@ -195,7 +195,7 @@ const EvolutionChain = ({
                                 width={141}
                                 height={141}
                               />
-                            </PokemonListElementLayout>
+                            </PokemonDexElementLayout>
                             <div
                               className={styles.evolves__pre__evolution__name}
                             >
@@ -223,7 +223,7 @@ const EvolutionChain = ({
                               key={pokemonData.id}
                               className={styles.evolves__pre__evolution}
                             >
-                              <PokemonListElementLayout
+                              <PokemonDexElementLayout
                                 data={pokemonData}
                                 className={styles.evolves__list}
                                 onClick={() =>
@@ -240,7 +240,7 @@ const EvolutionChain = ({
                                   width={141}
                                   height={141}
                                 />
-                              </PokemonListElementLayout>
+                              </PokemonDexElementLayout>
                               <div
                                 className={styles.evolves__pre__evolution__name}
                               >
@@ -261,7 +261,7 @@ const EvolutionChain = ({
                           className={styles.evolves__pre__evolution__box}
                         >
                           <div className={styles.evolves__pre__evolution}>
-                            <PokemonListElementLayout
+                            <PokemonDexElementLayout
                               data={pokemonData}
                               className={styles.evolves__list}
                               onClick={() =>
@@ -278,7 +278,7 @@ const EvolutionChain = ({
                                 width={141}
                                 height={141}
                               />
-                            </PokemonListElementLayout>
+                            </PokemonDexElementLayout>
                             <div
                               className={styles.evolves__pre__evolution__name}
                             >
diff --git a/src/components/list/PokemonList.module.scss b/src/components/dex/PokemonDex.module.scss
similarity index 87%
rename from src/components/list/PokemonList.module.scss
rename to src/components/dex/PokemonDex.module.scss
index 52fe0ef..21f5253 100644
--- a/src/components/list/PokemonList.module.scss
+++ b/src/components/dex/PokemonDex.module.scss
@@ -11,15 +11,10 @@
   flex-direction: column;
   padding: 10px 0;
   border-radius: 17px;
-  border: 2px solid #000;
+  border: 2px solid #e8e8e8;
   cursor: pointer;
   background-color: #fff;
-
-  &:hover {
-    cursor: pointer;
-    transition: transform 0.1s ease;
-    transform: scale(1.02);
-  }
+  cursor: pointer;
 
   .pokemon_number {
     width: 57px;
diff --git a/src/components/list/PokemonList.tsx b/src/components/dex/PokemonDex.tsx
similarity index 68%
rename from src/components/list/PokemonList.tsx
rename to src/components/dex/PokemonDex.tsx
index 9304feb..f23c93d 100644
--- a/src/components/list/PokemonList.tsx
+++ b/src/components/dex/PokemonDex.tsx
@@ -1,10 +1,10 @@
-import styles from './PokemonList.module.scss';
-import PokemonListElement from './PokemonListElement';
+import styles from './PokemonDex.module.scss';
+import PokemonDexElement from './PokemonDexElement';
 import Inner from '../Inner';
 import useFilteredPokemonData from '@/hook/useFilteredPokemonData';
 import useVisibleDataByScroll from '@/hook/useVisibleDataByScroll';
 
-const PokemonList = () => {
+const PokemonDex = () => {
   const filteredData = useFilteredPokemonData();
   const visibleData = useVisibleDataByScroll(filteredData);
 
@@ -13,7 +13,7 @@ const PokemonList = () => {
       <ul className={styles.pokemon_grid}>
         {visibleData.length
           ? visibleData.map((data) => (
-              <PokemonListElement data={data} key={data.name} />
+              <PokemonDexElement data={data} key={data.name} />
             ))
           : null}
       </ul>
@@ -21,4 +21,4 @@ const PokemonList = () => {
   );
 };
 
-export default PokemonList;
+export default PokemonDex;
diff --git a/src/components/list/PokemonListElement.tsx b/src/components/dex/PokemonDexElement.tsx
similarity index 78%
rename from src/components/list/PokemonListElement.tsx
rename to src/components/dex/PokemonDexElement.tsx
index 7a84e5d..e50fa1c 100644
--- a/src/components/list/PokemonListElement.tsx
+++ b/src/components/dex/PokemonDexElement.tsx
@@ -1,20 +1,20 @@
 import { useNavigate } from 'react-router-dom';
-import styles from './PokemonList.module.scss';
+import styles from './PokemonDex.module.scss';
 import { reverseObject } from '@/lib/util/reverseObject';
 import { POKEMON_NAME } from '@/lib/pokemonName';
 import { POKEMON_TYPES } from '@/lib/constants';
 import Plate from '../plate/Plate';
 import { PokemonType, TypesType } from '@/lib/type';
-import PokemonListElementLayout from './PokemonListElementLayout';
+import PokemonDexElementLayout from './PokemonDexElementLayout';
 
-interface PokemonListElementProp {
+interface PokemonDexElementProp {
   data: PokemonType;
 }
 
-const PokemonListElement = ({ data }: PokemonListElementProp) => {
+const PokemonDexElement = ({ data }: PokemonDexElementProp) => {
   const navigate = useNavigate();
   return (
-    <PokemonListElementLayout
+    <PokemonDexElementLayout
       data={data}
       onClick={() => {
         navigate(`/pokemon/${data.id}`);
@@ -42,8 +42,8 @@ const PokemonListElement = ({ data }: PokemonListElementProp) => {
           />
         ))}
       </div>
-    </PokemonListElementLayout>
+    </PokemonDexElementLayout>
   );
 };
 
-export default PokemonListElement;
+export default PokemonDexElement;
diff --git a/src/components/list/PokemonListElementLayout.tsx b/src/components/dex/PokemonDexElementLayout.tsx
similarity index 52%
rename from src/components/list/PokemonListElementLayout.tsx
rename to src/components/dex/PokemonDexElementLayout.tsx
index f3198f1..558fc77 100644
--- a/src/components/list/PokemonListElementLayout.tsx
+++ b/src/components/dex/PokemonDexElementLayout.tsx
@@ -1,22 +1,28 @@
 import { ReactNode } from 'react';
-import styles from './PokemonList.module.scss';
+import styles from './PokemonDex.module.scss';
 import { PokemonType } from '@/lib/type';
+import { motion } from 'framer-motion';
 
-interface PokemonListElementLayoutProp {
+interface PokemonDexElementLayoutProp {
   children: ReactNode;
   data: PokemonType;
   onClick?: () => void;
   className?: string;
 }
 
-const PokemonListElementLayout = ({
+const PokemonDexElementLayout = ({
   children,
   data,
   onClick,
   className,
-}: PokemonListElementLayoutProp) => {
+}: PokemonDexElementLayoutProp) => {
   return (
-    <li
+    <motion.li
+      whileHover={{
+        scale: 1.02,
+        boxShadow: `rgba(0, 0, 0, 0.24) 0px 3px 8px`,
+      }}
+      transition={{ duration: 0.3 }}
       className={`${styles.pokemon_list_element} ${className || ''}`}
       onClick={onClick}
     >
@@ -24,8 +30,8 @@ const PokemonListElementLayout = ({
         <span>{`No.${data.id}`}</span>
       </div>
       {children}
-    </li>
+    </motion.li>
   );
 };
 
-export default PokemonListElementLayout;
+export default PokemonDexElementLayout;
diff --git a/src/pages/card/card.tsx b/src/pages/card/card.tsx
index 2b956e3..914cafe 100644
--- a/src/pages/card/card.tsx
+++ b/src/pages/card/card.tsx
@@ -1,9 +1,9 @@
-import CardPage from '@/components/cardEdit/CardPage';
+import CardEditPage from '@/components/cardMaker/CardEditPage';
 
 const Card = () => {
   return (
     <section>
-      <CardPage />
+      <CardEditPage />
     </section>
   );
 };
diff --git a/src/pages/dex/Dex.tsx b/src/pages/dex/Dex.tsx
index 4b74ea7..68269e5 100644
--- a/src/pages/dex/Dex.tsx
+++ b/src/pages/dex/Dex.tsx
@@ -1,11 +1,11 @@
-import PokemonList from '@/components/list/PokemonList';
+import PokemonDex from '@/components/dex/PokemonDex';
 import FilterPlates from '@/components/plate/FilterPlates';
 
 const Dex = () => {
   return (
     <section>
       <FilterPlates />
-      <PokemonList />
+      <PokemonDex />
     </section>
   );
 };
diff --git a/src/store/useSelectedPokemonForCard.ts b/src/store/useSelectedPokemonForCard.ts
index 761eeb8..efb002f 100644
--- a/src/store/useSelectedPokemonForCard.ts
+++ b/src/store/useSelectedPokemonForCard.ts
@@ -1,3 +1,6 @@
+// useSelectedPokemonForCard.ts
+
+import { POKEMON_NICKNAME1, POKEMON_NICKNAME2 } from '@/lib/constants';
 import { PokemonType } from '@/lib/type';
 import { create } from 'zustand';
 
@@ -10,6 +13,7 @@ interface useSelectedPokemonForCard {
   setPokemonNickName1: (nickName: string) => void;
   pokemonNickName2: string | null;
   setPokemonNickName2: (nickName: string) => void;
+  generateRandomNicknames: () => void; // New function for generating random nicknames
 }
 
 const useSelectedPokemonForCard = create<useSelectedPokemonForCard>((set) => ({
@@ -21,5 +25,14 @@ const useSelectedPokemonForCard = create<useSelectedPokemonForCard>((set) => ({
   setPokemonNickName1: (nickName) => set({ pokemonNickName1: nickName }),
   pokemonNickName2: null,
   setPokemonNickName2: (nickName) => set({ pokemonNickName2: nickName }),
+
+  generateRandomNicknames: () => {
+    const randomIndex1 = Math.floor(Math.random() * POKEMON_NICKNAME1.length);
+    const randomIndex2 = Math.floor(Math.random() * POKEMON_NICKNAME2.length);
+
+    set({ pokemonNickName1: POKEMON_NICKNAME1[randomIndex1] });
+    set({ pokemonNickName2: POKEMON_NICKNAME2[randomIndex2] });
+  },
 }));
+
 export default useSelectedPokemonForCard;