diff --git a/package-lock.json b/package-lock.json
index f257f63..968a096 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,6 +5,7 @@
   "packages": {
     "": {
       "dependencies": {
+        "@apollo/client": "^3.4.7",
         "axios": "^0.21.1",
         "dayjs": "^1.10.5",
         "highlight.js": "^11.0.0",
@@ -21,6 +22,46 @@
         "typescript": "^4.0.0"
       }
     },
+    "node_modules/@apollo/client": {
+      "version": "3.4.7",
+      "resolved": "https://registry.npmjs.org/@apollo/client/-/client-3.4.7.tgz",
+      "integrity": "sha512-EmqGxXD8hr05cIFWJFwtGXifc+Lo8hTCEuiaQMtKknHszJfqIFXSxqP+H+eJnjfuoxH74aTSsZKtJlnE83Vt6w==",
+      "dependencies": {
+        "@graphql-typed-document-node/core": "^3.0.0",
+        "@wry/context": "^0.6.0",
+        "@wry/equality": "^0.5.0",
+        "@wry/trie": "^0.3.0",
+        "graphql-tag": "^2.12.3",
+        "hoist-non-react-statics": "^3.3.2",
+        "optimism": "^0.16.1",
+        "prop-types": "^15.7.2",
+        "symbol-observable": "^4.0.0",
+        "ts-invariant": "^0.9.0",
+        "tslib": "^2.3.0",
+        "zen-observable-ts": "^1.1.0"
+      },
+      "peerDependencies": {
+        "graphql": "^14.0.0 || ^15.0.0",
+        "react": "^16.8.0 || ^17.0.0",
+        "subscriptions-transport-ws": "^0.9.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "subscriptions-transport-ws": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@graphql-typed-document-node/core": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@graphql-typed-document-node/core/-/core-3.1.0.tgz",
+      "integrity": "sha512-wYn6r8zVZyQJ6rQaALBEln5B1pzxb9shV5Ef97kTvn6yVGrqyXVnDqnU24MXnFubR+rZjBY9NWuxX3FB2sTsjg==",
+      "peerDependencies": {
+        "graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0"
+      }
+    },
     "node_modules/@rollup/pluginutils": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.1.1.tgz",
@@ -119,6 +160,44 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/zen-observable": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/@types/zen-observable/-/zen-observable-0.8.3.tgz",
+      "integrity": "sha512-fbF6oTd4sGGy0xjHPKAt+eS2CrxJ3+6gQ3FGcBoIJR2TLAyCkCyI8JqZNy+FeON0AhVgNJoUumVoZQjBFUqHkw=="
+    },
+    "node_modules/@wry/context": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/@wry/context/-/context-0.6.1.tgz",
+      "integrity": "sha512-LOmVnY1iTU2D8tv4Xf6MVMZZ+juIJ87Kt/plMijjN20NMAXGmH4u8bS1t0uT74cZ5gwpocYueV58YwyI8y+GKw==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@wry/equality": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/@wry/equality/-/equality-0.5.2.tgz",
+      "integrity": "sha512-oVMxbUXL48EV/C0/M7gLVsoK6qRHPS85x8zECofEZOVvxGmIPLA9o5Z27cc2PoAyZz1S2VoM2A7FLAnpfGlneA==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@wry/trie": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@wry/trie/-/trie-0.3.1.tgz",
+      "integrity": "sha512-WwB53ikYudh9pIorgxrkHKrQZcCqNM/Q/bDzZBffEaGUKGuHrRb3zZUT9Sh2qw9yogC7SsdRmQ1ER0pqvd3bfw==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -421,6 +500,29 @@
         "node": ">= 6"
       }
     },
+    "node_modules/graphql": {
+      "version": "15.5.1",
+      "resolved": "https://registry.npmjs.org/graphql/-/graphql-15.5.1.tgz",
+      "integrity": "sha512-FeTRX67T3LoE3LWAxxOlW2K3Bz+rMYAC18rRguK4wgXaTZMiJwSUwDmPFo3UadAKbzirKIg5Qy+sNJXbpPRnQw==",
+      "peer": true,
+      "engines": {
+        "node": ">= 10.x"
+      }
+    },
+    "node_modules/graphql-tag": {
+      "version": "2.12.5",
+      "resolved": "https://registry.npmjs.org/graphql-tag/-/graphql-tag-2.12.5.tgz",
+      "integrity": "sha512-5xNhP4063d16Pz3HBtKprutsPrmHZi5IdUGOWRxA2B6VF7BIRGOHZ5WQvDmJXZuPcBg7rYwaFxvQYjqkSdR3TQ==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "graphql": "^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0"
+      }
+    },
     "node_modules/has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -450,6 +552,14 @@
         "node": ">=12.0.0"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -536,6 +646,11 @@
         "node": ">=0.12.0"
       }
     },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+    },
     "node_modules/kleur": {
       "version": "4.1.4",
       "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.4.tgz",
@@ -550,6 +665,17 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.25.7",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
@@ -622,6 +748,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -631,6 +765,15 @@
         "wrappy": "1"
       }
     },
+    "node_modules/optimism": {
+      "version": "0.16.1",
+      "resolved": "https://registry.npmjs.org/optimism/-/optimism-0.16.1.tgz",
+      "integrity": "sha512-64i+Uw3otrndfq5kaoGNoY7pvOhSsjFEN4bdEFh80MWVk/dbgJfMv7VFDeCT8LxNAlEVhQmdVEbfE7X2nWNIIg==",
+      "dependencies": {
+        "@wry/context": "^0.6.0",
+        "@wry/trie": "^0.3.0"
+      }
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -688,6 +831,21 @@
         "url": "https://opencollective.com/postcss/"
       }
     },
+    "node_modules/prop-types": {
+      "version": "15.7.2",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
+      "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.8.1"
+      }
+    },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -917,6 +1075,14 @@
         }
       }
     },
+    "node_modules/symbol-observable": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-4.0.0.tgz",
+      "integrity": "sha512-b19dMThMV4HVFynSAM1++gBHAbk2Tc/osgLIBZMKsyqh34jb2e8Os7T6ZW/Bt3pJFdBTd2JwAnAAEQV7rSNvcQ==",
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -929,11 +1095,21 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/ts-invariant": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/ts-invariant/-/ts-invariant-0.9.1.tgz",
+      "integrity": "sha512-hSeYibh29ULlHkuEfukcoiyTct+s2RzczMLTv4x3NWC/YrBy7x7ps5eYq/b4Y3Sb9/uAlf54+/5CAEMVxPhuQw==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/tslib": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
-      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
-      "dev": true
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
     },
     "node_modules/typescript": {
       "version": "4.3.5",
@@ -974,9 +1150,48 @@
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
       "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
       "dev": true
+    },
+    "node_modules/zen-observable": {
+      "version": "0.8.15",
+      "resolved": "https://registry.npmjs.org/zen-observable/-/zen-observable-0.8.15.tgz",
+      "integrity": "sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ=="
+    },
+    "node_modules/zen-observable-ts": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/zen-observable-ts/-/zen-observable-ts-1.1.0.tgz",
+      "integrity": "sha512-1h4zlLSqI2cRLPJUHJFL8bCWHhkpuXkF+dbGkRaWjgDIG26DmzyshUMrdV/rL3UnR+mhaX4fRq8LPouq0MYYIA==",
+      "dependencies": {
+        "@types/zen-observable": "0.8.3",
+        "zen-observable": "0.8.15"
+      }
     }
   },
   "dependencies": {
+    "@apollo/client": {
+      "version": "3.4.7",
+      "resolved": "https://registry.npmjs.org/@apollo/client/-/client-3.4.7.tgz",
+      "integrity": "sha512-EmqGxXD8hr05cIFWJFwtGXifc+Lo8hTCEuiaQMtKknHszJfqIFXSxqP+H+eJnjfuoxH74aTSsZKtJlnE83Vt6w==",
+      "requires": {
+        "@graphql-typed-document-node/core": "^3.0.0",
+        "@wry/context": "^0.6.0",
+        "@wry/equality": "^0.5.0",
+        "@wry/trie": "^0.3.0",
+        "graphql-tag": "^2.12.3",
+        "hoist-non-react-statics": "^3.3.2",
+        "optimism": "^0.16.1",
+        "prop-types": "^15.7.2",
+        "symbol-observable": "^4.0.0",
+        "ts-invariant": "^0.9.0",
+        "tslib": "^2.3.0",
+        "zen-observable-ts": "^1.1.0"
+      }
+    },
+    "@graphql-typed-document-node/core": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@graphql-typed-document-node/core/-/core-3.1.0.tgz",
+      "integrity": "sha512-wYn6r8zVZyQJ6rQaALBEln5B1pzxb9shV5Ef97kTvn6yVGrqyXVnDqnU24MXnFubR+rZjBY9NWuxX3FB2sTsjg==",
+      "requires": {}
+    },
     "@rollup/pluginutils": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.1.1.tgz",
@@ -1049,6 +1264,35 @@
         "@types/node": "*"
       }
     },
+    "@types/zen-observable": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/@types/zen-observable/-/zen-observable-0.8.3.tgz",
+      "integrity": "sha512-fbF6oTd4sGGy0xjHPKAt+eS2CrxJ3+6gQ3FGcBoIJR2TLAyCkCyI8JqZNy+FeON0AhVgNJoUumVoZQjBFUqHkw=="
+    },
+    "@wry/context": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/@wry/context/-/context-0.6.1.tgz",
+      "integrity": "sha512-LOmVnY1iTU2D8tv4Xf6MVMZZ+juIJ87Kt/plMijjN20NMAXGmH4u8bS1t0uT74cZ5gwpocYueV58YwyI8y+GKw==",
+      "requires": {
+        "tslib": "^2.3.0"
+      }
+    },
+    "@wry/equality": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/@wry/equality/-/equality-0.5.2.tgz",
+      "integrity": "sha512-oVMxbUXL48EV/C0/M7gLVsoK6qRHPS85x8zECofEZOVvxGmIPLA9o5Z27cc2PoAyZz1S2VoM2A7FLAnpfGlneA==",
+      "requires": {
+        "tslib": "^2.3.0"
+      }
+    },
+    "@wry/trie": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@wry/trie/-/trie-0.3.1.tgz",
+      "integrity": "sha512-WwB53ikYudh9pIorgxrkHKrQZcCqNM/Q/bDzZBffEaGUKGuHrRb3zZUT9Sh2qw9yogC7SsdRmQ1ER0pqvd3bfw==",
+      "requires": {
+        "tslib": "^2.3.0"
+      }
+    },
     "ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -1266,6 +1510,20 @@
         "is-glob": "^4.0.1"
       }
     },
+    "graphql": {
+      "version": "15.5.1",
+      "resolved": "https://registry.npmjs.org/graphql/-/graphql-15.5.1.tgz",
+      "integrity": "sha512-FeTRX67T3LoE3LWAxxOlW2K3Bz+rMYAC18rRguK4wgXaTZMiJwSUwDmPFo3UadAKbzirKIg5Qy+sNJXbpPRnQw==",
+      "peer": true
+    },
+    "graphql-tag": {
+      "version": "2.12.5",
+      "resolved": "https://registry.npmjs.org/graphql-tag/-/graphql-tag-2.12.5.tgz",
+      "integrity": "sha512-5xNhP4063d16Pz3HBtKprutsPrmHZi5IdUGOWRxA2B6VF7BIRGOHZ5WQvDmJXZuPcBg7rYwaFxvQYjqkSdR3TQ==",
+      "requires": {
+        "tslib": "^2.1.0"
+      }
+    },
     "has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -1286,6 +1544,14 @@
       "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.1.0.tgz",
       "integrity": "sha512-X9VVhYKHQPPuwffO8jk4bP/FVj+ibNCy3HxZZNDXFtJrq4O5FdcdCDRIkDis5MiMnjh7UwEdHgRZJcHFYdzDdA=="
     },
+    "hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "requires": {
+        "react-is": "^16.7.0"
+      }
+    },
     "import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -1351,6 +1617,11 @@
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
       "dev": true
     },
+    "js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+    },
     "kleur": {
       "version": "4.1.4",
       "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.4.tgz",
@@ -1362,6 +1633,14 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
+    "loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "requires": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      }
+    },
     "magic-string": {
       "version": "0.25.7",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
@@ -1416,6 +1695,11 @@
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
       "dev": true
     },
+    "object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
+    },
     "once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -1425,6 +1709,15 @@
         "wrappy": "1"
       }
     },
+    "optimism": {
+      "version": "0.16.1",
+      "resolved": "https://registry.npmjs.org/optimism/-/optimism-0.16.1.tgz",
+      "integrity": "sha512-64i+Uw3otrndfq5kaoGNoY7pvOhSsjFEN4bdEFh80MWVk/dbgJfMv7VFDeCT8LxNAlEVhQmdVEbfE7X2nWNIIg==",
+      "requires": {
+        "@wry/context": "^0.6.0",
+        "@wry/trie": "^0.3.0"
+      }
+    },
     "parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -1463,6 +1756,21 @@
         "source-map-js": "^0.6.2"
       }
     },
+    "prop-types": {
+      "version": "15.7.2",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
+      "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
+      "requires": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.8.1"
+      }
+    },
+    "react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -1599,6 +1907,11 @@
         "strip-indent": "^3.0.0"
       }
     },
+    "symbol-observable": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-4.0.0.tgz",
+      "integrity": "sha512-b19dMThMV4HVFynSAM1++gBHAbk2Tc/osgLIBZMKsyqh34jb2e8Os7T6ZW/Bt3pJFdBTd2JwAnAAEQV7rSNvcQ=="
+    },
     "to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -1608,11 +1921,18 @@
         "is-number": "^7.0.0"
       }
     },
+    "ts-invariant": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/ts-invariant/-/ts-invariant-0.9.1.tgz",
+      "integrity": "sha512-hSeYibh29ULlHkuEfukcoiyTct+s2RzczMLTv4x3NWC/YrBy7x7ps5eYq/b4Y3Sb9/uAlf54+/5CAEMVxPhuQw==",
+      "requires": {
+        "tslib": "^2.1.0"
+      }
+    },
     "tslib": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
-      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
-      "dev": true
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
     },
     "typescript": {
       "version": "4.3.5",
@@ -1638,6 +1958,20 @@
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
       "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
       "dev": true
+    },
+    "zen-observable": {
+      "version": "0.8.15",
+      "resolved": "https://registry.npmjs.org/zen-observable/-/zen-observable-0.8.15.tgz",
+      "integrity": "sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ=="
+    },
+    "zen-observable-ts": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/zen-observable-ts/-/zen-observable-ts-1.1.0.tgz",
+      "integrity": "sha512-1h4zlLSqI2cRLPJUHJFL8bCWHhkpuXkF+dbGkRaWjgDIG26DmzyshUMrdV/rL3UnR+mhaX4fRq8LPouq0MYYIA==",
+      "requires": {
+        "@types/zen-observable": "0.8.3",
+        "zen-observable": "0.8.15"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index f05d837..0dc7dc7 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
   },
   "type": "module",
   "dependencies": {
+    "@apollo/client": "^3.4.7",
     "axios": "^0.21.1",
     "dayjs": "^1.10.5",
     "highlight.js": "^11.0.0",
diff --git a/src/lib/api/index.ts b/src/lib/api/index.ts
index 85c95e6..13fcbe0 100644
--- a/src/lib/api/index.ts
+++ b/src/lib/api/index.ts
@@ -4,8 +4,13 @@ export const API = axios.create({
   baseURL: import.meta.env.VITE_API_URL as string,
 })
 
-export function gql(s: TemplateStringsArray) {
-  return s.join('')
+export function gql(strings: TemplateStringsArray, ...args: string[]) {
+  let joined = ''
+  for (const part of strings) {
+    const arg = args.shift() ?? ''
+    joined += part + arg
+  }
+  return joined
 }
 
 export async function Call<T>(query: string, variables: Record<string, any> = {}): Promise<T> {
@@ -17,6 +22,9 @@ export async function Call<T>(query: string, variables: Record<string, any> = {}
       variables,
     },
   })
+  if (data.errors?.length > 0) {
+    throw new Error(data.errors[0].message)
+  }
   return data.data as T
 }
 
@@ -28,6 +36,14 @@ export type Page = {
   status: string
 }
 
+export const BaseAttributes = gql`
+    id
+    slug
+    status
+    title
+    content
+`
+
 export interface Work extends Page {
   work: {
     date: string
@@ -37,6 +53,20 @@ export interface Work extends Page {
   }
 }
 
+export const WorkFragment = gql`
+  fragment WorkFragment on Work {
+      ${BaseAttributes}
+    work {
+      date
+      image {
+        ...MediaItemFragment
+      }
+      link
+      role
+    }
+  }
+`
+
 export interface Project extends Page {
   project: {
     date: string
@@ -45,8 +75,27 @@ export interface Project extends Page {
   }
 }
 
+export const ProjectFragment = gql`
+  fragment ProjectFragment on Project {
+    ${BaseAttributes}
+    project {
+      date
+      link
+      description
+    }
+  }
+`
+
 export type MediaItem = {
   srcSet: string
   altText: string
   sourceUrl: string
 }
+
+export const MediaItemFragment = gql`
+  fragment MediaItemFragment on MediaItem {
+    srcSet
+    altText
+    sourceUrl
+  }
+`
diff --git a/src/lib/components/Work.svelte b/src/lib/components/Work.svelte
index 422831c..6263398 100644
--- a/src/lib/components/Work.svelte
+++ b/src/lib/components/Work.svelte
@@ -8,12 +8,14 @@
 </script>
 
 <section>
-  <a href={work.work.link} target="_blank" rel="noopener">
+  <a href="/works/{work.slug}">
     <div class="horizontal">
       <div class="title regular">{work.title}</div>
       <div>
-        <Icon icon="link-outline" />
-        <span>{work.work.link.replace(/https?:\/\//, '')}</span>
+        <a href={work.work.link} target="_blank" rel="noopener">
+          <Icon icon="link-outline" />
+          <span>{work.work.link.replace(/https?:\/\//, '')}</span>
+        </a>
       </div>
     </div>
 
diff --git a/src/routes/api/[type]/[slug].json.ts b/src/routes/api/[type]/[slug].json.ts
index 24bf400..bfc6c46 100644
--- a/src/routes/api/[type]/[slug].json.ts
+++ b/src/routes/api/[type]/[slug].json.ts
@@ -1,6 +1,16 @@
 import type { RequestHandler } from '@sveltejs/kit'
 
-import { Call, gql, MediaItem, Page, Project } from '$lib/api'
+import {
+  BaseAttributes,
+  Call,
+  gql,
+  MediaItem,
+  MediaItemFragment,
+  Page,
+  Project,
+  ProjectFragment,
+  WorkFragment,
+} from '$lib/api'
 
 export const get: RequestHandler = async (args) => {
   const { type, slug } = args.params
@@ -14,11 +24,7 @@ export const get: RequestHandler = async (args) => {
           query {
             pages {
               nodes {
-                title
-                content
-                slug
-                status
-                id
+                ${BaseAttributes}
               }
             }
           }
@@ -29,11 +35,7 @@ export const get: RequestHandler = async (args) => {
           gql`
             query ($slug: ID!) {
               page(id: $slug, idType: URI) {
-                title
-                content
-                slug
-                status
-                id
+                ${BaseAttributes}
               }
             }
           `,
@@ -44,65 +46,73 @@ export const get: RequestHandler = async (args) => {
     }
     case 'works': {
       if (all) {
-        const data = await Call<{ works: { nodes: MediaItem[] } }>(gql`
+        const query = gql`
+          ${MediaItemFragment}
+          ${WorkFragment}
           query {
             works {
               nodes {
-                id
-                title
-                content
-                slug
-                status
-                work {
-                  date
-                  image {
-                    sourceUrl
-                    srcSet
-                    altText
-                  }
-                  link
-                  role
-                }
+                ...WorkFragment
               }
             }
           }
-        `)
+        `
+        const data = await Call<{ works: { nodes: MediaItem[] } }>(query)
         return { body: data.works.nodes }
       } else {
+        const data = await Call<{ work: MediaItem }>(
+          gql`
+            ${MediaItemFragment}
+            ${WorkFragment}
+            query ($slug: ID!) {
+              work(id: $slug, idType: SLUG) {
+                ...WorkFragment
+              }
+            }
+          `,
+          { slug }
+        )
+        return { body: data.work }
       }
     }
     case 'projects': {
       if (all) {
-        const data = await Call<{ projects: { nodes: Project[] } }>(gql`
-          query {
-            projects {
-              nodes {
-                id
-                title
-                content
-                slug
-                status
-                project {
-                  date
-                  description
-                  link
+        const data = await Call<{ projects: { nodes: Project[] } }>(
+          gql`
+            ${ProjectFragment}
+            query {
+              projects {
+                nodes {
+                  ...ProjectFragment
                 }
               }
             }
-          }
-        `)
+          `
+        )
         return { body: data.projects.nodes }
+      } else {
+        const data = await Call<{ project: Project }>(
+          gql`
+            ${ProjectFragment}
+            query ($slug: ID!) {
+              project(id: $slug, idType: SLUG) {
+                ...ProjectFragment
+              }
+            }
+          `,
+          { slug }
+        )
+        return { body: data.project }
       }
     }
 
     case 'media': {
       const data = await Call<{ mediaItem: MediaItem }>(
         gql`
+          ${MediaItemFragment}
           query ($slug: ID!) {
             mediaItem(id: $slug, idType: SLUG) {
-              srcSet
-              altText
-              sourceUrl
+              ...MediaItemFragment
             }
           }
         `,
diff --git a/src/routes/works/[slug].svelte b/src/routes/works/[slug].svelte
new file mode 100644
index 0000000..e5575bb
--- /dev/null
+++ b/src/routes/works/[slug].svelte
@@ -0,0 +1,27 @@
+<script lang="ts" context="module">
+  import type { Load } from '@sveltejs/kit'
+
+  export const load: Load = async ({ fetch, page }) => {
+    return {
+      props: {
+        data: await fetch(`/api/works/${page.params.slug}.json`).then((r) => r.json()),
+      },
+    }
+  }
+</script>
+
+<script lang="ts">
+  import type { Work as TWork } from '$lib/api'
+  import SimplePage from '$lib/components/SimplePage.svelte'
+  import Work from '$lib/components/Work.svelte'
+
+  export let data: TWork
+</script>
+
+<svelte:head>
+  <title>Works</title>
+</svelte:head>
+
+<SimplePage title="Works">
+  <Work work={data} />
+</SimplePage>
diff --git a/src/routes/works.svelte b/src/routes/works/index.svelte
similarity index 100%
rename from src/routes/works.svelte
rename to src/routes/works/index.svelte