diff --git a/faq.html b/faq.html
new file mode 100644
index 000000000..e69de29bb
diff --git a/images/.DS_Store b/images/.DS_Store
new file mode 100644
index 000000000..0af5d56f9
Binary files /dev/null and b/images/.DS_Store differ
diff --git a/images/landing/_img.svg b/images/landing/_img.svg
new file mode 100644
index 000000000..c27acd2a1
--- /dev/null
+++ b/images/landing/_img.svg
@@ -0,0 +1,70 @@
+
diff --git a/images/landing/_img1.svg b/images/landing/_img1.svg
new file mode 100644
index 000000000..26fbda220
--- /dev/null
+++ b/images/landing/_img1.svg
@@ -0,0 +1,28 @@
+
diff --git a/images/landing/_img4.svg b/images/landing/_img4.svg
new file mode 100644
index 000000000..c4ee8b9d6
--- /dev/null
+++ b/images/landing/_img4.svg
@@ -0,0 +1,44 @@
+
diff --git a/images/landing/akar-icons_facebook-fill.svg b/images/landing/akar-icons_facebook-fill.svg
new file mode 100644
index 000000000..8491c2f83
--- /dev/null
+++ b/images/landing/akar-icons_facebook-fill.svg
@@ -0,0 +1,3 @@
+
diff --git a/images/landing/akar-icons_twitter-fill.svg b/images/landing/akar-icons_twitter-fill.svg
new file mode 100644
index 000000000..14a6069a1
--- /dev/null
+++ b/images/landing/akar-icons_twitter-fill.svg
@@ -0,0 +1,3 @@
+
diff --git a/images/landing/akar-icons_youtube-fill.svg b/images/landing/akar-icons_youtube-fill.svg
new file mode 100644
index 000000000..b639919ab
--- /dev/null
+++ b/images/landing/akar-icons_youtube-fill.svg
@@ -0,0 +1,10 @@
+
diff --git a/images/landing/ant-design_instagram-filled.svg b/images/landing/ant-design_instagram-filled.svg
new file mode 100644
index 000000000..c83306f84
--- /dev/null
+++ b/images/landing/ant-design_instagram-filled.svg
@@ -0,0 +1,3 @@
+
diff --git a/images/landing/img2.svg b/images/landing/img2.svg
new file mode 100644
index 000000000..f83703e2c
--- /dev/null
+++ b/images/landing/img2.svg
@@ -0,0 +1,10 @@
+
diff --git a/images/landing/img3.svg b/images/landing/img3.svg
new file mode 100644
index 000000000..30cfac8bb
--- /dev/null
+++ b/images/landing/img3.svg
@@ -0,0 +1,44 @@
+
diff --git a/images/signin/.DS_Store b/images/signin/.DS_Store
new file mode 100644
index 000000000..c9494b0fb
Binary files /dev/null and b/images/signin/.DS_Store differ
diff --git a/images/signin/Component 2.svg b/images/signin/Component 2.svg
new file mode 100644
index 000000000..04cb1dc76
--- /dev/null
+++ b/images/signin/Component 2.svg
@@ -0,0 +1,22 @@
+
diff --git a/images/signin/Component 3.svg b/images/signin/Component 3.svg
new file mode 100644
index 000000000..81125381c
--- /dev/null
+++ b/images/signin/Component 3.svg
@@ -0,0 +1,12 @@
+
diff --git a/images/signin/logo.svg b/images/signin/logo.svg
new file mode 100644
index 000000000..d938ff2ad
--- /dev/null
+++ b/images/signin/logo.svg
@@ -0,0 +1,15 @@
+
diff --git a/images/signup/Component 2.svg b/images/signup/Component 2.svg
new file mode 100644
index 000000000..238f950bc
--- /dev/null
+++ b/images/signup/Component 2.svg
@@ -0,0 +1,10 @@
+
diff --git a/images/state=Default.png b/images/state=Default.png
new file mode 100644
index 000000000..c24d48291
Binary files /dev/null and b/images/state=Default.png differ
diff --git a/images/state=Selected.png b/images/state=Selected.png
new file mode 100644
index 000000000..40025879f
Binary files /dev/null and b/images/state=Selected.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 000000000..45a6c423a
--- /dev/null
+++ b/index.html
@@ -0,0 +1,137 @@
+
+
+
+
+
+
+
+
+
+
+ Linkbrary
+
+
+
+
+
+
+
+
+
+
+
+ 원하는 링크를
+ 저장하세요
+
+
+ 나중에 읽고 싶은 글, 다시 보고 싶은 영상,
+ 사고 싶은 옷, 기억하고 싶은 모든 것을
+ 한 공간에 저장하세요.
+
+
+
+
+
+
+
+
+
+
+
+ 링크를 폴더로
+ 관리하세요
+
+
+ 나만의 폴더를 무제한으로 만들고
+ 다양하게 활용할 수 있습니다.
+
+
+
+
+
+
+
+
+
+ 저장한 링크를
+ 공유해 보세요.
+
+
+ 여러 링크를 폴더에 담고 공유할 수 있습니다.
+ 가족, 친구, 동료들에게 쉽고 빠르게 링크를
+ 공유해 보세요.
+
+
+
+
+
+
+
+
+
+
+
+ 저장한 링크를
+ 검색해 보세요
+
+
+ 중요한 정보들을 검색으로 쉽게 찾아보세요.
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/privacy.html b/privacy.html
new file mode 100644
index 000000000..e69de29bb
diff --git a/signin.html b/signin.html
new file mode 100644
index 000000000..29327c208
--- /dev/null
+++ b/signin.html
@@ -0,0 +1,58 @@
+
+
+
+
+
+
+
+
+
+
+
+
+ Linkbrary
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/signup.html b/signup.html
new file mode 100644
index 000000000..64632e1a7
--- /dev/null
+++ b/signup.html
@@ -0,0 +1,67 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Linkbrary
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/style-signin.css b/style-signin.css
new file mode 100644
index 000000000..f15989591
--- /dev/null
+++ b/style-signin.css
@@ -0,0 +1,158 @@
+* {
+ box-sizing: border-box;
+ margin: 0;
+ color: inherit;
+}
+
+body {
+ background-color: #F0F6FF;
+ font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
+}
+
+main {
+ margin: 238px auto;
+ text-align: center;
+ display: flex;
+ flex-direction: column;
+}
+
+.header-logo {
+ width: 210px;
+ margin-bottom: 16px;
+}
+
+.header-none {
+ color: var(--black, #000);
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 24px; /* 150% */
+}
+
+.header-deco {
+ color: var(--Linkbrary-primary-color, #6D6AFE);
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 600;
+ line-height: normal;
+}
+
+.contents {
+ width: 400px;
+ margin: auto;
+ text-align: center;
+}
+
+.input {
+ margin: 30px 0;
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+}
+
+.input-email,
+.input-password {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+}
+
+.label {
+ color: var(--black, #000);
+ font-family: Pretendard;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+}
+
+input.email {
+ display: flex;
+ width: 100%;
+ margin-top: 12px;
+ padding: 18px 15px;
+ justify-content: center;
+ align-items: center;
+ border-radius: 8px;
+ border: 1px solid var(--Linkbrary-gray20, #CCD5E3);
+ background: var(--Linkbrary-white, #FFF);
+}
+
+/* input:focus {
+ border: 1px solid red;
+ background: var(--Linkbrary-white, #FFF);
+} */
+
+.input-binder {
+ width: 100%;
+ position: relative;
+}
+
+input.password {
+ display: flex;
+ width: 100%;
+ margin-top: 12px;
+ padding: 18px 15px;
+ justify-content: center;
+ align-items: center;
+ border-radius: 8px;
+ border: 1px solid var(--Linkbrary-gray20, #CCD5E3);
+ background: var(--Linkbrary-white, #FFF);
+}
+
+/* .password:focus {
+ border: 1px solid var(--Linkbrary-primary-color, #6D6AFE);
+ background: var(--Linkbrary-white, #FFF);
+} */
+
+i {
+ position: absolute;
+ left: 85%;
+ top: 45%;
+ width: 50px;
+ height: 50px;
+}
+
+.login {
+ margin-top: 30px;
+}
+
+.login .button {
+ color: var(--Grey-Light, #F5F5F5);
+ font-family: Pretendard;
+ font-size: 18px;
+ font-style: normal;
+ font-weight: 600;
+ line-height: normal;
+ display: flex;
+ width: 100%;
+ padding: 16px 20px;
+ justify-content: center;
+ align-items: center;
+ border: 0px;
+ border-radius: 8px;
+ background: var(--gra-purpleblue-to-skyblue, linear-gradient(91deg, #6D6AFE 0.12%, #6AE3FE 101.84%));
+ cursor: pointer;
+}
+
+.social-login {
+ margin-top: 32px;
+ padding: 12px 24px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ border-radius: 8px;
+ border: 1px solid var(--Linkbrary-gray20, #CCD5E3);
+ background: var(--Linkbrary-gray10, #E7EFFB);
+ color: var(--Linkbrary-gray100, #373740);
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+}
+
+.social-icons {
+ display: flex;
+ gap: 16px;
+ align-items: center;
+}
\ No newline at end of file
diff --git a/style-signup.css b/style-signup.css
new file mode 100644
index 000000000..f15989591
--- /dev/null
+++ b/style-signup.css
@@ -0,0 +1,158 @@
+* {
+ box-sizing: border-box;
+ margin: 0;
+ color: inherit;
+}
+
+body {
+ background-color: #F0F6FF;
+ font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
+}
+
+main {
+ margin: 238px auto;
+ text-align: center;
+ display: flex;
+ flex-direction: column;
+}
+
+.header-logo {
+ width: 210px;
+ margin-bottom: 16px;
+}
+
+.header-none {
+ color: var(--black, #000);
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 24px; /* 150% */
+}
+
+.header-deco {
+ color: var(--Linkbrary-primary-color, #6D6AFE);
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 600;
+ line-height: normal;
+}
+
+.contents {
+ width: 400px;
+ margin: auto;
+ text-align: center;
+}
+
+.input {
+ margin: 30px 0;
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+}
+
+.input-email,
+.input-password {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+}
+
+.label {
+ color: var(--black, #000);
+ font-family: Pretendard;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+}
+
+input.email {
+ display: flex;
+ width: 100%;
+ margin-top: 12px;
+ padding: 18px 15px;
+ justify-content: center;
+ align-items: center;
+ border-radius: 8px;
+ border: 1px solid var(--Linkbrary-gray20, #CCD5E3);
+ background: var(--Linkbrary-white, #FFF);
+}
+
+/* input:focus {
+ border: 1px solid red;
+ background: var(--Linkbrary-white, #FFF);
+} */
+
+.input-binder {
+ width: 100%;
+ position: relative;
+}
+
+input.password {
+ display: flex;
+ width: 100%;
+ margin-top: 12px;
+ padding: 18px 15px;
+ justify-content: center;
+ align-items: center;
+ border-radius: 8px;
+ border: 1px solid var(--Linkbrary-gray20, #CCD5E3);
+ background: var(--Linkbrary-white, #FFF);
+}
+
+/* .password:focus {
+ border: 1px solid var(--Linkbrary-primary-color, #6D6AFE);
+ background: var(--Linkbrary-white, #FFF);
+} */
+
+i {
+ position: absolute;
+ left: 85%;
+ top: 45%;
+ width: 50px;
+ height: 50px;
+}
+
+.login {
+ margin-top: 30px;
+}
+
+.login .button {
+ color: var(--Grey-Light, #F5F5F5);
+ font-family: Pretendard;
+ font-size: 18px;
+ font-style: normal;
+ font-weight: 600;
+ line-height: normal;
+ display: flex;
+ width: 100%;
+ padding: 16px 20px;
+ justify-content: center;
+ align-items: center;
+ border: 0px;
+ border-radius: 8px;
+ background: var(--gra-purpleblue-to-skyblue, linear-gradient(91deg, #6D6AFE 0.12%, #6AE3FE 101.84%));
+ cursor: pointer;
+}
+
+.social-login {
+ margin-top: 32px;
+ padding: 12px 24px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ border-radius: 8px;
+ border: 1px solid var(--Linkbrary-gray20, #CCD5E3);
+ background: var(--Linkbrary-gray10, #E7EFFB);
+ color: var(--Linkbrary-gray100, #373740);
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+}
+
+.social-icons {
+ display: flex;
+ gap: 16px;
+ align-items: center;
+}
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 000000000..70a42598f
--- /dev/null
+++ b/style.css
@@ -0,0 +1,262 @@
+* {
+ box-sizing: border-box;
+ margin: 0;
+ color: inherit;
+ text-decoration: none;
+ --Primary: #6D6AFE;
+ --Red: #FF5B56;
+ --Black: #111322;
+ --White: #FFFFFF;
+ --Gray1: #3E3E43;
+ --Gray2: #9FA6B2;
+ --Gray3: #CCD5E3;
+ --Gray4: #E7EFFB;
+ --Gray5: #F0F6FF;
+}
+
+input {
+ cursor: pointer;
+}
+
+/* Desktop First */
+
+body {
+ font-size: 18px;
+ font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
+}
+
+header {
+ display: flex;
+ padding: 20px 200px;
+ flex-direction: column;
+ align-items: center;
+ gap: 8px;
+ align-self: stretch;
+ background: var(--Gray5);
+ position: sticky;
+ top: 0;
+}
+
+.header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ align-self: stretch;
+}
+
+.header-logo {
+ width: 133px;
+ height: 24px;
+}
+
+.header-login {
+ display: flex;
+ width: 128px;
+ padding: 16px 20px;
+ justify-content: center;
+ align-items: center;
+ gap: 10px;
+ border: 0;
+ border-radius: 8px;
+ background: var(--gra-purpleblue-to-skyblue, linear-gradient(91deg, var(--Primary) 0.12%, #6AE3FE 101.84%));
+ color: var(--Grey-Light, #F5F5F5);
+ font-size: 18px;
+ font-style: normal;
+ font-weight: 600;
+ line-height: normal;
+}
+
+.main {
+ display: flex;
+ padding: 70px 0 0 0;
+ flex-direction: column;
+ justify-content: flex-end;
+ align-items: center;
+ gap: 40px;
+ background: #F0F6FF;
+}
+
+.main-h1 {
+ text-align: center;
+ font-family: Pretendard;
+ font-size: 64px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: 80px; /* 125% */
+ color: var(--Black);
+ /* min-width: 576px; */
+}
+
+@media (max-width: 500px) {
+ .main-h1 {
+ font-size: 40px;
+ text-align: center;
+ font-family: Pretendard;
+ font-style: normal;
+ font-weight: 700;
+ line-height: 80px; /* 125% */
+ color: var(--Black);
+ }
+}
+
+.main-h1-gradient {
+ background: linear-gradient(91deg, var(--Primary) 17.28%, #FF9F9F 74.98%);
+ background-clip: text;
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+.main-h1-button {
+ display: flex;
+ width: 350px;
+ padding: 16px 20px;
+ justify-content: center;
+ align-items: center;
+ gap: 10px;
+ border: 0;
+ border-radius: 8px;
+ background: var(--gra-purpleblue-to-skyblue, linear-gradient(91deg, var(--Primary) 0.12%, #6AE3FE 101.84%));
+ color: var(--Grey-Light, #F5F5F5);
+ font-size: 18px;
+ font-style: normal;
+ font-weight: 600;
+ line-height: normal;
+}
+
+.main1 {
+ display: flex;
+ padding: 120px 461px 50px 461px;
+ justify-content: center;
+ align-items: center;
+}
+
+.main1-contents,
+.main2-contents,
+.main3-contents,
+.main4-contents {
+ display: flex;
+ align-items: center;
+ gap: 157px;
+}
+
+.main1-text,
+.main2-text,
+.main3-text,
+.main4-text {
+ display: flex;
+ width: 291px;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 10px;
+}
+
+.main1-h2,
+.main2-h2,
+.main3-h2,
+.main4-h2 {
+ font-size: 48px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: normal;
+ letter-spacing: -0.3px;
+ color: var(--Black);
+}
+
+.main1-h2-gradient {
+ background: linear-gradient(96deg, #FE8A8A 1.72%, #A4CEFF 74.97%);
+ background-clip: text;
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+.main1-text-normal,
+.main2-text-normal,
+.main3-text-normal,
+.main4-text-normal {
+ color: #6B6B6B;
+ font-family: Abel;
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 150%; /* 24px */
+}
+
+.main2,
+.main4 {
+ display: flex;
+ padding: 50px 461px;
+ justify-content: center;
+ align-items: center;
+}
+
+.main2-h2-gradient {
+ background: linear-gradient(277deg, #6FBAFF 59.22%, #FFD88B 93.66%);
+ background-clip: text;
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+.main3 {
+ display: flex;
+ padding: 50px 461px;
+ justify-content: center;
+ align-items: center;
+}
+
+.main3-h2-gradient {
+ background: linear-gradient(99deg, #6D7CCD 19.76%, rgba(82, 136, 133, 0.22) 52.69%);
+ background-clip: text;
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+.main4-h2-gradient {
+ background: var(--Fandom-K-gra-blue-to-pink, linear-gradient(271deg, #FE578F -9.84%, #68E8F9 107.18%));
+ background-clip: text;
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+footer {
+ margin-top: 120px;
+}
+
+.footer-contents {
+ display: flex;
+ padding: 32px 104px 108px 104px;
+ justify-content: space-between;
+ align-items: center;
+ flex-shrink: 0;
+ align-self: stretch;
+ background: var(--The-julge-black, #111322);
+}
+
+.footer-text1 {
+ color: #676767;
+ text-align: center;
+ font-family: Acme;
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+}
+
+.footer-text2 {
+ display: flex;
+ width: 181.111px;
+ align-items: flex-start;
+ gap: 30px;
+ color: #CFCFCF;
+ font-family: Acme;
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+}
+
+.footer-sns {
+ display: flex;
+ align-items: flex-start;
+ gap: 12px;
+}
+