diff --git a/components/buttons/Button.module.css b/components/buttons/Button.module.css
index 766fba3..1086dc1 100644
--- a/components/buttons/Button.module.css
+++ b/components/buttons/Button.module.css
@@ -340,8 +340,25 @@
   border: 1px solid var(--gray-100);
 }
 
+.mobile-filter {
+  display: none;
+  width: 35px;
+  height: 35px;
+  box-sizing: border-box;
+  border: 1px solid var(--gray-100);
+  background-color: var(--black);
+  background-image: url("../../public/filter-icon.svg");
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
 /* Tablet view */
 @media (min-width: 744px) and (max-width: 1199px) {
+  .thin-main-440px-60px {
+    width: 342px;
+    height: 60px;
+  }
+
   .thin-black-440px-60px {
     width: 277px;
     height: 55px;
@@ -371,6 +388,11 @@
 
 /* Mobile view */
 @media (max-width: 743px) {
+  .thin-main-440px-60px {
+    width: 345px;
+    height: 55px;
+  }
+
   .thin-black-440px-60px {
     width: 277px;
     height: 55px;
@@ -398,4 +420,8 @@
     font-weight: 700;
     font-size: 0.75rem;
   }
+
+  .mobile-filter {
+    display: block;
+  }
 }
diff --git a/components/cards/info/GradeCategory.module.css b/components/cards/info/GradeCategory.module.css
index 937b040..b6e560f 100644
--- a/components/cards/info/GradeCategory.module.css
+++ b/components/cards/info/GradeCategory.module.css
@@ -6,72 +6,95 @@
 
 .medium > .common {
   font-size: 1.5rem;
-  font-weight: 700px;
+  font-weight: 700;
   color: var(--main);
 }
 
 .medium > .rare {
   font-size: 1.5rem;
-  font-weight: 700px;
+  font-weight: 700;
   color: var(--blue);
 }
 
 .medium > .super-rare {
   font-size: 1.5rem;
-  font-weight: 700px;
+  font-weight: 700;
   color: var(--purple);
 }
 
 .medium > .legendary {
   font-size: 1.5rem;
-  font-weight: 700px;
+  font-weight: 700;
   color: var(--pink);
 }
 
 .medium > .bar {
   font-size: 1.5rem;
-  font-weight: 700px;
+  font-weight: 700;
   color: var(--gray-400);
 }
 
 .medium > .category {
   font-size: 1.5rem;
-  font-weight: 700px;
+  font-weight: 700;
   color: var(--gray-300);
 }
 
 .small > .common {
   font-size: 1rem;
-  font-weight: 400px;
+  font-weight: 300;
   color: var(--main);
 }
 
 .small > .rare {
   font-size: 1rem;
-  font-weight: 400px;
+  font-weight: 300;
   color: var(--blue);
 }
 
 .small > .super-rare {
   font-size: 1rem;
-  font-weight: 400px;
+  font-weight: 300;
   color: var(--purple);
 }
 
 .small > .legendary {
   font-size: 1rem;
-  font-weight: 400px;
+  font-weight: 300;
   color: var(--pink);
 }
 
 .small > .bar {
   font-size: 1rem;
-  font-weight: 400px;
+  font-weight: 300;
   color: var(--gray-400);
 }
 
 .small > .category {
   font-size: 1rem;
-  font-weight: 400px;
+  font-weight: 300;
   color: var(--gray-300);
 }
+
+@media (min-width: 375px) and (max-width: 743px) {
+  .small > .common {
+    font-size: 0.625rem;
+  }
+
+  .small > .rare {
+    font-size: 0.625rem;
+  }
+
+  .small > .super-rare {
+    font-size: 0.625rem;
+    text-wrap: nowrap;
+  }
+
+  .small > .legendary {
+    font-size: 0.625rem;
+  }
+
+  .small > .category {
+    font-size: 0.625rem;
+  }
+}
diff --git a/components/inputs/Input.module.css b/components/inputs/Input.module.css
index bd0b1e3..0afbf58 100644
--- a/components/inputs/Input.module.css
+++ b/components/inputs/Input.module.css
@@ -151,7 +151,25 @@
 }
 
 @media (min-width: 744px) and (max-width: 1199px) {
+  .container-search {
+    width: 200px;
+    height: 45px;
+  }
+
+  .vector {
+    width: 17.42px;
+    height: 17.42px;
+  }
 }
 
 @media (min-width: 375px) and (max-width: 743px) {
+  .container-search {
+    width: 345px;
+    height: 45px;
+  }
+
+  .vector {
+    width: 22px;
+    height: 22px;
+  }
 }
diff --git a/components/modal/ModalContainer.module.css b/components/modal/ModalContainer.module.css
index c5eab53..6136124 100644
--- a/components/modal/ModalContainer.module.css
+++ b/components/modal/ModalContainer.module.css
@@ -12,6 +12,8 @@
 }
 
 .container {
+  width: 560px;
+  height: 375px;
   position: relative;
   background-color: var(--gray-500);
   border-radius: 2px;
diff --git a/components/nav/Nav.js b/components/nav/Nav.js
index 1cdd6d1..41f8226 100644
--- a/components/nav/Nav.js
+++ b/components/nav/Nav.js
@@ -1,15 +1,15 @@
-import Image from 'next/image';
-import Link from 'next/link';
-import { useState } from 'react';
-import { useRouter } from 'next/router';
+import Image from "next/image";
+import Link from "next/link";
+import { useState } from "react";
+import { useRouter } from "next/router";
 
-import mainLogo from '@/public/logo.svg';
-import listIcon from '@/public/nav-list.svg';
-import styles from './Nav.module.css';
-import Loggedin from './Loggedin';
-import NonLogin from './NonLogin';
-import useAuthStore from '@/store/useAuthStore';
-import { usePostSignout } from '@/lib/reactQuery/useAuth';
+import mainLogo from "@/public/logo.svg";
+import listIcon from "@/public/nav-list.svg";
+import styles from "./Nav.module.css";
+import Loggedin from "./Loggedin";
+import NonLogin from "./NonLogin";
+import useAuthStore from "@/store/useAuthStore";
+import { usePostSignout } from "@/lib/reactQuery/useAuth";
 
 export default function Nav() {
   const router = useRouter();
@@ -36,21 +36,21 @@ export default function Nav() {
   return (
     // 로그인과 회원가입 부분에 Nav가 안보이게 하기 위해
     // pathname을 이용하여 다른 style이 적용되게 했습니다.
-    <div>
+    <div className={styles["header"]}>
       <header
-        className={`${styles['nav']} ${
-          router.pathname === '/auth/signin' ||
-          router.pathname === '/auth/signup'
-            ? styles['nav-none']
-            : ''
+        className={`${styles["nav"]} ${
+          router.pathname === "/auth/signin" ||
+          router.pathname === "/auth/signup"
+            ? styles["nav-none"]
+            : ""
         }`}
       >
-        <div className={styles['container']}>
-          <div className={styles['list']} onClick={handleMobileUserDrop}>
+        <div className={styles["container"]}>
+          <div className={styles["list"]} onClick={handleMobileUserDrop}>
             <Image src={listIcon} alt="list-icon" />
           </div>
           <Link href="/">
-            <Image src={mainLogo} className={styles['logo']} alt="logo" />
+            <Image src={mainLogo} className={styles["logo"]} alt="logo" />
           </Link>
           {user ? (
             <Loggedin
diff --git a/components/nav/Nav.module.css b/components/nav/Nav.module.css
index 3ccf400..8739072 100644
--- a/components/nav/Nav.module.css
+++ b/components/nav/Nav.module.css
@@ -1,9 +1,17 @@
-.nav {
+.header {
   position: sticky;
   top: 0;
   z-index: 10;
-  width: 100%;
   height: 80px;
+  width: 100%;
+}
+
+.nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
   background-color: var(--black);
 }
 
@@ -15,8 +23,9 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  max-width: 1200px;
-  margin: 27px auto;
+  width: 100%;
+  max-width: 1480px;
+  margin: auto;
 }
 
 .list {
@@ -25,6 +34,10 @@
 
 /* Tablet view */
 @media (min-width: 744px) and (max-width: 1199px) {
+  .header {
+    height: 70px;
+  }
+
   .container {
     max-width: 664px;
   }
@@ -37,6 +50,10 @@
 
 /* Mobile view */
 @media (max-width: 743px) {
+  .header {
+    height: 60px;
+  }
+
   .container {
     max-width: 375px;
   }
diff --git a/pages/index.js b/pages/index.js
index 162db26..57a9478 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -56,6 +56,10 @@ export default function Home() {
     setSellMyCard(!sellMyCard);
   };
 
+  const handleFilterClick = () => {
+    // need filter modal
+  };
+
   if (isLoading)
     return (
       <div className={styles["home-container"]}>
@@ -155,6 +159,10 @@ export default function Home() {
               />
             </div>
           </div>
+          <div
+            className={styles["home-main-container-nav-mobile-divider"]}
+          ></div>
+          <Button style={"mobile-filter"} onClick={handleFilterClick} />
           <Dropdown
             placeholder={"낮은 가격순"}
             style={"180"}
@@ -187,6 +195,13 @@ export default function Home() {
           <CardSell myGalleryModalClick={myGalleryModalClick} />
         </ModalContainer>
       )}
+      <div className={styles["home-sell-container"]}>
+        <Button
+          text={"나의 포토카드 판매하기"}
+          style={"thin-main-440px-60px"}
+          onClick={myGalleryModalClick}
+        />
+      </div>
     </div>
   );
 }
diff --git a/public/filter-icon.svg b/public/filter-icon.svg
new file mode 100644
index 0000000..c036a36
--- /dev/null
+++ b/public/filter-icon.svg
@@ -0,0 +1,3 @@
+<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.87565 17.7913V13.208H11.1256V14.8747H17.7923V16.1246H11.1256V17.7913H9.87565ZM3.20898 16.1246V14.8747H7.79228V16.1246H3.20898ZM6.54232 12.7913V11.1246H3.20898V9.87468H6.54232V8.20801H7.79228V12.7913H6.54232ZM9.87565 11.1246V9.87468H17.7923V11.1246H9.87565ZM13.209 7.7913V3.20801H14.4589V4.87467H17.7923V6.12463H14.4589V7.7913H13.209ZM3.20898 6.12463V4.87467H11.1256V6.12463H3.20898Z" fill="white"/>
+</svg>
diff --git a/styles/Home.module.css b/styles/Home.module.css
index a001d6b..732dbc4 100644
--- a/styles/Home.module.css
+++ b/styles/Home.module.css
@@ -4,19 +4,22 @@
 }
 
 .home-nav {
+  box-sizing: border-box;
   display: flex;
   justify-content: space-between;
   margin-top: 60px;
   border-bottom: 2px solid var(--gray-200);
-  padding-bottom: 20px;
+  padding-bottom: 18px;
 }
 
 .home-title {
+  width: 320px;
+  height: 63px;
   font-family: "baskinRobbins";
   font-size: 62px;
   line-height: 63.49px;
   letter-spacing: -0.03em;
-  font-weight: bold;
+  font-weight: 400;
 }
 
 .home-main-container {
@@ -28,6 +31,10 @@
   display: flex;
 }
 
+.home-main-container-nav-mobile-divider {
+  display: none;
+}
+
 .home-main-container-dropdowns {
   display: flex;
   gap: 45px;
@@ -56,3 +63,107 @@
   width: fit-content;
   margin: 60px auto;
 }
+
+.home-sell-container {
+  display: none;
+}
+
+@media (min-width: 744px) and (max-width: 1199px) {
+  .home-container {
+    width: 704px;
+  }
+
+  /* nav height 다름. 일단 넘어감 */
+  .home-nav {
+    display: flex;
+    align-items: center;
+    margin-top: 40px;
+  }
+
+  .home-title {
+    width: 248px;
+    height: 49px;
+    font-size: 48px;
+    line-height: 49.15px;
+    letter-spacing: -0.03em;
+    font-weight: 400;
+  }
+
+  .home-main-container {
+    width: 704px;
+  }
+
+  .home-main-container-nav-wrapper {
+    /*일단 보류*/
+  }
+
+  .home-main-container-nav {
+    width: 480px;
+    height: 45px;
+    justify-content: space-between;
+  }
+
+  .home-main-container-dropdowns {
+    gap: 25px;
+    margin-left: 0px;
+  }
+
+  .home-main-card-grid {
+    grid-template-columns: repeat(2, 1fr);
+    grid-gap: 20px;
+    margin-top: 40px;
+  }
+}
+
+@media (min-width: 375px) and (max-width: 743px) {
+  .home-container {
+    width: 345px;
+  }
+
+  .home-nav {
+    display: none;
+  }
+
+  .home-main-container {
+    width: 345px;
+  }
+
+  .home-main-container-nav-wrapper {
+    /*대공사 필요*/
+    height: 110px;
+    flex-wrap: wrap;
+  }
+
+  .home-main-container-nav {
+    /*대공사 필요*/
+    width: 345px;
+    height: 45px;
+  }
+
+  .home-main-container-nav-mobile-divider {
+    display: block;
+    box-sizing: border-box;
+    width: 345px;
+    height: 2px;
+    border: 1px solid var(--gray-400);
+    margin: 14px 0;
+  }
+
+  .home-main-container-dropdowns {
+    display: none;
+  }
+
+  .home-main-card-grid {
+    grid-template-columns: repeat(2, 1fr);
+    grid-gap: 5px;
+    margin-top: 20px;
+  }
+
+  .home-sell-container {
+    position: sticky;
+    bottom: 15px;
+    z-index: 9;
+    margin: 0 auto;
+    display: block;
+  }
+}