diff --git a/components/Layout/Layout.tsx b/components/Layout/Layout.tsx
new file mode 100644
index 000000000..1cd758adf
--- /dev/null
+++ b/components/Layout/Layout.tsx
@@ -0,0 +1,31 @@
+import { ReactNode, useEffect, useState } from 'react';
+
+import Header from '../Header/Header';
+import Footer from '../Footer/Footer';
+
+import BASE_PATH from '../../pages/api/codeit';
+
+interface LayoutProps {
+  children: ReactNode;
+}
+
+export default function Layout({ children }: LayoutProps) {
+  // 유저 로그인(임시)
+  const [profile, setProfile] = useState('');
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const { data } = await BASE_PATH.get(`users/1`);
+      setProfile(data.data[0]);
+    };
+    fetchData();
+  }, []);
+
+  return (
+    <>
+      <Header profile={profile} />
+      {children}
+      <Footer />
+    </>
+  );
+}
diff --git a/components/Sign/Input.module.css b/components/Sign/Input.module.css
index d6c5d2893..425f7c737 100644
--- a/components/Sign/Input.module.css
+++ b/components/Sign/Input.module.css
@@ -1,5 +1,5 @@
 .default {
-  width: 35rem;
+  width: 100%;
   padding: 1.8rem 1.5rem;
   border: 1px solid var(--color-gray60);
   border-radius: 8px;
diff --git a/components/Sign/InputForm.module.css b/components/Sign/InputForm.module.css
index f36789197..0b5d047ee 100644
--- a/components/Sign/InputForm.module.css
+++ b/components/Sign/InputForm.module.css
@@ -2,4 +2,5 @@
   display: flex;
   flex-direction: column;
   row-gap: 1rem;
+  width: 400px;
 }
diff --git a/components/Sign/Layout.module.css b/components/Sign/Layout.module.css
new file mode 100644
index 000000000..4ce4e9d9d
--- /dev/null
+++ b/components/Sign/Layout.module.css
@@ -0,0 +1,107 @@
+.body {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  padding-top: 23.8rem;
+  padding-bottom: 25.2rem;
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  row-gap: 1.6rem;
+  margin-bottom: 3rem;
+}
+.headerSignTextForm {
+  display: flex;
+  column-gap: 0.8rem;
+  font-size: 1.6rem;
+}
+.headerSignText {
+  color: var(--Black-normal-1);
+  font-weight: 400;
+  line-height: 2.4rem;
+}
+.headerLoginLink {
+  color: var(--Purple-light-1);
+  font-weight: 600;
+}
+.headerLoginHr {
+  border: 0.1rem solid var(--Purple-light-1);
+}
+.headerLogo {
+  width: 21rem;
+  height: 3.8rem;
+}
+
+/* section */
+.sectionInputWrap {
+  margin-bottom: 2.4rem;
+}
+
+.section {
+  display: flex;
+  flex-direction: column;
+  width: 40rem;
+}
+
+.sectionInputCheckText {
+  color: var(--Red-normal-1);
+}
+.sectionInput {
+  position: relative;
+}
+
+/* social */
+.socialForm {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #e7effb;
+  padding: 1.2rem 2.4rem;
+  border-radius: 0.8rem;
+}
+
+.socialSnsText {
+  color: #373740;
+}
+
+.socialLinkForm {
+  display: flex;
+  column-gap: 1.6rem;
+}
+
+.socialLinkBackground {
+  background-repeat: no-repeat;
+  width: 4.2rem;
+  height: 4.2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.snsBg1 {
+  background-image: url('/images/googlebg.svg');
+}
+.snsBg2 {
+  background-image: url('/images/kakaobg.svg');
+}
+
+/* tablet */
+@media (max-width: 1199px) {
+  .body {
+    padding-top: 20rem;
+    padding-bottom: 29rem;
+  }
+}
+/* mobile */
+@media (max-width: 767px) {
+  .body {
+    padding: 12rem 3.2rem 23.2rem 3.3rem;
+  }
+  .socialForm {
+    margin-top: 0.2rem;
+  }
+}
diff --git a/components/Sign/Layout.tsx b/components/Sign/Layout.tsx
new file mode 100644
index 000000000..48db953f0
--- /dev/null
+++ b/components/Sign/Layout.tsx
@@ -0,0 +1,70 @@
+import Link from 'next/link';
+
+import { FormEvent, ReactNode } from 'react';
+
+import styles from './Layout.module.css';
+import SubmitButton from './submitButton';
+
+interface LayoutProps {
+  questionText?: string;
+  linkText?: string;
+  href: string;
+  submitBtnText: string;
+  snsText: string;
+  children?: ReactNode;
+}
+
+export default function Layout({ questionText, linkText, href, submitBtnText, snsText, children }: LayoutProps) {
+  const handleOnSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    console.log('submitTest');
+  };
+
+  return (
+    <form onSubmit={handleOnSubmit}>
+      <div className={styles.body}>
+        <header className={styles.header}>
+          <Link href='/'>
+            <img className={styles.headerLogo} src='/images/linkbrary.svg' alt='logo' />
+          </Link>
+
+          <div className={styles.headerSignTextForm}>
+            <span className={styles.headerSignText}>{questionText}</span>
+            <div>
+              <Link className={styles.headerLoginLink} href={href}>
+                {linkText}
+              </Link>
+              <hr className={styles.headerLoginHr} />
+            </div>
+          </div>
+        </header>
+
+        <section className={styles.section}>
+          {children}
+
+          <SubmitButton text={submitBtnText} />
+
+          <div className={styles.socialForm}>
+            <span className={styles.socialSnsText}>{snsText}</span>
+            <div className={styles.socialLinkForm}>
+              <Link target='_blank' href='https://www.google.com/' rel='noopener noreferrer'>
+                <div className={`${styles.snsBg1} ${styles.socialLinkBackground}`}>
+                  <img className='' src='/images/google.png' alt='google' />
+                </div>
+              </Link>
+              <Link
+                target='_blank'
+                href='https://www.kakaocorp.com/page/service/service/KakaoTalk?lang=ko'
+                rel='noopener noreferrer'
+              >
+                <div className={`${styles.snsBg2} ${styles.socialLinkBackground}`}>
+                  <img className='' src='/images/kakako.svg' alt='kakao' />
+                </div>
+              </Link>
+            </div>
+          </div>
+        </section>
+      </div>
+    </form>
+  );
+}
diff --git a/components/Sign/passwordInput.module.css b/components/Sign/passwordInput.module.css
index 228e98108..d65a9589d 100644
--- a/components/Sign/passwordInput.module.css
+++ b/components/Sign/passwordInput.module.css
@@ -3,7 +3,7 @@
 }
 
 .default {
-  width: 35rem;
+  width: 100%;
   padding: 1.8rem 1.5rem;
   border: 1px solid var(--color-gray60);
   border-radius: 8px;
diff --git a/components/Sign/submitButton.module.css b/components/Sign/submitButton.module.css
new file mode 100644
index 000000000..7ec94214c
--- /dev/null
+++ b/components/Sign/submitButton.module.css
@@ -0,0 +1,16 @@
+.signBtn {
+  padding: 1.6rem 2rem;
+  border-radius: 0.8rem;
+  width: 100%;
+  color: var(--color-white);
+
+  font-size: 1.8rem;
+  font-weight: 600;
+  border: 0;
+  margin-top: 0.6rem;
+  margin-bottom: 3.2rem;
+}
+
+.gradation1 {
+  background-image: linear-gradient(135deg, #6d6afe 0%, #6ae3fe 100%);
+}
diff --git a/components/Sign/submitButton.tsx b/components/Sign/submitButton.tsx
new file mode 100644
index 000000000..018ed230a
--- /dev/null
+++ b/components/Sign/submitButton.tsx
@@ -0,0 +1,15 @@
+import styles from './submitButton.module.css';
+
+interface submitProps {
+  text: string;
+}
+
+export default function SubmitButton({ text }: submitProps) {
+  return (
+    <>
+      <button type='submit' className={`${styles.signBtn} ${styles.gradation1}`}>
+        {text}
+      </button>
+    </>
+  );
+}
diff --git a/pages/_app.tsx b/pages/_app.tsx
index c98883295..259235bf2 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,34 +1,21 @@
 import type { AppProps } from 'next/app';
-import { useEffect, useState } from 'react';
 import Head from 'next/head';
 
-import Header from '../components/Header/Header';
-import Footer from '../components/Footer/Footer';
+import Layout from '../components/Layout/Layout';
 
 import '@/styles/global.css';
-import BASE_PATH from './api/codeit';
 
 export default function App({ Component, pageProps }: AppProps) {
-  // 유저 로그인(임시)
-  const [profile, setProfile] = useState('');
-
-  useEffect(() => {
-    const fetchData = async () => {
-      const { data } = await BASE_PATH.get(`users/1`);
-      setProfile(data.data[0]);
-    };
-    fetchData();
-  }, []);
-
   return (
     <>
       <Head>
         <title>Linkbrary</title>
         <link rel='icon' href='/favicon.ico'></link>
       </Head>
-      <Header profile={profile} />
-      <Component {...pageProps} />
-      <Footer />
+
+      <Layout>
+        <Component {...pageProps} />
+      </Layout>
     </>
   );
 }
diff --git a/pages/folder/index.tsx b/pages/folder/index.tsx
index a5a1b7e70..315c6601c 100644
--- a/pages/folder/index.tsx
+++ b/pages/folder/index.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 
 import CardList from '../../components/CardList/CardList';
-import SearchBar from '../../components/SearchBar/SearchBar.xsx';
+import SearchBar from '../../components/SearchBar/SearchBar';
 import Folder from '../../components/Folder/Folder';
 import CardReadOnly from '../../components/CardReadOnly/CardReadOnly';
 import LinkAddBar from '../../components/LinkAddBar/LinkAddBar';
@@ -34,24 +34,26 @@ export default function FolderPage({ folderNav }: any) {
   };
 
   return (
-    <Folder
-      linkAddBar={<LinkAddBar />}
-      searchBar={<SearchBar />}
-      folderFeature={<FolderFeature name={'TEST'} />}
-      folderNavList={
-        <FolderNavList>
-          {folderNav?.map((data: any) => (
-            <FolderNavClick key={data.id} {...data} onFolderClick={onFolderClick} />
-          ))}
-        </FolderNavList>
-      }
-      cardList={
-        <CardList>
-          {navData?.map((data: any) => (
-            <CardReadOnly key={data?.id} {...data} />
-          ))}
-        </CardList>
-      }
-    />
+    <>
+      <Folder
+        linkAddBar={<LinkAddBar />}
+        searchBar={<SearchBar />}
+        folderFeature={<FolderFeature name={'TEST'} />}
+        folderNavList={
+          <FolderNavList>
+            {folderNav?.map((data: any) => (
+              <FolderNavClick key={data.id} {...data} onFolderClick={onFolderClick} />
+            ))}
+          </FolderNavList>
+        }
+        cardList={
+          <CardList>
+            {navData?.map((data: any) => (
+              <CardReadOnly key={data?.id} {...data} />
+            ))}
+          </CardList>
+        }
+      />
+    </>
   );
 }
diff --git a/pages/index.tsx b/pages/index.tsx
index b9fccd116..056ec71d9 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -10,10 +10,10 @@ export default function Home() {
       <Link href='/folder'>
         <h1>folder</h1>
       </Link>
-      <Link href='/signIn'>
+      <Link href='/signin'>
         <h1>signIn</h1>
       </Link>
-      <Link href='/signUp'>
+      <Link href='/signup'>
         <h1>signUp</h1>
       </Link>
     </div>
diff --git a/pages/signIn/index.tsx b/pages/signIn/index.tsx
index e10271eee..04617ad03 100644
--- a/pages/signIn/index.tsx
+++ b/pages/signIn/index.tsx
@@ -1,5 +1,18 @@
 import InputForm from '../../components/Sign/InputForm';
+import Layout from '../../components/Sign/Layout';
 
 export default function signInPage() {
-  return <InputForm />;
+  return (
+    <>
+      <Layout
+        questionText='회원이 아니신가요 ?'
+        linkText='회원 가입하기'
+        href='/signup'
+        submitBtnText='로그인'
+        snsText='소셜 로그인'
+      >
+        <InputForm />;
+      </Layout>
+    </>
+  );
 }
diff --git a/pages/signUp/index.tsx b/pages/signUp/index.tsx
index 5748c8e83..385673e39 100644
--- a/pages/signUp/index.tsx
+++ b/pages/signUp/index.tsx
@@ -1,5 +1,18 @@
 import InputForm from '../../components/Sign/InputForm';
+import Layout from '../../components/Sign/Layout';
 
 export default function signUpPage() {
-  return <InputForm />;
+  return (
+    <>
+      <Layout
+        questionText='이미 회원이신가요?'
+        linkText='로그인 하기'
+        href='/signin'
+        submitBtnText='회원가입'
+        snsText='다른 방식으로 가입하기'
+      >
+        <InputForm />;
+      </Layout>
+    </>
+  );
 }
diff --git a/public/images/google.png b/public/images/google.png
new file mode 100644
index 000000000..554841e82
Binary files /dev/null and b/public/images/google.png differ
diff --git a/public/images/googlebg.svg b/public/images/googlebg.svg
new file mode 100644
index 000000000..75c873ae7
--- /dev/null
+++ b/public/images/googlebg.svg
@@ -0,0 +1,5 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon/google">
+<circle id="GoogleBg" cx="22" cy="22" r="21" fill="white" stroke="#D3D4DD"/>
+</g>
+</svg>
diff --git a/public/images/kakako.svg b/public/images/kakako.svg
new file mode 100644
index 000000000..7a6062bc6
--- /dev/null
+++ b/public/images/kakako.svg
@@ -0,0 +1,13 @@
+<svg width="26" height="24" viewBox="0 0 26 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="99FE484C5C3451F218 1" clip-path="url(#clip0_67_6091)">
+<g id="Group">
+<path id="Vector" d="M9.50122 11.1897H10.9987L10.25 9.06152L9.50122 11.1897Z" fill="#331D1E"/>
+<path id="Vector_2" d="M13 0C5.82 0 0 4.59018 0 10.2532C0 13.9143 2.43375 17.1304 6.09375 18.9409C5.895 19.6274 4.81375 23.3598 4.77125 23.6536C4.77125 23.6536 4.745 23.8737 4.8875 23.9575C4.93518 23.9815 4.98726 23.9956 5.04057 23.9988C5.09387 24.0021 5.14727 23.9944 5.1975 23.9762C5.6075 23.9187 9.9475 20.874 10.6975 20.3501C11.4604 20.4561 12.2298 20.5083 13 20.5064C20.18 20.5064 26 15.9162 26 10.2532C26 4.59018 20.18 0 13 0ZM6.56625 8.66146C6.55 10.1119 6.57875 11.6374 6.555 13.0653C6.5475 13.5217 6.285 13.658 5.93 13.7881C5.88989 13.8022 5.84669 13.8053 5.805 13.7968C5.39875 13.7168 5.075 13.5717 5.065 13.0666C5.03625 11.6399 5.07375 10.1119 5.05375 8.66146C4.71 8.6477 4.22 8.67521 3.90125 8.66146C3.45875 8.6327 3.15125 8.35136 3.17 7.93248C3.18875 7.5136 3.4125 7.21225 3.90875 7.20475C5.08125 7.18725 6.53375 7.18725 7.70625 7.20475C8.20625 7.21225 8.42875 7.51485 8.44375 7.93248C8.45875 8.35011 8.15625 8.6327 7.715 8.66146C7.4 8.67521 6.91125 8.6477 6.56625 8.66146ZM12.8663 13.7193C12.7163 13.7875 12.5535 13.8229 12.3888 13.8231C12.0763 13.8231 11.8375 13.698 11.7638 13.4917L11.3888 12.5189H9.10625L8.73125 13.4917C8.65875 13.6955 8.42 13.8231 8.10625 13.8231C7.94189 13.8231 7.77946 13.7877 7.63 13.7193C7.4225 13.6243 7.22375 13.3617 7.45125 12.654L9.25 7.92998C9.32543 7.72189 9.46054 7.54068 9.63841 7.40902C9.81628 7.27735 10.029 7.20108 10.25 7.18975C10.4708 7.2023 10.6831 7.27918 10.8608 7.41093C11.0385 7.54268 11.1738 7.72354 11.25 7.93123L13.0425 12.6527C13.2712 13.3617 13.0725 13.6293 12.8663 13.7193ZM16.6562 13.7193H14.25C14.0636 13.723 13.8834 13.6527 13.7487 13.5238C13.614 13.3949 13.5358 13.218 13.5312 13.0316V7.93998C13.5392 7.74222 13.6234 7.55521 13.7661 7.41811C13.9088 7.28101 14.099 7.20444 14.2969 7.20444C14.4947 7.20444 14.6849 7.28101 14.8276 7.41811C14.9704 7.55521 15.0545 7.74222 15.0625 7.93998V12.3476H16.6562C16.75 12.3419 16.844 12.3555 16.9323 12.3875C17.0206 12.4195 17.1015 12.4693 17.1699 12.5337C17.2383 12.5981 17.2928 12.6758 17.33 12.7621C17.3673 12.8484 17.3865 12.9414 17.3865 13.0353C17.3865 13.1293 17.3673 13.2223 17.33 13.3085C17.2928 13.3948 17.2383 13.4725 17.1699 13.5369C17.1015 13.6014 17.0206 13.6511 16.9323 13.6831C16.844 13.7151 16.75 13.7287 16.6562 13.723V13.7193ZM22.5312 13.1541C22.5117 13.3021 22.4485 13.4409 22.3497 13.5528C22.2509 13.6646 22.121 13.7445 21.9766 13.7821C21.8321 13.8197 21.6798 13.8133 21.539 13.7638C21.3982 13.7143 21.2754 13.6239 21.1863 13.5042L19.4275 11.1747L19.1675 11.4348V13.0716C19.1675 13.2706 19.0885 13.4614 18.9478 13.6021C18.8072 13.7428 18.6164 13.8218 18.4175 13.8218C18.2186 13.8218 18.0278 13.7428 17.8872 13.6021C17.7465 13.4614 17.6675 13.2706 17.6675 13.0716V7.94498C17.6675 7.74601 17.7465 7.55518 17.8872 7.41449C18.0278 7.27379 18.2186 7.19475 18.4175 7.19475C18.6164 7.19475 18.8072 7.27379 18.9478 7.41449C19.0885 7.55518 19.1675 7.74601 19.1675 7.94498V9.55299L21.26 7.45983C21.3148 7.40565 21.3798 7.36293 21.4513 7.33416C21.5227 7.30539 21.5992 7.29115 21.6763 7.29228C21.8635 7.2972 22.0424 7.37114 22.1785 7.49992C22.3146 7.62869 22.3984 7.80322 22.4137 7.99C22.4205 8.07334 22.4094 8.15717 22.3811 8.23587C22.3529 8.31458 22.3082 8.38635 22.25 8.44639L20.5375 10.1557L22.3838 12.6027C22.5033 12.7614 22.555 12.9611 22.5275 13.1579L22.5312 13.1541Z" fill="#331D1E"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_67_6091">
+<rect width="26" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/images/kakaobg.svg b/public/images/kakaobg.svg
new file mode 100644
index 000000000..f0da6389e
--- /dev/null
+++ b/public/images/kakaobg.svg
@@ -0,0 +1,5 @@
+<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon/facebook">
+<circle id="FacebookBg" cx="21" cy="21" r="21" fill="#F5E14B"/>
+</g>
+</svg>
diff --git a/styles/reset.css b/styles/reset.css
index dfd7eaad1..74c8ed69e 100644
--- a/styles/reset.css
+++ b/styles/reset.css
@@ -3,7 +3,7 @@
 * {
   box-sizing: border-box;
   margin: 0;
-  font-family: "Pretendard";
+  font-family: 'Pretendard';
   word-break: keep-all;
 }
 
@@ -25,10 +25,10 @@ input {
 input:focus {
   outline: none;
 }
-input[type="search"]::-webkit-search-decoration,
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-results-button,
-input[type="search"]::-webkit-search-results-decoration {
+input[type='search']::-webkit-search-decoration,
+input[type='search']::-webkit-search-cancel-button,
+input[type='search']::-webkit-search-results-button,
+input[type='search']::-webkit-search-results-decoration {
   display: none;
 }