diff --git a/pages/index.tsx b/pages/index.tsx
index e12963435..c878c7681 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -23,6 +23,7 @@ export default function Home() {
   return (
     <>
       <SelectCommon option={OPTION_TEST} placeholder="Sort By" onChange={handleChange} />
+      <SelectCommon option={OPTION_TEST} placeholder="Sort By" onChange={handleChange} type='custom'/>
     </>
   )
 }
diff --git a/src/components/common/SelectCommon/SelectCommon.module.scss b/src/components/common/SelectCommon/SelectCommon.module.scss
index 2e3e0e913..4809a46bb 100644
--- a/src/components/common/SelectCommon/SelectCommon.module.scss
+++ b/src/components/common/SelectCommon/SelectCommon.module.scss
@@ -2,6 +2,11 @@
 
 .select {
     background-color: var(--white);
+    .selectTrigger {
+        svg {
+            @apply transition-all duration-200;
+        }
+    }
     &.base {
         width: 20.6rem;
         .selectTrigger {
@@ -19,7 +24,7 @@
     &.default {
         .selectTrigger {
             @apply border-solid border border-current;
-        }   
+        }
     }
     &.custom {
         .selectTrigger {
@@ -34,13 +39,17 @@
             @apply block;
             animation: SelectAnimation 0.2s ease-out;
         }
+        .selectTrigger {
+            svg {
+                transform: rotate(180deg);
+            }
+        }
     }
 }
 .selectTrigger {
     @apply outline-none flex justify-between;
     color: var(--text-active);
     border-radius: 0.8rem;
-
 }
 .hoverWrapper {
     @apply hidden outline-none absolute z-10;
@@ -56,7 +65,7 @@
             width: 34.25rem;
         }
         &.default {
-            @apply border-solid border border-current; 
+            @apply border-solid border border-current;
         }
         &.custom {
             @apply border-2;
@@ -69,7 +78,6 @@
     }
 }
 
-
 @keyframes SelectAnimation {
     0% {
         opacity: 0;
diff --git a/src/components/common/SelectCommon/SelectCommon.tsx b/src/components/common/SelectCommon/SelectCommon.tsx
index 43b519ab1..9b8c88e24 100644
--- a/src/components/common/SelectCommon/SelectCommon.tsx
+++ b/src/components/common/SelectCommon/SelectCommon.tsx
@@ -44,7 +44,7 @@ const SelectCommon = ({ type = 'default', size = 'base', option, placeholder, on
                     >   
                         {
                             option.map(item => 
-                                <SelectOption itemName={item.name} value={item.value} onClick={changeSelectedName} size={size} selected={(selectedValue === item.value)} />
+                                <SelectOption key={item.value} itemName={item.name} value={item.value} onClick={changeSelectedName} size={size} selected={(selectedValue === item.value)} />
                             )
                         }
                     </div>
diff --git a/src/components/common/SelectCommon/SelectOption/SelectOption.module.scss b/src/components/common/SelectCommon/SelectOption/SelectOption.module.scss
index fa8eec541..ef504c112 100644
--- a/src/components/common/SelectCommon/SelectOption/SelectOption.module.scss
+++ b/src/components/common/SelectCommon/SelectOption/SelectOption.module.scss
@@ -13,6 +13,7 @@
     }
     &:hover{
         background-color: var(--gray);
+        color: var(--primary);
     }
     &.isChoose{
         background-color: var(--gray);