diff --git a/.github/workflows/pages.yml b/.github/workflows/pages.yml
index 1934a6c..c795013 100644
--- a/.github/workflows/pages.yml
+++ b/.github/workflows/pages.yml
@@ -12,8 +12,14 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v2
 
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12
+      - run: npm ci
+      - run: cd src/web && npm run ghbuild
+
       - name: Deploy site
         uses: JamesIves/github-pages-deploy-action@4.1.4
         with:
           branch: gh-pages
-          folder: src/web-old
\ No newline at end of file
+          folder: src/web/out
\ No newline at end of file
diff --git a/package.json b/package.json
index f74e718..8f89189 100644
--- a/package.json
+++ b/package.json
@@ -4,8 +4,7 @@
   "main": "dist/worker.production.js",
   "scripts": {
     "build": "webpack ./src/bot",
-    "dev": "cross-env NODE_ENV=development npm run build",
-    "transpile": "tsc --project ./test"
+    "dev": "cross-env NODE_ENV=development npm run build"
   },
   "keywords": [],
   "author": "",
diff --git a/src/web-old/index.html b/src/web-old/index.html
deleted file mode 100644
index bac72a3..0000000
--- a/src/web-old/index.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<!DOCTYPE html>
-<html lang='en'> 
-<head>
-    <meta charset='UTF-8'>
-    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
-    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
-    <title>Roles Bot</title> 
-    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css' integrity='sha512-c42qTSw/wPZ3/5LBzD+Bw5f7bSF2oxou6wEb+I/lqeaKV5FDIfMvvRp772y4jcJLKuGUOpbJMdg/BTl50fJYAw==' crossorigin='anonymous' referrerpolicy='no-referrer' />
-    <meta name='keywords' content='ReactionRoles, discord, discordbot, discordroles, roles-bot'> 
-    <link rel='stylesheet' href='dist/style.css'> 
-    <link rel='icon' href='assets/logo.ico'> 
-    <script src='https://kit.fontawesome.com/5acf4d9e80.js' crossorigin='anonymous'></script>
-    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
-    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css'>
-    <script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js'></script>
-    <script>hljs.initHighlightingOnLoad();</script>
-</head>
-<body>
-    <section class='flex-container'>
-        <div class='container animate__animated animate__fadeIn'>
-            <h1>Generate</h1>
-            <form>
-                <input placeholder='Your Message' name='message' id='message'/><br> <!--Message-->
-                <input placeholder='Channel Id' name='channel' id='channel'/> <!--Channel Id-->
-            </form>
-            <button id='addRole'>Add Role</button>
-
-            <button id='buttonCopy'>Copy</button>
-            <img src='assets/slash.png' class='responsive' />
-            <pre class='hljs language-json copy' id='jsonPre'><code id='json' class="code"></code></pre>
-        </div>
-    </section>
-    <script src='//cdn.jsdelivr.net/npm/sweetalert2@11'></script>
-    <script src='app/js/script.js'></script>
-</body>
-</html>
\ No newline at end of file
diff --git a/src/web/package.json b/src/web/package.json
index 92f292c..244459e 100644
--- a/src/web/package.json
+++ b/src/web/package.json
@@ -5,7 +5,8 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "ghbuild": "next build && next export"
   },
   "dependencies": {
     "next": "12.0.7",
diff --git a/src/web/pages/index.tsx b/src/web/pages/index.tsx
index f690560..4fb17a3 100644
--- a/src/web/pages/index.tsx
+++ b/src/web/pages/index.tsx
@@ -1,9 +1,12 @@
 import Head from "next/head";
+import Script from "next/script";
 
 export default function Home() {
   return (
     <div>
       <Head>
+        <title>Roles Bot</title>
+        <link rel="icon" href="logo.ico" />
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css" />
       </Head>
       <section className="flex-container">
@@ -15,17 +18,16 @@ export default function Home() {
             </form>
             <button id="addRole">Add Role</button>
             <button id="buttonCopy">Copy</button>
-            <img src="slash.png" className="responsive" />
             <pre className={`hljs language-json copy`} id="jsonPre"><code id="json" className="code"></code></pre>
         </div>
       </section>
 
-      <script src="https://kit.fontawesome.com/5acf4d9e80.js" crossOrigin="anonymous"></script>
-      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
-      <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
-      <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
-      <script src="script.js"></script>
-      <script>hljs.initHighlightingOnLoad();</script>
+      <Script src="https://kit.fontawesome.com/5acf4d9e80.js" crossOrigin="anonymous"></Script>
+      <Script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></Script>
+      <Script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></Script>
+      <Script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></Script>
+      <Script src="script.js"></Script>
+      <Script id='hljs'>hljs.initHighlightingOnLoad();</Script>
     </div>
   )
 }
\ No newline at end of file
