diff --git a/package.json b/package.json
index 58806c19..182f20f7 100644
--- a/package.json
+++ b/package.json
@@ -54,7 +54,7 @@
     "remark-parse": "^10.0.2",
     "remark-rehype": "^10.1.0",
     "solid-emoji-picker": "^0.2.1",
-    "solid-js": "1.7.7",
+    "solid-js": "1.8.7",
     "solid-transition-group": "^0.2.3",
     "unified": "^10.1.2"
   },
diff --git a/src/pages/api/auth.ts b/src/pages/api/auth.ts
new file mode 100644
index 00000000..7c40db5c
--- /dev/null
+++ b/src/pages/api/auth.ts
@@ -0,0 +1,12 @@
+import type { APIRoute } from 'astro'
+
+const realPassword = import.meta.env.SITE_PASSWORD
+
+export const post: APIRoute = async(context) => {
+  const body = await context.request.json()
+
+  const { pass } = body
+  return new Response(JSON.stringify({
+    code: (!realPassword || pass === realPassword) ? 0 : -1,
+  }))
+}
diff --git a/src/pages/index.astro b/src/pages/index.astro
index ae3ecb97..3f917824 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -21,3 +21,23 @@ import BuildStores from '@/components/client-only/BuildStores'
     <ModalsLayer client:only />
     <BuildStores client:only />
 </Layout>
+
+
+<script>
+  async function checkCurrentAuth() {
+    const password = localStorage.getItem('pass')
+    const response = await fetch('/api/auth', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        pass: password,
+      }),
+    })
+    const responseJson = await response.json()
+    if (responseJson.code !== 0)
+      window.location.href = '/password'
+  }
+  checkCurrentAuth()
+  </script>
\ No newline at end of file
diff --git a/src/pages/password.astro b/src/pages/password.astro
new file mode 100644
index 00000000..ab35d2db
--- /dev/null
+++ b/src/pages/password.astro
@@ -0,0 +1,72 @@
+---
+import Layout from '../layouts/Layout.astro'
+---
+
+<Layout title="Password Protection">
+  <main class="flex flex-col items-center justify-center h-screen">
+    <div class="op-30 text-2xl">
+      Please input password</div>
+    <div id="input_container" class="flex mt-4">
+      <input id="password_input" type="password" class="gpt-password-input" />
+      <div id="submit" class="gpt-password-submit">
+        <div class="i-carbon-arrow-right" />
+      </div>
+    </div>
+  </main>
+</Layout>
+
+<script>
+const inputContainer = document.getElementById('input_container') as HTMLDivElement
+const input = document.getElementById('password_input') as HTMLInputElement
+const submitButton = document.getElementById('submit') as HTMLDivElement
+
+input.onkeydown = async(event) => {
+  if (event.key === 'Enter')
+    handleSubmit()
+}
+submitButton.onclick = handleSubmit
+
+async function handleSubmit() {
+  const password = input.value
+  const response = await fetch('/api/auth', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      pass: password,
+    }),
+  })
+  const responseJson = await response.json()
+  if (responseJson.code === 0) {
+    localStorage.setItem('pass', password)
+    window.location.href = '/'
+  } else {
+    inputContainer.classList.add('invalid')
+    setTimeout(() => {
+      inputContainer.classList.remove('invalid')
+    }, 300)
+  }
+}
+</script>
+
+<style>
+@keyframes shake {
+  0% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(0.5rem);
+  }
+  75% {
+    transform: translateX(-0.5rem);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+.invalid {
+  animation: shake 0.2s ease-in-out 0s 2;
+}
+</style>