diff --git a/package-lock.json b/package-lock.json
index 391dc8f..1256954 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2284,6 +2284,21 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/@eslint/eslintrc/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
     "node_modules/@eslint/eslintrc/node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -2314,6 +2329,11 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/@eslint/eslintrc/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+    },
     "node_modules/@eslint/eslintrc/node_modules/type-fest": {
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
@@ -5421,7 +5441,7 @@
         "node": ">= 6.0.0"
       }
     },
-    "node_modules/ajv": {
+   "node_modules/ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
@@ -5452,6 +5472,8 @@
         }
       }
     },
+
+
     "node_modules/ajv-formats/node_modules/ajv": {
       "version": "8.12.0",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
@@ -5480,6 +5502,7 @@
         "ajv": "^6.9.1"
       }
     },
+
     "node_modules/ansi-escapes": {
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
@@ -5942,6 +5965,34 @@
         "webpack": ">=2"
       }
     },
+    "node_modules/babel-loader/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/babel-loader/node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
+    "node_modules/babel-loader/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+    },
     "node_modules/babel-loader/node_modules/schema-utils": {
       "version": "2.7.1",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
@@ -6920,7 +6971,7 @@
         }
       }
     },
-    "node_modules/css-minimizer-webpack-plugin/node_modules/ajv": {
+"node_modules/css-minimizer-webpack-plugin/node_modules/ajv": {
       "version": "8.12.0",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
       "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
@@ -6946,7 +6997,7 @@
         "ajv": "^8.8.2"
       }
     },
-    "node_modules/css-minimizer-webpack-plugin/node_modules/json-schema-traverse": {
+ "node_modules/css-minimizer-webpack-plugin/node_modules/json-schema-traverse": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
       "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
@@ -8235,7 +8286,7 @@
         "webpack": "^5.0.0"
       }
     },
-    "node_modules/eslint-webpack-plugin/node_modules/ajv": {
+"node_modules/eslint-webpack-plugin/node_modules/ajv": {
       "version": "8.12.0",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
       "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
@@ -8319,6 +8370,21 @@
         "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
+    "node_modules/eslint/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
     "node_modules/eslint/node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -8413,6 +8479,11 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/eslint/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+    },
     "node_modules/eslint/node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -8919,6 +8990,29 @@
         }
       }
     },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
     "node_modules/fork-ts-checker-webpack-plugin/node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -9001,6 +9095,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+    },
     "node_modules/fork-ts-checker-webpack-plugin/node_modules/lru-cache": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -9144,6 +9243,19 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -13932,7 +14044,7 @@
       "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
       "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA=="
     },
-    "node_modules/json-schema-traverse": {
+  "node_modules/json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
       "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
@@ -14356,7 +14468,7 @@
         "webpack": "^5.0.0"
       }
     },
-    "node_modules/mini-css-extract-plugin/node_modules/ajv": {
+"node_modules/mini-css-extract-plugin/node_modules/ajv": {
       "version": "8.12.0",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
       "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
@@ -14382,7 +14494,7 @@
         "ajv": "^8.8.2"
       }
     },
-    "node_modules/mini-css-extract-plugin/node_modules/json-schema-traverse": {
+  "node_modules/mini-css-extract-plugin/node_modules/json-schema-traverse": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
       "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
@@ -17466,6 +17578,34 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/schema-utils/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/schema-utils/node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
+    "node_modules/schema-utils/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+    },
     "node_modules/select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -18794,17 +18934,17 @@
         "is-typedarray": "^1.0.0"
       }
     },
-    "node_modules/typescript": {
-      "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz",
-      "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==",
+"node_modules/typescript": {
+      "version": "4.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
       "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
       },
       "engines": {
-        "node": ">=14.17"
+        "node": ">=4.2.0"
       }
     },
     "node_modules/unbox-primitive": {
@@ -19175,7 +19315,7 @@
         "ajv": "^8.8.2"
       }
     },
-    "node_modules/webpack-dev-middleware/node_modules/json-schema-traverse": {
+   "node_modules/webpack-dev-middleware/node_modules/json-schema-traverse": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
       "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
@@ -19256,7 +19396,7 @@
         }
       }
     },
-    "node_modules/webpack-dev-server/node_modules/ajv": {
+"node_modules/webpack-dev-server/node_modules/ajv": {
       "version": "8.12.0",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
       "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
@@ -19282,7 +19422,7 @@
         "ajv": "^8.8.2"
       }
     },
-    "node_modules/webpack-dev-server/node_modules/json-schema-traverse": {
+ "node_modules/webpack-dev-server/node_modules/json-schema-traverse": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
       "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
@@ -19609,7 +19749,7 @@
         "node": ">=10.0.0"
       }
     },
-    "node_modules/workbox-build/node_modules/@apideck/better-ajv-errors": {
+"node_modules/workbox-build/node_modules/@apideck/better-ajv-errors": {
       "version": "0.3.6",
       "resolved": "https://registry.npmjs.org/@apideck/better-ajv-errors/-/better-ajv-errors-0.3.6.tgz",
       "integrity": "sha512-P+ZygBLZtkp0qqOAJJVX4oX/sFo5JR3eBWwwuqHHhK0GIgQOKWrAfiAaWX0aArHkRWHMuggFEgAZNxVPwPZYaA==",
@@ -19654,7 +19794,7 @@
         "node": ">=10"
       }
     },
-    "node_modules/workbox-build/node_modules/json-schema-traverse": {
+"node_modules/workbox-build/node_modules/json-schema-traverse": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
       "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
diff --git a/public/index.html b/public/index.html
index e29c0ed..9332e89 100644
--- a/public/index.html
+++ b/public/index.html
@@ -12,6 +12,16 @@
     <meta property="og:type" content="website">
     <meta property="og:image" content="https://acm-fun.vercel.app/logo192.png">
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Karla&family=Montserrat:wght@700;800&family=Varela&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Calligraffitti&family=Karla&family=Montserrat:wght@700;800&family=Varela&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Calligraffitti&family=Karla&family=Montserrat:wght@700;800&family=Roboto:ital,wght@1,300&family=Varela&display=swap" rel="stylesheet">
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
diff --git a/src/assets/games/jitter/clicksound.wav b/src/assets/games/jitter/clicksound.wav
new file mode 100644
index 0000000..2183344
Binary files /dev/null and b/src/assets/games/jitter/clicksound.wav differ
diff --git a/src/assets/games/jitter/goblinSound.mp3 b/src/assets/games/jitter/goblinSound.mp3
new file mode 100644
index 0000000..989e363
Binary files /dev/null and b/src/assets/games/jitter/goblinSound.mp3 differ
diff --git a/src/assets/games/jitter/image.jpg b/src/assets/games/jitter/image.jpg
new file mode 100644
index 0000000..8320798
Binary files /dev/null and b/src/assets/games/jitter/image.jpg differ
diff --git a/src/assets/games/jitter/logo.svg b/src/assets/games/jitter/logo.svg
new file mode 100644
index 0000000..9dfc1c0
--- /dev/null
+++ b/src/assets/games/jitter/logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/games/jitter/otherSound.mp3 b/src/assets/games/jitter/otherSound.mp3
new file mode 100644
index 0000000..2fef238
Binary files /dev/null and b/src/assets/games/jitter/otherSound.mp3 differ
diff --git a/src/assets/games/jitter/star1Sound.mp3 b/src/assets/games/jitter/star1Sound.mp3
new file mode 100644
index 0000000..cd2fb8b
Binary files /dev/null and b/src/assets/games/jitter/star1Sound.mp3 differ
diff --git a/src/assets/games/jitter/star2Sound.mp3 b/src/assets/games/jitter/star2Sound.mp3
new file mode 100644
index 0000000..064351f
Binary files /dev/null and b/src/assets/games/jitter/star2Sound.mp3 differ
diff --git a/src/assets/games/jitter/star3Sound.mp3 b/src/assets/games/jitter/star3Sound.mp3
new file mode 100644
index 0000000..4f1dc85
Binary files /dev/null and b/src/assets/games/jitter/star3Sound.mp3 differ
diff --git a/src/assets/games/jitter/star4Sound.mp3 b/src/assets/games/jitter/star4Sound.mp3
new file mode 100644
index 0000000..f868536
Binary files /dev/null and b/src/assets/games/jitter/star4Sound.mp3 differ
diff --git a/src/components/games/Jitter/ResultPrompt.js b/src/components/games/Jitter/ResultPrompt.js
new file mode 100644
index 0000000..bbb3cac
--- /dev/null
+++ b/src/components/games/Jitter/ResultPrompt.js
@@ -0,0 +1,131 @@
+import React, { useState, useEffect } from 'react';
+
+import goblinSound from '../../../assets/games/jitter/goblinSound.mp3';
+import otherSound from '../../../assets/games/jitter/otherSound.mp3';
+import star1Sound from '../../../assets/games/jitter/star1Sound.mp3';
+import star2Sound from '../../../assets/games/jitter/star2Sound.mp3';
+import star3Sound from '../../../assets/games/jitter/star3Sound.mp3';
+import star4Sound from '../../../assets/games/jitter/star4Sound.mp3';
+
+
+const ResultPrompt = ({ clicks, chosenTime, score, onClose }) => {
+  const [playSound, setPlaySound] = useState(true);
+  const [isVisible, setIsVisible] = useState(false);
+
+  const scoreRulebook = {
+    5: [0, 7, 20, 30, 40],  // Modified score requirements for 5 seconds
+    10: [0, 15, 30, 45, 60], // Modified score requirements for 10 seconds
+    30: [0, 40, 80, 120, 160], // Modified score requirements for 30 seconds
+  };
+  
+
+  const calculateStars = (score, chosenTime) => {
+    const clickRanges = scoreRulebook[chosenTime];
+    if (!clickRanges) {
+      return 0; // Default to zero stars if no rule found
+    }
+
+    for (let i = 1; i <= 5; i++) {
+      if (score >= clickRanges[i - 1] && score <= clickRanges[i]) {
+        return i;
+      }
+    }
+
+    return 5;
+  };
+
+  const calculateTitle = (filledStars) => {
+    const titles = [
+      {
+        title: "A GOBLIN 🧌!",
+        line: "You've got potential.",
+      },
+      {
+        title: "A WITCH 🧙🏻‍♀️!",
+        line: "You're brewing up some clicks.",
+      },
+      {
+        title: "A BARBARIAN 💪🏼!",
+        line: "You're getting strong.",
+      },
+      {
+        title: "A BOWLER 🎳!",
+        line: "You're rolling in clicks.",
+      },
+      {
+        title: "A P.E.K.K.A! 🦾",
+        line: "You're a clicking machine.",
+      },
+      {
+        title: "A MEGA KNIGHT ⚔️!",
+        line: "You're the king of clicks.",
+      },
+    ];
+
+    return titles[filledStars];
+  };
+
+  const filledStars = calculateStars(score, chosenTime);
+  const { title, line } = calculateTitle(filledStars);
+
+  const getStarSound = (filledStars) => {
+    switch (filledStars) {
+      case 1:
+        return star1Sound;
+      case 2:
+        return star2Sound;
+      case 3:
+        return star3Sound;
+      case 4:
+        return star4Sound;
+      case 5:
+        return otherSound;
+      default:
+        return goblinSound; // Default sound for zero stars
+    }
+  };
+
+  useEffect(() => {
+    if (playSound) {
+      const sound = getStarSound(filledStars);
+      const audio = new Audio(sound);
+      audio.play();
+      setPlaySound(false);
+
+      setTimeout(() => {
+        setIsVisible(true);
+      }, 100);
+    }
+  }, [playSound, filledStars]);
+
+  const renderStars = (filled, empty) => {
+    const stars = [];
+    for (let i = 0; i < filled; i++) {
+      stars.push('★');
+    }
+    for (let i = 0; i < empty; i++) {
+      stars.push('☆');
+    }
+    return stars.join('');
+  };
+  console.log("filledStars:", filledStars);
+  console.log("title:", title);
+  console.log("line:", line);
+
+  return (
+    <div className={`result-prompt ${isVisible ? 'visible' : ''}`}>
+      <span className="close-button" onClick={onClose}>
+        &#10006;
+      </span>
+      <h4 className='score'>🚀CHECK YOUR SCORE</h4>
+      <h1 className='title1'>{title}</h1>
+      <h6 className='line1'>{line}</h6>
+      <p className='clicks'>Clicks: {clicks}</p>
+      <p>Time: {chosenTime} seconds</p>
+      <p className='stars'>STARS: {renderStars(filledStars, 5 - filledStars)}</p>
+    
+    </div>
+  );
+};
+
+export default ResultPrompt;
diff --git a/src/data/content.js b/src/data/content.js
index 56d8872..e39e3ae 100644
--- a/src/data/content.js
+++ b/src/data/content.js
@@ -3,6 +3,7 @@ import { MagicSquares } from "../pages/games/MagicSquares";
 import { TicTacToe } from "../pages/games/TicTacToe";
 import {FortuneCard} from "../pages/activities/FotuneCard";
 import {SearchWord} from "../pages/activities/getDefinition";
+import {Jitter}  from "../pages/games/Jitter";
 import numberblocs from "../assets/numberblocks.png"
 
 export const activities = [
@@ -45,5 +46,12 @@ export const games = [
         urlTerm: "tic-tac-toe",
         element: <TicTacToe />,
     },
+    {
+        title: "Jitter Click Game",
+        description: "Click as fast as possible to reach 5 stars.... lakshya",
+        icon: "https://i.kym-cdn.com/entries/icons/original/000/036/070/cover5.jpg",
+        urlTerm: "jitter-game",
+        element: <Jitter />,
+    },
 ];
 
diff --git a/src/pages/games/Jitter.js b/src/pages/games/Jitter.js
new file mode 100644
index 0000000..579e2ff
--- /dev/null
+++ b/src/pages/games/Jitter.js
@@ -0,0 +1,170 @@
+import React, { useState, useEffect } from 'react';
+import "../../styles/pages/games/Jitter.css";
+import clickSound from '../../assets/games/jitter/clicksound.wav';
+import ResultPrompt from '../../components/games/Jitter/ResultPrompt';
+
+export const Jitter = () => {
+  const [score, setScore] = useState(0);
+  const [clicks, setClicks] = useState(0);
+  const [timerOptions] = useState([5, 10, 30]);
+  const [userSelectedTime, setUserSelectedTime] = useState(10); // User-selected time
+  const [timeLeft, setTimeLeft] = useState(10); // Time left (initially equal to user-selected time)
+  const [isGameActive, setIsGameActive] = useState(false);
+  const [isGameComplete, setIsGameComplete] = useState(false);
+  const [ripples, setRipples] = useState([]);
+  const audio = new Audio(clickSound);
+  const containerRef = React.createRef();
+
+  useEffect(() => {
+    let interval;
+
+    if (isGameActive && timeLeft > 0) {
+      interval = setInterval(() => {
+        setTimeLeft((prevTime) => prevTime - 1); // Decrement timeLeft
+      }, 1000);
+    } else if (timeLeft === 0) {
+      clearInterval(interval);
+      handleGameComplete();
+      setClicks((prevClicks) => prevClicks + 1); // Increment clicks when the timer runs off
+    }
+
+    return () => clearInterval(interval);
+  }, [isGameActive, timeLeft]);
+
+  const handleClick = (event) => {
+    if (!isGameActive) {
+      setScore(0);
+      setClicks(0);
+      setIsGameActive(true);
+      containerRef.current.style.animationPlayState = 'running';
+      setTimeLeft(userSelectedTime); // Set timeLeft to the user-selected time
+    } else if (isGameActive && timeLeft > 0) {
+      setScore((prevScore) => prevScore + 1);
+      setClicks((prevClicks) => prevClicks + 1);
+      audio.play();
+    }
+
+    const newRipple = {
+      top: `${event.clientY - event.target.offsetTop}px`,
+      left: `${event.clientX - event.target.offsetLeft}px`,
+    };
+
+    setRipples([...ripples, newRipple]);
+
+    setTimeout(() => {
+      setRipples((prevRipples) => prevRipples.slice(1));
+    }, 1000);
+  };
+
+  const handleRestartGame = () => {
+    setScore(0);
+    setClicks(0);
+    setIsGameActive(false);
+    setIsGameComplete(false);
+    containerRef.current.style.animationPlayState = 'paused';
+    setTimeLeft(userSelectedTime); // Reset timeLeft to the user-selected time
+  };
+
+  const handleGameComplete = () => {
+    setIsGameComplete(true);
+    containerRef.current.style.animationPlayState = 'paused';
+  };
+
+  console.log("time1:", userSelectedTime);
+
+  const starTable = [
+    { stars: 0, title: 'A GOBLIN 🧌!', description: "You've got potential." },
+    { stars: 1, title: 'A WITCH 🧙🏻‍♀️!', description: "You're brewing up some clicks." },
+    { stars: 2, title: 'A BARBARIAN 💪🏼!', description: "You're getting strong." },
+    { stars: 3, title: 'A BOWLER 🎳!', description: "You're rolling in clicks." },
+    { stars: 4, title: 'A P.E.K.K.A! 🦾', description: "You're a clicking machine." },
+    { stars: 5, title: 'A MEGA KNIGHT ⚔️!', description: "You're the king of clicks." },
+  ];
+
+  return (
+    <div className='sun'>
+    <div className="jitter-click-game">
+      <h1 className='title'>JITTER CLICK GAME</h1>
+      <h6 className="sub">Boink the button desperately before the timer ends..</h6>
+      <div className="game-container">
+        <div className="left-panel">
+          <p className='box'>{clicks}</p>
+          <p className='box2'>Time: {timeLeft}</p> {/* Display timeLeft */}
+        </div>
+        <div className="center-panel">
+          {isGameComplete && (
+            <ResultPrompt
+              clicks={clicks}
+              chosenTime={userSelectedTime} // Pass user-selected time
+              score={score}
+              onClose={() => {
+                setIsGameComplete(false);
+                handleRestartGame();
+              }}
+            />
+          )}
+          <div className="click-button-container" ref={containerRef}>
+            <button
+              onClick={handleClick}
+              className={`click-button ${isGameActive ? 'active' : ''}`}
+            >
+              boink me
+            </button>
+          </div>
+        </div>
+        <div className="right-panel">
+          {timeLeft === 0 ? (
+            <button onClick={handleRestartGame} className="restart-button">
+              Try Again
+            </button>
+          ) : (
+            <div className="timer-options">
+              <p></p>
+              {timerOptions.map((option) => (
+                <button
+                  key={option}
+                  onClick={() => {
+                    if (!isGameActive) {
+                      setUserSelectedTime(option); // Update the user-selected time
+                   // Update timeLeft to match the new user-selected time
+                    }
+                  }}
+                  className={`timer-option-button ${
+                    userSelectedTime === option ? 'selected' : ''
+                  }`}
+                  disabled={isGameActive}
+                >
+                  {option} s
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+     
+    </div>
+    <div>
+    <table className="star-table">
+        <thead>
+          <tr>
+            <th>STARS</th>
+            <th>TITLE</th>
+     
+          </tr>
+        </thead>
+        <tbody>
+          {starTable.map((starInfo) => (
+            <tr key={starInfo.stars}>
+              <td>{starInfo.stars}</td>
+              <td>{starInfo.title}</td>
+           
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+    </div>
+  );
+}
+
+
diff --git a/src/styles/pages/games/Jitter.css b/src/styles/pages/games/Jitter.css
new file mode 100644
index 0000000..238c755
--- /dev/null
+++ b/src/styles/pages/games/Jitter.css
@@ -0,0 +1,323 @@
+.jitter-click-game {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  background-color: #000020;
+  position: relative;
+  font-family: Montserrat;
+
+}
+.sun{
+  background-color: #000020;
+}
+/* Add this CSS for panel alignment */
+.game-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+
+  width: 100%;
+}
+
+.left-panel {
+  margin-left: 50px;
+  text-align: left;
+  color: white;
+}
+
+.center-panel {
+  text-align: center;
+}
+
+.right-panel {
+  text-align: right;
+  color: white;
+  font-family: Montserrat;
+  
+}
+
+.timer-option-button {
+  border: 3px dashed rgb(253, 170, 28) !important;
+  font-size: 22px !important; /* Increase the font size to 50px with !important */
+  margin: 5px; /* Add spacing between buttons */
+  padding: 10px 10px;
+  background: none;
+  color: #fff;
+  font-family: Montserrat;
+  box-shadow: 2px #000;
+animation: 1s;
+}
+
+
+
+.timer-option-button.selected {
+  font-size: 25px;
+  background-color: rgb(253, 170, 28);
+}
+
+
+
+.title{
+  font-family: Montserrat;
+  margin-top: -100px;
+
+  font-size: 60px;
+  color: yellow;
+  text-shadow: 2px 2px 2px #f80909;
+}
+
+.result-prompt {
+  box-shadow: 0px 0px 5px rgb(72, 70, 71);
+  color: white;
+  height: 80%;
+  width: 50%;
+  font-size: 20px;
+  background: linear-gradient(to top, #09203f 70%, #3c566a 100%, #32495a 100%);
+  background-image: url("https://images.pexels.com/photos/998641/pexels-photo-998641.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2");
+  border: 1px solid #000000;
+  border-radius: 5px;
+  padding: 100px;
+  position: absolute;
+  top: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+  text-align: center;
+  z-index: 2;
+
+}
+
+.result-prompt {
+  /* Your existing styles... */
+  opacity: 0; /* Initially, make the prompt invisible */
+  transition: opacity 0.2s; /* Add a smooth transition for opacity */
+}
+
+.result-prompt.visible {
+  opacity: 1; /* Make the prompt visible when the 'visible' class is added */
+}
+
+.score{
+  margin-top: -10px;
+  font-size: 17px;
+  transform: translateY(-70px);
+  border: 2px solid rgb(0, 251, 255);
+  width: 400px;
+  background-color: #020414;
+  border-radius: 10px;
+}
+
+.title1 {
+  font-family: Montserrat;
+  font-size: 40px; /* Reduced font size */
+  margin-top: -40px;
+  color: white;
+  text-shadow: 1px 1px 4px blue;
+  text-shadow: 2px 2px 4px rgb(255, 0, 0);
+  overflow: visible;
+  white-space: nowrap;
+  width: 90%;
+  margin-left: 25px;
+}
+.sub{
+  color: white;
+  font-family: Montserrat;
+  font-size: 20px;
+  margin-top: -20px;
+  text-decoration: 1px line-through;
+  margin-bottom: 60px;
+}
+
+.line1 {
+
+  display: flex; /* Use flexbox */
+  justify-content: center; /* Horizontally center the content */
+margin-left: 25px;
+  font-family: 'Roboto', sans-serif;
+  font-size: 16px;
+
+  color: rgb(243, 13, 174);
+  border-left: 2px solid rgb(243, 13, 174);
+  border-right: 2px solid rgb(243, 13, 174);
+  overflow: visible;
+  white-space: nowrap;
+  width: 90%;
+
+}
+
+
+
+
+
+
+.stars{
+  font-size: 30px;
+  font-family: Montserrat;
+  font-weight: 700px !important;
+  color: rgb(255, 255, 0);
+  transform: translateY(20px);
+}
+
+.close-button {
+  cursor: pointer;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  font-size: 1.5rem;
+}
+
+.clicks{
+  margin-top: 70px;
+}
+
+.click-button-container {
+margin-left: 55px;
+  position: relative;
+  width: 250px;
+  height: 250px;
+  border: 4px dashed #b72121;
+  border-radius: 50%;
+  animation: rotate 10s linear infinite;
+  animation-play-state: paused;
+  margin-top: 20px;
+  
+}
+
+.click-button-container.rotating {
+  
+  animation-play-state: running;
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+/* Add these styles to your existing CSS or create a new CSS file and import it */
+.star-table {
+  width: 60%;
+  border-collapse: collapse;
+  margin: 20px auto;
+  color: white;
+  transform: translateY(-70px);
+  background-image: url('../../../assets/games/jitter/image.jpg');
+  background-size: cover;
+  backdrop-filter: blur(10px);
+  border-radius: 10px; /* Apply border-radius to the entire table */
+  box-shadow: 0px 0px 4px black;
+}
+
+.star-table th, .star-table td {
+  border: 1px solid #443e3e;
+  padding: 12px;
+  text-align: center;
+  border-radius: 10px; /* Apply border-radius to table cells */
+}
+
+
+
+
+.click-button {
+  font-family: Montserrat;
+  position: relative;
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  background-color: #ff00cc;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5rem;
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 0.3s;
+  z-index: 1;
+  transform: translate(75px);
+}
+
+.click-button.active {
+  background-color: #ff00cc;
+}
+
+.ripple {
+  position: absolute;
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  transform: scale(0);
+  animation: ripple 0.7s linear;
+}
+
+@keyframes ripple {
+  to {
+    transform: scale(5);
+    opacity: 0;
+  }
+}
+
+.restart-button {
+  font-family: Montserrat;
+  background-color: #fb220a;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  font-size: 1rem;
+  cursor: pointer;
+  margin-top: 10px;
+  transition: 0.3s;
+}
+
+.restart-button:hover {
+  transform: scale(1.1);
+}
+
+.timer-options {
+  display: flex;
+  gap: 10px;
+}
+
+.timer-options button {
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  font-size: 1rem;
+}
+
+.timer-options button.selected {
+  font-weight: bold;
+}
+
+.box {
+  color: #ff6200;
+  border: 5px dashed rgb(61, 97, 169) ;
+  text-align: center;
+  font-size: 50px;
+  font-family: Montserrat;
+  border-radius: 100%;
+  height: 100px;
+  width: 100px;
+  padding: 15px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  line-height: 1;
+  transform: translateX(25px);
+}
+
+.box2 {
+  margin-top: 40px;
+  color: #fafafa;
+  border: 5px dashed rgb(61, 97, 169);
+  text-align: center;
+  font-size: 20px;
+  font-family: Montserrat;
+  height: 50px; /* Adjust the height to your preference */
+  width: 150px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}