diff --git a/server/src/main/kotlin/suwayomi/tachidesk/graphql/GraphQL.kt b/server/src/main/kotlin/suwayomi/tachidesk/graphql/GraphQL.kt
index 6086ec00..8bc2edab 100644
--- a/server/src/main/kotlin/suwayomi/tachidesk/graphql/GraphQL.kt
+++ b/server/src/main/kotlin/suwayomi/tachidesk/graphql/GraphQL.kt
@@ -7,11 +7,16 @@
 
 package suwayomi.tachidesk.graphql
 
+import io.javalin.apibuilder.ApiBuilder.get
 import io.javalin.apibuilder.ApiBuilder.post
 import suwayomi.tachidesk.graphql.controller.GraphQLController
 
 object GraphQL {
     fun defineEndpoints() {
         post("graphql", GraphQLController.execute)
+        get("graphql") { ctx ->
+            val html = javaClass.getResource("/graphql.html")?.readText()
+            ctx.html(html ?: "Could not load playground")
+        }
     }
 }
diff --git a/server/src/main/resources/graphql.html b/server/src/main/resources/graphql.html
new file mode 100644
index 00000000..23825856
--- /dev/null
+++ b/server/src/main/resources/graphql.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset=utf-8/>
+    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
+    <title>GraphQL Playground</title>
+    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/graphql-playground-react/build/static/css/index.css" />
+    <link rel="shortcut icon" href="//cdn.jsdelivr.net/npm/graphql-playground-react/build/favicon.png" />
+    <script src="//cdn.jsdelivr.net/npm/graphql-playground-react/build/static/js/middleware.js"></script>
+</head>
+
+<body>
+<div id="root">
+    <style>
+        body {
+            background-color: rgb(23, 42, 58);
+            font-family: Open Sans, sans-serif;
+            height: 90vh;
+        }
+
+        #root {
+            height: 100%;
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .loading {
+            font-size: 32px;
+            font-weight: 200;
+            color: rgba(255, 255, 255, .6);
+            margin-left: 20px;
+        }
+
+        img {
+            width: 78px;
+            height: 78px;
+        }
+
+        .title {
+            font-weight: 400;
+        }
+    </style>
+    <img src='//cdn.jsdelivr.net/npm/graphql-playground-react/build/logo.png' alt=''>
+    <div class="loading"> Loading
+        <span class="title">GraphQL Playground</span>
+    </div>
+</div>
+<script>window.addEventListener('load', function (event) {
+    GraphQLPlayground.init(document.getElementById('root'), {
+        // options as 'endpoint' belong here
+    })
+})</script>
+</body>
+
+</html>
\ No newline at end of file
