diff --git a/.eslintrc.json b/.eslintrc.json
index 3dbcca1c..b08f2bca 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -45,7 +45,9 @@
         "*.ts",
         "*.tsx"
       ],
-      "rules": {}
+      "rules": {
+          "max-len": ["error", { "code": 2000 }]
+      }
     },
     {
       "files": [
@@ -117,42 +119,43 @@
         "ts": "never",
         "tsx": "never"
       }
-    ], // import 구문에서 파일 확장자를 생략해야합니다. 패키지를 import할 때는 이 규칙을 무시합니다.
-    "import/order": [ // import 순서를 지정합니다.
-      "error",
-      {
-        "groups": [ // 먼저 해당 groups의 순서를 갖습니다.
-          "type",
-          "builtin",
-          "external",
-          "internal",
-          "parent",
-          "sibling",
-          "index",
-          "unknown"
-        ],
-        "pathGroups": [ // 기본 groups 외 특정 순서를 지정할 수 있습니다.
-          {
-            "pattern": "react*",
-            "group": "external",
-            "position": "before"
-          },
-          {
-            "pattern": "@/public/images/*",
-            "group": "unknown",
-            "position": "after"
-          }
-        ],
-        "pathGroupsExcludedImportTypes": [
-          "type"
-        ], // type 종류는 pathGroups를 적용하지 않습니다.
-        "newlines-between": "always", // import grouping 간에 한 줄을 추가합니다.
-        "alphabetize": { // 같은 grouping 내에선 알파벳 순서를 따릅니다.
-          "order": "asc",
-          "caseInsensitive": true
-        }
-      }
-    ],
+    ], 
+    // // import 구문에서 파일 확장자를 생략해야합니다. 패키지를 import할 때는 이 규칙을 무시합니다.
+    // "import/order": [ // import 순서를 지정합니다.
+    //   "error",
+    //   {
+    //     "groups": [ // 먼저 해당 groups의 순서를 갖습니다.
+    //       "type",
+    //       "builtin",
+    //       "external",
+    //       "internal",
+    //       "parent",
+    //       "sibling",
+    //       "index",
+    //       "unknown"
+    //     ],
+    //     "pathGroups": [ // 기본 groups 외 특정 순서를 지정할 수 있습니다.
+    //       {
+    //         "pattern": "react*",
+    //         "group": "external",
+    //         "position": "before"
+    //       },
+    //       {
+    //         "pattern": "@/public/images/*",
+    //         "group": "unknown",
+    //         "position": "after"
+    //       }
+    //     ],
+    //     "pathGroupsExcludedImportTypes": [
+    //       "type"
+    //     ], // type 종류는 pathGroups를 적용하지 않습니다.
+    //     "newlines-between": "always", // import grouping 간에 한 줄을 추가합니다.
+    //     "alphabetize": { // 같은 grouping 내에선 알파벳 순서를 따릅니다.
+    //       "order": "asc",
+    //       "caseInsensitive": true
+    //     }
+    //   }
+    // ],
     "import/no-extraneous-dependencies": [ // 아래 devDependencies 내 파일들은 해당 룰에 영향을 받지 않습니다.
       "error",
       {
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 00000000..12093224
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,13 @@
+{
+  "semi": true,
+  "trailingComma": "all",
+  "singleQuote": true,
+  "printWidth": 90,
+  "tabWidth": 2,
+  "jsxBracketSameLine": false,
+  "objectCurlySpacing": true,
+  "endOfLine": "auto",
+  "bracketSpacing": true,
+  "arrowParens": "avoid",
+  "proseWrap": "always"
+}
diff --git a/next.config.js b/next.config.js
index fd0832a5..e841dcd2 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,11 +1,14 @@
 /** @type {import('next').NextConfig} */
-const path = require('path')
+const path = require('path');
 
 module.exports = {
   output: 'standalone',
   sassOptions: {
     includePaths: [path.join(__dirname, 'styles')],
   },
+  images: {
+    domains: ['i.ytimg.com', 'yt3.ggpht.com'],
+  },
   // async rewrites() {
   //   return [
   //     {
@@ -17,17 +20,17 @@ module.exports = {
   webpack: (config, context) => {
     if (context?.isServer) {
       if (Array.isArray(config.resolve.alias)) {
-        config.resolve.alias.push({ name: "msw/browser", alias: false })
+        config.resolve.alias.push({ name: 'msw/browser', alias: false });
       } else {
-        config.resolve.alias["msw/browser"] = false
+        config.resolve.alias['msw/browser'] = false;
       }
     } else {
       if (Array.isArray(config.resolve.alias)) {
-        config.resolve.alias.push({ name: "msw/node", alias: false })
+        config.resolve.alias.push({ name: 'msw/node', alias: false });
       } else {
-        config.resolve.alias["msw/node"] = false
+        config.resolve.alias['msw/node'] = false;
       }
     }
-    return config
+    return config;
   },
-}
\ No newline at end of file
+};
diff --git a/src/app/channel/page.module.scss b/src/app/channel/page.module.scss
index ccabf9a5..d4137015 100644
--- a/src/app/channel/page.module.scss
+++ b/src/app/channel/page.module.scss
@@ -1,16 +1,32 @@
 .headerTitleWrapper {
+    display: flex;
     box-sizing: border-box;
-    padding: 23px var(--default-padding) 12px;
+    flex-direction: row;
+    padding: 23px var(--default-padding) 2px;
+
+    .left {
+        margin: 7px 10px 0 0;
+    }
 }
 
 .mainContainer {
+    position: relative;
     margin-bottom: 76px;
 
+    .headerFix {
+        position: sticky;
+        z-index: 100;
+        top: 0;
+        right: 0;
+        left: 0;
+        background-color: white;
+    }
+
     .channelList {
         display: flex;
         box-sizing: border-box;
         margin: 12px 0;
-        padding: 0 var(--default-padding);
+        padding: 0 4px;
         overflow: auto;
         white-space: nowrap;
         gap: 5px;
@@ -19,18 +35,45 @@
             display: none;
         }
 
+        .channelImage {
+            display: block;
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+        }
+
+        .imageNone {
+            display: none;
+        }
+
         .channelButton {
             padding: 5px 10px;
+            padding-bottom: 10px;
             transition: 0.15s all ease-out;
-            border: 1px solid var(--primary200);
-            border-radius: 15px;
-            color: var(--primary200);
-            font-size: 12px;
+
+            // border: 1px solid var(--primary200);
+            // border-radius: 15px;
+            color: var(--gray500);
+            font-size: 16px;
 
             &.selected {
-                border-color: var(--primary400);
-                background-color: var(--primary400);
-                color: var(--white);
+                position: relative;
+
+                // border-bottom: 2px solid var(--primary500);
+                &::after {
+                    content: "";
+                    position: absolute;
+                    bottom: 0;
+                    left: 50%; // 가운데 정렬
+                    width: 80%; // 테두리의 길이를 조정
+                    height: 2px;
+                    transform: translateX(-50%); // 가운데 정렬
+                    background-color: var(--primary500);
+                }
+
+                // border-color: var(--primary400);
+                // background-color: var(--primary400);
+                color: var(--primary500);
             }
         }
     }
diff --git a/src/app/channel/page.tsx b/src/app/channel/page.tsx
index 24198e80..0ea1cc43 100644
--- a/src/app/channel/page.tsx
+++ b/src/app/channel/page.tsx
@@ -1,21 +1,27 @@
 /* eslint-disable react/no-array-index-key */
 
+/* eslint-disable  jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+
 'use client';
 
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import classNames from 'classnames/bind';
 
+import LeftIcon from '@/components/shared/header/headerItems/LeftIcon';
 import Title from '@components/shared/title/Title';
 import useYoutubeList from '@remote/queries/channel/useYoutubeList';
 import BottomNav from '@shared/bottom-nav/BottomNav';
 import ChannelArticle from '@shared/channel-article/ChannelArticle';
-
+import useChannel from '@/remote/queries/channel/useChannel';
+import Image from 'next/image';
+import Flex from '@/components/shared/flex/Flex';
 import styles from './page.module.scss';
 
 const cx = classNames.bind(styles);
 
-const CHANNEL_LIST = {
+export const CHANNEL_LIST = {
   DetailWizard: 'UCJM63e_MydEL2o6dMuJ_teQ',
   ShineFreak: 'UCoqiH2Ce3qc8wr_t2GvIWvw',
   autogrm: 'UCKUHhKTlNTHRlwbjoFDKOfA',
@@ -27,34 +33,98 @@ function ChannelPage() {
   const [selectedChannel, setSelectedChannel] = useState(Object.values(CHANNEL_LIST)[0]);
 
   const { data: dataList, isError } = useYoutubeList(selectedChannel);
+  const [scroll, setScroll] = useState(true);
 
   const handleChannel = (channelId: string) => {
     setSelectedChannel(channelId);
   };
 
+  const { data: channelList1 } = useChannel('UCJM63e_MydEL2o6dMuJ_teQ');
+  const { data: channelList2 } = useChannel('UCoqiH2Ce3qc8wr_t2GvIWvw');
+  const { data: channelList3 } = useChannel('UCKUHhKTlNTHRlwbjoFDKOfA');
+  const { data: channelList4 } = useChannel('UCHVO8oWoMCIIdQHXUB32X1w');
+  const { data: channelList5 } = useChannel('UCB22mXLQeRlCPn-H000OxYg');
+
+  const channelList = [
+    channelList1,
+    channelList2,
+    channelList3,
+    channelList4,
+    channelList5,
+  ];
+
+  // console.log(channelList);
+  const [lastScroll, setLastScroll] = useState(0);
+
+  useEffect(() => {
+    const checkScrollTop = () => {
+      const currentScroll = document.documentElement.scrollTop;
+      if (currentScroll > 100 && lastScroll <= 100) {
+        setScroll(false);
+        setLastScroll(currentScroll);
+      } else if (currentScroll <= 100 && lastScroll > 100) {
+        setScroll(true);
+        setLastScroll(currentScroll);
+      }
+    };
+
+    const intervalId = setInterval(checkScrollTop, 100); // 1초에 한 번씩 checkScrollTop 함수를 호출
+
+    return () => {
+      clearInterval(intervalId); // 컴포넌트가 언마운트될 때 타이머를 정리
+    };
+  }, [lastScroll]);
   return (
     <>
-      <div className={cx('headerTitleWrapper')}>
-        <Title title="유튜브 추천 채널" titleSize="t3" />
-      </div>
       <main className={cx('mainContainer')}>
-        <ul className={cx('channelList')}>
-          {Object.entries(CHANNEL_LIST).map(([channelName, channelId], idx) => {
-            return (
-              <li key={idx}>
-                <button aria-label="채널 버튼" className={cx('channelButton', selectedChannel === channelId ? 'selected' : '')} onClick={() => { return handleChannel(channelId); }}>
-                  {channelName}
-                </button>
-              </li>
-            );
-          })}
-        </ul>
-
-        {isError && (<div className={cx('error')}>서버요청을 초과하였습니다.</div>)}
+        <div className={cx('headerFix')}>
+          <div className={cx('headerTitleWrapper')}>
+            <LeftIcon className={cx('left')} type="search" />
+            <Title title="추천 페이지" titleSize="t4" />
+          </div>
+          <ul className={cx('channelList')}>
+            {Object.entries(CHANNEL_LIST).map(([channelName, channelId], idx) => {
+              return (
+                <li
+                  onClick={() => {
+                    return handleChannel(channelId);
+                  }}
+                  key={idx}
+                >
+                  <Flex direction="column" align="center" justify="center">
+                    <Image
+                      className={cx(scroll ? 'channelImage' : 'imageNone')}
+                      src={
+                        channelList[idx]?.items[0]?.snippet.thumbnails.high.url as string
+                      }
+                      alt="유튜브 채널 썸네일"
+                      width={320}
+                      height={180}
+                      layout="cover"
+                      objectFit="responsive"
+                    />
+                    <button
+                      aria-label="채널 버튼"
+                      className={cx(
+                        'channelButton',
+                        selectedChannel === channelId ? 'selected' : '',
+                      )}
+                      onClick={() => {
+                        return handleChannel(channelId);
+                      }}
+                    >
+                      {channelName}
+                    </button>
+                  </Flex>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+        <div>{/* {channelList?.items?.thumbnails.high.url} */}</div>
+        {isError && <div className={cx('error')}>서버요청을 초과하였습니다.</div>}
         {dataList?.items?.map((data, idx) => {
-          return (
-            <ChannelArticle key={idx} data={data} />
-          );
+          return <ChannelArticle key={idx} data={data} />;
         })}
       </main>
       <BottomNav />
diff --git a/src/components/icons/Board.tsx b/src/components/icons/Board.tsx
new file mode 100644
index 00000000..2241e55d
--- /dev/null
+++ b/src/components/icons/Board.tsx
@@ -0,0 +1,30 @@
+interface FilledFavoriteProps {
+  width?: number
+  height?: number
+}
+
+function FilledFavorite({ width = 21, height = 19 }: FilledFavoriteProps) {
+  return (
+    <svg width={width} height={height} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g id="message-smile_line">
+        <path
+          id="Icon"
+          d="M14.75 7.5H14.76M9.25 7.5H9.26M7 18V20.3355C7 20.8684 7 21.1348 7.10923 21.2716C7.20422 21.3906 7.34827 21.4599 7.50054 21.4597C7.67563 21.4595 7.88367 21.2931 8.29976 20.9602L10.6852 19.0518C11.1725 18.662 11.4162 18.4671 11.6875 18.3285C11.9282 18.2055 12.1844 18.1156 12.4492 18.0613C12.7477 18 13.0597 18 13.6837 18H16.2C17.8802 18 18.7202 18 19.362 17.673C19.9265 17.3854 20.3854 16.9265 20.673 16.362C21 15.7202 21 14.8802 21 13.2V7.8C21 6.11984 21 5.27976 20.673 4.63803C20.3854 4.07354 19.9265 3.6146 19.362 3.32698C18.7202 3 17.8802 3 16.2 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V14C3 14.93 3 15.395 3.10222 15.7765C3.37962 16.8117 4.18827 17.6204 5.22354 17.8978C5.60504 18 6.07003 18 7 18ZM15.25 7.5C15.25 7.77614 15.0261 8 14.75 8C14.4739 8 14.25 7.77614 14.25 7.5C14.25 7.22386 14.4739 7 14.75 7C15.0261 7 15.25 7.22386 15.25 7.5ZM9.75 7.5C9.75 7.77614 9.52614 8 9.25 8C8.97386 8 8.75 7.77614 8.75 7.5C8.75 7.22386 8.97386 7 9.25 7C9.52614 7 9.75 7.22386 9.75 7.5Z"
+          stroke="#111225"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          id="Vector 133"
+          d="M8.5 12.5C8.83333 13 10 14 12 14C14 14 15.1667 13 15.5 12.5"
+          stroke="black"
+          strokeWidth="2"
+          strokeLinecap="round"
+        />
+      </g>
+    </svg>
+  );
+}
+
+export default FilledFavorite;
diff --git a/src/components/icons/Channel.tsx b/src/components/icons/Channel.tsx
index 25669aa7..2e97eba8 100644
--- a/src/components/icons/Channel.tsx
+++ b/src/components/icons/Channel.tsx
@@ -1,18 +1,38 @@
-import { Colors, colors } from '@styles/colorPalette';
-
 interface ChannelProps {
   width?: number
   height?: number
-  color?: Colors
 }
 
-function Channel({ width = 19, height = 18, color = 'black' }: ChannelProps) {
+function Channel({ width = 19, height = 18 }: ChannelProps) {
   return (
-    <svg width={width} height={height} viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M13.1498 9.425C13.2998 9.325 13.3748 9.18333 13.3748 9C13.3748 8.81667 13.2998 8.675 13.1498 8.575L7.5748 5C7.40814 4.88333 7.23731 4.875 7.0623 4.975C6.8873 5.075 6.7998 5.225 6.7998 5.425V12.575C6.7998 12.775 6.8873 12.925 7.0623 13.025C7.23731 13.125 7.40814 13.1167 7.5748 13L13.1498 9.425ZM2.2998 18C1.7498 18 1.27897 17.8042 0.887305 17.4125C0.495638 17.0208 0.299805 16.55 0.299805 16V2C0.299805 1.45 0.495638 0.979167 0.887305 0.5875C1.27897 0.195833 1.7498 0 2.2998 0H16.2998C16.8498 0 17.3206 0.195833 17.7123 0.5875C18.104 0.979167 18.2998 1.45 18.2998 2V16C18.2998 16.55 18.104 17.0208 17.7123 17.4125C17.3206 17.8042 16.8498 18 16.2998 18H2.2998Z" fill={colors[color]} />
+    <svg width={width} height={height} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g id="youtube_line">
+        <g id="Icon">
+          <path
+            d="M21.5813 7.19989C21.4733 6.76846 21.2534 6.37318 20.9438 6.05395C20.6341 5.73473 20.2457 5.50287 19.8178 5.3818C18.2542 5 12 5 12 5C12 5 5.74578 5 4.18222 5.41816C3.75429 5.53923 3.36588 5.77109 3.05623 6.09031C2.74659 6.40954 2.52666 6.80482 2.41868 7.23625C2.13253 8.82303 1.99255 10.4327 2.00052 12.0451C1.99032 13.6696 2.1303 15.2916 2.41868 16.8903C2.53773 17.3083 2.76258 17.6886 3.0715 17.9943C3.38043 18.3 3.76299 18.5209 4.18222 18.6357C5.74578 19.0538 12 19.0538 12 19.0538C12 19.0538 18.2542 19.0538 19.8178 18.6357C20.2457 18.5146 20.6341 18.2827 20.9438 17.9635C21.2534 17.6443 21.4733 17.249 21.5813 16.8176C21.8653 15.2427 22.0052 13.6453 21.9995 12.0451C22.0097 10.4206 21.8697 8.79862 21.5813 7.19989Z"
+            stroke="#111225"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M9.75 9.46533C9.75 8.98805 9.75 8.74941 9.84974 8.61618C9.93666 8.50008 10.0697 8.42744 10.2144 8.4171C10.3804 8.40525 10.5811 8.53429 10.9826 8.79239L14.9254 11.3271C15.2738 11.551 15.448 11.663 15.5082 11.8054C15.5607 11.9298 15.5607 12.0702 15.5082 12.1946C15.448 12.337 15.2738 12.449 14.9254 12.6729L10.9826 15.2076C10.5811 15.4657 10.3804 15.5948 10.2144 15.5829C10.0697 15.5726 9.93666 15.4999 9.84974 15.3838C9.75 15.2506 9.75 15.012 9.75 14.5347V9.46533Z"
+            stroke="#111225"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </g>
+      </g>
     </svg>
-
   );
+
+  // return (
+  //   <svg width={width} height={height} viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+  //     <path d="M13.1498 9.425C13.2998 9.325 13.3748 9.18333 13.3748 9C13.3748 8.81667 13.2998 8.675 13.1498 8.575L7.5748 5C7.40814 4.88333 7.23731 4.875 7.0623 4.975C6.8873 5.075 6.7998 5.225 6.7998 5.425V12.575C6.7998 12.775 6.8873 12.925 7.0623 13.025C7.23731 13.125 7.40814 13.1167 7.5748 13L13.1498 9.425ZM2.2998 18C1.7498 18 1.27897 17.8042 0.887305 17.4125C0.495638 17.0208 0.299805 16.55 0.299805 16V2C0.299805 1.45 0.495638 0.979167 0.887305 0.5875C1.27897 0.195833 1.7498 0 2.2998 0H16.2998C16.8498 0 17.3206 0.195833 17.7123 0.5875C18.104 0.979167 18.2998 1.45 18.2998 2V16C18.2998 16.55 18.104 17.0208 17.7123 17.4125C17.3206 17.8042 16.8498 18 16.2998 18H2.2998Z" fill={colors[color]} />
+  //   </svg>
+
+  // );
 }
 
 export default Channel;
diff --git a/src/components/icons/CloseEys.tsx b/src/components/icons/CloseEys.tsx
index 75716af9..81142cd9 100644
--- a/src/components/icons/CloseEys.tsx
+++ b/src/components/icons/CloseEys.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable max-len */
 import { colors } from '@styles/colorPalette';
 
 interface CloseEyeProps {
@@ -14,7 +15,11 @@ function CloseEys({ size, onClick }: CloseEyeProps) {
       xmlns="http://www.w3.org/2000/svg"
       onClick={onClick}
     >
-      <path d="M20.0980654,15.8909586 L18.6838245,14.4767177 C19.3180029,13.8356474 19.9009094,13.1592525 20.4222529,12.4831239 C20.5528408,12.3137648 20.673512,12.1521776 20.7838347,12 C20.673512,11.8478224 20.5528408,11.6862352 20.4222529,11.5168761 C19.8176112,10.7327184 19.1301624,9.94820254 18.37596,9.21885024 C16.2825083,7.1943753 14.1050769,6 12,6 C11.4776994,6 10.9509445,6.07352686 10.4221233,6.21501656 L8.84014974,4.63304296 C9.8725965,4.22137709 10.9270589,4 12,4 C14.7275481,4 17.3356792,5.4306247 19.76629,7.78114976 C20.5955095,8.58304746 21.3456935,9.43915664 22.0060909,10.2956239 C22.4045936,10.8124408 22.687526,11.2189945 22.8424353,11.4612025 L23.1870348,12 L22.8424353,12.5387975 C22.687526,12.7810055 22.4045936,13.1875592 22.0060909,13.7043761 C21.4349259,14.4451181 20.7965989,15.1855923 20.0980652,15.8909583 L20.0980654,15.8909586 Z M17.0055388,18.4197523 C15.3942929,19.4304919 13.7209154,20 12,20 C9.27245185,20 6.66432084,18.5693753 4.23371003,16.2188502 C3.40449054,15.4169525 2.65430652,14.5608434 1.99390911,13.7043761 C1.59540638,13.1875592 1.31247398,12.7810055 1.15756471,12.5387975 L0.812965202,12 L1.15756471,11.4612025 C1.31247398,11.2189945 1.59540638,10.8124408 1.99390911,10.2956239 C2.65430652,9.43915664 3.40449054,8.58304746 4.23371003,7.78114976 C4.6043191,7.42275182 4.9790553,7.0857405 5.35771268,6.77192624 L1.29289322,2.70710678 L2.70710678,1.29289322 L22.7071068,21.2928932 L21.2928932,22.7071068 L17.0055388,18.4197523 Z M6.77972015,8.19393371 C6.39232327,8.50634201 6.00677809,8.84872289 5.62403997,9.21885024 C4.86983759,9.94820254 4.18238879,10.7327184 3.57774714,11.5168761 C3.44715924,11.6862352 3.32648802,11.8478224 3.21616526,12 C3.32648802,12.1521776 3.44715924,12.3137648 3.57774714,12.4831239 C4.18238879,13.2672816 4.86983759,14.0517975 5.62403997,14.7811498 C7.71749166,16.8056247 9.89492315,18 12,18 C13.1681669,18 14.3586152,17.6321975 15.5446291,16.9588426 L14.0319673,15.4461809 C13.4364541,15.7980706 12.7418086,16 12,16 C9.790861,16 8,14.209139 8,12 C8,11.2581914 8.20192939,10.5635459 8.55381909,9.96803265 L6.77972015,8.19393371 Z M10.0677432,11.4819568 C10.0235573,11.6471834 10,11.8208407 10,12 C10,13.1045695 10.8954305,14 12,14 C12.1791593,14 12.3528166,13.9764427 12.5180432,13.9322568 L10.0677432,11.4819568 Z" fillRule="evenodd" fill={colors.gray300} />
+      <path
+        d="M20.0980654,15.8909586 L18.6838245,14.4767177 C19.3180029,13.8356474 19.9009094,13.1592525 20.4222529,12.4831239 C20.5528408,12.3137648 20.673512,12.1521776 20.7838347,12 C20.673512,11.8478224 20.5528408,11.6862352 20.4222529,11.5168761 C19.8176112,10.7327184 19.1301624,9.94820254 18.37596,9.21885024 C16.2825083,7.1943753 14.1050769,6 12,6 C11.4776994,6 10.9509445,6.07352686 10.4221233,6.21501656 L8.84014974,4.63304296 C9.8725965,4.22137709 10.9270589,4 12,4 C14.7275481,4 17.3356792,5.4306247 19.76629,7.78114976 C20.5955095,8.58304746 21.3456935,9.43915664 22.0060909,10.2956239 C22.4045936,10.8124408 22.687526,11.2189945 22.8424353,11.4612025 L23.1870348,12 L22.8424353,12.5387975 C22.687526,12.7810055 22.4045936,13.1875592 22.0060909,13.7043761 C21.4349259,14.4451181 20.7965989,15.1855923 20.0980652,15.8909583 L20.0980654,15.8909586 Z M17.0055388,18.4197523 C15.3942929,19.4304919 13.7209154,20 12,20 C9.27245185,20 6.66432084,18.5693753 4.23371003,16.2188502 C3.40449054,15.4169525 2.65430652,14.5608434 1.99390911,13.7043761 C1.59540638,13.1875592 1.31247398,12.7810055 1.15756471,12.5387975 L0.812965202,12 L1.15756471,11.4612025 C1.31247398,11.2189945 1.59540638,10.8124408 1.99390911,10.2956239 C2.65430652,9.43915664 3.40449054,8.58304746 4.23371003,7.78114976 C4.6043191,7.42275182 4.9790553,7.0857405 5.35771268,6.77192624 L1.29289322,2.70710678 L2.70710678,1.29289322 L22.7071068,21.2928932 L21.2928932,22.7071068 L17.0055388,18.4197523 Z M6.77972015,8.19393371 C6.39232327,8.50634201 6.00677809,8.84872289 5.62403997,9.21885024 C4.86983759,9.94820254 4.18238879,10.7327184 3.57774714,11.5168761 C3.44715924,11.6862352 3.32648802,11.8478224 3.21616526,12 C3.32648802,12.1521776 3.44715924,12.3137648 3.57774714,12.4831239 C4.18238879,13.2672816 4.86983759,14.0517975 5.62403997,14.7811498 C7.71749166,16.8056247 9.89492315,18 12,18 C13.1681669,18 14.3586152,17.6321975 15.5446291,16.9588426 L14.0319673,15.4461809 C13.4364541,15.7980706 12.7418086,16 12,16 C9.790861,16 8,14.209139 8,12 C8,11.2581914 8.20192939,10.5635459 8.55381909,9.96803265 L6.77972015,8.19393371 Z M10.0677432,11.4819568 C10.0235573,11.6471834 10,11.8208407 10,12 C10,13.1045695 10.8954305,14 12,14 C12.1791593,14 12.3528166,13.9764427 12.5180432,13.9322568 L10.0677432,11.4819568 Z"
+        fillRule="evenodd"
+        fill={colors.gray300}
+      />
     </svg>
   );
 }
diff --git a/src/components/icons/Favorite.tsx b/src/components/icons/Favorite.tsx
index 3589c7f9..784543aa 100644
--- a/src/components/icons/Favorite.tsx
+++ b/src/components/icons/Favorite.tsx
@@ -5,11 +5,25 @@ interface FavoriteProps {
 
 function Favorite({ width = 21, height = 19 }: FavoriteProps) {
   return (
-    <svg width={width} height={height} viewBox="0 0 21 19" xmlns="http://www.w3.org/2000/svg">
-      <path d="M10.6997 18.325C10.4664 18.325 10.2289 18.2834 9.98721 18.2C9.74554 18.1167 9.53304 17.9834 9.34971 17.8L7.62471 16.225C5.85804 14.6084 4.26221 13.0042 2.83721 11.4125C1.41221 9.82086 0.699707 8.06669 0.699707 6.15002C0.699707 4.58336 1.22471 3.27502 2.27471 2.22502C3.32471 1.17502 4.63304 0.650024 6.19971 0.650024C7.08304 0.650024 7.91637 0.837524 8.69971 1.21252C9.48304 1.58752 10.1497 2.10002 10.6997 2.75002C11.2497 2.10002 11.9164 1.58752 12.6997 1.21252C13.483 0.837524 14.3164 0.650024 15.1997 0.650024C16.7664 0.650024 18.0747 1.17502 19.1247 2.22502C20.1747 3.27502 20.6997 4.58336 20.6997 6.15002C20.6997 8.06669 19.9914 9.82502 18.5747 11.425C17.158 13.025 15.5497 14.6334 13.7497 16.25L12.0497 17.8C11.8664 17.9834 11.6539 18.1167 11.4122 18.2C11.1705 18.2834 10.933 18.325 10.6997 18.325ZM9.74971 4.75002C9.26637 4.06669 8.74971 3.54586 8.19971 3.18752C7.64971 2.82919 6.98304 2.65002 6.19971 2.65002C5.19971 2.65002 4.36637 2.98336 3.69971 3.65002C3.03304 4.31669 2.69971 5.15002 2.69971 6.15002C2.69971 7.01669 3.00804 7.93753 3.62471 8.91253C4.24137 9.88753 4.97887 10.8334 5.83721 11.75C6.69554 12.6667 7.57887 13.525 8.48721 14.325C9.39554 15.125 10.133 15.7834 10.6997 16.3C11.2664 15.7834 12.0039 15.125 12.9122 14.325C13.8205 13.525 14.7039 12.6667 15.5622 11.75C16.4205 10.8334 17.158 9.88753 17.7747 8.91253C18.3914 7.93753 18.6997 7.01669 18.6997 6.15002C18.6997 5.15002 18.3664 4.31669 17.6997 3.65002C17.033 2.98336 16.1997 2.65002 15.1997 2.65002C14.4164 2.65002 13.7497 2.82919 13.1997 3.18752C12.6497 3.54586 12.133 4.06669 11.6497 4.75002C11.533 4.91669 11.3914 5.04169 11.2247 5.12502C11.058 5.20836 10.883 5.25002 10.6997 5.25002C10.5164 5.25002 10.3414 5.20836 10.1747 5.12502C10.008 5.04169 9.86637 4.91669 9.74971 4.75002Z" fill="black" />
+    <svg width={width} height={height} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g id="bookmark">
+        <path
+          id="Icon"
+          d="M5 7.8C5 6.11984 5 5.27976 5.32698 4.63803C5.6146 4.07354 6.07354 3.6146 6.63803 3.32698C7.27976 3 8.11984 3 9.8 3H14.2C15.8802 3 16.7202 3 17.362 3.32698C17.9265 3.6146 18.3854 4.07354 18.673 4.63803C19 5.27976 19 6.11984 19 7.8V21L12 17L5 21V7.8Z"
+          stroke="#111225"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
     </svg>
-
   );
+  // return (
+  //   <svg width={width} height={height} viewBox="0 0 21 19" xmlns="http://www.w3.org/2000/svg">
+  //     <path d="M10.6997 18.325C10.4664 18.325 10.2289 18.2834 9.98721 18.2C9.74554 18.1167 9.53304 17.9834 9.34971 17.8L7.62471 16.225C5.85804 14.6084 4.26221 13.0042 2.83721 11.4125C1.41221 9.82086 0.699707 8.06669 0.699707 6.15002C0.699707 4.58336 1.22471 3.27502 2.27471 2.22502C3.32471 1.17502 4.63304 0.650024 6.19971 0.650024C7.08304 0.650024 7.91637 0.837524 8.69971 1.21252C9.48304 1.58752 10.1497 2.10002 10.6997 2.75002C11.2497 2.10002 11.9164 1.58752 12.6997 1.21252C13.483 0.837524 14.3164 0.650024 15.1997 0.650024C16.7664 0.650024 18.0747 1.17502 19.1247 2.22502C20.1747 3.27502 20.6997 4.58336 20.6997 6.15002C20.6997 8.06669 19.9914 9.82502 18.5747 11.425C17.158 13.025 15.5497 14.6334 13.7497 16.25L12.0497 17.8C11.8664 17.9834 11.6539 18.1167 11.4122 18.2C11.1705 18.2834 10.933 18.325 10.6997 18.325ZM9.74971 4.75002C9.26637 4.06669 8.74971 3.54586 8.19971 3.18752C7.64971 2.82919 6.98304 2.65002 6.19971 2.65002C5.19971 2.65002 4.36637 2.98336 3.69971 3.65002C3.03304 4.31669 2.69971 5.15002 2.69971 6.15002C2.69971 7.01669 3.00804 7.93753 3.62471 8.91253C4.24137 9.88753 4.97887 10.8334 5.83721 11.75C6.69554 12.6667 7.57887 13.525 8.48721 14.325C9.39554 15.125 10.133 15.7834 10.6997 16.3C11.2664 15.7834 12.0039 15.125 12.9122 14.325C13.8205 13.525 14.7039 12.6667 15.5622 11.75C16.4205 10.8334 17.158 9.88753 17.7747 8.91253C18.3914 7.93753 18.6997 7.01669 18.6997 6.15002C18.6997 5.15002 18.3664 4.31669 17.6997 3.65002C17.033 2.98336 16.1997 2.65002 15.1997 2.65002C14.4164 2.65002 13.7497 2.82919 13.1997 3.18752C12.6497 3.54586 12.133 4.06669 11.6497 4.75002C11.533 4.91669 11.3914 5.04169 11.2247 5.12502C11.058 5.20836 10.883 5.25002 10.6997 5.25002C10.5164 5.25002 10.3414 5.20836 10.1747 5.12502C10.008 5.04169 9.86637 4.91669 9.74971 4.75002Z" fill="black" />
+  //   </svg>
+
+  // );
 }
 
 export default Favorite;
diff --git a/src/components/icons/FilledBoard.tsx b/src/components/icons/FilledBoard.tsx
new file mode 100644
index 00000000..f80ebdc0
--- /dev/null
+++ b/src/components/icons/FilledBoard.tsx
@@ -0,0 +1,29 @@
+/* eslint-disable max-len */
+interface FilledFavoriteProps {
+  width?: number
+  height?: number
+}
+
+function FilledFavorite({ width = 21, height = 19 }: FilledFavoriteProps) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g id="message-smile_sol">
+        <path
+          id="Subtract"
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M16.2414 2H7.7588H7.75878H7.75874C6.9538 1.99999 6.28945 1.99998 5.74827 2.0442C5.18617 2.09012 4.66947 2.18869 4.18413 2.43598C3.43149 2.81947 2.81956 3.43139 2.43607 4.18404C2.18878 4.66938 2.09022 5.18608 2.04429 5.74818C2.00007 6.28937 2.00008 6.95373 2.0001 7.7587L2.0001 14L2.00005 14.1376C1.99962 14.933 1.9993 15.5236 2.13639 16.0353C2.50626 17.4156 3.58445 18.4938 4.96482 18.8637C5.27229 18.9461 5.60829 18.9789 6.0001 18.9918L6.00009 20.371C6.00005 20.6062 6 20.846 6.01785 21.0425C6.03492 21.2305 6.08012 21.5852 6.32778 21.8955C6.61276 22.2525 7.0449 22.4602 7.50172 22.4597C7.8987 22.4593 8.20394 22.273 8.36137 22.1689C8.52597 22.06 8.7132 21.9102 8.89688 21.7632L11.31 19.8327C11.8286 19.4178 11.9826 19.3007 12.1425 19.219C12.303 19.137 12.4738 19.0771 12.6504 19.0408C12.8263 19.0047 13.0197 19 13.6838 19H16.2414C17.0464 19 17.7107 19 18.2519 18.9558C18.814 18.9099 19.3307 18.8113 19.8161 18.564C20.5687 18.1805 21.1806 17.5686 21.5641 16.816C21.8114 16.3306 21.91 15.8139 21.9559 15.2518C22.0001 14.7106 22.0001 14.0463 22.0001 13.2413V7.75868C22.0001 6.95372 22.0001 6.28937 21.9559 5.74818C21.91 5.18608 21.8114 4.66938 21.5641 4.18404C21.1806 3.43139 20.5687 2.81947 19.8161 2.43598C19.3307 2.18869 18.814 2.09012 18.2519 2.0442C17.7107 1.99998 17.0464 1.99999 16.2414 2H16.2414H16.2414ZM7.75009 7.5C7.75009 6.67157 8.42166 6 9.25009 6C10.0785 6 10.7501 6.67157 10.7501 7.5C10.7501 8.32843 10.0785 9 9.25009 9C8.42166 9 7.75009 8.32843 7.75009 7.5ZM13.2501 7.5C13.2501 6.67157 13.9217 6 14.7501 6C15.5785 6 16.2501 6.67157 16.2501 7.5C16.2501 8.32843 15.5785 9 14.7501 9C13.9217 9 13.2501 8.32843 13.2501 7.5ZM9.33214 11.9453C9.02579 11.4858 8.40492 11.3616 7.94539 11.668C7.48586 11.9743 7.36169 12.5952 7.66804 13.0547C8.18649 13.8324 9.66512 15 12.0001 15C14.3351 15 15.8137 13.8324 16.3321 13.0547C16.6385 12.5952 16.5143 11.9743 16.0548 11.668C15.5953 11.3616 14.9744 11.4858 14.668 11.9453C14.5198 12.1676 13.6651 13 12.0001 13C10.3351 13 9.48036 12.1676 9.33214 11.9453Z"
+          fill="#0075FF"
+        />
+      </g>
+    </svg>
+  );
+}
+
+export default FilledFavorite;
diff --git a/src/components/icons/FilledChannel.tsx b/src/components/icons/FilledChannel.tsx
new file mode 100644
index 00000000..b1142df0
--- /dev/null
+++ b/src/components/icons/FilledChannel.tsx
@@ -0,0 +1,34 @@
+/* eslint-disable max-len */
+interface FilledFavoriteProps {
+  width?: number
+  height?: number
+}
+
+function FilledFavorite({ width = 21, height = 19 }: FilledFavoriteProps) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g id="youtube_sol">
+        <g id="Subtract">
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M20.9438 6.05395C21.2534 6.37318 21.4733 6.76846 21.5813 7.19989C21.8697 8.79862 22.0097 10.4206 21.9995 12.0451C22.0052 13.6453 21.8653 15.2427 21.5813 16.8176C21.4733 17.249 21.2534 17.6443 20.9438 17.9635C20.6341 18.2827 20.2457 18.5146 19.8178 18.6357C18.2542 19.0538 12 19.0538 12 19.0538C12 19.0538 5.74578 19.0538 4.18222 18.6357C3.76299 18.5209 3.38043 18.3 3.0715 17.9943C2.76258 17.6886 2.53773 17.3083 2.41868 16.8903C2.1303 15.2916 1.99032 13.6696 2.00052 12.0451C1.99255 10.4327 2.13253 8.82303 2.41868 7.23625C2.52666 6.80482 2.74659 6.40954 3.05623 6.09031C3.36588 5.77109 3.75429 5.53923 4.18222 5.41816C5.74578 5 12 5 12 5C12 5 18.2542 5 19.8178 5.3818C20.2457 5.50287 20.6341 5.73473 20.9438 6.05395ZM11.2349 8.3602L11.253 8.37182L15.2128 10.9174L15.2129 10.9175C15.3724 11.02 15.5195 11.1146 15.6324 11.2026C15.7494 11.2938 15.8888 11.4216 15.9687 11.6108C16.0739 11.8596 16.0739 12.1404 15.9687 12.3892C15.8888 12.5785 15.7494 12.7062 15.6324 12.7975C15.5195 12.8855 15.3724 12.9801 15.2129 13.0826L15.2129 13.0826L15.2129 13.0826L11.2349 15.6399L11.2349 15.6399C11.0497 15.7589 10.8827 15.8663 10.741 15.94C10.5986 16.0141 10.4043 16.0978 10.1788 16.0816C9.88943 16.061 9.62333 15.9157 9.44949 15.6835C9.314 15.5025 9.27922 15.2938 9.26456 15.1339C9.24997 14.9749 9.24999 14.7764 9.25 14.5562V14.5562L9.25 9.46535L9.25 9.44386V9.44382C9.24999 9.22368 9.24997 9.02517 9.26456 8.8661C9.27922 8.70623 9.314 8.49751 9.44949 8.31654C9.62333 8.08434 9.88943 7.93906 10.1788 7.91839C10.4043 7.90229 10.5986 7.98589 10.741 8.06002C10.8827 8.13377 11.0497 8.24113 11.2349 8.3602Z"
+            fill="#0075FF"
+          />
+          <path
+            d="M21.5813 7.19989L22.0734 7.11113C22.0714 7.10017 22.0691 7.08928 22.0664 7.07848L21.5813 7.19989ZM20.9438 6.05395L21.3027 5.70582L21.3027 5.70582L20.9438 6.05395ZM21.9995 12.0451L21.4995 12.0419L21.4995 12.0469L21.9995 12.0451ZM21.5813 16.8176L22.0664 16.939C22.0691 16.9282 22.0714 16.9173 22.0734 16.9063L21.5813 16.8176ZM19.8178 18.6357L19.947 19.1187L19.9539 19.1168L19.8178 18.6357ZM12 19.0538L12 18.5538L12 18.5538L12 19.0538ZM4.18222 18.6357L4.05026 19.1179L4.05304 19.1187L4.18222 18.6357ZM3.0715 17.9943L2.71979 18.3497L2.71979 18.3497L3.0715 17.9943ZM2.41868 16.8903L1.92662 16.979C1.92955 16.9953 1.93328 17.0114 1.9378 17.0272L2.41868 16.8903ZM2.00052 12.0451L2.50054 12.0482L2.50051 12.0426L2.00052 12.0451ZM2.41868 7.23625L1.93364 7.11484C1.93094 7.12565 1.92859 7.13655 1.92662 7.14751L2.41868 7.23625ZM3.05623 6.09031L2.69734 5.74218L2.69734 5.74218L3.05623 6.09031ZM4.18222 5.41816L4.05303 4.93509L4.04611 4.93704L4.18222 5.41816ZM19.8178 5.3818L19.9539 4.90068C19.9481 4.89904 19.9422 4.8975 19.9364 4.89607L19.8178 5.3818ZM11.253 8.37182L10.9826 8.7924L10.9826 8.79241L11.253 8.37182ZM11.2349 8.3602L10.9645 8.78077L10.9645 8.78078L11.2349 8.3602ZM15.2128 10.9174L15.4961 10.5054C15.4919 10.5025 15.4876 10.4996 15.4832 10.4969L15.2128 10.9174ZM15.2129 10.9175L14.9296 11.3295C14.9339 11.3324 14.9382 11.3353 14.9425 11.3381L15.2129 10.9175ZM15.6324 11.2026L15.9398 10.8083L15.9398 10.8083L15.6324 11.2026ZM15.9687 11.6108L15.5082 11.8054L15.5082 11.8054L15.9687 11.6108ZM15.9687 12.3892L16.4293 12.5838L16.4293 12.5838L15.9687 12.3892ZM15.6324 12.7975L15.3249 12.4032L15.3249 12.4032L15.6324 12.7975ZM15.2129 13.0826L15.475 13.5085L15.4833 13.5032L15.2129 13.0826ZM15.2129 13.0826L15.4736 13.5092L15.4749 13.5084L15.2129 13.0826ZM15.2129 13.0826L14.9521 12.6558L14.9425 12.662L15.2129 13.0826ZM11.2349 15.6399L11.483 16.074C11.4905 16.0697 11.4979 16.0652 11.5053 16.0605L11.2349 15.6399ZM11.2349 15.6399L10.9868 15.2057C10.9792 15.2101 10.9718 15.2146 10.9645 15.2193L11.2349 15.6399ZM10.741 15.94L10.5102 15.4965L10.5102 15.4965L10.741 15.94ZM10.1788 16.0816L10.1431 16.5804L10.1431 16.5804L10.1788 16.0816ZM9.44949 15.6835L9.84974 15.3838L9.84974 15.3838L9.44949 15.6835ZM9.26456 15.1339L8.76665 15.1796L8.76665 15.1796L9.26456 15.1339ZM9.25 14.5562L9.75 14.5563V14.5562H9.25ZM9.25 14.5562L8.75 14.5562V14.5562H9.25ZM9.25 9.46535L9.75 9.46535L9.75 9.46531L9.25 9.46535ZM9.25 9.44386L8.75 9.44386L8.75 9.44391L9.25 9.44386ZM9.25 9.44382L9.75 9.44382L9.75 9.44379L9.25 9.44382ZM9.26456 8.8661L8.76665 8.82045L8.76665 8.82045L9.26456 8.8661ZM9.44949 8.31654L9.04923 8.01689L9.04923 8.01689L9.44949 8.31654ZM10.1788 7.91839L10.1431 7.41967L10.1431 7.41967L10.1788 7.91839ZM10.741 8.06002L10.5102 8.50353L10.5102 8.50354L10.741 8.06002ZM22.0664 7.07848C21.937 6.5617 21.6736 6.08821 21.3027 5.70582L20.5849 6.40208C20.8333 6.65815 21.0097 6.97522 21.0963 7.32129L22.0664 7.07848ZM22.4995 12.0482C22.5099 10.3929 22.3672 8.74018 22.0734 7.11113L21.0893 7.28864C21.3722 8.85705 21.5095 10.4483 21.4995 12.0419L22.4995 12.0482ZM22.0734 16.9063C22.3627 15.3016 22.5053 13.6739 22.4995 12.0433L21.4995 12.0469C21.5051 13.6168 21.3678 15.1839 21.0893 16.7288L22.0734 16.9063ZM21.3027 18.3116C21.6736 17.9292 21.937 17.4558 22.0664 16.939L21.0963 16.6962C21.0097 17.0422 20.8333 17.3593 20.5849 17.6154L21.3027 18.3116ZM19.9539 19.1168C20.4665 18.9717 20.9318 18.694 21.3027 18.3116L20.5849 17.6154C20.3365 17.8714 20.0249 18.0574 19.6817 18.1545L19.9539 19.1168ZM12 19.0538C12 19.5538 12 19.5538 12.0001 19.5538C12.0002 19.5538 12.0002 19.5538 12.0004 19.5538C12.0006 19.5538 12.0009 19.5538 12.0013 19.5538C12.0021 19.5538 12.0033 19.5538 12.0048 19.5538C12.0079 19.5538 12.0125 19.5538 12.0185 19.5538C12.0306 19.5538 12.0484 19.5538 12.0717 19.5537C12.1183 19.5536 12.1867 19.5534 12.2741 19.553C12.4491 19.5522 12.7005 19.5505 13.007 19.5473C13.6198 19.5407 14.4538 19.5276 15.3374 19.5013C16.2202 19.4751 17.1566 19.4356 17.973 19.3761C18.7754 19.3176 19.5042 19.2371 19.947 19.1187L19.6886 18.1526C19.3495 18.2433 18.7102 18.3196 17.9003 18.3787C17.1042 18.4368 16.1839 18.4757 15.3077 18.5018C14.4323 18.5278 13.605 18.5408 12.9963 18.5473C12.6921 18.5506 12.4426 18.5522 12.2694 18.553C12.1828 18.5534 12.1153 18.5536 12.0695 18.5537C12.0466 18.5538 12.0291 18.5538 12.0175 18.5538C12.0116 18.5538 12.0072 18.5538 12.0043 18.5538C12.0028 18.5538 12.0017 18.5538 12.001 18.5538C12.0007 18.5538 12.0004 18.5538 12.0002 18.5538C12.0001 18.5538 12.0001 18.5538 12 18.5538C12 18.5538 12 18.5538 12 19.0538ZM4.05304 19.1187C4.49576 19.2371 5.22458 19.3176 6.027 19.3761C6.84341 19.4356 7.77978 19.4751 8.66259 19.5013C9.54621 19.5276 10.3802 19.5407 10.993 19.5473C11.2995 19.5505 11.5509 19.5522 11.7259 19.553C11.8133 19.5534 11.8817 19.5536 11.9283 19.5537C11.9516 19.5538 11.9694 19.5538 11.9815 19.5538C11.9875 19.5538 11.9921 19.5538 11.9952 19.5538C11.9967 19.5538 11.9979 19.5538 11.9987 19.5538C11.9991 19.5538 11.9994 19.5538 11.9996 19.5538C11.9998 19.5538 11.9998 19.5538 11.9999 19.5538C12 19.5538 12 19.5538 12 19.0538C12 18.5538 12 18.5538 12 18.5538C11.9999 18.5538 11.9999 18.5538 11.9998 18.5538C11.9996 18.5538 11.9993 18.5538 11.999 18.5538C11.9983 18.5538 11.9972 18.5538 11.9957 18.5538C11.9928 18.5538 11.9884 18.5538 11.9825 18.5538C11.9709 18.5538 11.9534 18.5538 11.9305 18.5537C11.8847 18.5536 11.8172 18.5534 11.7306 18.553C11.5574 18.5522 11.308 18.5506 11.0037 18.5473C10.395 18.5408 9.56768 18.5278 8.6923 18.5018C7.81611 18.4757 6.89576 18.4368 6.09975 18.3787C5.28976 18.3196 4.65047 18.2433 4.31141 18.1526L4.05304 19.1187ZM2.71979 18.3497C3.08984 18.7159 3.54809 18.9805 4.05027 19.1179L4.31418 18.1534C3.9779 18.0614 3.67103 17.8842 3.42322 17.6389L2.71979 18.3497ZM1.9378 17.0272C2.0804 17.528 2.34974 17.9835 2.71979 18.3497L3.42322 17.6389C3.17542 17.3937 2.99505 17.0887 2.89956 16.7533L1.9378 17.0272ZM1.50053 12.0419C1.49014 13.6973 1.63277 15.35 1.92662 16.979L2.91074 16.8015C2.62783 15.2331 2.4905 13.6419 2.50051 12.0482L1.50053 12.0419ZM1.92662 7.14751C1.63504 8.76439 1.49241 10.4046 1.50053 12.0476L2.50051 12.0426C2.4927 10.4608 2.63002 8.88167 2.91074 7.32498L1.92662 7.14751ZM2.69734 5.74218C2.32643 6.12457 2.06299 6.59806 1.93364 7.11484L2.90372 7.35765C2.99034 7.01159 3.16675 6.69451 3.41513 6.43844L2.69734 5.74218ZM4.04611 4.93704C3.53351 5.08207 3.06825 5.3598 2.69734 5.74218L3.41513 6.43844C3.66351 6.18238 3.97507 5.99639 4.31834 5.89928L4.04611 4.93704ZM12 5C12 4.5 12 4.5 11.9999 4.5C11.9998 4.5 11.9998 4.5 11.9996 4.5C11.9994 4.5 11.9991 4.5 11.9987 4.5C11.9979 4.5 11.9967 4.5 11.9952 4.5C11.9921 4.5 11.9875 4.50001 11.9815 4.50001C11.9694 4.50003 11.9516 4.50005 11.9283 4.5001C11.8817 4.50021 11.8133 4.50041 11.7259 4.50082C11.5509 4.50164 11.2995 4.50328 10.993 4.50656C10.3802 4.51312 9.54621 4.52623 8.66259 4.55249C7.77978 4.57872 6.84341 4.61819 6.027 4.67774C5.22458 4.73626 4.49576 4.81674 4.05304 4.93514L4.31141 5.90118C4.65047 5.8105 5.28976 5.73417 6.09975 5.67509C6.89576 5.61703 7.81611 5.57809 8.6923 5.55205C9.56768 5.52604 10.395 5.51302 11.0037 5.50651C11.308 5.50325 11.5574 5.50162 11.7306 5.50081C11.8172 5.5004 11.8847 5.5002 11.9305 5.5001C11.9534 5.50005 11.9709 5.50003 11.9825 5.50001C11.9884 5.50001 11.9928 5.5 11.9957 5.5C11.9972 5.5 11.9983 5.5 11.999 5.5C11.9993 5.5 11.9996 5.5 11.9998 5.5C11.9999 5.5 11.9999 5.5 12 5.5C12 5.5 12 5.5 12 5ZM19.9364 4.89607C19.4976 4.78893 18.7724 4.71563 17.9698 4.66218C17.1543 4.60787 16.2186 4.57185 15.3361 4.54791C14.4529 4.52394 13.6192 4.51197 13.0065 4.50599C12.7001 4.503 12.4488 4.5015 12.2739 4.50075C12.1865 4.50038 12.1182 4.50019 12.0716 4.50009C12.0484 4.50005 12.0305 4.50002 12.0185 4.50001C12.0125 4.50001 12.0079 4.5 12.0048 4.5C12.0032 4.5 12.0021 4.5 12.0013 4.5C12.0009 4.5 12.0006 4.5 12.0003 4.5C12.0002 4.5 12.0002 4.5 12.0001 4.5C12 4.5 12 4.5 12 5C12 5.5 12 5.5 12 5.5C12.0001 5.5 12.0001 5.5 12.0002 5.5C12.0004 5.5 12.0007 5.5 12.001 5.5C12.0017 5.5 12.0028 5.5 12.0043 5.5C12.0072 5.5 12.0116 5.50001 12.0175 5.50001C12.0292 5.50002 12.0467 5.50005 12.0696 5.50009C12.1154 5.50018 12.183 5.50037 12.2696 5.50074C12.4429 5.50148 12.6924 5.50297 12.9968 5.50594C13.6057 5.51189 14.4333 5.52378 15.309 5.54754C16.1855 5.57132 17.1065 5.6069 17.9034 5.65997C18.7132 5.7139 19.3561 5.78376 19.6992 5.86753L19.9364 4.89607ZM21.3027 5.70582C20.9318 5.32344 20.4665 5.04571 19.9539 4.90068L19.6817 5.86291C20.0249 5.96003 20.3365 6.14601 20.5849 6.40208L21.3027 5.70582ZM11.5234 7.95124L11.5053 7.93961L10.9645 8.78078L10.9826 8.7924L11.5234 7.95124ZM15.4832 10.4969L11.5234 7.95123L10.9826 8.79241L14.9425 11.338L15.4832 10.4969ZM15.4961 10.5054L15.4961 10.5054L14.9296 11.3295L14.9296 11.3295L15.4961 10.5054ZM15.9398 10.8083C15.8051 10.7032 15.6363 10.5953 15.4832 10.4968L14.9425 11.3381C15.1084 11.4447 15.2339 11.5259 15.3249 11.5968L15.9398 10.8083ZM16.4293 11.4162C16.2996 11.1092 16.0797 10.9174 15.9398 10.8083L15.3249 11.5968C15.4191 11.6703 15.478 11.7339 15.5082 11.8054L16.4293 11.4162ZM16.4293 12.5838C16.587 12.2106 16.587 11.7894 16.4293 11.4162L15.5082 11.8054C15.5607 11.9298 15.5607 12.0702 15.5082 12.1946L16.4293 12.5838ZM15.9398 13.1918C16.0797 13.0827 16.2996 12.8908 16.4293 12.5838L15.5082 12.1946C15.478 12.2661 15.4191 12.3297 15.3249 12.4032L15.9398 13.1918ZM15.4833 13.5032C15.6363 13.4048 15.8052 13.2968 15.9398 13.1918L15.3249 12.4032C15.2339 12.4742 15.1084 12.5553 14.9426 12.662L15.4833 13.5032ZM15.4749 13.5084L15.475 13.5084L14.9509 12.6567L14.9508 12.6568L15.4749 13.5084ZM15.4736 13.5092L15.4736 13.5092L14.9521 12.6559L14.9521 12.656L15.4736 13.5092ZM11.5053 16.0605L15.4832 13.5032L14.9425 12.662L10.9645 15.2193L11.5053 16.0605ZM11.4829 16.074L11.483 16.074L10.9868 15.2057L10.9868 15.2057L11.4829 16.074ZM10.9719 16.3835C11.1384 16.2969 11.3269 16.1752 11.5053 16.0604L10.9645 15.2193C10.7726 15.3427 10.6271 15.4357 10.5102 15.4965L10.9719 16.3835ZM10.1431 16.5804C10.5107 16.6066 10.8075 16.4691 10.9719 16.3835L10.5102 15.4965C10.3898 15.5592 10.2978 15.5889 10.2144 15.5829L10.1431 16.5804ZM9.04923 15.9832C9.30999 16.3315 9.70914 16.5494 10.1431 16.5804L10.2144 15.5829C10.0697 15.5726 9.93667 15.4999 9.84974 15.3838L9.04923 15.9832ZM8.76665 15.1796C8.78357 15.3642 8.82839 15.6882 9.04923 15.9832L9.84974 15.3838C9.79962 15.3169 9.77487 15.2235 9.76247 15.0883L8.76665 15.1796ZM8.75 14.5562C8.74999 14.7683 8.74951 14.9927 8.76665 15.1796L9.76247 15.0883C9.75044 14.957 9.74999 14.7844 9.75 14.5563L8.75 14.5562ZM8.75 14.5562V14.5562H9.75V14.5562H8.75ZM8.75 9.46535L8.75 14.5562L9.75 14.5562L9.75 9.46535L8.75 9.46535ZM8.75 9.44391L8.75 9.4654L9.75 9.46531L9.75 9.44382L8.75 9.44391ZM8.75 9.44382V9.44386H9.75V9.44382H8.75ZM8.76665 8.82045C8.74951 9.00734 8.74999 9.23174 8.75 9.44385L9.75 9.44379C9.74999 9.21563 9.75044 9.043 9.76247 8.91175L8.76665 8.82045ZM9.04923 8.01689C8.82839 8.31187 8.78357 8.63589 8.76665 8.82045L9.76247 8.91176C9.77487 8.77656 9.79962 8.68315 9.84974 8.6162L9.04923 8.01689ZM10.1431 7.41967C9.70914 7.45066 9.30999 7.66858 9.04923 8.01689L9.84974 8.6162C9.93667 8.5001 10.0697 8.42746 10.2144 8.41712L10.1431 7.41967ZM10.9719 7.6165C10.8075 7.53093 10.5107 7.39341 10.1431 7.41967L10.2144 8.41712C10.2978 8.41117 10.3898 8.44086 10.5102 8.50353L10.9719 7.6165ZM11.5053 7.93962C11.3269 7.8249 11.1384 7.70315 10.9719 7.61649L10.5102 8.50354C10.6271 8.56439 10.7726 8.65736 10.9645 8.78077L11.5053 7.93962Z"
+            fill="#0075FF"
+          />
+        </g>
+      </g>
+    </svg>
+  );
+}
+
+export default FilledFavorite;
diff --git a/src/components/icons/FilledFavorite.tsx b/src/components/icons/FilledFavorite.tsx
index ecad9ad3..541ab8f0 100644
--- a/src/components/icons/FilledFavorite.tsx
+++ b/src/components/icons/FilledFavorite.tsx
@@ -5,11 +5,30 @@ interface FilledFavoriteProps {
 
 function FilledFavorite({ width = 21, height = 19 }: FilledFavoriteProps) {
   return (
-    <svg width={width} height={height} viewBox="0 0 21 19" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M10.6997 18.325C10.4664 18.325 10.2289 18.2834 9.98721 18.2C9.74554 18.1167 9.53304 17.9834 9.34971 17.8L7.62471 16.225C5.85804 14.6084 4.26221 13.0042 2.83721 11.4125C1.41221 9.82086 0.699707 8.06669 0.699707 6.15002C0.699707 4.58336 1.22471 3.27502 2.27471 2.22502C3.32471 1.17502 4.63304 0.650024 6.19971 0.650024C7.08304 0.650024 7.91637 0.837524 8.69971 1.21252C9.48304 1.58752 10.1497 2.10002 10.6997 2.75002C11.2497 2.10002 11.9164 1.58752 12.6997 1.21252C13.483 0.837524 14.3164 0.650024 15.1997 0.650024C16.7664 0.650024 18.0747 1.17502 19.1247 2.22502C20.1747 3.27502 20.6997 4.58336 20.6997 6.15002C20.6997 8.06669 19.9914 9.82502 18.5747 11.425C17.158 13.025 15.5497 14.6334 13.7497 16.25L12.0497 17.8C11.8664 17.9834 11.6539 18.1167 11.4122 18.2C11.1705 18.2834 10.933 18.325 10.6997 18.325Z" fill="#0075FF" />
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g id="bookmark_sol">
+        <path
+          id="Union"
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M14.2413 2H9.7587H9.75869C8.95372 1.99999 8.28937 1.99998 7.74818 2.04419C7.18608 2.09012 6.66937 2.18868 6.18404 2.43598C5.43139 2.81947 4.81947 3.43139 4.43598 4.18404C4.18868 4.66937 4.09012 5.18608 4.04419 5.74818C3.99998 6.28937 3.99999 6.95372 4 7.75869V7.7587V21C4 21.3565 4.18976 21.686 4.49807 21.8649C4.80639 22.0438 5.18664 22.0451 5.49614 21.8682L12 18.1518L18.5039 21.8682C18.8134 22.0451 19.1936 22.0438 19.5019 21.8649C19.8102 21.686 20 21.3565 20 21V7.75873V7.7587C20 6.95373 20 6.28937 19.9558 5.74818C19.9099 5.18608 19.8113 4.66937 19.564 4.18404C19.1805 3.43139 18.5686 2.81947 17.816 2.43598C17.3306 2.18868 16.8139 2.09012 16.2518 2.04419C15.7106 1.99998 15.0463 1.99999 14.2413 2H14.2413Z"
+          fill="#0075FF"
+        />
+      </g>
     </svg>
-
   );
+  // return (
+  //   <svg width={width} height={height} viewBox="0 0 21 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+  //     <path d="M10.6997 18.325C10.4664 18.325 10.2289 18.2834 9.98721 18.2C9.74554 18.1167 9.53304 17.9834 9.34971 17.8L7.62471 16.225C5.85804 14.6084 4.26221 13.0042 2.83721 11.4125C1.41221 9.82086 0.699707 8.06669 0.699707 6.15002C0.699707 4.58336 1.22471 3.27502 2.27471 2.22502C3.32471 1.17502 4.63304 0.650024 6.19971 0.650024C7.08304 0.650024 7.91637 0.837524 8.69971 1.21252C9.48304 1.58752 10.1497 2.10002 10.6997 2.75002C11.2497 2.10002 11.9164 1.58752 12.6997 1.21252C13.483 0.837524 14.3164 0.650024 15.1997 0.650024C16.7664 0.650024 18.0747 1.17502 19.1247 2.22502C20.1747 3.27502 20.6997 4.58336 20.6997 6.15002C20.6997 8.06669 19.9914 9.82502 18.5747 11.425C17.158 13.025 15.5497 14.6334 13.7497 16.25L12.0497 17.8C11.8664 17.9834 11.6539 18.1167 11.4122 18.2C11.1705 18.2834 10.933 18.325 10.6997 18.325Z" fill="#0075FF" />
+  //   </svg>
+
+  // );
 }
 
 export default FilledFavorite;
diff --git a/src/components/icons/FilledHome.tsx b/src/components/icons/FilledHome.tsx
index 0db1c178..ffe9cecd 100644
--- a/src/components/icons/FilledHome.tsx
+++ b/src/components/icons/FilledHome.tsx
@@ -5,11 +5,31 @@ interface HomeProps {
 
 function FilledHome({ width = 16, height = 20 }: HomeProps) {
   return (
-    <svg width={width} height={height} viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M0.5 16V7C0.5 6.68333 0.570833 6.38333 0.7125 6.1C0.854167 5.81667 1.05 5.58333 1.3 5.4L7.3 0.9C7.65 0.633333 8.05 0.5 8.5 0.5C8.95 0.5 9.35 0.633333 9.7 0.9L15.7 5.4C15.95 5.58333 16.1458 5.81667 16.2875 6.1C16.4292 6.38333 16.5 6.68333 16.5 7V16C16.5 16.55 16.3042 17.0208 15.9125 17.4125C15.5208 17.8042 15.05 18 14.5 18H11.5C11.2167 18 10.9792 17.9042 10.7875 17.7125C10.5958 17.5208 10.5 17.2833 10.5 17V12C10.5 11.7167 10.4042 11.4792 10.2125 11.2875C10.0208 11.0958 9.78333 11 9.5 11H7.5C7.21667 11 6.97917 11.0958 6.7875 11.2875C6.59583 11.4792 6.5 11.7167 6.5 12V17C6.5 17.2833 6.40417 17.5208 6.2125 17.7125C6.02083 17.9042 5.78333 18 5.5 18H2.5C1.95 18 1.47917 17.8042 1.0875 17.4125C0.695833 17.0208 0.5 16.55 0.5 16Z" fill="#0075FF" />
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g id="home_sol">
+        <path
+          id="Union"
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M12.5226 1.33636C12.1803 1.24368 11.8195 1.24368 11.4772 1.33636C11.0798 1.44395 10.7453 1.7066 10.4783 1.91623L10.4037 1.97465L3.62134 7.24977L3.54364 7.31012C3.16701 7.6024 2.83519 7.85991 2.58794 8.19421C2.37094 8.48759 2.2093 8.8181 2.11094 9.1695C1.99886 9.56992 1.99931 9.98993 1.99982 10.4667L1.9999 10.5651L1.99989 17.8385C1.99988 18.3657 1.99986 18.8204 2.03046 19.195C2.06277 19.5904 2.13408 19.9836 2.32688 20.362C2.6145 20.9264 3.07344 21.3854 3.63792 21.673C4.0163 21.8658 4.40952 21.9371 4.80487 21.9694C5.17943 22 5.63419 22 6.16133 22H8.1999L8.22305 22H8.22315C8.34224 22 8.48445 22.0001 8.60973 21.9899C8.75494 21.978 8.96294 21.9475 9.18088 21.8365C9.46312 21.6927 9.6926 21.4632 9.83641 21.181C9.94745 20.963 9.9779 20.755 9.98976 20.6098C10 20.4845 9.99995 20.3423 9.9999 20.2231V20.2231L9.9999 13.6C9.9999 13.3035 10.0007 13.1412 10.0102 13.0246L10.0113 13.0114L10.0245 13.0103C10.1411 13.0008 10.3034 13 10.5999 13H13.3999C13.6964 13 13.8587 13.0008 13.9753 13.0103L13.9884 13.0114L13.9896 13.0246C13.9991 13.1412 13.9999 13.3035 13.9999 13.6L13.9999 20.2231C13.9998 20.3422 13.9998 20.4845 14.01 20.6098C14.0219 20.755 14.0523 20.963 14.1634 21.181C14.3072 21.4632 14.5367 21.6927 14.8189 21.8365C15.0369 21.9475 15.2448 21.978 15.3901 21.9899C15.5153 22.0001 15.6576 22 15.7766 22H15.7767L15.7999 22H17.8385C18.3656 22 18.8204 22 19.1949 21.9694C19.5903 21.9371 19.9835 21.8658 20.3619 21.673C20.9264 21.3854 21.3853 20.9264 21.6729 20.362C21.8657 19.9836 21.937 19.5904 21.9693 19.195C21.9999 18.8204 21.9999 18.3657 21.9999 17.8386V10.5651L22 10.4667C22.0005 9.98993 22.0009 9.56992 21.8889 9.1695C21.7905 8.8181 21.6288 8.48759 21.4119 8.19421C21.1646 7.85991 20.8328 7.60241 20.4562 7.31013L20.3784 7.24977L13.5961 1.97465L13.5215 1.91624C13.2545 1.7066 12.92 1.44395 12.5226 1.33636Z"
+          fill="#0075FF"
+        />
+      </g>
     </svg>
-
   );
+
+  // return (
+  //   <svg width={width} height={height} viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+  //     <path d="M0.5 16V7C0.5 6.68333 0.570833 6.38333 0.7125 6.1C0.854167 5.81667 1.05 5.58333 1.3 5.4L7.3 0.9C7.65 0.633333 8.05 0.5 8.5 0.5C8.95 0.5 9.35 0.633333 9.7 0.9L15.7 5.4C15.95 5.58333 16.1458 5.81667 16.2875 6.1C16.4292 6.38333 16.5 6.68333 16.5 7V16C16.5 16.55 16.3042 17.0208 15.9125 17.4125C15.5208 17.8042 15.05 18 14.5 18H11.5C11.2167 18 10.9792 17.9042 10.7875 17.7125C10.5958 17.5208 10.5 17.2833 10.5 17V12C10.5 11.7167 10.4042 11.4792 10.2125 11.2875C10.0208 11.0958 9.78333 11 9.5 11H7.5C7.21667 11 6.97917 11.0958 6.7875 11.2875C6.59583 11.4792 6.5 11.7167 6.5 12V17C6.5 17.2833 6.40417 17.5208 6.2125 17.7125C6.02083 17.9042 5.78333 18 5.5 18H2.5C1.95 18 1.47917 17.8042 1.0875 17.4125C0.695833 17.0208 0.5 16.55 0.5 16Z" fill="#0075FF" />
+  //   </svg>
+
+  // );
 }
 
 export default FilledHome;
diff --git a/src/components/icons/Home.tsx b/src/components/icons/Home.tsx
index 543fc88b..cf0c2ece 100644
--- a/src/components/icons/Home.tsx
+++ b/src/components/icons/Home.tsx
@@ -5,11 +5,32 @@ interface HomeProps {
 
 function Home({ width = 16, height = 20 }: HomeProps) {
   return (
-    <svg width={width} height={height} viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M2.5 16H5.5V11C5.5 10.7167 5.59583 10.4792 5.7875 10.2875C5.97917 10.0958 6.21667 10 6.5 10H10.5C10.7833 10 11.0208 10.0958 11.2125 10.2875C11.4042 10.4792 11.5 10.7167 11.5 11V16H14.5V7L8.5 2.5L2.5 7V16ZM0.5 16V7C0.5 6.68333 0.570833 6.38333 0.7125 6.1C0.854167 5.81667 1.05 5.58333 1.3 5.4L7.3 0.9C7.65 0.633333 8.05 0.5 8.5 0.5C8.95 0.5 9.35 0.633333 9.7 0.9L15.7 5.4C15.95 5.58333 16.1458 5.81667 16.2875 6.1C16.4292 6.38333 16.5 6.68333 16.5 7V16C16.5 16.55 16.3042 17.0208 15.9125 17.4125C15.5208 17.8042 15.05 18 14.5 18H10.5C10.2167 18 9.97917 17.9042 9.7875 17.7125C9.59583 17.5208 9.5 17.2833 9.5 17V12H7.5V17C7.5 17.2833 7.40417 17.5208 7.2125 17.7125C7.02083 17.9042 6.78333 18 6.5 18H2.5C1.95 18 1.47917 17.8042 1.0875 17.4125C0.695833 17.0208 0.5 16.55 0.5 16Z" fill="#1C1B1F" />
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g id="home_line">
+        <path
+          id="Icon"
+          d="M12.9823 2.764C12.631 2.49075 12.4553 2.35412 12.2613 2.3016C12.0902 2.25526 11.9098 2.25526 11.7387 2.3016C11.5447 2.35412 11.369 2.49075 11.0177 2.764L4.23539 8.03912C3.78202 8.39175 3.55534 8.56806 3.39203 8.78886C3.24737 8.98444 3.1396 9.20478 3.07403 9.43905C3 9.70352 3 9.9907 3 10.5651V17.8C3 18.9201 3 19.4801 3.21799 19.908C3.40973 20.2843 3.71569 20.5903 4.09202 20.782C4.51984 21 5.0799 21 6.2 21H8.2C8.48003 21 8.62004 21 8.727 20.9455C8.82108 20.8976 8.89757 20.8211 8.9455 20.727C9 20.62 9 20.48 9 20.2V13.6C9 13.0399 9 12.7599 9.10899 12.546C9.20487 12.3578 9.35785 12.2049 9.54601 12.109C9.75992 12 10.0399 12 10.6 12H13.4C13.9601 12 14.2401 12 14.454 12.109C14.6422 12.2049 14.7951 12.3578 14.891 12.546C15 12.7599 15 13.0399 15 13.6V20.2C15 20.48 15 20.62 15.0545 20.727C15.1024 20.8211 15.1789 20.8976 15.273 20.9455C15.38 21 15.52 21 15.8 21H17.8C18.9201 21 19.4802 21 19.908 20.782C20.2843 20.5903 20.5903 20.2843 20.782 19.908C21 19.4801 21 18.9201 21 17.8V10.5651C21 9.9907 21 9.70352 20.926 9.43905C20.8604 9.20478 20.7526 8.98444 20.608 8.78886C20.4447 8.56806 20.218 8.39175 19.7646 8.03913L12.9823 2.764Z"
+          stroke="#111225"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
     </svg>
-
   );
+
+  // return (
+  //   <svg width={width} height={height} viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+  //     <path d="M2.5 16H5.5V11C5.5 10.7167 5.59583 10.4792 5.7875 10.2875C5.97917 10.0958 6.21667 10 6.5 10H10.5C10.7833 10 11.0208 10.0958 11.2125 10.2875C11.4042 10.4792 11.5 10.7167 11.5 11V16H14.5V7L8.5 2.5L2.5 7V16ZM0.5 16V7C0.5 6.68333 0.570833 6.38333 0.7125 6.1C0.854167 5.81667 1.05 5.58333 1.3 5.4L7.3 0.9C7.65 0.633333 8.05 0.5 8.5 0.5C8.95 0.5 9.35 0.633333 9.7 0.9L15.7 5.4C15.95 5.58333 16.1458 5.81667 16.2875 6.1C16.4292 6.38333 16.5 6.68333 16.5 7V16C16.5 16.55 16.3042 17.0208 15.9125 17.4125C15.5208 17.8042 15.05 18 14.5 18H10.5C10.2167 18 9.97917 17.9042 9.7875 17.7125C9.59583 17.5208 9.5 17.2833 9.5 17V12H7.5V17C7.5 17.2833 7.40417 17.5208 7.2125 17.7125C7.02083 17.9042 6.78333 18 6.5 18H2.5C1.95 18 1.47917 17.8042 1.0875 17.4125C0.695833 17.0208 0.5 16.55 0.5 16Z" fill="#1C1B1F" />
+  //   </svg>
+
+  // );
 }
 
 export default Home;
diff --git a/src/components/icons/Map.tsx b/src/components/icons/Map.tsx
index 442997fb..bcdf70b3 100644
--- a/src/components/icons/Map.tsx
+++ b/src/components/icons/Map.tsx
@@ -7,11 +7,30 @@ interface MapProps {
 }
 
 function Map({ width = 17, height = 20, color = 'black' }: MapProps) {
+  // return (
+  //   <svg width={width} height={height} viewBox="0 0 17 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  //     <path fill={colors[color]} d="M8.8999 19.325C8.66657 19.325 8.43324 19.2833 8.1999 19.2C7.96657 19.1167 7.75824 18.9917 7.5749 18.825C6.49157 17.825 5.53324 16.85 4.6999 15.9C3.86657 14.95 3.17074 14.0292 2.6124 13.1375C2.05407 12.2458 1.62907 11.3875 1.3374 10.5625C1.04574 9.7375 0.899902 8.95 0.899902 8.2C0.899902 5.7 1.70407 3.70833 3.3124 2.225C4.92074 0.741667 6.78324 0 8.8999 0C11.0166 0 12.8791 0.741667 14.4874 2.225C16.0957 3.70833 16.8999 5.7 16.8999 8.2C16.8999 8.95 16.7541 9.7375 16.4624 10.5625C16.1707 11.3875 15.7457 12.2458 15.1874 13.1375C14.6291 14.0292 13.9332 14.95 13.0999 15.9C12.2666 16.85 11.3082 17.825 10.2249 18.825C10.0416 18.9917 9.83324 19.1167 9.5999 19.2C9.36657 19.2833 9.13324 19.325 8.8999 19.325ZM8.8999 10C9.4499 10 9.92074 9.80417 10.3124 9.4125C10.7041 9.02083 10.8999 8.55 10.8999 8C10.8999 7.45 10.7041 6.97917 10.3124 6.5875C9.92074 6.19583 9.4499 6 8.8999 6C8.3499 6 7.87907 6.19583 7.4874 6.5875C7.09574 6.97917 6.8999 7.45 6.8999 8C6.8999 8.55 7.09574 9.02083 7.4874 9.4125C7.87907 9.80417 8.3499 10 8.8999 10Z" />
+  //   </svg>
+
+  // );
   return (
-    <svg width={width} height={height} viewBox="0 0 17 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path fill={colors[color]} d="M8.8999 19.325C8.66657 19.325 8.43324 19.2833 8.1999 19.2C7.96657 19.1167 7.75824 18.9917 7.5749 18.825C6.49157 17.825 5.53324 16.85 4.6999 15.9C3.86657 14.95 3.17074 14.0292 2.6124 13.1375C2.05407 12.2458 1.62907 11.3875 1.3374 10.5625C1.04574 9.7375 0.899902 8.95 0.899902 8.2C0.899902 5.7 1.70407 3.70833 3.3124 2.225C4.92074 0.741667 6.78324 0 8.8999 0C11.0166 0 12.8791 0.741667 14.4874 2.225C16.0957 3.70833 16.8999 5.7 16.8999 8.2C16.8999 8.95 16.7541 9.7375 16.4624 10.5625C16.1707 11.3875 15.7457 12.2458 15.1874 13.1375C14.6291 14.0292 13.9332 14.95 13.0999 15.9C12.2666 16.85 11.3082 17.825 10.2249 18.825C10.0416 18.9917 9.83324 19.1167 9.5999 19.2C9.36657 19.2833 9.13324 19.325 8.8999 19.325ZM8.8999 10C9.4499 10 9.92074 9.80417 10.3124 9.4125C10.7041 9.02083 10.8999 8.55 10.8999 8C10.8999 7.45 10.7041 6.97917 10.3124 6.5875C9.92074 6.19583 9.4499 6 8.8999 6C8.3499 6 7.87907 6.19583 7.4874 6.5875C7.09574 6.97917 6.8999 7.45 6.8999 8C6.8999 8.55 7.09574 9.02083 7.4874 9.4125C7.87907 9.80417 8.3499 10 8.8999 10Z" />
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g id="map-01">
+        <path
+          fill={colors[color]}
+          id="Icon (Stroke)"
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M22.4719 1.11833C22.797 1.29235 23 1.63121 23 2V18C23 18.3344 22.8329 18.6466 22.5547 18.8321L16.5547 22.8321C16.2395 23.0422 15.8327 23.0562 15.5039 22.8682L9 19.1518L2.49614 22.8682C2.18664 23.0451 1.80639 23.0438 1.49807 22.8649C1.18976 22.686 1 22.3565 1 22V6C1 5.64114 1.19229 5.3098 1.50386 5.13176L8.50386 1.13176C8.81129 0.956083 9.18871 0.956083 9.49614 1.13176L15.9595 4.82513L21.4453 1.16795C21.7522 0.96338 22.1467 0.944308 22.4719 1.11833ZM15 6.58032L10 3.72318V17.4197L15 20.2768V6.58032ZM17 20.1315L21 17.4648V3.86852L17 6.53518V20.1315ZM8 17.4197V3.72318L3 6.58032V20.2768L8 17.4197Z"
+        />
+      </g>
     </svg>
-
   );
 }
 
diff --git a/src/components/shared/bottom-nav/BottomNav.tsx b/src/components/shared/bottom-nav/BottomNav.tsx
index 44eb0dd2..671c52ac 100644
--- a/src/components/shared/bottom-nav/BottomNav.tsx
+++ b/src/components/shared/bottom-nav/BottomNav.tsx
@@ -1,9 +1,13 @@
 'use client';
 
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import classNames from 'classnames/bind';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 
+import Board from '@/components/icons/Board';
+import FilledBoard from '@/components/icons/FilledBoard';
+import FilledChannel from '@/components/icons/FilledChannel';
 import Channel from '@components/icons/Channel';
 import Favorite from '@components/icons/Favorite';
 import FilledFavorite from '@components/icons/FilledFavorite';
@@ -28,31 +32,63 @@ function BottomNav() {
         <li>
           <Link href="/map">
             <Map color={filteredPathName.startsWith('map') ? 'primary500' : 'black'} />
-            <Text typography="t8" fontWeight="200" color={filteredPathName.startsWith('map') ? 'primary500' : 'black'}>지도</Text>
+            <Text
+              typography="t7"
+              fontWeight="200"
+              color={filteredPathName.startsWith('map') ? 'primary500' : 'black'}
+            >
+              지도
+            </Text>
           </Link>
         </li>
         <li>
           <Link href="/favorite">
             {filteredPathName.startsWith('favorite') ? <FilledFavorite /> : <Favorite />}
-            <Text typography="t8" fontWeight="200" color={filteredPathName.startsWith('favorite') ? 'primary500' : 'black'}>즐겨찾기</Text>
+            <Text
+              typography="t7"
+              fontWeight="200"
+              color={filteredPathName.startsWith('favorite') ? 'primary500' : 'black'}
+            >
+              즐겨찾기
+            </Text>
           </Link>
         </li>
         <li>
           <Link href="/">
             {filteredPathName === '' ? <FilledHome /> : <Home />}
-            <Text typography="t8" fontWeight="200" color={filteredPathName === '' ? 'primary500' : 'black'}>홈</Text>
+            <Text
+              typography="t7"
+              fontWeight="200"
+              color={filteredPathName === '' ? 'primary500' : 'black'}
+            >
+              홈
+            </Text>
           </Link>
         </li>
         <li>
           <Link href="/channel">
-            <Channel color={filteredPathName.startsWith('channel') ? 'primary500' : 'black'} />
-            <Text typography="t8" fontWeight="200" color={filteredPathName.startsWith('channel') ? 'primary500' : 'black'}>채널</Text>
+            {filteredPathName === 'channel' ? <FilledChannel /> : <Channel />}
+            {/* <Channel color={filteredPathName.startsWith('channel') ? 'primary500' : 'black'} /> */}
+            <Text
+              typography="t7"
+              fontWeight="200"
+              color={filteredPathName.startsWith('channel') ? 'primary500' : 'black'}
+            >
+              채널
+            </Text>
           </Link>
         </li>
         <li>
           <Link href="/my-page">
-            <Profile color={filteredPathName.startsWith('my-page') ? 'primary500' : 'black'} />
-            <Text typography="t8" fontWeight="200" color={filteredPathName.startsWith('my-page') ? 'primary500' : 'black'}>프로필</Text>
+            {filteredPathName === 'my-page' ? <FilledBoard /> : <Board />}
+            {/* <Profile color={filteredPathName.startsWith('my-page') ? 'primary500' : 'black'} /> */}
+            <Text
+              typography="t7"
+              fontWeight="200"
+              color={filteredPathName.startsWith('my-page') ? 'primary500' : 'black'}
+            >
+              프로필
+            </Text>
           </Link>
         </li>
       </ul>
diff --git a/src/components/shared/channel-article/ChannelArticle.module.scss b/src/components/shared/channel-article/ChannelArticle.module.scss
index 70ef07ed..aab2b6e4 100644
--- a/src/components/shared/channel-article/ChannelArticle.module.scss
+++ b/src/components/shared/channel-article/ChannelArticle.module.scss
@@ -1,17 +1,29 @@
 $img-size: 39px;
 
 .article {
+    // display: flex;
+    // flex-direction: column;
+    // align-items: center;
+    // justify-self: center;
+
     width: 100%;
     height: 100%;
+    margin-bottom: 20px;
 }
 
 .videoContainer {
-    aspect-ratio: 16 / 9;
+    // aspect-ratio: 16 / 9;
+    width: 100%;
+    height: 20vh;
 
     .video {
-        width: 100%;
+        width: 90%;
         height: 100%;
-        vertical-align: top;
+        margin-left: 20px;
+        border-radius: 16px;
+        object-fit: cover;
+
+        // vertical-align: top;
     }
 }
 
diff --git a/src/components/shared/channel-article/ChannelArticle.tsx b/src/components/shared/channel-article/ChannelArticle.tsx
index e6d122d5..e98015e5 100644
--- a/src/components/shared/channel-article/ChannelArticle.tsx
+++ b/src/components/shared/channel-article/ChannelArticle.tsx
@@ -1,7 +1,8 @@
-import YouTube from 'react-youtube';
+// import YouTube from 'react-youtube';
 
 import classNames from 'classnames/bind';
-// import Image from 'next/image';
+import Image from 'next/image';
+import Link from 'next/link';
 
 import { IVideo } from '@remote/api/types/channel';
 import Text from '@shared/text/Text';
@@ -15,23 +16,39 @@ interface ChannelArticleProps {
 
 const cx = classNames.bind(styles);
 
-const VIDEO_OPTS = {
-  width: '100%',
-  height: '100%',
-  playerVars: {
-    autoplay: 0,
-  },
-};
+// const VIDEO_OPTS = {
+//   width: '100%',
+//   height: '100%',
+//   playerVars: {
+//     autoplay: 0,
+//   },
+// };
 
 function ChannelArticle({ data }: ChannelArticleProps) {
+  // console.log(data.id.videoId);
   return (
     <article className={cx('article')}>
-      <div className={cx('videoContainer')}>
-        <YouTube className={cx('video')} videoId={data.id.videoId} opts={VIDEO_OPTS} />
-      </div>
-      <div className={cx('videoInfoContainer')}>
-        {/* <div className={cx('imgBox')}>
-          <Image
+      <div>
+        <Link
+          className={cx('videoContainer')}
+          href={`https://www.youtube.com/watch?v=${data.id.videoId}`}
+        >
+          <div className={cx('videoContainer')}>
+            <Image
+              className={cx('video')}
+              src={data.snippet.thumbnails.high.url}
+              alt="유튜브 동영상"
+              width={320}
+              height={150}
+              layout="cover"
+              objectFit="responsive"
+            />
+            {/* <YouTube className={cx('video')} videoId={data.id.videoId} opts={VIDEO_OPTS} /> */}
+          </div>
+        </Link>
+        <div className={cx('videoInfoContainer')}>
+          {/* <div className={cx('imgBox')}>
+          <img
             src={data.profile}
             alt="유튜버 프로필 이미지"
             width={0}
@@ -39,15 +56,21 @@ function ChannelArticle({ data }: ChannelArticleProps) {
             layout="responsive"
           />
         </div> */}
-        <div className={cx('infoBox')}>
-          <Text className="ellipsis" typography="t6" whiteSpace="nowrap">
-            {data.snippet.title}
-          </Text>
-          <Text className="ellipsis" typography="t7" color="gray300" whiteSpace="nowrap">
-            {data.snippet.description}
-          </Text>
+          <div className={cx('infoBox')}>
+            <Text className="ellipsis" typography="t6" whiteSpace="nowrap">
+              {data.snippet.title}
+            </Text>
+            <Text
+              className="ellipsis"
+              typography="t7"
+              color="gray300"
+              whiteSpace="nowrap"
+            >
+              {data.snippet.description}
+            </Text>
+          </div>
+          <ChannelMoreBtn />
         </div>
-        <ChannelMoreBtn />
       </div>
     </article>
   );
diff --git a/src/components/shared/header/headerItems/LeftIcon.tsx b/src/components/shared/header/headerItems/LeftIcon.tsx
index 5994ffd7..9085d888 100644
--- a/src/components/shared/header/headerItems/LeftIcon.tsx
+++ b/src/components/shared/header/headerItems/LeftIcon.tsx
@@ -2,7 +2,7 @@
 
 import Link from 'next/link';
 
-import Inquire from '@/components/icons/Inquire';
+// import Inquire from '@/components/icons/Inquire';
 import BackArrow from '@components/icons/BackArrow';
 // import Inquire from '@components/icons/Inquire';
 import Logo from '@components/icons/Logo';
@@ -30,7 +30,7 @@ function LeftIcon({
             href="https://docs.google.com/forms/d/e/1FAIpQLSd96McWLLj3bR-3OEEIx656x3I_9-u7ifjwViQKlveIRb5QiA/viewform"
             target="_blank"
           >
-            <Inquire />
+            {/* <Inquire /> */}
           </Link>
         </li>
       </Flex>
diff --git a/src/components/shared/home-search-bar/HomeSearchBar.tsx b/src/components/shared/home-search-bar/HomeSearchBar.tsx
index 1b1a789f..f2267c6f 100644
--- a/src/components/shared/home-search-bar/HomeSearchBar.tsx
+++ b/src/components/shared/home-search-bar/HomeSearchBar.tsx
@@ -51,13 +51,6 @@ const HomeSearchBar = forwardRef<HTMLInputElement, SearchBarProps>(
         } else {
           console.error('Invalid file');
         }
-        // const file = FileRef?.current?.files?.[0];
-        // if (file instanceof File) {
-        //   const text = await NodeImg({ file });
-        //   console.log(text);
-        // }
-
-        // console.log(typeof FileRef?.current?.files?.[0]);
       } catch (error) {
         console.error(error);
         alert('이미지를 불러오는데 실패했습니다.');
diff --git a/src/remote/api/requests/channel/channelprofile.get.api.ts b/src/remote/api/requests/channel/channelprofile.get.api.ts
new file mode 100644
index 00000000..f9102cd7
--- /dev/null
+++ b/src/remote/api/requests/channel/channelprofile.get.api.ts
@@ -0,0 +1,20 @@
+import axios from 'axios';
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+
+import { IVideoList } from '../../types/channel';
+
+const getChannelProfile = async (id: string, part = 'snippet') => {
+  const response = await axios.get<IVideoList>(
+    `${process.env.NEXT_PUBLIC_YOUTUBE_BASE_URL}/channels`,
+    {
+      params: {
+        id,
+        part,
+        key: process.env.NEXT_PUBLIC_YOUTUBE_API_KEY,
+      },
+    },
+  );
+  return response.data;
+};
+
+export default getChannelProfile;
diff --git a/src/remote/api/types/channel.ts b/src/remote/api/types/channel.ts
index 3b9010d2..3c392f8a 100644
--- a/src/remote/api/types/channel.ts
+++ b/src/remote/api/types/channel.ts
@@ -1,38 +1,38 @@
 export interface IVideoList {
-  kind: string
-  etag: string
-  nextPageToken: string
-  regionCode: string
+  kind: string;
+  etag: string;
+  nextPageToken: string;
+  regionCode: string;
   pageInfo: {
-    totalResults: number
-    resultsPerPage: number
-  }
-  items: IVideo[]
+    totalResults: number;
+    resultsPerPage: number;
+  };
+  items: IVideo[];
 }
 
 export interface IVideo {
-  kind: string
-  etag: string
+  kind: string;
+  etag: string;
   id: {
-    kind: string
-    videoId: string
-  }
-  snippet: IVideoInfo
+    kind: string;
+    videoId: string;
+  };
+  snippet: IVideoInfo;
 }
 
 export interface IVideoInfo {
-  publishedAt: string
-  channelId: string
-  title: string
-  description: string
+  publishedAt: string;
+  channelId: string;
+  title: string;
+  description: string;
   thumbnails: {
-    default: IThumbnail
-    medium: IThumbnail
-    high: IThumbnail
-  }
-  channelTitle: string
-  liveBroadcastContent: string
-  publishTime: string
+    default: IThumbnail;
+    medium: IThumbnail;
+    high: IThumbnail;
+  };
+  channelTitle: string;
+  liveBroadcastContent: string;
+  publishTime: string;
 }
 
 export interface IThumbnail {
diff --git a/src/remote/queries/channel/useChannel.ts b/src/remote/queries/channel/useChannel.ts
new file mode 100644
index 00000000..23e0c913
--- /dev/null
+++ b/src/remote/queries/channel/useChannel.ts
@@ -0,0 +1,39 @@
+import { useQuery } from '@tanstack/react-query';
+
+import getChannelProfile from '@/remote/api/requests/channel/channelprofile.get.api';
+import { IVideoList } from '@/remote/api/types/channel';
+
+const useChannel = (id: string) => {
+  return useQuery<IVideoList>({
+    queryKey: ['channelList', id],
+    queryFn: () => {
+      return getChannelProfile(id);
+    },
+    staleTime: 86400000,
+    cacheTime: 86400000,
+  });
+};
+
+export default useChannel;
+
+// // import { useQuery } from '@tanstack/react-query';
+// import { useQueries } from '@tanstack/react-query';
+// import getChannelProfile from '@/remote/api/requests/channel/channelprofile.get.api';
+// import { CHANNEL_LIST } from '@/app/channel/page';
+
+// const useChannel = () => {
+//   return useQueries({
+//     queries: Object.values(CHANNEL_LIST).map((value, index) => {
+//       return {
+//         queryKey: ['channel', index],
+//         queryFn: () => {
+//           return getChannelProfile(value);
+//         },
+//         staleTime: 86400000,
+//         cacheTime: 86400000,
+//       };
+//     }),
+//   });
+// };
+
+// export default useChannel;
diff --git a/src/stores/hooks.ts b/src/stores/hooks.ts
index f6ed3e7f..add93280 100644
--- a/src/stores/hooks.ts
+++ b/src/stores/hooks.ts
@@ -1,7 +1,7 @@
-import type { RootState, AppDispatch, AppStore } from './store';
 import type { TypedUseSelectorHook } from 'react-redux';
 
 import { useDispatch, useSelector, useStore } from 'react-redux';
+import type { RootState, AppDispatch, AppStore } from './store';
 
 // Use throughout your app instead of plain `useDispatch` and `useSelector`
 export const useAppDispatch: () => AppDispatch = useDispatch;