diff --git a/front/components/SideBar.vue b/front/components/SideBar.vue
index 0882b93e..3d839c70 100644
--- a/front/components/SideBar.vue
+++ b/front/components/SideBar.vue
@@ -150,7 +150,7 @@ async function logout() {
             ></path>
           </svg>
 
-          <span ml-3>{{ $t("about") }}</span>
+          <span ml-3>{{ $t("about.title") }}</span>
         </NuxtLink>
 
         <NuxtLink
@@ -189,7 +189,7 @@ async function logout() {
             ></path>
           </svg>
 
-          <span ml-3>{{ $t("security") }}</span>
+          <span ml-3>{{ $t("security.title") }}</span>
         </NuxtLink>
 
         <NuxtLink
@@ -334,7 +334,7 @@ async function logout() {
             dark:bg-violet-300
             dark:text-violet-900
           >
-            {{ $t("security") }}
+            {{ $t("security.title") }}
           </span>
         </div>
 
diff --git a/front/locales/en-US.json b/front/locales/en-US.json
index 58c61eb5..94dc892c 100644
--- a/front/locales/en-US.json
+++ b/front/locales/en-US.json
@@ -49,7 +49,6 @@
   "optional_information": "Optional information",
   "required_information": "Required information",
 
-  "security": "Security",
   "data": "Data",
   "logout": "Logout",
   "account": "Account",
@@ -84,10 +83,31 @@
     "profile_picture": {
       "title": "Update profile picture",
       "import": "Import a new photo"
+    },
+    "email": {
+      "title": "Update e-mail"
+    },
+    "password": {
+      "title": "Update password"
     }
   },
   "save": "Save",
 
+  "logged_as": "Logged in as {'@'}{vanity}",
+  "access": {
+    "title": "Confirm access",
+    "warn": "You'll be able to change the most crucial information in your account!"
+  },
+  "confirm": "Confirm",
+
+  "connection": "Connection and recovery",
+  "mfa": "Multi-factor authentication",
+  "mfa_soon": "This section will be available soon! It will allow you to add an extra security step during the connection.",
+  "security": {
+    "title": "Security",
+    "description": "Change your account security details."
+  },
+
   "p_policy": "Privacy policy",
   "terms_of_use": "Terms of Use",
   "terms_of_service": "Terms of Service",
diff --git a/front/locales/fr-FR.json b/front/locales/fr-FR.json
index 4fd1fa21..e2d04873 100644
--- a/front/locales/fr-FR.json
+++ b/front/locales/fr-FR.json
@@ -49,7 +49,6 @@
   "optional_information": "Informations facultatives",
   "required_information": "Informations requises",
 
-  "security": "Sécurité",
   "data": "Données",
   "logout": "Se déconnecter",
   "account": "Compte",
@@ -84,10 +83,31 @@
     "profile_picture": {
       "title": "Modifier la photo de profil",
       "import": "Importer une nouvelle photo"
+    },
+    "email": {
+      "title": "Modifier l'adresse e-mail"
+    },
+    "password": {
+      "title": "Modifier le mot de passe"
     }
   },
   "save": "Sauvegarder",
 
+  "logged_as": "Connecté en tant que {'@'}{vanity}",
+  "access": {
+    "title": "Confirmer l'accès",
+    "warn": "Vous allez pouvoir modifier les informations les plus cruciales de votre compte !"
+  },
+  "confirm": "Confirmer",
+
+  "connection": "Connexion et récupération",
+  "mfa": "Authentification à plusieurs étapes",
+  "mfa_soon": "Cette section sera bientôt disponible ! Elle vous permettra d'ajouter une étape de sécurité supplémentaire lors de la connexion.",
+  "security": {
+    "title": "Sécurité",
+    "description": "Modifiez les données relatives à la sécurité de votre compte."
+  },
+
   "p_policy": "Confidentialité",
   "terms_of_use": "Conditions Générales d'Utilisation",
   "terms_of_service": "Conditions d'usage",
diff --git a/front/pages/access.vue b/front/pages/access.vue
new file mode 100644
index 00000000..a4428f2d
--- /dev/null
+++ b/front/pages/access.vue
@@ -0,0 +1,206 @@
+<script setup lang="ts">
+import type { Error, TokenResponse } from "../types/index";
+
+// Define reactive refs for error handling.
+const isError: Record<string, Ref<boolean>> = {
+  invalidToken: ref(false),
+  invalidPassword: ref(false),
+  missingPassword: ref(false),
+  rateLimited: ref(false),
+  internalServerError: ref(false),
+};
+
+// Define reactive refs for user input.
+const token = ref();
+const password = ref("");
+const isButtonDisable = ref(false);
+
+const user = useUser();
+user.fetchUser();
+
+// Redirect to the login page if user is not connected.
+if (useCookie("session").value === "" || user.vanity === "")
+  await navigateTo("/signin");
+
+// Redirect if user have already a password.
+if (typeof user.password === "string" && user.password.length !== 0)
+  await navigateTo("/security");
+
+async function signin() {
+  // Disable button until the end.
+  isButtonDisable.value = true;
+
+  // Set all errors to false before processing the sign-in.
+  for (const key in isError) {
+    isError[key].value = false;
+  }
+
+  // Check if password is missing.
+  if (password.value === "") {
+    isError.missingPassword.value = true;
+    isButtonDisable.value = false;
+    return;
+  }
+
+  // Create headers.
+  const headers: Headers = new Headers();
+  headers.append("Content-Type", "application/json");
+  headers.append("CF-Turnstile-Token", token.value);
+
+  // Make request.
+  const json: Error | TokenResponse = await fetch(
+    `${useRuntimeConfig().public.API_URL}/login`,
+    {
+      method: "post",
+      headers,
+      body: JSON.stringify({
+        email: user.email,
+        password: password.value,
+      }),
+    },
+  )
+    .then((response) => response.json())
+    .catch((_) => (isError.internalServerError.value = true));
+
+  // Re-activate button.
+  isButtonDisable.value = false;
+
+  // Handle error process.
+  if ("error" in json) {
+    if (json.message === "Invalid turnstile token")
+      isError.invalidToken.value = true;
+    else if (json.message === "Invalid password")
+      isError.invalidPassword.value = true;
+    else if (json.message === "You are being rate limited.")
+      isError.rateLimited.value = true;
+    else {
+      /* eslint-disable no-console */
+      console.error(json.message);
+      isError.internalServerError.value = true;
+    }
+
+    // Re-create Turnstile token.
+    token.value?.reset();
+  } else {
+    useCookie("session", {
+      maxAge: 1200000, // Around two weeks.
+      sameSite: "strict",
+      secure: true,
+    }).value = json.token;
+
+    useI18n().setLocale(json.user_settings.locale);
+
+    user.password = password.value;
+
+    await navigateTo("/security");
+  }
+}
+</script>
+
+<template>
+  <!-- Cloudflare Turnstile implementation. -->
+  <NuxtTurnstile v-model="token" />
+
+  <!-- Blurry effect in background. -->
+  <FontBubbles />
+
+  <!-- Banner prevention. -->
+  <Banner :content="$t('access.warn')" :can-close="false" />
+
+  <!-- Centered card containing inputs to connect. -->
+  <div absolute w-96vw h-98vh flex-col container space-y-6>
+    <div
+      class="bg-zinc-50 dark:bg-dark border border-gray-900 w-80 h-18 lg:w-96 container"
+    >
+      <p>{{ $t("logged_as", { vanity: user.vanity }) }}</p>
+    </div>
+
+    <div
+      class="bg-zinc-50 dark:bg-dark border border-gray-900 w-80 h-80 lg:w-96 shadow-lg"
+    >
+      <div mt-6 lg:mt-10 mb-8 lg:mb-10 divide-x space-x-2 container>
+        <NuxtImg
+          alt="Gravitalia"
+          src="/favicon.webp"
+          width="35"
+          height="35"
+          draggable="false"
+        />
+
+        <div class="h-1.5rem bg-zinc-400 w-0.1rem"></div>
+
+        <h3 font-semibold>{{ $t("access.title") }}</h3>
+      </div>
+
+      <div flex-col container>
+        <!-- Errors. -->
+        <LabelError
+          v-if="isError.invalidToken.value"
+          mb-26
+          text="error.security_token"
+        />
+        <LabelError
+          v-if="isError.rateLimited.value"
+          mb-26
+          text="error.rate_limit"
+        />
+        <LabelError
+          v-if="isError.internalServerError.value"
+          mb-26
+          text="something_went_wrong"
+        />
+        <LabelError
+          v-if="isError.missingPassword.value"
+          mb-26
+          text="error.missing_password"
+        />
+        <LabelError
+          v-if="isError.invalidPassword.value"
+          mb-26
+          text="error.invalid_password"
+        />
+
+        <!-- Password input. -->
+        <input
+          v-model="password"
+          :class="
+            isError.invalidPassword.value || isError.missingPassword.value
+              ? 'border-red-500 dark:border-red-500'
+              : ''
+          "
+          input
+          type="password"
+          :placeholder="$t('password')"
+        />
+
+        <!-- No more access. -->
+        <div mt-2 w-64 lg:w-72>
+          <NuxtLink
+            :to="'mailto:' + useRuntimeConfig().email"
+            text-sm
+            text-link
+          >
+            {{ $t("lost_account") }}
+          </NuxtLink>
+        </div>
+      </div>
+
+      <!-- Confirmation button. -->
+      <div flex container>
+        <div w-16.5rem lg:w-18.5rem mt-11>
+          <button
+            font-sans
+            font-medium
+            btn-base
+            w-full
+            type="button"
+            :disabled="isButtonDisable"
+            @click="signin()"
+          >
+            {{ $t("confirm") }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/front/pages/security.vue b/front/pages/security.vue
new file mode 100644
index 00000000..0fead834
--- /dev/null
+++ b/front/pages/security.vue
@@ -0,0 +1,224 @@
+<script setup lang="ts">
+import { useUser } from "../stores/user";
+import type { Error } from "../types/index";
+
+const user = useUser();
+user.fetchUser();
+
+// Redirect to the login page if user is not connected.
+if (useCookie("session").value === "" || user.vanity === "")
+  await navigateTo("/signin");
+
+// Redirect to the security access page if user have not entered password.
+if (typeof user.password !== "string" || user.password.length === 0)
+  await navigateTo("/access");
+
+// Modal manager.
+const modals: Record<string, Ref<boolean>> = {
+  email: ref(false),
+  password: ref(false),
+};
+
+// Modal data.
+const password = ref("");
+const email = ref("");
+const loadingButton = ref(false);
+
+// Error.
+const serverError = ref(false);
+
+async function update() {
+  loadingButton.value = true;
+
+  // Create headers.
+  const headers: Headers = new Headers();
+  headers.append("Content-Type", "application/json");
+  headers.append("Authorization", useCookie("session").value as string);
+
+  // Create body.
+  const body: { [id: string]: string | number[] } = {};
+  body.password = user.password as string;
+
+  await fetch(
+    `${
+      useRuntimeConfig().public?.API_URL ?? "https://oauth.gravitalia.com"
+    }/users/@me`,
+    {
+      method: "PATCH",
+      headers,
+      body: JSON.stringify(body),
+    },
+  )
+    .then((response) => response.json())
+    .then((json: Error) => {
+      if (!json.error) {
+        for (const key of Object.keys(modals)) {
+          modals[key].value = false;
+        }
+      }
+    })
+    .catch((_) => (serverError.value = true));
+
+  loadingButton.value = false;
+}
+</script>
+
+<template>
+  <SideBar />
+
+  <div p-6 sm:ml-64>
+    <div
+      p-3
+      xl:px-16
+      border-2
+      lg:h-90vh
+      border-gray-200
+      border-dashed
+      rounded-lg
+      dark:border-gray-700
+    >
+      <h1>{{ $t("security.title") }}</h1>
+      <p text-zinc-700 mb-3>
+        {{ $t("security.description") }}
+      </p>
+
+      <div w-full justify-between grid grid-cols-1 xl:grid-cols-2>
+        <Card :title="$t('connection')">
+          <div py-8 px-6 xl:px-32>
+            <div bg-white rounded>
+              <!-- Update email. -->
+              <div
+                p-2
+                bg-white
+                hover:bg-zinc-100
+                flex
+                justify-between
+                cursor-pointer
+                @click="
+                  serverError = false;
+                  modals.email.value = true;
+                "
+              >
+                {{ $t("email") }}
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                  stroke="currentColor"
+                  w-6
+                  h-6
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="m8.25 4.5 7.5 7.5-7.5 7.5"
+                  />
+                </svg>
+              </div>
+              <!-- Update password. -->
+              <div
+                p-2
+                bg-white
+                hover:bg-zinc-100
+                flex
+                justify-between
+                cursor-pointer
+                @click="
+                  serverError = false;
+                  modals.password.value = true;
+                "
+              >
+                {{ $t("password") }}
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                  stroke="currentColor"
+                  w-6
+                  h-6
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="m8.25 4.5 7.5 7.5-7.5 7.5"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+        </Card>
+
+        <Card :title="$t('mfa')">
+          <div py-8 px-6 xl:px-32>
+            <p text-zinc-700>{{ $t("mfa_soon") }}</p>
+          </div>
+        </Card>
+      </div>
+    </div>
+  </div>
+
+  <UpdateModal
+    v-if="modals.email.value"
+    :title="$t('update.email.title')"
+    :actual-data="user.email as string"
+    @close="
+      modals.email.value = false;
+      email = '';
+    "
+  >
+    <LabelError v-if="serverError" relative text="something_went_wrong" />
+    <input
+      v-model="email"
+      input
+      w-full
+      :placeholder="$t('email')"
+      type="email"
+      minlength="8"
+      maxlength="32"
+    />
+
+    <button
+      type="button"
+      :disabled="loadingButton || email === user.email"
+      mt-6
+      btn-base
+      w-full
+      @click="update"
+    >
+      {{ $t("save") }}
+    </button>
+  </UpdateModal>
+
+  <UpdateModal
+    v-if="modals.password.value"
+    :title="$t('update.password.title')"
+    @close="
+      modals.password.value = false;
+      password = '';
+    "
+  >
+    <LabelError v-if="serverError" relative text="something_went_wrong" />
+    <input
+      v-model="password"
+      input
+      w-full
+      :placeholder="$t('password')"
+      type="password"
+      minlength="8"
+      maxlength="32"
+    />
+
+    <button
+      type="button"
+      :disabled="loadingButton || password.length < 8 || password.length > 32"
+      mt-6
+      btn-base
+      w-full
+      @click="update"
+    >
+      {{ $t("save") }}
+    </button>
+  </UpdateModal>
+</template>
diff --git a/front/stores/user.ts b/front/stores/user.ts
index cc22e0ca..e37b841b 100644
--- a/front/stores/user.ts
+++ b/front/stores/user.ts
@@ -6,6 +6,7 @@ const EMPTY_USER: User = {
   avatar: null,
   bio: null,
   email: "",
+  password: null,
   verified: false,
   deleted: false,
   flags: 0,
diff --git a/front/types/index.ts b/front/types/index.ts
index 068a9d24..dd4c259e 100644
--- a/front/types/index.ts
+++ b/front/types/index.ts
@@ -12,6 +12,8 @@ export interface User {
   bio: string | null;
   /** @default null */
   email: string | null;
+  /** @default null */
+  password: string | null;
   /** @default false */
   verified: boolean;
   /** @default false */