diff --git a/package.json b/package.json
index 58b01cbb..433625ca 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,10 @@
     "build:gongmuin-client": "nx run gongmuin-client:build",
     "dev-client": "nx run gongmuin-client:dev",
     "gen-icon-client": "nx run gongmuin-client:gen-icon",
-    "gen-design-system": "nx run gongmuin-client:gen-design-system"
+    "gen-design-system": "nx run gongmuin-client:gen-design-system",
+    "gen-api": "nx run gongmuin-client:gen-api",
+    "storybook": "nx run gmi-design-system:storybook",
+    "build-storybook": "nx run gmi-design-system:build-storybook",
+    "build-design-system": "nx run gmi-design-system:build"
   }
 }
diff --git a/packages/client/app/globals.css b/packages/client/app/globals.css
index 9f9a4518..3c8ae43c 100644
--- a/packages/client/app/globals.css
+++ b/packages/client/app/globals.css
@@ -215,6 +215,8 @@ textarea,
    letter-spacing: inherit; /* 1 */
    color: inherit; /* 1 */
    background: transparent; /* 2 */
+   border: none;
+   text-decoration: none;
 }
 
 /*
diff --git a/packages/client/src/clientPages/home/ui/ClientHomePage.tsx b/packages/client/src/clientPages/home/ui/ClientHomePage.tsx
index db7edfd0..14229c9b 100644
--- a/packages/client/src/clientPages/home/ui/ClientHomePage.tsx
+++ b/packages/client/src/clientPages/home/ui/ClientHomePage.tsx
@@ -115,7 +115,7 @@ export function ClientHomePage() {
             size: 10,
          },
       })
-
+   console.log(recommendQuestions, questions)
    return (
       <>
          <MainLoader
diff --git a/packages/client/src/design-system/component/MultiSelect/index.tsx b/packages/client/src/design-system/component/MultiSelect/index.tsx
index ad3e0b80..5e318e18 100644
--- a/packages/client/src/design-system/component/MultiSelect/index.tsx
+++ b/packages/client/src/design-system/component/MultiSelect/index.tsx
@@ -113,6 +113,7 @@ export function MultiSelect({
                   boxShadow: '0px 0px 4px 0px rgba(0, 0, 0, 0.25)',
                   backgroundColor: 'white',
                   overflow: 'hidden',
+                  gap: '6px',
                }}
             >
                {items.map((item) => (
diff --git a/packages/client/src/design-system/component/SNSButton/SNSButton.tsx b/packages/client/src/design-system/component/SNSButton/SNSButton.tsx
index 737ba95b..62a04d19 100644
--- a/packages/client/src/design-system/component/SNSButton/SNSButton.tsx
+++ b/packages/client/src/design-system/component/SNSButton/SNSButton.tsx
@@ -1,4 +1,5 @@
 import { ButtonHTMLAttributes, ReactNode } from 'react'
+import { color } from '@gds/token'
 import * as styles from './SNSButton.css'
 import { IconKakao } from '../../icon/default/IconKakao'
 import { IconNaver } from '../../icon/default/IconNaver'
@@ -23,7 +24,11 @@ export function SNSButton({
          {...props}
       >
          <div className={styles.LogoBox}>
-            {socialLoginType === 'kakao' ? <IconKakao /> : <IconNaver />}
+            {socialLoginType === 'kakao' ? (
+               <IconKakao />
+            ) : (
+               <IconNaver color={color.white} />
+            )}
          </div>
          <div
             className={styles.TxtBox({
diff --git a/packages/client/src/design-system/icon/default/IconCharacter.tsx b/packages/client/src/design-system/icon/default/IconCharacter.tsx
index bd297121..5e35fd17 100644
--- a/packages/client/src/design-system/icon/default/IconCharacter.tsx
+++ b/packages/client/src/design-system/icon/default/IconCharacter.tsx
@@ -24,7 +24,10 @@ function IconCharacter(
          {...props}
       >
          {title ? <title id={titleId}>{title}</title> : null}
-         <g clipPath="url(#a)">
+         <g
+            clipPath={`
+               url(#${titleId})`}
+         >
             <path
                fill="#231815"
                stroke="#231815"
@@ -84,7 +87,7 @@ function IconCharacter(
             />
          </g>
          <defs>
-            <clipPath id="a">
+            <clipPath id={titleId}>
                <path fill="#fff" d="M.09 0h143.824v150H.09z" />
             </clipPath>
          </defs>
diff --git a/packages/client/src/design-system/icon/default/IconChat.tsx b/packages/client/src/design-system/icon/default/IconChat.tsx
index c889e7cd..e05e4822 100644
--- a/packages/client/src/design-system/icon/default/IconChat.tsx
+++ b/packages/client/src/design-system/icon/default/IconChat.tsx
@@ -31,7 +31,7 @@ function IconChat(
             />
          </g>
          <defs>
-            <clipPath id="a">
+            <clipPath id={titleId}>
                <path fill="#fff" d="M0 0h16v16H0z" />
             </clipPath>
          </defs>
diff --git a/packages/client/src/design-system/icon/default/IconCheckCircle.tsx b/packages/client/src/design-system/icon/default/IconCheckCircle.tsx
deleted file mode 100644
index 176c6277..00000000
--- a/packages/client/src/design-system/icon/default/IconCheckCircle.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import type { SVGProps } from 'react'
-import { Ref, forwardRef } from 'react'
-import type { IconProps } from '../shared/props'
-
-function IconCheckCircle(
-   {
-      title = 'IconCheckCircle',
-      titleId = 'GDS-IconCheckCircle',
-      size = 20,
-      color = '#2A2A2A',
-      ...props
-   }: SVGProps<SVGSVGElement> & IconProps,
-   ref: Ref<SVGSVGElement>,
-) {
-   return (
-      <svg
-         width={size}
-         height={size}
-         fill="none"
-         viewBox="0 0 16 16"
-         color={color}
-         ref={ref}
-         aria-labelledby={titleId}
-         {...props}
-      >
-         {title ? <title id={titleId}>{title}</title> : null}
-         <g clipPath="url(#a)">
-            <path
-               fill="#fff"
-               d="M7.999 1.336a6.67 6.67 0 0 0-6.667 6.667 6.67 6.67 0 0 0 6.667 6.666 6.67 6.67 0 0 0 6.666-6.666A6.67 6.67 0 0 0 8 1.336m-1.807 9.527L3.799 8.469a.664.664 0 1 1 .94-.94l1.926 1.92 4.587-4.586a.664.664 0 1 1 .94.94l-5.06 5.06a.664.664 0 0 1-.94 0"
-            />
-         </g>
-         <defs>
-            <clipPath id="a">
-               <path fill="#fff" d="M0 0h16v16H0z" />
-            </clipPath>
-         </defs>
-      </svg>
-   )
-}
-const ForwardRef = forwardRef(IconCheckCircle)
-export { ForwardRef as IconCheckCircle }
diff --git a/packages/client/src/design-system/icon/default/IconCheckCircleFilled.tsx b/packages/client/src/design-system/icon/default/IconCheckFilled.tsx
similarity index 81%
rename from packages/client/src/design-system/icon/default/IconCheckCircleFilled.tsx
rename to packages/client/src/design-system/icon/default/IconCheckFilled.tsx
index f73c2d8f..8482d151 100644
--- a/packages/client/src/design-system/icon/default/IconCheckCircleFilled.tsx
+++ b/packages/client/src/design-system/icon/default/IconCheckFilled.tsx
@@ -2,10 +2,10 @@ import type { SVGProps } from 'react'
 import { Ref, forwardRef } from 'react'
 import type { IconProps } from '../shared/props'
 
-function IconCheckCircleFilled(
+function IconCheckFilled(
    {
-      title = 'IconCheckCircleFilled',
-      titleId = 'GDS-IconCheckCircleFilled',
+      title = 'IconCheckFilled',
+      titleId = 'GDS-IconCheckFilled',
       size = 20,
       color = '#2A2A2A',
       ...props
@@ -31,12 +31,12 @@ function IconCheckCircleFilled(
             />
          </g>
          <defs>
-            <clipPath id="a">
+            <clipPath id={titleId}>
                <path fill="#fff" d="M0 0h16v16H0z" />
             </clipPath>
          </defs>
       </svg>
    )
 }
-const ForwardRef = forwardRef(IconCheckCircleFilled)
-export { ForwardRef as IconCheckCircleFilled }
+const ForwardRef = forwardRef(IconCheckFilled)
+export { ForwardRef as IconCheckFilled }
diff --git a/packages/client/src/design-system/icon/default/IconLikesDefault.tsx b/packages/client/src/design-system/icon/default/IconLikesDefault.tsx
deleted file mode 100644
index 8534fc42..00000000
--- a/packages/client/src/design-system/icon/default/IconLikesDefault.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import type { SVGProps } from 'react'
-import { Ref, forwardRef } from 'react'
-import type { IconProps } from '../shared/props'
-
-function IconLikesDefault(
-   {
-      title = 'IconLikesDefault',
-      titleId = 'GDS-IconLikesDefault',
-      size = 20,
-      color = '#2A2A2A',
-      ...props
-   }: SVGProps<SVGSVGElement> & IconProps,
-   ref: Ref<SVGSVGElement>,
-) {
-   return (
-      <svg
-         width={size}
-         height={size}
-         fill="none"
-         viewBox="0 0 15 15"
-         color={color}
-         ref={ref}
-         aria-labelledby={titleId}
-         {...props}
-      >
-         {title ? <title id={titleId}>{title}</title> : null}
-         <g clipPath="url(#a)">
-            <path
-               fill={color}
-               d="M5.625 13.125h5.625c.519 0 .963-.312 1.15-.762l1.887-4.407q.087-.215.088-.456V6.25c0-.687-.562-1.25-1.25-1.25H9.181l.594-2.856.019-.2a.94.94 0 0 0-.275-.663.937.937 0 0 0-1.322.003l-3.46 3.46a1.24 1.24 0 0 0-.362.881v6.25c0 .688.563 1.25 1.25 1.25m0-7.5 2.713-2.712-.526 2.094a1 1 0 0 0 .97 1.243h4.343V7.5l-1.875 4.375H5.625zm-5 0h2.5v7.5h-2.5z"
-            />
-         </g>
-      </svg>
-   )
-}
-const ForwardRef = forwardRef(IconLikesDefault)
-export { ForwardRef as IconLikesDefault }
diff --git a/packages/client/src/design-system/icon/default/IconNaver.tsx b/packages/client/src/design-system/icon/default/IconNaver.tsx
index 80c372bd..62fc538b 100644
--- a/packages/client/src/design-system/icon/default/IconNaver.tsx
+++ b/packages/client/src/design-system/icon/default/IconNaver.tsx
@@ -24,15 +24,15 @@ function IconNaver(
          {...props}
       >
          {title ? <title id={titleId}>{title}</title> : null}
-         <g clipPath="url(#a)">
+         <g clipPath={`url(#${titleId})`}>
             <path
-               fill="#fff"
+               fill={color}
                d="M11.35 8.563 5.416 0H.5v16h5.15V7.436L11.584 16H16.5V0h-5.15z"
             />
          </g>
          <defs>
-            <clipPath id="a">
-               <path fill="#fff" d="M.5 0h16v16H.5z" />
+            <clipPath id={titleId}>
+               <path fill={color} d="M.5 0h16v16H.5z" />
             </clipPath>
          </defs>
       </svg>
diff --git a/packages/client/src/design-system/icon/default/IconPlus.tsx b/packages/client/src/design-system/icon/default/IconPlus.tsx
index 5bc5e736..4a4b2162 100644
--- a/packages/client/src/design-system/icon/default/IconPlus.tsx
+++ b/packages/client/src/design-system/icon/default/IconPlus.tsx
@@ -24,15 +24,15 @@ function IconPlus(
          {...props}
       >
          {title ? <title id={titleId}>{title}</title> : null}
-         <g clipPath="url(#a)">
+         <g clipPath={`url(#${titleId})`}>
             <path
-               fill="#fff"
+               fill={color}
                d="M19.25 13H13v6.25c0 .688-.562 1.25-1.25 1.25s-1.25-.562-1.25-1.25V13H4.25C3.563 13 3 12.438 3 11.75s.563-1.25 1.25-1.25h6.25V4.25c0-.687.563-1.25 1.25-1.25S13 3.563 13 4.25v6.25h6.25c.688 0 1.25.563 1.25 1.25S19.938 13 19.25 13"
             />
          </g>
          <defs>
-            <clipPath id="a">
-               <path fill="#fff" d="M0 0h24v24H0z" />
+            <clipPath id={titleId}>
+               <path fill={color} d="M0 0h24v24H0z" />
             </clipPath>
          </defs>
       </svg>
diff --git a/packages/client/src/design-system/icon/default/IconWhiteLike.tsx b/packages/client/src/design-system/icon/default/IconThumbUp.tsx
similarity index 79%
rename from packages/client/src/design-system/icon/default/IconWhiteLike.tsx
rename to packages/client/src/design-system/icon/default/IconThumbUp.tsx
index ab3ec15a..bbbccce6 100644
--- a/packages/client/src/design-system/icon/default/IconWhiteLike.tsx
+++ b/packages/client/src/design-system/icon/default/IconThumbUp.tsx
@@ -2,10 +2,10 @@ import type { SVGProps } from 'react'
 import { Ref, forwardRef } from 'react'
 import type { IconProps } from '../shared/props'
 
-function IconWhiteLike(
+function IconThumbUp(
    {
-      title = 'IconWhiteLike',
-      titleId = 'GDS-IconWhiteLike',
+      title = 'IconThumbUp',
+      titleId = 'GDS-IconThumbUp',
       size = 20,
       color = '#2A2A2A',
       ...props
@@ -24,19 +24,19 @@ function IconWhiteLike(
          {...props}
       >
          {title ? <title id={titleId}>{title}</title> : null}
-         <g clipPath="url(#a)">
+         <g clipPath={`url(#${titleId})`}>
             <path
-               fill="#fff"
+               fill={color}
                d="M5.625 13.625h5.625c.519 0 .963-.312 1.15-.762l1.887-4.407q.087-.213.088-.456V6.75c0-.687-.562-1.25-1.25-1.25H9.181l.594-2.856.019-.2a.94.94 0 0 0-.275-.663l-.663-.656-4.118 4.119a1.24 1.24 0 0 0-.363.881v6.25c0 .688.563 1.25 1.25 1.25m0-7.5 2.713-2.712L7.5 6.75h5.625V8l-1.875 4.375H5.625zm-5 0h2.5v7.5h-2.5z"
             />
          </g>
          <defs>
-            <clipPath id="a">
+            <clipPath id={titleId}>
                <path fill="#fff" d="M0 .5h15v15H0z" />
             </clipPath>
          </defs>
       </svg>
    )
 }
-const ForwardRef = forwardRef(IconWhiteLike)
-export { ForwardRef as IconWhiteLike }
+const ForwardRef = forwardRef(IconThumbUp)
+export { ForwardRef as IconThumbUp }
diff --git a/packages/client/src/design-system/icon/default/PrimarySmile.tsx b/packages/client/src/design-system/icon/default/PrimarySmile.tsx
index 1c5c7ea2..3bf9118b 100644
--- a/packages/client/src/design-system/icon/default/PrimarySmile.tsx
+++ b/packages/client/src/design-system/icon/default/PrimarySmile.tsx
@@ -34,7 +34,10 @@ function PrimarySmile(
             strokeWidth={4}
             rx={91}
          />
-         <g clipPath={titleId}>
+         <g
+            clipPath={`
+               url(#${titleId})`}
+         >
             <path
                fill="#231815"
                stroke="#231815"
diff --git a/packages/client/src/design-system/icon/default/index.ts b/packages/client/src/design-system/icon/default/index.ts
index 91278223..a5c553df 100644
--- a/packages/client/src/design-system/icon/default/index.ts
+++ b/packages/client/src/design-system/icon/default/index.ts
@@ -9,8 +9,7 @@ export { IconBookmarkFilled } from './IconBookmarkFilled'
 export { IconCharacter } from './IconCharacter'
 export { IconChat } from './IconChat'
 export { IconCheck } from './IconCheck'
-export { IconCheckCircle } from './IconCheckCircle'
-export { IconCheckCircleFilled } from './IconCheckCircleFilled'
+export { IconCheckFilled } from './IconCheckFilled'
 export { IconClose } from './IconClose'
 export { IconCredit } from './IconCredit'
 export { IconCreditFill } from './IconCreditFill'
@@ -28,7 +27,6 @@ export { IconNaver } from './IconNaver'
 export { IconPlus } from './IconPlus'
 export { IconSearch } from './IconSearch'
 export { IconThumbUpFilled } from './IconThumbUpFilled'
-export { IconWhiteLike } from './IconWhiteLike'
+export { IconThumbUp } from './IconThumbUp'
 export { PrimarySmile } from './PrimarySmile'
 export { SplashLogo } from './SplashLogo'
-export { IconLikesDefault } from './IconLikesDefault'
diff --git a/packages/client/src/entities/@types/question.ts b/packages/client/src/entities/@types/question.ts
deleted file mode 100644
index 84056463..00000000
--- a/packages/client/src/entities/@types/question.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export type QuestionDataType = {
-   questionPostId: number
-   title: string
-   content: string
-   jobGroup: string
-   reward: string
-   createdAt: string
-   isChosen: boolean
-   bookmark: number
-   likes: number
-   tag: string
-   date: string
-}
diff --git a/packages/client/src/entities/@types/signup.ts b/packages/client/src/entities/@types/signup.ts
deleted file mode 100644
index bf5c4319..00000000
--- a/packages/client/src/entities/@types/signup.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export type SignUpType = {
-   officialEmail: string
-   nickname: string
-   jobGroup: string
-   jobCategory: string
-}
-
-export type CheckMailType = {
-   targetEmail: string
-   authCode: string
-}
diff --git a/packages/client/src/shared/ui/QuestionList/Question.tsx b/packages/client/src/shared/ui/QuestionList/Question.tsx
index 7e04dd2d..3c17c872 100644
--- a/packages/client/src/shared/ui/QuestionList/Question.tsx
+++ b/packages/client/src/shared/ui/QuestionList/Question.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { IconBookmark, IconCredit, IconLikesDefault } from '@gds/icon'
+import { IconBookmark, IconCredit, IconThumbUp } from '@gds/icon'
 import { Badge } from '@gds/component'
 import { color } from '@gds/token'
 import { QuestionPostSimpleResponse } from '@server-api/api'
@@ -78,7 +78,7 @@ function Question({ data }: Props) {
                   {data.savedCount}
                </div>
                <div className={styles.QuestionIconBox} />
-               <IconLikesDefault color={color['gray-300']} />
+               <IconThumbUp color={color['gray-300']} />
                <div className={styles.QuestionIconTxtBox}>
                   {data.recommendCount}
                </div>
diff --git a/packages/client/src/widgets/Home/ui/Recommend/index.tsx b/packages/client/src/widgets/Home/ui/Recommend/index.tsx
index 8aa48630..566420b4 100644
--- a/packages/client/src/widgets/Home/ui/Recommend/index.tsx
+++ b/packages/client/src/widgets/Home/ui/Recommend/index.tsx
@@ -1,5 +1,5 @@
 import Image from 'next/image'
-import { IconBookmark, IconCredit, IconWhiteLike } from '@gds/icon'
+import { IconBookmark, IconCredit, IconThumbUp } from '@gds/icon'
 import { Badge } from '@gds/component'
 import { color } from '@gds/token'
 import { QuestionPostSimpleResponse } from '@server-api/api'
@@ -53,7 +53,7 @@ function HomeRecommend({
                </div>
                <div className={styles.NumberBox}>{savedCount}</div>
                <div>
-                  <IconWhiteLike size={15} />
+                  <IconThumbUp color={color.white} size={15} />
                </div>
                <div className={styles.NumberBox}>{recommendCount}</div>
             </div>
diff --git a/packages/client/src/widgets/QuestionDetail/ui/AnswerCard.tsx b/packages/client/src/widgets/QuestionDetail/ui/AnswerCard.tsx
index d568b5fe..fb6fddc0 100644
--- a/packages/client/src/widgets/QuestionDetail/ui/AnswerCard.tsx
+++ b/packages/client/src/widgets/QuestionDetail/ui/AnswerCard.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { Button } from '@gds/component'
-import { IconChat, IconCheckCircle, IconCheckCircleFilled } from '@gds/icon'
+import { IconChat, IconCheck, IconCheckFilled } from '@gds/icon'
 import { color, Typo } from '@gds/token'
 import { AnswerDetailResponse } from '@server-api/api'
 import {
@@ -79,9 +79,9 @@ export function AnswerCard({ answerSelectDone, answerData, userId }: Props) {
                   size="small"
                   rightIcon={
                      answerData?.isChosen ? (
-                        <IconCheckCircle size={16} />
+                        <IconCheck size={16} />
                      ) : (
-                        <IconCheckCircleFilled
+                        <IconCheckFilled
                            size={16}
                            color={color['primary-main']}
                         />
diff --git a/packages/client/src/widgets/QuestionDetail/ui/AnswerContainer.tsx b/packages/client/src/widgets/QuestionDetail/ui/AnswerContainer.tsx
index 4a734a23..c5c5b06b 100644
--- a/packages/client/src/widgets/QuestionDetail/ui/AnswerContainer.tsx
+++ b/packages/client/src/widgets/QuestionDetail/ui/AnswerContainer.tsx
@@ -3,12 +3,7 @@
 import { Button, TextInput } from '@gds/component'
 import { useState } from 'react'
 import { color, Typo } from '@gds/token'
-import {
-   IconAlarm,
-   IconCheckCircle,
-   IconCheckCircleFilled,
-   PrimarySmile,
-} from '@gds/icon'
+import { IconAlarm, IconCheckFilled, PrimarySmile } from '@gds/icon'
 import { answerbuttonWrapper, answerInputWrapper } from './style.css'
 import { AnswerCard } from './AnswerCard'
 
diff --git a/packages/gmi-design-system/src/component/MultiSelect/index.tsx b/packages/gmi-design-system/src/component/MultiSelect/index.tsx
index bc696fe7..c3d7a571 100644
--- a/packages/gmi-design-system/src/component/MultiSelect/index.tsx
+++ b/packages/gmi-design-system/src/component/MultiSelect/index.tsx
@@ -104,6 +104,7 @@ export function MultiSelect({
             boxShadow: '0px 0px 4px 0px rgba(0, 0, 0, 0.25)',
             backgroundColor: 'white',
             overflow: 'hidden',
+            gap: '6px',
           }}
         >
           {items.map(item => (
diff --git a/packages/gmi-design-system/src/component/NumberInput/NumberInput.tsx b/packages/gmi-design-system/src/component/NumberInput/NumberInput.tsx
index f6f0f04c..5f541d70 100644
--- a/packages/gmi-design-system/src/component/NumberInput/NumberInput.tsx
+++ b/packages/gmi-design-system/src/component/NumberInput/NumberInput.tsx
@@ -66,7 +66,7 @@ export function NumberInput({
               aria-label="Increase value"
             >
               <IconArrowUp
-                size={20}
+                size={24}
                 color={
                   props.disabled
                     ? NUMBER_INPUT_COLOR.disabled
@@ -94,7 +94,7 @@ export function NumberInput({
               aria-label="Decrease value"
             >
               <IconArrowDown
-                size={20}
+                size={24}
                 color={
                   props.disabled
                     ? NUMBER_INPUT_COLOR.disabled
diff --git a/packages/gmi-design-system/src/component/NumberInput/numberInput.css.ts b/packages/gmi-design-system/src/component/NumberInput/numberInput.css.ts
index f2974c9a..910b6ee4 100644
--- a/packages/gmi-design-system/src/component/NumberInput/numberInput.css.ts
+++ b/packages/gmi-design-system/src/component/NumberInput/numberInput.css.ts
@@ -94,10 +94,13 @@ export const numberWrapperStyle = style({
 
 export const numberInputStyle = recipe({
   base: {
-    width: 55,
-
+    width: 66,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
     color: NUMBER_INPUT_COLOR.default,
     border: 'none',
+    margin: '0 1px 0 8px',
 
     fontSize: 20,
     fontWeight: 600,
diff --git a/packages/gmi-design-system/src/component/Recommend/home/HomeRecommend.tsx b/packages/gmi-design-system/src/component/Recommend/home/HomeRecommend.tsx
index bb85bbe0..2342f22a 100644
--- a/packages/gmi-design-system/src/component/Recommend/home/HomeRecommend.tsx
+++ b/packages/gmi-design-system/src/component/Recommend/home/HomeRecommend.tsx
@@ -2,7 +2,8 @@ import React from 'react'
 import * as styles from './index.css'
 import Image from 'next/image'
 import Credit from '../../Tag/Credit'
-import { IconWhiteBookmark, IconWhiteLike } from '../../../icon'
+import { IconThumbUp, IconBookmark } from '../../../icon'
+import { color } from '@gds/token'
 
 interface HomeRecommendProps {
   src: string
@@ -23,11 +24,11 @@ const HomeRecommend = ({ src, coin, title, bookmark, likes }: HomeRecommendProps
         <span className={styles.TitleStyle}>{title}</span>
         <div className={styles.DetailWrapper}>
           <div className={styles.IconBox}>
-            <IconWhiteBookmark />
+            <IconBookmark color={color.white} />
           </div>
           <div className={styles.NumberBox}>{bookmark}</div>
           <div className={styles.IconBox}>
-            <IconWhiteLike />
+            <IconThumbUp color={color.white} />
           </div>
           <div className={styles.NumberBox}>{likes}</div>
         </div>
diff --git a/packages/gmi-design-system/src/component/SNSButton/SNSButton.tsx b/packages/gmi-design-system/src/component/SNSButton/SNSButton.tsx
index ab12f711..c56aefd2 100644
--- a/packages/gmi-design-system/src/component/SNSButton/SNSButton.tsx
+++ b/packages/gmi-design-system/src/component/SNSButton/SNSButton.tsx
@@ -1,4 +1,5 @@
 import { ButtonHTMLAttributes, ReactNode } from 'react'
+import { color } from '@gds/token'
 import * as styles from './SNSButton.css'
 import { IconKakao } from '../../icon/default/IconKakao'
 import { IconNaver } from '../../icon/default/IconNaver'
@@ -18,7 +19,7 @@ export function SNSButton({ socialLoginType, children, ...props }: SNSButtonProp
       {...props}
     >
       <div className={styles.LogoBox}>
-        {socialLoginType === 'kakao' ? <IconKakao /> : <IconNaver />}
+        {socialLoginType === 'kakao' ? <IconKakao /> : <IconNaver color={color.white} />}
       </div>
       <div
         className={styles.TxtBox({
diff --git a/packages/gmi-design-system/src/component/Select/Select.tsx b/packages/gmi-design-system/src/component/Select/Select.tsx
index 95c9f3b0..a0f337cc 100644
--- a/packages/gmi-design-system/src/component/Select/Select.tsx
+++ b/packages/gmi-design-system/src/component/Select/Select.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { cloneElement, CSSProperties, ReactElement, useRef, useState } from 'react'
 import {
   Select as AriaSelect,
@@ -81,12 +83,11 @@ export function Select({
             height: 'fit-content',
             maxHeight: 140,
             padding: '8px',
-            overflowY: 'scroll',
+            overflowY: 'auto',
             display: 'flex',
             flexDirection: 'column',
-            justifyContent: 'center',
+            justifyContent: 'flex-start',
             alignItems: 'center',
-
             borderRadius: '8px',
             boxShadow: '0px 0px 4px 0px rgba(0, 0, 0, 0.25)',
             backgroundColor: 'white',
diff --git a/packages/gmi-design-system/src/global.css b/packages/gmi-design-system/src/global.css
index ea258861..b257c71b 100644
--- a/packages/gmi-design-system/src/global.css
+++ b/packages/gmi-design-system/src/global.css
@@ -20,6 +20,8 @@ button {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   color: #2a2a2a;
+  border: none;
+  text-decoration: none;
 }
 
 img {
diff --git a/packages/gmi-design-system/src/icon/asset/icon-arrow-down.svg b/packages/gmi-design-system/src/icon/asset/icon-arrow-down.svg
index f63a2916..8372b961 100644
--- a/packages/gmi-design-system/src/icon/asset/icon-arrow-down.svg
+++ b/packages/gmi-design-system/src/icon/asset/icon-arrow-down.svg
@@ -1,11 +1,11 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_710_11581)">
-<path d="M3 6L8 11" stroke="#3F3F3F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M8 11L13 6" stroke="#3F3F3F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_657_17032)">
+<path d="M7 10L12 15" stroke="#3F3F3F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 15L17 10" stroke="#3F3F3F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </g>
 <defs>
-<clipPath id="clip0_710_11581">
-<rect width="24" height="24" fill="white" transform="translate(-4 -4)"/>
+<clipPath id="clip0_657_17032">
+<rect width="24" height="24" fill="white"/>
 </clipPath>
 </defs>
 </svg>
diff --git a/packages/gmi-design-system/src/icon/asset/icon-arrow-up.svg b/packages/gmi-design-system/src/icon/asset/icon-arrow-up.svg
index fea02ffa..2809086b 100644
--- a/packages/gmi-design-system/src/icon/asset/icon-arrow-up.svg
+++ b/packages/gmi-design-system/src/icon/asset/icon-arrow-up.svg
@@ -8,4 +8,4 @@
 <rect width="24" height="24" fill="white" transform="translate(24 24) rotate(-180)"/>
 </clipPath>
 </defs>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/packages/gmi-design-system/src/icon/asset/icon-credit-fill.svg b/packages/gmi-design-system/src/icon/asset/icon-credit-fill.svg
new file mode 100644
index 00000000..275db0f5
--- /dev/null
+++ b/packages/gmi-design-system/src/icon/asset/icon-credit-fill.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="20" height="20" rx="10" fill="#25E3C0"/>
+<path d="M12.5879 8.4375C12.3828 7.24805 11.4258 6.56445 10.2227 6.56445C8.5957 6.56445 7.46094 7.80859 7.46094 10.0508C7.46094 12.3203 8.60938 13.5371 10.2227 13.5371C11.3984 13.5371 12.3555 12.8809 12.5879 11.7188H14.3789C14.1055 13.6191 12.5469 15.1367 10.1953 15.1367C7.58398 15.1367 5.66992 13.2363 5.66992 10.0508C5.66992 6.85156 7.61133 4.96484 10.1953 4.96484C12.3828 4.96484 14.0781 6.23633 14.3789 8.4375H12.5879Z" fill="white"/>
+</svg>
diff --git a/packages/gmi-design-system/src/icon/default/IconArrowDown.tsx b/packages/gmi-design-system/src/icon/default/IconArrowDown.tsx
index 9ab6bf39..4660b7cf 100644
--- a/packages/gmi-design-system/src/icon/default/IconArrowDown.tsx
+++ b/packages/gmi-design-system/src/icon/default/IconArrowDown.tsx
@@ -17,7 +17,7 @@ function IconArrowDown(
       width={size}
       height={size}
       fill="none"
-      viewBox="0 0 16 16"
+      viewBox="0 0 24 24"
       color={color}
       ref={ref}
       aria-labelledby={titleId}
@@ -31,11 +31,11 @@ function IconArrowDown(
         strokeWidth={2}
         clipPath="url(#a)"
       >
-        <path d="m3 6 5 5M8 11l5-5" />
+        <path d="m7 10 5 5M12 15l5-5" />
       </g>
       <defs>
-        <clipPath id="down">
-          <path fill="#fff" d="M-4-4h24v24H-4z" />
+        <clipPath id="a">
+          <path fill="#fff" d="M0 0h24v24H0z" />
         </clipPath>
       </defs>
     </svg>
diff --git a/packages/gmi-design-system/src/icon/default/IconCharacter.tsx b/packages/gmi-design-system/src/icon/default/IconCharacter.tsx
index eaa979a6..2755be7f 100644
--- a/packages/gmi-design-system/src/icon/default/IconCharacter.tsx
+++ b/packages/gmi-design-system/src/icon/default/IconCharacter.tsx
@@ -24,7 +24,10 @@ function IconCharacter(
       {...props}
     >
       {title ? <title id={titleId}>{title}</title> : null}
-      <g clipPath="url(#a)">
+      <g
+        clipPath={`
+               url(#${titleId})`}
+      >
         <path
           fill="#231815"
           stroke="#231815"
@@ -84,7 +87,7 @@ function IconCharacter(
         />
       </g>
       <defs>
-        <clipPath id="a">
+        <clipPath id={titleId}>
           <path fill="#fff" d="M.09 0h143.824v150H.09z" />
         </clipPath>
       </defs>
diff --git a/packages/gmi-design-system/src/icon/default/IconChat.tsx b/packages/gmi-design-system/src/icon/default/IconChat.tsx
index 500dd273..dc0c51c7 100644
--- a/packages/gmi-design-system/src/icon/default/IconChat.tsx
+++ b/packages/gmi-design-system/src/icon/default/IconChat.tsx
@@ -31,7 +31,7 @@ function IconChat(
         />
       </g>
       <defs>
-        <clipPath id="a">
+        <clipPath id={titleId}>
           <path fill="#fff" d="M0 0h16v16H0z" />
         </clipPath>
       </defs>
diff --git a/packages/gmi-design-system/src/icon/default/IconCheckCircle.tsx b/packages/gmi-design-system/src/icon/default/IconCheckCircle.tsx
deleted file mode 100644
index 5c7a5993..00000000
--- a/packages/gmi-design-system/src/icon/default/IconCheckCircle.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import type { SVGProps } from 'react'
-import { Ref, forwardRef } from 'react'
-import type { IconProps } from '../shared/props'
-
-function IconCheckCircle(
-  {
-    title = 'IconCheckCircle',
-    titleId = 'GDS-IconCheckCircle',
-    size = 20,
-    color = '#2A2A2A',
-    ...props
-  }: SVGProps<SVGSVGElement> & IconProps,
-  ref: Ref<SVGSVGElement>,
-) {
-  return (
-    <svg
-      width={size}
-      height={size}
-      fill="none"
-      viewBox="0 0 16 16"
-      color={color}
-      ref={ref}
-      aria-labelledby={titleId}
-      {...props}
-    >
-      {title ? <title id={titleId}>{title}</title> : null}
-      <g clipPath="url(#a)">
-        <path
-          fill="#fff"
-          d="M7.999 1.336a6.67 6.67 0 0 0-6.667 6.667 6.67 6.67 0 0 0 6.667 6.666 6.67 6.67 0 0 0 6.666-6.666A6.67 6.67 0 0 0 8 1.336m-1.807 9.527L3.799 8.469a.664.664 0 1 1 .94-.94l1.926 1.92 4.587-4.586a.664.664 0 1 1 .94.94l-5.06 5.06a.664.664 0 0 1-.94 0"
-        />
-      </g>
-      <defs>
-        <clipPath id="a">
-          <path fill="#fff" d="M0 0h16v16H0z" />
-        </clipPath>
-      </defs>
-    </svg>
-  )
-}
-const ForwardRef = forwardRef(IconCheckCircle)
-export { ForwardRef as IconCheckCircle }
diff --git a/packages/gmi-design-system/src/icon/default/IconCheckCircleFilled.tsx b/packages/gmi-design-system/src/icon/default/IconCheckFilled.tsx
similarity index 80%
rename from packages/gmi-design-system/src/icon/default/IconCheckCircleFilled.tsx
rename to packages/gmi-design-system/src/icon/default/IconCheckFilled.tsx
index 500470bc..86809551 100644
--- a/packages/gmi-design-system/src/icon/default/IconCheckCircleFilled.tsx
+++ b/packages/gmi-design-system/src/icon/default/IconCheckFilled.tsx
@@ -2,10 +2,10 @@ import type { SVGProps } from 'react'
 import { Ref, forwardRef } from 'react'
 import type { IconProps } from '../shared/props'
 
-function IconCheckCircleFilled(
+function IconCheckFilled(
   {
-    title = 'IconCheckCircleFilled',
-    titleId = 'GDS-IconCheckCircleFilled',
+    title = 'IconCheckFilled',
+    titleId = 'GDS-IconCheckFilled',
     size = 20,
     color = '#2A2A2A',
     ...props
@@ -31,12 +31,12 @@ function IconCheckCircleFilled(
         />
       </g>
       <defs>
-        <clipPath id="a">
+        <clipPath id={titleId}>
           <path fill="#fff" d="M0 0h16v16H0z" />
         </clipPath>
       </defs>
     </svg>
   )
 }
-const ForwardRef = forwardRef(IconCheckCircleFilled)
-export { ForwardRef as IconCheckCircleFilled }
+const ForwardRef = forwardRef(IconCheckFilled)
+export { ForwardRef as IconCheckFilled }
diff --git a/packages/gmi-design-system/src/icon/default/IconCreditFill.tsx b/packages/gmi-design-system/src/icon/default/IconCreditFill.tsx
new file mode 100644
index 00000000..d48fcbfc
--- /dev/null
+++ b/packages/gmi-design-system/src/icon/default/IconCreditFill.tsx
@@ -0,0 +1,36 @@
+import type { SVGProps } from 'react'
+import { Ref, forwardRef } from 'react'
+import type { IconProps } from '../shared/props'
+
+function IconCreditFill(
+  {
+    title = 'IconCreditFill',
+    titleId = 'GDS-IconCreditFill',
+    size = 20,
+    color = '#2A2A2A',
+    ...props
+  }: SVGProps<SVGSVGElement> & IconProps,
+  ref: Ref<SVGSVGElement>,
+) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      fill="none"
+      viewBox="0 0 20 20"
+      color={color}
+      ref={ref}
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <rect width={20} height={20} fill={color} rx={10} />
+      <path
+        fill="#fff"
+        d="M12.588 8.438c-.205-1.19-1.162-1.874-2.365-1.874-1.627 0-2.762 1.245-2.762 3.487 0 2.27 1.148 3.486 2.762 3.486 1.175 0 2.132-.656 2.365-1.818h1.79c-.273 1.9-1.831 3.418-4.183 3.418-2.611 0-4.525-1.9-4.525-5.086 0-3.2 1.941-5.086 4.525-5.086 2.188 0 3.883 1.271 4.184 3.473z"
+      />
+    </svg>
+  )
+}
+const ForwardRef = forwardRef(IconCreditFill)
+export { ForwardRef as IconCreditFill }
diff --git a/packages/gmi-design-system/src/icon/default/IconLikesDefault.tsx b/packages/gmi-design-system/src/icon/default/IconLikesDefault.tsx
deleted file mode 100644
index 0abb0980..00000000
--- a/packages/gmi-design-system/src/icon/default/IconLikesDefault.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import type { SVGProps } from 'react'
-import { Ref, forwardRef } from 'react'
-import type { IconProps } from '../shared/props'
-const IconLikesDefault = (
-  {
-    title = 'IconLikesDefault',
-    titleId = 'GDS-IconLikesDefault',
-    size = 20,
-    color = '#2A2A2A',
-    ...props
-  }: SVGProps<SVGSVGElement> & IconProps,
-  ref: Ref<SVGSVGElement>,
-) => (
-  <svg
-    width={size}
-    height={size}
-    fill="none"
-    viewBox="0 0 15 15"
-    color={color}
-    ref={ref}
-    aria-labelledby={titleId}
-    {...props}
-  >
-    {title ? <title id={titleId}>{title}</title> : null}
-    <g clipPath="url(#a)">
-      <path
-        fill="#616161"
-        d="M5.625 13.125h5.625c.519 0 .963-.312 1.15-.762l1.887-4.407q.087-.215.088-.456V6.25c0-.687-.562-1.25-1.25-1.25H9.181l.594-2.856.019-.2a.94.94 0 0 0-.275-.663.937.937 0 0 0-1.322.003l-3.46 3.46a1.24 1.24 0 0 0-.362.881v6.25c0 .688.563 1.25 1.25 1.25m0-7.5 2.713-2.712-.526 2.094a1 1 0 0 0 .97 1.243h4.343V7.5l-1.875 4.375H5.625zm-5 0h2.5v7.5h-2.5z"
-      />
-    </g>
-    <defs>
-      <clipPath id="a">
-        <path fill="#fff" d="M0 0h15v15H0z" />
-      </clipPath>
-    </defs>
-  </svg>
-)
-const ForwardRef = forwardRef(IconLikesDefault)
-export { ForwardRef as IconLikesDefault }
diff --git a/packages/gmi-design-system/src/icon/default/IconNaver.tsx b/packages/gmi-design-system/src/icon/default/IconNaver.tsx
index 367a4659..784612cf 100644
--- a/packages/gmi-design-system/src/icon/default/IconNaver.tsx
+++ b/packages/gmi-design-system/src/icon/default/IconNaver.tsx
@@ -24,12 +24,12 @@ function IconNaver(
       {...props}
     >
       {title ? <title id={titleId}>{title}</title> : null}
-      <g clipPath="url(#a)">
-        <path fill="#fff" d="M11.35 8.563 5.416 0H.5v16h5.15V7.436L11.584 16H16.5V0h-5.15z" />
+      <g clipPath={`url(#${titleId})`}>
+        <path fill={color} d="M11.35 8.563 5.416 0H.5v16h5.15V7.436L11.584 16H16.5V0h-5.15z" />
       </g>
       <defs>
-        <clipPath id="a">
-          <path fill="#fff" d="M.5 0h16v16H.5z" />
+        <clipPath id={titleId}>
+          <path fill={color} d="M.5 0h16v16H.5z" />
         </clipPath>
       </defs>
     </svg>
diff --git a/packages/gmi-design-system/src/icon/default/IconPlus.tsx b/packages/gmi-design-system/src/icon/default/IconPlus.tsx
index 834a9227..908ab945 100644
--- a/packages/gmi-design-system/src/icon/default/IconPlus.tsx
+++ b/packages/gmi-design-system/src/icon/default/IconPlus.tsx
@@ -24,15 +24,15 @@ function IconPlus(
       {...props}
     >
       {title ? <title id={titleId}>{title}</title> : null}
-      <g clipPath="url(#a)">
+      <g clipPath={`url(#${titleId})`}>
         <path
-          fill="#fff"
+          fill={color}
           d="M19.25 13H13v6.25c0 .688-.562 1.25-1.25 1.25s-1.25-.562-1.25-1.25V13H4.25C3.563 13 3 12.438 3 11.75s.563-1.25 1.25-1.25h6.25V4.25c0-.687.563-1.25 1.25-1.25S13 3.563 13 4.25v6.25h6.25c.688 0 1.25.563 1.25 1.25S19.938 13 19.25 13"
         />
       </g>
       <defs>
-        <clipPath id="a">
-          <path fill="#fff" d="M0 0h24v24H0z" />
+        <clipPath id={titleId}>
+          <path fill={color} d="M0 0h24v24H0z" />
         </clipPath>
       </defs>
     </svg>
diff --git a/packages/gmi-design-system/src/icon/default/IconWhiteLike.tsx b/packages/gmi-design-system/src/icon/default/IconThumbUp.tsx
similarity index 79%
rename from packages/gmi-design-system/src/icon/default/IconWhiteLike.tsx
rename to packages/gmi-design-system/src/icon/default/IconThumbUp.tsx
index 9d99b142..80aa9e35 100644
--- a/packages/gmi-design-system/src/icon/default/IconWhiteLike.tsx
+++ b/packages/gmi-design-system/src/icon/default/IconThumbUp.tsx
@@ -2,10 +2,10 @@ import type { SVGProps } from 'react'
 import { Ref, forwardRef } from 'react'
 import type { IconProps } from '../shared/props'
 
-function IconWhiteLike(
+function IconThumbUp(
   {
-    title = 'IconWhiteLike',
-    titleId = 'GDS-IconWhiteLike',
+    title = 'IconThumbUp',
+    titleId = 'GDS-IconThumbUp',
     size = 20,
     color = '#2A2A2A',
     ...props
@@ -24,19 +24,19 @@ function IconWhiteLike(
       {...props}
     >
       {title ? <title id={titleId}>{title}</title> : null}
-      <g clipPath="url(#a)">
+      <g clipPath={`url(#${titleId})`}>
         <path
-          fill="#fff"
+          fill={color}
           d="M5.625 13.625h5.625c.519 0 .963-.312 1.15-.762l1.887-4.407q.087-.213.088-.456V6.75c0-.687-.562-1.25-1.25-1.25H9.181l.594-2.856.019-.2a.94.94 0 0 0-.275-.663l-.663-.656-4.118 4.119a1.24 1.24 0 0 0-.363.881v6.25c0 .688.563 1.25 1.25 1.25m0-7.5 2.713-2.712L7.5 6.75h5.625V8l-1.875 4.375H5.625zm-5 0h2.5v7.5h-2.5z"
         />
       </g>
       <defs>
-        <clipPath id="a">
+        <clipPath id={titleId}>
           <path fill="#fff" d="M0 .5h15v15H0z" />
         </clipPath>
       </defs>
     </svg>
   )
 }
-const ForwardRef = forwardRef(IconWhiteLike)
-export { ForwardRef as IconWhiteLike }
+const ForwardRef = forwardRef(IconThumbUp)
+export { ForwardRef as IconThumbUp }
diff --git a/packages/gmi-design-system/src/icon/default/IconWhiteBookmark.tsx b/packages/gmi-design-system/src/icon/default/IconWhiteBookmark.tsx
deleted file mode 100644
index d9a98fd0..00000000
--- a/packages/gmi-design-system/src/icon/default/IconWhiteBookmark.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import type { SVGProps } from 'react'
-import { Ref, forwardRef } from 'react'
-import type { IconProps } from '../shared/props'
-const IconWhiteBookmark = (
-  {
-    title = 'IconWhiteBookmark',
-    titleId = 'GDS-IconWhiteBookmark',
-    size = 20,
-    color = '#2A2A2A',
-    ...props
-  }: SVGProps<SVGSVGElement> & IconProps,
-  ref: Ref<SVGSVGElement>,
-) => (
-  <svg
-    width={size}
-    height={size}
-    fill="none"
-    viewBox="0 0 15 16"
-    color={color}
-    ref={ref}
-    aria-labelledby={titleId}
-    {...props}
-  >
-    {title ? <title id={titleId}>{title}</title> : null}
-    <g clipPath="url(#a)">
-      <path
-        fill="#fff"
-        d="M10.625 2.375h-6.25c-.687 0-1.25.563-1.25 1.25v10L7.5 11.75l4.375 1.875v-10c0-.687-.562-1.25-1.25-1.25m0 9.375L7.5 10.387 4.375 11.75V3.625h6.25z"
-      />
-    </g>
-    <defs>
-      <clipPath id="a">
-        <path fill="#fff" d="M0 .5h15v15H0z" />
-      </clipPath>
-    </defs>
-  </svg>
-)
-const ForwardRef = forwardRef(IconWhiteBookmark)
-export { ForwardRef as IconWhiteBookmark }
diff --git a/packages/gmi-design-system/src/icon/default/PrimarySmile.tsx b/packages/gmi-design-system/src/icon/default/PrimarySmile.tsx
index e4f359b9..c7fd3363 100644
--- a/packages/gmi-design-system/src/icon/default/PrimarySmile.tsx
+++ b/packages/gmi-design-system/src/icon/default/PrimarySmile.tsx
@@ -26,7 +26,10 @@ function PrimarySmile(
       {title ? <title id={titleId}>{title}</title> : null}
       <rect width={489} height={489} x={2} y={2} fill="#05D3A6" rx={91} />
       <rect width={489} height={489} x={2} y={2} stroke="#000" strokeWidth={4} rx={91} />
-      <g clipPath="url(#a)">
+      <g
+        clipPath={`
+               url(#${titleId})`}
+      >
         <path
           fill="#231815"
           stroke="#231815"
@@ -89,7 +92,7 @@ function PrimarySmile(
         />
       </g>
       <defs>
-        <clipPath id="a">
+        <clipPath id={titleId}>
           <path fill="#fff" d="M28 37h438v456H28z" />
         </clipPath>
       </defs>
diff --git a/packages/gmi-design-system/src/icon/default/index.ts b/packages/gmi-design-system/src/icon/default/index.ts
index 6888c0ae..a5c553df 100644
--- a/packages/gmi-design-system/src/icon/default/index.ts
+++ b/packages/gmi-design-system/src/icon/default/index.ts
@@ -9,10 +9,10 @@ export { IconBookmarkFilled } from './IconBookmarkFilled'
 export { IconCharacter } from './IconCharacter'
 export { IconChat } from './IconChat'
 export { IconCheck } from './IconCheck'
-export { IconCheckCircle } from './IconCheckCircle'
-export { IconCheckCircleFilled } from './IconCheckCircleFilled'
+export { IconCheckFilled } from './IconCheckFilled'
 export { IconClose } from './IconClose'
 export { IconCredit } from './IconCredit'
+export { IconCreditFill } from './IconCreditFill'
 export { IconEdit } from './IconEdit'
 export { IconEnter } from './IconEnter'
 export { IconError } from './IconError'
@@ -27,6 +27,6 @@ export { IconNaver } from './IconNaver'
 export { IconPlus } from './IconPlus'
 export { IconSearch } from './IconSearch'
 export { IconThumbUpFilled } from './IconThumbUpFilled'
-export { IconWhiteLike } from './IconWhiteLike'
+export { IconThumbUp } from './IconThumbUp'
 export { PrimarySmile } from './PrimarySmile'
 export { SplashLogo } from './SplashLogo'
diff --git a/packages/gmi-design-system/tsconfig.json b/packages/gmi-design-system/tsconfig.json
index bb800870..83e44dd8 100644
--- a/packages/gmi-design-system/tsconfig.json
+++ b/packages/gmi-design-system/tsconfig.json
@@ -27,7 +27,7 @@
     "paths": {
       "@gds/component": ["./src/component/index.ts"],
       "@gds/token": ["./src/token/index.ts"],
-      "@gds/icon": ["./src/icon/index.ts"]
+      "@gds/icon": ["./src/icon/default"] //TODO: fix this
     }
   },
   "include": ["src/**/*", "eslint.config.js"],