diff --git a/.env.development b/.env.development
new file mode 100644
index 0000000..1d0b57f
--- /dev/null
+++ b/.env.development
@@ -0,0 +1 @@
+VITE_API_BASE_URL = http://localhost:4010
\ No newline at end of file
diff --git a/env.d.ts b/env.d.ts
index 11f02fe..84087a9 100644
--- a/env.d.ts
+++ b/env.d.ts
@@ -1 +1,9 @@
 /// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_API_BASE_URL: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index cd291e0..9765218 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@types/eslint__js": "^8.42.3",
         "eslint-config-prettier": "^9.1.0",
+        "jwt-decode": "^4.0.0",
         "validator": "^13.12.0",
         "vue": "^3.5.6",
         "vue-router": "^4.3.3"
@@ -18,6 +19,7 @@
         "@eslint/js": "^9.11.0",
         "@rushstack/eslint-patch": "^1.8.0",
         "@tsconfig/node20": "^20.1.4",
+        "@types/jwt-decode": "^2.2.1",
         "@types/node": "^20.14.5",
         "@types/validator": "^13.12.2",
         "@vitejs/plugin-vue": "^5.1.3",
@@ -1019,6 +1021,13 @@
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
       "license": "MIT"
     },
+    "node_modules/@types/jwt-decode": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@types/jwt-decode/-/jwt-decode-2.2.1.tgz",
+      "integrity": "sha512-aWw2YTtAdT7CskFyxEX2K21/zSDStuf/ikI3yBqmwpwJF0pS+/IX5DWv+1UFffZIbruP6cnT9/LAJV1gFwAT1A==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/node": {
       "version": "20.14.9",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.9.tgz",
@@ -2713,6 +2722,15 @@
       "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
       "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw=="
     },
+    "node_modules/jwt-decode": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz",
+      "integrity": "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -2865,15 +2883,16 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
-      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "version": "3.3.8",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
+      "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
       "funding": [
         {
           "type": "github",
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
diff --git a/package.json b/package.json
index f6812ec..bba0f6d 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
   "dependencies": {
     "@types/eslint__js": "^8.42.3",
     "eslint-config-prettier": "^9.1.0",
+    "jwt-decode": "^4.0.0",
     "validator": "^13.12.0",
     "vue": "^3.5.6",
     "vue-router": "^4.3.3"
@@ -25,6 +26,7 @@
     "@eslint/js": "^9.11.0",
     "@rushstack/eslint-patch": "^1.8.0",
     "@tsconfig/node20": "^20.1.4",
+    "@types/jwt-decode": "^2.2.1",
     "@types/node": "^20.14.5",
     "@types/validator": "^13.12.2",
     "@vitejs/plugin-vue": "^5.1.3",
diff --git a/src/assets/main.css b/src/assets/main.css
index e349ba2..5634a6e 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -64,7 +64,16 @@
   line-height: 1rem;
 }
 
-.fontstyle-ui-caption {
+.fontstyle-ui-caption-link {
+  @apply font-primary;
+  font-size: 0.75rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1rem;
+  text-decoration: underline;
+}
+
+.fontstyle-ui-caption-strong {
   @apply font-primary;
   font-size: 0.75rem;
   font-style: normal;
diff --git a/src/components/Controls/OAuthButton.vue b/src/components/Controls/OAuthButton.vue
new file mode 100644
index 0000000..a16c0bd
--- /dev/null
+++ b/src/components/Controls/OAuthButton.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+
+const {
+  disabled = false,
+  app,
+  mode
+} = defineProps<{
+  disabled?: boolean
+  app: string
+  mode: 'signup' | 'login'
+}>()
+
+const router = useRouter()
+
+async function onOAuthClick() {
+  try {
+    if (mode === 'signup') {
+      if (app === 'Github') {
+        const response = await fetch(`${import.meta.env.VITE_API_BASE_URL}/github-oauth2/params`)
+        if (response.status === 200) {
+          const responseJson = await response.json()
+          alert(responseJson.url)
+          router.push(responseJson.url)
+        } else if (response.status === 500) {
+          const responseJson = await response.json()
+          alert('Internal Server Error: ' + responseJson.message)
+        } else {
+          alert(response.status)
+        }
+      }
+      if (app === 'Google') {
+        const response = await fetch(`${import.meta.env.VITE_API_BASE_URL}/google-oauth2/params`)
+        if (response.status === 200) {
+          const responseJson = await response.json()
+          router.push(responseJson.url)
+        } else if (response.status === 500) {
+          const responseJson = await response.json()
+          alert('Internal Server Error: ' + responseJson.message)
+        } else {
+          alert(response.status)
+        }
+      }
+      if (app === 'traQ') {
+        router.push('/_oauth/login?redirect=/') // TODO: Redirect to the correct URL
+      }
+    }
+  } catch (error) {
+    console.error('OAuth Error:', error)
+    alert('OAuth Error:' + error)
+  }
+}
+</script>
+
+<template>
+  <button
+    :disabled="disabled"
+    class="fontstyle-ui-control-strong inline-block space-x-2.5 rounded-lg border border-border-secondary px-3 py-2 text-text-primary enabled:hover:bg-background-secondary disabled:opacity-50"
+    @click="onOAuthClick"
+  >
+    <span v-if="app === 'Github'" class="inline-block align-middle"
+      ><img src="" class="size-5"
+    /></span>
+    <span v-if="app === 'Google'" class="inline-block align-middle"
+      ><img src="" class="size-5"
+    /></span>
+    <span v-if="app === 'traQ'" class="inline-block align-middle"
+      ><img src="" class="size-5"
+    /></span>
+    <span class="inline-block align-middle">{{ app }} で新規登録</span>
+  </button>
+</template>
+
+<style scoped></style>
diff --git a/src/utils/validator.ts b/src/utils/validator.ts
new file mode 100644
index 0000000..ca2008a
--- /dev/null
+++ b/src/utils/validator.ts
@@ -0,0 +1,11 @@
+export const usernameValidator = (username: string): boolean => {
+  return /^[A-Za-z0-9_]{5,10}$/.test(username)
+}
+
+export const passwordValidator = (password: string): boolean => {
+  const hasLetter = /[A-Za-z]/.test(password);
+  const hasNumber = /[0-9]/.test(password);
+  const hasSpecialChar = /[!@#$%^&*()_+\-={}[\]:;"'<>,.?/]/.test(password);
+  const isValid = /^[A-Za-z0-9!@#$%^&*()_+\-={}[\]:;"'<>,.?/]{10,64}$/.test(password);
+  return hasLetter && hasNumber && hasSpecialChar && isValid;
+}
\ No newline at end of file
diff --git a/src/views/SignupAfterMailView.vue b/src/views/SignupAfterMailView.vue
index d091e29..3d9df78 100644
--- a/src/views/SignupAfterMailView.vue
+++ b/src/views/SignupAfterMailView.vue
@@ -1,8 +1,37 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+import BorderedButton from '@/components/Controls/BorderedButton.vue'
+import PrimaryButton from '@/components/Controls/PrimaryButton.vue'
+
+const router = useRouter()
+
+function onClose() {
+  router.push('/')
+}
+function onResendEmail() {
+  router.push('/signup')
+}
+</script>
 
 <template>
-  <div>
-    <h1>Signup After Mail</h1>
+  <div
+    class="flex items-center justify-center bg-background-tertiary px-8 py-6"
+    style="height: calc(100vh - 56px)"
+  >
+    <div class="max-w-xl space-y-5 rounded-2xl bg-white px-14 py-10">
+      <div class="fontstyle-ui-title text-left">確認メールを送信しました</div>
+      <div class="fontstyle-ui-body text-left text-text-secondary">
+        60分以内に、メールに記載されたリンクから登録フォームにアクセスしてください。
+      </div>
+      <div class="flex gap-3">
+        <div class="flex-1">
+          <PrimaryButton text="この画面を閉じる" class="w-full" @click="onClose" />
+        </div>
+        <div class="flex-1">
+          <BorderedButton text="メールを再送信する" class="w-full" @click="onResendEmail" />
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
diff --git a/src/views/SignupRegisterView.vue b/src/views/SignupRegisterView.vue
index 3387b0c..24e830a 100644
--- a/src/views/SignupRegisterView.vue
+++ b/src/views/SignupRegisterView.vue
@@ -1,8 +1,166 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { jwtDecode } from 'jwt-decode'
+import { usernameValidator, passwordValidator } from '@/utils/validator'
+import PasswordTextbox from '@/components/Controls/Textbox/PasswordTextbox.vue'
+import PlainTextbox from '@/components/Controls/Textbox/PlainTextbox.vue'
+import PrimaryButton from '@/components/Controls/PrimaryButton.vue'
+
+const username = ref('')
+const usernameErrorMessage = ref('')
+const emailAddress = ref('')
+const password = ref('')
+const passwordErrorMessage = ref('')
+const confirmPassword = ref('')
+const confirmPasswordErrorMessage = ref('')
+
+onMounted(() => {
+  try {
+    const token = new URLSearchParams(window.location.search).get('token')
+    if (token) {
+      const decodedToken = jwtDecode<{ email: string }>(token)
+      emailAddress.value = decodedToken.email
+    }
+  } catch (error) {
+    console.error('Signup Register Error:', error)
+    alert('Signup Register Error:' + error)
+  }
+})
+
+const router = useRouter()
+
+async function onSignupRegister() {
+  try {
+    let error = false
+    // check user name
+    if (!username.value) {
+      usernameErrorMessage.value = 'ユーザー名を入力してください'
+      error = true
+    } else if (!usernameValidator(username.value)) {
+      usernameErrorMessage.value = '無効なユーザー名'
+      error = true
+    } else {
+      usernameErrorMessage.value = ''
+    }
+    // check password
+    if (!password.value) {
+      passwordErrorMessage.value = 'パスワードを入力してください'
+      error = true
+    } else if (!passwordValidator(password.value)) {
+      passwordErrorMessage.value = '無効なパスワード'
+      error = true
+    } else {
+      passwordErrorMessage.value = ''
+    }
+    // check confirm password
+    if (!confirmPassword.value) {
+      confirmPasswordErrorMessage.value = 'パスワード（確認）を入力してください'
+      error = true
+    } else if (password.value !== confirmPassword.value) {
+      confirmPasswordErrorMessage.value = 'パスワードが一致しません'
+      error = true
+    } else {
+      confirmPasswordErrorMessage.value = ''
+    }
+    if (error) {
+      return
+    }
+    const token = new URLSearchParams(window.location.search).get('token')
+    const response = await fetch(`${import.meta.env.VITE_API_BASE_URL}/signup`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ userName: username.value, password: password.value, token: token })
+    })
+    if (response.status === 201) {
+      router.push('/login')
+    } else if (response.status === 400) {
+      alert('不正なリクエストです')
+    } else if (response.status === 401) {
+      alert('Unauthorized')
+    } else {
+      alert(response.status)
+    }
+  } catch (error) {
+    console.error('Signup Register Error:', error)
+    alert('Signup Register Error:' + error)
+  }
+}
+</script>
 
 <template>
-  <div>
-    <h1>Signup Register</h1>
+  <div
+    class="flex items-center justify-center bg-background-tertiary px-8 py-6"
+    style="height: calc(100vh - 56px)"
+  >
+    <div class="max-w-3xl space-y-5 rounded-2xl bg-white px-14 py-10">
+      <div class="fontstyle-ui-title text-left">新規登録</div>
+      <div>
+        <span class="fontstyle-ui-body text-status-error">*</span>
+        <span class="fontstyle-ui-body text-text-primary">がついた項目は必須です。</span>
+      </div>
+      <div class="flex flex-col space-y-5 p-2.5">
+        <div class="flex gap-6">
+          <label for="username" class="w-50 text-right">
+            <span class="fontstyle-ui-body-strong text-text-primary">ユーザー名</span>
+            <span class="fontstyle-ui-body-strong text-status-error">*</span>
+          </label>
+          <div class="flex-1">
+            <PlainTextbox id="username" v-model="username" :error-message="usernameErrorMessage" />
+            <div class="fontstyle-ui-caption-strong text-nowrap pt-1 text-text-secondary">
+              文字数は5以上10以下で、半角英数字とアンダースコアのみが使用できます。
+            </div>
+          </div>
+        </div>
+        <div class="flex gap-6">
+          <div class="w-50 text-right">
+            <span class="fontstyle-ui-body-strong text-text-primary">メールアドレス</span>
+          </div>
+          <div class="flex-1">
+            <span class="fontstyle-ui-body w-full px-1 text-text-primary">
+              {{ emailAddress }}
+            </span>
+          </div>
+        </div>
+        <div class="flex gap-6">
+          <label for="password" class="w-50 text-right">
+            <span class="fontstyle-ui-body-strong text-text-primary">パスワード</span>
+            <span class="fontstyle-ui-body-strong text-status-error">*</span>
+          </label>
+          <div class="flex-1">
+            <PasswordTextbox
+              id="password"
+              v-model="password"
+              :error-message="passwordErrorMessage"
+            />
+            <div class="fontstyle-ui-caption-strong pt-1 text-text-secondary">
+              文字数は10以上64以下で、半角英数字と記号が使用できます。
+            </div>
+            <div class="fontstyle-ui-caption-strong pt-1 text-text-secondary">
+              英字、数字、記号がそれぞれ1文字以上含まれている必要があります。
+            </div>
+          </div>
+        </div>
+        <div class="flex gap-6">
+          <label for="confirPassword" class="w-50 text-right">
+            <span class="fontstyle-ui-body-strong text-text-primary">パスワード（確認）</span>
+            <span class="fontstyle-ui-body-strong text-status-error">*</span>
+          </label>
+          <div class="flex-1">
+            <PasswordTextbox
+              id="confirmPassword"
+              v-model="confirmPassword"
+              :error-message="confirmPasswordErrorMessage"
+            />
+          </div>
+        </div>
+        <div class="flex justify-center">
+          <PrimaryButton text="次へ" @click="onSignupRegister" />
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
diff --git a/src/views/SignupView.vue b/src/views/SignupView.vue
index aeaf190..4e45fe9 100644
--- a/src/views/SignupView.vue
+++ b/src/views/SignupView.vue
@@ -1,8 +1,59 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import EmailTextbox from '@/components/Controls/Textbox/EmailTextbox.vue'
+import PrimaryButton from '@/components/Controls/PrimaryButton.vue'
+import OAuthButton from '@/components/Controls/OAuthButton.vue'
+
+const emailAddress = ref('')
+const router = useRouter()
+async function onEmailSignup() {
+  try {
+    const response = await fetch(`${import.meta.env.VITE_API_BASE_URL}/signup/request`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ email: emailAddress.value })
+    })
+    if (response.status === 201) {
+      router.push('/signup/after-mail')
+    } else if (response.status === 400) {
+      alert('不正なリクエストです　メールアドレスの形式を確認してください')
+    }
+    else {
+      alert(response.status)
+    }
+  } catch (error) {
+    console.error('Signup Error:', error)
+    alert('Signup Error:' + error)
+  }
+}
+</script>
 
 <template>
-  <div>
-    <h1>Signup</h1>
+  <div
+    class="flex items-center justify-center bg-background-tertiary px-8 py-6"
+    style="height: calc(100vh - 56px)"
+  >
+    <div class="max-w-3xl space-y-5 rounded-2xl bg-white px-14 py-10">
+      <div class="fontstyle-ui-title text-left">新規登録</div>
+      <div class="flex divide-x divide-border-secondary">
+        <div class="flex-1 space-y-3 p-2.5 pr-4">
+            <OAuthButton app="Github" mode="signup" class="w-full" />
+            <OAuthButton app="Google" mode="signup" class="w-full" />
+            <OAuthButton app="traQ" mode="signup" class="w-full" />
+        </div>
+        <div class="flex-1 space-y-3 p-2.5 pl-4">
+            <div class="fontstyle-ui-body-strong text-left">メールアドレスで新規登録</div>
+            <EmailTextbox v-model="emailAddress" placeholder="メールアドレス" />
+            <PrimaryButton text="次へ" class="w-full" @click="onEmailSignup" />
+            <div class="fontstyle-ui-caption-link text-left">
+              <a href="login">すでにアカウントをお持ちの場合</a>
+            </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
diff --git a/vite.config.ts b/vite.config.ts
index 5c45e1d..030a165 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,6 +1,7 @@
 import { fileURLToPath, URL } from 'node:url'
 
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite';
+
 import vue from '@vitejs/plugin-vue'
 
 // https://vitejs.dev/config/