diff --git a/assets/api.ts b/assets/api.ts
index ae730d5..1140647 100644
--- a/assets/api.ts
+++ b/assets/api.ts
@@ -23,7 +23,10 @@ export interface IEntry {
   id: string
   list: string[]
   reading: string[]
-  audio: string[]
+  audio: {
+    mimetype?: string
+    url: string
+  }[]
   translation: string[]
   type: IType
   description: string
@@ -215,21 +218,6 @@ class Api {
     })
   }
 
-  async character_getRadical(params: { entry: string }) {
-    return await this.axios
-      .get('/api/character/radical', { params })
-      .then(
-        (r) =>
-          r.data as {
-            sub: string[]
-            sup: string[]
-            variant: string[]
-            visual: string[]
-          }
-      )
-      .catch(() => null)
-  }
-
   async character_getVocabulary(
     params: ILookup<{ entry: string; distinct?: 'id' }>
   ) {
@@ -306,6 +294,31 @@ class Api {
       )
   }
 
+  async all_getComponent(params: { entry: string; type: IType }) {
+    return await this.axios
+      .get('/api/all/components', { params })
+      .then(
+        (r) =>
+          r.data as {
+            sub: string[]
+            sup: string[]
+            variant: string[]
+            visual: {
+              entry: string
+            }[]
+            amalgamation: {
+              entry: string
+              type?: IType
+            }[]
+            component: {
+              entry: string
+              type?: IType
+            }[]
+          }
+      )
+      .catch(() => null)
+  }
+
   async all_tokenize(params: { entry: string }) {
     return await this.axios
       .get('/api/all/tokenize', {
diff --git a/components/tabs/CharacterTab.vue b/components/tabs/LookupTab.vue
similarity index 90%
rename from components/tabs/CharacterTab.vue
rename to components/tabs/LookupTab.vue
index d13701e..71ca4bf 100644
--- a/components/tabs/CharacterTab.vue
+++ b/components/tabs/LookupTab.vue
@@ -276,16 +276,15 @@
 <script lang="ts">
 import { Component, Prop, Ref, Vue, Watch } from 'nuxt-property-decorator'
 import ContextMenu from '@/components/ContextMenu.vue'
-import { api, IEntry } from '~/assets/api'
+import { api, IEntry, IType } from '~/assets/api'
+import { capitalize } from '~/assets/util'
 
-const TITLE = 'Kanji'
-
-@Component<CharacterTab>({
+@Component<LookupTab>({
   components: {
     ContextMenu,
   },
   async created() {
-    this.$emit('title', TITLE)
+    this.$emit('title', this.title)
 
     this.q = this.query.q || ''
 
@@ -294,29 +293,48 @@ const TITLE = 'Kanji'
     }
   },
 })
-export default class CharacterTab extends Vue {
+export default class LookupTab extends Vue {
   @Prop({ default: () => ({}) }) query!: {
     q?: string
+    entry?: string
   }
 
+  @Prop() type!: 'character' | 'vocabulary'
+
   @Ref() context!: ContextMenu
 
+  title = this.type === 'character' ? 'Kanji' : capitalize(this.type)
+
   entries: string[] = []
   i = 0
 
   sub: string[] = []
   sup: string[] = []
   variant: string[] = []
-  visual: string[] = []
+
+  visual: {
+    entry: string
+  }[] = []
+  amalgamation: {
+    entry: string
+    type?: IType
+  }[] = []
+  component: {
+    entry: string
+    type?: IType
+  }[] = []
+
+  lookup: Record<IType, IEntry[]> = {
+    character: [],
+    vocabulary: [],
+    sentence: [],
+  }
 
   reading: string[] = []
   translation: string[] = []
   tag: string[] = []
   level = 0
 
-  vocabulary_lookup: IEntry[] = []
-  sentence_lookup: IEntry[] = []
-
   selected: {
     entry: string
     type: string
@@ -359,7 +377,7 @@ export default class CharacterTab extends Vue {
 
   @Watch('q')
   async onQChange(q: string) {
-    this.$emit('title', (q ? q + ' - ' : '') + TITLE)
+    this.$emit('title', (q ? q + ' - ' : '') + this.title)
 
     if (/\p{sc=Han}/u.test(q)) {
       const qs = q.split('').filter((h) => /\p{sc=Han}/u.test(h))
@@ -390,14 +408,21 @@ export default class CharacterTab extends Vue {
       this.sub = []
       this.sup = []
       this.variant = []
+
       this.visual = []
+      this.amalgamation = []
+      this.component = []
+
+      this.lookup = {
+        character: [],
+        vocabulary: [],
+        sentence: [],
+      }
 
       this.reading = []
       this.translation = []
       this.tag = []
       this.level = 0
-      this.vocabulary_lookup = []
-      this.sentence_lookup = []
     }
   }
 
@@ -416,21 +441,25 @@ export default class CharacterTab extends Vue {
 
     await Promise.all([
       (async () => {
-        const r = await api.character_getRadical({
+        const r = await api.all_getComponent({
           entry: this.current,
+          type: this.type,
         })
 
         this.sub = r?.sub || []
         this.sup = r?.sup || []
         this.variant = r?.variant || []
+
         this.visual = r?.visual || []
+        this.amalgamation = r?.amalgamation || []
+        this.component = r?.component || []
       })(),
       (async () => {
         const {
           result: [r],
         } = await api.all_getLookup({
           entry: this.current,
-          type: 'character',
+          type: this.type,
           limit: 1,
         })
 
@@ -443,8 +472,8 @@ export default class CharacterTab extends Vue {
   }
 
   async loadVocab() {
-    if (!/^\p{sc=Han}$/u.test(this.current)) {
-      this.vocabulary_lookup = []
+    if (this.type === 'character' && !/^\p{sc=Han}$/u.test(this.current)) {
+      this.lookup.vocabulary = []
       return
     }
 
@@ -453,7 +482,7 @@ export default class CharacterTab extends Vue {
       distinct: 'id',
     })
 
-    this.vocabulary_lookup = await Promise.all(
+    this.lookup.vocabulary = await Promise.all(
       result
         .map((r) =>
           api
@@ -465,8 +494,8 @@ export default class CharacterTab extends Vue {
   }
 
   async loadSentences() {
-    if (!/^\p{sc=Han}$/u.test(this.current)) {
-      this.sentence_lookup = []
+    if (this.type === 'character' && !/^\p{sc=Han}$/u.test(this.current)) {
+      this.lookup.sentence = []
       return
     }
 
@@ -475,7 +504,7 @@ export default class CharacterTab extends Vue {
       distinct: 'id',
     })
 
-    this.vocabulary_lookup = await Promise.all(
+    this.lookup.vocabulary = await Promise.all(
       result
         .map((r) =>
           api