diff --git a/1-weekly-mission-week1-main/.gitignore b/linkbrary/.gitignore
similarity index 100%
rename from 1-weekly-mission-week1-main/.gitignore
rename to linkbrary/.gitignore
diff --git a/1-weekly-mission-week1-main/faq.html b/linkbrary/faq.html
similarity index 100%
rename from 1-weekly-mission-week1-main/faq.html
rename to linkbrary/faq.html
diff --git a/1-weekly-mission-week1-main/images/facebook.svg b/linkbrary/images/facebook.svg
similarity index 100%
rename from 1-weekly-mission-week1-main/images/facebook.svg
rename to linkbrary/images/facebook.svg
diff --git a/1-weekly-mission-week1-main/images/hero.png b/linkbrary/images/hero.png
similarity index 100%
rename from 1-weekly-mission-week1-main/images/hero.png
rename to linkbrary/images/hero.png
diff --git a/1-weekly-mission-week1-main/images/image1.png b/linkbrary/images/image1.png
similarity index 100%
rename from 1-weekly-mission-week1-main/images/image1.png
rename to linkbrary/images/image1.png
diff --git a/1-weekly-mission-week1-main/images/image2.png b/linkbrary/images/image2.png
similarity index 100%
rename from 1-weekly-mission-week1-main/images/image2.png
rename to linkbrary/images/image2.png
diff --git a/1-weekly-mission-week1-main/images/image3.png b/linkbrary/images/image3.png
similarity index 100%
rename from 1-weekly-mission-week1-main/images/image3.png
rename to linkbrary/images/image3.png
diff --git a/1-weekly-mission-week1-main/images/image4.png b/linkbrary/images/image4.png
similarity index 100%
rename from 1-weekly-mission-week1-main/images/image4.png
rename to linkbrary/images/image4.png
diff --git a/linkbrary/images/img-og.png b/linkbrary/images/img-og.png
new file mode 100644
index 000000000..ed3fe5fa6
Binary files /dev/null and b/linkbrary/images/img-og.png differ
diff --git a/1-weekly-mission-week1-main/images/instagram.svg b/linkbrary/images/instagram.svg
similarity index 100%
rename from 1-weekly-mission-week1-main/images/instagram.svg
rename to linkbrary/images/instagram.svg
diff --git a/1-weekly-mission-week1-main/images/logo.svg b/linkbrary/images/logo.svg
similarity index 100%
rename from 1-weekly-mission-week1-main/images/logo.svg
rename to linkbrary/images/logo.svg
diff --git a/1-weekly-mission-week1-main/images/twitter.svg b/linkbrary/images/twitter.svg
similarity index 100%
rename from 1-weekly-mission-week1-main/images/twitter.svg
rename to linkbrary/images/twitter.svg
diff --git a/1-weekly-mission-week1-main/images/youtube.svg b/linkbrary/images/youtube.svg
similarity index 100%
rename from 1-weekly-mission-week1-main/images/youtube.svg
rename to linkbrary/images/youtube.svg
diff --git a/1-weekly-mission-week1-main/index.html b/linkbrary/index.html
similarity index 81%
rename from 1-weekly-mission-week1-main/index.html
rename to linkbrary/index.html
index ead157b64..d5a71b377 100644
--- a/1-weekly-mission-week1-main/index.html
+++ b/linkbrary/index.html
@@ -2,12 +2,13 @@
 <html>
   <head>
     <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta property="og:image" content="./images/img-og.png">
+    <meta property="og:title" content="Linkbrary">
+    <meta property="og:description" content="세상의 모든 정보를 쉽게 저장하고 관리해 보세요">
+    <meta property="og:url" content="https://linkbrary-mj.netlify.app/">
     <title>Linkbrary</title>
-    <link
-      rel="stylesheet"
-      type="text/css"
-      href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css"
-    />
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css"/>
     <link rel="stylesheet" href="./src/reset.css" />
     <link rel="stylesheet" href="./src/style.css" />
   </head>
@@ -15,7 +16,7 @@
     <header>
       <nav>
         <a href="index.html">
-          <img src="./images/logo.svg" alt="홈으로 연결된 Linkbrary 로고" />
+          <img src="./images/logo.svg" alt="홈으로 연결된 Linkbrary 로고" / class="mobile-logo">
         </a>
         <a class="cta cta-short" href="signin.html">
           <span>로그인</span>
@@ -25,7 +26,7 @@
         <h1 class="slogan">
           <span class="slogan-gradient background-clip-text"> 세상의 모든 정보</span>를
           <br />
-          쉽게 저장하고 관리해 보세요
+          쉽게 저장하고 <br / class="mobile-hide">관리해 보세요
         </h1>
         <a class="cta cta-long" href="signup.html">
           <span>링크 추가하기</span>
@@ -37,14 +38,14 @@ <h1 class="slogan">
       <section>
         <h2 class="title">
           <span class="title-1-gradient background-clip-text"> 원하는 링크</span>를
-          <br />
+          <br / class="pc-hide">
           저장하세요
         </h2>
         <p class="description">
           나중에 읽고 싶은 글, 다시 보고 싶은 영상,
-          <br />
+          <br / class="pc-hide">
           사고 싶은 옷, 기억하고 싶은 모든 것을
-          <br />
+          <br / class="pc-hide">
           한 공간에 저장하세요.
         </p>
         <img src="./images/image1.png" class="content-image" alt="링크의 내용이 담긴 카드들" />
@@ -52,12 +53,12 @@ <h2 class="title">
       <section>
         <h2 class="title">
           링크를 폴더로
-          <br />
+          <br / class="pc-hide">
           <span class="title-2-gradient background-clip-text">관리</span>하세요
         </h2>
         <p class="description">
           나만의 폴더를 무제한으로 만들고
-          <br />
+          <br / class="pc-hide">
           다양하게 활용할 수 있습니다.
         </p>
         <img src="./images/image2.png" class="content-image" alt="폴더 이름 변경 기능" />
@@ -65,14 +66,14 @@ <h2 class="title">
       <section>
         <h2 class="title">
           저장한 링크를
-          <br />
+          <br / class="pc-hide">
           <span class="title-3-gradient background-clip-text">공유</span>해 보세요
         </h2>
         <p class="description">
           여러 링크를 폴더에 담고 공유할 수 있습니다.
-          <br />
+          <br / class="pc-hide">
           가족, 친구, 동료들에게 쉽고 빠르게 링크를
-          <br />
+          <br / class="pc-hide">
           공유해 보세요.
         </p>
         <img src="./images/image3.png" class="content-image" alt="폴더 공유 기능" />
@@ -80,7 +81,7 @@ <h2 class="title">
       <section>
         <h2 class="title">
           저장한 링크를
-          <br />
+          <br / class="pc-hide">
           <span class="title-4-gradient background-clip-text">검색</span>해 보세요
         </h2>
         <p class="description">중요한 정보들을 검색으로 쉽게 찾아보세요.</p>
diff --git a/1-weekly-mission-week1-main/privacy.html b/linkbrary/privacy.html
similarity index 100%
rename from 1-weekly-mission-week1-main/privacy.html
rename to linkbrary/privacy.html
diff --git a/1-weekly-mission-week1-main/signin.html b/linkbrary/signin.html
similarity index 100%
rename from 1-weekly-mission-week1-main/signin.html
rename to linkbrary/signin.html
diff --git a/1-weekly-mission-week1-main/signup.html b/linkbrary/signup.html
similarity index 100%
rename from 1-weekly-mission-week1-main/signup.html
rename to linkbrary/signup.html
diff --git a/1-weekly-mission-week1-main/src/reset.css b/linkbrary/src/reset.css
similarity index 100%
rename from 1-weekly-mission-week1-main/src/reset.css
rename to linkbrary/src/reset.css
diff --git a/1-weekly-mission-week1-main/src/style.css b/linkbrary/src/style.css
similarity index 56%
rename from 1-weekly-mission-week1-main/src/style.css
rename to linkbrary/src/style.css
index 5759d920e..f33d7a314 100644
--- a/1-weekly-mission-week1-main/src/style.css
+++ b/linkbrary/src/style.css
@@ -16,14 +16,7 @@ nav {
   max-width: 192rem;
   height: 9.4rem;
   padding: 0 20rem;
-}
-
-.hero-header {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  row-gap: 4rem;
-  padding-top: 7rem;
+  background-color: #edf7ff;
 }
 
 .cta {
@@ -47,6 +40,14 @@ nav {
   width: 35rem;
 }
 
+.hero-header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  row-gap: 4rem;
+  padding-top: 16.4rem;
+}
+
 .slogan {
   text-align: center;
   font-size: 6.4rem;
@@ -64,13 +65,17 @@ nav {
   color: transparent;
 }
 
+.mobile-hide {
+  display: none;
+}
+
 .hero-image {
-  width: 120rem;
-  height: 59rem;
+  width: 1200px;
+  height: 590px;
 }
 
 article {
-  padding-top: 7rem;
+  padding-top: 3rem;
   padding-bottom: 12rem;
 }
 
@@ -84,13 +89,16 @@ section {
   padding: 50px 0;
 }
 
+section .pc-hide {
+  display: block;
+}
+
 section:nth-of-type(odd) {
   grid-template:
     ". image"
     "title image"
     "description image"
-    ". image"
-    /291px 55rem;
+    ". image";
 }
 
 section:nth-of-type(even) {
@@ -98,8 +106,7 @@ section:nth-of-type(even) {
     "image ."
     "image title"
     "image description"
-    "image ."
-    /550px 29.1rem;
+    "image .";
 }
 
 .title {
@@ -133,8 +140,8 @@ section:nth-of-type(even) {
 
 .content-image {
   grid-area: image;
-  width: 55rem;
-  height: 45rem;
+  width: 550px;
+  height: 450px;
 }
 
 footer {
@@ -178,3 +185,152 @@ footer {
   column-gap: 1.2rem;
   height: 2rem;
 }
+
+@media screen and (max-width:1200px) {
+  .mobile-hide {
+    display: block;
+  }
+  
+  .hero-header {
+    padding-top: 13.3rem;
+  }
+
+  .hero-image {
+    width: 698px;
+    height: 343px;
+  }
+
+  section {
+    column-gap: 5.1rem;
+    height: 41.5rem;
+  }
+
+  section:nth-of-type(odd) {
+    grid-template:
+    ". image"
+    "title image"
+    "description image"
+    ". image";
+  }
+
+  section:nth-of-type(even) {
+    grid-template:
+      "image ."
+      "image title"
+      "image description"
+      "image .";
+  }
+
+  .content-image {
+    width: 385px;
+    height: 315px;
+  }
+}
+
+@media screen and (min-width:375px) and (max-width:768px) {
+  header {
+    padding: 0 32px;
+  }
+
+  nav {
+    height: 6.3rem;
+    padding: 0 32px;
+  }
+
+  nav .mobile-logo {
+    width: 88px;
+  }
+
+  .hero-header {
+    row-gap: 2.4rem;
+    padding-top: 9.1rem;
+  }
+
+  .hero-image {
+    width: 100%;
+    height: 100%;
+  }
+
+  .slogan {
+    font-size: 3.2rem;
+    line-height: 4.2rem;
+  }
+
+  .cta {
+    height: 3.7rem;
+    font-size: 1.4rem;
+  }
+
+  .cta-short {
+    width: 8rem;
+  }
+
+  .cta-long {
+    width: 20rem;
+  }
+
+  header .content-image {
+    width: 325px;
+    height: 160px;
+  }
+
+  article {
+    padding: 0 32px 4rem 32px;
+  }
+
+  section {
+    column-gap: 0;
+    row-gap: 1.6rem;
+    height: auto;
+    padding: 40px 0;
+  }
+
+  section:nth-of-type(odd),
+  section:nth-of-type(even)
+   {
+    grid-template:
+      "title"
+      "image"
+      "description";
+  }
+
+  .title {
+    margin: 0 0 0.4rem 0;
+  }
+
+  section .pc-hide {
+    display: none;
+  }
+
+  section .content-image {
+    width: 100%;
+    height: 100%;
+  }
+
+  .title {
+    font-size: 2.4rem;
+    line-height: 2.8rem;
+  }
+
+  .description {
+    font-size: 1.5rem;
+  }
+
+  footer {
+    position: relative;
+  }
+
+  .footer-box {
+    flex-wrap: wrap;
+    padding: 0 32px;
+  }
+
+  .copyright {
+    position: absolute;
+    left: 32px;
+    bottom: 32px;
+  }
+}
+
+
+
diff --git a/css/reset.css b/signin/css/reset.css
similarity index 100%
rename from css/reset.css
rename to signin/css/reset.css
diff --git a/css/style.css b/signin/css/style.css
similarity index 86%
rename from css/style.css
rename to signin/css/style.css
index d16f1eef4..175472e69 100644
--- a/css/style.css
+++ b/signin/css/style.css
@@ -32,6 +32,10 @@ body {
   text-align: center;
 }
 
+.join-member .logo img {
+  width: 210px;
+}
+
 .join-member .logo span {
   overflow: hidden;
   position: absolute;
@@ -55,18 +59,18 @@ body {
   border-bottom: 1px solid var(--primary-color);
 }
 
-.form-box {
+.form-wrap {
   margin: 30px 0 0;
 }
 
-.form-box label {
+.form-wrap label {
   display: block;
   margin: 0 0 12px 0;
   font-size: 14px;
   line-height: 16px;
 }
 
-.form-box input {
+.form-wrap input {
   width: 100%;
   padding: 18px 15px;
   color: var(--black-color);
@@ -75,19 +79,31 @@ body {
   background-color: var(--white-color);
 }
 
-.form-box input:focus {
+.form-wrap input:focus {
   border: 1px solid var(--primary-color);
 }
 
-.form-box .password-box {
-  margin: 24px 0;
+.form-box + .form-box {
+  margin: 24px 0 0;
+}
+
+.form-box .user-password {
+  position: relative;
+}
+
+.form-box .user-password img[class*="eye"] {
+  position: absolute;
+  top: 50%;
+  right: 15px;
+  transform: translateY(-50%);
+  cursor: pointer;
 }
 
-.form-box .btn-box {
+.btn-box {
   margin: 30px 0 0;
 }
 
-.form-box .btn-box button {
+.btn-box button {
   display: block;
   width: 100%;
   padding: 16px 20px;
@@ -102,18 +118,6 @@ body {
   background: linear-gradient(90.99deg, #6D6AFE 0.12%, #6AE3FE 101.84%);
 }
 
-.form-box .user-password {
-  position: relative;
-}
-
-.form-box .user-password img[class*="eye"] {
-  position: absolute;
-  top: 50%;
-  right: 15px;
-  transform: translateY(-50%);
-  cursor: pointer;
-}
-
 .sns-login {
   display: flex;
   justify-content: space-between;
@@ -157,11 +161,18 @@ body {
 }
 
 .sns-login ul li .google {
-  background: url('/images/ico-google.png') no-repeat;
+  background: url('../images/ico-google.png') no-repeat;
   background-size: 100% 42px;
 }
 
 .sns-login ul li .kakao {
-  background: url('/images/ico-kakao.png') no-repeat;
+  background: url('../images/ico-kakao.png') no-repeat;
   background-size: 100% 42px;
+}
+
+@media screen and (max-width:400px) {
+  .inner-wrap {
+    width: 100%;
+    padding: 0 32px;
+  }
 }
\ No newline at end of file
diff --git a/images/ico-eye-off.svg b/signin/images/ico-eye-off.svg
similarity index 100%
rename from images/ico-eye-off.svg
rename to signin/images/ico-eye-off.svg
diff --git a/images/ico-eye-on.svg b/signin/images/ico-eye-on.svg
similarity index 100%
rename from images/ico-eye-on.svg
rename to signin/images/ico-eye-on.svg
diff --git a/images/ico-google.png b/signin/images/ico-google.png
similarity index 100%
rename from images/ico-google.png
rename to signin/images/ico-google.png
diff --git a/images/ico-kakao.png b/signin/images/ico-kakao.png
similarity index 100%
rename from images/ico-kakao.png
rename to signin/images/ico-kakao.png
diff --git a/images/logo.svg b/signin/images/logo.svg
similarity index 100%
rename from images/logo.svg
rename to signin/images/logo.svg
diff --git a/signin.html b/signin/signin.html
similarity index 63%
rename from signin.html
rename to signin/signin.html
index 145012623..9fe1f6b5c 100644
--- a/signin.html
+++ b/signin/signin.html
@@ -5,8 +5,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>로그인</title>
   <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css">
-  <link rel="stylesheet" href="/css/reset.css" type="text/css">
-  <link rel="stylesheet" href="/css/style.css" type="text/css">
+  <link rel="stylesheet" href="./css/reset.css" type="text/css">
+  <link rel="stylesheet" href="./css/style.css" type="text/css">
 </head>
 <body>
   <div class="container">
@@ -14,30 +14,30 @@
       <div class="join-member">
         <h1 class="logo">
           <a href="/">
-            <img src="/images/logo.svg" alt="Linkbrary 로고">
+            <img src="./images/logo.svg" alt="Linkbrary 로고">
             <span>Linkbrary</span>
           </a>
         </h1>
   
         <div class="join-link">
           <p class="text">회원이 아니신가요?</p>
-          <a href="/signup.html" class="btn-join">회원 가입하기</a>
+          <a href="./signup.html" class="btn-join">회원 가입하기</a>
         </div>
       </div>
   
-      <div class="form-box">
+      <div class="form-wrap">
         <form> 
-          <div class="email-box">
-            <label for="email">이메일</label>
-            <input type="email" id="email" name="email">
+          <div class="form-box">
+            <label for="signin-email">이메일</label>
+            <input type="email" id="signin-email" name="email">
           </div>
           
-          <div class="password-box">
-            <label for="password">비밀번호</label>
+          <div class="form-box">
+            <label for="signin-password">비밀번호</label>
   
             <div class="user-password">
-              <input type="password" id="password" name="password">
-              <img src="/images/ico-eye-off.svg" alt="비밀번호 눈 꺼짐" class="eye-off">
+              <input type="password" id="signin-password" name="password">
+              <img src="./images/ico-eye-off.svg" alt="비밀번호 눈 꺼짐" class="eye-off">
             </div>
           </div>
     
diff --git a/signup.html b/signin/signup.html
similarity index 57%
rename from signup.html
rename to signin/signup.html
index 5621e2dc4..5dcf459bf 100644
--- a/signup.html
+++ b/signin/signup.html
@@ -5,8 +5,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>회원가입</title>
   <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css">
-  <link rel="stylesheet" href="/css/reset.css" type="text/css">
-  <link rel="stylesheet" href="/css/style.css" type="text/css">
+  <link rel="stylesheet" href="./css/reset.css" type="text/css">
+  <link rel="stylesheet" href="./css/style.css" type="text/css">
 </head>
 <body>
   <div class="container">
@@ -14,39 +14,39 @@
       <div class="join-member">
         <h1 class="logo">
           <a href="/">
-            <img src="/images/logo.svg" alt="Linkbrary 로고">
+            <img src="./images/logo.svg" alt="Linkbrary 로고">
             <span>Linkbrary</span>
           </a>
         </h1>
   
         <div class="join-link">
           <p class="text">이미 회원이신가요?</p>
-          <a href="/signin.html" class="btn-join">로그인 하기</a>
+          <a href="./signin.html" class="btn-join">로그인 하기</a>
         </div>
       </div>
   
-      <div class="form-box">
+      <div class="form-wrap">
         <form> 
-          <div class="email-box">
-            <label for="email">이메일</label>
-            <input type="email" id="email" name="email">
+          <div class="form-box">
+            <label for="signup-email">이메일</label>
+            <input type="email" id="signup-email" name="email">
           </div>
           
-          <div class="password-box">
-            <label for="password">비밀번호</label>
+          <div class="form-box">
+            <label for="signup-password">비밀번호</label>
   
             <div class="user-password">
-              <input type="password" id="password" name="password">
-              <img src="/images/ico-eye-on.svg" alt="비밀번호 눈 켜짐" class="eye-on">
+              <input type="password" id="signup-password" name="password">
+              <img src="./images/ico-eye-on.svg" alt="비밀번호 눈 켜짐" class="eye-on">
             </div>
           </div>
 
-          <div class="password-check-box">
-            <label for="password">비밀번호 확인</label>
+          <div class="form-box">
+            <label for="signup-check-password">비밀번호 확인</label>
   
             <div class="user-password">
-              <input type="password" id="password" name="password">
-              <img src="/images/ico-eye-on.svg" alt="비밀번호 눈 켜짐" class="eye-on">
+              <input type="password" id="signup-check-password" name="password">
+              <img src="./images/ico-eye-on.svg" alt="비밀번호 눈 켜짐" class="eye-on">
             </div>
           </div>
     
