diff --git a/app.vue b/app.vue
index 5deb6cb..42e4887 100644
--- a/app.vue
+++ b/app.vue
@@ -3,12 +3,11 @@ import type { FormError } from '#ui/types'
 
 const state = reactive<SchemaOptions>({
   url: undefined,
-  headerName: undefined,
-  headerValue: undefined,
+  headers: [],
 })
 
-const hasHeader = ref(false)
 const rawSchema = ref('')
+const errorSchema = ref<Error | null>(null)
 const loading = ref(false)
 
 function validate(state: any): FormError[] {
@@ -16,13 +15,13 @@ function validate(state: any): FormError[] {
   if (!state.url)
     errors.push({ path: 'url', message: 'Required' })
 
-  if (hasHeader.value) {
-    if (!state.headerName)
-      errors.push({ path: 'headerName', message: 'Required' })
+  // if (hasHeader.value) {
+  // if (!state.headerName)
+  //   errors.push({ path: 'headerName', message: 'Required' })
 
-    if (!state.headerValue)
-      errors.push({ path: 'headerValue', message: 'Required' })
-  }
+  // if (!state.headerValue)
+  //   errors.push({ path: 'headerValue', message: 'Required' })
+  // }
 
   return errors
 }
@@ -30,7 +29,8 @@ function validate(state: any): FormError[] {
 async function onSubmit() {
   rawSchema.value = ''
   loading.value = true
-  const { data } = await useAsyncData(() => getSchema(state))
+  const { data, error } = await useAsyncData(() => getSchema(state))
+  errorSchema.value = error.value
   if (!data.value)
     return loading.value = false
 
@@ -38,10 +38,6 @@ async function onSubmit() {
   loading.value = false
 }
 
-const headerValuePlaceholder = computed(
-  () => (Math.random() + 1).toString(36).substring(2),
-)
-
 useHead({
   htmlAttrs: {
     lang: 'en',
@@ -50,8 +46,7 @@ useHead({
 </script>
 
 <template>
-  <Title>Get GraphQL Schema</Title>
-  <Meta name="description" content="Get your GraphQL schema easily" />
+  <AppHead />
 
   <main class="bg-gray-900">
     <div class="max-w-5xl mx-auto min-h-screen px-4 py-8 flex flex-col">
@@ -73,38 +68,55 @@ useHead({
           />
         </UFormGroup>
 
-        <UCheckbox v-model="hasHeader" class="mb-2">
-          <template #label>
-            <span class="text-white">
-              Set an header
-            </span>
-          </template>
-        </UCheckbox>
-        <div v-if="hasHeader" class="relative">
-          <div class="grid sm:grid-cols-2 gap-3">
-            <UFormGroup name="headerName">
-              <UInput
-                v-model="state.headerName"
-                aria-label="Header name"
-                placeholder="Authorization"
-              />
-            </UFormGroup>
-            <UFormGroup name="headerValue">
-              <UInput
-                v-model="state.headerValue"
-                aria-label="Header value"
-                :placeholder="headerValuePlaceholder"
-              />
-            </UFormGroup>
-          </div>
+        <div v-for="item, index in state.headers" :key="index" class="flex gap-3 mb-2">
+          <UFormGroup name="headerName" class="grow">
+            <UInput
+              v-model="item[0]"
+              aria-label="Header name"
+              placeholder="Key"
+            />
+          </UFormGroup>
+          <UFormGroup name="headerValue" class="grow">
+            <UInput
+              v-model="item[1]"
+              aria-label="Header value"
+              placeholder="Value"
+            />
+          </UFormGroup>
+          <UButton
+            icon="i-heroicons-minus"
+            color="white"
+            square
+            variant="solid"
+            aria-label="Remove"
+            @click="state.headers.splice(index, 1)"
+          />
         </div>
-        <UButton :loading="loading" block type="submit" class="mt-4">
+
+        <UButton
+          icon="i-heroicons-plus"
+          color="white"
+          variant="solid"
+          @click="state.headers.push(['', ''])"
+        >
+          Add Header
+        </UButton>
+
+        <UButton :loading="loading" block type="submit" class="mt-5">
           Get my schema
         </UButton>
       </UForm>
 
+      <UAlert
+        v-if="errorSchema"
+        class="mt-12 mb-8"
+        color="primary"
+        variant="solid"
+        title="Error"
+        :description="errorSchema.message"
+      />
       <LazyResult
-        v-if="rawSchema || loading"
+        v-else-if="rawSchema || loading"
         :loading="loading"
         :raw-schema="rawSchema"
       />
diff --git a/bun.lockb b/bun.lockb
index 4311a36..7a30f98 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/components/AppHead.vue b/components/AppHead.vue
new file mode 100644
index 0000000..c6333aa
--- /dev/null
+++ b/components/AppHead.vue
@@ -0,0 +1,11 @@
+<template>
+  <Title>Get GraphQL Schema</Title>
+  <Meta name="description" content="Get your GraphQL schema easily" />
+  <Link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png" />
+  <Link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png" />
+  <Link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png" />
+  <Link rel="manifest" href="/favicons/site.webmanifest" />
+  <Link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#f76fc9" />
+  <Meta name="msapplication-TileColor" content="#111827" />
+  <Meta name="theme-color" content="#111827" />
+</template>
diff --git a/components/Footer.vue b/components/Footer.vue
index 402cab5..240e4d5 100644
--- a/components/Footer.vue
+++ b/components/Footer.vue
@@ -1,5 +1,5 @@
 <template>
-  <footer class="mt-auto">
+  <footer class="mt-auto pt-8">
     <UDivider class="mb-2">
       <ULink to="https://github.com/Applelo/get-graphql-schema">
         <span class="sr-only">
@@ -42,12 +42,6 @@
                 </ULink>
                 by Nuxt Team
               </li>
-              <li>
-                <ULink to="https://github.com/antfu/shikiji" class="text-primary">
-                  Shikiji
-                </ULink>
-                by antfu
-              </li>
             </ul>
           </div>
         </template>
diff --git a/components/Header.server.vue b/components/Header.vue
similarity index 100%
rename from components/Header.server.vue
rename to components/Header.vue
diff --git a/components/Result.vue b/components/Result.vue
index f5a08af..73388d4 100644
--- a/components/Result.vue
+++ b/components/Result.vue
@@ -1,68 +1,88 @@
 <script lang="ts" setup>
-import type { HighlighterCore } from 'shikiji/core'
-
 const props = defineProps<{
   rawSchema: string
   loading: boolean
 }>()
 
-const toast = useToast()
-let shiki: HighlighterCore
-const { copy, isSupported: copySupport } = useClipboard()
+const body = computed(() => {
+  return {
+    schema: props.rawSchema,
+  }
+})
+const selected = ref(0)
+const { data: rawTs, execute: executeGqlToTs } = await useFetch('/api/gql-to-ts', {
+  method: 'POST',
+  body,
+  immediate: false,
+  server: false,
+  watch: false,
+})
 
-async function getShiki() {
-  const shikiji = await import('shikiji/core')
-  const shikijiWasm = await import('shikiji/wasm')
+const items = [{
+  label: 'Schema',
+}, {
+  label: 'Typescript',
+}]
 
-  shiki = await shikiji.getHighlighterCore({
-    themes: [
-      import('shikiji/themes/dracula.mjs'),
-    ],
-    langs: [
-      import('shikiji/langs/typescript.mjs'),
-      import('shikiji/langs/graphql.mjs'),
-    ],
-    loadWasm: shikijiWasm.getWasmInlined,
-  })
-}
+const toast = useToast()
+const { copy, isSupported: copySupport } = useClipboard()
 
-function schemaToClipboard() {
-  copy(props.rawSchema)
-  toast.add({ title: 'Copied', description: 'The schema is in your clipboard!' })
+function codeToClipboard() {
+  if (selected.value === 0) {
+    copy(props.rawSchema)
+    toast.add({
+      title: 'Copied',
+      description: 'The schema is in your clipboard!',
+    })
+  }
+  else if (selected.value === 1 && rawTs.value) {
+    copy(rawTs.value)
+    toast.add({
+      title: 'Copied',
+      description: 'The TypeScript code is in your clipboard!',
+    })
+  }
 }
 
-const htmlSchema = computed(
-  () => shiki.codeToHtml(
-    props.rawSchema,
-    {
-      lang: 'graphql',
-      theme: 'dracula',
-    },
-  ),
-)
-
-onMounted(() => {
-  getShiki()
+watch(selected, async () => {
+  if (selected.value !== 1 || rawTs.value)
+    return
+  await executeGqlToTs()
 })
 </script>
 
 <template>
   <UCard class="mt-12 mb-8">
     <template v-if="rawSchema" #header>
-      <div class="flex justify-end">
+      <div class="flex justify-between items-start gap-4">
+        <UTabs v-model="selected" :items="items" />
         <UTooltip text="Copy to your clipboard">
           <UButton
             v-if="copySupport"
             color="gray"
             square
             icon="i-heroicons-clipboard-document"
-            @click="schemaToClipboard"
+            @click="codeToClipboard"
           />
         </UTooltip>
       </div>
     </template>
-    <div v-if="rawSchema" class="overflow-auto max-h-screen" v-html="htmlSchema" />
-    <div v-else class="text-center flex align-center justify-center">
+    <LazyShiki
+      v-if="rawSchema && selected === 0"
+      lang="graphql"
+      class="max-h-screen overflow-auto"
+      :code="rawSchema"
+    />
+    <LazyShiki
+      v-else-if="rawTs && selected === 1"
+      class="max-h-screen overflow-auto"
+      lang="ts"
+      :code="rawTs"
+    />
+    <div
+      v-else
+      class="text-center flex align-center justify-center"
+    >
       Loading...
     </div>
   </UCard>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 94cd9d4..a87af0c 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -3,9 +3,18 @@ export default defineNuxtConfig({
     '@nuxt/ui',
     '@vueuse/nuxt',
     'nuxt-simple-robots',
+    'nuxt-shiki',
   ],
+  shiki: {
+    defaultTheme: 'dracula',
+    bundledThemes: ['dracula'],
+    bundledLangs: ['typescript', 'graphql'],
+  },
   nitro: {
-    preset: 'vercel-edge',
+    preset: 'vercel',
+    experimental: {
+      wasm: true,
+    },
   },
   ui: {
     icons: [
@@ -16,7 +25,4 @@ export default defineNuxtConfig({
   colorMode: {
     preference: 'dark',
   },
-  experimental: {
-    componentIslands: true,
-  },
 })
diff --git a/package.json b/package.json
index f29ee05..c636a63 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,6 @@
 {
   "type": "module",
+  "version": "1.1.0",
   "private": true,
   "scripts": {
     "build": "nuxt build",
@@ -11,17 +12,26 @@
     "lint:fix": "eslint . --fix"
   },
   "dependencies": {
-    "@iconify-json/simple-icons": "^1.1.80",
-    "@nuxt/ui": "^2.11.0",
-    "@vueuse/core": "^10.6.1",
-    "@vueuse/nuxt": "^10.6.1",
+    "@graphql-codegen/core": "^4.0.2",
+    "@graphql-codegen/typescript": "^4.0.7",
+    "@graphql-codegen/typescript-operations": "^4.2.1",
+    "@iconify-json/simple-icons": "^1.1.103",
+    "@nuxt/ui": "^2.16.0",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@vueuse/core": "^10.10.0",
+    "@vueuse/nuxt": "^10.10.0",
     "graphql": "^16.8.1",
-    "nuxt-simple-robots": "^3.1.9",
-    "shikiji": "^0.7.4"
+    "nuxt": "^3.11.2",
+    "nuxt-shiki": "^0.3.0",
+    "nuxt-simple-robots": "4.0.0-rc.17"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^2.1.0",
-    "eslint": "^8.54.0",
-    "nuxt": "^3.8.2"
+    "@antfu/eslint-config": "^2.19.1",
+    "eslint": "^9.3.0"
+  },
+  "pnpm": {
+    "patchedDependencies": {
+      "graphql@16.8.1": "patches/graphql@16.8.1.patch"
+    }
   }
 }
diff --git a/patches/graphql@16.8.1.patch b/patches/graphql@16.8.1.patch
new file mode 100644
index 0000000..ce8fbc7
--- /dev/null
+++ b/patches/graphql@16.8.1.patch
@@ -0,0 +1,55 @@
+diff --git a/jsutils/instanceOf.mjs b/jsutils/instanceOf.mjs
+index 0f05267868f359e37e7790329d0609c6761af70a..85c2644f34b9e52dc7f188f5d2aa73eea637023e 100644
+--- a/jsutils/instanceOf.mjs
++++ b/jsutils/instanceOf.mjs
+@@ -6,47 +6,6 @@ import { inspect } from './inspect.mjs';
+  * See: https://webpack.js.org/guides/production/
+  */
+ 
+-export const instanceOf =
+-  /* c8 ignore next 6 */
+-  // FIXME: https://github.com/graphql/graphql-js/issues/2317
+-  globalThis.process && globalThis.process.env.NODE_ENV === 'production'
+-    ? function instanceOf(value, constructor) {
+-        return value instanceof constructor;
+-      }
+-    : function instanceOf(value, constructor) {
+-        if (value instanceof constructor) {
+-          return true;
+-        }
+-
+-        if (typeof value === 'object' && value !== null) {
+-          var _value$constructor;
+-
+-          // Prefer Symbol.toStringTag since it is immune to minification.
+-          const className = constructor.prototype[Symbol.toStringTag];
+-          const valueClassName = // We still need to support constructor's name to detect conflicts with older versions of this library.
+-            Symbol.toStringTag in value // @ts-expect-error TS bug see, https://github.com/microsoft/TypeScript/issues/38009
+-              ? value[Symbol.toStringTag]
+-              : (_value$constructor = value.constructor) === null ||
+-                _value$constructor === void 0
+-              ? void 0
+-              : _value$constructor.name;
+-
+-          if (className === valueClassName) {
+-            const stringifiedValue = inspect(value);
+-            throw new Error(`Cannot use ${className} "${stringifiedValue}" from another module or realm.
+-
+-Ensure that there is only one instance of "graphql" in the node_modules
+-directory. If different versions of "graphql" are the dependencies of other
+-relied on modules, use "resolutions" to ensure only one version is installed.
+-
+-https://yarnpkg.com/en/docs/selective-version-resolutions
+-
+-Duplicate "graphql" modules cannot be used at the same time since different
+-versions may have different capabilities and behavior. The data from one
+-version used in the function from another could produce confusing and
+-spurious results.`);
+-          }
+-        }
+-
+-        return false;
+-      };
++export const instanceOf = function instanceOf(value, constructor) {
++  return value instanceof constructor
++}
diff --git a/public/favicons/android-chrome-192x192.png b/public/favicons/android-chrome-192x192.png
new file mode 100644
index 0000000..5eb5183
Binary files /dev/null and b/public/favicons/android-chrome-192x192.png differ
diff --git a/public/favicons/android-chrome-512x512.png b/public/favicons/android-chrome-512x512.png
new file mode 100644
index 0000000..30b73f9
Binary files /dev/null and b/public/favicons/android-chrome-512x512.png differ
diff --git a/public/favicons/apple-touch-icon.png b/public/favicons/apple-touch-icon.png
new file mode 100644
index 0000000..a17c060
Binary files /dev/null and b/public/favicons/apple-touch-icon.png differ
diff --git a/public/favicons/browserconfig.xml b/public/favicons/browserconfig.xml
new file mode 100644
index 0000000..adaf46f
--- /dev/null
+++ b/public/favicons/browserconfig.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#111827</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
diff --git a/public/favicons/favicon-16x16.png b/public/favicons/favicon-16x16.png
new file mode 100644
index 0000000..4c1206e
Binary files /dev/null and b/public/favicons/favicon-16x16.png differ
diff --git a/public/favicons/favicon-32x32.png b/public/favicons/favicon-32x32.png
new file mode 100644
index 0000000..d35a7e6
Binary files /dev/null and b/public/favicons/favicon-32x32.png differ
diff --git a/public/favicons/favicon.ico b/public/favicons/favicon.ico
new file mode 100644
index 0000000..fdc1111
Binary files /dev/null and b/public/favicons/favicon.ico differ
diff --git a/public/favicons/mstile-144x144.png b/public/favicons/mstile-144x144.png
new file mode 100644
index 0000000..46b37e9
Binary files /dev/null and b/public/favicons/mstile-144x144.png differ
diff --git a/public/favicons/mstile-150x150.png b/public/favicons/mstile-150x150.png
new file mode 100644
index 0000000..f620328
Binary files /dev/null and b/public/favicons/mstile-150x150.png differ
diff --git a/public/favicons/mstile-310x150.png b/public/favicons/mstile-310x150.png
new file mode 100644
index 0000000..3d53bf8
Binary files /dev/null and b/public/favicons/mstile-310x150.png differ
diff --git a/public/favicons/mstile-310x310.png b/public/favicons/mstile-310x310.png
new file mode 100644
index 0000000..d691872
Binary files /dev/null and b/public/favicons/mstile-310x310.png differ
diff --git a/public/favicons/mstile-70x70.png b/public/favicons/mstile-70x70.png
new file mode 100644
index 0000000..8dd68c4
Binary files /dev/null and b/public/favicons/mstile-70x70.png differ
diff --git a/public/favicons/safari-pinned-tab.svg b/public/favicons/safari-pinned-tab.svg
new file mode 100644
index 0000000..dd991da
--- /dev/null
+++ b/public/favicons/safari-pinned-tab.svg
@@ -0,0 +1,62 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="700.000000pt" height="700.000000pt" viewBox="0 0 700.000000 700.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.14, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,700.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M3435 6962 c-94 -10 -220 -59 -297 -115 -52 -37 -119 -109 -160 -171
+-78 -120 -107 -279 -84 -453 5 -41 4 -63 -2 -63 -9 0 -344 -192 -1154 -661
+l-257 -149 -37 34 c-51 46 -132 94 -212 124 -117 44 -325 38 -427 -11 -16 -8
+-46 -22 -65 -31 -102 -47 -228 -187 -276 -306 -27 -68 -54 -205 -48 -249 1
+-14 5 -48 8 -75 23 -211 197 -423 408 -495 l53 -18 0 -823 0 -823 -40 -13
+c-149 -50 -291 -170 -358 -304 -173 -343 -8 -747 356 -871 92 -32 250 -35 347
+-8 91 25 168 65 240 124 32 26 58 41 64 36 6 -4 36 -22 66 -38 30 -17 197
+-112 370 -213 173 -100 331 -191 350 -202 19 -11 51 -29 70 -40 96 -56 350
+-203 385 -223 22 -13 69 -40 105 -61 l65 -39 -11 -55 c-36 -180 27 -400 153
+-535 91 -98 230 -174 350 -191 342 -50 645 163 711 501 10 48 6 210 -6 243 -8
+23 -7 33 1 40 7 6 140 84 297 175 157 90 330 190 385 222 115 67 270 156 335
+193 25 14 74 42 109 64 34 21 64 38 66 38 1 0 52 29 113 64 l110 64 48 -40
+c256 -211 616 -194 843 41 160 166 215 411 141 626 -60 176 -209 325 -382 384
+l-53 18 0 823 0 823 53 18 c167 57 322 208 376 369 27 80 38 144 38 216 -1
+237 -133 447 -346 549 -50 24 -113 48 -139 53 -70 14 -203 13 -272 -3 -80 -19
+-193 -76 -255 -129 l-52 -44 -86 50 c-48 28 -105 61 -127 73 -22 13 -123 71
+-225 130 -102 59 -207 120 -235 136 -27 15 -193 110 -367 211 -174 101 -331
+191 -349 201 -31 17 -31 18 -23 75 31 228 -25 409 -172 556 -130 130 -322 198
+-499 178z m-371 -1065 c-1 -8 -60 -116 -131 -239 -71 -123 -210 -362 -308
+-533 -98 -170 -185 -321 -194 -335 -9 -14 -21 -34 -27 -45 -6 -11 -64 -112
+-129 -225 -65 -113 -169 -294 -231 -402 -63 -108 -122 -210 -131 -227 -10 -17
+-68 -117 -129 -223 -143 -248 -261 -452 -409 -708 -65 -113 -123 -214 -129
+-225 -26 -48 -46 -69 -56 -59 -7 7 -9 284 -8 828 l3 817 73 30 c202 81 344
+254 383 466 11 56 7 186 -6 249 l-7 31 344 198 c188 109 440 255 558 323 118
+69 231 133 250 144 19 11 87 50 150 88 63 37 120 67 125 65 6 -1 9 -9 9 -18z
+m1067 -83 c101 -59 211 -122 244 -141 33 -18 67 -38 75 -43 8 -6 71 -42 140
+-82 69 -39 152 -87 185 -106 33 -19 78 -45 100 -57 22 -13 141 -82 265 -154
+215 -124 225 -131 222 -158 -9 -88 -10 -235 0 -278 11 -56 74 -198 104 -235
+83 -106 189 -182 312 -224 l37 -13 0 -823 c0 -598 -3 -824 -11 -827 -9 -3
+-296 482 -534 902 -34 60 -222 385 -240 415 -5 8 -50 87 -101 175 -50 88 -113
+197 -140 241 -27 45 -49 84 -49 87 0 3 -17 34 -38 68 -22 35 -50 84 -64 109
+-14 25 -49 86 -78 135 -29 50 -64 110 -78 135 -13 25 -28 50 -32 55 -5 6 -19
+30 -32 55 -14 25 -51 90 -83 145 -103 178 -381 659 -394 683 -10 19 -8 42 3
+42 2 0 86 -48 187 -106z m-618 -80 c51 2 108 7 127 11 l35 7 134 -234 c74
+-128 191 -330 259 -448 69 -118 134 -231 144 -250 11 -19 35 -60 53 -90 18
+-30 44 -75 57 -100 14 -25 106 -184 205 -355 99 -170 191 -330 205 -355 14
+-25 175 -304 358 -620 183 -316 343 -595 357 -620 14 -25 28 -49 32 -55 4 -5
+19 -30 33 -55 l26 -46 -34 -39 c-47 -53 -100 -145 -120 -206 -12 -35 -22 -50
+-38 -53 -11 -3 -852 -4 -1868 -4 l-1846 1 -6 28 c-9 49 -67 155 -116 216 l-48
+60 18 29 c9 16 135 234 280 484 144 250 279 484 300 520 153 261 360 624 360
+631 0 5 5 9 10 9 6 0 10 5 10 11 0 6 22 48 48 93 43 70 283 487 340 586 10 19
+58 102 106 183 47 82 86 153 86 158 0 5 5 9 10 9 6 0 10 4 10 10 0 5 36 70 80
+146 44 75 80 138 80 140 0 3 11 21 24 42 13 20 42 69 65 109 l41 71 45 -14
+c30 -8 79 -12 138 -10z m1855 -3820 c-2 -9 -120 -83 -263 -166 -292 -169 -261
+-151 -490 -283 -93 -54 -228 -132 -300 -173 -198 -114 -265 -153 -319 -182
+l-49 -27 -58 46 c-121 97 -253 142 -402 137 -101 -4 -130 -9 -197 -33 -69 -26
+-130 -61 -186 -109 l-52 -44 -241 140 c-133 77 -260 150 -284 164 -39 22 -177
+102 -684 395 -118 68 -213 129 -213 137 0 12 273 14 1871 14 1700 0 1870 -1
+1867 -16z"/>
+</g>
+</svg>
diff --git a/public/favicons/site.webmanifest b/public/favicons/site.webmanifest
new file mode 100644
index 0000000..f97df12
--- /dev/null
+++ b/public/favicons/site.webmanifest
@@ -0,0 +1,18 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#111827",
+    "background_color": "#111827"
+}
diff --git a/server/api/gql-to-ts.post.ts b/server/api/gql-to-ts.post.ts
new file mode 100644
index 0000000..2db0746
--- /dev/null
+++ b/server/api/gql-to-ts.post.ts
@@ -0,0 +1,31 @@
+import { parse } from 'graphql'
+import { codegen } from '@graphql-codegen/core'
+import * as typescriptPlugin from '@graphql-codegen/typescript'
+import * as typescriptOperation from '@graphql-codegen/typescript-operations'
+
+export default defineEventHandler(async (event) => {
+  const { schema } = await readBody(event)
+
+  const plugins = [
+    typescriptPlugin,
+    typescriptOperation,
+  ]
+  const pluginMap: Record<number, any> = {}
+
+  plugins.forEach((plugin, i) => {
+    pluginMap[i + 1] = plugin
+  })
+
+  const result = await codegen({
+    filename: 'a.dts',
+    schema: parse(schema),
+    documents: [],
+    plugins: plugins.map((_plugin, i) => ({
+      [i + 1]: {},
+    })),
+    pluginMap,
+    config: {},
+  })
+
+  return result
+})
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 107ced6..f074d99 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,7 +1,17 @@
 import type { Config } from 'tailwindcss'
+import colors from 'tailwindcss/colors'
 
 export default <Partial<Config>>{
   theme: {
+    colors: {
+      transparent: 'transparent',
+      current: 'currentColor',
+      black: colors.black,
+      white: colors.white,
+      gray: colors.gray,
+      red: colors.red,
+      green: colors.green,
+    },
     extend: {
       colors: {
         cerise: {
@@ -17,7 +27,6 @@ export default <Partial<Config>>{
           900: '#851653',
           950: '#52052f',
         },
-
       },
     },
   },
diff --git a/utils/schema.ts b/utils/schema.ts
index f6fb27f..eec4b52 100644
--- a/utils/schema.ts
+++ b/utils/schema.ts
@@ -4,8 +4,7 @@ import type {
 
 export interface SchemaOptions {
   url?: string
-  headerName?: string
-  headerValue?: string
+  headers: string[][]
 }
 
 export async function getSchema(opts: SchemaOptions) {
@@ -13,17 +12,21 @@ export async function getSchema(opts: SchemaOptions) {
     return
   const { getIntrospectionQuery } = await import('graphql/utilities/getIntrospectionQuery')
   const introspectionQuery = getIntrospectionQuery()
-  const headers: Record<string, string> = {}
-
-  if (opts.headerName && opts.headerValue)
-    headers[opts.headerName] = opts.headerValue
 
-  const { data } = await $fetch<{ data: IntrospectionQuery }>(opts.url, {
-    method: 'POST',
-    headers,
-    body: JSON.stringify({ query: introspectionQuery }),
+  const headers: Record<string, string> = {}
+  opts.headers.forEach((header) => {
+    headers[header[0]] = header[1]
   })
 
+  const { data } = await $fetch<{ data: IntrospectionQuery }>(
+    opts.url,
+    {
+      method: 'POST',
+      headers,
+      body: JSON.stringify({ query: introspectionQuery }),
+    },
+  )
+
   const { buildClientSchema } = await import('graphql/utilities/buildClientSchema')
   const schema = buildClientSchema(data)
   const { printSchema } = await import('graphql/utilities/printSchema')