diff --git a/client/.env.development b/client/.env.development
index 310be51..9b6dc7a 100644
--- a/client/.env.development
+++ b/client/.env.development
@@ -1 +1,2 @@
-NEXT_PUBLIC_API_PATH=/api
\ No newline at end of file
+NEXT_PUBLIC_API_PATH=/api
+RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED=false
diff --git a/client/global.d.ts b/client/global.d.ts
index 178935c..6023355 100644
--- a/client/global.d.ts
+++ b/client/global.d.ts
@@ -339,3 +339,121 @@ interface Metadata {
   matchId: string;
   participants: string[];
 }
+
+interface Champion {
+  version: string;
+  id: string;
+  key: string;
+  name: string;
+  title: string;
+  blurb: string;
+  info: Info;
+  image: Image;
+  tags: string[];
+  partype: string;
+  stats: Stat;
+}
+
+interface Image {
+  full: string;
+  sprite: string;
+  group: string;
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
+interface Info {
+  attack: number;
+  defense: number;
+  magic: number;
+  difficulty: number;
+}
+
+interface Stat {
+  hp: number;
+  hpperlevel: number;
+  mp: number;
+  mpperlevel: number;
+  movespeed: number;
+  armor: number;
+  armorperlevel: number;
+  spellblock: number;
+  spellblockperlevel: number;
+  attackrange: number;
+  hpregen: number;
+  hpregenperlevel: number;
+  mpregen: number;
+  mpregenperlevel: number;
+  crit: number;
+  critperlevel: number;
+  attackdamage: number;
+  attackdamageperlevel: number;
+  attackspeedperlevel: number;
+  attackspeed: number;
+}
+
+interface ChampionDdragonResponse {
+  type: string;
+  format: string;
+  version: string;
+  data: Champions;
+}
+
+type RuneDdragonResponse = RuneStyle[];
+
+interface RuneStyle {
+  id: number;
+  key: string;
+  icon: string;
+  name: string;
+  slots: RuneSlot[];
+}
+
+interface RuneSlot {
+  runes: Rune[];
+}
+
+interface Rune {
+  id: number;
+  key: string;
+  icon: string;
+  name: string;
+  shortDesc: string;
+  longDesc: string;
+}
+
+interface SummonerDdragonResponse {
+  type: string;
+  version: string;
+  data: Spells;
+}
+
+interface Spell {
+  id: string;
+  name: string;
+  description: string;
+  tooltip: string;
+  maxrank: number;
+  cooldown: number[];
+  cooldownBurn: string;
+  cost: number[];
+  costBurn: string;
+  datavalues: {};
+  effect: Array<number[] | null>;
+  effectBurn: Array<null | string>;
+  vars: any[];
+  key: string;
+  summonerLevel: number;
+  modes: string[];
+  costType: string;
+  maxammo: string;
+  range: number[];
+  rangeBurn: string;
+  image: Image;
+  resource: string;
+}
+
+type Champions = { [key: string]: Champion };
+type Spells = { [key: string]: Spell };
diff --git a/client/package.json b/client/package.json
index 796c44c..4bb2a86 100644
--- a/client/package.json
+++ b/client/package.json
@@ -20,6 +20,7 @@
     "next": "13.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "recoil": "^0.7.6",
     "typescript": "4.9.4"
   },
   "devDependencies": {
diff --git a/client/pages/_app.tsx b/client/pages/_app.tsx
index e09ddfd..017989b 100644
--- a/client/pages/_app.tsx
+++ b/client/pages/_app.tsx
@@ -1,11 +1,14 @@
 import '../styles/globals.css';
 import type { AppProps } from 'next/app';
 import GlobalThemeProvider from '../styles/GlobalThemeContext';
+import { RecoilRoot } from 'recoil';
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
     <GlobalThemeProvider>
-      <Component {...pageProps} />
+      <RecoilRoot>
+        <Component {...pageProps} />
+      </RecoilRoot>
     </GlobalThemeProvider>
   );
 }
diff --git a/client/states/ddragon.ts b/client/states/ddragon.ts
new file mode 100644
index 0000000..ebb328f
--- /dev/null
+++ b/client/states/ddragon.ts
@@ -0,0 +1,33 @@
+import { atom, selector } from 'recoil';
+import { getChampionDdragon, getRuneDdragon, getSummonerDdragon } from '../utils/ddragon';
+
+export const ddragonVersion = atom<string>({
+  key: 'ddragonVersion',
+  default: '12.23.1',
+});
+
+export const ddragonRegion = atom<string>({
+  key: 'ddragonRegion',
+  default: 'ko_KR',
+});
+
+export const ddragonChampions = selector<Champions>({
+  key: 'ddragonChampions',
+  get: async ({ get }) => {
+    return (await getChampionDdragon(get(ddragonVersion), get(ddragonRegion))).data;
+  },
+});
+
+export const ddragonRunes = selector<RuneStyle[]>({
+  key: 'ddragonRunes',
+  get: async ({ get }) => {
+    return await getRuneDdragon(get(ddragonVersion), get(ddragonRegion));
+  },
+});
+
+export const ddragonSpells = selector<Spells>({
+  key: 'ddragonSpells',
+  get: async ({ get }) => {
+    return (await getSummonerDdragon(get(ddragonVersion), get(ddragonRegion))).data;
+  },
+});
diff --git a/client/utils/ddragon.ts b/client/utils/ddragon.ts
new file mode 100644
index 0000000..2810348
--- /dev/null
+++ b/client/utils/ddragon.ts
@@ -0,0 +1,50 @@
+import axios from 'axios';
+
+export const ddragonAxiosInstance = axios.create({
+  baseURL: 'https://ddragon.leagueoflegends.com/cdn/',
+});
+
+export const getChampionDdragon = async (
+  version: string,
+  region: string,
+): Promise<ChampionDdragonResponse> => {
+  return await (
+    await ddragonAxiosInstance.get(`${version}/data/${region}/champion.json`)
+  ).data;
+};
+
+export const getRuneDdragon = async (
+  version: string,
+  region: string,
+): Promise<RuneDdragonResponse> => {
+  return await (
+    await ddragonAxiosInstance.get(`${version}/data/${region}/runesReforged.json`)
+  ).data;
+};
+
+export const getSummonerDdragon = async (
+  version: string,
+  region: string,
+): Promise<SummonerDdragonResponse> => {
+  return await (
+    await ddragonAxiosInstance.get(`${version}/data/${region}/summoner.json`)
+  ).data;
+};
+
+export function runeStyleIdToIcon(runeStyles: RuneStyle[], style: number): string {
+  return runeStyles.find((e) => e.id === style)?.icon || 'perk-images/Styles/RunesIcon.png';
+}
+
+export function runeIdToIcon(runeStyles: RuneStyle[], style: number, id: number): string {
+  return (
+    runeStyles.find((e) => e.id === style)?.slots[0].runes.find((e) => e.id === id)?.icon ||
+    'perk-images/Styles/RunesIcon.png'
+  );
+}
+
+export function spellIdToIcon(spells: Spells, id: number): string {
+  return spells[
+    Object.keys(spells).find((k) => spells[k].key === id.toString()) ||
+      'Summoner_UltBookPlaceholder'
+  ].image.full;
+}
diff --git a/client/yarn.lock b/client/yarn.lock
index a763f25..83ebcc5 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -2504,6 +2504,11 @@ grapheme-splitter@^1.0.4:
   resolved "https://registry.yarnpkg.com/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz#9cf3a665c6247479896834af35cf1dbb4400767e"
   integrity sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==
 
+hamt_plus@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/hamt_plus/-/hamt_plus-1.0.2.tgz#e21c252968c7e33b20f6a1b094cd85787a265601"
+  integrity sha512-t2JXKaehnMb9paaYA7J0BX8QQAY8lwfQ9Gjf4pg/mk4krt+cmwmU652HOoWonf+7+EQV97ARPMhhVgU1ra2GhA==
+
 has-bigints@^1.0.1, has-bigints@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.2.tgz#0871bd3e3d51626f6ca0966668ba35d5602d6eaa"
@@ -3159,6 +3164,13 @@ react@18.2.0:
   dependencies:
     loose-envify "^1.1.0"
 
+recoil@^0.7.6:
+  version "0.7.6"
+  resolved "https://registry.yarnpkg.com/recoil/-/recoil-0.7.6.tgz#75297ecd70bbfeeb72e861aa6141a86bb6dfcd5e"
+  integrity sha512-hsBEw7jFdpBCY/tu2GweiyaqHKxVj6EqF2/SfrglbKvJHhpN57SANWvPW+gE90i3Awi+A5gssOd3u+vWlT+g7g==
+  dependencies:
+    hamt_plus "1.0.2"
+
 regenerate-unicode-properties@^10.1.0:
   version "10.1.0"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.0.tgz#7c3192cab6dd24e21cb4461e5ddd7dd24fa8374c"