diff --git a/Dockerfile b/Dockerfile
index d1f6e11..b8db87a 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,11 +1,23 @@
-FROM node:14
+FROM node:16
 
 WORKDIR .
 
-COPY package*.json .
-RUN npm i --production
+ARG NODE_ENV
+ARG DATABASE_URL
+ARG GOOGLE_CLIENT_ID
+ARG GOOGLE_CLIENT_SECRET
+ARG AUTH_SECRET
+ARG AUTH_URL
+ARG NEXT_PUBLIC_BASE_URL
+ARG NEXT_PUBLIC_MAPTILER_ACCESS_TOKEN
+ARG SENDGRID_API_KEY
+ARG SENDGRID_SENDER
 
+COPY package*.json .
+RUN npm ci --production
+RUN npm i --save-dev typescript postcss ts-node sharp
 COPY . .
+RUN npm run db:generate
 RUN npm run build
 EXPOSE 3000
 
diff --git a/README.md b/README.md
index 7967ffd..5c980b1 100644
--- a/README.md
+++ b/README.md
@@ -34,9 +34,23 @@ npx prisma studio
 ```
 
 ## Start production server
+Create a file named `.env.production`:
+```
+NODE_ENV=production
+
+DATABASE_URL=postgresql://computational_puzzles:computational_puzzles@db:5432/mydb?schema=public&connect_timeout=300
+GOOGLE_CLIENT_ID=10889722286-8uek1esq4uicv31an6tehi60c7ev5lvp.apps.googleusercontent.com
+GOOGLE_CLIENT_SECRET=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
+SECRET=secret
+AUTH_SECRET=secret
+AUTH_URL=http://localhost:3000
+
+NEXT_PUBLIC_BASE_URL=http://localhost:3000
+NEXT_PUBLIC_MAPTILER_ACCESS_TOKEN=uTyRuREEmko5kblSVwhb
+```
+Then, run the following command
 ```bash
-docker-compose build
-docker-compose up
+docker-compose up -- build
 ```
 
 ## For testing
diff --git a/docker-compose.yml b/docker-compose.yml
index 8645ab1..58381be 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -2,22 +2,39 @@ version: "3.6"
 
 services:
   app:
-    build: .
-    env_file: .env
+    build:
+      context: .
+      dockerfile: Dockerfile
+      args:
+        NODE_ENV: ${NODE_ENV}
+        DATABASE_URL: ${DATABASE_URL}
+        GOOGLE_CLIENT_ID: ${GOOGLE_CLIENT_ID}
+        GOOGLE_CLIENT_SECRET: ${GOOGLE_CLIENT_SECRET}
+        AUTH_SECRET: ${AUTH_SECRET}
+        AUTH_URL: ${AUTH_URL}
+        NEXT_PUBLIC_BASE_URL: ${NEXT_PUBLIC_BASE_URL}
+        NEXT_PUBLIC_MAPTILER_ACCESS_TOKEN: ${NEXT_PUBLIC_MAPTILER_ACCESS_TOKEN}
+        SENDGRID_API_KEY: ${SENDGRID_API_KEY}
+        SENDGRID_SENDER: ${SENDGRID_SENDER}
+    env_file: .env.production
+    image: computational_puzzles
+    volumes:
+      - ./:/app
     ports:
       - "3000:3000"
-    volumes:
-      - app:/app
     depends_on:
       - db
     networks:
       - app_network
-  
+    links:
+      - db:db
+
   db:
     image: postgres:9.6
+    container_name: computational_puzzle_db
     volumes:
       - db_data:/var/lib/postgresql/data
-    env_file: .env
+    env_file: .env.production
     environment:
       POSTGRES_USER: computational_puzzles
       POSTGRES_PASSWORD: computational_puzzles # This is used to create development database, please change when migrate to production
@@ -28,7 +45,6 @@ services:
       - app_network
 
 volumes:
-  app:
   db_data:
 
 networks:
diff --git a/package-lock.json b/package-lock.json
index 4022fdc..b236cf7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,7 @@
         "@next-auth/prisma-adapter": "^0.5.2-next.19",
         "@prisma/client": "^3.6.0",
         "@types/react": "^17.0.27",
-        "argon2": "^0.28.3",
+        "argon2": "^0.28.5",
         "axios": "^0.24.0",
         "babel-plugin-superjson-next": "^0.4.2",
         "next": "^12.0.7",
@@ -39,7 +39,7 @@
         "@types/supertest": "^2.0.11",
         "@typescript-eslint/eslint-plugin": "^4.33.0",
         "@typescript-eslint/parser": "^4.33.0",
-        "babel-jest": "^27.2.3",
+        "babel-jest": "^27.5.1",
         "dotenv": "^14.3.2",
         "eslint": "^7.32.0",
         "eslint-config-next": "11.1.2",
@@ -1129,23 +1129,23 @@
       }
     },
     "node_modules/@jest/transform": {
-      "version": "27.4.5",
-      "resolved": "https://registry.npmjs.org/@jest/transform/-/transform-27.4.5.tgz",
-      "integrity": "sha512-PuMet2UlZtlGzwc6L+aZmR3I7CEBpqadO03pU40l2RNY2fFJ191b9/ITB44LNOhVtsyykx0OZvj0PCyuLm7Eew==",
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/@jest/transform/-/transform-27.5.1.tgz",
+      "integrity": "sha512-ipON6WtYgl/1329g5AIJVbUuEh0wZVbdpGwC99Jw4LwuoBNS95MVphU6zOeD9pDkon+LLbFL7lOQRapbB8SCHw==",
       "dev": true,
       "dependencies": {
         "@babel/core": "^7.1.0",
-        "@jest/types": "^27.4.2",
-        "babel-plugin-istanbul": "^6.0.0",
+        "@jest/types": "^27.5.1",
+        "babel-plugin-istanbul": "^6.1.1",
         "chalk": "^4.0.0",
         "convert-source-map": "^1.4.0",
         "fast-json-stable-stringify": "^2.0.0",
-        "graceful-fs": "^4.2.4",
-        "jest-haste-map": "^27.4.5",
-        "jest-regex-util": "^27.4.0",
-        "jest-util": "^27.4.2",
+        "graceful-fs": "^4.2.9",
+        "jest-haste-map": "^27.5.1",
+        "jest-regex-util": "^27.5.1",
+        "jest-util": "^27.5.1",
         "micromatch": "^4.0.4",
-        "pirates": "^4.0.1",
+        "pirates": "^4.0.4",
         "slash": "^3.0.0",
         "source-map": "^0.6.1",
         "write-file-atomic": "^3.0.0"
@@ -1234,9 +1234,9 @@
       }
     },
     "node_modules/@jest/types": {
-      "version": "27.4.2",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-27.4.2.tgz",
-      "integrity": "sha512-j35yw0PMTPpZsUoOBiuHzr1zTYoad1cVIE0ajEjcrJONxxrko/IRGKkXx3os0Nsi4Hu3+5VmDbVfq5WhG/pWAg==",
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/@jest/types/-/types-27.5.1.tgz",
+      "integrity": "sha512-Cx46iJ9QpwQTjIdq5VJu2QTMMs3QlEjI0x1QbBP5W1+nMzyc2XmimiRR/CbX9TO0cPTeUlxWMOu8mslYsJ8DEw==",
       "dev": true,
       "dependencies": {
         "@types/istanbul-lib-coverage": "^2.0.0",
@@ -2108,9 +2108,9 @@
       "dev": true
     },
     "node_modules/@types/babel__core": {
-      "version": "7.1.17",
-      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.17.tgz",
-      "integrity": "sha512-6zzkezS9QEIL8yCBvXWxPTJPNuMeECJVxSOhxNY/jfq9LxOTHivaYTqr37n9LknWWRTIkzqH2UilS5QFvfa90A==",
+      "version": "7.1.19",
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.19.tgz",
+      "integrity": "sha512-WEOTgRsbYkvA/KCsDwVEGkd7WAr1e3g31VHQ8zy5gul/V1qKullU/BU5I68X5v7V3GnB9eotmom4v5a5gjxorw==",
       "dev": true,
       "dependencies": {
         "@babel/parser": "^7.1.0",
@@ -2121,9 +2121,9 @@
       }
     },
     "node_modules/@types/babel__generator": {
-      "version": "7.6.3",
-      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.3.tgz",
-      "integrity": "sha512-/GWCmzJWqV7diQW54smJZzWbSFf4QYtF71WCKhcx6Ru/tFyQIY2eiiITcCAeuPbNSvT9YCGkVMqqvSk2Z0mXiA==",
+      "version": "7.6.4",
+      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.4.tgz",
+      "integrity": "sha512-tFkciB9j2K755yrTALxD44McOrk+gfpIpvC3sxHjRawj6PfnQxrse4Clq5y/Rq+G3mrBurMax/lG8Qn2t9mSsg==",
       "dev": true,
       "dependencies": {
         "@babel/types": "^7.0.0"
@@ -2923,18 +2923,18 @@
       "dev": true
     },
     "node_modules/babel-jest": {
-      "version": "27.4.5",
-      "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-27.4.5.tgz",
-      "integrity": "sha512-3uuUTjXbgtODmSv/DXO9nZfD52IyC2OYTFaXGRzL0kpykzroaquCrD5+lZNafTvZlnNqZHt5pb0M08qVBZnsnA==",
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-27.5.1.tgz",
+      "integrity": "sha512-cdQ5dXjGRd0IBRATiQ4mZGlGlRE8kJpjPOixdNRdT+m3UcNqmYWN6rK6nvtXYfY3D76cb8s/O1Ss8ea24PIwcg==",
       "dev": true,
       "dependencies": {
-        "@jest/transform": "^27.4.5",
-        "@jest/types": "^27.4.2",
+        "@jest/transform": "^27.5.1",
+        "@jest/types": "^27.5.1",
         "@types/babel__core": "^7.1.14",
-        "babel-plugin-istanbul": "^6.0.0",
-        "babel-preset-jest": "^27.4.0",
+        "babel-plugin-istanbul": "^6.1.1",
+        "babel-preset-jest": "^27.5.1",
         "chalk": "^4.0.0",
-        "graceful-fs": "^4.2.4",
+        "graceful-fs": "^4.2.9",
         "slash": "^3.0.0"
       },
       "engines": {
@@ -3031,9 +3031,9 @@
       }
     },
     "node_modules/babel-plugin-jest-hoist": {
-      "version": "27.4.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-27.4.0.tgz",
-      "integrity": "sha512-Jcu7qS4OX5kTWBc45Hz7BMmgXuJqRnhatqpUhnzGC3OBYpOmf2tv6jFNwZpwM7wU7MUuv2r9IPS/ZlYOuburVw==",
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-27.5.1.tgz",
+      "integrity": "sha512-50wCwD5EMNW4aRpOwtqzyZHIewTYNxLA4nhB+09d8BIssfNfzBRhkBIHiaPv1Si226TQSvp8gxAJm2iY2qs2hQ==",
       "dev": true,
       "dependencies": {
         "@babel/template": "^7.3.3",
@@ -3086,12 +3086,12 @@
       }
     },
     "node_modules/babel-preset-jest": {
-      "version": "27.4.0",
-      "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-27.4.0.tgz",
-      "integrity": "sha512-NK4jGYpnBvNxcGo7/ZpZJr51jCGT+3bwwpVIDY2oNfTxJJldRtB4VAcYdgp1loDE50ODuTu+yBjpMAswv5tlpg==",
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-27.5.1.tgz",
+      "integrity": "sha512-Nptf2FzlPCWYuJg41HBqXVT8ym6bXOevuCTbhxlUpjwtysGaIWFvDEjp4y+G7fl13FgOdjs7P/DmErqH7da0Ag==",
       "dev": true,
       "dependencies": {
-        "babel-plugin-jest-hoist": "^27.4.0",
+        "babel-plugin-jest-hoist": "^27.5.1",
         "babel-preset-current-node-syntax": "^1.0.0"
       },
       "engines": {
@@ -5528,9 +5528,9 @@
       }
     },
     "node_modules/graceful-fs": {
-      "version": "4.2.8",
-      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.8.tgz",
-      "integrity": "sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg=="
+      "version": "4.2.10",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
+      "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA=="
     },
     "node_modules/harmony-reflect": {
       "version": "1.6.2",
@@ -6903,21 +6903,21 @@
       }
     },
     "node_modules/jest-haste-map": {
-      "version": "27.4.5",
-      "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-27.4.5.tgz",
-      "integrity": "sha512-oJm1b5qhhPs78K24EDGifWS0dELYxnoBiDhatT/FThgB9yxqUm5F6li3Pv+Q+apMBmmPNzOBnZ7ZxWMB1Leq1Q==",
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-27.5.1.tgz",
+      "integrity": "sha512-7GgkZ4Fw4NFbMSDSpZwXeBiIbx+t/46nJ2QitkOjvwPYyZmqttu2TDSimMHP1EkPOi4xUZAN1doE5Vd25H4Jng==",
       "dev": true,
       "dependencies": {
-        "@jest/types": "^27.4.2",
+        "@jest/types": "^27.5.1",
         "@types/graceful-fs": "^4.1.2",
         "@types/node": "*",
         "anymatch": "^3.0.3",
         "fb-watchman": "^2.0.0",
-        "graceful-fs": "^4.2.4",
-        "jest-regex-util": "^27.4.0",
-        "jest-serializer": "^27.4.0",
-        "jest-util": "^27.4.2",
-        "jest-worker": "^27.4.5",
+        "graceful-fs": "^4.2.9",
+        "jest-regex-util": "^27.5.1",
+        "jest-serializer": "^27.5.1",
+        "jest-util": "^27.5.1",
+        "jest-worker": "^27.5.1",
         "micromatch": "^4.0.4",
         "walker": "^1.0.7"
       },
@@ -7246,9 +7246,9 @@
       }
     },
     "node_modules/jest-regex-util": {
-      "version": "27.4.0",
-      "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-27.4.0.tgz",
-      "integrity": "sha512-WeCpMpNnqJYMQoOjm1nTtsgbR4XHAk1u00qDoNBQoykM280+/TmgA5Qh5giC1ecy6a5d4hbSsHzpBtu5yvlbEg==",
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-27.5.1.tgz",
+      "integrity": "sha512-4bfKq2zie+x16okqDXjXn9ql2B0dScQu+vcwe4TvFVhkVyuWLqpZrZtXxLLWoXYgn0E87I6r6GRYHF7wFZBUvg==",
       "dev": true,
       "engines": {
         "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
@@ -7570,13 +7570,13 @@
       }
     },
     "node_modules/jest-serializer": {
-      "version": "27.4.0",
-      "resolved": "https://registry.npmjs.org/jest-serializer/-/jest-serializer-27.4.0.tgz",
-      "integrity": "sha512-RDhpcn5f1JYTX2pvJAGDcnsNTnsV9bjYPU8xcV+xPwOXnUPOQwf4ZEuiU6G9H1UztH+OapMgu/ckEVwO87PwnQ==",
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-serializer/-/jest-serializer-27.5.1.tgz",
+      "integrity": "sha512-jZCyo6iIxO1aqUxpuBlwTDMkzOAJS4a3eYz3YzgxxVQFwLeSA7Jfq5cbqCY+JLvTDrWirgusI/0KwxKMgrdf7w==",
       "dev": true,
       "dependencies": {
         "@types/node": "*",
-        "graceful-fs": "^4.2.4"
+        "graceful-fs": "^4.2.9"
       },
       "engines": {
         "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
@@ -7703,16 +7703,16 @@
       }
     },
     "node_modules/jest-util": {
-      "version": "27.4.2",
-      "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-27.4.2.tgz",
-      "integrity": "sha512-YuxxpXU6nlMan9qyLuxHaMMOzXAl5aGZWCSzben5DhLHemYQxCc4YK+4L3ZrCutT8GPQ+ui9k5D8rUJoDioMnA==",
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-27.5.1.tgz",
+      "integrity": "sha512-Kv2o/8jNvX1MQ0KGtw480E/w4fBCDOnH6+6DmeKi6LZUIlKA5kwY0YNdlzaWTiVgxqAqik11QyxDOKk543aKXw==",
       "dev": true,
       "dependencies": {
-        "@jest/types": "^27.4.2",
+        "@jest/types": "^27.5.1",
         "@types/node": "*",
         "chalk": "^4.0.0",
         "ci-info": "^3.2.0",
-        "graceful-fs": "^4.2.4",
+        "graceful-fs": "^4.2.9",
         "picomatch": "^2.2.3"
       },
       "engines": {
@@ -7977,9 +7977,9 @@
       }
     },
     "node_modules/jest-worker": {
-      "version": "27.4.5",
-      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.4.5.tgz",
-      "integrity": "sha512-f2s8kEdy15cv9r7q4KkzGXvlY0JTcmCbMHZBfSQDwW77REr45IDWwd0lksDFeVHH2jJ5pqb90T77XscrjeGzzg==",
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
+      "integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==",
       "dev": true,
       "dependencies": {
         "@types/node": "*",
@@ -12368,23 +12368,23 @@
       }
     },
     "@jest/transform": {
-      "version": "27.4.5",
-      "resolved": "https://registry.npmjs.org/@jest/transform/-/transform-27.4.5.tgz",
-      "integrity": "sha512-PuMet2UlZtlGzwc6L+aZmR3I7CEBpqadO03pU40l2RNY2fFJ191b9/ITB44LNOhVtsyykx0OZvj0PCyuLm7Eew==",
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/@jest/transform/-/transform-27.5.1.tgz",
+      "integrity": "sha512-ipON6WtYgl/1329g5AIJVbUuEh0wZVbdpGwC99Jw4LwuoBNS95MVphU6zOeD9pDkon+LLbFL7lOQRapbB8SCHw==",
       "dev": true,
       "requires": {
         "@babel/core": "^7.1.0",
-        "@jest/types": "^27.4.2",
-        "babel-plugin-istanbul": "^6.0.0",
+        "@jest/types": "^27.5.1",
+        "babel-plugin-istanbul": "^6.1.1",
         "chalk": "^4.0.0",
         "convert-source-map": "^1.4.0",
         "fast-json-stable-stringify": "^2.0.0",
-        "graceful-fs": "^4.2.4",
-        "jest-haste-map": "^27.4.5",
-        "jest-regex-util": "^27.4.0",
-        "jest-util": "^27.4.2",
+        "graceful-fs": "^4.2.9",
+        "jest-haste-map": "^27.5.1",
+        "jest-regex-util": "^27.5.1",
+        "jest-util": "^27.5.1",
         "micromatch": "^4.0.4",
-        "pirates": "^4.0.1",
+        "pirates": "^4.0.4",
         "slash": "^3.0.0",
         "source-map": "^0.6.1",
         "write-file-atomic": "^3.0.0"
@@ -12448,9 +12448,9 @@
       }
     },
     "@jest/types": {
-      "version": "27.4.2",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-27.4.2.tgz",
-      "integrity": "sha512-j35yw0PMTPpZsUoOBiuHzr1zTYoad1cVIE0ajEjcrJONxxrko/IRGKkXx3os0Nsi4Hu3+5VmDbVfq5WhG/pWAg==",
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/@jest/types/-/types-27.5.1.tgz",
+      "integrity": "sha512-Cx46iJ9QpwQTjIdq5VJu2QTMMs3QlEjI0x1QbBP5W1+nMzyc2XmimiRR/CbX9TO0cPTeUlxWMOu8mslYsJ8DEw==",
       "dev": true,
       "requires": {
         "@types/istanbul-lib-coverage": "^2.0.0",
@@ -13050,9 +13050,9 @@
       "dev": true
     },
     "@types/babel__core": {
-      "version": "7.1.17",
-      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.17.tgz",
-      "integrity": "sha512-6zzkezS9QEIL8yCBvXWxPTJPNuMeECJVxSOhxNY/jfq9LxOTHivaYTqr37n9LknWWRTIkzqH2UilS5QFvfa90A==",
+      "version": "7.1.19",
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.19.tgz",
+      "integrity": "sha512-WEOTgRsbYkvA/KCsDwVEGkd7WAr1e3g31VHQ8zy5gul/V1qKullU/BU5I68X5v7V3GnB9eotmom4v5a5gjxorw==",
       "dev": true,
       "requires": {
         "@babel/parser": "^7.1.0",
@@ -13063,9 +13063,9 @@
       }
     },
     "@types/babel__generator": {
-      "version": "7.6.3",
-      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.3.tgz",
-      "integrity": "sha512-/GWCmzJWqV7diQW54smJZzWbSFf4QYtF71WCKhcx6Ru/tFyQIY2eiiITcCAeuPbNSvT9YCGkVMqqvSk2Z0mXiA==",
+      "version": "7.6.4",
+      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.4.tgz",
+      "integrity": "sha512-tFkciB9j2K755yrTALxD44McOrk+gfpIpvC3sxHjRawj6PfnQxrse4Clq5y/Rq+G3mrBurMax/lG8Qn2t9mSsg==",
       "dev": true,
       "requires": {
         "@babel/types": "^7.0.0"
@@ -13690,18 +13690,18 @@
       "dev": true
     },
     "babel-jest": {
-      "version": "27.4.5",
-      "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-27.4.5.tgz",
-      "integrity": "sha512-3uuUTjXbgtODmSv/DXO9nZfD52IyC2OYTFaXGRzL0kpykzroaquCrD5+lZNafTvZlnNqZHt5pb0M08qVBZnsnA==",
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-27.5.1.tgz",
+      "integrity": "sha512-cdQ5dXjGRd0IBRATiQ4mZGlGlRE8kJpjPOixdNRdT+m3UcNqmYWN6rK6nvtXYfY3D76cb8s/O1Ss8ea24PIwcg==",
       "dev": true,
       "requires": {
-        "@jest/transform": "^27.4.5",
-        "@jest/types": "^27.4.2",
+        "@jest/transform": "^27.5.1",
+        "@jest/types": "^27.5.1",
         "@types/babel__core": "^7.1.14",
-        "babel-plugin-istanbul": "^6.0.0",
-        "babel-preset-jest": "^27.4.0",
+        "babel-plugin-istanbul": "^6.1.1",
+        "babel-preset-jest": "^27.5.1",
         "chalk": "^4.0.0",
-        "graceful-fs": "^4.2.4",
+        "graceful-fs": "^4.2.9",
         "slash": "^3.0.0"
       },
       "dependencies": {
@@ -13770,9 +13770,9 @@
       }
     },
     "babel-plugin-jest-hoist": {
-      "version": "27.4.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-27.4.0.tgz",
-      "integrity": "sha512-Jcu7qS4OX5kTWBc45Hz7BMmgXuJqRnhatqpUhnzGC3OBYpOmf2tv6jFNwZpwM7wU7MUuv2r9IPS/ZlYOuburVw==",
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-27.5.1.tgz",
+      "integrity": "sha512-50wCwD5EMNW4aRpOwtqzyZHIewTYNxLA4nhB+09d8BIssfNfzBRhkBIHiaPv1Si226TQSvp8gxAJm2iY2qs2hQ==",
       "dev": true,
       "requires": {
         "@babel/template": "^7.3.3",
@@ -13812,12 +13812,12 @@
       }
     },
     "babel-preset-jest": {
-      "version": "27.4.0",
-      "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-27.4.0.tgz",
-      "integrity": "sha512-NK4jGYpnBvNxcGo7/ZpZJr51jCGT+3bwwpVIDY2oNfTxJJldRtB4VAcYdgp1loDE50ODuTu+yBjpMAswv5tlpg==",
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-27.5.1.tgz",
+      "integrity": "sha512-Nptf2FzlPCWYuJg41HBqXVT8ym6bXOevuCTbhxlUpjwtysGaIWFvDEjp4y+G7fl13FgOdjs7P/DmErqH7da0Ag==",
       "dev": true,
       "requires": {
-        "babel-plugin-jest-hoist": "^27.4.0",
+        "babel-plugin-jest-hoist": "^27.5.1",
         "babel-preset-current-node-syntax": "^1.0.0"
       }
     },
@@ -15698,9 +15698,9 @@
       }
     },
     "graceful-fs": {
-      "version": "4.2.8",
-      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.8.tgz",
-      "integrity": "sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg=="
+      "version": "4.2.10",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
+      "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA=="
     },
     "harmony-reflect": {
       "version": "1.6.2",
@@ -16675,22 +16675,22 @@
       "dev": true
     },
     "jest-haste-map": {
-      "version": "27.4.5",
-      "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-27.4.5.tgz",
-      "integrity": "sha512-oJm1b5qhhPs78K24EDGifWS0dELYxnoBiDhatT/FThgB9yxqUm5F6li3Pv+Q+apMBmmPNzOBnZ7ZxWMB1Leq1Q==",
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-27.5.1.tgz",
+      "integrity": "sha512-7GgkZ4Fw4NFbMSDSpZwXeBiIbx+t/46nJ2QitkOjvwPYyZmqttu2TDSimMHP1EkPOi4xUZAN1doE5Vd25H4Jng==",
       "dev": true,
       "requires": {
-        "@jest/types": "^27.4.2",
+        "@jest/types": "^27.5.1",
         "@types/graceful-fs": "^4.1.2",
         "@types/node": "*",
         "anymatch": "^3.0.3",
         "fb-watchman": "^2.0.0",
         "fsevents": "^2.3.2",
-        "graceful-fs": "^4.2.4",
-        "jest-regex-util": "^27.4.0",
-        "jest-serializer": "^27.4.0",
-        "jest-util": "^27.4.2",
-        "jest-worker": "^27.4.5",
+        "graceful-fs": "^4.2.9",
+        "jest-regex-util": "^27.5.1",
+        "jest-serializer": "^27.5.1",
+        "jest-util": "^27.5.1",
+        "jest-worker": "^27.5.1",
         "micromatch": "^4.0.4",
         "walker": "^1.0.7"
       }
@@ -16931,9 +16931,9 @@
       "requires": {}
     },
     "jest-regex-util": {
-      "version": "27.4.0",
-      "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-27.4.0.tgz",
-      "integrity": "sha512-WeCpMpNnqJYMQoOjm1nTtsgbR4XHAk1u00qDoNBQoykM280+/TmgA5Qh5giC1ecy6a5d4hbSsHzpBtu5yvlbEg==",
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-27.5.1.tgz",
+      "integrity": "sha512-4bfKq2zie+x16okqDXjXn9ql2B0dScQu+vcwe4TvFVhkVyuWLqpZrZtXxLLWoXYgn0E87I6r6GRYHF7wFZBUvg==",
       "dev": true
     },
     "jest-resolve": {
@@ -17183,13 +17183,13 @@
       }
     },
     "jest-serializer": {
-      "version": "27.4.0",
-      "resolved": "https://registry.npmjs.org/jest-serializer/-/jest-serializer-27.4.0.tgz",
-      "integrity": "sha512-RDhpcn5f1JYTX2pvJAGDcnsNTnsV9bjYPU8xcV+xPwOXnUPOQwf4ZEuiU6G9H1UztH+OapMgu/ckEVwO87PwnQ==",
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-serializer/-/jest-serializer-27.5.1.tgz",
+      "integrity": "sha512-jZCyo6iIxO1aqUxpuBlwTDMkzOAJS4a3eYz3YzgxxVQFwLeSA7Jfq5cbqCY+JLvTDrWirgusI/0KwxKMgrdf7w==",
       "dev": true,
       "requires": {
         "@types/node": "*",
-        "graceful-fs": "^4.2.4"
+        "graceful-fs": "^4.2.9"
       }
     },
     "jest-snapshot": {
@@ -17285,16 +17285,16 @@
       }
     },
     "jest-util": {
-      "version": "27.4.2",
-      "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-27.4.2.tgz",
-      "integrity": "sha512-YuxxpXU6nlMan9qyLuxHaMMOzXAl5aGZWCSzben5DhLHemYQxCc4YK+4L3ZrCutT8GPQ+ui9k5D8rUJoDioMnA==",
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-27.5.1.tgz",
+      "integrity": "sha512-Kv2o/8jNvX1MQ0KGtw480E/w4fBCDOnH6+6DmeKi6LZUIlKA5kwY0YNdlzaWTiVgxqAqik11QyxDOKk543aKXw==",
       "dev": true,
       "requires": {
-        "@jest/types": "^27.4.2",
+        "@jest/types": "^27.5.1",
         "@types/node": "*",
         "chalk": "^4.0.0",
         "ci-info": "^3.2.0",
-        "graceful-fs": "^4.2.4",
+        "graceful-fs": "^4.2.9",
         "picomatch": "^2.2.3"
       },
       "dependencies": {
@@ -17487,9 +17487,9 @@
       }
     },
     "jest-worker": {
-      "version": "27.4.5",
-      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.4.5.tgz",
-      "integrity": "sha512-f2s8kEdy15cv9r7q4KkzGXvlY0JTcmCbMHZBfSQDwW77REr45IDWwd0lksDFeVHH2jJ5pqb90T77XscrjeGzzg==",
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
+      "integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==",
       "dev": true,
       "requires": {
         "@types/node": "*",
diff --git a/package.json b/package.json
index e07f01c..6c22b7b 100644
--- a/package.json
+++ b/package.json
@@ -10,14 +10,17 @@
     "lint": "next lint",
     "test": "jest --runInBand",
     "prettify": "npx prettier --write src/",
-    "db:push": "prisma db push"
+    "db:push": "prisma db push",
+    "db:generate": "prisma generate",
+    "migrate:prod": "prisma migrate deploy",
+    "db:seed": "ts-node prisma/seed/index.ts"
   },
   "dependencies": {
     "@maptiler/geocoder": "^1.1.0",
     "@next-auth/prisma-adapter": "^0.5.2-next.19",
     "@prisma/client": "^3.6.0",
     "@types/react": "^17.0.27",
-    "argon2": "^0.28.3",
+    "argon2": "^0.28.5",
     "axios": "^0.24.0",
     "babel-plugin-superjson-next": "^0.4.2",
     "next": "^12.0.7",
@@ -44,7 +47,7 @@
     "@types/supertest": "^2.0.11",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
-    "babel-jest": "^27.2.3",
+    "babel-jest": "^27.5.1",
     "dotenv": "^14.3.2",
     "eslint": "^7.32.0",
     "eslint-config-next": "11.1.2",
diff --git a/prisma/seed/index.ts b/prisma/seed/index.ts
index 4c9bf63..260a5e1 100644
--- a/prisma/seed/index.ts
+++ b/prisma/seed/index.ts
@@ -1,9 +1,9 @@
-import { PrismaClient, Puzzle, PuzzleType } from '@prisma/client';
+import { PrismaClient, Difficulty } from '@prisma/client';
+import type { Puzzle, PuzzleType } from '@prisma/client';
 
 const prisma = new PrismaClient();
 
 import seedData from './seed.json';
-import type { DIFFICULTY } from '../../src/types/global';
 
 const createPuzzleType = () => {
   const puzzleTypes = seedData.puzzleType;
@@ -18,7 +18,7 @@ const createPuzzleType = () => {
   );
 };
 
-const difficulties: DIFFICULTY[] = ['EASY', 'MEDIUM', 'HARD'];
+const difficulties: Difficulty[] = Object.values(Difficulty);
 
 const createPuzzle = (createdPuzzleTypes: PuzzleType[]) => {
   const puzzles = seedData.puzzle;
@@ -41,7 +41,7 @@ const createPuzzle = (createdPuzzleTypes: PuzzleType[]) => {
               id: puzzleType.id
             }
           },
-          difficulty: puzzle.difficulty as DIFFICULTY,
+          difficulty: puzzle.difficulty as Difficulty,
           content: puzzle.content,
           variables: puzzle.variables,
           question: puzzle.question,
@@ -68,7 +68,7 @@ const createPuzzleInstance = (createdPuzzles: Puzzle[]) => {
         hint: puzzleInstance.hint,
         longitude: parseFloat(puzzleInstance.longtitude),
         latitude: parseFloat(puzzleInstance.latitude),
-        address: puzzleInstance.address,
+        address: puzzleInstance.address
       }
     });
   });
diff --git a/src/__mocks__/pages/api/auth/index.ts b/src/__mocks__/pages/api/auth/index.ts
index cee877a..dfb828f 100644
--- a/src/__mocks__/pages/api/auth/index.ts
+++ b/src/__mocks__/pages/api/auth/index.ts
@@ -1,4 +1,4 @@
-import { User } from '@prisma/client';
+import type { User } from '@prisma/client';
 import * as faker from 'faker';
 import { prisma } from '../../..';
 
diff --git a/src/__mocks__/pages/api/puzzles/index.ts b/src/__mocks__/pages/api/puzzles/index.ts
index 923e091..237ec38 100644
--- a/src/__mocks__/pages/api/puzzles/index.ts
+++ b/src/__mocks__/pages/api/puzzles/index.ts
@@ -1,4 +1,4 @@
-import { Puzzle, PuzzleInstance, PuzzleType } from '@prisma/client';
+import type { Puzzle, PuzzleInstance, PuzzleType } from '@prisma/client';
 
 import { prisma } from '../../..';
 import {
diff --git a/src/__mocks__/pages/api/puzzles/instances/create.ts b/src/__mocks__/pages/api/puzzles/instances/create.ts
index 083948d..c72771b 100644
--- a/src/__mocks__/pages/api/puzzles/instances/create.ts
+++ b/src/__mocks__/pages/api/puzzles/instances/create.ts
@@ -1,9 +1,8 @@
 import * as faker from 'faker';
-import { DIFFICULTY } from '../../../../../types/global';
+import { Difficulty } from '@prisma/client';
 import { getRandomNumberRange, getRandomString } from '../../../../getRandom';
 
-// TODO: Ensure this list matches DB's configuration
-const DIFFICULTY_LIST = ['EASY', 'MEDIUM', 'HARD'];
+const DIFFICULTY_LIST = Object.values(Difficulty);
 
 export const mockName = (): string => {
   return faker.random.word() + faker.random.word() + faker.random.word();
@@ -13,10 +12,10 @@ export const mockContent = (): string => {
   return faker.lorem.paragraph();
 };
 
-export const mockDifficulty = (): DIFFICULTY => {
+export const mockDifficulty = (): Difficulty => {
   return DIFFICULTY_LIST[
     Math.floor(Math.random() * DIFFICULTY_LIST.length)
-  ] as DIFFICULTY;
+  ] as Difficulty;
 };
 
 export const mockOfficialAnswer = (): string => {
diff --git a/src/__tests__/pages/api/user/update-username.test.ts b/src/__tests__/pages/api/user/update-username.test.ts
index 04fd81d..7c5ed44 100644
--- a/src/__tests__/pages/api/user/update-username.test.ts
+++ b/src/__tests__/pages/api/user/update-username.test.ts
@@ -1,5 +1,5 @@
 import { NextApiRequest, NextApiResponse } from 'next';
-import { User } from '@prisma/client';
+import type { User } from '@prisma/client';
 import {
   mockEmail,
   mockPassword,
diff --git a/src/__tests__/utils/error.test.ts b/src/__tests__/utils/error.test.ts
index 271f7eb..b6fb2f1 100644
--- a/src/__tests__/utils/error.test.ts
+++ b/src/__tests__/utils/error.test.ts
@@ -1,5 +1,5 @@
 import { handleServiceError } from '../../utils/error';
-import { HandledError } from '../../types/error';
+import type { HandledError } from '../../types/error';
 
 describe('HTTP response status', () => {
   it('is 400', () => {
diff --git a/src/components/App/CardGrid/index.tsx b/src/components/App/CardGrid/index.tsx
index b9da8fb..960774e 100644
--- a/src/components/App/CardGrid/index.tsx
+++ b/src/components/App/CardGrid/index.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { PuzzleCard } from '../../Global';
 
 import styles from './CardGrid.module.scss';
-import { CardProps } from '../../../types/cards';
+import type { CardProps } from '../../../types/cards';
 
 const CardGrid = ({ cardList }: { cardList: CardProps[] }) => {
   return (
diff --git a/src/components/App/DisplayPuzzleInstances/index.tsx b/src/components/App/DisplayPuzzleInstances/index.tsx
index bbae03d..630cc32 100644
--- a/src/components/App/DisplayPuzzleInstances/index.tsx
+++ b/src/components/App/DisplayPuzzleInstances/index.tsx
@@ -1,13 +1,14 @@
 import * as React from 'react';
 import { useState, useEffect } from 'react';
 import styles from './DisplayPuzzleInstances.module.scss';
-import { PuzzleCustom } from '../../../types/api/puzzles/puzzle';
+import type { PuzzleCustom } from '../../../types/api/puzzles/puzzle';
 import { getAllPuzzleInstances } from '../../../services';
-import { PuzzleInstance } from '@prisma/client';
+import type { PuzzleInstance } from '@prisma/client';
 import { Button } from '../../Global';
 import { QRGenerator } from '../../App';
 import toast from 'react-hot-toast';
 import { getLinkToPuzzleInstance } from '../../../utils/getLinkToPuzzleInstance';
+import Router from 'next/router';
 
 type DisplayPuzzleInstancesProps = {
   puzzlesList: PuzzleCustom[];
@@ -26,6 +27,11 @@ const DisplayPuzzleInstances = ({
     setAllPuzzleInstances(await getAllPuzzleInstances());
   };
 
+  const handleRedirectToPuzzlePage = (puzzleInstanceId) => {
+    const linkToPuzzlePage = getLinkToPuzzleInstance(puzzleInstanceId);
+    Router.push(linkToPuzzlePage);
+  }
+
   useEffect(() => {
     getPuzzleInstances();
   }, [puzzlesList]);
@@ -99,7 +105,7 @@ const DisplayPuzzleInstances = ({
                     />
                   </div>
                   <div className={styles.puzzleInstancesBodyContentActions}>
-                    <Button
+                    {/* <Button
                       style="secondary"
                       content="View on map"
                       size="sm"
@@ -109,6 +115,16 @@ const DisplayPuzzleInstances = ({
                         // TODO: View on map service
                         toast('Coming soon ✨');
                       }}
+                    /> */}
+                    <Button
+                      style="secondary"
+                      content="View Puzzle"
+                      size="sm"
+                      type="button"
+                      arrowDirection="right"
+                      onClick={() => {
+                        handleRedirectToPuzzlePage(puzzleInstance.id);
+                      }}
                     />
                     <Button
                       style="primary"
diff --git a/src/components/App/FeedbackGif/index.tsx b/src/components/App/FeedbackGif/index.tsx
index 83a494d..dcc5e28 100644
--- a/src/components/App/FeedbackGif/index.tsx
+++ b/src/components/App/FeedbackGif/index.tsx
@@ -1,4 +1,4 @@
-import { FeedbackGifProps } from '../../../types/feedbackGif';
+import type { FeedbackGifProps } from '../../../types/feedbackGif';
 import Image from 'next/image';
 import styles from './FeedbackGif.module.scss';
 
diff --git a/src/components/App/MapGeocoder/index.tsx b/src/components/App/MapGeocoder/index.tsx
index 462252e..f101dcf 100644
--- a/src/components/App/MapGeocoder/index.tsx
+++ b/src/components/App/MapGeocoder/index.tsx
@@ -3,7 +3,7 @@ import { Geocoder } from '@maptiler/geocoder';
 import { Button, Input } from '../../Global';
 
 import mapGeocoderStyles from './MapGeocoder.module.scss';
-import { MapAnchor } from '../../../types/map';
+import type { MapAnchor } from '../../../types/map';
 
 const MAPTILER_ACCESS_TOKEN = process.env.NEXT_PUBLIC_MAPTILER_ACCESS_TOKEN;
 
diff --git a/src/components/App/MapRenderer/index.tsx b/src/components/App/MapRenderer/index.tsx
index 80c3b75..3127847 100644
--- a/src/components/App/MapRenderer/index.tsx
+++ b/src/components/App/MapRenderer/index.tsx
@@ -2,7 +2,11 @@ import React from 'react';
 import { Map, Marker, ZoomControl } from 'pigeon-maps';
 import { maptiler } from 'pigeon-maps/providers';
 import mapRendererStyles from './MapRenderer.module.scss';
-import { MapAnchor, MapMarker, MapRendererProps } from '../../../types/map';
+import type {
+  MapAnchor,
+  MapMarker,
+  MapRendererProps
+} from '../../../types/map';
 
 const MAPTILER_ACCESS_TOKEN = process.env.NEXT_PUBLIC_MAPTILER_ACCESS_TOKEN;
 
diff --git a/src/components/App/PuzzleGenerate/index.tsx b/src/components/App/PuzzleGenerate/index.tsx
index 1edc4da..b0821f3 100644
--- a/src/components/App/PuzzleGenerate/index.tsx
+++ b/src/components/App/PuzzleGenerate/index.tsx
@@ -7,7 +7,7 @@ import Modal from 'react-modal';
 import { Button, Input } from '../../Global';
 import { LocationSearchModal } from '..';
 import { createPuzzleInstance } from '../../../services';
-import { PuzzleCustom } from '../../../types/api/puzzles/puzzle';
+import type { PuzzleCustom } from '../../../types/api/puzzles/puzzle';
 
 const PuzzleGenerate = ({ puzzlesList, modalIsOpen, setModalIsOpen }) => {
   const [hint, setHint] = useState('');
@@ -42,7 +42,7 @@ const PuzzleGenerate = ({ puzzlesList, modalIsOpen, setModalIsOpen }) => {
       <div className={styles.form}>
         <h3> Set New Puzzle Location </h3>
         <div className={styles.selectionWrapper}>
-          {puzzlesList.length > 0 ? (
+          {puzzlesList ? (
             <select
               className={styles.selections}
               value={puzzleId}
diff --git a/src/components/App/PuzzleInfomation/index.tsx b/src/components/App/PuzzleInfomation/index.tsx
index 7d8103c..4a62842 100644
--- a/src/components/App/PuzzleInfomation/index.tsx
+++ b/src/components/App/PuzzleInfomation/index.tsx
@@ -1,8 +1,54 @@
 import * as React from 'react';
-import { PuzzleCustom } from '../../../types/api/puzzles/puzzle';
+import type { PuzzleInstance, Submission } from '@prisma/client';
+import type { PuzzleCustom } from '../../../types/api/puzzles/puzzle';
 import styles from './PuzzleInfomation.module.scss';
+import { getAllPuzzleInstances, getAllSubmissions } from '../../../services';
 
 const PuzzleInfomation = ({ puzzlesList }: { puzzlesList: PuzzleCustom[] }) => {
+  const [puzzleInstances, setPuzzleInstances] = React.useState<
+    PuzzleInstance[]
+  >([]);
+  const [submissions, setSubmissions] = React.useState<Submission[]>([]);
+
+  // TODO: apply SWR
+  React.useEffect(() => {
+    getAllPuzzleInstances().then((res: PuzzleInstance[]) => {
+      setPuzzleInstances(res);
+    });
+    getAllSubmissions().then((res: Submission[]) => {
+      setSubmissions(res);
+    });
+  }, []);
+
+  const calculateSuccessRate = (puzzle: PuzzleCustom) => {
+    const puzzleId = puzzle.id;
+    console.log(puzzle, puzzleInstances, submissions);
+
+    const filteredPuzzleInstances = puzzleInstances
+      ? puzzleInstances.filter(instance => instance.puzzleId === puzzleId)
+      : [];
+    let countSuccess = 0;
+    let totalLength = 0;
+    filteredPuzzleInstances &&
+      filteredPuzzleInstances.forEach(puzzleInstance => {
+        const filteredSubmissions = submissions
+          ? submissions.filter(
+            submission => submission.puzzleInstanceId === puzzleInstance.id
+          )
+          : [];
+        console.log(puzzle.name, filteredSubmissions);
+        totalLength += filteredSubmissions.length;
+        countSuccess += filteredSubmissions.reduce(
+          (a, b) => a + b.isCorrect.reduce((a, b) => a + (b ? 1 : 0), 0),
+          0
+        );
+      });
+    if (totalLength === 0) {
+      return 'No submission recorded';
+    }
+    return `${Math.round((countSuccess / totalLength) * 10000) / 100}%`; // Rounding float to 2 decimal place
+  };
+
   return (
     <div className={styles.contentWrap}>
       <h3>Puzzle Infomation</h3>
@@ -15,24 +61,22 @@ const PuzzleInfomation = ({ puzzlesList }: { puzzlesList: PuzzleCustom[] }) => {
       </div>
       <hr />
       <div className={styles.tableBody}>
-        {puzzlesList.map(puzzle => (
-          <div className={styles.tableRow} key={puzzle.id}>
-            <div>{puzzle.name}</div>
-            <div>{puzzle.difficulty}</div>
-            <div>
-              {/* TODO: Calculate success Rate */}
-              N/A
-            </div>
-            <div>
-              {/* TODO: Implement Age */}
-              N/A
-            </div>
-            <div>
-              {/* TODO: Implement Age */}
-              N/A
+        {puzzlesList &&
+          puzzlesList.map(puzzle => (
+            <div className={styles.tableRow} key={puzzle.id}>
+              <div>{puzzle.name}</div>
+              <div>{puzzle.difficulty}</div>
+              <div>{calculateSuccessRate(puzzle)}</div>
+              <div>
+                {/* TODO: Implement Age */}
+                N/A
+              </div>
+              <div>
+                {/* TODO: Implement Age */}
+                N/A
+              </div>
             </div>
-          </div>
-        ))}
+          ))}
       </div>
     </div>
   );
diff --git a/src/components/App/PuzzleInput/index.tsx b/src/components/App/PuzzleInput/index.tsx
index 443b909..bad811d 100644
--- a/src/components/App/PuzzleInput/index.tsx
+++ b/src/components/App/PuzzleInput/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { PuzzleInputProps } from '../../../types/puzzle';
+import type { PuzzleInputProps } from '../../../types/puzzle';
 import { Input } from '../../Global';
 
 import styles from './PuzzleInput.module.scss';
diff --git a/src/components/Global/AdminHeader/AdminHeader.module.scss b/src/components/Global/AdminHeader/AdminHeader.module.scss
new file mode 100644
index 0000000..0e65bac
--- /dev/null
+++ b/src/components/Global/AdminHeader/AdminHeader.module.scss
@@ -0,0 +1,11 @@
+@import '../../../styles/abstracts/_mixins/text';
+@import '../../../styles/abstracts/variables';
+
+.pageName {
+  @include font-header-extra-bold;
+  width: 100vw;
+  height: 3.4rem;
+  padding: 0 1.5rem 3rem;
+  font-size: 1.5rem;
+  border-bottom: $grey-transparency 1px solid;
+}
diff --git a/src/components/Global/AdminHeader/index.tsx b/src/components/Global/AdminHeader/index.tsx
new file mode 100644
index 0000000..b8aa90d
--- /dev/null
+++ b/src/components/Global/AdminHeader/index.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import styles from './AdminHeader.module.scss';
+
+const AdminHeader = () => {
+  const currentPage = 'Admin Dashboard';
+  return (
+    <div>
+      <div className={styles.pageName}>
+        <p>{currentPage}</p>
+      </div>
+    </div>
+  );
+};
+
+export default AdminHeader;
diff --git a/src/components/Global/Button/index.tsx b/src/components/Global/Button/index.tsx
index 0e61350..a155eba 100644
--- a/src/components/Global/Button/index.tsx
+++ b/src/components/Global/Button/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Link from 'next/link';
 import styles from './Button.module.scss';
-import {
+import type {
   ArrowDirectionType,
   ArrowType,
   ButtonContentProps,
diff --git a/src/components/Global/Difficulty/index.tsx b/src/components/Global/Difficulty/index.tsx
index cb4e909..9a2a96b 100644
--- a/src/components/Global/Difficulty/index.tsx
+++ b/src/components/Global/Difficulty/index.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DIFFICULTY } from '../../../types/global';
+import type { Difficulty as DIFFICULTY } from '@prisma/client';
 import { difficultySentenceCase } from '../../../utils/difficulty';
 import styles from './Difficulty.module.scss';
 
diff --git a/src/components/Global/Filter/index.tsx b/src/components/Global/Filter/index.tsx
index aded5f5..a3e08bc 100644
--- a/src/components/Global/Filter/index.tsx
+++ b/src/components/Global/Filter/index.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import RadioButton from '../RadioButton';
 import styles from './Filter.module.scss';
-import { FilterProps } from '../../../types/filter';
+import type { FilterProps } from '../../../types/filter';
 
 const Filter = ({ setFilterFields }: FilterProps) => {
   const [easyChecked, setEasyChecked] = useState(true);
diff --git a/src/components/Global/Input/index.tsx b/src/components/Global/Input/index.tsx
index 27fd4b0..50947b7 100644
--- a/src/components/Global/Input/index.tsx
+++ b/src/components/Global/Input/index.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import styles from './Input.module.scss';
-import { InputProps } from '../../../types/global';
+import type { InputProps } from '../../../types/global';
 
 const Input = ({
   type,
diff --git a/src/components/Global/LogStatusButton/index.tsx b/src/components/Global/LogStatusButton/index.tsx
index a7577aa..a3499c7 100644
--- a/src/components/Global/LogStatusButton/index.tsx
+++ b/src/components/Global/LogStatusButton/index.tsx
@@ -1,7 +1,7 @@
-import { Button } from '../index';
 import { signIn, signOut } from 'next-auth/react';
 import React from 'react';
-import { LogStatusButtonProps } from '../../../types/logStatusButton';
+import { Button } from '..';
+import type { LogStatusButtonProps } from '../../../types/logStatusButton';
 
 const LogStatusButton = ({ status, useLogIn }: LogStatusButtonProps) => {
   return status === 'authenticated' ? (
diff --git a/src/components/Global/Logo/index.tsx b/src/components/Global/Logo/index.tsx
index b81f112..7265383 100644
--- a/src/components/Global/Logo/index.tsx
+++ b/src/components/Global/Logo/index.tsx
@@ -3,7 +3,7 @@ import Image from 'next/image';
 import Link from 'next/link';
 import logo from '../../../../public/assets/logo.jpg';
 import logoStyles from './Logo.module.scss';
-import { LogoProps } from '../../../types/global';
+import type { LogoProps } from '../../../types/global';
 
 const LogoContent = ({ showMark, showType }: LogoProps) => {
   return (
diff --git a/src/components/Global/Navbar/index.tsx b/src/components/Global/Navbar/index.tsx
index 6d07712..b4ec01b 100644
--- a/src/components/Global/Navbar/index.tsx
+++ b/src/components/Global/Navbar/index.tsx
@@ -1,30 +1,30 @@
-import React, {useState, useEffect, useCallback} from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import styles from './Navbar.module.scss';
 
 import Link from 'next/link';
 import Image from 'next/image';
-import {useRouter} from 'next/router';
-import {Button, Logo, Sidebar, LogStatusButton} from '..';
-import {HeaderProps} from '../../../types/global';
-import {isAdmin} from '../../../services';
-import {useSession} from 'next-auth/react';
+import { useRouter } from 'next/router';
+import { Button, Logo, Sidebar, LogStatusButton } from '..';
+import type { HeaderProps } from '../../../types/global';
+import { isAdmin } from '../../../services';
+import { useSession } from 'next-auth/react';
 
-const Header = ({profilePicture}: HeaderProps) => {
+const Header = ({ profilePicture }: HeaderProps) => {
   const [activeTab, setActiveTab] = useState<0 | 1>(0);
   const router = useRouter();
   const [validAdmin, setValidAdmin] = useState(false);
-  const {data: session, status} = useSession();
+  const { data: session, status } = useSession();
   const email = session?.user?.email;
   const [menuOpen, setMenuOpen] = useState<boolean>(false);
-  
+
   useEffect(() => {
-    isAdmin({email}).then(res => setValidAdmin(res));
+    isAdmin({ email }).then(res => setValidAdmin(res));
   }, [email]);
-  
+
   const openMenu = () => {
     setMenuOpen(true);
   };
-  
+
   const NavContent = useCallback(
     (displayMenu: boolean) => {
       return (
@@ -53,11 +53,13 @@ const Header = ({profilePicture}: HeaderProps) => {
           </nav>
           {status !== 'authenticated' ? (
             <div className={styles.right}>
-              <LogStatusButton status={status} useLogIn/>
+              <LogStatusButton status={status} useLogIn />
             </div>
           ) : (
             <>
-              {validAdmin && <Button style={'flat'} content={'Admin'} link={'/admin'}/>}
+              {validAdmin && (
+                <Button style={'flat'} content={'Admin'} link={'/admin'} />
+              )}
               <Button
                 style={'outline'}
                 content={'Profile'}
@@ -80,10 +82,10 @@ const Header = ({profilePicture}: HeaderProps) => {
     },
     [router.asPath, status, validAdmin, profilePicture]
   );
-  
+
   return (
     <div className={styles.header}>
-      <Logo showMark={true} showType={true} link={true}/>
+      <Logo showMark={true} showType={true} link={true} />
       <div className={styles.header_content}>{NavContent(false)}</div>
       <button className={styles.header_menu__button} onClick={openMenu}>
         <svg
@@ -102,7 +104,7 @@ const Header = ({profilePicture}: HeaderProps) => {
         </svg>
       </button>
       <Sidebar sidebarOpen={menuOpen} setSidebarOpen={setMenuOpen}>
-        <Logo showMark={true} showType={false} link={true}/>
+        <Logo showMark={true} showType={false} link={true} />
         {NavContent(true)}
       </Sidebar>
     </div>
diff --git a/src/components/Global/PuzzleCard/index.tsx b/src/components/Global/PuzzleCard/index.tsx
index 2480e93..c93fe47 100644
--- a/src/components/Global/PuzzleCard/index.tsx
+++ b/src/components/Global/PuzzleCard/index.tsx
@@ -1,10 +1,9 @@
 import * as React from 'react';
 
-import { Button } from '../';
-import { Difficulty } from '../';
+import { Button, Difficulty } from '../';
 
 import styles from './PuzzleCard.module.scss';
-import { CardProps } from '../../../types/cards';
+import type { CardProps } from '../../../types/cards';
 
 const PuzzleCard = ({
   name,
diff --git a/src/components/Global/RadioButton/index.tsx b/src/components/Global/RadioButton/index.tsx
index 279c94e..a23c44b 100644
--- a/src/components/Global/RadioButton/index.tsx
+++ b/src/components/Global/RadioButton/index.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import styles from './RadioButton.module.scss';
 import { RadioButtonProps } from '../../../types/radioButton';
-import { DIFFICULTY } from '../../../types/global';
+import type { Difficulty } from '@prisma/client';
 
-const getLabelColor = (difficulty: DIFFICULTY) => {
+const getLabelColor = (difficulty: Difficulty) => {
   if (difficulty === 'EASY') return styles.easy;
   if (difficulty === 'MEDIUM') return styles.medium;
   if (difficulty === 'HARD') return styles.hard;
diff --git a/src/components/Global/SearchAndFilter/index.tsx b/src/components/Global/SearchAndFilter/index.tsx
index 3c54193..763d6c4 100644
--- a/src/components/Global/SearchAndFilter/index.tsx
+++ b/src/components/Global/SearchAndFilter/index.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { Filter, Input } from '../index';
 import styles from './SearchAndFilter.module.scss';
-import { SearchAndFilterProps } from '../../../types/searchAndFilter';
+import type { SearchAndFilterProps } from '../../../types/searchAndFilter';
 
 const SearchAndFilter = ({
   title,
diff --git a/src/components/Global/index.tsx b/src/components/Global/index.tsx
index 191a5ef..caf6f74 100644
--- a/src/components/Global/index.tsx
+++ b/src/components/Global/index.tsx
@@ -10,6 +10,7 @@ import LogStatusButton from './LogStatusButton';
 import SearchAndFilter from './SearchAndFilter';
 import Difficulty from './Difficulty';
 import Loading from './Loading';
+import AdminHeader from './AdminHeader';
 import Sidebar from './Sidebar';
 
 export {
@@ -25,5 +26,6 @@ export {
   SearchAndFilter,
   Difficulty,
   Loading,
+  AdminHeader,
   Sidebar
 };
diff --git a/src/pages/admin/index.tsx b/src/pages/admin/index.tsx
index a1a7c8b..2f9b06c 100644
--- a/src/pages/admin/index.tsx
+++ b/src/pages/admin/index.tsx
@@ -2,14 +2,15 @@ import * as React from 'react';
 import styles from '../../styles/pages/admin.module.scss';
 import Router from 'next/router';
 import { useSession } from 'next-auth/react';
+import { GetServerSideProps } from 'next';
 import {
   DisplayPuzzleInstances,
   PuzzleGenerate,
   PuzzleInfomation
 } from '../../components/App';
+import { Header } from '../../components/Product';
+import { AdminHeader } from '../../components/Global';
 import { getAllPuzzles, isAdmin } from '../../services';
-import { GetServerSideProps } from 'next';
-import { Header } from '../../components/Global';
 import type { PuzzleCustom } from '../../types/api/puzzles/puzzle';
 
 const Admin = ({ puzzlesList }: { puzzlesList: PuzzleCustom[] }) => {
@@ -17,8 +18,7 @@ const Admin = ({ puzzlesList }: { puzzlesList: PuzzleCustom[] }) => {
   return (
     <>
       <Header />
-      {/** TODO: Create Header for admin page  */}
-      <h1 className={styles.adminTitle}>Admin Dashboard</h1>
+      <AdminHeader />
       <div className={styles.contentWrap}>
         <div className={styles.contentLeftWrap}>
           <PuzzleGenerate
@@ -70,7 +70,6 @@ const AdminValidation = ({ puzzlesList }: { puzzlesList: PuzzleCustom[] }) => {
   return (
     status === 'unauthenticated' && (
       <>
-        {/** TODO: Create Header for admin page  */}
         You are not authenticated <br />
         <button onClick={() => Router.push('/')}>Home</button>
       </>
diff --git a/src/pages/api/auth/reset-password.ts b/src/pages/api/auth/reset-password.ts
index 8d95129..306b0dd 100644
--- a/src/pages/api/auth/reset-password.ts
+++ b/src/pages/api/auth/reset-password.ts
@@ -2,7 +2,7 @@ import { PrismaClient } from '@prisma/client';
 import { NextApiRequest, NextApiResponse } from 'next';
 
 import { checkHash, hashFunction } from '../../../utils/password';
-import { resetPasswordProps } from '../../../types/api/auth/reset-password';
+import type { resetPasswordProps } from '../../../types/api/auth/reset-password';
 
 const prisma = new PrismaClient();
 
diff --git a/src/pages/api/auth/signup.ts b/src/pages/api/auth/signup.ts
index 5a68ff3..8a0867b 100644
--- a/src/pages/api/auth/signup.ts
+++ b/src/pages/api/auth/signup.ts
@@ -2,7 +2,7 @@ import { PrismaAdapter } from '@next-auth/prisma-adapter';
 import { PrismaClient } from '@prisma/client';
 import { NextApiRequest, NextApiResponse } from 'next';
 import { hashFunction } from '../../../utils/password';
-import { signUpData } from '../../../types/api/auth/sign-up';
+import type { signUpData } from '../../../types/api/auth/sign-up';
 
 const prisma = new PrismaClient();
 
diff --git a/src/pages/api/puzzles/[id].tsx b/src/pages/api/puzzles/[id].ts
similarity index 100%
rename from src/pages/api/puzzles/[id].tsx
rename to src/pages/api/puzzles/[id].ts
diff --git a/src/pages/api/puzzles/index.tsx b/src/pages/api/puzzles/index.ts
similarity index 100%
rename from src/pages/api/puzzles/index.tsx
rename to src/pages/api/puzzles/index.ts
diff --git a/src/pages/api/puzzles/instances/[instanceId]/index.ts b/src/pages/api/puzzles/instances/[instanceId]/index.ts
index 86ac7e0..6d4aeb4 100644
--- a/src/pages/api/puzzles/instances/[instanceId]/index.ts
+++ b/src/pages/api/puzzles/instances/[instanceId]/index.ts
@@ -12,7 +12,7 @@ const getPuzzleInstanceHandler = async (
     verbose: string;
   };
 
-  const verboseBool = verbose.toLowerCase() === 'true'; // TODO: seems weak
+  const verboseBool = /true/i.test(verbose.toLowerCase());
 
   if (!instanceId) {
     return res.status(400).json({
diff --git a/src/pages/api/puzzles/instances/create.ts b/src/pages/api/puzzles/instances/create.ts
index 82e73e8..5b776d7 100644
--- a/src/pages/api/puzzles/instances/create.ts
+++ b/src/pages/api/puzzles/instances/create.ts
@@ -1,4 +1,5 @@
-import { PrismaClient, PuzzleInstance } from '@prisma/client';
+import { PrismaClient } from '@prisma/client';
+import type { PuzzleInstance } from '@prisma/client';
 import { NextApiRequest, NextApiResponse } from 'next';
 
 const prisma = new PrismaClient();
diff --git a/src/pages/api/submissions/index.ts b/src/pages/api/submissions/index.ts
new file mode 100644
index 0000000..30c949e
--- /dev/null
+++ b/src/pages/api/submissions/index.ts
@@ -0,0 +1,20 @@
+import { PrismaClient } from '@prisma/client';
+import { NextApiRequest, NextApiResponse } from 'next';
+
+const prisma = new PrismaClient();
+
+const listAllSubmissions = async (
+  req: NextApiRequest,
+  res: NextApiResponse
+) => {
+  try {
+    const submissions = await prisma.submission.findMany();
+    return res.status(200).json(submissions);
+  } catch (error) {
+    return res.status(500).json({
+      message: error.message
+    });
+  }
+};
+
+export default listAllSubmissions;
diff --git a/src/pages/auth/login/index.tsx b/src/pages/auth/login/index.tsx
index e7c4475..35ca324 100644
--- a/src/pages/auth/login/index.tsx
+++ b/src/pages/auth/login/index.tsx
@@ -17,6 +17,7 @@ export default function LoginPage({ providers, csrfToken }) {
   const loginWithGoogle = () => {
     signIn('google').then(r => {
       // TODO: save session into db (?)
+      console.log(r);
       console.log('Signed in with Google');
     });
   };
diff --git a/src/pages/auth/profile/index.tsx b/src/pages/auth/profile/index.tsx
index 32a896e..362c693 100644
--- a/src/pages/auth/profile/index.tsx
+++ b/src/pages/auth/profile/index.tsx
@@ -9,7 +9,8 @@ import {
   getUserByEmail,
   updateUsername
 } from '../../../services';
-import { Header, Input, Button } from '../../../components/Global';
+import { Input, Button } from '../../../components/Global';
+import { Header } from '../../../components/Product';
 import styles from '../../../styles/pages/profile.module.scss';
 
 const ProfilePage = () => {
@@ -26,7 +27,7 @@ const ProfilePage = () => {
   const [confirmPass, setConfirmPass] = useState('');
 
   useEffect(() => {
-    if (!session) return;
+    if (!session || !session.user) return;
     setUsername(session.user.name);
     setUserImg(session.user.image);
     setUserEmail(session.user.email);
@@ -41,6 +42,7 @@ const ProfilePage = () => {
   useEffect(() => {
     getUserByEmail({ email: userEmail })
       .then(user => {
+        if (!user) return;
         if (user?.password) setHasPassword(true);
         if (user.name) setUsername(user.name);
       })
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index a885044..43c1625 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { useSession } from 'next-auth/react';
 import { Header, Footer, LandingContent } from '../components/Product';
 
-const Home: React.FC = () => {
+const Home = () => {
   const { data: session, status } = useSession();
 
   if (status === 'authenticated') {
diff --git a/src/pages/puzzles/[instanceId]/index.tsx b/src/pages/puzzles/[instanceId]/index.tsx
index d8ce38e..e377191 100644
--- a/src/pages/puzzles/[instanceId]/index.tsx
+++ b/src/pages/puzzles/[instanceId]/index.tsx
@@ -1,20 +1,23 @@
 import React, { useState } from 'react';
-import { GetServerSideProps } from 'next';
+import styles from '../../../styles/pages/PuzzlePage.module.scss';
 import Image from 'next/image';
-import { getSession, signIn, useSession } from 'next-auth/react';
-import { User } from 'next-auth';
-import { Prisma, Puzzle } from '@prisma/client';
+import Router from 'next/router';
 import toast from 'react-hot-toast';
+
+import { Prisma } from '@prisma/client';
+import { GetServerSideProps } from 'next';
+import { User } from 'next-auth';
+import { getSession, signIn, useSession } from 'next-auth/react';
 import { Button, Difficulty, Navbar } from '../../../components/Global';
 import { FeedbackGif, PuzzleInput } from '../../../components/App';
 import { getPuzzleInstance, submitPuzzleInstance } from '../../../services';
-import { PuzzleInstanceCustom } from '../../../types/api/puzzles/instances/puzzleInstance';
-import styles from '../../../styles/pages/PuzzlePage.module.scss';
-import { HandledError } from '../../../types/error';
 import { initializeRandomGifSrc } from '../../../services/feedbackGif';
-import { FeedbackGifList } from '../../../types/feedbackGif';
 import { getRandomGifSrc } from '../../../utils/feedbackGif';
-import Router from 'next/router';
+
+import type { Puzzle } from '@prisma/client';
+import type { HandledError } from '../../../types/error';
+import type { FeedbackGifList } from '../../../types/feedbackGif';
+import type { PuzzleInstanceCustom } from '../../../types/api/puzzles/instances/puzzleInstance';
 
 const PuzzlePage = ({
   puzzleInstance,
@@ -169,23 +172,25 @@ const PuzzlePage = ({
               setAnswer={setAnswer}
             />
           </div>
-          {isAuthenticated ? (
-            <Button
-              style={'primary'}
-              type={'submit'}
-              content={'Submit'}
-              onClick={() =>
-                handleSubmit(answer, puzzleInstance, puzzle, randomSeed, user)
-              }
-            />
-          ) : (
-            <Button
-              style={'primary'}
-              content={'Login to Submit'}
-              arrowDirection={'right'}
-              onClick={() => signIn()}
-            />
-          )}
+          <div>
+            {isAuthenticated ? (
+              <Button
+                style={'primary'}
+                type={'submit'}
+                content={'Submit'}
+                onClick={() =>
+                  handleSubmit(answer, puzzleInstance, puzzle, randomSeed, user)
+                }
+              />
+            ) : (
+              <Button
+                style={'primary'}
+                content={'Login to Submit'}
+                arrowDirection={'right'}
+                onClick={() => signIn()}
+              />
+            )}
+          </div>
         </section>
       </main>
     </>
diff --git a/src/pages/puzzles/index.tsx b/src/pages/puzzles/index.tsx
index 831233e..c5c26eb 100644
--- a/src/pages/puzzles/index.tsx
+++ b/src/pages/puzzles/index.tsx
@@ -27,43 +27,44 @@ const PuzzleList = () => {
         setSearchNFilterVal={setSearchNFilter}
       />
       <div className={styles.cardGrid}>
-        <CardGrid
-          cardList={puzzleInstances
-            .filter(instance => {
-              if (searchNFilter.searchText) {
-                return (
-                  searchNFilter.filterFields[instance.puzzle.difficulty] ===
-                    true &&
-                  instance.puzzle.name
-                    .toLowerCase()
-                    .includes(searchNFilter.searchText.toLowerCase())
-                );
-              } else {
-                return (
-                  searchNFilter.filterFields[instance.puzzle.difficulty] ===
-                  true
-                );
-              }
-            })
-            .map(instance => {
-              // TODO: link to view on map
-              // TODO: properly handle truncations (i.e. the ... at the end of sliced strings)
-              return {
-                name: instance.puzzle.name,
-                content: [
-                  `${instance.puzzle.content.join('\n').slice(0, 150)} ...`
-                ],
-                difficulty: instance.puzzle.difficulty,
-                buttonActions: [
-                  {
-                    text: 'Solve Online',
-                    style: 'primary',
-                    link: `/puzzles/${instance.id}`
-                  }
-                ]
-              };
-            })}
-        />
+        {puzzleInstances && (
+          <CardGrid
+            cardList={puzzleInstances
+              .filter(instance => {
+                if (searchNFilter.searchText) {
+                  return (
+                    searchNFilter.filterFields[instance.puzzle.difficulty] &&
+                    instance.puzzle.name
+                      .toLowerCase()
+                      .includes(searchNFilter.searchText.toLowerCase())
+                  );
+                } else {
+                  return (
+                    searchNFilter.filterFields[instance.puzzle.difficulty] ===
+                    true
+                  );
+                }
+              })
+              .map(instance => {
+                // TODO: link to view on map
+                // TODO: properly handle truncations (i.e. the ... at the end of sliced strings)
+                return {
+                  name: instance.puzzle.name,
+                  content: [
+                    `${instance.puzzle.content.join('\n').slice(0, 150)} ...`
+                  ],
+                  difficulty: instance.puzzle.difficulty,
+                  buttonActions: [
+                    {
+                      text: 'Solve Online',
+                      style: 'primary',
+                      link: `/puzzles/${instance.id}`
+                    }
+                  ]
+                };
+              })}
+          />
+        )}
       </div>
     </>
   );
diff --git a/src/services/getUserByEmail.ts b/src/services/getUserByEmail.ts
index af35061..8b242b3 100644
--- a/src/services/getUserByEmail.ts
+++ b/src/services/getUserByEmail.ts
@@ -1,4 +1,4 @@
-import { User } from '@prisma/client';
+import type { User } from '@prisma/client';
 import Axios from './axios';
 
 export const getUserByEmail = async (data: {
diff --git a/src/services/index.ts b/src/services/index.ts
index 14dd52c..f4bb4d8 100644
--- a/src/services/index.ts
+++ b/src/services/index.ts
@@ -1,25 +1,13 @@
-import { signUp } from './signup';
-import { resetPassword } from './resetPassword';
-import { getAllPuzzles } from './puzzle';
-import {
+export { signUp } from './signup';
+export { resetPassword } from './resetPassword';
+export { getAllPuzzles } from './puzzle';
+export {
   getAllPuzzleInstances,
   getPuzzleInstance,
   createPuzzleInstance,
   submitPuzzleInstance
 } from './puzzleInstance';
-import { isAdmin } from './admin';
-import { getUserByEmail } from './getUserByEmail';
-import { updateUsername } from './updateUsername';
-
-export {
-  signUp,
-  resetPassword,
-  getAllPuzzles,
-  getAllPuzzleInstances,
-  getPuzzleInstance,
-  createPuzzleInstance,
-  submitPuzzleInstance,
-  isAdmin,
-  getUserByEmail,
-  updateUsername
-};
+export { isAdmin } from './admin';
+export { getUserByEmail } from './getUserByEmail';
+export { updateUsername } from './updateUsername';
+export { getAllSubmissions } from './submissions';
diff --git a/src/services/puzzleInstance.ts b/src/services/puzzleInstance.ts
index 42af87e..7f165b9 100644
--- a/src/services/puzzleInstance.ts
+++ b/src/services/puzzleInstance.ts
@@ -1,7 +1,7 @@
 import Axios from './axios';
-import { Puzzle, PuzzleInstance } from '@prisma/client';
+import type { Puzzle, PuzzleInstance } from '@prisma/client';
 import { User } from 'next-auth';
-import { puzzleSubmissionProps } from '../types/api/puzzles/submission';
+import type { puzzleSubmissionProps } from '../types/api/puzzles/submission';
 import { handleServiceError } from '../utils/error';
 
 const getAllPuzzleInstances = async (verbose: boolean = false) => {
diff --git a/src/services/submissions.ts b/src/services/submissions.ts
new file mode 100644
index 0000000..6ac4fee
--- /dev/null
+++ b/src/services/submissions.ts
@@ -0,0 +1,17 @@
+import Axios from './axios';
+import { handleServiceError } from '../utils/error';
+
+export const getAllSubmissions = async () => {
+  try {
+    const res = await Axios.get(`api/submissions`);
+    if (res.status === 200) {
+      console.log('api', res);
+      return res.data;
+    }
+  } catch (error) {
+    return handleServiceError(
+      error.response.status,
+      error.response.data.message
+    );
+  }
+};
diff --git a/src/services/updateUsername.ts b/src/services/updateUsername.ts
index 9e05ef9..50ff0e0 100644
--- a/src/services/updateUsername.ts
+++ b/src/services/updateUsername.ts
@@ -1,4 +1,4 @@
-import { User } from '@prisma/client';
+import type { User } from '@prisma/client';
 import Axios from './axios';
 
 export const updateUsername = async (data: {
diff --git a/src/styles/pages/PuzzlePage.module.scss b/src/styles/pages/PuzzlePage.module.scss
index 34cbe0a..5bf133d 100644
--- a/src/styles/pages/PuzzlePage.module.scss
+++ b/src/styles/pages/PuzzlePage.module.scss
@@ -22,8 +22,6 @@
   justify-content: space-between;
 
   .text {
-    flex: 0 0 65%;
-    max-width: 65%;
     width: 100%;
     padding: 2rem 2rem;
 
@@ -52,8 +50,7 @@
   }
 
   .image {
-    flex: 0 0 35%;
-    max-width: 35%;
+    flex: 1;
     position: relative;
     width: 100%;
     height: auto;
@@ -94,3 +91,45 @@
 .feedbackContainer {
   margin: 3rem 0;
 }
+
+/* MEDIA QUERIES*/
+@media (max-width: 600px) {
+  .card {
+    max-width: 600px;
+    flex-direction: column;
+  }
+}
+@media (max-width: 768px) {
+  .card {
+    max-width: 720px;
+    flex-direction: column;
+  }
+}
+@media (max-width: 992px) {
+  .card {
+    max-width: 960px;
+    flex-direction: column;
+  }
+}
+@media (max-width: 1200px) {
+  .card {
+    max-width: 1140px;
+  }
+  .text {
+    flex: 0 0 65%;
+  }
+  .image {
+    flex: 0 0 35%;
+  }
+}
+@media (min-width: 1200px) {
+  .card {
+    min-width: 1140px;
+  }
+  .text {
+    flex: 0 0 65%;
+  }
+  .image {
+    flex: 0 0 35%;
+  }
+}
diff --git a/src/types/api/puzzles/instances/puzzleInstance.ts b/src/types/api/puzzles/instances/puzzleInstance.ts
index 079b123..244fe95 100644
--- a/src/types/api/puzzles/instances/puzzleInstance.ts
+++ b/src/types/api/puzzles/instances/puzzleInstance.ts
@@ -1,4 +1,4 @@
-import { PuzzleInstance } from '@prisma/client';
+import type { PuzzleInstance } from '@prisma/client';
 import { PuzzleCustom } from '../puzzle';
 
 export type PuzzleInstanceCustom = PuzzleInstance & {
diff --git a/src/types/api/puzzles/puzzle.ts b/src/types/api/puzzles/puzzle.ts
index 7712d4c..32194ea 100644
--- a/src/types/api/puzzles/puzzle.ts
+++ b/src/types/api/puzzles/puzzle.ts
@@ -1,4 +1,4 @@
-import { Puzzle, PuzzleType } from '@prisma/client';
+import type { Puzzle, PuzzleType } from '@prisma/client';
 
 export type PuzzleCustom = Puzzle & {
   puzzleType?: PuzzleType;
diff --git a/src/types/cards.ts b/src/types/cards.ts
index 146fd2a..919db01 100644
--- a/src/types/cards.ts
+++ b/src/types/cards.ts
@@ -1,4 +1,4 @@
-import { DIFFICULTY } from './global';
+import type { Difficulty } from '@prisma/client';
 
 import { ButtonAction } from './button';
 
@@ -6,7 +6,7 @@ export type CARD_TYPE = 'list' | 'grid';
 export type CardProps = {
   name: string;
   content: string[];
-  difficulty: DIFFICULTY;
+  difficulty: Difficulty;
   type?: CARD_TYPE;
   buttonActions?: ButtonAction[];
 };
diff --git a/src/types/global.ts b/src/types/global.ts
index 661e9ba..5555b02 100644
--- a/src/types/global.ts
+++ b/src/types/global.ts
@@ -1,7 +1,5 @@
 import { Dispatch, SetStateAction } from 'react';
 
-export type DIFFICULTY = 'HARD' | 'MEDIUM' | 'EASY';
-
 export type HeaderProps = {
   profilePicture?: string;
 };
diff --git a/src/types/radioButton.ts b/src/types/radioButton.ts
index ef0fce8..b6d1477 100644
--- a/src/types/radioButton.ts
+++ b/src/types/radioButton.ts
@@ -1,8 +1,8 @@
-import { DIFFICULTY } from './global';
+import { Difficulty } from '@prisma/client';
 
 export type RadioButtonProps = {
   id: string;
   name: string;
-  difficulty: DIFFICULTY;
+  difficulty: Difficulty;
   onClick?: () => void;
 };
diff --git a/src/utils/difficulty.ts b/src/utils/difficulty.ts
index 5c71548..06558c0 100644
--- a/src/utils/difficulty.ts
+++ b/src/utils/difficulty.ts
@@ -1,6 +1,6 @@
-import { DIFFICULTY } from '../types/global';
+import { Difficulty } from '@prisma/client';
 
-const difficultySentenceCase = (difficulty: DIFFICULTY) => {
+const difficultySentenceCase = (difficulty: Difficulty) => {
   return difficulty.charAt(0).toUpperCase() + difficulty.slice(1).toLowerCase();
 };
 
diff --git a/src/utils/error.ts b/src/utils/error.ts
index ca60ee9..0838f58 100644
--- a/src/utils/error.ts
+++ b/src/utils/error.ts
@@ -1,4 +1,4 @@
-import { HandledError } from '../types/error';
+import type { HandledError } from '../types/error';
 
 const handleServiceError = (status, message?) => {
   if (status === 400) {
diff --git a/src/utils/password.ts b/src/utils/password.ts
index 399551f..e9a36dd 100644
--- a/src/utils/password.ts
+++ b/src/utils/password.ts
@@ -1,19 +1,21 @@
 import argon2 from 'argon2';
 
-const hashFunction = (secret: string) => {
-  try {
-    return argon2.hash(secret, { type: argon2.argon2id });
-  } catch (err) {
-    throw err;
-  }
+const hashFunction = (secret: string): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    argon2
+      .hash(secret, { type: argon2.argon2id })
+      .then(hash => resolve(hash))
+      .catch(err => reject(err));
+  });
 };
 
-const checkHash = (secret: string, hashValue: string) => {
-  try {
-    return argon2.verify(hashValue, secret);
-  } catch (err) {
-    throw err;
-  }
+const checkHash = (secret: string, hashValue: string): Promise<boolean> => {
+  return new Promise((resolve, _reject) => {
+    argon2
+      .verify(hashValue, secret)
+      .then(res => resolve(res))
+      .catch(() => resolve(false));
+  });
 };
 
 export { hashFunction, checkHash };
diff --git a/src/utils/puzzles.ts b/src/utils/puzzles.ts
index debf2e9..cf74261 100644
--- a/src/utils/puzzles.ts
+++ b/src/utils/puzzles.ts
@@ -1,4 +1,4 @@
-import { Puzzle } from '@prisma/client';
+import type { Puzzle } from '@prisma/client';
 
 const checkPuzzleAnswer = (
   puzzle: Puzzle,
diff --git a/tsconfig.json b/tsconfig.json
index 718b7ef..a2050e9 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -15,7 +15,7 @@
     "strict": false,
     "forceConsistentCasingInFileNames": true,
     "noFallthroughCasesInSwitch": true,
-    "module": "esnext",
+    "module": "commonjs",
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,