diff --git a/package-lock.json b/package-lock.json
index faecdd4..88ec24c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,8 +16,10 @@
         "@angular/platform-browser": "^18.2.0",
         "@angular/platform-browser-dynamic": "^18.2.0",
         "@angular/router": "^18.2.0",
+        "ngx-typeahead": "^18.0.0",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
+        "wanakana": "^5.3.1",
         "zone.js": "~0.14.10"
       },
       "devDependencies": {
@@ -9948,6 +9950,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/ngx-typeahead": {
+      "version": "18.0.0",
+      "resolved": "https://registry.npmjs.org/ngx-typeahead/-/ngx-typeahead-18.0.0.tgz",
+      "integrity": "sha512-nPL+vOunFi+vzenAu6KzzEucm/uXBmjv/KpL+IAzJADwWxRxJQluNg7TVD8Uhyr84mLNYqeiHFV2uZRBYaFmqw==",
+      "dependencies": {
+        "tslib": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@angular/common": "^18.0.0",
+        "@angular/core": "^18.0.0"
+      }
+    },
     "node_modules/nice-napi": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/nice-napi/-/nice-napi-1.0.2.tgz",
@@ -13652,6 +13666,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/wanakana": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/wanakana/-/wanakana-5.3.1.tgz",
+      "integrity": "sha512-OSDqupzTlzl2LGyqTdhcXcl6ezMiFhcUwLBP8YKaBIbMYW1wAwDvupw2T9G9oVaKT9RmaSpyTXjxddFPUcFFIw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.1.tgz",
diff --git a/package.json b/package.json
index c02ed50..c6670bb 100644
--- a/package.json
+++ b/package.json
@@ -18,8 +18,10 @@
     "@angular/platform-browser": "^18.2.0",
     "@angular/platform-browser-dynamic": "^18.2.0",
     "@angular/router": "^18.2.0",
+    "ngx-typeahead": "^18.0.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
+    "wanakana": "^5.3.1",
     "zone.js": "~0.14.10"
   },
   "devDependencies": {
diff --git a/src/components/main/main.component.css b/src/components/main/main.component.css
index e69de29..92a78ba 100644
--- a/src/components/main/main.component.css
+++ b/src/components/main/main.component.css
@@ -0,0 +1,7 @@
+form {
+  overflow: unset;
+}
+
+::ng-deep .ta-item {
+  background: var(--contrast);
+}
diff --git a/src/components/main/main.component.html b/src/components/main/main.component.html
index 6511fe6..1f026ed 100644
--- a/src/components/main/main.component.html
+++ b/src/components/main/main.component.html
@@ -14,20 +14,17 @@
     <legend>Song information</legend>
     <label class="width">
       Title
-      <input type="search" list="songList" name="songTitle" formControlName="title">
-      <datalist id="songList">
-        @for (song of songs; track song.id) {
-          <option [value]="song.title">{{ song.title }}</option>
-        }
-      </datalist>
+      <input type="text" autocomplete="off" name="songTitle" formControlName="title" ngxTypeahead [taList]="songs"
+             taListItemLabel="label" [taListItemField]="['title', 'romajiTitle']" (taSelected)="onSelectedSong($event)"
+             [value]="selectedSong?.title">
     </label>
     @if (selectedSong) {
       <fieldset class="flex space-around">
         <legend>Difficulty</legend>
-        @for (chart of selectedSongCharts; track chart.difficulty){
+        @for (chart of selectedSongCharts; track chart.difficulty) {
           <label>
             <input type="radio" [value]="chart.difficulty" formControlName="difficulty">
-            {{chart.difficulty}} ({{chart.level}})
+            {{ chart.difficulty }} ({{ chart.level }})
           </label>
         }
       </fieldset>
@@ -104,7 +101,7 @@
   </fieldset>
 </form>
 
-@if(scores.length){
+@if (scores.length) {
   <h1>Summary</h1>
   <table>
     <thead>
@@ -118,21 +115,21 @@ <h1>Summary</h1>
     </tr>
     </thead>
     <tbody>
-      @for(score of scores; track $index){
+      @for (score of scores; track $index) {
         <tr>
-          <td>{{getSongTitle(score.identifier)}}</td>
-          <td>{{score.difficulty}} ({{getChartLevel(score.identifier, score.difficulty)}})</td>
-          <td>{{score.score}}</td>
-          <td>{{score.lamp}}</td>
-          <td>{{score.optional?.flare}}</td>
+          <td>{{ getSongTitle(score.identifier) }}</td>
+          <td>{{ score.difficulty }} ({{ getChartLevel(score.identifier, score.difficulty) }})</td>
+          <td>{{ score.score }}</td>
+          <td>{{ score.lamp }}</td>
+          <td>{{ score.optional?.flare }}</td>
           <td>
-            @if(!!score.judgements){
-              <span class="success">{{score.judgements.MARVELOUS}}</span> -
-              <span class="attention">{{score.judgements.PERFECT}}</span> -
-              <span class="severe">{{score.judgements.GREAT}}</span> -
-              <span class="accent">{{score.judgements.GOOD}}</span> -
-              <span class="default">{{score.judgements.OK}}</span> -
-              <span class="danger">{{score.judgements.MISS}}</span>
+            @if (!!score.judgements) {
+              <span class="success">{{ score.judgements.MARVELOUS }}</span> -
+              <span class="attention">{{ score.judgements.PERFECT }}</span> -
+              <span class="severe">{{ score.judgements.GREAT }}</span> -
+              <span class="accent">{{ score.judgements.GOOD }}</span> -
+              <span class="default">{{ score.judgements.OK }}</span> -
+              <span class="danger">{{ score.judgements.MISS }}</span>
             }
           </td>
         </tr>
diff --git a/src/components/main/main.component.ts b/src/components/main/main.component.ts
index dd23cbb..a0463d7 100644
--- a/src/components/main/main.component.ts
+++ b/src/components/main/main.component.ts
@@ -5,12 +5,15 @@ import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/
 import {Chart} from "../../model/Chart";
 import {Score, TachiImport} from "../../model/TachiImport";
 import {pairwise, startWith} from "rxjs";
+import {isRomaji, tokenize, toRomaji} from "wanakana";
+import {NgxTypeAheadComponent} from "ngx-typeahead";
 
 @Component({
   selector: 'app-main',
   standalone: true,
   imports: [
     ReactiveFormsModule,
+    NgxTypeAheadComponent,
   ],
   templateUrl: './main.component.html',
   styleUrl: './main.component.css',
@@ -45,9 +48,18 @@ export class MainComponent {
   });
 
   constructor(private route: ActivatedRoute) {
-    this.songs = this.route.snapshot.data['songs'].sort((a: Song, b: Song) => {
-      const titleA = a.title.toUpperCase(); // ignore upper and lowercase
-      const titleB = b.title.toUpperCase(); // ignore upper and lowercase
+    this.songs = this.route.snapshot.data['songs'].map((song: Song) => {
+      song.romajiTitle = tokenize(song.title).map((token: any) => toRomaji(token)).join(' ');
+      if(!isRomaji(song.title)){
+        song.label = song.title + " [" + song.romajiTitle + "]"
+      }
+      else{
+        song.label = song.title;
+      }
+      return song;
+    }).sort((a: Song, b: Song) => {
+      const titleA = a.romajiTitle.toUpperCase(); // ignore upper and lowercase
+      const titleB = b.romajiTitle.toUpperCase(); // ignore upper and lowercase
       if (titleA < titleB) {
         return -1;
       }
@@ -59,11 +71,6 @@ export class MainComponent {
       return 0;
     });
     this.charts = this.route.snapshot.data['charts'];
-    this.group.controls.title.valueChanges.subscribe((change) => {
-      if (change) {
-        this.onSelectedSong(change)
-      }
-    });
     this.playstyle.valueChanges.pipe(startWith("SP"), pairwise())
       .subscribe(([prev, next]: [any, any]) => {
         console.log(prev, next);
@@ -88,8 +95,8 @@ export class MainComponent {
     this.selectedSongCharts = undefined;
   }
 
-  onSelectedSong(selectedSongTitle: string) {
-    this.selectedSong = this.songs.filter(song => song.title === selectedSongTitle).pop();
+  onSelectedSong(selectedSong: Song) {
+    this.selectedSong = selectedSong;
     if(this.selectedSong) {
       this.selectedSongCharts = this.charts.filter(chart => chart.songID === this.selectedSong?.id && chart.playtype === this.playstyle.value).sort((a, b) => +a.level - +b.level);
     }
diff --git a/src/model/Song.ts b/src/model/Song.ts
index 5c47a17..28f5811 100644
--- a/src/model/Song.ts
+++ b/src/model/Song.ts
@@ -2,4 +2,6 @@ export interface Song {
   artist: string;
   id: string;
   title: string;
+  romajiTitle: string;
+  label: string;
 }
diff --git a/src/styles.css b/src/styles.css
index dd3e7eb..129fe49 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,2 +1,5 @@
 /* You can add global styles to this file, and also import other style files */
 
+button .list-group-item {
+  background: var(--contrast) !important;
+}