diff --git a/package-lock.json b/package-lock.json
index 8c455ff..7625101 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
         "babel-plugin-react-css-modules": "^5.2.6",
+        "file-loader": "^6.2.0",
         "html2canvas": "^1.4.1",
         "ionicons": "^7.3.0",
         "jspdf": "^2.5.1",
@@ -2743,7 +2744,6 @@
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.5.tgz",
       "integrity": "sha512-UTYAUj/wviwdsMfzoSJspJxbkH5o1snzwX0//0ENX1u/55kkZZkcTZP6u9bwKGkv+dkk9at4m1Cpt0uY80kcpQ==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.0",
         "@jridgewell/trace-mapping": "^0.3.9"
@@ -3541,7 +3541,6 @@
       "version": "8.56.2",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.2.tgz",
       "integrity": "sha512-uQDwm1wFHmbBbCZCqAlq6Do9LYwByNZHWzXppSnay9SuwJ+VRbjkbLABer54kcPnMSlG6Fdiy2yaFXm/z9Z5gw==",
-      "dev": true,
       "dependencies": {
         "@types/estree": "*",
         "@types/json-schema": "*"
@@ -3551,7 +3550,6 @@
       "version": "3.7.7",
       "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.7.tgz",
       "integrity": "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==",
-      "dev": true,
       "dependencies": {
         "@types/eslint": "*",
         "@types/estree": "*"
@@ -3560,8 +3558,7 @@
     "node_modules/@types/estree": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
-      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
-      "dev": true
+      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
     },
     "node_modules/@types/express": {
       "version": "4.17.21",
@@ -3868,8 +3865,7 @@
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
-      "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
-      "dev": true
+      "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA=="
     },
     "node_modules/@types/mime": {
       "version": "1.3.5",
@@ -4163,7 +4159,6 @@
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.6.tgz",
       "integrity": "sha512-IN1xI7PwOvLPgjcf180gC1bqn3q/QaOCwYUahIOhbYUu8KA/3tw2RT/T0Gidi1l7Hhj5D/INhJxiICObqpMu4Q==",
-      "dev": true,
       "dependencies": {
         "@webassemblyjs/helper-numbers": "1.11.6",
         "@webassemblyjs/helper-wasm-bytecode": "1.11.6"
@@ -4172,26 +4167,22 @@
     "node_modules/@webassemblyjs/floating-point-hex-parser": {
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.6.tgz",
-      "integrity": "sha512-ejAj9hfRJ2XMsNHk/v6Fu2dGS+i4UaXBXGemOfQ/JfQ6mdQg/WXtwleQRLLS4OvfDhv8rYnVwH27YJLMyYsxhw==",
-      "dev": true
+      "integrity": "sha512-ejAj9hfRJ2XMsNHk/v6Fu2dGS+i4UaXBXGemOfQ/JfQ6mdQg/WXtwleQRLLS4OvfDhv8rYnVwH27YJLMyYsxhw=="
     },
     "node_modules/@webassemblyjs/helper-api-error": {
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.6.tgz",
-      "integrity": "sha512-o0YkoP4pVu4rN8aTJgAyj9hC2Sv5UlkzCHhxqWj8butaLvnpdc2jOwh4ewE6CX0txSfLn/UYaV/pheS2Txg//Q==",
-      "dev": true
+      "integrity": "sha512-o0YkoP4pVu4rN8aTJgAyj9hC2Sv5UlkzCHhxqWj8butaLvnpdc2jOwh4ewE6CX0txSfLn/UYaV/pheS2Txg//Q=="
     },
     "node_modules/@webassemblyjs/helper-buffer": {
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.6.tgz",
-      "integrity": "sha512-z3nFzdcp1mb8nEOFFk8DrYLpHvhKC3grJD2ardfKOzmbmJvEf/tPIqCY+sNcwZIY8ZD7IkB2l7/pqhUhqm7hLA==",
-      "dev": true
+      "integrity": "sha512-z3nFzdcp1mb8nEOFFk8DrYLpHvhKC3grJD2ardfKOzmbmJvEf/tPIqCY+sNcwZIY8ZD7IkB2l7/pqhUhqm7hLA=="
     },
     "node_modules/@webassemblyjs/helper-numbers": {
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.6.tgz",
       "integrity": "sha512-vUIhZ8LZoIWHBohiEObxVm6hwP034jwmc9kuq5GdHZH0wiLVLIPcMCdpJzG4C11cHoQ25TFIQj9kaVADVX7N3g==",
-      "dev": true,
       "dependencies": {
         "@webassemblyjs/floating-point-hex-parser": "1.11.6",
         "@webassemblyjs/helper-api-error": "1.11.6",
@@ -4201,14 +4192,12 @@
     "node_modules/@webassemblyjs/helper-wasm-bytecode": {
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.6.tgz",
-      "integrity": "sha512-sFFHKwcmBprO9e7Icf0+gddyWYDViL8bpPjJJl0WHxCdETktXdmtWLGVzoHbqUcY4Be1LkNfwTmXOJUFZYSJdA==",
-      "dev": true
+      "integrity": "sha512-sFFHKwcmBprO9e7Icf0+gddyWYDViL8bpPjJJl0WHxCdETktXdmtWLGVzoHbqUcY4Be1LkNfwTmXOJUFZYSJdA=="
     },
     "node_modules/@webassemblyjs/helper-wasm-section": {
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.6.tgz",
       "integrity": "sha512-LPpZbSOwTpEC2cgn4hTydySy1Ke+XEu+ETXuoyvuyezHO3Kjdu90KK95Sh9xTbmjrCsUwvWwCOQQNta37VrS9g==",
-      "dev": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.11.6",
         "@webassemblyjs/helper-buffer": "1.11.6",
@@ -4220,7 +4209,6 @@
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.6.tgz",
       "integrity": "sha512-LM4p2csPNvbij6U1f19v6WR56QZ8JcHg3QIJTlSwzFcmx6WSORicYj6I63f9yU1kEUtrpG+kjkiIAkevHpDXrg==",
-      "dev": true,
       "dependencies": {
         "@xtuc/ieee754": "^1.2.0"
       }
@@ -4229,7 +4217,6 @@
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.6.tgz",
       "integrity": "sha512-m7a0FhE67DQXgouf1tbN5XQcdWoNgaAuoULHIfGFIEVKA6tu/edls6XnIlkmS6FrXAquJRPni3ZZKjw6FSPjPQ==",
-      "dev": true,
       "dependencies": {
         "@xtuc/long": "4.2.2"
       }
@@ -4237,14 +4224,12 @@
     "node_modules/@webassemblyjs/utf8": {
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.6.tgz",
-      "integrity": "sha512-vtXf2wTQ3+up9Zsg8sa2yWiQpzSsMyXj0qViVP6xKGCUT8p8YJ6HqI7l5eCnWx1T/FYdsv07HQs2wTFbbof/RA==",
-      "dev": true
+      "integrity": "sha512-vtXf2wTQ3+up9Zsg8sa2yWiQpzSsMyXj0qViVP6xKGCUT8p8YJ6HqI7l5eCnWx1T/FYdsv07HQs2wTFbbof/RA=="
     },
     "node_modules/@webassemblyjs/wasm-edit": {
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.6.tgz",
       "integrity": "sha512-Ybn2I6fnfIGuCR+Faaz7YcvtBKxvoLV3Lebn1tM4o/IAJzmi9AWYIPWpyBfU8cC+JxAO57bk4+zdsTjJR+VTOw==",
-      "dev": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.11.6",
         "@webassemblyjs/helper-buffer": "1.11.6",
@@ -4260,7 +4245,6 @@
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.6.tgz",
       "integrity": "sha512-3XOqkZP/y6B4F0PBAXvI1/bky7GryoogUtfwExeP/v7Nzwo1QLcq5oQmpKlftZLbT+ERUOAZVQjuNVak6UXjPA==",
-      "dev": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.11.6",
         "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
@@ -4273,7 +4257,6 @@
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.6.tgz",
       "integrity": "sha512-cOrKuLRE7PCe6AsOVl7WasYf3wbSo4CeOk6PkrjS7g57MFfVUF9u6ysQBBODX0LdgSvQqRiGz3CXvIDKcPNy4g==",
-      "dev": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.11.6",
         "@webassemblyjs/helper-buffer": "1.11.6",
@@ -4285,7 +4268,6 @@
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.6.tgz",
       "integrity": "sha512-6ZwPeGzMJM3Dqp3hCsLgESxBGtT/OeCvCZ4TA1JUPYgmhAx38tTPR9JaKy0S5H3evQpO/h2uWs2j6Yc/fjkpTQ==",
-      "dev": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.11.6",
         "@webassemblyjs/helper-api-error": "1.11.6",
@@ -4299,7 +4281,6 @@
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.11.6.tgz",
       "integrity": "sha512-JM7AhRcE+yW2GWYaKeHL5vt4xqee5N2WcezptmgyhNS+ScggqcT1OtXykhAb13Sn5Yas0j2uv9tHgrjwvzAP4A==",
-      "dev": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.11.6",
         "@xtuc/long": "4.2.2"
@@ -4352,14 +4333,12 @@
     "node_modules/@xtuc/ieee754": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
-      "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
-      "dev": true
+      "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA=="
     },
     "node_modules/@xtuc/long": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
-      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
-      "dev": true
+      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
     },
     "node_modules/accepts": {
       "version": "1.3.8",
@@ -4378,7 +4357,6 @@
       "version": "8.11.3",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
       "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
-      "dev": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -4390,7 +4368,6 @@
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz",
       "integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==",
-      "dev": true,
       "peerDependencies": {
         "acorn": "^8"
       }
@@ -5130,8 +5107,7 @@
     "node_modules/buffer-from": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
-      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
-      "dev": true
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="
     },
     "node_modules/bytes": {
       "version": "3.0.0",
@@ -5278,7 +5254,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
       "integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==",
-      "dev": true,
       "engines": {
         "node": ">=6.0"
       }
@@ -6232,7 +6207,6 @@
       "version": "5.15.0",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.15.0.tgz",
       "integrity": "sha512-LXYT42KJ7lpIKECr2mAXIaMldcNCh/7E0KBKOu4KSfkHmP+mZmSs+8V5gBAqisWBy0OO4W5Oyys0GO1Y8KtdKg==",
-      "dev": true,
       "dependencies": {
         "graceful-fs": "^4.2.4",
         "tapable": "^2.2.0"
@@ -6392,8 +6366,7 @@
     "node_modules/es-module-lexer": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.4.1.tgz",
-      "integrity": "sha512-cXLGjP0c4T3flZJKQSuziYoq7MlT+rnvfZjfp7h+I7K9BNX54kP9nyWvdbwjQ4u1iWbOL4u96fgeZLToQlZC7w==",
-      "dev": true
+      "integrity": "sha512-cXLGjP0c4T3flZJKQSuziYoq7MlT+rnvfZjfp7h+I7K9BNX54kP9nyWvdbwjQ4u1iWbOL4u96fgeZLToQlZC7w=="
     },
     "node_modules/es-set-tostringtag": {
       "version": "2.0.2",
@@ -6873,7 +6846,6 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
       "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
-      "dev": true,
       "dependencies": {
         "estraverse": "^5.2.0"
       },
@@ -6885,7 +6857,6 @@
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
       "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
-      "dev": true,
       "engines": {
         "node": ">=4.0"
       }
@@ -6917,7 +6888,6 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
       "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
-      "dev": true,
       "engines": {
         "node": ">=0.8.x"
       }
@@ -7112,6 +7082,25 @@
         "node": "^10.12.0 || >=12.0.0"
       }
     },
+    "node_modules/file-loader": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz",
+      "integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==",
+      "dependencies": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^4.0.0 || ^5.0.0"
+      }
+    },
     "node_modules/fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -7565,8 +7554,7 @@
     "node_modules/glob-to-regexp": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
-      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
-      "dev": true
+      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw=="
     },
     "node_modules/globals": {
       "version": "11.12.0",
@@ -8584,7 +8572,6 @@
       "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": "*",
         "merge-stream": "^2.0.0",
@@ -8598,7 +8585,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -8607,7 +8593,6 @@
       "version": "8.1.1",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
       "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
-      "dev": true,
       "dependencies": {
         "has-flag": "^4.0.0"
       },
@@ -8977,7 +8962,6 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
       "integrity": "sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==",
-      "dev": true,
       "engines": {
         "node": ">=6.11.5"
       }
@@ -8986,7 +8970,6 @@
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
       "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
-      "dev": true,
       "dependencies": {
         "big.js": "^5.2.2",
         "emojis-list": "^3.0.0",
@@ -9242,8 +9225,7 @@
     "node_modules/merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
-      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
-      "dev": true
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w=="
     },
     "node_modules/merge2": {
       "version": "1.4.1",
@@ -9291,7 +9273,6 @@
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -9300,7 +9281,6 @@
       "version": "2.1.35",
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
       "dependencies": {
         "mime-db": "1.52.0"
       },
@@ -9410,8 +9390,7 @@
     "node_modules/neo-async": {
       "version": "2.6.2",
       "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
-      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
-      "dev": true
+      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
     },
     "node_modules/no-case": {
       "version": "3.0.4",
@@ -10345,7 +10324,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
       "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
-      "dev": true,
       "dependencies": {
         "safe-buffer": "^5.1.0"
       }
@@ -10878,7 +10856,6 @@
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
       "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -10929,7 +10906,6 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
       "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
-      "dev": true,
       "dependencies": {
         "@types/json-schema": "^7.0.8",
         "ajv": "^6.12.5",
@@ -11044,7 +11020,6 @@
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz",
       "integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==",
-      "dev": true,
       "dependencies": {
         "randombytes": "^2.1.0"
       }
@@ -11298,7 +11273,6 @@
       "version": "0.5.21",
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
       "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
-      "dev": true,
       "dependencies": {
         "buffer-from": "^1.0.0",
         "source-map": "^0.6.0"
@@ -11308,7 +11282,6 @@
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -11639,7 +11612,6 @@
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
       "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -11648,7 +11620,6 @@
       "version": "5.27.0",
       "resolved": "https://registry.npmjs.org/terser/-/terser-5.27.0.tgz",
       "integrity": "sha512-bi1HRwVRskAjheeYl291n3JC4GgO/Ty4z1nVs5AAsmonJulGxpSektecnNedrwK9C7vpvVtcX3cw00VSLt7U2A==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/source-map": "^0.3.3",
         "acorn": "^8.8.2",
@@ -11666,7 +11637,6 @@
       "version": "5.3.10",
       "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.10.tgz",
       "integrity": "sha512-BKFPWlPDndPs+NGGCr1U59t0XScL5317Y0UReNrHaw9/FwhPENlq6bfgs+4yPfyP51vqC1bQ4rp1EfXW5ZSH9w==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/trace-mapping": "^0.3.20",
         "jest-worker": "^27.4.5",
@@ -11699,8 +11669,7 @@
     "node_modules/terser/node_modules/commander": {
       "version": "2.20.3",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-      "dev": true
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
     },
     "node_modules/text-segmentation": {
       "version": "1.0.3",
@@ -12090,7 +12059,6 @@
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
       "integrity": "sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==",
-      "dev": true,
       "dependencies": {
         "glob-to-regexp": "^0.4.1",
         "graceful-fs": "^4.1.2"
@@ -12112,7 +12080,6 @@
       "version": "5.90.1",
       "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.90.1.tgz",
       "integrity": "sha512-SstPdlAC5IvgFnhiRok8hqJo/+ArAbNv7rhU4fnWGHNVfN59HSQFaxZDSAL3IFG2YmqxuRs+IU33milSxbPlog==",
-      "dev": true,
       "dependencies": {
         "@types/eslint-scope": "^3.7.3",
         "@types/estree": "^1.0.5",
@@ -12436,7 +12403,6 @@
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",
       "integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==",
-      "dev": true,
       "engines": {
         "node": ">=10.13.0"
       }
@@ -12445,7 +12411,6 @@
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
       "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
-      "dev": true,
       "dependencies": {
         "esrecurse": "^4.3.0",
         "estraverse": "^4.1.1"
@@ -12458,7 +12423,6 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
       "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
-      "dev": true,
       "engines": {
         "node": ">=4.0"
       }
diff --git a/package.json b/package.json
index ed00d68..4ee2639 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "babel-plugin-react-css-modules": "^5.2.6",
+    "file-loader": "^6.2.0",
     "html2canvas": "^1.4.1",
     "ionicons": "^7.3.0",
     "jspdf": "^2.5.1",
diff --git a/src/assets/dial_bg.png b/src/assets/dial_bg.png
new file mode 100644
index 0000000..aa62a3b
Binary files /dev/null and b/src/assets/dial_bg.png differ
diff --git a/src/components/Results/EnergyScore/arc.jsx b/src/components/Results/EnergyScore/arc.jsx
new file mode 100644
index 0000000..d5a853c
--- /dev/null
+++ b/src/components/Results/EnergyScore/arc.jsx
@@ -0,0 +1,131 @@
+import React, { useState, useEffect, useRef } from 'react';
+
+const Arc = ({ score, width, height }) => {
+    const maxScore = 100;
+    const scorePerArc = maxScore / 3;
+    const arcPathsRef = useRef([]);
+    const [circleInfo, setCircleInfo] = useState({ x: 0, y: 0, color: '#fff' });
+    const [center, setCenter] = useState({ x: 0, y: 0 });
+    const [circleRadius, setCircleRadius] = useState(0);
+
+    const gradientColors = {
+        gradient1: "#F27374",
+        gradient2: "#FFA685",
+        gradient3: "#4892A7"
+    };
+
+    const arcsInfo = [
+        { startAngle: 230, endAngle: 310, gradientId: "gradient1" },
+        { startAngle: 320, endAngle: 400, gradientId: "gradient2" },
+        { startAngle: 50, endAngle: 130, gradientId: "gradient3" }
+    ];
+
+    const scoreToAngle = (arcScore, arcIndex) => {
+        const arcLength = arcsInfo[arcIndex].endAngle - arcsInfo[arcIndex].startAngle;
+        return arcsInfo[arcIndex].startAngle + (arcScore / scorePerArc) * arcLength;
+    };
+
+    const describeArc = (radius, startAngle, endAngle) => {
+        const start = polarToCartesian(center.x, center.y, radius, startAngle);
+        const end = polarToCartesian(center.x, center.y, radius, endAngle);
+        const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';
+
+        return [
+            'M', start.x, start.y,
+            'A', radius, radius, 0, largeArcFlag, 1, end.x, end.y
+        ].join(' ');
+    };
+
+    const calculateScores = (totalScore) => {
+        let remainingScore = totalScore;
+        return arcsInfo.map((_, index) => {
+            if (remainingScore > scorePerArc) {
+                remainingScore -= scorePerArc;
+                return scorePerArc;
+            } else {
+                const scoreForArc = remainingScore;
+                remainingScore = 0;
+                return scoreForArc;
+            }
+        });
+    };
+
+    useEffect(() => {
+        setCenter({ x: width / 2, y: height / 2 });
+        setCircleRadius(0.95 * Math.min(width, height) / 2 - 1);
+    }, [score, width, height]);
+
+    useEffect(() => {
+        const scores = calculateScores(score);
+        const scoresToArr = scores.filter(score => score > 0);
+        scoresToArr.forEach((score, index) => {
+            const pathElement = arcPathsRef.current[index];
+            if (pathElement && score > 0) {
+                const endAngle = scoreToAngle(score, index);
+                const arcPath = describeArc(circleRadius, arcsInfo[index].startAngle, endAngle);
+                pathElement.setAttribute('d', arcPath);
+
+                if (index === scoresToArr.length - 1) {
+                    const { x, y } = polarToCartesian(center.x, center.y, circleRadius, endAngle);
+                    setCircleInfo({ x: x - 12, y: y - 12, color: gradientColors[arcsInfo[index].gradientId] });
+                }
+            }
+        });
+    }, [center, circleRadius, score]);
+
+    return (
+        <div style={{ width: '100%', height: '100%', position: 'absolute', top: 0, left: 0 }}>
+            <div style={{ position: 'relative', width: '100%', height: '100%' }}>
+                <svg width="100%" height="100%">
+                    <defs>
+                        <linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="0%">
+                            <stop offset="0%" stopColor="#FE8E60" />
+                            <stop offset="100%" stopColor="#F27374" />
+                        </linearGradient>
+                        <linearGradient id="gradient2" x1="100%" y1="0%" x2="0%" y2="0%">
+                            <stop offset="0%" stopColor="#E1BE45" />
+                            <stop offset="52%" stopColor="#FF8B60" />
+                            <stop offset="100%" stopColor="#FFA685" />
+                        </linearGradient>
+                        <linearGradient id="gradient3" x1="100%" y1="100%" x2="100%" y2="100%">
+                            <stop offset="0%" stopColor="#E8B34C" />
+                            <stop offset="86%" stopColor="#4892A7" />
+                        </linearGradient>
+                    </defs>
+                    {arcsInfo.map((arc, index) => (
+                        <path
+                            key={index}
+                            ref={el => (arcPathsRef.current[index] = el)}
+                            fill="none"
+                            stroke={`url(#${arc.gradientId})`}
+                            strokeWidth="8"
+                            strokeLinecap="round"
+                        />
+                    ))}
+                </svg>
+                <div style={{ position: 'absolute', left: circleInfo.x, top: circleInfo.y }}>
+                    <svg>
+                        <circle
+                            cx={12}
+                            cy={12}
+                            r="7"
+                            fill="white"
+                            stroke={circleInfo.color}
+                            strokeWidth="5"
+                        />
+                    </svg>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+const polarToCartesian = (centerX, centerY, radius, angleInDegrees) => {
+    const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;
+    return {
+        x: centerX + radius * Math.cos(angleInRadians),
+        y: centerY + radius * Math.sin(angleInRadians),
+    };
+};
+
+export default Arc;
\ No newline at end of file
diff --git a/src/components/Results/EnergyScore/energyscore.jsx b/src/components/Results/EnergyScore/energyscore.jsx
index ce12afd..285ab40 100644
--- a/src/components/Results/EnergyScore/energyscore.jsx
+++ b/src/components/Results/EnergyScore/energyscore.jsx
@@ -23,18 +23,18 @@ const EnergyScore = (props) => {
               display: 'flex',
               alignItems: 'center',
               justifyContent: 'space-between',
-              backgroundColor: '#f5f5f5',
+              backgroundColor: '#f2f0f1',
               borderRadius: '100px',
               padding: '10px 20px',
               height: '200px',
               margin: '20px'
             }}
           >
-            <div style={{ width: '75%', height: '100%', marginRight: '20px' }}>
+            <div style={{ width: '100%', height: '100%', marginRight: '20px' }}>
               <ScoreRing value={score} scoreLabel={'Good'} />
             </div>
             <div style={{ width: '60%' }}>
-              <h2>Score is based on the estimated CO2 emissions of your home</h2>
+              <h5>Score is based on the estimated CO2 emissions of your home</h5>
             </div>
           </div>
           <Grid container justifyContent="space-between">
@@ -43,7 +43,7 @@ const EnergyScore = (props) => {
                 score={score}
                 details={props.details}
               />
-              <CompareButton 
+              <CompareButton
                 yourHomeValue={props.yourHomeValue}
                 avgHomeState={props.avgHomeState}
                 avgHomeUS={props.avgHomeUS}
diff --git a/src/components/Results/EnergyScore/needle.jsx b/src/components/Results/EnergyScore/needle.jsx
new file mode 100644
index 0000000..4e6eb54
--- /dev/null
+++ b/src/components/Results/EnergyScore/needle.jsx
@@ -0,0 +1,72 @@
+import React, { useState, useEffect, useRef } from 'react';
+
+const Needle = ({ desiredScore, scoreLabel, width, height }) => {
+    const needleRef = useRef(null);
+    const [angle, setAngle] = useState(150);
+    const [score, setScore] = useState(0);
+    const [radius, setRadius] = useState(0);
+    const [center, setCenter] = useState({ x: 0, y: 0 });
+    const startAngle = 140;
+
+    const calculateEndAngle = (score) => {
+        const effectiveScore = Math.min(100, Math.max(0, score));
+        let rawEndAngle;
+        if (effectiveScore <= 33) {
+            rawEndAngle = startAngle + effectiveScore / 33 * 80;
+        } else if (effectiveScore <= 66) {
+            rawEndAngle = startAngle + 90 + (effectiveScore - 33) / 33 * 80;
+        } else {
+            rawEndAngle = startAngle + 180 + (effectiveScore - 66) / 33 * 80
+        }
+        return rawEndAngle;
+    };
+
+    const endAngle = calculateEndAngle(desiredScore);
+
+    const calculatePosition = (angle) => {
+        const x = center.x + radius * Math.cos(angle * Math.PI / 180);
+        const y = center.y + radius * Math.sin(angle * Math.PI / 180);
+        return { x, y };
+    };
+
+    const calculateRotation = (angle) => {
+        return angle + 90;
+    };
+
+    useEffect(() => {
+        setAngle(endAngle);
+        setScore(desiredScore);
+    }, [endAngle]);
+
+    useEffect(() => {
+        setRadius(0.75 * Math.min(width, height) / 2);
+        setCenter({ x: width / 2, y: height / 2 });
+    }, [width, height]);
+
+    const position = calculatePosition(angle);
+    const rotation = calculateRotation(angle);
+
+    return (
+        <div style={{ width: '100%', height: '100%' }} ref={needleRef}>
+            <svg width="100%" height="100%" style={{ position: 'absolute', left: 0, top: 0, zIndex: 20 }}>
+                <circle cx={center.x} cy={center.y} r={radius} fill='white'></circle>
+            </svg>
+            <svg width="100%" height="100%" style={{ position: 'absolute', left: 0, top: 0, zIndex: 25 }}>
+                <circle cx={center.x} cy={center.y} r={0.85 * radius} stroke="#ddd" strokeWidth={2} fill='white' ></circle>
+            </svg>
+            <svg width="100%" height="100%" style={{ position: 'absolute', left: 0, top: 0, zIndex: 10 }}>
+                <polygon
+                    points={`${position.x}, ${position.y - 7} ${position.x - 7},${position.y + 5} ${position.x + 7},${position.y + 5}`}
+                    fill="black"
+                    transform={`rotate(${rotation} ${position.x} ${position.y})`}
+                />
+            </svg>
+            <div style={{ width: '100%', height: '100%', position: 'absolute', top: 0, left: 0, zIndex: 30, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
+                <span style={{ fontSize: "40px", fontWeight: 'bold' }}>{parseInt(score)}</span>
+                <span style={{ fontWeight: 'bold' }}>{scoreLabel}</span>
+            </div>
+        </div >
+    );
+};
+
+export default Needle;
diff --git a/src/components/Results/EnergyScore/scorering.jsx b/src/components/Results/EnergyScore/scorering.jsx
index 026e252..41bef38 100644
--- a/src/components/Results/EnergyScore/scorering.jsx
+++ b/src/components/Results/EnergyScore/scorering.jsx
@@ -1,55 +1,49 @@
-import React from 'react';
-import { PieChart, Pie, Cell, ResponsiveContainer } from 'recharts';
+import React, { useState, useEffect, useRef } from 'react';
+import Needle from './needle';
+import Arc from './arc';
+import backgroundImage from '../../../assets/dial_bg.png';
 
 const COLORS = ['#f00', '#ffbf00', '#00ff00'];
 
 const ScoreRing = ({ value, scoreLabel }) => {
+  const dialRef = useRef(null);
   const score = Math.min(Math.max(value, 0), 100);
-  const colorIndex = score === 100 ? COLORS.length - 1 : Math.floor(score / (100 / COLORS.length));
+  const [width, setWidth] = useState(0);
+  const [height, setHeight] = useState(0);
+  useEffect(() => {
+    const getDimensions = () => {
+      if (dialRef.current) {
+        setWidth(dialRef.current.offsetWidth);
+        setHeight(dialRef.current.offsetHeight);
+      }
+    };
+    getDimensions();
 
-  const data = [
-    { value: score, fill: COLORS[colorIndex] },
-    { value: 100 - score, fill: '#ccc' }
-  ];
+    const resizeObserver = new ResizeObserver(getDimensions);
+    if (dialRef.current) {
+      resizeObserver.observe(dialRef.current);
+    }
+
+    return () => {
+      if (dialRef.current) {
+        resizeObserver.unobserve(dialRef.current);
+      }
+    };
+  }, []);
 
   return (
-    <ResponsiveContainer width="100%" height="100%">
-      <PieChart>
-        <Pie
-          data={data}
-          dataKey="value"
-          cx="50%"
-          cy="50%"
-          innerRadius="60%"
-          outerRadius="80%"
-          startAngle={90}
-          endAngle={-270}
-          isAnimationActive={false}
-        >
-          {data.map((entry, index) => (
-            <Cell key={`cell-${index}`} fill={entry.fill} />
-          ))}
-        </Pie>
-        <text
-          x="50%"
-          y="50%"
-          textAnchor="middle"
-          dominantBaseline="middle"
-          style={{ fontSize: '1.5em', fontWeight: 'bold' }}
-        >
-          {score}
-        </text>
-        <text
-          x="50%"
-          y="60%"
-          textAnchor="middle"
-          dominantBaseline="middle"
-          style={{ fontSize: '1em' }}
-        >
-          {scoreLabel}
-        </text>
-      </PieChart>
-    </ResponsiveContainer>
+    <div style={{
+      width: '100%',
+      height: '100%',
+      backgroundImage: `url(${backgroundImage})`,
+      backgroundRepeat: 'no-repeat',
+      backgroundSize: 'contain',
+      backgroundPosition: 'center',
+      position: 'relative'
+    }} ref={dialRef}>
+      <Needle desiredScore={score} scoreLabel={scoreLabel} width={width} height={height} />
+      <Arc score={score} width={width} height={height} />
+    </div >
   );
 };