diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs
index 7ea737c..5001104 100644
--- a/src-tauri/src/main.rs
+++ b/src-tauri/src/main.rs
@@ -156,7 +156,6 @@ fn search(index: i64) -> SearchResult {
     };
     learnset.push(row_result)
   }
-  println!("Get Thing2");
   let query = "SELECT * FROM pokemon WHERE id = ?";
   for row in connection
     .prepare(query)
diff --git a/src/App.svelte b/src/App.svelte
index 12a32d3..568c4c6 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,19 +1,26 @@
 <script lang="ts">
+  import { invoke } from "@tauri-apps/api/tauri";
   import MainWrapper from "./lib/MainWrapper.svelte";
   import DamageCalculator from "./lib/DamageCalculator.svelte";
   import "carbon-components-svelte/css/g80.css";
-  let player1Data;
-  let player2Data;
-  let attackId;
+  import type { ItemData } from "./model/ItemData";
+  import type { PokemonStatus } from "./model/PokemonStatus";
+  let items: ItemData[] = [];
+  let player1Data: PokemonStatus | undefined;
+  let player2Data: PokemonStatus | undefined;
+  let attackId: number | undefined;
+  invoke("get_items").then((r: ItemData[]) => {
+    items = r;
+  });
 </script>
 
 <main class="container">
   <div class="main-row">
     <div class="column-1">
-      <MainWrapper bind:pokemonStatus={player1Data} bind:attackId/>
+      <MainWrapper bind:pokemonStatus={player1Data} bind:attackId {items} />
     </div>
     <div class="column-2">
-      <MainWrapper bind:pokemonStatus={player2Data} bind:attackId />
+      <MainWrapper bind:pokemonStatus={player2Data} bind:attackId {items} />
     </div>
   </div>
   <div class="row">
diff --git a/src/lib/DamageCalculator.svelte b/src/lib/DamageCalculator.svelte
index f7c2727..2229bc0 100644
--- a/src/lib/DamageCalculator.svelte
+++ b/src/lib/DamageCalculator.svelte
@@ -2,10 +2,10 @@
   import { invoke } from "@tauri-apps/api/tauri";
   import AutoComplete from "simple-svelte-autocomplete";
   import attack_types from "../const/attack_types.json";
-  import type { PokemonData } from "../model/PokemonStatus";
+  import type { PokemonStatus } from "../model/PokemonStatus";
 
-  export let player1Data: PokemonData | undefined;
-  export let player2Data: PokemonData | undefined;
+  export let player1Data: PokemonStatus | undefined;
+  export let player2Data: PokemonStatus | undefined;
   export let attackId: number | undefined;
   let attackData;
   $: {
@@ -394,6 +394,7 @@
           bind:value={myValue}
         />
       </td>
+      <td>{ attackData ? attackData.name : "" }</td>
       <td>
         <input type="button" value="Calculate" on:click={calculate_damage} />
       </td>
diff --git a/src/lib/DisplayData.svelte b/src/lib/DisplayData.svelte
index e5ea9cd..4b2648c 100644
--- a/src/lib/DisplayData.svelte
+++ b/src/lib/DisplayData.svelte
@@ -1,11 +1,13 @@
 <script lang="ts">
   import defense_types from "../const/defense_types.json";
-  import type { PokemonDBData } from "src/model/PokemonData";
+  import type { PokemonData } from "src/model/PokemonData";
+  import type { ItemData } from "../model/ItemData";
   import { Accordion, AccordionItem } from "carbon-components-svelte";
   import PhysicalIcon from "../assets/buturi.png";
   import SpecialIcon from "../assets/tokushu.png";
   import BuffIcon from "../assets/henka.png";
-  export let pokemonData: PokemonDBData | undefined;
+  export let items: ItemData[];
+  export let pokemonData: PokemonData | undefined;
   export let attackId: number | undefined;
   function v_validator(v) {
     if (typeof v !== "number") {
@@ -64,6 +66,9 @@
     return d;
   }
   $: {
+    if (terastype[0] !== selected_terastype) {
+      selected_terastype = terastype[0];
+    }
     // validator
     level = level_validator(level);
     hp_v = v_validator(hp_v);
@@ -291,7 +296,7 @@
   export let spdef_final = 0;
   export let spd_final = 0;
   export let terastype = [0];
-  export let item = 0;
+  export let item;
   let level = 50;
   let selected_terastype = 0;
   let selected_item = 0;
@@ -326,13 +331,13 @@
         <AccordionItem open title="基本情報">
           <table class="pokemon-data">
             <tr>
-              <td rowspan="4" class="picture"
-                ><img
+              <td rowspan="4" class="picture">
+                <img
                   src={`data:image/png;base64,${pokemonData.thumbnail}`}
                   alt={pokemonData.name}
-                  width="85%"
-                /></td
-              >
+                  width="100%"
+                />
+              </td>
               <td class="pokemon-title">名前</td>
               <td class="pokemon-name">{pokemonData.name}</td>
             </tr>
@@ -366,6 +371,11 @@
                   on:change={() => (item = selected_item)}
                 >
                   <option value={0}> なし </option>
+                  {#each items as item}
+                    <option value={item.id}>
+                      {item.name}
+                    </option>
+                  {/each}
                 </select>
               </td>
             </tr>
diff --git a/src/lib/MainWrapper.svelte b/src/lib/MainWrapper.svelte
index d33b10c..094aaa0 100644
--- a/src/lib/MainWrapper.svelte
+++ b/src/lib/MainWrapper.svelte
@@ -2,13 +2,32 @@
   import { invoke } from "@tauri-apps/api/tauri";
   import AutoComplete from "simple-svelte-autocomplete";
   import DisplayData from "./DisplayData.svelte";
-  import type { PokemonData } from "../model/PokemonStatus";
-  import type { PokemonDBData } from "src/model/PokemonData";
+  import type { PokemonStatus } from "../model/PokemonStatus";
+  import type { PokemonDBData, PokemonData } from "src/model/PokemonData";
+  import type { ItemData, ItemEffect } from "../model/ItemData";
   $: {
     if (myValue > 0 && myValue !== currentValue) {
-      invoke("search", { index: myValue }).then((r) => {
+      invoke("search", { index: myValue }).then((r: PokemonDBData) => {
         currentValue = myValue;
-        pokemonData = r as PokemonDBData;
+        pokemonData = {
+          id: r.id,
+          name: r.name,
+          types: r.types,
+          thumbnail: r.thumbnail,
+          abilities: r.abilities,
+          hp: r.hp,
+          attack: r.attack,
+          defense: r.defense,
+          special_attack: r.special_attack,
+          special_defense: r.special_defense,
+          speed: r.speed,
+          learnset: r.learnset,
+          item: 0,
+          terastype: [0],
+        };
+        item = 0;
+        terastype = [0];
+        pokemonDataArray[index] = pokemonData;
         console.log(pokemonData);
       });
     }
@@ -21,13 +40,17 @@
       spatk: spatk_final,
       spdef: spdef_final,
       spd: spd_final,
+      item: item,
     };
     console.log(pokemonStatus);
   }
   export let attackId: number | undefined;
+  export let items: ItemData[];
   let myValue;
+  let index = 0;
   let currentValue = 0;
-  let pokemonData: PokemonDBData | undefined;
+  let pokemonData: PokemonData | undefined;
+  let pokemonDataArray: PokemonData[] = [];
   let terastype = [0];
   let hp_final = 0;
   let atk_final = 0;
@@ -35,7 +58,8 @@
   let spatk_final = 0;
   let spdef_final = 0;
   let spd_final = 0;
-  export let pokemonStatus: PokemonData = {
+  let item = 0;
+  export let pokemonStatus: PokemonStatus = {
     types: [],
     terastype: [0],
     hp: 0,
@@ -44,6 +68,7 @@
     spatk: 0,
     spdef: 0,
     spd: 0,
+    item: 0,
   };
   async function getItems(keyword) {
     try {
@@ -70,23 +95,93 @@
     />
   </div>
   <div class="row-display">
-    <DisplayData
-      {pokemonData}
-      bind:terastype
-      bind:hp_final
-      bind:atk_final
-      bind:def_final
-      bind:spatk_final
-      bind:spdef_final
-      bind:spd_final
-      bind:attackId
-    />
+    <div class="pokemon-button-div">
+      <table class="button-table">
+        {#each [0, 1, 2, 3, 4, 5] as i}
+        <tr>
+          <td>
+            <!-- svelte-ignore a11y-click-events-have-key-events -->
+            <div class="pokemon-button {i % 2 === 0 ? "odd" : "even"}" on:click={() => {
+              index = i;
+              pokemonData = pokemonDataArray[i];
+            }}>
+              {#if pokemonDataArray[i]}
+                <img
+                  src={`data:image/png;base64,${pokemonDataArray[i].thumbnail}`}
+                  alt={pokemonDataArray[i].name}
+                  width="15%"
+                />
+                {pokemonDataArray[i].name}
+              {:else}
+              No Pokemon
+              {/if}
+            </div>
+          </td>
+        </tr>
+        {/each}
+      </table>
+    </div>
+    <div class="display-data">
+      <DisplayData
+        {pokemonData}
+        bind:terastype
+        bind:hp_final
+        bind:atk_final
+        bind:def_final
+        bind:spatk_final
+        bind:spdef_final
+        bind:spd_final
+        bind:attackId
+        bind:item
+        {items}
+      />
+    </div>
   </div>
 </div>
 
 <style>
   .row-display {
-    height: 755px;
+    height: 759px;
+    display: flex;
+  }
+  .button-table {
+    width: 200px;
+  }
+  .pokemon-button-div {
+    width: 200px;
+    border-right: 2px solid white;
+  }
+  .display-data {
+    width: 800px;
+    height: 759px;
     overflow-y: scroll;
   }
-</style>
\ No newline at end of file
+  .pokemon-button { 
+    padding: 10px;
+    border-top-left-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;  
+    height: 50px;  
+  }
+  .odd {
+    color: black;
+    background-color: azure;
+  }
+  .odd:hover {
+    color: black;
+    background-color:aquamarine;
+    transition: background-color 1s ease;
+    cursor: pointer;
+  }
+  .even {
+    color: black;
+    background-color: beige;
+  }
+  .even:hover {
+    color: black;
+    background-color:burlywood;
+    transition: background-color 1s ease;
+    cursor: pointer;
+  }
+</style>
diff --git a/src/model/ItemData.ts b/src/model/ItemData.ts
new file mode 100644
index 0000000..6401a4c
--- /dev/null
+++ b/src/model/ItemData.ts
@@ -0,0 +1,16 @@
+export interface ItemData {
+  id: number;
+  name: string;
+  image: string;
+  effect?: ItemEffect,
+}
+
+export interface ItemEffect {
+  attack?: number;
+  defense?: number;
+  special_attack?: number;
+  special_defense?: number;
+  speed?: number;
+  condition?: string;
+  type?: number;
+}
\ No newline at end of file
diff --git a/src/model/PokemonData.ts b/src/model/PokemonData.ts
index bd11278..18d05df 100644
--- a/src/model/PokemonData.ts
+++ b/src/model/PokemonData.ts
@@ -12,6 +12,22 @@ export interface PokemonDBData {
   speed: number;
   learnset: PokemonLearnsetDBData[];
 };
+export interface PokemonData {
+  id: number;
+  name: string;
+  types: string;
+  thumbnail: string;
+  abilities: string;
+  hp: number;
+  attack: number;
+  defense: number;
+  special_attack: number;
+  special_defense: number;
+  speed: number;
+  learnset: PokemonLearnsetDBData[];
+  item: number;
+  terastype: number[];
+};
 export interface PokemonLearnsetDBData {
   id: number;
   learnset_id: number;
diff --git a/src/model/PokemonStatus.ts b/src/model/PokemonStatus.ts
index 397b89e..30bb873 100644
--- a/src/model/PokemonStatus.ts
+++ b/src/model/PokemonStatus.ts
@@ -1,4 +1,6 @@
-export interface PokemonData {
+import type { ItemEffect } from "./ItemData";
+
+export interface PokemonStatus {
   types: number[],
   terastype: number[],
   hp: number,
@@ -6,5 +8,6 @@ export interface PokemonData {
   def: number,
   spatk: number,
   spdef: number,
-  spd: number  
+  spd: number,
+  item: number,
 };