diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml
new file mode 100644
index 0000000..03eed36
--- /dev/null
+++ b/.github/workflows/codeql.yml
@@ -0,0 +1,92 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: "CodeQL"
+
+on:
+  push:
+    branches: [ "master" ]
+  pull_request:
+    branches: [ "master" ]
+  schedule:
+    - cron: '24 11 * * 6'
+
+jobs:
+  analyze:
+    name: Analyze (${{ matrix.language }})
+    # Runner size impacts CodeQL analysis time. To learn more, please see:
+    #   - https://gh.io/recommended-hardware-resources-for-running-codeql
+    #   - https://gh.io/supported-runners-and-hardware-resources
+    #   - https://gh.io/using-larger-runners (GitHub.com only)
+    # Consider using larger runners or machines with greater resources for possible analysis time improvements.
+    runs-on: ${{ (matrix.language == 'swift' && 'macos-latest') || 'ubuntu-latest' }}
+    permissions:
+      # required for all workflows
+      security-events: write
+
+      # required to fetch internal or private CodeQL packs
+      packages: read
+
+      # only required for workflows in private repositories
+      actions: read
+      contents: read
+
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+        - language: javascript-typescript
+          build-mode: none
+        # CodeQL supports the following values keywords for 'language': 'c-cpp', 'csharp', 'go', 'java-kotlin', 'javascript-typescript', 'python', 'ruby', 'swift'
+        # Use `c-cpp` to analyze code written in C, C++ or both
+        # Use 'java-kotlin' to analyze code written in Java, Kotlin or both
+        # Use 'javascript-typescript' to analyze code written in JavaScript, TypeScript or both
+        # To learn more about changing the languages that are analyzed or customizing the build mode for your analysis,
+        # see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/customizing-your-advanced-setup-for-code-scanning.
+        # If you are analyzing a compiled language, you can modify the 'build-mode' for that language to customize how
+        # your codebase is analyzed, see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/codeql-code-scanning-for-compiled-languages
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v3
+      with:
+        languages: ${{ matrix.language }}
+        build-mode: ${{ matrix.build-mode }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file.
+        # Prefix the list here with "+" to use these queries and those in the config file.
+
+        # For more details on CodeQL's query packs, refer to: https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
+        # queries: security-extended,security-and-quality
+
+    # If the analyze step fails for one of the languages you are analyzing with
+    # "We were unable to automatically build your code", modify the matrix above
+    # to set the build mode to "manual" for that language. Then modify this step
+    # to build your code.
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
+    - if: matrix.build-mode == 'manual'
+      shell: bash
+      run: |
+        echo 'If you are using a "manual" build mode for one or more of the' \
+          'languages you are analyzing, replace this with the commands to build' \
+          'your code, for example:'
+        echo '  make bootstrap'
+        echo '  make release'
+        exit 1
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v3
+      with:
+        category: "/language:${{matrix.language}}"
diff --git a/src/app/login/login-by-phone/login-by-phone.component.html b/src/app/login/login-by-phone/login-by-phone.component.html
index 0a47d57..aa41f49 100644
--- a/src/app/login/login-by-phone/login-by-phone.component.html
+++ b/src/app/login/login-by-phone/login-by-phone.component.html
@@ -1,4 +1,4 @@
-<ng-container *ngIf="!codeReady">
+<form *ngIf="!codeReady" (ngSubmit)="sendConfirmation()">
   <mat-form-field>
     <mat-label> 電話番号 </mat-label>
     <input
@@ -15,16 +15,15 @@
       mat-flat-button
       color="primary"
       id="send-confirmation"
-      (click)="sendConfirmation()"
       [disabled]="isSent"
     >
       <mat-icon>textsms</mat-icon>
       確認コードを送信
     </button>
   </div>
-</ng-container>
+</form>
 
-<ng-container *ngIf="codeReady">
+<form *ngIf="codeReady" (ngSubmit)="confirmCode()">
   <mat-form-field>
     <mat-label> 確認コード </mat-label>
     <input
@@ -40,14 +39,9 @@
     <button mat-stroked-button color="primary" (click)="codeReady = false">
       キャンセル
     </button>
-    <button
-      mat-flat-button
-      color="primary"
-      (click)="confirmCode()"
-      [disabled]="isSent"
-    >
+    <button mat-flat-button color="primary" [disabled]="isSent">
       <mat-icon>login</mat-icon>
       ログイン
     </button>
   </div>
-</ng-container>
+</form>
diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
index 7546cda..13ac47a 100644
--- a/src/app/login/login.component.html
+++ b/src/app/login/login.component.html
@@ -1,5 +1,7 @@
 <mat-card>
-  <mat-card-title>ログイン</mat-card-title>
+  <mat-card-header>
+    <mat-card-title>ログイン</mat-card-title>
+  </mat-card-header>
 
   <mat-card-content>
     <mat-tab-group
diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts
index 52b1911..fda2013 100644
--- a/src/app/login/login.component.ts
+++ b/src/app/login/login.component.ts
@@ -1,9 +1,9 @@
 import { AfterViewInit, Component, ViewChild } from '@angular/core';
-import { MatTabGroup, MatTab } from '@angular/material/tabs';
+import { MatCard, MatCardContent, MatCardHeader, MatCardTitle } from '@angular/material/card';
+import { MatTab, MatTabGroup } from '@angular/material/tabs';
 import { LocalStorageService } from 'ngx-webstorage';
 import { LoginByEmailComponent } from './login-by-email/login-by-email.component';
 import { LoginByPhoneComponent } from './login-by-phone/login-by-phone.component';
-import { MatCard, MatCardTitle, MatCardContent } from '@angular/material/card';
 
 @Component({
     selector: 'app-login',
@@ -13,6 +13,7 @@ import { MatCard, MatCardTitle, MatCardContent } from '@angular/material/card';
     imports: [
         MatCard,
         MatCardTitle,
+        MatCardHeader,
         MatCardContent,
         MatTabGroup,
         MatTab,