diff --git a/package-lock.json b/package-lock.json
index 6a831d6..4cb0ec1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -96,7 +96,6 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.22.1.tgz",
       "integrity": "sha512-Hkqu7J4ynysSXxmAahpN1jjRwVJ+NdpraFLIWflgjpVob3KNyK3/tIUc7Q7szed8WMp0JNa7Qtd1E9Oo22F9gA==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.21.4",
@@ -1640,7 +1639,6 @@
       "version": "1.9.5",
       "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.5.tgz",
       "integrity": "sha512-Rt97jHmfTeaxL4swLRNPD/zV4OxTes4la07Xc4hetpUW/vc75t5m1ANyxG6ymnEQ2FsLQsoMlYB2vV1sO3m8tQ==",
-      "peer": true,
       "dependencies": {
         "immer": "^9.0.21",
         "redux": "^4.2.1",
@@ -1986,7 +1984,6 @@
       "version": "18.2.4",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.4.tgz",
       "integrity": "sha512-G2mHoTMTL4yoydITgOGwWdWMVd8sNgyEP85xVmMKAPUBwQWm9wBPQUmvbeF4V3WBY1P7mmL4BkjQ0SqUpf1snw==",
-      "peer": true,
       "dependencies": {
         "@types/react": "*"
       }
@@ -2159,7 +2156,6 @@
       "version": "8.8.2",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
       "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2674,7 +2670,6 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
-      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001489",
         "electron-to-chromium": "^1.4.411",
@@ -3635,7 +3630,6 @@
       "version": "8.41.0",
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.41.0.tgz",
       "integrity": "sha512-WQDQpzGBOP5IrXPo4Hc0814r4/v2rrIsB0rhT7jtunIalgg6gYXWhRMOejVO8yH21T/FGaxjmFjBMNqcIlmH1Q==",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.4.0",
@@ -3812,7 +3806,6 @@
       "version": "2.27.5",
       "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.27.5.tgz",
       "integrity": "sha512-LmEt3GVofgiGuiE+ORpnvP+kAm3h6MLZJ4Q5HCyHADofsb4VzXFsRiWj3c0OFiV+3DWFh0qg3v9gcPlfc3zRow==",
-      "peer": true,
       "dependencies": {
         "array-includes": "^3.1.6",
         "array.prototype.flat": "^1.3.1",
@@ -7410,7 +7403,6 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.6",
         "picocolors": "^1.0.0",
@@ -7602,7 +7594,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -7676,7 +7667,6 @@
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
       "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -7700,7 +7690,6 @@
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
       "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.0"
@@ -7728,7 +7717,6 @@
       "version": "8.0.7",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.7.tgz",
       "integrity": "sha512-1vRQuCQI5Y2uNmrMXg81RXKiBHY3jBzvCvNmZF437O/Z9/pZ+ba2uYHbemYXb3g8rjsacBGo+/wmfrQKzMhJsg==",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.12.1",
         "@types/hoist-non-react-statics": "^3.3.1",
@@ -7821,7 +7809,6 @@
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
       "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.9.2"
       }
@@ -8608,7 +8595,6 @@
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.2.tgz",
       "integrity": "sha512-9jPkMiIBXvPc2KywkraqsUfbfj+dHDb+JPWtSJa9MLFdrPyazI7q6WX2sUrm7R9eVR7qqv3Pas7EvQFzxKnI6w==",
-      "peer": true,
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
@@ -8855,7 +8841,6 @@
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.0.4.tgz",
       "integrity": "sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -9344,7 +9329,6 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.22.1.tgz",
       "integrity": "sha512-Hkqu7J4ynysSXxmAahpN1jjRwVJ+NdpraFLIWflgjpVob3KNyK3/tIUc7Q7szed8WMp0JNa7Qtd1E9Oo22F9gA==",
       "dev": true,
-      "peer": true,
       "requires": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.21.4",
@@ -10517,7 +10501,6 @@
       "version": "1.9.5",
       "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.5.tgz",
       "integrity": "sha512-Rt97jHmfTeaxL4swLRNPD/zV4OxTes4la07Xc4hetpUW/vc75t5m1ANyxG6ymnEQ2FsLQsoMlYB2vV1sO3m8tQ==",
-      "peer": true,
       "requires": {
         "immer": "^9.0.21",
         "redux": "^4.2.1",
@@ -10825,7 +10808,6 @@
       "version": "18.2.4",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.4.tgz",
       "integrity": "sha512-G2mHoTMTL4yoydITgOGwWdWMVd8sNgyEP85xVmMKAPUBwQWm9wBPQUmvbeF4V3WBY1P7mmL4BkjQ0SqUpf1snw==",
-      "peer": true,
       "requires": {
         "@types/react": "*"
       }
@@ -10949,8 +10931,7 @@
     "acorn": {
       "version": "8.8.2",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
-      "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==",
-      "peer": true
+      "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw=="
     },
     "acorn-globals": {
       "version": "7.0.1",
@@ -11309,7 +11290,6 @@
       "version": "4.21.7",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.7.tgz",
       "integrity": "sha512-BauCXrQ7I2ftSqd2mvKHGo85XR0u7Ru3C/Hxsy/0TkfCtjrmAbPdzLGasmoiBxplpDXlPvdjX9u7srIMfgasNA==",
-      "peer": true,
       "requires": {
         "caniuse-lite": "^1.0.30001489",
         "electron-to-chromium": "^1.4.411",
@@ -12028,7 +12008,6 @@
       "version": "8.41.0",
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.41.0.tgz",
       "integrity": "sha512-WQDQpzGBOP5IrXPo4Hc0814r4/v2rrIsB0rhT7jtunIalgg6gYXWhRMOejVO8yH21T/FGaxjmFjBMNqcIlmH1Q==",
-      "peer": true,
       "requires": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.4.0",
@@ -12163,7 +12142,6 @@
       "version": "2.27.5",
       "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.27.5.tgz",
       "integrity": "sha512-LmEt3GVofgiGuiE+ORpnvP+kAm3h6MLZJ4Q5HCyHADofsb4VzXFsRiWj3c0OFiV+3DWFh0qg3v9gcPlfc3zRow==",
-      "peer": true,
       "requires": {
         "array-includes": "^3.1.6",
         "array.prototype.flat": "^1.3.1",
@@ -14747,7 +14725,6 @@
       "version": "8.4.24",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz",
       "integrity": "sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==",
-      "peer": true,
       "requires": {
         "nanoid": "^3.3.6",
         "picocolors": "^1.0.0",
@@ -14861,7 +14838,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "peer": true,
       "requires": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -14908,7 +14884,6 @@
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
       "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
-      "peer": true,
       "requires": {
         "loose-envify": "^1.1.0"
       }
@@ -14926,7 +14901,6 @@
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
       "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
-      "peer": true,
       "requires": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.0"
@@ -14947,7 +14921,6 @@
       "version": "8.0.7",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.7.tgz",
       "integrity": "sha512-1vRQuCQI5Y2uNmrMXg81RXKiBHY3jBzvCvNmZF437O/Z9/pZ+ba2uYHbemYXb3g8rjsacBGo+/wmfrQKzMhJsg==",
-      "peer": true,
       "requires": {
         "@babel/runtime": "^7.12.1",
         "@types/hoist-non-react-statics": "^3.3.1",
@@ -15004,7 +14977,6 @@
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
       "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
-      "peer": true,
       "requires": {
         "@babel/runtime": "^7.9.2"
       }
@@ -15550,7 +15522,6 @@
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.2.tgz",
       "integrity": "sha512-9jPkMiIBXvPc2KywkraqsUfbfj+dHDb+JPWtSJa9MLFdrPyazI7q6WX2sUrm7R9eVR7qqv3Pas7EvQFzxKnI6w==",
-      "peer": true,
       "requires": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
@@ -15743,8 +15714,7 @@
     "typescript": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.0.4.tgz",
-      "integrity": "sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==",
-      "peer": true
+      "integrity": "sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw=="
     },
     "unbox-primitive": {
       "version": "1.0.2",
diff --git a/src/app/components/TopNavBar.tsx b/src/app/components/TopNavBar.tsx
index c781d58..d0d20cd 100644
--- a/src/app/components/TopNavBar.tsx
+++ b/src/app/components/TopNavBar.tsx
@@ -73,9 +73,9 @@ export const TopNavBar = () => {
 
           <button
             onClick={toggleDarkMode}
-            className="rounded-md bg-black px-3 py-2 text-white hover:bg-gray-800 dark:bg-white dark:text-black"
+            className="rounded-md bg-black px-3 py-2 text-white hover:bg-gray-800 dark:bg-white dark:text-black transition all duration-300s"
           >
-            {darkMode ? "Light Mode" : "Dark Mode"}
+            {darkMode ? "☀ Light" : "🌙 Dark"}
           </button>
 
           <div className="ml-1 mt-1">