diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 00000000..dc7cdd26
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,12 @@
+{
+    "semi": true,
+    "trailingComma": "none",
+    "bracketSpacing": true,
+    "jsxBracketSameLine": false,
+    "printWidth": 80,
+    "tabWidth": 2,
+    "useTabs": false,
+    "quoteProps": "as-needed",
+    "arrowParens": "always",
+    "singleQuote": false
+}
\ No newline at end of file
diff --git a/README.md b/README.md
index 0d7ab1a9..b9b56f23 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,9 @@
 # telware frontend
+
+<!-- STATIC ANALYSIS BADGES -->
+[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=TelwareSW_telware-frontend&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=TelwareSW_telware-frontend)
+[![Lines of Code](https://sonarcloud.io/api/project_badges/measure?project=TelwareSW_telware-frontend&metric=ncloc)](https://sonarcloud.io/summary/new_code?id=TelwareSW_telware-frontend)
+[![Technical Debt](https://sonarcloud.io/api/project_badges/measure?project=TelwareSW_telware-frontend&metric=sqale_index)](https://sonarcloud.io/summary/new_code?id=TelwareSW_telware-frontend)
+[![Maintainability Rating](https://sonarcloud.io/api/project_badges/measure?project=TelwareSW_telware-frontend&metric=sqale_rating)](https://sonarcloud.io/summary/new_code?id=TelwareSW_telware-frontend)
+[![Security Rating](https://sonarcloud.io/api/project_badges/measure?project=TelwareSW_telware-frontend&metric=security_rating)](https://sonarcloud.io/summary/new_code?id=TelwareSW_telware-frontend)
+[![Vulnerabilities](https://sonarcloud.io/api/project_badges/measure?project=TelwareSW_telware-frontend&metric=vulnerabilities)](https://sonarcloud.io/summary/new_code?id=TelwareSW_telware-frontend)
diff --git a/app/babel.config.cjs b/app/babel.config.cjs
index dd0eb7da..2e2196ed 100644
--- a/app/babel.config.cjs
+++ b/app/babel.config.cjs
@@ -15,6 +15,7 @@ module.exports = {
     ["@babel/preset-env", { targets: { esmodules: true } }],
     ["@babel/preset-react", { runtime: "automatic" }],
     "@babel/preset-typescript",
+    ["babel-preset-vite"],
   ],
   plugins: [
     [
diff --git a/app/eslint.config.js b/app/eslint.config.js
index 092408a9..5d33e303 100644
--- a/app/eslint.config.js
+++ b/app/eslint.config.js
@@ -1,28 +1,32 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
+
+import prettier from "eslint-plugin-prettier";
 
 export default tseslint.config(
-  { ignores: ['dist'] },
+  { ignores: ["dist"] },
   {
     extends: [js.configs.recommended, ...tseslint.configs.recommended],
-    files: ['**/*.{ts,tsx}'],
+    files: ["**/*.{ts,tsx}"],
     languageOptions: {
       ecmaVersion: 2020,
       globals: globals.browser,
     },
     plugins: {
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
+      prettier: prettier,
     },
     rules: {
+      ...prettier.configs.recommended.rules,
       ...reactHooks.configs.recommended.rules,
-      'react-refresh/only-export-components': [
-        'warn',
+      "react-refresh/only-export-components": [
+        "warn",
         { allowConstantExport: true },
       ],
     },
   },
-)
+);
diff --git a/app/example.env b/app/example.env
new file mode 100644
index 00000000..52b9f14e
--- /dev/null
+++ b/app/example.env
@@ -0,0 +1,21 @@
+# NOTE: use those to run in production
+# VITE_BACKEND_API=http://localhost:3000/api/v1/
+# VITE_ENV=production
+# VITE_BACKEND_STORGAE=http://localhost:3000/static/media/
+# VITE_SOCKET_BACKEND_API=http://localhost:4000/socket-io
+
+# NOTE: use those to run in development (mocked backend)
+VITE_BACKEND_API=
+VITE_ENV=test
+VITE_BACKEND_STORGAE=https://i.pinimg.com/564x/26/76/a1/
+VITE_SOCKET_BACKEND_API=http://localhost:4000/socket-io
+
+# NOTE: Secrets
+VITE_REACT_APP_SITE_KEY=
+VITE_SITE_SECRET=
+VITE_GITHUB_CLIENT_ID=
+VITE_GOOGLE_CLIENT_ID=
+
+# NOTE: Ports
+VITE_PORT=5174
+
diff --git a/app/index.html b/app/index.html
index d9341ea3..31cd858c 100644
--- a/app/index.html
+++ b/app/index.html
@@ -3,9 +3,10 @@
 
 <head>
   <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="icon" href="/TelWare.png" type="image/x-icon" />
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   <link
diff --git a/app/jest.config.ts b/app/jest.config.ts
index ef3bdb3b..c6e303ef 100644
--- a/app/jest.config.ts
+++ b/app/jest.config.ts
@@ -32,7 +32,7 @@ module.exports = {
     "jest.setup.ts",
     "index.tsx",
   ],
-  setupFiles: ["./jest.polyfills.ts"],
+  setupFiles: ["dotenv/config", "./jest.polyfills.ts"],
   setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
   testEnvironmentOptions: {
     customExportConditions: [""],
diff --git a/app/jest.setup.ts b/app/jest.setup.ts
index d0de870d..dedc4d09 100644
--- a/app/jest.setup.ts
+++ b/app/jest.setup.ts
@@ -1 +1,5 @@
 import "@testing-library/jest-dom";
+
+import dotenv from "dotenv";
+
+dotenv.config({ path: ".env" });
diff --git a/app/package-lock.json b/app/package-lock.json
index ad754c67..25fc8b5a 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -17,7 +17,13 @@
         "@tanstack/react-query": "^5.59.13",
         "@tanstack/react-query-devtools": "^5.59.15",
         "@types/react-google-recaptcha": "^2.1.9",
+        "axios": "^1.7.8",
+        "date-fns": "^4.1.0",
+        "emoji-picker-react": "^4.12.0",
+        "idb": "^8.0.0",
         "lottie-react": "^2.4.0",
+        "mitt": "^3.0.1",
+        "motion": "^11.13.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-filerobot-image-editor": "^4.9.0",
@@ -25,6 +31,9 @@
         "react-hook-form": "^7.53.0",
         "react-hot-toast": "^2.4.1",
         "react-international-phone": "^4.3.0",
+        "react-intersection-observer": "^9.13.1",
+        "react-mentions": "^4.4.10",
+        "react-modal-image": "^2.6.0",
         "react-router-dom": "^6.27.0",
         "redux-mock-store": "^1.5.5",
         "socket-client": "^1.0.0",
@@ -46,11 +55,16 @@
         "@types/jest": "^29.5.14",
         "@types/react": "^18.3.10",
         "@types/react-dom": "^18.3.0",
+        "@types/react-modal-image": "^2.6.3",
         "@types/redux-mock-store": "^1.0.6",
         "@vitejs/plugin-react": "^4.3.2",
         "babel-jest": "^29.7.0",
         "babel-plugin-module-resolver": "^5.0.2",
+        "babel-preset-vite": "^1.1.3",
+        "dotenv": "^16.4.5",
         "eslint": "^9.11.1",
+        "eslint-config-prettier": "^9.1.0",
+        "eslint-plugin-prettier": "^5.2.1",
         "eslint-plugin-react-hooks": "^5.1.0-rc.0",
         "eslint-plugin-react-refresh": "^0.4.12",
         "globals": "^15.9.0",
@@ -69,13 +83,14 @@
         "typescript-eslint": "^8.7.0",
         "undici": "^6.20.1",
         "vite": "^5.4.8",
+        "vite-plugin-mkcert": "^1.17.6",
         "vite-tsconfig-paths": "^5.0.1"
       }
     },
     "node_modules/@adobe/css-tools": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.4.0.tgz",
-      "integrity": "sha512-Ff9+ksdQQB3rMncgqDK78uLznstjyfIf2Arnh22pW8kBpLs6rpKDwgnZT46hin5Hl1WzazzK64DOrhSwYpS7bQ==",
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.4.1.tgz",
+      "integrity": "sha512-12WGKBQzjUAI4ayyF4IAtfw2QR/IDoqk6jTddXDhtYTJF9ASmoE1zst7cVtP0aL/F1jUJL5r+JxKXKEgHNbEUQ==",
       "dev": true,
       "license": "MIT"
     },
@@ -249,9 +264,9 @@
       }
     },
     "node_modules/@babel/helper-define-polyfill-provider": {
-      "version": "0.6.2",
-      "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.6.2.tgz",
-      "integrity": "sha512-LV76g+C502biUK6AyZ3LK10vDpDyCzZnhZFXkH1L75zHPj68+qc8Zfpx2th+gzwA2MzyK+1g/3EPl62yFnVttQ==",
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.6.3.tgz",
+      "integrity": "sha512-HK7Bi+Hj6H+VTHA3ZvBis7V/6hu9QuTrnMXNybfUf2iiuU/N97I8VjB+KbhFF8Rld/Lx5MzoCwPCpPjfK+n8Cg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2104,16 +2119,16 @@
       "license": "MIT"
     },
     "node_modules/@emotion/babel-plugin": {
-      "version": "11.12.0",
-      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.12.0.tgz",
-      "integrity": "sha512-y2WQb+oP8Jqvvclh8Q55gLUyb7UFvgv7eJfsj7td5TToBrIUtPay2kMrZi4xjq9qw2vD0ZR5fSho0yqoFgX7Rw==",
+      "version": "11.13.5",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz",
+      "integrity": "sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-module-imports": "^7.16.7",
         "@babel/runtime": "^7.18.3",
         "@emotion/hash": "^0.9.2",
         "@emotion/memoize": "^0.9.0",
-        "@emotion/serialize": "^1.2.0",
+        "@emotion/serialize": "^1.3.3",
         "babel-plugin-macros": "^3.1.0",
         "convert-source-map": "^1.5.0",
         "escape-string-regexp": "^4.0.0",
@@ -2129,14 +2144,14 @@
       "license": "MIT"
     },
     "node_modules/@emotion/cache": {
-      "version": "11.13.1",
-      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.13.1.tgz",
-      "integrity": "sha512-iqouYkuEblRcXmylXIwwOodiEK5Ifl7JcX7o6V4jI3iW4mLXX3dmt5xwBtIkJiQEXFAI+pC8X0i67yiPkH9Ucw==",
+      "version": "11.13.5",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.13.5.tgz",
+      "integrity": "sha512-Z3xbtJ+UcK76eWkagZ1onvn/wAVb1GOMuR15s30Fm2wrMgC7jzpnO2JZXr4eujTTqoQFUrZIw/rT0c6Zzjca1g==",
       "license": "MIT",
       "dependencies": {
         "@emotion/memoize": "^0.9.0",
         "@emotion/sheet": "^1.4.0",
-        "@emotion/utils": "^1.4.0",
+        "@emotion/utils": "^1.4.2",
         "@emotion/weak-memoize": "^0.4.0",
         "stylis": "4.2.0"
       }
@@ -2163,17 +2178,17 @@
       "license": "MIT"
     },
     "node_modules/@emotion/react": {
-      "version": "11.13.3",
-      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.13.3.tgz",
-      "integrity": "sha512-lIsdU6JNrmYfJ5EbUCf4xW1ovy5wKQ2CkPRM4xogziOxH1nXxBSjpC9YqbFAP7circxMfYp+6x676BqWcEiixg==",
+      "version": "11.13.5",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.13.5.tgz",
+      "integrity": "sha512-6zeCUxUH+EPF1s+YF/2hPVODeV/7V07YU5x+2tfuRL8MdW6rv5vb2+CBEGTGwBdux0OIERcOS+RzxeK80k2DsQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.18.3",
-        "@emotion/babel-plugin": "^11.12.0",
-        "@emotion/cache": "^11.13.0",
-        "@emotion/serialize": "^1.3.1",
+        "@emotion/babel-plugin": "^11.13.5",
+        "@emotion/cache": "^11.13.5",
+        "@emotion/serialize": "^1.3.3",
         "@emotion/use-insertion-effect-with-fallbacks": "^1.1.0",
-        "@emotion/utils": "^1.4.0",
+        "@emotion/utils": "^1.4.2",
         "@emotion/weak-memoize": "^0.4.0",
         "hoist-non-react-statics": "^3.3.1"
       },
@@ -2187,15 +2202,15 @@
       }
     },
     "node_modules/@emotion/serialize": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.2.tgz",
-      "integrity": "sha512-grVnMvVPK9yUVE6rkKfAJlYZgo0cu3l9iMC77V7DW6E1DUIrU68pSEXRmFZFOFB1QFo57TncmOcvcbMDWsL4yA==",
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.3.tgz",
+      "integrity": "sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==",
       "license": "MIT",
       "dependencies": {
         "@emotion/hash": "^0.9.2",
         "@emotion/memoize": "^0.9.0",
         "@emotion/unitless": "^0.10.0",
-        "@emotion/utils": "^1.4.1",
+        "@emotion/utils": "^1.4.2",
         "csstype": "^3.0.2"
       }
     },
@@ -2206,17 +2221,17 @@
       "license": "MIT"
     },
     "node_modules/@emotion/styled": {
-      "version": "11.13.0",
-      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.13.0.tgz",
-      "integrity": "sha512-tkzkY7nQhW/zC4hztlwucpT8QEZ6eUzpXDRhww/Eej4tFfO0FxQYWRyg/c5CCXa4d/f174kqeXYjuQRnhzf6dA==",
+      "version": "11.13.5",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.13.5.tgz",
+      "integrity": "sha512-gnOQ+nGLPvDXgIx119JqGalys64lhMdnNQA9TMxhDA4K0Hq5+++OE20Zs5GxiCV9r814xQ2K5WmtofSpHVW6BQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.18.3",
-        "@emotion/babel-plugin": "^11.12.0",
+        "@emotion/babel-plugin": "^11.13.5",
         "@emotion/is-prop-valid": "^1.3.0",
-        "@emotion/serialize": "^1.3.0",
+        "@emotion/serialize": "^1.3.3",
         "@emotion/use-insertion-effect-with-fallbacks": "^1.1.0",
-        "@emotion/utils": "^1.4.0"
+        "@emotion/utils": "^1.4.2"
       },
       "peerDependencies": {
         "@emotion/react": "^11.0.0-rc.0",
@@ -2244,9 +2259,9 @@
       }
     },
     "node_modules/@emotion/utils": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.1.tgz",
-      "integrity": "sha512-BymCXzCG3r72VKJxaYVwOXATqXIZ85cuvg0YOUDxMGNrKc1DJRZk8MgV5wyXRyEayIMd4FuXJIUgTBXvDNW5cA==",
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.2.tgz",
+      "integrity": "sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==",
       "license": "MIT"
     },
     "node_modules/@emotion/weak-memoize": {
@@ -2689,9 +2704,9 @@
       }
     },
     "node_modules/@eslint/config-array": {
-      "version": "0.18.0",
-      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.18.0.tgz",
-      "integrity": "sha512-fTxvnS1sRMu3+JjXwJG0j/i4RT9u4qJ+lqS/yCGap4lH4zZGzQ7tu+xZqQmcMZq5OBZDL4QRxQzRjkWcGt8IVw==",
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.19.0.tgz",
+      "integrity": "sha512-zdHg2FPIFNKPdcHWtiNT+jEFCHYVplAXRDlQDyqy0zGx/q2parwh7brGJSiTxRk/TSMkbM//zt/f5CHgyTyaSQ==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
@@ -2704,9 +2719,9 @@
       }
     },
     "node_modules/@eslint/core": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.7.0.tgz",
-      "integrity": "sha512-xp5Jirz5DyPYlPiKat8jaq0EmYvDXKKpzTbxXMpT9eqlRJkRKIz9AGMdlvYjih+im+QlhWrpvVjl8IPC/lHlUw==",
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.9.0.tgz",
+      "integrity": "sha512-7ATR9F0e4W85D/0w7cU0SNj7qkAexMG+bAHEZOjo9akvGuhHE2m7umzWzfnpa0XAg5Kxc1BWmtPMV67jJ+9VUg==",
       "dev": true,
       "license": "Apache-2.0",
       "engines": {
@@ -2714,9 +2729,9 @@
       }
     },
     "node_modules/@eslint/eslintrc": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.1.0.tgz",
-      "integrity": "sha512-4Bfj15dVJdoy3RfZmmo86RK1Fwzn6SstsvK9JS+BaVKqC6QQQQyXekNaC+g+LKNgkQ+2VhGAzm6hO40AhMR3zQ==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.2.0.tgz",
+      "integrity": "sha512-grOjVNN8P3hjJn/eIETF1wwd12DdnwFDoyceUJLYYdkpbwq3nLi+4fqrTAONx7XDALqlL220wC/RHSC/QTI/0w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2771,9 +2786,9 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "9.14.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.14.0.tgz",
-      "integrity": "sha512-pFoEtFWCPyDOl+C6Ift+wC7Ro89otjigCf5vcuWqWgqNSQbRrpjSvdeE6ofLz4dHmyxD5f7gIdGT4+p36L6Twg==",
+      "version": "9.15.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.15.0.tgz",
+      "integrity": "sha512-tMTqrY+EzbXmKJR5ToI8lxu7jaN5EdmrBFJpQk5JmSlyLsx6o4t27r883K5xsLuCYCpfKBCGswMSWXsM+jB7lg==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -2791,11 +2806,10 @@
       }
     },
     "node_modules/@eslint/plugin-kit": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.2.2.tgz",
-      "integrity": "sha512-CXtq5nR4Su+2I47WPOlWud98Y5Lv8Kyxp2ukhgFx/eW6Blm18VXJO5WuQylPugRo8nbluoi6GvvxBLqHcvqUUw==",
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.2.3.tgz",
+      "integrity": "sha512-2b/g5hRmpbb1o4GnTZax9N9m0FXzz9OV42ZzI4rDDMDuHUqigAiQCEWChBWCY4ztAGVRjoWT19v0yMmc5/L5kA==",
       "dev": true,
-      "license": "Apache-2.0",
       "dependencies": {
         "levn": "^0.4.1"
       },
@@ -2899,14 +2913,14 @@
       }
     },
     "node_modules/@inquirer/confirm": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/@inquirer/confirm/-/confirm-5.0.1.tgz",
-      "integrity": "sha512-6ycMm7k7NUApiMGfVc32yIPp28iPKxhGRMqoNDiUjq2RyTAkbs5Fx0TdzBqhabcKvniDdAAvHCmsRjnNfTsogw==",
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@inquirer/confirm/-/confirm-5.0.2.tgz",
+      "integrity": "sha512-KJLUHOaKnNCYzwVbryj3TNBxyZIrr56fR5N45v6K9IPrbT6B7DcudBMfylkV1A8PUdJE15mybkEQyp2/ZUpxUA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@inquirer/core": "^10.0.1",
-        "@inquirer/type": "^3.0.0"
+        "@inquirer/core": "^10.1.0",
+        "@inquirer/type": "^3.0.1"
       },
       "engines": {
         "node": ">=18"
@@ -2916,14 +2930,14 @@
       }
     },
     "node_modules/@inquirer/core": {
-      "version": "10.0.1",
-      "resolved": "https://registry.npmjs.org/@inquirer/core/-/core-10.0.1.tgz",
-      "integrity": "sha512-KKTgjViBQUi3AAssqjUFMnMO3CM3qwCHvePV9EW+zTKGKafFGFF01sc1yOIYjLJ7QU52G/FbzKc+c01WLzXmVQ==",
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/@inquirer/core/-/core-10.1.0.tgz",
+      "integrity": "sha512-I+ETk2AL+yAVbvuKx5AJpQmoaWhpiTFOg/UJb7ZkMAK4blmtG8ATh5ct+T/8xNld0CZG/2UhtkdMwpgvld92XQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@inquirer/figures": "^1.0.7",
-        "@inquirer/type": "^3.0.0",
+        "@inquirer/figures": "^1.0.8",
+        "@inquirer/type": "^3.0.1",
         "ansi-escapes": "^4.3.2",
         "cli-width": "^4.1.0",
         "mute-stream": "^2.0.0",
@@ -2950,9 +2964,9 @@
       }
     },
     "node_modules/@inquirer/figures": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/@inquirer/figures/-/figures-1.0.7.tgz",
-      "integrity": "sha512-m+Trk77mp54Zma6xLkLuY+mvanPxlE4A7yNKs2HBiyZ4UkVs28Mv5c/pgWrHeInx+USHeX/WEPzjrWrcJiQgjw==",
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@inquirer/figures/-/figures-1.0.8.tgz",
+      "integrity": "sha512-tKd+jsmhq21AP1LhexC0pPwsCxEhGgAkg28byjJAd+xhmIs8LUX8JbUc3vBf3PhLxWiB5EvyBE5X7JSPAqMAqg==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -2960,9 +2974,9 @@
       }
     },
     "node_modules/@inquirer/type": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@inquirer/type/-/type-3.0.0.tgz",
-      "integrity": "sha512-YYykfbw/lefC7yKj7nanzQXILM7r3suIvyFlCcMskc99axmsSewXWkAfXKwMbgxL76iAFVmRwmYdwNZNc8gjog==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@inquirer/type/-/type-3.0.1.tgz",
+      "integrity": "sha512-+ksJMIy92sOAiAccGpcKZUc3bYO07cADnscIxHBknEm3uNts3movSmBofc1908BNy5edKscxYeAdaX1NXkHS6A==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -2972,6 +2986,109 @@
         "@types/node": ">=18"
       }
     },
+    "node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
+      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@isaacs/cliui/node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
     "node_modules/@istanbuljs/load-nyc-config": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
@@ -3420,9 +3537,9 @@
       }
     },
     "node_modules/@mswjs/interceptors": {
-      "version": "0.36.9",
-      "resolved": "https://registry.npmjs.org/@mswjs/interceptors/-/interceptors-0.36.9.tgz",
-      "integrity": "sha512-mMRDUBwSNeCgjSMEWfjoh4Rm9fbyZ7xQ9SBq8eGHiiyRn1ieTip3pNEt0wxWVPPxR4i1Rv9bTkeEbkX7M4c15A==",
+      "version": "0.37.1",
+      "resolved": "https://registry.npmjs.org/@mswjs/interceptors/-/interceptors-0.37.1.tgz",
+      "integrity": "sha512-SvE+tSpcX884RJrPCskXxoS965Ky/pYABDEhWW6oeSRhpUDLrS5nTvT5n1LLSDVDYvty4imVmXsy+3/ROVuknA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3438,9 +3555,9 @@
       }
     },
     "node_modules/@mui/core-downloads-tracker": {
-      "version": "6.1.6",
-      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.1.6.tgz",
-      "integrity": "sha512-nz1SlR9TdBYYPz4qKoNasMPRiGb4PaIHFkzLzhju0YVYS5QSuFF2+n7CsiHMIDcHv3piPu/xDWI53ruhOqvZwQ==",
+      "version": "6.1.9",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.1.9.tgz",
+      "integrity": "sha512-TWqj7b1w5cmSz4H/uf+y2AHxAH4ldPR7D2bz0XVyn60GCAo/zRbRPx7cF8gTs/i7CiYeHzV6dtat0VpMwOtolw==",
       "license": "MIT",
       "funding": {
         "type": "opencollective",
@@ -3448,9 +3565,9 @@
       }
     },
     "node_modules/@mui/icons-material": {
-      "version": "6.1.6",
-      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-6.1.6.tgz",
-      "integrity": "sha512-5r9urIL2lxXb/sPN3LFfFYEibsXJUb986HhhIeu1gOcte460pwdSiEhBSxkAuyT8Dj7jvu9MjqSBmSumQELo8A==",
+      "version": "6.1.9",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-6.1.9.tgz",
+      "integrity": "sha512-AzlhIT51rdjkZ/EcUV2dbhNkNSUHIqCnNoUxodpiTw8buyAUBd+qnxg5OBSuPpun/ZEdSSB8Q7Uyh6zqjiMsEQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.26.0"
@@ -3463,7 +3580,7 @@
         "url": "https://opencollective.com/mui-org"
       },
       "peerDependencies": {
-        "@mui/material": "^6.1.6",
+        "@mui/material": "^6.1.9",
         "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
         "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
       },
@@ -3474,16 +3591,16 @@
       }
     },
     "node_modules/@mui/material": {
-      "version": "6.1.6",
-      "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.1.6.tgz",
-      "integrity": "sha512-1yvejiQ/601l5AK3uIdUlAVElyCxoqKnl7QA+2oFB/2qYPWfRwDgavW/MoywS5Y2gZEslcJKhe0s2F3IthgFgw==",
+      "version": "6.1.9",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.1.9.tgz",
+      "integrity": "sha512-NwqIN0bdsgzSbZd5JFcC+2ez0XW/XNs8uiV2PDHrqQ4qf/FEasFJG1z6g8JbCN0YlTrHZekVb17X0Fv0qcYJfQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.26.0",
-        "@mui/core-downloads-tracker": "^6.1.6",
-        "@mui/system": "^6.1.6",
+        "@mui/core-downloads-tracker": "^6.1.9",
+        "@mui/system": "^6.1.9",
         "@mui/types": "^7.2.19",
-        "@mui/utils": "^6.1.6",
+        "@mui/utils": "^6.1.9",
         "@popperjs/core": "^2.11.8",
         "@types/react-transition-group": "^4.4.11",
         "clsx": "^2.1.1",
@@ -3502,7 +3619,7 @@
       "peerDependencies": {
         "@emotion/react": "^11.5.0",
         "@emotion/styled": "^11.3.0",
-        "@mui/material-pigment-css": "^6.1.6",
+        "@mui/material-pigment-css": "^6.1.9",
         "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
         "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
         "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
@@ -3523,13 +3640,13 @@
       }
     },
     "node_modules/@mui/private-theming": {
-      "version": "6.1.6",
-      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.1.6.tgz",
-      "integrity": "sha512-ioAiFckaD/fJSnTrUMWgjl9HYBWt7ixCh7zZw7gDZ+Tae7NuprNV6QJK95EidDT7K0GetR2rU3kAeIR61Myttw==",
+      "version": "6.1.9",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.1.9.tgz",
+      "integrity": "sha512-7aum/O1RquBYhfwL/7egDyl9GqJgPM6hoJDFFBbhF6Sgv9yI9v4w3ArKUkuVvR0CtVj4NXRVMKEioh1bjUzvuA==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.26.0",
-        "@mui/utils": "^6.1.6",
+        "@mui/utils": "^6.1.9",
         "prop-types": "^15.8.1"
       },
       "engines": {
@@ -3550,14 +3667,14 @@
       }
     },
     "node_modules/@mui/styled-engine": {
-      "version": "6.1.6",
-      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.1.6.tgz",
-      "integrity": "sha512-I+yS1cSuSvHnZDBO7e7VHxTWpj+R7XlSZvTC4lS/OIbUNJOMMSd3UDP6V2sfwzAdmdDNBi7NGCRv2SZ6O9hGDA==",
+      "version": "6.1.9",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.1.9.tgz",
+      "integrity": "sha512-xynSLlJRxHLzSfQaiDjkaTx8LiFb9ByVa7aOdwFnTxGWFMY1F+mkXwAUY4jDDE+MAxkWxlzzQE0wOohnsxhdQg==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.26.0",
-        "@emotion/cache": "^11.13.1",
-        "@emotion/serialize": "^1.3.2",
+        "@emotion/cache": "^11.13.5",
+        "@emotion/serialize": "^1.3.3",
         "@emotion/sheet": "^1.4.0",
         "csstype": "^3.1.3",
         "prop-types": "^15.8.1"
@@ -3584,16 +3701,16 @@
       }
     },
     "node_modules/@mui/system": {
-      "version": "6.1.6",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.1.6.tgz",
-      "integrity": "sha512-qOf1VUE9wK8syiB0BBCp82oNBAVPYdj4Trh+G1s+L+ImYiKlubWhhqlnvWt3xqMevR+D2h1CXzA1vhX2FvA+VQ==",
+      "version": "6.1.9",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.1.9.tgz",
+      "integrity": "sha512-8x+RucnNp21gfFYsklCaZf0COXbv3+v0lrVuXONxvPEkESi2rwLlOi8UPJfcz6LxZOAX3v3oQ7qw18vnpgueRg==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.26.0",
-        "@mui/private-theming": "^6.1.6",
-        "@mui/styled-engine": "^6.1.6",
+        "@mui/private-theming": "^6.1.9",
+        "@mui/styled-engine": "^6.1.9",
         "@mui/types": "^7.2.19",
-        "@mui/utils": "^6.1.6",
+        "@mui/utils": "^6.1.9",
         "clsx": "^2.1.1",
         "csstype": "^3.1.3",
         "prop-types": "^15.8.1"
@@ -3638,9 +3755,9 @@
       }
     },
     "node_modules/@mui/utils": {
-      "version": "6.1.6",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.1.6.tgz",
-      "integrity": "sha512-sBS6D9mJECtELASLM+18WUcXF6RH3zNxBRFeyCRg8wad6NbyNrdxLuwK+Ikvc38sTZwBzAz691HmSofLqHd9sQ==",
+      "version": "6.1.9",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.1.9.tgz",
+      "integrity": "sha512-N7uzBp7p2or+xanXn3aH2OTINC6F/Ru/U8h6amhRZEev8bJhKN86rIDIoxZZ902tj+09LXtH83iLxFMjMHyqNA==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.26.0",
@@ -3705,6 +3822,173 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@octokit/auth-token": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@octokit/auth-token/-/auth-token-4.0.0.tgz",
+      "integrity": "sha512-tY/msAuJo6ARbK6SPIxZrPBms3xPbfwBrulZe0Wtr/DIY9lje2HeV1uoebShn6mx7SjCHif6EjMvoREj+gZ+SA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/@octokit/core": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@octokit/core/-/core-5.2.0.tgz",
+      "integrity": "sha512-1LFfa/qnMQvEOAdzlQymH0ulepxbxnCYAKJZfMci/5XJyIHWgEYnDmgnKakbTh7CH2tFQ5O60oYDvns4i9RAIg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@octokit/auth-token": "^4.0.0",
+        "@octokit/graphql": "^7.1.0",
+        "@octokit/request": "^8.3.1",
+        "@octokit/request-error": "^5.1.0",
+        "@octokit/types": "^13.0.0",
+        "before-after-hook": "^2.2.0",
+        "universal-user-agent": "^6.0.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/@octokit/endpoint": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/@octokit/endpoint/-/endpoint-9.0.5.tgz",
+      "integrity": "sha512-ekqR4/+PCLkEBF6qgj8WqJfvDq65RH85OAgrtnVp1mSxaXF03u2xW/hUdweGS5654IlC0wkNYC18Z50tSYTAFw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@octokit/types": "^13.1.0",
+        "universal-user-agent": "^6.0.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/@octokit/graphql": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@octokit/graphql/-/graphql-7.1.0.tgz",
+      "integrity": "sha512-r+oZUH7aMFui1ypZnAvZmn0KSqAUgE1/tUXIWaqUCa1758ts/Jio84GZuzsvUkme98kv0WFY8//n0J1Z+vsIsQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@octokit/request": "^8.3.0",
+        "@octokit/types": "^13.0.0",
+        "universal-user-agent": "^6.0.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/@octokit/openapi-types": {
+      "version": "22.2.0",
+      "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-22.2.0.tgz",
+      "integrity": "sha512-QBhVjcUa9W7Wwhm6DBFu6ZZ+1/t/oYxqc2tp81Pi41YNuJinbFRx8B133qVOrAaBbF7D/m0Et6f9/pZt9Rc+tg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@octokit/plugin-paginate-rest": {
+      "version": "11.3.1",
+      "resolved": "https://registry.npmjs.org/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-11.3.1.tgz",
+      "integrity": "sha512-ryqobs26cLtM1kQxqeZui4v8FeznirUsksiA+RYemMPJ7Micju0WSkv50dBksTuZks9O5cg4wp+t8fZ/cLY56g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@octokit/types": "^13.5.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "@octokit/core": "5"
+      }
+    },
+    "node_modules/@octokit/plugin-request-log": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@octokit/plugin-request-log/-/plugin-request-log-4.0.1.tgz",
+      "integrity": "sha512-GihNqNpGHorUrO7Qa9JbAl0dbLnqJVrV8OXe2Zm5/Y4wFkZQDfTreBzVmiRfJVfE4mClXdihHnbpyyO9FSX4HA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "@octokit/core": "5"
+      }
+    },
+    "node_modules/@octokit/plugin-rest-endpoint-methods": {
+      "version": "13.2.2",
+      "resolved": "https://registry.npmjs.org/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-13.2.2.tgz",
+      "integrity": "sha512-EI7kXWidkt3Xlok5uN43suK99VWqc8OaIMktY9d9+RNKl69juoTyxmLoWPIZgJYzi41qj/9zU7G/ljnNOJ5AFA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@octokit/types": "^13.5.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "@octokit/core": "^5"
+      }
+    },
+    "node_modules/@octokit/request": {
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/@octokit/request/-/request-8.4.0.tgz",
+      "integrity": "sha512-9Bb014e+m2TgBeEJGEbdplMVWwPmL1FPtggHQRkV+WVsMggPtEkLKPlcVYm/o8xKLkpJ7B+6N8WfQMtDLX2Dpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@octokit/endpoint": "^9.0.1",
+        "@octokit/request-error": "^5.1.0",
+        "@octokit/types": "^13.1.0",
+        "universal-user-agent": "^6.0.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/@octokit/request-error": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-5.1.0.tgz",
+      "integrity": "sha512-GETXfE05J0+7H2STzekpKObFe765O5dlAKUTLNGeH+x47z7JjXHfsHKo5z21D/o/IOZTUEI6nyWyR+bZVP/n5Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@octokit/types": "^13.1.0",
+        "deprecation": "^2.0.0",
+        "once": "^1.4.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/@octokit/rest": {
+      "version": "20.1.1",
+      "resolved": "https://registry.npmjs.org/@octokit/rest/-/rest-20.1.1.tgz",
+      "integrity": "sha512-MB4AYDsM5jhIHro/dq4ix1iWTLGToIGk6cWF5L6vanFaMble5jTX/UBQyiv05HsWnwUtY8JrfHy2LWfKwihqMw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@octokit/core": "^5.0.2",
+        "@octokit/plugin-paginate-rest": "11.3.1",
+        "@octokit/plugin-request-log": "^4.0.0",
+        "@octokit/plugin-rest-endpoint-methods": "13.2.2"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/@octokit/types": {
+      "version": "13.6.2",
+      "resolved": "https://registry.npmjs.org/@octokit/types/-/types-13.6.2.tgz",
+      "integrity": "sha512-WpbZfZUcZU77DrSW4wbsSgTPfKcp286q3ItaIgvSbBpZJlu6mnYXAkjZz6LVZPXkEvLIM8McanyZejKTYUHipA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@octokit/openapi-types": "^22.2.0"
+      }
+    },
     "node_modules/@open-draft/deferred-promise": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/@open-draft/deferred-promise/-/deferred-promise-2.2.0.tgz",
@@ -3730,6 +4014,30 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@pkgr/core": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.1.1.tgz",
+      "integrity": "sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/unts"
+      }
+    },
     "node_modules/@popperjs/core": {
       "version": "2.11.8",
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
@@ -3766,18 +4074,18 @@
       }
     },
     "node_modules/@remix-run/router": {
-      "version": "1.20.0",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.20.0.tgz",
-      "integrity": "sha512-mUnk8rPJBI9loFDZ+YzPGdeniYK+FTmRD1TMCz7ev2SNIozyKKpnGgsxO34u6Z4z/t0ITuu7voi/AshfsGsgFg==",
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.21.0.tgz",
+      "integrity": "sha512-xfSkCAchbdG5PnbrKqFWwia4Bi61nH+wm8wLEqfHDyp7Y3dZzgqS2itV8i4gAq9pC2HsTpwyBC6Ds8VHZ96JlA==",
       "license": "MIT",
       "engines": {
         "node": ">=14.0.0"
       }
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.24.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.24.4.tgz",
-      "integrity": "sha512-jfUJrFct/hTA0XDM5p/htWKoNNTbDLY0KRwEt6pyOA6k2fmk0WVwl65PdUdJZgzGEHWx+49LilkcSaumQRyNQw==",
+      "version": "4.27.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.27.4.tgz",
+      "integrity": "sha512-2Y3JT6f5MrQkICUyRVCw4oa0sutfAsgaSsb0Lmmy1Wi2y7X5vT9Euqw4gOsCyy0YfKURBg35nhUKZS4mDcfULw==",
       "cpu": [
         "arm"
       ],
@@ -3789,9 +4097,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.24.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.24.4.tgz",
-      "integrity": "sha512-j4nrEO6nHU1nZUuCfRKoCcvh7PIywQPUCBa2UsootTHvTHIoIu2BzueInGJhhvQO/2FTRdNYpf63xsgEqH9IhA==",
+      "version": "4.27.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.27.4.tgz",
+      "integrity": "sha512-wzKRQXISyi9UdCVRqEd0H4cMpzvHYt1f/C3CoIjES6cG++RHKhrBj2+29nPF0IB5kpy9MS71vs07fvrNGAl/iA==",
       "cpu": [
         "arm64"
       ],
@@ -3803,9 +4111,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.24.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.24.4.tgz",
-      "integrity": "sha512-GmU/QgGtBTeraKyldC7cDVVvAJEOr3dFLKneez/n7BvX57UdhOqDsVwzU7UOnYA7AAOt+Xb26lk79PldDHgMIQ==",
+      "version": "4.27.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.27.4.tgz",
+      "integrity": "sha512-PlNiRQapift4LNS8DPUHuDX/IdXiLjf8mc5vdEmUR0fF/pyy2qWwzdLjB+iZquGr8LuN4LnUoSEvKRwjSVYz3Q==",
       "cpu": [
         "arm64"
       ],
@@ -3817,9 +4125,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.24.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.24.4.tgz",
-      "integrity": "sha512-N6oDBiZCBKlwYcsEPXGDE4g9RoxZLK6vT98M8111cW7VsVJFpNEqvJeIPfsCzbf0XEakPslh72X0gnlMi4Ddgg==",
+      "version": "4.27.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.27.4.tgz",
+      "integrity": "sha512-o9bH2dbdgBDJaXWJCDTNDYa171ACUdzpxSZt+u/AAeQ20Nk5x+IhA+zsGmrQtpkLiumRJEYef68gcpn2ooXhSQ==",
       "cpu": [
         "x64"
       ],
@@ -3831,9 +4139,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-arm64": {
-      "version": "4.24.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.24.4.tgz",
-      "integrity": "sha512-py5oNShCCjCyjWXCZNrRGRpjWsF0ic8f4ieBNra5buQz0O/U6mMXCpC1LvrHuhJsNPgRt36tSYMidGzZiJF6mw==",
+      "version": "4.27.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.27.4.tgz",
+      "integrity": "sha512-NBI2/i2hT9Q+HySSHTBh52da7isru4aAAo6qC3I7QFVsuhxi2gM8t/EI9EVcILiHLj1vfi+VGGPaLOUENn7pmw==",
       "cpu": [
         "arm64"
       ],
@@ -3845,9 +4153,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-x64": {
-      "version": "4.24.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.24.4.tgz",
-      "integrity": "sha512-L7VVVW9FCnTTp4i7KrmHeDsDvjB4++KOBENYtNYAiYl96jeBThFfhP6HVxL74v4SiZEVDH/1ILscR5U9S4ms4g==",
+      "version": "4.27.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.27.4.tgz",
+      "integrity": "sha512-wYcC5ycW2zvqtDYrE7deary2P2UFmSh85PUpAx+dwTCO9uw3sgzD6Gv9n5X4vLaQKsrfTSZZ7Z7uynQozPVvWA==",
       "cpu": [
         "x64"
       ],
@@ -3859,9 +4167,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.24.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.24.4.tgz",
-      "integrity": "sha512-10ICosOwYChROdQoQo589N5idQIisxjaFE/PAnX2i0Zr84mY0k9zul1ArH0rnJ/fpgiqfu13TFZR5A5YJLOYZA==",
+      "version": "4.27.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.27.4.tgz",
+      "integrity": "sha512-9OwUnK/xKw6DyRlgx8UizeqRFOfi9mf5TYCw1uolDaJSbUmBxP85DE6T4ouCMoN6pXw8ZoTeZCSEfSaYo+/s1w==",
       "cpu": [
         "arm"
       ],
@@ -3873,9 +4181,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.24.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.24.4.tgz",
-      "integrity": "sha512-ySAfWs69LYC7QhRDZNKqNhz2UKN8LDfbKSMAEtoEI0jitwfAG2iZwVqGACJT+kfYvvz3/JgsLlcBP+WWoKCLcw==",
+      "version": "4.27.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.27.4.tgz",
+      "integrity": "sha512-Vgdo4fpuphS9V24WOV+KwkCVJ72u7idTgQaBoLRD0UxBAWTF9GWurJO9YD9yh00BzbkhpeXtm6na+MvJU7Z73A==",
       "cpu": [
         "arm"
       ],
@@ -3887,9 +4195,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.24.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.24.4.tgz",
-      "integrity": "sha512-uHYJ0HNOI6pGEeZ/5mgm5arNVTI0nLlmrbdph+pGXpC9tFHFDQmDMOEqkmUObRfosJqpU8RliYoGz06qSdtcjg==",
+      "version": "4.27.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.27.4.tgz",
+      "integrity": "sha512-pleyNgyd1kkBkw2kOqlBx+0atfIIkkExOTiifoODo6qKDSpnc6WzUY5RhHdmTdIJXBdSnh6JknnYTtmQyobrVg==",
       "cpu": [
         "arm64"
       ],
@@ -3901,9 +4209,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.24.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.24.4.tgz",
-      "integrity": "sha512-38yiWLemQf7aLHDgTg85fh3hW9stJ0Muk7+s6tIkSUOMmi4Xbv5pH/5Bofnsb6spIwD5FJiR+jg71f0CH5OzoA==",
+      "version": "4.27.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.27.4.tgz",
+      "integrity": "sha512-caluiUXvUuVyCHr5DxL8ohaaFFzPGmgmMvwmqAITMpV/Q+tPoaHZ/PWa3t8B2WyoRcIIuu1hkaW5KkeTDNSnMA==",
       "cpu": [
         "arm64"
       ],
@@ -3915,9 +4223,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-      "version": "4.24.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.24.4.tgz",
-      "integrity": "sha512-q73XUPnkwt9ZNF2xRS4fvneSuaHw2BXuV5rI4cw0fWYVIWIBeDZX7c7FWhFQPNTnE24172K30I+dViWRVD9TwA==",
+      "version": "4.27.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.27.4.tgz",
+      "integrity": "sha512-FScrpHrO60hARyHh7s1zHE97u0KlT/RECzCKAdmI+LEoC1eDh/RDji9JgFqyO+wPDb86Oa/sXkily1+oi4FzJQ==",
       "cpu": [
         "ppc64"
       ],
@@ -3929,9 +4237,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.24.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.24.4.tgz",
-      "integrity": "sha512-Aie/TbmQi6UXokJqDZdmTJuZBCU3QBDA8oTKRGtd4ABi/nHgXICulfg1KI6n9/koDsiDbvHAiQO3YAUNa/7BCw==",
+      "version": "4.27.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.27.4.tgz",
+      "integrity": "sha512-qyyprhyGb7+RBfMPeww9FlHwKkCXdKHeGgSqmIXw9VSUtvyFZ6WZRtnxgbuz76FK7LyoN8t/eINRbPUcvXB5fw==",
       "cpu": [
         "riscv64"
       ],
@@ -3943,9 +4251,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.24.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.24.4.tgz",
-      "integrity": "sha512-P8MPErVO/y8ohWSP9JY7lLQ8+YMHfTI4bAdtCi3pC2hTeqFJco2jYspzOzTUB8hwUWIIu1xwOrJE11nP+0JFAQ==",
+      "version": "4.27.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.27.4.tgz",
+      "integrity": "sha512-PFz+y2kb6tbh7m3A7nA9++eInGcDVZUACulf/KzDtovvdTizHpZaJty7Gp0lFwSQcrnebHOqxF1MaKZd7psVRg==",
       "cpu": [
         "s390x"
       ],
@@ -3957,9 +4265,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.24.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.24.4.tgz",
-      "integrity": "sha512-K03TljaaoPK5FOyNMZAAEmhlyO49LaE4qCsr0lYHUKyb6QacTNF9pnfPpXnFlFD3TXuFbFbz7tJ51FujUXkXYA==",
+      "version": "4.27.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.27.4.tgz",
+      "integrity": "sha512-Ni8mMtfo+o/G7DVtweXXV/Ol2TFf63KYjTtoZ5f078AUgJTmaIJnj4JFU7TK/9SVWTaSJGxPi5zMDgK4w+Ez7Q==",
       "cpu": [
         "x64"
       ],
@@ -3971,9 +4279,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.24.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.24.4.tgz",
-      "integrity": "sha512-VJYl4xSl/wqG2D5xTYncVWW+26ICV4wubwN9Gs5NrqhJtayikwCXzPL8GDsLnaLU3WwhQ8W02IinYSFJfyo34Q==",
+      "version": "4.27.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.27.4.tgz",
+      "integrity": "sha512-5AeeAF1PB9TUzD+3cROzFTnAJAcVUGLuR8ng0E0WXGkYhp6RD6L+6szYVX+64Rs0r72019KHZS1ka1q+zU/wUw==",
       "cpu": [
         "x64"
       ],
@@ -3985,9 +4293,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.24.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.24.4.tgz",
-      "integrity": "sha512-ku2GvtPwQfCqoPFIJCqZ8o7bJcj+Y54cZSr43hHca6jLwAiCbZdBUOrqE6y29QFajNAzzpIOwsckaTFmN6/8TA==",
+      "version": "4.27.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.27.4.tgz",
+      "integrity": "sha512-yOpVsA4K5qVwu2CaS3hHxluWIK5HQTjNV4tWjQXluMiiiu4pJj4BN98CvxohNCpcjMeTXk/ZMJBRbgRg8HBB6A==",
       "cpu": [
         "arm64"
       ],
@@ -3999,9 +4307,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.24.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.24.4.tgz",
-      "integrity": "sha512-V3nCe+eTt/W6UYNr/wGvO1fLpHUrnlirlypZfKCT1fG6hWfqhPgQV/K/mRBXBpxc0eKLIF18pIOFVPh0mqHjlg==",
+      "version": "4.27.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.27.4.tgz",
+      "integrity": "sha512-KtwEJOaHAVJlxV92rNYiG9JQwQAdhBlrjNRp7P9L8Cb4Rer3in+0A+IPhJC9y68WAi9H0sX4AiG2NTsVlmqJeQ==",
       "cpu": [
         "ia32"
       ],
@@ -4013,9 +4321,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.24.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.24.4.tgz",
-      "integrity": "sha512-LTw1Dfd0mBIEqUVCxbvTE/LLo+9ZxVC9k99v1v4ahg9Aak6FpqOfNu5kRkeTAn0wphoC4JU7No1/rL+bBCEwhg==",
+      "version": "4.27.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.27.4.tgz",
+      "integrity": "sha512-3j4jx1TppORdTAoBJRd+/wJRGCPC0ETWkXOecJ6PPZLj6SptXkrXcNqdj0oclbKML6FkQltdz7bBA3rUSirZug==",
       "cpu": [
         "x64"
       ],
@@ -4095,7 +4403,8 @@
     "node_modules/@socket.io/component-emitter": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz",
-      "integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA=="
+      "integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==",
+      "license": "MIT"
     },
     "node_modules/@styled/typescript-styled-plugin": {
       "version": "1.0.1",
@@ -4112,9 +4421,9 @@
       }
     },
     "node_modules/@tanstack/query-core": {
-      "version": "5.59.17",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.59.17.tgz",
-      "integrity": "sha512-jWdDiif8kaqnRGHNXAa9CnudtxY5v9DUxXhodgqX2Rwzj+1UwStDHEbBd9IA5C7VYAaJ2s+BxFR6PUBs8ERorA==",
+      "version": "5.61.5",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.61.5.tgz",
+      "integrity": "sha512-iG5vqurEOEbv+paP6kW3zPENa99kSIrd1THISJMaTwVlJ+N5yjVDNOUwp9McK2DWqWCXM3v13ubBbAyhxT78UQ==",
       "license": "MIT",
       "funding": {
         "type": "github",
@@ -4122,9 +4431,9 @@
       }
     },
     "node_modules/@tanstack/query-devtools": {
-      "version": "5.59.19",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.59.19.tgz",
-      "integrity": "sha512-Gw+3zsADpqiYgx/6MMr9bP1+x2LR8vOuGjo5Un/89qwwP3z7WAHPWFagLFDYkLq68NX7ekUpW/EOYlUMugMXGA==",
+      "version": "5.61.4",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.61.4.tgz",
+      "integrity": "sha512-21Tw+u8E3IJJj4A/Bct4H0uBaDTEu7zBrR79FeSyY+mS2gx5/m316oDtJiKkILc819VSTYt+sFzODoJNcpPqZQ==",
       "license": "MIT",
       "funding": {
         "type": "github",
@@ -4132,12 +4441,12 @@
       }
     },
     "node_modules/@tanstack/react-query": {
-      "version": "5.59.19",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.59.19.tgz",
-      "integrity": "sha512-xLRfyFyQOFcLltKCds0LijfC6/HQJrrTTnZB8ciyn74LIkVAm++vZJ6eUVG20RmJtdP8REdy7vSOYW4M3//XLA==",
+      "version": "5.61.5",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.61.5.tgz",
+      "integrity": "sha512-rjy8aqPgBBEz/rjJnpnuhi8TVkVTorMUsJlM3lMvrRb5wK6yzfk34Er0fnJ7w/4qyF01SnXsLB/QsTBsLF5PaQ==",
       "license": "MIT",
       "dependencies": {
-        "@tanstack/query-core": "5.59.17"
+        "@tanstack/query-core": "5.61.5"
       },
       "funding": {
         "type": "github",
@@ -4148,19 +4457,19 @@
       }
     },
     "node_modules/@tanstack/react-query-devtools": {
-      "version": "5.59.19",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.59.19.tgz",
-      "integrity": "sha512-mYFWTHLtJr2HdyYPZPzzvQ2ksCsSL6L04fCtusPFD3waskXrtmvWvyuDIGeEGdVAYS0Urwxw/0sYvcTVQZH+zQ==",
+      "version": "5.61.5",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.61.5.tgz",
+      "integrity": "sha512-P2DwlKyoGar6FX2XL324gM7AX8fuXm6DecLvfUoGpWbxtbuAtfzglRiCDLKkc5tJ7pekuaZsFFas/cyfTymoCQ==",
       "license": "MIT",
       "dependencies": {
-        "@tanstack/query-devtools": "5.59.19"
+        "@tanstack/query-devtools": "5.61.4"
       },
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/tannerlinsley"
       },
       "peerDependencies": {
-        "@tanstack/react-query": "^5.59.19",
+        "@tanstack/react-query": "^5.61.5",
         "react": "^18 || ^19"
       }
     },
@@ -4498,13 +4807,13 @@
       }
     },
     "node_modules/@types/node": {
-      "version": "22.9.0",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.9.0.tgz",
-      "integrity": "sha512-vuyHg81vvWA1Z1ELfvLko2c8f34gyA0zaic0+Rllc5lbCnbSyuvb2Oxpm6TAUAC/2xZN3QGqxBNggD1nNR2AfQ==",
+      "version": "22.10.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.1.tgz",
+      "integrity": "sha512-qKgsUwfHZV2WCWLAnVP1JqnpE6Im6h3Y0+fYgMTasNQ7V++CBX5OT1as0g0f+OyubbFqhf6XVNIsmN4IIhEgGQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "undici-types": "~6.19.8"
+        "undici-types": "~6.20.0"
       }
     },
     "node_modules/@types/parse-json": {
@@ -4547,6 +4856,16 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-modal-image": {
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/@types/react-modal-image/-/react-modal-image-2.6.3.tgz",
+      "integrity": "sha512-Uh4joinWiyRD2e4Q+MRiMiQfz7K7W16peF2xfEx821t7p6O6sG4xi42uuN5tsYhx1mTOsagUPqIQiWcYgKtkww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react-reconciler": {
       "version": "0.28.8",
       "resolved": "https://registry.npmjs.org/@types/react-reconciler/-/react-reconciler-0.28.8.tgz",
@@ -4567,9 +4886,9 @@
       }
     },
     "node_modules/@types/redux-mock-store": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/@types/redux-mock-store/-/redux-mock-store-1.0.6.tgz",
-      "integrity": "sha512-eg5RDfhJTXuoJjOMyXiJbaDb1B8tfTaJixscmu+jOusj6adGC0Krntz09Tf4gJgXeCqCrM5bBMd+B7ez0izcAQ==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@types/redux-mock-store/-/redux-mock-store-1.5.0.tgz",
+      "integrity": "sha512-jcscBazm6j05Hs6xYCca6psTUBbFT2wqMxT7wZEHAYFxHB/I8jYk7d5msrHUlDiSL02HdTqTmkK2oIV8i3C8DA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -4638,17 +4957,17 @@
       "license": "MIT"
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "8.13.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.13.0.tgz",
-      "integrity": "sha512-nQtBLiZYMUPkclSeC3id+x4uVd1SGtHuElTxL++SfP47jR0zfkZBJHc+gL4qPsgTuypz0k8Y2GheaDYn6Gy3rg==",
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.16.0.tgz",
+      "integrity": "sha512-5YTHKV8MYlyMI6BaEG7crQ9BhSc8RxzshOReKwZwRWN0+XvvTOm+L/UYLCYxFpfwYuAAqhxiq4yae0CMFwbL7Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/regexpp": "^4.10.0",
-        "@typescript-eslint/scope-manager": "8.13.0",
-        "@typescript-eslint/type-utils": "8.13.0",
-        "@typescript-eslint/utils": "8.13.0",
-        "@typescript-eslint/visitor-keys": "8.13.0",
+        "@typescript-eslint/scope-manager": "8.16.0",
+        "@typescript-eslint/type-utils": "8.16.0",
+        "@typescript-eslint/utils": "8.16.0",
+        "@typescript-eslint/visitor-keys": "8.16.0",
         "graphemer": "^1.4.0",
         "ignore": "^5.3.1",
         "natural-compare": "^1.4.0",
@@ -4672,16 +4991,16 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "8.13.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.13.0.tgz",
-      "integrity": "sha512-w0xp+xGg8u/nONcGw1UXAr6cjCPU1w0XVyBs6Zqaj5eLmxkKQAByTdV/uGgNN5tVvN/kKpoQlP2cL7R+ajZZIQ==",
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.16.0.tgz",
+      "integrity": "sha512-D7DbgGFtsqIPIFMPJwCad9Gfi/hC0PWErRRHFnaCWoEDYi5tQUDiJCTmGUbBiLzjqAck4KcXt9Ayj0CNlIrF+w==",
       "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
-        "@typescript-eslint/scope-manager": "8.13.0",
-        "@typescript-eslint/types": "8.13.0",
-        "@typescript-eslint/typescript-estree": "8.13.0",
-        "@typescript-eslint/visitor-keys": "8.13.0",
+        "@typescript-eslint/scope-manager": "8.16.0",
+        "@typescript-eslint/types": "8.16.0",
+        "@typescript-eslint/typescript-estree": "8.16.0",
+        "@typescript-eslint/visitor-keys": "8.16.0",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -4701,14 +5020,14 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "8.13.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.13.0.tgz",
-      "integrity": "sha512-XsGWww0odcUT0gJoBZ1DeulY1+jkaHUciUq4jKNv4cpInbvvrtDoyBH9rE/n2V29wQJPk8iCH1wipra9BhmiMA==",
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.16.0.tgz",
+      "integrity": "sha512-mwsZWubQvBki2t5565uxF0EYvG+FwdFb8bMtDuGQLdCCnGPrDEDvm1gtfynuKlnpzeBRqdFCkMf9jg1fnAK8sg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.13.0",
-        "@typescript-eslint/visitor-keys": "8.13.0"
+        "@typescript-eslint/types": "8.16.0",
+        "@typescript-eslint/visitor-keys": "8.16.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -4719,14 +5038,14 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "8.13.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.13.0.tgz",
-      "integrity": "sha512-Rqnn6xXTR316fP4D2pohZenJnp+NwQ1mo7/JM+J1LWZENSLkJI8ID8QNtlvFeb0HnFSK94D6q0cnMX6SbE5/vA==",
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.16.0.tgz",
+      "integrity": "sha512-IqZHGG+g1XCWX9NyqnI/0CX5LL8/18awQqmkZSl2ynn8F76j579dByc0jhfVSnSnhf7zv76mKBQv9HQFKvDCgg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/typescript-estree": "8.13.0",
-        "@typescript-eslint/utils": "8.13.0",
+        "@typescript-eslint/typescript-estree": "8.16.0",
+        "@typescript-eslint/utils": "8.16.0",
         "debug": "^4.3.4",
         "ts-api-utils": "^1.3.0"
       },
@@ -4737,6 +5056,9 @@
         "type": "opencollective",
         "url": "https://opencollective.com/typescript-eslint"
       },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0"
+      },
       "peerDependenciesMeta": {
         "typescript": {
           "optional": true
@@ -4744,9 +5066,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "8.13.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.13.0.tgz",
-      "integrity": "sha512-4cyFErJetFLckcThRUFdReWJjVsPCqyBlJTi6IDEpc1GWCIIZRFxVppjWLIMcQhNGhdWJJRYFHpHoDWvMlDzng==",
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.16.0.tgz",
+      "integrity": "sha512-NzrHj6thBAOSE4d9bsuRNMvk+BvaQvmY4dDglgkgGC0EW/tB3Kelnp3tAKH87GEwzoxgeQn9fNGRyFJM/xd+GQ==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -4758,14 +5080,14 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "8.13.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.13.0.tgz",
-      "integrity": "sha512-v7SCIGmVsRK2Cy/LTLGN22uea6SaUIlpBcO/gnMGT/7zPtxp90bphcGf4fyrCQl3ZtiBKqVTG32hb668oIYy1g==",
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.16.0.tgz",
+      "integrity": "sha512-E2+9IzzXMc1iaBy9zmo+UYvluE3TW7bCGWSF41hVWUE01o8nzr1rvOQYSxelxr6StUvRcTMe633eY8mXASMaNw==",
       "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
-        "@typescript-eslint/types": "8.13.0",
-        "@typescript-eslint/visitor-keys": "8.13.0",
+        "@typescript-eslint/types": "8.16.0",
+        "@typescript-eslint/visitor-keys": "8.16.0",
         "debug": "^4.3.4",
         "fast-glob": "^3.3.2",
         "is-glob": "^4.0.3",
@@ -4826,16 +5148,16 @@
       }
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "8.13.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.13.0.tgz",
-      "integrity": "sha512-A1EeYOND6Uv250nybnLZapeXpYMl8tkzYUxqmoKAWnI4sei3ihf2XdZVd+vVOmHGcp3t+P7yRrNsyyiXTvShFQ==",
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.16.0.tgz",
+      "integrity": "sha512-C1zRy/mOL8Pj157GiX4kaw7iyRLKfJXBR3L82hk5kS/GyHcOFmy4YUq/zfZti72I9wnuQtA/+xzft4wCC8PJdA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.4.0",
-        "@typescript-eslint/scope-manager": "8.13.0",
-        "@typescript-eslint/types": "8.13.0",
-        "@typescript-eslint/typescript-estree": "8.13.0"
+        "@typescript-eslint/scope-manager": "8.16.0",
+        "@typescript-eslint/types": "8.16.0",
+        "@typescript-eslint/typescript-estree": "8.16.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -4846,17 +5168,22 @@
       },
       "peerDependencies": {
         "eslint": "^8.57.0 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "8.13.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.13.0.tgz",
-      "integrity": "sha512-7N/+lztJqH4Mrf0lb10R/CbI1EaAMMGyF5y0oJvFoAhafwgiRA7TXyd8TFn8FC8k5y2dTsYogg238qavRGNnlw==",
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.16.0.tgz",
+      "integrity": "sha512-pq19gbaMOmFE3CbL0ZB8J8BFCo2ckfHBfaIsaOZgBIF4EoISJIdLX5xRhd0FGB0LlHReNRuzoJoMGpTjq8F2CQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.13.0",
-        "eslint-visitor-keys": "^3.4.3"
+        "@typescript-eslint/types": "8.16.0",
+        "eslint-visitor-keys": "^4.2.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -4866,29 +5193,16 @@
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
-    "node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": {
-      "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
-      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
     "node_modules/@vitejs/plugin-react": {
-      "version": "4.3.3",
-      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.3.3.tgz",
-      "integrity": "sha512-NooDe9GpHGqNns1i8XDERg0Vsg5SSYRhRxxyTGogUdkdNt47jal+fbuYi+Yfq6pzRCKXyoPcWisfxE6RIM3GKA==",
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.3.4.tgz",
+      "integrity": "sha512-SCCPBJtYLdE8PX/7ZQAs1QAZ8Jqwih+0VBLum1EGqmCCQal+MIUqLCzj3ZUy8ufbC0cAM4LRlSTm7IQJwWT4ug==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/core": "^7.25.2",
-        "@babel/plugin-transform-react-jsx-self": "^7.24.7",
-        "@babel/plugin-transform-react-jsx-source": "^7.24.7",
+        "@babel/core": "^7.26.0",
+        "@babel/plugin-transform-react-jsx-self": "^7.25.9",
+        "@babel/plugin-transform-react-jsx-source": "^7.25.9",
         "@types/babel__core": "^7.20.5",
         "react-refresh": "^0.14.2"
       },
@@ -4896,13 +5210,13 @@
         "node": "^14.18.0 || >=16.0.0"
       },
       "peerDependencies": {
-        "vite": "^4.2.0 || ^5.0.0"
+        "vite": "^4.2.0 || ^5.0.0 || ^6.0.0"
       }
     },
     "node_modules/@vscode/emmet-helper": {
-      "version": "2.9.3",
-      "resolved": "https://registry.npmjs.org/@vscode/emmet-helper/-/emmet-helper-2.9.3.tgz",
-      "integrity": "sha512-rB39LHWWPQYYlYfpv9qCoZOVioPCftKXXqrsyqN1mTWZM6dTnONT63Db+03vgrBbHzJN45IrgS/AGxw9iiqfEw==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@vscode/emmet-helper/-/emmet-helper-2.11.0.tgz",
+      "integrity": "sha512-QLxjQR3imPZPQltfbWRnHU6JecWTF1QSWhx3GAKQpslx7y3Dp6sIIXhKjiUJ/BR9FX8PVthjr9PD6pNwOJfAzw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -4910,7 +5224,7 @@
         "jsonc-parser": "^2.3.0",
         "vscode-languageserver-textdocument": "^1.0.1",
         "vscode-languageserver-types": "^3.15.1",
-        "vscode-uri": "^2.1.2"
+        "vscode-uri": "^3.0.8"
       }
     },
     "node_modules/@vscode/l10n": {
@@ -5099,9 +5413,19 @@
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
-      "dev": true,
       "license": "MIT"
     },
+    "node_modules/axios": {
+      "version": "1.7.8",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.8.tgz",
+      "integrity": "sha512-Uu0wb7KNqK2t5K+YQyVCLM76prD5sRFjKHbJYCP1J7JFGEQ6nN7HWn9+04LAeiJ3ji54lgS/gZCH1oxyrf1SPw==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/babel-jest": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-29.7.0.tgz",
@@ -5194,14 +5518,14 @@
       "license": "MIT"
     },
     "node_modules/babel-plugin-polyfill-corejs2": {
-      "version": "0.4.11",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.11.tgz",
-      "integrity": "sha512-sMEJ27L0gRHShOh5G54uAAPaiCOygY/5ratXuiyb2G46FmlSpc9eFCzYVyDiPxfNbwzA7mYahmjQc5q+CZQ09Q==",
+      "version": "0.4.12",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.12.tgz",
+      "integrity": "sha512-CPWT6BwvhrTO2d8QVorhTCQw9Y43zOu7G9HigcfxvepOU6b8o3tcWad6oVgZIsZCTt42FFv97aA7ZJsbM4+8og==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/compat-data": "^7.22.6",
-        "@babel/helper-define-polyfill-provider": "^0.6.2",
+        "@babel/helper-define-polyfill-provider": "^0.6.3",
         "semver": "^6.3.1"
       },
       "peerDependencies": {
@@ -5223,62 +5547,167 @@
       }
     },
     "node_modules/babel-plugin-polyfill-regenerator": {
-      "version": "0.6.2",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.6.2.tgz",
-      "integrity": "sha512-2R25rQZWP63nGwaAswvDazbPXfrM3HwVoBXK6HcqeKrSrL/JqcC/rDcf95l4r7LXLyxDXc8uQDa064GubtCABg==",
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.6.3.tgz",
+      "integrity": "sha512-LiWSbl4CRSIa5x/JAU6jZiG9eit9w6mz+yVMFwDE83LAWvt0AfGBoZ7HS/mkhrKuh2ZlzfVZYKoLjXdqw6Yt7Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-define-polyfill-provider": "^0.6.2"
+        "@babel/helper-define-polyfill-provider": "^0.6.3"
       },
       "peerDependencies": {
         "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
       }
     },
-    "node_modules/babel-preset-current-node-syntax": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.1.0.tgz",
-      "integrity": "sha512-ldYss8SbBlWva1bs28q78Ju5Zq1F+8BrqBZZ0VFhLBvhh6lCpC2o3gDJi/5DRLs9FgYZCnmPYIVFU4lRXCkyUw==",
+    "node_modules/babel-plugin-transform-vite-meta-env": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-vite-meta-env/-/babel-plugin-transform-vite-meta-env-1.0.3.tgz",
+      "integrity": "sha512-eyfuDEXrMu667TQpmctHeTlJrZA6jXYHyEJFjcM0yEa60LS/LXlOg2PBbMb8DVS+V9CnTj/j9itdlDVMcY2zEg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/plugin-syntax-async-generators": "^7.8.4",
-        "@babel/plugin-syntax-bigint": "^7.8.3",
-        "@babel/plugin-syntax-class-properties": "^7.12.13",
-        "@babel/plugin-syntax-class-static-block": "^7.14.5",
-        "@babel/plugin-syntax-import-attributes": "^7.24.7",
-        "@babel/plugin-syntax-import-meta": "^7.10.4",
-        "@babel/plugin-syntax-json-strings": "^7.8.3",
-        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4",
-        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
-        "@babel/plugin-syntax-numeric-separator": "^7.10.4",
-        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
-        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3",
-        "@babel/plugin-syntax-optional-chaining": "^7.8.3",
-        "@babel/plugin-syntax-private-property-in-object": "^7.14.5",
-        "@babel/plugin-syntax-top-level-await": "^7.14.5"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
+        "@babel/runtime": "^7.13.9",
+        "@types/babel__core": "^7.1.12"
       }
     },
-    "node_modules/babel-preset-jest": {
-      "version": "29.6.3",
-      "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-29.6.3.tgz",
-      "integrity": "sha512-0B3bhxR6snWXJZtR/RliHTDPRgn1sNHOR0yVtq/IiQFyuOVjFS+wuio/R4gSNkyYmKmJB4wGZv2NZanmKmTnNA==",
+    "node_modules/babel-plugin-transform-vite-meta-glob": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-vite-meta-glob/-/babel-plugin-transform-vite-meta-glob-1.1.2.tgz",
+      "integrity": "sha512-o984FUo++WYnfgUaC8ymzmNPng5Kda5A6j6PFC0uOqhFXlAsD6mNhEBhaNzbUGfq/aPcyeGo67fYXlg20rh9aA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "babel-plugin-jest-hoist": "^29.6.3",
-        "babel-preset-current-node-syntax": "^1.0.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      },
+        "@babel/runtime": "^7.13.9",
+        "@types/babel__core": "^7.1.12",
+        "glob": "^10.3.10"
+      }
+    },
+    "node_modules/babel-plugin-transform-vite-meta-glob/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/babel-plugin-transform-vite-meta-glob/node_modules/glob": {
+      "version": "10.4.5",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
+      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/babel-plugin-transform-vite-meta-glob/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/babel-plugin-transform-vite-meta-glob/node_modules/minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/babel-plugin-transform-vite-meta-hot": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-vite-meta-hot/-/babel-plugin-transform-vite-meta-hot-1.0.0.tgz",
+      "integrity": "sha512-qF7T46bDG5UPPOfy4MFgQJyd3mZvm1sGOR2gZ4lIHy6DEcxAVTIt39/adAn89il44CvwestshuEybKPMR+L/Tg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.9",
+        "@types/babel__core": "^7.1.12"
+      }
+    },
+    "node_modules/babel-preset-current-node-syntax": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.1.0.tgz",
+      "integrity": "sha512-ldYss8SbBlWva1bs28q78Ju5Zq1F+8BrqBZZ0VFhLBvhh6lCpC2o3gDJi/5DRLs9FgYZCnmPYIVFU4lRXCkyUw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/plugin-syntax-async-generators": "^7.8.4",
+        "@babel/plugin-syntax-bigint": "^7.8.3",
+        "@babel/plugin-syntax-class-properties": "^7.12.13",
+        "@babel/plugin-syntax-class-static-block": "^7.14.5",
+        "@babel/plugin-syntax-import-attributes": "^7.24.7",
+        "@babel/plugin-syntax-import-meta": "^7.10.4",
+        "@babel/plugin-syntax-json-strings": "^7.8.3",
+        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4",
+        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
+        "@babel/plugin-syntax-numeric-separator": "^7.10.4",
+        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3",
+        "@babel/plugin-syntax-optional-chaining": "^7.8.3",
+        "@babel/plugin-syntax-private-property-in-object": "^7.14.5",
+        "@babel/plugin-syntax-top-level-await": "^7.14.5"
+      },
       "peerDependencies": {
         "@babel/core": "^7.0.0"
       }
     },
+    "node_modules/babel-preset-jest": {
+      "version": "29.6.3",
+      "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-29.6.3.tgz",
+      "integrity": "sha512-0B3bhxR6snWXJZtR/RliHTDPRgn1sNHOR0yVtq/IiQFyuOVjFS+wuio/R4gSNkyYmKmJB4wGZv2NZanmKmTnNA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "babel-plugin-jest-hoist": "^29.6.3",
+        "babel-preset-current-node-syntax": "^1.0.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/babel-preset-vite": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/babel-preset-vite/-/babel-preset-vite-1.1.3.tgz",
+      "integrity": "sha512-xSt/EiezzeMd4RI2hjMCNyn/FGzGeroKODPMAUTsgpeHC4dFf2qiCQfyNuiNzn1OwoF4n+NYSsORhUN5G/2KTA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.9",
+        "@types/babel__core": "^7.1.12",
+        "babel-plugin-transform-vite-meta-env": "1.0.3",
+        "babel-plugin-transform-vite-meta-glob": "1.1.2",
+        "babel-plugin-transform-vite-meta-hot": "1.0.0"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -5286,6 +5715,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/before-after-hook": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-2.2.3.tgz",
+      "integrity": "sha512-NzUnlZexiaH/46WDhANlyR2bXRopNg4F/zuSA3OpZnllCUgRaOF2znDioDWrmbNVsuZk6l9pMquQB38cfBZwkQ==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -5402,9 +5838,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001677",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001677.tgz",
-      "integrity": "sha512-fmfjsOlJUpMWu+mAAtZZZHz7UEwsUxIIvu1TJfO1HqFQvB/B+ii0xr9B5HpbZY/mC4XZ8SvjHJqtAY6pDPQEog==",
+      "version": "1.0.30001684",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001684.tgz",
+      "integrity": "sha512-G1LRwLIQjBQoyq0ZJGqGIJUXzJ8irpbjHLpVRXDvBEScFJ9b17sgK6vlx0GAJFE21okD7zXl08rRRUfq6HdoEQ==",
       "dev": true,
       "funding": [
         {
@@ -5566,7 +6002,6 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "delayed-stream": "~1.0.0"
@@ -5659,11 +6094,10 @@
       "license": "MIT"
     },
     "node_modules/cross-spawn": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "path-key": "^3.1.0",
         "shebang-command": "^2.0.0",
@@ -5748,6 +6182,16 @@
         "node": ">=12"
       }
     },
+    "node_modules/date-fns": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
@@ -5808,12 +6252,18 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.4.0"
       }
     },
+    "node_modules/deprecation": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/deprecation/-/deprecation-2.3.1.tgz",
+      "integrity": "sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/dequal": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
@@ -5885,6 +6335,26 @@
         "node": ">=12"
       }
     },
+    "node_modules/dotenv": {
+      "version": "16.4.5",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.5.tgz",
+      "integrity": "sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/ejs": {
       "version": "3.1.10",
       "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.10.tgz",
@@ -5902,9 +6372,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.52",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.52.tgz",
-      "integrity": "sha512-xtoijJTZ+qeucLBDNztDOuQBE1ksqjvNjvqFoST3nGC7fSpqJ+X6BdTBaY5BHG+IhWWmpc6b/KfpeuEDupEPOQ==",
+      "version": "1.5.66",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.66.tgz",
+      "integrity": "sha512-pI2QF6+i+zjPbqRzJwkMvtvkdI7MjVbSh2g8dlMguDJIXEPw+kwasS1Jl+YGPEBfGVxsVgGUratAKymPdPo2vQ==",
       "dev": true,
       "license": "ISC"
     },
@@ -5938,6 +6408,21 @@
         "@emmetio/css-abbreviation": "^2.1.8"
       }
     },
+    "node_modules/emoji-picker-react": {
+      "version": "4.12.0",
+      "resolved": "https://registry.npmjs.org/emoji-picker-react/-/emoji-picker-react-4.12.0.tgz",
+      "integrity": "sha512-q2c8UcZH0eRIMj41bj0k1akTjk69tsu+E7EzkW7giN66iltF6H9LQvQvw6ugscsxdC+1lmt3WZpQkkY65J95tg==",
+      "license": "MIT",
+      "dependencies": {
+        "flairup": "1.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16"
+      }
+    },
     "node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -5949,6 +6434,7 @@
       "version": "6.6.2",
       "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.6.2.tgz",
       "integrity": "sha512-TAr+NKeoVTjEVW8P3iHguO1LO6RlUz9O5Y8o7EY0fU+gY1NYqas7NN3slpFtbXEsLMHk0h90fJMfKjRkQ0qUIw==",
+      "license": "MIT",
       "dependencies": {
         "@socket.io/component-emitter": "~3.1.0",
         "debug": "~4.3.1",
@@ -5961,6 +6447,7 @@
       "version": "8.17.1",
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
       "integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
+      "license": "MIT",
       "engines": {
         "node": ">=10.0.0"
       },
@@ -5981,6 +6468,7 @@
       "version": "5.2.3",
       "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.3.tgz",
       "integrity": "sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==",
+      "license": "MIT",
       "engines": {
         "node": ">=10.0.0"
       }
@@ -6102,27 +6590,27 @@
       }
     },
     "node_modules/eslint": {
-      "version": "9.14.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.14.0.tgz",
-      "integrity": "sha512-c2FHsVBr87lnUtjP4Yhvk4yEhKrQavGafRA/Se1ouse8PfbfC/Qh9Mxa00yWsZRlqeUB9raXip0aiiUZkgnr9g==",
+      "version": "9.15.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.15.0.tgz",
+      "integrity": "sha512-7CrWySmIibCgT1Os28lUU6upBshZ+GxybLOrmRzi08kS8MBuO8QA7pXEgYgY5W8vK3e74xv0lpjo9DbaGU9Rkw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.12.1",
-        "@eslint/config-array": "^0.18.0",
-        "@eslint/core": "^0.7.0",
-        "@eslint/eslintrc": "^3.1.0",
-        "@eslint/js": "9.14.0",
-        "@eslint/plugin-kit": "^0.2.0",
+        "@eslint/config-array": "^0.19.0",
+        "@eslint/core": "^0.9.0",
+        "@eslint/eslintrc": "^3.2.0",
+        "@eslint/js": "9.15.0",
+        "@eslint/plugin-kit": "^0.2.3",
         "@humanfs/node": "^0.16.6",
         "@humanwhocodes/module-importer": "^1.0.1",
-        "@humanwhocodes/retry": "^0.4.0",
+        "@humanwhocodes/retry": "^0.4.1",
         "@types/estree": "^1.0.6",
         "@types/json-schema": "^7.0.15",
         "ajv": "^6.12.4",
         "chalk": "^4.0.0",
-        "cross-spawn": "^7.0.2",
+        "cross-spawn": "^7.0.5",
         "debug": "^4.3.2",
         "escape-string-regexp": "^4.0.0",
         "eslint-scope": "^8.2.0",
@@ -6141,8 +6629,7 @@
         "lodash.merge": "^4.6.2",
         "minimatch": "^3.1.2",
         "natural-compare": "^1.4.0",
-        "optionator": "^0.9.3",
-        "text-table": "^0.2.0"
+        "optionator": "^0.9.3"
       },
       "bin": {
         "eslint": "bin/eslint.js"
@@ -6162,6 +6649,50 @@
         }
       }
     },
+    "node_modules/eslint-config-prettier": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz",
+      "integrity": "sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "eslint-config-prettier": "bin/cli.js"
+      },
+      "peerDependencies": {
+        "eslint": ">=7.0.0"
+      }
+    },
+    "node_modules/eslint-plugin-prettier": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.2.1.tgz",
+      "integrity": "sha512-gH3iR3g4JfF+yYPaJYkN7jEl9QbweL/YfkoRlNnuIEHEz1vHVlCmWOS+eGGiRuzHQXdJFCOTxRgvju9b8VUmrw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prettier-linter-helpers": "^1.0.0",
+        "synckit": "^0.9.1"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint-plugin-prettier"
+      },
+      "peerDependencies": {
+        "@types/eslint": ">=8.0.0",
+        "eslint": ">=8.0.0",
+        "eslint-config-prettier": "*",
+        "prettier": ">=3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/eslint": {
+          "optional": true
+        },
+        "eslint-config-prettier": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/eslint-plugin-react-hooks": {
       "version": "5.1.0-rc-fb9a90fa48-20240614",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-5.1.0-rc-fb9a90fa48-20240614.tgz",
@@ -6399,6 +6930,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/fast-diff": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz",
+      "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
     "node_modules/fast-glob": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
@@ -6552,6 +7090,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/flairup": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/flairup/-/flairup-1.0.0.tgz",
+      "integrity": "sha512-IKlE+pNvL2R+kVL1kEhUYqRxVqeFnjiIvHWDMLFXNaqyUdFXQM2wte44EfMYJNHkW16X991t2Zg8apKkhv7OBA==",
+      "license": "MIT"
+    },
     "node_modules/flat-cache": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",
@@ -6567,17 +7111,66 @@
       }
     },
     "node_modules/flatted": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz",
-      "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.2.tgz",
+      "integrity": "sha512-AiwGJM8YcNOaobumgtng+6NHuOqC3A7MixFeDafM3X9cIUM+xUXoS5Vfgf+OihAYe20fxqNM9yPBXJzRtZ/4eA==",
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.9",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
+      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/foreground-child": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz",
+      "integrity": "sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "cross-spawn": "^7.0.0",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/foreground-child/node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/form-data": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz",
       "integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "asynckit": "^0.4.0",
@@ -6588,6 +7181,33 @@
         "node": ">= 6"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "11.13.1",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.13.1.tgz",
+      "integrity": "sha512-F40tpGTHByhn9h3zdBQPcEro+pSLtzARcocbNqAyfBI+u9S+KZuHH/7O9+z+GEkoF3eqFxfvVw0eBDytohwqmQ==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^11.13.0",
+        "motion-utils": "^11.13.0",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -6897,6 +7517,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/idb": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/idb/-/idb-8.0.0.tgz",
+      "integrity": "sha512-l//qvlAKGmQO31Qn7xdzagVPPaHTxXx199MhrAFuVBTPqydcPYBWjkrbv4Y0ktB+GmWOiwHl237UUOrLmQxLvw==",
+      "license": "ISC"
+    },
     "node_modules/identity-obj-proxy": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz",
@@ -7015,6 +7641,14 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@@ -7217,6 +7851,22 @@
         "react": ">=18.0"
       }
     },
+    "node_modules/jackspeak": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
+      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
     "node_modules/jake": {
       "version": "10.9.2",
       "resolved": "https://registry.npmjs.org/jake/-/jake-10.9.2.tgz",
@@ -8552,7 +9202,6 @@
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.6"
@@ -8562,7 +9211,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,
       "license": "MIT",
       "dependencies": {
         "mime-db": "1.52.0"
@@ -8614,6 +9262,48 @@
         "node": ">=8"
       }
     },
+    "node_modules/mitt": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
+      "license": "MIT"
+    },
+    "node_modules/motion": {
+      "version": "11.13.1",
+      "resolved": "https://registry.npmjs.org/motion/-/motion-11.13.1.tgz",
+      "integrity": "sha512-64+QpZQv8WJJFn+tEEzX04il9s6ReA6lhKRZaxzD6SunGqoaq5g+AFVfcKWme8N83eytUOpGp7mpfJ9cyZlhAA==",
+      "license": "MIT",
+      "dependencies": {
+        "framer-motion": "^11.13.1",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/motion-dom": {
+      "version": "11.13.0",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.13.0.tgz",
+      "integrity": "sha512-Oc1MLGJQ6nrvXccXA89lXtOqFyBmvHtaDcTRGT66o8Czl7nuA8BeHAd9MQV1pQKX0d2RHFBFaw5g3k23hQJt0w=="
+    },
+    "node_modules/motion-utils": {
+      "version": "11.13.0",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-11.13.0.tgz",
+      "integrity": "sha512-lq6TzXkH5c/ysJQBxgLXgM01qwBH1b4goTPh57VvZWJbVJZF/0SB31UWEn4EIqbVPf3au88n2rvK17SpDTja1A=="
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -8621,18 +9311,18 @@
       "license": "MIT"
     },
     "node_modules/msw": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/msw/-/msw-2.6.0.tgz",
-      "integrity": "sha512-n3tx2w0MZ3H4pxY0ozrQ4sNPzK/dGtlr2cIIyuEsgq2Bhy4wvcW6ZH2w/gXM9+MEUY6HC1fWhqtcXDxVZr5Jxw==",
+      "version": "2.6.6",
+      "resolved": "https://registry.npmjs.org/msw/-/msw-2.6.6.tgz",
+      "integrity": "sha512-npfIIVRHKQX3Lw4aLWX4wBh+lQwpqdZNyJYB5K/+ktK8NhtkdsTxGK7WDrgknozcVyRI7TOqY6yBS9j2FTR+YQ==",
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
-        "@bundled-es-modules/cookie": "^2.0.0",
+        "@bundled-es-modules/cookie": "^2.0.1",
         "@bundled-es-modules/statuses": "^1.0.1",
         "@bundled-es-modules/tough-cookie": "^0.1.6",
         "@inquirer/confirm": "^5.0.0",
-        "@mswjs/interceptors": "^0.36.5",
+        "@mswjs/interceptors": "^0.37.0",
         "@open-draft/deferred-promise": "^2.2.0",
         "@open-draft/until": "^2.1.0",
         "@types/cookie": "^0.6.0",
@@ -8666,9 +9356,9 @@
       }
     },
     "node_modules/msw/node_modules/type-fest": {
-      "version": "4.26.1",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.26.1.tgz",
-      "integrity": "sha512-yOGpmOAL7CkKe/91I5O3gPICmJNLJ1G4zFYVAsRHg7M64biSnPtRj0WNQt++bRkjYOqjWXrhnUw1utzmVErAdg==",
+      "version": "4.29.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.29.0.tgz",
+      "integrity": "sha512-RPYt6dKyemXJe7I6oNstcH24myUGSReicxcHTvCLgzm4e0n8y05dGvcGB15/SoPRBmhlMthWQ9pvKyL81ko8nQ==",
       "dev": true,
       "license": "(MIT OR CC0-1.0)",
       "engines": {
@@ -8689,9 +9379,9 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
-      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "version": "3.3.8",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
+      "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
       "funding": [
         {
           "type": "github",
@@ -8872,6 +9562,13 @@
         "node": ">=6"
       }
     },
+    "node_modules/package-json-from-dist": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
+      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0"
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -9167,9 +9864,9 @@
       }
     },
     "node_modules/prettier": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
-      "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.4.1.tgz",
+      "integrity": "sha512-G+YdqtITVZmOJje6QkXQWzl3fSfMxFwm1tjTyo9exhkmWSqC4Yhd1+lug++IlR2mvRVAxEDDWYkQdeSztajqgg==",
       "dev": true,
       "license": "MIT",
       "bin": {
@@ -9182,6 +9879,19 @@
         "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
+    "node_modules/prettier-linter-helpers": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
+      "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-diff": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/pretty-format": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
@@ -9257,12 +9967,21 @@
       "integrity": "sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA==",
       "license": "MIT"
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
     "node_modules/psl": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
-      "integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==",
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/psl/-/psl-1.13.0.tgz",
+      "integrity": "sha512-BFwmFXiJoFqlUpZ5Qssolv15DMyc84gTBds1BjsV1BfXEo1UyyD7GsmN67n7J77uRhoSNW1AXtXKPLcBFQn9Aw==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "dependencies": {
+        "punycode": "^2.3.1"
+      }
     },
     "node_modules/punycode": {
       "version": "2.3.1",
@@ -9427,9 +10146,9 @@
       }
     },
     "node_modules/react-hook-form": {
-      "version": "7.53.1",
-      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.53.1.tgz",
-      "integrity": "sha512-6aiQeBda4zjcuaugWvim9WsGqisoUk+etmFEsSUMm451/Ic8L/UAb7sRtMj3V+Hdzm6mMjU1VhiSzYUZeBm0Vg==",
+      "version": "7.53.2",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.53.2.tgz",
+      "integrity": "sha512-YVel6fW5sOeedd1524pltpHX+jgU2u3DSDtXEaBORNdqiNrsX/nUI/iGXONegttg0mJVnfrIkiV0cmTU6Oo2xw==",
       "license": "MIT",
       "engines": {
         "node": ">=18.0.0"
@@ -9468,6 +10187,21 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-intersection-observer": {
+      "version": "9.13.1",
+      "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.13.1.tgz",
+      "integrity": "sha512-tSzDaTy0qwNPLJHg8XZhlyHTgGW6drFKTtvjdL+p6um12rcnp8Z5XstE+QNBJ7c64n5o0Lj4ilUleA41bmDoMw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-is": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
@@ -9506,6 +10240,40 @@
         "react-dom": ">=18.0.0"
       }
     },
+    "node_modules/react-mentions": {
+      "version": "4.4.10",
+      "resolved": "https://registry.npmjs.org/react-mentions/-/react-mentions-4.4.10.tgz",
+      "integrity": "sha512-JHiQlgF1oSZR7VYPjq32wy97z1w1oE4x10EuhKjPr4WUKhVzG1uFQhQjKqjQkbVqJrmahf+ldgBTv36NrkpKpA==",
+      "dependencies": {
+        "@babel/runtime": "7.4.5",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.5.8",
+        "substyle": "^9.1.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.3",
+        "react-dom": ">=16.8.3"
+      }
+    },
+    "node_modules/react-mentions/node_modules/@babel/runtime": {
+      "version": "7.4.5",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.4.5.tgz",
+      "integrity": "sha512-TuI4qpWZP6lGOGIuGWtp9sPluqYICmbk8T/1vpSysqJxRPkudh/ofFWyqdcMsDf2s7KvDL4/YHgKyvcS3g9CJQ==",
+      "dependencies": {
+        "regenerator-runtime": "^0.13.2"
+      }
+    },
+    "node_modules/react-mentions/node_modules/regenerator-runtime": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
+    },
+    "node_modules/react-modal-image": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/react-modal-image/-/react-modal-image-2.6.0.tgz",
+      "integrity": "sha512-NNc1xPKzFAn0VsNMdJ8NXt6c54aL/z0fcoYmw9qn4SBUONdGl+8LOQ0sTfo0wtdzcjLiby/ncloHcAL+UI+wIA==",
+      "license": "MIT"
+    },
     "node_modules/react-reconciler": {
       "version": "0.29.2",
       "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.29.2.tgz",
@@ -9558,12 +10326,12 @@
       }
     },
     "node_modules/react-router": {
-      "version": "6.27.0",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.27.0.tgz",
-      "integrity": "sha512-YA+HGZXz4jaAkVoYBE98VQl+nVzI+cVI2Oj/06F5ZM+0u3TgedN9Y9kmMRo2mnkSK2nCpNQn0DVob4HCsY/WLw==",
+      "version": "6.28.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.28.0.tgz",
+      "integrity": "sha512-HrYdIFqdrnhDw0PqG/AKjAqEqM7AvxCz0DQ4h2W8k6nqmc5uRBYDag0SBxx9iYz5G8gnuNVLzUe13wl9eAsXXg==",
       "license": "MIT",
       "dependencies": {
-        "@remix-run/router": "1.20.0"
+        "@remix-run/router": "1.21.0"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -9573,13 +10341,13 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "6.27.0",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.27.0.tgz",
-      "integrity": "sha512-+bvtFWMC0DgAFrfKXKG9Fc+BcXWRUO1aJIihbB79xaeq0v5UzfvnM5houGUm1Y461WVRcgAQ+Clh5rdb1eCx4g==",
+      "version": "6.28.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.28.0.tgz",
+      "integrity": "sha512-kQ7Unsl5YdyOltsPGl31zOjLrDv+m2VcIEcIHqYYD3Lp0UppLjrzcfJqDJwXxFw3TH/yvapbnUvPlAj7Kx5nbg==",
       "license": "MIT",
       "dependencies": {
-        "@remix-run/router": "1.20.0",
-        "react-router": "6.27.0"
+        "@remix-run/router": "1.21.0",
+        "react-router": "6.28.0"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -9693,16 +10461,16 @@
       }
     },
     "node_modules/regexpu-core": {
-      "version": "6.1.1",
-      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-6.1.1.tgz",
-      "integrity": "sha512-k67Nb9jvwJcJmVpw0jPttR1/zVfnKf8Km0IPatrU/zJ5XeG3+Slx0xLXs9HByJSzXzrlz5EDvN6yLNMDc2qdnw==",
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-6.2.0.tgz",
+      "integrity": "sha512-H66BPQMrv+V16t8xtmq+UC0CBpiTBA60V8ibS1QVReIp8T1z8hwFxqcGzm9K6lgsN7sB5edVH8a+ze6Fqm4weA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "regenerate": "^1.4.2",
         "regenerate-unicode-properties": "^10.2.0",
         "regjsgen": "^0.8.0",
-        "regjsparser": "^0.11.0",
+        "regjsparser": "^0.12.0",
         "unicode-match-property-ecmascript": "^2.0.0",
         "unicode-match-property-value-ecmascript": "^2.1.0"
       },
@@ -9718,9 +10486,9 @@
       "license": "MIT"
     },
     "node_modules/regjsparser": {
-      "version": "0.11.2",
-      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.11.2.tgz",
-      "integrity": "sha512-3OGZZ4HoLJkkAZx/48mTXJNlmqTGOzc0o9OWQPuWpkOlXXPbyN6OafCcoXUnBqE2D3f/T5L+pWc1kdEmnfnRsA==",
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.12.0.tgz",
+      "integrity": "sha512-cnE+y8bz4NhMjISKbgeVJtqNbtf5QpjZP+Bslo+UqkIt9QPnX9q095eiRRASJG1/tz6dlNr6Z5NsBiWYokp6EQ==",
       "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
@@ -9816,9 +10584,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "4.24.4",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.24.4.tgz",
-      "integrity": "sha512-vGorVWIsWfX3xbcyAS+I047kFKapHYivmkaT63Smj77XwvLSJos6M1xGqZnBPFQFBRZDOcG1QnYEIxAvTr/HjA==",
+      "version": "4.27.4",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.27.4.tgz",
+      "integrity": "sha512-RLKxqHEMjh/RGLsDxAEsaLO3mWgyoU6x9w6n1ikAzet4B3gI2/3yP6PWY2p9QzRTh6MfEIXB3MwsOY0Iv3vNrw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -9832,24 +10600,24 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.24.4",
-        "@rollup/rollup-android-arm64": "4.24.4",
-        "@rollup/rollup-darwin-arm64": "4.24.4",
-        "@rollup/rollup-darwin-x64": "4.24.4",
-        "@rollup/rollup-freebsd-arm64": "4.24.4",
-        "@rollup/rollup-freebsd-x64": "4.24.4",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.24.4",
-        "@rollup/rollup-linux-arm-musleabihf": "4.24.4",
-        "@rollup/rollup-linux-arm64-gnu": "4.24.4",
-        "@rollup/rollup-linux-arm64-musl": "4.24.4",
-        "@rollup/rollup-linux-powerpc64le-gnu": "4.24.4",
-        "@rollup/rollup-linux-riscv64-gnu": "4.24.4",
-        "@rollup/rollup-linux-s390x-gnu": "4.24.4",
-        "@rollup/rollup-linux-x64-gnu": "4.24.4",
-        "@rollup/rollup-linux-x64-musl": "4.24.4",
-        "@rollup/rollup-win32-arm64-msvc": "4.24.4",
-        "@rollup/rollup-win32-ia32-msvc": "4.24.4",
-        "@rollup/rollup-win32-x64-msvc": "4.24.4",
+        "@rollup/rollup-android-arm-eabi": "4.27.4",
+        "@rollup/rollup-android-arm64": "4.27.4",
+        "@rollup/rollup-darwin-arm64": "4.27.4",
+        "@rollup/rollup-darwin-x64": "4.27.4",
+        "@rollup/rollup-freebsd-arm64": "4.27.4",
+        "@rollup/rollup-freebsd-x64": "4.27.4",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.27.4",
+        "@rollup/rollup-linux-arm-musleabihf": "4.27.4",
+        "@rollup/rollup-linux-arm64-gnu": "4.27.4",
+        "@rollup/rollup-linux-arm64-musl": "4.27.4",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.27.4",
+        "@rollup/rollup-linux-riscv64-gnu": "4.27.4",
+        "@rollup/rollup-linux-s390x-gnu": "4.27.4",
+        "@rollup/rollup-linux-x64-gnu": "4.27.4",
+        "@rollup/rollup-linux-x64-musl": "4.27.4",
+        "@rollup/rollup-win32-arm64-msvc": "4.27.4",
+        "@rollup/rollup-win32-ia32-msvc": "4.27.4",
+        "@rollup/rollup-win32-x64-msvc": "4.27.4",
         "fsevents": "~2.3.2"
       }
     },
@@ -9972,12 +10740,14 @@
     "node_modules/socket-client": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/socket-client/-/socket-client-1.0.0.tgz",
-      "integrity": "sha512-9Q5nwYFFL+055kJ2XUQHMO6Np3c8RgHCl9c7Bf/QvW0jCXxbB5bcwY4WGetawA6lPvFirLwlm3d93Q3wVbp5qQ=="
+      "integrity": "sha512-9Q5nwYFFL+055kJ2XUQHMO6Np3c8RgHCl9c7Bf/QvW0jCXxbB5bcwY4WGetawA6lPvFirLwlm3d93Q3wVbp5qQ==",
+      "license": "ISC"
     },
     "node_modules/socket.io-client": {
       "version": "4.8.1",
       "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.8.1.tgz",
       "integrity": "sha512-hJVXfu3E28NmzGk8o1sHhN3om52tRvwYeidbj7xKy2eIIse5IoKX3USlS6Tqt3BHAtflLIkCQBkzVrEEfWUyYQ==",
+      "license": "MIT",
       "dependencies": {
         "@socket.io/component-emitter": "~3.1.0",
         "debug": "~4.3.2",
@@ -9992,6 +10762,7 @@
       "version": "4.2.4",
       "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz",
       "integrity": "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==",
+      "license": "MIT",
       "dependencies": {
         "@socket.io/component-emitter": "~3.1.0",
         "debug": "~4.3.1"
@@ -10115,6 +10886,22 @@
         "node": ">=8"
       }
     },
+    "node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -10128,6 +10915,20 @@
         "node": ">=8"
       }
     },
+    "node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/strip-bom": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-4.0.0.tgz",
@@ -10235,6 +11036,18 @@
       "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==",
       "license": "MIT"
     },
+    "node_modules/substyle": {
+      "version": "9.4.1",
+      "resolved": "https://registry.npmjs.org/substyle/-/substyle-9.4.1.tgz",
+      "integrity": "sha512-VOngeq/W1/UkxiGzeqVvDbGDPM8XgUyJVWjrqeh+GgKqspEPiLYndK+XRcsKUHM5Muz/++1ctJ1QCF/OqRiKWA==",
+      "dependencies": {
+        "@babel/runtime": "^7.3.4",
+        "invariant": "^2.2.4"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.3"
+      }
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -10267,6 +11080,23 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/synckit": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.9.2.tgz",
+      "integrity": "sha512-vrozgXDQwYO72vHjUb/HnFbQx1exDjoKzqx23aXEg2a9VIg2TSFZ8FmeZpTjUCFMYw7mpX4BE2SFu8wI7asYsw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@pkgr/core": "^0.1.0",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/unts"
+      }
+    },
     "node_modules/test-exclude": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz",
@@ -10304,13 +11134,6 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/text-table": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
-      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/tiny-case": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz",
@@ -10382,9 +11205,9 @@
       }
     },
     "node_modules/ts-api-utils": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.4.0.tgz",
-      "integrity": "sha512-032cPxaEKwM+GT3vA5JXNzIaizx388rhsSW79vGRNGXfRRAdEAn2mvk36PvK5HnOchyWZ7afLEXqYCvPCrzuzQ==",
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.4.2.tgz",
+      "integrity": "sha512-ZF5gQIQa/UmzfvxbHZI3JXN0/Jt+vnAfAviNRAMc491laiK6YCLpCW9ft8oaCRFOTxCZtUTE6XB0ZQAe3olntw==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -10564,9 +11387,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.6.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
-      "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.2.tgz",
+      "integrity": "sha512-i5t66RHxDvVN40HfDd1PsEThGNnlMCMT3jMUuoh9/0TaqWevNontacunWyN02LA9/fIbEWlcHZcgTKb9QoaLfg==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
@@ -10578,15 +11401,15 @@
       }
     },
     "node_modules/typescript-eslint": {
-      "version": "8.13.0",
-      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.13.0.tgz",
-      "integrity": "sha512-vIMpDRJrQd70au2G8w34mPps0ezFSPMEX4pXkTzUkrNbRX+36ais2ksGWN0esZL+ZMaFJEneOBHzCgSqle7DHw==",
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.16.0.tgz",
+      "integrity": "sha512-wDkVmlY6O2do4V+lZd0GtRfbtXbeD0q9WygwXXSJnC1xorE8eqyC2L1tJimqpSeFrOzRlYtWnUp/uzgHQOgfBQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/eslint-plugin": "8.13.0",
-        "@typescript-eslint/parser": "8.13.0",
-        "@typescript-eslint/utils": "8.13.0"
+        "@typescript-eslint/eslint-plugin": "8.16.0",
+        "@typescript-eslint/parser": "8.16.0",
+        "@typescript-eslint/utils": "8.16.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -10595,6 +11418,9 @@
         "type": "opencollective",
         "url": "https://opencollective.com/typescript-eslint"
       },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0"
+      },
       "peerDependenciesMeta": {
         "typescript": {
           "optional": true
@@ -10609,9 +11435,9 @@
       "license": "MIT"
     },
     "node_modules/undici": {
-      "version": "6.20.1",
-      "resolved": "https://registry.npmjs.org/undici/-/undici-6.20.1.tgz",
-      "integrity": "sha512-AjQF1QsmqfJys+LXfGTNum+qw4S88CojRInG/6t31W/1fk6G59s92bnAvGz5Cmur+kQv2SURXEvvudLmbrE8QA==",
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-6.21.0.tgz",
+      "integrity": "sha512-BUgJXc752Kou3oOIuU1i+yZZypyZRqNPW0vqoMPl8VaoalSfeR0D8/t4iAS3yirs79SSMTxTag+ZC86uswv+Cw==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -10619,9 +11445,9 @@
       }
     },
     "node_modules/undici-types": {
-      "version": "6.19.8",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
-      "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
+      "version": "6.20.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz",
+      "integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==",
       "dev": true,
       "license": "MIT"
     },
@@ -10669,6 +11495,13 @@
         "node": ">=4"
       }
     },
+    "node_modules/universal-user-agent": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-6.0.1.tgz",
+      "integrity": "sha512-yCzhz6FN2wU1NiiQRogkTQszlQSlpWaw8SvVegAc+bDxbzHgh1vX8uIe8OYyMH6DwH+sdTJsgMl36+mSMdRJIQ==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/universalify": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
@@ -10790,9 +11623,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "5.4.10",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.10.tgz",
-      "integrity": "sha512-1hvaPshuPUtxeQ0hsVH3Mud0ZanOLwVTneA1EgbAM5LhaZEqyPWGRQ7BtaMvUrTDeEaC8pxtj6a6jku3x4z6SQ==",
+      "version": "5.4.11",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.11.tgz",
+      "integrity": "sha512-c7jFQRklXua0mTzneGW9QVyxFjUgwcihC4bXEtujIo2ouWCe1Ajt/amn2PCxYnhYfd5k09JX3SB7OYWFKYqj8Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -10849,10 +11682,29 @@
         }
       }
     },
+    "node_modules/vite-plugin-mkcert": {
+      "version": "1.17.6",
+      "resolved": "https://registry.npmjs.org/vite-plugin-mkcert/-/vite-plugin-mkcert-1.17.6.tgz",
+      "integrity": "sha512-4JR1RN0HEg/w17eRQJ/Ve2pSa6KCVQcQO6yKtIaKQCFDyd63zGfXHWpygBkvvRSpqa0GcqNKf0fjUJ0HiJQXVQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@octokit/rest": "^20.1.1",
+        "axios": "^1.7.4",
+        "debug": "^4.3.6",
+        "picocolors": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=v16.7.0"
+      },
+      "peerDependencies": {
+        "vite": ">=3"
+      }
+    },
     "node_modules/vite-tsconfig-paths": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/vite-tsconfig-paths/-/vite-tsconfig-paths-5.1.0.tgz",
-      "integrity": "sha512-Y1PLGHCJfAq1Zf4YIGEsmuU/NCX1epoZx9zwSr32Gjn3aalwQHRKr5aUmbo6r0JHeHkqmWpmDg7WOynhYXw1og==",
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/vite-tsconfig-paths/-/vite-tsconfig-paths-5.1.3.tgz",
+      "integrity": "sha512-0bz+PDlLpGfP2CigeSKL9NFTF1KtXkeHGZSSaGQSuPZH77GhoiQaA8IjYgOaynSuwlDTolSUEU0ErVvju3NURg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -10870,9 +11722,9 @@
       }
     },
     "node_modules/vite/node_modules/postcss": {
-      "version": "8.4.47",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz",
-      "integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==",
+      "version": "8.4.49",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz",
+      "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==",
       "dev": true,
       "funding": [
         {
@@ -10891,7 +11743,7 @@
       "license": "MIT",
       "dependencies": {
         "nanoid": "^3.3.7",
-        "picocolors": "^1.1.0",
+        "picocolors": "^1.1.1",
         "source-map-js": "^1.2.1"
       },
       "engines": {
@@ -10911,13 +11763,6 @@
         "vscode-uri": "^3.0.8"
       }
     },
-    "node_modules/vscode-css-languageservice/node_modules/vscode-uri": {
-      "version": "3.0.8",
-      "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.0.8.tgz",
-      "integrity": "sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/vscode-languageserver-textdocument": {
       "version": "1.0.12",
       "resolved": "https://registry.npmjs.org/vscode-languageserver-textdocument/-/vscode-languageserver-textdocument-1.0.12.tgz",
@@ -10933,9 +11778,9 @@
       "license": "MIT"
     },
     "node_modules/vscode-uri": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-2.1.2.tgz",
-      "integrity": "sha512-8TEXQxlldWAuIODdukIb+TR5s+9Ds40eSJrw+1iDDA9IFORPjMELarNQE3myz5XIkWWpdprmJjm1/SxMlWOC8A==",
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.0.8.tgz",
+      "integrity": "sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==",
       "dev": true,
       "license": "MIT"
     },
@@ -11050,6 +11895,25 @@
         "node": ">=8"
       }
     },
+    "node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
diff --git a/app/package.json b/app/package.json
index e004bef2..85cc4a60 100644
--- a/app/package.json
+++ b/app/package.json
@@ -5,9 +5,11 @@
   "type": "module",
   "scripts": {
     "dev": "vite --host",
-    "build": "tsc -b && vite build",
+    "build": "vite build",
     "build-ignore": "vite build",
     "lint": "eslint .",
+    "lint:fix": "eslint --fix .",
+    "static-analysis": "node src/utils/static-analysis-script.js",
     "preview": "vite preview",
     "test": "jest",
     "test:watch": "jest --watchAll",
@@ -23,7 +25,13 @@
     "@tanstack/react-query": "^5.59.13",
     "@tanstack/react-query-devtools": "^5.59.15",
     "@types/react-google-recaptcha": "^2.1.9",
+    "axios": "^1.7.8",
+    "date-fns": "^4.1.0",
+    "emoji-picker-react": "^4.12.0",
+    "idb": "^8.0.0",
     "lottie-react": "^2.4.0",
+    "mitt": "^3.0.1",
+    "motion": "^11.13.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-filerobot-image-editor": "^4.9.0",
@@ -31,6 +39,9 @@
     "react-hook-form": "^7.53.0",
     "react-hot-toast": "^2.4.1",
     "react-international-phone": "^4.3.0",
+    "react-intersection-observer": "^9.13.1",
+    "react-mentions": "^4.4.10",
+    "react-modal-image": "^2.6.0",
     "react-router-dom": "^6.27.0",
     "redux-mock-store": "^1.5.5",
     "socket-client": "^1.0.0",
@@ -52,11 +63,16 @@
     "@types/jest": "^29.5.14",
     "@types/react": "^18.3.10",
     "@types/react-dom": "^18.3.0",
+    "@types/react-modal-image": "^2.6.3",
     "@types/redux-mock-store": "^1.0.6",
     "@vitejs/plugin-react": "^4.3.2",
     "babel-jest": "^29.7.0",
     "babel-plugin-module-resolver": "^5.0.2",
+    "babel-preset-vite": "^1.1.3",
+    "dotenv": "^16.4.5",
     "eslint": "^9.11.1",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.12",
     "globals": "^15.9.0",
@@ -75,6 +91,7 @@
     "typescript-eslint": "^8.7.0",
     "undici": "^6.20.1",
     "vite": "^5.4.8",
+    "vite-plugin-mkcert": "^1.17.6",
     "vite-tsconfig-paths": "^5.0.1"
   },
   "msw": {
diff --git a/app/public/TelWare.png b/app/public/assets/TelWare.png
similarity index 100%
rename from app/public/TelWare.png
rename to app/public/assets/TelWare.png
diff --git a/app/public/mockServiceWorker.js b/app/public/mockServiceWorker.js
index 6eb80522..fead0b3f 100644
--- a/app/public/mockServiceWorker.js
+++ b/app/public/mockServiceWorker.js
@@ -8,8 +8,8 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.6.0'
-const INTEGRITY_CHECKSUM = '07a8241b182f8a246a7cd39894799a9e'
+const PACKAGE_VERSION = '2.6.6'
+const INTEGRITY_CHECKSUM = 'ca7800994cc8bfb5eb961e037c877074'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()
 
@@ -192,12 +192,14 @@ async function getResponse(event, client, requestId) {
   const requestClone = request.clone()
 
   function passthrough() {
-    const headers = Object.fromEntries(requestClone.headers.entries())
-
-    // Remove internal MSW request header so the passthrough request
-    // complies with any potential CORS preflight checks on the server.
-    // Some servers forbid unknown request headers.
-    delete headers['x-msw-intention']
+    // Cast the request headers to a new Headers instance
+    // so the headers can be manipulated with.
+    const headers = new Headers(requestClone.headers)
+
+    // Remove the "accept" header value that marked this request as passthrough.
+    // This prevents request alteration and also keeps it compliant with the
+    // user-defined CORS policies.
+    headers.delete('accept', 'msw/passthrough')
 
     return fetch(requestClone, { headers })
   }
diff --git a/app/socket-server/index.js b/app/socket-server/index.js
index dc8757fd..d5f6d954 100644
--- a/app/socket-server/index.js
+++ b/app/socket-server/index.js
@@ -2,6 +2,8 @@ const express = require("express");
 const http = require("http");
 const { Server } = require("socket.io");
 
+const PORT = 4000;
+
 const app = express();
 const server = http.createServer(app);
 
@@ -14,18 +16,50 @@ const io = new Server(server, {
 io.on("connection", (socket) => {
   console.log("A user connected:", socket.id);
 
-  socket.on("send_message", (data) => {
+  socket.on("SEND_MESSAGE", (data, callback) => {
     console.log("Message received from client:", data);
+    callback({ success: true, message: "sent seccussfully", res: Date.now() });
+    socket.join(data.chatId);
+    socket.to(data.chatId).emit("RECEIVE_MESSAGE", { ...data, id: Date.now() });
+  });
 
-    io.emit("receive_message", data);
+  socket.on("join", ({ chatId }) => {
+    socket.join(chatId);
+    console.log(`User ${socket.id} joined chat ${chatId}`);
   });
 
   socket.on("disconnect", () => {
     console.log("User disconnected:", socket.id);
   });
+
+  socket.on("PIN_MESSAGE_CLIENT", ({ messageId, chatId, userId }) => {
+    console.log("PIN_MESSAGE_CLIENT", messageId, chatId, userId);
+    socket.broadcast
+      .to(chatId?.toString())
+      .emit("PIN_MESSAGE_SERVER", { messageId, chatId, userId });
+  });
+
+  socket.on("UNPIN_MESSAGE_CLIENT", ({ messageId, chatId, userId }) => {
+    console.log("UNPIN_MESSAGE_CLIENT", messageId, chatId, userId);
+    socket.broadcast
+      .to(chatId?.toString())
+      .emit("UNPIN_MESSAGE_SERVER", { messageId, chatId, userId });
+  });
+
+  socket.on("EDIT_MESSAGE_CLIENT", ({ messageId, content, chatId }) => {
+    const room = io.sockets.adapter.rooms.get(chatId);
+
+    if (room) {
+      console.log(`Room ${chatId} members:`, [...room]);
+    } else {
+      console.log(`No members in room: ${chatId}`);
+    }
+    socket.join(chatId);
+    console.log("EDIT_MESSAGE_CLIENT:", messageId, content, chatId);
+    io.to(chatId).emit("EDIT_MESSAGE_SERVER", chatId, messageId, content); //TODO: handle user disjoin the room for some reason
+  });
 });
 
-// Start server on port 4000
-server.listen(4000, () => {
-  console.log("Socket.io server running on http://localhost:4000/socket-io");
+server.listen(PORT, () => {
+  console.log(`Socket.io server running on http://localhost:${PORT}`);
 });
diff --git a/app/socket-server/package-lock.json b/app/socket-server/package-lock.json
index 6007fcd0..4047c798 100644
--- a/app/socket-server/package-lock.json
+++ b/app/socket-server/package-lock.json
@@ -10,6 +10,7 @@
       "license": "ISC",
       "dependencies": {
         "express": "^4.21.1",
+        "nodemon": "^3.1.7",
         "socket.io": "^4.8.1"
       }
     },
@@ -51,11 +52,30 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "license": "ISC",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/array-flatten": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
       "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg=="
     },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "license": "MIT"
+    },
     "node_modules/base64id": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/base64id/-/base64id-2.0.0.tgz",
@@ -64,6 +84,18 @@
         "node": "^4.5.0 || >= 5.9"
       }
     },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/body-parser": {
       "version": "1.20.3",
       "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz",
@@ -87,6 +119,28 @@
         "npm": "1.2.8000 || >= 1.4.16"
       }
     },
+    "node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/bytes": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
@@ -113,6 +167,36 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "license": "MIT"
+    },
     "node_modules/content-disposition": {
       "version": "0.5.4",
       "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
@@ -341,6 +425,18 @@
         "node": ">= 0.10.0"
       }
     },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/finalhandler": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.1.tgz",
@@ -374,6 +470,20 @@
         "node": ">= 0.6"
       }
     },
+    "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,
+      "license": "MIT",
+      "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",
@@ -400,6 +510,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/gopd": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
@@ -411,6 +533,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/has-property-descriptors": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
@@ -481,6 +612,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ignore-by-default": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/ignore-by-default/-/ignore-by-default-1.0.1.tgz",
+      "integrity": "sha512-Ius2VYcGNk7T90CppJqcIkS5ooHUZyIQK+ClZfMfMNFEF9VSE73Fq+906u/CWu92x4gzZMWOwfFYckPObzdEbA==",
+      "license": "ISC"
+    },
     "node_modules/inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
@@ -494,6 +631,48 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "license": "MIT",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
     "node_modules/media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -548,6 +727,18 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
@@ -561,6 +752,66 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/nodemon": {
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-3.1.7.tgz",
+      "integrity": "sha512-hLj7fuMow6f0lbB0cD14Lz2xNjwsyruH251Pk4t/yIitCFJbmY1myuLlHm/q06aST4jg6EgAh74PIBBrRqpVAQ==",
+      "license": "MIT",
+      "dependencies": {
+        "chokidar": "^3.5.2",
+        "debug": "^4",
+        "ignore-by-default": "^1.0.1",
+        "minimatch": "^3.1.2",
+        "pstree.remy": "^1.1.8",
+        "semver": "^7.5.3",
+        "simple-update-notifier": "^2.0.0",
+        "supports-color": "^5.5.0",
+        "touch": "^3.1.0",
+        "undefsafe": "^2.0.5"
+      },
+      "bin": {
+        "nodemon": "bin/nodemon.js"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/nodemon"
+      }
+    },
+    "node_modules/nodemon/node_modules/debug": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/nodemon/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -604,6 +855,18 @@
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.10.tgz",
       "integrity": "sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w=="
     },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -616,6 +879,12 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/pstree.remy": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/pstree.remy/-/pstree.remy-1.1.8.tgz",
+      "integrity": "sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==",
+      "license": "MIT"
+    },
     "node_modules/qs": {
       "version": "6.13.0",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz",
@@ -652,6 +921,18 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
     "node_modules/safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
@@ -676,6 +957,18 @@
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
+    "node_modules/semver": {
+      "version": "7.6.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/send": {
       "version": "0.19.0",
       "resolved": "https://registry.npmjs.org/send/-/send-0.19.0.tgz",
@@ -764,6 +1057,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/simple-update-notifier": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-2.0.0.tgz",
+      "integrity": "sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w==",
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^7.5.3"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/socket.io": {
       "version": "4.8.1",
       "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.8.1.tgz",
@@ -873,6 +1178,30 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
     "node_modules/toidentifier": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
@@ -881,6 +1210,15 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/touch": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/touch/-/touch-3.1.1.tgz",
+      "integrity": "sha512-r0eojU4bI8MnHr8c5bNo7lJDdI2qXlWWJk6a9EAFG7vbhTjElYhBVS3/miuE0uOuoLdb8Mc/rVfsmm6eo5o9GA==",
+      "license": "ISC",
+      "bin": {
+        "nodetouch": "bin/nodetouch.js"
+      }
+    },
     "node_modules/type-is": {
       "version": "1.6.18",
       "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
@@ -893,6 +1231,12 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/undefsafe": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.5.tgz",
+      "integrity": "sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==",
+      "license": "MIT"
+    },
     "node_modules/undici-types": {
       "version": "6.19.8",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
diff --git a/app/socket-server/package.json b/app/socket-server/package.json
index e0fadccd..d651fc9f 100644
--- a/app/socket-server/package.json
+++ b/app/socket-server/package.json
@@ -11,6 +11,7 @@
   "license": "ISC",
   "dependencies": {
     "express": "^4.21.1",
+    "nodemon": "^3.1.7",
     "socket.io": "^4.8.1"
   }
 }
diff --git a/app/src/App.tsx b/app/src/App.tsx
index e0720047..aeed77d9 100644
--- a/app/src/App.tsx
+++ b/app/src/App.tsx
@@ -14,21 +14,27 @@ import Signup from "./pages/Signup";
 import ResetPasswordModal from "@features/authentication/reset-password/ResetPasswordModal";
 import ProtectedRoute from "@components/protected-route/ProtectedRoute";
 import AppLayout from "@components/AppLayout";
-
 import ChatBox from "@features/chats/ChatBox";
 import SocketProvider from "sockets/SocketProvider";
+import RightSideBarProvider from "@features/groups/contexts/RightSideBarProvider";
+import { CallProvider } from "@features/calls/context/CallProvider";
+import AdminAppLayout from "@features/admin/components/AdminAppLayout";
+import Unauthorized from "@components/unauthorized/Unauthorized";
 
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
       staleTime: 0,
-      retry: 3,
-    },
-  },
+      retry: 3
+    }
+  }
 });
 
 function App() {
   const currentTheme = useAppSelector((state) => state.theme.value);
+  const currentUserRole = useAppSelector((state) =>
+    state.user.userInfo.isAdmin ? "admin" : "user"
+  );
 
   useEffect(() => {
     document.documentElement.className =
@@ -42,18 +48,38 @@ function App() {
       <GlobalStyles />
       <BrowserRouter>
         <Routes>
+          <Route path="/unauthorized" element={<Unauthorized />} />
+          <Route
+            path="/admin"
+            element={
+              <ProtectedRoute
+                allowedRoles={["admin"]}
+                userRole={currentUserRole}
+              >
+                <AdminAppLayout />
+              </ProtectedRoute>
+            }
+          />
           <Route
             path="/"
             element={
-              <ProtectedRoute>
-                <SocketProvider>
-                  <AppLayout />
-                </SocketProvider>
+              <ProtectedRoute
+                allowedRoles={["user"]}
+                userRole={currentUserRole}
+              >
+                <CallProvider>
+                  <SocketProvider>
+                    <RightSideBarProvider>
+                      <AppLayout />
+                    </RightSideBarProvider>
+                  </SocketProvider>
+                </CallProvider>
               </ProtectedRoute>
             }
           >
             <Route path=":chatId" element={<ChatBox />} />
           </Route>
+
           <Route path="login" element={<Login />} />
           <Route
             path="password-reset/:token"
diff --git a/app/src/components/AppLayout.tsx b/app/src/components/AppLayout.tsx
index 9bccb52a..0adac60d 100644
--- a/app/src/components/AppLayout.tsx
+++ b/app/src/components/AppLayout.tsx
@@ -1,13 +1,18 @@
 import { Outlet, useParams } from "react-router-dom";
 import styled from "styled-components";
-
-import { media } from "data/deviceSize";
-
 import Main from "./Main";
 import SideBar from "./side-bar/SideBar";
-import { MOBILE_VIEW } from "@constants";
+import { DESKTOP_VIEW, MOBILE_VIEW } from "@constants";
+import { useRightSideBarContext } from "@features/groups/contexts/RightSideBarProvider";
+import { useEffect, useState } from "react";
+import { useSocket } from "@hooks/useSocket";
+import { callStatusEmitter } from "@features/calls/context/callStatusEmitter";
+import CallLayout from "@features/calls/CallLayout";
 
-const StyledApp = styled.div<{ $isChatOpen: boolean }>`
+const StyledApp = styled.div<{
+  $isChatOpen: boolean;
+  $isRightSideBarOpen: boolean;
+}>`
   @media ${MOBILE_VIEW} {
     & > main {
       display: ${({ $isChatOpen }) => ($isChatOpen ? "contents" : "none")};
@@ -18,9 +23,12 @@ const StyledApp = styled.div<{ $isChatOpen: boolean }>`
     }
   }
 
-  @media ${media.desktop} {
+  @media ${DESKTOP_VIEW} {
     display: grid;
-    grid-template-columns: 2fr 5fr;
+    grid-template-columns: ${({ $isRightSideBarOpen }) =>
+      $isRightSideBarOpen ? "1.5fr 3fr 1.5fr" : "1.5fr 4.5fr"};
+
+    overflow-x: hidden;
 
     & > main {
       display: block;
@@ -34,15 +42,37 @@ const StyledApp = styled.div<{ $isChatOpen: boolean }>`
 
 function AppLayout() {
   const { chatId } = useParams();
-
   const isChatOpen = !!chatId;
+  const { isRightSideBarOpen } = useRightSideBarContext();
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const [callStatus, setCallStatus] = useState<
+    "inactive" | "active" | "calling" | "incoming" | "ended"
+  >("inactive");
+
+  useEffect(() => {
+    const handler = (status: typeof callStatus) => setCallStatus(status);
+    callStatusEmitter.on("update", handler);
 
+    return () => callStatusEmitter.off("update", handler);
+  }, []);
   return (
-    <StyledApp $isChatOpen={isChatOpen} data-testid="app-layout">
-      <SideBar />
+    <StyledApp
+      $isChatOpen={isChatOpen}
+      data-testid="app-layout"
+      $isRightSideBarOpen={isRightSideBarOpen}
+    >
+      <SideBar type="left" />
       <Main>
         <Outlet />
+        {callStatus != "inactive" && (
+          <CallLayout
+            isCollapsed={isCollapsed}
+            setIsCollapsed={setIsCollapsed}
+            callStatus={callStatus}
+          />
+        )}
       </Main>
+      {isRightSideBarOpen && <SideBar type="right" />}
     </StyledApp>
   );
 }
diff --git a/app/src/components/Avatar.tsx b/app/src/components/Avatar.tsx
new file mode 100644
index 00000000..a1b1dc1f
--- /dev/null
+++ b/app/src/components/Avatar.tsx
@@ -0,0 +1,50 @@
+import { STATIC_MEDIA_URL } from "@constants";
+import styled from "styled-components";
+import { getAvatarName } from "utils/helpers";
+
+const StyledAvatar = styled.div<{ $image?: string; $size?: string }>`
+  width: ${({ $size }) =>
+    $size === "small" ? "2.625rem" : $size === "large" ? "7.5rem" : "3.125rem"};
+  height: ${({ $size }) =>
+    $size === "small" ? "2.625rem" : $size === "large" ? "7.5rem" : "3.125rem"};
+
+  border-radius: 50%;
+  margin-right: ${({ $size }) => ($size === "large" ? "0" : "1rem")};
+
+  background: ${({ $image }) =>
+    $image ? `url(${$image}) center/cover no-repeat` : "var(--color-avatar)"};
+
+  color: white;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  flex-shrink: 0;
+
+  font-weight: bold;
+  font-size: ${({ $size }) => ($size === "large" ? "1.5rem" : "1rem")};
+  text-transform: uppercase;
+  z-index: 1;
+`;
+
+type PropsType = {
+  image?: string | undefined;
+  name: string | undefined;
+  size?: string;
+  onClick?: () => void;
+};
+
+function Avatar({ image, name, size, onClick }: PropsType) {
+  if (image && !image.startsWith("http")) {
+    image = STATIC_MEDIA_URL + image;
+  }
+
+  return (
+    <StyledAvatar onClick={onClick} $image={image} $size={size || "small"}>
+      {!image && getAvatarName(name)}
+    </StyledAvatar>
+  );
+}
+
+export default Avatar;
diff --git a/app/src/components/BackArrow.tsx b/app/src/components/BackArrow.tsx
index c62ba7a2..fecbda3b 100644
--- a/app/src/components/BackArrow.tsx
+++ b/app/src/components/BackArrow.tsx
@@ -2,6 +2,7 @@ import styled from "styled-components";
 import { getIcon } from "@data/icons";
 import { useAppDispatch, useAppSelector } from "@hooks/useGlobalState";
 import { updateSideBarView } from "@state/side-bar/sideBar";
+import { useSidebarType } from "./side-bar/SideBarContext";
 
 const StyledArrow = styled.div`
   width: 30px;
@@ -20,14 +21,19 @@ const StyledArrow = styled.div`
 
 function BackArrow() {
   const dispatch = useAppDispatch();
-  const { backView } = useAppSelector((state) => state.sideBarData);
+  const type = useSidebarType();
+  const { backView } = useAppSelector((state) =>
+    type === "left"
+      ? state.sideBarData.leftSideBar
+      : state.sideBarData.rightSideBar
+  );
 
   return (
     <StyledArrow
       data-testid="back-arrow-icon"
       onClick={() =>
         backView !== undefined &&
-        dispatch(updateSideBarView({ redirect: backView }))
+        dispatch(updateSideBarView({ redirect: backView, data: { type } }))
       }
     >
       {getIcon("BackArrow")}
diff --git a/app/src/components/Button.tsx b/app/src/components/Button.tsx
index 6f9adeef..42094180 100644
--- a/app/src/components/Button.tsx
+++ b/app/src/components/Button.tsx
@@ -1,6 +1,6 @@
 import styled, { css } from "styled-components";
 
-const Button = styled.button<{ $type?: string }>`
+const Button = styled.button<{ $type?: string; $width?: string }>`
   font-weight: bold;
   letter-spacing: 1.5px;
   border: none;
@@ -24,22 +24,37 @@ const Button = styled.button<{ $type?: string }>`
     opacity: 0.6;
   }
 
-  ${(props) =>
-    props.$type === "modal" &&
-    css`
-      font-weight: normal;
-      letter-spacing: normal;
-    `}
-  ${(props) =>
-    props.$type === "danger" &&
-    css`
-      background-color: var(--color-error);
-      color: var(--color-text-button);
-      font-weight: normal;
-      &:hover {
-        background-color: var(--color-error-shade);
-      }
-    `}
+  width: ${(props) => props.$width || "auto"};
+  ${(props) => {
+    switch (props.$type) {
+      case "normal":
+        return css`
+          background-color: var(--color-border);
+          color: var(--color-text);
+          font-weight: normal;
+          letter-spacing: normal;
+          &:hover {
+            background-color: var(--color-border-hover);
+          }
+        `;
+      case "modal":
+        return css`
+          font-weight: normal;
+          letter-spacing: normal;
+        `;
+      case "danger":
+        return css`
+          background-color: var(--color-error);
+          color: var(--color-text-button);
+          font-weight: normal;
+          &:hover {
+            background-color: var(--color-error-shade);
+          }
+        `;
+      default:
+        return;
+    }
+  }}
 `;
 
 export default Button;
diff --git a/app/src/components/Checkbox.tsx b/app/src/components/Checkbox.tsx
new file mode 100644
index 00000000..c02f15c7
--- /dev/null
+++ b/app/src/components/Checkbox.tsx
@@ -0,0 +1,65 @@
+import styled from "styled-components";
+
+const CheckboxWrapper = styled.label`
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+
+  input[type="checkbox"] {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+
+    width: 1.2em;
+    height: 1.2rem;
+    
+    margin-right: 1.5rem;
+
+    border: 2px solid var(--color-text-secondary);
+    border-radius: 4px;
+
+    background-color: var(--color-background);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &::after {
+      content: "";
+      width: 10px;
+      height: 5px;
+      border: solid white;
+      border-width: 0 0 2px 2px;
+      transform: scale(0) rotate(-45deg);
+      opacity: 0;
+      transition:
+        transform 0.2s ease,
+        opacity 0.2s ease;
+    }
+
+    &:checked {
+      background-color: var(--accent-color);
+
+      &::after {
+        transform: scale(1) rotate(-45deg);
+        opacity: 1;
+      }
+    }
+
+    &:focus {
+      outline: 2px solid var(--focus-color);
+    }
+  }
+`;
+
+type CheckboxProps = React.InputHTMLAttributes<HTMLInputElement>;
+
+function Checkbox(props: CheckboxProps) {
+  return (
+    <CheckboxWrapper>
+      <input type="checkbox" {...props} />
+    </CheckboxWrapper>
+  );
+}
+
+export default Checkbox;
diff --git a/app/src/components/CircleIcon.tsx b/app/src/components/CircleIcon.tsx
index 4eb8a991..da713c84 100644
--- a/app/src/components/CircleIcon.tsx
+++ b/app/src/components/CircleIcon.tsx
@@ -9,10 +9,15 @@ interface CircleIconProps {
   $padding?: number;
   $color?: string;
   $bgColor?: string;
-  onClick?: () => void;
+  $opacity?: number;
+  onClick?: (e: Event, voiceNoteName?: string) => void;
+  children?: React.ReactNode;
+  as?: React.ElementType;
+  type?: string;
+  testid?: string;
 }
 
-const StyledIcon = styled.div<CircleIconProps>`
+const StyledCircleIcon = styled.div<CircleIconProps>`
   right: ${(props) => props.$right}rem;
   bottom: ${(props) => props.$bottom}rem;
   ${(props) =>
@@ -25,11 +30,13 @@ const StyledIcon = styled.div<CircleIconProps>`
   padding: ${(props) => props.$padding}rem;
   background-color: ${(props) => props.$bgColor};
   border-radius: var(--border-radius-circle);
-  opacity: 0.9;
-  box-shadow: var(--box-shadow);
-  opacity: 0.9;
+  opacity: ${(props) => props.$opacity};
   box-shadow: var(--box-shadow);
 
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
   &:hover {
     opacity: 1;
     cursor: pointer;
@@ -38,10 +45,15 @@ const StyledIcon = styled.div<CircleIconProps>`
     width: 100%;
     height: 100%;
     color: ${(props) => props.$color};
-    width: 100%;
-    height: 100%;
-    color: ${(props) => props.$color};
   }
+
+  ${(props) =>
+    props.as === "button" &&
+    css`
+      border: none;
+      outline: none;
+      cursor: pointer;
+    `};
 `;
 
 function CircleIcon({
@@ -52,15 +64,33 @@ function CircleIcon({
   $padding = 0,
   $color = "var(--color-search-border)",
   $bgColor = "transparent",
+  $opacity = 0.9,
   onClick,
+  children,
+  as,
+  type,
+  testid,
 }: CircleIconProps) {
   return (
-    <StyledIcon
+    <StyledCircleIcon
+      data-testid={testid}
       onClick={onClick}
-      {...{ $icon, $bottom, $right, $size, $padding, $color, $bgColor }}
+      {...{
+        $icon,
+        $bottom,
+        $right,
+        $size,
+        $padding,
+        $color,
+        $bgColor,
+        $opacity,
+        as,
+        type,
+      }}
     >
       {getIcon($icon)}
-    </StyledIcon>
+      {children}
+    </StyledCircleIcon>
   );
 }
 
diff --git a/app/src/components/CloseButton.tsx b/app/src/components/CloseButton.tsx
new file mode 100644
index 00000000..c29adf99
--- /dev/null
+++ b/app/src/components/CloseButton.tsx
@@ -0,0 +1,25 @@
+import { getIcon } from "@data/icons";
+import styled from "styled-components";
+
+interface CloseButtonProps {
+  onClose: () => void;
+}
+
+const StyledCloseButton = styled.div`
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  cursor: pointer;
+  color: white;
+
+  z-index: 2;
+`;
+
+function CloseButton(props: CloseButtonProps) {
+  const { onClose } = props;
+  return (
+    <StyledCloseButton onClick={onClose}>{getIcon("Close")}</StyledCloseButton>
+  );
+}
+
+export default CloseButton;
diff --git a/app/src/components/CollapsedList.tsx b/app/src/components/CollapsedList.tsx
new file mode 100644
index 00000000..6e3a0667
--- /dev/null
+++ b/app/src/components/CollapsedList.tsx
@@ -0,0 +1,48 @@
+import styled from "styled-components";
+
+interface CollapsedListProps {
+  onOpen: () => void;
+  render: (data: unknown) => JSX.Element;
+  list: unknown[];
+}
+
+const StyledCollapsedList = styled.div`
+  position: relative;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
+  height: 100%;
+  width: 100%;
+`;
+const CollapsedItem = styled.div<{ $index: number }>`
+  position: absolute;
+  z-index: 30 - index;
+  right: ${(props) => props.$index * 15 + 20}px;
+  top: 0.7rem;
+  transform: scale(0.8);
+  transition: transform 0.3s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+`;
+
+function CollapsedList(Props: CollapsedListProps) {
+  const { onOpen, render, list } = Props;
+  const displayedItems = list?.slice(0, 3);
+
+  return (
+    <StyledCollapsedList onClick={onOpen}>
+      {displayedItems?.map((element, index) => (
+        <CollapsedItem key={index} $index={index}>
+          {render(element)}
+        </CollapsedItem>
+      ))}
+    </StyledCollapsedList>
+  );
+}
+
+export default CollapsedList;
diff --git a/app/src/components/ExpandingTextArea.tsx b/app/src/components/ExpandingTextArea.tsx
index 50379a70..c49ea04b 100644
--- a/app/src/components/ExpandingTextArea.tsx
+++ b/app/src/components/ExpandingTextArea.tsx
@@ -1,42 +1,94 @@
-import { useRef } from "react";
+import { useEffect, useRef } from "react";
 import styled from "styled-components";
+import { MentionsInput, Mention } from "react-mentions";
+import useMentionList from "@features/chats/hooks/useMentionList";
 
-const Textarea = styled.textarea`
-  outline: none;
-  border: none;
-
-  flex: 1;
-  align-self: center;
-  
-  caret-color: var(--accent-color);
+const StyledMentionsInput = styled.div`
+  width: 100%;
+  max-width: 27rem;
   color: var(--color-text);
+`;
 
-  resize: none;
-  overflow: hidden;
-
-  font-size: 1rem;
-  line-height: 1.5;
+type PropsType = {
+  input: string;
+  setInput: (value: string) => void;
+  onKeyDown?: (
+    e:
+      | React.KeyboardEvent<HTMLInputElement>
+      | React.KeyboardEvent<HTMLTextAreaElement>
+  ) => void;
+};
 
-  max-height: 300px;
-`;
+function ExpandingTextArea({ input, setInput, onKeyDown }: PropsType) {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
 
-function ExpandingTextArea() {
-  const ref = useRef<HTMLTextAreaElement>(null);
+  const { filteredMembers } = useMentionList();
 
   function handleInput() {
-    if (ref.current) {
-      ref.current.style.height = "auto";
-      ref.current.style.height = `${ref.current.scrollHeight}px`;
+    if (textareaRef.current) {
+      textareaRef.current.style.height = "auto";
+      textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
     }
   }
 
+  useEffect(() => {
+    if (textareaRef.current) {
+      if (textareaRef.current.value === "" || input === "") {
+        textareaRef.current.style.height = "32px";
+      }
+    }
+  }, [input]);
+
   return (
-    <Textarea
-      ref={ref}
-      placeholder="Message"
-      rows={1}
-      onInput={handleInput}
-    />
+    <StyledMentionsInput>
+      <MentionsInput
+        value={input}
+        onChange={(e: any) => setInput(e.target.value)}
+        onKeyDown={onKeyDown!}
+        onInput={handleInput}
+        placeholder="Message"
+        a11ySuggestionsListLabel="Suggested mentions"
+        style={{
+          input: {
+            overflow: "hidden",
+            border: "none",
+            forcedColorAdjust: "none",
+            color: "var(--color-text)",
+            outline: "none"
+          },
+          suggestions: {
+            list: {
+              backgroundColor: "var(--color-background)",
+              border: "none",
+              borderRadius: "0.5rem",
+              position: "absolute",
+              zIndex: 1,
+              bottom: "2rem",
+              width: "20rem",
+              boxShadow: "0 2px 5px rgba(0, 0, 0, 0.2)"
+            },
+            item: {
+              padding: "0.5rem 1rem",
+              "&focused": {
+                backgroundColor: "var(--accent-color)",
+                color: "white"
+              }
+            }
+          }
+        }}
+      >
+        <Mention
+          trigger="@"
+          data={filteredMembers}
+          displayTransform={(display) => `@${display}`}
+          style={{
+            backgroundColor: "transparent",
+            color: "ButtonFace",
+            border: "none"
+          }}
+        />
+      </MentionsInput>
+    </StyledMentionsInput>
   );
 }
 
diff --git a/app/src/components/Icon.tsx b/app/src/components/Icon.tsx
index 64efd890..8bfc501a 100644
--- a/app/src/components/Icon.tsx
+++ b/app/src/components/Icon.tsx
@@ -1,7 +1,7 @@
-import { ReactNode } from "react";
+import { ButtonHTMLAttributes, ReactNode } from "react";
 import styled from "styled-components";
 
-const StyledIcon = styled.div`
+const StyledIcon = styled.button`
   width: 2rem;
   height: 2rem;
 
@@ -9,17 +9,21 @@ const StyledIcon = styled.div`
   justify-content: center;
   align-items: center;
 
+  border: none;
+  background-color: transparent;
+
   border-radius: var(--border-radius-modal);
+
   &:hover {
     background: var(--color-item-hover);
     cursor: pointer;
   }
 `;
 
-type IconProps = {
+type IconProps = ButtonHTMLAttributes<HTMLButtonElement> & {
   children: ReactNode;
 };
 
-export default function Icon({ children }: IconProps) {
-  return <StyledIcon>{children}</StyledIcon>;
+export default function Icon({ children, ...props }: IconProps) {
+  return <StyledIcon {...props}>{children}</StyledIcon>;
 }
diff --git a/app/src/components/ImageEditor.tsx b/app/src/components/ImageEditor.tsx
index 200edab7..c8594b07 100644
--- a/app/src/components/ImageEditor.tsx
+++ b/app/src/components/ImageEditor.tsx
@@ -1,7 +1,43 @@
-import FilerobotImageEditor, {
-  TABS,
-  TOOLS,
-} from "react-filerobot-image-editor";
+import { lazy, Suspense } from "react";
+
+const FilerobotImageEditor = lazy(() => import("react-filerobot-image-editor"));
+
+const TABS = {
+  FINETUNE: "Finetune",
+  FILTERS: "Filters",
+  ADJUST: "Adjust",
+  WATERMARK: "Watermark",
+  ANNOTATE: "Annotate",
+  RESIZE: "Resize",
+} as const;
+
+const TOOLS = {
+  CROP: "Crop",
+  ROTATE: "Rotate",
+  FLIP_X: "Flip_X",
+  FLIP_Y: "Flip_Y",
+  BRIGHTNESS: "Brightness",
+  CONTRAST: "Contrast",
+  HSV: "HueSaturationValue",
+  WARMTH: "Warmth",
+  BLUR: "Blur",
+  THRESHOLD: "Threshold",
+  POSTERIZE: "Posterize",
+  PIXELATE: "Pixelate",
+  NOISE: "Noise",
+  FILTERS: "Filters",
+  RECT: "Rect",
+  ELLIPSE: "Ellipse",
+  POLYGON: "Polygon",
+  TEXT: "Text",
+  LINE: "Line",
+  IMAGE: "Image",
+  ARROW: "Arrow",
+  WATERMARK: "Watermark",
+  PEN: "Pen",
+  RESIZE: "Resize",
+} as const;
+
 import styled from "styled-components";
 
 interface imageEditorProps {
@@ -10,16 +46,31 @@ interface imageEditorProps {
   src: string;
   onImageSave: (file: File) => void;
   isProfileImage?: boolean;
+  widthRatio?: number;
+  heightRatio?: number;
 }
-
-const StyledContainer = styled.div<{ $isOpen: boolean }>`
+interface styledContainerProps {
+  $widthRatio: number;
+  $heightRatio: number;
+}
+const StyledBackGround = styled.div<{ $isOpen: boolean }>`
   display: ${({ $isOpen }) => ($isOpen ? "flex" : "none")};
   position: fixed;
   top: 0;
   left: 0;
+  z-index: 1000;
   width: 100%;
   height: 100%;
-  z-index: 1000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.8);
+`;
+
+const StyledContainer = styled.div<styledContainerProps>`
+  width: ${(props) => props.$widthRatio}%;
+  height: ${(props) => props.$heightRatio}%;
+  display: flex;
   justify-content: center;
   align-items: center;
 `;
@@ -30,6 +81,8 @@ function ImageEditor({
   src,
   onImageSave,
   isProfileImage,
+  widthRatio = 50,
+  heightRatio = 50,
 }: imageEditorProps) {
   const handleSave = async (editedImageObject: { imageBase64?: string }) => {
     if (editedImageObject.imageBase64) {
@@ -44,88 +97,96 @@ function ImageEditor({
       onImageSave(file);
       closeImgEditor();
     } else {
-      console.error("Image base64 data is undefined");
+      throw new Error("something went wrong with image editing");
     }
   };
   return (
-    <StyledContainer $isOpen={isOpen}>
+    <StyledBackGround $isOpen={isOpen}>
       {isOpen && (
-        <div>
-          <FilerobotImageEditor
-            source={src}
-            forceToPngInEllipticalCrop={true}
-            onSave={(editedImageObject) => handleSave(editedImageObject)}
-            onClose={closeImgEditor}
-            annotationsCommon={{
-              fill: "#ff0000",
-            }}
-            Text={{ text: "I Love TelWare" }}
-            Rotate={{ angle: 90, componentType: "slider" }}
-            Crop={
-              isProfileImage
-                ? {
-                    ratio: 1,
-                  }
-                : {
-                    presetsItems: [
-                      {
-                        titleKey: "classicTv",
-                        descriptionKey: "4:3",
-                        ratio: 4 / 3,
-                      },
-                      {
-                        titleKey: "cinemascope",
-                        descriptionKey: "21:9",
-                        ratio: 21 / 9,
-                      },
-                    ],
-                    presetsFolders: [
-                      {
-                        titleKey: "socialMedia",
-                        groups: [
-                          {
-                            titleKey: "facebook",
-                            items: [
-                              {
-                                titleKey: "profile",
-                                width: 180,
-                                height: 180,
-                                descriptionKey: "fbProfileSize",
-                              },
-                              {
-                                titleKey: "coverPhoto",
-                                width: 820,
-                                height: 312,
-                                descriptionKey: "fbCoverPhotoSize",
-                              },
-                            ],
-                          },
-                        ],
-                      },
-                    ],
-                  }
-            }
-            theme={{
-              palette: {
-                warning: "#ff0000c0",
-                "warning-active": "#ff0000",
-                "warning-hover": "#ff0000",
-              },
-            }}
-            tabsIds={
-              isProfileImage
-                ? [TABS.ADJUST]
-                : [TABS.ADJUST, TABS.ANNOTATE, TABS.FINETUNE, TABS.RESIZE]
-            }
-            defaultTabId={isProfileImage ? TABS.ADJUST : TABS.ANNOTATE}
-            defaultToolId={TOOLS.RESIZE}
-            defaultSavedImageQuality={0.95}
-            savingPixelRatio={4}
-            previewPixelRatio={4}
-          />
-        </div>
+        <StyledContainer
+          {...{
+            $widthRatio: widthRatio,
+            $heightRatio: heightRatio,
+          }}
+        >
+          <Suspense fallback={<div>Loading...</div>}>
+            <FilerobotImageEditor
+              source={src}
+              forceToPngInEllipticalCrop={true}
+              onSave={(editedImageObject) => handleSave(editedImageObject)}
+              onClose={closeImgEditor}
+              annotationsCommon={{
+                fill: "#2221f1",
+              }}
+              Text={{ text: "I Love TelWare" }}
+              Rotate={{ angle: 90, componentType: "slider" }}
+              Crop={
+                isProfileImage
+                  ? {
+                      ratio: 1,
+                    }
+                  : {
+                      presetsItems: [
+                        {
+                          titleKey: "classicTv",
+                          descriptionKey: "4:3",
+                          ratio: 4 / 3,
+                        },
+                        {
+                          titleKey: "cinemascope",
+                          descriptionKey: "21:9",
+                          ratio: 21 / 9,
+                        },
+                      ],
+                      presetsFolders: [
+                        {
+                          titleKey: "socialMedia",
+                          groups: [
+                            {
+                              titleKey: "facebook",
+                              items: [
+                                {
+                                  titleKey: "profile",
+                                  width: 180,
+                                  height: 180,
+                                  descriptionKey: "fbProfileSize",
+                                },
+                                {
+                                  titleKey: "coverPhoto",
+                                  width: 820,
+                                  height: 312,
+                                  descriptionKey: "fbCoverPhotoSize",
+                                },
+                              ],
+                            },
+                          ],
+                        },
+                      ],
+                    }
+              }
+              theme={{
+                palette: {
+                  warning: "#ff0000c0",
+                  "warning-active": "#ff0000",
+                  "warning-hover": "#ff0000",
+                },
+              }}
+              tabsIds={
+                isProfileImage
+                  ? [TABS.ADJUST]
+                  : [TABS.ADJUST, TABS.ANNOTATE, TABS.FINETUNE]
+              }
+              defaultTabId={isProfileImage ? TABS.ADJUST : TABS.ANNOTATE}
+              defaultToolId={TOOLS.RESIZE}
+              defaultSavedImageQuality={0.95}
+              savingPixelRatio={4}
+              previewPixelRatio={4}
+              data-testid="image-editor"
+            />
+          </Suspense>
+        </StyledContainer>
       )}
-    </StyledContainer>
+    </StyledBackGround>
   );
 }
 
diff --git a/app/src/components/Logout.tsx b/app/src/components/Logout.tsx
new file mode 100644
index 00000000..68ab47aa
--- /dev/null
+++ b/app/src/components/Logout.tsx
@@ -0,0 +1,20 @@
+import { useLogout } from "@features/authentication/logout/hooks/useLogout";
+import CircleIcon from "./CircleIcon";
+
+function Logout({ size = 1.8 }) {
+  const { logout } = useLogout();
+
+  return (
+    <CircleIcon
+      data-testid="logout-icon"
+      onClick={() => logout()}
+      $icon="Logout"
+      $padding={0.2}
+      $size={size}
+      $color="var(--color-text)"
+      $bgColor="var(--color-pattern)"
+    />
+  );
+}
+
+export default Logout;
diff --git a/app/src/components/Main.tsx b/app/src/components/Main.tsx
index 381e73d5..282a1cd0 100644
--- a/app/src/components/Main.tsx
+++ b/app/src/components/Main.tsx
@@ -1,10 +1,16 @@
+import { useEffect } from "react";
+import { useDispatch } from "react-redux";
 import styled from "styled-components";
 
+import { setUserInfo } from "@state/user/user";
+
+import { useUser } from "@features/authentication/login/hooks/useUser";
+
 const StyledMain = styled.main`
   position: relative;
   overflow: hidden;
   background: var(--color-chat-wallpaper-1);
-
+  padding-top: 1rem;
   &::before {
     content: "";
     position: absolute;
@@ -34,6 +40,14 @@ const StyledMain = styled.main`
 `;
 
 function Main({ children }: { children?: React.ReactNode }) {
+  const { user, isPending } = useUser();
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    if (user && !isPending) {
+      dispatch(setUserInfo(user));
+    }
+  }, [dispatch, user, isPending]);
   return <StyledMain data-testid="main">{children}</StyledMain>;
 }
 
diff --git a/app/src/components/Modal.tsx b/app/src/components/Modal.tsx
index 786989cf..e2bbee32 100644
--- a/app/src/components/Modal.tsx
+++ b/app/src/components/Modal.tsx
@@ -1,3 +1,4 @@
+import React, { useRef } from "react";
 import styled from "styled-components";
 
 const ModalOverlay = styled.div`
@@ -10,7 +11,7 @@ const ModalOverlay = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
-  z-index: 1000;
+  z-index: 10;
 `;
 
 const ModalContainer = styled.div`
@@ -19,17 +20,20 @@ const ModalContainer = styled.div`
   padding: 2rem;
   border-radius: 8px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-  text-align: center;
   width: 400px;
+
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+
+  gap: 1rem;
 `;
 
 const ModalTitle = styled.h2`
-  margin-bottom: 1rem;
   color: var(--color-text);
 `;
 
 const ModalMessage = styled.p`
-  margin-bottom: 2rem;
   color: var(--color-text-secondary);
 `;
 
@@ -48,26 +52,37 @@ const CloseButton = styled.button`
   }
 `;
 
+type ModalProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  message?: string;
+  children: React.ReactNode;
+};
+
 function Modal({ onClose, isOpen, title, message, children }: ModalProps) {
+  const modalRef = useRef<HTMLDivElement | null>(null);
+
+  const handleClickOutside = (e: React.MouseEvent) => {
+    if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
+      onClose();
+    }
+  };
+
   if (!isOpen) return null;
+
   return (
-    <ModalOverlay>
-      <ModalContainer>
+    <ModalOverlay onClick={handleClickOutside}>
+      <ModalContainer ref={modalRef}>
         <CloseButton type="button" onClick={onClose} data-testid="close-button">
           &times;
         </CloseButton>
         <ModalTitle>{title}</ModalTitle>
-        <ModalMessage>{message}</ModalMessage>
+        {message && <ModalMessage>{message}</ModalMessage>}
         {children}
       </ModalContainer>
     </ModalOverlay>
   );
 }
-type ModalProps = {
-  isOpen: boolean;
-  onClose: () => void;
-  title: string;
-  message: string;
-  children: React.ReactNode;
-};
+
 export default Modal;
diff --git a/app/src/components/OptionList.tsx b/app/src/components/OptionList.tsx
new file mode 100644
index 00000000..34bb5b98
--- /dev/null
+++ b/app/src/components/OptionList.tsx
@@ -0,0 +1,44 @@
+import styled from "styled-components";
+
+const OptionListContainer = styled.div`
+  position: absolute;
+  bottom: 0;
+  right: 0;
+
+  background-color: var(--color-background-compact-menu);
+  backdrop-filter: blur(0.3125rem);
+  -webkit-backdrop-filter: blur(0.3125rem);
+
+  padding: 0.5rem 1rem;
+  border-radius: 0.5rem;
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);
+  min-width: 9.375rem;
+
+  &:hover {
+    cursor: pointer;
+    background-color: var(--color-background-compact-menu-hover);
+  }
+`;
+
+const Option = styled.div`
+  display: flex;
+  justify-content: space-around;
+  gap: 0.3125rem;
+  font-size: 0.9rem;
+  color: var(--color-text);
+`;
+
+type OptionListProps = {
+  onClick: () => void;
+  children: React.ReactNode;
+};
+
+const OptionList = ({ onClick, children }: OptionListProps) => {
+  return (
+    <OptionListContainer onClick={onClick}>
+      <Option>{children}</Option>
+    </OptionListContainer>
+  );
+};
+
+export default OptionList;
diff --git a/app/src/components/Popup.tsx b/app/src/components/Popup.tsx
new file mode 100644
index 00000000..d7c270ba
--- /dev/null
+++ b/app/src/components/Popup.tsx
@@ -0,0 +1,44 @@
+import styled from "styled-components";
+import CloseButton from "./CloseButton";
+import ReactDOM from "react-dom";
+
+interface PopupProps {
+  onClose: () => void;
+  isOpen: boolean;
+  children: React.ReactNode;
+}
+const PopupOverlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: black;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+`;
+const PopupContainer = styled.div`
+  position: relative;
+  padding: 2rem;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  text-align: center;
+  width: 100%;
+  height: 100%;
+`;
+
+function Popup({ onClose, isOpen, children }: PopupProps) {
+  if (!isOpen) return null;
+  return ReactDOM.createPortal(
+    <PopupOverlay>
+      <PopupContainer>
+        <CloseButton onClose={onClose} />
+        {children}
+      </PopupContainer>
+    </PopupOverlay>,
+    document.body,
+  );
+}
+export default Popup;
diff --git a/app/src/components/UploadImage.tsx b/app/src/components/UploadImage.tsx
new file mode 100644
index 00000000..79d4b833
--- /dev/null
+++ b/app/src/components/UploadImage.tsx
@@ -0,0 +1,105 @@
+import { getIcon } from "@data/icons";
+import styled from "styled-components";
+
+const UploadProfilePictureContainer = styled.div`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: white;
+  cursor: pointer;
+  z-index: 5;
+  &:hover svg {
+    transform: scale(1.2);
+  }
+  svg {
+    transition: all 0.2s ease-out;
+    transform-origin: center;
+    font-size: 3rem;
+  }
+`;
+
+const StyledImageInput = styled.input`
+  position: absolute;
+  top: calc(50% - 4rem);
+  left: calc(50% - 4rem);
+  width: 8rem;
+  height: 8rem;
+  opacity: 0;
+  z-index: 10;
+  cursor: pointer;
+`;
+
+const StyledProfileImage = styled.img`
+  width: 8rem;
+  height: 8rem;
+  border-radius: 50%;
+  object-fit: cover;
+`;
+
+const DefaultProfilePicture = styled.div`
+  width: 8rem;
+  height: 8rem;
+  border-radius: 50%;
+  background-color: var(--accent-color);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 2rem;
+  color: white;
+  font-weight: bold;
+  opacity: 0.8;
+`;
+
+const ProfilePictureSection = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  align-items: center;
+  padding: 1rem 1.5rem;
+  background-color: var(--color-background);
+  position: relative;
+`;
+
+interface UploadImgProps {
+  setSelectedImageFile: (file: File | null) => void;
+  selectedImageFile?: File | null;
+}
+
+export default function UploadImage({
+  setSelectedImageFile,
+  selectedImageFile,
+}: UploadImgProps) {
+  const handleImageUpload = async (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    if (event.target.files) {
+      const file = event.target.files[0];
+      setSelectedImageFile(file);
+    }
+  };
+
+  return (
+    <ProfilePictureSection>
+      <UploadProfilePictureContainer>
+        <StyledImageInput
+          type="file"
+          accept="image/*"
+          onChange={handleImageUpload}
+          data-testid="image-upload"
+          id="photo"
+        />
+        {getIcon("AddPhoto")}
+      </UploadProfilePictureContainer>
+
+      {selectedImageFile ? (
+        <StyledProfileImage
+          src={URL.createObjectURL(selectedImageFile)}
+          alt="Profile Picture"
+        />
+      ) : (
+        <DefaultProfilePicture />
+      )}
+    </ProfilePictureSection>
+  );
+}
diff --git a/app/src/components/User.tsx b/app/src/components/User.tsx
new file mode 100644
index 00000000..21d71177
--- /dev/null
+++ b/app/src/components/User.tsx
@@ -0,0 +1,154 @@
+import { useState } from "react";
+import { useParams } from "react-router-dom";
+import styled from "styled-components";
+
+import Avatar from "./Avatar";
+import Checkbox from "./Checkbox";
+import OptionList from "./OptionList";
+
+import { toggleSelectUser } from "@state/groups/selectedUsers";
+import { UserType } from "@features/groups/hooks/useAllUsers";
+import { useSocket } from "@hooks/useSocket";
+import { useAppDispatch, useAppSelector } from "@hooks/useGlobalState";
+import { useGroupInfo } from "@features/groups/hooks/useGroupInfo";
+import { getIcon } from "@data/icons";
+
+const UserRow = styled.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  padding: 1rem;
+
+  &:last-child {
+    border-bottom: none;
+    margin-bottom: 0;
+  }
+
+  &:hover {
+    cursor: pointer;
+    background-color: var(--color-background-secondary);
+  }
+`;
+
+const UserDetails = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  width: 100%;
+  overflow: hidden;
+`;
+
+const Details = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  width: 100%;
+  overflow: hidden;
+`;
+
+const Username = styled.span`
+  color: var(--color-text);
+
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+`;
+
+const Status = styled.span`
+  font-size: small;
+  color: var(--color-text-secondary);
+`;
+
+const Role = styled.span`
+  color: var(--color-text-secondary);
+  font-size: small;
+
+  flex-shrink: 0;
+  margin-left: 0.5rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+type UserProps = {
+  user: UserType;
+  view: "display" | "update";
+};
+
+function User({ user, view }: UserProps) {
+  const { _id, photo, status, screenFirstName, screenLastName, role } = user;
+  const { chatId } = useParams<{ chatId: string }>();
+  const { isPending, isCurrUserAdmin } = useGroupInfo();
+
+  const dispatch = useAppDispatch();
+  const selectedUsers = useAppSelector((state) => state.selectedUsers);
+  const { removeMembers } = useSocket();
+  const [isModalVisible, setIsModalVisible] = useState(false);
+
+  function handleContextMenu(e: React.MouseEvent) {
+    e.preventDefault();
+    setIsModalVisible(true);
+  }
+
+  function handleToggleMember() {
+    if (view === "update") dispatch(toggleSelectUser(user));
+  }
+
+  function handleRemoveUser() {
+    removeMembers({ chatId: chatId!, members: [_id] });
+  }
+
+  function handleCloseModal() {
+    setIsModalVisible(false);
+  }
+
+  if (isPending) return;
+
+  return (
+    <UserRow
+      onContextMenu={handleContextMenu}
+      onMouseLeave={handleCloseModal}
+      data-testid={`user-row-${_id}`}
+      onClick={handleToggleMember}
+      key={_id}
+    >
+      {view === "update" && (
+        <Checkbox
+          data-testid="user-selection-checkbox"
+          onChange={handleToggleMember}
+          checked={selectedUsers.some(
+            (selectedUser) => selectedUser._id === _id
+          )}
+        />
+      )}
+
+      <Avatar
+        data-testid={`avatar-user-${_id}`}
+        name={screenFirstName}
+        image={photo}
+      />
+      <UserDetails>
+        <Details>
+          <Username data-testid="user-screen-name">
+            {`${screenFirstName} ${screenLastName}`}
+          </Username>
+          {role === "admin" && <Role data-testid="user-role">{role}</Role>}
+        </Details>
+        <Status data-testid="user-status">{status}</Status>
+      </UserDetails>
+
+      {isModalVisible && isCurrUserAdmin && role !== "admin" && (
+        <OptionList onClick={handleRemoveUser}>
+          {getIcon("RemoveMember")}
+          <p>Remove this user</p>
+        </OptionList>
+      )}
+    </UserRow>
+  );
+}
+
+export default User;
diff --git a/app/src/components/UsersList.tsx b/app/src/components/UsersList.tsx
new file mode 100644
index 00000000..da262c89
--- /dev/null
+++ b/app/src/components/UsersList.tsx
@@ -0,0 +1,14 @@
+import User from "./User";
+import { UserType } from "@features/groups/hooks/useAllUsers";
+
+function UsersList({
+  view,
+  users,
+}: {
+  view: "update" | "display";
+  users: UserType[];
+}) {
+  return users?.map((user) => <User key={user._id} user={user} view={view} />);
+}
+
+export default UsersList;
diff --git a/app/src/components/inputs/float-label-input/FloatingLabelInput.tsx b/app/src/components/inputs/float-label-input/FloatingLabelInput.tsx
index be240209..f187e53f 100644
--- a/app/src/components/inputs/float-label-input/FloatingLabelInput.tsx
+++ b/app/src/components/inputs/float-label-input/FloatingLabelInput.tsx
@@ -7,7 +7,7 @@ import {
   UseFormWatch,
 } from "react-hook-form";
 
-interface FloatingLabelInputProps<TFormValues extends FieldValues> {
+export interface FloatingLabelInputProps<TFormValues extends FieldValues> {
   label: string;
   id: Path<TFormValues>;
   watch?: UseFormWatch<TFormValues>;
diff --git a/app/src/components/inputs/float-label-input/FloatingLabelInputDemo.tsx b/app/src/components/inputs/float-label-input/FloatingLabelInputDemo.tsx
index a09423f7..2adfc18c 100644
--- a/app/src/components/inputs/float-label-input/FloatingLabelInputDemo.tsx
+++ b/app/src/components/inputs/float-label-input/FloatingLabelInputDemo.tsx
@@ -84,7 +84,7 @@ const validationSchema = yup.object({
     .min(8, "Password must be at least 8 characters")
     .matches(
       /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/,
-      "Password must contain at least one uppercase letter, one lowercase letter, and one number"
+      "Password must contain at least one uppercase letter, one lowercase letter, and one number",
     ),
   maxLengthInput: yup.string().max(20, "Maximum 20 characters allowed"),
   numberInput: yup
diff --git a/app/src/components/inputs/input-field/CodeInputField.tsx b/app/src/components/inputs/input-field/CodeInputField.tsx
index daf6c368..929f83f9 100644
--- a/app/src/components/inputs/input-field/CodeInputField.tsx
+++ b/app/src/components/inputs/input-field/CodeInputField.tsx
@@ -32,7 +32,7 @@ interface CodeInputFieldProps {
 function CodeInputField({ code, setCode, ...rest }: CodeInputFieldProps) {
   const handleChange = (
     e: React.ChangeEvent<HTMLInputElement>,
-    index: number
+    index: number,
   ) => {
     const newCode = [...code];
     newCode[index] = e.target.value.slice(0, 1);
diff --git a/app/src/components/inputs/input-field/InputField.test.tsx b/app/src/components/inputs/input-field/InputField.test.tsx
index 86d3155d..c177406b 100644
--- a/app/src/components/inputs/input-field/InputField.test.tsx
+++ b/app/src/components/inputs/input-field/InputField.test.tsx
@@ -21,7 +21,7 @@ describe("InputField", () => {
         register={mockRegister}
         error={undefined}
         type={type}
-      />
+      />,
     );
 
     const input = screen.getByLabelText(label);
@@ -37,7 +37,7 @@ describe("InputField", () => {
         id={id}
         register={mockRegister}
         error={undefined}
-      />
+      />,
     );
 
     expect(mockRegister).toHaveBeenCalledWith(id);
@@ -50,7 +50,7 @@ describe("InputField", () => {
         id={id}
         register={mockRegister}
         error={errorMessage}
-      />
+      />,
     );
 
     expect(screen.getByText(errorMessage)).toBeInTheDocument();
@@ -63,7 +63,7 @@ describe("InputField", () => {
         id={id}
         register={mockRegister}
         error={undefined}
-      />
+      />,
     );
 
     const input = screen.getByLabelText(label);
@@ -79,7 +79,7 @@ describe("InputField", () => {
         register={mockRegister}
         error={undefined}
         placeholder={placeholder}
-      />
+      />,
     );
 
     const input = screen.getByLabelText(label);
diff --git a/app/src/components/inputs/radio-input/RadioInput.test.tsx b/app/src/components/inputs/radio-input/RadioInput.test.tsx
index 139e442f..85a1b20c 100644
--- a/app/src/components/inputs/radio-input/RadioInput.test.tsx
+++ b/app/src/components/inputs/radio-input/RadioInput.test.tsx
@@ -1,6 +1,6 @@
 import { RadioInputProps } from "@components/inputs/radio-input/RadioInput";
 import { fireEvent, render, screen } from "@testing-library/react";
-import * as update from "@features/privacy-settings/service/changeSettings";
+import * as update from "@features/privacy-settings/service/apiChangeSettings";
 import SettingsUpdate from "@components/side-bar/settings/SettingsUpdate";
 import renderWithStore from "@tests/test-utils";
 
diff --git a/app/src/components/inputs/radio-input/RadioInput.tsx b/app/src/components/inputs/radio-input/RadioInput.tsx
index c86b2f47..c28c8a01 100644
--- a/app/src/components/inputs/radio-input/RadioInput.tsx
+++ b/app/src/components/inputs/radio-input/RadioInput.tsx
@@ -37,6 +37,7 @@ interface RadioInputProps {
   state?: string;
   data: RadioInputInterface;
   updateFnType: StatusType;
+  type?: 'channel' | 'group';
 }
 
 const StyledForm = styled.div`
@@ -103,7 +104,7 @@ function RadioInput({ state, data, updateFnType }: RadioInputProps) {
     dispatch(updateFn(payload));
   }
 
-  let selectedValue = watch(data.id);
+  const selectedValue = watch(data.id);
 
   useEffect(() => {
     const payload = { key: data.id, value: selectedValue };
diff --git a/app/src/components/protected-route/ProtectedRoute.test.tsx b/app/src/components/protected-route/ProtectedRoute.test.tsx
index 51ac0e02..7878231d 100644
--- a/app/src/components/protected-route/ProtectedRoute.test.tsx
+++ b/app/src/components/protected-route/ProtectedRoute.test.tsx
@@ -20,7 +20,7 @@ describe("ProtectedRoute", () => {
     render(
       <ProtectedRoute>
         <MockChildComponent />
-      </ProtectedRoute>
+      </ProtectedRoute>,
     );
 
     const protectedContent = screen.getByText(/protected content/i);
@@ -33,7 +33,7 @@ describe("ProtectedRoute", () => {
     render(
       <ProtectedRoute>
         <MockChildComponent />
-      </ProtectedRoute>
+      </ProtectedRoute>,
     );
 
     const protectedContent = screen.queryByText(/protected content/i);
diff --git a/app/src/components/protected-route/ProtectedRoute.tsx b/app/src/components/protected-route/ProtectedRoute.tsx
index ef59fb17..f9dd66ae 100644
--- a/app/src/components/protected-route/ProtectedRoute.tsx
+++ b/app/src/components/protected-route/ProtectedRoute.tsx
@@ -1,13 +1,19 @@
 import { ReactNode, useEffect } from "react";
-import { useNavigate } from "react-router-dom";
+import { Navigate, useNavigate } from "react-router-dom";
 
 import { useAuthStatus } from "@features/authentication/login/hooks/useAuthStatus";
 
 type prortectedRouteType = {
   children: ReactNode;
+  allowedRoles: string[];
+  userRole: string;
 };
 
-function ProtectedRoute({ children }: prortectedRouteType) {
+function ProtectedRoute({
+  children,
+  allowedRoles,
+  userRole
+}: prortectedRouteType) {
   const navigate = useNavigate();
   const { isAuth, isPending } = useAuthStatus();
 
@@ -17,7 +23,12 @@ function ProtectedRoute({ children }: prortectedRouteType) {
     }
   }, [navigate, isAuth, isPending]);
 
-  if (isAuth) return children;
+  if (isAuth)
+    return allowedRoles.includes(userRole) ? (
+      children
+    ) : (
+      <Navigate to="/unauthorized" />
+    );
   else return null;
 }
 
diff --git a/app/src/components/side-bar/SideBar.test.tsx b/app/src/components/side-bar/SideBar.test.tsx
index 9ba25390..d53c4060 100644
--- a/app/src/components/side-bar/SideBar.test.tsx
+++ b/app/src/components/side-bar/SideBar.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from "@testing-library/react";
-import * as update from "@features/privacy-settings/service/changeSettings";
+import * as update from "@features/privacy-settings/service/apiChangeSettings";
 import renderWithStore from "@tests/test-utils";
 import SideBar from "./SideBar";
 import { privacySettingsRows, settingsRows } from "@data/sideBar";
@@ -88,10 +88,10 @@ describe("Sidebar", () => {
     expect(screen.getByText("Who can see my stories?")).toBeInTheDocument();
     expect(screen.getByText("Who can see my last seen?")).toBeInTheDocument();
     expect(
-      screen.getByText("Who can see my profile photo?"),
+      screen.getByText("Who can see my profile photo?")
     ).toBeInTheDocument();
     expect(
-      screen.getByText("Who can add me to group chats?"),
+      screen.getByText("Who can add me to group chats?")
     ).toBeInTheDocument();
     expect(screen.getByText("Who can add me to channels?")).toBeInTheDocument();
   });
diff --git a/app/src/components/side-bar/SideBar.tsx b/app/src/components/side-bar/SideBar.tsx
index 55ba6f4b..fca3e253 100644
--- a/app/src/components/side-bar/SideBar.tsx
+++ b/app/src/components/side-bar/SideBar.tsx
@@ -17,10 +17,22 @@ import ChatList from "@features/chats/ChatsList";
 import { useAppSelector } from "@hooks/useGlobalState";
 import BlockList from "@features/privacy-settings/BlockList";
 import Devices from "@features/devices/Devices";
+import NewGroup from "@features/groups/NewGroup.js";
+import { SidebarContext } from "./SideBarContext.js";
+import GroupInfo from "@features/groups/GroupInfo.js";
+import EditGroupInfo from "@features/groups/EditGroupInfo.js";
+import GroupType from "@features/groups/GroupType.js";
+import AddNewGroupMembers from "./groups/AddNewGroupMembers.js";
+import AddMoreMembers from "./groups/AddMoreMembers.js";
+import Admins from "@features/groups/Admins.js";
+import AddAdmins from "./groups/AddAdmins.js";
+import Members from "@features/groups/Members.js";
+import Permissions from "@features/groups/Permissions.js";
 
 interface SideBarProps {
   rows?: SideBarRowProps[];
   data?: RadioInputProps;
+  type?: "channel" | "group";
 }
 
 const fadeIn = keyframes`
@@ -43,6 +55,7 @@ const StyledSidebar = styled.aside<{ $isExiting: boolean }>`
   flex-direction: column;
 
   border-right: 1px solid var(--color-border);
+  z-index: 100;
 
   animation: ${({ $isExiting }) => ($isExiting ? fadeOut : fadeIn)} 0.1s;
   animation: ${({ $isExiting }) => ($isExiting ? fadeOut : fadeIn)} 0.1s
@@ -62,37 +75,110 @@ const StyledSidebar = styled.aside<{ $isExiting: boolean }>`
   }
 `;
 
-const sideBarMap: { [key: string]: (props: SideBarProps) => React.ReactNode } =
-  {
-    Chats: () => (
-      <ChatsSideBar>
-        <ChatList />
-      </ChatsSideBar>
-    ),
-    Contacts: () => <ContactsSideBar />,
-    Settings: (props) => (
-      <SettingsSideBar rows={props.rows || []}>
-        <ProfilePicture />
-        <ProfileInfo />
-      </SettingsSideBar>
-    ),
-    Privacy: (props) => <SettingsSideBar rows={props.rows || []} />,
-    SettingsUpdate: (props) => (
-      <SettingsSideBar rows={[]}>
-        {props.data && <SettingsUpdate {...props.data} />}
-      </SettingsSideBar>
-    ),
-    ProfileUpdate: () => <ProfileSettings />,
-    blockList: () => (
-      <SettingsSideBar rows={[]}>
-        <BlockList />
-      </SettingsSideBar>
-    ),
-    Devices: () => <SettingsSideBar rows={[]} children={<Devices />} />,
-  };
-
-function Sidebar() {
-  const { page, props } = useAppSelector((state) => state.sideBarData);
+const sideBarMap: {
+  [key: string]: (
+    props: SideBarProps,
+    type: "left" | "right"
+  ) => React.ReactNode;
+} = {
+  Chats: () => (
+    <ChatsSideBar>
+      <ChatList />
+    </ChatsSideBar>
+  ),
+  Contacts: () => <ContactsSideBar />,
+  Settings: (props) => (
+    <SettingsSideBar rows={props.rows || []}>
+      <ProfilePicture />
+      <ProfileInfo />
+    </SettingsSideBar>
+  ),
+  Privacy: (props) => <SettingsSideBar rows={props.rows || []} />,
+  SettingsUpdate: (props) => (
+    <SettingsSideBar rows={[]}>
+      {props.data && <SettingsUpdate {...props.data} />}
+    </SettingsSideBar>
+  ),
+  ProfileUpdate: () => <ProfileSettings />,
+  blockList: () => (
+    <SettingsSideBar rows={[]}>
+      <BlockList />
+    </SettingsSideBar>
+  ),
+  Devices: () => <SettingsSideBar rows={[]} children={<Devices />} />,
+  AddMembers: () => (
+    <SettingsSideBar rows={[]}>
+      <AddNewGroupMembers />
+    </SettingsSideBar>
+  ),
+  NewGroup: () => (
+    <SettingsSideBar rows={[]}>
+      <NewGroup />
+    </SettingsSideBar>
+  ),
+  NewChannel: () => (
+    <SettingsSideBar rows={[]}>
+      <NewGroup />
+    </SettingsSideBar>
+  ),
+  GroupInfo: () => (
+    <SettingsSideBar rows={[]}>
+      <GroupInfo />
+    </SettingsSideBar>
+  ),
+  EditGroupInfo: () => (
+    <SettingsSideBar rows={[]}>
+      <EditGroupInfo />
+    </SettingsSideBar>
+  ),
+  GroupType: () => (
+    <SettingsSideBar rows={[]}>
+      <GroupType />
+    </SettingsSideBar>
+  ),
+  AddMoreMembers: () => (
+    <SettingsSideBar rows={[]}>
+      <AddMoreMembers />
+    </SettingsSideBar>
+  ),
+  Admins: () => (
+    <SettingsSideBar rows={[]}>
+      <Admins />
+    </SettingsSideBar>
+  ),
+  AddAdmins: () => (
+    <SettingsSideBar rows={[]}>
+      <AddAdmins />
+    </SettingsSideBar>
+  ),
+  Members: () => (
+    <SettingsSideBar rows={[]}>
+      <Members />
+    </SettingsSideBar>
+  ),
+  Permissions: () => (
+    <SettingsSideBar rows={[]}>
+      <Permissions />
+    </SettingsSideBar>
+  ),
+  ChannelInfo: () => (
+    <SettingsSideBar rows={[]}>
+      <GroupInfo />
+    </SettingsSideBar>
+  ),
+  EditChannelInfo: () => (
+    <SettingsSideBar rows={[]}>
+      <EditGroupInfo />
+    </SettingsSideBar>
+  ),
+};
+
+function Sidebar({ type }: { type: "left" | "right" }) {
+  const { page, props } = useAppSelector((state) =>
+    type === "left"
+      ? state.sideBarData.leftSideBar
+      : state.sideBarData.rightSideBar
+  );
   const [currentPage, setCurrentPage] = useState(page);
   const [isExiting, setIsExiting] = useState(false);
 
@@ -113,9 +199,11 @@ function Sidebar() {
   const pageString = pagesMap[currentPage] || "Settings";
 
   return (
-    <StyledSidebar $isExiting={isExiting} data-testid="side-bar">
-      {sideBarMap[pageString](props || {})}
-    </StyledSidebar>
+    <SidebarContext.Provider value={type}>
+      <StyledSidebar $isExiting={isExiting} data-testid={`${type}-side-bar`}>
+        {sideBarMap[pageString](props!, type)}
+      </StyledSidebar>
+    </SidebarContext.Provider>
   );
 }
 
diff --git a/app/src/components/side-bar/SideBarContext.tsx b/app/src/components/side-bar/SideBarContext.tsx
new file mode 100644
index 00000000..d25f857b
--- /dev/null
+++ b/app/src/components/side-bar/SideBarContext.tsx
@@ -0,0 +1,13 @@
+import { createContext, useContext } from "react";
+
+type SidebarType = "left" | "right";
+
+export const SidebarContext = createContext<SidebarType | undefined>(undefined);
+
+export const useSidebarType = () => {
+  const context = useContext(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebarType must be used within a SidebarProvider");
+  }
+  return context;
+};
diff --git a/app/src/components/side-bar/chats/ChatsSideBar.tsx b/app/src/components/side-bar/chats/ChatsSideBar.tsx
index ef74ef95..29d4788c 100644
--- a/app/src/components/side-bar/chats/ChatsSideBar.tsx
+++ b/app/src/components/side-bar/chats/ChatsSideBar.tsx
@@ -1,7 +1,9 @@
 import styled from "styled-components";
-import CircleIcon from "../../CircleIcon";
 import ChatsSidebarHeader from "./ChatsSideBarHeader";
-import StartNewChat from "./StartNewChat";
+import StartNewChat from "@features/chats/StartNewChat";
+import AddStory from "@features/stories/components/AddStory";
+import StoryListContainer from "@features/stories/components/StoryListContainer";
+import TabedSearch from "@features/search/components/TabedSearch";
 
 interface ChatsSideBarProps {
   children?: React.ReactNode;
@@ -9,29 +11,41 @@ interface ChatsSideBarProps {
 }
 
 const StyledChatsSideBar = styled.div`
-  height: 100vh;
+  height: 100dvh;
+  display: flex;
+  flex-direction: column;
   color: var(--color-icon-secondary);
-
   background-color: var(--color-background);
-  overflow-y: auto;
-  position: relative;
+  overflow: hidden;
+`;
+
+const ButtonsContainer = styled.div`
+  position: sticky;
+  bottom: 1rem;
+  width: 3.3rem;
+  left: 100%;
+  display: flex;
+  justify-content: space-around;
+  align-items: flex-end;
+  flex-direction: column-reverse;
+  gap: 4rem;
+  background-color: transparent;
+  z-index: 1;
 `;
+
 function ChatsSideBar({ children }: ChatsSideBarProps) {
   return (
     <StyledChatsSideBar>
       <ChatsSidebarHeader />
-      {children}
-      <CircleIcon
-        data-testid="add-story-icon"
-        $icon="AddStory"
-        $right={1}
-        $bottom={1}
-        $size={3.3}
-        $padding={0.5}
-        $color="white"
-        $bgColor="var(--accent-color)"
-      />
-      <StartNewChat />
+      <div style={{ position: "relative", height: "100%" }}>
+        <StoryListContainer />
+        <div style={{ flex: 1, height: "calc(100% - 48px)" }}>{children}</div>
+        <ButtonsContainer data-testid="button-container">
+          <AddStory data-testid="add-story-button" />
+          <StartNewChat data-testid="start-new-chat-button" />
+        </ButtonsContainer>
+        <TabedSearch />
+      </div>
     </StyledChatsSideBar>
   );
 }
diff --git a/app/src/components/side-bar/chats/ChatsSideBarHeader.tsx b/app/src/components/side-bar/chats/ChatsSideBarHeader.tsx
index 8cd3a43c..a5945e49 100644
--- a/app/src/components/side-bar/chats/ChatsSideBarHeader.tsx
+++ b/app/src/components/side-bar/chats/ChatsSideBarHeader.tsx
@@ -1,29 +1,24 @@
 import styled from "styled-components";
-
 import SideBarToolsButton from "./SideBarToolsButton";
 import SearchBar from "./SearchBar";
 
-const StyledHeader = styled.header`
+const Header = styled.header`
   background: var(--color-background);
-  
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-around;
-  
-  padding: 0.375rem 0.8125rem 0.5rem 1.3rem;
+  padding: 0.375rem 0.8125rem 0.5rem 1.295rem;
+  position: relative;
   height: 4rem;
-  
-  position: sticky;
-  top: 0;
 `;
 
 function ChatsSidebarHeader() {
   return (
-    <StyledHeader data-testid="chatlist-header">
+    <Header data-testid="chatlist-header">
       <SideBarToolsButton />
       <SearchBar />
-    </StyledHeader>
+    </Header>
   );
 }
 
diff --git a/app/src/components/side-bar/chats/SearchBar.tsx b/app/src/components/side-bar/chats/SearchBar.tsx
index 42822810..72c33fc8 100644
--- a/app/src/components/side-bar/chats/SearchBar.tsx
+++ b/app/src/components/side-bar/chats/SearchBar.tsx
@@ -1,24 +1,31 @@
+import { getIcon } from "@data/icons";
+import { setSearchTerm } from "@state/messages/global-search";
+import { RootState } from "@state/store";
+import { useDispatch, useSelector } from "react-redux";
 import styled from "styled-components";
-import { SearchOutlined } from "@mui/icons-material";
 
 const StyledSearchBar = styled.div`
   margin-left: 1rem;
   position: relative;
+  width: 100%;
+
   &:focus-within > svg {
     color: var(--color-search-border);
   }
 `;
 
-const StyledSearchIcon = styled(SearchOutlined)`
-  position: absolute;
-  left: 0.5rem;
-  top: 50%;
-  transform: translateY(-50%);
-  color: var(--color-text-secondary);
-  font-size: 1.2rem;
+const Icon = styled.div`
+  > svg {
+    position: absolute;
+    left: 0.5rem;
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--color-text-secondary);
+    font-size: 1.2rem;
+  }
 `;
 
-const StyledInput = styled.input`
+const Input = styled.input`
   background-color: var(--color-chat-hover);
   border: 1px solid var(--pattern-color);
   border-radius: var(--border-radius-searchbar);
@@ -39,10 +46,23 @@ const StyledInput = styled.input`
 `;
 
 function SearchBar() {
+  const dispatch = useDispatch();
+  const { searchTerm } = useSelector((state: RootState) => state.globalSearch);
+
+  const onSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+    dispatch(setSearchTerm(e.target.value));
+  };
+
   return (
     <StyledSearchBar data-testid="general-search-bar">
-      <StyledInput type="text" placeholder="Search" data-set="general-search" />
-      <StyledSearchIcon data-testid="general-serach-icon" />
+      <Input
+        type="text"
+        placeholder="Search"
+        data-testid="general-search"
+        onChange={onSearch}
+        value={searchTerm}
+      />
+      <Icon data-testid="general-serach-icon">{getIcon("Search")}</Icon>
     </StyledSearchBar>
   );
 }
diff --git a/app/src/components/side-bar/chats/SideBarMenuItem.tsx b/app/src/components/side-bar/chats/SideBarMenuItem.tsx
index 69031f56..fb9fdbd8 100644
--- a/app/src/components/side-bar/chats/SideBarMenuItem.tsx
+++ b/app/src/components/side-bar/chats/SideBarMenuItem.tsx
@@ -8,7 +8,7 @@ interface SideBarMenuItemProps {
   onClick?: () => void;
 }
 
-const StyledLi = styled.li`
+const StyledMenuItem = styled.li`
   display: flex;
   justify-content: start;
   align-items: center;
@@ -31,11 +31,11 @@ function SideBarMenuItem({
   iconMapValue,
 }: SideBarMenuItemProps) {
   return (
-    <StyledLi onClick={onClick}>
+    <StyledMenuItem onClick={onClick} data-testid={`side-bar-menu-${title}`}>
       {getIcon(iconMapValue)}
       {title}
       {children}
-    </StyledLi>
+    </StyledMenuItem>
   );
 }
 export type { SideBarMenuItemProps };
diff --git a/app/src/components/side-bar/chats/SideBarToolsButton.tsx b/app/src/components/side-bar/chats/SideBarToolsButton.tsx
index cf348ebb..11c95e25 100644
--- a/app/src/components/side-bar/chats/SideBarToolsButton.tsx
+++ b/app/src/components/side-bar/chats/SideBarToolsButton.tsx
@@ -1,6 +1,5 @@
 import { useState } from "react";
 import styled from "styled-components";
-import { MenuOutlined } from "@mui/icons-material";
 import ThemeToggle from "./theme-toggle/ThemeToggle";
 import { useAppDispatch } from "@hooks/useGlobalState";
 import { toggleTheme } from "@state/theme/theme";
@@ -8,14 +7,21 @@ import SideBarMenuItem from "./SideBarMenuItem";
 import { updateSideBarView } from "@state/side-bar/sideBar";
 import { sideBarPages } from "@data/sideBar";
 import { useMouseLeave } from "@hooks/useMouseLeave";
+import { getIcon } from "@data/icons";
+import { useSidebarType } from "../SideBarContext";
+import { RootState } from "@state/store";
+import { clearSearch } from "@state/messages/global-search";
+import { useSelector } from "react-redux";
 
-const StyledToolsIcon = styled(MenuOutlined)`
-  color: var(--color-icon-secondary);
-  border-radius: var(--border-radius-modal);
-  padding: 0.3rem;
-  &:hover {
-    cursor: pointer;
-    background-color: var(--color-background-compact-menu-hover);
+const ToolsIcon = styled.div`
+  > svg {
+    color: var(--color-icon-secondary);
+    border-radius: var(--border-radius-modal);
+    padding: 0.3rem;
+    &:hover {
+      cursor: pointer;
+      background-color: var(--color-background-compact-menu-hover);
+    }
   }
 `;
 
@@ -34,22 +40,40 @@ const StyledList = styled.ul<{ $isOpened?: boolean }>`
   box-shadow: 0 0.25rem 0.5rem 0.125rem var(--color-default-shadow);
   border-radius: var(--border-radius-default);
   visibility: ${({ $isOpened }) => ($isOpened ? "visible" : "hidden")};
+
+  z-index: 2;
 `;
 
 function SettingsToolbar() {
+  const { searchTerm } = useSelector((state: RootState) => state.globalSearch);
+  const isSearching = searchTerm.length > 0;
   const [isOpened, setIsOpened] = useState(false);
   const dispatch = useAppDispatch();
   const ref = useMouseLeave(() => setIsOpened(false), false);
+
   const handleOpenSettings = () => {
     setIsOpened((prevState) => !prevState);
   };
+
+  const handleResetSearch = () => {
+    dispatch(clearSearch());
+  };
+
+
+  const type = useSidebarType();
+
   return (
     <>
-      <StyledToolsIcon
-        onClick={handleOpenSettings}
-        fontSize="large"
+      <ToolsIcon
+        onClick={() =>
+          isSearching ? handleResetSearch() : handleOpenSettings()
+        }
         data-testid="menu-items-icon"
-      />
+      >
+        {isSearching
+          ? getIcon("Close", { fontSize: "large", sx: { fontSize: "2rem" } })
+          : getIcon("Menu")}
+      </ToolsIcon>
       {isOpened && (
         <StyledList
           $isOpened={isOpened}
@@ -63,7 +87,7 @@ function SettingsToolbar() {
               dispatch(
                 updateSideBarView({
                   redirect: sideBarPages.CONTACTS,
-                  data: undefined,
+                  data: { type },
                 })
               )
             }
@@ -76,7 +100,7 @@ function SettingsToolbar() {
               dispatch(
                 updateSideBarView({
                   redirect: sideBarPages.SETTINGS,
-                  data: undefined,
+                  data: { type },
                 })
               )
             }
diff --git a/app/src/components/side-bar/chats/theme-toggle/ThemeToggle.tsx b/app/src/components/side-bar/chats/theme-toggle/ThemeToggle.tsx
index ab0b64b9..027d8e2e 100644
--- a/app/src/components/side-bar/chats/theme-toggle/ThemeToggle.tsx
+++ b/app/src/components/side-bar/chats/theme-toggle/ThemeToggle.tsx
@@ -1,6 +1,7 @@
 import styled, { css } from "styled-components";
 import { Theme, toggleTheme } from "@state/theme/theme";
 import { useAppDispatch, useAppSelector } from "@hooks/useGlobalState";
+import { getIcon } from "@data/icons";
 
 const Switch = styled.label`
   position: relative;
@@ -26,7 +27,6 @@ const Slider = styled.span<{ $theme?: Theme }>`
   border-radius: 10px;
   padding: 4px;
   background-color: var(--accent-color);
-  background-color: var(--accent-color);
 
   ${({ $theme }) =>
     $theme === Theme.LIGHT &&
@@ -41,21 +41,15 @@ const Slider = styled.span<{ $theme?: Theme }>`
     left: -7px;
     bottom: -3px;
     transition: 0.2s;
-    transition: 0.2s;
     border-radius: 50%;
     background-color: var(--color-background);
     border: 2px solid;
     border-color: var(--accent-color);
 
-    border: 2px solid;
-    border-color: var(--accent-color);
-
     ${({ $theme }) =>
-      $theme === Theme.LIGHT &&
       $theme === Theme.LIGHT &&
       css`
         border-color: var(--pattern-color);
-        border-color: var(--pattern-color);
       `};
   }
 
@@ -63,22 +57,52 @@ const Slider = styled.span<{ $theme?: Theme }>`
     transform: translateX(25px);
   }
 `;
-function ThemeToggle() {
+const Container = styled.li<{ $theme?: Theme }>`
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.3rem;
+  height: 2.4rem;
+  width: 2.4rem;
+  justify-content: center;
+  background-color: var(--accent-color);
+
+  border-radius: 50%;
+  cursor: pointer;
+  ${({ $theme }) =>
+    $theme === Theme.LIGHT &&
+    css`
+      background-color: var(--pattern-color);
+    `};
+`;
+function ThemeToggle({ isAdmin = false }: { isAdmin?: boolean }) {
   const currentTheme = useAppSelector((state) => state.theme.value);
   const dispatch = useAppDispatch();
   const handleChange = () => {
     dispatch(toggleTheme());
   };
   return (
-    <Switch data-testid="toggle-mode-label">
-      <Input
-        data-testid="toggle-mode-checkbox"
-        type="checkbox"
-        checked={currentTheme === Theme.DARK}
-        onChange={handleChange}
-      />
-      <Slider $theme={currentTheme} data-testid="toggle-mode-slider" />
-    </Switch>
+    <>
+      {isAdmin ? (
+        <Container
+          $theme={currentTheme}
+          onClick={handleChange}
+          data-testid="toggle-mode-button"
+        >
+          {currentTheme === Theme.LIGHT ? getIcon("NightMode") : getIcon("Sun")}
+        </Container>
+      ) : (
+        <Switch data-testid="toggle-mode-label">
+          <Input
+            data-testid="toggle-mode-checkbox"
+            type="checkbox"
+            checked={currentTheme === Theme.DARK}
+            onChange={handleChange}
+          />
+          <Slider $theme={currentTheme} data-testid="toggle-mode-slider" />
+        </Switch>
+      )}
+    </>
   );
 }
 
diff --git a/app/src/components/side-bar/chats/theme-toggle/ToggleMode.test.tsx b/app/src/components/side-bar/chats/theme-toggle/ToggleMode.test.tsx
index 40824000..f8ae4351 100644
--- a/app/src/components/side-bar/chats/theme-toggle/ToggleMode.test.tsx
+++ b/app/src/components/side-bar/chats/theme-toggle/ToggleMode.test.tsx
@@ -8,7 +8,7 @@ describe("ThemeToggle Component", () => {
 
     const slider = screen.getByTestId("toggle-mode-slider");
     const checkbox = screen.getByTestId(
-      "toggle-mode-checkbox"
+      "toggle-mode-checkbox",
     ) as HTMLInputElement;
 
     expect(checkbox.checked).toBe(true);
@@ -19,7 +19,7 @@ describe("ThemeToggle Component", () => {
     render(renderWithStore(<ThemeToggle />));
 
     const checkbox = screen.getByTestId(
-      "toggle-mode-checkbox"
+      "toggle-mode-checkbox",
     ) as HTMLInputElement;
 
     fireEvent.click(checkbox);
diff --git a/app/src/components/side-bar/groups/AddAdmins.tsx b/app/src/components/side-bar/groups/AddAdmins.tsx
new file mode 100644
index 00000000..5ee62cc2
--- /dev/null
+++ b/app/src/components/side-bar/groups/AddAdmins.tsx
@@ -0,0 +1,60 @@
+import { useDispatch } from "react-redux";
+import { useParams } from "react-router-dom";
+import styled from "styled-components";
+
+import AddMembers from "./AddMembers";
+import AddMembersButton from "./AddMembersButton";
+
+import { updateSideBarView } from "@state/side-bar/sideBar";
+
+import { sideBarPages } from "types/sideBar";
+
+import { useGroupInfo } from "@features/groups/hooks/useGroupInfo";
+import { useAppSelector } from "@hooks/useGlobalState";
+import { useSocket } from "@hooks/useSocket";
+import { clearSelectedUsers } from "@state/groups/selectedUsers";
+
+const Container = styled.div`
+  width: 100%;
+  background-color: var(--color-background);
+`;
+
+function AddAdmins() {
+  const { chatId } = useParams<{ chatId: string }>();
+
+  const { groupMembers, isPending } = useGroupInfo();
+
+  const selectedUsers = useAppSelector((state) => state.selectedUsers);
+  const { props } = useAppSelector((state) => state.sideBarData.rightSideBar);
+
+  const dispatch = useDispatch();
+  const { addAdmins } = useSocket();
+
+  function handleClick() {
+    addAdmins({
+      chatId: chatId!,
+      members: selectedUsers.map((user) => user._id),
+    });
+    const redirect = sideBarPages.ADMINS;
+    dispatch(
+      updateSideBarView({
+        redirect,
+        data: { type: "right", backView: props?.prevBackView! },
+      })
+    );
+    dispatch(clearSelectedUsers());
+  }
+
+  if (isPending) return;
+
+  const normalMembers = groupMembers?.filter((user) => user.role === "member");
+
+  return (
+    <Container>
+      <AddMembers users={normalMembers!} />
+      {!!selectedUsers.length && <AddMembersButton onClick={handleClick} />}
+    </Container>
+  );
+}
+
+export default AddAdmins;
diff --git a/app/src/components/side-bar/groups/AddGroupMembers.tsx b/app/src/components/side-bar/groups/AddGroupMembers.tsx
new file mode 100644
index 00000000..c85c4c95
--- /dev/null
+++ b/app/src/components/side-bar/groups/AddGroupMembers.tsx
@@ -0,0 +1,94 @@
+import { useState } from "react";
+import styled from "styled-components";
+
+import CircleIcon from "@components/CircleIcon";
+import UsersList from "@components/UsersList";
+
+import { sideBarPages } from "types/sideBar";
+import { updateSideBarView } from "@state/side-bar/sideBar";
+
+import { useAppDispatch } from "@hooks/useGlobalState";
+import { useAllUsers } from "@features/groups/hooks/useAllUsers";
+import { useUser } from "@features/authentication/login/hooks/useUser";
+import { useSidebarType } from "../SideBarContext";
+
+const Container = styled.div`
+  width: 100%;
+  background-color: var(--color-background);
+`;
+
+const SearchInput = styled.input`
+  width: 100%;
+  padding: 1rem;
+  font-size: 0.9rem;
+  caret-color: var(--accent-color);
+  color: var(--color-text);
+  outline: none;
+  border: none;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
+`;
+
+const StyledUsersList = styled.div`
+  width: 100%;
+  max-height: calc(100vh - 7.5rem);
+  overflow-y: scroll;
+  position: relative;
+
+  background-color: var(--color-background);
+`;
+
+export default function AddGroupMembers({
+  type,
+}: {
+  type: "group" | "channel";
+}) {
+  const [searchQuery, setSearchQuery] = useState<string>("");
+  const { users, isPending: isPendenigAllUsers } = useAllUsers();
+  const { user: currentUser, isPending: isPendingCurrentUser } = useUser();
+  const dispatch = useAppDispatch();
+  const sideBarType = useSidebarType();
+
+  const filteredUsers = users?.filter(
+    (user) =>
+      user._id !== currentUser._id &&
+      `${user.screenFirstName} ${user.screenLastName}`
+        .toLowerCase()
+        .includes(searchQuery.toLowerCase())
+  );
+
+  if (isPendenigAllUsers || isPendingCurrentUser) return null;
+
+  function handleClick() {
+    const redirect =
+      type === "channel" ? sideBarPages.NEW_CHANNEL : sideBarPages.NEW_GROUP;
+    dispatch(updateSideBarView({ redirect, data: { type: sideBarType } }));
+  }
+
+  return (
+    <Container>
+      <SearchInput
+        type="text"
+        placeholder="Add people..."
+        value={searchQuery}
+        onChange={(e) => setSearchQuery(e.target.value)}
+      />
+
+      <StyledUsersList>
+        <UsersList users={filteredUsers!} view="update" />
+      </StyledUsersList>
+
+      <CircleIcon
+        data-testid="confirm-add-members-button"
+        $icon="ArrowForward"
+        $right={1}
+        $bottom={2}
+        $size={3.3}
+        $padding={0.5}
+        $color="white"
+        $bgColor="var(--accent-color)"
+        $opacity={0.95}
+        onClick={handleClick}
+      />
+    </Container>
+  );
+}
diff --git a/app/src/components/side-bar/groups/AddMembers.tsx b/app/src/components/side-bar/groups/AddMembers.tsx
new file mode 100644
index 00000000..6616cd14
--- /dev/null
+++ b/app/src/components/side-bar/groups/AddMembers.tsx
@@ -0,0 +1,48 @@
+import { useState } from "react";
+import styled from "styled-components";
+
+import UsersList from "@components/UsersList";
+import { UserType } from "@features/groups/hooks/useAllUsers";
+import SearchInput from "./SearchInput";
+import { useAppSelector } from "@hooks/useGlobalState";
+
+const StyledUsersList = styled.div`
+  width: 100%;
+  max-height: calc(100vh - 7.5rem);
+  overflow-y: scroll;
+  position: relative;
+
+  background-color: var(--color-background);
+`;
+
+function AddMembers({ users }: { users: UserType[] }) {
+  const [searchQuery, setSearchQuery] = useState<string>("");
+  const currUser = useAppSelector((state) => state.user.userInfo);
+
+  const filteredUsers = users?.filter(
+    (user) =>
+      currUser.id !== user._id &&
+      `${user.screenFirstName} ${user.screenLastName}`
+        .toLowerCase()
+        .includes(searchQuery.toLowerCase())
+  );
+
+  return (
+    <>
+      <SearchInput
+        searchQuery={searchQuery}
+        setSearchQuery={setSearchQuery}
+        placeholder="Add people..."
+      />
+      <StyledUsersList data-testid="users-container">
+        <UsersList
+          data-testid="users-list"
+          users={filteredUsers!}
+          view="update"
+        />
+      </StyledUsersList>
+    </>
+  );
+}
+
+export default AddMembers;
diff --git a/app/src/components/side-bar/groups/AddMembersButton.tsx b/app/src/components/side-bar/groups/AddMembersButton.tsx
new file mode 100644
index 00000000..9a97ad00
--- /dev/null
+++ b/app/src/components/side-bar/groups/AddMembersButton.tsx
@@ -0,0 +1,20 @@
+import CircleIcon from "@components/CircleIcon";
+
+function AddMembersButton({ onClick }: { onClick: () => void }) {
+  return (
+    <CircleIcon
+      testid="add-members-button"
+      $icon="ArrowForward"
+      $right={1}
+      $bottom={2}
+      $size={3.3}
+      $padding={0.5}
+      $color="white"
+      $bgColor="var(--accent-color)"
+      $opacity={0.95}
+      onClick={onClick}
+    />
+  );
+}
+
+export default AddMembersButton;
diff --git a/app/src/components/side-bar/groups/AddMoreMembers.tsx b/app/src/components/side-bar/groups/AddMoreMembers.tsx
new file mode 100644
index 00000000..dbd24ca5
--- /dev/null
+++ b/app/src/components/side-bar/groups/AddMoreMembers.tsx
@@ -0,0 +1,59 @@
+import styled from "styled-components";
+import { useDispatch } from "react-redux";
+import { useParams } from "react-router-dom";
+
+import AddMembers from "./AddMembers";
+
+import { useGroupInfo } from "@features/groups/hooks/useGroupInfo";
+
+import { sideBarPages } from "types/sideBar";
+import { updateSideBarView } from "@state/side-bar/sideBar";
+import AddMembersButton from "./AddMembersButton";
+
+import { useAppSelector } from "@hooks/useGlobalState";
+import { useSocket } from "@hooks/useSocket";
+import { clearSelectedUsers } from "@state/groups/selectedUsers";
+
+const Container = styled.div`
+  width: 100%;
+  background-color: var(--color-background);
+`;
+
+function AddMoreMembers() {
+  const { chatId } = useParams<{ chatId: string }>();
+
+  const { groupMembers, isPending, chatType } = useGroupInfo();
+  const users = useAppSelector((state) => state.chats.members);
+  const selectedUsers = useAppSelector((state) => state.selectedUsers);
+  const { addGroupMembers } = useSocket();
+
+  const dispatch = useDispatch();
+
+  if (isPending) return;
+
+  function handleClick() {
+    addGroupMembers({
+      chatId: chatId!,
+      users: selectedUsers.map((user) => user._id),
+    });
+    const redirect =
+      chatType === "group"
+        ? sideBarPages.GROUP_INFO
+        : sideBarPages.CHANNEL_INFO;
+    dispatch(updateSideBarView({ redirect, data: { type: "right" } }));
+    dispatch(clearSelectedUsers());
+  }
+
+  const filteredUsers = users?.filter(
+    (user) => !groupMembers.some((member) => member._id === user._id)
+  );
+
+  return (
+    <Container>
+      <AddMembers users={filteredUsers!} />
+      {!!selectedUsers.length && <AddMembersButton onClick={handleClick} />}
+    </Container>
+  );
+}
+
+export default AddMoreMembers;
diff --git a/app/src/components/side-bar/groups/AddNewGroupMembers.tsx b/app/src/components/side-bar/groups/AddNewGroupMembers.tsx
new file mode 100644
index 00000000..37b0e34f
--- /dev/null
+++ b/app/src/components/side-bar/groups/AddNewGroupMembers.tsx
@@ -0,0 +1,45 @@
+import styled from "styled-components";
+
+import AddMembers from "./AddMembers";
+
+import { sideBarPages } from "types/sideBar";
+import { updateSideBarView } from "@state/side-bar/sideBar";
+
+import { useSidebarType } from "../SideBarContext";
+
+import { useAppDispatch, useAppSelector } from "@hooks/useGlobalState";
+import AddMembersButton from "./AddMembersButton";
+
+const Container = styled.div`
+  width: 100%;
+  background-color: var(--color-background);
+`;
+
+function AddNewGroupMembers() {
+  const sideBarType = useSidebarType();
+  const { props } = useAppSelector((state) =>
+    sideBarType === "left"
+      ? state.sideBarData.leftSideBar
+      : state.sideBarData.rightSideBar
+  );
+
+  const type = props?.view;
+  const users = useAppSelector((state) => state.chats.members);
+
+  const dispatch = useAppDispatch();
+
+  function handleClick() {
+    const redirect =
+      type === "channel" ? sideBarPages.NEW_CHANNEL : sideBarPages.NEW_GROUP;
+    dispatch(updateSideBarView({ redirect, data: { type: sideBarType } }));
+  }
+
+  return (
+    <Container>
+      <AddMembers users={users} />
+      <AddMembersButton onClick={handleClick} />
+    </Container>
+  );
+}
+
+export default AddNewGroupMembers;
diff --git a/app/src/components/side-bar/groups/SearchInput.tsx b/app/src/components/side-bar/groups/SearchInput.tsx
new file mode 100644
index 00000000..d442e14c
--- /dev/null
+++ b/app/src/components/side-bar/groups/SearchInput.tsx
@@ -0,0 +1,36 @@
+import styled from "styled-components";
+
+const StyledSearchInput = styled.input`
+  width: 100%;
+  padding: 1rem;
+  font-size: 0.9rem;
+  caret-color: var(--accent-color);
+  color: var(--color-text);
+  outline: none;
+  border: none;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
+`;
+
+type SearchInputProps = {
+  searchQuery: string;
+  setSearchQuery: React.Dispatch<React.SetStateAction<string>>;
+  placeholder?: string;
+};
+
+function SearchInput({
+  searchQuery,
+  setSearchQuery,
+  placeholder,
+}: SearchInputProps) {
+  return (
+    <StyledSearchInput
+      data-testid="search-input-users"
+      type="text"
+      placeholder={placeholder || "Search..."}
+      value={searchQuery}
+      onChange={(e) => setSearchQuery(e.target.value)}
+    />
+  );
+}
+
+export default SearchInput;
diff --git a/app/src/components/side-bar/settings/GroupInfoHeader.tsx b/app/src/components/side-bar/settings/GroupInfoHeader.tsx
new file mode 100644
index 00000000..fe356545
--- /dev/null
+++ b/app/src/components/side-bar/settings/GroupInfoHeader.tsx
@@ -0,0 +1,85 @@
+import styled from "styled-components";
+import { useAppDispatch, useAppSelector } from "@hooks/useGlobalState";
+
+import Heading from "@components/Heading";
+import Icon from "@components/Icon";
+
+import { getIcon } from "@data/icons";
+
+import { useSidebarType } from "../SideBarContext";
+import { sideBarPages } from "types/sideBar";
+import { updateSideBarView } from "@state/side-bar/sideBar";
+import BackArrow from "@components/BackArrow";
+import { useRightSideBarContext } from "@features/groups/contexts/RightSideBarProvider";
+import { useChat } from "@features/chats/hooks/useChat";
+
+const StyledSideBarHeader = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  padding: 1rem;
+
+  background-color: var(--color-background);
+`;
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+`;
+
+function GroupInfoHeader() {
+  const { chat, isPending } = useChat();
+
+  const type = useSidebarType();
+  const { setIsRightSideBarOpen } = useRightSideBarContext();
+
+  const { title } = useAppSelector((state) =>
+    type === "left"
+      ? state.sideBarData.leftSideBar
+      : state.sideBarData.rightSideBar
+  );
+
+  const dispatch = useAppDispatch();
+  if (!chat || isPending) return null;
+
+  function handleEdit() {
+    dispatch(
+      updateSideBarView({
+        redirect:
+          chat?.type === "group"
+            ? sideBarPages.EDIT_GROUP_INFO
+            : sideBarPages.EDIT_CHANNEL_INFO,
+        data: { type },
+      })
+    );
+  }
+
+  return (
+    <StyledSideBarHeader data-testid="group-info-header">
+      <Container>
+        {title === "Group Info" || title === "Channel Info" ? (
+          <Icon
+            data-testid="close-button"
+            onClick={() => setIsRightSideBarOpen(false)}
+          >
+            {getIcon("Close")}
+          </Icon>
+        ) : (
+          <BackArrow data-testid="back-arrow" />
+        )}
+        <Heading data-testid="group-settings-title" as={"h4"}>
+          {title}
+        </Heading>
+      </Container>
+      {(title === "Group Info" || title === "Channel Info") && (
+        <Icon data-testid="edit-button" onClick={handleEdit}>
+          {getIcon("Edit")}
+        </Icon>
+      )}
+    </StyledSideBarHeader>
+  );
+}
+
+export default GroupInfoHeader;
diff --git a/app/src/components/side-bar/settings/OptionsList.tsx b/app/src/components/side-bar/settings/OptionsList.tsx
index 4de7b4fe..d6ea940f 100644
--- a/app/src/components/side-bar/settings/OptionsList.tsx
+++ b/app/src/components/side-bar/settings/OptionsList.tsx
@@ -9,6 +9,7 @@ import {
   StatusType,
 } from "types/sideBar";
 import { statusMap } from "@data/sideBar";
+import { useSidebarType } from "../SideBarContext";
 
 const StyledOptionsList = styled.div`
   display: flex;
@@ -48,8 +49,13 @@ function getKey(
 }
 
 function OptionsList({ rows }: { rows: SideBarRowProps[] }) {
-  const { title } = useAppSelector((state) => state.sideBarData);
+  const type = useSidebarType();
 
+  const { title } = useAppSelector((state) =>
+    type === "left"
+      ? state.sideBarData.leftSideBar
+      : state.sideBarData.rightSideBar
+  );
   return (
     <>
       {rows.length > 0 && (
diff --git a/app/src/components/side-bar/settings/ProfilePicture.tsx b/app/src/components/side-bar/settings/ProfilePicture.tsx
index ec99f147..704ca34c 100644
--- a/app/src/components/side-bar/settings/ProfilePicture.tsx
+++ b/app/src/components/side-bar/settings/ProfilePicture.tsx
@@ -1,20 +1,37 @@
 import { STATIC_MEDIA_URL } from "@constants";
 import { useProfileSettings } from "@features/profile-settings/hooks/useProfileSettings";
+import { getAvatarName } from "@utils/helpers";
 import styled from "styled-components";
 
 const ProfilePictureContainer = styled.div`
   position: relative;
 `;
 
-const StyledImg = styled.img<{ $isCircleStyle?: boolean }>`
+const Image = styled.div<{ $isCircleStyle?: boolean; $image?: string }>`
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 20rem;
   aspect-ratio: 1/1;
   width: 100%;
-  object-fit: fill;
+  background: ${({ $image }) =>
+    $image
+      ? `url(${STATIC_MEDIA_URL + $image}) center/cover no-repeat`
+      : "var(--color-avatar)"};
+
   border-radius: ${({ $isCircleStyle }) => ($isCircleStyle ? "50%" : "0")};
+
+  color: white;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  flex-shrink: 0;
+
+  font-weight: bold;
+  font-size: 8rem;
+  text-transform: uppercase;
 `;
 
 const ProfileInfo = styled.div`
@@ -52,12 +69,16 @@ function ProfilePicture({ isCircleStyle }: { isCircleStyle?: boolean }) {
   const { data: profileSettings } = useProfileSettings();
   return (
     <ProfilePictureContainer>
-      <StyledImg
-        alt="profile"
+      <Image
         $isCircleStyle={isCircleStyle}
+        $image={profileSettings?.photo}
         data-testid="profile-picture"
-        src={STATIC_MEDIA_URL + profileSettings?.photo}
-      />
+      >
+        {!profileSettings?.photo &&
+          getAvatarName(
+            (profileSettings?.firstName + profileSettings?.lastName).toString()
+          )}
+      </Image>
       {!isCircleStyle && (
         <ProfileInfo>
           <ProfileNameH2>
diff --git a/app/src/components/side-bar/settings/SettingsSideBarBody.tsx b/app/src/components/side-bar/settings/SettingsSideBarBody.tsx
index ffd527e8..20370171 100644
--- a/app/src/components/side-bar/settings/SettingsSideBarBody.tsx
+++ b/app/src/components/side-bar/settings/SettingsSideBarBody.tsx
@@ -2,6 +2,8 @@ import styled from "styled-components";
 import OptionsList from "./OptionsList";
 import SettingsSideBarHeader from "./SettingsSideBarHeader";
 import { SideBarRowProps } from "./side-bar-row/SideBarRow";
+import { useSidebarType } from "../SideBarContext";
+import GroupInfoHeader from "./GroupInfoHeader";
 
 interface SettingsSideBarProps {
   children?: React.ReactNode;
@@ -12,13 +14,13 @@ const StyledSettingsSideBar = styled.div`
   height: 100vh;
   background-color: var(--color-background);
   overflow-y: auto;
-  position: relative;
 `;
 
 function SettingsSideBar({ rows, children }: SettingsSideBarProps) {
+  const type = useSidebarType();
   return (
     <StyledSettingsSideBar>
-      <SettingsSideBarHeader />
+      {type === "left" ? <SettingsSideBarHeader /> : <GroupInfoHeader />}
       {children}
       <OptionsList rows={rows} />
     </StyledSettingsSideBar>
diff --git a/app/src/components/side-bar/settings/SettingsSideBarHeader.tsx b/app/src/components/side-bar/settings/SettingsSideBarHeader.tsx
index 200df55e..45bb966a 100644
--- a/app/src/components/side-bar/settings/SettingsSideBarHeader.tsx
+++ b/app/src/components/side-bar/settings/SettingsSideBarHeader.tsx
@@ -3,9 +3,11 @@ import { useAppDispatch, useAppSelector } from "@hooks/useGlobalState";
 import Heading from "@components/Heading";
 import BackArrow from "@components/BackArrow";
 import CircleIcon from "@components/CircleIcon";
-import { useLogout } from "@features/authentication/logout/hooks/useLogout";
 import { updateSideBarView } from "@state/side-bar/sideBar";
 import { sideBarPages } from "types/sideBar";
+import { useSidebarType } from "../SideBarContext";
+import { useLogout } from "@features/authentication/logout/hooks/useLogout";
+
 const StyledSideBarHeader = styled.div`
   height: 4rem !important;
   position: relative;
@@ -20,7 +22,7 @@ const StyledSideBarHeader = styled.div`
   background-color: var(--color-background);
   border-bottom: 2px solid var(--color-item-hover);
 `;
-const StyledIconsContainer = styled.div`
+const IconsContainer = styled.div`
   display: flex;
   flex-direction: row;
   justify-content: end;
@@ -31,7 +33,13 @@ const StyledIconsContainer = styled.div`
 `;
 
 function SettingsSideBarHeader() {
-  const { title } = useAppSelector((state) => state.sideBarData);
+  const type = useSidebarType();
+
+  const { title } = useAppSelector((state) =>
+    type === "left"
+      ? state.sideBarData.leftSideBar
+      : state.sideBarData.rightSideBar
+  );
   const { logout } = useLogout();
   const dispatch = useAppDispatch();
 
@@ -42,7 +50,7 @@ function SettingsSideBarHeader() {
         {title}
       </Heading>
       {title === "Settings" && (
-        <StyledIconsContainer>
+        <IconsContainer>
           <CircleIcon
             data-testid="profile-update-icon"
             $icon="Edit"
@@ -52,20 +60,23 @@ function SettingsSideBarHeader() {
             $bgColor="var(--color-pattern)"
             onClick={() =>
               dispatch(
-                updateSideBarView({ redirect: sideBarPages.PROFILE_UPDATE })
+                updateSideBarView({
+                  redirect: sideBarPages.PROFILE_UPDATE,
+                  data: { type }
+                })
               )
             }
           />
           <CircleIcon
             data-testid="logout-icon"
-            onClick={logout}
+            onClick={() => logout()}
             $icon="Logout"
             $padding={0.2}
             $size={1.8}
             $color="var(--color-text)"
             $bgColor="var(--color-pattern)"
           />
-        </StyledIconsContainer>
+        </IconsContainer>
       )}
     </StyledSideBarHeader>
   );
diff --git a/app/src/components/side-bar/settings/side-bar-row/SideBarRow.tsx b/app/src/components/side-bar/settings/side-bar-row/SideBarRow.tsx
index 0203f8e0..ce4d20ee 100644
--- a/app/src/components/side-bar/settings/side-bar-row/SideBarRow.tsx
+++ b/app/src/components/side-bar/settings/side-bar-row/SideBarRow.tsx
@@ -17,6 +17,7 @@ import {
   privacySettingsInterface,
 } from "types/user";
 import { DataInterface, ExtractData } from "./getDataFactory";
+import { useSidebarType } from "@components/side-bar/SideBarContext";
 
 const StyledSideBarRow = styled.div`
   height: 4rem;
@@ -73,56 +74,67 @@ function SideBarRow({ redirect, icon, title, status, type }: SideBarRowProps) {
   const renderedIcon = getIcon(icon);
 
   const [currStatus, setCurrStatus] = useState<string | undefined>(undefined);
-  let key:
-    | {
-        id: keyof privacySettingsInterface;
-        name: string;
-        subtitle: string;
-      }
-    | {
-        id: keyof activitySettingsInterface;
-        name: string;
-        subtitle: string;
-      }
-    | {
-        id: keyof permissionsSettingsInterface;
-        name: string;
-        subtitle: string;
-      }
-    | undefined;
+  const [key, setKey] = useState<
+    | keyof privacySettingsInterface
+    | keyof activitySettingsInterface
+    | keyof permissionsSettingsInterface
+    | string
+    | undefined
+  >(undefined);
 
   const dataExtractor: DataInterface = ExtractData(type, currStatus, status);
   const data = dataExtractor.getData();
+  const sideBarType = useSidebarType();
 
   useEffect(() => {
     if (status !== undefined && type !== undefined) {
       switch (type) {
         case StatusType.PRIVACY:
-          key = statusMap.privacy[status];
-          setCurrStatus(userData?.privacySettings?.[key.id] || "everyone");
+          setKey(statusMap.privacy[status].id);
+          if (status === privacySettingsID.BLOCK_PRIVACY)
+            setCurrStatus(undefined);
+          else
+            setCurrStatus(
+              userData?.privacySettings?.[
+                key as keyof privacySettingsInterface
+              ] || "everyone"
+            );
           break;
         case StatusType.ACTIVITY:
-          key = statusMap.activity[status as activitySettingsID];
-          setCurrStatus(userData?.activitySettings?.[key.id] || "everyone");
+          setKey(statusMap.activity[status as activitySettingsID].id);
+          setCurrStatus(
+            userData?.activitySettings?.[
+              key as keyof activitySettingsInterface
+            ] || "everyone"
+          );
           break;
         case StatusType.PERMISSION:
-          key = statusMap.permission[status as permissionSettingsID];
-          setCurrStatus(userData?.permissionSettings?.[key.id] || "everyone");
+          setKey(statusMap.permission[status as permissionSettingsID].id);
+          setCurrStatus(
+            userData?.permissionSettings?.[
+              key as keyof permissionsSettingsInterface
+            ] || "everyone"
+          );
           break;
         default:
+          if (title === "Blocked Users") setKey("block");
+
           throw new Error("Type not valid");
       }
     } else {
       setCurrStatus(undefined);
     }
-  }, [userData, status]);
+  });
 
   return (
     <StyledSideBarRow
       onClick={() =>
-        redirect && dispatch(updateSideBarView({ redirect, data }))
+        redirect &&
+        dispatch(
+          updateSideBarView({ redirect, data: { ...data, type: sideBarType } })
+        )
       }
-      data-testid={key && `menu-item-${key.id}`}
+      data-testid={key && `menu-item-${key}`}
     >
       <RowInfo>
         {renderedIcon}
diff --git a/app/src/components/side-bar/settings/side-bar-row/getDataFactory.ts b/app/src/components/side-bar/settings/side-bar-row/getDataFactory.ts
index 7ec5db16..c7f2a890 100644
--- a/app/src/components/side-bar/settings/side-bar-row/getDataFactory.ts
+++ b/app/src/components/side-bar/settings/side-bar-row/getDataFactory.ts
@@ -27,12 +27,12 @@ function ExtractData(
     case StatusType.PERMISSION:
       return getPermissionData(itemStatus as permissionSettingsID, currStatus);
     default:
-      return { getData: () => {} };
+      return { getData: () => ({}) };
   }
 }
 
 interface DataInterface {
-  getData: () => void;
+  getData: () => object;
 }
 
 function getPrivacyData(
diff --git a/app/src/components/side-bar/settings/side-bar-row/sideBarRow.test.tsx b/app/src/components/side-bar/settings/side-bar-row/sideBarRow.test.tsx
index ab46cd43..df21bbeb 100644
--- a/app/src/components/side-bar/settings/side-bar-row/sideBarRow.test.tsx
+++ b/app/src/components/side-bar/settings/side-bar-row/sideBarRow.test.tsx
@@ -85,7 +85,7 @@ describe("SideBarRow", () => {
     expect(mockDispatch).toHaveBeenCalledWith(
       updateSideBarView({
         redirect: 1,
-      })
+      }),
     );
   });
 
@@ -130,7 +130,7 @@ describe("SideBarRow", () => {
           state: expect.any(String),
           data: expect.any(Object),
         }),
-      })
+      }),
     );
   });
 });
diff --git a/app/src/components/unauthorized/Unauthorized.tsx b/app/src/components/unauthorized/Unauthorized.tsx
new file mode 100644
index 00000000..855bffe5
--- /dev/null
+++ b/app/src/components/unauthorized/Unauthorized.tsx
@@ -0,0 +1,54 @@
+import Heading from "@components/Heading";
+import { getIcon } from "@data/icons";
+import { useAppSelector } from "@hooks/useGlobalState";
+import { useNavigate } from "react-router-dom";
+import styled from "styled-components";
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  height: 100dvh;
+`;
+const Sign = styled.p`
+  font-size: 15rem;
+  text-align: center;
+`;
+const ErrorMessage = styled.p`
+  color: var(--color-error);
+  font-size: 1.5rem;
+`;
+const Arrow = styled.button`
+  background-color: var(--accent-color);
+  color: var(--color-text);
+  padding: 0.5rem 1rem;
+  border-radius: 0.5rem;
+  font-size: 3rem !important;
+  cursor: pointer;
+  border: none;
+  & > svg {
+    margin-right: 0.5rem;
+    color: var(--color-primary);
+    font-size: 2rem;
+  }
+`;
+function Unauthorized() {
+  const navigate = useNavigate();
+  const isAdmin = useAppSelector((state) => state.user.userInfo.isAdmin);
+  return (
+    <Container>
+      <Sign>🚫️</Sign>
+      <Heading as="h1">403 - Unauthorized</Heading>
+      <ErrorMessage>You do not have access to this page.</ErrorMessage>
+      <Arrow
+        onClick={() => navigate(isAdmin ? "/admin" : "/", { replace: true })}
+      >
+        {getIcon("BackArrow")} Back To Home
+      </Arrow>
+    </Container>
+  );
+}
+
+export default Unauthorized;
diff --git a/app/src/constants.ts b/app/src/constants.ts
index 8dc333b2..66f674b9 100644
--- a/app/src/constants.ts
+++ b/app/src/constants.ts
@@ -5,8 +5,14 @@ const {
   VITE_PORT: PORT,
   VITE_ENV: ENV,
   VITE_BACKEND_STORGAE: STATIC_MEDIA_URL,
+  TURN_URL,
+  VITE_TURN_USERNAME: TURN_USERNAME,
+  VITE_TURN_PASSWORD: TURN_PASSWORD
 } = import.meta.env;
-const MOBILE_VIEW = "(max-width: 600px)";
+
+const MOBILE_VIEW = "(max-width: 800px)";
+const DESKTOP_VIEW = "(min-width: 800px)";
+const MAX_STORY_SIZE = 5 * 1024 * 1024;
 
 export {
   ENVIRONMENT,
@@ -14,6 +20,11 @@ export {
   API_URL,
   PORT,
   ENV,
-  MOBILE_VIEW,
   STATIC_MEDIA_URL,
+  MOBILE_VIEW,
+  DESKTOP_VIEW,
+  MAX_STORY_SIZE,
+  TURN_URL,
+  TURN_USERNAME,
+  TURN_PASSWORD
 };
diff --git a/app/src/data/animations/not_found.json b/app/src/data/animations/not_found.json
new file mode 100644
index 00000000..81e40a48
--- /dev/null
+++ b/app/src/data/animations/not_found.json
@@ -0,0 +1 @@
+{"tgs":1,"v":"5.5.2","fr":60,"ip":60,"op":240,"w":512,"h":512,"nm":"_103_SRCH","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":3,"nm":"Null 1268","sr":1,"ks":{"o":{"a":0,"k":0},"p":{"a":0,"k":[256,256,0]}},"ao":0,"ip":0,"op":300,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"wing","parent":23,"sr":1,"ks":{"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":68,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":80,"s":[9.032]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":100,"s":[9.032]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":114,"s":[9.032]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":140,"s":[9.032]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":158,"s":[9.032]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":184,"s":[9.032]},{"t":200,"s":[0]}]},"p":{"a":1,"k":[{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"t":68,"s":[-109,126,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"t":80,"s":[-109,126,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"t":100,"s":[-109,126,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"t":114,"s":[-109,126,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[-109,126,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"t":158,"s":[-143.884,133.056,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[-143.884,133.056,0],"to":[0,0,0],"ti":[0,0,0]},{"t":200,"s":[-109,126,0]}]},"a":{"a":0,"k":[-109,126,0]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":70,"s":[{"i":[[0,0],[6.269,5.304]],"o":[[-10.127,-2.893],[0,0]],"v":[[-51.75,144.46],[-79.236,130.476]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":82,"s":[{"i":[[0,0],[6.269,5.304]],"o":[[-8.191,-7.579],[0,0]],"v":[[-55.236,153.922],[-79.236,130.476]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":102,"s":[{"i":[[0,0],[6.269,5.304]],"o":[[-8.191,-7.579],[0,0]],"v":[[-55.236,153.922],[-79.236,130.476]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":116,"s":[{"i":[[0,0],[6.269,5.304]],"o":[[-8.191,-7.579],[0,0]],"v":[[-53.682,151.084],[-79.236,130.476]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":142,"s":[{"i":[[0,0],[6.269,5.304]],"o":[[-8.191,-7.579],[0,0]],"v":[[-53.682,151.084],[-79.236,130.476]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":155,"s":[{"i":[[0,0],[6.768,5.622]],"o":[[-5.359,-10.003],[0,0]],"v":[[-76.634,159.308],[-93.788,134.314]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":163,"s":[{"i":[[0,0],[6.768,5.622]],"o":[[-11.051,-7.124],[0,0]],"v":[[-74.448,146.367],[-97.326,130.781]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":186,"s":[{"i":[[0,0],[6.768,5.622]],"o":[[-11.051,-7.124],[0,0]],"v":[[-74.448,146.367],[-97.326,130.781]],"c":false}]},{"t":203,"s":[{"i":[[0,0],[6.269,5.304]],"o":[[-10.127,-2.893],[0,0]],"v":[[-51.75,144.46],[-79.236,130.476]],"c":false}]}]},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":8},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 1","bm":0,"hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":70,"s":[{"i":[[0,0],[3.584,-10.359],[33.756,31.345]],"o":[[30.38,26.522],[-2.812,8.126],[0,0]],"v":[[-85.987,113.116],[-31.014,150.247],[-118.779,146.389]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":82,"s":[{"i":[[0,0],[3.584,-10.359],[33.756,31.345]],"o":[[30.38,26.522],[-2.812,8.126],[0,0]],"v":[[-85.987,113.116],[-36.12,171.494],[-118.779,146.389]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":102,"s":[{"i":[[0,0],[3.584,-10.359],[33.756,31.345]],"o":[[30.38,26.522],[-2.812,8.126],[0,0]],"v":[[-85.987,113.116],[-36.12,171.494],[-118.779,146.389]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":116,"s":[{"i":[[0,0],[3.584,-10.359],[33.756,31.345]],"o":[[30.38,26.522],[-2.812,8.126],[0,0]],"v":[[-85.987,113.116],[-36.253,158.041],[-118.779,146.389]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":142,"s":[{"i":[[0,0],[3.584,-10.359],[33.756,31.345]],"o":[[30.38,26.522],[-2.812,8.126],[0,0]],"v":[[-85.987,113.116],[-36.253,158.041],[-118.779,146.389]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":155,"s":[{"i":[[0,0],[3.584,-10.359],[33.756,31.345]],"o":[[30.38,26.522],[-2.812,8.126],[0,0]],"v":[[-102.55,110.665],[-65.753,175.949],[-118.779,146.389]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":163,"s":[{"i":[[0,0],[3.584,-10.359],[33.756,31.345]],"o":[[30.38,26.522],[-2.812,8.126],[0,0]],"v":[[-102.55,110.665],[-58.41,153.177],[-118.779,146.389]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":186,"s":[{"i":[[0,0],[3.584,-10.359],[33.756,31.345]],"o":[[30.38,26.522],[-2.812,8.126],[0,0]],"v":[[-102.55,110.665],[-58.41,153.177],[-118.779,146.389]],"c":false}]},{"t":203,"s":[{"i":[[0,0],[3.584,-10.359],[33.756,31.345]],"o":[[30.38,26.522],[-2.812,8.126],[0,0]],"v":[[-85.987,113.116],[-31.014,150.247],[-118.779,146.389]],"c":false}]}]},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[0.980392158031,0.564705908298,0.086274512112,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":10},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.835294127464,0.152941182256,1]},"o":{"a":0,"k":100},"r":1,"bm":0,"nm":"Fill 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 2","bm":0,"hd":false}],"ip":0,"op":300,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"book","parent":1,"sr":1,"ks":{"p":{"a":0,"k":[56.301,155.621,0]},"a":{"a":0,"k":[56.301,135.621,0]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"t":68,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[134.226,87.972],[209.796,40.756],[139.898,181.864],[70.001,217.049]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":80,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[129.355,114.894],[217.852,78],[145.472,186.788],[70.001,219.157]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":100,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[129.355,114.894],[217.852,78],[145.472,186.788],[70.001,219.157]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":114,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[134.226,87.972],[209.796,40.756],[139.898,181.864],[70.001,217.049]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[134.226,87.972],[209.796,40.756],[139.898,181.864],[70.001,217.049]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":158,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[101.77,92.434],[192.757,45.219],[157.343,177.807],[70.001,217.049]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":184,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[101.77,92.434],[192.757,45.219],[157.343,177.807],[70.001,217.049]],"c":true}]},{"t":200,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[134.226,87.972],[209.796,40.756],[139.898,181.864],[70.001,217.049]],"c":true}]}]},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[0.027450980619,0.396078437567,0.647058844566,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":8},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0.560784339905,0.792156875134,1]},"o":{"a":0,"k":100},"r":1,"bm":0,"nm":"Fill 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 1","bm":0,"hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"t":68,"s":[{"i":[[0,0],[-0.825,10.829],[9.801,-19.925],[8.792,11.262]],"o":[[22.068,16.893],[-20.595,51.977],[-9.801,19.925],[13.153,-26.855]],"v":[[88.257,96.201],[134.226,87.972],[70.001,217.049],[29.125,220.514]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":80,"s":[{"i":[[0,0],[-0.825,9.608],[8.106,-16.468],[8.792,9.992]],"o":[[22.068,14.989],[-17.842,46.188],[-8.167,16.592],[10.553,-22.829]],"v":[[83.386,122.196],[129.355,114.894],[70.001,219.157],[29.125,222.231]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":100,"s":[{"i":[[0,0],[-0.825,9.608],[8.106,-16.468],[8.792,9.992]],"o":[[22.068,14.989],[-17.842,46.188],[-8.167,16.592],[10.553,-22.829]],"v":[[83.386,122.196],[129.355,114.894],[70.001,219.157],[29.125,222.231]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":114,"s":[{"i":[[0,0],[-0.825,10.829],[9.801,-19.925],[8.792,11.262]],"o":[[22.068,16.893],[-20.595,51.977],[-9.801,19.925],[13.153,-26.855]],"v":[[88.257,96.201],[134.226,87.972],[70.001,217.049],[29.125,220.514]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[0,0],[-0.825,10.829],[9.801,-19.925],[8.792,11.262]],"o":[[22.068,16.893],[-20.595,51.977],[-9.801,19.925],[13.153,-26.855]],"v":[[88.257,96.201],[134.226,87.972],[70.001,217.049],[29.125,220.514]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":158,"s":[{"i":[[0,0],[-0.825,10.829],[4.578,-15.611],[8.792,11.262]],"o":[[22.068,16.893],[-11.979,52.222],[-4.689,16.092],[5.016,-23.333]],"v":[[55.801,100.664],[101.77,92.434],[70.001,217.049],[29.125,220.514]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":184,"s":[{"i":[[0,0],[-0.825,10.829],[4.578,-15.611],[8.792,11.262]],"o":[[22.068,16.893],[-11.979,52.222],[-4.689,16.092],[5.016,-23.333]],"v":[[55.801,100.664],[101.77,92.434],[70.001,217.049],[29.125,220.514]],"c":true}]},{"t":200,"s":[{"i":[[0,0],[-0.825,10.829],[9.801,-19.925],[8.792,11.262]],"o":[[22.068,16.893],[-20.595,51.977],[-9.801,19.925],[13.153,-26.855]],"v":[[88.257,96.201],[134.226,87.972],[70.001,217.049],[29.125,220.514]],"c":true}]}]},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[0.027450980619,0.396078437567,0.647058844566,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":8},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0.560784339905,0.792156875134,1]},"o":{"a":0,"k":100},"r":1,"bm":0,"nm":"Fill 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 2","bm":0,"hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"t":68,"s":[{"i":[[0,0],[-0.265,-1.299],[0,0],[0,0]],"o":[[0,0],[0.265,1.299],[0,0],[0,0]],"v":[[-97.193,217.049],[-33.578,87.105],[88.257,96.201],[29.125,220.514]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":80,"s":[{"i":[[0,0],[-0.265,-1.153],[0,0],[0,0]],"o":[[0,0],[0.265,1.153],[0,0],[0,0]],"v":[[-97.193,219.157],[-52.208,112.36],[83.386,122.196],[29.125,222.231]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":100,"s":[{"i":[[0,0],[-0.265,-1.153],[0,0],[0,0]],"o":[[0,0],[0.265,1.153],[0,0],[0,0]],"v":[[-97.193,219.157],[-52.208,112.36],[83.386,122.196],[29.125,222.231]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":114,"s":[{"i":[[0,0],[-0.265,-1.299],[0,0],[0,0]],"o":[[0,0],[0.265,1.299],[0,0],[0,0]],"v":[[-97.193,217.049],[-33.578,87.105],[88.257,96.201],[29.125,220.514]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[0,0],[-0.265,-1.299],[0,0],[0,0]],"o":[[0,0],[0.265,1.299],[0,0],[0,0]],"v":[[-97.193,217.049],[-33.578,87.105],[88.257,96.201],[29.125,220.514]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":158,"s":[{"i":[[0,0],[-0.265,-1.299],[0,0],[0,0]],"o":[[0,0],[0.265,1.299],[0,0],[0,0]],"v":[[-97.193,217.049],[-66.845,87.105],[55.801,100.664],[29.125,220.514]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":184,"s":[{"i":[[0,0],[-0.265,-1.299],[0,0],[0,0]],"o":[[0,0],[0.265,1.299],[0,0],[0,0]],"v":[[-97.193,217.049],[-66.845,87.105],[55.801,100.664],[29.125,220.514]],"c":true}]},{"t":200,"s":[{"i":[[0,0],[-0.265,-1.299],[0,0],[0,0]],"o":[[0,0],[0.265,1.299],[0,0],[0,0]],"v":[[-97.193,217.049],[-33.578,87.105],[88.257,96.201],[29.125,220.514]],"c":true}]}]},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[0.027450980619,0.396078437567,0.647058844566,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":8},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0.560784339905,0.792156875134,1]},"o":{"a":0,"k":100},"r":1,"bm":0,"nm":"Fill 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 3","bm":0,"hd":false}],"ip":0,"op":300,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"book","parent":3,"sr":1,"ks":{},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"t":68,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-45.258,68.047],[-33.578,87.105],[-94.075,210.593],[-109.419,191.06]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":80,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-56.295,82.949],[-52.93,116.144],[-94.075,218.593],[-97.197,185.801]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":100,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-56.295,82.949],[-52.93,116.144],[-94.075,218.593],[-97.197,185.801]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":114,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-45.258,68.047],[-33.578,87.105],[-94.075,210.593],[-109.419,191.06]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-45.258,68.047],[-33.578,87.105],[-94.075,210.593],[-109.419,191.06]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":158,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-70.411,70.075],[-64.411,88.728],[-94.075,210.593],[-100.9,190.249]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":184,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-70.411,70.075],[-64.411,88.728],[-94.075,210.593],[-100.9,190.249]],"c":true}]},{"t":200,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-45.258,68.047],[-33.578,87.105],[-94.075,210.593],[-109.419,191.06]],"c":true}]}]},"nm":"Path 1","hd":false},{"ty":"fl","c":{"a":0,"k":[0.776470601559,0.713725507259,0.458823531866,1]},"o":{"a":0,"k":50},"r":1,"bm":0,"nm":"Fill 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 1","bm":0,"hd":false},{"ty":"gr","it":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"t":68,"s":[{"i":[[0,0],[0,0],[0,0],[-17.228,-26.664],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[59.902,-12.128],[11.554,-47.106],[0,0],[0,0],[0,0]],"v":[[-90.704,214.883],[-109.419,191.06],[-45.258,68.047],[108.626,92.038],[175.667,35.546],[200.71,50.572],[71.027,213.584]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":80,"s":[{"i":[[0,0],[0,0],[0,0],[-17.228,-22.109],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[59.902,-10.056],[14.633,-28.094],[0,0],[0,0],[0,0]],"v":[[-95.204,217.383],[-97.197,185.801],[-56.295,82.949],[100.867,111.094],[183.686,66],[205.747,83.604],[71.027,213.584]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":100,"s":[{"i":[[0,0],[0,0],[0,0],[-17.228,-22.109],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[59.902,-10.056],[14.633,-28.094],[0,0],[0,0],[0,0]],"v":[[-95.204,217.383],[-97.197,185.801],[-56.295,82.949],[100.867,111.094],[183.686,66],[205.747,83.604],[71.027,213.584]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":114,"s":[{"i":[[0,0],[0,0],[0,0],[-17.228,-26.664],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[59.902,-12.128],[11.554,-47.106],[0,0],[0,0],[0,0]],"v":[[-90.704,214.883],[-109.419,191.06],[-45.258,68.047],[108.626,92.038],[175.667,35.546],[200.71,50.572],[71.027,213.584]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[0,0],[0,0],[0,0],[-17.228,-26.664],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[59.902,-12.128],[11.554,-47.106],[0,0],[0,0],[0,0]],"v":[[-90.704,214.883],[-109.419,191.06],[-45.258,68.047],[108.626,92.038],[175.667,35.546],[200.71,50.572],[71.027,213.584]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":158,"s":[{"i":[[0,0],[0,0],[0,0],[-17.228,-26.664],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[59.902,-12.128],[11.554,-47.106],[0,0],[0,0],[0,0]],"v":[[-90.704,214.883],[-100.9,190.249],[-70.411,70.075],[74.954,96.907],[166.336,37.574],[182.048,55.034],[71.027,213.584]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":184,"s":[{"i":[[0,0],[0,0],[0,0],[-17.228,-26.664],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[59.902,-12.128],[11.554,-47.106],[0,0],[0,0],[0,0]],"v":[[-90.704,214.883],[-100.9,190.249],[-70.411,70.075],[74.954,96.907],[166.336,37.574],[182.048,55.034],[71.027,213.584]],"c":true}]},{"t":200,"s":[{"i":[[0,0],[0,0],[0,0],[-17.228,-26.664],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[59.902,-12.128],[11.554,-47.106],[0,0],[0,0],[0,0]],"v":[[-90.704,214.883],[-109.419,191.06],[-45.258,68.047],[108.626,92.038],[175.667,35.546],[200.71,50.572],[71.027,213.584]],"c":true}]}]},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[0.776470601559,0.713725507259,0.458823531866,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":8},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.949019610882,0.741176486015,1]},"o":{"a":0,"k":100},"r":1,"bm":0,"nm":"Fill 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 1","bm":0,"hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 2","bm":0,"hd":false}],"ip":0,"op":300,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"lupa11","parent":6,"sr":1,"ks":{"o":{"a":0,"k":50},"r":{"a":0,"k":180},"s":{"a":0,"k":[100,102.141,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":68,"s":[{"i":[[-2.139,0.427],[-4.327,-4.127]],"o":[[3.056,-0.611],[0.583,0.556]],"v":[[-0.847,-27.713],[15.929,-21.894]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":86,"s":[{"i":[[-1.66,1.415],[-5.79,-1.497]],"o":[[2.372,-2.022],[0.78,0.202]],"v":[[-12.923,-22.552],[4.563,-25.64]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":100,"s":[{"i":[[-1.66,1.415],[-5.79,-1.497]],"o":[[2.372,-2.022],[0.78,0.202]],"v":[[-12.923,-22.552],[4.563,-25.64]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":114,"s":[{"i":[[-2.139,0.427],[-4.327,-4.127]],"o":[[3.056,-0.611],[0.583,0.556]],"v":[[-0.847,-27.713],[15.929,-21.894]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[-2.139,0.427],[-4.327,-4.127]],"o":[[3.056,-0.611],[0.583,0.556]],"v":[[-0.847,-27.713],[15.929,-21.894]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":158,"s":[{"i":[[-2.084,0.643],[-4.726,-3.664]],"o":[[2.978,-0.919],[0.637,0.494]],"v":[[-8.57,-28.991],[8.712,-24.913]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[-2.084,0.643],[-4.726,-3.664]],"o":[[2.978,-0.919],[0.637,0.494]],"v":[[-8.57,-28.991],[8.712,-24.913]],"c":false}]},{"t":199,"s":[{"i":[[-2.139,0.427],[-4.327,-4.127]],"o":[[3.056,-0.611],[0.583,0.556]],"v":[[-0.847,-27.713],[15.929,-21.894]],"c":false}]}]},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":6},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 1","bm":0,"hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":60,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":72,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":84,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":96,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":108,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":120,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":132,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":144,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":156,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":168,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":180,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":192,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":204,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":216,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":228,"s":[0]},{"t":240,"s":[5]}]},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":60,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":72,"s":[95]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":84,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":96,"s":[95]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":108,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":120,"s":[95]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":132,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":144,"s":[95]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":156,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":168,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":180,"s":[95]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":192,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":204,"s":[95]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":216,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":228,"s":[95]},{"t":240,"s":[100]}]},"o":{"a":0,"k":0},"m":1,"nm":"Trim Paths 1","hd":false}],"ip":60,"op":240,"st":60,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"lupa10","parent":8,"sr":1,"ks":{},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":68,"s":[{"i":[[-1.622,-0.061],[-2.349,-2.735]],"o":[[6.306,0.238],[0.768,0.894]],"v":[[-0.876,-10.128],[12.98,-5.34]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":86,"s":[{"i":[[-1.355,0.894],[-3.502,-0.859]],"o":[[5.268,-3.474],[1.145,0.281]],"v":[[-13.739,-21.435],[0.317,-25.599]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":100,"s":[{"i":[[-1.355,0.894],[-3.502,-0.859]],"o":[[5.268,-3.474],[1.145,0.281]],"v":[[-13.739,-21.435],[0.317,-25.599]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":114,"s":[{"i":[[-1.622,-0.061],[-2.349,-2.735]],"o":[[6.306,0.238],[0.768,0.894]],"v":[[-0.876,-10.128],[12.98,-5.34]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[-1.622,-0.061],[-2.349,-2.735]],"o":[[6.306,0.238],[0.768,0.894]],"v":[[-0.876,-10.128],[12.98,-5.34]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":158,"s":[{"i":[[-1.611,0.197],[-2.754,-2.328]],"o":[[6.264,-0.767],[0.9,0.761]],"v":[[-6.857,-8.696],[7.584,-6.17]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[-1.611,0.197],[-2.754,-2.328]],"o":[[6.264,-0.767],[0.9,0.761]],"v":[[-6.857,-8.696],[7.584,-6.17]],"c":false}]},{"t":199,"s":[{"i":[[-1.622,-0.061],[-2.349,-2.735]],"o":[[6.306,0.238],[0.768,0.894]],"v":[[-0.876,-10.128],[12.98,-5.34]],"c":false}]}]},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":8},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 1","bm":0,"hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":60,"s":[20]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":72,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":84,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":96,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":108,"s":[20]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":120,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":132,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":144,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":156,"s":[20]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":168,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":180,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":192,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":204,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":216,"s":[20]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":228,"s":[10]},{"t":240,"s":[20]}]},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":60,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":72,"s":[80]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":84,"s":[90]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":96,"s":[70]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":108,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":120,"s":[80]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":132,"s":[90]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":144,"s":[70]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":156,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":168,"s":[80]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":180,"s":[80]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":192,"s":[90]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":204,"s":[70]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":216,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":228,"s":[80]},{"t":240,"s":[100]}]},"o":{"a":0,"k":0},"m":1,"nm":"Trim Paths 1","hd":false}],"ip":60,"op":240,"st":60,"bm":0},{"ddd":0,"ind":7,"ty":4,"nm":"lupa12","parent":8,"sr":1,"ks":{},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":68,"s":[{"i":[[13.07,5.995],[5.81,0.629],[5.365,-12.351]],"o":[[-4.782,-2.194],[-18.677,-2.022],[-0.321,0.74]],"v":[[18.741,-17.799],[2.734,-22.142],[-37.973,-3.967]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":86,"s":[{"i":[[13.639,6.224],[5.844,0],[4.004,-17.574]],"o":[[-4.99,-2.277],[-18.786,0],[-0.24,1.053]],"v":[[16.381,-35.954],[0,-39.5],[-38.514,-8.811]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":100,"s":[{"i":[[13.639,6.224],[5.844,0],[4.004,-17.574]],"o":[[-4.99,-2.277],[-18.786,0],[-0.24,1.053]],"v":[[16.381,-35.954],[0,-39.5],[-38.514,-8.811]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0},"t":114,"s":[{"i":[[13.07,5.995],[5.81,0.629],[5.365,-12.351]],"o":[[-4.782,-2.194],[-18.677,-2.022],[-0.321,0.74]],"v":[[18.741,-17.799],[2.734,-22.142],[-37.973,-3.967]],"c":false}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0},"t":140,"s":[{"i":[[13.07,5.995],[5.81,0.629],[5.365,-12.351]],"o":[[-4.782,-2.194],[-18.677,-2.022],[-0.321,0.74]],"v":[[18.741,-17.799],[2.734,-22.142],[-37.973,-3.967]],"c":false}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":158,"s":[{"i":[[12.021,7.891],[5.649,1.495],[7.159,-11.405]],"o":[[-4.398,-2.887],[-18.161,-4.805],[-0.429,0.683]],"v":[[23.801,-15.061],[8.628,-21.76],[-34.347,-9.907]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":184,"s":[{"i":[[12.021,7.891],[5.649,1.495],[7.159,-11.405]],"o":[[-4.398,-2.887],[-18.161,-4.805],[-0.429,0.683]],"v":[[23.801,-15.061],[8.628,-21.76],[-34.347,-9.907]],"c":false}]},{"t":199,"s":[{"i":[[13.07,5.995],[5.81,0.629],[5.365,-12.351]],"o":[[-4.782,-2.194],[-18.677,-2.022],[-0.321,0.74]],"v":[[18.741,-17.799],[2.734,-22.142],[-37.973,-3.967]],"c":false}]}]},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[0.244577205882,0.244577205882,0.244577205882,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 1","bm":0,"hd":false}],"ip":60,"op":240,"st":60,"bm":0},{"ddd":0,"ind":8,"ty":4,"nm":"lupa1","parent":12,"sr":1,"ks":{"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":140,"s":[-10.978]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":158,"s":[39.022]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":184,"s":[39.022]},{"t":199,"s":[-10.978]}]},"p":{"a":0,"k":[0,-74.75,0]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":68,"s":[{"i":[[17.088,-9.328],[13.251,14.849],[-17.088,9.328],[-13.251,-14.849]],"o":[[-17.088,9.328],[-13.251,-14.849],[17.088,-9.328],[13.251,14.849]],"v":[[23.994,35.979],[-30.941,25.983],[-23.994,-17.794],[30.941,-7.798]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":86,"s":[{"i":[[21.12,2.689],[-2.689,21.12],[-21.12,-2.689],[2.689,-21.12]],"o":[[-21.12,-2.689],[2.689,-21.12],[21.12,2.689],[-2.689,21.12]],"v":[[-4.869,38.24],[-38.24,-4.869],[4.869,-38.24],[38.24,4.869]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":100,"s":[{"i":[[21.12,2.689],[-2.689,21.12],[-21.12,-2.689],[2.689,-21.12]],"o":[[-21.12,-2.689],[2.689,-21.12],[21.12,2.689],[-2.689,21.12]],"v":[[-4.869,38.24],[-38.24,-4.869],[4.869,-38.24],[38.24,4.869]],"c":true}]},{"t":114,"s":[{"i":[[17.088,-9.328],[13.251,14.849],[-17.088,9.328],[-13.251,-14.849]],"o":[[-17.088,9.328],[-13.251,-14.849],[17.088,-9.328],[13.251,14.849]],"v":[[23.994,35.979],[-30.941,25.983],[-23.994,-17.794],[30.941,-7.798]],"c":true}]}]},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[0.003921568859,0,0,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":12},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"gf","o":{"a":0,"k":100},"r":1,"bm":0,"g":{"p":3,"k":{"a":0,"k":[0,0.016,0.706,1,0.5,0.016,0.706,1,1,0.016,0.706,1,0,1,0.5,0.5,1,0]}},"s":{"a":0,"k":[-12.358,-89.703]},"e":{"a":0,"k":[42.73,53.2]},"t":1,"nm":"ggg","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 1","bm":0,"hd":false}],"ip":60,"op":240,"st":60,"bm":0},{"ddd":0,"ind":9,"ty":4,"nm":"lupa14","parent":8,"sr":1,"ks":{"o":{"a":1,"k":[{"t":60,"s":[100],"h":1},{"t":86,"s":[0],"h":1},{"t":100,"s":[100],"h":1}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":68,"s":[{"i":[[17.088,-9.328],[13.251,14.849],[-17.088,9.328],[-13.251,-14.849]],"o":[[-17.088,9.328],[-13.251,-14.849],[17.088,-9.328],[13.251,14.849]],"v":[[25.553,28.511],[-29.382,18.515],[-22.434,-25.262],[32.501,-15.266]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":86,"s":[{"i":[[3.495,-21.533],[21.533,3.495],[-3.495,21.533],[-21.533,-3.495]],"o":[[-3.495,21.533],[-21.533,-3.495],[3.495,-21.533],[21.533,3.495]],"v":[[38.99,6.329],[-6.329,38.99],[-38.99,-6.329],[6.329,-38.99]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":100,"s":[{"i":[[3.495,-21.533],[21.533,3.495],[-3.495,21.533],[-21.533,-3.495]],"o":[[-3.495,21.533],[-21.533,-3.495],[3.495,-21.533],[21.533,3.495]],"v":[[38.99,6.329],[-6.329,38.99],[-38.99,-6.329],[6.329,-38.99]],"c":true}]},{"t":114,"s":[{"i":[[17.088,-9.328],[13.251,14.849],[-17.088,9.328],[-13.251,-14.849]],"o":[[-17.088,9.328],[-13.251,-14.849],[17.088,-9.328],[13.251,14.849]],"v":[[25.553,28.511],[-29.382,18.515],[-22.434,-25.262],[32.501,-15.266]],"c":true}]}]},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[0.243137269862,0.243137269862,0.243137269862,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":12},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 1","bm":0,"hd":false}],"ip":49,"op":260,"st":60,"bm":0},{"ddd":0,"ind":10,"ty":4,"nm":"lupa13","parent":12,"sr":1,"ks":{"r":{"a":0,"k":93.575},"p":{"a":0,"k":[-1.712,7.87,0]},"s":{"a":0,"k":[73.91,47.016,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[8.996,-2.333],[0.06,-2.922],[-4.267,-1.353]],"o":[[-4.333,1.124],[-0.073,3.546],[7.298,2.313]],"v":[[-0.326,-7.284],[-17.761,0.611],[0.413,9.182]],"c":true}},"nm":"Path 1","hd":false},{"ty":"fl","c":{"a":0,"k":[0.243137269862,0.243137269862,0.243137269862,1]},"o":{"a":0,"k":100},"r":1,"bm":0,"nm":"Fill 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 1","bm":0,"hd":false}],"ip":49,"op":262,"st":60,"bm":0},{"ddd":0,"ind":11,"ty":4,"nm":"lupa9","parent":12,"sr":1,"ks":{"r":{"a":0,"k":-1.786},"p":{"a":0,"k":[-0.764,-24.504,0]},"s":{"a":0,"k":[102.993,97.094,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[6.617,0],[0,-6.617],[-6.617,0],[0,6.617]],"o":[[-6.617,0],[0,6.617],[6.617,0],[0,-6.617]],"v":[[0,-9],[-12,0],[0,9],[12,0]],"c":true}},"nm":"Path 1","hd":false},{"ty":"fl","c":{"a":0,"k":[0.003921568859,0,0,1]},"o":{"a":0,"k":100},"r":1,"bm":0,"nm":"Fill 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 1","bm":0,"hd":false}],"ip":49,"op":262,"st":60,"bm":0},{"ddd":0,"ind":12,"ty":4,"nm":"lupa3","parent":1,"sr":1,"ks":{"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":68,"s":[-393.494]},{"t":86,"s":[-360.209],"h":1},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":100,"s":[-360.209]},{"t":114,"s":[-397.201],"h":1},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":140,"s":[-397.201]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":158,"s":[-424.756]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":184,"s":[-424.756]},{"t":199,"s":[-393.494]}]},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":68,"s":[104.319,85.197,0],"to":[0,0,0],"ti":[-26.681,25.197,0]},{"t":86,"s":[155.319,105.197,0],"h":1},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":100,"s":[155.319,105.197,0],"to":[0,0,0],"ti":[-1.181,21.947,0]},{"t":114,"s":[133.319,86.197,0],"h":1},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[133.319,86.197,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":158,"s":[148.319,107.197,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[148.319,107.197,0],"to":[0,0,0],"ti":[0,0,0]},{"t":199,"s":[104.319,85.197,0]}]},"s":{"a":0,"k":[133,133,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[2.537,0],[0,-2.268],[-7.11,0],[0,7.111]],"o":[[-2.537,0],[0,7.111],[7.11,0],[0,-2.268]],"v":[[0,-26],[-12.894,13.105],[0,26],[12.894,13.105]],"c":true}},"nm":"Path 1","hd":false},{"ty":"fl","c":{"a":0,"k":[0.003921568859,0,0,1]},"o":{"a":0,"k":100},"r":1,"bm":0,"nm":"Fill 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 1","bm":0,"hd":false}],"ip":60,"op":244,"st":60,"bm":0},{"ddd":0,"ind":13,"ty":4,"nm":"beak","parent":20,"sr":1,"ks":{"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":68,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":80,"s":[7.15]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":100,"s":[7.15]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":114,"s":[4]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":140,"s":[4]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":158,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":184,"s":[0]},{"t":200,"s":[0]}]},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":68,"s":[-12.915,31.417,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"t":80,"s":[-26.439,51.452,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":100,"s":[-26.439,51.452,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"t":114,"s":[-5.165,30.382,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[-5.165,30.382,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"t":158,"s":[-42.822,42.747,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[-42.822,42.747,0],"to":[0,0,0],"ti":[0,0,0]},{"t":200,"s":[-12.915,31.417,0]}]},"a":{"a":0,"k":[-12.915,31.417,0]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":68,"s":[{"i":[[4.671,-8.942],[6.306,-2.183]],"o":[[-4.671,8.942],[-6.021,2.084]],"v":[[-17.528,19.391],[-33.686,34.898]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":80,"s":[{"i":[[4.671,-8.942],[6.306,-2.183]],"o":[[-4.671,8.942],[-6.021,2.084]],"v":[[-17.528,19.391],[-33.686,34.898]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":100,"s":[{"i":[[4.671,-8.942],[6.306,-2.183]],"o":[[-4.671,8.942],[-6.021,2.084]],"v":[[-17.528,19.391],[-33.686,34.898]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":114,"s":[{"i":[[4.671,-8.942],[6.306,-2.183]],"o":[[-4.671,8.942],[-6.021,2.084]],"v":[[-17.528,19.391],[-33.686,34.898]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[4.671,-8.942],[6.306,-2.183]],"o":[[-4.671,8.942],[-6.021,2.084]],"v":[[-17.528,19.391],[-33.686,34.898]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":158,"s":[{"i":[[4.671,-8.942],[6.306,-2.183]],"o":[[-4.671,8.942],[-6.021,2.084]],"v":[[-18.269,19.553],[-34.427,35.06]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[4.671,-8.942],[6.306,-2.183]],"o":[[-4.671,8.942],[-6.021,2.084]],"v":[[-18.269,19.553],[-34.427,35.06]],"c":false}]},{"t":200,"s":[{"i":[[4.671,-8.942],[6.306,-2.183]],"o":[[-4.671,8.942],[-6.021,2.084]],"v":[[-17.528,19.391],[-33.686,34.898]],"c":false}]}]},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":8},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":60,"s":[20]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":72,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":84,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":96,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":108,"s":[20]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":120,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":132,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":144,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":156,"s":[20]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":168,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":180,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":192,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":204,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":216,"s":[20]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":228,"s":[10]},{"t":240,"s":[20]}]},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":60,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":72,"s":[80]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":84,"s":[90]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":96,"s":[70]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":108,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":120,"s":[80]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":132,"s":[90]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":144,"s":[70]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":156,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":168,"s":[80]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":180,"s":[80]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":192,"s":[90]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":204,"s":[70]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":216,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":228,"s":[80]},{"t":240,"s":[100]}]},"o":{"a":0,"k":0},"m":1,"nm":"Trim Paths 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":33},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 1","bm":0,"hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":68,"s":[{"i":[[-17.23,-6.988],[-18.509,12.549]],"o":[[17.23,6.988],[23.172,-15.71]],"v":[[-46.539,48.211],[28.942,44.953]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":80,"s":[{"i":[[-17.23,-6.988],[-18.509,12.549]],"o":[[17.23,6.988],[23.172,-15.71]],"v":[[-45.849,55.686],[28.679,46.812]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":100,"s":[{"i":[[-17.23,-6.988],[-18.509,12.549]],"o":[[17.23,6.988],[23.172,-15.71]],"v":[[-45.849,55.686],[28.679,46.812]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":114,"s":[{"i":[[-18.521,-1.643],[-18.92,6.968]],"o":[[20.636,1.83],[26.271,-9.675]],"v":[[-36.429,47.028],[20.628,42.399]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[-18.521,-1.643],[-18.92,6.968]],"o":[[20.636,1.83],[26.271,-9.675]],"v":[[-36.429,47.028],[20.628,42.399]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":158,"s":[{"i":[[-18.165,-3.969],[-23.726,8.4]],"o":[[20.37,4.45],[26.391,-9.343]],"v":[[-53.206,46.398],[31.607,42.075]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[-18.165,-3.969],[-23.726,8.4]],"o":[[20.37,4.45],[26.391,-9.343]],"v":[[-53.206,46.398],[31.607,42.075]],"c":false}]},{"t":200,"s":[{"i":[[-17.23,-6.988],[-18.509,12.549]],"o":[[17.23,6.988],[23.172,-15.71]],"v":[[-46.539,48.211],[28.942,44.953]],"c":false}]}]},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[0.490196079016,0.035294119269,0.035294119269,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":8},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 2","bm":0,"hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":68,"s":[{"i":[[-1.271,15.228],[-10.654,5.625],[-13.947,0.286],[-9.835,-8.372],[-0.32,-6.001],[31.552,-0.32]],"o":[[0.784,-9.387],[13.435,-7.093],[13.822,-0.283],[7.959,6.775],[0.716,13.417],[-24.054,0.244]],"v":[[-62.877,41.75],[-34.815,26.539],[-12.603,2.992],[10.424,25.627],[37.085,39.38],[-18.368,59.833]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":80,"s":[{"i":[[-1.271,15.228],[-10.654,5.625],[-13.947,0.286],[-9.835,-8.372],[-0.32,-6.001],[31.552,-0.32]],"o":[[0.784,-9.387],[13.435,-7.093],[13.822,-0.283],[7.959,6.775],[0.716,13.417],[-24.054,0.244]],"v":[[-63.737,35.599],[-34.815,26.539],[-12.603,2.992],[10.424,25.627],[36.502,33.455],[-18.368,59.833]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":100,"s":[{"i":[[-1.271,15.228],[-10.654,5.625],[-13.947,0.286],[-9.835,-8.372],[-0.32,-6.001],[31.552,-0.32]],"o":[[0.784,-9.387],[13.435,-7.093],[13.822,-0.283],[7.959,6.775],[0.716,13.417],[-24.054,0.244]],"v":[[-63.737,35.599],[-34.815,26.539],[-12.603,2.992],[10.424,25.627],[36.502,33.455],[-18.368,59.833]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":114,"s":[{"i":[[-1.271,15.228],[-10.654,5.625],[-13.947,0.286],[-9.835,-8.372],[-0.32,-6.001],[31.552,-0.32]],"o":[[0.784,-9.387],[13.435,-7.093],[13.822,-0.283],[7.959,6.775],[0.716,13.417],[-24.054,0.244]],"v":[[-62.877,41.75],[-34.815,26.539],[-12.603,2.992],[10.424,25.627],[37.085,39.38],[-18.368,59.833]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[-1.271,15.228],[-10.654,5.625],[-13.947,0.286],[-9.835,-8.372],[-0.32,-6.001],[31.552,-0.32]],"o":[[0.784,-9.387],[13.435,-7.093],[13.822,-0.283],[7.959,6.775],[0.716,13.417],[-24.054,0.244]],"v":[[-62.877,41.75],[-34.815,26.539],[-12.603,2.992],[10.424,25.627],[37.085,39.38],[-18.368,59.833]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":158,"s":[{"i":[[-1.271,15.228],[-10.654,5.625],[-13.947,0.286],[-9.835,-8.372],[-0.32,-6.001],[31.552,-0.32]],"o":[[0.784,-9.387],[13.435,-7.093],[13.822,-0.283],[7.959,6.775],[0.716,13.417],[-24.054,0.244]],"v":[[-61.63,41.699],[-36.296,26.883],[-12.603,2.992],[11.671,25.576],[38.332,39.329],[-18.316,56.06]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[-1.271,15.228],[-10.654,5.625],[-13.947,0.286],[-9.835,-8.372],[-0.32,-6.001],[31.552,-0.32]],"o":[[0.784,-9.387],[13.435,-7.093],[13.822,-0.283],[7.959,6.775],[0.716,13.417],[-24.054,0.244]],"v":[[-61.63,41.699],[-36.296,26.883],[-12.603,2.992],[11.671,25.576],[38.332,39.329],[-18.316,56.06]],"c":true}]},{"t":200,"s":[{"i":[[-1.271,15.228],[-10.654,5.625],[-13.947,0.286],[-9.835,-8.372],[-0.32,-6.001],[31.552,-0.32]],"o":[[0.784,-9.387],[13.435,-7.093],[13.822,-0.283],[7.959,6.775],[0.716,13.417],[-24.054,0.244]],"v":[[-62.877,41.75],[-34.815,26.539],[-12.603,2.992],[10.424,25.627],[37.085,39.38],[-18.368,59.833]],"c":true}]}]},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[0.811764717102,0.207843139768,0.007843137719,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":8},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.364705890417,0.121568627656,1]},"o":{"a":0,"k":100},"r":1,"bm":0,"nm":"Fill 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 3","bm":0,"hd":false}],"ip":0,"op":300,"st":0,"bm":0},{"ddd":0,"ind":14,"ty":4,"nm":"eye 3","parent":13,"sr":1,"ks":{"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":68,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":80,"s":[12.187]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":100,"s":[12.187]},{"t":114,"s":[0]}]},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":68,"s":[48.31,-3.201,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"t":80,"s":[49.804,0.784,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":100,"s":[49.804,0.784,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"t":114,"s":[48.31,-3.201,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[48.31,-3.201,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"t":158,"s":[54.79,-3.541,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[54.79,-3.541,0],"to":[0,0,0],"ti":[0,0,0]},{"t":200,"s":[48.31,-3.201,0]}]},"a":{"a":0,"k":[-87.19,4.299,0]},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":68,"s":[-120,150,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":80,"s":[-90,100,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":100,"s":[-90,100,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":114,"s":[-120,150,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":140,"s":[-120,150,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":158,"s":[-150,150,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":184,"s":[-150,150,100]},{"t":200,"s":[-120,150,100]}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"t":103,"s":[{"i":[[0.327,-5.188],[5.671,0.357],[-0.327,5.188],[-5.671,-0.357]],"o":[[-0.327,5.188],[-5.671,-0.357],[0.327,-5.188],[5.671,0.357]],"v":[[-74.724,-9.46],[-85.584,-0.712],[-95.26,-10.753],[-84.401,-19.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":109,"s":[{"i":[[0.327,-0.374],[5.671,0.026],[-0.327,0.374],[-5.671,-0.026]],"o":[[-0.327,0.374],[-5.671,-0.026],[0.327,-0.374],[5.671,0.026]],"v":[[-75.818,7.069],[-86.677,7.7],[-96.354,6.975],[-85.494,6.345]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":116,"s":[{"i":[[0.327,-5.188],[5.671,0.357],[-0.327,5.188],[-5.671,-0.357]],"o":[[-0.327,5.188],[-5.671,-0.357],[0.327,-5.188],[5.671,0.357]],"v":[[-74.724,-9.46],[-85.584,-0.712],[-95.26,-10.753],[-84.401,-19.5]],"c":true}]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"t":142,"s":[{"i":[[0.327,-5.188],[5.671,0.357],[-0.327,5.188],[-5.671,-0.357]],"o":[[-0.327,5.188],[-5.671,-0.357],[0.327,-5.188],[5.671,0.357]],"v":[[-74.724,-9.46],[-85.584,-0.712],[-95.26,-10.753],[-84.401,-19.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":148,"s":[{"i":[[0.327,-0.374],[5.671,0.026],[-0.327,0.374],[-5.671,-0.026]],"o":[[-0.327,0.374],[-5.671,-0.026],[0.327,-0.374],[5.671,0.026]],"v":[[-75.818,7.069],[-86.677,7.7],[-96.354,6.975],[-85.494,6.345]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":155,"s":[{"i":[[0.327,-5.188],[5.671,0.357],[-0.327,5.188],[-5.671,-0.357]],"o":[[-0.327,5.188],[-5.671,-0.357],[0.327,-5.188],[5.671,0.357]],"v":[[-74.724,-9.46],[-85.584,-0.712],[-95.26,-10.753],[-84.401,-19.5]],"c":true}]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[0.327,-5.188],[5.671,0.357],[-0.327,5.188],[-5.671,-0.357]],"o":[[-0.327,5.188],[-5.671,-0.357],[0.327,-5.188],[5.671,0.357]],"v":[[-74.724,-9.46],[-85.584,-0.712],[-95.26,-10.753],[-84.401,-19.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":190,"s":[{"i":[[0.327,-0.374],[5.671,0.026],[-0.327,0.374],[-5.671,-0.026]],"o":[[-0.327,0.374],[-5.671,-0.026],[0.327,-0.374],[5.671,0.026]],"v":[[-75.818,7.069],[-86.677,7.7],[-96.354,6.975],[-85.494,6.345]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0},"t":196,"s":[{"i":[[0.327,-5.188],[5.671,0.357],[-0.327,5.188],[-5.671,-0.357]],"o":[[-0.327,5.188],[-5.671,-0.357],[0.327,-5.188],[5.671,0.357]],"v":[[-74.724,-9.46],[-85.584,-0.712],[-95.26,-10.753],[-84.401,-19.5]],"c":true}]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"t":211,"s":[{"i":[[0.327,-5.188],[5.671,0.357],[-0.327,5.188],[-5.671,-0.357]],"o":[[-0.327,5.188],[-5.671,-0.357],[0.327,-5.188],[5.671,0.357]],"v":[[-74.724,-9.46],[-85.584,-0.712],[-95.26,-10.753],[-84.401,-19.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":217,"s":[{"i":[[0.327,-0.374],[5.671,0.026],[-0.327,0.374],[-5.671,-0.026]],"o":[[-0.327,0.374],[-5.671,-0.026],[0.327,-0.374],[5.671,0.026]],"v":[[-75.818,7.069],[-86.677,7.7],[-96.354,6.975],[-85.494,6.345]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0},"t":223,"s":[{"i":[[0.327,-5.188],[5.671,0.357],[-0.327,5.188],[-5.671,-0.357]],"o":[[-0.327,5.188],[-5.671,-0.357],[0.327,-5.188],[5.671,0.357]],"v":[[-74.724,-9.46],[-85.584,-0.712],[-95.26,-10.753],[-84.401,-19.5]],"c":true}]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"t":226,"s":[{"i":[[0.327,-5.188],[5.671,0.357],[-0.327,5.188],[-5.671,-0.357]],"o":[[-0.327,5.188],[-5.671,-0.357],[0.327,-5.188],[5.671,0.357]],"v":[[-74.724,-9.46],[-85.584,-0.712],[-95.26,-10.753],[-84.401,-19.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":232,"s":[{"i":[[0.327,-0.374],[5.671,0.026],[-0.327,0.374],[-5.671,-0.026]],"o":[[-0.327,0.374],[-5.671,-0.026],[0.327,-0.374],[5.671,0.026]],"v":[[-75.818,7.069],[-86.677,7.7],[-96.354,6.975],[-85.494,6.345]],"c":true}]},{"t":238,"s":[{"i":[[0.327,-5.188],[5.671,0.357],[-0.327,5.188],[-5.671,-0.357]],"o":[[-0.327,5.188],[-5.671,-0.357],[0.327,-5.188],[5.671,0.357]],"v":[[-74.724,-9.46],[-85.584,-0.712],[-95.26,-10.753],[-84.401,-19.5]],"c":true}]}]},"nm":"Path 1","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1]},"o":{"a":1,"k":[{"t":60,"s":[0],"h":1},{"t":79,"s":[100],"h":1},{"i":{"x":[0],"y":[1]},"o":{"x":[1],"y":[0]},"t":103,"s":[100]},{"t":109,"s":[0]}]},"r":1,"bm":0,"nm":"Fill 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 1","bm":0,"hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"t":103,"s":[{"i":[[1.018,-16.156],[14.097,0.888],[-1.018,16.156],[-14.097,-0.888]],"o":[[-1.018,16.156],[-14.097,-0.888],[1.018,-16.156],[14.097,0.888]],"v":[[-61.665,5.907],[-89.032,33.552],[-112.714,2.691],[-85.347,-24.953]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":109,"s":[{"i":[[1.018,-1.165],[14.097,0.064],[-1.018,1.165],[-14.097,-0.064]],"o":[[-1.018,1.165],[-14.097,-0.064],[1.018,-1.165],[14.097,0.064]],"v":[[-61.665,4.415],[-90.126,10.17],[-112.714,4.183],[-86.441,5.951]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":116,"s":[{"i":[[1.018,-16.156],[14.097,0.888],[-1.018,16.156],[-14.097,-0.888]],"o":[[-1.018,16.156],[-14.097,-0.888],[1.018,-16.156],[14.097,0.888]],"v":[[-61.665,5.907],[-89.032,33.552],[-112.714,2.691],[-85.347,-24.953]],"c":true}]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"t":142,"s":[{"i":[[1.018,-16.156],[14.097,0.888],[-1.018,16.156],[-14.097,-0.888]],"o":[[-1.018,16.156],[-14.097,-0.888],[1.018,-16.156],[14.097,0.888]],"v":[[-61.665,5.907],[-89.032,33.552],[-112.714,2.691],[-85.347,-24.953]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":148,"s":[{"i":[[1.018,-1.165],[14.097,0.064],[-1.018,1.165],[-14.097,-0.064]],"o":[[-1.018,1.165],[-14.097,-0.064],[1.018,-1.165],[14.097,0.064]],"v":[[-61.665,4.415],[-90.126,10.17],[-112.714,4.183],[-86.441,5.951]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":155,"s":[{"i":[[-5.545,-4.517],[14.097,0.888],[-1.191,13.319],[-14.097,-0.888]],"o":[[-0.283,10.598],[-14.097,-0.888],[5.467,-6.668],[14.097,0.888]],"v":[[-64.054,11.709],[-89.032,33.552],[-112.53,5.083],[-89.032,-4.102]],"c":true}]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[-5.545,-4.517],[14.097,0.888],[-1.191,13.319],[-14.097,-0.888]],"o":[[-0.283,10.598],[-14.097,-0.888],[5.467,-6.668],[14.097,0.888]],"v":[[-64.054,11.709],[-89.032,33.552],[-112.53,5.083],[-89.032,-4.102]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":190,"s":[{"i":[[1.018,-1.165],[14.097,0.064],[-1.018,1.165],[-14.097,-0.064]],"o":[[-1.018,1.165],[-14.097,-0.064],[1.018,-1.165],[14.097,0.064]],"v":[[-61.665,4.415],[-90.126,10.17],[-112.714,4.183],[-86.441,5.951]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0},"t":196,"s":[{"i":[[1.018,-16.156],[14.097,0.888],[-1.018,16.156],[-14.097,-0.888]],"o":[[-1.018,16.156],[-14.097,-0.888],[1.018,-16.156],[14.097,0.888]],"v":[[-61.665,5.907],[-89.032,33.552],[-112.714,2.691],[-85.347,-24.953]],"c":true}]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"t":211,"s":[{"i":[[1.018,-16.156],[14.097,0.888],[-1.018,16.156],[-14.097,-0.888]],"o":[[-1.018,16.156],[-14.097,-0.888],[1.018,-16.156],[14.097,0.888]],"v":[[-61.665,5.907],[-89.032,33.552],[-112.714,2.691],[-85.347,-24.953]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":217,"s":[{"i":[[1.018,-1.165],[14.097,0.064],[-1.018,1.165],[-14.097,-0.064]],"o":[[-1.018,1.165],[-14.097,-0.064],[1.018,-1.165],[14.097,0.064]],"v":[[-61.665,4.415],[-90.126,10.17],[-112.714,4.183],[-86.441,5.951]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0},"t":223,"s":[{"i":[[1.018,-16.156],[14.097,0.888],[-1.018,16.156],[-14.097,-0.888]],"o":[[-1.018,16.156],[-14.097,-0.888],[1.018,-16.156],[14.097,0.888]],"v":[[-61.665,5.907],[-89.032,33.552],[-112.714,2.691],[-85.347,-24.953]],"c":true}]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"t":226,"s":[{"i":[[1.018,-16.156],[14.097,0.888],[-1.018,16.156],[-14.097,-0.888]],"o":[[-1.018,16.156],[-14.097,-0.888],[1.018,-16.156],[14.097,0.888]],"v":[[-61.665,5.907],[-89.032,33.552],[-112.714,2.691],[-85.347,-24.953]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":232,"s":[{"i":[[1.018,-1.165],[14.097,0.064],[-1.018,1.165],[-14.097,-0.064]],"o":[[-1.018,1.165],[-14.097,-0.064],[1.018,-1.165],[14.097,0.064]],"v":[[-61.665,4.415],[-90.126,10.17],[-112.714,4.183],[-86.441,5.951]],"c":true}]},{"t":238,"s":[{"i":[[1.018,-16.156],[14.097,0.888],[-1.018,16.156],[-14.097,-0.888]],"o":[[-1.018,16.156],[-14.097,-0.888],[1.018,-16.156],[14.097,0.888]],"v":[[-61.665,5.907],[-89.032,33.552],[-112.714,2.691],[-85.347,-24.953]],"c":true}]}]},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1]},"o":{"a":0,"k":100},"w":{"a":1,"k":[{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":103,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":109,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":116,"s":[0]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":142,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":148,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":155,"s":[0]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":184,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":190,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":196,"s":[0]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":211,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":217,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":223,"s":[0]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":226,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":232,"s":[10]},{"t":238,"s":[0]}]},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0,0,1]},"o":{"a":0,"k":100},"r":1,"bm":0,"nm":"Fill 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 2","bm":0,"hd":false}],"ip":0,"op":300,"st":0,"bm":0},{"ddd":0,"ind":15,"ty":4,"nm":"eye 2","parent":14,"sr":1,"ks":{"p":{"a":0,"k":[-87.19,4.299,0]},"a":{"a":0,"k":[-87.19,4.299,0]},"s":{"a":0,"k":[66.667,66.667,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":148,"s":[{"i":[[0.327,-0.293],[5.671,0.02],[-0.327,0.293],[-5.671,-0.02]],"o":[[-0.327,0.293],[-5.671,-0.02],[0.327,-0.293],[5.671,0.02]],"v":[[-78.409,15.362],[-88.778,17.148],[-99.191,15.021],[-87.594,16.087]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":155,"s":[{"i":[[0.327,-5.188],[5.671,0.357],[-0.327,5.188],[-5.671,-0.357]],"o":[[-0.327,5.188],[-5.671,-0.357],[0.327,-5.188],[5.671,0.357]],"v":[[-74.724,-9.46],[-85.584,-0.712],[-95.26,-10.753],[-84.401,-19.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[0.327,-5.188],[5.671,0.357],[-0.327,5.188],[-5.671,-0.357]],"o":[[-0.327,5.188],[-5.671,-0.357],[0.327,-5.188],[5.671,0.357]],"v":[[-74.724,-9.46],[-85.584,-0.712],[-95.26,-10.753],[-84.401,-19.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":190,"s":[{"i":[[0.327,-0.293],[5.671,0.02],[-0.327,0.293],[-5.671,-0.02]],"o":[[-0.327,0.293],[-5.671,-0.02],[0.327,-0.293],[5.671,0.02]],"v":[[-78.409,15.362],[-88.778,17.148],[-99.191,15.021],[-87.594,16.087]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0},"t":196,"s":[{"i":[[0.327,-5.188],[5.671,0.357],[-0.327,5.188],[-5.671,-0.357]],"o":[[-0.327,5.188],[-5.671,-0.357],[0.327,-5.188],[5.671,0.357]],"v":[[-74.724,-9.46],[-85.584,-0.712],[-95.26,-10.753],[-84.401,-19.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":211,"s":[{"i":[[0.327,-5.188],[5.671,0.357],[-0.327,5.188],[-5.671,-0.357]],"o":[[-0.327,5.188],[-5.671,-0.357],[0.327,-5.188],[5.671,0.357]],"v":[[-74.724,-9.46],[-85.584,-0.712],[-95.26,-10.753],[-84.401,-19.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":217,"s":[{"i":[[0.327,-0.293],[5.671,0.02],[-0.327,0.293],[-5.671,-0.02]],"o":[[-0.327,0.293],[-5.671,-0.02],[0.327,-0.293],[5.671,0.02]],"v":[[-78.409,15.362],[-88.778,17.148],[-99.191,15.021],[-87.594,16.087]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0},"t":223,"s":[{"i":[[0.327,-5.188],[5.671,0.357],[-0.327,5.188],[-5.671,-0.357]],"o":[[-0.327,5.188],[-5.671,-0.357],[0.327,-5.188],[5.671,0.357]],"v":[[-74.724,-9.46],[-85.584,-0.712],[-95.26,-10.753],[-84.401,-19.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":226,"s":[{"i":[[0.327,-5.188],[5.671,0.357],[-0.327,5.188],[-5.671,-0.357]],"o":[[-0.327,5.188],[-5.671,-0.357],[0.327,-5.188],[5.671,0.357]],"v":[[-74.724,-9.46],[-85.584,-0.712],[-95.26,-10.753],[-84.401,-19.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":232,"s":[{"i":[[0.327,-0.293],[5.671,0.02],[-0.327,0.293],[-5.671,-0.02]],"o":[[-0.327,0.293],[-5.671,-0.02],[0.327,-0.293],[5.671,0.02]],"v":[[-78.409,15.362],[-88.778,17.148],[-99.191,15.021],[-87.594,16.087]],"c":true}]},{"t":238,"s":[{"i":[[0.327,-5.188],[5.671,0.357],[-0.327,5.188],[-5.671,-0.357]],"o":[[-0.327,5.188],[-5.671,-0.357],[0.327,-5.188],[5.671,0.357]],"v":[[-74.724,-9.46],[-85.584,-0.712],[-95.26,-10.753],[-84.401,-19.5]],"c":true}]}]},"nm":"Path 1","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1]},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":148,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":155,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":184,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":190,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":196,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":211,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":217,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":223,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":226,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":232,"s":[0]},{"t":238,"s":[100]}]},"r":1,"bm":0,"nm":"Fill 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 1","bm":0,"hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":148,"s":[{"i":[[0.863,-0.609],[20.392,0.819],[-0.267,0.15],[-15.665,-0.887]],"o":[[-3.412,2.41],[-19.092,-0.767],[1.207,-1.153],[19.396,1.099]],"v":[[-61.665,5.907],[-90.754,17.735],[-112.714,2.691],[-90.258,16.3]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":155,"s":[{"i":[[1.018,-16.156],[14.097,0.888],[-1.018,16.156],[-14.097,-0.888]],"o":[[-1.018,16.156],[-14.097,-0.888],[1.018,-16.156],[14.097,0.888]],"v":[[-61.665,5.907],[-89.032,33.552],[-112.714,2.691],[-85.347,-24.953]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[1.018,-16.156],[14.097,0.888],[-1.018,16.156],[-14.097,-0.888]],"o":[[-1.018,16.156],[-14.097,-0.888],[1.018,-16.156],[14.097,0.888]],"v":[[-61.665,5.907],[-89.032,33.552],[-112.714,2.691],[-85.347,-24.953]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":190,"s":[{"i":[[0.863,-0.609],[20.392,0.819],[-0.267,0.15],[-15.665,-0.887]],"o":[[-3.412,2.41],[-19.092,-0.767],[1.207,-1.153],[19.396,1.099]],"v":[[-61.665,5.907],[-90.754,17.735],[-112.714,2.691],[-90.258,16.3]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0},"t":196,"s":[{"i":[[1.018,-16.156],[14.097,0.888],[-1.018,16.156],[-14.097,-0.888]],"o":[[-1.018,16.156],[-14.097,-0.888],[1.018,-16.156],[14.097,0.888]],"v":[[-61.665,5.907],[-89.032,33.552],[-112.714,2.691],[-85.347,-24.953]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":211,"s":[{"i":[[1.018,-16.156],[14.097,0.888],[-1.018,16.156],[-14.097,-0.888]],"o":[[-1.018,16.156],[-14.097,-0.888],[1.018,-16.156],[14.097,0.888]],"v":[[-61.665,5.907],[-89.032,33.552],[-112.714,2.691],[-85.347,-24.953]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":217,"s":[{"i":[[0.863,-0.609],[20.392,0.819],[-0.267,0.15],[-15.665,-0.887]],"o":[[-3.412,2.41],[-19.092,-0.767],[1.207,-1.153],[19.396,1.099]],"v":[[-61.665,5.907],[-90.754,17.735],[-112.714,2.691],[-90.258,16.3]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0},"t":223,"s":[{"i":[[1.018,-16.156],[14.097,0.888],[-1.018,16.156],[-14.097,-0.888]],"o":[[-1.018,16.156],[-14.097,-0.888],[1.018,-16.156],[14.097,0.888]],"v":[[-61.665,5.907],[-89.032,33.552],[-112.714,2.691],[-85.347,-24.953]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":226,"s":[{"i":[[1.018,-16.156],[14.097,0.888],[-1.018,16.156],[-14.097,-0.888]],"o":[[-1.018,16.156],[-14.097,-0.888],[1.018,-16.156],[14.097,0.888]],"v":[[-61.665,5.907],[-89.032,33.552],[-112.714,2.691],[-85.347,-24.953]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":232,"s":[{"i":[[0.863,-0.609],[20.392,0.819],[-0.267,0.15],[-15.665,-0.887]],"o":[[-3.412,2.41],[-19.092,-0.767],[1.207,-1.153],[19.396,1.099]],"v":[[-61.665,5.907],[-90.754,17.735],[-112.714,2.691],[-90.258,16.3]],"c":true}]},{"t":238,"s":[{"i":[[1.018,-16.156],[14.097,0.888],[-1.018,16.156],[-14.097,-0.888]],"o":[[-1.018,16.156],[-14.097,-0.888],[1.018,-16.156],[14.097,0.888]],"v":[[-61.665,5.907],[-89.032,33.552],[-112.714,2.691],[-85.347,-24.953]],"c":true}]}]},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1]},"o":{"a":0,"k":100},"w":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":148,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":155,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":184,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":190,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":196,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":211,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":217,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":223,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":226,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":232,"s":[10]},{"t":238,"s":[0]}]},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0,0,1]},"o":{"a":0,"k":100},"r":1,"bm":0,"nm":"Fill 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 2","bm":0,"hd":false}],"ip":153,"op":188,"st":0,"bm":0},{"ddd":0,"ind":16,"ty":4,"nm":"eye","parent":13,"sr":1,"ks":{"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":140,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":158,"s":[-15.932]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":184,"s":[-15.932]},{"t":200,"s":[0]}]},"p":{"a":1,"k":[{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"t":140,"s":[-87.19,4.299,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"t":158,"s":[-87.19,4.299,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"t":184,"s":[-87.19,4.299,0],"to":[0,0,0],"ti":[0,0,0]},{"t":200,"s":[-87.19,4.299,0]}]},"a":{"a":0,"k":[-87.19,4.299,0]},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":140,"s":[100,100,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":158,"s":[100,90,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":184,"s":[100,90,100]},{"t":200,"s":[100,100,100]}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"t":103,"s":[{"i":[[0.327,-5.188],[5.671,0.357],[-0.327,5.188],[-5.671,-0.357]],"o":[[-0.327,5.188],[-5.671,-0.357],[0.327,-5.188],[5.671,0.357]],"v":[[-74.724,-9.46],[-85.584,-0.712],[-95.26,-10.753],[-84.401,-19.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":109,"s":[{"i":[[0.327,-0.374],[5.671,0.026],[-0.327,0.374],[-5.671,-0.026]],"o":[[-0.327,0.374],[-5.671,-0.026],[0.327,-0.374],[5.671,0.026]],"v":[[-75.818,7.069],[-86.677,7.7],[-96.354,6.975],[-85.494,6.345]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":116,"s":[{"i":[[0.327,-5.188],[5.671,0.357],[-0.327,5.188],[-5.671,-0.357]],"o":[[-0.327,5.188],[-5.671,-0.357],[0.327,-5.188],[5.671,0.357]],"v":[[-74.724,-9.46],[-85.584,-0.712],[-95.26,-10.753],[-84.401,-19.5]],"c":true}]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"t":142,"s":[{"i":[[0.327,-5.188],[5.671,0.357],[-0.327,5.188],[-5.671,-0.357]],"o":[[-0.327,5.188],[-5.671,-0.357],[0.327,-5.188],[5.671,0.357]],"v":[[-74.724,-9.46],[-85.584,-0.712],[-95.26,-10.753],[-84.401,-19.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":148,"s":[{"i":[[0.327,-0.374],[5.671,0.026],[-0.327,0.374],[-5.671,-0.026]],"o":[[-0.327,0.374],[-5.671,-0.026],[0.327,-0.374],[5.671,0.026]],"v":[[-75.818,7.069],[-86.677,7.7],[-96.354,6.975],[-85.494,6.345]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":155,"s":[{"i":[[0.327,-5.188],[5.671,0.357],[-0.327,5.188],[-5.671,-0.357]],"o":[[-0.327,5.188],[-5.671,-0.357],[0.327,-5.188],[5.671,0.357]],"v":[[-74.724,-9.46],[-85.584,-0.712],[-95.26,-10.753],[-84.401,-19.5]],"c":true}]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[0.327,-5.188],[5.671,0.357],[-0.327,5.188],[-5.671,-0.357]],"o":[[-0.327,5.188],[-5.671,-0.357],[0.327,-5.188],[5.671,0.357]],"v":[[-74.724,-9.46],[-85.584,-0.712],[-95.26,-10.753],[-84.401,-19.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":190,"s":[{"i":[[0.327,-0.374],[5.671,0.026],[-0.327,0.374],[-5.671,-0.026]],"o":[[-0.327,0.374],[-5.671,-0.026],[0.327,-0.374],[5.671,0.026]],"v":[[-75.818,7.069],[-86.677,7.7],[-96.354,6.975],[-85.494,6.345]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0},"t":196,"s":[{"i":[[0.327,-5.188],[5.671,0.357],[-0.327,5.188],[-5.671,-0.357]],"o":[[-0.327,5.188],[-5.671,-0.357],[0.327,-5.188],[5.671,0.357]],"v":[[-74.724,-9.46],[-85.584,-0.712],[-95.26,-10.753],[-84.401,-19.5]],"c":true}]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"t":211,"s":[{"i":[[0.327,-5.188],[5.671,0.357],[-0.327,5.188],[-5.671,-0.357]],"o":[[-0.327,5.188],[-5.671,-0.357],[0.327,-5.188],[5.671,0.357]],"v":[[-74.724,-9.46],[-85.584,-0.712],[-95.26,-10.753],[-84.401,-19.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":217,"s":[{"i":[[0.327,-0.374],[5.671,0.026],[-0.327,0.374],[-5.671,-0.026]],"o":[[-0.327,0.374],[-5.671,-0.026],[0.327,-0.374],[5.671,0.026]],"v":[[-75.818,7.069],[-86.677,7.7],[-96.354,6.975],[-85.494,6.345]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0},"t":223,"s":[{"i":[[0.327,-5.188],[5.671,0.357],[-0.327,5.188],[-5.671,-0.357]],"o":[[-0.327,5.188],[-5.671,-0.357],[0.327,-5.188],[5.671,0.357]],"v":[[-74.724,-9.46],[-85.584,-0.712],[-95.26,-10.753],[-84.401,-19.5]],"c":true}]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"t":226,"s":[{"i":[[0.327,-5.188],[5.671,0.357],[-0.327,5.188],[-5.671,-0.357]],"o":[[-0.327,5.188],[-5.671,-0.357],[0.327,-5.188],[5.671,0.357]],"v":[[-74.724,-9.46],[-85.584,-0.712],[-95.26,-10.753],[-84.401,-19.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":232,"s":[{"i":[[0.327,-0.374],[5.671,0.026],[-0.327,0.374],[-5.671,-0.026]],"o":[[-0.327,0.374],[-5.671,-0.026],[0.327,-0.374],[5.671,0.026]],"v":[[-75.818,7.069],[-86.677,7.7],[-96.354,6.975],[-85.494,6.345]],"c":true}]},{"t":238,"s":[{"i":[[0.327,-5.188],[5.671,0.357],[-0.327,5.188],[-5.671,-0.357]],"o":[[-0.327,5.188],[-5.671,-0.357],[0.327,-5.188],[5.671,0.357]],"v":[[-74.724,-9.46],[-85.584,-0.712],[-95.26,-10.753],[-84.401,-19.5]],"c":true}]}]},"nm":"Path 1","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1]},"o":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[1],"y":[0]},"t":103,"s":[100]},{"i":{"x":[0],"y":[1]},"o":{"x":[1],"y":[0]},"t":109,"s":[0]},{"i":{"x":[0],"y":[1]},"o":{"x":[1],"y":[0]},"t":116,"s":[100]},{"i":{"x":[0],"y":[1]},"o":{"x":[1],"y":[0]},"t":142,"s":[100]},{"i":{"x":[0],"y":[1]},"o":{"x":[1],"y":[0]},"t":148,"s":[0]},{"i":{"x":[0],"y":[1]},"o":{"x":[1],"y":[0]},"t":155,"s":[100]},{"i":{"x":[0],"y":[1]},"o":{"x":[1],"y":[0]},"t":184,"s":[100]},{"i":{"x":[0],"y":[1]},"o":{"x":[1],"y":[0]},"t":190,"s":[0]},{"i":{"x":[0],"y":[1]},"o":{"x":[1],"y":[0]},"t":196,"s":[100]},{"i":{"x":[0],"y":[1]},"o":{"x":[1],"y":[0]},"t":211,"s":[100]},{"i":{"x":[0],"y":[1]},"o":{"x":[1],"y":[0]},"t":217,"s":[0]},{"i":{"x":[0],"y":[1]},"o":{"x":[1],"y":[0]},"t":223,"s":[100]},{"i":{"x":[0],"y":[1]},"o":{"x":[1],"y":[0]},"t":226,"s":[100]},{"i":{"x":[0],"y":[1]},"o":{"x":[1],"y":[0]},"t":232,"s":[0]},{"t":238,"s":[100]}]},"r":1,"bm":0,"nm":"Fill 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 1","bm":0,"hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"t":103,"s":[{"i":[[1.018,-16.156],[14.097,0.888],[-1.018,16.156],[-14.097,-0.888]],"o":[[-1.018,16.156],[-14.097,-0.888],[1.018,-16.156],[14.097,0.888]],"v":[[-61.665,5.907],[-89.032,33.552],[-112.714,2.691],[-85.347,-24.953]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":109,"s":[{"i":[[1.018,-1.165],[14.097,0.064],[-1.018,1.165],[-14.097,-0.064]],"o":[[-1.018,1.165],[-14.097,-0.064],[1.018,-1.165],[14.097,0.064]],"v":[[-61.665,4.415],[-90.126,10.17],[-112.714,4.183],[-86.441,5.951]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":116,"s":[{"i":[[1.018,-16.156],[14.097,0.888],[-1.018,16.156],[-14.097,-0.888]],"o":[[-1.018,16.156],[-14.097,-0.888],[1.018,-16.156],[14.097,0.888]],"v":[[-61.665,5.907],[-89.032,33.552],[-112.714,2.691],[-85.347,-24.953]],"c":true}]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"t":142,"s":[{"i":[[1.018,-16.156],[14.097,0.888],[-1.018,16.156],[-14.097,-0.888]],"o":[[-1.018,16.156],[-14.097,-0.888],[1.018,-16.156],[14.097,0.888]],"v":[[-61.665,5.907],[-89.032,33.552],[-112.714,2.691],[-85.347,-24.953]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":148,"s":[{"i":[[1.018,-1.165],[14.097,0.064],[-1.018,1.165],[-14.097,-0.064]],"o":[[-1.018,1.165],[-14.097,-0.064],[1.018,-1.165],[14.097,0.064]],"v":[[-61.665,4.415],[-90.126,10.17],[-112.714,4.183],[-86.441,5.951]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":155,"s":[{"i":[[1.018,-16.156],[14.097,0.888],[-1.018,16.156],[-14.097,-0.888]],"o":[[-1.018,16.156],[-14.097,-0.888],[1.018,-16.156],[14.097,0.888]],"v":[[-61.665,5.907],[-89.032,33.552],[-112.714,2.691],[-85.347,-24.953]],"c":true}]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[1.018,-16.156],[14.097,0.888],[-1.018,16.156],[-14.097,-0.888]],"o":[[-1.018,16.156],[-14.097,-0.888],[1.018,-16.156],[14.097,0.888]],"v":[[-61.665,5.907],[-89.032,33.552],[-112.714,2.691],[-85.347,-24.953]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":190,"s":[{"i":[[1.018,-1.165],[14.097,0.064],[-1.018,1.165],[-14.097,-0.064]],"o":[[-1.018,1.165],[-14.097,-0.064],[1.018,-1.165],[14.097,0.064]],"v":[[-61.665,4.415],[-90.126,10.17],[-112.714,4.183],[-86.441,5.951]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0},"t":196,"s":[{"i":[[1.018,-16.156],[14.097,0.888],[-1.018,16.156],[-14.097,-0.888]],"o":[[-1.018,16.156],[-14.097,-0.888],[1.018,-16.156],[14.097,0.888]],"v":[[-61.665,5.907],[-89.032,33.552],[-112.714,2.691],[-85.347,-24.953]],"c":true}]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"t":211,"s":[{"i":[[1.018,-16.156],[14.097,0.888],[-1.018,16.156],[-14.097,-0.888]],"o":[[-1.018,16.156],[-14.097,-0.888],[1.018,-16.156],[14.097,0.888]],"v":[[-61.665,5.907],[-89.032,33.552],[-112.714,2.691],[-85.347,-24.953]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":217,"s":[{"i":[[1.018,-1.165],[14.097,0.064],[-1.018,1.165],[-14.097,-0.064]],"o":[[-1.018,1.165],[-14.097,-0.064],[1.018,-1.165],[14.097,0.064]],"v":[[-61.665,4.415],[-90.126,10.17],[-112.714,4.183],[-86.441,5.951]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0},"t":223,"s":[{"i":[[1.018,-16.156],[14.097,0.888],[-1.018,16.156],[-14.097,-0.888]],"o":[[-1.018,16.156],[-14.097,-0.888],[1.018,-16.156],[14.097,0.888]],"v":[[-61.665,5.907],[-89.032,33.552],[-112.714,2.691],[-85.347,-24.953]],"c":true}]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"t":226,"s":[{"i":[[1.018,-16.156],[14.097,0.888],[-1.018,16.156],[-14.097,-0.888]],"o":[[-1.018,16.156],[-14.097,-0.888],[1.018,-16.156],[14.097,0.888]],"v":[[-61.665,5.907],[-89.032,33.552],[-112.714,2.691],[-85.347,-24.953]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":232,"s":[{"i":[[1.018,-1.165],[14.097,0.064],[-1.018,1.165],[-14.097,-0.064]],"o":[[-1.018,1.165],[-14.097,-0.064],[1.018,-1.165],[14.097,0.064]],"v":[[-61.665,4.415],[-90.126,10.17],[-112.714,4.183],[-86.441,5.951]],"c":true}]},{"t":238,"s":[{"i":[[1.018,-16.156],[14.097,0.888],[-1.018,16.156],[-14.097,-0.888]],"o":[[-1.018,16.156],[-14.097,-0.888],[1.018,-16.156],[14.097,0.888]],"v":[[-61.665,5.907],[-89.032,33.552],[-112.714,2.691],[-85.347,-24.953]],"c":true}]}]},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1]},"o":{"a":0,"k":100},"w":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":103,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":109,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":116,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":142,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":148,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":155,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":184,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":190,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":196,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":211,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":217,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":223,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":226,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":232,"s":[10]},{"t":238,"s":[0]}]},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0,0,1]},"o":{"a":0,"k":100},"r":1,"bm":0,"nm":"Fill 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 2","bm":0,"hd":false}],"ip":0,"op":300,"st":0,"bm":0},{"ddd":0,"ind":17,"ty":4,"nm":"l","parent":18,"sr":1,"ks":{"o":{"a":0,"k":50}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":68,"s":[{"i":[[-37.743,21.567],[-46.206,-7.019]],"o":[[53.224,-30.414],[35.443,5.384]],"v":[[-82.243,-74.312],[116.617,-109.405]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":80,"s":[{"i":[[-37.743,21.567],[-46.206,-7.019]],"o":[[53.224,-30.414],[35.443,5.384]],"v":[[-85.407,-68.958],[123.984,-100.995]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":100,"s":[{"i":[[-37.743,21.567],[-46.206,-7.019]],"o":[[53.224,-30.414],[35.443,5.384]],"v":[[-85.407,-68.958],[123.984,-100.995]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":114,"s":[{"i":[[-37.743,21.567],[-46.206,-7.019]],"o":[[53.224,-30.414],[35.443,5.384]],"v":[[-82.243,-74.312],[116.617,-109.405]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[-37.743,21.567],[-46.206,-7.019]],"o":[[53.224,-30.414],[35.443,5.384]],"v":[[-82.243,-74.312],[116.617,-109.405]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":158,"s":[{"i":[[-40.622,15.476],[-45.494,-1.491]],"o":[[46.843,-17.846],[35.831,1.174]],"v":[[-160.125,-47.076],[74.286,-94.752]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[-40.622,15.476],[-45.494,-1.491]],"o":[[46.843,-17.846],[35.831,1.174]],"v":[[-160.125,-47.076],[74.286,-94.752]],"c":false}]},{"t":200,"s":[{"i":[[-37.743,21.567],[-46.206,-7.019]],"o":[[53.224,-30.414],[35.443,5.384]],"v":[[-82.243,-74.312],[116.617,-109.405]],"c":false}]}]},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[0.513725490196,0.321568627451,0.180392156863,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":3},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 1","bm":0,"hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":68,"s":[{"i":[[-37.743,21.567],[-46.206,-7.019]],"o":[[53.224,-30.414],[35.443,5.384]],"v":[[-108.562,-86.01],[96.731,-121.103]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":80,"s":[{"i":[[-37.743,21.567],[-46.206,-7.019]],"o":[[53.224,-30.414],[35.443,5.384]],"v":[[-112.851,-83.185],[102.453,-115.713]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":100,"s":[{"i":[[-37.743,21.567],[-46.206,-7.019]],"o":[[53.224,-30.414],[35.443,5.384]],"v":[[-112.851,-83.185],[102.453,-115.713]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":114,"s":[{"i":[[-37.743,21.567],[-46.206,-7.019]],"o":[[53.224,-30.414],[35.443,5.384]],"v":[[-108.562,-86.01],[96.731,-121.103]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[-37.743,21.567],[-46.206,-7.019]],"o":[[53.224,-30.414],[35.443,5.384]],"v":[[-108.562,-86.01],[96.731,-121.103]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":158,"s":[{"i":[[-34.805,26.045],[-46.206,-7.019]],"o":[[46.632,-34.896],[35.443,5.384]],"v":[[-170.645,-56.368],[72.969,-110.418]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[-34.805,26.045],[-46.206,-7.019]],"o":[[46.632,-34.896],[35.443,5.384]],"v":[[-170.645,-56.368],[72.969,-110.418]],"c":false}]},{"t":200,"s":[{"i":[[-37.743,21.567],[-46.206,-7.019]],"o":[[53.224,-30.414],[35.443,5.384]],"v":[[-108.562,-86.01],[96.731,-121.103]],"c":false}]}]},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[0.513725490196,0.321568627451,0.180392156863,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":3},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 2","bm":0,"hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[-12.99,19.111],[-46.206,-19.287]],"o":[[25.15,-37.001],[27.791,11.601]],"v":[[-170.56,-149.762],[14.263,-199.49]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":158,"s":[{"i":[[-12.99,19.111],[-46.206,-19.287]],"o":[[25.15,-37.001],[27.791,11.601]],"v":[[-170.56,-149.762],[11.124,-199.848]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[-12.99,19.111],[-46.206,-19.287]],"o":[[25.15,-37.001],[27.791,11.601]],"v":[[-170.56,-149.762],[11.124,-199.848]],"c":false}]},{"t":200,"s":[{"i":[[-12.99,19.111],[-46.206,-19.287]],"o":[[25.15,-37.001],[27.791,11.601]],"v":[[-170.56,-149.762],[14.263,-199.49]],"c":false}]}]},"nm":"Path 1","hd":false},{"ind":1,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[-18.455,23.134],[-43.866,-24.565]],"o":[[41.527,-52.054],[33.927,18.999]],"v":[[-186.936,-115.254],[41.752,-176.666]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":158,"s":[{"i":[[-15.717,25.074],[-53.787,-21.824]],"o":[[30.266,-48.285],[36.032,14.62]],"v":[[-186.936,-115.254],[41.752,-176.666]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[-15.717,25.074],[-53.787,-21.824]],"o":[[30.266,-48.285],[36.032,14.62]],"v":[[-186.936,-115.254],[41.752,-176.666]],"c":false}]},{"t":200,"s":[{"i":[[-18.455,23.134],[-43.866,-24.565]],"o":[[41.527,-52.054],[33.927,18.999]],"v":[[-186.936,-115.254],[41.752,-176.666]],"c":false}]}]},"nm":"Path 2","hd":false},{"ind":2,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[-11.056,27.45],[-28.074,-26.905]],"o":[[16.962,-42.111],[28.074,26.905]],"v":[[-193.37,-84.84],[56.959,-151.516]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":158,"s":[{"i":[[-11.056,27.45],[-38.093,-21.734]],"o":[[16.962,-42.111],[33.774,19.27]],"v":[[-193.37,-84.84],[54.902,-151.591]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[-11.056,27.45],[-38.093,-21.734]],"o":[[16.962,-42.111],[33.774,19.27]],"v":[[-193.37,-84.84],[54.902,-151.591]],"c":false}]},{"t":200,"s":[{"i":[[-11.056,27.45],[-28.074,-26.905]],"o":[[16.962,-42.111],[28.074,26.905]],"v":[[-193.37,-84.84],[56.959,-151.516]],"c":false}]}]},"nm":"Path 3","hd":false},{"ind":3,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":68,"s":[{"i":[[-26.905,-5.849],[-11.698,-11.698]],"o":[[26.905,5.849],[8.947,8.947]],"v":[[-12.642,-129.291],[50.525,-95.953]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":80,"s":[{"i":[[-26.905,-5.849],[-15.825,-22.126]],"o":[[26.905,5.849],[7.361,10.292]],"v":[[-12.642,-129.291],[54.996,-86.349]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":100,"s":[{"i":[[-26.905,-5.849],[-15.825,-22.126]],"o":[[26.905,5.849],[7.361,10.292]],"v":[[-12.642,-129.291],[54.996,-86.349]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":114,"s":[{"i":[[-26.905,-5.849],[-11.698,-11.698]],"o":[[26.905,5.849],[8.947,8.947]],"v":[[-12.642,-129.291],[50.525,-95.953]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[-26.905,-5.849],[-11.698,-11.698]],"o":[[26.905,5.849],[8.947,8.947]],"v":[[-12.642,-129.291],[50.525,-95.953]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":158,"s":[{"i":[[-17.721,-21.072],[-2.787,-16.658]],"o":[[9.064,10.778],[2.088,12.479]],"v":[[-26.811,-119.08],[-9.848,-60.529]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[-17.721,-21.072],[-2.787,-16.658]],"o":[[9.064,10.778],[2.088,12.479]],"v":[[-26.811,-119.08],[-9.848,-60.529]],"c":false}]},{"t":200,"s":[{"i":[[-26.905,-5.849],[-11.698,-11.698]],"o":[[26.905,5.849],[8.947,8.947]],"v":[[-12.642,-129.291],[50.525,-95.953]],"c":false}]}]},"nm":"Path 4","hd":false},{"ind":4,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":68,"s":[{"i":[[-26.905,-5.849],[-11.698,-11.698]],"o":[[26.905,5.849],[8.947,8.947]],"v":[[-57.678,-118.763],[5.49,-85.425]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":80,"s":[{"i":[[-26.905,-5.849],[-14.14,-22.007]],"o":[[26.905,5.849],[6.84,10.645]],"v":[[-57.678,-118.763],[11.028,-74.324]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":100,"s":[{"i":[[-26.905,-5.849],[-14.14,-22.007]],"o":[[26.905,5.849],[6.84,10.645]],"v":[[-57.678,-118.763],[11.028,-74.324]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":114,"s":[{"i":[[-26.905,-5.849],[-11.698,-11.698]],"o":[[26.905,5.849],[8.947,8.947]],"v":[[-57.678,-118.763],[5.49,-85.425]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[-26.905,-5.849],[-11.698,-11.698]],"o":[[26.905,5.849],[8.947,8.947]],"v":[[-57.678,-118.763],[5.49,-85.425]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":158,"s":[{"i":[[-16.495,-22.045],[-2.613,-12]],"o":[[9.824,13.129],[2.692,12.363]],"v":[[-95.482,-104.536],[-68.945,-49.037]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[-16.495,-22.045],[-2.613,-12]],"o":[[9.824,13.129],[2.692,12.363]],"v":[[-95.482,-104.536],[-68.945,-49.037]],"c":false}]},{"t":200,"s":[{"i":[[-26.905,-5.849],[-11.698,-11.698]],"o":[[26.905,5.849],[8.947,8.947]],"v":[[-57.678,-118.763],[5.49,-85.425]],"c":false}]}]},"nm":"Path 5","hd":false},{"ind":5,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":68,"s":[{"i":[[-26.32,-5.849],[-8.773,-9.358]],"o":[[26.32,5.849],[8.773,9.358]],"v":[[37.073,-132.215],[106.674,-101.217]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":80,"s":[{"i":[[-26.32,-5.849],[-13.55,-22.627]],"o":[[26.32,5.849],[6.59,11.005]],"v":[[37.073,-132.215],[109.288,-89.439]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":100,"s":[{"i":[[-26.32,-5.849],[-13.55,-22.627]],"o":[[26.32,5.849],[6.59,11.005]],"v":[[37.073,-132.215],[109.288,-89.439]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":114,"s":[{"i":[[-26.32,-5.849],[-8.773,-9.358]],"o":[[26.32,5.849],[8.773,9.358]],"v":[[37.073,-132.215],[106.674,-101.217]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[-26.32,-5.849],[-8.773,-9.358]],"o":[[26.32,5.849],[8.773,9.358]],"v":[[37.073,-132.215],[106.674,-101.217]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":158,"s":[{"i":[[-12.053,-24.118],[1.008,-19.596]],"o":[[7.824,15.655],[-0.659,12.811]],"v":[[35.966,-127.876],[41.414,-71.915]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[-12.053,-24.118],[1.008,-19.596]],"o":[[7.824,15.655],[-0.659,12.811]],"v":[[35.966,-127.876],[41.414,-71.915]],"c":false}]},{"t":200,"s":[{"i":[[-26.32,-5.849],[-8.773,-9.358]],"o":[[26.32,5.849],[8.773,9.358]],"v":[[37.073,-132.215],[106.674,-101.217]],"c":false}]}]},"nm":"Path 6","hd":false},{"ind":6,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":68,"s":[{"i":[[-36.267,0],[-5.849,-5.264]],"o":[[36.263,0],[5.849,5.264]],"v":[[-104.468,-104.141],[-37.207,-76.652]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":80,"s":[{"i":[[-36.267,0],[-10.985,-13.603]],"o":[[36.263,0],[4.944,6.122]],"v":[[-104.468,-104.141],[-32.708,-66.531]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":100,"s":[{"i":[[-36.267,0],[-10.985,-13.603]],"o":[[36.263,0],[4.944,6.122]],"v":[[-104.468,-104.141],[-32.708,-66.531]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":114,"s":[{"i":[[-36.267,0],[-5.849,-5.264]],"o":[[36.263,0],[5.849,5.264]],"v":[[-104.468,-104.141],[-37.207,-76.652]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[-36.267,0],[-5.849,-5.264]],"o":[[36.263,0],[5.849,5.264]],"v":[[-104.468,-104.141],[-37.207,-76.652]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":158,"s":[{"i":[[-26.525,-24.734],[-4.837,-10.688]],"o":[[13.719,12.793],[3.244,7.169]],"v":[[-147.599,-86.215],[-120.17,-42.085]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[-26.525,-24.734],[-4.837,-10.688]],"o":[[13.719,12.793],[3.244,7.169]],"v":[[-147.599,-86.215],[-120.17,-42.085]],"c":false}]},{"t":200,"s":[{"i":[[-36.267,0],[-5.849,-5.264]],"o":[[36.263,0],[5.849,5.264]],"v":[[-104.468,-104.141],[-37.207,-76.652]],"c":false}]}]},"nm":"Path 7","hd":false},{"ind":7,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[7.416,46.618],[16.137,24.206],[-7.06,-56.48]],"o":[[-7.06,-44.377],[27.736,6.556],[7.561,60.487]],"v":[[-49.149,-120.382],[-78.397,-217.205],[-17.379,-128.451]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":158,"s":[{"i":[[7.533,46.599],[-14.397,20.535],[-7.06,-56.48]],"o":[[-10.167,-62.892],[6.093,13.689],[7.561,60.487]],"v":[[-89.526,-108.691],[-85.733,-215.641],[-54.696,-114.332]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[7.533,46.599],[-14.397,20.535],[-7.06,-56.48]],"o":[[-10.167,-62.892],[6.093,13.689],[7.561,60.487]],"v":[[-89.526,-108.691],[-85.733,-215.641],[-54.696,-114.332]],"c":false}]},{"t":200,"s":[{"i":[[7.416,46.618],[16.137,24.206],[-7.06,-56.48]],"o":[[-7.06,-44.377],[27.736,6.556],[7.561,60.487]],"v":[[-49.149,-120.382],[-78.397,-217.205],[-17.379,-128.451]],"c":false}]}]},"nm":"Path 8","hd":false},{"ind":8,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[12.584,45.496],[-6.051,15.633],[-17.146,-58.497]],"o":[[-13.111,-47.403],[48.411,1.009],[17.146,58.497]],"v":[[-79.91,-111.305],[-78.397,-217.205],[20.947,-130.972]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":158,"s":[{"i":[[6.518,46.752],[-13.737,11.667],[-17.146,-58.497]],"o":[[-10.814,-77.558],[34.105,8.652],[17.146,58.497]],"v":[[-127.416,-97.073],[-85.733,-215.641],[-14.964,-122.281]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[6.518,46.752],[-13.737,11.667],[-17.146,-58.497]],"o":[[-10.814,-77.558],[34.105,8.652],[17.146,58.497]],"v":[[-127.416,-97.073],[-85.733,-215.641],[-14.964,-122.281]],"c":false}]},{"t":200,"s":[{"i":[[12.584,45.496],[-6.051,15.633],[-17.146,-58.497]],"o":[[-13.111,-47.403],[48.411,1.009],[17.146,58.497]],"v":[[-79.91,-111.305],[-78.397,-217.205],[20.947,-130.972]],"c":false}]}]},"nm":"Path 9","hd":false},{"ind":9,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[8.444,46.443],[-26.727,31.77],[-17.146,-58.497]],"o":[[-9.077,-49.924],[48.411,1.009],[17.146,58.497]],"v":[[-108.655,-102.228],[-78.397,-217.205],[49.187,-132.485]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":158,"s":[{"i":[[6.306,46.781],[-33.262,23.018],[-19.448,-69.273]],"o":[[-10.72,-79.524],[48.411,1.009],[16.476,58.689]],"v":[[-157.483,-84.625],[-85.733,-215.641],[17.258,-126.701]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[6.306,46.781],[-33.262,23.018],[-19.448,-69.273]],"o":[[-10.72,-79.524],[48.411,1.009],[16.476,58.689]],"v":[[-157.483,-84.625],[-85.733,-215.641],[17.258,-126.701]],"c":false}]},{"t":200,"s":[{"i":[[8.444,46.443],[-26.727,31.77],[-17.146,-58.497]],"o":[[-9.077,-49.924],[48.411,1.009],[17.146,58.497]],"v":[[-108.655,-102.228],[-78.397,-217.205],[49.187,-132.485]],"c":false}]}]},"nm":"Path 10","hd":false},{"ind":10,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[-33.262,23.018],[-18.998,-64.768]],"o":[[48.411,1.009],[17.158,58.494]],"v":[[-75.361,-217.345],[64.343,-134.615]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":158,"s":[{"i":[[-33.262,23.018],[-18.998,-64.768]],"o":[[48.411,1.009],[17.158,58.494]],"v":[[-68.272,-215.274],[47.433,-129.046]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[-33.262,23.018],[-18.998,-64.768]],"o":[[48.411,1.009],[17.158,58.494]],"v":[[-68.272,-215.274],[47.433,-129.046]],"c":false}]},{"t":200,"s":[{"i":[[-33.262,23.018],[-18.998,-64.768]],"o":[[48.411,1.009],[17.158,58.494]],"v":[[-75.361,-217.345],[64.343,-134.615]],"c":false}]}]},"nm":"Path 12","hd":false},{"ind":11,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[7.564,49.924],[-75.139,39.334],[-8.069,-46.394]],"o":[[-7.564,-49.924],[-58.497,27.736],[8.652,49.747]],"v":[[-171.186,-79.535],[-84.953,-215.692],[-146.476,-87.604]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":158,"s":[{"i":[[6.947,50.014],[-75.139,39.334],[-12.637,-82.602]],"o":[[-8.144,-58.636],[-58.497,27.736],[7.636,49.913]],"v":[[-189.839,-68.883],[-92.288,-214.128],[-188.538,-69.384]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[6.947,50.014],[-75.139,39.334],[-12.637,-82.602]],"o":[[-8.144,-58.636],[-58.497,27.736],[7.636,49.913]],"v":[[-189.839,-68.883],[-92.288,-214.128],[-188.538,-69.384]],"c":false}]},{"t":200,"s":[{"i":[[7.564,49.924],[-75.139,39.334],[-8.069,-46.394]],"o":[[-7.564,-49.924],[-58.497,27.736],[8.652,49.747]],"v":[[-171.186,-79.535],[-84.953,-215.692],[-146.476,-87.604]],"c":false}]}]},"nm":"Path 11","hd":false},{"ty":"st","c":{"a":0,"k":[0.513725490196,0.321568627451,0.180392156863,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":3},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 3","bm":0,"hd":false}],"ip":0,"op":300,"st":0,"bm":0},{"ddd":0,"ind":18,"ty":4,"nm":"hat","parent":13,"sr":1,"ks":{"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":68,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":80,"s":[7.966]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":100,"s":[7.966]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":114,"s":[9.038]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":140,"s":[9.038]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":158,"s":[9.038]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":184,"s":[9.038]},{"t":200,"s":[0]}]},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":68,"s":[-47.404,-118.425,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"t":80,"s":[-44.447,-118.425,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":100,"s":[-44.447,-118.425,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"t":114,"s":[-54.168,-116.535,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[-54.168,-116.535,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"t":158,"s":[-4.389,-119.194,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[-4.389,-119.194,0],"to":[0,0,0],"ti":[0,0,0]},{"t":200,"s":[-47.404,-118.425,0]}]},"a":{"a":0,"k":[-47.404,-118.425,0]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":68,"s":[{"i":[[0,0],[-54.526,-13.862],[-6.075,-13.452],[53.373,-2.604]],"o":[[35.582,-22.564],[25.602,6.509],[-39.054,-19.961],[-53.373,2.604]],"v":[[-123.824,-93.176],[78.58,-127.696],[136.503,-92.443],[-51.557,-73.328]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":80,"s":[{"i":[[0,0],[-54.526,-13.862],[-6.075,-13.452],[53.373,-2.604]],"o":[[35.582,-22.564],[25.602,6.509],[-39.054,-19.961],[-53.373,2.604]],"v":[[-123.824,-93.176],[78.58,-127.696],[137.247,-82.637],[-50.812,-63.522]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":100,"s":[{"i":[[0,0],[-54.526,-13.862],[-6.075,-13.452],[53.373,-2.604]],"o":[[35.582,-22.564],[25.602,6.509],[-39.054,-19.961],[-53.373,2.604]],"v":[[-123.824,-93.176],[78.58,-127.696],[137.247,-82.637],[-50.812,-63.522]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":114,"s":[{"i":[[0,0],[-54.526,-13.862],[-6.075,-13.452],[53.373,-2.604]],"o":[[35.582,-22.564],[25.602,6.509],[-39.054,-19.961],[-53.373,2.604]],"v":[[-123.824,-93.176],[78.58,-127.696],[136.503,-92.443],[-51.557,-73.328]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[0,0],[-54.526,-13.862],[-6.075,-13.452],[53.373,-2.604]],"o":[[35.582,-22.564],[25.602,6.509],[-39.054,-19.961],[-53.373,2.604]],"v":[[-123.824,-93.176],[78.58,-127.696],[136.503,-92.443],[-51.557,-73.328]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":158,"s":[{"i":[[0,0],[-54.526,-13.862],[30.754,-6.442],[53.364,-2.788]],"o":[[35.582,-22.564],[4.181,14.748],[-36.021,7.545],[-29.912,1.563]],"v":[[-186.877,-70.488],[70.282,-125.927],[54.177,-76.427],[-137.657,-39.051]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[0,0],[-54.526,-13.862],[30.754,-6.442],[53.364,-2.788]],"o":[[35.582,-22.564],[4.181,14.748],[-36.021,7.545],[-29.912,1.563]],"v":[[-186.877,-70.488],[70.282,-125.927],[54.177,-76.427],[-137.657,-39.051]],"c":true}]},{"t":200,"s":[{"i":[[0,0],[-54.526,-13.862],[-6.075,-13.452],[53.373,-2.604]],"o":[[35.582,-22.564],[25.602,6.509],[-39.054,-19.961],[-53.373,2.604]],"v":[[-123.824,-93.176],[78.58,-127.696],[136.503,-92.443],[-51.557,-73.328]],"c":true}]}]},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[0.511786247702,0.321371818991,0.179668082443,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":8},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"fl","c":{"a":0,"k":[0.843137264252,0.623529434204,0.43137255311,1]},"o":{"a":0,"k":100},"r":1,"bm":0,"nm":"Fill 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 1","bm":0,"hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":68,"s":[{"i":[[15.392,-27.972],[-69.503,26.122]],"o":[[-1.824,-33.93],[-31.499,29.545]],"v":[[-231.245,5.52],[-127.994,-93.176]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":80,"s":[{"i":[[15.392,-27.972],[-69.503,26.122]],"o":[[-1.824,-33.93],[-31.499,29.545]],"v":[[-232.145,-7.387],[-127.994,-93.176]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":100,"s":[{"i":[[15.392,-27.972],[-69.503,26.122]],"o":[[-1.824,-33.93],[-31.499,29.545]],"v":[[-232.145,-7.387],[-127.994,-93.176]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":114,"s":[{"i":[[15.392,-27.972],[-69.503,26.122]],"o":[[-1.824,-33.93],[-31.499,29.545]],"v":[[-231.245,5.52],[-127.994,-93.176]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[15.392,-27.972],[-69.503,26.122]],"o":[[-1.824,-33.93],[-31.499,29.545]],"v":[[-231.245,5.52],[-127.994,-93.176]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":158,"s":[{"i":[[-0.526,-17.111],[-7.668,4.218]],"o":[[-1.31,-17.201],[-9.81,12.119]],"v":[[-196.6,-16.641],[-188.397,-70.027]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[-0.526,-17.111],[-7.668,4.218]],"o":[[-1.31,-17.201],[-9.81,12.119]],"v":[[-196.6,-16.641],[-188.397,-70.027]],"c":true}]},{"t":200,"s":[{"i":[[15.392,-27.972],[-69.503,26.122]],"o":[[-1.824,-33.93],[-31.499,29.545]],"v":[[-231.245,5.52],[-127.994,-93.176]],"c":true}]}]},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[0.511786247702,0.321371818991,0.179668082443,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":8},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"fl","c":{"a":0,"k":[0.843137264252,0.623529434204,0.43137255311,1]},"o":{"a":0,"k":100},"r":1,"bm":0,"nm":"Fill 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 2","bm":0,"hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[-22.998,21.696],[-9.113,-102.841],[-32.979,14.32]],"o":[[-58.58,20.395],[36.016,-27.771],[-13.452,-68.127]],"v":[[-80.671,-217.954],[-193.059,-47.854],[-127.994,-93.176]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":158,"s":[{"i":[[-47.535,16.771],[-9.113,-102.841],[-2.975,6.932]],"o":[[-58.58,20.395],[1.368,-7.08],[-4.797,-93.906]],"v":[[-88.467,-216.153],[-195.958,-48.256],[-192.362,-65.858]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[-47.535,16.771],[-9.113,-102.841],[-2.975,6.932]],"o":[[-58.58,20.395],[1.368,-7.08],[-4.797,-93.906]],"v":[[-88.467,-216.153],[-195.958,-48.256],[-192.362,-65.858]],"c":true}]},{"t":200,"s":[{"i":[[-22.998,21.696],[-9.113,-102.841],[-32.979,14.32]],"o":[[-58.58,20.395],[36.016,-27.771],[-13.452,-68.127]],"v":[[-80.671,-217.954],[-193.059,-47.854],[-127.994,-93.176]],"c":true}]}]},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[0.511786247702,0.321371818991,0.179668082443,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":8},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"fl","c":{"a":0,"k":[0.843137264252,0.623529434204,0.43137255311,1]},"o":{"a":0,"k":100},"r":1,"bm":0,"nm":"Fill 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 3","bm":0,"hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[-40.789,-5.641],[72.9,-6.943],[-11.839,-56.909]],"o":[[-18.225,-59.448],[-33.846,29.507],[35.582,-13.886]],"v":[[67.298,-128.13],[-80.671,-217.954],[-127.994,-93.176]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":158,"s":[{"i":[[-40.789,-5.641],[72.9,-6.943],[-7.88,-81.998]],"o":[[-18.225,-59.448],[-50.796,14.643],[35.582,-13.886]],"v":[[67.298,-128.13],[-88.467,-216.153],[-192.832,-68.061]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[-40.789,-5.641],[72.9,-6.943],[-7.88,-81.998]],"o":[[-18.225,-59.448],[-50.796,14.643],[35.582,-13.886]],"v":[[67.298,-128.13],[-88.467,-216.153],[-192.832,-68.061]],"c":true}]},{"t":200,"s":[{"i":[[-40.789,-5.641],[72.9,-6.943],[-11.839,-56.909]],"o":[[-18.225,-59.448],[-33.846,29.507],[35.582,-13.886]],"v":[[67.298,-128.13],[-80.671,-217.954],[-127.994,-93.176]],"c":true}]}]},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[0.511786247702,0.321371818991,0.179668082443,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":8},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"fl","c":{"a":0,"k":[0.843137264252,0.623529434204,0.43137255311,1]},"o":{"a":0,"k":100},"r":1,"bm":0,"nm":"Fill 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 4","bm":0,"hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"t":100,"s":[{"i":[[16.848,-22.693],[0.708,10.888],[-32.125,-20.946],[3.87,11.663]],"o":[[-36.45,9.98],[-0.903,-13.883],[29.507,3.038],[-4.216,-12.705]],"v":[[-80.671,-218.821],[-137.516,-223.161],[-80.671,-217.954],[-32.505,-236.179]],"c":true}]},{"i":{"x":0.833,"y":1},"o":{"x":0.167,"y":0},"t":114,"s":[{"i":[[9.996,-26.437],[3.66,10.278],[-36.63,-11.356],[6.914,10.159]],"o":[[-32.328,19.573],[-4.668,-13.107],[29.212,-5.152],[-7.532,-11.067]],"v":[[-78.033,-219.986],[-133.896,-208.606],[-77.795,-219.151],[-36.454,-249.86]],"c":true}]},{"i":{"x":0.833,"y":1},"o":{"x":0.167,"y":0},"t":140,"s":[{"i":[[9.996,-26.437],[3.66,10.278],[-36.63,-11.356],[6.914,10.159]],"o":[[-32.328,19.573],[-4.668,-13.107],[29.212,-5.152],[-7.532,-11.067]],"v":[[-78.033,-219.986],[-133.896,-208.606],[-77.795,-219.151],[-36.454,-249.86]],"c":true}]},{"i":{"x":0.833,"y":1},"o":{"x":0.167,"y":0},"t":158,"s":[{"i":[[16.646,-22.841],[0.805,10.881],[-32.31,-20.66],[3.973,11.629]],"o":[[-36.36,10.303],[-1.026,-13.875],[29.533,2.776],[-4.329,-12.668]],"v":[[-87.485,-217.129],[-145.015,-227.012],[-87.477,-216.261],[-39.475,-234.912]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0},"t":184,"s":[{"i":[[16.646,-22.841],[0.805,10.881],[-32.31,-20.66],[3.973,11.629]],"o":[[-36.36,10.303],[-1.026,-13.875],[29.533,2.776],[-4.329,-12.668]],"v":[[-87.485,-217.129],[-145.015,-227.012],[-87.477,-216.261],[-39.475,-234.912]],"c":true}]},{"t":200,"s":[{"i":[[16.848,-22.693],[0.708,10.888],[-32.125,-20.946],[3.87,11.663]],"o":[[-36.45,9.98],[-0.903,-13.883],[29.507,3.038],[-4.216,-12.705]],"v":[[-80.671,-218.821],[-137.516,-223.161],[-80.671,-217.954],[-32.505,-236.179]],"c":true}]}]},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[0.20000000298,0.050980392843,0.086274512112,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":8},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 5","bm":0,"hd":false}],"ip":0,"op":300,"st":0,"bm":0},{"ddd":0,"ind":19,"ty":4,"nm":"bl","parent":20,"sr":1,"ks":{"p":{"a":0,"k":[-52.629,-26.409,0]},"a":{"a":0,"k":[-52.629,-26.409,0]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":68,"s":[{"i":[[0,-29.404],[-15.676,-15.205]],"o":[[0,23.578],[0,0]],"v":[[-170.512,-31.264],[-145.487,27.486]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":80,"s":[{"i":[[2.549,-29.293],[-15.676,-15.205]],"o":[[-3.132,35.993],[0,0]],"v":[[-171.005,-45.753],[-145.487,27.486]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":100,"s":[{"i":[[2.549,-29.293],[-15.676,-15.205]],"o":[[-3.132,35.993],[0,0]],"v":[[-171.005,-45.753],[-145.487,27.486]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":114,"s":[{"i":[[6.103,-28.763],[-15.676,-15.205]],"o":[[-9.551,45.014],[0,0]],"v":[[-169.927,-61.354],[-145.487,27.486]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[6.103,-28.763],[-15.676,-15.205]],"o":[[-9.551,45.014],[0,0]],"v":[[-169.927,-61.354],[-145.487,27.486]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":158,"s":[{"i":[[3.495,-29.195],[-15.676,-15.205]],"o":[[-3.367,28.123],[0,0]],"v":[[-168.488,-40.42],[-145.487,27.486]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[3.495,-29.195],[-15.676,-15.205]],"o":[[-3.367,28.123],[0,0]],"v":[[-168.488,-40.42],[-145.487,27.486]],"c":false}]},{"t":200,"s":[{"i":[[0,-29.404],[-15.676,-15.205]],"o":[[0,23.578],[0,0]],"v":[[-170.512,-31.264],[-145.487,27.486]],"c":false}]}]},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":8},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":60,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":72,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":84,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":96,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":108,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":120,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":132,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":144,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":156,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":168,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":180,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":192,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":204,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":216,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":228,"s":[0]},{"t":240,"s":[5]}]},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":60,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":72,"s":[95]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":84,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":96,"s":[95]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":108,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":120,"s":[95]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":132,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":144,"s":[95]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":156,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":168,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":180,"s":[95]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":192,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":204,"s":[95]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":216,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":228,"s":[95]},{"t":240,"s":[100]}]},"o":{"a":0,"k":0},"m":1,"nm":"Trim Paths 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 1","bm":0,"hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":68,"s":[{"i":[[0,0],[5.434,10.152]],"o":[[-2.201,-10.956],[-6.376,-11.912]],"v":[[65.253,-48.412],[53.695,-80.305]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":80,"s":[{"i":[[0,0],[-0.253,11.512]],"o":[[3.465,-10.624],[0.297,-13.507]],"v":[[63.196,2.846],[68.793,-30.612]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":100,"s":[{"i":[[0,0],[-0.253,11.512]],"o":[[3.465,-10.624],[0.297,-13.507]],"v":[[63.196,2.846],[68.793,-30.612]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":114,"s":[{"i":[[0,0],[1.138,18.195]],"o":[[3.465,-10.624],[-0.843,-13.484]],"v":[[67.417,-7.47],[70.729,-47.35]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[0,0],[1.138,18.195]],"o":[[3.465,-10.624],[-0.843,-13.484]],"v":[[67.417,-7.47],[70.729,-47.35]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":158,"s":[{"i":[[0,0],[1.392,7.685]],"o":[[3.465,-10.624],[-2.408,-13.294]],"v":[[67.417,-7.47],[69.733,-37.744]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[0,0],[1.392,7.685]],"o":[[3.465,-10.624],[-2.408,-13.294]],"v":[[67.417,-7.47],[69.733,-37.744]],"c":false}]},{"t":200,"s":[{"i":[[0,0],[5.434,10.152]],"o":[[-2.201,-10.956],[-6.376,-11.912]],"v":[[65.253,-48.412],[53.695,-80.305]],"c":false}]}]},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[0.988235294118,0.933333333333,0.129411764706,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":8},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":60,"s":[20]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":72,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":84.834,"s":[20]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":97.666,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":110.5,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":123.334,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":136.166,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":149,"s":[20]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":161.834,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":174.666,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":187.5,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":200.334,"s":[20]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":213.166,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":226,"s":[10]},{"t":240,"s":[20]}]},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":60,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":72,"s":[80]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":84.834,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":97.666,"s":[70]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":110.5,"s":[90]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":123.334,"s":[80]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":136.166,"s":[80]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":149,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":161.834,"s":[70]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":174.666,"s":[90]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":187.5,"s":[80]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":200.334,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":213.166,"s":[70]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":226,"s":[90]},{"t":240,"s":[100]}]},"o":{"a":0,"k":0},"m":1,"nm":"Trim Paths 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 1","bm":0,"hd":false}],"ip":0,"op":300,"st":0,"bm":0},{"ddd":0,"ind":20,"ty":4,"nm":"head","parent":23,"sr":1,"ks":{"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":68,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":80,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":100,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":114,"s":[7]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":140,"s":[7]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":158,"s":[3]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":184,"s":[3]},{"t":200,"s":[0]}]},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":68,"s":[-51.557,48.045,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"t":80,"s":[-31.842,48.045,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"t":100,"s":[-31.842,48.045,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"t":114,"s":[-31.842,48.045,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[-31.842,48.045,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"t":158,"s":[-51.808,68.205,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[-51.808,68.205,0],"to":[0,0,0],"ti":[0,0,0]},{"t":200,"s":[-51.557,48.045,0]}]},"a":{"a":0,"k":[-51.557,48.045,0]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":68,"s":[{"i":[[0,0],[0,32.374],[-76.932,0],[0,-68.773],[23.65,-19.591]],"o":[[-23.949,-19.745],[0,-68.773],[76.931,0],[0,32.461],[0,0]],"v":[[-152.996,48.045],[-190.852,-31.672],[-51.556,-168.145],[87.739,-31.672],[50.112,47.854]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":80,"s":[{"i":[[0,0],[-1.695,32.329],[-76.826,-4.029],[3.602,-73.333],[25.522,-14]],"o":[[-22.882,-20.972],[3.602,-68.679],[76.825,4.029],[-1.7,34.614],[0,0]],"v":[[-156.075,45.152],[-189.706,-36.438],[-43.454,-165.43],[88.504,-17.195],[42.763,64]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":100,"s":[{"i":[[0,0],[-1.695,32.329],[-76.826,-4.029],[3.602,-73.333],[25.522,-14]],"o":[[-22.882,-20.972],[3.602,-68.679],[76.825,4.029],[-1.7,34.614],[0,0]],"v":[[-156.075,45.152],[-189.706,-36.438],[-43.454,-165.43],[88.504,-17.195],[42.763,64]],"c":false}]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"t":114,"s":[{"i":[[0,0],[0,32.374],[-76.932,0],[0,-68.773],[23.65,-19.591]],"o":[[-23.949,-19.745],[0,-68.773],[76.931,0],[0,32.461],[0,0]],"v":[[-152.996,48.045],[-190.852,-31.672],[-51.556,-168.145],[87.739,-31.672],[50.112,47.854]],"c":false}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0},"t":140,"s":[{"i":[[0,0],[0,32.374],[-76.932,0],[0,-68.773],[23.65,-19.591]],"o":[[-23.949,-19.745],[0,-68.773],[76.931,0],[0,32.461],[0,0]],"v":[[-152.996,48.045],[-190.852,-31.672],[-51.556,-168.145],[87.739,-31.672],[50.112,47.854]],"c":false}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":158,"s":[{"i":[[0,0],[0,32.374],[-76.932,0],[0,-68.773],[23.65,-19.591]],"o":[[-23.949,-19.745],[0,-68.773],[76.931,0],[0,32.461],[0,0]],"v":[[-152.996,48.045],[-188.36,-31.803],[-51.556,-168.145],[87.739,-31.672],[50.112,47.854]],"c":false}]},{"i":{"x":0.833,"y":1},"o":{"x":0.167,"y":0.167},"t":184,"s":[{"i":[[0,0],[0,32.374],[-76.932,0],[0,-68.773],[23.65,-19.591]],"o":[[-23.949,-19.745],[0,-68.773],[76.931,0],[0,32.461],[0,0]],"v":[[-152.996,48.045],[-188.36,-31.803],[-51.556,-168.145],[87.739,-31.672],[50.112,47.854]],"c":false}]},{"t":200,"s":[{"i":[[0,0],[0,32.374],[-76.932,0],[0,-68.773],[23.65,-19.591]],"o":[[-23.949,-19.745],[0,-68.773],[76.931,0],[0,32.461],[0,0]],"v":[[-152.996,48.045],[-190.852,-31.672],[-51.556,-168.145],[87.739,-31.672],[50.112,47.854]],"c":false}]}]},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[0.980392158031,0.564705908298,0.086274512112,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":10},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.835294127464,0.152941182256,1]},"o":{"a":0,"k":100},"r":1,"bm":0,"nm":"Fill 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 1","bm":0,"hd":false}],"ip":0,"op":300,"st":0,"bm":0},{"ddd":0,"ind":21,"ty":4,"nm":"hat","parent":18,"sr":1,"ks":{"p":{"a":0,"k":[-47.11,-53.437,0]},"a":{"a":0,"k":[-47.11,-53.437,0]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"t":68,"s":[{"i":[[86.352,-27.771],[8.679,28.205],[-82.88,37.318],[-8.427,-35.003]],"o":[[-41.863,13.463],[-4.361,-14.174],[82.88,-37.318],[5.641,23.432]],"v":[[-55.937,-7.498],[-231.245,5.52],[-103.67,-102.529],[137.088,-90.689]],"c":true}]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"t":80,"s":[{"i":[[86.352,-27.771],[8.679,28.205],[-82.88,37.318],[-8.427,-35.003]],"o":[[-41.863,13.463],[-4.361,-14.174],[82.88,-37.318],[5.641,23.432]],"v":[[-55.937,-7.498],[-231.946,-7.398],[-103.67,-102.529],[136.553,-82.368]],"c":true}]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"t":100,"s":[{"i":[[86.352,-27.771],[8.679,28.205],[-82.88,37.318],[-8.427,-35.003]],"o":[[-41.863,13.463],[-4.361,-14.174],[82.88,-37.318],[5.641,23.432]],"v":[[-55.937,-7.498],[-231.946,-7.398],[-103.67,-102.529],[136.553,-82.368]],"c":true}]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"t":114,"s":[{"i":[[86.352,-27.771],[8.679,28.205],[-82.88,37.318],[-8.427,-35.003]],"o":[[-41.863,13.463],[-4.361,-14.174],[82.88,-37.318],[5.641,23.432]],"v":[[-55.937,-7.498],[-231.245,5.52],[-103.67,-102.529],[137.088,-90.689]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[86.352,-27.771],[8.679,28.205],[-82.88,37.318],[-8.427,-35.003]],"o":[[-41.863,13.463],[-4.361,-14.174],[82.88,-37.318],[5.641,23.432]],"v":[[-55.937,-7.498],[-231.245,5.52],[-103.67,-102.529],[137.088,-90.689]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":148,"s":[{"i":[[86.352,-27.771],[8.679,28.205],[-87.658,31.247],[-8.427,-35.003]],"o":[[-41.863,13.463],[-4.361,-14.174],[85.165,-30.645],[5.641,23.432]],"v":[[-55.937,-7.498],[-214.85,1.06],[-103.67,-102.529],[103.731,-89.814]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":158,"s":[{"i":[[86.352,-27.771],[8.679,28.205],[-94.338,22.759],[-8.427,-35.003]],"o":[[-41.863,13.463],[-4.361,-14.174],[88.359,-21.317],[5.641,23.432]],"v":[[-55.938,-7.498],[-194.634,-4.689],[-103.67,-102.529],[69.005,-82.074]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[86.352,-27.771],[8.679,28.205],[-94.338,22.759],[-8.427,-35.003]],"o":[[-41.863,13.463],[-4.361,-14.174],[88.359,-21.317],[5.641,23.432]],"v":[[-55.937,-7.498],[-194.634,-4.689],[-103.67,-102.529],[69.005,-82.074]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":191,"s":[{"i":[[86.352,-27.771],[8.679,28.205],[-89.678,28.681],[-8.427,-35.003]],"o":[[-41.863,13.464],[-4.361,-14.174],[86.131,-27.825],[5.641,23.432]],"v":[[-55.937,-7.498],[-207.921,-0.825],[-103.67,-102.529],[91.371,-88.691]],"c":true}]},{"t":200,"s":[{"i":[[86.352,-27.771],[8.679,28.205],[-82.88,37.318],[-8.427,-35.003]],"o":[[-41.863,13.463],[-4.361,-14.174],[82.88,-37.318],[5.641,23.432]],"v":[[-55.937,-7.498],[-231.245,5.52],[-103.67,-102.529],[137.088,-90.689]],"c":true}]}]},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[0.513725490196,0.321568627451,0.180392156863,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":8},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"fl","c":{"a":0,"k":[0.543997970282,0.357340584549,0.225831963034,1]},"o":{"a":0,"k":100},"r":1,"bm":0,"nm":"Fill 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 1","bm":0,"hd":false}],"ip":0,"op":300,"st":0,"bm":0},{"ddd":0,"ind":22,"ty":4,"nm":"bl 2","parent":23,"sr":1,"ks":{},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-0.843,28.658],[0,0]],"o":[[0.843,-28.658],[0,0]],"v":[[-167.357,135.684],[-157.242,85.112]],"c":false}},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":8},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":60,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":72,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":84,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":96,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":108,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":120,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":132,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":144,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":156,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":168,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":180,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":192,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":204,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":216,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":228,"s":[0]},{"t":240,"s":[5]}]},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":60,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":72,"s":[95]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":84,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":96,"s":[95]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":108,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":120,"s":[95]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":132,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":144,"s":[95]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":156,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":168,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":180,"s":[95]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":192,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":204,"s":[95]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":216,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":228,"s":[95]},{"t":240,"s":[100]}]},"o":{"a":0,"k":0},"m":1,"nm":"Trim Paths 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 1","bm":0,"hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[11.029,3.102],[6.438,7.684]],"o":[[-13.432,-3.778],[0,0]],"v":[[-130.953,180.023],[-161.823,163.043]],"c":false}},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[0.988235294819,0.933333337307,0.129411771894,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":8},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":60,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":72,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":84,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":96,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":108,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":120,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":132,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":144,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":156,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":168,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":180,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":192,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":204,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":216,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":228,"s":[0]},{"t":240,"s":[5]}]},"e":{"a":1,"k":[{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":60,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":72,"s":[95]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":84,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":96,"s":[95]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":108,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":120,"s":[95]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":132,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":144,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":156,"s":[95]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":168,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":180,"s":[95]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":192,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":204,"s":[95]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":216,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":228,"s":[95]},{"t":240,"s":[100]}]},"o":{"a":0,"k":0},"m":1,"nm":"Trim Paths 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 2","bm":0,"hd":false}],"ip":0,"op":300,"st":0,"bm":0},{"ddd":0,"ind":23,"ty":4,"nm":"body","parent":1,"sr":1,"ks":{"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[-45.494,205.212,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"t":158,"s":[-15.494,205.212,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[-15.494,205.212,0],"to":[0,0,0],"ti":[0,0,0]},{"t":200,"s":[-45.494,205.212,0]}]},"a":{"a":0,"k":[-45.494,205.212,0]},"s":{"a":1,"k":[{"i":{"x":[0.595,0.595,0.595],"y":[1,1,1]},"o":{"x":[0.254,0.254,0.254],"y":[0,0,0]},"t":68,"s":[100,100,100]},{"i":{"x":[0.661,0.661,0.661],"y":[0.954,0.942,1]},"o":{"x":[0.29,0.29,0.29],"y":[0,0,0]},"t":76,"s":[102,95.355,100]},{"i":{"x":[0.833,0.833,0.833],"y":[1,1,1]},"o":{"x":[0.329,0.329,0.329],"y":[-0.09,0.26,0]},"t":88,"s":[100,100,100]},{"i":{"x":[0.595,0.595,0.595],"y":[1,1,1]},"o":{"x":[0.254,0.254,0.254],"y":[0,0,0]},"t":100,"s":[100,100,100]},{"i":{"x":[0.661,0.661,0.661],"y":[0.954,0.942,1]},"o":{"x":[0.29,0.29,0.29],"y":[0,0,0]},"t":108,"s":[102,95.355,100]},{"i":{"x":[0.833,0.833,0.833],"y":[1,1,1]},"o":{"x":[0.338,0.338,0.338],"y":[-0.154,0.445,0]},"t":120,"s":[100,100,100]},{"i":{"x":[0.595,0.595,0.595],"y":[1,1,1]},"o":{"x":[0.254,0.254,0.254],"y":[0,0,0]},"t":140,"s":[100,100,100]},{"i":{"x":[0.661,0.661,0.661],"y":[0.954,0.942,1]},"o":{"x":[0.29,0.29,0.29],"y":[0,0,0]},"t":148,"s":[102,95.355,100]},{"i":{"x":[0.833,0.833,0.833],"y":[1,1,1]},"o":{"x":[0.329,0.329,0.329],"y":[0,0,0]},"t":160,"s":[100,100,100]},{"i":{"x":[0.595,0.595,0.595],"y":[1,1,1]},"o":{"x":[0.254,0.254,0.254],"y":[0,0,0]},"t":184,"s":[100,100,100]},{"i":{"x":[0.661,0.661,0.661],"y":[0.954,0.942,1]},"o":{"x":[0.29,0.29,0.29],"y":[0,0,0]},"t":192,"s":[102,95.355,100]},{"t":204,"s":[100,100,100]}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[1.646,0.836],[0,0],[-2.946,-112.778],[-0.629,66.814]],"o":[[0,0],[-8.121,0.134],[1.826,69.905],[0.954,-101.238]],"v":[[38.926,20.582],[-114.066,12.715],[-183.077,154.202],[92.175,153.658]],"c":true}},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[0.980392158031,0.564705908298,0.086274512112,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":10},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.835294127464,0.152941182256,1]},"o":{"a":0,"k":100},"r":1,"bm":0,"nm":"Fill 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 1","bm":0,"hd":false}],"ip":0,"op":300,"st":0,"bm":0},{"ddd":0,"ind":24,"ty":4,"nm":"wing 2","parent":23,"sr":1,"ks":{"p":{"a":0,"k":[71,76,0]},"a":{"a":0,"k":[-109,126,0]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":68,"s":[{"i":[[0,0],[-8.57,-6.834],[31.779,2.611]],"o":[[30.987,-12.116],[23.514,18.753],[0,0]],"v":[[-116.987,130.116],[-59.014,119.247],[-115.779,169.389]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":86,"s":[{"i":[[0,0],[-8.57,-6.834],[34.687,10.569]],"o":[[38.36,8.962],[23.514,18.753],[0,0]],"v":[[-116.987,130.116],[-29.442,133.219],[-113.807,178.704]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":100,"s":[{"i":[[0,0],[-8.57,-6.834],[34.687,10.569]],"o":[[38.36,8.962],[23.514,18.753],[0,0]],"v":[[-116.987,130.116],[-29.442,133.219],[-113.807,178.704]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":114,"s":[{"i":[[0,0],[-8.57,-6.834],[31.779,2.611]],"o":[[44.484,25.593],[23.514,18.753],[0,0]],"v":[[-111.046,122.951],[-39.209,120.782],[-95.478,173.995]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[0,0],[-8.57,-6.834],[31.779,2.611]],"o":[[44.484,25.593],[23.514,18.753],[0,0]],"v":[[-111.046,122.951],[-39.209,120.782],[-95.478,173.995]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":158,"s":[{"i":[[0,0],[-5.843,-9.274],[31.779,2.611]],"o":[[39.281,-11.049],[7.375,11.705],[0,0]],"v":[[-130.512,136.005],[-68.159,138.356],[-111.95,187.05]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[0,0],[-5.843,-9.274],[31.779,2.611]],"o":[[39.281,-11.049],[7.375,11.705],[0,0]],"v":[[-130.512,136.005],[-68.159,138.356],[-111.95,187.05]],"c":false}]},{"t":199,"s":[{"i":[[0,0],[-8.57,-6.834],[31.779,2.611]],"o":[[30.987,-12.116],[23.514,18.753],[0,0]],"v":[[-116.987,130.116],[-59.014,119.247],[-115.779,169.389]],"c":false}]}]},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[0.980392158031,0.564705908298,0.086274512112,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":10},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.835294127464,0.152941182256,1]},"o":{"a":0,"k":100},"r":1,"bm":0,"nm":"Fill 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 2","bm":0,"hd":false}],"ip":0,"op":300,"st":0,"bm":0}]}
\ No newline at end of file
diff --git a/app/src/data/deviceSize.ts b/app/src/data/deviceSize.ts
deleted file mode 100644
index c150109a..00000000
--- a/app/src/data/deviceSize.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-const sizes = {
-  mobile: "480px",
-  desktop: "600px",
-};
-
-const media = {
-  mobile: `(max-width: ${sizes.desktop})`,
-  desktop: `(min-width: ${sizes.desktop})`,
-};
-export { sizes, media };
diff --git a/app/src/data/gifs.ts b/app/src/data/gifs.ts
new file mode 100644
index 00000000..87c26017
--- /dev/null
+++ b/app/src/data/gifs.ts
@@ -0,0 +1,242 @@
+export const gifs = [
+  {
+    id: "bCTbZchgFKieymYPuB",
+    title: "Happy Birthday Dancing GIF by Mickey Mouse",
+    url: "https://media1.giphy.com/media/bCTbZchgFKieymYPuB/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "jle0nmfHz4YHxsOc6d",
+    title: "Good Morning Love GIF by Pengu",
+    url: "https://media0.giphy.com/media/jle0nmfHz4YHxsOc6d/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "vVzH2XY3Y0Ar6",
+    title: "Dog Dancing GIF",
+    url: "https://media1.giphy.com/media/vVzH2XY3Y0Ar6/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "ha6vsupXjJVMZ4WJsT",
+    title: "I Love You Baby GIF by Pengu",
+    url: "https://media3.giphy.com/media/ha6vsupXjJVMZ4WJsT/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "tqj4m9BRURayxQAIW9",
+    title: "Monday Morning Cat GIF by GrowthX",
+    url: "https://media4.giphy.com/media/tqj4m9BRURayxQAIW9/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "HeArjdf9JB6uc5DEJS",
+    title: "Merry Christmas GIF by Storyful",
+    url: "https://media0.giphy.com/media/HeArjdf9JB6uc5DEJS/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "3oNMQtqpnse0dbFe06",
+    title: "Kisses And Hugs Heart GIF",
+    url: "https://media3.giphy.com/media/3oNMQtqpnse0dbFe06/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "HTbDRsSHeu97VeXcBz",
+    title: "Angry Season 2 GIF by The Office",
+    url: "https://media0.giphy.com/media/HTbDRsSHeu97VeXcBz/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "fsE2EPGU9IA0pZBPA7",
+    title: "Happy Birthday GIF by Todd Rocheford",
+    url: "https://media1.giphy.com/media/fsE2EPGU9IA0pZBPA7/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "9gkwDaCB4pmoOe73x2",
+    title: "Good Morning GIF",
+    url: "https://media0.giphy.com/media/9gkwDaCB4pmoOe73x2/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "xvGEx3cazysda",
+    title: "Water Bird GIF",
+    url: "https://media0.giphy.com/media/xvGEx3cazysda/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "rZMNNOGFCaXHluoGkI",
+    title: "Love You GIF by Teddy Too Big",
+    url: "https://media3.giphy.com/media/rZMNNOGFCaXHluoGkI/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "bbshzgyFQDqPHXBo4c",
+    title: "Dog Morning GIF",
+    url: "https://media4.giphy.com/media/bbshzgyFQDqPHXBo4c/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "26BRxeLkRqmzttSxy",
+    title: "Happy Birthday GIF",
+    url: "https://media1.giphy.com/media/26BRxeLkRqmzttSxy/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "5ZZSYqvcH6QppFQGI5",
+    title: "Monday Omg GIF by JustViral",
+    url: "https://media3.giphy.com/media/5ZZSYqvcH6QppFQGI5/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "ahZZZZFGLGhvq",
+    title: "Christmas Eve Smile GIF",
+    url: "https://media2.giphy.com/media/ahZZZZFGLGhvq/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "v65rDtklV9l6g",
+    title: "Hugs GIF",
+    url: "https://media3.giphy.com/media/v65rDtklV9l6g/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "Vb8jJpj99hxtbwTi7j",
+    title: "Happy Pixel GIF by Anne Horel",
+    url: "https://media1.giphy.com/media/Vb8jJpj99hxtbwTi7j/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "t7YnMUMYwD4cxwaN9y",
+    title: "Happy Birthday Dancing GIF by Pudgy Penguins",
+    url: "https://media2.giphy.com/media/t7YnMUMYwD4cxwaN9y/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "FnsyaPjzV7ZdNLB9sx",
+    title: "Good Morning Smile GIF by Holler Studios",
+    url: "https://media2.giphy.com/media/FnsyaPjzV7ZdNLB9sx/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "SvkTzTecFJip2",
+    title: "Iguana Running GIF",
+    url: "https://media1.giphy.com/media/SvkTzTecFJip2/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "xtnUcarKhT6sHfEZ2u",
+    title: "I Love You Animation GIF",
+    url: "https://media3.giphy.com/media/xtnUcarKhT6sHfEZ2u/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "mxjzBpyu8DDLIcEKVC",
+    title: "Good Morning Coffee GIF by 大姚Dayao",
+    url: "https://media4.giphy.com/media/mxjzBpyu8DDLIcEKVC/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "LnQoAUr1UlBCBaqjaI",
+    title: "Happy Birthday Love GIF by Hallmark Gold Crown",
+    url: "https://media0.giphy.com/media/LnQoAUr1UlBCBaqjaI/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "3o6fJbwYFe3SmVVQ4M",
+    title: "Tired Manic Monday GIF by Nebraska Humane Society",
+    url: "https://media1.giphy.com/media/3o6fJbwYFe3SmVVQ4M/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "x7gjmBuaHrWak",
+    title: "Grinch Smile GIF",
+    url: "https://media0.giphy.com/media/x7gjmBuaHrWak/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "UuB5lh1bL1Dl6svihe",
+    title: "Happy I Love You GIF by Life of a Potato",
+    url: "https://media1.giphy.com/media/UuB5lh1bL1Dl6svihe/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "YOqDymLgjWk0dg3pi3",
+    title: "Fail Birthday Cake GIF by Holler Studios",
+    url: "https://media0.giphy.com/media/YOqDymLgjWk0dg3pi3/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "o7BebTgj44jmw",
+    title: "Water Dogs GIF by AFV Pets",
+    url: "https://media0.giphy.com/media/o7BebTgj44jmw/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "l0HlGfnQY9XvE4jVC",
+    title: "I Love You GIF by Denyse®",
+    url: "https://media0.giphy.com/media/l0HlGfnQY9XvE4jVC/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "9s8Jq3Sc1ZnZS",
+    title: "Wake Up Dog GIF",
+    url: "https://media1.giphy.com/media/9s8Jq3Sc1ZnZS/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "13sz48R33vovLi",
+    title: "Cat Monday GIF",
+    url: "https://media0.giphy.com/media/13sz48R33vovLi/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "TlfY7QPkCPTjE3OaHF",
+    title: "The Grinch Happy Dance GIF by Dear Silas",
+    url: "https://media0.giphy.com/media/TlfY7QPkCPTjE3OaHF/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "wIePCLOwUQ4RW",
+    title: "Hugs GIF",
+    url: "https://media0.giphy.com/media/wIePCLOwUQ4RW/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "xNZe21P0bOROSAsjBC",
+    title: "Happy Birthday Dancing GIF",
+    url: "https://media2.giphy.com/media/xNZe21P0bOROSAsjBC/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "LPO1GfRfJCNVmvbKCe",
+    title: "Happy Birthday GIF by Todd Rocheford",
+    url: "https://media4.giphy.com/media/LPO1GfRfJCNVmvbKCe/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "WlbzfPOK8i21lESvYy",
+    title: "Good Morning Love GIF by Lucas and Friends by RV AppStudios",
+    url: "https://media4.giphy.com/media/WlbzfPOK8i21lESvYy/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "8FnZtdlK1k3Ly",
+    title: "Lion Love GIF",
+    url: "https://media3.giphy.com/media/8FnZtdlK1k3Ly/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "1fMjj5j2Z7chq",
+    title: "Tapping Wake Up GIF",
+    url: "https://media4.giphy.com/media/1fMjj5j2Z7chq/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "xUA7b5WwMudP2eVafu",
+    title: "Happy Monday GIF by Chippy the Dog",
+    url: "https://media0.giphy.com/media/xUA7b5WwMudP2eVafu/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "UChPEs9ghFo2s",
+    title: "The Grinch Film GIF by The Good Films",
+    url: "https://media3.giphy.com/media/UChPEs9ghFo2s/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "yidUzriaAGJbsxt58k",
+    title: "The Office Hug GIF",
+    url: "https://media0.giphy.com/media/yidUzriaAGJbsxt58k/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "8cOkSOuvIChHNYOyP7",
+    title: "Good Morning Love GIF by ircha_gram",
+    url: "https://media0.giphy.com/media/8cOkSOuvIChHNYOyP7/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "mI6B532k3otUc",
+    title: "black and white bear GIF",
+    url: "https://media3.giphy.com/media/mI6B532k3otUc/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "3CCXHZWV6F6O9VQ7FL",
+    title: "Valentines Day Love GIF by Digital Pratik",
+    url: "https://media2.giphy.com/media/3CCXHZWV6F6O9VQ7FL/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "ZNzmLhL5ZVbq697LwT",
+    title: "Coffee Time GIF",
+    url: "https://media2.giphy.com/media/ZNzmLhL5ZVbq697LwT/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "YdGUYXws5mD2fxFKxg",
+    title: "Happy Monday Morning GIF by Lucas and Friends by RV AppStudios",
+    url: "https://media2.giphy.com/media/YdGUYXws5mD2fxFKxg/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "UTFiHeDL8cOSA",
+    title: "The Grinch Smiling GIF by The Good Films",
+    url: "https://media0.giphy.com/media/UTFiHeDL8cOSA/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+];
diff --git a/app/src/data/icons.tsx b/app/src/data/icons.tsx
index b357c422..468c5e07 100644
--- a/app/src/data/icons.tsx
+++ b/app/src/data/icons.tsx
@@ -1,31 +1,5 @@
-import BlockIcon from "@mui/icons-material/Block";
-import NotificationsOutlinedIcon from "@mui/icons-material/NotificationsOutlined";
-import HttpsOutlinedIcon from "@mui/icons-material/HttpsOutlined";
-import DevicesOutlinedIcon from "@mui/icons-material/DevicesOutlined";
-import PersonOutlineOutlinedIcon from "@mui/icons-material/PersonOutlineOutlined";
-import ArrowBackOutlinedIcon from "@mui/icons-material/ArrowBackOutlined";
-import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined";
-import NightlightOutlinedIcon from "@mui/icons-material/NightlightOutlined";
-import GroupOutlinedIcon from "@mui/icons-material/GroupOutlined";
-import CampaignOutlinedIcon from "@mui/icons-material/CampaignOutlined";
-import PersonAddAltOutlinedIcon from "@mui/icons-material/PersonAddAltOutlined";
-import LogoutIcon from "@mui/icons-material/Logout";
-import PersonIcon from "@mui/icons-material/Person";
-import EditIcon from "@mui/icons-material/Edit";
-import PhotoCameraIcon from "@mui/icons-material/PhotoCamera";
-import AddIcon from "@mui/icons-material/Add";
-import CloseOutlinedIcon from "@mui/icons-material/CloseOutlined";
-import VisibilityIcon from "@mui/icons-material/Visibility";
-import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
-import NoEncryptionOutlinedIcon from "@mui/icons-material/NoEncryptionOutlined";
-import KeyboardVoiceIcon from "@mui/icons-material/KeyboardVoice";
-import AttachFileIcon from "@mui/icons-material/AttachFile";
-import SentimentSatisfiedAltIcon from "@mui/icons-material/SentimentSatisfiedAlt";
-import MoreVertIcon from "@mui/icons-material/MoreVert";
-import LocalPhoneIcon from "@mui/icons-material/LocalPhone";
-import SearchIcon from "@mui/icons-material/Search";
-import AddAPhotoOutlined from "@mui/icons-material/AddAPhotoOutlined";
-import DeleteOutlineOutlinedIcon from "@mui/icons-material/DeleteOutlineOutlined";
+import React, { lazy, Suspense } from "react";
+import { SxProps } from "@mui/material/styles";
 
 enum icons {
   BlockIcon,
@@ -57,186 +31,469 @@ enum icons {
   Search,
   Delete,
   AddPhoto,
+  Send,
+  Pause,
+  Play,
+  CalendarToday,
+  KeyboardArrowUp,
+  KeyboardArrowDown,
+  ContentCopy,
+  CircularProgress,
+  RightArrow,
+  LeftArrow,
+  Forward,
+  MessagingOptions,
+  Pin,
+  Reply,
+  PushPin,
+  GifBox,
+  EmojiBox,
+  StickerBox,
+  Menu,
+  DoDisturb,
+  Check,
+  AlternateEmailTwoTone,
+  Email,
+  Info,
+  Phone,
+  ArrowForward,
+  Mute,
+  EndCall,
+  AddMembers,
+  Lock,
+  Admin,
+  Members,
+  RemoveMember,
+  Eye,
+  Sun,
+  Group,
+  CallAccept,
+  Mention,
+  UnMute
 }
 
 type iconStrings = keyof typeof icons;
 
-const iconMap: { [K in iconStrings]: React.ReactNode } = {
-  BlockIcon: <BlockIcon sx={{ color: `var(--color-icon-secondary)` }} />,
-  SettingsOutlinedIcon: (
-    <SettingsOutlinedIcon sx={{ color: `var(--color-icon-secondary)` }} />
-  ),
-  NotificationsOutlinedIcon: (
-    <NotificationsOutlinedIcon sx={{ color: `var(--color-icon-secondary)` }} />
-  ),
-  HttpsOutlinedIcon: (
-    <HttpsOutlinedIcon sx={{ color: `var(--color-icon-secondary)` }} />
-  ),
-  DevicesOutlinedIcon: (
-    <DevicesOutlinedIcon sx={{ color: `var(--color-icon-secondary)` }} />
-  ),
-  BackArrow: (
-    <ArrowBackOutlinedIcon
-      sx={{
-        color: `var(--color-icon-secondary)`,
-      }}
-    />
-  ),
-  Contacts: (
-    <PersonOutlineOutlinedIcon
-      sx={{
-        color: `var(--color-icon-secondary)`,
-      }}
-    />
-  ),
-  Settings: (
-    <SettingsOutlinedIcon
-      sx={{
-        color: `var(--color-icon-secondary)`,
-      }}
-    />
-  ),
-  NightMode: (
-    <NightlightOutlinedIcon
-      sx={{
-        color: `var(--color-icon-secondary)`,
-      }}
-    />
-  ),
-  Add: (
-    <AddIcon fontSize="large" sx={{ color: `var(--color-search-border)` }} />
-  ),
-  Edit: (
-    <EditIcon fontSize="large" sx={{ color: `var(--color-icon-secondary)` }} />
-  ),
-  AddStory: (
-    <PhotoCameraIcon
-      fontSize="large"
-      sx={{ color: `var(--color-search-border)` }}
-    />
-  ),
-  Logout: (
-    <LogoutIcon
-      fontSize="large"
-      sx={{ color: `var(--color-icon-secondary)` }}
-    />
-  ),
-  ProflePicture: (
-    <PersonIcon fontSize="large" sx={{ color: `var(--color-background)` }} />
-  ),
-  NewGroup: (
-    <GroupOutlinedIcon
-      sx={{
-        color: `var(--color-icon-secondary)`,
-      }}
-    />
-  ),
-  NewChannel: (
-    <CampaignOutlinedIcon
-      sx={{
-        color: `var(--color-icon-secondary)`,
-      }}
-    />
-  ),
-  NewChat: (
-    <PersonAddAltOutlinedIcon
-      sx={{
-        color: `var(--color-icon-secondary)`,
-      }}
-    />
-  ),
-  Show: (
-    <VisibilityIcon
-      fontSize="medium"
-      sx={{ color: `var(--color-icon-secondary)` }}
-    />
-  ),
-  Hide: (
-    <VisibilityOffIcon
-      fontSize="medium"
-      sx={{ color: `var(--color-icon-secondary)` }}
-    />
-  ),
-  Close: (
-    <CloseOutlinedIcon
-      fontSize="large"
-      sx={{ color: `var(--color-icon-secondary)` }}
-    />
-  ),
-  Unlock: (
-    <NoEncryptionOutlinedIcon
-      sx={{
-        color: `var(--color-icon-secondary)`,
-      }}
-    />
-  ),
-
-  Record: <KeyboardVoiceIcon sx={{ fontSize: "1rem" }} />,
+type IconConfig = {
+  importFn: () => Promise<{
+    default: React.ComponentType<object>;
+  }>;
+  defaultProps?: {
+    sx?: SxProps;
+    fontSize?: "small" | "medium" | "large";
+    style?: React.CSSProperties;
+  };
+};
 
-  Attatch: (
-    <AttachFileIcon
-      sx={{
+const iconImports: Record<iconStrings, IconConfig> = {
+  Group: {
+    importFn: () => import("@mui/icons-material/GroupsOutlined"),
+    defaultProps: { sx: { color: `var(--color-icon-secondary)` } },
+  },
+  Sun: {
+    importFn: () => import("@mui/icons-material/WbSunny"),
+    defaultProps: { sx: { color: `white` } },
+  },
+  BlockIcon: {
+    importFn: () => import("@mui/icons-material/Block"),
+    defaultProps: { sx: { color: `var(--color-icon-secondary)` } },
+  },
+  SettingsOutlinedIcon: {
+    importFn: () => import("@mui/icons-material/SettingsOutlined"),
+    defaultProps: { sx: { color: `var(--color-icon-secondary)` } },
+  },
+  NotificationsOutlinedIcon: {
+    importFn: () => import("@mui/icons-material/NotificationsOutlined"),
+    defaultProps: { sx: { color: `var(--color-icon-secondary)` } },
+  },
+  HttpsOutlinedIcon: {
+    importFn: () => import("@mui/icons-material/HttpsOutlined"),
+    defaultProps: { sx: { color: `var(--color-icon-secondary)` } },
+  },
+  DevicesOutlinedIcon: {
+    importFn: () => import("@mui/icons-material/DevicesOutlined"),
+    defaultProps: { sx: { color: `var(--color-icon-secondary)` } },
+  },
+  BackArrow: {
+    importFn: () => import("@mui/icons-material/ArrowBackOutlined"),
+    defaultProps: { sx: { color: `var(--color-icon-secondary)` } },
+  },
+  Contacts: {
+    importFn: () => import("@mui/icons-material/PersonOutlineOutlined"),
+    defaultProps: { sx: { color: `var(--color-icon-secondary)` } },
+  },
+  Settings: {
+    importFn: () => import("@mui/icons-material/SettingsOutlined"),
+    defaultProps: { sx: { color: `var(--color-icon-secondary)` } },
+  },
+  NightMode: {
+    importFn: () => import("@mui/icons-material/NightlightOutlined"),
+    defaultProps: { sx: { color: `var(--color-icon-secondary)` } },
+  },
+  Add: {
+    importFn: () => import("@mui/icons-material/Add"),
+    defaultProps: {
+      fontSize: "large",
+      sx: { color: `var(--color-search-border)` },
+    },
+  },
+  Edit: {
+    importFn: () => import("@mui/icons-material/Edit"),
+    defaultProps: { sx: { color: `var(--color-icon-secondary)` } },
+  },
+  AddStory: {
+    importFn: () => import("@mui/icons-material/PhotoCamera"),
+    defaultProps: {
+      fontSize: "large",
+      sx: { color: `var(--color-search-border)` },
+    },
+  },
+  Logout: {
+    importFn: () => import("@mui/icons-material/Logout"),
+    defaultProps: {
+      fontSize: "large",
+      sx: { color: `var(--color-icon-secondary)` },
+    },
+  },
+  ProflePicture: {
+    importFn: () => import("@mui/icons-material/Person"),
+    defaultProps: {
+      fontSize: "large",
+      sx: { color: `var(--color-background)` },
+    },
+  },
+  NewGroup: {
+    importFn: () => import("@mui/icons-material/GroupOutlined"),
+    defaultProps: { sx: { color: `var(--color-icon-secondary)` } },
+  },
+  NewChannel: {
+    importFn: () => import("@mui/icons-material/CampaignOutlined"),
+    defaultProps: { sx: { color: `var(--color-icon-secondary)` } },
+  },
+  NewChat: {
+    importFn: () => import("@mui/icons-material/PersonAddAltOutlined"),
+    defaultProps: { sx: { color: `var(--color-icon-secondary)` } },
+  },
+  Show: {
+    importFn: () => import("@mui/icons-material/Visibility"),
+    defaultProps: {
+      fontSize: "medium",
+      sx: { color: `var(--color-icon-secondary)` },
+    },
+  },
+  Hide: {
+    importFn: () => import("@mui/icons-material/VisibilityOff"),
+    defaultProps: {
+      fontSize: "medium",
+      sx: { color: `var(--color-icon-secondary)` },
+    },
+  },
+  Close: {
+    importFn: () => import("@mui/icons-material/CloseOutlined"),
+    defaultProps: {
+      sx: { color: `var(--color-icon-secondary)`, fontSize: "1.75rem" },
+    },
+  },
+  Unlock: {
+    importFn: () => import("@mui/icons-material/NoEncryptionOutlined"),
+    defaultProps: { sx: { color: `var(--color-icon-secondary)` } },
+  },
+  Record: {
+    importFn: () => import("@mui/icons-material/KeyboardVoice"),
+    defaultProps: { fontSize: "medium" },
+  },
+  Attatch: {
+    importFn: () => import("@mui/icons-material/AttachFile"),
+    defaultProps: {
+      sx: {
         cursor: "pointer",
         color: `var(--color-icon-secondary)`,
         fontSize: "1.5rem",
-      }}
-    />
-  ),
-
-  Emojie: (
-    <SentimentSatisfiedAltIcon
-      sx={{
+      },
+    },
+  },
+  Emojie: {
+    importFn: () => import("@mui/icons-material/SentimentSatisfiedAlt"),
+    defaultProps: {
+      sx: {
         cursor: "pointer",
         color: `var(--color-icon-secondary)`,
         fontSize: "1.5rem",
-      }}
-    />
-  ),
-
-  More: (
-    <MoreVertIcon
-      sx={{
+      },
+    },
+  },
+  More: {
+    importFn: () => import("@mui/icons-material/MoreVert"),
+    defaultProps: {
+      sx: {
         cursor: "pointer",
         color: `var(--color-icon-secondary)`,
         fontSize: "1.5rem",
-      }}
-    />
-  ),
-
-  Search: (
-    <SearchIcon
-      sx={{
+      },
+    },
+  },
+  Search: {
+    importFn: () => import("@mui/icons-material/Search"),
+    defaultProps: {
+      sx: {
         cursor: "pointer",
         color: `var(--color-icon-secondary)`,
         fontSize: "1.5rem",
-      }}
-    />
-  ),
-
-  Call: (
-    <LocalPhoneIcon
-      sx={{
+      },
+    },
+  },
+  Call: {
+    importFn: () => import("@mui/icons-material/LocalPhone"),
+    defaultProps: {
+      sx: {
         cursor: "pointer",
         color: `var(--color-icon-secondary)`,
         fontSize: "1.5rem",
-      }}
-    />
-  ),
-
-  AddPhoto: <AddAPhotoOutlined fontSize="large" />,
+      },
+    },
+  },
+  CallAccept: {
+    importFn: () => import("@mui/icons-material/LocalPhone"),
+    defaultProps: { fontSize: "large" },
+  },
+  AddPhoto: {
+    importFn: () => import("@mui/icons-material/AddAPhotoOutlined"),
+    defaultProps: { fontSize: "large" },
+  },
+  Delete: {
+    importFn: () => import("@mui/icons-material/DeleteOutlineOutlined"),
+    defaultProps: { sx: { color: "white" } },
+  },
+  Send: {
+    importFn: () => import("@mui/icons-material/Send"),
+    defaultProps: {},
+  },
+  Pause: {
+    importFn: () => import("@mui/icons-material/PauseOutlined"),
+    defaultProps: {},
+  },
+  Play: {
+    importFn: () => import("@mui/icons-material/PlayArrow"),
+    defaultProps: {},
+  },
+  CalendarToday: {
+    importFn: () => import("@mui/icons-material/CalendarToday"),
+    defaultProps: {
+      sx: {
+        color: `var(--color-icon-secondary)`,
+        fontSize: "1.5rem",
+      },
+    },
+  },
+  ContentCopy: {
+    importFn: () => import("@mui/icons-material/ContentCopy"),
+    defaultProps: {
+      sx: {
+        color: `var(--color-icon-secondary)`,
+        fontSize: "1.5rem",
+      },
+    },
+  },
+  KeyboardArrowUp: {
+    importFn: () => import("@mui/icons-material/KeyboardArrowUp"),
+    defaultProps: {
+      sx: {
+        color: `var(--color-icon-secondary)`,
+        fontSize: "1.5rem",
+      },
+    },
+  },
+  KeyboardArrowDown: {
+    importFn: () => import("@mui/icons-material/KeyboardArrowDown"),
+    defaultProps: {
+      sx: {
+        color: `var(--color-icon-secondary)`,
+        fontSize: "1.5rem",
+      },
+    },
+  },
+  CircularProgress: {
+    importFn: () => import("@mui/material/CircularProgress"),
+    defaultProps: {
+      sx: {
+        color: `var(--accent-color)`,
+        fontSize: "1.5rem",
+      },
+      style: { width: "1.5rem", height: "1.5rem" },
+    },
+  },
+  RightArrow: {
+    importFn: () => import("@mui/icons-material/KeyboardArrowRightOutlined"),
+    defaultProps: {
+      sx: {
+        color: `var(--color-icon-secondary)`,
+        fontSize: "3.5rem",
+      },
+    },
+  },
+  LeftArrow: {
+    importFn: () => import("@mui/icons-material/KeyboardArrowLeftOutlined"),
+    defaultProps: {
+      sx: {
+        color: `var(--color-icon-secondary)`,
+        fontSize: "3.5rem",
+      },
+    },
+  },
+  Forward: {
+    importFn: () => import("@mui/icons-material/Shortcut"),
+    defaultProps: {
+      sx: {
+        color: `var(--color-icon-secondary)`,
+        fontSize: "1.75rem",
+      },
+    },
+  },
+  MessagingOptions: {
+    importFn: () => import("@mui/icons-material/KeyboardArrowDown"),
+    defaultProps: {},
+  },
+  Pin: {
+    importFn: () => import("@mui/icons-material/Pin"),
+    defaultProps: {
+      sx: {
+        color: `var(--color-icon-secondary)`,
+        fontSize: "1.5rem",
+      },
+    },
+  },
+  Reply: {
+    importFn: () => import("@mui/icons-material/ReplyOutlined"),
+    defaultProps: {},
+  },
+  PushPin: {
+    importFn: () => import("@mui/icons-material/PushPinOutlined"),
+    defaultProps: { fontSize: "small" },
+  },
+  GifBox: {
+    importFn: () => import("@mui/icons-material/GifBoxOutlined"),
+    defaultProps: { fontSize: "large" },
+  },
+  EmojiBox: {
+    importFn: () => import("@mui/icons-material/EmojiEmotionsOutlined"),
+    defaultProps: { fontSize: "large" },
+  },
+  StickerBox: {
+    importFn: () => import("@mui/icons-material/StickyNote2Outlined"),
+    defaultProps: { fontSize: "large" },
+  },
+  Menu: {
+    importFn: () => import("@mui/icons-material/MenuOutlined"),
+    defaultProps: { fontSize: "large" },
+  },
+  Check: {
+    importFn: () => import("@mui/icons-material/Check"),
+    defaultProps: { fontSize: "large" },
+  },
+  DoDisturb: {
+    importFn: () => import("@mui/icons-material/DoDisturbOnOutlined"),
+    defaultProps: { fontSize: "large" },
+  },
+  AlternateEmailTwoTone: {
+    importFn: () => import("@mui/icons-material/AlternateEmailTwoTone"),
+    defaultProps: { fontSize: "large" },
+  },
+  Email: {
+    importFn: () => import("@mui/icons-material/Email"),
+    defaultProps: { fontSize: "large" },
+  },
+  Info: {
+    importFn: () => import("@mui/icons-material/Info"),
+    defaultProps: { fontSize: "large" },
+  },
+  Phone: {
+    importFn: () => import("@mui/icons-material/Phone"),
+    defaultProps: { fontSize: "large" },
+  },
 
-  Delete: (
-    <DeleteOutlineOutlinedIcon
-      sx={{
-        color: "white",
-      }}
-    />
-  ),
+  ArrowForward: {
+    importFn: () => import("@mui/icons-material/ArrowForward"),
+    defaultProps: { fontSize: "large" },
+  },
+  Mute: {
+    importFn: () => import("@mui/icons-material/Mic"),
+    defaultProps: { fontSize: "large" },
+  },
+  EndCall: {
+    importFn: () => import("@mui/icons-material/CallEnd"),
+    defaultProps: { fontSize: "large" },
+  },
+  AddMembers: {
+    importFn: () => import("@mui/icons-material/PersonAddAlt1"),
+    defaultProps: { fontSize: "large" },
+  },
+  Lock: {
+    importFn: () => import("@mui/icons-material/LockOutlined"),
+  },
+  Admin: {
+    importFn: () => import("@mui/icons-material/AdminPanelSettingsOutlined"),
+  },
+  Members: {
+    importFn: () => import("@mui/icons-material/PeopleOutlineOutlined"),
+  },
+  RemoveMember: {
+    importFn: () => import("@mui/icons-material/RemoveCircleOutline"),
+    defaultProps: { fontSize: "small" },
+  },
+  Eye: {
+    importFn: () => import("@mui/icons-material/Visibility"),
+    defaultProps: { fontSize: "small" },
+  },
+  Mention:{
+    importFn: () => import ("@mui/icons-material/AlternateEmail"),
+  },
+  UnMute: {
+    importFn: () => import("@mui/icons-material/MicOff"),
+    defaultProps: { fontSize: "large" },
+  }
 };
 
-function getIcon(iconName?: iconStrings) {
-  return iconName ? iconMap[iconName] : undefined;
+const iconCache = new Map<string, React.ReactElement>();
+
+function getIcon(
+  iconName?: iconStrings,
+  customProps?: {
+    sx?: SxProps;
+    fontSize?: "small" | "medium" | "large";
+    style?: React.CSSProperties;
+  }
+) {
+  if (!iconName) return undefined;
+
+  const iconConfig = iconImports[iconName];
+  if (!iconConfig) return undefined;
+
+  const cacheKey = `${iconName}-${JSON.stringify(customProps)}`;
+  if (iconCache.has(cacheKey)) {
+    return iconCache.get(cacheKey);
+  }
+
+  const LazyIcon = lazy(iconConfig.importFn);
+
+  const mergedProps = {
+    ...iconConfig.defaultProps,
+    ...customProps,
+    sx: {
+      ...iconConfig.defaultProps?.sx,
+      ...customProps?.sx,
+    },
+  };
+
+  const iconElement = (
+    <Suspense fallback={<div style={{ width: "24px", height: "24px" }}></div>}>
+      <LazyIcon {...mergedProps} />
+    </Suspense>
+  );
+
+  iconCache.set(cacheKey, iconElement);
+
+  return iconElement;
 }
 
-export { getIcon };
+export { getIcon, icons };
 export type { iconStrings };
diff --git a/app/src/data/sideBar.ts b/app/src/data/sideBar.ts
index 7b4220a8..ad26ee24 100644
--- a/app/src/data/sideBar.ts
+++ b/app/src/data/sideBar.ts
@@ -18,6 +18,11 @@ const privacySettingsMap: Record<
   privacySettingsID,
   { id: keyof privacySettingsInterface; name: string; subtitle: string }
 > = {
+  [privacySettingsID.BLOCK_PRIVACY]: {
+    id: "blockPrivacy",
+    subtitle: "",
+    name: "Block List",
+  },
   [privacySettingsID.STORIES_SEEN_PRIVACY]: {
     id: "storiesSeenPrivacy",
     subtitle: "Who can see my stories?",
@@ -77,6 +82,19 @@ const pagesMap: { [K in pagesStrings]: string } = {
   PROFILE_UPDATE: "ProfileUpdate",
   BLOCKED_USERS: "blockList",
   DEVICES: "Devices",
+  ADD_MEMBERS: "AddMembers",
+  NEW_GROUP: "NewGroup",
+  NEW_CHANNEL: "NewChannel",
+  GROUP_INFO: "GroupInfo",
+  EDIT_GROUP_INFO: "EditGroupInfo",
+  GROUP_TYPE: "GroupType",
+  ADD_MORE_MEMBERS: "AddMoreMembers",
+  ADMINS: "Admins",
+  ADD_ADMINS: "AddAdmins",
+  MEMBERS: "Members",
+  PERMISSIONS: "Permissions",
+  CHANNEL_INFO: "ChannelInfo",
+  EDIT_CHANNEL_INFO: "EditChannelInfo",
 };
 
 const settingsRows = [
@@ -105,6 +123,8 @@ const privacySettingsRows = [
     icon: "BlockIcon",
     title: "Blocked Users",
     redirect: sideBarPages.BLOCKED_USERS,
+    type: StatusType.PRIVACY,
+    status: privacySettingsID.BLOCK_PRIVACY,
   },
   {
     title: "Who can see my stories?",
@@ -193,6 +213,80 @@ const devices: SideBarView = {
   page: "DEVICES",
 };
 
+const addMembers: SideBarView = {
+  title: "Add Members",
+  backView: sideBarPages.CHATS,
+  page: "ADD_MEMBERS",
+};
+
+const newGroup: SideBarView = {
+  title: "New Group",
+  backView: sideBarPages.ADD_MEMBERS,
+  page: "NEW_GROUP",
+  props: { view: "group" },
+};
+
+const newChannel: SideBarView = {
+  title: "New Channel",
+  backView: sideBarPages.ADD_MEMBERS,
+  page: "NEW_CHANNEL",
+  props: { view: "channel" },
+};
+
+const groupInfo: SideBarView = {
+  title: "Group Info",
+  page: "GROUP_INFO",
+};
+
+const editGroupInfo: SideBarView = {
+  title: "Edit",
+  backView: sideBarPages.GROUP_INFO,
+  page: "EDIT_GROUP_INFO",
+};
+
+const groupType: SideBarView = {
+  title: "Group Type",
+  page: "GROUP_TYPE",
+};
+
+const addMoreMembers: SideBarView = {
+  title: "Add Members",
+  backView: sideBarPages.GROUP_INFO,
+  page: "ADD_MORE_MEMBERS",
+};
+
+const admins: SideBarView = {
+  title: "Adminstrators",
+  page: "ADMINS",
+};
+
+const addAdmins: SideBarView = {
+  title: "Add Admins",
+  backView: sideBarPages.ADMINS,
+  page: "ADD_ADMINS",
+};
+
+const members: SideBarView = {
+  title: "Members",
+  page: "MEMBERS",
+};
+
+const permissions: SideBarView = {
+  title: "Permissions",
+  page: "PERMISSIONS",
+};
+
+const channelInfo: SideBarView = {
+  title: "Channel Info",
+  page: "CHANNEL_INFO",
+};
+
+const editChannelInfo: SideBarView = {
+  title: "Edit",
+  backView: sideBarPages.CHANNEL_INFO,
+  page: "EDIT_CHANNEL_INFO",
+};
+
 export {
   chats,
   contacts,
@@ -210,4 +304,17 @@ export {
   devices,
   pagesMap,
   blockList,
+  addMembers,
+  newGroup,
+  newChannel,
+  groupInfo,
+  editGroupInfo,
+  groupType,
+  addMoreMembers,
+  admins,
+  addAdmins,
+  members,
+  permissions,
+  channelInfo,
+  editChannelInfo,
 };
diff --git a/app/src/data/stickers.ts b/app/src/data/stickers.ts
new file mode 100644
index 00000000..2d8c7417
--- /dev/null
+++ b/app/src/data/stickers.ts
@@ -0,0 +1,497 @@
+export const stickers = [
+  {
+    id: "U3RpY2tlci01OTQ4OQ==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnv31lN2+qt18mvpkwZZqtRRO2Yrw6T03+QG7blM7MoTSA=.png",
+    title: "sticker-by-Shallu-0",
+  },
+  {
+    id: "U3RpY2tlci01OTU4NQ==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvytDWLINJxOkwqYa8B5GB4+89czlknrjmKfrL7/qYh/k=.png",
+    title: "sticker-by-Shallu-1",
+  },
+  {
+    id: "U3RpY2tlci01OTYyNw==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnv6UnmsctBvl3+CtiysVLXznRuP18dhtyXpFXXsJawR9k=.png",
+    title: "sticker-by-Shallu-2",
+  },
+  {
+    id: "U3RpY2tlci01OTY0OQ==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnv6UnmsctBvl3+CtiysVLXzgaMNTj8tcbCMZBZbsFIvi4=.png",
+    title: "sticker-by-Rouba Daghistani-3",
+  },
+  {
+    id: "U3RpY2tlci01NDg2NQ==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvRHkgd68AUfZ88bl0bxSNqAkGp907DWCTsjt7TJfT86A=.png",
+    title: "sticker-by-Ernest Smeg-4",
+  },
+  {
+    id: "U3RpY2tlci01MTM4Ng==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvRsHElkgyoP4xVcYowU97x3lFH3yUBrIxw2PlqS94OuE=.png",
+    title: "sticker-by-Mike Nudelman-5",
+  },
+  {
+    id: "U3RpY2tlci01MjQ5",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvuBRMZi3QD/hVgP+OxHlr4Rcqpx/pGI/tSisCr3F3PQg=.png",
+    title: "sticker-by-Konstantin-6",
+  },
+  {
+    id: "U3RpY2tlci05NzUz",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc21DnDN+2faE1Bk8Mt+qlLGDRJn1165x5F6CK/7+/BpOvK8Jfutuss4GPx5kKFSG42jCjJrQmzHGKoeS7b7LvQlrViAsswR6iOvN2yQP9Q0Y63OG7dZbEFEPQHjK5RtD3KqvPgIDz7S2Obwd1/6GeW80=.webp",
+    title: "sticker-by-Sandra Campos-7",
+  },
+  {
+    id: "U3RpY2tlci0xMDAwOA==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvhkNNJ31lLo4w8cXIVsJMIYvgAC4QXoF2M0J7lEwcveE=.png",
+    title: "sticker-by-Irvan Ramdani-8",
+  },
+  {
+    id: "U3RpY2tlci0xMTQzNw==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnv9LGea08EqK5beUUbFYaBY0mN3dGYYhQ3NcYS28hZd1g=.png",
+    title: "sticker-by-Seifert Johannes-9",
+  },
+  {
+    id: "U3RpY2tlci0xMzM0MA==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvF9fLGRv6MUsaBy5HrO2By27WZJ9XWs60wpgvaZ0qNx0=.png",
+    title: "sticker-by-Joyce Diaz-10",
+  },
+  {
+    id: "U3RpY2tlci0xOTU2Mg==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvRL6KU105hEk1Vbv4mDhqNgDzsqGoD5l04BSaQanRbEM=.png",
+    title: "sticker-by-Iv Ivanova-11",
+  },
+  {
+    id: "U3RpY2tlci0xOTIxNA==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvj8WTkuxvU6/FMIU/uoofPFrSib3v5ECGShgUpc+33aw=.png",
+    title: "sticker-by-George Radu-12",
+  },
+  {
+    id: "U3RpY2tlci0yNDEzNQ==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnv9JEMd2wkTyO0RMfuu3YxIP7mNfY5ZwBeakVfrXUaLY4=.png",
+    title: "sticker-by-Agus Prajogo-13",
+  },
+  {
+    id: "U3RpY2tlci0zNTI0NQ==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvpcbaJBmOTbL7ps8ZgzdK4uiGS5Y0tI1q8YtI6Z3q6wo=.png",
+    title: "sticker-by-NestedApps Limited-15",
+  },
+  {
+    id: "U3RpY2tlci0zODYxMQ==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvIT0acgnVZjh7mKOQxvmns935J4Yl1hn3iJTcrjVMyrk=.png",
+    title: "sticker-by-NestedApps Limited-16",
+  },
+  {
+    id: "U3RpY2tlci0zODU2Mw==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvM7l6nkb2TKVehkCRjibcuC9pbXktVrufVhOCtyQ4uUQ=.png",
+    title: "sticker-by-NestedApps Limited-17",
+  },
+  {
+    id: "U3RpY2tlci0zOTE2OQ==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnv1WAoTqTvpdQ3A6p5vj4an7g5GP5Fkd2BSEdTTOxkJbM=.png",
+    title: "sticker-by-NestedApps Limited-18",
+  },
+  {
+    id: "U3RpY2tlci00MDAxMQ==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc21DnDN+2faE1Bk8Mt+qlLGDRJn1165x5F6CK/7+/BpOvK8Jfutuss4GPx5kKFSG42jCjJrQmzHGKoeS7b7LvQlrViAsswR6iOvN2yQP9Q0Y6ANyQOdlYtShUlhbnWPLlDuL8h3TvTkbN9ykwdqxISlw=.webp",
+    title: "sticker-by-Unimotion-19",
+  },
+  {
+    id: "U3RpY2tlci00MDE0NQ==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc21DnDN+2faE1Bk8Mt+qlLGDRJn1165x5F6CK/7+/BpOvK8Jfutuss4GPx5kKFSG42jCjJrQmzHGKoeS7b7LvQlrViAsswR6iOvN2yQP9Q0Y6ANyQOdlYtShUlhbnWPLlDi6zURFwWcGMnaej8JgECsQ=.webp",
+    title: "sticker-by-Sebastian-20",
+  },
+  {
+    id: "U3RpY2tlci00MjcyNg==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc21DnDN+2faE1Bk8Mt+qlLGDRJn1165x5F6CK/7+/BpOvK8Jfutuss4GPx5kKFSG42jCjJrQmzHGKoeS7b7LvQlrViAsswR6iOvN2yQP9Q0Y6KLhNvOlOJTr/QUycBSRbV7hvUH7UljlKKJXcm+gSGEE=.webp",
+    title: "sticker-by-juhan-21",
+  },
+  {
+    id: "U3RpY2tlci00MzM1Ng==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvy6F/dXsOWbEw+TKXqqhDMUrlyyspo1Q5sZ4Va3+Szjk=.png",
+    title: "sticker-by-Elina-22",
+  },
+  {
+    id: "U3RpY2tlci00Njc3OQ==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvJZ9Ed7cwQZ0I/NRHJaqrhobNaCmHYkU2/UVeWwC5hFc=.png",
+    title: "sticker-by-Lim Boon Pee-23",
+  },
+  {
+    id: "U3RpY2tlci00NjgyMA==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvGPckNpxv8KhymLw+mNEkiSunoStlPorHucscyqg+zkw=.png",
+    title: "sticker-by-Lim Boon Pee-24",
+  },
+  {
+    id: "U3RpY2tlci01MDYxOQ==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnv9SpBMAXS+IycPoBmFseKIyfhEx2OGgXVZlEOXG9uzHI=.png",
+    title: "sticker-by-Macarena Vásquez Rodríguez-25",
+  },
+  {
+    id: "U3RpY2tlci01MzA4NQ==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvj8GSevC/8XzAKY3MoFBTgxHuziZN3tHaQe2sZylW/zo=.png",
+    title: "sticker-by-john paul trinidad-26",
+  },
+  {
+    id: "U3RpY2tlci01MTA1OA==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvZ3nOLW32qWKlIM3pq7VWULYerMPBw+aQSWQTlNpEVdk=.png",
+    title: "sticker-by-Alew-27",
+  },
+  {
+    id: "U3RpY2tlci0xMjg3",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvDqYl9FiOU1KfZw7u4+Ctv3mwoi0D8PDSNT2kRJqWBxo=.png",
+    title: "sticker-by-Marko Njegovan-28",
+  },
+  {
+    id: "U3RpY2tlci0xMzE0",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnv/HwbM7m066cDVTKOVDSdyAnZRcLnXg5dZSmPLIfSVok=.png",
+    title: "sticker-by-Marko Njegovan-29",
+  },
+  {
+    id: "U3RpY2tlci01MjM1Mw==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvjM4lkW3/qWudUzLHuySPDGlQAEeG5uyzYqUHMDp91A0=.png",
+    title: "sticker-by-Lim Boon Pee-30",
+  },
+  {
+    id: "U3RpY2tlci0yNjI1MQ==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvUx77bntUCJi7nXgM0pKxxmPk/4W0iJtX3LPlbKoDxHY=.png",
+    title: "sticker-by-Lim Boon Pee-31",
+  },
+  {
+    id: "U3RpY2tlci0yNjM0Nw==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvgWOMRhu+zr2aWWrosed1TsWziWrrTRegebr94m88vUQ=.png",
+    title: "sticker-by-Lim Boon Pee-32",
+  },
+  {
+    id: "U3RpY2tlci0yNjQ3Ng==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvr66Peo1H8OlcqLpSUzCRNsKKcJhRWG35iaRwPW/tJ9A=.png",
+    title: "sticker-by-Janine Gutierrez-33",
+  },
+  {
+    id: "U3RpY2tlci0yNjU5Mg==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvmy7zOq0kIQh1cmJTSmEEToLZe6BCvTG+41nDCaem/1E=.png",
+    title: "sticker-by-Marnus van Staden-34",
+  },
+  {
+    id: "U3RpY2tlci0yNjk0Nw==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvHyNPplbAgWngXsSewSVTh8vilu8b2G6QRVe2BTdmyyY=.png",
+    title: "sticker-by-Marnus van Staden-35",
+  },
+  {
+    id: "U3RpY2tlci0yNzA5MA==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvePVbUgj+rcx2xW/rDQWob4gSLpTcrsCX+TjsDgPcYeI=.png",
+    title: "sticker-by-Uvindu Thilanka-36",
+  },
+  {
+    id: "U3RpY2tlci0yNzMyMw==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvroTDe0bH6tlVOCbh77zLnb8iYAyD0brHbKtmXq5KaCs=.png",
+    title: "sticker-by-Rolan Kenth Sahidsahid-37",
+  },
+  {
+    id: "U3RpY2tlci0yNzM0NA==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvroTDe0bH6tlVOCbh77zLnSJBy8s/eRnl6QvWzpw+a84=.png",
+    title: "sticker-by-Rob-38",
+  },
+  {
+    id: "U3RpY2tlci0yNzQ5Ng==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnv4RHyeuuYBOreGdAfe++MxM1FD1nRc7+ikCmvc0DdM/I=.png",
+    title: "sticker-by-Annie-39",
+  },
+  {
+    id: "U3RpY2tlci0yNzU4MQ==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvokYXkPpTEOdUjh5iHcLoHNwJmabBeZI5JcweE/MCITQ=.png",
+    title: "sticker-by-Marija Jovanovic-40",
+  },
+  {
+    id: "U3RpY2tlci0yNzYyMg==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvC6LWBtwLEAOCcaZlk6JTSCV49Q+AFbUyR6kCiFyq3EA=.png",
+    title: "sticker-by-Uten Sutham-41",
+  },
+  {
+    id: "U3RpY2tlci0yNzY1Nw==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvC6LWBtwLEAOCcaZlk6JTSOfvSCTcrb7Axdw0czgoyUo=.png",
+    title: "sticker-by-Kirill&Sofia-42",
+  },
+  {
+    id: "U3RpY2tlci0yNzY3Mw==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvC6LWBtwLEAOCcaZlk6JTSGL/05wSt3lUEmNpbgHp25M=.png",
+    title: "sticker-by-taeyen-43",
+  },
+  {
+    id: "U3RpY2tlci0yODAyNQ==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnv8x8Gp8GINQq7ajLS2cbvJjs7E8f5Pp32+u5v6Q+4Io4=.png",
+    title: "sticker-by-Lim Boon Pee-44",
+  },
+  {
+    id: "U3RpY2tlci0yODA0OA==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc21DnDN+2faE1Bk8Mt+qlLGDRJn1165x5F6CK/7+/BpOvK8Jfutuss4GPx5kKFSG42jCjJrQmzHGKoeS7b7LvQlrViAsswR6iOvN2yQP9Q0Y6nfsy3gg9SlIeOXFdN++o1tXzCHqx4pXRInuQG+3rZ4Y=.webp",
+    title: "sticker-by-Nuy hoho-45",
+  },
+  {
+    id: "U3RpY2tlci0yODMyMQ==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvOKPeAMcGk05vwMplMJ5PqsHRFp7/EFLLTUF0oA0z33g=.png",
+    title: "sticker-by-Lim Boon Pee-46",
+  },
+  {
+    id: "U3RpY2tlci0yODUyNw==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnv5Wx2l2KD3j6SUloJFk55zmnOCK3h3fgP46X5N2giMSM=.png",
+    title: "sticker-by-taeyen-47",
+  },
+  {
+    id: "U3RpY2tlci0yODcxMA==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvJXolJx3fFnGU7FOyk2gSUbPglnPkJ+aryNyEFgCwobY=.png",
+    title: "sticker-by-Marnus van Staden-48",
+  },
+  {
+    id: "U3RpY2tlci0yODc5MQ==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvJXolJx3fFnGU7FOyk2gSUbQeGs1RyzVY+heVvHHiDlw=.png",
+    title: "sticker-by-Mike Nudelman-49",
+  },
+  {
+    id: "U3RpY2tlci05MTMzMQ==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvJ/5QA+TDOYJufPX7vB0/x1dlmJJhM2LB5THdwcGIMks=.png",
+    title: "sticker0",
+  },
+  {
+    id: "U3RpY2tlci05MTMzNw==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvJ/5QA+TDOYJufPX7vB0/x5e9Q/gOar/ltjfh/SuiOOg=.png",
+    title: "sticker1",
+  },
+  {
+    id: "U3RpY2tlci05MTM0MA==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvJ/5QA+TDOYJufPX7vB0/x7GXUJc3TfciFKunwaR8IpI=.png",
+    title: "sticker2",
+  },
+  {
+    id: "U3RpY2tlci05MTM0Mg==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvJ/5QA+TDOYJufPX7vB0/x0YyOBHfDxlkl2GNoaaEoKA=.png",
+    title: "sticker3",
+  },
+  {
+    id: "U3RpY2tlci02Nzg1Mg==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvxDuqFrhGohwbj7aDFNI0CKwejWRham6mx5trg3EOk2A=.png",
+    title: "sticker4",
+  },
+  {
+    id: "U3RpY2tlci02Nzk0MA==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnv7aFWPaMql2r5fxoyGL3WjPeKqBYg4srSINWEcqT4QXE=.png",
+    title: "sticker5",
+  },
+  {
+    id: "U3RpY2tlci02Nzk1NQ==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnv7aFWPaMql2r5fxoyGL3WjMbRmNZpZw8M8vl8KF8oqRk=.png",
+    title: "sticker6",
+  },
+  {
+    id: "U3RpY2tlci02ODAzNg==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvnzw5wOlGGtG70G9PQedVa+rA77X0siCi4XpWm+KFwh0=.png",
+    title: "sticker7",
+  },
+  {
+    id: "U3RpY2tlci02ODMyMQ==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvtSv0vVu6LgPEUufZw4v7brFW0/Yo3CqNLBxGpsTO360=.png",
+    title: "sticker8",
+  },
+  {
+    id: "U3RpY2tlci02ODQ1MA==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvFHPBf5DwDRB9wQWtDRYKh3rd3upyIlDHJe6G6f2U2gM=.png",
+    title: "sticker9",
+  },
+  {
+    id: "U3RpY2tlci02NjkyMQ==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvPctu5yJcnMg6wq+bo+2n5ahp4YcosyVvRh1EY6xQnWo=.png",
+    title: "sticker10",
+  },
+  {
+    id: "U3RpY2tlci02Njk3NQ==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvPctu5yJcnMg6wq+bo+2n5aK4VyvohPBV4tKTdtzZKis=.png",
+    title: "sticker11",
+  },
+  {
+    id: "U3RpY2tlci02NzAzNg==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvn/K433f/coRXRciHFqKbc7ruS8sh0DFH8svzDfb63nk=.png",
+    title: "sticker12",
+  },
+  {
+    id: "U3RpY2tlci02NTkwNA==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnv+EREE7K8EgTRHe6tyUdx9+2QqIELq5rYqZBalf32fks=.png",
+    title: "sticker13",
+  },
+  {
+    id: "U3RpY2tlci02NjA0Nw==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnv30JdOVz7mmrpAuo/QbDNKxCen0PJzVDvirfSJzl64ic=.png",
+    title: "sticker14",
+  },
+  {
+    id: "U3RpY2tlci02NjU3NA==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnv/wm7cg+pFp6KHayGQ9q59lYk+ubCRwVUMhZ2GbUrWtw=.png",
+    title: "sticker15",
+  },
+  {
+    id: "U3RpY2tlci02NjYxOQ==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnve5qWszETfti4d3yw9LK12V2XARIXujxla8huyZrHgpY=.png",
+    title: "sticker16",
+  },
+  {
+    id: "U3RpY2tlci02NjcwNA==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvXKK99hX/lEyO+qjP8eMdAFDwF4XhEtKsQAARZXFPjtw=.png",
+    title: "sticker17",
+  },
+  {
+    id: "U3RpY2tlci02NjM3MQ==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvqktJOcD3PlJ8y43FvVeDSTXeHhX/OssjSpgGE7XbaD4=.png",
+    title: "sticker18",
+  },
+  {
+    id: "U3RpY2tlci02NjQwNA==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvY/EYrLH2fgV5eztQBUbYmMgFCNE3jCraDZehCa4Tgyg=.png",
+    title: "sticker19",
+  },
+  {
+    id: "U3RpY2tlci02NjU5MA==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnv/wm7cg+pFp6KHayGQ9q59gZb3CKdbEu6fwtpmraKBLY=.png",
+    title: "sticker20",
+  },
+  {
+    id: "U3RpY2tlci02NTA3MQ==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc21DnDN+2faE1Bk8Mt+qlLGDRJn1165x5F6CK/7+/BpOvK8Jfutuss4GPx5kKFSG42jCjJrQmzHGKoeS7b7LvQlrViAsswR6iOvN2yQP9Q0Y6MRDWVIfJaLd9ULe0Wjbo3koLXEDyVEAhJDFRCozRHwc=.webp",
+    title: "sticker21",
+  },
+  {
+    id: "U3RpY2tlci02NTEwMA==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvF3+jYvLzLtMrv63FDLlFjM4fdgh5AaIfN36+7plGghw=.png",
+    title: "sticker22",
+  },
+  {
+    id: "U3RpY2tlci02NTIzNw==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvJ1rwfVJR/LbbKMwjoTBC3gPqlfWWxyc4YmeEDNxIp1Y=.png",
+    title: "sticker23",
+  },
+  {
+    id: "U3RpY2tlci02NTQ1Mg==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc21DnDN+2faE1Bk8Mt+qlLGDRJn1165x5F6CK/7+/BpOvK8Jfutuss4GPx5kKFSG42jCjJrQmzHGKoeS7b7LvQlrViAsswR6iOvN2yQP9Q0Y6MRDWVIfJaLd9ULe0Wjbo3ikgBgexOQ9+6g/J6NxjJbk=.webp",
+    title: "sticker24",
+  },
+  {
+    id: "U3RpY2tlci02NTQ3Ng==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvCy90P5mxpbjTEGqZBhIogt/hnNLofFFvQQ544tke/T8=.png",
+    title: "sticker25",
+  },
+  {
+    id: "U3RpY2tlci02NTQ3MA==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvCy90P5mxpbjTEGqZBhIogpD4xXLbGLNLA2plRoOCqSw=.png",
+    title: "sticker26",
+  },
+  {
+    id: "U3RpY2tlci02NTYxOA==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvoOruRchlcnvETZoVME2ZlBeli7P9A/QGl8H4jXUW2GM=.png",
+    title: "sticker27",
+  },
+  {
+    id: "U3RpY2tlci02NTIxMA==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvJ1rwfVJR/LbbKMwjoTBC3q+Nv+Ms258rA5p736cvXNU=.png",
+    title: "sticker28",
+  },
+  {
+    id: "U3RpY2tlci02NTEwNA==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvF3+jYvLzLtMrv63FDLlFjFYtJOIOrhfgwsMT3pQprYE=.png",
+    title: "sticker29",
+  },
+  {
+    id: "U3RpY2tlci02NTM4OA==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnv7CZnm1KrvNl5gUbOSatTWWqA8Vfdu0for1BOUcjoBtY=.png",
+    title: "sticker30",
+  },
+  {
+    id: "U3RpY2tlci02NDY5OA==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvPYE7nWhv/jsLANXW4p/w3rpvcSj1TzU4Fzh5w7mB6GM=.png",
+    title: "sticker31",
+  },
+  {
+    id: "U3RpY2tlci02NDkxMw==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvQS7Isddk5rZPWZG3b4wZabAJ2AodK8XLgstXZKAxioY=.png",
+    title: "sticker32",
+  },
+  {
+    id: "U3RpY2tlci02NDkyOQ==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvQS7Isddk5rZPWZG3b4wZaSu6wY9anuejm22Jo/3dvHk=.png",
+    title: "sticker33",
+  },
+  {
+    id: "U3RpY2tlci02NTA5Mw==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvBZ1JFCrsBVHaW+X0f60x2cy7vXAqsh4P+A5b/ftIl0Y=.png",
+    title: "sticker34",
+  },
+  {
+    id: "U3RpY2tlci02NDkyMw==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvQS7Isddk5rZPWZG3b4wZaV654+Kya0fuwhMF4bUU5T0=.png",
+    title: "sticker35",
+  },
+  {
+    id: "U3RpY2tlci02NDk1OA==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvQS7Isddk5rZPWZG3b4wZaaBRU0nkXdMRyAnnVrIqQGQ=.png",
+    title: "sticker36",
+  },
+  {
+    id: "U3RpY2tlci02NDcxOQ==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnv74OTYmgpinBP7yNDBF+lMELi6obb9JeCb8nGK/TbpgQ=.png",
+    title: "sticker37",
+  },
+  {
+    id: "U3RpY2tlci02NDEzNg==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnv+39W05khuVmmtirZnS31hpvFLCDf3OAycSbEdPOJZjA=.png",
+    title: "sticker38",
+  },
+  {
+    id: "U3RpY2tlci02NDI5OA==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvG741sDh/7vM0UCi0hdX6J/0jGyW+gIJW6/0m0h2Km5U=.png",
+    title: "sticker39",
+  },
+  {
+    id: "U3RpY2tlci02NDM3Mw==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvo0dkzKSEkPPPUgIiL6NVyaDGac1Vlwt6uUhxRzBEsAQ=.png",
+    title: "sticker40",
+  },
+  {
+    id: "U3RpY2tlci02NDQ1OA==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvgDhtO8WbclqM+n+M0qg7ZO1xDcvZdTZFsP40Df0M47A=.png",
+    title: "sticker41",
+  },
+  {
+    id: "U3RpY2tlci02NDU1Ng==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvPS541a+Nod4BlWfgv9TsyuFWeffsd1IRBbhq7NOglMc=.png",
+    title: "sticker42",
+  },
+  {
+    id: "U3RpY2tlci02NDU1OQ==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvPS541a+Nod4BlWfgv9Tsytrs7W6rP2N+n/QO9fFfDRA=.png",
+    title: "sticker43",
+  },
+  {
+    id: "U3RpY2tlci02NDYyNw==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvPYE7nWhv/jsLANXW4p/w3hpx9Von2LNf/Ofk8DxHqes=.png",
+    title: "sticker44",
+  },
+  {
+    id: "U3RpY2tlci02MzQxNA==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc21DnDN+2faE1Bk8Mt+qlLGDRJn1165x5F6CK/7+/BpOvK8Jfutuss4GPx5kKFSG42jCjJrQmzHGKoeS7b7LvQlrViAsswR6iOvN2yQP9Q0Y6lwa/X+0A2Rv3d5D91N7wuknl8uAS09uNi2HUbFs5Rzk=.webp",
+    title: "sticker45",
+  },
+  {
+    id: "U3RpY2tlci02MzQ3Ng==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc21DnDN+2faE1Bk8Mt+qlLGDRJn1165x5F6CK/7+/BpOvK8Jfutuss4GPx5kKFSG42jCjJrQmzHGKoeS7b7LvQlrViAsswR6iOvN2yQP9Q0Y6lwa/X+0A2Rv3d5D91N7wuib0dbqcaxX/jKW//lrn1Ic=.webp",
+    title: "sticker46",
+  },
+  {
+    id: "U3RpY2tlci02MzU1MQ==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc21DnDN+2faE1Bk8Mt+qlLGDRJn1165x5F6CK/7+/BpOvK8Jfutuss4GPx5kKFSG42jCjJrQmzHGKoeS7b7LvQlrViAsswR6iOvN2yQP9Q0Y6lwa/X+0A2Rv3d5D91N7wuuB4cDHqNatw3Bn6GlXHnb8=.webp",
+    title: "sticker47",
+  },
+  {
+    id: "U3RpY2tlci02Mzk4OA==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvV2cjVa1g2F2MIwH87pqyPVIye7glXXFOGqDE+xn2sPw=.png",
+    title: "sticker48",
+  },
+  {
+    id: "U3RpY2tlci02NDAyMg==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvBpSB3If4fn0CLQzAD1mkxwkUNjd3jZkfkp3bQ4fTbY8=.png",
+    title: "sticker49",
+  },
+];
diff --git a/app/src/features/admin/components/AdminAppLayout.tsx b/app/src/features/admin/components/AdminAppLayout.tsx
new file mode 100644
index 00000000..250d41c7
--- /dev/null
+++ b/app/src/features/admin/components/AdminAppLayout.tsx
@@ -0,0 +1,64 @@
+import AdminSidebar from "./AdminSidebar";
+import AdminHeader from "./AdminHeader";
+import styled from "styled-components";
+import { DESKTOP_VIEW, MOBILE_VIEW } from "@constants";
+import { useAppSelector } from "@hooks/useGlobalState";
+import { View } from "@state/admin/adminView";
+import UsersList from "./AdminUsersList";
+import GroupsList from "./AdminGroupsList";
+
+const StyledAppLayout = styled.div`
+  display: grid;
+  height: 100vh;
+  grid-template-rows: auto 1fr;
+  overflow-x: auto;
+  @media ${MOBILE_VIEW} {
+    grid-template-columns: 1fr;
+    & > main {
+      padding: 0;
+    }
+    & > aside {
+      display: none;
+    }
+  }
+
+  @media ${DESKTOP_VIEW} {
+    display: grid;
+    grid-template-columns: minmax(20rem, 1.3fr) 5fr;
+
+    & > main {
+      display: block;
+    }
+
+    & > aside {
+      display: block;
+    }
+  }
+`;
+
+const Main = styled.main`
+  overflow-y: auto;
+  padding: 4rem 2.4rem;
+  background-color: var(--admin-header-bg);
+  &::-webkit-scrollbar {
+    display: block;
+    width: 0.6rem;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--scrollbar-color);
+    border-radius: 0.4rem;
+  }
+`;
+
+function AdminAppLayout() {
+  const adminView = useAppSelector((state) => state.adminView.value);
+  return (
+    <StyledAppLayout>
+      <AdminHeader />
+      <AdminSidebar />
+      <Main>{adminView === View.USERS ? <UsersList /> : <GroupsList />}</Main>
+    </StyledAppLayout>
+  );
+}
+
+export default AdminAppLayout;
diff --git a/app/src/features/admin/components/AdminGroupsList.tsx b/app/src/features/admin/components/AdminGroupsList.tsx
new file mode 100644
index 00000000..f47e0798
--- /dev/null
+++ b/app/src/features/admin/components/AdminGroupsList.tsx
@@ -0,0 +1,64 @@
+import styled from "styled-components";
+import { useEffect, useState } from "react";
+import { useGroups } from "../hooks/useGroups";
+import { Group } from "types/admin";
+import Filter from "./Filter";
+import GroupCard from "./GroupCard";
+import { DESKTOP_VIEW, MOBILE_VIEW } from "@constants";
+
+const groupFilters = ["all", "filtered", "unfiltered"];
+const Container = styled.div`
+  gap: 3.2rem;
+  display: flex;
+  margin: 0 auto;
+  flex-direction: column;
+`;
+const StyledGroupsList = styled.ul`
+  display: grid;
+  gap: 1.6rem 0.6rem;
+  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
+  @media ${MOBILE_VIEW} {
+    padding: 0 calc(50% - 7.5rem);
+  }
+  @media ${DESKTOP_VIEW} {
+    padding: 1.6rem;
+  }
+`;
+function GroupsList() {
+  const { data } = useGroups();
+  const groups = data?.data.groupsAndChannels;
+  const [renderedGroups, setRenderedGroups] = useState<Group[]>(groups);
+  const [currentFilter, setCurrentFilter] = useState("all");
+
+  useEffect(() => {
+    const filteredGroups: Group[] =
+      currentFilter === "all"
+        ? groups
+        : currentFilter === "filtered"
+          ? groups?.filter((group: Group) => group.isFilterd)
+          : groups?.filter((group: Group) => !group.isFilterd);
+    setRenderedGroups(filteredGroups);
+  }, [groups, currentFilter]);
+  return (
+    <Container>
+      <Filter
+        filters={groupFilters}
+        onFilterChange={(filter: string) => setCurrentFilter(filter)}
+      />
+      <StyledGroupsList>
+        {renderedGroups?.map((group: Group) => (
+          <GroupCard
+            key={group.id}
+            id={group.id}
+            name={group.name}
+            photo={group.picture}
+            filtered={group.isFilterd}
+            numberOfMembers={group.numberOfMembers}
+          />
+        ))}
+      </StyledGroupsList>
+    </Container>
+  );
+}
+
+export default GroupsList;
diff --git a/app/src/features/admin/components/AdminHeader.tsx b/app/src/features/admin/components/AdminHeader.tsx
new file mode 100644
index 00000000..b8829fa8
--- /dev/null
+++ b/app/src/features/admin/components/AdminHeader.tsx
@@ -0,0 +1,45 @@
+import styled from "styled-components";
+import AdminHeaderMenu from "./AdminHeaderMenu";
+import AdminNavMenu from "./AdminNavMenu";
+import { DESKTOP_VIEW, MOBILE_VIEW } from "@constants";
+import Heading from "@components/Heading";
+import { useAppSelector } from "@hooks/useGlobalState";
+import { useProfileSettings } from "@features/profile-settings/hooks/useProfileSettings";
+
+const Header = styled.header`
+  display: flex;
+  align-items: center;
+  gap: minmax(2.4rem, 20px);
+  padding: 1.2rem 2.4rem;
+  justify-content: flex-start;
+  background-color: var(--admin-header-bg);
+  border-bottom: 1px solid var(--scrollbar-color);
+  @media ${MOBILE_VIEW} {
+    & > :first-child {
+      display: block;
+    }
+  }
+
+  @media ${DESKTOP_VIEW} {
+    & > :first-child {
+      display: none;
+    }
+  }
+`;
+const H4 = styled(Heading)`
+  color: var(--color-text);
+  flex: 1;
+`;
+
+function AdminHeader() {
+  const { data: user } = useProfileSettings();
+  return (
+    <Header>
+      <AdminNavMenu />
+      <H4 as="h4">Hi, {user?.firstName + " " + user?.lastName} 👋️</H4>
+      <AdminHeaderMenu />
+    </Header>
+  );
+}
+
+export default AdminHeader;
diff --git a/app/src/features/admin/components/AdminHeaderMenu.tsx b/app/src/features/admin/components/AdminHeaderMenu.tsx
new file mode 100644
index 00000000..5d921136
--- /dev/null
+++ b/app/src/features/admin/components/AdminHeaderMenu.tsx
@@ -0,0 +1,33 @@
+import styled from "styled-components";
+import Logout from "@components/Logout";
+import ThemeToggle from "@components/side-bar/chats/theme-toggle/ThemeToggle";
+
+const StyledHeaderMenu = styled.ul`
+  margin: 0;
+  padding: 0;
+  gap: 2rem;
+  display: flex;
+  list-style: none;
+  align-items: center;
+  justify-content: flex-end;
+  position: relative;
+  width: 8rem;
+`;
+const ListItem = styled.li`
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+`;
+
+function AdminHeaderMenu() {
+  return (
+    <StyledHeaderMenu data-testid="admin-header-menu">
+      <ThemeToggle isAdmin={true} />
+      <ListItem>
+        <Logout size={2.2} />
+      </ListItem>
+    </StyledHeaderMenu>
+  );
+}
+
+export default AdminHeaderMenu;
diff --git a/app/src/features/admin/components/AdminMainNav.tsx b/app/src/features/admin/components/AdminMainNav.tsx
new file mode 100644
index 00000000..b03ed32e
--- /dev/null
+++ b/app/src/features/admin/components/AdminMainNav.tsx
@@ -0,0 +1,88 @@
+import { DESKTOP_VIEW, MOBILE_VIEW } from "@constants";
+import { getIcon } from "@data/icons";
+import { useAppDispatch, useAppSelector } from "@hooks/useGlobalState";
+import { setView, View } from "@state/admin/adminView";
+import styled, { css } from "styled-components";
+
+const NavList = styled.ul`
+  display: flex;
+  gap: 2.8rem;
+  list-style: none;
+  flex-direction: column;
+  color: var(--color-text);
+  margin-top: 5.4rem;
+`;
+
+const NavLink = styled.li<{ $active?: boolean }>`
+  text-decoration: none;
+  margin-right: -2.5rem;
+  color: #f5f5f5;
+  cursor: pointer;
+
+  gap: 1.2rem;
+  display: flex;
+  font-weight: 500;
+  font-size: 1.2rem;
+  align-items: center;
+  transition: all 0.3s;
+  padding: 1.2rem 1.2rem;
+  border-radius: var(--border-radius-one-sided);
+
+  & svg {
+    width: 2.4rem;
+    height: 2.4rem;
+    color: #f5f5f5;
+    transition: all 0.2s;
+  }
+  ${({ $active }) =>
+    $active &&
+    css`
+      background-color: var(--admin-main-bg);
+      color: var(--accent-color);
+      svg {
+        color: var(--accent-color);
+      }
+    `};
+`;
+
+function AdminMainNav() {
+  const activeView = useAppSelector((state) => state.adminView.value);
+  const dispatch = useAppDispatch();
+  const handleViewChange = (view: View) => {
+    if (activeView !== view) {
+      dispatch(
+        setView({
+          value: view,
+        })
+      );
+    }
+  };
+  return (
+    <nav data-testid="admin-main-nav">
+      <NavList data-testid="nav-list">
+        <NavLink
+          onClick={() => {
+            handleViewChange(View.USERS);
+          }}
+          $active={activeView === View.USERS}
+          data-testid="users-nav"
+        >
+          {getIcon("Contacts")}
+          <span>Users</span>
+        </NavLink>
+        <NavLink
+          onClick={() => {
+            handleViewChange(View.GROUPS);
+          }}
+          $active={activeView === View.GROUPS}
+          data-testid="groups-nav"
+        >
+          {getIcon("Group")}
+          <span>Groups</span>
+        </NavLink>
+      </NavList>
+    </nav>
+  );
+}
+
+export default AdminMainNav;
diff --git a/app/src/features/admin/components/AdminNavMenu.tsx b/app/src/features/admin/components/AdminNavMenu.tsx
new file mode 100644
index 00000000..a76d8582
--- /dev/null
+++ b/app/src/features/admin/components/AdminNavMenu.tsx
@@ -0,0 +1,87 @@
+import SideBarMenuItem from "@components/side-bar/chats/SideBarMenuItem";
+import { getIcon } from "@data/icons";
+import { useAppDispatch, useAppSelector } from "@hooks/useGlobalState";
+import { useMouseLeave } from "@hooks/useMouseLeave";
+import { setView, View } from "@state/admin/adminView";
+import { useState } from "react";
+import styled from "styled-components";
+
+const ToolsIcon = styled.div`
+  > svg {
+    color: var(--color-icon-secondary);
+    border-radius: var(--border-radius-modal);
+    padding: 0.3rem;
+    &:hover {
+      cursor: pointer;
+      background-color: var(--color-background-compact-menu-hover);
+    }
+  }
+  margin: 0 1rem 0 -1rem;
+`;
+const StyledList = styled.ul<{ $isOpened?: boolean }>`
+  width: 13rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  justify-content: space-between;
+  list-style: none;
+  padding: 0.5rem 0.2rem;
+  background-color: var(--color-background);
+  box-shadow: 0 0.25rem 0.5rem 0.125rem var(--color-default-shadow);
+  border-radius: var(--border-radius-default);
+  visibility: ${({ $isOpened }) => ($isOpened ? "visible" : "hidden")};
+
+  z-index: 2;
+`;
+
+function AdminNavMenu() {
+  const [isOpened, setIsOpened] = useState(false);
+  const ref = useMouseLeave(() => setIsOpened(false), false);
+  const handleOpenSettings = () => {
+    setIsOpened((prevState) => !prevState);
+  };
+  const activeView = useAppSelector((state) => state.adminView.value);
+  const dispatch = useAppDispatch();
+  const handleViewChange = (view: View) => {
+    if (activeView !== view) {
+      dispatch(
+        setView({
+          value: view,
+        })
+      );
+    }
+    setIsOpened(false);
+  };
+  return (
+    <>
+      <ToolsIcon onClick={handleOpenSettings} data-testid="menu-items-icon">
+        {getIcon("Menu")}
+      </ToolsIcon>
+      {isOpened && (
+        <StyledList
+          $isOpened={isOpened}
+          ref={ref as React.RefObject<HTMLUListElement>}
+        >
+          <SideBarMenuItem
+            data-testid="menu-item-users"
+            title="Users"
+            iconMapValue="Contacts"
+            onClick={() => {
+              handleViewChange(View.USERS);
+            }}
+          />
+          <SideBarMenuItem
+            data-testid="menu-item-groups"
+            title="Groups"
+            iconMapValue="NewGroup"
+            onClick={() => {
+              handleViewChange(View.GROUPS);
+            }}
+          />
+        </StyledList>
+      )}
+    </>
+  );
+}
+
+export default AdminNavMenu;
diff --git a/app/src/features/admin/components/AdminSidebar.tsx b/app/src/features/admin/components/AdminSidebar.tsx
new file mode 100644
index 00000000..fa28ab70
--- /dev/null
+++ b/app/src/features/admin/components/AdminSidebar.tsx
@@ -0,0 +1,30 @@
+import styled from "styled-components";
+import Logo from "./Logo";
+import AdminMainNav from "./AdminMainNav";
+import Heading from "@components/Heading";
+
+const Sidebar = styled.aside`
+  gap: 3.2rem;
+  display: flex;
+  grid-row: 1 / -1;
+  flex-direction: column;
+  padding: 3.2rem 2.4rem;
+  background-color: var(--admin-sidebar-bg);
+`;
+const H1 = styled(Heading)`
+  color: white;
+  margin-bottom: 2.4rem;
+  text-align: center;
+`;
+
+function AdminSidebar() {
+  return (
+    <Sidebar data-testid="admin-sidebar">
+      <Logo />
+      <H1 as="h1">TelWare</H1>
+      <AdminMainNav />
+    </Sidebar>
+  );
+}
+
+export default AdminSidebar;
diff --git a/app/src/features/admin/components/AdminUsersList.tsx b/app/src/features/admin/components/AdminUsersList.tsx
new file mode 100644
index 00000000..2efd9124
--- /dev/null
+++ b/app/src/features/admin/components/AdminUsersList.tsx
@@ -0,0 +1,63 @@
+import styled from "styled-components";
+import { useEffect, useState } from "react";
+import { useUsers } from "../hooks/useUsers";
+import { User } from "types/admin";
+import Filter from "./Filter";
+import UserCard from "./UserCard";
+import { MOBILE_VIEW, DESKTOP_VIEW } from "@constants";
+
+const userFilters = ["all", "active", "deactivated", "banned"];
+const Container = styled.div`
+  gap: 3.2rem;
+  display: flex;
+  margin: 0 auto;
+  flex-direction: column;
+`;
+const StyledUsersList = styled.ul`
+  display: grid;
+  gap: 1.6rem;
+  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
+  @media ${MOBILE_VIEW} {
+    padding: 0 calc(50% - 10.5rem);
+  }
+  @media ${DESKTOP_VIEW} {
+    padding: 1.6rem;
+  }
+`;
+function UsersList() {
+  const { users: usersData } = useUsers();
+  const users = usersData?.data.users;
+  console.log(users);
+  const [renderedUsers, setRenderedUsers] = useState<User[]>(users);
+  const [currentFilter, setCurrentFilter] = useState("all");
+
+  useEffect(() => {
+    const filteredUsers: User[] =
+      currentFilter === "all"
+        ? users
+        : users?.filter((user: User) => user.accountStatus === currentFilter);
+    setRenderedUsers(filteredUsers);
+  }, [users, currentFilter]);
+
+  return (
+    <Container>
+      <Filter
+        filters={userFilters}
+        onFilterChange={(filter: string) => setCurrentFilter(filter)}
+      />
+      <StyledUsersList data-testid="users-list">
+        {renderedUsers?.map((user: User) => (
+          <UserCard
+            key={user.id}
+            id={user.id}
+            userName={user.username}
+            photo={user.photo}
+            status={user.accountStatus}
+          />
+        ))}
+      </StyledUsersList>
+    </Container>
+  );
+}
+
+export default UsersList;
diff --git a/app/src/features/admin/components/Filter.tsx b/app/src/features/admin/components/Filter.tsx
new file mode 100644
index 00000000..e1b5e1a0
--- /dev/null
+++ b/app/src/features/admin/components/Filter.tsx
@@ -0,0 +1,77 @@
+import { useState } from "react";
+import styled from "styled-components";
+import { MOBILE_VIEW, DESKTOP_VIEW } from "@constants";
+
+interface Props {
+  filters: string[];
+  onFilterChange: (filter: string) => void;
+}
+
+const FilterContainer = styled.div<{ $filters: number }>`
+  display: flex;
+
+  padding: 0;
+  background-color: var(--admin-sidebar-bg);
+  width: ${({ $filters }) => ($filters > 1 ? "fit-content" : "100%")};
+  margin: 0 auto;
+  & > div {
+    border: 1px solid var(--color-border) none;
+  }
+  & > :first-child {
+    border-left: none;
+    border-radius: var(--border-radius-left-sided-small);
+  }
+  & > :last-child {
+    border-right: none;
+    border-radius: var(--border-radius-right-sided-small);
+  }
+  border-radius: var(--border-radius-default-small);
+`;
+
+const FilterCategory = styled.div<{ $active?: boolean }>`
+  text-align: center;
+  cursor: pointer;
+  color: var(--color-text);
+  font-size: 1.2rem;
+  transition: background-color 0.2s;
+  &:hover {
+    background-color: var(--color-chat-active);
+  }
+  background-color: ${({ $active }) =>
+    $active ? "var(--color-chat-active)" : "inherit"};
+  @media ${MOBILE_VIEW} {
+    font-size: 0.8rem;
+    width: 5rem;
+    padding: 0.4rem 0.2rem;
+  }
+  @media ${DESKTOP_VIEW} {
+    font-size: 1.2rem;
+    width: 10rem;
+    padding: 0.8rem;
+  }
+`;
+function Filter(props: Props) {
+  const { filters, onFilterChange } = props;
+  const [activeFilter, setActiveFilter] = useState(0);
+  const handleFilterChange = (filter: string, index: number) => {
+    setActiveFilter(index);
+    onFilterChange(filter);
+  };
+
+  return (
+    <FilterContainer $filters={filters?.length} data-testid="filter-container">
+      {filters.map((filter, index) => (
+        <FilterCategory
+          key={filter}
+          onClick={() => handleFilterChange(filter, index)}
+          $active={activeFilter === index}
+          data-testid={`filter-${filter}`}
+        >
+          {filter}
+        </FilterCategory>
+      ))}
+    </FilterContainer>
+  );
+}
+
+export default Filter;
diff --git a/app/src/features/admin/components/FilteredList.tsx b/app/src/features/admin/components/FilteredList.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/app/src/features/admin/components/GroupCard.tsx b/app/src/features/admin/components/GroupCard.tsx
new file mode 100644
index 00000000..d7c2972a
--- /dev/null
+++ b/app/src/features/admin/components/GroupCard.tsx
@@ -0,0 +1,80 @@
+import styled from "styled-components";
+import { useUnfilterGroup } from "../hooks/useUnfilterGroup";
+import { useFilterGroup } from "../hooks/useFilterGroup";
+import Avatar from "@components/Avatar";
+import Heading from "@components/Heading";
+import Button from "@components/Button";
+
+interface GroupCardProps {
+  id: string;
+  name: string;
+  photo: string;
+  filtered: boolean;
+  numberOfMembers: number;
+}
+
+const Card = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+  padding: 1.2rem;
+  border-radius: 0.8rem;
+  background-color: var(--admin-sidebar-bg);
+  height: 15rem;
+  width: 15rem;
+  align-items: center;
+`;
+const P = styled.p<{ $filtered?: boolean }>`
+  color: ${({ $filtered }) =>
+    $filtered === undefined
+      ? "var(--color-text)"
+      : $filtered === false
+        ? "var(--color-error)"
+        : "var(--admin-card-active)"};
+`;
+const GroupInfo = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+`;
+
+function GroupCard(props: GroupCardProps) {
+  const { id, name, photo, filtered, numberOfMembers } = props;
+  const { filterGroup } = useFilterGroup();
+  const { unfilterGroup } = useUnfilterGroup();
+  const handleFilterGroup = () => {
+    if (filtered) unfilterGroup(id);
+    else filterGroup(id);
+  };
+  const displayedName = name.length > 9 ? `${name.slice(0, 9)}...` : name;
+
+  return (
+    <Card data-testid={`group-card-${id}`}>
+      <GroupInfo>
+        <Avatar image={photo} name={name} />
+        <>
+          <Heading as="h4">{displayedName}</Heading>
+          <P $filtered={filtered}>{filtered ? "Filtered" : "Unfiltered"}</P>
+          <P>{numberOfMembers} members</P>
+        </>
+      </GroupInfo>
+      {
+        <Button
+          $type={filtered ? "danger" : "normal"}
+          onClick={handleFilterGroup}
+          $width="8rem"
+          data-testid={
+            filtered ? `unfilter-button-${id}` : `filter-button-${id}`
+          }
+        >
+          {filtered ? "Unfilter" : "Filter"}
+        </Button>
+      }
+    </Card>
+  );
+}
+
+export default GroupCard;
diff --git a/app/src/features/admin/components/Logo.tsx b/app/src/features/admin/components/Logo.tsx
new file mode 100644
index 00000000..2b93ad6e
--- /dev/null
+++ b/app/src/features/admin/components/Logo.tsx
@@ -0,0 +1,20 @@
+import styled from "styled-components";
+import src from "/assets/TelWare.png";
+const StyledLogo = styled.div`
+  text-align: center;
+`;
+
+const Img = styled.img`
+  height: 9.6rem;
+  width: auto;
+`;
+
+function Logo() {
+  return (
+    <StyledLogo>
+      <Img src={src} alt="Logo" data-testid="logo" />
+    </StyledLogo>
+  );
+}
+
+export default Logo;
diff --git a/app/src/features/admin/components/UserCard.tsx b/app/src/features/admin/components/UserCard.tsx
new file mode 100644
index 00000000..620784b0
--- /dev/null
+++ b/app/src/features/admin/components/UserCard.tsx
@@ -0,0 +1,83 @@
+import styled from "styled-components";
+import { userStatus } from "types/admin";
+import { useBanUser } from "../hooks/useBanUser";
+import { useActivateUser } from "../hooks/useActivateUser";
+import { useDeactivateUser } from "../hooks/useDeactivateUser";
+import Avatar from "@components/Avatar";
+import Heading from "@components/Heading";
+import UserCardButton from "./UserCardButton";
+
+interface UserCardProps {
+  id: string;
+  userName: string;
+  photo: string;
+  status: userStatus;
+}
+
+const Card = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+  padding: 2.4rem;
+  border-radius: 0.8rem;
+  background-color: var(--admin-sidebar-bg);
+  height: 15rem;
+  width: 21rem;
+`;
+const P = styled.p<{ $status: userStatus }>`
+  color: ${({ $status }) =>
+    $status === userStatus.active
+      ? "var(--admin-card-active)"
+      : "var(--color-error)"};
+`;
+const UserInfo = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+`;
+
+function UserCard(props: UserCardProps) {
+  const { id, userName, photo, status } = props;
+  const { activateUser } = useActivateUser();
+  const { deactivateUser } = useDeactivateUser();
+  const { banUser } = useBanUser();
+  const handleUserStatusChange = (status: string) => {
+    switch (status) {
+      case userStatus.active:
+        activateUser(id);
+        break;
+      case userStatus.deactivated:
+        deactivateUser(id);
+        break;
+      case userStatus.banned:
+        banUser(id);
+        break;
+      default:
+        break;
+    }
+  };
+  const displayedName =
+    userName?.length > 9 ? `${userName?.slice(0, 9)}...` : userName;
+
+  return (
+    <Card data-testid={`user-card-${id}`}>
+      <UserInfo>
+        <Avatar image={photo} name={userName} />
+        <>
+          <Heading as="h4">{displayedName}</Heading>
+          <P $status={status}>{status}</P>
+        </>
+      </UserInfo>
+      <UserCardButton
+        status={status}
+        onChangeStatus={handleUserStatusChange}
+        data-testid={`user-card-button-${id}`}
+      />
+    </Card>
+  );
+}
+
+export default UserCard;
diff --git a/app/src/features/admin/components/UserCardButton.tsx b/app/src/features/admin/components/UserCardButton.tsx
new file mode 100644
index 00000000..873633e9
--- /dev/null
+++ b/app/src/features/admin/components/UserCardButton.tsx
@@ -0,0 +1,109 @@
+import styled from "styled-components";
+import { userStatus } from "types/admin";
+import Button from "@components/Button";
+import Modal from "@components/Modal";
+import { useState } from "react";
+import { set } from "react-hook-form";
+
+interface Props {
+  status: userStatus;
+  onChangeStatus: (status: userStatus) => void;
+}
+const ButtonContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1.6rem;
+  padding: 0.8rem 0;
+`;
+
+function UserCardButton(props: Props) {
+  const { status, onChangeStatus } = props;
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [action, setAction] = useState("");
+  let renderedButtons;
+  const handleDeactivate = () => {
+    setAction("deactivate");
+    setIsModalOpen(true);
+  };
+  const handleBan = () => {
+    setAction("ban");
+    setIsModalOpen(true);
+  };
+  switch (status) {
+    case userStatus.active:
+      renderedButtons = (
+        <>
+          <Button
+            onClick={handleDeactivate}
+            $type="normal"
+            $width="15rem"
+            data-testid="deactivate-button"
+          >
+            Deactivate
+          </Button>
+          <Button
+            $type="danger"
+            $width="15rem"
+            datatype="ban-button"
+            onClick={handleBan}
+          >
+            Ban
+          </Button>
+        </>
+      );
+      break;
+    case userStatus.deactivated:
+      renderedButtons = (
+        <>
+          <Button
+            $type="modal"
+            $width="15rem"
+            onClick={() => onChangeStatus(userStatus.active)}
+            data-testid="activate-button"
+          >
+            Activate
+          </Button>
+          <Button
+            onClick={handleBan}
+            $type="danger"
+            $width="15rem"
+            data-testid="ban-button"
+          >
+            Ban
+          </Button>
+        </>
+      );
+      break;
+    default:
+      renderedButtons = null;
+      break;
+  }
+  return (
+    <>
+      <Modal
+        isOpen={isModalOpen}
+        message={`You are going to ${action} this user${action === "ban" ? "for ever" : ""}.`}
+        title={`${action} User`}
+        onClose={() => setIsModalOpen(false)}
+      >
+        <Button
+          onClick={() =>
+            onChangeStatus(
+              action === "ban" ? userStatus.banned : userStatus.deactivated
+            )
+          }
+          $type="danger"
+          $width="10rem"
+          data-testid="ban-button"
+          style={{ margin: "auto" }}
+        >
+          {action}
+        </Button>
+      </Modal>
+      <ButtonContainer>{renderedButtons}</ButtonContainer>
+    </>
+  );
+}
+
+export default UserCardButton;
diff --git a/app/src/features/admin/hooks/useActivateUser.ts b/app/src/features/admin/hooks/useActivateUser.ts
new file mode 100644
index 00000000..fb3d0efd
--- /dev/null
+++ b/app/src/features/admin/hooks/useActivateUser.ts
@@ -0,0 +1,28 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import toast from "react-hot-toast";
+import { apiActivateUser } from "../services/apiUsers";
+
+function useActivateUser() {
+  const queryClient = useQueryClient();
+
+  const {
+    mutate: activateUser,
+    data,
+    error,
+    isPending,
+    isSuccess,
+  } = useMutation({
+    mutationFn: (userId: string) => apiActivateUser(userId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["all-users"] });
+      toast.success("User activated successfully");
+    },
+    onError: () => {
+      toast.error("Error activating user");
+    },
+  });
+
+  return { activateUser, data, error, isPending, isSuccess };
+}
+
+export { useActivateUser };
diff --git a/app/src/features/admin/hooks/useBanUser.ts b/app/src/features/admin/hooks/useBanUser.ts
new file mode 100644
index 00000000..32a592e4
--- /dev/null
+++ b/app/src/features/admin/hooks/useBanUser.ts
@@ -0,0 +1,28 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import toast from "react-hot-toast";
+import { apiBanUser } from "../services/apiUsers";
+
+function useBanUser() {
+  const queryClient = useQueryClient();
+
+  const {
+    mutate: banUser,
+    data,
+    error,
+    isPending,
+    isSuccess,
+  } = useMutation({
+    mutationFn: (userId: string) => apiBanUser(userId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["all-users"] });
+      toast.success("User banned successfully");
+    },
+    onError: () => {
+      toast.error("Error banning user");
+    },
+  });
+
+  return { banUser, data, error, isPending, isSuccess };
+}
+
+export { useBanUser };
diff --git a/app/src/features/admin/hooks/useDeactivateUser.ts b/app/src/features/admin/hooks/useDeactivateUser.ts
new file mode 100644
index 00000000..c45830c5
--- /dev/null
+++ b/app/src/features/admin/hooks/useDeactivateUser.ts
@@ -0,0 +1,28 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import toast from "react-hot-toast";
+import { apiDeactivateUser } from "../services/apiUsers";
+
+function useDeactivateUser() {
+  const queryClient = useQueryClient();
+
+  const {
+    mutate: deactivateUser,
+    data,
+    error,
+    isPending,
+    isSuccess,
+  } = useMutation({
+    mutationFn: (userId: string) => apiDeactivateUser(userId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["all-users"] });
+      toast.success("User deactivated successfully");
+    },
+    onError: () => {
+      toast.error("Error deactivating user");
+    },
+  });
+
+  return { deactivateUser, data, error, isPending, isSuccess };
+}
+
+export { useDeactivateUser };
diff --git a/app/src/features/admin/hooks/useFilterGroup.ts b/app/src/features/admin/hooks/useFilterGroup.ts
new file mode 100644
index 00000000..4073fb84
--- /dev/null
+++ b/app/src/features/admin/hooks/useFilterGroup.ts
@@ -0,0 +1,28 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import toast from "react-hot-toast";
+import { apiFilterGroup } from "../services/apiGroups";
+
+function useFilterGroup() {
+  const queryClient = useQueryClient();
+
+  const {
+    mutate: filterGroup,
+    data,
+    error,
+    isPending,
+    isSuccess,
+  } = useMutation({
+    mutationFn: (groupId: string) => apiFilterGroup(groupId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["all-groups"] });
+      toast.success("Group Filtered successfully");
+    },
+    onError: () => {
+      toast.error("Error filtering group");
+    },
+  });
+
+  return { filterGroup, data, error, isPending, isSuccess };
+}
+
+export { useFilterGroup };
diff --git a/app/src/features/admin/hooks/useGroups.ts b/app/src/features/admin/hooks/useGroups.ts
new file mode 100644
index 00000000..1f38aff5
--- /dev/null
+++ b/app/src/features/admin/hooks/useGroups.ts
@@ -0,0 +1,12 @@
+import { useQuery } from "@tanstack/react-query";
+import { apiGetGroups } from "../services/apiGroups";
+
+function useGroups() {
+  const { data, error, isLoading } = useQuery({
+    queryKey: ["all-groups"],
+    queryFn: apiGetGroups,
+  });
+  return { data, error, isLoading };
+}
+
+export { useGroups };
diff --git a/app/src/features/admin/hooks/useUnfilterGroup.ts b/app/src/features/admin/hooks/useUnfilterGroup.ts
new file mode 100644
index 00000000..1125cda9
--- /dev/null
+++ b/app/src/features/admin/hooks/useUnfilterGroup.ts
@@ -0,0 +1,28 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import toast from "react-hot-toast";
+import { apiUnfilterGroup } from "../services/apiGroups";
+
+function useUnfilterGroup() {
+  const queryClient = useQueryClient();
+
+  const {
+    mutate: unfilterGroup,
+    data,
+    error,
+    isPending,
+    isSuccess,
+  } = useMutation({
+    mutationFn: (groupId: string) => apiUnfilterGroup(groupId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["all-groups"] });
+      toast.success("Group Unfiltered successfully");
+    },
+    onError: () => {
+      toast.error("Error unfiltering group");
+    },
+  });
+
+  return { unfilterGroup, data, error, isPending, isSuccess };
+}
+
+export { useUnfilterGroup };
diff --git a/app/src/features/admin/hooks/useUsers.ts b/app/src/features/admin/hooks/useUsers.ts
new file mode 100644
index 00000000..f126665d
--- /dev/null
+++ b/app/src/features/admin/hooks/useUsers.ts
@@ -0,0 +1,16 @@
+import { useQuery } from "@tanstack/react-query";
+import { apiGetUsers } from "../services/apiUsers";
+
+function useUsers() {
+  const {
+    data: users,
+    error,
+    isLoading,
+  } = useQuery({
+    queryKey: ["all-users"],
+    queryFn: apiGetUsers,
+  });
+  return { users, error, isLoading };
+}
+
+export { useUsers };
diff --git a/app/src/features/admin/services/apiGroups.ts b/app/src/features/admin/services/apiGroups.ts
new file mode 100644
index 00000000..97bda3d8
--- /dev/null
+++ b/app/src/features/admin/services/apiGroups.ts
@@ -0,0 +1,71 @@
+import { API_URL } from "@constants";
+
+async function apiGetGroups() {
+  try {
+    const res = await fetch(`${API_URL}/users/all-groups`, {
+      method: "GET",
+      credentials: "include",
+      headers: {
+        "Content-Type": "application/json",
+        "X-Session-Token": localStorage.getItem("sessionId") || "",
+      },
+    });
+
+    if (res.status !== 200) {
+      throw new Error(res.statusText);
+    }
+
+    const data = await res.json();
+    return data;
+  } catch (error) {
+    console.error("Failed to fetch groups", error);
+    throw error;
+  }
+}
+async function apiFilterGroup(groupId: string) {
+  try {
+    const res = await fetch(`${API_URL}/chats/groups/filter/${groupId}`, {
+      method: "PATCH",
+      credentials: "include",
+      headers: {
+        "Content-Type": "application/json",
+        "X-Session-Token": localStorage.getItem("sessionId") || "",
+      },
+    });
+
+    if (res.status !== 200) {
+      throw new Error(res.statusText);
+    }
+
+    const data = await res.json();
+    return data;
+  } catch (error) {
+    console.error("Failed to filter group", error);
+    throw error;
+  }
+}
+
+async function apiUnfilterGroup(groupId: string) {
+  try {
+    const res = await fetch(`${API_URL}/chats/groups/unfilter/${groupId}`, {
+      method: "PATCH",
+      credentials: "include",
+      headers: {
+        "Content-Type": "application/json",
+        "X-Session-Token": localStorage.getItem("sessionId") || "",
+      },
+    });
+
+    if (res.status !== 200) {
+      throw new Error(res.statusText);
+    }
+
+    const data = await res.json();
+    return data;
+  } catch (error) {
+    console.error("Failed to unfilter group", error);
+    throw error;
+  }
+}
+
+export { apiGetGroups, apiFilterGroup, apiUnfilterGroup };
diff --git a/app/src/features/admin/services/apiUsers.ts b/app/src/features/admin/services/apiUsers.ts
new file mode 100644
index 00000000..2937699a
--- /dev/null
+++ b/app/src/features/admin/services/apiUsers.ts
@@ -0,0 +1,92 @@
+import { API_URL } from "@constants";
+
+async function apiGetUsers() {
+  try {
+    const res = await fetch(`${API_URL}/users`, {
+      method: "GET",
+      credentials: "include",
+      headers: {
+        "Content-Type": "application/json",
+        "X-Session-Token": localStorage.getItem("sessionId") || "",
+      },
+    });
+
+    if (res.status !== 200) {
+      throw new Error(res.statusText);
+    }
+
+    const data = await res.json();
+    return data;
+  } catch (error) {
+    console.error("Failed to fetch users", error);
+    throw error;
+  }
+}
+async function apiDeactivateUser(userId: string) {
+  try {
+    const res = await fetch(`${API_URL}/users/deactivate/${userId}`, {
+      method: "PATCH",
+      credentials: "include",
+      headers: {
+        "Content-Type": "application/json",
+        "X-Session-Token": localStorage.getItem("sessionId") || "",
+      },
+    });
+    if (res.status !== 200) {
+      throw new Error(res.statusText);
+    }
+
+    const data = await res.json();
+    return data;
+  } catch (error) {
+    console.error("Failed to deactivate user", error);
+    throw error;
+  }
+}
+async function apiBanUser(userId: string) {
+  try {
+    const res = await fetch(`${API_URL}/users/ban/${userId}`, {
+      method: "PATCH",
+      credentials: "include",
+      headers: {
+        "Content-Type": "application/json",
+        "X-Session-Token": localStorage.getItem("sessionId") || "",
+      },
+    });
+
+    if (res.status !== 200) {
+      throw new Error(res.statusText);
+    }
+
+    const data = await res.json();
+    return data;
+  } catch (error) {
+    console.error("Failed to ban user", error);
+    throw error;
+  }
+}
+
+async function apiActivateUser(userId: string) {
+  try {
+    const res = await fetch(`${API_URL}/users/activate/${userId}`, {
+      method: "PATCH",
+      credentials: "include",
+      headers: {
+        "Content-Type": "application/json",
+        "X-Session-Token": localStorage.getItem("sessionId") || "",
+      },
+    });
+
+    if (res.status !== 200) {
+      throw new Error(res.statusText);
+    }
+
+    const data = await res.json();
+    return data;
+  } catch (error) {
+    console.error("Failed to activate user", error);
+    throw error;
+  }
+}
+
+export { apiGetUsers, apiDeactivateUser, apiBanUser, apiActivateUser };
diff --git a/app/src/features/authentication/login/LoginForm/LoginForm.test.tsx b/app/src/features/authentication/login/LoginForm/LoginForm.test.tsx
index be11446f..5f9bdd1d 100644
--- a/app/src/features/authentication/login/LoginForm/LoginForm.test.tsx
+++ b/app/src/features/authentication/login/LoginForm/LoginForm.test.tsx
@@ -21,7 +21,7 @@ describe("LoginForm", () => {
 
   const renderWithQueryClient = (ui: React.ReactElement) => {
     return render(
-      <QueryClientProvider client={queryClient}>{ui}</QueryClientProvider>
+      <QueryClientProvider client={queryClient}>{ui}</QueryClientProvider>,
     );
   };
 
@@ -48,7 +48,7 @@ describe("LoginForm", () => {
     await waitFor(() => {
       expect(mockLogin).toHaveBeenCalledWith(
         { email: "test@example.com", password: "password123" },
-        expect.any(Object)
+        expect.any(Object),
       );
     });
   });
@@ -58,7 +58,7 @@ describe("LoginForm", () => {
     mockLogin.mockImplementation(
       (_, { onSettled } = { onSettled: jest.fn() }) => {
         onSettled(null, { message: errorMessage });
-      }
+      },
     );
 
     renderWithQueryClient(<LoginForm />);
@@ -109,7 +109,7 @@ describe("LoginForm", () => {
     renderWithQueryClient(<LoginForm />);
 
     expect(screen.getByRole("button")).toContainElement(
-      screen.getByTestId("spinner")
+      screen.getByTestId("spinner"),
     );
   });
 
@@ -138,10 +138,10 @@ describe("LoginForm", () => {
       expect(loginSuccess).toHaveBeenCalled();
 
       expect((screen.getByLabelText(/email/i) as HTMLInputElement).value).toBe(
-        ""
+        "",
       );
       expect(
-        (screen.getByLabelText(/password/i) as HTMLInputElement).value
+        (screen.getByLabelText(/password/i) as HTMLInputElement).value,
       ).toBe("");
     });
   });
diff --git a/app/src/features/authentication/login/LoginSection.tsx b/app/src/features/authentication/login/LoginSection.tsx
index 1c3fa9ca..d1866ee3 100644
--- a/app/src/features/authentication/login/LoginSection.tsx
+++ b/app/src/features/authentication/login/LoginSection.tsx
@@ -6,9 +6,6 @@ import StyledLink from "@components/StyledLink";
 import OauthOptions from "../oauth/OauthOptions";
 
 const Container = styled.div`
-  max-width: 120rem;
-  margin: 0 auto;
-
   display: flex;
   flex-direction: column;
   gap: 2rem;
@@ -20,6 +17,8 @@ const P = styled.p`
   position: absolute;
   bottom: -4rem;
 
+  text-align: center;
+
   margin: 0 auto;
   color: var(--color-text-secondary);
 
diff --git a/app/src/features/authentication/login/hooks/useAuthCheck.ts b/app/src/features/authentication/login/hooks/useAuthCheck.ts
index ee0111a3..758c3496 100644
--- a/app/src/features/authentication/login/hooks/useAuthCheck.ts
+++ b/app/src/features/authentication/login/hooks/useAuthCheck.ts
@@ -2,14 +2,24 @@ import { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 
 import { useAuthStatus } from "./useAuthStatus";
+import { useAppDispatch, useAppSelector } from "@hooks/useGlobalState";
+import { resetLeftSideBar } from "@state/side-bar/sideBar";
 
 const useAuthCheck = () => {
   const { isAuth } = useAuthStatus();
   const navigate = useNavigate();
+  const isAdmin = useAppSelector((state) => state.user.userInfo.isAdmin);
+  const dispatch = useAppDispatch();
 
   useEffect(() => {
-    if (isAuth) navigate("/", { replace: true });
-  }, [isAuth, navigate]);
+    if (isAuth) {
+      if (isAdmin) navigate("/admin", { replace: true });
+      else {
+        navigate("/", { replace: true });
+        dispatch(resetLeftSideBar());
+      }
+    }
+  }, [isAuth, navigate, isAdmin, dispatch]);
 };
 
 export default useAuthCheck;
diff --git a/app/src/features/authentication/login/hooks/useAuthStatus.ts b/app/src/features/authentication/login/hooks/useAuthStatus.ts
index 0636b959..a69bfc31 100644
--- a/app/src/features/authentication/login/hooks/useAuthStatus.ts
+++ b/app/src/features/authentication/login/hooks/useAuthStatus.ts
@@ -1,6 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 
-import { checkAuth } from "../services/checkAuth";
+import { checkAuth } from "../services/apiCheckAuth";
 
 export function useAuthStatus() {
   const { data: isAuth, isPending } = useQuery({
diff --git a/app/src/features/authentication/login/hooks/useLogin.ts b/app/src/features/authentication/login/hooks/useLogin.ts
index b406b07b..3fba6c0c 100644
--- a/app/src/features/authentication/login/hooks/useLogin.ts
+++ b/app/src/features/authentication/login/hooks/useLogin.ts
@@ -1,15 +1,20 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useDispatch } from "react-redux";
 
 import { login as loginApi } from "../services/apiLogin";
+import { setUserInfo } from "@state/user/user";
 
 export function useLogin() {
   const queryClient = useQueryClient();
+  const dispatch = useDispatch();
 
   const { mutate: login, isPending } = useMutation({
     mutationFn: loginApi,
     onSuccess: (data) => {
+      localStorage.setItem("sessionId", data.sessionId);
       queryClient.setQueryData(["user"], { user: data.user });
       queryClient.invalidateQueries({ queryKey: ["isAuth"] });
+      dispatch(setUserInfo(data.user));
     },
   });
 
diff --git a/app/src/features/authentication/login/hooks/useUser.ts b/app/src/features/authentication/login/hooks/useUser.ts
new file mode 100644
index 00000000..28996fea
--- /dev/null
+++ b/app/src/features/authentication/login/hooks/useUser.ts
@@ -0,0 +1,13 @@
+import { apiUser } from "@features/authentication/oauth/services/apiUser";
+import { useQuery } from "@tanstack/react-query";
+
+export function useUser() {
+  const { data, isPending } = useQuery({
+    queryKey: ["user"],
+    queryFn: apiUser,
+  });
+
+  const user = data?.user;
+
+  return { user, isPending };
+}
diff --git a/app/src/features/authentication/login/schema/login.ts b/app/src/features/authentication/login/schema/login.ts
index bee76e3e..598d5f7f 100644
--- a/app/src/features/authentication/login/schema/login.ts
+++ b/app/src/features/authentication/login/schema/login.ts
@@ -1,6 +1,9 @@
 import * as yup from "yup";
 
 export const schema = yup.object({
-  email: yup.string().email("Please enter a valid email").required("Email is required"),
+  email: yup
+    .string()
+    .email("Please enter a valid email")
+    .required("Email is required"),
   password: yup.string().required("Password is required"),
 });
diff --git a/app/src/features/authentication/login/services/checkAuth.ts b/app/src/features/authentication/login/services/apiCheckAuth.ts
similarity index 65%
rename from app/src/features/authentication/login/services/checkAuth.ts
rename to app/src/features/authentication/login/services/apiCheckAuth.ts
index 87055ebf..17c40972 100644
--- a/app/src/features/authentication/login/services/checkAuth.ts
+++ b/app/src/features/authentication/login/services/apiCheckAuth.ts
@@ -4,6 +4,10 @@ export async function checkAuth() {
   const res = await fetch(`${API_URL}/auth/me`, {
     method: "GET",
     credentials: "include",
+    headers: {
+      "Content-Type": "application/json",
+      "X-Session-Token": localStorage.getItem("sessionId") || "",
+    },
   });
   if (!res.ok) {
     return false;
diff --git a/app/src/features/authentication/login/services/apiForgotPassword.ts b/app/src/features/authentication/login/services/apiForgotPassword.ts
index c1d4c200..6723a6a1 100644
--- a/app/src/features/authentication/login/services/apiForgotPassword.ts
+++ b/app/src/features/authentication/login/services/apiForgotPassword.ts
@@ -6,6 +6,7 @@ export async function forgotPassword(email: string) {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
+      "X-Session-Token": localStorage.getItem("sessionId") || "",
     },
 
     body: JSON.stringify(emailObj),
diff --git a/app/src/features/authentication/login/services/apiLogin.ts b/app/src/features/authentication/login/services/apiLogin.ts
index ab88294f..93975f0d 100644
--- a/app/src/features/authentication/login/services/apiLogin.ts
+++ b/app/src/features/authentication/login/services/apiLogin.ts
@@ -1,5 +1,6 @@
 import { API_URL } from "@constants";
 import { User } from "../LoginForm/LoginForm";
+import toast from "react-hot-toast";
 
 export async function login(user: User) {
   const res = await fetch(`${API_URL}/auth/login`, {
@@ -7,14 +8,15 @@ export async function login(user: User) {
     headers: {
       "Content-Type": "application/json",
       "Access-Control-Allow-credentials": "true",
+      "X-Session-Token": localStorage.getItem("sessionId") || "",
     },
     body: JSON.stringify(user),
     credentials: "include",
   });
 
   const data = await res.json();
-
   if (data.status !== "success") {
+    toast.error(data.message);
     throw new Error(data.message);
   }
 
diff --git a/app/src/features/authentication/logout/hooks/useLogout.ts b/app/src/features/authentication/logout/hooks/useLogout.ts
index 6c013802..c5bedab5 100644
--- a/app/src/features/authentication/logout/hooks/useLogout.ts
+++ b/app/src/features/authentication/logout/hooks/useLogout.ts
@@ -10,6 +10,7 @@ export function useLogout() {
     mutationFn: logoutApi,
     onSuccess: () => {
       queryClient.removeQueries();
+      localStorage.removeItem("sessionId");
       navigate("/login", { replace: true });
       queryClient.invalidateQueries({ queryKey: ["isAuth"] });
     },
diff --git a/app/src/features/authentication/logout/services/apiLogout.ts b/app/src/features/authentication/logout/services/apiLogout.ts
index 8cc6f84b..d24cb01c 100644
--- a/app/src/features/authentication/logout/services/apiLogout.ts
+++ b/app/src/features/authentication/logout/services/apiLogout.ts
@@ -5,6 +5,9 @@ export async function logout() {
     const res = await fetch(`${API_URL}/auth/logout`, {
       method: "POST",
       credentials: "include",
+      headers: {
+        "X-Session-Token": localStorage.getItem("sessionId") || "",
+      },
     });
 
     if (!res.ok) {
diff --git a/app/src/features/authentication/oauth/LoginWith.test.tsx b/app/src/features/authentication/oauth/LoginWith.test.tsx
index 3ddee61c..9e187845 100644
--- a/app/src/features/authentication/oauth/LoginWith.test.tsx
+++ b/app/src/features/authentication/oauth/LoginWith.test.tsx
@@ -19,7 +19,7 @@ describe("LoginWith Component", () => {
 
   test("calls onClick when the icon is clicked", () => {
     const iconElement = screen.getByAltText(
-      new RegExp(altText, "i")
+      new RegExp(altText, "i"),
     ).parentElement;
 
     fireEvent.click(iconElement!);
diff --git a/app/src/features/authentication/oauth/LoginWith.tsx b/app/src/features/authentication/oauth/LoginWith.tsx
index 91657446..3d6b60dd 100644
--- a/app/src/features/authentication/oauth/LoginWith.tsx
+++ b/app/src/features/authentication/oauth/LoginWith.tsx
@@ -29,8 +29,8 @@ type LoginWithProps = ComponentProps<"img"> & ComponentProps<"div">;
 
 function LoginWith({ onClick, alt, src }: LoginWithProps) {
   return (
-    <Icon onClick={onClick}>
-      <Img data-test={`${alt}-img`} src={src} alt={alt} />
+    <Icon data-testid={`${alt}-img`} onClick={onClick}>
+      <Img src={src} alt={alt} />
     </Icon>
   );
 }
diff --git a/app/src/features/authentication/oauth/hooks/useOauth.ts b/app/src/features/authentication/oauth/hooks/useOauth.ts
index 7a761760..3d0afd61 100644
--- a/app/src/features/authentication/oauth/hooks/useOauth.ts
+++ b/app/src/features/authentication/oauth/hooks/useOauth.ts
@@ -2,7 +2,7 @@ import { useEffect } from "react";
 import { useOauthLogin } from "./useOauthLogin";
 
 export function useOauth() {
-  const { login } = useOauthLogin()
+  const { login } = useOauthLogin();
 
   useEffect(() => {
     const urlParams = new URLSearchParams(window.location.search);
diff --git a/app/src/features/authentication/oauth/services/apiOauth.ts b/app/src/features/authentication/oauth/services/apiOauth.ts
index 2e0fc86a..1f1be9d0 100644
--- a/app/src/features/authentication/oauth/services/apiOauth.ts
+++ b/app/src/features/authentication/oauth/services/apiOauth.ts
@@ -1,10 +1,9 @@
 import { API_URL } from "@constants";
 
 export async function apiGoogleOauth() {
-   window.location.href = `${API_URL}/auth/oauth/google?platform=web`;
+  window.location.href = `${API_URL}/auth/oauth/google?platform=web`;
 }
 
 export async function apiGithubOauth() {
   window.location.href = `${API_URL}/auth/oauth/github?platform=web`;
 }
-
diff --git a/app/src/features/authentication/oauth/services/apiUser.ts b/app/src/features/authentication/oauth/services/apiUser.ts
index e6734901..7fd60b8a 100644
--- a/app/src/features/authentication/oauth/services/apiUser.ts
+++ b/app/src/features/authentication/oauth/services/apiUser.ts
@@ -4,8 +4,11 @@ export async function apiUser() {
   const res = await fetch(`${API_URL}/users/me`, {
     method: "GET",
     credentials: "include",
+    headers: {
+      "X-Session-Token": localStorage.getItem("sessionId") || "",
+    },
   });
-    
+
   const data = await res.json();
 
   if (data.status !== "success") {
diff --git a/app/src/features/authentication/reset-password/ResetPasswordModal.tsx b/app/src/features/authentication/reset-password/ResetPasswordModal.tsx
index b63ee0d4..e13ebf38 100644
--- a/app/src/features/authentication/reset-password/ResetPasswordModal.tsx
+++ b/app/src/features/authentication/reset-password/ResetPasswordModal.tsx
@@ -27,7 +27,7 @@ const ModalOverlay = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
-  z-index: 1000;
+  z-index: 1;
 `;
 
 const ModalContainer = styled.div`
diff --git a/app/src/features/authentication/reset-password/services/apiResetPassword.tsx b/app/src/features/authentication/reset-password/services/apiResetPassword.tsx
index ff4cb16f..9452500e 100644
--- a/app/src/features/authentication/reset-password/services/apiResetPassword.tsx
+++ b/app/src/features/authentication/reset-password/services/apiResetPassword.tsx
@@ -17,6 +17,7 @@ export async function resetPassword({
     method: "PATCH",
     headers: {
       "Content-Type": "application/json",
+      "X-Session-Token": localStorage.getItem("sessionId") || "",
     },
 
     body: JSON.stringify(requestObj),
diff --git a/app/src/features/authentication/signup/ConfirmationEmailModal.tsx b/app/src/features/authentication/signup/ConfirmationEmailModal.tsx
index 3c15e73c..8f01278f 100644
--- a/app/src/features/authentication/signup/ConfirmationEmailModal.tsx
+++ b/app/src/features/authentication/signup/ConfirmationEmailModal.tsx
@@ -15,7 +15,7 @@ const ModalOverlay = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
-  z-index: 1000;
+  z-index: 1;
 `;
 
 const ModalContainer = styled.div`
@@ -132,7 +132,7 @@ function ConfirmationEmailModal({
         onError: (err: Error) => {
           setError(err.message);
         },
-      }
+      },
     );
   }
   function handleResendEmail() {
diff --git a/app/src/features/authentication/signup/hooks/useSignup.ts b/app/src/features/authentication/signup/hooks/useSignup.ts
index 66ad2bf3..e594a0b6 100644
--- a/app/src/features/authentication/signup/hooks/useSignup.ts
+++ b/app/src/features/authentication/signup/hooks/useSignup.ts
@@ -6,19 +6,15 @@ export function useSignup() {
     mutate: signup,
     isSuccess,
     isPending,
-    isError,
+    isError
   } = useMutation({
-    mutationFn: Signup,
-
-    onSuccess: (email) => {
-      console.log(email);
-    },
+    mutationFn: Signup
   });
 
   return {
     signup,
     isPending,
     isSuccess,
-    isError,
+    isError
   };
 }
diff --git a/app/src/features/authentication/signup/services/apiConfirmCode.ts b/app/src/features/authentication/signup/services/apiConfirmCode.ts
index c8e240d8..a1e6c666 100644
--- a/app/src/features/authentication/signup/services/apiConfirmCode.ts
+++ b/app/src/features/authentication/signup/services/apiConfirmCode.ts
@@ -5,6 +5,7 @@ export async function sendEmailVerification(email: string) {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
+      "X-Session-Token": localStorage.getItem("sessionId") || "",
     },
     body: JSON.stringify({ email: email }),
   });
diff --git a/app/src/features/authentication/signup/services/apiSignup.ts b/app/src/features/authentication/signup/services/apiSignup.ts
index e87bd71c..9609077d 100644
--- a/app/src/features/authentication/signup/services/apiSignup.ts
+++ b/app/src/features/authentication/signup/services/apiSignup.ts
@@ -11,5 +11,7 @@ export async function Signup(user: User) {
   const data = await res.json();
   if (data.status !== "success") throw new Error(data.message);
 
+  localStorage.setItem("sessionId", data.data.sessionId);
+
   return user.email;
 }
diff --git a/app/src/features/calls/CallLayout.tsx b/app/src/features/calls/CallLayout.tsx
new file mode 100644
index 00000000..c36dc049
--- /dev/null
+++ b/app/src/features/calls/CallLayout.tsx
@@ -0,0 +1,303 @@
+import styled from "styled-components";
+import { STATIC_MEDIA_URL } from "@constants";
+import { getAvatarName } from "utils/helpers";
+import { createPortal } from "react-dom";
+import { getIcon } from "@data/icons";
+import { useCallContext } from "./hooks/useCallContext";
+import { getChatByID } from "@features/chats/utils/helpers";
+import { useAppSelector } from "@hooks/useGlobalState";
+import { useSocket } from "@hooks/useSocket";
+import { EnableSpeaker } from "./SpeakerEnable";
+import { useState } from "react";
+
+const ModalContainer = styled.div`
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  opacity: 1;
+  transition: opacity 0.15s ease;
+  z-index: 102;
+`;
+
+const ModalBackdrop = styled.div`
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: -1;
+  background-color: rgba(0, 0, 0, 0.25);
+`;
+
+const ModalDialog = styled.div`
+  border-radius: 5px;
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 35rem;
+  min-width: 17.5rem;
+  margin: 2rem auto;
+  background-color: var(--color-background);
+  box-shadow: 0 0.25rem 0.5rem 0.125rem var(--color-default-shadow);
+  transform: translate3d(0, -1rem, 0);
+  transition:
+    transform 0.2s ease,
+    opacity 0.2s ease;
+`;
+const ButtonsContainer = styled.div`
+  display: flex;
+  position: absolute;
+  bottom: 1rem;
+  -webkit-user-select: none;
+  user-select: none;
+`;
+const AvatarContainer = styled.div`
+  border-radius: inherit;
+  overflow: hidden;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-image: linear-gradient(
+    var(--color-white) -125%,
+    var(--color-user)
+  );
+`;
+const ModalContent = styled.div`
+  border-radius: inherit;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 80vh;
+  padding: 0;
+`;
+const StyledAvatar = styled.div<{ $image?: string }>`
+  border-radius: inherit;
+  width: 100%;
+  height: 100%;
+
+  background: ${({ $image }) =>
+    $image
+      ? `url(${STATIC_MEDIA_URL + $image}) center/cover no-repeat`
+      : "var(--color-avatar)"};
+
+  color: white;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  font-size: 5rem;
+  text-transform: uppercase;
+`;
+const RoundButton = styled.button<{
+  $bgColor?: string;
+  $bgColorHover?: string;
+}>`
+  outline: none !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 3.5rem;
+  border-radius: 50%;
+  border: 0;
+  background-color: ${({ $bgColor }) => $bgColor || "rgba(0, 0, 0, 0)"};
+  background-size: cover;
+  padding: 0.625rem;
+  color: #fff;
+  flex-shrink: 0;
+  position: relative;
+  overflow: hidden;
+  transition:
+    background-color 0.15s,
+    color 0.15s;
+  text-decoration: none !important;
+  text-transform: uppercase;
+  text-align: right;
+  font-size: 3.5rem;
+  font-weight: 200;
+  &:hover {
+    background-color: ${({ $bgColorHover }) =>
+      $bgColorHover || "rgba(0, 0, 0, 0.1)"};
+  }
+`;
+
+const ButtonContainer = styled.div`
+  width: 6rem;
+  height: 6rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+const ButtonText = styled.div`
+  color: #fff;
+  font-size: 0.75rem;
+  text-transform: lowercase;
+  margin-top: 0.25rem;
+  white-space: nowrap;
+`;
+const NameContainer = styled.div`
+  position: absolute;
+  top: 1rem;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 0;
+  padding-top: 4rem;
+  padding-bottom: 2rem;
+  margin-bottom: auto;
+  color: #fff;
+  pointer-events: none;
+  -webkit-user-select: none;
+  user-select: none;
+`;
+const TopBar = styled.div`
+  top: 0.5rem;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  color: #fff;
+  position: absolute;
+  padding: 0.5rem;
+  text-align: right;
+`;
+const ActiveHeaderOpen = styled.div`
+  position: fixed;
+  margin-bottom: 0.5rem;
+  top: 0;
+  left: 0;
+  height: 1rem;
+  width: 100vw;
+  z-index: 6;
+  display: flex;
+  justify-content: center;
+  font-weight: 500;
+  font-size: 0.875rem;
+  color: #fff;
+  align-items: center;
+  padding: 0 1rem;
+  background: linear-gradient(135deg, rgb(49, 82, 232), rgb(143, 74, 172));
+  transform: translateY(0);
+  z-index: 102;
+`;
+type PropsType = {
+  isCollapsed: boolean;
+  setIsCollapsed: (arg0: boolean) => void;
+  callStatus: string | undefined;
+};
+
+export default function CallLayout({
+  isCollapsed,
+  setIsCollapsed,
+  callStatus
+}: PropsType) {
+  const { acceptCall, finishCall } = useSocket();
+  const { endCall, chatId, mute, unmute } = useCallContext();
+  const [isMuted, setIsMuted] = useState(false);
+  const chats = useAppSelector((state) => state.chats.chats);
+  const chat = getChatByID({
+    chatID: chatId.current ?? "",
+    chats: chats
+  });
+  const toggleMute = () => {
+    if (isMuted) {
+      setIsMuted(false);
+      unmute();
+    } else {
+      setIsMuted(true);
+      mute();
+    }
+  };
+
+  return (
+    <>
+      {!isCollapsed
+        ? createPortal(
+            <ModalContainer>
+              <ModalBackdrop> </ModalBackdrop>
+              <ModalDialog>
+                <ModalContent>
+                  <AvatarContainer>
+                    <StyledAvatar $image={chat?.photo}>
+                      {!chat?.photo && getAvatarName(chat?.name)}
+                    </StyledAvatar>
+                    <TopBar>
+                      <RoundButton onClick={() => setIsCollapsed(true)}>
+                        &times;
+                      </RoundButton>
+                    </TopBar>
+                    <NameContainer>
+                      <h1>{chat?.name}</h1>
+                      <span>{callStatus}...</span>
+                    </NameContainer>
+                    <ButtonsContainer>
+                      <ButtonContainer>
+                        <RoundButton onClick={toggleMute}>
+                          {isMuted ? getIcon("UnMute") : getIcon("Mute")}
+                        </RoundButton>
+                        <ButtonText>unmute</ButtonText>
+                      </ButtonContainer>
+                      {callStatus === "incoming" && (
+                        <ButtonContainer>
+                          <RoundButton
+                            $bgColor="var(--color-success)"
+                            $bgColorHover="var(--color-success-shade)"
+                            onClick={() => acceptCall()}
+                          >
+                            {getIcon("CallAccept")}
+                          </RoundButton>
+                          <ButtonText>accept</ButtonText>
+                        </ButtonContainer>
+                      )}
+
+                      {callStatus === "incoming" ? (
+                        <ButtonContainer>
+                          <RoundButton
+                            onClick={() => endCall(null)}
+                            $bgColor="var(--color-error)"
+                            $bgColorHover="var(--color-error-shade)"
+                          >
+                            {getIcon("EndCall")}
+                          </RoundButton>
+                          <ButtonText>end call</ButtonText>
+                        </ButtonContainer>
+                      ) : (
+                        <ButtonContainer>
+                          <RoundButton
+                            onClick={() => finishCall()}
+                            $bgColor="var(--color-error)"
+                            $bgColorHover="var(--color-error-shade)"
+                          >
+                            {getIcon("EndCall")}
+                          </RoundButton>
+                          <ButtonText>end call</ButtonText>
+                        </ButtonContainer>
+                      )}
+                    </ButtonsContainer>
+                  </AvatarContainer>
+                </ModalContent>
+              </ModalDialog>
+            </ModalContainer>,
+            document.body
+          )
+        : createPortal(
+            <ActiveHeaderOpen onClick={() => setIsCollapsed(false)}>
+              <span>{chat?.name}</span>
+            </ActiveHeaderOpen>,
+            document.body
+          )}
+    </>
+  );
+}
diff --git a/app/src/features/calls/SpeakerEnable.tsx b/app/src/features/calls/SpeakerEnable.tsx
new file mode 100644
index 00000000..16f32892
--- /dev/null
+++ b/app/src/features/calls/SpeakerEnable.tsx
@@ -0,0 +1,48 @@
+import React, { useEffect } from "react";
+import { useCallContext } from "./hooks/useCallContext";
+
+interface EnableSpeakerProps {
+  children?: React.ReactNode;
+}
+
+export const EnableSpeaker: React.FC<EnableSpeakerProps> = ({ children }) => {
+  const { clientId } = useCallContext();
+
+  useEffect(() => {
+    const playStreamsToSpeaker = () => {
+      if (!clientId?.current) {
+        console.warn("clientId is not available or has no current value.");
+        return;
+      }
+
+      clientId.current.forEach((clientData, clientIdKey) => {
+        if (!clientData || !clientData.connection) {
+          console.warn(`No connection found for client: ${clientIdKey}`);
+          return;
+        }
+
+        // Get all tracks from the remote connection
+        const receivers = clientData.connection.getReceivers();
+        const remoteStream = new MediaStream(
+          receivers.map((receiver) => receiver.track).filter(Boolean)
+        );
+
+        if (remoteStream && remoteStream.getTracks().length > 0) {
+          const audio = new Audio();
+          audio.srcObject = remoteStream;
+          audio.play().catch((err) => {
+            console.error(
+              `Failed to play audio for client: ${clientIdKey}`,
+              err
+            );
+          });
+          console.log(`Playing audio for client: ${clientIdKey}`);
+        }
+      });
+    };
+
+    playStreamsToSpeaker();
+  }, [clientId]);
+
+  return <div>{children}</div>;
+};
diff --git a/app/src/features/calls/context/CallContext.tsx b/app/src/features/calls/context/CallContext.tsx
new file mode 100644
index 00000000..c6fc1d34
--- /dev/null
+++ b/app/src/features/calls/context/CallContext.tsx
@@ -0,0 +1,6 @@
+import { createContext } from "react";
+import { CallContextType } from "types/calls";
+
+export const CallContext = createContext<CallContextType | undefined>(
+  undefined
+);
diff --git a/app/src/features/calls/context/CallProvider.tsx b/app/src/features/calls/context/CallProvider.tsx
new file mode 100644
index 00000000..0a321897
--- /dev/null
+++ b/app/src/features/calls/context/CallProvider.tsx
@@ -0,0 +1,374 @@
+import React, { ReactNode, useCallback, useRef } from "react";
+import { CallContext } from "./CallContext";
+import { useAppSelector } from "@hooks/useGlobalState";
+import { callStatusEmitter } from "./callStatusEmitter";
+import { CallStatus } from "types/calls";
+import { TURN_USERNAME, TURN_PASSWORD } from "@constants";
+import { useSocket } from "utils/socket";
+
+console.log(TURN_PASSWORD, TURN_USERNAME);
+const Servers = {
+  iceServers: [
+    {
+      urls: ["stun:stun1.l.google.com:19302", "stun:stun2.l.google.com:19302"]
+    },
+    {
+      urls: "turn:global.relay.metered.ca:80",
+      username: TURN_USERNAME,
+      credential: TURN_PASSWORD
+    },
+    {
+      urls: "turn:global.relay.metered.ca:80?transport=tcp",
+      username: TURN_USERNAME,
+      credential: TURN_PASSWORD
+    },
+    {
+      urls: "turn:global.relay.metered.ca:443",
+      username: TURN_USERNAME,
+      credential: TURN_PASSWORD
+    },
+    {
+      urls: "turns:global.relay.metered.ca:443?transport=tcp",
+      username: TURN_USERNAME,
+      credential: TURN_PASSWORD
+    }
+  ]
+};
+export const CallProvider: React.FC<{ children: ReactNode }> = ({
+  children
+}) => {
+  const socket = useSocket();
+  const userId = useAppSelector((state) => state.user.userInfo.id);
+  const callIdRef = useRef<string | null>(null);
+  const senderIdRef = useRef<string | null>(null);
+  const chatIdRef = useRef<string | null>(null);
+  const localStream = useRef<MediaStream | null>(null);
+  const offer = useRef<RTCSessionDescriptionInit | null>(null);
+  const callStatus = useRef<CallStatus>("inactive");
+  const clientIdRef = useRef<
+    Map<string, { connection: RTCPeerConnection | null; offerSent: boolean }>
+  >(new Map());
+
+  const addClientId = useCallback(
+    (
+      clientId: string,
+      connection: RTCPeerConnection | null,
+      offerSent: boolean
+    ) => {
+      clientIdRef.current.set(clientId, { connection, offerSent });
+    },
+    []
+  );
+
+  const removeClientId = useCallback((clientId: string) => {
+    if (clientIdRef.current.has(clientId)) {
+      clientIdRef.current.delete(clientId);
+    }
+  }, []);
+
+  const clearClientIds = useCallback(() => {
+    clientIdRef.current.clear();
+  }, []);
+  const setChatId = useCallback((chatId: string) => {
+    chatIdRef.current = chatId;
+  }, []);
+  const hasClientId = useCallback(
+    (clientId: string, offerSent: boolean | null = null) => {
+      const clientData = clientIdRef.current.get(clientId);
+      return (
+        !!clientData &&
+        (offerSent === null || clientData.offerSent === offerSent)
+      );
+    },
+    []
+  );
+
+  const setCallStatus = useCallback((status: CallStatus) => {
+    callStatus.current = status;
+    callStatusEmitter.emit("update", status);
+  }, []);
+
+  const joinCall = useCallback(
+    (newSenderId: string, newChatId: string, newCallId: string) => {
+      if (!callIdRef.current) {
+        if (newSenderId === userId) {
+          setCallStatus("calling");
+        } else {
+          setCallStatus("incoming");
+        }
+        callIdRef.current = newCallId;
+        senderIdRef.current = newSenderId;
+        chatIdRef.current = newChatId;
+      }
+    },
+    [setCallStatus, userId]
+  );
+
+  const endCall = useCallback(
+    (clientId = null) => {
+      if (clientId) {
+        const clientData = clientIdRef.current.get(clientId);
+        if (clientData?.connection) clientData.connection.close();
+        removeClientId(clientId);
+      } else {
+        setCallStatus("inactive");
+        callIdRef.current = null;
+        senderIdRef.current = null;
+        chatIdRef.current = null;
+        if (localStream.current) {
+          localStream.current.getTracks().forEach((track) => {
+            track.stop();
+          });
+        }
+        clientIdRef.current.forEach((clientData, clientId) => {
+          if (clientData.connection) {
+            clientData.connection.close();
+          }
+
+          removeClientId(clientId);
+        });
+        const remoteAudioElements = document.querySelectorAll("audio");
+        remoteAudioElements.forEach((audio) => audio.remove());
+
+        localStream.current = null;
+        clearClientIds();
+      }
+    },
+    [clearClientIds, removeClientId, setCallStatus]
+  );
+
+  const mute = () => {
+    if (localStream.current)
+      localStream.current.getAudioTracks()[0].enabled = false;
+  };
+  const unmute = () => {
+    if (localStream.current)
+      localStream.current.getAudioTracks()[0].enabled = true;
+  };
+  const acceptCall = useCallback(() => {
+    if (callIdRef.current && chatIdRef.current) {
+      if (
+        senderIdRef.current === userId &&
+        (!clientIdRef.current || clientIdRef.current.size === 0)
+      ) {
+        setCallStatus("calling");
+      } else {
+        setCallStatus("active");
+      }
+    }
+  }, [setCallStatus, userId]);
+
+  const startPeerConnection = useCallback(
+    async (clientId: string) => {
+      if (!clientId) return null;
+      if (!localStream.current) {
+        localStream.current = await navigator.mediaDevices.getUserMedia({
+          audio: true,
+          video: false
+        });
+      }
+
+      if (!localStream.current) {
+        alert("Failed to get voice input.");
+        endCall();
+        return null;
+      }
+      const peerConnection = new RTCPeerConnection(Servers);
+      localStream.current.getTracks().forEach((track) => {
+        peerConnection.addTrack(track, localStream.current);
+      });
+      peerConnection.oniceconnectionstatechange = () => {
+        const state = peerConnection.iceConnectionState;
+
+        switch (state) {
+          case "connected":
+            console.log("Peer connection established.");
+            break;
+          case "disconnected":
+            console.warn("Peer connection disconnected.");
+            break;
+          case "failed":
+            console.error("Peer connection failed. Restarting ICE?");
+            break;
+          case "closed":
+            console.log("Peer connection closed.");
+            break;
+          default:
+            console.log("ICE connection state:", state);
+            break;
+        }
+      };
+      peerConnection.onicecandidate = (event) => {
+        if (event.candidate && socket?.connected) {
+          socket.emit("SIGNAL-SERVER", {
+            type: "ICE",
+            voiceCallId: callIdRef.current,
+            data: event.candidate,
+            targetId: clientId
+          });
+        }
+      };
+      peerConnection.ontrack = (event) => {
+        console.log("audio");
+        if (event.track.kind === "audio") {
+          const remoteAudio = document.createElement("audio");
+          remoteAudio.srcObject = event.streams[0];
+          remoteAudio.autoplay = true;
+          remoteAudio.controls = true;
+          remoteAudio.style.display = "none";
+          document.body.appendChild(remoteAudio);
+        }
+      };
+      const offer = await peerConnection.createOffer();
+      console.log(clientIdRef.current);
+      if (!hasClientId(clientId) || hasClientId(clientId, false)) {
+        await peerConnection.setLocalDescription(offer);
+        addClientId(clientId, peerConnection, true);
+        setCallStatus("active");
+        return offer;
+      }
+      return null;
+    },
+    [addClientId, endCall, hasClientId, setCallStatus, socket]
+  );
+
+  const recieveICE = useCallback(
+    async (candidate: RTCIceCandidateInit, senderId: string) => {
+      try {
+        if (hasClientId(senderId, true)) {
+          const clientData = clientIdRef.current.get(senderId);
+          if (clientData) {
+            if (!clientData.connection) throw new Error("No connection found.");
+            clientData.connection.addIceCandidate(candidate);
+          } else throw new Error("No connection found.");
+        } else throw new Error("No connection found.");
+      } catch (error) {
+        console.error("Error recieving ICE candidate:", error);
+      }
+    },
+    [hasClientId]
+  );
+
+  const recieveAnswer = useCallback(
+    (data: RTCSessionDescriptionInit, senderId: string) => {
+      if (hasClientId(senderId, true)) {
+        const clientData = clientIdRef.current.get(senderId);
+        if (clientData && clientData.connection) {
+          clientData.connection.setRemoteDescription(data);
+          setCallStatus("active");
+        }
+      }
+    },
+    [hasClientId, setCallStatus]
+  );
+  const createAnswer = useCallback(
+    async (data: RTCSessionDescriptionInit, senderId: string) => {
+      if (!senderId || !data) {
+        console.warn("Invalid senderId or data provided.");
+        return null;
+      }
+
+      try {
+        const peerConnection = new RTCPeerConnection(Servers);
+        if (!localStream.current) {
+          localStream.current = await navigator.mediaDevices.getUserMedia({
+            audio: true,
+            video: false
+          });
+        }
+
+        if (!localStream.current) {
+          alert("Failed to get voice input.");
+          endCall();
+          return null;
+        }
+        localStream.current.getTracks().forEach((track) => {
+          peerConnection.addTrack(track, localStream.current);
+        });
+
+        peerConnection.ontrack = (event) => {
+          console.log("adiooo");
+          if (event.track.kind === "audio") {
+            const remoteAudio = document.createElement("audio");
+            remoteAudio.srcObject = event.streams[0];
+            remoteAudio.autoplay = true;
+            remoteAudio.controls = false;
+            remoteAudio.style.display = "none";
+            document.body.appendChild(remoteAudio);
+          }
+        };
+        peerConnection.oniceconnectionstatechange = () => {
+          const state = peerConnection.iceConnectionState;
+
+          switch (state) {
+            case "connected":
+              console.log("Peer connection established.");
+              break;
+            case "disconnected":
+              console.warn("Peer connection disconnected.");
+              break;
+            case "failed":
+              console.error("Peer connection failed. Restarting ICE?");
+              break;
+            case "closed":
+              console.log("Peer connection closed.");
+              break;
+            default:
+              console.log("ICE connection state:", state);
+              break;
+          }
+        };
+        peerConnection.onicecandidate = (event) => {
+          if (event.candidate && socket?.connected) {
+            socket.emit("SIGNAL-SERVER", {
+              type: "ICE",
+              voiceCallId: callIdRef.current,
+              data: event.candidate,
+              targetId: senderId
+            });
+          }
+        };
+        await peerConnection.setRemoteDescription(data);
+        const answer = await peerConnection.createAnswer();
+        await peerConnection.setLocalDescription(answer);
+        addClientId(senderId, peerConnection, true);
+        return answer;
+      } catch (error) {
+        console.error("Error creating answer:", error);
+        return null;
+      }
+    },
+    [addClientId, endCall, socket]
+  );
+
+  const getPeerConnection = useCallback((clientId: string) => {
+    const clientData = clientIdRef.current.get(clientId);
+    if (clientData) {
+      return clientData.connection;
+    }
+    return null;
+  }, []);
+
+  const contextValue = {
+    callId: callIdRef,
+    senderId: senderIdRef,
+    chatId: chatIdRef,
+    startPeerConnection,
+    offer,
+    clientId: clientIdRef,
+    setChatId,
+    acceptCall,
+    joinCall,
+    createAnswer,
+    endCall,
+    recieveICE,
+    recieveAnswer,
+    mute,
+    unmute,
+    getPeerConnection
+  };
+
+  return (
+    <CallContext.Provider value={contextValue}>{children}</CallContext.Provider>
+  );
+};
diff --git a/app/src/features/calls/context/callStatusEmitter.tsx b/app/src/features/calls/context/callStatusEmitter.tsx
new file mode 100644
index 00000000..47ff94ab
--- /dev/null
+++ b/app/src/features/calls/context/callStatusEmitter.tsx
@@ -0,0 +1,4 @@
+import mitt from "mitt";
+export const callStatusEmitter = mitt<{
+  update: "inactive" | "active" | "calling" | "incoming" | "ended";
+}>();
diff --git a/app/src/features/calls/hooks/useCallContext.tsx b/app/src/features/calls/hooks/useCallContext.tsx
new file mode 100644
index 00000000..94079caf
--- /dev/null
+++ b/app/src/features/calls/hooks/useCallContext.tsx
@@ -0,0 +1,11 @@
+import { useContext } from "react";
+import { CallContext } from "../context/CallContext";
+import { CallContextType } from "types/calls";
+
+export const useCallContext = (): CallContextType => {
+  const context = useContext(CallContext);
+  if (!context) {
+    throw new Error("useCallContext must be used within a CallProvider");
+  }
+  return context;
+};
diff --git a/app/src/features/chats/Avatar.tsx b/app/src/features/chats/Avatar.tsx
deleted file mode 100644
index 41942c49..00000000
--- a/app/src/features/chats/Avatar.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import styled from "styled-components";
-
-const StyledAvatar = styled.div<{ $image?: string }>`
-  width: 2.625rem;
-  height: 2.625rem;
-
-  border-radius: 50%;
-  margin-right: 1rem;
-
-  background: ${({ $image }) =>
-    $image ? `url(${$image}) center/cover no-repeat` : "var(--color-avatar)"};
-
-  color: white;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  flex-shrink: 0;
-
-  font-weight: bold;
-  font-size: 1rem;
-  text-transform: uppercase;
-`;
-
-type PropsType = {
-  image?: string | undefined;
-  name: string | undefined;
-};
-
-function Avatar({ image, name }: PropsType) {
-  return <StyledAvatar $image={image}>{!image && name}</StyledAvatar>;
-}
-
-export default Avatar;
diff --git a/app/src/features/chats/ChatBody.tsx b/app/src/features/chats/ChatBody.tsx
new file mode 100644
index 00000000..3376ee3d
--- /dev/null
+++ b/app/src/features/chats/ChatBody.tsx
@@ -0,0 +1,140 @@
+import styled from "styled-components";
+
+import Message from "./Message";
+import { useInView } from "@features/stories/hooks/useInView";
+import { useEffect, useRef } from "react";
+import { useFetchNextPage } from "./hooks/useFetchNextPage";
+import { getChatByID } from "./utils/helpers";
+import { useParams } from "react-router-dom";
+import { useAppSelector } from "@hooks/useGlobalState";
+import MessageProvider from "./contexts/MessageProvider";
+import { getIcon } from "@data/icons";
+import useTraversalMentions from "./hooks/useTraverseMentions";
+import Icon from "@components/Icon";
+
+const ScrollContainer = styled.div`
+  width: 100%;
+  height: 82dvh;
+  overflow-y: auto;
+  margin-top: 3rem;
+  &::-webkit-scrollbar {
+    width: 5px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: inherit;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--scrollbar-color);
+    border-radius: 5px;
+  }
+
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+`;
+
+function ChatBody() {
+  const { chatId } = useParams<{ chatId: string }>();
+  const { chats, members } = useAppSelector((state) => state.chats);
+  const { activeThread } = useAppSelector((state) => state.channelsThreads);
+  const chat = getChatByID({ chats: chats, chatID: chatId! });
+
+  const { fetchNextPage, hasNextPage } = useFetchNextPage();
+
+  const { inView, ref } = useInView({ threshold: 0.01 });
+  const scrollContainerRef = useRef<HTMLDivElement | null>(null);
+
+  const { handleNextMentionMessage, mentionMessages } = useTraversalMentions();
+
+
+  useEffect(() => {
+    if (inView && hasNextPage && chatId) {
+      const container = scrollContainerRef.current;
+      if (!container) return;
+
+      const previousScrollHeight = container.scrollHeight;
+      const previousScrollTop = container.scrollTop;
+
+      fetchNextPage().then(() => {
+        requestAnimationFrame(() => {
+          const newScrollHeight = container.scrollHeight;
+          container.scrollTop =
+            previousScrollTop + (newScrollHeight - previousScrollHeight);
+        });
+      });
+    }
+  }, [fetchNextPage, inView, chatId]);
+
+  let messages = chat?.messages;
+
+  if (chat?.type === "channel") {
+    messages?.filter((msg) => !msg.parentMessageId);
+  }
+
+  const threadMessages = activeThread
+    ? chat?.messages.filter((msg) => msg.parentMessageId === activeThread)
+    : [];
+
+  return (
+    <ScrollContainer ref={scrollContainerRef}>
+      <div ref={ref}></div>
+
+      {!activeThread &&
+        messages?.map((data) => {
+          return (
+            <MessageProvider
+              key={data._id}
+              data={data}
+              chatType={chat?.type as "private" | "group" | "channel"}
+              sender={members.find((member) => member._id === data.senderId)}
+              numberOfMembers={chat?.numberOfMembers}
+              isAppropriate={data.isAppropriate}
+            >
+              <Message key={data._id} />
+            </MessageProvider>
+          );
+        })}
+
+      {activeThread &&
+        threadMessages?.map((data) => {
+          return (
+            <MessageProvider
+              key={data._id}
+              data={data}
+              chatType="channel"
+              sender={members.find((member) => member._id === data.senderId)}
+              numberOfMembers={chat?.numberOfMembers}
+              isAppropriate={data.isAppropriate}
+            >
+              <Message key={data._id} />
+            </MessageProvider>
+          );
+        })}
+      <Icon onClick={handleNextMentionMessage} data-testid="mention-icon">
+        {mentionMessages.length > 0 &&
+          getIcon("Mention", {
+            sx: {
+              fontSize: "2.5rem",
+              color: "var(--accent-color)",
+              backgroundColor: `var(--color-background)`,
+              borderRadius: "50%",
+              position: "absolute",
+              bottom: "8rem",
+              right: "3%",
+              cursor: "pointer",
+              ":hover": {
+                backgroundColor: "var(--color-background-own-1)",
+                color: "white",
+                transition: "0.2s"
+              }
+            }
+          })}
+      </Icon>
+    </ScrollContainer>
+  );
+}
+
+export default ChatBody;
diff --git a/app/src/features/chats/ChatBox.tsx b/app/src/features/chats/ChatBox.tsx
index 5b6d498f..c40c33f1 100644
--- a/app/src/features/chats/ChatBox.tsx
+++ b/app/src/features/chats/ChatBox.tsx
@@ -1,16 +1,36 @@
+import styled from "styled-components";
+
 import ChatInput from "@features/chats/ChatInput";
 import Topbar from "@features/chats/Topbar";
+import ChatBody from "./ChatBody";
 
 import { useCloseChat } from "@hooks/useCloseChat";
+import { createContext } from "react";
+import useChatInput from "./hooks/useChatInput";
+import useShowForward from "@features/forward/hooks/useShowForward";
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  height: 100%;
+`;
+
+export const ChatInputContext = createContext<any>(null);
 
 function ChatBox() {
   useCloseChat();
 
+  const chatInputData = useChatInput();
+  const forwardData = useShowForward();
   return (
-    <>
-      <ChatInput />
+    <Container>
       <Topbar />
-    </>
+      <ChatBody />
+      <ChatInputContext.Provider value={{ ...chatInputData, ...forwardData }}>
+        <ChatInput />
+      </ChatInputContext.Provider>
+    </Container>
   );
 }
 
diff --git a/app/src/features/chats/ChatInput.tsx b/app/src/features/chats/ChatInput.tsx
index 6a4ce052..eb7d7192 100644
--- a/app/src/features/chats/ChatInput.tsx
+++ b/app/src/features/chats/ChatInput.tsx
@@ -1,23 +1,35 @@
+import { useParams } from "react-router-dom";
 import styled from "styled-components";
 
-import { getIcon } from "@data/icons";
-
-import CircleIcon from "@components/CircleIcon";
-import ExpandingTextArea from "@components/ExpandingTextArea";
-import Icon from "@components/Icon";
+import RecordInput from "./SendButton";
+import ForwardingInputBar from "@features/forward/ForwardingInputBar";
+import ScrollableChats from "@features/forward/ScrollableChats";
+import Picker from "./emojies/Picker";
+import ReplyWrapper from "./ReplyWrapper";
+import { useAppSelector } from "@hooks/useGlobalState";
+import { getChatByID } from "./utils/helpers";
+import VoiceRecorder from "./audio/VoiceRecorder";
+import RecordingView from "./audio/RecordingView";
+import ChatInputIcons from "./ChatInputIcons";
+import FilePreviewItem from "./media/FilePreviewItem";
+import useActiveMessage from "./hooks/useActiveMessage";
+import { useContext } from "react";
+import { ChatInputContext } from "./ChatBox";
+import { useGroupInfo } from "@features/groups/hooks/useGroupInfo";
+import DisabledChatInput from "./DisabledChatInput";
 
 const Container = styled.div`
-  position: absolute;
-  z-index: 1000;
-  bottom: 1rem;
-  left: 0;
-  right: 0;
+  z-index: 1;
 
+  position: absolute;
+  bottom: 3%;
+  z-index: 1;
+  left: 50%;
+  transform: translateX(-50%);
   margin: auto;
 
   width: 80%;
   max-width: 600px;
-
   display: flex;
 `;
 
@@ -26,29 +38,26 @@ const InputContainer = styled.div`
 
   padding: 0.3125rem 0.6rem;
   border-radius: 1rem;
-
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
 
   flex: 3 auto;
 
   display: flex;
-  align-items: center;
   align-self: center;
-
+  flex-direction: column;
+  align-content: center;
   height: 100%;
 `;
 
 const InputWrapper = styled.div`
   display: flex;
-  align-items: flex-end;
+  align-items: center;
   gap: 1rem;
-
   position: relative;
-
   flex: 1;
 `;
 
-const AnotherContainer = styled.div`
+const Input = styled.div`
   display: flex;
   align-items: flex-end;
   gap: 1rem;
@@ -57,27 +66,91 @@ const AnotherContainer = styled.div`
 `;
 
 function ChatInput() {
+  const { chatId } = useParams<{ chatId: string }>();
+  const { isCurrUserAdmin } = useGroupInfo();
+  const { activeThread } = useAppSelector((state) => state?.channelsThreads);
+
+  const {
+    input,
+    setInput,
+    file,
+    isFilePreviewOpen,
+    isRecording,
+    error,
+    setError,
+    isEmojiSelectorOpen,
+    handleSubmit,
+    showForwardUsers,
+    handleClose
+  } = useContext(ChatInputContext);
+
+  const chats = useAppSelector((state) => state.chats.chats);
+  const currChat = getChatByID({ chats: chats, chatID: chatId! });
+  const showCheckBox = currChat?.showCheckBox;
+  const isBlocked = currChat?.isBlocked;
+
+  const { activeMessage } = useActiveMessage({ setInput });
+
+  if (error.length) {
+    alert(error);
+    setError("");
+  }
+
+
+  const isGroupWithoutPostPermission =
+    currChat?.type === "group" &&
+    !currChat?.messagingPermission &&
+    !isCurrUserAdmin;
+
+  const isChannelWithoutPostPermission =
+    currChat?.type === "channel" &&
+    !isCurrUserAdmin &&
+    (!activeThread || !currChat?.messagingPermission);
+
+  if (isChannelWithoutPostPermission || isGroupWithoutPostPermission) {
+    return <DisabledChatInput />;
+  }
+
   return (
-    <Container>
-      <AnotherContainer>
-        <InputContainer>
-          <InputWrapper>
-            <Icon>{getIcon("Emojie")}</Icon>
-            <ExpandingTextArea />
-            <Icon>{getIcon("Attatch")}</Icon>
-          </InputWrapper>
-        </InputContainer>
-
-        <CircleIcon
-          data-testid="record-icon"
-          $icon="Record"
-          $size={3.3}
-          $padding={0.5}
-          $color="white"
-          $bgColor="var(--accent-color)"
-        />
-      </AnotherContainer>
-    </Container>
+    <>
+      {isFilePreviewOpen && file && (
+        <FilePreviewItem data-testid="file-preview" chatId={chatId}  />
+      )}
+
+      {isBlocked ? null : (
+        <Container data-testid="chat-input-container">
+          {!showCheckBox ? (
+            <Input data-testid="chat-input">
+              {isEmojiSelectorOpen && <Picker data-testid="emoji-picker" />}
+              <InputContainer>
+                {activeMessage.id && <ReplyWrapper />}
+
+                <InputWrapper>
+                  {isRecording !== "idle" ? (
+                    <RecordingView />
+                  ) : (
+                    <ChatInputIcons />
+                  )}
+                </InputWrapper>
+              </InputContainer>
+
+              {input ? (
+                <RecordInput
+                  onClick={handleSubmit}
+                  type={!input ? "record" : "message"}
+                  data-testid="send-button"
+                />
+              ) : (
+                <VoiceRecorder />
+              )}
+            </Input>
+          ) : (
+            <ForwardingInputBar data-testid="forwarding-input-bar" />
+          )}
+          {showForwardUsers && <ScrollableChats onClose={handleClose} />}
+        </Container>
+      )}
+    </>
   );
 }
 
diff --git a/app/src/features/chats/ChatInputIcons.tsx b/app/src/features/chats/ChatInputIcons.tsx
new file mode 100644
index 00000000..f1ad0e04
--- /dev/null
+++ b/app/src/features/chats/ChatInputIcons.tsx
@@ -0,0 +1,70 @@
+import ExpandingTextArea from "@components/ExpandingTextArea";
+import { getIcon } from "@data/icons";
+import styled from "styled-components";
+import MediaUploadComponent from "./media/MediaUploadComponent";
+import Icon from "@components/Icon";
+import React, { useContext } from "react";
+import { ChatInputContext } from "./ChatBox";
+
+const InvisibleButton = styled.div`
+  all: unset;
+  display: inline-block;
+  cursor: pointer;
+`;
+
+function ChatInputIcons() {
+  const {
+    setIsEmojiSelectorOpen,
+    handleSubmit,
+    input,
+    setInput,
+    file,
+    setFile,
+    setIsFilePreviewOpen
+  } = useContext(ChatInputContext);
+
+  const toggleShowEmojies = () => {
+    setIsEmojiSelectorOpen((show: boolean) => !show);
+  };
+
+  const handleKeyDown = (
+    e:
+      | React.KeyboardEvent<HTMLInputElement>
+      | React.KeyboardEvent<HTMLTextAreaElement>
+  ) => {
+    setIsEmojiSelectorOpen(false);
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit(e as unknown as Event);
+    }
+  };
+  const handleSetFile = (file: File) => {
+    setIsEmojiSelectorOpen(false);
+    setFile(file);
+    setIsFilePreviewOpen(true);
+  };
+
+  return (
+    <>
+      <InvisibleButton>
+        <Icon data-testid="Emojie-button" onClick={() => toggleShowEmojies()}>
+          {getIcon("Emojie")}
+        </Icon>
+      </InvisibleButton>
+
+      <ExpandingTextArea
+        input={input}
+        setInput={setInput}
+        onKeyDown={handleKeyDown}
+      />
+
+      <MediaUploadComponent
+        file={file}
+        setFile={handleSetFile}
+        setIsFilePreviewOpen={setIsFilePreviewOpen}
+      />
+    </>
+  );
+}
+
+export default ChatInputIcons;
diff --git a/app/src/features/chats/ChatItem.tsx b/app/src/features/chats/ChatItem.tsx
index 5e02f880..b1d51954 100644
--- a/app/src/features/chats/ChatItem.tsx
+++ b/app/src/features/chats/ChatItem.tsx
@@ -1,8 +1,9 @@
 import { useNavigate, useParams } from "react-router-dom";
 import styled from "styled-components";
 
-import Avatar from "./Avatar";
-import { Chat } from "@mocks/data/Chats";
+import Avatar from "@components/Avatar";
+import { DetailedChatInterface } from "@state/messages/chats";
+import RenderWithMention from "@utils/renderWithMentions";
 
 const Container = styled.li<{ $active?: boolean }>`
   display: flex;
@@ -53,35 +54,50 @@ const LastMessage = styled.p`
 `;
 
 type ChatItemProps = {
-  chat: Chat;
+  chat: DetailedChatInterface;
+  onClick?: () => void;
 };
 
-function ChatItem({
-  chat: { id, image, name, timestamp, lastMessage },
-}: ChatItemProps) {
+const ChatItem = ({
+  chat: { _id, lastMessage, name, photo },
+  onClick
+}: ChatItemProps) => {
   const navigate = useNavigate();
+
+  const timestamp = lastMessage?.timestamp || "No messages";
+  const lastMessageContent =
+    RenderWithMention(lastMessage?.content!, lastMessage?._id!) || "No messages";
+
   const { chatId } = useParams<{ chatId: string }>();
 
   const handleOpenChat = () => {
-    navigate(`/${id}`);
+    navigate(`/${_id}`);
   };
 
   return (
     <Container
-      $active={Number(chatId) === id}
-      onClick={handleOpenChat}
-      key={id}
+      data-testid="chat-container"
+      $active={chatId === _id}
+      onClick={onClick ? onClick : handleOpenChat}
+      key={_id}
     >
-      <Avatar image={image} name={name?.charAt(0)} />
+      <Avatar data-testid="chat-avatar" image={photo} name={name} />
       <ChatContent>
         <ChatHeader>
-          <Name>{name}</Name>
-          <Timestamp>{timestamp}</Timestamp>
+          <Name data-testid="chat-name">{name}</Name>
+          <Timestamp data-testid="chat-timestamp">
+            {new Date(timestamp).toLocaleTimeString("en-US", {
+              hour: "2-digit",
+              minute: "2-digit"
+            }) || "No messages"}
+          </Timestamp>
         </ChatHeader>
-        <LastMessage>{lastMessage}</LastMessage>
+        <LastMessage data-testid="chat-last-message">
+          {lastMessageContent || "No messages"}
+        </LastMessage>
       </ChatContent>
     </Container>
   );
-}
+};
 
 export default ChatItem;
diff --git a/app/src/features/chats/ChatsList.tsx b/app/src/features/chats/ChatsList.tsx
index 653ac978..1784795f 100644
--- a/app/src/features/chats/ChatsList.tsx
+++ b/app/src/features/chats/ChatsList.tsx
@@ -1,24 +1,33 @@
 import styled from "styled-components";
 import ChatItem from "./ChatItem";
 import { useChats } from "./hooks/useChats";
+import { useAppSelector } from "@hooks/useGlobalState";
 
 const ChatListContainer = styled.ul`
   display: flex;
   flex-direction: column;
   width: 100%;
+  height: 100%;
   max-width: 600px;
-  margin: auto;
   background-color: var(--color-background);
+  overflow-y: scroll;
+  padding-bottom: 2rem;
 `;
 
 const ChatsList = () => {
-  const { chats, isPending } = useChats();
+  const { isPending } = useChats();
+  const chats = useAppSelector((state) => state.chats.chats);
 
   if (isPending) return;
 
   return (
     <ChatListContainer>
-      {chats?.map((chat) => <ChatItem chat={chat} key={chat.id} />)}
+      {chats
+        ?.slice()
+        .reverse()
+        .map((chat) => {
+          return <ChatItem chat={chat} key={chat._id} />;
+        })}
     </ChatListContainer>
   );
 };
diff --git a/app/src/features/chats/CommentBox.tsx b/app/src/features/chats/CommentBox.tsx
new file mode 100644
index 00000000..97a3270a
--- /dev/null
+++ b/app/src/features/chats/CommentBox.tsx
@@ -0,0 +1,54 @@
+import styled from "styled-components";
+
+import { useMessageContext } from "./contexts/MessageProvider";
+import { getIcon } from "@data/icons";
+import { useDispatch } from "react-redux";
+import { setActiveThread } from "@state/messages/channels";
+
+const Container = styled.div`
+  cursor: pointer;
+  display: flex;
+  border-top: 1px solid rgb(59, 75, 74);
+  margin-inline: -8px;
+  padding-inline: 0.6rem;
+  padding-top: 0.2rem;
+  margin-top: 0.5rem;
+  color: var(--accent-color);
+  justify-content: space-between;
+  align-items: center;
+  border-radius: 0 0 0.5rem 0.5rem;
+  transition: background-color 0.2s ease-in-out;
+
+  &:hover {
+    background-color: var(--color-chat-hover);
+    backdrop-filter: hue-rotate(10deg);
+  }
+`;
+
+const CommentsText = styled.div`
+  font-size: 0.8rem;
+`;
+
+const CommentsIcon = styled.div``;
+
+function CommentBox() {
+  const { threadMessages, _id: messageId } = useMessageContext();
+  const dispatch = useDispatch();
+
+  const handleOpenComments = () => {
+    dispatch(setActiveThread({ threadId: messageId, threadMessages }));
+  };
+
+  return (
+    <Container onClick={handleOpenComments}>
+      <CommentsText>{threadMessages?.length} Comments</CommentsText>
+      <CommentsIcon>
+        {getIcon("RightArrow", {
+          sx: { fontSize: "1.8rem", color: "var(--accent-color)" },
+        })}
+      </CommentsIcon>
+    </Container>
+  );
+}
+
+export default CommentBox;
diff --git a/app/src/features/chats/Comments.tsx b/app/src/features/chats/Comments.tsx
new file mode 100644
index 00000000..057b74d9
--- /dev/null
+++ b/app/src/features/chats/Comments.tsx
@@ -0,0 +1,36 @@
+import { getIcon } from "@data/icons";
+import { useNavigate } from "react-router-dom";
+import styled from "styled-components";
+import { useMessageContext } from "./contexts/MessageProvider";
+
+const Container = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  color: var(--accent-color);
+
+  cursor: pointer;
+
+  & svg {
+    font-size: 1rem;
+    color: var(--accent-color);
+  }
+`;
+
+function Comments() {
+  const { _id: id } = useMessageContext();
+  const navigate = useNavigate();
+  function handleClick() {
+    navigate(`/${id}`);
+  }
+
+  return (
+    <Container onClick={handleClick}>
+      <span>20 Comments</span>
+      {getIcon("RightArrow")}
+    </Container>
+  );
+}
+
+export default Comments;
diff --git a/app/src/features/chats/DisabledChatInput.tsx b/app/src/features/chats/DisabledChatInput.tsx
new file mode 100644
index 00000000..92997404
--- /dev/null
+++ b/app/src/features/chats/DisabledChatInput.tsx
@@ -0,0 +1,30 @@
+import styled from "styled-components";
+
+const Container = styled.div`
+  z-index: 1;
+
+  position: absolute;
+  bottom: 0;
+  z-index: 1;
+  left: 50%;
+  width: 100%;
+  transform: translateX(-50%);
+  margin: auto;
+`;
+
+const P = styled.p`
+  color: var(--color-text-secondary);
+  padding: 1rem;
+  text-align: center;
+  width: 100%;
+  background-color: var(--color-background);
+`;
+
+function DisabledChatInput() {
+  return (
+    <Container>
+      <P>Only admins can send messages</P>
+    </Container>
+  );
+}
+export default DisabledChatInput;
diff --git a/app/src/features/chats/Message.tsx b/app/src/features/chats/Message.tsx
new file mode 100644
index 00000000..559dbd0b
--- /dev/null
+++ b/app/src/features/chats/Message.tsx
@@ -0,0 +1,113 @@
+import styled from "styled-components";
+
+import CheckBox from "@features/forward/checkBox";
+import MessageOptionList from "./MessageOptionList";
+import useScrollToSearchResultsMsg from "@features/search/hooks/useScrollToSearchResultsMsg";
+import MessageContent from "./MessageContent";
+import useCheckBox from "@features/forward/hooks/useCheckBox";
+import MessageDetails from "./MessageDetails";
+
+import useHover from "./hooks/useHover";
+import { useMessageContext } from "./contexts/MessageProvider";
+import React from "react";
+import CommentBox from "./CommentBox";
+import { useAppSelector } from "@hooks/useGlobalState";
+
+const StyledMessage = styled.div<{ $isMine: boolean }>`
+  display: flex;
+  align-items: flex-end;
+  margin: 5px 0;
+  width: 100%;
+  ${({ $isMine }) =>
+    $isMine ? "justify-content: flex-end;" : "justify-content: flex-start;"}
+
+  &.highlight {
+    background-color: var(--color-chat-hover);
+    transition: background-color 0.5s ease;
+  }
+`;
+
+const Bubble = styled.div<{ $isMine: boolean }>`
+  display: flex;
+  flex-direction: column;
+
+  max-width: 70%;
+  padding: 10px;
+  border-radius: var(--border-radius-messages);
+  font-size: 14px;
+  height: fit-content;
+  position: relative;
+
+  background: ${({ $isMine }) =>
+    $isMine
+      ? "linear-gradient(to bottom, var(--color-background-own-1), var(--color-background-own-2), var(--color-background-own-3), var(--color-background-own-4))"
+      : "var(--color-background)"};
+
+  background-attachment: ${({ $isMine }) => ($isMine ? "fixed" : "initial")};
+  background-size: ${({ $isMine }) => ($isMine ? "cover" : "initial")};
+  background-position: ${({ $isMine }) => ($isMine ? "center" : "initial")};
+
+  color: ${({ $isMine }) => ($isMine ? "#fff" : "var(--color-text)")};
+  margin: ${({ $isMine }) => ($isMine ? "0 0 0 10px" : "0 10px 0 0")};
+
+  word-break: break-word;
+  white-space: pre-wrap;
+`;
+
+const MessageRow = styled.div<{ $isChecked: boolean }>`
+  display: flex;
+  gap: 2rem;
+  align-content: center;
+  justify-content: start;
+
+  background-color: ${({ $isChecked }) =>
+    $isChecked ? `var(--color-chat-hover)` : "none"};
+
+  width: 100%;
+`;
+
+const CheckBoxWrapper = styled.div`
+  padding-left: 1rem;
+  align-self: center;
+`;
+
+const Message = React.memo(() => {
+  const { _id: id, chatId, isMine, chatType } = useMessageContext();
+
+  useScrollToSearchResultsMsg();
+
+  const { isChecked, toggleCheckBox, showCheckBox } = useCheckBox({
+    chatId,
+    messageId: id
+  });
+  const { isHovered, handleMouseLeave, handleOpenList } = useHover();
+  const { activeThread } = useAppSelector((state) => state.channelsThreads);
+
+  return (
+    <MessageRow $isChecked={isChecked}>
+      {showCheckBox && (
+        <CheckBoxWrapper>
+          <CheckBox id={id} isChecked={isChecked} onChange={toggleCheckBox} />
+        </CheckBoxWrapper>
+      )}
+
+      <StyledMessage
+        key={id}
+        $isMine={chatType === "channel" ? false : isMine}
+        data-message-id={id}
+        data-testid={`message-${id}`}
+        onMouseLeave={handleMouseLeave}
+        onContextMenu={handleOpenList}
+      >
+        <Bubble $isMine={chatType === "channel" ? false : isMine}>
+          <MessageContent />
+          {isHovered && <MessageOptionList />}
+          <MessageDetails />
+          {chatType === "channel" && !activeThread && <CommentBox />}
+        </Bubble>
+      </StyledMessage>
+    </MessageRow>
+  );
+});
+
+export default Message;
diff --git a/app/src/features/chats/MessageBox.tsx b/app/src/features/chats/MessageBox.tsx
new file mode 100644
index 00000000..4ea49d46
--- /dev/null
+++ b/app/src/features/chats/MessageBox.tsx
@@ -0,0 +1,107 @@
+import { useAppSelector } from "@hooks/useGlobalState";
+import { RootState } from "@state/store";
+import styled from "styled-components";
+import { MessageInterface } from "types/messages";
+import { useParams } from "react-router-dom";
+import { getChatByID } from "./utils/helpers";
+
+interface MessageBoxProps {
+  messageId?: string | null;
+}
+
+const State = styled.div<{ $colorIndex: number }>`
+  color: var(--color-peer-${({ $colorIndex }) => $colorIndex});
+  text-transform: capitalize;
+`;
+
+const Message = styled.div`
+  font-size: smaller;
+  color: var(--color-text);
+  opacity: 0.9;
+`;
+
+const StyledMessageBox = styled.div<{ $colorIndex: number }>`
+  line-height: 1rem;
+
+  color: var(--color-peer-${({ $colorIndex }) => $colorIndex});
+  background-color: var(--color-peer-bg-${({ $colorIndex }) => $colorIndex});
+
+  position: relative;
+  flex: 1 1;
+
+  border-left: var(--color-peer-${({ $colorIndex }) => $colorIndex}) 3px solid;
+  border-radius: 5px;
+
+  padding: 7px 0.5rem;
+
+  &:hover {
+    background-color: var(
+      --color-peer-bg-active ${({ $colorIndex }) => $colorIndex}
+    );
+  }
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    width: 1px;
+    height: 100%;
+
+    background-color: var(--color-peer-${({ $colorIndex }) => $colorIndex});
+  }
+`;
+
+function getMessageById(
+  messageId: string,
+  messages?: MessageInterface[],
+): MessageInterface | undefined {
+  return messages
+    ? messages.find((message) => message._id === messageId)
+    : undefined;
+}
+
+function MessageBox({ messageId }: MessageBoxProps) {
+  const id = useAppSelector((state) => state.user.userInfo.id);
+  const { chats, members } = useAppSelector((state) => state.chats);
+
+  const { chatId } = useParams<{ chatId: string }>();
+
+  const messages = chatId
+    ? getChatByID({ chats: chats, chatID: chatId })?.messages
+    : undefined;
+
+  let msg: MessageInterface | undefined;
+  let name: string | undefined;
+
+  // TODO: refactor this
+  if (messageId) {
+    msg = getMessageById(messageId, messages);
+    if (id === msg?.senderId) name = "you";
+    else {
+      const sender = members.find((member) => member._id === msg?.senderId);
+      name = `${sender?.screenFirstName} ${sender?.screenLastName}`;
+    }
+  }
+
+  const memberIndex = members.findIndex(
+    (member) => member._id === msg?.senderId,
+  );
+  const colorIndex = memberIndex >= 0 ? (memberIndex % 5) + 2 : 2;
+
+  const activeMessage = useAppSelector(
+    (state: RootState) => state.activeMessage,
+  );
+
+  return (
+    <StyledMessageBox $colorIndex={colorIndex}>
+      <State $colorIndex={colorIndex}>
+        {name ? name : `${activeMessage.state}ing`}
+      </State>
+      <Message>{msg ? msg.content : activeMessage.content}</Message>
+    </StyledMessageBox>
+  );
+}
+
+export default MessageBox;
diff --git a/app/src/features/chats/MessageContent.tsx b/app/src/features/chats/MessageContent.tsx
new file mode 100644
index 00000000..a7901199
--- /dev/null
+++ b/app/src/features/chats/MessageContent.tsx
@@ -0,0 +1,75 @@
+import styled from "styled-components";
+
+import MessageBox from "./MessageBox";
+import SenderName from "./SenderName";
+import FileViewer from "./media/FileViewer";
+
+import RenderWithHighlight from "@utils/renderWithHighlight";
+
+import { useMessageContext } from "./contexts/MessageProvider";
+
+import useOptionListAction from "./hooks/useOptionListAction";
+import { useAppSelector } from "@hooks/useGlobalState";
+
+const MessageBoxWrapper = styled.div`
+  display: block;
+`;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const Gif = styled.img`
+  width: 120px;
+  height: 120px;
+  object-fit: fill;
+  cursor: pointer;
+  border-radius: 0.5rem;
+`;
+
+function MessageContent() {
+  const {
+    _id: id,
+    content,
+    parentMessageId,
+    media,
+    contentType,
+    chatType,
+    isAppropriate
+  } = useMessageContext();
+
+  const { searchTerm, searchResults } = useAppSelector((state) => state.search);
+  const { MoveToReplyMessage } = useOptionListAction({
+    id,
+    content,
+    parentMessageId
+  });
+
+  const isGifOrSticker =
+    media && (contentType === "GIF" || contentType === "sticker");
+
+  const isFile = media && !(contentType === "GIF" || contentType === "sticker");
+  const filteredContent = isAppropriate
+    ? content
+    : "🚫️ This mesaage has inappropriate content.";
+
+  return (
+    <Container>
+      {chatType !== "channel" && <SenderName />}
+      {parentMessageId && (
+        <MessageBoxWrapper
+          onClick={MoveToReplyMessage}
+          data-testid={`reply-box-${id}`}
+        >
+          <MessageBox messageId={parentMessageId} />
+        </MessageBoxWrapper>
+      )}
+      {isGifOrSticker && <Gif src={media} loading="lazy" />}
+      {isFile && <FileViewer file={media} />}
+      {RenderWithHighlight(filteredContent, searchTerm, searchResults, id)}
+    </Container>
+  );
+}
+
+export default MessageContent;
diff --git a/app/src/features/chats/MessageDetails.tsx b/app/src/features/chats/MessageDetails.tsx
new file mode 100644
index 00000000..502bfcaa
--- /dev/null
+++ b/app/src/features/chats/MessageDetails.tsx
@@ -0,0 +1,62 @@
+import styled from "styled-components";
+
+import { getIcon } from "@data/icons";
+
+import { useMessageContext } from "./contexts/MessageProvider";
+
+const TimeStamp = styled.div<{ $isMine: boolean }>`
+  font-size: x-small;
+  font-size: x-small;
+  color: ${({ $isMine }) =>
+    $isMine ? "var(--color-text)" : "var(--color-text-secondary)"};
+
+  float: none;
+  display: block;
+
+  float: none;
+  display: block;
+`;
+
+const Details = styled.div`
+  padding-top: 0.2rem;
+  display: flex;
+  align-self: flex-end;
+  align-items: center;
+  gap: 0.2rem;
+  font-size: 0.6rem;
+  color: var(--color-text-secondary);
+`;
+
+function MessageDetails() {
+  const { isPinned, isMine, timestamp, chatType, sender, numberOfMembers } =
+    useMessageContext();
+
+  return (
+    <Details>
+      {chatType === "channel" && (
+        <>
+          <span>{sender?.username}</span>
+          <span>{numberOfMembers}</span>
+          <span>
+            {getIcon("Eye", {
+              sx: { fontSize: "0.8rem", color: "var(--color-text-secondary)" },
+            })}
+          </span>
+        </>
+      )}
+
+      {isPinned &&
+        getIcon("PushPin", {
+          sx: { fontSize: "0.8rem", color: "var(--color-text-secondary)" },
+        })}
+      <TimeStamp $isMine={chatType === "channel" ? false : isMine}>
+        {new Date(timestamp).toLocaleTimeString("en-US", {
+          hour: "2-digit",
+          minute: "2-digit",
+        })}
+      </TimeStamp>
+    </Details>
+  );
+}
+
+export default MessageDetails;
diff --git a/app/src/features/chats/MessageOptionList.tsx b/app/src/features/chats/MessageOptionList.tsx
new file mode 100644
index 00000000..7d462c8c
--- /dev/null
+++ b/app/src/features/chats/MessageOptionList.tsx
@@ -0,0 +1,130 @@
+import styled from "styled-components";
+import { useMessageContext } from "./contexts/MessageProvider";
+import useOptionListAction from "./hooks/useOptionListAction";
+import { useAppDispatch, useAppSelector } from "@hooks/useGlobalState";
+import {
+  pinMessage,
+  setShowCheckBox,
+  unpinMessage,
+} from "@state/messages/chats";
+import { useSocket } from "@hooks/useSocket";
+import useCheckBox from "@features/forward/hooks/useCheckBox";
+import { useDeleteMessage } from "./hooks/useDeleteMessage";
+
+const StyledList = styled.ul<{ $isMine: boolean }>`
+  position: absolute;
+  min-width: 150px;
+  height: 6rem;
+
+  right: ${(props) => !props.$isMine && -6.5}rem;
+  left: ${(props) => props.$isMine && -6.5}rem;
+
+  z-index: 10;
+  overflow: auto;
+
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  justify-content: center;
+  align-items: start;
+
+  list-style: none;
+  padding: 0.2rem 0.2rem;
+  background-color: var(--color-background);
+  box-shadow: var(--box-shadow);
+  border-radius: var(--border-radius-default-small);
+
+  height: fit-content;
+
+  backdrop-filter: blur(30px);
+  -webkit-backdrop-filter: blur(5px);
+`;
+
+const HoverMask = styled.div`
+  width: 100%;
+  height: 100%;
+  border-radius: var(--border-radius-default-small);
+  display: flex;
+  align-items: center;
+  justify-content: start;
+  padding-left: 0.5rem;
+  &:hover {
+    background: var(--color-background-compact-menu-hover);
+    cursor: pointer;
+  }
+`;
+
+const StyledP = styled.p`
+  font-size: 1rem;
+  color: var(--color-text-secondary);
+`;
+
+function MessageOptionList() {
+  const {
+    isMine,
+    isPinned,
+    _id: id,
+    content,
+    parentMessageId,
+    chatId,
+  } = useMessageContext();
+
+  const { handleDeleteMessage } = useDeleteMessage();
+
+  const { handleEditMessage, handleReply } = useOptionListAction({
+    id,
+    content,
+    parentMessageId,
+  });
+
+  const { showCheckBox } = useCheckBox({ chatId, messageId: id });
+
+  const userId = useAppSelector((state) => state.user.userInfo.id);
+
+  const dispatch = useAppDispatch();
+  const { pinMessage: pinMessageSocket, unpinMessage: unpinMessageSocket } =
+    useSocket();
+
+  function handlePin() {
+    if (isPinned) {
+      dispatch(unpinMessage({ messageId: id, chatId: chatId }));
+      unpinMessageSocket(chatId, id, userId);
+      return;
+    }
+    dispatch(pinMessage({ messageId: id, chatId: chatId }));
+    pinMessageSocket(chatId, id, userId);
+  }
+
+  function handleForward() {
+    dispatch(setShowCheckBox({ chatId: chatId, showCheckBox: !showCheckBox }));
+  }
+
+  function handleDelete() {
+    handleDeleteMessage(id, chatId);
+  }
+
+  return (
+    <StyledList $isMine={isMine} data-testid="message-option-list">
+      <HoverMask onClick={handleForward} data-testid="forward-option">
+        <StyledP>Forward</StyledP>
+      </HoverMask>
+      <HoverMask onClick={handleReply} data-testid="reply-option">
+        <StyledP>Reply</StyledP>
+      </HoverMask>
+      {isMine && (
+        <HoverMask onClick={handleEditMessage} data-testid="edit-option">
+          <StyledP>Edit</StyledP>
+        </HoverMask>
+      )}
+      <HoverMask onClick={handlePin} data-testid="pin-option">
+        <StyledP>{isPinned ? "Unpin" : "Pin"}</StyledP>
+      </HoverMask>
+      {isMine && (
+        <HoverMask onClick={handleDelete} data-testid="delete-option">
+          <StyledP>Delete</StyledP>
+        </HoverMask>
+      )}
+    </StyledList>
+  );
+}
+export default MessageOptionList;
diff --git a/app/src/features/chats/ReplyWrapper.tsx b/app/src/features/chats/ReplyWrapper.tsx
new file mode 100644
index 00000000..f26145d3
--- /dev/null
+++ b/app/src/features/chats/ReplyWrapper.tsx
@@ -0,0 +1,50 @@
+import { useDispatch } from "react-redux";
+import styled from "styled-components";
+
+import Icon from "@components/Icon";
+import { getIcon } from "@data/icons";
+
+import { clearActiveMessage } from "@state/messages/activeMessage";
+import { useAppSelector } from "@hooks/useGlobalState";
+import MessageBox from "./MessageBox";
+import { useContext } from "react";
+import { ChatInputContext } from "./ChatBox";
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+
+  height: 45px;
+  opacity: 1;
+
+  & svg {
+    color: var(--accent-color);
+  }
+`;
+
+export default function ReplyWrapper() {
+  const dispatch = useDispatch();
+
+  const { setInput } = useContext(ChatInputContext);
+  const activeMessage = useAppSelector((state) => state.activeMessage);
+
+  function handleHideWrapper() {
+    dispatch(clearActiveMessage());
+    if (activeMessage.state === "edit") setInput("");
+  }
+
+  const isEdit = activeMessage.state === "edit";
+
+  return (
+    <Container data-testid="reply-wrapper">
+      <Icon data-testid={isEdit ? "edit-icon" : "reply-icon"}>
+        {getIcon(isEdit ? "Edit" : "Reply")}
+      </Icon>
+      <MessageBox />
+      <Icon onClick={handleHideWrapper} data-testid="close-icon">
+        {getIcon("Close")}
+      </Icon>
+    </Container>
+  );
+}
diff --git a/app/src/features/chats/SendButton.tsx b/app/src/features/chats/SendButton.tsx
new file mode 100644
index 00000000..9c01bcf6
--- /dev/null
+++ b/app/src/features/chats/SendButton.tsx
@@ -0,0 +1,21 @@
+import CircleIcon from "@components/CircleIcon";
+
+interface ButtonType {
+  type: "record" | "message";
+  onClick: (e: Event, voiceNoteName?: string) => void;
+}
+
+function RecordInput({ type, onClick }: ButtonType) {
+  return (
+    <CircleIcon
+      onClick={onClick}
+      data-testid="record-icon"
+      $icon={type === "record" ? "Record" : "Send"}
+      $padding={0.6}
+      $color="white"
+      $bgColor="var(--accent-color)"
+    />
+  );
+}
+
+export default RecordInput;
diff --git a/app/src/features/chats/SenderName.tsx b/app/src/features/chats/SenderName.tsx
new file mode 100644
index 00000000..b5f66c86
--- /dev/null
+++ b/app/src/features/chats/SenderName.tsx
@@ -0,0 +1,37 @@
+import { useParams } from "react-router-dom";
+import styled from "styled-components";
+
+import { useAppSelector } from "@hooks/useGlobalState";
+import { useChatMembers } from "./hooks/useChatMembers";
+
+import { useMessageContext } from "./contexts/MessageProvider";
+
+const Name = styled.div<{ $colorIndex: number }>`
+  color: var(--color-peer-${({ $colorIndex }) => $colorIndex});
+`;
+
+function SenderName() {
+  const { chatId } = useParams<{ chatId: string }>();
+  const { senderId, isMine } = useMessageContext();
+
+  const chat = useAppSelector((state) =>
+    state.chats.chats.find((chat) => chat?._id === chatId)
+  );
+
+  const members = useChatMembers(chat?.members);
+
+  const memberIndex = members.findIndex((member) => member._id === senderId);
+  const memberData = members[memberIndex];
+
+  const colorIndex = (memberIndex % 5) + 2;
+
+  if (isMine || chat?.type === "private") return null;
+
+  return (
+    <Name $colorIndex={colorIndex}>
+      {`${memberData?.screenFirstName} ${memberData?.screenLastName}`}
+    </Name>
+  );
+}
+
+export default SenderName;
diff --git a/app/src/components/side-bar/chats/StartNewChat.tsx b/app/src/features/chats/StartNewChat.tsx
similarity index 52%
rename from app/src/components/side-bar/chats/StartNewChat.tsx
rename to app/src/features/chats/StartNewChat.tsx
index 84d1d09f..d9e44e04 100644
--- a/app/src/components/side-bar/chats/StartNewChat.tsx
+++ b/app/src/features/chats/StartNewChat.tsx
@@ -1,8 +1,14 @@
 import { useState } from "react";
 import styled from "styled-components";
-import SideBarMenuItem, { SideBarMenuItemProps } from "./SideBarMenuItem";
+import SideBarMenuItem, {
+  SideBarMenuItemProps,
+} from "@components/side-bar/chats/SideBarMenuItem";
 import CircleIcon from "@components/CircleIcon";
 import { useMouseLeave } from "@hooks/useMouseLeave";
+import { useDispatch } from "react-redux";
+import { updateSideBarView } from "@state/side-bar/sideBar";
+import { sideBarPages } from "types/sideBar";
+import { useSidebarType } from "@components/side-bar/SideBarContext";
 
 interface StyledListProps {
   $bottom?: number;
@@ -14,6 +20,13 @@ const items: SideBarMenuItemProps[] = [
   { title: "New Group", iconMapValue: "NewGroup" },
   { title: "New Chat", iconMapValue: "NewChat" },
 ];
+
+const StyledCircleIconContainer = styled.div`
+  cursor: pointer;
+  position: relative;
+  height: 3.5rem;
+  width: 3.5rem;
+`;
 const menuStyles: StyledListProps = {
   $bottom: 5,
   $right: 1.25,
@@ -23,9 +36,7 @@ const menuStyles: StyledListProps = {
 const StyledList = styled.ul<StyledListProps>`
   position: absolute;
   width: ${(props) => props.$size}rem;
-
   right: ${(props) => (props.$right ?? 3) + 2}rem;
-
   bottom: ${(props) => (props.$bottom ?? 3) + 3}rem;
   display: flex;
   flex-direction: column;
@@ -35,29 +46,55 @@ const StyledList = styled.ul<StyledListProps>`
   padding: 0.5rem 0.2rem;
   background-color: var(--color-background);
   box-shadow: var(--box-shadow);
-  box-shadow: var(--box-shadow);
   border-radius: var(--border-radius-default);
 `;
 
 function StartNewChat() {
   const [isMenuOpened, setIsMenuOpened] = useState(false);
   const ref = useMouseLeave(() => setIsMenuOpened(false), false);
+  const dispatch = useDispatch();
+  const sideBarType = useSidebarType();
+
   const handleOpenMenu = () => {
     setIsMenuOpened((prevState) => !prevState);
   };
+
+  function handleMenuItemClick(title: string) {
+    if (title === "New Channel") {
+      dispatch(
+        updateSideBarView({
+          redirect: sideBarPages.ADD_MEMBERS,
+          data: { type: sideBarType, view: "channel" },
+        })
+      );
+    } else if (title === "New Group") {
+      dispatch(
+        updateSideBarView({
+          redirect: sideBarPages.ADD_MEMBERS,
+          data: { type: sideBarType, view: "group" },
+        })
+      );
+    } else {
+      //TODO: implemn
+    }
+  }
+
   return (
     <>
-      <CircleIcon
-        data-testid="start-new-chat-icon"
-        $icon={isMenuOpened ? "Close" : "Edit"}
-        $right={1.25}
-        $bottom={5}
-        $size={2.8}
-        $padding={0.5}
-        $color="var(--color-icon-secondary)"
-        $bgColor="var(--color-pattern)"
-        onClick={handleOpenMenu}
-      />
+      <StyledCircleIconContainer>
+        <CircleIcon
+          data-testid="start-new-chat-icon"
+          $icon={isMenuOpened ? "Close" : "Edit"}
+          $right={0.5}
+          $bottom={0}
+          $size={2.8}
+          $padding={0.5}
+          $color="var(--color-icon-secondary)"
+          $bgColor="var(--new-chat-color)"
+          $opacity={0.95}
+          onClick={handleOpenMenu}
+        />
+      </StyledCircleIconContainer>
       {isMenuOpened && (
         <StyledList
           {...menuStyles}
@@ -66,9 +103,9 @@ function StartNewChat() {
         >
           {items.map((item: SideBarMenuItemProps, id: number) => (
             <SideBarMenuItem
-              data-testid={`new-chat-menu-item-${id}`}
               {...item}
               key={id}
+              onClick={() => handleMenuItemClick(item?.title)}
             />
           ))}
         </StyledList>
diff --git a/app/src/features/chats/Topbar.tsx b/app/src/features/chats/Topbar.tsx
index 79b772b1..f9c435aa 100644
--- a/app/src/features/chats/Topbar.tsx
+++ b/app/src/features/chats/Topbar.tsx
@@ -1,22 +1,40 @@
+import { useCallback, useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
 import styled from "styled-components";
-
-import { getIcon } from "@data/icons";
-
-import Avatar from "@features/chats/Avatar";
+import Avatar from "@components/Avatar";
 import Icon from "@components/Icon";
+import SearchBar from "@features/search/components/SearchBar";
+import PinnedMessages from "@features/pin-messages/components/PinnedMessages";
+import { getIcon } from "@data/icons";
+import { setChatIsBlocked } from "@state/messages/chats";
+import { useSocket } from "@hooks/useSocket";
+import { useAppDispatch, useAppSelector } from "@hooks/useGlobalState";
+import { useChatMembers } from "./hooks/useChatMembers";
+import { useBlock } from "@features/privacy-settings/hooks/useBlock";
+import { useRightSideBarContext } from "@features/groups/contexts/RightSideBarProvider";
+import { getElapsedTime } from "@utils/helpers";
+import { getChatByID } from "./utils/helpers";
+import { updateSideBarView } from "@state/side-bar/sideBar";
+import { sideBarPages } from "types/sideBar";
+import { resetActiveThread } from "@state/messages/channels";
 
-import { useChat } from "@features/chats/hooks/useChat";
-
-const Container = styled.div`
+const Container = styled.div<{ $hasMargin?: boolean }>`
   position: absolute;
-  z-index: 1000;
+  top: 0;
+  z-index: 2;
+
   height: 3.5rem;
-  background-color: var(--color-background);
   width: 100%;
+  background-color: var(--color-background);
+
   display: flex;
   justify-content: space-between;
   align-items: center;
+
   padding-inline: 1rem;
+  cursor: pointer;
+
+  margin: ${({ $hasMargin }) => ($hasMargin ? "1rem 0" : "0")};
 `;
 
 const Info = styled.div`
@@ -44,40 +62,202 @@ const Name = styled.span`
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 100%;
-
   font-weight: 500;
-
   line-height: 1.3125rem;
 `;
 
 const Icons = styled.div`
   display: flex;
   align-items: center;
-
   gap: 1.5rem;
 `;
 
+const IconButton = styled.button`
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--color-text-secondary);
+  padding: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const InvisibleButton = styled.div`
+  all: unset;
+  display: inline-block;
+  cursor: pointer;
+`;
+
+const StyledButton = styled.button`
+  background: linear-gradient(
+    to left,
+    var(--color-background-own-3),
+    var(--color-background-own-4)
+  );
+
+  border: none;
+  width: 7rem;
+  height: 2rem;
+  border-radius: 0.5rem;
+  color: var(--color-text);
+  margin-right: 1rem;
+
+  color: var(--color-background);
+`;
+
+export interface OutletContextProps {
+  setShowRightSideBar: React.Dispatch<React.SetStateAction<boolean>>;
+  showRightSideBar: boolean;
+}
+
+//TODO: refactor
 function Topbar() {
-  const { chat } = useChat();
-  const { name, lastSeen, image } = chat || {};
+  const { chatId } = useParams<{ chatId: string }>();
+  const userId = useAppSelector((state) => state.user.userInfo.id);
+  const chats = useAppSelector((state) => state.chats.chats);
+  const dispatch = useAppDispatch();
+  const { activeThread } = useAppSelector((state) => state.channelsThreads);
+  const [isSearching, setIsSearching] = useState(false);
+  const { createVoiceCall } = useSocket();
+  const [callStatus, setCallStatus] = useState<
+    "inactive" | "active" | "calling" | "incoming" | "ended"
+  >("inactive");
+  const startCall = () => {
+    if (chatId && callStatus === "inactive") {
+      createVoiceCall({ chatId });
+    }
+  };
+  const chat = chatId
+    ? getChatByID({
+        chatID: chatId,
+        chats: chats
+      })
+    : undefined;
+
+  const membersData = useChatMembers(chat?.members);
+  const { removeFromBlockList } = useBlock();
+
+  const { setIsRightSideBarOpen } = useRightSideBarContext();
 
-  if (!chat) return;
+  const cachedOpenRightSideBar = useCallback(
+    function handleOpenRightSideBar() {
+      if (!chat) return;
+      if (chat?.type === "private") setIsRightSideBarOpen(false);
+      else {
+        dispatch(
+          updateSideBarView({
+            redirect:
+              chat?.type === "group"
+                ? sideBarPages.GROUP_INFO
+                : sideBarPages.CHANNEL_INFO,
+            data: { type: "right" }
+          })
+        );
+      }
+    },
+    [chat, dispatch, setIsRightSideBarOpen]
+  );
+
+  useEffect(() => {
+    if (!chatId) return;
+    cachedOpenRightSideBar();
+  }, [chatId, chat, cachedOpenRightSideBar]);
+
+  let image;
+  let lastSeen;
+
+  if (chat) {
+    lastSeen = chat?.lastMessage?.timestamp;
+    image = membersData[0]?.photo;
+  }
+
+  const toggleSearch = () => {
+    setIsSearching(!isSearching);
+  };
+
+  async function handleRemoveFromBlock() {
+    await removeFromBlockList({ id: membersData[0]._id });
+    dispatch(
+      setChatIsBlocked({
+        chatId: chatId!,
+        isBlocked: false,
+        userId: userId
+      })
+    );
+  }
+
+  function toggleRightSideBar() {
+    if (chat?.type === "private") return;
+    setIsRightSideBarOpen((prev) => !prev);
+  }
+
+  const closeThread = () => {
+    dispatch(resetActiveThread());
+  };
+
+  if (!chat) return null;
 
   return (
-    <Container>
-      <Info>
-        <Avatar image={image} name={name?.charAt(0)} />
-        <Content>
-          <Name>{name}</Name>
-          <LastSeen>last seen {lastSeen}</LastSeen>
-        </Content>
-      </Info>
-      <Icons>
-        <Icon>{getIcon("Call")}</Icon>
-        <Icon>{getIcon("Search")}</Icon>
-        <Icon>{getIcon("More")}</Icon>
-      </Icons>
-    </Container>
+    <>
+      <Container data-testid="chat-topbar">
+        {!activeThread && (
+          <Avatar
+            data-testid="chat-avatar"
+            image={image}
+            name={chat.name?.charAt(0)}
+            onClick={toggleRightSideBar}
+          />
+        )}
+        {activeThread && (
+          <div onClick={closeThread} data-testid="back-button">
+            {getIcon("LeftArrow", {
+              sx: { fontSize: "3rem", color: "var(--accent-color)" }
+            })}
+          </div>
+        )}
+        {isSearching ? (
+          <SearchBar onClose={toggleSearch} />
+        ) : (
+          <>
+            <Info data-testid="chat-info" onClick={toggleRightSideBar}>
+              <Content>
+                <Name data-testid="chat-name">
+                  {activeThread ? "Comments" : chat.name}
+                </Name>
+                {lastSeen && (
+                  <LastSeen data-testid="chat-last-seen">
+                    last seen {getElapsedTime(lastSeen)}
+                  </LastSeen>
+                )}
+              </Content>
+            </Info>
+            <PinnedMessages />
+            {chat.isBlocked && (
+              <StyledButton
+                onClick={handleRemoveFromBlock}
+                data-testid="unblock-button"
+              >
+                Unblock
+              </StyledButton>
+            )}
+            <Icons>
+              <InvisibleButton>
+                <Icon onClick={startCall} data-testid="call-icon">
+                  {getIcon("Call")}
+                </Icon>
+              </InvisibleButton>
+
+              <IconButton onClick={toggleSearch} data-testid="search-button">
+                {getIcon("Search")}
+              </IconButton>
+              <Icon data-testid="more-icon">{getIcon("More")}</Icon>
+            </Icons>
+          </>
+        )}
+        {isSearching && <IconButton>{getIcon("CalendarToday")}</IconButton>}
+      </Container>
+    </>
   );
 }
 
diff --git a/app/src/features/chats/audio/RecordingView.tsx b/app/src/features/chats/audio/RecordingView.tsx
new file mode 100644
index 00000000..441c439b
--- /dev/null
+++ b/app/src/features/chats/audio/RecordingView.tsx
@@ -0,0 +1,70 @@
+import styled, { keyframes } from "styled-components";
+import { useContext } from "react";
+import Icon from "@components/Icon";
+import { getIcon } from "@data/icons";
+import { ChatInputContext } from "../ChatBox";
+
+const blinkAnimation = keyframes`
+  50% {
+    opacity: 0;
+  }
+`;
+
+const GlowingBlinkingIcon = styled.i`
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 2%;
+  width: 16px;
+  height: 16px;
+  font-size: 50%;
+  border-radius: 50%;
+  background: var(--color-error);
+  text-shadow: 0 0 8px rgba(255, 0, 0, 0.8);
+  animation: ${blinkAnimation} 1s steps(5, start) infinite;
+`;
+const StyledP = styled.p`
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 1rem;
+  color: var(--color-text-secondary);
+`;
+const InvisibleButton = styled.div`
+  all: unset;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 2%;
+  display: inline-block;
+  cursor: pointer;
+`;
+
+export default function RecordingView() {
+  const { isRecording, setIsRecording } = useContext(ChatInputContext);
+
+  const handleCanelReecord = () => {
+    setIsRecording("idle");
+  };
+
+  return (
+    <>
+      {isRecording == "recording" && (
+        <>
+          <StyledP>Recording...</StyledP>
+          <GlowingBlinkingIcon />
+        </>
+      )}
+      {isRecording == "pause" && (
+        <>
+          <StyledP>Record</StyledP>
+          <InvisibleButton>
+            <Icon onClick={handleCanelReecord} data-testid>
+              {getIcon("Delete")}
+            </Icon>
+          </InvisibleButton>
+        </>
+      )}
+    </>
+  );
+}
diff --git a/app/src/features/chats/audio/VoiceRecorder.tsx b/app/src/features/chats/audio/VoiceRecorder.tsx
new file mode 100644
index 00000000..fe34f6eb
--- /dev/null
+++ b/app/src/features/chats/audio/VoiceRecorder.tsx
@@ -0,0 +1,141 @@
+import React, { useRef, useEffect, useCallback, useContext } from "react";
+import RecordInput from "../SendButton";
+import { useUploadMedia } from "../media/hooks/useUploadMedia";
+import { useMessageSender } from "../hooks/useMessageSender";
+import { ChatInputContext } from "../ChatBox";
+import { useParams } from "react-router-dom";
+
+export type RecordingStates = "idle" | "recording" | "pause";
+
+const VoiceRecorder: React.FC = ({
+  recordingMimeType = "audio/webm"
+}: {
+  recordingMimeType?: string;
+}) => {
+  const mediaRecorder = useRef<MediaRecorder | null>(null);
+  const audioChunks = useRef<Blob[]>([]);
+  const { chatId } = useParams<{ chatId: string }>();
+  const { data: voiceNoteURL, mutate: uploadVoiceNote } = useUploadMedia();
+
+  const { isRecording, setIsRecording, setError } =
+    useContext(ChatInputContext);
+
+  const { handleSendMessage } = useMessageSender();
+
+  useEffect(() => {
+    if (isRecording === "recording") {
+      navigator.mediaDevices
+        .getUserMedia({ audio: true })
+        .then((stream) => {
+          const recorder = new MediaRecorder(stream, {
+            mimeType: recordingMimeType
+          });
+          mediaRecorder.current = recorder;
+
+          recorder.ondataavailable = (event) => {
+            if (event.data.size > 0) {
+              audioChunks.current.push(event.data);
+            }
+          };
+
+          recorder.onstop = () => {
+            stream.getTracks().forEach((track) => track.stop());
+          };
+
+          recorder.start();
+        })
+        .catch((err) => {
+          setError(`Error accessing microphone: ${err.message}`);
+          setIsRecording("idle");
+        });
+    } else if (isRecording === "idle") {
+      // Cleanup media recorder
+      mediaRecorder.current?.stop();
+      mediaRecorder.current = null;
+    }
+
+    return () => {
+      mediaRecorder.current?.stream
+        .getTracks()
+        .forEach((track) => track.stop());
+      mediaRecorder.current = null;
+    };
+  }, [isRecording, recordingMimeType, setError, setIsRecording]);
+
+  const handleStartRecording = useCallback(() => {
+    audioChunks.current = [];
+    setIsRecording("recording");
+  }, [setIsRecording]);
+
+  const handleStopRecording = useCallback(() => {
+    setIsRecording("pause");
+    mediaRecorder.current?.stop();
+  }, [setIsRecording]);
+
+  const handleSendRecord = useCallback(() => {
+    if (isRecording === "pause" && audioChunks.current.length) {
+      const audioBlob = new Blob(audioChunks.current, {
+        type: recordingMimeType
+      });
+      const file = new File([audioBlob], "recording.webm", {
+        type: audioBlob.type,
+        lastModified: Date.now()
+      });
+      audioChunks.current = [];
+      try {
+        uploadVoiceNote(file, {
+          onSuccess: (url) => {
+            console.log("File uploaded successfully:", url);
+            handleSendMessage("", chatId, url);
+          },
+          onError: (error) => {
+            console.error("Error uploading file:", error);
+          }
+        });
+      } catch (error) {
+        console.error("Unexpected error while sending file:", error);
+      }
+      setIsRecording("idle");
+    }
+  }, [
+    isRecording,
+    recordingMimeType,
+    setIsRecording,
+    uploadVoiceNote,
+    handleSendMessage,
+    chatId
+  ]);
+
+  useEffect(() => {
+    if (voiceNoteURL && isRecording === "pause") {
+      handleSendMessage("", chatId, voiceNoteURL, "audio");
+      setIsRecording("idle");
+    }
+  }, [
+    voiceNoteURL,
+    isRecording,
+    handleSendMessage,
+    setIsRecording,
+    uploadVoiceNote,
+    chatId
+  ]);
+
+  return (
+    <>
+      {isRecording !== "pause" ? (
+        <RecordInput
+          onClick={
+            isRecording === "recording"
+              ? handleStopRecording
+              : handleStartRecording
+          }
+          type={"record"}
+        />
+      ) : (
+        <RecordInput onClick={handleSendRecord} type={"message"} />
+      )}
+    </>
+  );
+};
+
+export default VoiceRecorder;
diff --git a/app/src/features/chats/contexts/MessageProvider.tsx b/app/src/features/chats/contexts/MessageProvider.tsx
new file mode 100644
index 00000000..65894c02
--- /dev/null
+++ b/app/src/features/chats/contexts/MessageProvider.tsx
@@ -0,0 +1,60 @@
+import { useAppSelector } from "@hooks/useGlobalState";
+import { Member } from "@mocks/data/chats";
+import React, { createContext, useContext } from "react";
+import { MessageInterface } from "types/messages";
+
+type ContextType = MessageInterface & {
+  isMine: boolean;
+  chatType: string;
+  sender?: Member;
+  numberOfMembers?: number;
+};
+
+const MessageContext = createContext<ContextType | null>(null);
+
+type ProviderProps = {
+  children: React.ReactNode;
+  data: MessageInterface;
+  chatType: string;
+  sender?: Member;
+  numberOfMembers?: number;
+  isAppropriate: boolean;
+};
+
+function MessageProvider({
+  children,
+  data,
+  chatType,
+  sender,
+  numberOfMembers,
+  isAppropriate,
+}: ProviderProps) {
+  const userId = useAppSelector((state) => state.user.userInfo.id);
+  const isMine = userId === data.senderId;
+
+  return (
+    <MessageContext.Provider
+      value={{
+        ...data,
+        isMine,
+        chatType,
+        sender,
+        numberOfMembers,
+        isAppropriate,
+      }}
+    >
+      {children}
+    </MessageContext.Provider>
+  );
+}
+
+export function useMessageContext() {
+  const context = useContext(MessageContext);
+  if (!context) {
+    throw new Error("useMessageContext must be used within a MessageProvider");
+  }
+  return context;
+}
+
+export default MessageProvider;
+export { MessageContext };
diff --git a/app/src/features/chats/emojies/EmojiPicker.tsx b/app/src/features/chats/emojies/EmojiPicker.tsx
new file mode 100644
index 00000000..70a751f1
--- /dev/null
+++ b/app/src/features/chats/emojies/EmojiPicker.tsx
@@ -0,0 +1,74 @@
+import React from "react";
+import EmojiPicker, {
+  EmojiClickData,
+  Theme as emojitheme,
+} from "emoji-picker-react";
+import styled from "styled-components";
+import { useAppSelector } from "@hooks/useGlobalState";
+import { Theme } from "@state/theme/theme";
+
+const StyledEmojiPickerContainer = styled.div`
+  z-index: 4;
+  position: absolute;
+  width: 30%;
+  min-width: 300px;
+  height: 35%;
+  min-height: 400px;
+  max-height: 400px;
+  bottom: 105%;
+  background: var(--color-secondary);
+  border: 1px solid #e6e6e6;
+  border-radius: 10px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  padding: 0;
+`;
+
+const EmojiPickerWrapper = styled.div`
+  .emoji-picker {
+    background: none;
+    border: none;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
+    gap: 8px;
+  }
+
+  .emoji {
+    font-size: 1.2rem;
+    padding: 5px;
+    cursor: pointer;
+    border-radius: 5px;
+
+    &:hover {
+      background: #f0f0f0;
+    }
+  }
+`;
+
+interface EmojiPickerItemProps {
+  setInputText: React.Dispatch<React.SetStateAction<string>>;
+}
+
+export default function EmojiPickerItem({
+  setInputText,
+}: EmojiPickerItemProps) {
+  const currentTheme = useAppSelector((state) => state.theme.value);
+
+  const handleEmojiClicked = (emojiData: EmojiClickData) => {
+    setInputText((text) => text + emojiData.emoji);
+  };
+
+  return (
+    <StyledEmojiPickerContainer>
+      <EmojiPickerWrapper>
+        <EmojiPicker
+          width="100%"
+          theme={
+            currentTheme === Theme.DARK ? emojitheme.DARK : emojitheme.LIGHT
+          }
+          onEmojiClick={handleEmojiClicked}
+        />
+      </EmojiPickerWrapper>
+    </StyledEmojiPickerContainer>
+  );
+}
diff --git a/app/src/features/chats/emojies/GridPicker.tsx b/app/src/features/chats/emojies/GridPicker.tsx
new file mode 100644
index 00000000..99fc3fbc
--- /dev/null
+++ b/app/src/features/chats/emojies/GridPicker.tsx
@@ -0,0 +1,42 @@
+import styled from "styled-components";
+import PickerItem from "./PickerItem";
+
+interface PickerProps {
+  onItemSelect: (url: string) => void;
+  onMount: () => any;
+}
+
+const Grid = styled.ul`
+  display: grid;
+  grid-template-columns: repeat(3, 90px);
+  gap: 2px;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  list-style: none;
+
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    display: block;
+    width: 0.4rem;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--scrollbar-color);
+    border-radius: 1rem;
+  }
+`;
+
+const GridPicker = (props: PickerProps) => {
+  const { onItemSelect, onMount } = props;
+  const { data: displayedItems } = onMount();
+  return (
+    <Grid>
+      {displayedItems?.map((element, index: number) => (
+        <PickerItem key={index} onItemSelect={onItemSelect} {...element} />
+      ))}
+    </Grid>
+  );
+};
+
+export default GridPicker;
diff --git a/app/src/features/chats/emojies/Picker.tsx b/app/src/features/chats/emojies/Picker.tsx
new file mode 100644
index 00000000..f081af2f
--- /dev/null
+++ b/app/src/features/chats/emojies/Picker.tsx
@@ -0,0 +1,140 @@
+import { useContext, useState } from "react";
+import { useAppSelector } from "@hooks/useGlobalState";
+import { Theme } from "@state/theme/theme";
+import EmojiPicker, {
+  EmojiClickData,
+  Theme as emojitheme,
+} from "emoji-picker-react";
+import styled from "styled-components";
+import { getIcon } from "@data/icons";
+import { StickerTap } from "types/messages";
+import GridPicker from "./GridPicker";
+import { useStickers } from "../hooks/useStickers";
+import { useGifs } from "../hooks/useGIFS";
+import { ChatInputContext } from "../ChatBox";
+const Container = styled.div`
+  z-index: 4;
+  position: absolute;
+  width: 30%;
+  min-width: 300px;
+  height: 50%;
+  min-height: 500px;
+  max-height: 600px;
+  bottom: 105%;
+  background: var(--color-background);
+  border: 1px solid #e6e6e6;
+  border-radius: 10px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  padding: 0;
+`;
+
+const TabBar = styled.div`
+  display: flex;
+  justify-content: space-around;
+  border-bottom: 1px solid #e6e6e6;
+  background: var(--color-secondary);
+`;
+
+const Tab = styled.button<{ $active: boolean }>`
+  flex: 1;
+  padding: 10px;
+  font-size: 1rem;
+  background: ${({ $active }) =>
+    $active ? "var(--color-item-active)" : "var(--color-background)"};
+  border: none;
+  cursor: pointer;
+  color: var(--color-primary);
+  font-weight: ${({ $active }) => ($active ? "bold" : "normal")};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  &:hover {
+    background: var(--color-item-active);
+  }
+`;
+
+const EmojiWrapper = styled.div`
+  height: 90%;
+  .emoji-picker {
+    background: none;
+    border: none;
+  }
+  .epr-body {
+    &::-webkit-scrollbar {
+      display: block;
+      width: 0.4rem;
+    }
+    &::-webkit-scrollbar-thumb {
+      background-color: var(--scrollbar-color);
+      border-radius: 1rem;
+    }
+  }
+`;
+
+function Picker() {
+  const currentTheme = useAppSelector((state) => state.theme.value);
+  const [activeTab, setActiveTab] = useState<StickerTap>(StickerTap.gif);
+
+  const { setInput, sendGIF, sendSticker } = useContext(ChatInputContext);
+
+  const handleEmojiClicked = (emojiData: EmojiClickData) => {
+    setInput((text: string) => text + emojiData.emoji);
+  };
+
+  const handleGIFSelect = (gifUrl: string) => {
+    sendGIF(gifUrl);
+  };
+
+  const handleStickerSelect = (stickerUrl: string) => {
+    sendSticker(stickerUrl);
+  };
+
+  return (
+    <Container>
+      <TabBar>
+        <Tab
+          $active={activeTab === StickerTap.emoji}
+          onClick={() => setActiveTab(StickerTap.emoji)}
+        >
+          {getIcon("EmojiBox", { fontSize: "small" })}
+        </Tab>
+        <Tab
+          $active={activeTab === StickerTap.gif}
+          onClick={() => setActiveTab(StickerTap.gif)}
+        >
+          {getIcon("GifBox", { fontSize: "small" })}
+        </Tab>
+        <Tab
+          $active={activeTab === StickerTap.sticker}
+          onClick={() => setActiveTab(StickerTap.sticker)}
+        >
+          {getIcon("StickerBox", { fontSize: "small" })}
+        </Tab>
+      </TabBar>
+      <EmojiWrapper>
+        {activeTab === StickerTap.emoji && (
+          <EmojiPicker
+            width="100%"
+            theme={
+              currentTheme === Theme.DARK ? emojitheme.DARK : emojitheme.LIGHT
+            }
+            onEmojiClick={handleEmojiClicked}
+            lazyLoadEmojis={true}
+          />
+        )}
+        {activeTab === StickerTap.gif && (
+          <GridPicker onItemSelect={handleGIFSelect} onMount={useGifs} />
+        )}
+        {activeTab === StickerTap.sticker && (
+          <GridPicker
+            onItemSelect={handleStickerSelect}
+            onMount={useStickers}
+          />
+        )}
+      </EmojiWrapper>
+    </Container>
+  );
+}
+
+export default Picker;
diff --git a/app/src/features/chats/emojies/PickerItem.tsx b/app/src/features/chats/emojies/PickerItem.tsx
new file mode 100644
index 00000000..209e5901
--- /dev/null
+++ b/app/src/features/chats/emojies/PickerItem.tsx
@@ -0,0 +1,45 @@
+import styled from "styled-components";
+import { useInView } from "react-intersection-observer";
+import SpinnerMini from "@components/SpinnerMini";
+interface PickerItemProps {
+  id: string;
+  title: string;
+  url: string;
+  onItemSelect: (url: string) => void;
+}
+
+const StyledPickerItem = styled.img`
+  width: 90px;
+  height: 90px;
+  object-fit: fill;
+  cursor: pointer;
+  &:hover {
+    background-color: var(--color-icon-secondary);
+    border-radius: 0.5rem;
+  }
+`;
+const ItemWrapper = styled.li`
+  cursor: pointer;
+  width: 90px;
+  height: 90px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+function PickerItem(props: PickerItemProps) {
+  const { id, title, url, onItemSelect } = props;
+  const { ref, inView } = useInView({ triggerOnce: true });
+
+  return (
+    <ItemWrapper ref={ref} onClick={() => onItemSelect(url)}>
+      {inView ? (
+        <StyledPickerItem id={id} title={title} src={url} />
+      ) : (
+        <SpinnerMini />
+      )}
+    </ItemWrapper>
+  );
+}
+
+export default PickerItem;
diff --git a/app/src/features/chats/emojies/Viewer.tsx b/app/src/features/chats/emojies/Viewer.tsx
new file mode 100644
index 00000000..5709798f
--- /dev/null
+++ b/app/src/features/chats/emojies/Viewer.tsx
@@ -0,0 +1,21 @@
+import styled from "styled-components";
+
+interface ViewerProps {
+  contentType: string;
+  id: string;
+  url: string;
+  title: string;
+}
+const Gif = styled.img`
+  width: 120px;
+  height: 120px;
+  object-fit: fill;
+`;
+
+function Viewer(props: ViewerProps) {
+  const { id, url, title } = props;
+
+  return <Gif id={id} src={url} alt={title} loading="lazy" />;
+}
+
+export default Viewer;
diff --git a/app/src/features/chats/hooks/useActiveMessage.ts b/app/src/features/chats/hooks/useActiveMessage.ts
new file mode 100644
index 00000000..5ce756c5
--- /dev/null
+++ b/app/src/features/chats/hooks/useActiveMessage.ts
@@ -0,0 +1,14 @@
+import { useAppSelector } from "@hooks/useGlobalState";
+import { useEffect } from "react";
+
+function useActiveMessage({ setInput }: { setInput: (value: string) => void }) {
+  const activeMessage = useAppSelector((state) => state.activeMessage);
+  useEffect(() => {
+    if (activeMessage.state === "edit" && activeMessage?.content)
+      setInput(activeMessage?.content);
+  }, [activeMessage]);
+
+  return { activeMessage };
+}
+
+export default useActiveMessage;
diff --git a/app/src/features/chats/hooks/useChat.ts b/app/src/features/chats/hooks/useChat.ts
index 6a920858..38553bcb 100644
--- a/app/src/features/chats/hooks/useChat.ts
+++ b/app/src/features/chats/hooks/useChat.ts
@@ -2,12 +2,12 @@ import { useParams } from "react-router-dom";
 import { useQuery } from "@tanstack/react-query";
 
 import { getChatApi } from "../services/apiGetChats";
-import { Chat } from "@mocks/data/Chats";
+import { DetailedChatInterface } from "@state/messages/chats";
 
 export function useChat() {
   const { chatId } = useParams<{ chatId: string }>();
 
-  const { data: chat, isPending } = useQuery<Chat>({
+  const { data: chat, isPending } = useQuery<DetailedChatInterface>({
     queryKey: ["current-chat", chatId!],
     queryFn: () => getChatApi(chatId!),
   });
diff --git a/app/src/features/chats/hooks/useChatInput.ts b/app/src/features/chats/hooks/useChatInput.ts
new file mode 100644
index 00000000..3cec2f65
--- /dev/null
+++ b/app/src/features/chats/hooks/useChatInput.ts
@@ -0,0 +1,65 @@
+import { clearActiveMessage } from "@state/messages/activeMessage";
+import { useState } from "react";
+import { RecordingStates } from "../audio/VoiceRecorder";
+import { useMessageSender } from "./useMessageSender";
+import { useAppDispatch } from "@hooks/useGlobalState";
+import { useParams } from "react-router-dom";
+
+function useChatInput() {
+  const { chatId } = useParams<{ chatId: string }>();
+
+  const [input, setInput] = useState<string>("");
+  const [file, setFile] = useState<File | null>(null);
+  const [isFilePreviewOpen, setIsFilePreviewOpen] = useState(false);
+  const [isRecording, setIsRecording] = useState<RecordingStates>("idle");
+  const [error, setError] = useState<string>("");
+
+  const [isEmojiSelectorOpen, setIsEmojiSelectorOpen] = useState(false);
+  const { handleSendMessage } = useMessageSender();
+  const dispatch = useAppDispatch();
+
+  const sendGIF = (gif: string) => {
+    handleSendMessage("", chatId, gif, "GIF");
+    setIsEmojiSelectorOpen(false);
+  };
+
+  const sendSticker = (sticker: string) => {
+    handleSendMessage("", chatId, sticker, "sticker");
+    setIsEmojiSelectorOpen(false);
+  };
+
+  const handleSubmit = (e: Event) => {
+    e.preventDefault();
+    setIsEmojiSelectorOpen(false);
+    if (isRecording !== "idle") return;
+    handleSendMessage(input, chatId);
+    dispatch(clearActiveMessage());
+    setInput("");
+  };
+
+  function handleCloseFilePreview() {
+    setFile(null);
+    setIsFilePreviewOpen(false);
+  }
+
+  return {
+    input,
+    setInput,
+    file,
+    setFile,
+    isFilePreviewOpen,
+    setIsFilePreviewOpen,
+    isRecording,
+    setIsRecording,
+    error,
+    setError,
+    isEmojiSelectorOpen,
+    setIsEmojiSelectorOpen,
+    sendGIF,
+    sendSticker,
+    handleSubmit,
+    handleCloseFilePreview
+  };
+}
+
+export default useChatInput;
diff --git a/app/src/features/chats/hooks/useChatMembers.ts b/app/src/features/chats/hooks/useChatMembers.ts
new file mode 100644
index 00000000..07dc1ed9
--- /dev/null
+++ b/app/src/features/chats/hooks/useChatMembers.ts
@@ -0,0 +1,16 @@
+import { useAppSelector } from "@hooks/useGlobalState";
+import { ChatMember, Member } from "@mocks/data/chats";
+
+export function useChatMembers(memberIDs?: ChatMember[]): Member[] {
+  const user = useAppSelector((state) => state.user.userInfo);
+  const members = useAppSelector((state) => state.chats.members);
+  if (!memberIDs || !members) return [];
+
+  return memberIDs
+    .filter((memberID) => memberID._id !== user.id) // Exclude the specific ID
+    .map((filteredID) =>
+      members.find((member) => member._id === filteredID._id)
+    )
+    .filter((member): member is Member => member !== undefined); // Ensure no undefined values
+    
+}
diff --git a/app/src/features/chats/hooks/useChats.ts b/app/src/features/chats/hooks/useChats.ts
index 02ab61ff..335f5b0d 100644
--- a/app/src/features/chats/hooks/useChats.ts
+++ b/app/src/features/chats/hooks/useChats.ts
@@ -1,12 +1,92 @@
 import { useQuery } from "@tanstack/react-query";
 import { getAllChatsApi } from "../services/apiGetChats";
-import { Chat } from "@mocks/data/Chats";
+import { ChatDataType } from "@mocks/data/chats";
+import {
+  ChatsState,
+  DetailedChatInterface,
+  setAllChats,
+} from "@state/messages/chats";
+import { parseChatsToState } from "../utils/helpers";
+import { useAppDispatch, useAppSelector } from "@hooks/useGlobalState";
+import { useEffect } from "react";
+import { useBlock } from "@features/privacy-settings/hooks/useBlock";
+import { useEncryptDecrypt } from "./useEncryptDecrypt";
 
 export function useChats() {
-  const { data: chats, isPending } = useQuery<Chat[]>({
+  const { data: chatData, isPending } = useQuery<ChatDataType>({
     queryKey: ["chats"],
     queryFn: getAllChatsApi,
   });
+  const dispatch = useAppDispatch();
 
-  return { chats, isPending };
+  const { blockList } = useBlock();
+  const { decrypt } = useEncryptDecrypt();
+  const userId = useAppSelector((state) => state.user.userInfo.id);
+
+  let DecryptedChats: DetailedChatInterface[] = [];
+
+  useEffect(() => {
+    const processMessages = async ({ chats, members }: ChatsState) => {
+      if (!chats) return;
+      await Promise.all(
+        chats.map(async (chat) => {
+          if (chat.type === "private") {
+            const decryptedMsg = await decrypt({
+              message: chat.lastMessage?.content!,
+              key: chat?.encryptionKey!,
+              iv: chat?.initializationVector!,
+            });
+
+            const otherUserId = chat.members.filter(
+              (member) => member._id !== userId
+            )[0]._id;
+
+            const otherUserFullData = members.find(
+              (member) => member._id === otherUserId
+            );
+
+            return {
+              ...chat,
+              lastMessage: {
+                ...chat.lastMessage,
+                content:
+                  typeof decryptedMsg === "string"
+                    ? decryptedMsg
+                    : chat.lastMessage?.content!,
+              },
+              name:
+                otherUserFullData?.screenFirstName +
+                " " +
+                otherUserFullData?.screenLastName,
+              photo: otherUserFullData?.photo!,
+            };
+          } else {
+            return chat;
+          }
+        })
+      ).then((decryptedMessagesArray) => {
+        DecryptedChats = decryptedMessagesArray as DetailedChatInterface[];
+      });
+    };
+
+    const initialChatState: ChatsState = {
+      chats: parseChatsToState(chatData),
+      members: chatData?.members || [],
+    };
+
+    processMessages(initialChatState).then(() => {
+      dispatch(
+        setAllChats({
+          chatsData: {
+            chats: DecryptedChats,
+            members: initialChatState.members,
+          },
+          blockList,
+          userId,
+        })
+      );
+    });
+  }, [isPending, chatData, dispatch]);
+
+  return { isPending };
 }
diff --git a/app/src/features/chats/hooks/useDeleteMessage.ts b/app/src/features/chats/hooks/useDeleteMessage.ts
new file mode 100644
index 00000000..9cea587a
--- /dev/null
+++ b/app/src/features/chats/hooks/useDeleteMessage.ts
@@ -0,0 +1,11 @@
+import { useSocket } from "@hooks/useSocket";
+
+export const useDeleteMessage = () => {
+  const { deleteMessage } = useSocket();
+
+  const handleDeleteMessage = (messageId: string, chatId: string) => {
+    deleteMessage({ messageId, chatId });
+  };
+
+  return { handleDeleteMessage };
+};
diff --git a/app/src/features/chats/hooks/useEncryptDecrypt.ts b/app/src/features/chats/hooks/useEncryptDecrypt.ts
new file mode 100644
index 00000000..7e8cd1dc
--- /dev/null
+++ b/app/src/features/chats/hooks/useEncryptDecrypt.ts
@@ -0,0 +1,31 @@
+import { decryptMessage, encryptMessage } from "../utils/helpers";
+
+export const useEncryptDecrypt = () => {
+  const decrypt = async (data: {
+    message: string;
+    key: string;
+    iv: string;
+  }) => {
+    const { message, key, iv } = data;
+    return await decryptMessage({
+      encryptedMessageHex: message,
+      keyHex: key,
+      ivHex: iv,
+    });
+  };
+
+  const encrypt = async (data: {
+    message: string;
+    key: string;
+    iv: string;
+  }) => {
+    const { message, key, iv } = data;
+    return await encryptMessage({
+      message: message,
+      keyHex: key,
+      ivHex: iv,
+    });
+  };
+
+  return { decrypt, encrypt };
+};
diff --git a/app/src/features/chats/hooks/useFetchNextPage.ts b/app/src/features/chats/hooks/useFetchNextPage.ts
new file mode 100644
index 00000000..b54d6d0c
--- /dev/null
+++ b/app/src/features/chats/hooks/useFetchNextPage.ts
@@ -0,0 +1,89 @@
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { useParams } from "react-router-dom";
+import { apiFetchNextPage } from "../services/apiFetchNextPage";
+import { useEffect } from "react";
+import { mergeMessages } from "@state/messages/chats";
+import { MessageInterface } from "types/messages";
+import { useAppDispatch, useAppSelector } from "@hooks/useGlobalState";
+import { useEncryptDecrypt } from "./useEncryptDecrypt";
+import { getChatByID } from "../utils/helpers";
+
+function useFetchNextPage() {
+  const { chatId } = useParams<{ chatId: string }>();
+  const dispatch = useAppDispatch();
+  const chats = useAppSelector((state) => state.chats.chats);
+  const chat = getChatByID({ chats, chatID: chatId! });
+  const {
+    data,
+    fetchNextPage,
+    fetchPreviousPage,
+    hasNextPage,
+    hasPreviousPage,
+    isFetchingNextPage,
+    isFetchingPreviousPage,
+  } = useInfiniteQuery({
+    queryKey: chatId ? [`chat-${chatId}-pages`] : [],
+    queryFn: ({ pageParam }) =>
+      apiFetchNextPage({ chatId: chatId!, pageParam }),
+    getNextPageParam: (lastPage) => lastPage?.nextPage,
+    enabled: !!chatId,
+    initialPageParam: 0,
+  });
+
+  const { decrypt } = useEncryptDecrypt();
+
+  let decryptedMessages: MessageInterface[] = [];
+
+  useEffect(() => {
+    const processMessages = async (messages: MessageInterface[]) => {
+      await Promise.all(
+        messages.map(async (msg: MessageInterface) => {
+          const decryptedMsg = await decrypt({
+            message: msg.content,
+            key: chat?.encryptionKey!,
+            iv: chat?.initializationVector!,
+          });
+
+          return {
+            ...msg,
+            content:
+              typeof decryptedMsg === "string" ? decryptedMsg : msg.content,
+          };
+        })
+      ).then((decryptedMessagesArray) => {
+        decryptedMessages = decryptedMessagesArray;
+      });
+    };
+
+    if (data) {
+      const lastFetchedPage = data.pages[data.pages.length - 1];
+      lastFetchedPage.messages.forEach((element: any) => {
+        element.isMention = false;
+        element.isSeen = false;
+      });
+
+      if (lastFetchedPage && chatId) {
+        processMessages(lastFetchedPage.messages).then(() => {
+          dispatch(
+            mergeMessages({
+              chatId: chatId,
+              newMessages: decryptedMessages,
+            })
+          );
+        });
+      }
+    }
+  }, [data, chatId, dispatch, chats.length]);
+
+  return {
+    data,
+    fetchNextPage,
+    fetchPreviousPage,
+    hasNextPage,
+    hasPreviousPage,
+    isFetchingNextPage,
+    isFetchingPreviousPage,
+  };
+}
+
+export { useFetchNextPage };
diff --git a/app/src/features/chats/hooks/useGIFS.ts b/app/src/features/chats/hooks/useGIFS.ts
new file mode 100644
index 00000000..f1b20896
--- /dev/null
+++ b/app/src/features/chats/hooks/useGIFS.ts
@@ -0,0 +1,13 @@
+import { useQuery } from "@tanstack/react-query";
+import { getGifs as getGifsAPI } from "../services/apiGetGIFS";
+
+function useGifs() {
+  const { data, error, isLoading } = useQuery({
+    queryKey: ["gifs"],
+    queryFn: () => getGifsAPI(),
+  });
+
+  return { data, error, isLoading };
+}
+
+export { useGifs };
diff --git a/app/src/features/chats/hooks/useHover.ts b/app/src/features/chats/hooks/useHover.ts
new file mode 100644
index 00000000..afb8f78c
--- /dev/null
+++ b/app/src/features/chats/hooks/useHover.ts
@@ -0,0 +1,18 @@
+import { useState } from "react";
+
+function useHover() {
+  const [isHovered, setIsHovered] = useState(false);
+
+  function handleMouseLeave() {
+    setIsHovered(false);
+  }
+
+  function handleOpenList(e: React.MouseEvent<HTMLDivElement>) {
+    e.preventDefault();
+    setIsHovered(true);
+  }
+
+  return { isHovered, handleMouseLeave, handleOpenList };
+}
+
+export default useHover;
diff --git a/app/src/features/chats/hooks/useMentionList.ts b/app/src/features/chats/hooks/useMentionList.ts
new file mode 100644
index 00000000..165aa557
--- /dev/null
+++ b/app/src/features/chats/hooks/useMentionList.ts
@@ -0,0 +1,20 @@
+import { useAppSelector } from "@hooks/useGlobalState";
+import { useParams } from "react-router-dom";
+import { getChatByID } from "../utils/helpers";
+import { useChatMembers } from "./useChatMembers";
+
+function useMentionList() {
+  const { chatId } = useParams<{ chatId: string }>();
+  const chats = useAppSelector((state) => state.chats.chats);
+  const chat = getChatByID({ chats: chats, chatID: chatId! });
+
+  const chatMembers = useChatMembers(chat?.members);
+  const filteredMembers = chatMembers.map((member) => ({
+    id: member.username,
+    display: `${member.screenFirstName} ${member.screenLastName}`,
+  }));
+
+  return { filteredMembers };
+}
+
+export default useMentionList;
diff --git a/app/src/features/chats/hooks/useMessageSender.ts b/app/src/features/chats/hooks/useMessageSender.ts
new file mode 100644
index 00000000..1407ae01
--- /dev/null
+++ b/app/src/features/chats/hooks/useMessageSender.ts
@@ -0,0 +1,77 @@
+import { useAppSelector } from "@hooks/useGlobalState";
+import { ContentType, MessageInterface, MessageStatus } from "types/messages";
+import { useSocket } from "@hooks/useSocket";
+import { useEncryptDecrypt } from "./useEncryptDecrypt";
+import { getChatByID } from "../utils/helpers";
+import { getFileType } from "@utils/helpers";
+
+export const useMessageSender = () => {
+  const { sendMessage, editMessage } = useSocket();
+  const userId = useAppSelector((state) => state.user.userInfo.id);
+  const activeMessage = useAppSelector((state) => state.activeMessage);
+  const { activeThread } = useAppSelector((state) => state.channelsThreads);
+
+  const { encrypt } = useEncryptDecrypt();
+  const chats = useAppSelector((state) => state.chats.chats);
+
+  const handleSendMessage = async (
+    data: string,
+    chatId?: string,
+    file?: string,
+    type: ContentType = "text"
+  ) => {
+    const chat = getChatByID({ chats, chatID: chatId as string });
+
+    const encrypedMessage = await encrypt({
+      message: data,
+      key: chat?.encryptionKey as string,
+      iv: chat?.initializationVector as string
+    });
+
+    if (activeMessage?.id && activeMessage.state === "edit") {
+      editMessage(activeMessage?.id, data, chatId!);
+      return;
+    }
+
+    const isReply = activeMessage.state === "reply";
+    const isEncryptedContent =
+      chat?.type === "private" && typeof encrypedMessage === "string";
+
+    type = getFileType(file, isEncryptedContent ? encrypedMessage : data);
+
+    if (encrypedMessage || file) {
+      const message: MessageInterface = {
+        _id: "",
+        timestamp: new Date().toISOString(),
+        content: isEncryptedContent ? encrypedMessage : data,
+        contentType: type,
+        isPinned: false,
+        isForward: false,
+        isAnnouncement: false,
+        isAppropriate: true,
+        senderId: userId,
+        chatId: chatId!,
+        parentMessageId: isReply ? activeMessage.id : null,
+        isReply,
+        status: MessageStatus.sent,
+        media: file,
+        threadMessages: [],
+        isMention: false,
+        isSeen: false,
+      };
+
+      const threadMessage = {
+        ...message,
+        parentMessageId: activeThread,
+        isReply: true,
+        chatType: "channel"
+      };
+
+      const messageToSend = activeThread ? threadMessage : message;
+
+      sendMessage({ ...messageToSend, chatType: chat?.type || "private" });
+    }
+  };
+
+  return { handleSendMessage };
+};
diff --git a/app/src/features/chats/hooks/useOptionListAction.ts b/app/src/features/chats/hooks/useOptionListAction.ts
new file mode 100644
index 00000000..52b71450
--- /dev/null
+++ b/app/src/features/chats/hooks/useOptionListAction.ts
@@ -0,0 +1,43 @@
+import { useAppDispatch } from "@hooks/useGlobalState";
+import { setActiveMessage } from "@state/messages/activeMessage";
+
+function useOptionListAction({
+  id,
+  content,
+  parentMessageId,
+}: {
+  id: string;
+  content: string;
+  parentMessageId: string | null;
+}) {
+  const dispatch = useAppDispatch();
+  function handleEditMessage() {
+    dispatch(setActiveMessage({ id, content, state: "edit" }));
+  }
+
+  function handleReply() {
+    dispatch(setActiveMessage({ id, content, state: "reply" }));
+  }
+
+  function MoveToReplyMessage() {
+    const targetMsg = document.querySelector(
+      "[data-message-id='" + parentMessageId + "']",
+    );
+
+    if (targetMsg) {
+      targetMsg.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+      });
+
+      targetMsg.classList.add("highlight");
+
+      setTimeout(() => {
+        targetMsg.classList.remove("highlight");
+      }, 2000);
+    }
+  }
+  return { handleEditMessage, handleReply, MoveToReplyMessage };
+}
+
+export default useOptionListAction;
diff --git a/app/src/features/chats/hooks/useScrollToLastMsg.ts b/app/src/features/chats/hooks/useScrollToLastMsg.ts
new file mode 100644
index 00000000..0582c74a
--- /dev/null
+++ b/app/src/features/chats/hooks/useScrollToLastMsg.ts
@@ -0,0 +1,15 @@
+import { useAppSelector } from "@hooks/useGlobalState";
+import { useEffect, useRef } from "react";
+
+function useScrollToLastMsg() {
+  const lastMessageRef = useRef<HTMLDivElement>(null);
+  const messages = useAppSelector((state) => state.chats.chats[0].messages);
+
+  useEffect(() => {
+    lastMessageRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+
+  return { lastMessageRef };
+}
+
+export default useScrollToLastMsg;
diff --git a/app/src/features/chats/hooks/useSelectedMessages.ts b/app/src/features/chats/hooks/useSelectedMessages.ts
new file mode 100644
index 00000000..7c84537e
--- /dev/null
+++ b/app/src/features/chats/hooks/useSelectedMessages.ts
@@ -0,0 +1,13 @@
+import { useAppSelector } from "@hooks/useGlobalState";
+import { getChatByID } from "../utils/helpers";
+
+function useSelectedMessages({ chatId }: { chatId?: string }) {
+  const chats = useAppSelector((state) => state.chats.chats);
+  const chat = chatId ? getChatByID({ chatID: chatId, chats }) : undefined;
+
+  const selectedMessages = chat?.selectedMessages;
+
+  return { selectedMessages };
+}
+
+export { useSelectedMessages };
diff --git a/app/src/features/chats/hooks/useStickers.ts b/app/src/features/chats/hooks/useStickers.ts
new file mode 100644
index 00000000..4923c3db
--- /dev/null
+++ b/app/src/features/chats/hooks/useStickers.ts
@@ -0,0 +1,13 @@
+import { useQuery } from "@tanstack/react-query";
+import { getStickers as getStickersAPI } from "../services/apiGetStickers";
+
+function useStickers() {
+  const { data, error, isLoading } = useQuery({
+    queryKey: ["stickers"],
+    queryFn: () => getStickersAPI(),
+  });
+
+  return { data, error, isLoading };
+}
+
+export { useStickers };
diff --git a/app/src/features/chats/hooks/useTraverseMentions.ts b/app/src/features/chats/hooks/useTraverseMentions.ts
new file mode 100644
index 00000000..6d82c138
--- /dev/null
+++ b/app/src/features/chats/hooks/useTraverseMentions.ts
@@ -0,0 +1,80 @@
+import { useParams } from "react-router-dom";
+import { useAppDispatch, useAppSelector } from "@hooks/useGlobalState";
+import { getChatByID } from "../utils/helpers";
+import { useEffect, useMemo, useState } from "react";
+import { MessageInterface } from "types/messages";
+import { setIsMention, setIsSeen } from "@state/messages/chats";
+
+function useTraversalMentions() {
+  const { chatId } = useParams<{ chatId: string }>();
+  const chats = useAppSelector((state) => state.chats.chats);
+  const chat = getChatByID({ chats: chats, chatID: chatId! });
+  const chatMessages = chat?.messages;
+  const mentionRegex = /@\[[^\]]+\]\(([^)]+)\)/g;
+
+  const user = useAppSelector((state) => state.user.userInfo);
+  const dispatch = useAppDispatch();
+
+  const [mentionMessages, setMentionMessages] = useState<MessageInterface[]>(
+    []
+  );
+
+  const [currentMentionIndex, setCurrentMentionIndex] = useState(0);
+
+  const currentMentionMessage = useMemo(() => {
+    return mentionMessages[currentMentionIndex];
+  }, [mentionMessages, currentMentionIndex]);
+
+  useEffect(() => {
+    if (chatMessages) {
+      const mentions = chatMessages.filter(
+        (message) => message.isMention && !message.isSeen
+      );
+
+      const userMentions = mentions
+        .filter((mention) => {
+          const match = mentionRegex.exec(mention.content);
+          return match?.[1] === user.username;
+        })
+        .map((mention) => mention._id);
+
+      const filteredMentions = mentions.filter((mention) =>
+        userMentions.includes(mention._id)
+      );
+
+      setMentionMessages(filteredMentions);
+    }
+  }, [chatMessages]);
+
+  const handleNextMentionMessage = () => {
+    if (mentionMessages.length > 0) {
+      setCurrentMentionIndex(
+        (prevIndex) => (prevIndex + 1) % mentionMessages.length
+      );
+      document
+        .querySelector("[data-message-id='" + currentMentionMessage?._id + "']")
+        ?.scrollIntoView({
+          behavior: "smooth",
+          block: "center",
+        });
+      const updatedMessages = [...mentionMessages];
+      updatedMessages.splice(currentMentionIndex, 1);
+      setIsMention({
+        chatId: chatId!,
+        isMention: false,
+        messageId: currentMentionMessage._id,
+      });
+      setMentionMessages(updatedMessages);
+      dispatch(
+        setIsSeen({
+          chatId: chatId!,
+          messageId: currentMentionMessage._id,
+          isSeen: true,
+        })
+      );
+    }
+  };
+  return { handleNextMentionMessage, mentionMessages };
+}
+
+export default useTraversalMentions;
diff --git a/app/src/features/chats/media/FileDetailsBanner.tsx b/app/src/features/chats/media/FileDetailsBanner.tsx
new file mode 100644
index 00000000..9053f9ba
--- /dev/null
+++ b/app/src/features/chats/media/FileDetailsBanner.tsx
@@ -0,0 +1,50 @@
+import React from "react";
+import styled from "styled-components";
+
+const BannerContainer = styled.div`
+  width: 100%;
+  height: 35%;
+  padding: 8px 16px;
+  margin: 8px 0;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  font-size: 0.9rem;
+  color: var(--color-text);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const FileName = styled.span`
+  font-weight: bold;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 70%;
+`;
+
+const FileSize = styled.span`
+  font-size: 0.85rem;
+  color: #666;
+`;
+
+interface FileDetailsBannerProps {
+  file: File;
+}
+
+function formatFileSize(size: number): string {
+  if (size < 1024) return `${size} B`;
+  if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`;
+  return `${(size / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+const FileDetailsBanner: React.FC<FileDetailsBannerProps> = ({ file }) => {
+  return (
+    <BannerContainer>
+      <FileName title={file.name}>{file.name}</FileName>
+      <FileSize>Size: {formatFileSize(file.size)}</FileSize>
+    </BannerContainer>
+  );
+};
+
+export default FileDetailsBanner;
diff --git a/app/src/features/chats/media/FilePreviewItem.tsx b/app/src/features/chats/media/FilePreviewItem.tsx
new file mode 100644
index 00000000..fbde2cce
--- /dev/null
+++ b/app/src/features/chats/media/FilePreviewItem.tsx
@@ -0,0 +1,109 @@
+import styled from "styled-components";
+import FileViewer from "./FileViewer";
+import Modal from "@components/Modal";
+import ExpandingTextArea from "@components/ExpandingTextArea";
+import Button from "@components/Button";
+import { useContext, useState } from "react";
+import FileDetailsBanner from "./FileDetailsBanner";
+import { useUploadMedia } from "./hooks/useUploadMedia";
+import { useMessageSender } from "../hooks/useMessageSender";
+import { ChatInputContext } from "../ChatBox";
+
+const FileViewerContainer = styled.div`
+  z-index: 7;
+  min-width: fit-content;
+  height: fit-content;
+  max-width: 200px;
+  max-height: 200px;
+  padding: 4px;
+  background: var(--color-secondary);
+  border: 1px solid #e6e6e6;
+  border-radius: 10px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const InputWrapper = styled.div`
+  display: flex;
+  align-items: flex-end;
+  gap: 1rem;
+  padding: 4px;
+  position: relative;
+  flex: 1;
+`;
+
+const StyledBackground = styled.div`
+  border: 1px solid var(--color-text-secondary);
+  background-color: var(--color-background);
+  border-radius: 5px;
+  padding: 0.25rem;
+  width: calc(100% - 5.6rem);
+  height: 2.5rem;
+  & > textarea {
+    width: 100%;
+  }
+`;
+
+function FilePreviewItem({ chatId }: { chatId: string | undefined }) {
+  const [caption, setCaption] = useState("");
+  const { mutate: uploadFile, isPending } = useUploadMedia();
+
+  const { file, handleCloseFilePreview, setFile } =
+    useContext(ChatInputContext);
+  const { handleSendMessage } = useMessageSender();
+
+  const handleSendFile = async () => {
+    if (!file) {
+      console.error("No file selected to send.");
+      return;
+    }
+
+    try {
+      uploadFile(file, {
+        onSuccess: (url) => {
+          console.log("File uploaded successfully:", url);
+          handleSendMessage(caption, chatId, url);
+          setCaption("");
+        },
+        onError: (error) => {
+          console.error("Error uploading file:", error);
+          alert("Failed to upload the file. Please try again.");
+        },
+        onSettled: () => {
+          setFile(null);
+        }
+      });
+    } catch (error) {
+      console.error("Unexpected error while sending file:", error);
+      alert("Unexpected error occurred. Please try again.");
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={true}
+      onClose={handleCloseFilePreview}
+      title="Send File"
+      message=""
+    >
+      <FileViewerContainer>
+        <FileViewer file={file} />
+      </FileViewerContainer>
+      <FileDetailsBanner file={file} />
+      <InputWrapper>
+        <StyledBackground>
+          <ExpandingTextArea input={caption} setInput={setCaption} />
+        </StyledBackground>
+        <Button disabled={isPending} onClick={handleSendFile}>
+          {isPending ? "Sending..." : "Send"}
+        </Button>
+      </InputWrapper>
+    </Modal>
+  );
+}
+
+export default FilePreviewItem;
diff --git a/app/src/features/chats/media/FileViewer.tsx b/app/src/features/chats/media/FileViewer.tsx
new file mode 100644
index 00000000..29c3d7ab
--- /dev/null
+++ b/app/src/features/chats/media/FileViewer.tsx
@@ -0,0 +1,101 @@
+import React from "react";
+import styled from "styled-components";
+
+const ViewerContainer = styled.div`
+  padding: 4px;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #f4f4f4;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  overflow: hidden;
+`;
+
+const Message = styled.p`
+  font-size: 1rem;
+  color: #555;
+`;
+
+interface FileViewerProps {
+  file: File | string;
+}
+
+function getFileType(fileName: string): string {
+  const extension = fileName.split(".").pop()?.toLowerCase();
+  if (!extension) return "unknown";
+
+  const imageTypes = ["png", "jpg", "jpeg", "gif", "bmp", "webp"];
+  const videoTypes = ["mp4"];
+  const audioTypes = ["mp3", "wav", "webm"];
+  const pdfTypes = ["pdf"];
+
+  if (imageTypes.includes(extension)) return "image";
+  if (videoTypes.includes(extension)) return "video";
+  if (audioTypes.includes(extension)) return "audio";
+  if (pdfTypes.includes(extension)) return "pdf";
+
+  return "unknown";
+}
+
+const FileViewer: React.FC<FileViewerProps> = ({ file }) => {
+  const isFileObject = file instanceof File;
+  const fileName = isFileObject
+    ? (file as File).name
+    : (file as string).split("/").pop() || "";
+  const fileType = getFileType(fileName);
+  const fileURL = isFileObject
+    ? URL.createObjectURL(file as File)
+    : (file as string);
+
+  let renderFilePreview;
+  switch (fileType) {
+    case "image":
+      renderFilePreview = (
+        <img
+          src={fileURL}
+          alt="Preview"
+          style={{ width: "100%", height: "100%", objectFit: "contain" }}
+        />
+      );
+      break;
+
+    case "video":
+      renderFilePreview = (
+        <video controls style={{ width: "100%", height: "100%" }}>
+          <source src={fileURL} type={`video/${fileName.split(".").pop()}`} />
+          Your browser does not support the video tag.
+        </video>
+      );
+      break;
+
+    case "audio":
+      renderFilePreview = (
+        <audio controls>
+          <source src={fileURL} type={`audio/${fileName.split(".").pop()}`} />
+          Your browser does not support the audio tag.
+        </audio>
+      );
+      break;
+
+    case "pdf":
+      renderFilePreview = (
+        <iframe
+          src={fileURL}
+          style={{ width: "100%", height: "100%", border: "none" }}
+          title="PDF Preview"
+        />
+      );
+      break;
+
+    default:
+      renderFilePreview = <Message>Unsupported file type: {fileName}</Message>;
+      break;
+  }
+
+  return <ViewerContainer>{renderFilePreview}</ViewerContainer>;
+};
+
+export default FileViewer;
diff --git a/app/src/features/chats/media/MediaUploadComponent.tsx b/app/src/features/chats/media/MediaUploadComponent.tsx
new file mode 100644
index 00000000..de751702
--- /dev/null
+++ b/app/src/features/chats/media/MediaUploadComponent.tsx
@@ -0,0 +1,54 @@
+import { ChangeEvent, useRef } from "react";
+import styled from "styled-components";
+import { getIcon } from "@data/icons";
+import Icon from "@components/Icon";
+
+const InvisibleButton = styled.div`
+  all: unset;
+  display: inline-block;
+  cursor: pointer;
+`;
+interface ChildProps {
+  file: File | null;
+  setFile: (file: File) => void;
+  setIsFilePreviewOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export default function MediaUploadComponent({
+  file,
+  setFile,
+  setIsFilePreviewOpen
+}: ChildProps) {
+  const fileInput = useRef(null);
+
+  const onAddFile = async (e: ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files) {
+      console.log("file", e.target.files[0]);
+      setFile(e.target.files[0]);
+      e.target.value = "";
+    }
+
+    setIsFilePreviewOpen(true);
+  };
+
+  return (
+    <>
+      <InvisibleButton>
+        <input
+          type="file"
+          multiple={false}
+          ref={fileInput}
+          onChange={onAddFile}
+          style={{ display: "none" }}
+          data-testid="file-input"
+        />
+        <Icon
+          data-testid="upload-media-button"
+          onClick={() => fileInput.current?.click()}
+        >
+          {getIcon("Attatch")}
+        </Icon>
+      </InvisibleButton>
+    </>
+  );
+}
diff --git a/app/src/features/chats/media/hooks/useUploadMedia.tsx b/app/src/features/chats/media/hooks/useUploadMedia.tsx
new file mode 100644
index 00000000..c33afd6a
--- /dev/null
+++ b/app/src/features/chats/media/hooks/useUploadMedia.tsx
@@ -0,0 +1,21 @@
+import { useMutation } from "@tanstack/react-query";
+import { uploadFile } from "../services/uploadfileHandler";
+import toast from "react-hot-toast";
+
+export function useUploadMedia() {
+  const { mutate, isPending, error, data } = useMutation({
+    mutationFn: uploadFile,
+    onError: (error) => {
+      const errorMessage =
+        error instanceof Error ? error.message : "An unknown error occurred";
+      toast.error("Error uploading file: " + errorMessage);
+      console.error("Error uploading file:", errorMessage);
+    },
+    onSuccess: (data) => {
+      toast.success("File uploaded successfully");
+      console.log("File uploaded successfully:", data);
+    },
+  });
+
+  return { mutate, isPending, error, data };
+}
diff --git a/app/src/features/chats/media/services/uploadfileHandler.ts b/app/src/features/chats/media/services/uploadfileHandler.ts
new file mode 100644
index 00000000..94d664ec
--- /dev/null
+++ b/app/src/features/chats/media/services/uploadfileHandler.ts
@@ -0,0 +1,27 @@
+import { API_URL, STATIC_MEDIA_URL } from "@constants";
+
+export async function uploadFile(file: File | null) {
+  if (!file) {
+    throw new Error("No file provided");
+  }
+
+  const formData = new FormData();
+  formData.append("file", file);
+
+  const response = await fetch(`${API_URL}/chats/media`, {
+    method: "POST",
+    credentials: "include",
+    body: formData,
+    headers: {
+      "X-Session-Token": localStorage.getItem("sessionId") || "",
+    },
+  });
+
+  const data = await response.json();
+
+  if (!response.ok || data.status !== "success") {
+    throw new Error(data.message || "Failed to upload file");
+  }
+
+  return STATIC_MEDIA_URL + "/" + data.data?.mediaFileName || "";
+}
diff --git a/app/src/features/chats/services/apiFetchNextPage.ts b/app/src/features/chats/services/apiFetchNextPage.ts
new file mode 100644
index 00000000..a2c2fba1
--- /dev/null
+++ b/app/src/features/chats/services/apiFetchNextPage.ts
@@ -0,0 +1,31 @@
+import { API_URL } from "@constants";
+
+async function apiFetchNextPage({
+  chatId,
+  pageParam,
+}: {
+  pageParam?: number;
+  chatId: string;
+}) {
+  const res = await fetch(
+    `${API_URL}/chats/messages/${chatId}?page=${pageParam}`,
+    {
+      method: "GET",
+      credentials: "include",
+      headers: {
+        "Content-Type": "application/json",
+        "X-Session-Token": localStorage.getItem("sessionId") || "",
+      },
+    }
+  );
+
+  const data = await res.json();
+
+  if (data.status !== "success") {
+    throw new Error(data.message);
+  }
+
+  return { messages: data.data.messages, nextPage: data.data.nextPage };
+}
+
+export { apiFetchNextPage };
diff --git a/app/src/features/chats/services/apiGetChats.ts b/app/src/features/chats/services/apiGetChats.ts
index f4fe384a..a76ae842 100644
--- a/app/src/features/chats/services/apiGetChats.ts
+++ b/app/src/features/chats/services/apiGetChats.ts
@@ -5,6 +5,7 @@ export async function getAllChatsApi() {
     method: "GET",
     headers: {
       "Content-Type": "application/json",
+      "X-Session-Token": localStorage.getItem("sessionId") || "",
     },
     credentials: "include",
   });
@@ -19,19 +20,24 @@ export async function getAllChatsApi() {
 }
 
 export async function getChatApi(id: string) {
-  const res = await fetch(`${API_URL}/chat/${id}`, {
+  if (!id) return null;
+
+  const res = await fetch(`${API_URL}/chats/${id}`, {
     method: "GET",
     headers: {
       "Content-Type": "application/json",
+      "X-Session-Token": localStorage.getItem("sessionId") || "",
     },
     credentials: "include",
   });
 
   const data = await res.json();
 
+  console.log(data);
+
   if (data.status !== "success") {
     throw new Error(data.message);
   }
 
-  return data.data;
+  return data.data?.chat;
 }
diff --git a/app/src/features/chats/services/apiGetGIFS.ts b/app/src/features/chats/services/apiGetGIFS.ts
new file mode 100644
index 00000000..e16007f0
--- /dev/null
+++ b/app/src/features/chats/services/apiGetGIFS.ts
@@ -0,0 +1,6 @@
+import { gifs } from "@data/gifs";
+async function getGifs() {
+  return gifs;
+}
+
+export { getGifs };
diff --git a/app/src/features/chats/services/apiGetStickers.ts b/app/src/features/chats/services/apiGetStickers.ts
new file mode 100644
index 00000000..3f2d7e3d
--- /dev/null
+++ b/app/src/features/chats/services/apiGetStickers.ts
@@ -0,0 +1,6 @@
+import { stickers } from "@data/stickers";
+async function getStickers() {
+  return stickers;
+}
+
+export { getStickers };
diff --git a/app/src/features/chats/utils/helpers.ts b/app/src/features/chats/utils/helpers.ts
new file mode 100644
index 00000000..1308bb23
--- /dev/null
+++ b/app/src/features/chats/utils/helpers.ts
@@ -0,0 +1,156 @@
+import { DetailedChatInterface } from "@state/messages/chats";
+import { ChatMember } from "@mocks/data/chats";
+
+export function getChatByID({
+  chats,
+  chatID
+}: {
+  chats: DetailedChatInterface[];
+  chatID: string;
+}): DetailedChatInterface | undefined {
+  return chats.find((chat) => chat._id === chatID);
+}
+
+export function parseChatsToState(chatData?: any) {
+  if (!chatData) return [];
+  return chatData?.chats?.map((chat: any): DetailedChatInterface => {
+    const { chat: currChat } = chat;
+    const {
+      _id: chatId,
+      isSeen,
+      members,
+      type,
+      isDeleted,
+      numberOfMembers,
+      name,
+      encryptionKey,
+      initializationVector,
+      messagingPermission,
+      downloadingPermission,
+      privacy
+    } = currChat;
+
+    const filteredMembers = members?.map((member: any) => {
+      return {
+        _id: member.user,
+        Role: member.Role
+      } as ChatMember;
+    });
+
+    const incomingLastMessage = chatData.lastMessages.find(
+      (lastMessage: any) => lastMessage.chatId === chatId
+    )?.lastMessage;
+
+    return {
+      _id: chatId,
+      isSeen: isSeen,
+      isDeleted: isDeleted,
+      members: filteredMembers,
+      type: type,
+      name,
+      numberOfMembers: numberOfMembers,
+
+      lastMessage: {
+        _id: incomingLastMessage?.id,
+        content: incomingLastMessage?.isAppropriate
+          ? incomingLastMessage?.content
+          : "🚫️ This message has inappropriate content.",
+        senderId: incomingLastMessage?.senderId,
+        timestamp: incomingLastMessage?.timestamp,
+        contentType: incomingLastMessage?.contentType
+      },
+
+      messages: [],
+      isTyping: false,
+      showCheckBox: false,
+      selectedMessages: [],
+      isMention: false,
+      encryptionKey,
+      initializationVector,
+      messagingPermission,
+      downloadingPermission,
+      privacy
+    } as DetailedChatInterface;
+  });
+}
+
+const hexToArrayBuffer = (hex: string) => {
+  const match = hex.match(/.{1,2}/g);
+  return new Uint8Array(match ? match.map((byte) => parseInt(byte, 16)) : [])
+    .buffer;
+};
+
+const arrayBufferToHex = (buffer: ArrayBuffer) => {
+  return Array.from(new Uint8Array(buffer))
+    .map((b) => b.toString(16).padStart(2, "0"))
+    .join("");
+};
+
+export const encryptMessage = async ({
+  message,
+  keyHex,
+  ivHex
+}: {
+  message: string;
+  keyHex: string;
+  ivHex: string;
+}) => {
+  try {
+    const keyBuffer = hexToArrayBuffer(keyHex);
+    const ivBuffer = hexToArrayBuffer(ivHex);
+
+    const cryptoKey = await window.crypto.subtle.importKey(
+      "raw",
+      keyBuffer,
+      { name: "AES-CBC", length: 256 },
+      false,
+      ["encrypt"]
+    );
+
+    const messageBuffer = new TextEncoder().encode(message);
+
+    const encryptedBuffer = await window.crypto.subtle.encrypt(
+      { name: "AES-CBC", iv: ivBuffer },
+      cryptoKey,
+      messageBuffer
+    );
+
+    return arrayBufferToHex(encryptedBuffer);
+  } catch (err: any) {
+    return Error(`Decryption error: ${err.message}`);
+  }
+};
+
+export const decryptMessage = async ({
+  encryptedMessageHex,
+  keyHex,
+  ivHex
+}: {
+  encryptedMessageHex: string;
+  keyHex: string;
+  ivHex: string;
+}) => {
+  try {
+    const keyBuffer = hexToArrayBuffer(keyHex);
+    const ivBuffer = hexToArrayBuffer(ivHex);
+    const encryptedBuffer = hexToArrayBuffer(encryptedMessageHex);
+
+    const cryptoKey = await window.crypto.subtle.importKey(
+      "raw",
+      keyBuffer,
+      { name: "AES-CBC", length: 256 },
+      false,
+      ["decrypt"]
+    );
+
+    const decryptedBuffer = await window.crypto.subtle.decrypt(
+      { name: "AES-CBC", iv: ivBuffer },
+      cryptoKey,
+      encryptedBuffer
+    );
+
+    return new TextDecoder().decode(decryptedBuffer);
+  } catch (err: any) {
+    console.error(`Decryption error: ${err.message}`);
+  }
+};
diff --git a/app/src/features/devices/Devices.tsx b/app/src/features/devices/Devices.tsx
index 5eef3115..1e7f188d 100644
--- a/app/src/features/devices/Devices.tsx
+++ b/app/src/features/devices/Devices.tsx
@@ -4,8 +4,8 @@ import { useGetAllSessions } from "./hooks/useGetAllSessions";
 import { useGetCurrentSession } from "./hooks/useGetCurrentSessions";
 import SessionItem from "./components/SessionItem";
 import laptopAnimation from "@data/animations/devices.json";
-import { DoDisturbOnOutlined } from "@mui/icons-material";
 import Icon from "@components/Icon";
+import { getIcon } from "@data/icons";
 import { useLogoutOtherSessions } from "./hooks/useLogoutOtherSessions";
 
 const SideBarContainer = styled.div`
@@ -48,7 +48,7 @@ const HeaderAnimatinoContainer = styled.div`
   }
 `;
 
-const TerminateOtherSessionsButton = styled.button`
+const TerminateOtherSessionsButton = styled.div`
   color: var(--color-error);
   background-color: var(--color-background);
   font-size: 1rem;
@@ -77,17 +77,22 @@ function Devices() {
         </HeaderAnimatinoContainer>
       </SettingSection>
       <SettingSection>
-        <SectionTitle>THIS DEVICE</SectionTitle>
+        <SectionTitle data-testid="this-device-title">THIS DEVICE</SectionTitle>
         <SessionItem session={activeSession} />
-        <TerminateOtherSessionsButton onClick={handleLogoutOthers}>
-          <Icon>
-            <DoDisturbOnOutlined fontSize="large" />
+        <TerminateOtherSessionsButton>
+          <Icon
+            onClick={handleLogoutOthers}
+            data-testid="terminate-other-sessions-button"
+          >
+            {getIcon("DoDisturb")}
           </Icon>
           <span>Terminate All Other Sessions</span>
         </TerminateOtherSessionsButton>
       </SettingSection>
       <SettingSection>
-        <SectionTitle>Active sessions</SectionTitle>
+        <SectionTitle data-testid="active-sessions-title">
+          Active sessions
+        </SectionTitle>
         {allDevices?.map((session) => (
           <SessionItem key={session.lastSeenTime} session={session} />
         ))}
diff --git a/app/src/features/devices/components/SessionItem.tsx b/app/src/features/devices/components/SessionItem.tsx
index 8e8bb084..40595f73 100644
--- a/app/src/features/devices/components/SessionItem.tsx
+++ b/app/src/features/devices/components/SessionItem.tsx
@@ -88,11 +88,13 @@ function SessionItem({ session }: SessionItemProps) {
         <Lottie animationData={sessionIcon} />
       </SessionItemIcon>
       <SessionItemContent>
-        <SessionItemTitle>{session?.agent?.os || "Postman"}</SessionItemTitle>
-        <SessionItemDate>
+        <SessionItemTitle data-testid="session-title">
+          {session?.agent?.os || "Postman"}
+        </SessionItemTitle>
+        <SessionItemDate data-testid="session-date">
           {new Date(session?.lastSeenTime).toLocaleDateString()}
         </SessionItemDate>
-        <SessionItemSubtitle>
+        <SessionItemSubtitle data-testid="session-subtitle">
           {session?.agent?.browser || "Postman WebView"}
         </SessionItemSubtitle>
       </SessionItemContent>
diff --git a/app/src/features/devices/hooks/useGetAllSessions.ts b/app/src/features/devices/hooks/useGetAllSessions.ts
index 01cbfbef..275f48fd 100644
--- a/app/src/features/devices/hooks/useGetAllSessions.ts
+++ b/app/src/features/devices/hooks/useGetAllSessions.ts
@@ -1,5 +1,5 @@
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { GetAllSessions } from "../services/GetAllSessions";
+import { GetAllSessions } from "../services/apiGetAllSessions";
 import { Session } from "../types/sessions";
 
 function useGetAllSessions() {
diff --git a/app/src/features/devices/hooks/useGetCurrentSessions.ts b/app/src/features/devices/hooks/useGetCurrentSessions.ts
index a6fa2f8a..35f32be5 100644
--- a/app/src/features/devices/hooks/useGetCurrentSessions.ts
+++ b/app/src/features/devices/hooks/useGetCurrentSessions.ts
@@ -1,7 +1,6 @@
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { GetAllSessions } from "../services/GetAllSessions";
 import { Session } from "../types/sessions";
-import { GetCurrentSession } from "../services/GetCurrentSession";
+import { GetCurrentSession } from "../services/apiGetCurrentSession";
 
 function useGetCurrentSession() {
   const queryClient = useQueryClient();
diff --git a/app/src/features/devices/hooks/useLogoutOtherSessions.ts b/app/src/features/devices/hooks/useLogoutOtherSessions.ts
index 0ef99f59..6dd23a56 100644
--- a/app/src/features/devices/hooks/useLogoutOtherSessions.ts
+++ b/app/src/features/devices/hooks/useLogoutOtherSessions.ts
@@ -1,5 +1,5 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { LogoutOtherSessions } from "../services/LogoutOtherSessions";
+import { LogoutOtherSessions } from "../services/apiLogoutOtherSessions";
 import toast from "react-hot-toast";
 
 function useLogoutOtherSessions() {
diff --git a/app/src/features/devices/services/GetAllSessions.ts b/app/src/features/devices/services/apiGetAllSessions.ts
similarity index 88%
rename from app/src/features/devices/services/GetAllSessions.ts
rename to app/src/features/devices/services/apiGetAllSessions.ts
index 03e7f8ad..84f06234 100644
--- a/app/src/features/devices/services/GetAllSessions.ts
+++ b/app/src/features/devices/services/apiGetAllSessions.ts
@@ -6,6 +6,7 @@ async function GetAllSessions(): Promise<Session[]> {
     method: "GET",
     headers: {
       "Content-Type": "application/json",
+      "X-Session-Token": localStorage.getItem("sessionId") || "",
     },
     credentials: "include",
   });
diff --git a/app/src/features/devices/services/GetCurrentSession.ts b/app/src/features/devices/services/apiGetCurrentSession.ts
similarity index 63%
rename from app/src/features/devices/services/GetCurrentSession.ts
rename to app/src/features/devices/services/apiGetCurrentSession.ts
index 78df9dd6..e10ba86e 100644
--- a/app/src/features/devices/services/GetCurrentSession.ts
+++ b/app/src/features/devices/services/apiGetCurrentSession.ts
@@ -2,23 +2,20 @@ import { API_URL } from "@constants";
 import { Session } from "../types/sessions";
 
 async function GetCurrentSession(): Promise<Session> {
-  const res = await fetch(`${API_URL}/auth/sessions`, {
+  const res = await fetch(`${API_URL}/auth/me`, {
     method: "GET",
     headers: {
       "Content-Type": "application/json",
+      "X-Session-Token": localStorage.getItem("sessionId") || "",
     },
     credentials: "include",
   });
 
   const data = await res.json();
 
-  if (res.status !== 200) {
-    throw new Error(data.message);
-  }
+  const session = data.data as Session;
 
-  const sessions = data.data?.sessions;
-
-  return sessions[0];
+  return session;
 }
 
 export { GetCurrentSession };
diff --git a/app/src/features/devices/services/LogoutOtherSessions.ts b/app/src/features/devices/services/apiLogoutOtherSessions.ts
similarity index 85%
rename from app/src/features/devices/services/LogoutOtherSessions.ts
rename to app/src/features/devices/services/apiLogoutOtherSessions.ts
index 48e3c298..77ffb425 100644
--- a/app/src/features/devices/services/LogoutOtherSessions.ts
+++ b/app/src/features/devices/services/apiLogoutOtherSessions.ts
@@ -5,6 +5,7 @@ async function LogoutOtherSessions() {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
+      "X-Session-Token": localStorage.getItem("sessionId") || "",
     },
     credentials: "include",
   });
diff --git a/app/src/features/forward/ForwardingInputBar.tsx b/app/src/features/forward/ForwardingInputBar.tsx
new file mode 100644
index 00000000..f0b506b8
--- /dev/null
+++ b/app/src/features/forward/ForwardingInputBar.tsx
@@ -0,0 +1,63 @@
+import Icon from "@components/Icon";
+import { getIcon } from "@data/icons";
+import { getChatByID } from "@features/chats/utils/helpers";
+import { useAppSelector } from "@hooks/useGlobalState";
+import { useParams } from "react-router-dom";
+import styled from "styled-components";
+import { useContext } from "react";
+import { ChatInputContext } from "@features/chats/ChatBox";
+
+const Wrapper = styled.div`
+  background: var(--color-background);
+  padding: 0.5rem 1rem;
+  border-radius: 1rem;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+  display: flex;
+  flex: 2 2;
+  justify-content: space-between;
+  align-items: center;
+  height: 3.5rem;
+`;
+
+const StyledHeader = styled.div`
+  font-size: 1rem;
+  color: var(--color-text-secondary);
+  flex: 1;
+  text-align: center;
+`;
+
+const IconButton = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+`;
+
+function ForwardingInputBar() {
+  const { chatId } = useParams<{ chatId: string }>();
+
+  const { setShowForwardUsers, handleClose } = useContext(ChatInputContext);
+
+  const chats = useAppSelector((state) => state.chats.chats);
+  const chat = chatId ? getChatByID({ chatID: chatId, chats }) : undefined;
+
+  const selectedMessages = chat?.selectedMessages;
+
+  return selectedMessages ? (
+    <Wrapper>
+      <IconButton>
+        <Icon onClick={handleClose} test-id="close-icon">
+          {getIcon("Close")}
+        </Icon>
+      </IconButton>
+      <StyledHeader>{selectedMessages.length} messages selected</StyledHeader>
+      <IconButton>
+        <Icon onClick={() => setShowForwardUsers(true)} test-id="forward-icon">
+          {getIcon("Forward")}
+        </Icon>
+      </IconButton>
+    </Wrapper>
+  ) : null;
+}
+
+export default ForwardingInputBar;
diff --git a/app/src/features/forward/ScrollableChats.tsx b/app/src/features/forward/ScrollableChats.tsx
new file mode 100644
index 00000000..bd316cae
--- /dev/null
+++ b/app/src/features/forward/ScrollableChats.tsx
@@ -0,0 +1,106 @@
+import { ScrollContainer } from "styles/GlobalStyles";
+import styled from "styled-components";
+import Heading from "@components/Heading";
+import Icon from "@components/Icon";
+import { getIcon } from "@data/icons";
+import { useMessageSender } from "@features/chats/hooks/useMessageSender";
+import { useAppSelector } from "@hooks/useGlobalState";
+import { useParams } from "react-router-dom";
+import { useSelectedMessages } from "@features/chats/hooks/useSelectedMessages";
+import { getChatByID } from "@features/chats/utils/helpers";
+import ChatItem from "@features/chats/ChatItem";
+
+const OuterContainer = styled.ul`
+  position: absolute;
+  width: 60%;
+  right: auto;
+  left: auto;
+  top: -40rem;
+  height: 30rem;
+  z-index: 1000;
+  overflow: auto;
+
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  justify-content: center;
+  align-items: start;
+  list-style: none;
+  padding: 0.2rem 0.2rem;
+  background-color: var(--color-background);
+  box-shadow: var(--box-shadow);
+  box-shadow: var(--box-shadow);
+  border-radius: var(--border-radius-default);
+`;
+
+const IconWrapper = styled.div`
+  border-right: 1px solid var(--color-text-secondary);
+`;
+
+const HeaderRow = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: start;
+  border-bottom: 1px solid var(--color-text-secondary);
+  gap: 1.5rem;
+  width: 100%;
+  height: 4rem;
+`;
+
+interface Props {
+  onClose: () => void;
+}
+
+function ScrollableChats(props: Props) {
+  const { chatId } = useParams<{ chatId: string }>();
+  const { onClose } = props;
+
+  const { selectedMessages } = useSelectedMessages({ chatId });
+
+  const chats = useAppSelector((state) => state.chats.chats);
+  const messages = chatId
+    ? getChatByID({ chatID: chatId, chats })?.messages
+    : undefined;
+
+  const { handleSendMessage } = useMessageSender();
+
+  const handleSubmit = (chatId: string) => {
+    const messagesToForward = messages?.filter((message) =>
+      selectedMessages?.includes(message._id)
+    );
+
+    messagesToForward?.map((message) => {
+      handleSendMessage(message.content, chatId);
+    });
+
+    onClose();
+  };
+
+  console.log("chats = ", chats);
+
+  //TODO: refactor
+  return (
+    <OuterContainer>
+      <HeaderRow>
+        <IconWrapper>
+          <Icon onClick={onClose} test-id="close-icon">
+            {getIcon("Close")}
+          </Icon>
+        </IconWrapper>
+        <Heading as="h4">Forward To...</Heading>
+      </HeaderRow>
+      <ScrollContainer>
+        {chats?.map((chat) => (
+          <ChatItem
+            chat={chat}
+            key={chat._id}
+            onClick={() => handleSubmit(chat._id)}
+          />
+        ))}
+      </ScrollContainer>
+    </OuterContainer>
+  );
+}
+
+export default ScrollableChats;
diff --git a/app/src/features/forward/chatPopupItem.tsx b/app/src/features/forward/chatPopupItem.tsx
new file mode 100644
index 00000000..b68df567
--- /dev/null
+++ b/app/src/features/forward/chatPopupItem.tsx
@@ -0,0 +1,87 @@
+import Heading from "@components/Heading";
+import Avatar from "@components/Avatar";
+import styled from "styled-components";
+
+const StyledSideBarRow = styled.div`
+  width: 98%;
+  height: 4.5rem;
+  position: relative;
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  padding: 0 5%;
+  gap: 1rem;
+  background: var(--color-background);
+  border-radius: var(--border-radius-modal);
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease;
+
+  &:hover {
+    background: var(--color-background-compact-menu-hover);
+    cursor: pointer;
+    transform: scale(1.01);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  }
+
+  &:active {
+    transform: scale(0.98);
+  }
+`;
+
+const RowInfo = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: start;
+  align-items: center;
+  gap: 1rem;
+`;
+
+const InnerDiv = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  align-items: start;
+`;
+
+const StyledP = styled.p`
+  font-size: 0.85rem;
+  color: var(--color-text-secondary);
+  margin: 0;
+  font-weight: 350;
+  letter-spacing: 0.5px;
+`;
+
+const FancyAvatar = styled(Avatar)`
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #6a5acd, #1e90ff);
+  color: white;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 1.2rem;
+`;
+
+export interface ChatPopupItemProps {
+  id: string;
+  name: string;
+  username: string;
+}
+
+function ChatPopupItem({ name, username }: ChatPopupItemProps) {
+  return (
+    <StyledSideBarRow>
+      <RowInfo>
+        <FancyAvatar name={name[0]} />
+        <InnerDiv>
+          <Heading as="h5">{name}</Heading>
+          <StyledP>{`@${username}`}</StyledP>
+        </InnerDiv>
+      </RowInfo>
+    </StyledSideBarRow>
+  );
+}
+
+export default ChatPopupItem;
diff --git a/app/src/features/forward/checkBox.tsx b/app/src/features/forward/checkBox.tsx
new file mode 100644
index 00000000..cc8fb7d8
--- /dev/null
+++ b/app/src/features/forward/checkBox.tsx
@@ -0,0 +1,69 @@
+import styled from "styled-components";
+
+interface CheckboxProps {
+  id: string;
+  isChecked: boolean;
+  onChange: () => void;
+}
+
+const StyledCheckboxContainer = styled.label`
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+`;
+
+const StyledCheckbox = styled.input`
+  display: none;
+
+  &:checked + span {
+    background-color: #4caf50;
+    border-color: #4caf50;
+  }
+
+  &:checked + span::after {
+    content: "";
+    display: block;
+    width: 0.35rem;
+    height: 0.7rem;
+    border: solid white;
+    border-width: 0 0.15rem 0.15rem 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) rotate(45deg);
+  }
+`;
+
+const StyledCustomBox = styled.span`
+  display: inline-block;
+  width: 1.25rem;
+  height: 1.25rem;
+  border: 2px solid var(--color-borders-input);
+  border-radius: 0.2rem;
+  position: relative;
+  transition: all 0.3s;
+
+  &:hover {
+    border-color: #888;
+  }
+`;
+
+function CheckBox(props: CheckboxProps) {
+  const { id, isChecked, onChange } = props;
+
+  return (
+    <StyledCheckboxContainer>
+      <StyledCheckbox
+        id={id}
+        type="checkbox"
+        checked={isChecked}
+        onChange={onChange}
+        test-id={id}
+      />
+      <StyledCustomBox />
+    </StyledCheckboxContainer>
+  );
+}
+
+export default CheckBox;
diff --git a/app/src/features/forward/hooks/useCheckBox.ts b/app/src/features/forward/hooks/useCheckBox.ts
new file mode 100644
index 00000000..070a137c
--- /dev/null
+++ b/app/src/features/forward/hooks/useCheckBox.ts
@@ -0,0 +1,40 @@
+import { getChatByID } from "@features/chats/utils/helpers";
+import { useAppSelector, useAppDispatch } from "@hooks/useGlobalState";
+import { SelectMessage, removeSelectedMessage } from "@state/messages/chats";
+import { useState, useEffect } from "react";
+
+function useCheckBox({
+  chatId,
+  messageId,
+}: {
+  chatId: string;
+  messageId: string;
+}) {
+  const [isChecked, setIsChecked] = useState<boolean>(false);
+  const chats = useAppSelector((state) => state.chats.chats);
+  const showCheckBox = chatId
+    ? getChatByID({ chats: chats, chatID: chatId })?.showCheckBox
+    : undefined;
+
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    if (showCheckBox !== undefined) setIsChecked(isChecked && showCheckBox);
+  }, [showCheckBox, messageId, chatId]);
+
+  function toggleCheckBox() {
+    if (!isChecked) {
+      dispatch(SelectMessage({ chatId, id: messageId }));
+    } else {
+      dispatch(removeSelectedMessage({ chatId, id: messageId }));
+    }
+    setIsChecked(!isChecked);
+  }
+
+  return {
+    isChecked,
+    toggleCheckBox,
+    showCheckBox,
+  };
+}
+
+export default useCheckBox;
diff --git a/app/src/features/forward/hooks/useShowForward.ts b/app/src/features/forward/hooks/useShowForward.ts
new file mode 100644
index 00000000..9b2b60a2
--- /dev/null
+++ b/app/src/features/forward/hooks/useShowForward.ts
@@ -0,0 +1,24 @@
+import { useAppDispatch } from "@hooks/useGlobalState";
+import { setShowCheckBox } from "@state/messages/chats";
+import { useState } from "react";
+import { useParams } from "react-router-dom";
+
+function useShowForward() {
+  const { chatId } = useParams<{ chatId: string }>();
+
+  const dispatch = useAppDispatch();
+  const [showForwardUsers, setShowForwardUsers] = useState(false);
+
+  function handleClose() {
+    if (!chatId) {
+      return;
+    }
+
+    setShowForwardUsers(false);
+    dispatch(setShowCheckBox({ chatId: chatId, showCheckBox: false }));
+  }
+
+  return { showForwardUsers, setShowForwardUsers, handleClose };
+}
+
+export default useShowForward;
diff --git a/app/src/features/groups/AddMembersButton.tsx b/app/src/features/groups/AddMembersButton.tsx
new file mode 100644
index 00000000..18d1d8a2
--- /dev/null
+++ b/app/src/features/groups/AddMembersButton.tsx
@@ -0,0 +1,26 @@
+import CircleIcon from "@components/CircleIcon";
+import { useGroupInfo } from "./hooks/useGroupInfo";
+
+function AddMembersButton({ onClick }: { onClick: () => void }) {
+  const { isCurrUserAdmin, isPending } = useGroupInfo();
+
+  if (isPending || !isCurrUserAdmin) return;
+
+  return (
+    <CircleIcon
+      type="submit"
+      as="button"
+      $icon="AddMembers"
+      $right={1}
+      $bottom={2}
+      $size={3.3}
+      $padding={0.8}
+      $color="white"
+      $bgColor="var(--accent-color)"
+      onClick={onClick}
+      testid="add-members-button"
+    />
+  );
+}
+
+export default AddMembersButton;
diff --git a/app/src/features/groups/Admins.tsx b/app/src/features/groups/Admins.tsx
new file mode 100644
index 00000000..c4aa76f3
--- /dev/null
+++ b/app/src/features/groups/Admins.tsx
@@ -0,0 +1,47 @@
+import UsersList from "@components/UsersList";
+import { useGroupInfo } from "./hooks/useGroupInfo";
+import AddMembersButton from "./AddMembersButton";
+import SearchInput from "@components/side-bar/groups/SearchInput";
+import { useState } from "react";
+import { useDispatch } from "react-redux";
+import { updateSideBarView } from "@state/side-bar/sideBar";
+import { sideBarPages } from "types/sideBar";
+import { useAppSelector } from "@hooks/useGlobalState";
+
+function Admins() {
+  const { isPending, admins } = useGroupInfo();
+  const [searchQuery, setSearchQuery] = useState("");
+  const dispatch = useDispatch();
+  const { backView } = useAppSelector(
+    (state) => state.sideBarData.rightSideBar
+  );
+
+  if (isPending) return;
+
+  const filteredAdmins = admins?.filter((admin) =>
+    `${admin.screenFirstName} ${admin.screenLastName}`
+      .toLowerCase()
+      .includes(searchQuery.toLowerCase())
+  );
+
+  function handleClick() {
+    dispatch(
+      updateSideBarView({
+        redirect: sideBarPages.ADD_ADMINS,
+        data: { type: "right", prevBackView: backView },
+      })
+    );
+  }
+
+  return (
+    <>
+      <SearchInput searchQuery={searchQuery} setSearchQuery={setSearchQuery} />
+      <UsersList view="display" users={filteredAdmins} />
+      <AddMembersButton
+        data-testid="add-members-button"
+        onClick={handleClick}
+      />
+    </>
+  );
+}
+export default Admins;
diff --git a/app/src/features/groups/ConfirmDeleteGroupModal.tsx b/app/src/features/groups/ConfirmDeleteGroupModal.tsx
new file mode 100644
index 00000000..8c9f17aa
--- /dev/null
+++ b/app/src/features/groups/ConfirmDeleteGroupModal.tsx
@@ -0,0 +1,116 @@
+import { useState } from "react";
+import { useDispatch } from "react-redux";
+import styled from "styled-components";
+
+import Checkbox from "@components/Checkbox";
+import Modal from "@components/Modal";
+
+import { useSocket } from "@hooks/useSocket";
+import { useRightSideBarContext } from "./contexts/RightSideBarProvider";
+import { resetRightSideBar } from "@state/side-bar/sideBar";
+import { useGroupInfo } from "./hooks/useGroupInfo";
+
+const Buttons = styled.div`
+  display: flex;
+  justify-content: space-between;
+
+  width: 100%;
+`;
+
+const CheckboxContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+
+  cursor: pointer;
+
+  width: 100%;
+  padding: 0.5rem 1rem;
+
+  border-radius: var(--border-radius-default-tiny);
+
+  & span {
+    color: var(--color-text);
+  }
+
+  &:hover {
+    background-color: var(--color-item-hover);
+  }
+`;
+
+const Button = styled.button<{ $type?: string }>`
+  border: none;
+  border-radius: var(--border-radius-default-tiny);
+  padding: 0.5rem 1rem;
+
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  font-weight: 600;
+  font-size: 1rem;
+
+  background-color: transparent;
+  color: ${({ $type }) =>
+    $type === "error" ? "var(--color-error)" : "var(--accent-color)"};
+
+  &:hover {
+    background-color: ${({ $type }) =>
+      $type === "error"
+        ? "var(--color-error-shade)"
+        : "var(--color-item-hover)"};
+  }
+`;
+
+type ModalProps = {
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+function ConfirmDeleteGroupModal({ isOpen, onClose }: ModalProps) {
+  const [checked, setChecked] = useState(false);
+  const { leaveGroup, deleteGroup } = useSocket();
+  const { setIsRightSideBarOpen } = useRightSideBarContext();
+  const dispatch = useDispatch();
+  const { chatId, isCurrUserAdmin } = useGroupInfo();
+
+  function handleDelete() {
+    if (checked) {
+      deleteGroup({ chatId: chatId! });
+    } else {
+      leaveGroup({ chatId: chatId! });
+    }
+    dispatch(resetRightSideBar());
+    setIsRightSideBarOpen(false);
+  }
+
+  return (
+    <Modal
+      title="Delete Group"
+      onClose={onClose}
+      isOpen={isOpen}
+      message="Are you sure you want to delete and leave this group?"
+    >
+      {isCurrUserAdmin && (
+        <CheckboxContainer onClick={() => setChecked((prev) => !prev)}>
+          <Checkbox
+            data-testid="delete-for-all-checkbox"
+            // onChange={() => setChecked((prev) => !prev)}
+            checked={checked}
+          />
+          <span>delete for all users</span>
+        </CheckboxContainer>
+      )}
+      <Buttons>
+        <Button onClick={onClose}>Cancel</Button>
+        <Button
+          data-testid="delete-button"
+          $type="error"
+          onClick={handleDelete}
+        >
+          Delete
+        </Button>
+      </Buttons>
+    </Modal>
+  );
+}
+
+export default ConfirmDeleteGroupModal;
diff --git a/app/src/features/groups/CreateGroupForm.tsx b/app/src/features/groups/CreateGroupForm.tsx
new file mode 100644
index 00000000..8e79ce0c
--- /dev/null
+++ b/app/src/features/groups/CreateGroupForm.tsx
@@ -0,0 +1,95 @@
+import { useState } from "react";
+import { useDispatch } from "react-redux";
+import { useForm } from "react-hook-form";
+import styled from "styled-components";
+
+import FloatingLabelInput from "@components/inputs/float-label-input/FloatingLabelInput";
+import UploadImage from "@components/UploadImage";
+import CircleIcon from "@components/CircleIcon";
+import { NewGroupForm } from "./NewGroup";
+
+import { updateSideBarView } from "@state/side-bar/sideBar";
+import { sideBarPages } from "types/sideBar";
+
+import { useAppSelector } from "@hooks/useGlobalState";
+import { clearSelectedUsers } from "@state/groups/selectedUsers";
+import { useSocket } from "@hooks/useSocket";
+import { useSidebarType } from "@components/side-bar/SideBarContext";
+
+const Form = styled.form`
+  padding: 1rem;
+  background-color: var(--color-background);
+
+  & button {
+    z-index: 1;
+  }
+`;
+
+function GroupInfoForm({ type }: { type: "channel" | "group" }) {
+  const [selectedImageFile, setSelectedImageFile] = useState<File | null>(null);
+  const { register, handleSubmit, watch } = useForm<NewGroupForm>({
+    mode: "onChange",
+    defaultValues: {
+      photo: "",
+      groupName: "",
+    },
+  });
+
+  const sideBarType = useSidebarType();
+
+  const groupName = watch("groupName");
+  const dispatch = useDispatch();
+  const members = useAppSelector((state) => state.selectedUsers);
+  const { createGroupOrChannel } = useSocket();
+
+  const onSubmit = (data: NewGroupForm) => {
+    dispatch(
+      updateSideBarView({
+        redirect: sideBarPages.CHATS,
+        data: { type: sideBarType },
+      })
+    );
+    dispatch(clearSelectedUsers());
+
+    createGroupOrChannel({
+      name: data.groupName,
+      type,
+      members: members.map((member) => member._id),
+    });
+  };
+
+  return (
+    <Form data-testid={`new-${type}-form`} onSubmit={handleSubmit(onSubmit)}>
+      <UploadImage
+        setSelectedImageFile={setSelectedImageFile}
+        selectedImageFile={selectedImageFile}
+      />
+
+      <FloatingLabelInput<NewGroupForm>
+        id="groupName"
+        label={`${type} Name (required)`}
+        register={register}
+        watch={watch}
+        data-testid="group-name"
+      />
+
+      {!!groupName && (
+        <CircleIcon
+          type="submit"
+          as="button"
+          data-testid="confirm-create-group-button"
+          $icon="ArrowForward"
+          $right={1}
+          $bottom={2}
+          $size={3.3}
+          $padding={0.5}
+          $color="white"
+          $bgColor="var(--accent-color)"
+          $opacity={0.95}
+        />
+      )}
+    </Form>
+  );
+}
+
+export default GroupInfoForm;
diff --git a/app/src/features/groups/DeleteGroup.tsx b/app/src/features/groups/DeleteGroup.tsx
new file mode 100644
index 00000000..37c19388
--- /dev/null
+++ b/app/src/features/groups/DeleteGroup.tsx
@@ -0,0 +1,12 @@
+import SettingsRow from "./SettingsRow";
+
+export default function DeleteGroup() {
+  return (
+    <SettingsRow
+      icon="Delete"
+      title="Delete and Leave Group"
+      subtitle=""
+      onClick={() => {}}
+    />
+  );
+}
diff --git a/app/src/features/groups/EditGroupInfo.tsx b/app/src/features/groups/EditGroupInfo.tsx
new file mode 100644
index 00000000..a7db811b
--- /dev/null
+++ b/app/src/features/groups/EditGroupInfo.tsx
@@ -0,0 +1,71 @@
+import { useState } from "react";
+import { useDispatch } from "react-redux";
+import styled from "styled-components";
+
+import SettingsRow from "./SettingsRow";
+import ConfirmDeleteGroupModal from "./ConfirmDeleteGroupModal";
+import { useGroupInfo } from "./hooks/useGroupInfo";
+
+import { getSettings } from "./data/settings";
+import { sideBarPages } from "types/sideBar";
+
+const Container = styled.div`
+  background-color: var(--color-background);
+  display: flex;
+  flex-direction: column;
+`;
+
+function EditGroupInfo() {
+  const dispatch = useDispatch();
+  const {
+    admins,
+    groupMembers,
+    isPending,
+    chatType,
+    numGivenPermissions,
+    group
+  } = useGroupInfo();
+
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  if (isPending) return null;
+
+  const backView =
+    chatType === "group"
+      ? sideBarPages.EDIT_GROUP_INFO
+      : sideBarPages.EDIT_CHANNEL_INFO;
+
+  const settings = getSettings({
+    dispatch,
+    admins,
+    groupMembers,
+    chatType: chatType!,
+    backView,
+    numGivenPermissions,
+    setIsModalOpen,
+    privacy: group?.privacy!,
+  });
+
+  return (
+    <Container data-testid="group-settings-container">
+      {isModalOpen && (
+        <ConfirmDeleteGroupModal
+          isOpen={isModalOpen}
+          onClose={() => setIsModalOpen(false)}
+        />
+      )}
+      {settings.map((setting, index) => (
+        <SettingsRow
+          key={index}
+          testid={setting.testid}
+          icon={setting.icon}
+          title={setting.title}
+          subtitle={setting.subtitle}
+          onClick={setting.onClick}
+        />
+      ))}
+    </Container>
+  );
+}
+
+export default EditGroupInfo;
diff --git a/app/src/features/groups/GroupInfo.tsx b/app/src/features/groups/GroupInfo.tsx
new file mode 100644
index 00000000..c7e75407
--- /dev/null
+++ b/app/src/features/groups/GroupInfo.tsx
@@ -0,0 +1,88 @@
+import styled from "styled-components";
+import { useGroupInfo } from "./hooks/useGroupInfo";
+import UsersList from "@components/UsersList";
+import Avatar from "@components/Avatar";
+import { sideBarPages } from "types/sideBar";
+import { useDispatch } from "react-redux";
+import { updateSideBarView } from "@state/side-bar/sideBar";
+import AddMembersButton from "./AddMembersButton";
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+`;
+
+const GroupDetails = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  gap: 1.5rem;
+  padding: 1rem;
+
+  width: 100%;
+`;
+
+const GroupName = styled.div`
+  color: var(--color-text);
+`;
+
+const MembersCount = styled.div`
+  color: var(--color-text-secondary);
+  font-size: 0.8rem;
+`;
+
+const Info = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const StyledUsersList = styled.div`
+  width: 100%;
+  max-height: calc(100vh - 19rem);
+  overflow-y: scroll;
+  position: relative;
+
+  background-color: var(--color-background);
+`;
+
+function GroupInfo() {
+  const { group, groupMembers, isPending } = useGroupInfo();
+  const dispatch = useDispatch();
+  if (isPending) return;
+
+  function handleAddMembers() {
+    dispatch(
+      updateSideBarView({
+        redirect: sideBarPages.ADD_MORE_MEMBERS,
+        data: { type: "right", view: "existing group" },
+      })
+    );
+  }
+
+  return (
+    <Container data-testid="group-info-container">
+      <GroupDetails data-testid="groups-details-container">
+        <Avatar name={group?.name} image={group?.photo} size="large" />
+        <Info>
+          <GroupName data-testid="group-name">{group?.name}</GroupName>
+          <MembersCount data-testid="group-members-count">
+            {groupMembers?.length} members
+          </MembersCount>
+        </Info>
+      </GroupDetails>
+      <StyledUsersList data-testid="members-list">
+        <UsersList view="display" users={groupMembers!} />
+      </StyledUsersList>
+
+      <AddMembersButton
+        data-testid="add-members-button"
+        onClick={handleAddMembers}
+      />
+    </Container>
+  );
+}
+
+export default GroupInfo;
diff --git a/app/src/features/groups/GroupType.tsx b/app/src/features/groups/GroupType.tsx
new file mode 100644
index 00000000..700ddb94
--- /dev/null
+++ b/app/src/features/groups/GroupType.tsx
@@ -0,0 +1,51 @@
+import { useState } from "react";
+import styled from "styled-components";
+
+import GroupTypeOption from "./GroupTypeOption";
+
+import { useGroupInfo } from "./hooks/useGroupInfo";
+import { useSocket } from "@hooks/useSocket";
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  padding: 1rem;
+`;
+
+function GroupType() {
+  const { group, chatId, isCurrUserAdmin } = useGroupInfo();
+  const { setPrivacy } = useSocket();
+  const [selectedGroupType, setSelectedGroupType] = useState<
+    "private" | "public"
+  >(group?.privacy ? "private" : "public");
+
+  const handleSelection = (type: "private" | "public") => {
+    setSelectedGroupType(type);
+    setPrivacy({
+      chatId: chatId!,
+      privacy: type === "private"
+    });
+  };
+
+  return (
+    <Container>
+      <GroupTypeOption
+        type="private"
+        selected={selectedGroupType === "private"}
+        onClick={() => handleSelection("private")}
+        groupType={group?.type}
+        isAdmin={isCurrUserAdmin}
+      />
+      <GroupTypeOption
+        type="public"
+        selected={selectedGroupType === "public"}
+        onClick={() => handleSelection("public")}
+        groupType={group?.type}
+        isAdmin={isCurrUserAdmin}
+      />
+    </Container>
+  );
+}
+
+export default GroupType;
diff --git a/app/src/features/groups/GroupTypeOption.tsx b/app/src/features/groups/GroupTypeOption.tsx
new file mode 100644
index 00000000..2f500562
--- /dev/null
+++ b/app/src/features/groups/GroupTypeOption.tsx
@@ -0,0 +1,84 @@
+import styled from "styled-components";
+
+const Option = styled.div<{ disabled: boolean }>`
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+
+  cursor: ${({ disabled }) => (disabled ? "not-allowed" : "pointer")};
+`;
+
+const RadioButton = styled.button<{ selected: boolean; disabled: boolean }>`
+  background: transparent;
+  flex-shrink: 0;
+
+  width: 1.2rem;
+  height: 1.2rem;
+
+  border-radius: 50%;
+  border: 2px solid
+    ${({ selected }) =>
+      selected ? "var(--accent-color)" : "var(--color-text-secondary)"};
+  
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: ${({ disabled }) => (disabled ? "not-allowed" : "pointer")};
+
+  &::after {
+    content: "";
+    width: ${({ selected }) => (selected ? "0.7rem" : "0")};
+    height: ${({ selected }) => (selected ? "0.7rem" : "0")};
+    background-color: var(--accent-color);
+    border-radius: 50%;
+    transition: all 0.2s ease-in-out;
+  }
+`;
+
+const Details = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+`;
+
+const Title = styled.p`
+  font-weight: 500;
+  color: var(--color-text);
+`;
+
+const Description = styled.p`
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+`;
+
+interface GroupTypeOptionProps {
+  type: "private" | "public";
+  selected: boolean;
+  isAdmin: boolean;
+  onClick: () => void;
+  groupType: string | undefined;
+}
+
+const GroupTypeOption = ({
+  type,
+  selected,
+  onClick,
+  groupType,
+  isAdmin
+}: GroupTypeOptionProps) => (
+  <Option disabled={!isAdmin} onClick={onClick}>
+    <RadioButton selected={selected} disabled={!isAdmin} />
+    <Details>
+      <Title>{`${type.charAt(0).toUpperCase() + type.slice(1)} ${groupType}`}</Title>
+      <Description>
+        {`${type.charAt(0).toUpperCase() + type.slice(1)} ${groupType} ${
+          type === "private"
+            ? "cannot be found in search."
+            : "can be found in search."
+        }`}
+      </Description>
+    </Details>
+  </Option>
+);
+
+export default GroupTypeOption;
diff --git a/app/src/features/groups/Members.tsx b/app/src/features/groups/Members.tsx
new file mode 100644
index 00000000..f93dd351
--- /dev/null
+++ b/app/src/features/groups/Members.tsx
@@ -0,0 +1,43 @@
+import UsersList from "@components/UsersList";
+import { useGroupInfo } from "./hooks/useGroupInfo";
+import AddMembersButton from "./AddMembersButton";
+import SearchInput from "@components/side-bar/groups/SearchInput";
+import { useState } from "react";
+import { useDispatch } from "react-redux";
+import { updateSideBarView } from "@state/side-bar/sideBar";
+import { sideBarPages } from "types/sideBar";
+
+function Members() {
+  const { isPending, groupMembers } = useGroupInfo();
+  const [searchQuery, setSearchQuery] = useState("");
+  const dispatch = useDispatch();
+
+  if (isPending) return;
+
+  const filteredMembers = groupMembers?.filter((member) =>
+    `${member.screenFirstName} ${member.screenLastName}`
+      .toLowerCase()
+      .includes(searchQuery.toLowerCase())
+  );
+
+  function handleClick() {
+    dispatch(
+      updateSideBarView({
+        redirect: sideBarPages.ADD_MORE_MEMBERS,
+        data: { type: "right" },
+      })
+    );
+  }
+
+  return (
+    <>
+      <SearchInput searchQuery={searchQuery} setSearchQuery={setSearchQuery} />
+      <UsersList view="display" users={filteredMembers} />
+      <AddMembersButton
+        data-testid="add-members-button"
+        onClick={handleClick}
+      />
+    </>
+  );
+}
+export default Members;
diff --git a/app/src/features/groups/NewGroup.tsx b/app/src/features/groups/NewGroup.tsx
new file mode 100644
index 00000000..3a1d47a6
--- /dev/null
+++ b/app/src/features/groups/NewGroup.tsx
@@ -0,0 +1,59 @@
+import styled from "styled-components";
+
+import User from "@components/User";
+import { useAppSelector } from "@hooks/useGlobalState";
+import CreateGroupForm from "./CreateGroupForm";
+
+export interface NewGroupForm {
+  photo: string;
+  groupName: string;
+}
+
+const Container = styled.div`
+  background-color: var(--color-background-secondary);
+
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+`;
+
+const StyledUsersList = styled.div`
+  width: 100%;
+
+  position: relative;
+  padding: 1rem 0;
+
+  background-color: var(--color-background);
+`;
+
+const Count = styled.span`
+  padding-left: 1rem;
+  color: var(--accent-color);
+
+  position: relative;
+`;
+
+export default function NewGroup() {
+  const { props } = useAppSelector((state) => state.sideBarData.leftSideBar);
+  const type = props?.view;
+
+  const members = useAppSelector((state) => state.selectedUsers);
+  const membersCount = members.length;
+
+  return (
+    <Container>
+      {(type === "channel" || type === "group") && (
+        <CreateGroupForm type={type} />
+      )}
+
+      {membersCount > 0 && (
+        <StyledUsersList>
+          <Count>{`${membersCount} ${type === "channel" ? "subscriber" : "member"}${membersCount > 1 ? "s" : ""}`}</Count>
+          {members?.map((user) => (
+            <User view="display" key={user._id} user={user} />
+          ))}
+        </StyledUsersList>
+      )}
+    </Container>
+  );
+}
diff --git a/app/src/features/groups/Permissions.tsx b/app/src/features/groups/Permissions.tsx
new file mode 100644
index 00000000..0d595c9f
--- /dev/null
+++ b/app/src/features/groups/Permissions.tsx
@@ -0,0 +1,89 @@
+import { useState, useCallback } from "react";
+import styled from "styled-components";
+import Checkbox from "@components/Checkbox";
+import { useSocket } from "@hooks/useSocket";
+import { useParams } from "react-router-dom";
+import { useGroupInfo } from "./hooks/useGroupInfo";
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem;
+`;
+
+const P = styled.p`
+  color: var(--color-text-secondary);
+  font-size: 0.875rem;
+`;
+
+const PermissionRow = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 0.75rem;
+`;
+
+const PermissionText = styled.span`
+  color: var(--color-text);
+  font-size: 0.875rem;
+`;
+
+interface PermissionsState {
+  [key: string]: boolean;
+}
+
+const Permissions = () => {
+  const { group, isCurrUserAdmin } = useGroupInfo();
+  const { chatId } = useParams<{ chatId: string }>();
+
+  const [permissions, setPermissions] = useState<PermissionsState>({
+    post: group?.messagingPermission!,
+    video: group?.downloadingPermission!,
+    audio: false
+  });
+
+  const { setPermission: socketSetPermission } = useSocket();
+
+  const togglePermission = useCallback((id: string) => {
+    setPermissions((prev) => {
+      const isEnabled = !prev[id];
+
+      console.log(id, isEnabled);
+
+      if (id === "post") {
+        socketSetPermission({
+          chatId: chatId!,
+          type: "post",
+          who: isEnabled ? "everyone" : "admins"
+        });
+      }
+
+      return { ...prev, [id]: isEnabled };
+    });
+  }, []);
+
+  const permissionLabels: { [key: string]: string } = {
+    post: "Send messages",
+    video: "Download video messages",
+    audio: "Download audio messages"
+  };
+
+  return (
+    <Container>
+      <P>What can members of this chat do?</P>
+      {Object.entries(permissionLabels).map(([id, label]) => (
+        <PermissionRow key={id}>
+          <Checkbox
+            checked={permissions[id]}
+            onChange={() => togglePermission(id)}
+            data-testid={`permission-${id}`}
+            disabled={!isCurrUserAdmin}
+          />
+          <PermissionText>{label}</PermissionText>
+        </PermissionRow>
+      ))}
+    </Container>
+  );
+};
+
+export default Permissions;
diff --git a/app/src/features/groups/SettingsRow.tsx b/app/src/features/groups/SettingsRow.tsx
new file mode 100644
index 00000000..02e4c2bb
--- /dev/null
+++ b/app/src/features/groups/SettingsRow.tsx
@@ -0,0 +1,71 @@
+import { getIcon, iconStrings } from "@data/icons";
+import styled from "styled-components";
+
+const Row = styled.li<{ $type: string }>`
+  padding: 0.5rem 1rem;
+  list-style: none;
+
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+
+  color: ${(props) =>
+    props.$type === "Delete" ? "var(--color-error)" : "var(--color-text)"};
+
+  &:hover {
+    cursor: pointer;
+    background-color: ${(props) =>
+      props.$type === "Delete"
+        ? "var(--color-error-shade)"
+        : "var(--color-chat-hover)"};
+  }
+
+  & svg {
+    fill: ${(props) =>
+      props.$type === "Delete" ? "var(--color-error)" : "var(--color-text)"};
+  }
+`;
+
+const Title = styled.p`
+  text-transform: capitalize;
+`;
+
+const Subtitle = styled.p`
+  text-transform: capitalize;
+  font-size: small;
+
+  color: var(--color-text-secondary);
+`;
+
+const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+type SettingsRowProps = {
+  icon: iconStrings;
+  title: string;
+  subtitle: string | number;
+  testid?: string;
+  onClick: () => void;
+};
+
+function SettingsRow({
+  icon,
+  title,
+  subtitle,
+  onClick,
+  testid,
+}: SettingsRowProps) {
+  return (
+    <Row data-testid={testid} onClick={onClick} $type={icon}>
+      {getIcon(icon)}
+      <Content>
+        <Title data-testid={`setting-${title}`}>{title}</Title>
+        <Subtitle data-testid="subtitle">{subtitle}</Subtitle>
+      </Content>
+    </Row>
+  );
+}
+
+export default SettingsRow;
diff --git a/app/src/features/groups/contexts/RightSideBarProvider.tsx b/app/src/features/groups/contexts/RightSideBarProvider.tsx
new file mode 100644
index 00000000..c3e76897
--- /dev/null
+++ b/app/src/features/groups/contexts/RightSideBarProvider.tsx
@@ -0,0 +1,39 @@
+import { createContext, useState, ReactNode, useContext } from "react";
+
+interface RightSideBarContextType {
+  isRightSideBarOpen: boolean;
+  setIsRightSideBarOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const RightSideBarContext = createContext<RightSideBarContextType | undefined>(
+  undefined
+);
+
+interface RightSideBarProviderProps {
+  children: ReactNode;
+}
+
+function RightSideBarProvider({ children }: RightSideBarProviderProps) {
+  const [isRightSideBarOpen, setIsRightSideBarOpen] = useState<boolean>(false);
+
+  return (
+    <RightSideBarContext.Provider
+      value={{ isRightSideBarOpen, setIsRightSideBarOpen }}
+    >
+      {children}
+    </RightSideBarContext.Provider>
+  );
+}
+
+function useRightSideBarContext() {
+  const context = useContext(RightSideBarContext);
+  if (!context) {
+    throw new Error(
+      "useRightSideBarContext must be used within a RightSideBarProvider"
+    );
+  }
+  return context;
+}
+
+export { useRightSideBarContext };
+export default RightSideBarProvider;
diff --git a/app/src/features/groups/data/settings.ts b/app/src/features/groups/data/settings.ts
new file mode 100644
index 00000000..e2d958eb
--- /dev/null
+++ b/app/src/features/groups/data/settings.ts
@@ -0,0 +1,91 @@
+import { iconStrings } from "@data/icons";
+import { Dispatch } from "@reduxjs/toolkit";
+import { updateSideBarView } from "@state/side-bar/sideBar";
+import { sideBarPages } from "types/sideBar";
+
+type SettingsProps = {
+  dispatch: Dispatch;
+  admins: any[];
+  groupMembers: any[];
+  privacy: boolean;
+  chatType: string;
+  backView: sideBarPages;
+  numGivenPermissions: number;
+
+  setIsModalOpen: (value: boolean) => void;
+};
+
+const getSettings = ({
+  chatType,
+  dispatch,
+  admins,
+  groupMembers,
+  privacy,
+  backView,
+  numGivenPermissions,
+  setIsModalOpen
+}: SettingsProps) => [
+  {
+    testid: "group-type",
+    icon: "Lock" as iconStrings,
+    title: `${chatType?.charAt(0)?.toUpperCase()}${chatType?.slice(1)} Type`,
+    subtitle: privacy ? "private" : "public",
+    onClick: () =>
+      dispatch(
+        updateSideBarView({
+          redirect: sideBarPages.GROUP_TYPE,
+          data: { type: "right", backView }
+        })
+      )
+  },
+  {
+    testid: "admins",
+    icon: "Admin" as iconStrings,
+    title: "Administrators",
+    subtitle: admins?.length,
+    onClick: () =>
+      dispatch(
+        updateSideBarView({
+          redirect: sideBarPages.ADMINS,
+          data: { type: "right", backView }
+        })
+      )
+  },
+  {
+    testid: "members",
+    icon: "Members" as iconStrings,
+    title: chatType === "group" ? "Members" : "Subscribers",
+    subtitle: groupMembers?.length,
+    onClick: () =>
+      dispatch(
+        updateSideBarView({
+          redirect: sideBarPages.MEMBERS,
+          data: { type: "right", backView }
+        })
+      )
+  },
+  {
+    testid: "permissions",
+    icon: "Members" as iconStrings,
+    title: "Permissions",
+    subtitle: `${numGivenPermissions}/3`,
+    onClick: () =>
+      dispatch(
+        updateSideBarView({
+          redirect: sideBarPages.PERMISSIONS,
+          data: { type: "right", backView }
+        })
+      )
+  },
+  {
+    testid: "leave-group-button",
+    icon: "Delete" as iconStrings,
+    title: `Delete and Leave ${chatType}`,
+    subtitle: "",
+    onClick: () => {
+      setIsModalOpen(true);
+    }
+  }
+];
+
+export { getSettings };
diff --git a/app/src/features/groups/hooks/useAllUsers.ts b/app/src/features/groups/hooks/useAllUsers.ts
new file mode 100644
index 00000000..8e761746
--- /dev/null
+++ b/app/src/features/groups/hooks/useAllUsers.ts
@@ -0,0 +1,27 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { getAllUsers } from "../services/getAllUsers";
+
+type UserType = {
+  _id: string;
+  username: string;
+  screenFirstName: string;
+  screenLastName: string;
+  email?: string;
+  photo: string;
+  status: string;
+  bio?: string;
+  role?: "admin" | "member" | undefined;
+};
+
+function useAllUsers() {
+  const { data: users, isPending } = useQuery<UserType[]>({
+    queryKey: ["users"],
+    queryFn: getAllUsers,
+  });
+
+  return { users, isPending };
+}
+
+export { useAllUsers };
+export type { UserType };
diff --git a/app/src/features/groups/hooks/useGroupInfo.ts b/app/src/features/groups/hooks/useGroupInfo.ts
new file mode 100644
index 00000000..b2203ffb
--- /dev/null
+++ b/app/src/features/groups/hooks/useGroupInfo.ts
@@ -0,0 +1,57 @@
+import { useAppSelector } from "@hooks/useGlobalState";
+import { useParams } from "react-router-dom";
+import { UserType } from "./useAllUsers";
+import { useState, useEffect } from "react";
+
+function useGroupInfo() {
+  const { chatId } = useParams<{ chatId: string }>();
+  const [groupMembers, setGroupMembers] = useState<UserType[]>([]);
+  const [admins, setAdmins] = useState<UserType[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isCurrUserAdmin, setIsCurrUserAdmin] = useState(false);
+
+  const { chats, members: users } = useAppSelector((state) => state.chats);
+  const user = useAppSelector((state) => state.user.userInfo);
+
+  const group = chats.find((chat) => chat._id === chatId);
+
+  useEffect(() => {
+    if (users?.length) {
+      const members = group?.members
+        .map((groupMember) => {
+          const user = users?.find((member) => member._id === groupMember._id);
+          return user
+            ? {
+                ...user,
+                role: groupMember.Role
+              }
+            : null;
+        })
+        .filter((member) => member !== null);
+
+      const groupAdmins = members?.filter((member) => member.role === "admin");
+      setIsCurrUserAdmin(
+        members?.some(
+          (member) => member._id === user.id && member.role === "admin"
+        ) || false
+      );
+      setGroupMembers(members!);
+      setAdmins(groupAdmins!);
+      setIsLoading(false);
+    }
+  }, [group, users, user, isLoading]);
+
+  return {
+    groupMembers,
+    group,
+    isPending: isLoading,
+    admins,
+    isCurrUserAdmin,
+    chatId,
+    chatType: group?.type,
+    numGivenPermissions:
+      Number(group?.messagingPermission) + Number(group?.downloadingPermission)
+  };
+}
+
+export { useGroupInfo };
diff --git a/app/src/features/groups/services/getAllUsers.ts b/app/src/features/groups/services/getAllUsers.ts
new file mode 100644
index 00000000..24c809ae
--- /dev/null
+++ b/app/src/features/groups/services/getAllUsers.ts
@@ -0,0 +1,20 @@
+import { API_URL } from "@constants";
+
+export async function getAllUsers() {
+  const res = await fetch(`${API_URL}/users`, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+      "X-Session-Token": localStorage.getItem("sessionId") || "",
+    },
+    credentials: "include",
+  });
+
+  const data = await res.json();
+
+  if (data.status !== "success") {
+    throw new Error(data.message);
+  }
+
+  return data.data.users;
+}
diff --git a/app/src/features/pin-messages/components/PinnedMessageProgressBar.tsx b/app/src/features/pin-messages/components/PinnedMessageProgressBar.tsx
new file mode 100644
index 00000000..af8e09b9
--- /dev/null
+++ b/app/src/features/pin-messages/components/PinnedMessageProgressBar.tsx
@@ -0,0 +1,50 @@
+import styled from "styled-components";
+import { MessageInterface } from "types/messages";
+
+const ProgressBarContainer = styled.div`
+  position: relative;
+  height: 80%;
+  width: 2px;
+  background-color: var(--color-background-secondary);
+  border-radius: 2px;
+  margin-left: 0.5rem;
+`;
+
+const ProgressBarSegment = styled.div<{ $active: boolean }>`
+  flex-grow: 1;
+  height: 100%;
+  transition: background-color 0.3s ease-in-out;
+`;
+
+const ProgressBar = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+`;
+
+type PinnedMessageProgressBarProps = {
+  pinnedMessages: MessageInterface[];
+  currentPinnedIndex: number;
+};
+
+const PinnedMessageProgressBar: React.FC<PinnedMessageProgressBarProps> = ({
+  pinnedMessages,
+  currentPinnedIndex,
+}) => {
+  return (
+    <ProgressBarContainer data-testid="progress-bar-container">
+      <ProgressBar>
+        {pinnedMessages.map((_, index) => (
+          <ProgressBarSegment
+            key={index}
+            $active={index === currentPinnedIndex}
+          />
+        ))}
+      </ProgressBar>
+    </ProgressBarContainer>
+  );
+};
+
+export default PinnedMessageProgressBar;
diff --git a/app/src/features/pin-messages/components/PinnedMessages.tsx b/app/src/features/pin-messages/components/PinnedMessages.tsx
new file mode 100644
index 00000000..a523617d
--- /dev/null
+++ b/app/src/features/pin-messages/components/PinnedMessages.tsx
@@ -0,0 +1,100 @@
+import React, { useState, useMemo } from "react";
+import styled from "styled-components";
+import PinnedMessageProgressBar from "./PinnedMessageProgressBar";
+import { useAppSelector } from "@hooks/useGlobalState";
+import { getChatByID } from "@features/chats/utils/helpers";
+import { useParams } from "react-router-dom";
+import { MessageInterface } from "types/messages";
+
+const PinnedMessagesContainer = styled.div`
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  height: 100%;
+  width: 250px;
+  padding: 0.1rem;
+  margin: 0.2rem;
+  border-radius: 0.3rem;
+
+  &:hover {
+    background-color: var(--color-background-secondary);
+  }
+`;
+
+const PinnedMessageContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-left: 0.5rem;
+`;
+
+const PinnedMessageTitle = styled.div`
+  font-size: 0.875rem;
+  color: var(--accent-color);
+  font-weight: 600;
+`;
+
+const PinnedMessagePreview = styled.div`
+  font-size: 0.75rem;
+  color: var(--color-text);
+  max-width: 200px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+const PinnedMessages: React.FC = () => {
+  const { chatId } = useParams<{ chatId: string }>();
+
+  const chats = useAppSelector((state) => state.chats.chats);
+  const chat = chatId && getChatByID({ chatID: chatId, chats });
+
+  let pinnedMessages: MessageInterface[] = [];
+  if (chat)
+    pinnedMessages = chat.messages.filter((message) => message.isPinned);
+
+  const [currentPinnedIndex, setCurrentPinnedIndex] = useState(0);
+
+  const currentPinnedMessage = useMemo(() => {
+    return pinnedMessages[currentPinnedIndex];
+  }, [pinnedMessages, currentPinnedIndex]);
+
+  const handleNextPinnedMessage = () => {
+    if (pinnedMessages.length > 0) {
+      setCurrentPinnedIndex(
+        (prevIndex) => (prevIndex + 1) % pinnedMessages.length
+      );
+      document
+        .querySelector("[data-message-id='" + currentPinnedMessage?._id + "']")
+        ?.scrollIntoView({
+          behavior: "smooth",
+          block: "center",
+        });
+    }
+  };
+
+  if (pinnedMessages.length === 0) return null;
+
+  return (
+    <PinnedMessagesContainer
+      onClick={handleNextPinnedMessage}
+      data-testid="pinned-messages-container"
+    >
+      <PinnedMessageProgressBar
+        pinnedMessages={pinnedMessages}
+        currentPinnedIndex={currentPinnedIndex}
+      />
+
+      <PinnedMessageContent>
+        <PinnedMessageTitle data-testid="pinned-message-title">
+          Pinned Message {currentPinnedIndex + 1}
+        </PinnedMessageTitle>
+
+        <PinnedMessagePreview data-testid="pinned-message-preview">
+          {currentPinnedMessage?.content}
+        </PinnedMessagePreview>
+      </PinnedMessageContent>
+    </PinnedMessagesContainer>
+  );
+};
+
+export default PinnedMessages;
diff --git a/app/src/features/privacy-settings/AddToBlockMenuList.tsx b/app/src/features/privacy-settings/AddToBlockMenuList.tsx
index c72c4f7a..7338448e 100644
--- a/app/src/features/privacy-settings/AddToBlockMenuList.tsx
+++ b/app/src/features/privacy-settings/AddToBlockMenuList.tsx
@@ -2,15 +2,17 @@ import styled from "styled-components";
 import BlockItem, { BlockedUserProps } from "./BlockItem";
 import { useBlock } from "./hooks/useBlock";
 import { ScrollContainer } from "styles/GlobalStyles";
-import { useChats } from "@features/chats/hooks/useChats";
-import { Chat } from "@mocks/data/chats";
+import { useAppDispatch, useAppSelector } from "@hooks/useGlobalState";
+import { setMemberIsBlocked } from "@state/messages/chats";
 
 const StyledList = styled.ul<StyledListProps>`
   position: absolute;
-  width: ${(props) => props.$size}%;
-  right: ${(props) => (props.$right ?? 3) + 2}rem;
+  width: 70%;
+  right: 20%;
   bottom: ${(props) => (props.$bottom ?? 3) + 3}rem;
-  height: ${(props) => (props.$height ?? 3) + 3}rem;
+  height: fit-content;
+  max-height: ${(props) => (props.$height ?? 3) + 3}rem;
+  min-height: 3rem;
   z-index: 1;
   overflow: auto;
 
@@ -29,15 +31,11 @@ const StyledList = styled.ul<StyledListProps>`
 
 interface StyledListProps {
   $bottom?: number;
-  $right?: number;
-  $size?: number;
   $height?: number;
 }
 
 const menuStyles: StyledListProps = {
   $bottom: 5,
-  $right: 4,
-  $size: 70,
   $height: 30,
 };
 
@@ -45,50 +43,50 @@ const StylingWrapper = styled.div`
   width: 100%;
 `;
 
-function filterChats(blockList: BlockedUserProps[], chats: Chat[]) {
-  const blockIds = blockList
-    ? new Set(blockList.map((val) => val.id))
-    : new Set();
-  const filteredChats = chats?.filter((item) => !blockIds.has(item.id));
-
-  return filteredChats;
-}
+const StyledP = styled.p`
+  font-size: 1rem;
+  color: var(--color-text-secondary);
+  justify-self: center;
+  align-self: center;
+`;
 
 function AddToBlockMenuList({ setIsMenuOpened }: any) {
   const { addToBlockList } = useBlock();
 
-  const { blockList } = useBlock();
-  const { chats } = useChats();
+  const members = useAppSelector((state) => state.chats.members);
+  const userId = useAppSelector((state) => state.user.userInfo.id);
 
-  const filteredChats = filterChats(
-    blockList as BlockedUserProps[],
-    chats as Chat[]
-  );
+  const dispatch = useAppDispatch();
 
-  function handleClick(item: Chat) {
+  function handleClick(item: BlockedUserProps) {
     setIsMenuOpened(false);
-    addToBlockList({ id: item.id.toString() });
+    addToBlockList({ id: item.id });
+    dispatch(
+      setMemberIsBlocked({ memberId: item.id, isBlocked: true, userId })
+    );
   }
 
   return (
     <StyledList {...menuStyles}>
       <ScrollContainer>
-        {filteredChats?.map((item) => {
-          const data: BlockedUserProps = {
-            name: item.name,
-            id: item.id,
-            username: item.name.toLowerCase() + 123,
-          };
-          return (
-            <StylingWrapper
-              onClick={() => handleClick(item)}
-              key={data.id}
-              data-testid={`block-user-${data.id}`}
-            >
-              <BlockItem {...data} />
-            </StylingWrapper>
-          );
-        })}
+        {members.length ? (
+          members.map((member) => {
+            const data: BlockedUserProps = {
+              id: member._id,
+            };
+            return (
+              <StylingWrapper
+                onClick={() => handleClick(data)}
+                key={data.id}
+                data-testid={`block-user-${data.id}`}
+              >
+                <BlockItem {...data} />
+              </StylingWrapper>
+            );
+          })
+        ) : (
+          <StyledP>No Unblocked users found</StyledP>
+        )}
       </ScrollContainer>
     </StyledList>
   );
diff --git a/app/src/features/privacy-settings/BlockItem.tsx b/app/src/features/privacy-settings/BlockItem.tsx
index beac2bd9..41b50de8 100644
--- a/app/src/features/privacy-settings/BlockItem.tsx
+++ b/app/src/features/privacy-settings/BlockItem.tsx
@@ -1,10 +1,12 @@
 import Heading from "@components/Heading";
-import Avatar from "@features/chats/Avatar";
+import Avatar from "@components/Avatar";
 import styled from "styled-components";
 import { StyledList, StyledListProps } from "./AddToBlockMenuList";
 import { getIcon } from "@data/icons";
 import { useState } from "react";
 import { useBlock } from "./hooks/useBlock";
+import { useAppDispatch, useAppSelector } from "@hooks/useGlobalState";
+import { setMemberIsBlocked } from "@state/messages/chats";
 
 const StyledSideBarRow = styled.div`
   width: 100%;
@@ -48,8 +50,6 @@ const StyledP = styled.p`
 
 const menuStyles: StyledListProps = {
   $bottom: -6,
-  $right: 0,
-  $size: 40,
   $height: 0,
 };
 
@@ -67,19 +67,26 @@ const HoverMask = styled.div`
 `;
 
 interface BlockedUserInterface {
-  id: number;
-  name: string;
-  username: string;
+  id: string;
 }
 
-function BlockItem({ id, name, username }: BlockedUserInterface) {
+function BlockItem({ id }: BlockedUserInterface) {
   const [isBlockButtonEnabled, setIsBlockButtonEnabled] = useState(false);
-
   const { removeFromBlockList } = useBlock();
 
-  function handleRemove(id: number) {
+  const members = useAppSelector((state) => state.chats.members);
+  const userId = useAppSelector((state) => state.user.userInfo.id);
+  const { screenFirstName, screenLastName, username } =
+    members.find((member) => member._id === id) || {};
+
+  const name = screenFirstName + " " + screenLastName || "";
+
+  const dispatch = useAppDispatch();
+
+  function handleRemoveFromBlock(id: string) {
     removeFromBlockList({ id: id.toString() });
     setIsBlockButtonEnabled(false);
+    dispatch(setMemberIsBlocked({ memberId: id, isBlocked: false, userId }));
   }
 
   return (
@@ -98,7 +105,7 @@ function BlockItem({ id, name, username }: BlockedUserInterface) {
       {isBlockButtonEnabled && (
         <StyledList
           {...menuStyles}
-          onClick={() => handleRemove(id)}
+          onClick={() => handleRemoveFromBlock(id)}
           data-testid={`remove-from-blocklist-${id}`}
         >
           <HoverMask>
diff --git a/app/src/features/privacy-settings/BlockList.tsx b/app/src/features/privacy-settings/BlockList.tsx
index 02915345..ed5d9ad1 100644
--- a/app/src/features/privacy-settings/BlockList.tsx
+++ b/app/src/features/privacy-settings/BlockList.tsx
@@ -6,6 +6,7 @@ import { useBlock } from "./hooks/useBlock";
 import CircleIcon from "@components/CircleIcon";
 import { useState } from "react";
 import AddToBlockMenuList from "./AddToBlockMenuList";
+import { useSidebarType } from "@components/side-bar/SideBarContext";
 
 const StyledOptionsList = styled.div`
   display: flex;
@@ -22,15 +23,39 @@ const PlaceHeader = styled.div`
   padding-bottom: 0.5rem;
 `;
 
+export interface BlockListInterface {
+  id: string;
+  username: string;
+  email: string;
+  _id: string;
+}
+
 function BlockList() {
-  const { props } = useAppSelector((state) => state.sideBarData);
+  const type = useSidebarType();
 
+  const { props } = useAppSelector((state) =>
+    type === "left"
+      ? state.sideBarData.leftSideBar
+      : state.sideBarData.rightSideBar
+  );
   const { blockList } = useBlock();
 
   const [isMenuOpened, setIsMenuOpened] = useState(false);
 
   return (
     <StyledOptionsList>
+      {isMenuOpened && <AddToBlockMenuList setIsMenuOpened={setIsMenuOpened} />}
+
+      <PlaceHeader>
+        {props && "subtitle" in props && typeof props.subtitle === "string" && (
+          <Heading as="h6">{props?.subtitle}</Heading>
+        )}
+      </PlaceHeader>
+
+      {blockList?.map((item: BlockListInterface) => {
+        return <BlockItem id={item.id} key={item.id} />;
+      })}
+
       <CircleIcon
         $icon="Add"
         $right={1}
@@ -41,18 +66,6 @@ function BlockList() {
         onClick={() => setIsMenuOpened(!isMenuOpened)}
         data-testid="block-user-menu-icon"
       />
-
-      {isMenuOpened && <AddToBlockMenuList setIsMenuOpened={setIsMenuOpened} />}
-
-      <PlaceHeader>
-        {props && "subtitle" in props && typeof props.subtitle === "string" && (
-          <Heading as="h6">{props?.subtitle}</Heading>
-        )}
-      </PlaceHeader>
-
-      {blockList?.map((item) => {
-        return <BlockItem {...item} key={item.id} />;
-      })}
     </StyledOptionsList>
   );
 }
diff --git a/app/src/features/privacy-settings/hooks/useBlock.ts b/app/src/features/privacy-settings/hooks/useBlock.ts
index a7aef209..40f60b83 100644
--- a/app/src/features/privacy-settings/hooks/useBlock.ts
+++ b/app/src/features/privacy-settings/hooks/useBlock.ts
@@ -1,28 +1,22 @@
-import {
-  QueryClient,
-  useMutation,
-  useQuery,
-  useQueryClient,
-} from "@tanstack/react-query";
-import getBlockList from "@features/privacy-settings/service/getBlockList";
-import { blockUser } from "../service/blockUser";
-import { BlockedUserProps } from "../BlockItem";
-import { removeFromBlock } from "../service/removeFromBlocks";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import apiGetBlockList from "@features/privacy-settings/service/apiGetBlockList";
+import { apiBlockUser } from "../service/apiBlockUser";
+import { apiRemoveFromBlock } from "../service/apiRemoveFromBlocks";
 
 export function useBlock() {
-  const { data: blockList } = useQuery<BlockedUserProps[]>({
+  const { data: blockList } = useQuery({
     queryKey: ["block"],
-    queryFn: () => getBlockList(),
+    queryFn: () => apiGetBlockList(),
   });
 
   const queryClient = useQueryClient();
   const { mutateAsync: addToBlockList } = useMutation({
-    mutationFn: blockUser,
+    mutationFn: apiBlockUser,
     onSuccess: () => queryClient.invalidateQueries({ queryKey: ["block"] }),
   });
 
   const { mutateAsync: removeFromBlockList } = useMutation({
-    mutationFn: removeFromBlock,
+    mutationFn: apiRemoveFromBlock,
     onSuccess: () => queryClient.invalidateQueries({ queryKey: ["block"] }),
   });
 
diff --git a/app/src/features/privacy-settings/hooks/useUpdatePrivacy.ts b/app/src/features/privacy-settings/hooks/useUpdatePrivacy.ts
index 5f6f4d44..7191a600 100644
--- a/app/src/features/privacy-settings/hooks/useUpdatePrivacy.ts
+++ b/app/src/features/privacy-settings/hooks/useUpdatePrivacy.ts
@@ -1,10 +1,10 @@
 import { useMutation } from "@tanstack/react-query";
-import { changeSettings } from "@features/privacy-settings/service/changeSettings";
+import { apiChangeSettings } from "@features/privacy-settings/service/apiChangeSettings";
 
 export function useUpdatePrivacy() {
   const { mutateAsync: updatePrivacy } = useMutation({
     mutationKey: ["privacy"],
-    mutationFn: changeSettings,
+    mutationFn: apiChangeSettings,
     onSuccess: () => {},
   });
 
diff --git a/app/src/features/privacy-settings/service/blockUser.ts b/app/src/features/privacy-settings/service/apiBlockUser.ts
similarity index 61%
rename from app/src/features/privacy-settings/service/blockUser.ts
rename to app/src/features/privacy-settings/service/apiBlockUser.ts
index cc4adbf2..ca91e50e 100644
--- a/app/src/features/privacy-settings/service/blockUser.ts
+++ b/app/src/features/privacy-settings/service/apiBlockUser.ts
@@ -4,18 +4,19 @@ interface requestType {
   id: string;
 }
 
-async function blockUser(data: requestType) {
+async function apiBlockUser(data: requestType) {
   const res = await fetch(`${API_URL}/users/block/${data.id}`, {
-    method: "PATCH",
+    method: "POST",
     credentials: "include",
     headers: {
       "Content-Type": "application/json",
+      "X-Session-Token": localStorage.getItem("sessionId") || "",
     },
   });
 
-  if (res.status !== 200) {
+  if (!res.ok) {
     throw new Error(res.statusText);
   }
 }
 
-export { blockUser };
+export { apiBlockUser };
diff --git a/app/src/features/privacy-settings/service/changeSettings.ts b/app/src/features/privacy-settings/service/apiChangeSettings.ts
similarity index 86%
rename from app/src/features/privacy-settings/service/changeSettings.ts
rename to app/src/features/privacy-settings/service/apiChangeSettings.ts
index a652f6e0..9f081861 100644
--- a/app/src/features/privacy-settings/service/changeSettings.ts
+++ b/app/src/features/privacy-settings/service/apiChangeSettings.ts
@@ -10,7 +10,7 @@ enum endPts {
   addToChannelPrivacy = "invite-permissions",
 }
 
-async function changeSettings(data: {
+async function apiChangeSettings(data: {
   key: keyof typeof endPts;
   value: privacyStatesStrings | activeStatesStrings;
 }) {
@@ -19,12 +19,12 @@ async function changeSettings(data: {
   const endpt = endPts[key];
   const reqBody = { privacy: value.toLowerCase() };
 
-
   const res = await fetch(`${API_URL}/users/privacy/${endpt}`, {
     method: "PATCH",
     credentials: "include",
     headers: {
       "Content-Type": "application/json",
+      "X-Session-Token": localStorage.getItem("sessionId") || "",
     },
     body: JSON.stringify(reqBody),
   });
@@ -34,5 +34,5 @@ async function changeSettings(data: {
   }
 }
 
-export { changeSettings };
+export { apiChangeSettings };
 export { endPts };
diff --git a/app/src/features/privacy-settings/service/getBlockList.ts b/app/src/features/privacy-settings/service/apiGetBlockList.ts
similarity index 57%
rename from app/src/features/privacy-settings/service/getBlockList.ts
rename to app/src/features/privacy-settings/service/apiGetBlockList.ts
index 6766e2c8..26f2951d 100644
--- a/app/src/features/privacy-settings/service/getBlockList.ts
+++ b/app/src/features/privacy-settings/service/apiGetBlockList.ts
@@ -1,17 +1,18 @@
 import { API_URL } from "@constants";
 
-import { BlockedUserProps } from "../BlockItem";
-
-async function getBlockList() {
+async function apiGetBlockList() {
   const response = await fetch(`${API_URL}/users/block`, {
     method: "GET",
     credentials: "include",
+    headers: {
+      "X-Session-Token": localStorage.getItem("sessionId") || "",
+    },
   });
 
   const data = await response.json();
 
   if (!response.ok) throw new Error(data.message);
-  return data.users as BlockedUserProps[];
+  return data.data.users;
 }
 
-export default getBlockList;
+export default apiGetBlockList;
diff --git a/app/src/features/privacy-settings/service/removeFromBlocks.ts b/app/src/features/privacy-settings/service/apiRemoveFromBlocks.ts
similarity index 68%
rename from app/src/features/privacy-settings/service/removeFromBlocks.ts
rename to app/src/features/privacy-settings/service/apiRemoveFromBlocks.ts
index b051b964..a360bea5 100644
--- a/app/src/features/privacy-settings/service/removeFromBlocks.ts
+++ b/app/src/features/privacy-settings/service/apiRemoveFromBlocks.ts
@@ -4,12 +4,13 @@ interface requestType {
   id: string;
 }
 
-async function removeFromBlock(data: requestType) {
+async function apiRemoveFromBlock(data: requestType) {
   const res = await fetch(`${API_URL}/users/block/${data.id}`, {
     method: "DELETE",
     credentials: "include",
     headers: {
       "Content-Type": "application/json",
+      "X-Session-Token": localStorage.getItem("sessionId") || "",
     },
   });
 
@@ -18,4 +19,4 @@ async function removeFromBlock(data: requestType) {
   }
 }
 
-export { removeFromBlock };
+export { apiRemoveFromBlock };
diff --git a/app/src/features/profile-info/ProfileInfo.tsx b/app/src/features/profile-info/ProfileInfo.tsx
index 2c528bc0..aa517297 100644
--- a/app/src/features/profile-info/ProfileInfo.tsx
+++ b/app/src/features/profile-info/ProfileInfo.tsx
@@ -1,5 +1,4 @@
 import { useProfileSettings } from "@features/profile-settings/hooks/useProfileSettings";
-import { AlternateEmailTwoTone, Email, Info, Phone } from "@mui/icons-material";
 import styled from "styled-components";
 import ProfileItem from "./components/ProfileItem";
 
@@ -18,20 +17,36 @@ function ProfileInfo() {
   return (
     <ProfileInfoStyled>
       {profileSettings?.phone && (
-        <ProfileItem data={profileSettings.phone} ribbon="Phone" Icon={Phone} />
+        <ProfileItem
+          data={profileSettings.phone}
+          ribbon="Phone"
+          icon="Phone"
+          data-testid="phone-profile-item"
+        />
       )}
       {profileSettings?.email && (
-        <ProfileItem data={profileSettings.email} ribbon="Email" Icon={Email} />
+        <ProfileItem
+          data={profileSettings.email}
+          ribbon="Email"
+          icon="Email"
+          data-testid="email-profile-item"
+        />
       )}
       {profileSettings?.username && (
         <ProfileItem
           data={profileSettings.username}
           ribbon="Username"
-          Icon={AlternateEmailTwoTone}
+          icon="AlternateEmailTwoTone"
+          data-testid="username-profile-item"
         />
       )}
       {profileSettings?.bio && (
-        <ProfileItem data={profileSettings.bio} ribbon="Bio" Icon={Info} />
+        <ProfileItem
+          data={profileSettings.bio}
+          ribbon="Bio"
+          icon="Info"
+          data-testid="bio-profile-item"
+        />
       )}
     </ProfileInfoStyled>
   );
diff --git a/app/src/features/profile-info/components/ProfileItem.tsx b/app/src/features/profile-info/components/ProfileItem.tsx
index e0d8ac2f..abe162d1 100644
--- a/app/src/features/profile-info/components/ProfileItem.tsx
+++ b/app/src/features/profile-info/components/ProfileItem.tsx
@@ -1,3 +1,4 @@
+import { getIcon } from "@data/icons";
 import styled from "styled-components";
 
 const ProfileItemStyled = styled.div`
@@ -27,15 +28,13 @@ const ProfileItemRibbon = styled.span`
 interface ProfileItemProps {
   data: string;
   ribbon: string;
-  Icon: React.ElementType;
+  icon: string;
 }
 
-function ProfileItem({ data, ribbon, Icon }: ProfileItemProps) {
+function ProfileItem({ data, ribbon, icon }: ProfileItemProps) {
   return (
     <ProfileItemStyled>
-      <ProfileItemIcon>
-        <Icon />
-      </ProfileItemIcon>
+      <ProfileItemIcon>{getIcon(icon)}</ProfileItemIcon>
       <ProfileItemInfo>
         <ProfileItemData>{data}</ProfileItemData>
         <ProfileItemRibbon>{ribbon}</ProfileItemRibbon>
diff --git a/app/src/features/profile-settings/ProfilePictureSection.tsx b/app/src/features/profile-settings/ProfilePictureSection.tsx
new file mode 100644
index 00000000..234f59cd
--- /dev/null
+++ b/app/src/features/profile-settings/ProfilePictureSection.tsx
@@ -0,0 +1,101 @@
+import styled from "styled-components";
+import { getIcon } from "@data/icons";
+import ImageEditor from "@components/ImageEditor";
+import { useState } from "react";
+
+interface ProfilePictureSectionProps {
+  initials?: string;
+  handleImageUpload?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+const UploadProfilePicture = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  align-items: center;
+  padding: 1rem 1.5rem;
+  background-color: var(--color-background);
+  position: relative;
+  cursor: pointer;
+
+  &:hover svg {
+    scale: 1.2;
+  }
+`;
+
+const UploadProfilePictureIcon = styled.div`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: white;
+  cursor: pointer;
+  z-index: 5;
+
+  svg {
+    transition: all 0.2s ease-out;
+    transform-origin: center;
+    font-size: 3rem;
+  }
+`;
+
+const StyledImageInput = styled.input`
+  position: absolute;
+  top: 1rem;
+  left: calc(50% - 4rem);
+  width: 8rem;
+  height: 8rem;
+  opacity: 0;
+  z-index: 10;
+  cursor: pointer;
+`;
+const StyledProfileImage = styled.img`
+  width: 8rem;
+  height: 8rem;
+  border-radius: 50%;
+  object-fit: cover;
+`;
+const DefaultProfilePicture = styled.div`
+  width: 8rem;
+  height: 8rem;
+  border-radius: 50%;
+  background-color: var(--accent-color);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 2rem;
+  color: white;
+  font-weight: bold;
+  opacity: 0.8;
+`;
+function ProfilePictureSection({
+  initials,
+  handleImageUpload,
+}: ProfilePictureSectionProps) {
+  const [selectedImage, setSelectedImage] = useState<string | null>(null);
+  const [isImageEditorOpen, setIsImageEditorOpen] = useState(false);
+  return (
+    <UploadProfilePicture>
+      <StyledImageInput
+        type="file"
+        accept="image/*"
+        onChange={handleImageUpload}
+        data-testid="image-upload"
+        id="photo"
+      />
+      {selectedImage ? (
+        <>
+          <UploadProfilePictureIcon>
+            {getIcon("AddPhoto")}
+          </UploadProfilePictureIcon>
+          <StyledProfileImage src={selectedImage} alt="Profile Picture" />
+        </>
+      ) : (
+        <DefaultProfilePicture>{initials}</DefaultProfilePicture>
+      )}
+      <ImageEditor isOpen={isImageEditorOpen} />
+    </UploadProfilePicture>
+  );
+}
+
+export default ProfilePictureSection;
diff --git a/app/src/features/profile-settings/ProfileSettings.tsx b/app/src/features/profile-settings/ProfileSettings.tsx
index 09f1672d..e24575c6 100644
--- a/app/src/features/profile-settings/ProfileSettings.tsx
+++ b/app/src/features/profile-settings/ProfileSettings.tsx
@@ -1,6 +1,5 @@
 import styled from "styled-components";
 
-import { Check } from "@mui/icons-material";
 import { useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import FloatingLabelInput from "@components/inputs/float-label-input/FloatingLabelInput";
@@ -21,16 +20,16 @@ import { sideBarPages } from "types/sideBar";
 import { useAppDispatch } from "@hooks/useGlobalState";
 import { useUpdateProfilePicture } from "./hooks/useUpdateProfilePicture";
 import { useDeleteProfilePicture } from "./hooks/useDeleteProfilePicture";
+import { useSidebarType } from "@components/side-bar/SideBarContext";
 
 const SideBarContainer = styled.div`
   overflow-y: auto;
-
   & > form {
     display: flex;
     flex-direction: column;
     gap: 1rem;
     width: 100%;
-    min-height: 100dvh;
+    height: 90vh;
     background-color: var(--color-background-secondary);
   }
 `;
@@ -83,7 +82,7 @@ const DeleteProfilePictureContainer = styled.div`
   position: absolute;
   bottom: 1rem;
   right: calc(50% - 4rem);
-  z-index: 5000;
+  z-index: 20;
   background-color: red;
   border: 0.1rem solid var(--color-border);
   border-radius: 50%;
@@ -181,8 +180,12 @@ function ProfileSettings() {
   const { updateProfileSettings, isPending } = useUpdateProfileSettings();
   const { deleteProfilePicture } = useDeleteProfilePicture();
   const { updateProfilePicture } = useUpdateProfilePicture();
+  const sideBarType = useSidebarType();
 
   const [selectedImageFile, setSelectedImageFile] = useState<File | null>(null);
+  const [hasImage, setHasImage] = useState(
+    Boolean(initialProfileSettings?.photo)
+  );
   const [photoChanged, setPhotoChanged] = useState(false);
 
   const [isDeleting, setIsDeleting] = useState(false);
@@ -223,15 +226,16 @@ function ProfileSettings() {
       setPhotoChanged(true);
       const file = event.target.files[0];
       setSelectedImageFile(file);
+      setHasImage(true);
     }
   };
 
   const handleDeleteImage = () => {
     setSelectedImageFile(null);
     setIsDeleting(false);
+    setHasImage(false);
     setPhotoChanged(true);
   };
-
   const onSubmit = async (data: EditProfileForm) => {
     try {
       if (photoChanged) {
@@ -243,12 +247,13 @@ function ProfileSettings() {
       }
 
       updateProfileSettings(data);
-      toast.success("updated profile settings successfully");
+      toast.success("Profile settings updated successfully!");
+
       if (!isPending) {
         dispatch(
           updateSideBarView({
             redirect: sideBarPages.SETTINGS,
-            data: undefined,
+            data: { type: sideBarType },
           })
         );
       }
@@ -258,6 +263,7 @@ function ProfileSettings() {
       );
     }
   };
+
   const firstName = watch("firstName") || "";
   const lastName = watch("lastName") || "";
   const initials = `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase();
@@ -270,13 +276,14 @@ function ProfileSettings() {
 
         <SettingSection>
           <ProfilePictureSection>
-            {selectedImageFile && (
+            {hasImage && (
               <>
                 <DeleteProfilePictureContainer
                   onClick={() => setIsDeleting(true)}
                 >
                   {getIcon("Delete")}
                 </DeleteProfilePictureContainer>
+
                 <Modal
                   isOpen={isDeleting}
                   title="Delete photo"
@@ -402,7 +409,7 @@ function ProfileSettings() {
           $revealed={isDirty || photoChanged}
           data-testid="submit-button"
         >
-          <Check />
+          {getIcon("Check")}
         </SubmitButton>
       </form>
     </SideBarContainer>
@@ -410,3 +417,4 @@ function ProfileSettings() {
 }
 
 export default ProfileSettings;
+export { SubmitButton };
diff --git a/app/src/features/profile-settings/hooks/useDeleteProfilePicture.ts b/app/src/features/profile-settings/hooks/useDeleteProfilePicture.ts
index 69019f49..e8ba8a04 100644
--- a/app/src/features/profile-settings/hooks/useDeleteProfilePicture.ts
+++ b/app/src/features/profile-settings/hooks/useDeleteProfilePicture.ts
@@ -1,6 +1,7 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 
-import { DeleteProfilePicture as DeleteProfilePictureAPI } from "../services/DeleteProfilePicture";
+import { DeleteProfilePicture as DeleteProfilePictureAPI } from "../services/apiDeleteProfilePicture";
+import toast from "react-hot-toast";
 
 function useDeleteProfilePicture() {
   const queryClient = useQueryClient();
@@ -15,6 +16,9 @@ function useDeleteProfilePicture() {
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["profilePicture"] });
     },
+    onError: () => {
+      toast.error("Something went wrong. Please try again.");
+    },
   });
 
   return { deleteProfilePicture, data, error, isPending };
diff --git a/app/src/features/profile-settings/hooks/useProfileSettings.ts b/app/src/features/profile-settings/hooks/useProfileSettings.ts
index 5180a596..12015468 100644
--- a/app/src/features/profile-settings/hooks/useProfileSettings.ts
+++ b/app/src/features/profile-settings/hooks/useProfileSettings.ts
@@ -1,6 +1,6 @@
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 
-import { GetProfileSettings as GetProfileSettingsAPI } from "../services/GetProfileSettings";
+import { GetProfileSettings as GetProfileSettingsAPI } from "../services/apiGetProfileSettings";
 
 function useProfileSettings() {
   const queryClient = useQueryClient();
diff --git a/app/src/features/profile-settings/hooks/useUpdateProfilePicture.ts b/app/src/features/profile-settings/hooks/useUpdateProfilePicture.ts
index 514f02be..37876706 100644
--- a/app/src/features/profile-settings/hooks/useUpdateProfilePicture.ts
+++ b/app/src/features/profile-settings/hooks/useUpdateProfilePicture.ts
@@ -1,6 +1,7 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 
-import { UpdateProfilePicture as UpdateProfilePictureAPI } from "../services/UpdateProfilePicture";
+import { UpdateProfilePicture as UpdateProfilePictureAPI } from "../services/apiUpdateProfilePicture";
+import toast from "react-hot-toast";
 
 function useUpdateProfilePicture() {
   const queryClient = useQueryClient();
@@ -15,6 +16,9 @@ function useUpdateProfilePicture() {
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["profilePicture"] });
     },
+    onError: () => {
+      toast.error("Something went wrong. Please try again.");
+    },
   });
 
   return { updateProfilePicture, data, error, isPending };
diff --git a/app/src/features/profile-settings/hooks/useUpdateProfileSettings.ts b/app/src/features/profile-settings/hooks/useUpdateProfileSettings.ts
index 20fbb1f1..fd553a56 100644
--- a/app/src/features/profile-settings/hooks/useUpdateProfileSettings.ts
+++ b/app/src/features/profile-settings/hooks/useUpdateProfileSettings.ts
@@ -1,6 +1,6 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 
-import { UpdateProfileSettings as UpdateProfileSettingsAPI } from "../services/UpdateProfileSettings";
+import { UpdateProfileSettings as UpdateProfileSettingsAPI } from "../services/apiUpdateProfileSettings";
 
 function useUpdateProfileSettings() {
   const queryClient = useQueryClient();
diff --git a/app/src/features/profile-settings/services/DeleteProfilePicture.ts b/app/src/features/profile-settings/services/apiDeleteProfilePicture.ts
similarity index 64%
rename from app/src/features/profile-settings/services/DeleteProfilePicture.ts
rename to app/src/features/profile-settings/services/apiDeleteProfilePicture.ts
index 1181b42d..e81a1b17 100644
--- a/app/src/features/profile-settings/services/DeleteProfilePicture.ts
+++ b/app/src/features/profile-settings/services/apiDeleteProfilePicture.ts
@@ -4,8 +4,15 @@ async function DeleteProfilePicture() {
   const res = await fetch(`${API_URL}/users/picture`, {
     method: "DELETE",
     credentials: "include",
+    headers: {
+      "X-Session-Token": localStorage.getItem("sessionId") || "",
+    },
   });
 
+  if (res.status === 204) {
+    return { status: "success", message: "Story deleted successfully." };
+  }
+
   const data = await res.json();
 
   if (data.status !== "success") {
diff --git a/app/src/features/profile-settings/services/GetProfileSettings.ts b/app/src/features/profile-settings/services/apiGetProfileSettings.ts
similarity index 91%
rename from app/src/features/profile-settings/services/GetProfileSettings.ts
rename to app/src/features/profile-settings/services/apiGetProfileSettings.ts
index 705b6985..cd45ca3a 100644
--- a/app/src/features/profile-settings/services/GetProfileSettings.ts
+++ b/app/src/features/profile-settings/services/apiGetProfileSettings.ts
@@ -5,6 +5,7 @@ async function GetProfileSettings() {
     method: "GET",
     headers: {
       "Content-Type": "application/json",
+      "X-Session-Token": localStorage.getItem("sessionId") || "",
     },
     credentials: "include",
   });
diff --git a/app/src/features/profile-settings/services/UpdateProfilePicture.ts b/app/src/features/profile-settings/services/apiUpdateProfilePicture.ts
similarity index 86%
rename from app/src/features/profile-settings/services/UpdateProfilePicture.ts
rename to app/src/features/profile-settings/services/apiUpdateProfilePicture.ts
index c90fde4b..303c1c0b 100644
--- a/app/src/features/profile-settings/services/UpdateProfilePicture.ts
+++ b/app/src/features/profile-settings/services/apiUpdateProfilePicture.ts
@@ -9,6 +9,9 @@ async function UpdateProfilePicture(imageFile: File) {
       method: "PATCH",
       body: formData,
       credentials: "include",
+      headers: {
+        "X-Session-Token": localStorage.getItem("sessionId") || "",
+      },
     });
 
     if (!response.ok) {
diff --git a/app/src/features/profile-settings/services/UpdateProfileSettings.ts b/app/src/features/profile-settings/services/apiUpdateProfileSettings.ts
similarity index 92%
rename from app/src/features/profile-settings/services/UpdateProfileSettings.ts
rename to app/src/features/profile-settings/services/apiUpdateProfileSettings.ts
index d84335d6..4349cb9e 100644
--- a/app/src/features/profile-settings/services/UpdateProfileSettings.ts
+++ b/app/src/features/profile-settings/services/apiUpdateProfileSettings.ts
@@ -15,6 +15,7 @@ async function UpdateProfileSettings(newProfileSettings: EditProfileForm) {
     method: "PATCH",
     headers: {
       "Content-Type": "application/json",
+      "X-Session-Token": localStorage.getItem("sessionId") || "",
     },
     body: JSON.stringify(formattedNewProfileSettings),
     credentials: "include",
diff --git a/app/src/features/search/components/NoResultsFound.tsx b/app/src/features/search/components/NoResultsFound.tsx
new file mode 100644
index 00000000..26edae5e
--- /dev/null
+++ b/app/src/features/search/components/NoResultsFound.tsx
@@ -0,0 +1,52 @@
+import Lottie from "lottie-react";
+import styled from "styled-components";
+import noResultsAnimation from "@data/animations/not_found.json";
+
+const NoResultsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding-bottom: 2rem;
+`;
+
+const NoResultsIcon = styled.div`
+  --icon-size: 8rem;
+  width: var(--icon-size);
+  height: var(--icon-size);
+`;
+
+const NoResultsText = styled.p`
+  font-size: 1.5rem;
+  font-weight: 500;
+  color: var(--color-text-secondary);
+`;
+
+const NoResultsSubText = styled.p`
+  font-size: 1rem;
+  font-weight: 400;
+  color: var(--color-text-secondary);
+`;
+
+interface NoResultsFoundProps {
+  message?: string;
+  subMessage?: string;
+}
+
+const NoResultsFound: React.FC<NoResultsFoundProps> = ({
+  message = "No results found",
+  subMessage = "Try searching for something else",
+}) => {
+  return (
+    <NoResultsContainer data-testid="no-results-container">
+      <NoResultsIcon>
+        <Lottie animationData={noResultsAnimation} key="no-results-image" />
+      </NoResultsIcon>
+      <NoResultsText data-testid="no-results-text">{message}</NoResultsText>
+      <NoResultsSubText>{subMessage}</NoResultsSubText>
+    </NoResultsContainer>
+  );
+};
+
+export default NoResultsFound;
diff --git a/app/src/features/search/components/SearchBar.tsx b/app/src/features/search/components/SearchBar.tsx
new file mode 100644
index 00000000..f273eec6
--- /dev/null
+++ b/app/src/features/search/components/SearchBar.tsx
@@ -0,0 +1,194 @@
+import { useState, useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import styled from "styled-components";
+import { getIcon } from "@data/icons";
+import Icon from "@components/Icon";
+import { RootState } from "@state/store";
+import {
+  setSearchTerm,
+  setSearchResults,
+  moveToNextResult,
+  moveToPreviousResult,
+  clearSearch,
+} from "@state/messages/search";
+import { useParams } from "react-router-dom";
+
+const SearchContainer = styled.div`
+  display: flex;
+  align-items: center;
+  flex: 1;
+  border-radius: 20px;
+  padding: 5px 10px;
+  background-color: var(--color-background-secondary);
+  box-shadow: 0 0 0.625rem 0 var(--color-default-shadow);
+  &:focus-within {
+    border: 1px solid var(--color-search-border);
+  }
+`;
+
+const SearchInput = styled.input`
+  border: none;
+  background-color: transparent;
+  outline: none;
+  color: var(--color-text);
+  flex: 1;
+  font-size: 14px;
+  margin-left: 1rem;
+  width: 100%;
+  &::placeholder {
+    color: var(--color-text-secondary);
+  }
+`;
+
+const IconButton = styled.button`
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--color-text-secondary);
+  padding: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+
+const SuggestionButtons = styled.div`
+  display: flex;
+  flex-direction: row;
+`;
+
+const ResultCounter = styled.span`
+  color: var(--color-text-secondary);
+  font-size: 0.75rem;
+  margin-right: 0.5rem;
+`;
+
+interface SearchBarProps {
+  onClose: () => void;
+}
+
+const SearchBar: React.FC<SearchBarProps> = ({ onClose }) => {
+  const dispatch = useDispatch();
+  const chatId = useParams<{ chatId: string }>().chatId;
+  const { searchTerm, searchResults, currentResultIndex } = useSelector(
+    (state: RootState) => state.search,
+  );
+  const currentChat = useSelector((state: RootState) =>
+    state.chats.chats.find((chat) => chat._id === chatId),
+  );
+
+  const [isSearchLoading, setIsSearchLoading] = useState(false);
+
+  const findAllMatchIndices = (text: string, term: string) => {
+    const indices = [];
+    let index = text.toLowerCase().indexOf(term.toLowerCase());
+    while (index !== -1) {
+      indices.push(index);
+      index = text.toLowerCase().indexOf(term.toLowerCase(), index + 1);
+    }
+    return indices;
+  };
+
+  useEffect(() => {
+    const messages = currentChat?.messages ?? [];
+
+    const performSearch = (term: string) => {
+      if (!term) {
+        dispatch(setSearchResults([]));
+        setIsSearchLoading(false);
+        return;
+      }
+
+      const results = messages.reduce(
+        (
+          acc: Array<{
+            messageId: string;
+            highlightIndex: number;
+          }>,
+          message,
+        ) => {
+          const lowerCaseTerm = term.toLowerCase();
+          const lowerCaseContent = message.content.toLowerCase();
+
+          if (lowerCaseContent.includes(lowerCaseTerm)) {
+            const matchIndices = findAllMatchIndices(message.content, term);
+            matchIndices.forEach((highlightIndex) => {
+              acc.push({
+                messageId: message._id,
+                highlightIndex,
+              });
+            });
+          }
+
+          return acc;
+        },
+        [],
+      );
+
+      dispatch(setSearchTerm(term));
+      dispatch(setSearchResults(results));
+      setIsSearchLoading(false);
+    };
+
+    const timer = setTimeout(() => {
+      performSearch(searchTerm);
+    }, 100);
+    return () => clearTimeout(timer);
+  }, [searchTerm, dispatch, currentChat?.messages]);
+
+  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+    dispatch(setSearchTerm(e.target.value));
+    setIsSearchLoading(true);
+  };
+
+  const handleClose = () => {
+    dispatch(clearSearch());
+    onClose();
+  };
+
+  return (
+    <SearchContainer>
+      <Icon data-testid="search-icon">
+        {isSearchLoading ? getIcon("CircularProgress") : getIcon("Search")}
+      </Icon>
+      <SearchInput
+        data-testid="search-input"
+        type="text"
+        placeholder="Search..."
+        value={searchTerm}
+        onChange={handleSearch}
+      />
+      <ResultCounter data-testid="search-result-counter">
+        {searchResults.length > 0
+          ? `${currentResultIndex + 1} of ${searchResults.length}`
+          : searchTerm.length > 0
+            ? "0 results"
+            : ""}
+      </ResultCounter>
+      <SuggestionButtons>
+        <IconButton
+          data-testid="previous-result-button"
+          onClick={() => dispatch(moveToPreviousResult())}
+          disabled={searchResults.length === 0}
+        >
+          {getIcon("KeyboardArrowUp")}
+        </IconButton>
+        <IconButton
+          data-testid="next-result-button"
+          onClick={() => dispatch(moveToNextResult())}
+          disabled={searchResults.length === 0}
+        >
+          {getIcon("KeyboardArrowDown")}
+        </IconButton>
+      </SuggestionButtons>
+      <IconButton onClick={handleClose} data-testid="close-search-button">
+        {getIcon("Close")}
+      </IconButton>
+    </SearchContainer>
+  );
+};
+
+export default SearchBar;
diff --git a/app/src/features/search/components/SearchTab.tsx b/app/src/features/search/components/SearchTab.tsx
new file mode 100644
index 00000000..8a2b06da
--- /dev/null
+++ b/app/src/features/search/components/SearchTab.tsx
@@ -0,0 +1,130 @@
+import React, { useMemo } from "react";
+import { RootState } from "@state/store";
+import { useSelector } from "react-redux";
+import { useSearch } from "@features/search/hooks/useSearch";
+import { SEARCH_TABS } from "@features/search/data/tabs-components-map";
+import NoResultsFound from "./NoResultsFound";
+import {
+  hasResults,
+  renderGlobalResults,
+  renderMessageResults
+} from "../utils/searchTabsHelpers";
+import ChannelResult from "./result-items/ChannelResult";
+import {
+  SearchResultChannel,
+  SearchResultGroup,
+  SearchResultMessage,
+  SearchResultUser
+} from "../types/search";
+import { useSearchPrivate } from "../hooks/useSearchPrivate";
+
+const SearchTab: React.FC = () => {
+  const { searchTerm, selectedTab } = useSelector(
+    (state: RootState) => state.globalSearch
+  );
+
+  const currentTab = SEARCH_TABS.find((tab) => tab.title === selectedTab);
+
+  const searchRequest = useMemo(
+    () => ({
+      query: searchTerm,
+      filter: currentTab?.filter || [],
+      searchSpace: currentTab?.searchSpace || [],
+      isGlobalSearch: currentTab?.isGlobalSearch || false
+    }),
+    [searchTerm, currentTab]
+  );
+
+  const { data, isLoading, error } = useSearch(searchRequest);
+  const {
+    searchResults: privateSearchResults,
+    isLoading: isPrivateLoading,
+    error: privateError
+  } = useSearchPrivate(searchRequest);
+
+  if (isLoading || isPrivateLoading)
+    return (
+      <NoResultsFound
+        message="Loading..."
+        subMessage="Wait for a moment please"
+      />
+    );
+
+  if (error || privateError)
+    return (
+      <NoResultsFound
+        message="An error occurred"
+        subMessage="Please try again later"
+      />
+    );
+
+  if (!hasResults(data)) return <NoResultsFound />;
+
+  return (
+    <div style={{ height: "100%" }}>
+      {selectedTab !== "Channels" &&
+        renderMessageResults(
+          privateSearchResults as SearchResultMessage[],
+          ["text", "image", "video", "GIF", "sticker", "link", "file", "audio"],
+          searchTerm
+        )}
+      {renderMessageResults(data!.searchResult, ["text"], searchTerm)}
+      {renderMessageResults(
+        data!.searchResult,
+        ["image", "video", "GIF", "sticker"],
+        searchTerm
+      )}
+      {renderMessageResults(data!.searchResult, ["link"], searchTerm)}
+      {renderMessageResults(data!.searchResult, ["file"], searchTerm)}
+      {renderMessageResults(data!.searchResult, ["audio"], searchTerm)}
+
+      {renderGlobalResults<SearchResultGroup>(
+        data?.globalSearchResult?.groups || [],
+        "Groups",
+        (group) => (
+          <ChannelResult
+            data-testid={`search-group-${group?.id}`}
+            key={`group-${group?.id}`}
+            title={group?.name}
+            image={group?.photo}
+            username={group?.name}
+            subscribers={group?.numberOfMembers}
+            chatId={group?.id}
+          />
+        )
+      )}
+
+      {renderGlobalResults<SearchResultChannel>(
+        data?.globalSearchResult?.channels || [],
+        "Channels",
+        (channel) => (
+          <ChannelResult
+            data-testid={`search-channel-${channel?.id}`}
+            key={`channel-${channel?.id}`}
+            title={channel?.name}
+            image={channel?.photo}
+            username={channel?.name}
+            subscribers={channel?.numberOfMembers}
+            chatId={channel?.id}
+          />
+        )
+      )}
+
+      {renderGlobalResults<SearchResultUser>(
+        data?.globalSearchResult?.users || [],
+        "Users",
+        (user) => (
+          <ChannelResult
+            data-testid={`search-user-${user?.id}`}
+            key={`user-${user?.id}`}
+            title={`${user?.screenFirstName} ${user?.screenLastName}`}
+            image={user?.photo}
+            username={user?.username}
+          />
+        )
+      )}
+    </div>
+  );
+};
+
+export default SearchTab;
diff --git a/app/src/features/search/components/TabedSearch.tsx b/app/src/features/search/components/TabedSearch.tsx
new file mode 100644
index 00000000..d42a2506
--- /dev/null
+++ b/app/src/features/search/components/TabedSearch.tsx
@@ -0,0 +1,120 @@
+import { RootState } from "@state/store";
+import { motion, AnimatePresence, LayoutGroup } from "motion/react";
+import { useDispatch, useSelector } from "react-redux";
+import styled from "styled-components";
+import { SEARCH_TABS } from "../data/tabs-components-map";
+import { setSelectedTab } from "@state/messages/global-search";
+
+const TabedSearchContainer = styled(motion.div)`
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 2;
+  background: var(--color-background-secondary);
+`;
+
+const TabListWrapper = styled.div`
+  display: flex;
+  position: relative;
+  overflow-x: scroll;
+  box-shadow: 0 2px 2px var(--color-light-shadow);
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
+
+const TabButton = styled.button<{ $active?: boolean }>`
+  position: relative;
+  padding: 12px 18px;
+  cursor: pointer;
+  font-size: 1rem;
+  font-weight: 500;
+  color: ${(props) =>
+    props.$active ? "var(--accent-color)" : "var(--color-text-secondary)"};
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  outline: none;
+  box-shadow: none;
+  z-index: 1;
+`;
+
+const TabUnderline = styled(motion.div)`
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background-color: var(--accent-color);
+  border-radius: 2px;
+`;
+
+const TabContent = styled(motion.div)`
+  overflow-y: scroll;
+  height: calc(100% - 96px);
+`;
+
+const TabedSearch: React.FC = () => {
+  const dispatch = useDispatch();
+  const { searchTerm, selectedTab } = useSelector(
+    (state: RootState) => state.globalSearch,
+  );
+
+  const isSearching = searchTerm.length > 0;
+
+  return (
+    <AnimatePresence>
+      {isSearching && (
+        <TabedSearchContainer
+          initial={{ opacity: 0, x: "-100%" }}
+          animate={{ opacity: 1, x: 0 }}
+          exit={{ opacity: 0, x: "-100%" }}
+          transition={{ type: "spring", duration: 0.2 }}
+          key="tap-search"
+          data-testid="active-tabed-search-container"
+        >
+          <LayoutGroup>
+            <TabListWrapper data-testid="tab-list-wrapper">
+              {SEARCH_TABS.map((tab) => (
+                <TabButton
+                  key={tab.title}
+                  onClick={() => dispatch(setSelectedTab(tab.title))}
+                  $active={selectedTab === tab.title}
+                  data-testid={`tab-button-${tab.title}`}
+                >
+                  {tab.title}
+                  {selectedTab === tab.title && (
+                    <TabUnderline
+                      layoutId="underline"
+                      transition={{ type: "spring", duration: 0.3 }}
+                    />
+                  )}
+                </TabButton>
+              ))}
+            </TabListWrapper>
+            <AnimatePresence mode="wait">
+              <TabContent
+                key={selectedTab}
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                transition={{ type: "tween", duration: 0.2 }}
+                data-testid="tab-content"
+              >
+                {SEARCH_TABS.find(
+                  (tab) => tab.title === selectedTab,
+                )?.component()}
+              </TabContent>
+            </AnimatePresence>
+          </LayoutGroup>
+        </TabedSearchContainer>
+      )}
+    </AnimatePresence>
+  );
+};
+
+export default TabedSearch;
diff --git a/app/src/features/search/components/result-items/AudioResult.tsx b/app/src/features/search/components/result-items/AudioResult.tsx
new file mode 100644
index 00000000..ba1f9cd6
--- /dev/null
+++ b/app/src/features/search/components/result-items/AudioResult.tsx
@@ -0,0 +1,134 @@
+import React, { useState, useRef } from "react";
+import styled from "styled-components";
+import { motion } from "framer-motion";
+
+import { isValidDate } from "@utils/helpers";
+import { getIcon } from "@data/icons";
+
+const ItemWrapper = styled.div`
+  display: flex;
+  padding: 1rem;
+  cursor: pointer;
+`;
+
+const ImageWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 1rem;
+`;
+
+const PlayPauseButton = styled(motion.button)`
+  background-color: var(--accent-color);
+  color: white;
+  border: none;
+  border-radius: 50%;
+  width: 3.125rem;
+  height: 3.125rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+`;
+
+const ContentWrapper = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: center;
+`;
+
+const ItemHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const Title = styled.h3`
+  font-size: 1rem;
+  font-weight: 500;
+  color: var(--color-text);
+`;
+
+const DateSpan = styled.span`
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+`;
+
+const Preview = styled.p`
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+  display: flex;
+  align-items: center;
+`;
+
+interface AudioResultProps {
+  title: string;
+  date: string;
+  duration?: string;
+  file?: string;
+}
+
+const AudioResult: React.FC<AudioResultProps> = ({
+  title,
+  date,
+  duration,
+  file,
+}) => {
+  const [isPlaying, setIsPlaying] = useState(false);
+  const audioRef = useRef<HTMLAudioElement>(null);
+
+  const togglePlayPause = () => {
+    if (audioRef.current) {
+      if (isPlaying) {
+        audioRef.current.pause();
+      } else {
+        audioRef.current.play();
+      }
+      setIsPlaying(!isPlaying);
+    }
+  };
+
+  const handleAudioEnded = () => {
+    setIsPlaying(false);
+  };
+
+  return (
+    <ItemWrapper>
+      <ImageWrapper>
+        {file && (
+          <>
+            <PlayPauseButton
+              onClick={togglePlayPause}
+              whileHover={{ scale: 1.1 }}
+              whileTap={{ scale: 0.9 }}
+            >
+              {isPlaying ? getIcon("Pause") : getIcon("Play")}
+            </PlayPauseButton>
+            <audio ref={audioRef} src={file} onEnded={handleAudioEnded} />
+          </>
+        )}
+      </ImageWrapper>
+      <ContentWrapper>
+        <ItemHeader>
+          <Title>{title}</Title>
+          <DateSpan>
+            {isValidDate(date)
+              ? new Date(date).toLocaleDateString("en-US", {
+                  month: "short",
+                  day: "numeric",
+                  year: "numeric",
+                })
+              : ""}
+          </DateSpan>
+        </ItemHeader>
+        <Preview>
+          {duration && <span>{duration} • </span>}
+          {title}
+        </Preview>
+      </ContentWrapper>
+    </ItemWrapper>
+  );
+};
+
+export default AudioResult;
diff --git a/app/src/features/search/components/result-items/ChannelResult.tsx b/app/src/features/search/components/result-items/ChannelResult.tsx
new file mode 100644
index 00000000..291ffa6d
--- /dev/null
+++ b/app/src/features/search/components/result-items/ChannelResult.tsx
@@ -0,0 +1,95 @@
+import styled from "styled-components";
+
+import Avatar from "@components/Avatar";
+import { useNavigate } from "react-router-dom";
+import { useAppSelector } from "@hooks/useGlobalState";
+
+const ItemWrapper = styled.div`
+  display: flex;
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+`;
+
+const ImageWrapper = styled.div`
+  overflow: hidden;
+`;
+
+const ContentWrapper = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: center;
+`;
+
+const ItemHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const Title = styled.h3`
+  font-size: 1rem;
+  font-weight: 500;
+  color: var(--color-text);
+`;
+
+const Preview = styled.p`
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+`;
+
+const UserNameSpan = styled.span`
+  color: var(--accent-color);
+`;
+
+interface ChannelResultProps {
+  title: string;
+  image?: string;
+  username?: string;
+  subscribers?: number;
+  chatId?: string;
+}
+
+const ChannelResult: React.FC<ChannelResultProps> = ({
+  title,
+  image,
+  username,
+  subscribers,
+  chatId
+}) => {
+  const navigate = useNavigate();
+  const { chats, members } = useAppSelector((state) => state.chats);
+
+  const handleItemClick = () => {
+    if (chatId) navigate(`/${chatId}`);
+
+    const user = members.find((member) => member.username === username);
+    const userChat = chats.find(
+      (chat) =>
+        chat?.type === "private" &&
+        chat.members
+          .flatMap((member) => member._id)
+          .includes(user?._id as string)
+    );
+    if (userChat) navigate(`/${userChat._id}`);
+  };
+
+  return (
+    <ItemWrapper onClick={handleItemClick}>
+      <ImageWrapper>
+        <Avatar name={title} image={image} />
+      </ImageWrapper>
+      <ContentWrapper>
+        <ItemHeader>
+          <Title>{title}</Title>
+        </ItemHeader>
+        <Preview>
+          {username && <UserNameSpan>@{username}</UserNameSpan>}
+          {subscribers && ` • ${subscribers} subscribers`}
+        </Preview>
+      </ContentWrapper>
+    </ItemWrapper>
+  );
+};
+
+export default ChannelResult;
diff --git a/app/src/features/search/components/result-items/FileResult.tsx b/app/src/features/search/components/result-items/FileResult.tsx
new file mode 100644
index 00000000..de863f0a
--- /dev/null
+++ b/app/src/features/search/components/result-items/FileResult.tsx
@@ -0,0 +1,88 @@
+import styled from "styled-components";
+
+import Avatar from "@components/Avatar";
+import { isValidDate } from "@utils/helpers";
+import { useNavigate } from "react-router-dom";
+
+const ItemWrapper = styled.div`
+  display: flex;
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+`;
+
+const ImageWrapper = styled.div`
+  overflow: hidden;
+`;
+
+const ContentWrapper = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: center;
+`;
+
+const ItemHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const Title = styled.h3`
+  font-size: 1rem;
+  font-weight: 500;
+  color: var(--color-text);
+`;
+
+const Preview = styled.p`
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+`;
+
+interface FileResultProps {
+  title: string;
+  image?: string;
+  size?: string;
+  date?: string;
+  chatId?: string;
+}
+
+const FileResult: React.FC<FileResultProps> = ({
+  title,
+  image,
+  size,
+  date,
+  chatId
+}) => {
+  const navigate = useNavigate();
+  const handleItemClick = () => {
+    if (chatId) navigate(`/${chatId}`);
+  };
+
+  return (
+    <ItemWrapper onClick={handleItemClick}>
+      <ImageWrapper>
+        <Avatar name={title} image={image} />
+      </ImageWrapper>
+      <ContentWrapper>
+        <ItemHeader>
+          <Title>{title}</Title>
+        </ItemHeader>
+        <Preview>
+          {size && <span>{size} MB • </span>}
+          {(date &&
+            isValidDate(date) &&
+            new Date(date).toLocaleDateString("en-US", {
+              month: "short",
+              day: "numeric",
+              year: "numeric",
+              hour: "numeric",
+              minute: "numeric"
+            })) ||
+            ""}
+        </Preview>
+      </ContentWrapper>
+    </ItemWrapper>
+  );
+};
+
+export default FileResult;
diff --git a/app/src/features/search/components/result-items/MessageResult.tsx b/app/src/features/search/components/result-items/MessageResult.tsx
new file mode 100644
index 00000000..5665050a
--- /dev/null
+++ b/app/src/features/search/components/result-items/MessageResult.tsx
@@ -0,0 +1,136 @@
+import styled from "styled-components";
+
+import Avatar from "@components/Avatar";
+import { isValidDate } from "@utils/helpers";
+import { useNavigate } from "react-router-dom";
+
+const ItemWrapper = styled.div`
+  display: flex;
+  padding: 1rem;
+  cursor: pointer;
+`;
+
+const ImageWrapper = styled.div`
+  overflow: hidden;
+`;
+
+const ContentWrapper = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: center;
+`;
+
+const ItemHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const Title = styled.h3`
+  font-size: 1rem;
+  font-weight: 500;
+  color: var(--color-text);
+`;
+
+const DateSpan = styled.span`
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+`;
+
+const Message = styled.p`
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+`;
+
+const MediaPreview = styled.img`
+  width: 16px;
+  height: 16px;
+  object-fit: cover;
+  border-radius: 0.25rem;
+  margin-right: 0.3rem;
+`;
+
+const Highlight = styled.span`
+  background: #cae3f7;
+  color: #000000;
+  border-radius: 2px;
+`;
+
+const LinkPreview = styled.a`
+  font-size: 0.875rem;
+  color: var(--accent-color);
+`;
+
+interface MessageResultProps {
+  title: string;
+  message: string;
+  date: string;
+  searchTerm?: string;
+  image?: string;
+  media?: string;
+  link?: string;
+  chatId?: string;
+}
+
+const MessageResult: React.FC<MessageResultProps> = ({
+  title,
+  message,
+  date,
+  searchTerm,
+  image,
+  media,
+  link,
+  chatId
+}) => {
+  const navigate = useNavigate();
+
+  const highlight = (text: string) => {
+    if (!searchTerm) return text;
+    const split = text.split(new RegExp(`(${searchTerm})`, "gi"));
+    return split.map((part, index) =>
+      part.toLowerCase() === searchTerm.toLowerCase() ? (
+        <Highlight key={index}>{part}</Highlight>
+      ) : (
+        part
+      )
+    );
+  };
+
+  const handleItemClick = () => {
+    if (chatId) navigate(`/${chatId}`);
+  };
+
+  return (
+    <ItemWrapper onClick={handleItemClick}>
+      <ImageWrapper>
+        <Avatar name={title} image={image} />
+      </ImageWrapper>
+      <ContentWrapper>
+        <ItemHeader>
+          <Title>{title}</Title>
+          <DateSpan>
+            {isValidDate(date)
+              ? new Date(date).toLocaleDateString("en-US", {
+                  month: "short",
+                  day: "numeric",
+                  year: "numeric"
+                })
+              : ""}
+          </DateSpan>
+        </ItemHeader>
+        <Message>
+          {media && <MediaPreview src={media} alt={title} />}
+          {highlight(message)}
+        </Message>
+        {link && (
+          <LinkPreview href={link} target="_blank" rel="noreferrer">
+            {link}
+          </LinkPreview>
+        )}
+      </ContentWrapper>
+    </ItemWrapper>
+  );
+};
+
+export default MessageResult;
diff --git a/app/src/features/search/data/tabs-components-map.tsx b/app/src/features/search/data/tabs-components-map.tsx
new file mode 100644
index 00000000..e5bd305d
--- /dev/null
+++ b/app/src/features/search/data/tabs-components-map.tsx
@@ -0,0 +1,193 @@
+import NoResultsFound from "../components/NoResultsFound";
+import AudioResult from "../components/result-items/AudioResult";
+import ChannelResult from "../components/result-items/ChannelResult";
+import FileResult from "../components/result-items/FileResult";
+import MessageResult from "../components/result-items/MessageResult";
+import SearchTab from "../components/SearchTab";
+import { SearchTabType } from "../types/search";
+
+export const SEARCH_TABS: SearchTabType[] = [
+  {
+    title: "Chats",
+    component: () => <SearchTab />,
+    filter: ["text"],
+    searchSpace: ["groups", "channels"],
+    isGlobalSearch: true
+  },
+  {
+    title: "Channels",
+    component: () => <SearchTab />,
+    filter: ["text"],
+    searchSpace: ["channels", "groups"],
+    isGlobalSearch: true
+  },
+  {
+    title: "Media",
+    component: () => <SearchTab />,
+    filter: ["image", "video", "GIF", "sticker"],
+    searchSpace: ["groups", "channels"],
+    isGlobalSearch: false
+  },
+  {
+    title: "Links",
+    component: () => <SearchTab />,
+    filter: ["link"],
+    searchSpace: ["groups", "channels"],
+    isGlobalSearch: false
+  },
+  {
+    title: "Files",
+    component: () => <SearchTab />,
+    filter: ["file"],
+    searchSpace: ["groups", "channels"],
+    isGlobalSearch: false
+  },
+  {
+    title: "Music",
+    component: () => <SearchTab />,
+    filter: ["audio"],
+    searchSpace: ["groups", "channels"],
+    isGlobalSearch: false
+  },
+  {
+    title: "Voice",
+    component: () => <SearchTab />,
+    filter: ["audio"],
+    searchSpace: ["groups", "channels"],
+    isGlobalSearch: false
+  }
+];
+
+export const SEARCH_TABS_MOCK = [
+  {
+    title: "Chats",
+    component: () => (
+      <div>
+        <MessageResult
+          searchTerm="hi"
+          message=" Hello hi there"
+          title="Telware Testing"
+          date={new Date().toString()}
+          image="https://placecats.com/200/200"
+        />
+        <MessageResult
+          searchTerm="hi"
+          message=" Hello hi there"
+          title="Telware Testing"
+          date={new Date().toString()}
+          image="https://placecats.com/neo/200/200"
+          media="https://placecats.com/20/20"
+        />
+        <ChannelResult
+          title="Telware Testing"
+          image="https://placecats.com/200/200"
+          username="Telware"
+          subscribers={100}
+        />
+        <MessageResult
+          searchTerm="hi"
+          message=" Hello hi there"
+          title="Telware Testing"
+          date={new Date().toString()}
+          image="https://placecats.com/200/200"
+          link="https://placecats.com/20/20"
+        />
+        <FileResult
+          title="Telware Testing"
+          image="https://www.svgrepo.com/show/144578/pdf.svg"
+          size="20"
+          date={new Date().toString()}
+        />
+        <AudioResult
+          title="Telware Testing"
+          date={new Date().toString()}
+          duration="20"
+          file="https://ia802306.us.archive.org/20/items/NeverGonnaGiveYouUp/jocofullinterview41.mp3"
+        />
+        {Array.from({ length: 10 }).map((_, index) => (
+          <MessageResult
+            key={index}
+            searchTerm="hi"
+            message=" Hello hi there"
+            title="Telware Testing"
+            date={new Date().toString()}
+            image="https://placecats.com/200/200"
+          />
+        ))}
+      </div>
+    )
+  },
+  {
+    title: "Channnels",
+    component: () => (
+      <div>
+        <ChannelResult
+          title="Telware Testing"
+          image="https://placecats.com/200/200"
+          username="Telware"
+          subscribers={100}
+        />
+      </div>
+    )
+  },
+  {
+    title: "Media",
+    component: () => (
+      <div>
+        <MessageResult
+          searchTerm="hi"
+          message=" Hello hi there"
+          title="Telware Testing"
+          date={new Date().toString()}
+          image="https://placecats.com/200/200"
+          media="https://placecats.com/20/20"
+        />
+      </div>
+    )
+  },
+  {
+    title: "Links",
+    component: () => (
+      <div>
+        <MessageResult
+          searchTerm="hi"
+          message=" Hello hi there"
+          title="Telware Testing"
+          date={new Date().toString()}
+          image="https://placecats.com/200/200"
+          link="https://placecats.com/20/20"
+        />
+      </div>
+    )
+  },
+  {
+    title: "Files",
+    component: () => <NoResultsFound />
+  },
+  {
+    title: "Music",
+    component: () => (
+      <div>
+        <AudioResult
+          title="Telware Testing"
+          date={new Date().toString()}
+          duration="20"
+          file="https://ia802306.us.archive.org/20/items/NeverGonnaGiveYouUp/jocofullinterview41.mp3"
+        />
+      </div>
+    )
+  },
+  {
+    title: "Voice",
+    component: () => (
+      <div>
+        <AudioResult
+          title="Telware Testing"
+          date={new Date().toString()}
+          duration="20"
+          file="https://ia802306.us.archive.org/20/items/NeverGonnaGiveYouUp/jocofullinterview41.mp3"
+        />
+      </div>
+    )
+  }
+];
diff --git a/app/src/features/search/hooks/useScrollToSearchResultsMsg.ts b/app/src/features/search/hooks/useScrollToSearchResultsMsg.ts
new file mode 100644
index 00000000..6c6b80a9
--- /dev/null
+++ b/app/src/features/search/hooks/useScrollToSearchResultsMsg.ts
@@ -0,0 +1,27 @@
+import { useEffect } from "react";
+import { useSelector } from "react-redux";
+
+import { RootState } from "@state/store";
+
+function useScrollToSearchResultsMsg() {
+  const { searchResults, searchTerm, currentResultIndex } = useSelector(
+    (state: RootState) => state.search,
+  );
+
+  useEffect(() => {
+    if (searchResults.length > 0) {
+      const searchResult = searchResults[currentResultIndex];
+      console.log("searchResult", searchResult);
+      document
+        .querySelectorAll(
+          "[data-message-id='" + searchResult.messageId + "']",
+        )[0]
+        ?.scrollIntoView({
+          behavior: "smooth",
+          block: "center",
+        });
+    }
+  }, [searchResults, currentResultIndex, searchTerm]);
+}
+
+export default useScrollToSearchResultsMsg;
diff --git a/app/src/features/search/hooks/useSearch.ts b/app/src/features/search/hooks/useSearch.ts
new file mode 100644
index 00000000..8e45f6f8
--- /dev/null
+++ b/app/src/features/search/hooks/useSearch.ts
@@ -0,0 +1,32 @@
+import { useQuery } from "@tanstack/react-query";
+import { SearchRequest, SearchResponseData } from "../types/search";
+import { Search } from "../services/searchAPI";
+import { useEffect } from "react";
+import toast from "react-hot-toast";
+
+interface UseSearchResponse {
+  data: SearchResponseData | undefined;
+  isLoading: boolean;
+  error: Error | null;
+  refetch: () => void;
+}
+
+function useSearch(searchRequest: SearchRequest): UseSearchResponse {
+  const { data, isLoading, error, refetch } = useQuery({
+    queryKey: ["global-search", searchRequest],
+    queryFn: () => Search(searchRequest),
+    enabled: searchRequest?.query.length > 0,
+    retry: 3,
+    retryDelay: 1000,
+  });
+
+  useEffect(() => {
+    if (error) {
+      toast.error("Failed to search");
+    }
+  }, [error]);
+
+  return { data, isLoading, error, refetch };
+}
+
+export { useSearch };
diff --git a/app/src/features/search/hooks/useSearchPrivate.ts b/app/src/features/search/hooks/useSearchPrivate.ts
new file mode 100644
index 00000000..3a642933
--- /dev/null
+++ b/app/src/features/search/hooks/useSearchPrivate.ts
@@ -0,0 +1,95 @@
+import { SearchRequest } from "../types/search";
+import { useSelector } from "react-redux";
+import { RootState } from "@state/store";
+import { useEffect, useState } from "react";
+
+type SearchResult = {
+  id?: string;
+  content?: string;
+  media?: string;
+  contentType?: string;
+  senderId?: {
+    username?: string;
+    screenFirstName?: string;
+    screenLastName?: string;
+    photo?: string;
+  };
+  chatId?: {
+    id?: string;
+    name?: string;
+    numberOfMembers?: number;
+    type?: string;
+    photo?: string;
+  };
+  timestamp?: string;
+};
+function useSearchPrivate(searchRequest: SearchRequest) {
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+  const [searchResults, setSearchResults] = useState<SearchResult[]>([]);
+
+  const { chats, members } = useSelector((state: RootState) => state.chats);
+
+  useEffect(() => {
+    try {
+      setIsLoading(true);
+      setError(null);
+
+      if (!searchRequest.query) {
+        setSearchResults([]);
+        setIsLoading(false);
+        return;
+      }
+
+      const privateChats = chats.filter((chat) => chat.type === "private");
+      const messages = privateChats.map((chat) => chat.messages).flat();
+
+      const filteredMessages = messages.filter(
+        (message) =>
+          searchRequest.filter.includes(message?.contentType) &&
+          message?.content
+            .toLowerCase()
+            .includes(searchRequest.query.toLowerCase())
+      );
+
+      const mergedSearchResults = filteredMessages.map((message) => {
+        const sender = members.find(
+          (member) => member._id === message.senderId
+        );
+
+        const chat = privateChats.find((chat) => chat._id === message.chatId);
+
+        return {
+          id: message._id,
+          content: message.content,
+          media: message.media,
+          contentType: message.contentType,
+          senderId: {
+            username: sender?.username,
+            screenFirstName: sender?.screenFirstName,
+            screenLastName: sender?.screenLastName,
+            photo: sender?.photo
+          },
+          chatId: {
+            id: chat?._id,
+            name: chat?.name,
+            numberOfMembers: chat?.members.length,
+            type: chat?.type,
+            photo: chat?.photo
+          },
+          timestamp: message.timestamp
+        };
+      });
+
+      setSearchResults(mergedSearchResults);
+      setIsLoading(false);
+    } catch (error) {
+      setError(error instanceof Error ? error : new Error("An error occurred"));
+      setIsLoading(false);
+    }
+  }, [searchRequest, chats, members]);
+
+  return { searchResults, isLoading, error };
+}
+
+export { useSearchPrivate };
diff --git a/app/src/features/search/services/searchAPI.ts b/app/src/features/search/services/searchAPI.ts
new file mode 100644
index 00000000..7c3aa174
--- /dev/null
+++ b/app/src/features/search/services/searchAPI.ts
@@ -0,0 +1,40 @@
+import { API_URL } from "@constants";
+import { SearchRequest, SearchResponseData } from "../types/search";
+
+async function Search(
+  searchRequest: SearchRequest,
+): Promise<SearchResponseData | undefined> {
+  if (!searchRequest.query) {
+    return undefined;
+  }
+
+  const filterString = searchRequest.filter.join(",");
+  const searchSpaceString = searchRequest.searchSpace.join(",");
+
+  const res = await fetch(`${API_URL}/search/search-request`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      "X-Session-Token": localStorage.getItem("sessionId") || "",
+    },
+    body: JSON.stringify({
+      query: searchRequest.query,
+      searchSpace: searchSpaceString,
+      filter: filterString,
+      isGlobalSearch: searchRequest.isGlobalSearch,
+    }),
+    credentials: "include",
+  });
+
+  const data = await res.json();
+
+  if (res.status !== 200) {
+    throw new Error(data.message);
+  }
+
+  const resultData = data.data;
+
+  return resultData;
+}
+
+export { Search };
diff --git a/app/src/features/search/types/search.d.ts b/app/src/features/search/types/search.d.ts
new file mode 100644
index 00000000..63095703
--- /dev/null
+++ b/app/src/features/search/types/search.d.ts
@@ -0,0 +1,80 @@
+export type SearchFilter =
+  | "text"
+  | "image"
+  | "GIF"
+  | "sticker"
+  | "audio"
+  | "video"
+  | "file"
+  | "link";
+
+export type SearchSpace = "chats" | "groups" | "channels";
+
+export type SearchRequest = {
+  query: string;
+  filter: SearchFilter[];
+  searchSpace: SearchSpace[];
+  isGlobalSearch: boolean;
+};
+
+export type SearchResultMessage = {
+  id: string;
+  content: string;
+  media: string;
+  contentType: SearchFilter;
+  senderId: {
+    username: string;
+    screenFirstName: string;
+    screenLastName: string;
+    photo: string;
+  };
+  chatId: {
+    id: string;
+    name: string;
+    numberOfMembers: number;
+    type: string;
+    photo?: string;
+  };
+  timestamp: string;
+};
+
+export type SearchResultGroup = {
+  id: string;
+  name: string;
+  photo: string;
+  type: string;
+  numberOfMembers: number;
+};
+
+export type SearchResultChannel = {
+  id: string;
+  name: string;
+  photo: string;
+  type: string;
+  numberOfMembers: number;
+};
+
+export type SearchResultUser = {
+  id: string;
+  username: string;
+  photo: string;
+  screenFirstName: string;
+  screenLastName: string;
+};
+
+export type SearchResponseData = {
+  searchResult: SearchResultMessage[];
+  globalSearchResult: {
+    users: SearchResultUser[];
+    groups: SearchResultGroup[];
+    channels: SearchResultChannel[];
+  };
+};
+
+export type SearchTabType = {
+  title: string;
+  component: () => JSX.Element;
+  filter: SearchFilter[];
+  searchSpace: SearchSpace[];
+  isGlobalSearch: boolean;
+};
diff --git a/app/src/features/search/utils/searchTabsHelpers.tsx b/app/src/features/search/utils/searchTabsHelpers.tsx
new file mode 100644
index 00000000..8446828d
--- /dev/null
+++ b/app/src/features/search/utils/searchTabsHelpers.tsx
@@ -0,0 +1,149 @@
+import styled from "styled-components";
+import AudioResult from "../components/result-items/AudioResult";
+import FileResult from "../components/result-items/FileResult";
+import MessageResult from "../components/result-items/MessageResult";
+import {
+  SearchFilter,
+  SearchResponseData,
+  SearchResultChannel,
+  SearchResultGroup,
+  SearchResultMessage,
+  SearchResultUser
+} from "../types/search";
+
+const SearchSectionHeader = styled.div`
+  padding: 1rem;
+  padding-bottom: 0.5rem;
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: var(--color-text-secondary);
+  background-color: var(--color-background-secondary);
+`;
+
+export const getTitle = (
+  item:
+    | SearchResultMessage
+    | SearchResultGroup
+    | SearchResultChannel
+    | SearchResultUser
+) => {
+  return (
+    (item as SearchResultMessage).chatId?.name ||
+    `${(item as SearchResultUser).screenFirstName} ${(item as SearchResultUser).screenLastName}` ||
+    `${(item as SearchResultMessage).senderId?.screenFirstName} ${(item as SearchResultMessage).senderId?.screenLastName}`
+  );
+};
+
+export const getImage = (
+  item:
+    | SearchResultMessage
+    | SearchResultGroup
+    | SearchResultChannel
+    | SearchResultUser
+) => {
+  return (
+    (item as SearchResultMessage).chatId?.photo ||
+    (item as SearchResultUser | SearchResultChannel | SearchResultChannel)
+      .photo ||
+    (item as SearchResultMessage).senderId?.photo
+  );
+};
+
+export const hasResults = (data: SearchResponseData | undefined) => {
+  return (
+    !!data &&
+    (data?.searchResult.length > 0 ||
+      data?.globalSearchResult.users.length > 0 ||
+      data?.globalSearchResult.groups.length > 0 ||
+      data?.globalSearchResult.channels.length > 0)
+  );
+};
+
+export const renderMessageResults = (
+  messages: SearchResultMessage[],
+  contentTypes: SearchFilter[],
+  searchTerm: string
+) => {
+  return messages
+    .filter((message) => contentTypes.includes(message?.contentType))
+    .map((message) => {
+      const commonProps = {
+        searchTerm,
+        message: message?.content,
+        title: getTitle(message),
+        image: getImage(message),
+        date: message?.timestamp,
+        chatId: message?.chatId?.id
+      };
+
+      switch (message?.contentType) {
+        case "text":
+          return (
+            <MessageResult
+              key={`search-message-${message?.id}`}
+              data-testid={`search-message-${message?.id}`}
+              {...commonProps}
+              media={message?.media}
+            />
+          );
+        case "image":
+        case "video":
+        case "GIF":
+        case "sticker":
+          return (
+            <MessageResult
+              key={`search-message-${message?.id}`}
+              data-testid={`search-message-${message?.id}`}
+              {...commonProps}
+              media={message?.media}
+            />
+          );
+        case "link":
+          return (
+            <MessageResult
+              key={`search-message-${message?.id}`}
+              data-testid={`search-message-${message?.id}`}
+              {...commonProps}
+              link={message?.content}
+            />
+          );
+        case "file":
+          return (
+            <FileResult
+              key={`search-message-${message?.id}`}
+              data-testid={`search-message-${message?.id}`}
+              size="30KB"
+              {...commonProps}
+              image="https://www.svgrepo.com/show/144578/pdf.svg"
+            />
+          );
+        case "audio":
+          return (
+            <AudioResult
+              key={`search-message-${message?.id}`}
+              data-testid={`search-message-${message?.id}`}
+              {...commonProps}
+              file={message?.media}
+            />
+          );
+        default:
+          return null;
+      }
+    });
+};
+
+export const renderGlobalResults = <T,>(
+  results: T[],
+  sectionTitle: string,
+  renderItem: (item: T) => JSX.Element
+) => {
+  if (!results || results.length === 0) return null;
+  return (
+    <>
+      <SearchSectionHeader data-testid={`search-section-${sectionTitle}`}>
+        {sectionTitle}
+      </SearchSectionHeader>
+      {results.map(renderItem)}
+    </>
+  );
+};
diff --git a/app/src/features/stories/components/AddStory.tsx b/app/src/features/stories/components/AddStory.tsx
new file mode 100644
index 00000000..56c76040
--- /dev/null
+++ b/app/src/features/stories/components/AddStory.tsx
@@ -0,0 +1,129 @@
+import { useRef, useState } from "react";
+import styled from "styled-components";
+import CircleIcon from "@components/CircleIcon";
+import ImageEditor from "@components/ImageEditor";
+import Popup from "@components/Popup";
+import StoryPreview from "./StoryPreview";
+import toast from "react-hot-toast";
+import { MAX_STORY_SIZE } from "@constants";
+
+const StoryCreator = styled.div`
+  cursor: pointer;
+`;
+const ImageInput = styled.input`
+  position: absolute;
+  bottom: 0;
+  right: 2rem;
+  height: 3.3rem;
+  width: 3.3rem;
+  padding: 0.5rem;
+  border-radius: 50%;
+  opacity: 0;
+  z-index: -1;
+  cursor: pointer;
+`;
+
+function AddStory() {
+  const [isImageEditorOpen, setIsImageEditorOpen] = useState(false);
+  const [isPreviewOpened, setIsPreviewOpened] = useState(false);
+  const [story, setStory] = useState<File | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      const fileType = file.type;
+      if (fileType.includes("tif") || fileType.includes("tiff")) {
+        toast.error("TIF files are not supported");
+        return;
+      }
+
+      if (!fileType.includes("image") && !fileType.includes("video")) {
+        toast.error("Unsupported file type. Please upload an image or video.");
+        return;
+      }
+      if (file.size > MAX_STORY_SIZE) {
+        toast.error("File size too large. Please upload a file less than 5MB.");
+        return;
+      }
+      setStory(file);
+      if (fileType.includes("image")) {
+        setIsImageEditorOpen(true);
+      } else {
+        setIsPreviewOpened(true);
+      }
+    }
+  };
+  const handleClose = () => {
+    fileInputRef.current!.value = "";
+    setIsImageEditorOpen(false);
+  };
+
+  const handleFinishEditting = (story: File) => {
+    setStory(story);
+    setIsImageEditorOpen(false);
+    setIsPreviewOpened(true);
+  };
+  const handleImageEditorClose = () => {
+    setStory(null);
+    fileInputRef.current!.value = "";
+    setIsImageEditorOpen(false);
+  };
+
+  const handleAddStoryClicked = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleStoryPreviewClose = () => {
+    fileInputRef.current!.value = "";
+    setStory(null);
+    setIsPreviewOpened(false);
+  };
+
+  return (
+    <>
+      <StoryCreator onClick={handleAddStoryClicked}>
+        <CircleIcon
+          data-testid="add-story-icon"
+          $icon="AddStory"
+          $right={0.25}
+          $bottom={0}
+          $size={3.3}
+          $padding={0.5}
+          $color="white"
+          $bgColor="var(--accent-color)"
+          $opacity={0.95}
+        />
+        <ImageInput
+          type="file"
+          ref={fileInputRef}
+          accept="image/*,video/*"
+          onChange={handleImageUpload}
+          data-testid="story-upload-input"
+          id="story-upload"
+        />
+      </StoryCreator>
+
+      {
+        <Popup isOpen={isImageEditorOpen} onClose={handleImageEditorClose}>
+          <ImageEditor
+            src={story ? URL.createObjectURL(story) : ""}
+            isOpen={isImageEditorOpen}
+            closeImgEditor={handleClose}
+            onImageSave={handleFinishEditting}
+            isProfileImage={false}
+            widthRatio={80}
+            heightRatio={80}
+          />
+        </Popup>
+      }
+      <StoryPreview
+        isOpen={isPreviewOpened && !!story}
+        onClose={handleStoryPreviewClose}
+        story={story}
+      />
+    </>
+  );
+}
+
+export default AddStory;
diff --git a/app/src/features/stories/components/ContactStoryIcon.tsx b/app/src/features/stories/components/ContactStoryIcon.tsx
deleted file mode 100644
index 86b6405a..00000000
--- a/app/src/features/stories/components/ContactStoryIcon.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { STATIC_MEDIA_URL } from "@constants";
-import styled from "styled-components";
-import { story } from "types/story";
-
-interface StoryIconProps {
-  isMe: boolean;
-  stories: story[];
-  seenCounter: number;
-  avatar?: string;
-  name: string;
-}
-
-const StyledContainer = styled.div<{
-  $seenCounter: number;
-  $storiesCounter: number;
-  $isMe: boolean;
-}>`
-  ${({ $isMe }) => $isMe && "align-self: flex-start;"}
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 0.5rem;
-  cursor: pointer;
-  position: relative;
-
-  &:hover {
-    background-color: rgba(0, 0, 0, 0.1);
-  }
-
-  &::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    border: ${(props) =>
-      props.$seenCounter === props.$storiesCounter
-        ? "2px solid gray"
-        : "2px solid #f39c12"};
-  }
-`;
-
-const StyledImage = styled.img`
-  width: 64px;
-  height: 64px;
-  border-radius: 50%;
-  object-fit: cover;
-  border: 2px solid white;
-`;
-
-const StyledName = styled.p`
-  margin-top: 0.5rem;
-  font-size: 0.875rem;
-  color: #333;
-  text-align: center;
-`;
-
-function ContactStoryIcon(props: StoryIconProps) {
-  const { isMe, stories, avatar, name } = props;
-  const storiesCounter = stories.length;
-  const seenCounter = stories.filter((story: story) => story.viewed).length;
-
-  return (
-    <StyledContainer
-      $seenCounter={seenCounter}
-      $storiesCounter={storiesCounter}
-      $isMe={isMe}
-    >
-      <StyledImage
-        src={avatar ? `${STATIC_MEDIA_URL}/${avatar}` : "/default-avatar.png"}
-        alt={`${name}'s avatar`}
-      />
-      <StyledName>{isMe ? "Your Story" : name}</StyledName>
-    </StyledContainer>
-  );
-}
-
-export default ContactStoryIcon;
diff --git a/app/src/features/stories/components/Story.tsx b/app/src/features/stories/components/Story.tsx
new file mode 100644
index 00000000..766e6c22
--- /dev/null
+++ b/app/src/features/stories/components/Story.tsx
@@ -0,0 +1,90 @@
+import { STATIC_MEDIA_URL } from "@constants";
+import { useEffect, useRef } from "react";
+import ModalImage from "react-modal-image";
+import styled from "styled-components";
+
+interface StoryProps {
+  content: string;
+  caption: string;
+  isPaused?: boolean;
+  isImage: boolean;
+  onFinish: () => void;
+}
+
+const Container = styled.div`
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--color-background);
+  border-radius: var(--border-radius-default);
+  width: 100%;
+  height: 100vh;
+
+  ::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(
+      to bottom,
+      rgba(0, 0, 0, 0.2) 0%,
+      rgba(0, 0, 0, 0.2) 12%,
+      transparent 13%,
+      transparent 100%
+    );
+  }
+`;
+const Video = styled.video`
+  object-fit: cover;
+  border-radius: var(--border-radius-default);
+  width: 100%;
+`;
+
+const Caption = styled.p<{ $captionLength: number }>`
+  position: absolute;
+  bottom: ${({ $captionLength }) =>
+    `clamp(5%, ${Math.max(2, 8 - $captionLength * 0.01)}vh, 15%)`};
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.5);
+  color: white;
+  padding: 0.5rem;
+  text-align: center;
+  width: 100%;
+  font-size: ${({ $captionLength }) =>
+    `clamp(1rem, ${Math.max(2.5 - $captionLength * 0.02, 1)}vw, 2.5rem)`};
+`;
+
+function Story({ content, caption, isPaused, isImage, onFinish }: StoryProps) {
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+  useEffect(() => {
+    if (!isPaused) {
+      videoRef.current?.play();
+    } else {
+      videoRef.current?.pause();
+    }
+  }, [isPaused]);
+  return (
+    <Container>
+      {isImage ? (
+        <ModalImage
+          small={STATIC_MEDIA_URL + content}
+          large={STATIC_MEDIA_URL + content}
+          alt={caption}
+          hideDownload={true}
+          hideZoom={true}
+        />
+      ) : (
+        <Video controls={false} ref={videoRef} onEnded={onFinish}>
+          <source src={`${STATIC_MEDIA_URL}${content}`} />
+        </Video>
+      )}
+      {caption && <Caption $captionLength={caption.length}>{caption}</Caption>}
+    </Container>
+  );
+}
+
+export default Story;
diff --git a/app/src/features/stories/components/StoryIcon.tsx b/app/src/features/stories/components/StoryIcon.tsx
new file mode 100644
index 00000000..0d3695f6
--- /dev/null
+++ b/app/src/features/stories/components/StoryIcon.tsx
@@ -0,0 +1,74 @@
+import styled from "styled-components";
+import { story } from "types/story";
+import Avatar from "@components/Avatar";
+
+interface StoryIconProps {
+  stories: story[];
+  photo?: string;
+  name: string;
+  onView?: (userId: string) => void;
+  isCollapsed?: boolean;
+  userId?: string;
+  isMyStory?: boolean;
+}
+
+const Container = styled.div<{ $isCollapsed: boolean }>`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+
+  padding: ${(props) => (props.$isCollapsed ? "0" : "0.5rem")};
+  min-width: ${(props) => (props.$isCollapsed ? "55px" : "90px")};
+  border-radius: ${(props) =>
+    props.$isCollapsed
+      ? "var(--border-radius-circle)"
+      : "var(--border-radius-default)"};
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+`;
+const Image = styled.div<{
+  $isMyStory?: boolean;
+}>`
+  height: 48px;
+  width: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: var(--color-avatar-shadow);
+  padding: 3px;
+  display: block;
+`;
+
+const Name = styled.p`
+  margin-top: 0.3rem;
+  font-size: 0.7rem;
+  color: var(--secondary-text-color);
+  text-align: center;
+  white-space: nowrap;
+`;
+
+function StoryIcon(props: StoryIconProps) {
+  const { photo, name, userId, onView, isMyStory, isCollapsed = false } = props;
+
+  const displayName = name?.slice(0, 8) + (name?.length > 8 ? "..." : "") || "";
+
+  const handleIconClicked = () => {
+    if (userId && onView) {
+      onView(userId);
+    }
+  };
+
+  return (
+    <Container $isCollapsed={isCollapsed} onClick={handleIconClicked}>
+      <Image $isMyStory={isMyStory}>
+        <Avatar name={name} image={photo} />
+      </Image>
+      {!isCollapsed && <Name>{displayName}</Name>}
+    </Container>
+  );
+}
+
+export default StoryIcon;
diff --git a/app/src/features/stories/components/StoryList.tsx b/app/src/features/stories/components/StoryList.tsx
new file mode 100644
index 00000000..eb83a0a7
--- /dev/null
+++ b/app/src/features/stories/components/StoryList.tsx
@@ -0,0 +1,126 @@
+import styled from "styled-components";
+import StoryIcon from "./StoryIcon";
+import { story, userStories } from "types/story";
+import StorySlide from "./StorySlide";
+import { useEffect, useState } from "react";
+import CloseButton from "@components/CloseButton";
+
+interface StoryListProps {
+  userStories: userStories[];
+  myStories: story[];
+  onClose: () => void;
+  userInfo: {
+    screenName: string;
+    photo?: string;
+  };
+}
+
+const Container = styled.div`
+  position: relative;
+  width: 100%;
+  height: 10rem;
+
+  z-index: 1;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+const StyledStoryList = styled.ul`
+  display: flex;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  overflow-x: auto;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: flex-start;
+  &::-webkit-scrollbar {
+    display: block;
+    height: 0.4rem;
+  }
+`;
+function StoryList(props: StoryListProps) {
+  const { userStories, myStories, userInfo, onClose } = props;
+  const [currentStoryUserId, setCurrentStoryUserId] = useState("");
+  const [userName, setUserName] = useState("");
+  const [userAvatar, setUserAvatar] = useState("");
+  const [stories, setStories] = useState<story[]>([]);
+  const handleStoryClick = (userId: string) => {
+    setCurrentStoryUserId(userId);
+    setUserName("");
+    setUserAvatar("");
+    setStories([]);
+  };
+  useEffect(() => {
+    if (currentStoryUserId) {
+      setUserName(
+        currentStoryUserId == "me"
+          ? "My Story"
+          : userStories.find((user) => user.userId === currentStoryUserId)
+              ?.name || "",
+      );
+      setUserAvatar(
+        currentStoryUserId == "me"
+          ? userInfo.photo || ""
+          : userStories.find((user) => user.userId === currentStoryUserId)
+              ?.photo || "",
+      );
+      setStories(
+        currentStoryUserId == "me"
+          ? myStories
+          : userStories.find((user) => user.userId === currentStoryUserId)
+              ?.stories || [],
+      );
+    }
+  }, [
+    currentStoryUserId,
+    userStories,
+    userInfo.screenName,
+    userInfo.photo,
+    myStories,
+  ]);
+  return (
+    <>
+      {currentStoryUserId && (
+        <StorySlide
+          userId={currentStoryUserId}
+          name={userName}
+          photo={userAvatar}
+          getNextUserStories={() => handleStoryClick("")}
+          stories={stories}
+          onClose={() => handleStoryClick("")}
+        />
+      )}
+      <Container>
+        <CloseButton onClose={onClose} data-testid="close-story-list" />
+        <StyledStoryList data-testid="storylist">
+          {myStories?.length > 0 && (
+            <StoryIcon
+              data-testid="my-story-icon"
+              name="My Story"
+              photo={userInfo.photo}
+              stories={myStories}
+              isMyStory={true}
+              onView={handleStoryClick}
+              userId="me"
+            />
+          )}
+          {userStories?.map((userStory: userStories) => (
+            <StoryIcon
+              key={userStory.userId}
+              data-testid={`story-icon-${userStory.userId}`}
+              name={userStory.name}
+              photo={userStory.photo}
+              isMyStory={false}
+              stories={userStory.stories}
+              userId={userStory.userId}
+              onView={handleStoryClick}
+            />
+          ))}
+        </StyledStoryList>
+      </Container>
+    </>
+  );
+}
+
+export default StoryList;
diff --git a/app/src/features/stories/components/StoryListContainer.tsx b/app/src/features/stories/components/StoryListContainer.tsx
new file mode 100644
index 00000000..14e16e8d
--- /dev/null
+++ b/app/src/features/stories/components/StoryListContainer.tsx
@@ -0,0 +1,80 @@
+import { useEffect, useState } from "react";
+import styled, { css } from "styled-components";
+import { useStroies } from "../hooks/useStories";
+import { useMyStroies } from "../hooks/useMyStories";
+import { useAppSelector } from "@hooks/useGlobalState";
+import CollapsedList from "@components/CollapsedList";
+import StoryList from "./StoryList";
+import StoryIcon from "./StoryIcon";
+
+const Container = styled.div<{ $isOpened: boolean }>`
+  width: 100%;
+  ${(props) =>
+    !props.$isOpened
+      ? css`
+          position: absolute;
+          top: 0;
+          left: 0;
+          display: flex;
+          justify-content: end;
+          align-items: end;
+          flex-direction: row;
+        `
+      : css`
+          position: relative;
+          height: 10rem;
+          margin-bottom: -1rem;
+        `}
+
+  z-index: 1;
+`;
+
+function StoryListContainer() {
+  const { stories: userStoriesData } = useStroies();
+  const userStories = userStoriesData?.data?.filter(
+    (userStory) => userStory.stories.length > 0
+  );
+  const { myStories: myStoriesData } = useMyStroies();
+  const myStories = myStoriesData?.data?.stories;
+  const [isOpened, setIsOpened] = useState(
+    userStories?.length || myStories?.length
+  );
+  const { userInfo } = useAppSelector((state) => state.user);
+
+  const handleOpen = () => {
+    setIsOpened(true);
+  };
+  useEffect(() => {
+    setIsOpened(userStories?.length || myStories?.length);
+  }, [myStories, userStories]);
+  return (
+    <Container $isOpened={isOpened} data-testid="story-list-container">
+      {isOpened ? (
+        <StoryList
+          userStories={userStories}
+          userInfo={userInfo}
+          myStories={myStories}
+          data-testid="story-list"
+          onClose={() => setIsOpened(false)}
+        />
+      ) : (
+        <CollapsedList
+          data-testid="stories-collapsed-list"
+          onOpen={handleOpen}
+          render={(userStory: unknown) => (
+            <StoryIcon
+              isCollapsed={true}
+              name={userStory.name}
+              photo={userStory.photo}
+              stories={userStory.stories}
+              data-testid={`story-icon-${userStory.userId}`}
+            />
+          )}
+          list={userStories?.length !== 0 ? userStories : myStories}
+        />
+      )}
+    </Container>
+  );
+}
+
+export default StoryListContainer;
diff --git a/app/src/features/stories/components/StoryPreview.tsx b/app/src/features/stories/components/StoryPreview.tsx
new file mode 100644
index 00000000..879d7726
--- /dev/null
+++ b/app/src/features/stories/components/StoryPreview.tsx
@@ -0,0 +1,144 @@
+import Popup from "@components/Popup";
+import { getIcon } from "@data/icons";
+import ModalImage from "react-modal-image";
+import styled from "styled-components";
+import { usePostStory } from "../hooks/usePostStory";
+import { useState } from "react";
+
+interface StoryPreviewProps {
+  story: File | null;
+  onClose: () => void;
+  isOpen: boolean;
+}
+
+// Styled Components
+const StyledContainer = styled.div`
+  cursor: pointer;
+  position: fixed;
+  top: 0;
+  left: 0;
+
+  z-index: 1;
+
+  width: 100%;
+  height: 100%;
+  gap: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  background-color: #000;
+`;
+
+const MediaContainer = styled.div`
+  width: 80%;
+  height: 80%;
+  margin: 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--color-background);
+  border-radius: var(--border-radius-default);
+
+  img,
+  video {
+    width: 80vw;
+    height: 80vh;
+    object-fit: cover;
+    border-radius: var(--border-radius-default);
+  }
+`;
+
+const Caption = styled.input`
+  width: 80%;
+  padding: 1rem;
+  border-radius: 0.5rem;
+  background-color: var(--color-background);
+  color: white;
+  font-size: 1rem;
+`;
+
+const SendContainer = styled.form`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+`;
+
+const SubmitButton = styled.button`
+  --button-width: 3.2rem;
+  background-color: var(--accent-color);
+  color: white;
+  width: var(--button-width);
+  height: var(--button-width);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  border: none;
+  cursor: pointer;
+  font-size: 1rem;
+  box-shadow: 0 0 0.1rem var(--accent-color);
+`;
+
+function StoryPreview({ story, onClose, isOpen }: StoryPreviewProps) {
+  const [caption, setCaption] = useState("");
+  const { postStory } = usePostStory();
+
+  const handleClose = () => {
+    setCaption("");
+    onClose();
+  };
+
+  const sendStory = () => {
+    if (story) postStory({ story, caption });
+    handleClose();
+  };
+
+  if (!story) return null;
+
+  const isImage = story.type.startsWith("image");
+
+  return (
+    <Popup isOpen={isOpen} onClose={handleClose}>
+      <StyledContainer>
+        <MediaContainer>
+          {isImage ? (
+            <ModalImage
+              small={URL.createObjectURL(story)}
+              medium={URL.createObjectURL(story)}
+              alt="Story"
+            />
+          ) : (
+            <video controls>
+              <source src={URL.createObjectURL(story)} type={story.type} />
+              Your browser does not support the video tag.
+            </video>
+          )}
+        </MediaContainer>
+        <SendContainer>
+          <Caption
+            type="text"
+            id="caption"
+            data-testid="caption"
+            onChange={(e) => setCaption(e.target.value)}
+            placeholder="Add a caption"
+            value={caption}
+            maxLength={100}
+          />
+          <SubmitButton
+            onClick={(e) => {
+              e.preventDefault();
+              sendStory();
+            }}
+            data-testid="send-story"
+          >
+            {getIcon("Send")}
+          </SubmitButton>
+        </SendContainer>
+      </StyledContainer>
+    </Popup>
+  );
+}
+
+export default StoryPreview;
diff --git a/app/src/features/stories/components/StorySlide.tsx b/app/src/features/stories/components/StorySlide.tsx
new file mode 100644
index 00000000..faf3dbd2
--- /dev/null
+++ b/app/src/features/stories/components/StorySlide.tsx
@@ -0,0 +1,248 @@
+import { useInView } from "../hooks/useInView";
+import { story } from "types/story";
+import StorySlideCounter from "./StorySlideCounter";
+import UserInfo from "./UserInfo";
+import { useCallback, useEffect, useState } from "react";
+import { useViewStory } from "../hooks/useViewStory";
+import Story from "./Story";
+import styled from "styled-components";
+import { getElapsedTime } from "utils/helpers";
+import StorySliderTooltip from "./StorySliderTooltip";
+import { getIcon } from "@data/icons";
+import { useDeleteStory } from "../hooks/useDeleteStory";
+import CloseButton from "@components/CloseButton";
+import Popup from "@components/Popup";
+
+interface StorySlideProps {
+  userId?: string;
+  name: string;
+  photo?: string;
+  getNextUserStories: () => void;
+  stories: story[];
+  onClose: () => void;
+}
+
+const Container = styled.div`
+  cursor: pointer;
+  position: fixed;
+  top: 0;
+  left: 0;
+
+  z-index: 2;
+
+  width: 100%;
+  height: 100%;
+  gap: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  background-color: #000;
+`;
+
+const StyledSlide = styled.div`
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  gap: 1rem;
+  height: 100%;
+  overflow-y: hidden;
+  overflow-x: hidden;
+  width: 60%;
+`;
+
+const NavButton = styled.div<{ isLeft?: boolean }>`
+  position: absolute;
+  top: 50%;
+  ${({ isLeft }) => (isLeft ? "left: 0;" : "right: 0;")}
+  transform: translateY(-50%);
+  cursor: pointer;
+
+  z-index: 1;
+
+  width: 3rem;
+  height: 3rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  color: white;
+`;
+
+const StyledUserInfo = styled.div`
+  position: absolute;
+  top: 2rem;
+  left: 2.5rem;
+
+  z-index: 1;
+`;
+
+const ViewsContainer = styled.div`
+  position: absolute;
+  height: 4rem;
+  font-size: 1.25rem;
+  line-height: 4rem;
+  padding-left: 1.5rem;
+
+  bottom: 0;
+  z-index: 1;
+  width: 100%;
+  height: 4rem;
+  color: white;
+  background-color: var(--story-views-background);
+  text-align: left;
+`;
+function StorySlide(props: StorySlideProps) {
+  const { photo, name, stories, getNextUserStories, onClose } = props;
+  const { ref, inView } = useInView({ threshold: 0.5 });
+  const { viewStory } = useViewStory();
+  const [index, setIndex] = useState(0);
+  const [isPaused, setIsPaused] = useState(false);
+  const { deleteStory } = useDeleteStory();
+  const isMine = name === "My Story";
+
+  const handleSlideChange = () => {
+    if (index < stories.length - 1) {
+      setIndex(index + 1);
+    } else {
+      getNextUserStories();
+      setIndex(0);
+    }
+    setIsPaused(false);
+  };
+
+  const handlePause = useCallback(() => {
+    setIsPaused((prev) => !prev);
+  }, []);
+
+  const handleRightArrow = useCallback(() => {
+    if (index < stories.length - 1) {
+      setIndex(index + 1);
+    } else {
+      getNextUserStories();
+    }
+  }, [index, stories.length, getNextUserStories]);
+
+  const handleEcsKey = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    },
+    [onClose]
+  );
+  const handleSpaceKey = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === " ") {
+        handlePause();
+      }
+    },
+    [handlePause]
+  );
+  const handleLeftArrow = useCallback(() => {
+    if (index > 0) {
+      setIndex(index - 1);
+    } else {
+      getNextUserStories();
+    }
+  }, [index, getNextUserStories]);
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === "ArrowRight") {
+        handleRightArrow();
+      } else if (e.key === "ArrowLeft") {
+        handleLeftArrow();
+      } else if (e.key === " ") {
+        handleSpaceKey(e);
+      } else if (e.key === "Escape") {
+        handleEcsKey(e);
+      }
+    },
+    [handleRightArrow, handleLeftArrow, handleSpaceKey, handleEcsKey]
+  );
+
+  const handleDelete = () => {
+    deleteStory(stories[index].id);
+    onClose();
+  };
+
+  useEffect(() => {
+    if (inView && !isMine && stories[index]?.viewed !== true) {
+      viewStory(stories[index]?.id);
+    }
+  }, [inView, stories, index, viewStory, isMine]);
+
+  useEffect(() => {
+    window.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [handleKeyDown]);
+
+  if (!stories.length) {
+    return null;
+  }
+  const isImage =
+    stories[index].content.includes(".jpg") ||
+    stories[index].content.includes(".png") ||
+    stories[index].content.includes(".jpeg") ||
+    stories[index].content.includes(".gif") ||
+    stories[index].content.includes(".webp") ||
+    stories[index].content.includes(".svg") ||
+    stories[index].content.includes(".bmp");
+
+  return (
+    <Popup isOpen={true} onClose={onClose}>
+      <Container>
+        <CloseButton onClose={onClose} />
+        <StyledSlide ref={ref} className="story">
+          <NavButton isLeft onClick={handleLeftArrow}>
+            {getIcon("LeftArrow")}
+          </NavButton>
+          <NavButton onClick={handleRightArrow}>
+            {getIcon("RightArrow")}
+          </NavButton>
+          <StorySlideCounter
+            isPaused={isPaused}
+            currentIndex={index}
+            totalSlides={stories.length}
+            onSlideChange={handleSlideChange}
+            isImage={isImage}
+          />
+          <StorySliderTooltip
+            isMine={isMine}
+            onPause={handlePause}
+            isPaused={isPaused}
+            onDelete={handleDelete}
+          />
+          <StyledUserInfo>
+            <UserInfo
+              name={name}
+              photo={photo || ""}
+              isVertical={true}
+              elapsedTime={getElapsedTime(stories[index].timestamp)}
+            />
+          </StyledUserInfo>
+          <Story
+            onFinish={handleSlideChange}
+            isPaused={isPaused}
+            isImage={isImage}
+            content={stories[index].content}
+            caption={stories[index].caption || ""}
+          />
+          {isMine && stories[index].views && (
+            <ViewsContainer>
+              {stories[index].views.length > 0
+                ? `${stories[index].views.length} views`
+                : "No views"}
+            </ViewsContainer>
+          )}
+        </StyledSlide>
+      </Container>
+    </Popup>
+  );
+}
+
+export default StorySlide;
diff --git a/app/src/features/stories/components/StorySlideCounter.tsx b/app/src/features/stories/components/StorySlideCounter.tsx
new file mode 100644
index 00000000..c1ace0b8
--- /dev/null
+++ b/app/src/features/stories/components/StorySlideCounter.tsx
@@ -0,0 +1,84 @@
+import { useEffect, useState } from "react";
+import styled from "styled-components";
+
+interface StorySlideCounterProps {
+  currentIndex: number;
+  totalSlides: number;
+  isPaused: boolean;
+  onSlideChange: (index: number) => void;
+  isImage: boolean;
+}
+interface SegmentProps {
+  $progress: number;
+  $isViewed: boolean;
+}
+
+const StyledSliderContainer = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  background: rgba(0, 0, 0, 0.5);
+  height: 2rem;
+
+  z-index: 1;
+`;
+
+const Segment = styled.div<SegmentProps>`
+  flex: 1;
+  height: 4px;
+  background: linear-gradient(
+    to right,
+    white ${(props) => props.$progress}%,
+    gray ${(props) => props.$progress}%
+  );
+`;
+
+function StorySlideCounter(props: StorySlideCounterProps) {
+  const { currentIndex, totalSlides, onSlideChange, isPaused, isImage } = props;
+  const [progress, setProgress] = useState(0);
+  const [viewedStories, setViewedStories] = useState(
+    Array(totalSlides).fill(false)
+  );
+
+  useEffect(() => {
+    if (isPaused) return;
+    if (!isImage) return;
+    const interval = setInterval(() => {
+      setProgress((prev) => prev + 1);
+    }, 50);
+
+    if (progress >= 100) {
+      setViewedStories((prev) => {
+        const updated = [...prev];
+        updated[currentIndex] = true;
+        return updated;
+      });
+      onSlideChange(currentIndex + 1 < totalSlides ? currentIndex + 1 : 0);
+      setProgress(0);
+    }
+
+    return () => clearInterval(interval);
+  }, [progress, currentIndex, totalSlides, onSlideChange, isPaused, isImage]);
+
+  return (
+    <StyledSliderContainer>
+      {Array.from({ length: totalSlides }, (_, index) => (
+        <Segment
+          key={index}
+          $progress={
+            index < currentIndex ? 100 : index === currentIndex ? progress : 0
+          }
+          $isViewed={viewedStories[index] || index < currentIndex}
+        />
+      ))}
+    </StyledSliderContainer>
+  );
+}
+
+export default StorySlideCounter;
diff --git a/app/src/features/stories/components/StorySliderTooltip.tsx b/app/src/features/stories/components/StorySliderTooltip.tsx
new file mode 100644
index 00000000..c3d2337b
--- /dev/null
+++ b/app/src/features/stories/components/StorySliderTooltip.tsx
@@ -0,0 +1,44 @@
+import { getIcon } from "@data/icons";
+import styled from "styled-components";
+
+interface StorySliderTooltipProps {
+  isMine?: boolean;
+  isPaused: boolean;
+  onPause: () => void;
+  onDelete?: () => void;
+}
+
+const StyledToolTip = styled.div`
+  position: absolute;
+  top: 2rem;
+  right: 2rem;
+  display: flex;
+
+  z-index: 1;
+
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+`;
+const Button = styled.div`
+  cursor: pointer;
+  color: white;
+  svg {
+    font-size: 2rem;
+  }
+`;
+function StorySliderTooltip(props: StorySliderTooltipProps) {
+  const { isMine, onPause, onDelete, isPaused } = props;
+  return (
+    <StyledToolTip>
+      {isPaused ? (
+        <Button onClick={onPause}>{getIcon("Play")}</Button>
+      ) : (
+        <Button onClick={onPause}>{getIcon("Pause")}</Button>
+      )}
+      {isMine && <Button onClick={onDelete}>{getIcon("Delete")}</Button>}
+    </StyledToolTip>
+  );
+}
+
+export default StorySliderTooltip;
diff --git a/app/src/features/stories/components/UserInfo.tsx b/app/src/features/stories/components/UserInfo.tsx
new file mode 100644
index 00000000..eae163d9
--- /dev/null
+++ b/app/src/features/stories/components/UserInfo.tsx
@@ -0,0 +1,55 @@
+import Avatar from "@components/Avatar";
+import Heading from "@components/Heading";
+import styled, { css } from "styled-components";
+
+interface UserInfoProps {
+  name: string;
+  photo: string;
+  elapsedTime: string;
+  isVertical?: boolean;
+}
+const StoryHeader = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0.7rem;
+
+  z-index: 1;
+`;
+const StyledUserInfo = styled.div<{ $isVertical?: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  ${(props) =>
+    props.$isVertical &&
+    css`
+      flex-direction: column;
+      gap: 0.2rem;
+      justify-content: center;
+      align-items: flex-start;
+    `};
+  & > h5 {
+    color: white !important;
+  }
+`;
+const ElapsedTime = styled.p`
+  font-size: 0.8rem;
+  color: white;
+  text-align: left;
+`;
+function UserInfo(props: UserInfoProps) {
+  const { name, photo, elapsedTime, isVertical } = props;
+
+  return (
+    <StoryHeader>
+      <Avatar name={name} image={photo} />
+      <StyledUserInfo $isVertical={isVertical}>
+        <Heading as="h5">{name}</Heading>
+        <ElapsedTime>{elapsedTime}</ElapsedTime>
+      </StyledUserInfo>
+    </StoryHeader>
+  );
+}
+
+export default UserInfo;
diff --git a/app/src/features/stories/hooks/useDeleteStory.ts b/app/src/features/stories/hooks/useDeleteStory.ts
new file mode 100644
index 00000000..14693f89
--- /dev/null
+++ b/app/src/features/stories/hooks/useDeleteStory.ts
@@ -0,0 +1,29 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { DeleteStory as DeleteStoryAPI } from "../services/apiDeleteStory";
+import toast from "react-hot-toast";
+
+function useDeleteStory() {
+  const queryClient = useQueryClient();
+
+  const {
+    mutate: deleteStory,
+
+    data,
+    error,
+    isPending,
+  } = useMutation({
+    mutationFn: (storyId: string) => DeleteStoryAPI(storyId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["myStories"] });
+      toast.success("Story successfully deleted");
+    },
+    onError: (error) => {
+      console.log(error);
+      toast.error("Error deleting story");
+    },
+  });
+
+  return { deleteStory, data, error, isPending };
+}
+
+export { useDeleteStory };
diff --git a/app/src/features/stories/hooks/useInView.ts b/app/src/features/stories/hooks/useInView.ts
new file mode 100644
index 00000000..2856f2bf
--- /dev/null
+++ b/app/src/features/stories/hooks/useInView.ts
@@ -0,0 +1,26 @@
+import { useEffect, useRef, useState } from "react";
+interface Options {
+  root?: Element | null;
+  rootMargin?: string;
+  threshold?: number | number[];
+}
+export function useInView(options: Options) {
+  const [inView, setInView] = useState(false);
+  const ref = useRef(null);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(([entry]) => {
+      setInView(entry.isIntersecting);
+    }, options);
+
+    if (ref.current) {
+      observer.observe(ref.current);
+    }
+
+    return () => {
+      if (ref.current) observer.unobserve(ref.current);
+    };
+  }, [options]);
+
+  return { ref, inView };
+}
diff --git a/app/src/features/stories/hooks/useMyStories.ts b/app/src/features/stories/hooks/useMyStories.ts
new file mode 100644
index 00000000..45e1779c
--- /dev/null
+++ b/app/src/features/stories/hooks/useMyStories.ts
@@ -0,0 +1,17 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { getMyStories as getMyStoriesAPI } from "../services/apiGetMyStories";
+
+function useMyStroies() {
+  const {
+    data: myStories,
+    error,
+    isLoading,
+  } = useQuery({
+    queryKey: ["my-stories"],
+    queryFn: getMyStoriesAPI,
+  });
+  return { myStories, error, isLoading };
+}
+
+export { useMyStroies };
diff --git a/app/src/features/stories/hooks/usePostStory.ts b/app/src/features/stories/hooks/usePostStory.ts
new file mode 100644
index 00000000..3890fd68
--- /dev/null
+++ b/app/src/features/stories/hooks/usePostStory.ts
@@ -0,0 +1,28 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import { postStory as postStoryAPI } from "../services/apiPostStory";
+import toast from "react-hot-toast";
+function usePostStory() {
+  const queryClient = useQueryClient();
+
+  const {
+    mutate: postStory,
+    data,
+    error,
+    isPending,
+  } = useMutation({
+    mutationFn: ({ story, caption }: { story: File; caption: string }) =>
+      postStoryAPI(story, caption),
+    onSuccess: () => {
+      toast.success("Story successfully uploaded");
+      queryClient.invalidateQueries({ queryKey: ["myStories"] });
+    },
+    onError: () => {
+      toast.error("Error uploading story");
+    },
+  });
+
+  return { postStory, data, error, isPending };
+}
+
+export { usePostStory };
diff --git a/app/src/features/stories/hooks/useStories.ts b/app/src/features/stories/hooks/useStories.ts
new file mode 100644
index 00000000..8541fec9
--- /dev/null
+++ b/app/src/features/stories/hooks/useStories.ts
@@ -0,0 +1,18 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { getStories as getStoriesAPI } from "../services/apiGetStories";
+
+function useStroies() {
+  const {
+    data: stories,
+    error,
+    isLoading,
+  } = useQuery({
+    queryKey: ["stories"],
+    queryFn: getStoriesAPI,
+  });
+
+  return { stories, error, isLoading };
+}
+
+export { useStroies };
diff --git a/app/src/features/stories/hooks/useViewStory.ts b/app/src/features/stories/hooks/useViewStory.ts
new file mode 100644
index 00000000..dad9ab60
--- /dev/null
+++ b/app/src/features/stories/hooks/useViewStory.ts
@@ -0,0 +1,26 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { viewStory as viewStoryAPI } from "../services/apiViewStory";
+
+function useViewStory() {
+  const queryClient = useQueryClient();
+
+  const {
+    mutate: viewStory,
+    data,
+    error,
+    isPending,
+    isSuccess,
+  } = useMutation({
+    mutationFn: (storyId: string) => viewStoryAPI(storyId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["stories"] });
+    },
+    onError: (error) => {
+      console.error("Error viewing story:", error);
+    },
+  });
+
+  return { viewStory, data, error, isPending, isSuccess };
+}
+
+export { useViewStory };
diff --git a/app/src/features/stories/services/apiDeleteStory.ts b/app/src/features/stories/services/apiDeleteStory.ts
new file mode 100644
index 00000000..336bbf24
--- /dev/null
+++ b/app/src/features/stories/services/apiDeleteStory.ts
@@ -0,0 +1,24 @@
+import { API_URL } from "@constants";
+
+async function DeleteStory(storyId: string) {
+  const res = await fetch(`${API_URL}/users/stories/${storyId}`, {
+    method: "DELETE",
+    headers: {
+      "X-Session-Token": localStorage.getItem("sessionId") || "",
+    },
+  });
+
+  if (res.status === 204) {
+    return { status: "success", message: "Story deleted successfully." };
+  }
+
+  const data = await res.json();
+
+  if (data.status !== "success") {
+    throw new Error(data.message);
+  }
+
+  return data;
+}
+
+export { DeleteStory };
diff --git a/app/src/features/stories/services/apiGetMyStories.ts b/app/src/features/stories/services/apiGetMyStories.ts
new file mode 100644
index 00000000..28abb8ce
--- /dev/null
+++ b/app/src/features/stories/services/apiGetMyStories.ts
@@ -0,0 +1,25 @@
+import { API_URL } from "@constants";
+
+async function getMyStories() {
+  try {
+    const response = await fetch(`${API_URL}/users/stories`, {
+      method: "GET",
+      credentials: "include",
+      headers: {
+        "X-Session-Token": localStorage.getItem("sessionId") || "",
+      },
+    });
+
+    if (!response.ok) {
+      throw new Error("Failed to fetch stories");
+    }
+
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error("Failed to fetch stories", error);
+    throw error;
+  }
+}
+
+export { getMyStories };
diff --git a/app/src/features/stories/services/apiGetStories.ts b/app/src/features/stories/services/apiGetStories.ts
new file mode 100644
index 00000000..489f08d0
--- /dev/null
+++ b/app/src/features/stories/services/apiGetStories.ts
@@ -0,0 +1,26 @@
+import { API_URL } from "@constants";
+
+async function getStories() {
+  try {
+    const response = await fetch(`${API_URL}/users/contacts/stories`, {
+      method: "GET",
+      credentials: "include",
+      headers: {
+        "Content-Type": "application/json",
+        "X-Session-Token": localStorage.getItem("sessionId") || "",
+      },
+    });
+
+    if (!response.ok) {
+      throw new Error("Failed to fetch stories");
+    }
+
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error("Failed to fetch stories", error);
+    throw error;
+  }
+}
+
+export { getStories };
diff --git a/app/src/features/stories/services/apiPostStory.ts b/app/src/features/stories/services/apiPostStory.ts
new file mode 100644
index 00000000..85322de4
--- /dev/null
+++ b/app/src/features/stories/services/apiPostStory.ts
@@ -0,0 +1,30 @@
+import { API_URL } from "@constants";
+
+async function postStory(story: File, caption: string) {
+  const formData = new FormData();
+  formData.append("caption", caption);
+  formData.append("file", story);
+
+  try {
+    const response = await fetch(`${API_URL}/users/stories`, {
+      method: "POST",
+      body: formData,
+      headers: {
+        "X-Session-Token": localStorage.getItem("sessionId") || "",
+      },
+      credentials: "include",
+    });
+
+    if (!response.ok) {
+      throw new Error("Failed to upload image");
+    }
+
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error("Image upload error:", error);
+    throw error;
+  }
+}
+
+export { postStory };
diff --git a/app/src/features/stories/services/apiViewStory.ts b/app/src/features/stories/services/apiViewStory.ts
new file mode 100644
index 00000000..b54c0589
--- /dev/null
+++ b/app/src/features/stories/services/apiViewStory.ts
@@ -0,0 +1,25 @@
+import { API_URL } from "@constants";
+
+async function viewStory(storyId: string) {
+  try {
+    const response = await fetch(`${API_URL}/stories/${storyId}/views`, {
+      method: "POST",
+      headers: {
+        "X-Session-Token": localStorage.getItem("sessionId") || "",
+      },
+      credentials: "include",
+    });
+
+    if (!response.ok) {
+      throw new Error("Failed to view image");
+    }
+
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error("Image view error:", error);
+    throw error;
+  }
+}
+
+export { viewStory };
diff --git a/app/src/hooks/useIndexedDB.ts b/app/src/hooks/useIndexedDB.ts
new file mode 100644
index 00000000..ca36c582
--- /dev/null
+++ b/app/src/hooks/useIndexedDB.ts
@@ -0,0 +1,45 @@
+import { IDBPDatabase, openDB } from "idb";
+import { useState, useEffect, useCallback } from "react";
+
+function useIndexedDB(dbName: string, storeName: string) {
+  const [db, setDb] = useState<IDBPDatabase<unknown> | null>(null);
+
+  useEffect(() => {
+    const initDB = async () => {
+      const dbInstance = await openDB(dbName, 1, {
+        upgrade(db) {
+          if (!db.objectStoreNames.contains(storeName)) {
+            db.createObjectStore(storeName);
+          }
+        },
+      });
+      setDb(dbInstance);
+    };
+
+    initDB();
+  }, [dbName, storeName]);
+
+  const getItem = useCallback(
+    async (key: string) => {
+      if (!db) return null;
+      return await db.get(storeName, key);
+    },
+    [db, storeName],
+  );
+
+  interface SetItemFunction {
+    (key: string, value: unknown): Promise<void>;
+  }
+
+  const setItem: SetItemFunction = useCallback(
+    async (key: string, value: unknown) => {
+      if (!db) return;
+      await db.put(storeName, value, key);
+    },
+    [db, storeName],
+  );
+
+  return { getItem, setItem };
+}
+
+export default useIndexedDB;
diff --git a/app/src/hooks/useMouseLeave.ts b/app/src/hooks/useMouseLeave.ts
index 03aa2dd3..7fe645d1 100644
--- a/app/src/hooks/useMouseLeave.ts
+++ b/app/src/hooks/useMouseLeave.ts
@@ -18,7 +18,7 @@ export function useMouseLeave(handler: () => void, listenCapturing = true) {
       currentRef.addEventListener(
         "mouseleave",
         handleMouseLeave,
-        listenCapturing
+        listenCapturing,
       );
     }
 
@@ -27,7 +27,7 @@ export function useMouseLeave(handler: () => void, listenCapturing = true) {
         currentRef.removeEventListener(
           "mouseleave",
           handleMouseLeave,
-          listenCapturing
+          listenCapturing,
         );
       }
     };
diff --git a/app/src/main.tsx b/app/src/main.tsx
index 6496bcc5..81323678 100644
--- a/app/src/main.tsx
+++ b/app/src/main.tsx
@@ -1,4 +1,4 @@
-// import { StrictMode } from "react";
+import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 
 import { Provider } from "react-redux";
@@ -16,10 +16,10 @@ async function enableMocking() {
 
 enableMocking().then(() => {
   createRoot(document.getElementById("root")!).render(
-    // <StrictMode>
-    <Provider store={store}>
-      <App />
-    </Provider>
-    // </StrictMode>
+    <StrictMode>
+      <Provider store={store}>
+        <App />
+      </Provider>
+    </StrictMode>
   );
 });
diff --git a/app/src/mocks/admin/admin.ts b/app/src/mocks/admin/admin.ts
new file mode 100644
index 00000000..8e8ec706
--- /dev/null
+++ b/app/src/mocks/admin/admin.ts
@@ -0,0 +1,123 @@
+import { http, HttpResponse } from "msw";
+import { MOCK_USERS, MOCK_GROUPS } from "../data/admin";
+import { Group, User, userStatus } from "types/admin";
+
+type BanUserRequestBody = {
+  data: string;
+};
+type BanUserResponseBodySuccess = {
+  status: "success";
+  message: string;
+  data: object | boolean;
+};
+type BanUserResponseBodyFail = {
+  status: "fail" | "error";
+  message: string;
+  data: object;
+};
+type BanUserResponseBody = BanUserResponseBodySuccess | BanUserResponseBodyFail;
+
+export const adminMock = [
+  http.patch<{ userId: string }, BanUserRequestBody, BanUserResponseBody>(
+    "/users/deactivate/:userId",
+    async ({ params }) => {
+      const { userId } = params;
+      const userIndex = MOCK_USERS.findIndex(
+        (user: User) => user.id === userId
+      );
+      if (userIndex != -1) {
+        MOCK_USERS[userIndex].accountStatus = userStatus.deactivated;
+        return HttpResponse.json({}, { status: 200 });
+      }
+      return HttpResponse.json(
+        { status: "fail", message: "user not found", data: {} },
+        { status: 404 }
+      );
+    }
+  ),
+  http.patch<{ userId: string }, BanUserRequestBody, BanUserResponseBody>(
+    "/users/activate/:userId",
+    async ({ params }) => {
+      const { userId } = params;
+      const userIndex = MOCK_USERS.findIndex(
+        (user: User) => user.id === userId
+      );
+      if (userIndex != -1) {
+        MOCK_USERS[userIndex].accountStatus = userStatus.active;
+        return HttpResponse.json({}, { status: 200 });
+      }
+      return HttpResponse.json(
+        { status: "fail", message: "user not found", data: {} },
+        { status: 404 }
+      );
+    }
+  ),
+  http.patch<{ userId: string }, BanUserRequestBody, BanUserResponseBody>(
+    "/users/ban/:userId",
+    async ({ params }) => {
+      const { userId } = params;
+      const userIndex = MOCK_USERS.findIndex(
+        (user: User) => user.id === userId
+      );
+      if (userIndex != -1) {
+        MOCK_USERS[userIndex].accountStatus = userStatus.banned;
+        return HttpResponse.json({}, { status: 200 });
+      }
+      return HttpResponse.json(
+        { status: "fail", message: "user not found", data: {} },
+        { status: 404 }
+      );
+    }
+  ),
+  http.patch<{ groupId: string }, BanUserRequestBody, BanUserResponseBody>(
+    "/chats/groups/filter/:groupId",
+    async ({ params }) => {
+      const { groupId } = params;
+      const groupIndex = MOCK_GROUPS.findIndex(
+        (group: Group) => group.id === groupId
+      );
+      if (groupIndex != -1) {
+        MOCK_GROUPS[groupIndex].isFilterd = true;
+        return HttpResponse.json({}, { status: 200 });
+      }
+      return HttpResponse.json(
+        { status: "fail", message: "group not found", data: {} },
+        { status: 404 }
+      );
+    }
+  ),
+  http.patch<{ groupId: string }, BanUserRequestBody, BanUserResponseBody>(
+    "/chats/groups/unfilter/:groupId",
+    async ({ params }) => {
+      const { groupId } = params;
+      const groupIndex = MOCK_GROUPS.findIndex(
+        (group: Group) => group.id === groupId
+      );
+      if (groupIndex != -1) {
+        MOCK_GROUPS[groupIndex].isFilterd = false;
+        return HttpResponse.json({}, { status: 200 });
+      }
+      return HttpResponse.json(
+        { status: "fail", message: "group not found", data: {} },
+        { status: 404 }
+      );
+    }
+  ),
+
+  http.get("/users", async () => {
+    return HttpResponse.json(
+      {
+        data: { users: MOCK_USERS },
+      },
+      { status: 200 }
+    );
+  }),
+  http.get("/users/all-groups", async () => {
+    return HttpResponse.json(
+      {
+        data: { groupsAndChannels: MOCK_GROUPS },
+      },
+      { status: 200 }
+    );
+  }),
+];
diff --git a/app/src/mocks/chats/chats.ts b/app/src/mocks/chats/chats.ts
index 81b8851e..4e89957f 100644
--- a/app/src/mocks/chats/chats.ts
+++ b/app/src/mocks/chats/chats.ts
@@ -1,4 +1,4 @@
-import { allChats } from "@mocks/data/chats";
+import { allChats, lastMessages, members } from "@mocks/data/chats";
 import { http, HttpResponse } from "msw";
 
 export const chats = [
@@ -6,21 +6,21 @@ export const chats = [
     return HttpResponse.json(
       {
         status: "success",
-        data: allChats,
+        data: { chats: allChats, members: members, lastMessages: lastMessages },
       },
-      { status: 200 }
+      { status: 200 },
     );
   }),
 
-  http.get("/chat/:id", async ({ params }) => {
-    const chat = allChats.find((chat) => chat.id.toString() === params.id);
-
+  http.get("/chats/:id", async ({ params }) => {
+    const chat = allChats.find((chat) => chat._id.toString() === params.id);
+    
     return HttpResponse.json(
       {
         status: "success",
-        data: chat || null,
+        data: { chat: chat || null },
       },
-      { status: 200 }
+      { status: 200 },
     );
   }),
 ];
diff --git a/app/src/mocks/chats/media.ts b/app/src/mocks/chats/media.ts
new file mode 100644
index 00000000..85b2410c
--- /dev/null
+++ b/app/src/mocks/chats/media.ts
@@ -0,0 +1,30 @@
+import { http, HttpResponse } from "msw";
+
+export const media = [
+  http.post("/chats/media", async ({ request }) => {
+    const formData = await request.formData();
+
+    const file = formData.get("file");
+
+    if (!file || !(file instanceof File)) {
+      return HttpResponse.json(
+        {
+          status: "error",
+          message: "File is required or invalid",
+        },
+        { status: 400 },
+      );
+    }
+
+    return HttpResponse.json(
+      {
+        status: "success",
+        message: "File uploaded successfully",
+        data: {
+          mediaFileName: "927b84545f5258ac.webm",
+        },
+      },
+      { status: 200 },
+    );
+  }),
+];
diff --git a/app/src/mocks/chats/pagination.ts b/app/src/mocks/chats/pagination.ts
new file mode 100644
index 00000000..1aaeee4d
--- /dev/null
+++ b/app/src/mocks/chats/pagination.ts
@@ -0,0 +1,25 @@
+import { newMessages } from "@mocks/data/messages";
+import { http, HttpResponse } from "msw";
+
+export const paginationMock = [
+  http.get("/chats/messages/:chatId", async ({ request }) => {
+    const url = new URL(request.url);
+
+    console.log(url.searchParams.get("page"));
+
+    const page = parseInt(url.searchParams.get("page") || "1", 10);
+    const limit = parseInt(url.searchParams.get("limit") || "10", 10);
+    const startIndex = (page - 1) * limit;
+    const endIndex = startIndex + limit;
+    const paginatedMessages = newMessages.slice(startIndex, endIndex);
+
+    return HttpResponse.json(
+      {
+        status: "success",
+        data: { messages: paginatedMessages, nextPage: page + 1 },
+        message: "Messages retrieved successfully",
+      },
+      { status: 200 },
+    );
+  }),
+];
diff --git a/app/src/mocks/data/admin.ts b/app/src/mocks/data/admin.ts
new file mode 100644
index 00000000..88a19101
--- /dev/null
+++ b/app/src/mocks/data/admin.ts
@@ -0,0 +1,122 @@
+import { Group, User, userStatus } from "types/admin";
+
+const MOCK_USERS: User[] = [
+  {
+    id: "1",
+    username: "Eddie Brock",
+    photo: "https://i.pravatar.cc/70?=0.05",
+    accountStatus: userStatus.active,
+  },
+  {
+    id: "2",
+    username: "Gwen Stacy",
+    photo: "https://i.pravatar.cc/70?=0.06",
+    accountStatus: userStatus.active,
+  },
+  {
+    id: "3",
+    username: "Mary Jane",
+    photo: "https://i.pravatar.cc/70?=0.07",
+    accountStatus: userStatus.active,
+  },
+  {
+    id: "4",
+    username: "Peter Parker",
+    photo: "https://i.pravatar.cc/70?=0.08",
+    accountStatus: userStatus.banned,
+  },
+  {
+    id: "5",
+    username: "Clark Kent",
+    photo: "https://i.pravatar.cc/70?=0.09",
+    accountStatus: userStatus.deactivated,
+  },
+  {
+    id: "6",
+    username: "Bruce Wayne",
+    photo: "https://i.pravatar.cc/70?=0.11",
+    accountStatus: userStatus.active,
+  },
+  {
+    id: "7",
+    username: "Diana Prince",
+    photo: "https://i.pravatar.cc/70?=0.12",
+    accountStatus: userStatus.deactivated,
+  },
+  {
+    id: "8",
+    username: "Tony Stark",
+    photo: "https://i.pravatar.cc/70?=0.13",
+    accountStatus: userStatus.deactivated,
+  },
+  {
+    id: "9",
+    username: "Steve Rogers",
+    photo: "https://i.pravatar.cc/70?=0.14",
+    accountStatus: userStatus.banned,
+  },
+  {
+    id: "10",
+    username: "Natasha Romanoff",
+    photo: "https://i.pravatar.cc/70?=0.15",
+    accountStatus: userStatus.active,
+  },
+  {
+    id: "11",
+    username: "Wade Wilson",
+    photo: "https://i.pravatar.cc/70?=0.36",
+    accountStatus: userStatus.active,
+  },
+];
+
+const MOCK_GROUPS: Group[] = [
+  {
+    id: "1",
+    name: "Avengers",
+    picture: "https://i.redd.it/gf9yyhdo08m11.jpg",
+    isFilterd: false,
+    numberOfMembers: 12,
+  },
+  {
+    id: "2",
+    name: "Justice League",
+    picture:
+      "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSSk0jgB0khxHpWlQ2WIrTWbbCcRVvzXusD-w&s",
+    isFilterd: false,
+    numberOfMembers: 8,
+  },
+  {
+    id: "3",
+    name: "Guardians of the Galaxy",
+    picture:
+      "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSk0TL205opaVnA2dYCebuk552-PP-ROsLgRw&s",
+    isFilterd: false,
+    numberOfMembers: 4,
+  },
+  {
+    id: "4",
+    name: "Power Rangers",
+    picture:
+      "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQrtYzIiKsxu86ysm1wLFydr5yiTVA05dfHwA&s",
+    isFilterd: false,
+    numberOfMembers: 6,
+  },
+  {
+    id: "5",
+    name: "Teen Titans",
+    picture:
+      "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT0vBXO-BKKBlWT5gV1PzDbUZ4BcS3TGT8NGw&s",
+    isFilterd: true,
+    numberOfMembers: 5,
+  },
+  {
+    id: "6",
+    name: "Ninga Turtles",
+    picture:
+      "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQlLycnffNMBrxjCKrG80nlmKWW3eAPfbhlow&s",
+    isFilterd: false,
+    numberOfMembers: 4,
+  },
+];
+
+export { MOCK_USERS, MOCK_GROUPS };
diff --git a/app/src/mocks/data/blocklist.ts b/app/src/mocks/data/blocklist.ts
index 7d097005..8f9287b6 100644
--- a/app/src/mocks/data/blocklist.ts
+++ b/app/src/mocks/data/blocklist.ts
@@ -1,15 +1,11 @@
 import { BlockedUserProps } from "@features/privacy-settings/BlockItem";
 
-let blockList: BlockedUserProps[] = [
+const blockList: BlockedUserProps[] = [
   {
-    id: 1,
-    name: "Alice",
-    username: "alice123",
+    id: "1",
   },
   {
-    id: 2,
-    name: "Bob",
-    username: "bob123",
+    id: "2",
   },
 ];
 
diff --git a/app/src/mocks/data/chats.ts b/app/src/mocks/data/chats.ts
index cc0989f1..bf471006 100644
--- a/app/src/mocks/data/chats.ts
+++ b/app/src/mocks/data/chats.ts
@@ -1,117 +1,372 @@
+export type Member = {
+  _id: string;
+  username: string;
+  screenFirstName: string;
+  screenLastName: string;
+  phoneNumber: string;
+  photo: string;
+  status: string;
+  isAdmin: boolean;
+  stories: string[];
+  blockedUsers: string[];
+  Role: "member" | "admin" | "creator";
+  isBlocked?: boolean;
+};
+
+export type ChatMember = {
+  Role: "member" | "admin";
+  _id: string;
+};
+
 export type Chat = {
-  id: number;
-  name: string;
-  lastMessage: string;
-  timestamp: string;
-  lastSeen?: string;
-  image?: string;
+  _id: string;
+  isSeen: boolean;
+  isDeleted: boolean;
+  members: ChatMember[];
+  type: "private" | "group" | "channel";
+  numberOfMembers: number;
 };
 
-export const allChats: Chat[] = [
+export type ChatDataType = {
+  chats: Chat[];
+  members: Member[];
+  lastMessages: {
+    chatId: string;
+    lastMessage: {
+      _id: string;
+      content: string;
+      senderId: string;
+      timestamp: string;
+    };
+  }[];
+};
+
+export const allChats: Chat[] = [];
+//   {
+//     _id: "1",
+//     isSeen: false,
+//     members: ["1", "2"],
+//     type: "private",
+//     numberOfMembers: 1
+//   },
+//   {
+//     _id: "2",
+//     isSeen: false,
+//     members: ["2", "1"],
+//     type: "private",
+//     numberOfMembers: 1
+//   },
+//   {
+//     _id: "3",
+//     isSeen: false,
+//     members: ["3"],
+//     type: "private",
+//     numberOfMembers: 1
+//   },
+//   {
+//     _id: "4",
+//     isSeen: false,
+//     members: ["4"],
+//     type: "private",
+//     numberOfMembers: 1
+//   },
+//   {
+//     _id: "5",
+//     isSeen: false,
+//     members: ["5"],
+//     type: "private",
+//     numberOfMembers: 1
+//   },
+//   {
+//     _id: "6",
+//     isSeen: false,
+//     members: ["6"],
+//     type: "private",
+//     numberOfMembers: 1
+//   },
+//   {
+//     _id: "7",
+//     isSeen: false,
+//     members: ["7"],
+//     type: "private",
+//     numberOfMembers: 1
+//   },
+//   {
+//     _id: "8",
+//     isSeen: false,
+//     members: ["8"],
+//     type: "private",
+//     numberOfMembers: 1
+//   },
+//   {
+//     _id: "9",
+//     isSeen: false,
+//     members: ["9"],
+//     type: "private",
+//     numberOfMembers: 1
+//   }
+// ];
+
+export const members: Member[] = [
   {
-    id: 1,
-    name: "Alice",
-    lastMessage: "See you soon!",
-    timestamp: "1h ago",
-    lastSeen: "10 minutes ago",
+    _id: "1",
+    username: "alice_smith",
+    screenFirstName: "Alice",
+    screenLastName: "Smith",
+    phoneNumber: "+1234567890",
+    photo: "alice.jpg",
+    status: "active",
+    isAdmin: false,
+    Role: "member",
+    stories: [],
+    blockedUsers: []
   },
   {
-    id: 2,
-    name: "Bob",
-    lastMessage: "Let's meet tomorrow.",
-    timestamp: "2h ago",
-    lastSeen: "30 minutes ago",
+    _id: "2",
+    username: "bob_jones",
+    screenFirstName: "Bob",
+    screenLastName: "Jones",
+    phoneNumber: "+1987654321",
+    photo: "bob.jpg",
+    status: "active",
+    isAdmin: false,
+    Role: "member",
+    stories: [],
+    blockedUsers: []
   },
   {
-    id: 3,
-    name: "Charlie",
-    lastMessage: "Hello!",
-    timestamp: "3h ago",
-    lastSeen: "45 minutes ago",
+    _id: "3",
+    username: "charlie_brown",
+    screenFirstName: "Charlie",
+    screenLastName: "Brown",
+    phoneNumber: "+1567890123",
+    photo: "charlie.jpg",
+    status: "active",
+    isAdmin: false,
+    Role: "member",
+    stories: [],
+    blockedUsers: []
   },
   {
-    id: 4,
-    name: "David",
-    lastMessage: "Good morning!",
-    timestamp: "4h ago",
-    lastSeen: "1 hour ago",
+    _id: "4",
+    username: "david_miller",
+    screenFirstName: "David",
+    screenLastName: "Miller",
+    phoneNumber: "+1456789012",
+    photo: "david.jpg",
+    status: "active",
+    isAdmin: false,
+    Role: "member",
+    stories: [],
+    blockedUsers: []
   },
   {
-    id: 5,
-    name: "Eve",
-    lastMessage: "See you at 5pm.",
-    timestamp: "5h ago",
-    lastSeen: "1 hour ago",
+    _id: "5",
+    username: "eve_wilson",
+    screenFirstName: "Eve",
+    screenLastName: "Wilson",
+    phoneNumber: "+1345678901",
+    photo: "eve.jpg",
+    status: "active",
+    isAdmin: false,
+    Role: "member",
+    stories: [],
+    blockedUsers: []
   },
   {
-    id: 6,
-    name: "Frank",
-    lastMessage: "I'm on my way.",
-    timestamp: "6h ago",
-    lastSeen: "2 hours ago",
+    _id: "6",
+    username: "frank_garcia",
+    screenFirstName: "Frank",
+    screenLastName: "Garcia",
+    phoneNumber: "+1234567890",
+    photo: "frank.jpg",
+    status: "active",
+    isAdmin: false,
+    Role: "member",
+    stories: [],
+    blockedUsers: []
   },
   {
-    id: 7,
-    name: "Grace",
-    lastMessage:
-      "How are you? a very long message to test if the text is truncated correctly",
-    timestamp: "7h ago",
-    lastSeen: "3 hours ago",
+    _id: "7",
+    username: "grace_lee",
+    screenFirstName: "Grace",
+    screenLastName: "Lee",
+    phoneNumber: "+1876543210",
+    photo: "grace.jpg",
+    status: "active",
+    isAdmin: false,
+    Role: "member",
+    stories: [],
+    blockedUsers: []
   },
   {
-    id: 8,
-    name: "Hannah",
-    lastMessage: "Let's catch up soon!",
-    timestamp: "8h ago",
-    lastSeen: "4 hours ago",
+    _id: "8",
+    username: "hannah_davis",
+    screenFirstName: "Hannah",
+    screenLastName: "Davis",
+    phoneNumber: "+1765432109",
+    photo: "hannah.jpg",
+    status: "active",
+    isAdmin: false,
+    Role: "member",
+    stories: [],
+    blockedUsers: []
   },
   {
-    id: 9,
-    name: "Ivy",
-    lastMessage: "Thanks for your help!",
-    timestamp: "9h ago",
-    lastSeen: "5 hours ago",
+    _id: "9",
+    username: "ivy_martinez",
+    screenFirstName: "Ivy",
+    screenLastName: "Martinez",
+    phoneNumber: "+1654321098",
+    photo: "ivy.jpg",
+    status: "active",
+    isAdmin: false,
+    Role: "member",
+    stories: [],
+    blockedUsers: []
   },
   {
-    id: 10,
-    name: "Jack",
-    lastMessage: "Can't wait to see you!",
-    timestamp: "10h ago",
-    lastSeen: "6 hours ago",
+    _id: "10",
+    username: "jack_anderson",
+    screenFirstName: "Jack",
+    screenLastName: "Anderson",
+    phoneNumber: "+1543210987",
+    photo: "jack.jpg",
+    status: "active",
+    isAdmin: false,
+    Role: "member",
+    stories: [],
+    blockedUsers: []
   },
   {
-    id: 11,
-    name: "Kara",
-    lastMessage: "Talk soon.",
-    timestamp: "11h ago",
-    lastSeen: "7 hours ago",
+    _id: "11",
+    username: "kara_thomas",
+    screenFirstName: "Kara",
+    screenLastName: "Thomas",
+    phoneNumber: "+1432109876",
+    photo: "kara.jpg",
+    status: "active",
+    isAdmin: false,
+    Role: "member",
+    stories: [],
+    blockedUsers: []
   },
   {
-    id: 12,
-    name: "Liam",
-    lastMessage: "I'll send the details.",
-    timestamp: "12h ago",
-    lastSeen: "8 hours ago",
+    _id: "12",
+    username: "liam_johnson",
+    screenFirstName: "Liam",
+    screenLastName: "Johnson",
+    phoneNumber: "+1321098765",
+    photo: "liam.jpg",
+    status: "active",
+    isAdmin: false,
+    Role: "member",
+    stories: [],
+    blockedUsers: []
   },
   {
-    id: 13,
-    name: "Mia",
-    lastMessage: "Let's go for a walk.",
-    timestamp: "13h ago",
-    lastSeen: "9 hours ago",
+    _id: "13",
+    username: "mia_white",
+    screenFirstName: "Mia",
+    screenLastName: "White",
+    phoneNumber: "+1210987654",
+    photo: "mia.jpg",
+    status: "active",
+    isAdmin: false,
+    Role: "member",
+    stories: [],
+    blockedUsers: []
   },
   {
-    id: 14,
-    name: "Noah",
-    lastMessage: "I agree with you.",
-    timestamp: "14h ago",
-    lastSeen: "10 hours ago",
+    _id: "14",
+    username: "noah_robinson",
+    screenFirstName: "Noah",
+    screenLastName: "Robinson",
+    phoneNumber: "+1109876543",
+    photo: "noah.jpg",
+    status: "active",
+    isAdmin: false,
+    Role: "member",
+    stories: [],
+    blockedUsers: []
   },
   {
-    id: 15,
-    name: "Olivia",
-    lastMessage: "I'll get back to you.",
-    timestamp: "15h ago",
-    lastSeen: "11 hours ago",
+    _id: "15",
+    username: "olivia_clark",
+    screenFirstName: "Olivia",
+    screenLastName: "Clark",
+    phoneNumber: "+1098765432",
+    photo: "olivia.jpg",
+    status: "active",
+    isAdmin: false,
+    Role: "member",
+    stories: [],
+    blockedUsers: []
+  }
+];
+
+export const lastMessages = [
+  {
+    chatId: "1",
+    lastMessage: {
+      content: "Hello, Alice!",
+      timestaamp: "2021-09-01T12:00:00.000Z"
+    }
   },
+  {
+    chatId: "2",
+    lastMessage: {
+      content: "Hi, Bob!",
+      timestaamp: "2021-09-01T12:00:00.000Z"
+    }
+  },
+  {
+    chatId: "3",
+    lastMessage: {
+      content: "Hello, Charlie!",
+      timestaamp: "2021-09-01T12:00:00.000Z"
+    }
+  },
+  {
+    chatId: "4",
+    lastMessage: {
+      content: "Hi, David!",
+      timestaamp: "2021-09-01T12:00:00.000Z"
+    }
+  },
+  {
+    chatId: "5",
+    lastMessage: {
+      content: "Hello, Eve!",
+      timestaamp: "2021-09-01T12:00:00.000Z"
+    }
+  },
+  {
+    chatId: "6",
+    lastMessage: {
+      content: "Hi, Frank!",
+      timestaamp: "2021-09-01T12:00:00.000Z"
+    }
+  },
+  {
+    chatId: "7",
+    lastMessage: {
+      content: "Hello, Grace!",
+      timestaamp: "2021-09-01T12:00:00.000Z"
+    }
+  },
+  {
+    chatId: "8",
+    lastMessage: {
+      content: "Hi, Hannah!",
+      timestaamp: "2021-09-01T12:00:00.000Z"
+    }
+  },
+  {
+    chatId: "9",
+    lastMessage: {
+      content: "Hello, Ivy!",
+      timestaamp: "2021-09-01T12:00:00.000Z"
+    }
+  }
 ];
diff --git a/app/src/mocks/data/messages.ts b/app/src/mocks/data/messages.ts
new file mode 100644
index 00000000..1a89807d
--- /dev/null
+++ b/app/src/mocks/data/messages.ts
@@ -0,0 +1,358 @@
+import { MessageInterface, MessageStatus } from "types/messages";
+
+const messages: MessageInterface[] = [
+  {
+    _id: "msg1",
+    timestamp: new Date().toISOString(),
+    content: "Hello there!",
+    contentType: "text",
+    isPinned: false,
+    isForward: false,
+    isAnnouncement: false,
+    senderId: "1",
+    chatId: "chat001",
+    parentMessageId: "",
+    status: MessageStatus.sent,
+    isReply: false,
+    replyMessageId: null,
+    media: "",
+  },
+  {
+    _id: "msg2",
+    timestamp: new Date().toISOString(),
+    content: "Check this document.",
+    contentType: "file",
+    isPinned: false,
+    isForward: true,
+    isAnnouncement: false,
+    senderId: "2",
+    chatId: "chat001",
+    parentMessageId: "",
+    status: MessageStatus.delivered,
+    isReply: false,
+    replyMessageId: null,
+    media: "https://example.com/doc.pdf",
+  },
+  {
+    _id: "msg3",
+    timestamp: new Date().toISOString(),
+    content: "Don't forget the meeting tomorrow.",
+    contentType: "text",
+    isPinned: true,
+    isForward: false,
+    isAnnouncement: true,
+    senderId: "user003",
+    chatId: "2",
+    parentMessageId: "",
+    status: MessageStatus.seen,
+    isReply: false,
+    replyMessageId: null,
+    media: "",
+  },
+  {
+    _id: "msg4",
+    timestamp: new Date().toISOString(),
+    content: "Here's the photo from the event.",
+    contentType: "image",
+    isPinned: false,
+    isForward: false,
+    isAnnouncement: false,
+    senderId: "1",
+    chatId: "chat002",
+    parentMessageId: "",
+    status: MessageStatus.sent,
+    isReply: false,
+    replyMessageId: null,
+    media: "",
+  },
+  {
+    _id: "msg5",
+    timestamp: new Date().toISOString(),
+    content: "Can you confirm this?",
+    contentType: "text",
+    isPinned: false,
+    isForward: false,
+    isAnnouncement: false,
+    senderId: "1",
+    chatId: "chat003",
+    parentMessageId: "",
+    status: MessageStatus.error,
+    isReply: false,
+    replyMessageId: null,
+    media: "",
+  },
+  {
+    _id: "msg6",
+    timestamp: new Date().toISOString(),
+    content: "Reminder: Deadline is tomorrow!",
+    contentType: "text",
+    isPinned: true,
+    isForward: false,
+    isAnnouncement: true,
+    senderId: "2",
+    chatId: "chat003",
+    parentMessageId: "",
+    status: MessageStatus.seen,
+    isReply: false,
+    replyMessageId: null,
+    media: "",
+  },
+  {
+    _id: "msg7",
+    timestamp: new Date().toISOString(),
+    content: "Could you send me the file again?",
+    contentType: "text",
+    isPinned: false,
+    isForward: false,
+    isAnnouncement: false,
+    senderId: "2",
+    chatId: "chat004",
+    parentMessageId: "",
+    status: MessageStatus.sent,
+    isReply: true,
+    replyMessageId: null,
+    media: "",
+  },
+  {
+    _id: "msg8",
+    timestamp: new Date().toISOString(),
+    content: "Here's the updated report.",
+    contentType: "file",
+    isPinned: false,
+    isForward: false,
+    isAnnouncement: false,
+    senderId: "2",
+    chatId: "chat004",
+    parentMessageId: "",
+    status: MessageStatus.delivered,
+    isReply: false,
+    replyMessageId: null,
+    media: "https://example.com/report.pdf",
+  },
+  {
+    _id: "msg9",
+    timestamp: new Date().toISOString(),
+    content: "Meeting notes are attached.",
+    contentType: "file",
+    isPinned: true,
+    isForward: false,
+    isAnnouncement: true,
+    senderId: "1",
+    chatId: "chat005",
+    parentMessageId: "",
+    status: MessageStatus.seen,
+    isReply: false,
+    replyMessageId: null,
+    media: "",
+  },
+  {
+    _id: "msg10",
+    timestamp: new Date().toISOString(),
+    content: "This message failed to deliver.",
+    contentType: "text",
+    isPinned: false,
+    isForward: false,
+    isAnnouncement: false,
+    senderId: "2",
+    chatId: "chat005",
+    parentMessageId: "",
+    status: MessageStatus.error,
+    isReply: false,
+    replyMessageId: null,
+    media: "",
+  },
+  {
+    _id: "msg11",
+    timestamp: new Date().toISOString(),
+    content: "Here's a link to the presentation.",
+    contentType: "link",
+    isPinned: false,
+    isForward: true,
+    isAnnouncement: false,
+    senderId: "2",
+    chatId: "chat006",
+    parentMessageId: "",
+    status: MessageStatus.delivered,
+    isReply: false,
+    replyMessageId: null,
+    media: "",
+  },
+  {
+    _id: "msg12",
+    timestamp: new Date().toISOString(),
+    content: "Great job on the project!",
+    contentType: "text",
+    isPinned: false,
+    isForward: false,
+    isAnnouncement: false,
+    senderId: "1",
+    chatId: "chat006",
+    parentMessageId: "",
+    status: MessageStatus.seen,
+    isReply: false,
+    replyMessageId: null,
+    media: "",
+  },
+  {
+    _id: "msg13",
+    timestamp: new Date().toISOString(),
+    content: "Here's an audio file.",
+    contentType: "audio",
+    isPinned: false,
+    isForward: false,
+    isAnnouncement: false,
+    senderId: "2",
+    chatId: "chat007",
+    parentMessageId: "",
+    status: MessageStatus.sent,
+    isReply: false,
+    replyMessageId: null,
+    media: "",
+  },
+  {
+    _id: "msg14",
+    timestamp: new Date().toISOString(),
+    content: "Here are some event details.",
+    contentType: "text",
+    isPinned: false,
+    isForward: false,
+    isAnnouncement: true,
+    senderId: "1",
+    chatId: "chat007",
+    parentMessageId: "",
+    status: MessageStatus.delivered,
+    isReply: false,
+    replyMessageId: null,
+    media: "",
+  },
+  {
+    _id: "msg15",
+    timestamp: new Date().toISOString(),
+    content: "This is a pinned announcement.",
+    contentType: "text",
+    isPinned: true,
+    isForward: false,
+    isAnnouncement: true,
+    senderId: "2",
+    chatId: "chat008",
+    parentMessageId: "",
+    status: MessageStatus.seen,
+    isReply: false,
+    replyMessageId: null,
+    media: "",
+  },
+  {
+    _id: "msg16",
+    timestamp: new Date().toISOString(),
+    content: "Here's an error message.",
+    contentType: "text",
+    isPinned: false,
+    isForward: false,
+    isAnnouncement: false,
+    senderId: "1",
+    chatId: "chat008",
+    parentMessageId: "",
+    status: MessageStatus.error,
+    isReply: false,
+    replyMessageId: null,
+    media: "",
+  },
+  {
+    _id: "msg17",
+    timestamp: new Date().toISOString(),
+    content: "Did you check the document?",
+    contentType: "text",
+    isPinned: false,
+    isForward: false,
+    isAnnouncement: false,
+    senderId: "2",
+    chatId: "chat009",
+    parentMessageId: "",
+    status: MessageStatus.sent,
+    isReply: true,
+    replyMessageId: null,
+    media: "",
+  },
+  {
+    _id: "msg18",
+    timestamp: new Date().toISOString(),
+    content: "Here's a quick video update.",
+    contentType: "video",
+    isPinned: false,
+    isForward: false,
+    isAnnouncement: false,
+    senderId: "1",
+    chatId: "chat009",
+    parentMessageId: "",
+    status: MessageStatus.delivered,
+    isReply: false,
+    replyMessageId: null,
+    media: "",
+  },
+  {
+    _id: "msg19",
+    timestamp: new Date().toISOString(),
+    content: "Congratulations on your achievement!",
+    contentType: "text",
+    isPinned: false,
+    isForward: false,
+    isAnnouncement: false,
+    senderId: "1",
+    chatId: "chat010",
+    parentMessageId: "",
+    status: MessageStatus.seen,
+    isReply: false,
+    replyMessageId: null,
+    media: "",
+  },
+  {
+    _id: "msg20",
+    timestamp: new Date().toISOString(),
+    content: "Meeting scheduled for next week.",
+    contentType: "text",
+    isPinned: true,
+    isForward: false,
+    isAnnouncement: true,
+    senderId: "2",
+    chatId: "chat010",
+    parentMessageId: "",
+    status: MessageStatus.sent,
+    isReply: false,
+    replyMessageId: null,
+    media: "",
+  },
+];
+
+const generateMessages = (count: number) => {
+  return Array.from({ length: count }, (_, index) => {
+    const id = index + 21; // Start after the 20th message
+    const contentTypes = ["text", "file", "image", "audio", "video", "link"];
+    const statuses = [
+      MessageStatus.sent,
+      MessageStatus.delivered,
+      MessageStatus.seen,
+      MessageStatus.error,
+    ];
+
+    return {
+      _id: `msg${id}`,
+      timestamp: new Date().toISOString(),
+      content: `This is message number ${id}`,
+      contentType: contentTypes[index % contentTypes.length],
+      isPinned: id % 10 === 0, // Pin every 10th message
+      isForward: id % 5 === 0, // Mark every 5th message as forwarded
+      isAnnouncement: id % 7 === 0, // Mark every 7th message as an announcement
+      senderId: ((id % 3) + 1).toString(), // Rotate between sender IDs 1, 2, and 3
+      chatId: `chat00${(id % 10) + 1}`, // Assign to chat IDs 1 through 10
+      parentMessageId: "",
+      status: statuses[id % statuses.length], // Rotate between statuses
+      isReply: id % 4 === 0, // Mark every 4th message as a reply
+      replyMessageId: id % 4 === 0 ? `msg${Math.max(id - 1, 1)}` : null, // Reply to the previous message
+      media: id % 3 === 0 ? `https://example.com/media${id}` : "", // Add media for every 3rd message
+    };
+  });
+};
+
+// Generate 50 additional messages
+export const newMessages = generateMessages(50);
+export { messages };
diff --git a/app/src/mocks/data/stories.ts b/app/src/mocks/data/stories.ts
new file mode 100644
index 00000000..044d4797
--- /dev/null
+++ b/app/src/mocks/data/stories.ts
@@ -0,0 +1,120 @@
+const MOCK_MY_STORIES = {
+  stories: [
+    {
+      id: "1",
+      content:
+        "https://scontent.fcai11-1.fna.fbcdn.net/v/t1.6435-9/122032103_3472532366305566_6239088129819761020_n.jpg?stp=dst-jpg_s960x960&_nc_cat=104&ccb=1-7&_nc_sid=2285d6&_nc_eui2=AeEXsEzDOwFTqpmb7eVOF_defX6b8GN9_pB9fpvwY33-kK5Gl95eJW0QBmEl_26DnBM80yvcN_GW8-7f9MJZZ1z6&_nc_ohc=bSnTWn4p8x0Q7kNvgHoFcXP&_nc_zt=23&_nc_ht=scontent.fcai11-1.fna&_nc_gid=Ab5Y75GRyvck02dUvRxz55i&oh=00_AYCR6Lf6wZTBAR3XPjJLP8yCvUvhON0c_hM_eUdGYvRwdA&oe=676B5E8E",
+      timestamp: new Date().toISOString(),
+      caption: "CUFE is the hell",
+      views: [
+        {
+          id: "1",
+          userId: "1",
+          name: "Ahmed Hamdy",
+          photo: "https://i.pravatar.cc/70?=0.2",
+          seenTime: new Date().toISOString(),
+        },
+        {
+          id: "2",
+          userId: "12",
+          name: "John Doe",
+          photo: "https://i.pravatar.cc/70?=0.25",
+          seenTime: new Date().toISOString(),
+        },
+        {
+          id: "3",
+          userId: "13",
+          name: "Alice Bob",
+          photo: "https://i.pravatar.cc/70?=0.35",
+          seenTime: new Date().toISOString(),
+        },
+        {
+          id: "4",
+          userId: "14",
+          name: "Bob Alice",
+          photo: "https://i.pravatar.cc/70?=0.45",
+          seenTime: new Date().toISOString(),
+        },
+      ],
+    },
+  ],
+};
+const MOCK_OTHER_USERS_STORIES = [
+  {
+    userId: "1",
+    name: "Ahmed Hamdy",
+    photo: "https://i.pravatar.cc/70?=0.7",
+    stories: [
+      {
+        id: "110001",
+        content:
+          "https://mcprod.hyperone.com.eg/media/catalog/product/cache/1ca275941aea0ae98b372dcb44b7c67a/6/2/6224011241366-300ml.jpg",
+        timestamp: new Date().toISOString(),
+        caption: "I love cola",
+        viewed: false,
+      },
+    ],
+  },
+  {
+    userId: "3",
+    name: "John Doe",
+    photo: "https://i.pravatar.cc/70?=0.45",
+    stories: [
+      {
+        id: "110004",
+        content: "https://i.imgflip.com/35dq1c.jpg",
+        timestamp: new Date().toISOString(),
+        caption: "hitler cat",
+        viewed: true,
+      },
+      {
+        id: "110005",
+        content:
+          "https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png",
+        timestamp: new Date().toISOString(),
+        caption: "Cutest cat ever",
+        viewed: false,
+      },
+    ],
+  },
+  {
+    userId: "4",
+    name: "Bob Alice",
+    photo: "https://i.pravatar.cc/70?=0.55",
+    stories: [
+      {
+        id: "110008",
+        content:
+          "https://mcprod.hyperone.com.eg/media/catalog/product/cache/1ca275941aea0ae98b372dcb44b7c67a/6/2/6224011241366-300ml.jpg",
+        timestamp: new Date().toISOString(),
+        caption: "I love cola",
+        viewed: false,
+      },
+      {
+        id: "110009",
+        content:
+          "https://ichef.bbci.co.uk/ace/standard/976/cpsprodpb/133d/live/5afc4bb0-206e-11ef-a787-dfc633433082.jpg.webp",
+        timestamp: new Date().toISOString(),
+        caption: "Real Madrid is the best",
+        viewed: false,
+      },
+    ],
+  },
+  {
+    userId: "5",
+    name: "Peter Barker",
+    photo: "https://i.pravatar.cc/70?=0.05",
+    stories: [
+      {
+        id: "110010",
+        content:
+          "https://upload.wikimedia.org/wikipedia/en/2/21/Web_of_Spider-Man_Vol_1_129-1.png",
+        timestamp: new Date().toISOString(),
+        caption: "Spiderman",
+        viewed: true,
+      },
+    ],
+  },
+];
+
+export { MOCK_MY_STORIES, MOCK_OTHER_USERS_STORIES };
diff --git a/app/src/mocks/data/users.ts b/app/src/mocks/data/users.ts
new file mode 100644
index 00000000..6aaa89e6
--- /dev/null
+++ b/app/src/mocks/data/users.ts
@@ -0,0 +1,72 @@
+import { userStatus } from "types/admin";
+export const MOCK_USER1 = {
+  id: "1",
+  email: "johndoe@example.com",
+  password: "1234",
+  screenFirstName: "John",
+  screenLastName: "Doe",
+  bio: "Hello, I'm John Doe",
+  photo: "",
+  username: "johndoe",
+  phoneNumber: "0123456789",
+  status: "Online",
+  screenName: "John Doe",
+  accountStatus: userStatus.active,
+};
+
+export const MOCK_USER2 = {
+  id: "2",
+  email: "ay7aga@example.com",
+  password: "1234",
+  firstName: "ay",
+  lastName: "7aga",
+  bio: "Hello, I'm ay 7aga",
+  photo: "",
+  username: "Ay 7aga",
+  phoneNumber: "0123456798",
+  status: "Online",
+  screenName: "Ay 7aga",
+  accountStatus: userStatus.active,
+};
+
+export const BANNNED = {
+  id: "3",
+  email: "banned@example.com",
+  password: "1234",
+  firstName: "المصفوع",
+  lastName: "من",
+  bio: "أهلا أنا المصفوع من شخصيا",
+  photo: "",
+  username: "theBannedUser",
+  phoneNumber: "0125456798",
+  status: "Online",
+  screenName: "theBannedUser",
+  accountStatus: userStatus.banned,
+};
+
+export const DEACTIVATED = {
+  id: "4",
+  email: "deactivated@example.com",
+  password: "1234",
+  firstName: "Mr. ",
+  lastName: "deactivtaed",
+  bio: "أهلا أنا المصفوع من شخصيا",
+  photo: "",
+  username: "theDeactivatedUser",
+  phoneNumber: "0125451598",
+  status: "Online",
+  screenName: "theDeactivatedUser",
+  accountStatus: userStatus.deactivated,
+};
+export const ADMIN = {
+  id: "5",
+  screenFirstName: "Eng.",
+  screenLastName: "Hashish",
+  email: "admin@gmail.com",
+  password: "12345678",
+  username: "admin",
+  isAdmin: true,
+};
+
+export const TOKEN =
+  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6Ik1vY2tVc2VyIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c";
diff --git a/app/src/mocks/devices/devices.ts b/app/src/mocks/devices/devices.ts
index 87107e20..9e5d7989 100644
--- a/app/src/mocks/devices/devices.ts
+++ b/app/src/mocks/devices/devices.ts
@@ -2,12 +2,26 @@ import { SESSIONS } from "@mocks/data/Sessions";
 import { http, HttpResponse } from "msw";
 
 export const devicesMock = [
-  http.get("/sessions", async () => {
+  http.get("/auth/sessions", async () => {
     return HttpResponse.json(
       {
         status: "success",
         message: "Sessions fetched successfully",
-        data: SESSIONS,
+        data: {
+          sessions: SESSIONS,
+        },
+      },
+      { status: 200 },
+    );
+  }),
+  http.post("/auth/logout/others", async () => {
+    return HttpResponse.json(
+      {
+        status: "success",
+        message: "Other sessions logged out successfully",
+        data: {
+          sessions: [],
+        },
       },
       { status: 200 },
     );
diff --git a/app/src/mocks/handlers.ts b/app/src/mocks/handlers.ts
index 1dbca9fa..bf4ee1fc 100644
--- a/app/src/mocks/handlers.ts
+++ b/app/src/mocks/handlers.ts
@@ -11,6 +11,9 @@ import { profilePictureMock } from "./profile-settings/profile-picture";
 import { storiesMock } from "./stories/stories";
 import { chats } from "./chats/chats";
 import { devicesMock } from "./devices/devices";
+import { paginationMock } from "./chats/pagination";
+import { media } from "./chats/media";
+import { adminMock } from "./admin/admin";
 
 export default [
   ...loginMock,
@@ -27,4 +30,7 @@ export default [
   ...profilePictureMock,
   ...storiesMock,
   ...devicesMock,
+  ...paginationMock,
+  ...media,
+  ...adminMock,
 ];
diff --git a/app/src/mocks/mockData.ts b/app/src/mocks/mockData.ts
deleted file mode 100644
index 3bcd7097..00000000
--- a/app/src/mocks/mockData.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-export const MOCK_USER = {
-  email: "johndoe@example.com",
-  password: "1234",
-  firstName: "John",
-  lastName: "Doe",
-  bio: "Hello, I'm John Doe",
-  photo:
-    "https://i.pinimg.com/564x/26/76/a1/2676a1898da6edae9fc648c94332903f.jpg",
-  username: "johndoe",
-  phoneNumber: "0123456789",
-  status: "Online",
-};
-
-export const MOCK_MY_STORIES = [
-  {
-    content:
-      "https://i.pinimg.com/564x/26/76/a1/2676a1898da6edae9fc648c94332903f.jpg",
-    timestamp: "2021-09-01T12:00:00Z",
-    caption: "Hello, I'm John Doe",
-    views: 100,
-  },
-  {
-    content: "https://cdn.britannica.com/52/128652-050-14AD19CA/Maki-zushi.jpg",
-    timestamp: "2021-09-01T11:00:00Z",
-    caption: "I love sushi",
-    views: 10,
-  },
-  {
-    content:
-      "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSyDcH_MxdsTsK6KMVon-Ybfa2WiT-R70ZjWw&s",
-    timestamp: "2021-09-01T10:00:00Z",
-    caption: "I love burgers",
-    views: 20,
-  },
-];
-export const MOCK_OTHER_USER_STORIES = [
-  {
-    content:
-      "https://i.pinimg.com/564x/26/76/a1/2676a1898da6edae9fc648c94332903f.jpg",
-    timestamp: "2021-09-01T12:00:00Z",
-    caption: "Hello, I'm John Doe",
-    viewed: true,
-  },
-  {
-    content:
-      "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxISEhUTExIWFhUXFRcZFxcYGBcYGBgZGB4YGBgaFhgYHSggHR0mHRgVITEiJSkrLjAvFx8zODMtNygvLisBCgoKDg0OGxAQGy0mICUwLS0uListLTc1Ly8vLS0vMDAtLy0tLSsrLS0vNS0tLS8tLS0tLy0tLS0tLS0tLS0tLf/AABEIALcBEwMBIgACEQEDEQH/xAAcAAACAgMBAQAAAAAAAAAAAAAFBgMEAAECBwj/xAA/EAACAQMDAgUDAQYFAwMEAwABAhEAAyEEEjEFQQYTIlFhMnGBkRQjQqGx8AdSYsHRguHxJDNyFRZjokOSwv/EABoBAAIDAQEAAAAAAAAAAAAAAAMEAQIFAAb/xAAwEQACAgEDAgMGBgMBAAAAAAABAgADEQQSITFBEyJRI2FxgZHwBTKhwdHxFLHhQv/aAAwDAQACEQMRAD8A8QFdrUtzRuvKz9s1woqAQekllI4IktpCcCp307LzRTppRFV1ZCwJ3KxX6R8HM/apEZHVyoJJUFTH0gfVNBa1geOkbSisnaTzAlSKaj1HNQpeo6PkRa6rYZfSpQKr6d5q0KKIuZsV1FYK7ipkTmsireg0Fy84S0hdj2HYdyScAfJpht+H9Pp4bV3l/wDiu7bI53MIJEe0fmg3ahKvzHn07wtVD2nyj5xb0miuXZ8tGaOYGB9zwKJJ4Xv4L7LQIn1uske4CzNO/TLmmusRaKuEg21WAqyP4dsDt37/AGyK8SdQ0z3xvY/SBtyMjAM9hJ++KzW/EXZsKuP9zUr/AAxcZY5/1B2n8DsUFy5qERCTEKWJAMTyAPvmrY8EadgBa1ge4Z9Pp7CfvNV7t22VRblxxbnEBituIjjMQG4+K66lrrWnvpd3Sbi7w+AyzO0+kcYIIHvnih/5GoccH6ARg6ClOTx8czmz4T0bsQureAs7yqhd3+X3HfJ9qTNbtS89tW3BGKzjMfany7o1TTXL9i9llLjbEGWMiOwkRjOYrzN7xe+7f5mY4wMn2pvSW2Mx3GJ62iqtRsl01oiuorRrQmZOIrRrqtGonTiKK9XfZpbNsifU/lttH0tDNDHMEkQPg/IoYomjeq1FtdIha2rw+xgdwkGHSHH03F3sR7jdgiRVG7Ts8xdWt1kiTExJiYJjtJHJrdTJnVmwXIVRJNH9JpVtLAyx+pv9h8VZ6H07bZe5w20nP8h/Wq1+QJNLXWdhDIkr6m5TYNI2s6Xbayf/AFGkaVjmFMx+kEfIpSiaIdA6vc0l3emRwy9mH/NDpsCnmXdNwnrPhbxMmtsq64dYDpOVb/g8j4o/deRXjzMly7+06G75F4mblowA3vtnBnuD+oNGbXj3U2yEvaUzMbhIH34Ij7GnhYIsUMfNTbkfmkLx31hVTykMsQQfYDvPvioOr+Oj61Y+WokSpkscj92SsEfP6V5l1LqjXCQJgkySZZ//AJE9viiFgBKAEyvqtc7OWDc/3P55rVVq3QcwuBGPQazepQjJOD9pkf37UM6hagzRqzoxYMn1SvHtPcfNVLuhuX2izbZ8wSBgf/Jjgfms+sjxPJ0moysKvadZ1p7K3bcjaGRc/wCodv8Airc/s6SVDeZbiZjb74jParv/ANg6m1a3m6mRMAEj7bv+1A9Zp9QqepCUXuMgfpkcUVkOcSa7K/z9DB2oYGqDHNS3L01DR0GInfYGMu6JqJih2iSiaCjr0ibTag12tXfMQWrikuR5YJAgfvCwFsCcYyT7ifah2hkorEczB945ipVsypjN4Q68NI7yBtdSNxBJU9uMkdviZFMniro9vVaZWLJbuBCd4kqEB3FomDJ/MUrabw1euaV9Uowv0pBlwMOR9uB7kH2qj0nrBa2bDPFtoIJ4BGQCedpMD454ms/U6cPZ4iHkdZo6S7aPDt/Ke/32ljwd0655jeVcNu2FB8wkLu2QWC7omYamvT9K/wDqADhVbTh3hpzcYSpKkZCgiPkjsAKGXNBdOnlrIQWyx3Db6goKxA5AaYP/AJpt8Nat7dgKtpnFt8FQBggmY+DP3pIL4j73+/5mte3+Mu2sgiUdN00fsjm0sbENvzAZhUBZWO7/ADF2JEYOMxS5d8KlrmmZbkmEnfIVXbhWjjJ/vmnbxP1w2tLutaV3N0loKsAGUTDIuSxMfH8gc8NGw9o3Lq+W5AvXVO7facBe/IA9uYntR1BXDDoYk+oVwVaAekdBueW2jugbhdusxghdrEQyR7ljHwTXkvkbbzr/AJXYfoSK+g+t9fa2zkeUUKIN4w6hiu0kE9yWj7Cea8F0tpiXuvgF2ljGWySMYJn2o+nxuLZgNUW2KuI9ano2gRcq7OLaEqHcNuYA8cRzmY/oIfDng+1rVugO6XEOB6TI/wBQP+xpp6zpbaNbRl3lQAoyDuPE5EiO3uKH6JLmlvAqqf5SLe70LjaXk/KfHPIpEX2AHDHPxmi2jrYDaBFLqvg7U2WIUC9Ak7AdwHvsOSPtNLxwSDgjkHBH3Fek6rVXVuG6Y83DOASYM5VSe20cT3nOKZ9Yuh1ioNRpwxYN+8wCu2BHmLkHima9eV4sESu/Dj1SeJWk3MBMSeYJ/kMn7U2aVbYZdIXXYR+9QwxNxp2zukbl2rgceqMZrvqPhQ6W6ty2SyK6ny3IDMCeEYCGB4jnNL82zeuPfe5vLn9wilXJY/xM3pT24OKbW1bRlTM22l6zhhKvVdCLbkBwxJnaFK7RzHAWcjCzVICmjxfZUorKAGS3bVgGYkrAgkmN8TEkTGccBXt0RTmUByIx6DqDMHt8A2yfkmBj7c1zcXdbUrnEx3+R95odpHOGX607DkjsY9h3opo2R3/dNtLH/wBs8T32mMCl7qyekOj+spDIxVi1p2Ik8UXvdIYGdgDe65H3qLV3U06brhzkBYkk0ttY8AQ24CVdNoQzAFgueT2qxqnFoOvm3GjcAFOJH+b2E0D0PVHvam0u2VZwvljBbdgDdzP2oz1yy9vXBCS5YBi3uCskBMiYB5kyc03VSQIFnESrtxmO5jJNR0b8WdLTT3wlv6Gto4EzG6RE/igpo5GOIMHM5isrdZXToX0Oqu33W1bUl2wB/vPYCvaOjdHXS6NbZgsFJZh3Y5Y5/uAK8m/w21SW9YN38SELPvIMfoK9Q6z1EgelgR7f7UMIqDIhWtdzgmAU6s4Z7LGUKnafY9v51ZvaUW9AuMv+vEf8/rSx1jVqW4xHqzzPIHtAk/cCr/T+sMhRH/eKcbTJKkdx3/8AFC3QmIjdb6cUO8LAPI9jQu3zTv4u1G5GJjgiPakm0M0VDkQTjBhbTpRGyoCtcb6Uj9T9I/MGqmmAir1xGfTXLdtZeQzdyUEYA7EHM0ZuFi56wdpna4DJgHt2/v8A5ph8L9FOpuJZTEn1NztUfU36dveKF9PtygIzjsOw+AK9Cs+HRp9Cbu4rfjfcIJDIvqhV7TG0frmh3WrSmT1haaTa+3tGDxV1SzpbSWhCKFAQHgbQZ3AewE/MGvH76JfYvZkuJJEAblHcAcNEY9qa7eivXR5t3Tm55gCobpZQkznJBY+r8GoemdPSzqfKZIW4wJXChSACZM+0j7nFZ6PtO7/0ZrWaZioXjbLH+HPW7e/yboLb/SgOVMx6YPBGSPeSOYr0npx8u+1nZtV+ABKg8A88Z4+K8z/xA8Ivp/8A1tgfuiZdRzbPZx8dscRPvTD4H8UNf072FI/awhNq4+QRgEnvKiSQeY59i2JuG9fmIslmPZv8j9+kdeut5Kxp1tecwhZBz+RwMEfpS3oLGk1zNdWUugrKO5j0wLjbRInLD1DJFLfhfxHfW9t1LBgpcO0lgAhVtwPfuCRj1ih2g1Za9bNi05hma6pZlL3LrklRHZBtEnmYoJUKpxjH/I1XXv8AzAg+phTr40iNcFq6HhSxtkAyCJL7OQRt79vxXnnhnQeYbcxBvIo3TBLMoIA7wCCfYU8eL/C72Fu3gy7X8y/tgi4noMqTMbQxiO5PxQPwfpVZ7AuAj1KFHYLBZvyZJ7e9MUBUVipzM68nIBjF4x6neTUBk2slsnYfq3zIjcP4VgxRTS9Tt3zZS2Qpa2zXAcOII9P+oY5HOKJXtBbuWFfSqhxbuMsyZAgqB2nB+4+aC3vB9xrNu8jMl4s5hiAVCk7Nx9+BwZn9AKKyMdD6zXS3IDA8Qp1Tpty7p/NVD5rA2/WVAIJADkcTGP8ArFBtFpGW0DcZwxnyijxbn1GLinnMyOIODTlptRcv2NkBroQ2nEMlsngOGgngA4kfPelvxP0l9VZtrZbaMBncj1MB6lkciZI7QKrYFOMnn75la73TK4+AlPTa1r2mRi6/u24AAKq20Bu+Q2ftRPrvTbF/T272oWL+7at22Ar/AA0EZ5EjIxQ3SMqi3aKFioQEomQB9XqUcmR37Ghni3rRQfvDBBhbeCcTE9vV3nAjvSi7w4CRm+utkLP0iX4o0963qHW6waYII4IXCkTMfr3ND0FGLmiu328/VXPL3L+7WJcjOwKn8Nvn1HmDE80P12kay+1u4lSOGU8Ef8Vt1t0UnmedevA3KPLIpI4MEcEYP4NEek9duadi21bk87x6vw4z+s0OXNY65NGIzBT0Lw14ua8z2UshNylo3bgxCsAuV43FPiaBdQvPqdFfuFVGw2m2qAIG4KSQAPcZNCvDlzbeOdpNq4FPBD7SVj5kCPmmG51Czbt+VZ0rSyFbjMxc3NwAaSAIHeBAwJnmuCAcztx6RP8AD4Yam0y8o4efbbmf1im7XdQTUasAegKoG8jdhFGTBHsf1qPT9Pt2LW9tlsnhS0t/1EmaWuoa8Hcqd/qb3HsPj+tR0kgzjruvF66WX6FG1J5IE5P3njtQ2K7rVRJnMVldVldOkNs16D4N6tb1BFm+YcDDE4cD/wD1/WvPVqa2xBBBII4IwR9jUSZ6j4s6TZhdr5BGCAR94qktm1aDQyh4kYER8Hn9aSn6neYeq4x+9V9Vde59bFvvQzVLi3iT9e6gbrQDgcx7/wDFVNPardqzVu0lFVcQbNmWLQq5pLz22DoYYZHt9j8ESD8E1XQUQtaMEA704YwTBG3t9z296LiBMZPBegGp1xZtyISLgUQZIHqkiMbgMwZJzE07+Jdar6pdIDA8tnunEsBEAH371S8BaFbGne/ci218EqQJFu2sxG6cEycz/DS51rV3TcU27iDf/wDyt/FaydzKMAkjgZj2E1k6wixtg6Ca2hXZ5jLPX77pbKs9wk3E8skMFMFmjcGyc2+YPHNFum9LNtReZUe5vIubhwDOEH5iecUm+Luo6gPbFoME4YlTy2Qy7xGRADATjnMU2+BvElpbNxtQbjXgXZ96naBlgxPA9I3E/B7kCq11HaDmOX6jnYB0/WM1jqFpdPN4Ktvy33I/KwCCIM9pH5rwvqAOmvsLTEKGG0g5XE4M8EZ7jtmK9e6Tpk1Nsm473EI3KHEeU7y0QIkDOTOMdqBeOdA1wEFUdmRV37UHJbyihQTtHPbk/EXqtCsB2MV1NAwTnp9/f7yr0Xqi6m3qbhCDUC05UsRKggBntkjIED0nAx2NJR6hdukkMVUN6FQkABfSpkZYwoyapWWZG2NIOR3Eg4/QgkfNMWie1a27ULAqCdyrk/xbTyAcj9adq06KxI6f6iFupd1Cn+5AvW9T5T2TeY2nTYysd/pb2LSQeeKN+F7TXb1hA5Jc30ZieEREMgdiQ7D9aq6mxZVmcJAOU3KrGSA0FAYP1Ln2JgTx14XuEasXFtMSAxVFHql8ACYEAbue1EuQeG2B2gq/M4BM9bazbtbroX6QiiIgqCNp/wCkfymq2t6rBLFVM3LagEjEt6pI9hmPtSr07pep1d+3qEvHy0Yg2TO1SJRw6j0kGC0R7Uxde11jTsCUS2JVfOuQqBojAaS0Cfb71jXVNhdp9M/vNOq1KyxYfD798tanXzauNaUW7LSGvO0HkglRzPsOKo2OktctW0RyLSw4I9JxwCJMg4qzrtJaW0153FxoJSXJUDGRtgcewFea9b8WMXOn6du9fpYrwzf/AI15nkTxgUTBc7QOPv6SqWFPaN8vWMXi/wAWJpIt2itzU4UIp3qvt5g5kyIXmaE9D8HOW/atYN99yStmBCxnK8F4HHAnMngv4E8GLpGW9qHXz2mA2duc7dwySeW78DmSdsIbmpYMxVEPKMMfxQZ4JAj7NVLGFflTqeM/fSM1A2+aw8DnH8+sRerdAS45c7vMZdzs7QlsjGwkTkKvzwao+JvDu6wjIwY27Y9WRuESdoPIJMdoIHsaP9XVTpSwQsdtsOwDegNtLISMknceMekVMvS1ZGsqsALuDzABA+nbkmTP2JNLjVMNpzNGzSV4YfX+Z5CpIMEQRgj2NWUt7sz/ADq94o6a1kqxGSdpIyDiVM+8YP2FDbDxW9U4dQZ5e6soxWcMK0GI4JH2JH9Klur71E1XMpI7hJyST9zP9ajqQiuTUSZzWVsitVEmarK3WV0iV1qVaiWpVrpMlWpFFRpUq1YSskQVOlRJUyVYSpkyUw+GIe5+z+WpN4qu4glkEgttzAwDzS8pon0TqR094XQoYicNOZEcjM1zZ2nb1nLjcM9J6b40upYTyUXdv2oBujb2H4rz7V2We5bRSzsFlABIWedufziMn3FWOoeMGuIytYU7phixLKpEQGx2957d634f6/btsNxuKob0elLm0GNwJ+oiI49qx009qZO2a51Ne0YOYxaywdPYNsOt15HlAkkT/EFDYUgNIIjBBwKW+rdbFtFsoU3tdQ3nMFbjgCEAAH7sEAlgBuLTwcub9d0moZYCttUQWMBiO7WzBge5UxWeIOkaa+tt/L33/P3IFwXJg+sxO3g/G0e1chFRO4HJ++JLXh0UJxj17zq011EG5cNaLvbt/wCQEhXOMyNxiIiOaOaXXW9TctgIA37vzGExtCswBJEfwxA4kHvUd/wyLtl5eL+1hvSAWkEBWmZMSJx+AaEeGeqNptSujugBr+nVrdwgyX9XpeeXMZ+Qe5NXStFxg9e3wkW2GxWyOc5+sXfHOlt6ne6bEayqqgUj1QWBETmAATGACKVOl392GwV5BMZE/wB817Fe0QcoACLy2gmoVUQfu1GWZiCQYgCTkdsUkeOPBosWjqtNcZ9p/eqYyrHDArAPIBAHejaVynDHMBq60cBq1xAtzVoE2lARu3buHESSA2RBLQTH8Iop4KW3bu3xekDyQF2n1G4WUpsKyZMHj2PtSrYvhwM8gx7Tj+v9/Bjpt4ozBEKNvVrCwN2/IUSwkjaTOY707dyhiNQ84noHROpFEFvTKERgxaFLXNyQGD7o9W7BBHvQjxtdi0ovapXO/wAwINivAEYDAf6SMEYzzVBfEn7D5my5uLA+mNz3Llwl3dnxHIE9oAFLt7oN2/cN0APc2+ZcRB9G8ls89tpzGWPwDmJQxbduI9JrW6hUATYpJ6jH79Zx1Hq17W7dNZUpp0XaqyZKg4e8fb+X8qfPC/QtNpbZW25vai6khlXAkfwgmVUMRJyTGcYFTw30JP2Zdg23bgcBnbupj1BfpPYQeD71dsWbmk8m1cuhrh3AgmfRCqFWfYAwRHJod95XKouQOvvjFGiQqGdvP6ekMeFuqJqUNrUW7YYgqGUjkdjklSY3Aff8huu6+3o0u25Zr19yq3NxB2bYE9sEAEn35rLtg6V7ly7bhri+gwAEIZQHBBksSTgdwD3rPG+lbV2LbXjbTZFwFJLQ38RG7IOcY5+Kq1lJbnp8Omex9MSg01yv7PGT056/LPIzKGgureSBcZd8GZGydqrDgn0xznscZFQdd09y4JFxQyKuDKbzO1gnYkSP74LeHtHpX22yGFwIqqSxEKowZU5khj/LtVLxBdSxdSNO1wIykzLBvcBpIBB7GO1K7SjBlwVmozixNjghhz84C8cdFvWtCjMQVVgVJ+ozz+P7+KR7NzAgfmvYvHerXU6O4PK2bU9POMDGe4Jj8V4vpTitX8Pfchwe887rkIfJEsXGPv8Ab4+1R1KRWmH5p+IyIrUZqZhUdRJkZrRro1zUSZqsrZit106VFqVaiWpVqstJkqVahWpVqwlDJ0qZagWplNXEqZMtXNIBnAJ4AadoBDSTB7Yj7/FU1NNGjRE03Ow3BbTfHd5JH2A9vcUvqrTWnHU8RnR0i2zB6CL2m6bcus3ltuVWCljMZmOAYEDk0Tu+G9YkHyd0zlCDxg4MH+VZ4P6mbPn20GP4pz7rMgfj8mm7ofiy3cvCzdUgAFJLAAAjLD+Y/IoHjWrz294jj6aornvz0MRdIQ7BCdpgklgYAAJBJAJgkEfpRVeoXrDTY1BXG3ERt9iGxOTiMGa9A0nh61pSbtm555dVVd5T0ohEAbV9pyQT6QKBtobV+/svOi7EyZ27gC0kfcgntzUWa9QdpXMHR+H+IpcPjEG6Px1rbRkulwYkOg7H3WP7NCOpdbGo1Av3lK3VMo9s/TBLCEbmCZ+rsBVnU3rL6pdMLG5F2pbYMbbGFUyR/ECWBk5yTOK11PoCNd8qyQLwMn6tmw7f4iTMEgSIH3oymrhtuMc/CBUXZ8hz2+8xhTxpYuXzda4yFktgzb5ZZ3K22fQTkfc/NF9H1mzaQWlvW7oYMCgYMSxYNgjAWJ9+Y7UkaXwfdcXGF22vl3AhDSOcgyCcR/eKq9S8Kaq0QHtq0iQVaQVAJJEgcBW/SghaH5D9fv3Qxe6rIdPv9YV8b9I0mlZL2mZkc3FZkB3219X1Bj9JxMZ71W0uvizcCBjedwVOQqJtG4tHK9gsd+3FAURVgg5B+krx+DR/Sa82iXb1b17ennaRH2MEYnAptafJtY5iZuw+5RiQaHwtcuPlgXYgsefLkwPMAHp/+P3r03oeo0ulI06B4M+bduDYDt7tIkjIgDGec58zsdfdbYtbiANzDYxtks0ep3X1MVzH88VJa8WtuRrlsXCggFmOZEMWgRLGCYHYDtQL0uJwo4htO1QOXPMehoF8+7Dk2WJAO9oUE4Ve2MgwYqp4us2PLZFS410ustEKqqp2lf8AMDPbvnFLPQvGS6VsafBG1h5gIMZ5KZOefmmKz47t3Jb9nG7gS6iCQxyWIkAKc8cDuKXqpuR92P6jj6inG1W+fv8AnNW+o2+oW9lwML6+nagclvpON3BG2DBMSfvTK2qR7S2dRYaUJX1BRCALDMoMEcf/ANfek+/162GTbaKiXLbYF1WJJMPwQZkR7jvxePjnTgXd4uy0KCVVh6d074Jx6h94qrUWZJC9fn99oNrwWUh+nA7Rg6/rtNprYKiGZD5cKSW7jYwBHfv70pnWNfstt2D0AKPN9QZxMuIMEEDP5irOl8WaTyTZuO4KsVQ+W+9B8+xOMR2pU6b1CxbL+ZchnPrYhgrLA2lQBIz6u2CKq+ndskr+kbo1daKFzz35jJc1tt9G1vfD27Wd8ElmJBlpiZJ/UV4/pBivUdDe0VxbvmXCBCklfNMMN53OSsgHED4rzwW19ceolzkcAEmJJHf/AGpjRVshYEGJ691cgqRJGBMAAHtnufn9a5vsYCH+GR2/OR/3ojqyUCghWJW20wZUAEBDIEYPA7Rk4qHqN5Hgqu0kEsAAFkkmUHYRtH4rRxM2DajYVKajNVMmREVyRXZrVRLTmKysrKidKi1ItRCpVqstJVqZahWpVqwlTJkqZKgSp1NWEqZMtMz9QNrTqzWi21bflk5UMC3r5/1AQfalpaZr2uK6NVmVZPUkHJWV5HA9IM/NJ64ZVeO8e/Djh2+EoeC9Izm9cMSZLE8xliQBzkHAotqPCt9tQiW3VHILIxJCiATtLRz9pqt4ee7at2iLYwW3ZAK5/iBEkZnHOeIp/wBZrbNtClxd14zAEhpbhlOIU/7Y4pdtS69+PlNLwDtAQZMYPDfTPKtWzftWhcVZdlyJzLLPGKT+q6dL9y5dt2t9veceWWTPIBUgjPtjJrrVaxmNq21x33gTbN0zkxtIFufxNCP8QLbtqbf7Or29lsB1lrUHcQrqzduP1EigDw7sDoBF9mooy6jr6YP1lbS2LFy6lu4N2qUmW2XFZyvClpCiFKqeTHYcU7dJ6FasqDdUXL9wgvMDM+lSBwoB/lSp0vw/fsXyW1KE2wQd4J/eXwt24ARyzESTIIAGM1L1PryWVdrd9Q7sQ1pUckk8iWc4mfgTV7LSPZIM/wAyaq9yeIzBfr+0ZNT0r/1OodbgVUNlnlR5ZaLjXPT2IDCD2nvSh4i8UNqLvl2LQuBSdvpLKUO5WFwA5BB4GMkE9qqqut6l6FJWzgv2tyuP3j8s2TjNX+maJdNqmtiV8tRuLc3MqCfheWHwB71zBaF83J9My2G1O4rwqjqe+MDge+JNrTN53kQA4IEYABOQPbuKdPCF3TKW0uuRCEunYLmfLb1BwYBiQgJ7SBxIkX0kWtT1sujRZLsd4xO1WZmEcZ7/AGq1/iD0Nlum5bBZgd1wgQXXK7ivdgIz3BH3LhvztV+Mj9ZmCraSV5xHjxN4e0Nmw15dDadFh2VFKu3tG3JXJJXGBXn3TNJpbt4W7lhLZbaEKvcuZcFR5gkAQxQx7Hk0e8I+I7ty0LDXNqKjBMTuIE+XMjOJAJz7mMhtB4juaBv3mlDNvYFmMbgCJgwfse3HviSfNszz8YzWE2eIcY6dP+SdOgaQAKtk3b2xd6s9wLvMk7CrDbj3n3g0KbwyblxjYt3fKVSSSRC5O71kAGAP5fNMXVr2ntvbeyybtUqsqsdrIsblLIeSOORJFGOvdXV9H+zIDvdDp8xuA2PvcKPqBZds45mk6bnrX2mc+8/6j11NNrDwQDn0/eLVvwRdC7l1Nk+WACizdg87YBkEmT+tB/8A7Y1L2mdTbjcAylmVvUYX0bcgleZ7e9PHgPwm42X2FpYVvVbL77gbI34EQYOPamP/AOlBL1u4TtDE+xyQ25eOAQCCeJPvTBvsB4ORMxkXPK9+Z5Tq/B/UbYB/ZTDRG10JJ9+QfwaFXuha0Tcuad5Ujdu2HuOQWkjI+Ir3brOtkBUUuyH6ZI9WNoJAPM8ik7XdaN4/Spt3Cw9RIBEgEcYaRgVWzV2L0AjNGhSzqYq6npWuv2Z/Z1VAoOGQG5nEwcwOx4/ApYtSbuwwsNBBMAe+4j9a9I6f6rFy1bf1WbociQRt+mAe4iPyDzOfMUvEX7jKfV5rQcgggwCGGZ/4o+m1D2Z3RfV6ZKfymFyLe7a1x3UAqTbMgLkjZviRJOMYPuaFPcIJj+UwY+/6xVrW9TZwdwG6frgK55+rZCsf9RWfmqawfePiKcJiAkXwO/PNRyQZ7j/auyK0y+1RLSAiuTUjL2/8fyrj+lVkzisrKyokymKkWoxXa1WWky1KtQLUyGrCVMnWpkqBKmQ1YSpk4amnSapW0IttcUAM6FPXuO47gcGI7ZFKiGm//D61buXXs3FDBkmGwIEyZ5kEqcfNA1a5qPu5jGjfbaJzpeptbKbkYEBVtmRseDEuGMcT8mjLeZqLiOpZLtoglC0sEUGG/wD2ET2nmlXxZdbebaKqm20qU7+r0ifeIP5pktKbb6W/bIV7hCXFaGlYkmcYkRHasnH5T0m/4nDY9MSPpVx9dq7C3g485S6OlweaoQ53Y9BxP+9W/F+iSzeUkvetm4d4liYBiNxicjgHGaMjW9N0CHUWkUXHQjlrkGJCKCTiTEAgCPikDVdR1nUHVIZhMKiLAG443EcD7nt3p5lN3ToOZlpe1BO7nIIx8Zc6p4tcgWLB3YUb4gloAJju3bGMfijPhf8Aw8vXUOpvH1T6U9DEkd7kmI/00M1HTW0WmZ7Yl7m1DdAVih3ElEWTEgLmM54xXoXQb9y1YRrpVLrxtQuAGI4iT3kSKECqg+F07kdYILvXDnnsO39yDQ9Kv39RZupe8hNMdtywgIU4MyvDBgQc/TEDImqH+KV6NOHnIW4s/TuhhK7vtJimXqeuTTvqb4XzI0y3LiqV+tCwEyQBg5PxSZ/ij11L/TUKgEXRbK+25udvuY3/AGqGBO3Pw/WTXnaT6d4tf4b9PVwWIyqn3yXG0fHcn8/p6j1TZZdfTuFq0LbqMkow2/jgEe5SK8x8JLee2bGnUB/Lky5XflZBBMT2BHsJ4mpfA/7TYe5aazc8tmuLeJVoXaCZDTkh/jiTPuzqk3jjtBIwCAfP55/iV/EWgbp9xzZM2bq+ZbIyUGdr/CkOQD2n4otpOvWNVbQ37CXnthywZBBkIAZGRIWCIIJA4FX9PpA6sVbddZigkSVtgsvoHaSCfsIiOUKzqruj1BKEW3BIG36WWewkwp42zgzxAoae1G3/ANDoYRSaiLCvlPUff1jd1fQ/td5rlvYEvW7XmWwu5rW0CFSMBtqp7RPsKvazQlEBFm55oubsCW2OGBAjJOd3pkcimnpvUNK+lDWUG68gD8FlLYjnsSePvR3Q6QqmTuCrHuWjhTIyP5zQCDY21/6jVDin2qjGegiP4a8Qm1bGlCnzRI3uDIUfSNsTge/6Vd6jbvvbNw3J8sdztgHuAOSaWPEuj1KahL1u0+42le4hh3JRcuFn6gIBUf5cdwLum1t2/bZncvI81DAABQwwNtljEg5MgxQnDevEstSWuWz8v++kvaXT3rXnXZ/dtaIBY7AzlfTBaAYYg8/w0C0elc5DgK+wrsAKbwVLEGIMtwR7Ubu9TI0xuXAd+5E3Ft7KSs7hiYAjIwZqp0formyl22dx2MrMTj6gwKD/AKSZM8n7VBfcMYhko8Ft2fdL9zQWbOmuXFLkiVe4x+oIMKvaASfuZrxjSAOS7EKGbLGSAWzJ2gn3OBT7/iN4lR7S6e2YUrECRgckgcScRSIuF27R8Hv7/n81p6QEruPeZerI3bR2mXEgnIIk5Hf5iu7bj6WP9/PvXN1SIxgxjt7T/fvWAz29vY5/T37U3E5l0g5Ax/viubd0oZHMHPwQQea2z4g8/wB/3+tQO3vUTpw1aHyawtXJqJMyKytTWVEmUhUi1wKM6HohfbLgTyfb2+5+1UJxLgZgwNXauKN6nw8FUstwPE8D/vS4wg1wbM4riEEbFTpVDSvVxW96IIMywtXOn6k27iOJlWBxzHcfkSKpIamtGM/9/wCVWxkYMqDg5EZupqwYCJEb0Y8XFP8AEDGCYj4mqGq6ixG4IdwhfSx7yRMZHDcZiZio73Vbty2LTMNg7AKoExI9IGMTHvmjGk8PlrfmG0bdu1bAYgH1NIAMsc7i3IGJPEVn/wCIlZLP0HSao1tloCV9T1grpHSL+sYufoUMWc4VQBJCj/j816x4S0GlTSobJJtsTvc4bcuC8j8qB80ia7VWr9u0EHkuu7y7cHy2Jywn5BAAPY0c8LdZbYrsyoCCYgHj/TP3iTiKC2o35A6DtDto/BQP1J+8Qtr+h2LQdrZi1dCsttiYdLaqDt3cOI3D3gj7JfXulXr7bkZfIPlrz67SW2lWAIJiBG4HMgnvL/17w+bvk3G1ZBmQSVQKfqVoiD7cDt+aI6WLa/vCt/J/9plAAgcqcDucEf7UIlkbIGImHy+WBI6nMh8HOr3NZp7xi5dthG7SPWCyz77gf0ryvrutuqF0Tj1WNQdp4gARA785BPYin3rFlGD37T+Td06g7CCDtBaMgd8KAZB7QKQDeuarXWvMVWd7kcEbwxhSQpU+/BFM6XJGCOIXVCtBms8Ht6T0b/DfROWuXFRSwQAMSZDRkD3M7Z+9Weqdd3JdsIFuXm9GxWyGIm4M5J7DHfFT+C9GRP7lWYXA6E3NhBgAyk/6Sc+/FUfEXT7Wi1VzVjaNSVdktpeMhnBUEoQCVlpjiYojIpvJOf26QNNpCKm0HP8AMK+Gen+Tb87UF38z0qU2+kCQVY8KVyI/T2pI694ct7bu28zMH3IdrCAezLn8xmT8V6T07qA0/TkWwCfLT1Agghzli6nIG4zP86g6TobBuI9y6Wv3lJErJMA4LkEDAbAik7rG8T2fJ6x2uvfWTYfLnjA6/wATyzoPXxpn9QuAGFuruBLL8CABt9UHM7u1e5dFvMVttbuo6Ru+mGdTwYnB4z/SvGfH/QBpbiPbhgwLEDM7DBE/9XaP5CufB3iZgG05uqi3UYW3ODbckHBGVDEfac96cyLF8VRz3iYUo3hMfKehjv461nm3FOlZQ1p5YGRPpedoAyeZXBwTQW319dRpnNq2A5uBbikzsJwTa7kN7HjPxWW+mXmuJc1VmS22X3+qUAEqABBkFjE9h2oLqOjvvN62p8sXyxU8FNwBGMEMdx5x80qXXbgkcxxKmru4OR/GIwLZZi9pW9CIttWMMDAJcSB7yAfjHE0U6brfItIQWTT2bLtcDggSfSgVmEtOR+DXHRCh/aXNvyxEeiWMEHdEf5QVHwDSF448WXNS3kI3/p02qBP1bQB+RI+00DTIbX90Nq7gie+LvU9S1+/cukH1MSARED+EfpFWNDZcuswd0gboYRlSxzIjJB+ARUFliDMAyO4kZ95/X9KN9A1Wm3/v4C7Cf4o3AlgcTBkAbQI9/Y76qBxPPMxJzBvlbnFuZZiAAJEkwAPUQBODJge8Vmq0LLEKSDORlTAztbvAYT+PerWu0v7y3qBci1fZgrn+B1MMrQBEYYQANrLEcDrXWHt+Ub6vtkwCxIkQLm0TyT7c7c1ORIgVV9MnuYHzHOf0/UVA9E+qa23cCbU2bV27Zn7mfkzjtP4AsmqmSJquTW65JqJaait1zNbqJMqoYINOPh+8FIliQQPpWT7kGPvSZVnS625b+lo/SqEZlgcRv191VuNdyiQ2DyZBHHzSpo9E9+4EtiWP6Ae5+K6vai9eGSzD4GP5Ymivg/XHTX/Ughxtk4g8jPzx+lUGBL8mF9L4FnHmFSCu5zG0zMhV7RjJPej146DQWXQIrllKu7+pnkcL/WAIxx3od1LqLwxU57A/T+gpI6pqC96S278yB8CoBLSWAWWEiWKjapMqpMwKs2zkdvmqNq6KtIaZEWMJaaFC3Aylg/0EZgZk4iJx+adtHf8AO2lVDg/Um4ozkkHBUYIj3yA3Y15/auEcTNXtBr3stKOQCIMGOf6Ef1FC1FPiLx1EY0uo8JuehjBY6jb88+UgR7YZlQjchO2GGByF3GSwPzQTqnUrumt2VThSd5yFaTI9IiR8nvxTnoBp7wW6lweZww27WO4BY7jHeqdrTC5ftWLylkC3FLlfQRJIiMyMEc5rGSzY/mX45+c3LCbKvKw92IyWOvJes27120HttbUEd5wwxxA7D5FX9JorVq4z27nlG4ZVgAIlcC4gADgQTnPMGla5pxZ3sj7vTCqGkA4knAgADk+xqt0jxGz25vEbVYbWAnaJwSOYGc1NWoJJP3/2SdMCAIy9Vs29RdVNUClxrZVysxqLeNrWjxCtBIOV74MnyZmW31FzYYhbLjy27g7gASW+WJzjGa9I8Q69bukLFjv81TYAYEoyqx/mA0j4+1eWdNi5dvk7t0kjaJ+k/wAWfpjcfwO00/pzufImVq6xWmO+Z7J4FNwWrxVo3OpDGCxIABiJBUkn1d6m0XSVvaxtXcUldyEmRtZ7a+WkD6lIM/GaR0t3z0nUXrZYFLyqSDtIQIoOB8MP50V8B3L1q1dtPcK2im8MWBUPkwrTkQP1qbMh2bPynU4KqgHPrHLqupVbtq9tJuy4ZYBZrIU7g6jHvz/tQDqXUbtqL1sekPsDKgYqjyzuoIzmFHtn3oz4X11pmu3LxtggkC6pYblIgAzzncJpZfUecxEkAEpsUgJtUgF3iMQADj35pXxQig+vMcr0pJZekEaJ1dr+4PcsK4i/lXW20M52HhTgEge4pJ65oPKuFrZlJEx/CTkfg/1/Fek9Y1d62EtEp5ZdlZxDAIAIRhElhz+g7GqWk8P29RpnG8bRcE3DunMgW2BPOAY+RBqtd+19wGB6QttCvVsJyw7znwR11dWBp79wrfH/ALVwmPMBxtb3cf8A7D5FM/VOnKEC+tkUAELtUETBzgoCx/MYrxfV6M2LxUPIUyrrIkdiDgz/AMUc1/iW7qVCah3K7YYo20vCwhcHBzBPvR7dGLWDp07zPr1bVAq/UQj1nxM9hjb0RiwjMqu5W6ZyG2Fp5Ewfbjmla0Laq0qWMAAzG1p577hAI7c/FR27ckABiJEwDMdzAB/pRsdGCKLguypxBEEEz9QgkrxwOcYNPKq1jAiFlpY8wPduFhwYUAe8AyR+v+9djpd/bu2FRsZzuKr6VElgrEGPxzRg9HVCbly8ioYClSS2e2wgExA4E4rrpGl8w39xC2wkftF+ZZtyTI5MqCoCyRzma7fk8SmcSz0vQJcS7pneLFy1p9SrmP3T7FZmY+xVryk//jUckUD8RdfOpuuUlbQhLSntbXC44UnLGByxkmiXV204s+Xp9Xudrdu1dLo1pHS2PTt3g+y+300sXNOUiYIPBVlYH8qT+nNWzJWcVo1uuTUy0w1ya2a5NROmRWVqsrpMq0f6V0VYV7zBVJ78D70E04llHuw/rTX1V4QL8f1E0pqHYEKO8NWBgse0KCxbj0xt7HgR2oZ1LSiOKo9P1zm4qwSJGOaNdeY5xGTj2+KzyjV2AZ6xxHFik4ikqO9wWg7QTxJgfiiPU+mrbwBwI4oSL5W7vHY0U6l1EXQCOe9amG4imV5gZJDUXQ1QS3VxDTCxduZZD12pn+/61ApqRWq8HDHSlAZSLyoe+4Qog4DFiBn4mIpi1muOxVe/ZWGMMl0MDjsWO4fOSR7mkm3cIMj+Yn+tT39l4MzW9uwAu9shR6iFXDnbMx6Rt4PtS99CWYJELVqLKj5TxGLR6K0wM6q3MT6DuWOBAmfzFbOnuEbwSUH7sEbZjMMAJxHwOPxSilpreHVh3XcNpZOzL2I4yJFXrSalLYuWzcW2x9LQdgYR3Ijif5Uo+hHUH6zRr/EyMBh9IZudPe1pLwuDAZbtu4CIBzuAAOAQRP2PvSZ0liJMnJn+/wBT+tFtb4l1F20bN0qdx9oOMEmMR2/X2qlbQDimNNW653Y+UX1d62kbY2aHUXU0J8tkA3NuBPqYmBAT+KQM+0Vf0/VWvPbsugRYK7t20qFwNqkYJgn/AKsVvo3ULFnRgb1Dsp3BrgU7izAjbPAEQT7fNVr/AFLTWzuD2SYMKguOVMETvC/OP+c0jfW7sw29zNTT3VLUuTgge6ON7povWwgffE7XaS2QYLCBkHIBoZ06w2itFXePUhJc/UgMQFAJ2nj53fFLTeM3n6njg7VA9I4AJYQcDt2oTruuKQRbtE/6rp3nPsohR+ZodWiuPDTrNfUo8pzGfxZ1JBbTyAAhA3GV3TlTvz9ROZ+1J9jr921ba3biGJLMRu5EekN3jufxVAo7y53NES3MTx9vtUcVqJQAPNzMmzUkny8TTuWMsST7mtmtRWm5o/SLGW9FrGstuWDjggMJIxIOCR8131bqVzUMpvbjCqNoJAMAAGD9IIzjuTEdqM1u45bnJwJ+wgZ+0D8VBAkY5zJbWudDKHZEj0jBHsR3/NcG5tbcAAxHwVZTyrD2Pt/SsuaYqoYkZOB/FwDMR9JmAe5VvaoXA7Gf/H9j8V2J01dKz6QQvMEzHuJ7j55qOt1o1EtLGi0ZunahG/8AhUmN/MhScbvYHn74Ne4hUlWBUgwQwII+CDkVyRU2p1ly4FDsX2iFLZYD/LuOSPYE47V06QVya3NcmukzJrK1NZUTpArQZHamrSapL1vIzwayspXUqCufSHpPmxCmn01qyFZRJI59s9qDdf6pMjuayspPTLvsy3MZtOxPLF4CpUFZWVrCZ5lhKmU1qsq4lTJQa7WtVlTKyxpFBcA8Tn7d/wAxNFOoaw27IsAhWurb80gS222gthU4AUkOSZn1kRBM5WVU9ZEseG74W2TeIe1bMpbYbh5gUuWWfpAUGR/FMQew3Wddv3dxd53fYQP8v2iBHFZWV2ATzOlTfbYetCzcA7gCAQZzGfzx/SIYFarKsABJnU+9aisrKmTNDvWXAMR3E/zIrKyunSezqyEKYgmeM+3PNVQAT7ZrKyonTjvXLCsrKiTNDv8Ay/7/AImsniP7NZWV06auXCeSeIqI1lZUSZvfiMc+2fwa4NZWV06aNcmt1lRJnJrk1lZUTpqtVlZXTp//2Q==",
-    timestamp: "2021-09-01T11:00:00Z",
-    caption: "I love pizza",
-    viewed: false,
-  },
-  {
-    content:
-      "https://mcprod.hyperone.com.eg/media/catalog/product/cache/1ca275941aea0ae98b372dcb44b7c67a/6/2/6224011241366-300ml.jpg",
-    timestamp: "2021-09-01T10:00:00Z",
-    caption: "I love cola",
-    viewed: false,
-  },
-];
-
-export const TOKEN =
-  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6Ik1vY2tVc2VyIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c";
diff --git a/app/src/mocks/oauth/oauth.ts b/app/src/mocks/oauth/oauth.ts
index 96d9517f..7281dd9b 100644
--- a/app/src/mocks/oauth/oauth.ts
+++ b/app/src/mocks/oauth/oauth.ts
@@ -1,5 +1,5 @@
 import { http, HttpResponse } from "msw";
-import { MOCK_USER, TOKEN } from "@mocks/mockData";
+import { MOCK_USER1, TOKEN } from "@mocks/data/users";
 
 type RequestBody = {
   code: string;
@@ -29,7 +29,7 @@ export const OauthMock = [
         message: "Successful login",
         status: "success",
         data: {
-          user: MOCK_USER,
+          user: MOCK_USER1,
           sessionID: TOKEN,
         },
       },
@@ -38,7 +38,7 @@ export const OauthMock = [
         headers: {
           "Set-Cookie": `sessionID=${TOKEN}; HttpOnly; SameSite=Strict; Path=/`,
         },
-      }
+      },
     );
   }),
 
@@ -48,7 +48,7 @@ export const OauthMock = [
         message: "Successful login",
         status: "success",
         data: {
-          user: MOCK_USER,
+          user: MOCK_USER1,
           sessionID: TOKEN,
         },
       },
@@ -57,7 +57,7 @@ export const OauthMock = [
         headers: {
           "Set-Cookie": `sessionID=${TOKEN}; HttpOnly; SameSite=Strict; Path=/`,
         },
-      }
+      },
     );
   }),
 ];
diff --git a/app/src/mocks/privacy-settings/privacySettings.ts b/app/src/mocks/privacy-settings/privacySettings.ts
index 5eff4584..254e380a 100644
--- a/app/src/mocks/privacy-settings/privacySettings.ts
+++ b/app/src/mocks/privacy-settings/privacySettings.ts
@@ -1,6 +1,6 @@
 import blockList from "@mocks/data/blocklist";
 import { allChats } from "@mocks/data/chats";
-import { endPts } from "features/privacy-settings/service/changeSettings";
+import { endPts } from "@features/privacy-settings/service/apiChangeSettings";
 import { http, HttpResponse } from "msw";
 import { activeStatesStrings, privacyStatesStrings } from "types/sideBar";
 
@@ -8,7 +8,6 @@ type requestType = {
   privacy: activeStatesStrings | privacyStatesStrings;
 };
 
-
 export const privacySettingsMock = [
   http.patch<{ path: endPts }, requestType>(
     "/users/privacy/:path",
@@ -27,12 +26,10 @@ export const privacySettingsMock = [
 
   http.patch("/users/block/:id", async (req) => {
     const id = req.params.id;
-    let user = allChats.find((item) => item.id.toString() === id);
+    const user = allChats.find((item) => item._id.toString() === id);
     if (user) {
       blockList.push({
-        id: user.id,
-        name: user.name,
-        username: user.name.toLowerCase() + "123",
+        id: user._id,
       });
 
       return HttpResponse.json({}, { status: 200 });
diff --git a/app/src/mocks/profile-settings/profile-picture.ts b/app/src/mocks/profile-settings/profile-picture.ts
index 97dee514..cf5322db 100644
--- a/app/src/mocks/profile-settings/profile-picture.ts
+++ b/app/src/mocks/profile-settings/profile-picture.ts
@@ -12,7 +12,7 @@ export const profilePictureMock = [
         status: "success",
         data: {},
       },
-      { status: 200 }
+      { status: 200 },
     );
   }),
   http.patch("/users/picture", async ({ request }) => {
@@ -33,7 +33,7 @@ export const profilePictureMock = [
           headers: {
             "Content-Type": "application/json",
           },
-        }
+        },
       );
     } else {
       return HttpResponse.json(
@@ -44,7 +44,7 @@ export const profilePictureMock = [
         },
         {
           status: 400,
-        }
+        },
       );
     }
   }),
diff --git a/app/src/mocks/profile-settings/profile-settings.ts b/app/src/mocks/profile-settings/profile-settings.ts
index f81d39be..9c6f3d13 100644
--- a/app/src/mocks/profile-settings/profile-settings.ts
+++ b/app/src/mocks/profile-settings/profile-settings.ts
@@ -1,5 +1,8 @@
+import { MOCK_USER1 } from "@mocks/data/users";
 import { http, HttpResponse } from "msw";
-import { MOCK_USER } from "@mocks/mockData";
+
+const savedUser = localStorage.getItem("user");
+const user = savedUser ? JSON.parse(savedUser) : MOCK_USER1;
 
 export const profileSettingsMock = [
   http.get(/.*\.(png|jpg|jpeg|gif|svg)$/, async () => {
@@ -10,9 +13,11 @@ export const profileSettingsMock = [
     return HttpResponse.json(
       {
         status: "success",
-        data: MOCK_USER,
+        data: {
+          user,
+        },
       },
-      { status: 200 }
+      { status: 200 },
     );
   }),
 
@@ -23,7 +28,7 @@ export const profileSettingsMock = [
         status: "success",
         data: newProfileSettings,
       },
-      { status: 200 }
+      { status: 200 },
     );
   }),
 ];
diff --git a/app/src/mocks/stories/stories.ts b/app/src/mocks/stories/stories.ts
index b5b53ac4..b110fb79 100644
--- a/app/src/mocks/stories/stories.ts
+++ b/app/src/mocks/stories/stories.ts
@@ -1,5 +1,6 @@
 import { http, HttpResponse } from "msw";
-import { MOCK_MY_STORIES, MOCK_OTHER_USER_STORIES } from "@mocks/mockData";
+import { MOCK_MY_STORIES, MOCK_OTHER_USERS_STORIES } from "../data/stories";
+import { story } from "types/story";
 
 type AddStoryRequestBody = {
   file: File;
@@ -9,66 +10,70 @@ type AddStoryRequestBody = {
 type AddStoryResponseBodySuccess = {
   status: "success";
   message: string;
-  data: {
-    user: {
-      id: string;
-      name: string;
-      avatarUrl: string;
-    };
-    sessionID: string;
-  };
+  data: object;
 };
 
 type AddStoryResponseBodyFail = {
   status: "fail" | "error";
   message: string;
-  data: {};
+  data: object;
 };
 
 type AddStoryResponseBody =
   | AddStoryResponseBodySuccess
   | AddStoryResponseBodyFail;
 
+type ViewStoryRequestBody = {
+  data: story;
+};
+type ViewStoryResponseBodySuccess = {
+  status: "success";
+  message: string;
+  data: object | boolean;
+};
+type ViewStoryResponseBodyFail = {
+  status: "fail" | "error";
+  message: string;
+  data: object;
+};
+
+type ViewStoryResponseBody =
+  | ViewStoryResponseBodySuccess
+  | ViewStoryResponseBodyFail;
+
 export const storiesMock = [
   http.get(/.*\.(png|jpg|jpeg|gif|svg)$/, async () => {
     return undefined;
   }),
 
-  http.get("/users/stories", async () => {
-    return HttpResponse.json(
-      {
-        status: "success",
-        data: MOCK_MY_STORIES,
-      },
-      { status: 200 }
-    );
-  }),
-
-  http.post<{}, AddStoryRequestBody, AddStoryResponseBody>(
+  http.post<object, AddStoryRequestBody, AddStoryResponseBody>(
     "/users/stories",
     async ({ request }) => {
-      const { file, caption } = await request.json();
+      const formData = await request.formData();
+      const file = formData.get("file") as File | null;
+      const caption = formData.get("caption") as string;
 
-      if (file && caption) {
+      if (file) {
+        const newStory = {
+          id: String(MOCK_MY_STORIES.stories.length + 1),
+          content: URL.createObjectURL(file),
+          timestamp: new Date().toISOString(),
+          caption,
+          views: [],
+        };
+        MOCK_MY_STORIES.stories.push(newStory);
         return HttpResponse.json(
           {
             status: "success",
-            message: "Successful Add Story",
-            data: {
-              user: {
-                id: "12345",
-                name: "John Doe",
-                avatarUrl: "/avatars/john_doe.png",
-              },
-              sessionID: "abcdef123456",
-            },
+            message: "Story added successfully",
+            data: newStory,
           },
           {
             status: 201,
             headers: {
               "Content-Type": "application/json",
             },
-          }
+          },
         );
       } else {
         return HttpResponse.json(
@@ -79,15 +84,68 @@ export const storiesMock = [
           },
           {
             status: 400,
-          }
+          },
         );
       }
-    }
+    },
   ),
+  http.post<{ storyId: string }, ViewStoryRequestBody, ViewStoryResponseBody>(
+    "/stories/:storyId/views",
+    async ({ params }) => {
+      const { storyId } = params;
+
+      let userIndex = -1;
+      let storyIndex = -1;
 
+      MOCK_OTHER_USERS_STORIES.some((user, uIndex) => {
+        const sIndex = user.stories.findIndex((story) => story.id === storyId);
+        if (sIndex !== -1) {
+          userIndex = uIndex;
+          storyIndex = sIndex;
+          MOCK_OTHER_USERS_STORIES[userIndex].stories[storyIndex].viewed = true;
+          return true;
+        }
+        return false;
+      });
+
+      if (userIndex !== -1 && storyIndex !== -1) {
+        return HttpResponse.json(
+          {
+            status: "success",
+            message: "Story view recorded successfully",
+            data: MOCK_OTHER_USERS_STORIES[userIndex].stories[storyIndex]
+              .viewed,
+          },
+          {
+            status: 201,
+            headers: {
+              "Content-Type": "application/json",
+            },
+          },
+        );
+      } else {
+        return HttpResponse.json(
+          {
+            status: "fail",
+            message: "Story not found",
+            data: {},
+          },
+          {
+            status: 404,
+          },
+        );
+      }
+    },
+  ),
   http.delete("/users/stories/:storyId", async ({ params }) => {
     const { storyId } = params;
     if (storyId) {
+      const index = MOCK_MY_STORIES.stories.findIndex(
+        (story) => story.id === storyId,
+      );
+      if (index !== -1) {
+        MOCK_MY_STORIES.stories.splice(index, 1);
+      }
       return HttpResponse.json(
         {
           status: "success",
@@ -96,7 +154,7 @@ export const storiesMock = [
         },
         {
           status: 200,
-        }
+        },
       );
     } else {
       return HttpResponse.json(
@@ -107,33 +165,28 @@ export const storiesMock = [
         },
         {
           status: 400,
-        }
-      );
-    }
-  }),
-  http.get("/users/:userId/stories", async ({ params }) => {
-    const { userId } = params;
-    if (userId) {
-      return HttpResponse.json(
-        {
-          status: "success",
-          data: MOCK_OTHER_USER_STORIES,
         },
-        {
-          status: 200,
-        }
-      );
-    } else {
-      return HttpResponse.json(
-        {
-          status: "fail",
-          message: "User ID missing",
-          data: {},
-        },
-        {
-          status: 400,
-        }
       );
     }
   }),
+
+  http.get("/users/stories", async () => {
+    return HttpResponse.json(
+      {
+        data: MOCK_MY_STORIES,
+      },
+      { status: 200 },
+    );
+  }),
+
+  http.get("/users/contacts/stories", async () => {
+    return HttpResponse.json(
+      {
+        data: MOCK_OTHER_USERS_STORIES,
+      },
+      {
+        status: 200,
+      },
+    );
+  }),
 ];
diff --git a/app/src/mocks/userauth/login.ts b/app/src/mocks/userauth/login.ts
index eb060bb8..82a7fe06 100644
--- a/app/src/mocks/userauth/login.ts
+++ b/app/src/mocks/userauth/login.ts
@@ -1,5 +1,12 @@
+import {
+  MOCK_USER1,
+  MOCK_USER2,
+  BANNNED,
+  DEACTIVATED,
+  ADMIN,
+  TOKEN,
+} from "@mocks/data/users";
 import { http, HttpResponse } from "msw";
-import { MOCK_USER, TOKEN } from "@mocks/mockData";
 
 type LoginRequestBody = {
   email: string;
@@ -10,7 +17,7 @@ type LoginResponseBodySuccess = {
   status: "success";
   message: string;
   data: {
-    user: {};
+    user: object;
     sessionID: string;
   };
 };
@@ -18,7 +25,7 @@ type LoginResponseBodySuccess = {
 type LoginResponseBodyFail = {
   status: "fail" | "error";
   message: string;
-  data: {};
+  data: object;
 };
 
 type LoginResponseBody = LoginResponseBodySuccess | LoginResponseBodyFail;
@@ -28,13 +35,17 @@ export const loginMock = [
     return undefined;
   }),
 
-  http.post<{}, LoginRequestBody, LoginResponseBody>(
+  http.post<object, LoginRequestBody, LoginResponseBody>(
     "/auth/login",
     async ({ request }) => {
       const { email, password } = await request.json();
 
       const isValidUser =
-        email === MOCK_USER.email && password === MOCK_USER.password;
+        (email === MOCK_USER1.email && password === MOCK_USER1.password) ||
+        (email === MOCK_USER2.email && password === MOCK_USER2.password) ||
+        (email === BANNNED.email && password === BANNNED.password) ||
+        (email === DEACTIVATED.email && password === DEACTIVATED.password) ||
+        (email === ADMIN.email && password === ADMIN.password);
 
       if (!isValidUser) {
         return HttpResponse.json(
@@ -43,18 +54,52 @@ export const loginMock = [
             status: "error",
             data: {},
           },
-          { status: 401 },
+          { status: 401 }
         );
       }
 
+      const isAdmin = email === ADMIN.email;
+      if (isAdmin) {
+        localStorage.setItem("user", JSON.stringify(ADMIN));
+        return HttpResponse.json(
+          {
+            message: "Successful login",
+            status: "success",
+            data: {
+              user: ADMIN,
+              sessionID: TOKEN,
+            },
+          },
+          {
+            status: 201,
+            headers: {
+              "Set-Cookie": `sessionID=${TOKEN}; HttpOnly; SameSite=Strict; Path=/`,
+            },
+          }
+        );
+      }
+
+      const isnotActiveUser =
+        email === BANNNED.email || email === DEACTIVATED.email;
+      if (isnotActiveUser) {
+        return HttpResponse.json(
+          {
+            message: "User is banned or deactivated",
+            status: "error",
+            data: {},
+          },
+          { status: 403 }
+        );
+      }
+
+      const loggedInUser = MOCK_USER1.email === email ? MOCK_USER1 : MOCK_USER2;
+      localStorage.setItem("user", JSON.stringify(loggedInUser));
       return HttpResponse.json(
         {
           message: "Successful login",
           status: "success",
           data: {
-            user: {
-              email: "test@example.com",
-            },
+            user: loggedInUser,
             sessionID: TOKEN,
           },
         },
@@ -63,8 +108,8 @@ export const loginMock = [
           headers: {
             "Set-Cookie": `sessionID=${TOKEN}; HttpOnly; SameSite=Strict; Path=/`,
           },
-        },
+        }
       );
-    },
+    }
   ),
 ];
diff --git a/app/src/mocks/userauth/logout.ts b/app/src/mocks/userauth/logout.ts
index ef909042..f56493b2 100644
--- a/app/src/mocks/userauth/logout.ts
+++ b/app/src/mocks/userauth/logout.ts
@@ -1,5 +1,6 @@
 import { http, HttpResponse } from "msw";
-import { TOKEN } from "@mocks/mockData";
+import { TOKEN } from "@mocks/data/users";
+import { SESSIONS } from "@mocks/data/Sessions";
 
 export const logoutMock = [
   http.get("/auth/me", ({ cookies }) => {
@@ -7,7 +8,16 @@ export const logoutMock = [
       return new HttpResponse(null, { status: 403 });
     }
 
-    return new HttpResponse(null, { status: 201 });
+    return HttpResponse.json(
+      {
+        status: "success",
+        message: "Session fetched successfully",
+        data: {
+          ...SESSIONS[0],
+        },
+      },
+      { status: 201 },
+    );
   }),
 
   http.post("/auth/logout", async () => {
diff --git a/app/src/mocks/userauth/resetpassword.ts b/app/src/mocks/userauth/resetpassword.ts
index b032ab6e..2f0efc94 100644
--- a/app/src/mocks/userauth/resetpassword.ts
+++ b/app/src/mocks/userauth/resetpassword.ts
@@ -34,7 +34,7 @@ export const forgetPassword = [
             message: "Cannot send the email, please retry",
             status: "error",
           },
-          { status: 401 }
+          { status: 401 },
         );
       }
 
@@ -43,9 +43,9 @@ export const forgetPassword = [
           message: "Check your email.",
           status: "success",
         },
-        { status: 201 }
+        { status: 201 },
       );
-    }
+    },
   ),
 ];
 
@@ -62,7 +62,7 @@ export const resetPassword = [
             message: "Incorrect code , please retry",
             status: "error",
           },
-          { status: 401 }
+          { status: 401 },
         );
       }
 
@@ -71,8 +71,8 @@ export const resetPassword = [
           message: "Successful! Redirecting...",
           status: "success",
         },
-        { status: 201 }
+        { status: 201 },
       );
-    }
+    },
   ),
 ];
diff --git a/app/src/mocks/userauth/signup.ts b/app/src/mocks/userauth/signup.ts
index 780e9df7..715329bb 100644
--- a/app/src/mocks/userauth/signup.ts
+++ b/app/src/mocks/userauth/signup.ts
@@ -36,7 +36,7 @@ export const signupMock = [
             status: "error",
             data: {},
           },
-          { status: 401 }
+          { status: 401 },
         );
       }
 
@@ -46,8 +46,8 @@ export const signupMock = [
           status: "success",
           data: {},
         },
-        { status: 201 }
+        { status: 201 },
       );
-    }
+    },
   ),
 ];
diff --git a/app/src/mocks/userauth/verfiyEmail.ts b/app/src/mocks/userauth/verfiyEmail.ts
index 2c99bbdf..57637dd0 100644
--- a/app/src/mocks/userauth/verfiyEmail.ts
+++ b/app/src/mocks/userauth/verfiyEmail.ts
@@ -34,7 +34,7 @@ export const sendEmailConfirmationMock = [
             message: "Cannot send the confirmation, please retry",
             status: "error",
           },
-          { status: 401 }
+          { status: 401 },
         );
       }
 
@@ -43,9 +43,9 @@ export const sendEmailConfirmationMock = [
           message: "Confirmation code sent. Check your email.",
           status: "success",
         },
-        { status: 201 }
+        { status: 201 },
       );
-    }
+    },
   ),
 ];
 
@@ -62,7 +62,7 @@ export const verifyEmailMock = [
             message: "Incorrect code, please retry",
             status: "error",
           },
-          { status: 401 }
+          { status: 401 },
         );
       }
 
@@ -71,8 +71,8 @@ export const verifyEmailMock = [
           message: "Successful! Redirecting...",
           status: "success",
         },
-        { status: 201 }
+        { status: 201 },
       );
-    }
+    },
   ),
 ];
diff --git a/app/src/pages/Login.tsx b/app/src/pages/Login.tsx
index 37fb65fe..db2bff1a 100644
--- a/app/src/pages/Login.tsx
+++ b/app/src/pages/Login.tsx
@@ -2,30 +2,33 @@ import styled from "styled-components";
 
 import LoginSection from "@features/authentication/login/LoginSection";
 import Heading from "@components/Heading";
+import { DESKTOP_VIEW, MOBILE_VIEW } from "@constants";
 
 const LoginLayout = styled.div`
-  display: grid;
-  grid-template-columns: 26rem 1fr;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
   height: 100dvh;
 
   background-color: var(--color-background);
-`;
 
-const Main = styled.main`
-  margin: auto 8rem;
+  @media ${MOBILE_VIEW} {
+    font-size: smaller;
+  }
 `;
 
-const SideBar = styled.div`
-  grid-row: 1 / -1;
+const Main = styled.main`
+  width: 85%;
 
-  background-color: var(--accent-color);
+  @media ${DESKTOP_VIEW} {
+    width: 60%;
+  }
 `;
 
 function Login() {
   return (
     <LoginLayout>
-      <SideBar />
       <Main>
         <Heading data-test="login-header">Welcome back!</Heading>
         <LoginSection />
diff --git a/app/src/sockets/SocketProvider.tsx b/app/src/sockets/SocketProvider.tsx
index 22d52191..c7ff48a7 100644
--- a/app/src/sockets/SocketProvider.tsx
+++ b/app/src/sockets/SocketProvider.tsx
@@ -1,61 +1,694 @@
-import { useState, useEffect, ReactNode } from "react";
+import { useEffect, ReactNode, useCallback } from "react";
+import { useNavigate } from "react-router-dom";
 import { useDispatch } from "react-redux";
+import { Dispatch } from "redux";
+import { useQueryClient } from "@tanstack/react-query";
+
+import { SocketContext } from "./SocketContext";
+import { useSocket } from "utils/socket";
+
+import { MessageInterface } from "types/messages";
 import {
   addMessage,
-  MessageInterface,
   setIsTyping,
-} from "@state/messages/messages";
-import socket from "utils/socket";
-import { SocketContext } from "./SocketContext";
-import { Dispatch } from "redux";
+  pinMessage,
+  unpinMessage,
+  editMessage,
+  deleteMessage as deleteMessageAction
+} from "@state/messages/chats";
+// import { connectToPeer, createAnswer, startCall } from "@features/calls/call";
+import { useEncryptDecrypt } from "@features/chats/hooks/useEncryptDecrypt";
+import toast from "react-hot-toast";
+import { useChat } from "@features/chats/hooks/useChat";
+import { useCallContext } from "@features/calls/hooks/useCallContext";
+import { useAppSelector } from "@hooks/useGlobalState";
+import { resetRightSideBar } from "@state/side-bar/sideBar";
+import { getChatByID } from "@features/chats/utils/helpers";
 
 const handleIncomingMessage = (
   dispatch: Dispatch,
-  message: MessageInterface
+  message: MessageInterface,
+  chatId: string
 ) => {
-  dispatch(addMessage(message));
+  dispatch(addMessage({ chatId, message }));
 };
-const handleIsTyping = (dispatch: Dispatch, isTyping: boolean) => {
-  dispatch(setIsTyping({ isTyping: isTyping }));
+
+const handleIsTyping = (
+  dispatch: Dispatch,
+  isTyping: boolean,
+  chatId: string
+) => {
+  dispatch(setIsTyping({ chatId, isTyping }));
+};
+
+type SocketProviderProps = {
+  children: ReactNode;
 };
-const SocketProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
-  const [isConnected, setIsConnected] = useState(false);
+
+interface AcknowledgmentResponse {
+  success: boolean;
+  message: string;
+  error?: string;
+  data: MessageInterface;
+}
+
+interface AckCreateGroup {
+  success: boolean;
+  message: string;
+  data?: {
+    _id: string;
+  };
+  error?: string;
+}
+
+function SocketProvider({ children }: SocketProviderProps) {
+  const {
+    callId,
+    joinCall,
+    recieveICE,
+    recieveAnswer,
+    setChatId,
+    createAnswer,
+    startPeerConnection,
+    offer,
+    endCall,
+    acceptCall: setAcceptedCall
+  } = useCallContext();
+  const navigate = useNavigate();
   const dispatch = useDispatch();
+  const socket = useSocket();
+  const queryClient = useQueryClient();
+
+  const chats = useAppSelector((state) => state.chats.chats);
+  const user = useAppSelector((state) => state.user.userInfo);
+  const userId = user.id;
 
+  const { decrypt } = useEncryptDecrypt();
+  const { chat } = useChat();
+  const sendOffer = useCallback(
+    (clientId: string, offer: RTCSessionDescriptionInit) => {
+      if (
+        socket &&
+        offer &&
+        socket?.connected &&
+        socket &&
+        callId.current &&
+        clientId
+      ) {
+        console.log("Sending offer to", clientId);
+        socket.emit("SIGNAL-SERVER", {
+          type: "OFFER",
+          voiceCallId: callId.current,
+          data: offer,
+          targetId: clientId
+        });
+      }
+    },
+    [socket, callId]
+  );
+  const acceptCall = useCallback(() => {
+    if (socket?.connected && socket && callId.current) {
+      setAcceptedCall();
+      socket.emit("JOIN-CALL", { voiceCallId: callId.current });
+    }
+  }, [socket, callId, setAcceptedCall]);
+  const finishCall = useCallback(() => {
+    if (socket?.connected && socket && callId.current) {
+      socket.emit("LEAVE", { voiceCallId: callId.current });
+      endCall(null);
+    }
+  }, [socket, callId, endCall]);
+  const sendAnswer = useCallback(
+    (clientId: string, answer: RTCSessionDescriptionInit) => {
+      if (
+        socket &&
+        offer &&
+        socket?.connected &&
+        socket &&
+        callId.current &&
+        clientId
+      ) {
+        socket.emit("SIGNAL-SERVER", {
+          type: "ANSWER",
+          voiceCallId: callId.current,
+          data: answer,
+          targetId: clientId
+        });
+      }
+    },
+    [socket, callId, offer]
+  );
   useEffect(() => {
-    socket.on("connect", () => {
-      const engine = socket.io.engine;
-      console.log("Connected to socket");
-      setIsConnected(true);
-      engine.on("close", (reason) => {
-        console.log(reason);
+    if (!socket) return;
+
+    const onConnect = () => {
+      socket.io.engine.on("close", (reason) => {
+        console.log("Socket connection closed:", reason);
       });
+    };
+    const onReceiveMessage = (message: MessageInterface) => {
+      const messageChat = getChatByID({ chats, chatID: message.chatId });
+
+      if (!messageChat) {
+        console.warn("No messageChat context available for decryption");
+        return;
+      }
+
+      if (messageChat.type === "private") {
+        decrypt({
+          message: message.content,
+          key: messageChat.encryptionKey!,
+          iv: messageChat.initializationVector!
+        })
+          .then((content) => {
+            console.log("Decrypted content:", content);
+            handleIncomingMessage(
+              dispatch,
+              { ...message, content: content as string },
+              message.chatId
+            );
+          })
+          .catch((error) => {
+            console.error("Decryption failed:", error);
+          });
+      } else {
+        handleIncomingMessage(dispatch, message, message.chatId);
+      }
+    };
+
+    socket.on("connect", onConnect);
+    socket.on("RECEIVE_MESSAGE", onReceiveMessage);
+    socket.on("PIN_MESSAGE_SERVER", ({ chatId, messageId, userId }) => {
+      console.log("PIN_MESSAGE_SERVER", chatId, messageId, userId);
+      dispatch(pinMessage({ messageId, chatId }));
+    });
+    socket.on("UNPIN_MESSAGE_SERVER", ({ chatId, messageId, userId }) => {
+      console.log("UNPIN_MESSAGE_SERVER", chatId, messageId, userId);
+      dispatch(unpinMessage({ messageId, chatId }));
+    });
+    socket.on("EDIT_MESSAGE_SERVER", ({ chatId, content, id }) => {
+      console.log("EDIT_MESSAGE_SERVER", chatId, id, content);
+      dispatch(editMessage({ chatId, messageId: id, content }));
     });
 
-    socket.on("receive_message", (message: MessageInterface) => {
-      handleIncomingMessage(dispatch, message);
+    socket.on("JOIN_GROUP_CHANNEL", () => {
+      console.log("YOU'RE ADDED TO GROUP");
+      queryClient.invalidateQueries({ queryKey: ["chats"] });
     });
-    socket.on("typing", (isTyping) => handleIsTyping(dispatch, isTyping));
+    socket.on("ADD_ADMINS_SERVER", () => {
+      console.log("NEW ADMINS ARE ADDED");
+      queryClient.invalidateQueries({ queryKey: ["chats"] });
+    });
+    socket.on("ADD_MEMBERS_SERVER", () => {
+      console.log("NEW MEMBERS ARE ADDED");
+      queryClient.invalidateQueries({ queryKey: ["chats"] });
+    });
+    socket.on("SET_PERMISSION_SERVER", ({ chatId, type, who }) => {
+      console.log("SET_PERMISSION_SERVER", chatId, type, who);
+      queryClient.invalidateQueries({ queryKey: ["chats"] });
+    });
+    socket.on("SET_PRIVACY_SERVER", ({ chatId, privacy }) => {
+      console.log("SET_PERMISSION_SERVER", chatId, privacy);
+      queryClient.invalidateQueries({ queryKey: ["chats"] });
+    });
+
+    socket.on("typing", (isTyping, message) =>
+      handleIsTyping(dispatch, isTyping, message.chatId)
+    );
+    socket.on(
+      "DELETE_MESSAGE_SERVER",
+      ({ chatId, id }: { chatId: string; id: string }) => {
+        dispatch(deleteMessageAction({ messageId: id, chatId }));
+      }
+    );
+
+    socket.on(
+      "LEAVE_GROUP_CHANNEL_SERVER",
+      ({ chatId, memberId }: { chatId: string; memberId: string }) => {
+        console.log("LEAVE_GROUP_CHANNEL_SERVER", chatId, memberId);
+        queryClient.invalidateQueries({ queryKey: ["chats"] });
+      }
+    );
+
+    socket.on(
+      "DELETE_GROUP_CHANNEL_SERVER",
+      ({ chatId }: { chatId: string }) => {
+        console.log("DELETE_GROUP_CHANNEL_SERVER", chatId);
+        queryClient.invalidateQueries({ queryKey: ["chats"] });
+      }
+    );
+
+    socket.on("REMOVE_MEMBERS_SERVER", ({ memberId }: { memberId: string }) => {
+      console.log("REMOVE_MEMBERS_SERVER");
+
+      if (memberId === user.id) {
+        navigate("/");
+        dispatch(resetRightSideBar());
+        //TODO: close the right sidebar
+      }
+      queryClient.invalidateQueries({ queryKey: ["chats"] });
+    });
+
+    socket.on(
+      "CALL-STARTED",
+      ({
+        snederId,
+        voiceCallId,
+        chatId
+      }: {
+        snederId: string;
+        voiceCallId: string;
+        chatId: string;
+      }) => {
+        joinCall(snederId, chatId, voiceCallId);
+        if (snederId === userId) acceptCall();
+      }
+    );
+    socket.on("CLIENT-JOINED", async ({ clientId }) => {
+      console.log("client joined", clientId);
+      const offer = await startPeerConnection(clientId);
+      try {
+        console.log("offer", offer);
+        console.log("clientId", clientId);
+        if (offer && clientId) {
+          sendOffer(clientId, offer);
+        } else throw new Error("Failed to send offer");
+      } catch {
+        console.error("Failed to send offer");
+      }
+    });
+    socket.on(
+      "SIGNAL-CLIENT",
+      async ({ type, voiceCallId, data, senderId }) => {
+        if (voiceCallId == callId.current) {
+          if (type === "OFFER") {
+            const answer = await createAnswer(data, senderId);
+            if (answer) {
+              sendAnswer(senderId, answer);
+            } else {
+              console.error("Failed to create answer");
+            }
+          }
+          if (type === "ANSWER") recieveAnswer(data, senderId);
+          if (type === "ICE") recieveICE(data, senderId);
+        }
+      }
+    );
+    socket.on("CLIENT-LEFT", ({ voiceCallId, clientId }) => {
+      if (voiceCallId === callId.current) {
+        endCall(clientId);
+      }
+    });
+    socket.emit("typing");
+
     return () => {
-      socket.off("connect");
-      socket.off("disconnect");
-      socket.off("receive_message");
+      console.log("Cleaning up socket listeners");
+      // if (socket.connected) socket.disconnect();
+      socket.off("connect", onConnect);
+      socket.off("RECEIVE_MESSAGE", onReceiveMessage);
+      socket.off("PIN_MESSAGE_SERVER");
+      socket.off("UNPIN_MESSAGE_SERVER");
+      socket.off("EDIT_MESSAGE_SERVER");
+      socket.off("JOIN_GROUP_CHANNEL");
+      socket.off("typing");
+      // socket.io.engine.off("close");
     };
-  }, [dispatch]);
+  }, [socket, chat]);
+
+  const sendMessage = (sentMessage: MessageInterface) => {
+    if (socket?.connected && socket) {
+      console.log("messageToSend", sentMessage);
+      socket.emit(
+        "SEND_MESSAGE",
+        sentMessage,
+        ({
+          success,
+          data: recieved_message,
+          error,
+          message
+        }: AcknowledgmentResponse) => {
+          if (!success) {
+            console.log(message);
+            console.log("Failed to send", error);
+          }
+          if (success) {
+            const _id = recieved_message._id;
 
-  const sendMessage = (message: MessageInterface) => {
-    if (isConnected) {
-      socket.emit("send_message", { message });
+            if (
+              recieved_message.isAppropriate === false &&
+              chat?.type !== "private"
+            ) {
+              toast.error("Your message was inappropriate.");
+              recieved_message.content =
+                "🚫️ This mesaage has inappropriate content.";
+            }
+
+            if (!chat) return;
+
+            if (chat?.type === "private") {
+              decrypt({
+                message: recieved_message.content,
+                key: chat?.encryptionKey || "",
+                iv: chat?.initializationVector || ""
+              }).then((content) => {
+                handleIncomingMessage(
+                  dispatch,
+                  { ...recieved_message, content: content as string, _id },
+                  recieved_message.chatId
+                );
+              });
+            } else {
+              handleIncomingMessage(
+                dispatch,
+                { ...recieved_message, _id },
+                recieved_message.chatId
+              );
+            }
+          }
+        }
+      );
     } else {
       console.warn("Cannot send message: not connected to socket server");
     }
   };
 
+  const editMessageSocket = (
+    messageId: string,
+    content: string,
+    chatId: string
+  ) => {
+    if (socket?.connected && socket) {
+      socket.emit(
+        "EDIT_MESSAGE_CLIENT",
+        { messageId, content, chatId },
+        (response: {
+          success: boolean;
+          res: { message: MessageInterface };
+          error?: string;
+        }) => {
+          if (response.success) {
+            console.log("Message edited successfully:", response.res.message);
+            dispatch(
+              editMessage({
+                chatId: response.res.message.chatId,
+                messageId: response.res.message._id,
+                content: response.res.message.content
+              })
+            );
+          } else {
+            console.error("Failed to edit message:", response.error);
+          }
+        }
+      );
+    }
+  };
+  const pinMessageSocket = (
+    chatId: string,
+    messageId: string,
+    userId: string
+  ) => {
+    if (socket?.connected && socket) {
+      socket.emit("PIN_MESSAGE_CLIENT", { messageId, chatId, userId });
+    } else {
+      console.warn("Cannot pin message: not connected to socket server");
+    }
+  };
+
+  const unpinMessageSocket = (
+    chatId: string,
+    messageId: string,
+    userId: string
+  ) => {
+    if (socket?.connected && socket) {
+      socket.emit("UNPIN_MESSAGE_CLIENT", { messageId, chatId, userId });
+    } else {
+      console.warn("Cannot unpin message: not connected to socket server");
+    }
+  };
+  const createVoiceCall = ({ chatId }: { chatId: string }) => {
+    if (socket?.connected && socket && !callId.current) {
+      setChatId(chatId);
+      socket.emit("CREATE-CALL", {
+        chatId
+      });
+    }
+  };
+
+  function createGroupOrChannel({
+    type,
+    name,
+    members
+  }: {
+    type: "group" | "channel";
+    name: string;
+    members: string[];
+  }) {
+    if (socket?.connected && socket) {
+      socket.emit(
+        "CREATE_GROUP_CHANNEL",
+        { type, name, members },
+        ({ success, data, error }: AckCreateGroup) => {
+          if (success) {
+            navigate(`/${data?._id}`);
+          } else {
+            toast.error(error || `Failed to create ${type}`);
+          }
+        }
+      );
+    } else {
+      console.warn(
+        "Cannot create group or channel: not connected to socket server"
+      );
+    }
+  }
+
+  function addGroupMembers({
+    chatId,
+    users
+  }: {
+    chatId: string;
+    users: string[];
+  }) {
+    if (socket?.connected && socket) {
+      socket.emit(
+        "ADD_MEMBERS_CLIENT",
+        { chatId, users },
+        ({ success, message, error }: AckCreateGroup) => {
+          if (success) {
+            toast.success(message);
+            queryClient.invalidateQueries({ queryKey: ["chats"] });
+          } else {
+            toast.error(message);
+            console.error(error);
+          }
+        }
+      );
+    } else {
+      console.warn("Cannot add members: not connected to socket server");
+    }
+  }
+
+  function addAdmins({
+    chatId,
+    members
+  }: {
+    chatId: string;
+    members: string[];
+  }) {
+    if (socket?.connected && socket) {
+      socket.emit(
+        "ADD_ADMINS_CLIENT",
+        { chatId, members },
+        ({ success, message, error }: AckCreateGroup) => {
+          if (success) {
+            toast.success(message);
+            queryClient.invalidateQueries({ queryKey: ["chats"] });
+          } else {
+            toast.error(message);
+            console.error(error);
+          }
+        }
+      );
+    } else {
+      console.warn("Cannot add admins: not connected to socket server");
+    }
+  }
+
+  function deleteMessage({
+    messageId,
+    chatId
+  }: {
+    messageId: string;
+    chatId: string;
+  }) {
+    if (socket?.connected && socket) {
+      socket.emit(
+        "DELETE_MESSAGE_CLIENT",
+        { messageId, chatId },
+        ({ success }: { success: boolean }) => {
+          if (success) {
+            dispatch(deleteMessageAction({ messageId, chatId }));
+          } else {
+            console.log("Failed to delete message");
+          }
+        }
+      );
+    } else {
+      console.warn("Cannot delete message: not connected to socket server");
+    }
+  }
+
+  function leaveGroup({ chatId }: { chatId: string }) {
+    if (socket?.connected && socket) {
+      socket.emit(
+        "LEAVE_GROUP_CHANNEL_CLIENT",
+        { chatId },
+        ({ success, message, error }: AckCreateGroup) => {
+          if (success) {
+            toast.success(message);
+            queryClient.invalidateQueries({ queryKey: ["chats"] });
+            navigate("/");
+          } else {
+            toast.error(message);
+            console.error(error);
+          }
+        }
+      );
+    } else {
+      console.warn("Cannot leave group: not connected to socket server");
+    }
+  }
+
+  function removeMembers({
+    chatId,
+    members
+  }: {
+    chatId: string;
+    members: string[];
+  }) {
+    console.log(chatId, members);
+    if (socket?.connected && socket) {
+      socket.emit(
+        "REMOVE_MEMBERS_CLIENT",
+        { chatId, members },
+        ({ success, message, error }: AckCreateGroup) => {
+          if (success) {
+            toast.success(message);
+            queryClient.invalidateQueries({ queryKey: ["chats"] });
+          } else {
+            toast.error(message);
+            console.error(error);
+          }
+        }
+      );
+    } else {
+      console.warn("Cannot remove members: not connected to socket server");
+    }
+  }
+
+  function setPermission({
+    chatId,
+    type,
+    who
+  }: {
+    chatId: string;
+    type: "post" | "download";
+    who: "admins" | "everyone";
+  }) {
+    if (socket?.connected && socket) {
+      socket.emit(
+        "SET_PERMISSION_CLIENT",
+        { chatId, type, who },
+        ({ success, message, error }: AckCreateGroup) => {
+          if (success) {
+            toast.success(message);
+            queryClient.invalidateQueries({ queryKey: ["chats"] });
+          } else {
+            toast.error(message);
+            console.error(error);
+          }
+        }
+      );
+    } else {
+      console.warn("Cannot remove members: not connected to socket");
+    }
+  }
+
+  function deleteGroup({ chatId }: { chatId: string }) {
+    if (isConnected && socket) {
+      socket.emit(
+        "DELETE_GROUP_CHANNEL_CLIENT",
+        { chatId },
+        ({ success, message, error }: AckCreateGroup) => {
+          console.log(message, error, success);
+          if (success) {
+            toast.success(message);
+            queryClient.invalidateQueries({ queryKey: ["chats"] });
+            navigate("/");
+          } else {
+            toast.error(message);
+            console.error(error);
+          }
+        }
+      );
+    } else {
+      console.warn("Cannot delete group: not connected to socket server");
+    }
+  }
+
+  function setPrivacy({
+    chatId,
+    privacy
+  }: {
+    chatId: string;
+    privacy: boolean;
+  }) {
+    console.log(privacy);
+    if (isConnected && socket) {
+      socket.emit(
+        "SET_PRIVACY_CLIENT",
+        { chatId, privacy },
+        ({ success, message, error }: AckCreateGroup) => {
+          if (success) {
+            toast.success(message);
+            queryClient.invalidateQueries({ queryKey: ["chats"] });
+          } else {
+            toast.error(message);
+            console.error(error);
+          }
+        }
+      );
+    } else {
+      console.warn("Cannot set privacy: not connected to socket server");
+    }
+  }
+
   return (
-    <SocketContext.Provider value={{ isConnected, sendMessage }}>
+    <SocketContext.Provider
+      value={{
+        isConnected: socket?.connected || false,
+        sendMessage,
+        pinMessage: pinMessageSocket,
+        unpinMessage: unpinMessageSocket,
+        editMessage: editMessageSocket,
+        //startConnection,
+        createGroupOrChannel,
+        deleteMessage,
+        addGroupMembers,
+        addAdmins,
+        leaveGroup,
+        removeMembers,
+        acceptCall,
+        createVoiceCall,
+        setPermission,
+        deleteGroup,
+        setPrivacy,
+        finishCall
+      }}
+    >
       {children}
     </SocketContext.Provider>
   );
-};
+}
 
 export default SocketProvider;
diff --git a/app/src/state/admin/adminView.ts b/app/src/state/admin/adminView.ts
new file mode 100644
index 00000000..aa5d9c21
--- /dev/null
+++ b/app/src/state/admin/adminView.ts
@@ -0,0 +1,25 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+export enum View {
+  USERS,
+  GROUPS,
+}
+
+interface adminViewState {
+  value: View;
+}
+
+const initialState: adminViewState = { value: View.USERS };
+
+const adminViewSlice = createSlice({
+  name: "adminView",
+  initialState,
+  reducers: {
+    setView: (state, action: PayloadAction<adminViewState>) => {
+      state.value = action.payload.value;
+    },
+  },
+});
+
+export const { setView } = adminViewSlice.actions;
+export default adminViewSlice.reducer;
diff --git a/app/src/state/groups/selectedUsers.ts b/app/src/state/groups/selectedUsers.ts
new file mode 100644
index 00000000..84dbc453
--- /dev/null
+++ b/app/src/state/groups/selectedUsers.ts
@@ -0,0 +1,28 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+import { UserType } from "@features/groups/hooks/useAllUsers";
+
+const initialState = [] as UserType[];
+
+const selectedUsersSlice = createSlice({
+  name: "selectedUsers",
+  initialState,
+  reducers: {
+    toggleSelectUser: (state, action: PayloadAction<UserType>) => {
+      const userIndex = state.findIndex(
+        (user) => user._id === action.payload._id
+      );
+      if (userIndex === -1) {
+        state.push(action.payload);
+      } else {
+        state.splice(userIndex, 1);
+      }
+    },
+
+    clearSelectedUsers: () => {
+      return initialState;
+    },
+  },
+});
+
+export const { toggleSelectUser, clearSelectedUsers } = selectedUsersSlice.actions;
+export default selectedUsersSlice.reducer;
diff --git a/app/src/state/messages/activeMessage.ts b/app/src/state/messages/activeMessage.ts
new file mode 100644
index 00000000..a1ad5620
--- /dev/null
+++ b/app/src/state/messages/activeMessage.ts
@@ -0,0 +1,36 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+type ActiveMessageState = {
+  id: string | null;
+  content: string | null;
+  state: "edit" | "reply" | null;
+};
+
+const initialState: ActiveMessageState = {
+  id: null,
+  content: null,
+  state: null,
+};
+
+const activeMessageSlice = createSlice({
+  name: "editMessage",
+  initialState,
+  reducers: {
+    setActiveMessage: (state, action: PayloadAction<ActiveMessageState>) => {
+      state.id = action.payload.id;
+      state.content = action.payload.content;
+      state.state = action.payload.state;
+    },
+
+    clearActiveMessage: (state) => {
+      state.id = null;
+      state.content = null;
+      state.state = null;
+    },
+  },
+});
+
+export const { setActiveMessage, clearActiveMessage } =
+  activeMessageSlice.actions;
+
+export default activeMessageSlice.reducer;
diff --git a/app/src/state/messages/channels.ts b/app/src/state/messages/channels.ts
new file mode 100644
index 00000000..1c2a4c15
--- /dev/null
+++ b/app/src/state/messages/channels.ts
@@ -0,0 +1,34 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+import { MessageInterface } from "types/messages";
+
+interface ChannelsState {
+  activeThread: string;
+  activeThreadMessages: MessageInterface[];
+}
+
+const initialState: ChannelsState = {
+  activeThread: "",
+  activeThreadMessages: []
+};
+
+const channelsThreadsSlice = createSlice({
+  name: "channelThreads",
+  initialState,
+  reducers: {
+    setActiveThread: (
+      state,
+      action: PayloadAction<{ threadId: string; messages: MessageInterface[] }>
+    ) => {
+      state.activeThread = action.payload.threadId;
+      state.activeThreadMessages = action.payload.messages;
+    },
+    resetActiveThread: (state) => {
+      state.activeThread = "";
+      state.activeThreadMessages = [];
+    }
+  }
+});
+
+export const { setActiveThread, resetActiveThread } =
+  channelsThreadsSlice.actions;
+export default channelsThreadsSlice.reducer;
diff --git a/app/src/state/messages/chats.ts b/app/src/state/messages/chats.ts
new file mode 100644
index 00000000..fe7d4175
--- /dev/null
+++ b/app/src/state/messages/chats.ts
@@ -0,0 +1,361 @@
+import { getChatByID } from "@features/chats/utils/helpers";
+import { BlockListInterface } from "@features/privacy-settings/BlockList";
+import { Chat, Member } from "@mocks/data/chats";
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+import { MessageInterface } from "types/messages";
+
+interface DetailedChatInterface extends Chat {
+  messages: MessageInterface[];
+  isTyping: boolean;
+  showCheckBox: boolean;
+  selectedMessages: string[];
+  lastMessage?: {
+    _id: string;
+    content: string;
+    senderId: string;
+    timestamp: string;
+    contentType: string;
+  };
+  name?: string;
+  isBlocked?: boolean;
+  photo?: string;
+
+  encryptionKey?: string;
+  initializationVector?: string;
+  messagingPermission?: boolean;
+  downloadingPermission?: boolean;
+  privacy: boolean;
+}
+
+interface ChatsState {
+  chats: DetailedChatInterface[];
+  members: Member[];
+}
+
+const initialState: ChatsState = {
+  chats: [],
+  members: []
+};
+
+const chatsSlice = createSlice({
+  name: "chats",
+  initialState,
+  reducers: {
+    setAllChats: (
+      state,
+      action: PayloadAction<{
+        chatsData: ChatsState;
+        blockList: BlockListInterface[];
+        userId: string;
+      }>
+    ) => {
+      const { blockList, userId, chatsData } = action.payload;
+      const incomminingChats = chatsData?.chats;
+      incomminingChats
+        ?.map((chat) => {
+          if (chat.type === "private") {
+            const members = chat.members;
+            const otherUser = members.filter(
+              (member) => member._id !== userId
+            )[0];
+
+            if (blockList?.find((user: any) => user.id === otherUser._id)) {
+              chat.isBlocked = true;
+            }
+          }
+          return chat;
+        })
+        ?.filter((chat) => chat !== undefined) as DetailedChatInterface[];
+      state.chats = incomminingChats;
+      state.members = action.payload.chatsData.members;
+    },
+
+    addMessage: (
+      state,
+      action: PayloadAction<{ chatId: string; message: MessageInterface }>
+    ) => {
+      const { chatId, message } = action.payload;
+      const chat = getChatByID({ chats: state.chats, chatID: chatId });
+
+      if (chat?.type === "private" && chat?.isBlocked) return;
+      const { _id, content, senderId, timestamp, contentType } = message;
+
+      if (chat) {
+        chat.lastMessage = { _id, content, senderId, timestamp, contentType };
+        chat.messages.push(message);
+      }
+    },
+
+    deleteMessage: (
+      state,
+      action: PayloadAction<{ messageId: string; chatId: string }>
+    ) => {
+      const { messageId, chatId } = action.payload;
+      const chat = getChatByID({ chats: state.chats, chatID: chatId });
+      if (chat) {
+        chat.messages = chat?.messages.filter((msg) => msg._id !== messageId);
+      }
+    },
+
+    editMessage: (
+      state,
+      action: PayloadAction<{
+        chatId: string;
+        messageId: string;
+        content: string;
+      }>
+    ) => {
+      const { chatId, messageId, content } = action.payload;
+
+      const chat = getChatByID({ chats: state.chats, chatID: chatId });
+
+      const message = chat?.messages.find((msg) => msg._id === messageId);
+
+      if (message) {
+        message.content = content;
+      }
+    },
+
+    pinMessage: (
+      state,
+      action: PayloadAction<{ messageId: string; chatId: string }>
+    ) => {
+      const { messageId, chatId } = action.payload;
+      const chat = getChatByID({ chats: state.chats, chatID: chatId });
+
+      const message = chat?.messages.find((msg) => msg._id === messageId);
+      if (message) {
+        message.isPinned = true;
+      }
+    },
+
+    unpinMessage: (
+      state,
+      action: PayloadAction<{ messageId: string; chatId: string }>
+    ) => {
+      const { messageId, chatId } = action.payload;
+      const chat = getChatByID({ chats: state.chats, chatID: chatId });
+
+      const message = chat?.messages.find((msg) => msg._id === messageId);
+      if (message) {
+        message.isPinned = false;
+      }
+    },
+
+    clearMessages: (state, action: PayloadAction<{ chatId: string }>) => {
+      const { chatId } = action.payload;
+      const chat = getChatByID({ chats: state.chats, chatID: chatId });
+
+      chat?.messages.filter((msg) => msg.chatId !== chatId);
+    },
+
+    setIsTyping: (
+      state,
+      action: PayloadAction<{ chatId: string; isTyping: boolean }>
+    ) => {
+      const { isTyping, chatId } = action.payload;
+      const chat = getChatByID({ chats: state.chats, chatID: chatId });
+      if (chat) {
+        chat.isTyping = isTyping;
+      }
+    },
+
+    setShowCheckBox: (
+      state,
+      action: PayloadAction<{ chatId: string; showCheckBox: boolean }>
+    ) => {
+      const { chatId, showCheckBox } = action.payload;
+      const chat = getChatByID({ chats: state.chats, chatID: chatId });
+
+      if (chat) {
+        if (!showCheckBox) chat.selectedMessages = [];
+
+        chat.showCheckBox = showCheckBox;
+      }
+    },
+
+    SelectMessage: (
+      state,
+      action: PayloadAction<{ chatId: string; id: string }>
+    ) => {
+      const { chatId, id } = action.payload;
+      const chat = getChatByID({ chats: state.chats, chatID: chatId });
+
+      chat?.selectedMessages.push(id);
+    },
+
+    removeSelectedMessage: (
+      state,
+      action: PayloadAction<{ chatId: string; id: string }>
+    ) => {
+      const { chatId, id } = action.payload;
+      const chat = getChatByID({ chats: state.chats, chatID: chatId });
+      if (chat) {
+        chat.selectedMessages = chat?.selectedMessages.filter(
+          (msgId) => msgId !== id
+        );
+      }
+    },
+
+    mergeMessages: (
+      state,
+      action: PayloadAction<{
+        chatId: string;
+        newMessages: MessageInterface[];
+      }>
+    ) => {
+      const { chatId, newMessages } = action.payload;
+      const chatIndex = state.chats.findIndex((chat) => chat._id === chatId);
+
+      if (chatIndex !== -1) {
+        const chat = state.chats[chatIndex];
+
+        const filteredMessages = newMessages.filter(
+          (msg) => !chat.messages.find((m) => m._id === msg._id)
+        );
+
+        state.chats[chatIndex] = {
+          ...chat,
+          messages: [...filteredMessages, ...chat.messages]
+        };
+      }
+    },
+
+    updateLastMessage: (
+      state,
+      action: PayloadAction<{ chatId: string; lastMessage: MessageInterface }>
+    ) => {
+      const { chatId, lastMessage } = action.payload;
+      const chat = getChatByID({ chats: state.chats, chatID: chatId });
+      if (chat) {
+        chat.lastMessage = lastMessage;
+      }
+    },
+
+    setChatIsBlocked: (
+      state,
+      action: PayloadAction<{
+        chatId: string;
+        isBlocked: boolean;
+        userId: string;
+      }>
+    ) => {
+      const { chatId, isBlocked, userId } = action.payload;
+      const chat = getChatByID({ chats: state.chats, chatID: chatId });
+
+      console.log(chat);
+      if (chat) chat.isBlocked = isBlocked;
+
+      const members = chat?.members;
+      const otherUser = members?.filter((member) => member._id !== userId)[0];
+
+      const user = state.members.find(
+        (member) => member._id === otherUser?._id
+      );
+
+      if (user) user.isBlocked = isBlocked;
+    },
+
+    setMemberIsBlocked: (
+      state,
+      action: PayloadAction<{
+        memberId: string;
+        isBlocked: boolean;
+        userId: string;
+      }>
+    ) => {
+      const { memberId, isBlocked, userId } = action.payload;
+      const member = state.members.find((member) => member._id === memberId);
+      if (member) member.isBlocked = isBlocked;
+
+      state.chats.forEach((chat) => {
+        if (chat.type === "private") {
+          const otherUser = chat.members.find(
+            (member) => member._id !== userId
+          );
+
+          if (otherUser?._id === memberId) {
+            chat.isBlocked = isBlocked;
+          }
+        }
+      });
+    },
+    setName: (
+      state,
+      action: PayloadAction<{ chatId: string; name: string }>
+    ) => {
+      const { chatId, name } = action.payload;
+      const chat = getChatByID({ chats: state.chats, chatID: chatId });
+      if (chat) {
+        chat.name = name;
+      }
+    },
+
+    setPhoto: (
+      state,
+      action: PayloadAction<{ chatId: string; photo: string }>
+    ) => {
+      const { chatId, photo } = action.payload;
+      const chat = getChatByID({ chats: state.chats, chatID: chatId });
+      if (chat) {
+        chat.photo = photo;
+      }
+    },
+
+    setIsMention: (
+      state,
+      action: PayloadAction<{
+        chatId: string;
+        messageId: string;
+        isMention: boolean;
+      }>
+    ) => {
+      const { chatId, isMention, messageId } = action.payload;
+      const chat = getChatByID({ chats: state.chats, chatID: chatId });
+      const reqMessage = chat?.messages.find((msg) => msg._id === messageId);
+      if (reqMessage) {
+        reqMessage.isMention = isMention;
+      }
+    },
+
+    setIsSeen: (
+      state,
+      action: PayloadAction<{
+        chatId: string;
+        messageId: string;
+        isSeen: boolean;
+      }>
+    ) => {
+      const { chatId, isSeen, messageId } = action.payload;
+      const chat = getChatByID({ chats: state.chats, chatID: chatId });
+      const reqMessage = chat?.messages.find((msg) => msg._id === messageId);
+      if (reqMessage) {
+        reqMessage.isSeen = isSeen;
+      }
+    },
+  },
+});
+
+export const {
+  setAllChats,
+  addMessage,
+  deleteMessage,
+  editMessage,
+  clearMessages,
+  pinMessage,
+  unpinMessage,
+  setIsTyping,
+  setShowCheckBox,
+  SelectMessage,
+  removeSelectedMessage,
+  mergeMessages,
+  updateLastMessage,
+  setChatIsBlocked,
+  setMemberIsBlocked,
+  setName,
+  setPhoto,
+  setIsMention,
+  setIsSeen
+} = chatsSlice.actions;
+export default chatsSlice.reducer;
+export type { DetailedChatInterface, ChatsState };
diff --git a/app/src/state/messages/global-search.ts b/app/src/state/messages/global-search.ts
new file mode 100644
index 00000000..10ccec7d
--- /dev/null
+++ b/app/src/state/messages/global-search.ts
@@ -0,0 +1,32 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+interface SearchState {
+  searchTerm: string;
+  selectedTab: string;
+}
+
+const initialState: SearchState = {
+  searchTerm: "",
+  selectedTab: "Chats",
+};
+
+const globalSearchSlice = createSlice({
+  name: "globalSearch",
+  initialState,
+  reducers: {
+    clearSearch: (state) => {
+      state.searchTerm = "";
+      state.selectedTab = "Chats";
+    },
+    setSearchTerm: (state, action: PayloadAction<string>) => {
+      state.searchTerm = action.payload;
+    },
+    setSelectedTab: (state, action: PayloadAction<string>) => {
+      state.selectedTab = action.payload;
+    },
+  },
+});
+
+export const { setSearchTerm, setSelectedTab, clearSearch } =
+  globalSearchSlice.actions;
+export default globalSearchSlice.reducer;
diff --git a/app/src/state/messages/messages.ts b/app/src/state/messages/messages.ts
deleted file mode 100644
index 01814aef..00000000
--- a/app/src/state/messages/messages.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import { createSlice, PayloadAction } from "@reduxjs/toolkit";
-import { MessageInterface } from "types/messages";
-
-interface MessagesState {
-  messages: MessageInterface[];
-  isTyping: boolean;
-}
-
-const initialState: MessagesState = {
-  messages: [],
-  isTyping: false,
-};
-
-const messagesSlice = createSlice({
-  name: "messages",
-  initialState,
-  reducers: {
-    addMessage: (state, action: PayloadAction<MessageInterface>) => {
-      state.messages.push(action.payload);
-    },
-
-    deleteMessage: (
-      state,
-      action: PayloadAction<{ id: string; chatId: string }>
-    ) => {
-      state.messages = state.messages.filter((message) => {
-        const { chatId, id } = action.payload;
-        if (message.chatId == chatId) return message.id !== id;
-        else return message;
-      });
-    },
-
-    editMessage: (
-      state,
-      action: PayloadAction<{ id: string; content: string; chatId: string }>
-    ) => {
-      const { id, content, chatId } = action.payload;
-      const message = state.messages.find(
-        (msg) => msg.id === id && msg.chatId == chatId
-      );
-      if (message) {
-        message.content = content;
-      }
-    },
-
-    clearMessages: (state, action: PayloadAction<{ chatId: string }>) => {
-      const { chatId } = action.payload;
-      state.messages.filter((msg) => msg.chatId !== chatId);
-    },
-    setIsTyping: (state, action: PayloadAction<{ isTyping: boolean }>) => {
-      const { isTyping } = action.payload;
-      state.isTyping = isTyping;
-    },
-  },
-});
-
-export const {
-  addMessage,
-  deleteMessage,
-  editMessage,
-  clearMessages,
-  setIsTyping,
-} = messagesSlice.actions;
-export default messagesSlice.reducer;
-export type { MessageInterface, MessagesState };
diff --git a/app/src/state/messages/search.ts b/app/src/state/messages/search.ts
new file mode 100644
index 00000000..eba72ff0
--- /dev/null
+++ b/app/src/state/messages/search.ts
@@ -0,0 +1,60 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+interface SearchState {
+  searchTerm: string;
+  searchResults: {
+    messageId: string;
+    highlightIndex: number;
+  }[];
+  currentResultIndex: number;
+}
+
+const initialState: SearchState = {
+  searchTerm: "",
+  searchResults: [],
+  currentResultIndex: -1
+};
+
+const searchSlice = createSlice({
+  name: "search",
+  initialState,
+  reducers: {
+    setSearchTerm: (state, action: PayloadAction<string>) => {
+      state.searchTerm = action.payload;
+    },
+    setSearchResults: (
+      state,
+      action: PayloadAction<{ messageId: string; highlightIndex: number }[]>
+    ) => {
+      state.searchResults = action.payload;
+      state.currentResultIndex = state.searchResults.length > 0 ? 0 : -1;
+    },
+    moveToNextResult: (state) => {
+      if (state.searchResults.length > 0) {
+        state.currentResultIndex =
+          (state.currentResultIndex + 1) % state.searchResults.length;
+      }
+    },
+    moveToPreviousResult: (state) => {
+      if (state.searchResults.length > 0) {
+        state.currentResultIndex =
+          (state.currentResultIndex - 1 + state.searchResults.length) %
+          state.searchResults.length;
+      }
+    },
+    clearSearch: (state) => {
+      state.searchTerm = "";
+      state.searchResults = [];
+      state.currentResultIndex = -1;
+    }
+  }
+});
+
+export const {
+  setSearchTerm,
+  setSearchResults,
+  moveToNextResult,
+  moveToPreviousResult,
+  clearSearch
+} = searchSlice.actions;
+export default searchSlice.reducer;
diff --git a/app/src/state/side-bar/sideBar.ts b/app/src/state/side-bar/sideBar.ts
index ce2bf077..f896c7f6 100644
--- a/app/src/state/side-bar/sideBar.ts
+++ b/app/src/state/side-bar/sideBar.ts
@@ -9,6 +9,19 @@ import {
   profileUpdate,
   sideBarPages,
   blockList,
+  addMembers,
+  newGroup,
+  newChannel,
+  groupInfo,
+  editGroupInfo,
+  groupType,
+  addMoreMembers,
+  admins,
+  addAdmins,
+  members,
+  permissions,
+  channelInfo,
+  editChannelInfo,
 } from "../../data/sideBar";
 import { pagesStrings } from "types/sideBar";
 
@@ -16,9 +29,18 @@ interface SideBarView {
   page: pagesStrings;
   title: string;
   backView?: sideBarPages;
-  props?: object;
+  props?: { [key: string]: any };
 }
-const initialState: SideBarView = chats;
+
+interface SideBarState {
+  leftSideBar: SideBarView;
+  rightSideBar: SideBarView;
+}
+
+const initialState: SideBarState = {
+  leftSideBar: chats,
+  rightSideBar: groupInfo,
+};
 
 function getSideBarPage(type: number): SideBarView {
   switch (type) {
@@ -38,6 +60,32 @@ function getSideBarPage(type: number): SideBarView {
       return blockList;
     case sideBarPages.DEVICES:
       return devices;
+    case sideBarPages.ADD_MEMBERS:
+      return addMembers;
+    case sideBarPages.NEW_GROUP:
+      return newGroup;
+    case sideBarPages.NEW_CHANNEL:
+      return newChannel;
+    case sideBarPages.GROUP_INFO:
+      return groupInfo;
+    case sideBarPages.EDIT_GROUP_INFO:
+      return editGroupInfo;
+    case sideBarPages.GROUP_TYPE:
+      return groupType;
+    case sideBarPages.ADD_MORE_MEMBERS:
+      return addMoreMembers;
+    case sideBarPages.ADMINS:
+      return admins;
+    case sideBarPages.ADD_ADMINS:
+      return addAdmins;
+    case sideBarPages.MEMBERS:
+      return members;
+    case sideBarPages.PERMISSIONS:
+      return permissions;
+    case sideBarPages.CHANNEL_INFO:
+      return channelInfo;
+    case sideBarPages.EDIT_CHANNEL_INFO:
+      return editChannelInfo;
     default:
       throw new Error("Unknown Type");
   }
@@ -45,38 +93,56 @@ function getSideBarPage(type: number): SideBarView {
 
 interface actionType {
   redirect: sideBarPages;
-  data?: any;
+  data: { type: "left" | "right"; [key: string]: any };
 }
 
 const sideBarSlice = createSlice({
   name: "sideBarData",
   initialState,
   reducers: {
+    resetLeftSideBar: (state) => {
+      state.leftSideBar = chats;
+    },
+    resetRightSideBar: (state) => {
+      state.rightSideBar = groupInfo;
+    },
     updateSideBarView: (state, action: PayloadAction<actionType>) => {
       const { redirect, data } = action.payload;
 
-      // redirect can take value 0, so don't try "if(redirect)"
-      if (redirect === undefined) return;
-
-      // state assigned one by one to avoid state de-serialization
+      const whichSide = data.type;
       const newData = getSideBarPage(redirect);
-      state.backView = newData.backView;
-      state.page = newData.page;
 
-      if (redirect === sideBarPages.SETTINGS_UPDATE) {
-        state.props = { data: data };
-        state.title = data.header;
-      } else if (redirect === sideBarPages.BLOCKED_USERS) {
-        state.props = { ...newData.props, data: data };
-        state.title = newData.title;
+      const updatedSideBar = {
+        page: newData.page,
+        title: newData.title,
+        backView: data?.backView ? data?.backView : newData?.backView,
+        props: { ...newData.props },
+      };
+
+      if (redirect === sideBarPages.ADD_ADMINS) {
+        updatedSideBar.props = {
+          ...updatedSideBar.props,
+          prevBackView: data.prevBackView,
+        };
+      }
+
+      if (redirect === sideBarPages.ADD_MEMBERS) {
+        updatedSideBar.props = {
+          ...updatedSideBar.props,
+          view: data.view,
+        };
+      }
+
+      if (whichSide === "left") {
+        state.leftSideBar = updatedSideBar;
       } else {
-        state.title = newData.title;
-        state.props = { ...newData.props };
+        state.rightSideBar = updatedSideBar;
       }
     },
   },
 });
 
-export const { updateSideBarView } = sideBarSlice.actions;
+export const { updateSideBarView, resetRightSideBar, resetLeftSideBar } =
+  sideBarSlice.actions;
 export default sideBarSlice.reducer;
 export type { SideBarView, actionType };
diff --git a/app/src/state/store.ts b/app/src/state/store.ts
index 38c98c8e..775d6791 100644
--- a/app/src/state/store.ts
+++ b/app/src/state/store.ts
@@ -2,13 +2,26 @@ import { configureStore } from "@reduxjs/toolkit";
 import themeReducer from "./theme/theme";
 import sideBarReducer from "./side-bar/sideBar";
 import userReducer from "./user/user";
-import messagesReducer from "./messages/messages";
+import searchReducer from "./messages/search";
+import globalSearchReducer from "./messages/global-search";
+import activeMessageReducer from "./messages/activeMessage";
+import chatsReducer from "./messages/chats";
+import selectedUsersReducer from "./groups/selectedUsers";
+import channelThreadsReducer from "./messages/channels";
+import adminViewReducer from "./admin/adminView";
+
 export const store = configureStore({
   reducer: {
     theme: themeReducer,
     sideBarData: sideBarReducer,
     user: userReducer,
-    messages: messagesReducer,
+    search: searchReducer,
+    activeMessage: activeMessageReducer,
+    chats: chatsReducer,
+    globalSearch: globalSearchReducer,
+    selectedUsers: selectedUsersReducer,
+    channelsThreads: channelThreadsReducer,
+    adminView: adminViewReducer,
   },
 });
 
diff --git a/app/src/state/user/user.ts b/app/src/state/user/user.ts
index a2729e6f..14d668ff 100644
--- a/app/src/state/user/user.ts
+++ b/app/src/state/user/user.ts
@@ -4,6 +4,7 @@ import {
   activeStates,
   permissionStates,
 } from "../../types/sideBar";
+
 import {
   userInfoInterface,
   privacySettingsInterface,
@@ -11,8 +12,8 @@ import {
   updatePrivacyInterface,
   updateInfoInterface,
   updateActivityInterface,
-  permissionsSettingsInterface,
   updatePermissionInterface,
+  permissionsSettingsInterface,
 } from "../../types/user";
 
 interface userState {
@@ -25,17 +26,21 @@ interface userState {
 const initialState: userState = {
   // TODO: set at login
   userInfo: {
+    id: "",
     username: "",
     screenName: "",
     email: "",
     photo: "",
     status: "",
     bio: "",
+    isAdmin: false,
   },
+
   privacySettings: {
     storiesSeenPrivacy: privacyStates.EVERYONE,
     lastSeenPrivacy: privacyStates.EVERYONE,
     profilePhotoPrivacy: privacyStates.EVERYONE,
+    blockPrivacy: "",
   },
   activitySettings: {
     readReceiptsPrivacy: activeStates.ENABLED,
@@ -50,6 +55,12 @@ const userSlice = createSlice({
   name: "user",
   initialState,
   reducers: {
+    setUserInfo: (
+      state: userState,
+      action: PayloadAction<userInfoInterface>
+    ) => {
+      state.userInfo = action.payload;
+    },
     updateUserPrivacy: (
       state: userState,
       action: PayloadAction<updatePrivacyInterface>
@@ -82,6 +93,7 @@ const userSlice = createSlice({
 });
 
 export const {
+  setUserInfo,
   updateUserPrivacy,
   updateUserInfo,
   updateUserActivity,
diff --git a/app/src/styles/GlobalStyles.tsx b/app/src/styles/GlobalStyles.tsx
index 89ab2f97..64000808 100644
--- a/app/src/styles/GlobalStyles.tsx
+++ b/app/src/styles/GlobalStyles.tsx
@@ -44,7 +44,7 @@ const GlobalStyles = createGlobalStyle`
     --color-chat-hover: #f5f5f5;
 
     --color-default-shadow: rgb(114, 114, 114, 0.251);
-
+    
     
     --color-item-hover: rgb(244, 244, 245);
     --color-item-active: rgb(237, 237, 237);
@@ -53,19 +53,36 @@ const GlobalStyles = createGlobalStyle`
     
     --pattern-color: #c3bfc5a6;
   
-    --color-background-compact-menu: rgb(255, 255, 255, 0.733);
-    --color-background-compact-menu-hover: rgb(0, 0, 0, 0.067);
+    --new-chat-color: #ffffff;
+    --color-background-compact-menu: #4c90b218;
+    --color-background-compact-menu-hover: #4c90b23b;
     
     --color-border: #dfe1e5;
+    --color-border-hover: #c1c1c1;
     --color-borders-input: rgb(218, 220, 224);
-
+    
     --color-search-border: #3390ec;
-
+    
     --image-grayscale: 0;
     --image-opacity: 30%;
 
     --scrollbar-color: rgba(0, 0, 0, .2);
     --color-avatar: linear-gradient(135deg, #d6d46c, #5e924e);
+    --color-avatar-shadow:linear-gradient(135deg,#d6d46c, #5e924e);
+    --admin-sidebar-bg: #56a2c9;
+    --admin-sidebar-bg-hover: #447f9c;
+
+    --admin-main-bg: #fff;
+    --admin-main-bg-hover: #f5f5f5;
+
+    --admin-header-bg:  #f5f5f5;
+    --admin-header-bg-hover: #e5e5e5;
+
+
+    --admin-nav-menu-item-hover-text: #56a2c9;
+  --admin-nav-menu-item-hover: rgba(213, 213, 216, 0.666);
+  --admin-card-active: #f0f0f0;
+
   }
   
   &.dark-mode {
@@ -96,27 +113,34 @@ const GlobalStyles = createGlobalStyle`
       var(--chat-background-mid-left)
     );
 
+    
     --bg-image-opacity: 100%;
-
+    
     --chat-wallpaper-bg: url("/assets/bg-dark.png");
     
+    --new-chat-color: #36373a;
     --color-background: #192b35;
     --color-background-secondary: #24343e;
     --color-background-secondary-accent: #22313a;
     --color-chat-hover: #2c2c2c;
-
+    
+    --scrollbar-color:rgba(255, 255, 255, .2);
     --color-default-shadow: rgb(16, 16, 16, 0.612);
+    --color-light-shadow: rgb(16, 16, 16, 0.212);
     
     --color-chat-active: #1e4454;
     --color-chat-hover: #25353f;
     
     --color-icon-secondary:  rgb(170, 170, 170);
-    --pattern-color: #2d394ecc
+    --pattern-color: #2d394ecc;
     
-    --color-background-compact-menu: rgb(33, 33, 33, 0.867);
-    --color-background-compact-menu-hover: rgb(0, 0, 0, 0.4);
+    --color-background-compact-menu: #ffffff13;
+    --color-background-compact-menu-hover: #ffffff36;
  
     --color-border: #09182299;
+    --color-border-hover: #091822;
+
+    --admin-card-active: #56a2c9;
     --color-borders-input: var(--color-text-secondary);
 
     --color-search-border: #7644CB;
@@ -129,14 +153,32 @@ const GlobalStyles = createGlobalStyle`
 
     --scrollbar-color: rgba(255, 255, 255, .2);
     --color-avatar: linear-gradient(135deg, #72C6EF, #004E92);
+    --color-avatar-shadow:linear-gradient(135deg, #72C6EF, #004E92);
+
+    --admin-sidebar-bg: #192b35;
+    --admin-sidebar-bg-hover: #25353f;
+
+    --admin-main-bg: #24343e;
+    --admin-main-bg-hover: #25353f;
+
+    --admin-header-bg:  #25353f;
+    --admin-header-bg-hover: #203030;
+
+    --admin-nav-menu-item-hover-text: #24343e79;
+  --admin-nav-menu-item-hover: rgba(213, 213, 216, 0.466);
+  --admin-card-active: #4c90b2;
+
   }
 
+  --story-views-background: #181a1b;
+  --story-views-background-hover: #1e2021;
+
   --color-background-own-1: #6573F8;
   --color-background-own-2: #7644CB;
   --color-background-own-3: #8849B4;
   --color-background-own-4: #A751A8;
   
-  --color-reply-own: #f5f5f52e;
+  --color-peer-1: var(--accent-color);
   
   --color-peer-2: #a695e7;
   --color-peer-bg-2: #a695e71a;
@@ -153,6 +195,7 @@ const GlobalStyles = createGlobalStyle`
   --color-peer-5: #65aadd;
   --color-peer-bg-5: #65aadd1a;
   --color-peer-bg-active-5: #65aadd2b;
+  
 
   --color-peer-6: #ee7aae;
   --color-peer-bg-6: #ee7aae1a;
@@ -170,14 +213,17 @@ const GlobalStyles = createGlobalStyle`
   --border-radius-messages-small: 0.375rem;
   --border-radius-forum-avatar: 25%;
   --border-radius-circle: 50%;
+  --border-radius-one-sided: 50px 0 0 50px;
+  --border-radius-left-sided-small: 0.625rem 0 0 0.625rem;
+  --border-radius-right-sided-small: 0 0.625rem 0.625rem 0;
+
   
   --color-borders-input: rgb(218, 220, 224);
 
   
   --color-error: #e53935;
-  --color-error-shade: #c62828;
+  --color-error-shade: #c628282f;
   --color-success: rgb(0, 199, 62);
-
   font-size: 16px;
 }
 
@@ -206,8 +252,6 @@ select:-webkit-autofill:focus {
   transition: background-color 0.3s, border 0.3s;
 
   user-select: none;
-  user-drag: none;
-  app-region: no-drag;
 }
 
 body {
@@ -243,7 +287,6 @@ button {
 
 const ScrollContainer = styled.div`
   width: 100%;
-  height: 500px;
   overflow-y: auto;
   position: relative;
 
diff --git a/app/src/types/admin.ts b/app/src/types/admin.ts
new file mode 100644
index 00000000..50f7a0ce
--- /dev/null
+++ b/app/src/types/admin.ts
@@ -0,0 +1,21 @@
+enum userStatus {
+  active = "active",
+  banned = "banned",
+  deactivated = "deactivated",
+}
+interface User {
+  id: string;
+  username: string;
+  photo: string;
+  accountStatus: userStatus;
+}
+interface Group {
+  id: string;
+  name: string;
+  picture: string;
+  isFilterd: boolean;
+  numberOfMembers: number;
+}
+
+export type { User, Group };
+export { userStatus };
diff --git a/app/src/types/calls.ts b/app/src/types/calls.ts
new file mode 100644
index 00000000..36758e03
--- /dev/null
+++ b/app/src/types/calls.ts
@@ -0,0 +1,44 @@
+export interface CallContextType {
+  callId: React.RefObject<string | null>;
+  senderId: React.RefObject<string | null>;
+  chatId: React.RefObject<string | null>;
+  clientId: React.RefObject<
+    Map<
+      string,
+      {
+        connection: RTCPeerConnection | null;
+        offerSent: boolean;
+      }
+    >
+  >;
+  // callAccepted: React.RefObject<string | null>;
+  joinCall: (newCallId: string, newSenderId: string, newChatId: string) => void;
+  endCall: (clientId: string | null) => void;
+
+  mute: () => void;
+  unmute: () => void;
+
+  acceptCall: () => void;
+  startPeerConnection: (
+    clientId: string
+  ) => Promise<RTCSessionDescriptionInit | null>;
+  offer: React.RefObject<RTCSessionDescriptionInit | null>;
+  getPeerConnection: (clientId: string) => RTCPeerConnection | null;
+  //recieveAnswer: (answer: string) => Promise<void>;
+  recieveICE: (
+    candidate: RTCIceCandidateInit,
+    senderId: string
+  ) => Promise<void>;
+  createAnswer: (
+    data: RTCSessionDescriptionInit,
+    senderId: string
+  ) => Promise<RTCSessionDescriptionInit | null>;
+  setChatId: (chatId: string) => void;
+  recieveAnswer: (answer: RTCSessionDescriptionInit, senderId: string) => void;
+}
+export type CallStatus =
+  | "inactive"
+  | "active"
+  | "calling"
+  | "incoming"
+  | "ended";
diff --git a/app/src/types/media.ts b/app/src/types/media.ts
new file mode 100644
index 00000000..2b1ce816
--- /dev/null
+++ b/app/src/types/media.ts
@@ -0,0 +1 @@
+export type UploadFileStates = "idle" | "uploading" | "success" | "error";
diff --git a/app/src/types/messages.ts b/app/src/types/messages.ts
index 55931776..eade1604 100644
--- a/app/src/types/messages.ts
+++ b/app/src/types/messages.ts
@@ -1,14 +1,3 @@
-export enum MessageTypes {
-  "announcement",
-  "forward",
-  "normal",
-}
-export enum DeleteType {
-  "all",
-  "only-me",
-  "none",
-}
-
 export enum MessageStatus {
   "sent",
   "delivered",
@@ -16,16 +5,54 @@ export enum MessageStatus {
   "error",
 }
 
+export type ContentType =
+  | "text"
+  | "image"
+  | "GIF"
+  | "sticker"
+  | "audio"
+  | "video"
+  | "file"
+  | "link";
+
 export interface MessageInterface {
-  id: string;
+  _id: string;
+
+  //TODO: needs to be Date
+  timestamp: string;
   content: string;
+  contentType: ContentType;
+  isPinned: boolean;
+  isForward: boolean;
+  isAnnouncement: boolean;
   senderId: string;
-  type: MessageTypes;
-  createdAt: Date;
-  updatedAt: Date;
   chatId: string;
-  parentMessageId: string;
-  isDeleted: boolean;
-  deleteType: DeleteType;
+
+  parentMessageId: string | null;
   status: MessageStatus;
+  isAppropriate: boolean;
+
+  media?: string;
+
+  //TODO: should use parentMessageId
+  isReply: boolean;
+  threadMessages: string[];
+  isMention: boolean;
+  isSeen: boolean;
+}
+
+export enum StickerTap {
+  gif,
+  emoji,
+  sticker,
+}
+export interface Gif {
+  id: string;
+  title: string;
+  url: string;
+}
+export interface Sticker {
+  id: string;
+  title: string;
+  url: string;
 }
diff --git a/app/src/types/sideBar.ts b/app/src/types/sideBar.ts
index 9e6a310d..176cdb28 100644
--- a/app/src/types/sideBar.ts
+++ b/app/src/types/sideBar.ts
@@ -7,6 +7,19 @@ enum sideBarPages {
   PROFILE_UPDATE,
   BLOCKED_USERS,
   DEVICES,
+  ADD_MEMBERS,
+  NEW_GROUP,
+  NEW_CHANNEL,
+  GROUP_INFO,
+  EDIT_GROUP_INFO,
+  GROUP_TYPE,
+  ADD_MORE_MEMBERS,
+  ADMINS,
+  ADD_ADMINS,
+  MEMBERS,
+  PERMISSIONS,
+  CHANNEL_INFO,
+  EDIT_CHANNEL_INFO,
 }
 
 type pagesStrings = keyof typeof sideBarPages;
@@ -15,6 +28,7 @@ enum privacySettingsID {
   STORIES_SEEN_PRIVACY,
   LAST_SEEN_PRIVACY,
   PROFILE_PHOTO_PRIVACY,
+  BLOCK_PRIVACY,
 }
 
 enum activitySettingsID {
diff --git a/app/src/types/socket.ts b/app/src/types/socket.ts
index 99182913..5b544ac4 100644
--- a/app/src/types/socket.ts
+++ b/app/src/types/socket.ts
@@ -3,7 +3,69 @@ import { MessageInterface } from "./messages";
 
 export interface SocketContextType {
   isConnected: boolean;
-  sendMessage: (message: MessageInterface) => void;
+  sendMessage: (message: MessageInterface & { chatType: string }) => void;
+  pinMessage: (chatId: string, messageId: string, userId: string) => void;
+  unpinMessage: (chatId: string, messageId: string, userId: string) => void;
+  editMessage: (messageId: string, content: string, chatId: string) => void;
+  createGroupOrChannel: ({
+    type,
+    name,
+    members
+  }: {
+    type: "group" | "channel";
+    name: string;
+    members: string[];
+  }) => void;
+  addGroupMembers: ({
+    chatId,
+    users
+  }: {
+    chatId: string;
+    users: string[];
+  }) => void;
+  addAdmins: ({
+    chatId,
+    members
+  }: {
+    chatId: string;
+    members: string[];
+  }) => void;
+  removeMembers: ({
+    chatId,
+    members
+  }: {
+    chatId: string;
+    members: string[];
+  }) => void;
+  //startConnection: (offer?: RTCSessionDescription) => void;
+  deleteMessage: ({
+    messageId,
+    chatId
+  }: {
+    messageId: string;
+    chatId: string;
+  }) => void;
+  setPermission: ({
+    chatId,
+    type,
+    who
+  }: {
+    chatId: string;
+    type: "post" | "download";
+    who: "everyone" | "admins";
+  }) => void;
+  setPrivacy: ({
+    chatId,
+    privacy
+  }: {
+    chatId: string;
+    privacy: boolean;
+  }) => void;
+  leaveGroup: ({ chatId }: { chatId: string }) => void;
+  deleteGroup: ({ chatId }: { chatId: string }) => void;
+  createVoiceCall: ({ chatId }: { chatId: string }) => void;
+  acceptCall: (callId: string | null) => void;
+  finishCall: () => void;
 }
 
 export interface SocketProviderProps {
diff --git a/app/src/types/story.ts b/app/src/types/story.ts
index 5f1e552f..c209d8f7 100644
--- a/app/src/types/story.ts
+++ b/app/src/types/story.ts
@@ -1,13 +1,17 @@
-import { otherUserInfoInterface } from "./user";
-
 interface story {
   id: string;
-  user: otherUserInfoInterface;
+  userId?: string;
   content: string;
   timestamp: string;
   caption?: string;
-  views?: otherUserInfoInterface[];
+  views?: string[];
   viewed?: boolean;
 }
+interface userStories {
+  userId: string;
+  name: string;
+  photo: string;
+  stories: story[];
+}
 
-export type { story };
+export type { story, userStories };
diff --git a/app/src/types/user.ts b/app/src/types/user.ts
index 830d245d..cff126fc 100644
--- a/app/src/types/user.ts
+++ b/app/src/types/user.ts
@@ -11,6 +11,7 @@ interface privacySettingsInterface {
   storiesSeenPrivacy: privacyStates;
   lastSeenPrivacy: privacyStates;
   profilePhotoPrivacy: privacyStates;
+  blockPrivacy: string;
 }
 
 interface activitySettingsInterface {
@@ -29,6 +30,8 @@ interface userInfoInterface {
   photo?: string;
   status: string;
   bio: string;
+  id: string;
+  isAdmin?: boolean;
 }
 
 interface updatePrivacyInterface {
diff --git a/app/src/utils/helpers.ts b/app/src/utils/helpers.ts
index e69de29b..98606e03 100644
--- a/app/src/utils/helpers.ts
+++ b/app/src/utils/helpers.ts
@@ -0,0 +1,80 @@
+function getElapsedTime(timestamp: string): string {
+  const now = new Date().getTime();
+  const referenceTime = new Date(timestamp).getTime();
+  const elapsedMs = now - referenceTime;
+
+  const seconds = Math.floor(elapsedMs / 1000);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+  const weeks = Math.floor(days / 7);
+  const months = Math.floor(weeks / 4);
+  const years = Math.floor(months / 12);
+
+  if (years > 0) {
+    return `${years}y`;
+  } else if (months > 0) {
+    return `${months}mo`;
+  } else if (weeks > 0) {
+    return `${weeks}w`;
+  } else if (days > 0) {
+    return `${days}d`;
+  } else if (hours > 0) {
+    return `${hours}h`;
+  } else if (minutes > 0) {
+    return `${minutes}m`;
+  } else {
+    return `${Math.max(seconds, 1)}s`;
+  }
+}
+
+function getAvatarName(name: string | undefined): string {
+  const firstName = name?.split(" ")[0];
+  const lastName = name?.split(" ")[1];
+  return `${firstName?.charAt(0) || ""} ${lastName?.charAt(0) || ""}`;
+}
+
+function isValidDate(date: string): boolean {
+  return new Date(date).toString() !== "Invalid Date";
+}
+
+export type SearchFilter =
+  | "text"
+  | "image"
+  | "GIF"
+  | "sticker"
+  | "audio"
+  | "video"
+  | "file"
+  | "link";
+
+function getFileType(filename?: string, content?: string): SearchFilter {
+  if (content === undefined) return "text";
+
+  const urlPattern = /(https?:\/\/)/i;
+  if (urlPattern.test(content)) return "link";
+
+  if (!filename) return "text";
+
+  const ext = filename.toLowerCase().split(".").pop() || "";
+
+  const imageExts = ["jpg", "jpeg", "png", "webp", "svg", "bmp"];
+  if (imageExts.includes(ext)) return "image";
+
+  if (ext === "gif") return "GIF";
+
+  const stickerExts = ["webp", "apng"];
+  if (stickerExts.includes(ext)) return "sticker";
+
+  const audioExts = ["mp3", "wav", "ogg", "m4a", "aac", "webm"];
+  if (audioExts.includes(ext)) return "audio";
+
+  const videoExts = ["mp4", "mov", "avi", "mkv"];
+  if (videoExts.includes(ext)) return "video";
+
+  if (ext) return "file";
+
+  return "text";
+}
+
+export { getElapsedTime, getAvatarName, isValidDate, getFileType };
diff --git a/app/src/utils/renderWithHighlight.tsx b/app/src/utils/renderWithHighlight.tsx
new file mode 100644
index 00000000..4c4a2d78
--- /dev/null
+++ b/app/src/utils/renderWithHighlight.tsx
@@ -0,0 +1,42 @@
+import styled from "styled-components";
+import RenderWithMention from "./renderWithMentions";
+
+const HighlightedText = styled.span<{ $highlight?: boolean }>`
+  background-color: ${(props) => (props.$highlight ? "yellow" : "transparent")};
+  color: ${(props) => (props.$highlight ? "black" : "inherit")};
+`;
+
+function RenderWithHighlight(
+  content: string,
+  searchTerm?: string,
+  searchResults?: Array<{ messageId: string; highlightIndex: number }>,
+  id?: string
+) {
+  if (!searchTerm) {
+    return RenderWithMention(content, id!);
+  }
+
+  const result = searchResults?.find((result) => result.messageId === id);
+
+  if (!result) {
+    return RenderWithMention(content, id!);
+  }
+
+  const before = content.toString().slice(0, result.highlightIndex);
+  const highlighted = content
+    .toString()
+    .slice(result.highlightIndex, result.highlightIndex + searchTerm.length);
+  const after = content
+    .toString()
+    .slice(result.highlightIndex + searchTerm.length);
+
+  return (
+    <span>
+      {before}
+      <HighlightedText $highlight>{highlighted}</HighlightedText>
+      {after}
+    </span>
+  );
+}
+
+export default RenderWithHighlight;
diff --git a/app/src/utils/renderWithMentions.tsx b/app/src/utils/renderWithMentions.tsx
new file mode 100644
index 00000000..5c749cc2
--- /dev/null
+++ b/app/src/utils/renderWithMentions.tsx
@@ -0,0 +1,47 @@
+import { setIsMention } from "@state/messages/chats";
+import { useDispatch } from "react-redux";
+import { useParams } from "react-router-dom";
+import styled from "styled-components";
+
+const HighlightedMention = styled.span`
+  font-weight: bolder;
+  cursor: pointer;
+`;
+
+function RenderWithMention(content: string, messageId: string) {
+  const mentionRegex = /@\[[^\]]+\]\(([^)]+)\)/g;
+  const { chatId } = useParams<{ chatId: string }>();
+  const dispatch = useDispatch();
+  const parts = [];
+  let lastIndex = 0;
+  let match;
+
+  let hasMention = false;
+  while (content && (match = mentionRegex.exec(content)) !== null) {
+    hasMention = true;
+
+    if (match.index > lastIndex) {
+      parts.push(content.slice(lastIndex, match.index));
+    }
+
+    parts.push(
+      <HighlightedMention color="green" key={match[1]}>
+        @{match[1]}
+      </HighlightedMention>
+    );
+
+    lastIndex = mentionRegex.lastIndex;
+  }
+
+  if (hasMention) {
+    dispatch(setIsMention({ chatId: chatId!, isMention: true, messageId }));
+  }
+
+  if (content && lastIndex < content.length) {
+    parts.push(content.slice(lastIndex));
+  }
+
+  return <>{parts}</>;
+}
+
+export default RenderWithMention;
diff --git a/app/src/utils/socket.ts b/app/src/utils/socket.ts
deleted file mode 100644
index 34bfd0ca..00000000
--- a/app/src/utils/socket.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { io } from "socket.io-client";
-
-const socket = io(`${import.meta.env.VITE_SOCKET_BACKEND_API}`); //for testing
-
-export default socket;
diff --git a/app/src/utils/socket.tsx b/app/src/utils/socket.tsx
new file mode 100644
index 00000000..b5250a09
--- /dev/null
+++ b/app/src/utils/socket.tsx
@@ -0,0 +1,46 @@
+import { useEffect, useRef } from "react";
+import { io, Socket } from "socket.io-client";
+import { useUser } from "@features/authentication/login/hooks/useUser";
+import { DefaultEventsMap } from "@socket.io/component-emitter";
+
+function initializeSocket(
+  userId: string,
+  sessionId: string | null
+): Socket<DefaultEventsMap, DefaultEventsMap> {
+  const socket = io(`${import.meta.env.VITE_SOCKET_BACKEND_API}`, {
+    query: {
+      userId
+    },
+    auth: {
+      sessionId
+    }
+  });
+
+  console.log("Socket initialized");
+
+  return socket;
+}
+
+function useSocket() {
+  const { user, isPending } = useUser();
+  const socketRef = useRef<Socket<DefaultEventsMap, DefaultEventsMap> | null>(
+    null
+  );
+
+  useEffect(() => {
+    if (!isPending && user && !socketRef.current) {
+      const sessionId = localStorage.getItem("sessionId");
+      socketRef.current = initializeSocket(user._id, sessionId);
+
+      return () => {
+        ("Disconnecting socket");
+        socketRef.current?.disconnect();
+        socketRef.current = null;
+      };
+    }
+  }, [user, isPending]);
+
+  return socketRef.current;
+}
+
+export { useSocket };
diff --git a/app/src/utils/static-analysis-script.js b/app/src/utils/static-analysis-script.js
new file mode 100644
index 00000000..0343bc1b
--- /dev/null
+++ b/app/src/utils/static-analysis-script.js
@@ -0,0 +1,36 @@
+import { ESLint } from "eslint";
+import fs from "fs";
+
+async function generateStaticAnalysisReport() {
+  const eslint = new ESLint();
+
+  const results = await eslint.lintFiles(["src/**/*.{js,jsx,ts,tsx}"]);
+
+  const report = {
+    totalFiles: results.length,
+    errorCount: results.reduce((sum, result) => sum + result.errorCount, 0),
+    warningCount: results.reduce((sum, result) => sum + result.warningCount, 0),
+    fixableErrorCount: results.reduce(
+      (sum, result) => sum + result.fixableErrorCount,
+      0,
+    ),
+    fixableWarningCount: results.reduce(
+      (sum, result) => sum + result.fixableWarningCount,
+      0,
+    ),
+    details: results.map((result) => ({
+      filePath: result.filePath,
+      errors: result.messages.filter((m) => m.severity === 2),
+      warnings: result.messages.filter((m) => m.severity === 1),
+    })),
+  };
+
+  fs.writeFileSync(
+    "static-analysis-report.json",
+    JSON.stringify(report, null, 2),
+  );
+
+  console.log("Static Analysis Report Generated");
+}
+
+generateStaticAnalysisReport();
diff --git a/app/static-analysis-report.example.json b/app/static-analysis-report.example.json
new file mode 100644
index 00000000..2a512c41
--- /dev/null
+++ b/app/static-analysis-report.example.json
@@ -0,0 +1,5225 @@
+{
+  "totalFiles": 235,
+  "errorCount": 189,
+  "warningCount": 9,
+  "fixableErrorCount": 146,
+  "fixableWarningCount": 0,
+  "details": [
+    {
+      "filePath": "/app/src/App.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/AppLayout.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/Avatar.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/BackArrow.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/Button.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/CircleIcon.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/CloseButton.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/CollapsedList.tsx",
+      "errors": [
+        {
+          "ruleId": "@typescript-eslint/no-explicit-any",
+          "severity": 2,
+          "message": "Unexpected any. Specify a different type.",
+          "line": 5,
+          "column": 18,
+          "nodeType": "TSAnyKeyword",
+          "messageId": "unexpectedAny",
+          "endLine": 5,
+          "endColumn": 21,
+          "suggestions": [
+            {
+              "messageId": "suggestUnknown",
+              "fix": {
+                "range": [
+                  111,
+                  114
+                ],
+                "text": "unknown"
+              },
+              "desc": "Use `unknown` instead, this will force you to explicitly, and safely assert the type is correct."
+            },
+            {
+              "messageId": "suggestNever",
+              "fix": {
+                "range": [
+                  111,
+                  114
+                ],
+                "text": "never"
+              },
+              "desc": "Use `never` instead, this is useful when instantiating generic type parameters that you don't need to know the type of."
+            }
+          ]
+        },
+        {
+          "ruleId": "@typescript-eslint/no-explicit-any",
+          "severity": 2,
+          "message": "Unexpected any. Specify a different type.",
+          "line": 6,
+          "column": 9,
+          "nodeType": "TSAnyKeyword",
+          "messageId": "unexpectedAny",
+          "endLine": 6,
+          "endColumn": 12,
+          "suggestions": [
+            {
+              "messageId": "suggestUnknown",
+              "fix": {
+                "range": [
+                  140,
+                  143
+                ],
+                "text": "unknown"
+              },
+              "desc": "Use `unknown` instead, this will force you to explicitly, and safely assert the type is correct."
+            },
+            {
+              "messageId": "suggestNever",
+              "fix": {
+                "range": [
+                  140,
+                  143
+                ],
+                "text": "never"
+              },
+              "desc": "Use `never` instead, this is useful when instantiating generic type parameters that you don't need to know the type of."
+            }
+          ]
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/ExpandingTextArea.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/Heading.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/Icon.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/ImageEditor.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/Main.tsx",
+      "errors": [],
+      "warnings": [
+        {
+          "ruleId": "react-hooks/exhaustive-deps",
+          "severity": 1,
+          "message": "React Hook useEffect has a missing dependency: 'isPending'. Either include it or remove the dependency array.",
+          "line": 50,
+          "column": 6,
+          "nodeType": "ArrayExpression",
+          "endLine": 50,
+          "endColumn": 22,
+          "suggestions": [
+            {
+              "desc": "Update the dependencies array to be: [dispatch, isPending, user]",
+              "fix": {
+                "range": [
+                  1169,
+                  1185
+                ],
+                "text": "[dispatch, isPending, user]"
+              }
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "filePath": "/app/src/components/Modal.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/Popup.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 41,
+          "column": 18,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 41,
+          "endColumn": 18,
+          "fix": {
+            "range": [
+              901,
+              901
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/SpinnerMini.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/StyledLink.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/inputs/float-label-input/FloatingLabelInput.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/inputs/float-label-input/FloatingLabelInputDemo.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 87,
+          "column": 98,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 87,
+          "endColumn": 98,
+          "fix": {
+            "range": [
+              1974,
+              1974
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/inputs/float-label-input/FloatingLablelInput.test.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/inputs/input-field/CodeInputField.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 35,
+          "column": 18,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 35,
+          "endColumn": 18,
+          "fix": {
+            "range": [
+              749,
+              749
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/inputs/input-field/InputField.test.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 24,
+          "column": 9,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 24,
+          "endColumn": 9,
+          "fix": {
+            "range": [
+              595,
+              595
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 40,
+          "column": 9,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 40,
+          "endColumn": 9,
+          "fix": {
+            "range": [
+              977,
+              977
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 53,
+          "column": 9,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 53,
+          "endColumn": 9,
+          "fix": {
+            "range": [
+              1246,
+              1246
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 66,
+          "column": 9,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 66,
+          "endColumn": 9,
+          "fix": {
+            "range": [
+              1524,
+              1524
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 82,
+          "column": 9,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 82,
+          "endColumn": 9,
+          "fix": {
+            "range": [
+              1897,
+              1897
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/inputs/input-field/InputField.tsx",
+      "errors": [
+        {
+          "ruleId": "@typescript-eslint/no-explicit-any",
+          "severity": 2,
+          "message": "Unexpected any. Specify a different type.",
+          "line": 68,
+          "column": 13,
+          "nodeType": "TSAnyKeyword",
+          "messageId": "unexpectedAny",
+          "endLine": 68,
+          "endColumn": 16,
+          "suggestions": [
+            {
+              "messageId": "suggestUnknown",
+              "fix": {
+                "range": [
+                  1013,
+                  1016
+                ],
+                "text": "unknown"
+              },
+              "desc": "Use `unknown` instead, this will force you to explicitly, and safely assert the type is correct."
+            },
+            {
+              "messageId": "suggestNever",
+              "fix": {
+                "range": [
+                  1013,
+                  1016
+                ],
+                "text": "never"
+              },
+              "desc": "Use `never` instead, this is useful when instantiating generic type parameters that you don't need to know the type of."
+            }
+          ]
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/inputs/input-field/PasswordInputField.tsx",
+      "errors": [
+        {
+          "ruleId": "@typescript-eslint/no-explicit-any",
+          "severity": 2,
+          "message": "Unexpected any. Specify a different type.",
+          "line": 75,
+          "column": 13,
+          "nodeType": "TSAnyKeyword",
+          "messageId": "unexpectedAny",
+          "endLine": 75,
+          "endColumn": 16,
+          "suggestions": [
+            {
+              "messageId": "suggestUnknown",
+              "fix": {
+                "range": [
+                  1291,
+                  1294
+                ],
+                "text": "unknown"
+              },
+              "desc": "Use `unknown` instead, this will force you to explicitly, and safely assert the type is correct."
+            },
+            {
+              "messageId": "suggestNever",
+              "fix": {
+                "range": [
+                  1291,
+                  1294
+                ],
+                "text": "never"
+              },
+              "desc": "Use `never` instead, this is useful when instantiating generic type parameters that you don't need to know the type of."
+            }
+          ]
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/inputs/input-field/TelephoneInputField.tsx",
+      "errors": [
+        {
+          "ruleId": "@typescript-eslint/no-explicit-any",
+          "severity": 2,
+          "message": "Unexpected any. Specify a different type.",
+          "line": 9,
+          "column": 12,
+          "nodeType": "TSAnyKeyword",
+          "messageId": "unexpectedAny",
+          "endLine": 9,
+          "endColumn": 15,
+          "suggestions": [
+            {
+              "messageId": "suggestUnknown",
+              "fix": {
+                "range": [
+                  276,
+                  279
+                ],
+                "text": "unknown"
+              },
+              "desc": "Use `unknown` instead, this will force you to explicitly, and safely assert the type is correct."
+            },
+            {
+              "messageId": "suggestNever",
+              "fix": {
+                "range": [
+                  276,
+                  279
+                ],
+                "text": "never"
+              },
+              "desc": "Use `never` instead, this is useful when instantiating generic type parameters that you don't need to know the type of."
+            }
+          ]
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/inputs/password-input-field/PasswordInputField.tsx",
+      "errors": [
+        {
+          "ruleId": "@typescript-eslint/no-explicit-any",
+          "severity": 2,
+          "message": "Unexpected any. Specify a different type.",
+          "line": 75,
+          "column": 13,
+          "nodeType": "TSAnyKeyword",
+          "messageId": "unexpectedAny",
+          "endLine": 75,
+          "endColumn": 16,
+          "suggestions": [
+            {
+              "messageId": "suggestUnknown",
+              "fix": {
+                "range": [
+                  1283,
+                  1286
+                ],
+                "text": "unknown"
+              },
+              "desc": "Use `unknown` instead, this will force you to explicitly, and safely assert the type is correct."
+            },
+            {
+              "messageId": "suggestNever",
+              "fix": {
+                "range": [
+                  1283,
+                  1286
+                ],
+                "text": "never"
+              },
+              "desc": "Use `never` instead, this is useful when instantiating generic type parameters that you don't need to know the type of."
+            }
+          ]
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/inputs/radio-input/RadioInput.test.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 66,
+          "column": 70,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 66,
+          "endColumn": 70,
+          "fix": {
+            "range": [
+              2178,
+              2178
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 69,
+          "column": 70,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 69,
+          "endColumn": 70,
+          "fix": {
+            "range": [
+              2278,
+              2278
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 72,
+          "column": 70,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 72,
+          "endColumn": 70,
+          "fix": {
+            "range": [
+              2379,
+              2379
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 85,
+          "column": 70,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 85,
+          "endColumn": 70,
+          "fix": {
+            "range": [
+              2689,
+              2689
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 92,
+          "column": 70,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 92,
+          "endColumn": 70,
+          "fix": {
+            "range": [
+              2899,
+              2899
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 95,
+          "column": 70,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 95,
+          "endColumn": 70,
+          "fix": {
+            "range": [
+              3000,
+              3000
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 98,
+          "column": 70,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 98,
+          "endColumn": 70,
+          "fix": {
+            "range": [
+              3101,
+              3101
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 111,
+          "column": 70,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 111,
+          "endColumn": 70,
+          "fix": {
+            "range": [
+              3412,
+              3412
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 114,
+          "column": 70,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 114,
+          "endColumn": 70,
+          "fix": {
+            "range": [
+              3513,
+              3513
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 117,
+          "column": 70,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 117,
+          "endColumn": 70,
+          "fix": {
+            "range": [
+              3614,
+              3614
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/inputs/radio-input/RadioInput.tsx",
+      "errors": [
+        {
+          "ruleId": "@typescript-eslint/no-explicit-any",
+          "severity": 2,
+          "message": "Unexpected any. Specify a different type.",
+          "line": 101,
+          "column": 40,
+          "nodeType": "TSAnyKeyword",
+          "messageId": "unexpectedAny",
+          "endLine": 101,
+          "endColumn": 43,
+          "suggestions": [
+            {
+              "messageId": "suggestUnknown",
+              "fix": {
+                "range": [
+                  2353,
+                  2356
+                ],
+                "text": "unknown"
+              },
+              "desc": "Use `unknown` instead, this will force you to explicitly, and safely assert the type is correct."
+            },
+            {
+              "messageId": "suggestNever",
+              "fix": {
+                "range": [
+                  2353,
+                  2356
+                ],
+                "text": "never"
+              },
+              "desc": "Use `never` instead, this is useful when instantiating generic type parameters that you don't need to know the type of."
+            }
+          ]
+        },
+        {
+          "ruleId": "prefer-const",
+          "severity": 2,
+          "message": "'selectedValue' is never reassigned. Use 'const' instead.",
+          "line": 106,
+          "column": 7,
+          "nodeType": "Identifier",
+          "messageId": "useConst",
+          "endLine": 106,
+          "endColumn": 20,
+          "fix": {
+            "range": [
+              2434,
+              2469
+            ],
+            "text": "const selectedValue = watch(data.id);"
+          }
+        }
+      ],
+      "warnings": [
+        {
+          "ruleId": "react-hooks/exhaustive-deps",
+          "severity": 1,
+          "message": "React Hook useEffect has missing dependencies: 'data.id' and 'handleSumbit'. Either include them or remove the dependency array.",
+          "line": 111,
+          "column": 6,
+          "nodeType": "ArrayExpression",
+          "endLine": 111,
+          "endColumn": 21,
+          "suggestions": [
+            {
+              "desc": "Update the dependencies array to be: [data.id, handleSumbit, selectedValue]",
+              "fix": {
+                "range": [
+                  2583,
+                  2598
+                ],
+                "text": "[data.id, handleSumbit, selectedValue]"
+              }
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "filePath": "/app/src/components/protected-route/ProtectedRoute.test.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 23,
+          "column": 24,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 23,
+          "endColumn": 24,
+          "fix": {
+            "range": [
+              640,
+              640
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 36,
+          "column": 24,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 36,
+          "endColumn": 24,
+          "fix": {
+            "range": [
+              985,
+              985
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/protected-route/ProtectedRoute.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/side-bar/ContactsSideBar.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/side-bar/ContactsSideBarHeader.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/side-bar/SideBar.test.tsx",
+      "errors": [
+        {
+          "ruleId": "@typescript-eslint/no-require-imports",
+          "severity": 2,
+          "message": "A `require()` style import is forbidden.",
+          "line": 26,
+          "column": 30,
+          "nodeType": "CallExpression",
+          "messageId": "noRequireImports",
+          "endLine": 26,
+          "endColumn": 62
+        },
+        {
+          "ruleId": "@typescript-eslint/no-require-imports",
+          "severity": 2,
+          "message": "A `require()` style import is forbidden.",
+          "line": 27,
+          "column": 30,
+          "nodeType": "CallExpression",
+          "messageId": "noRequireImports",
+          "endLine": 27,
+          "endColumn": 62
+        },
+        {
+          "ruleId": "@typescript-eslint/no-require-imports",
+          "severity": 2,
+          "message": "A `require()` style import is forbidden.",
+          "line": 29,
+          "column": 3,
+          "nodeType": "CallExpression",
+          "messageId": "noRequireImports",
+          "endLine": 29,
+          "endColumn": 61
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/side-bar/SideBar.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/side-bar/chats/ChatsSideBar.tsx",
+      "errors": [
+        {
+          "ruleId": "@typescript-eslint/no-unused-vars",
+          "severity": 2,
+          "message": "'StoryListContainer' is defined but never used.",
+          "line": 5,
+          "column": 8,
+          "nodeType": null,
+          "messageId": "unusedVar",
+          "endLine": 5,
+          "endColumn": 26
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/side-bar/chats/ChatsSideBarHeader.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/side-bar/chats/SearchBar.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/side-bar/chats/SideBarMenuItem.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/side-bar/chats/SideBarToolsButton.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Delete `⏎`",
+          "line": 39,
+          "column": 1,
+          "nodeType": null,
+          "messageId": "delete",
+          "endLine": 40,
+          "endColumn": 1,
+          "fix": {
+            "range": [
+              1265,
+              1266
+            ],
+            "text": ""
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 70,
+          "column": 19,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 70,
+          "endColumn": 19,
+          "fix": {
+            "range": [
+              2152,
+              2152
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 83,
+          "column": 19,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 83,
+          "endColumn": 19,
+          "fix": {
+            "range": [
+              2524,
+              2524
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/side-bar/chats/theme-toggle/ThemeToggle.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/side-bar/chats/theme-toggle/ToggleMode.test.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 11,
+          "column": 29,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 11,
+          "endColumn": 29,
+          "fix": {
+            "range": [
+              450,
+              450
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 22,
+          "column": 29,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 22,
+          "endColumn": 29,
+          "fix": {
+            "range": [
+              772,
+              772
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/side-bar/settings/OptionsList.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 35,
+          "column": 16,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 35,
+          "endColumn": 16,
+          "fix": {
+            "range": [
+              824,
+              824
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/side-bar/settings/ProfilePicture.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/side-bar/settings/SettingsSideBarBody.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/side-bar/settings/SettingsSideBarHeader.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 55,
+          "column": 77,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 55,
+          "endColumn": 77,
+          "fix": {
+            "range": [
+              1704,
+              1704
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/side-bar/settings/SettingsUpdate.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/side-bar/settings/side-bar-row/SideBarRow.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 98,
+          "column": 30,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 98,
+          "endColumn": 30,
+          "fix": {
+            "range": [
+              2594,
+              2594
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 106,
+          "column": 28,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 106,
+          "endColumn": 28,
+          "fix": {
+            "range": [
+              2879,
+              2879
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 114,
+          "column": 28,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 114,
+          "endColumn": 28,
+          "fix": {
+            "range": [
+              3173,
+              3173
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": [
+        {
+          "ruleId": "react-hooks/exhaustive-deps",
+          "severity": 1,
+          "message": "React Hook useEffect contains a call to 'setKey'. Without a list of dependencies, this can lead to an infinite chain of updates. To fix this, pass [status, type, userData.privacySettings, userData.activitySettings, userData.permissionSettings, key, title] as a second argument to the useEffect Hook.",
+          "line": 87,
+          "column": 3,
+          "nodeType": "Identifier",
+          "endLine": 87,
+          "endColumn": 12,
+          "suggestions": [
+            {
+              "desc": "Add dependencies array: [status, type, userData.privacySettings, userData.activitySettings, userData.permissionSettings, key, title]",
+              "fix": {
+                "range": [
+                  3387,
+                  3387
+                ],
+                "text": ", [status, type, userData.privacySettings, userData.activitySettings, userData.permissionSettings, key, title]"
+              }
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "filePath": "/app/src/components/side-bar/settings/side-bar-row/getDataFactory.ts",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 20,
+          "column": 16,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 20,
+          "endColumn": 16,
+          "fix": {
+            "range": [
+              486,
+              486
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 40,
+          "column": 33,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 40,
+          "endColumn": 33,
+          "fix": {
+            "range": [
+              1058,
+              1058
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "@typescript-eslint/no-explicit-any",
+          "severity": 2,
+          "message": "Unexpected any. Specify a different type.",
+          "line": 46,
+          "column": 17,
+          "nodeType": "TSAnyKeyword",
+          "messageId": "unexpectedAny",
+          "endLine": 46,
+          "endColumn": 20,
+          "suggestions": [
+            {
+              "messageId": "suggestUnknown",
+              "fix": {
+                "range": [
+                  1182,
+                  1185
+                ],
+                "text": "unknown"
+              },
+              "desc": "Use `unknown` instead, this will force you to explicitly, and safely assert the type is correct."
+            },
+            {
+              "messageId": "suggestNever",
+              "fix": {
+                "range": [
+                  1182,
+                  1185
+                ],
+                "text": "never"
+              },
+              "desc": "Use `never` instead, this is useful when instantiating generic type parameters that you don't need to know the type of."
+            }
+          ]
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 81,
+          "column": 33,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 81,
+          "endColumn": 33,
+          "fix": {
+            "range": [
+              2075,
+              2075
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "@typescript-eslint/no-explicit-any",
+          "severity": 2,
+          "message": "Unexpected any. Specify a different type.",
+          "line": 87,
+          "column": 17,
+          "nodeType": "TSAnyKeyword",
+          "messageId": "unexpectedAny",
+          "endLine": 87,
+          "endColumn": 20,
+          "suggestions": [
+            {
+              "messageId": "suggestUnknown",
+              "fix": {
+                "range": [
+                  2199,
+                  2202
+                ],
+                "text": "unknown"
+              },
+              "desc": "Use `unknown` instead, this will force you to explicitly, and safely assert the type is correct."
+            },
+            {
+              "messageId": "suggestNever",
+              "fix": {
+                "range": [
+                  2199,
+                  2202
+                ],
+                "text": "never"
+              },
+              "desc": "Use `never` instead, this is useful when instantiating generic type parameters that you don't need to know the type of."
+            }
+          ]
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 122,
+          "column": 33,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 122,
+          "endColumn": 33,
+          "fix": {
+            "range": [
+              3100,
+              3100
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "@typescript-eslint/no-explicit-any",
+          "severity": 2,
+          "message": "Unexpected any. Specify a different type.",
+          "line": 128,
+          "column": 17,
+          "nodeType": "TSAnyKeyword",
+          "messageId": "unexpectedAny",
+          "endLine": 128,
+          "endColumn": 20,
+          "suggestions": [
+            {
+              "messageId": "suggestUnknown",
+              "fix": {
+                "range": [
+                  3224,
+                  3227
+                ],
+                "text": "unknown"
+              },
+              "desc": "Use `unknown` instead, this will force you to explicitly, and safely assert the type is correct."
+            },
+            {
+              "messageId": "suggestNever",
+              "fix": {
+                "range": [
+                  3224,
+                  3227
+                ],
+                "text": "never"
+              },
+              "desc": "Use `never` instead, this is useful when instantiating generic type parameters that you don't need to know the type of."
+            }
+          ]
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/side-bar/settings/side-bar-row/sideBarRow.test.tsx",
+      "errors": [
+        {
+          "ruleId": "@typescript-eslint/no-require-imports",
+          "severity": 2,
+          "message": "A `require()` style import is forbidden.",
+          "line": 18,
+          "column": 30,
+          "nodeType": "CallExpression",
+          "messageId": "noRequireImports",
+          "endLine": 18,
+          "endColumn": 62
+        },
+        {
+          "ruleId": "@typescript-eslint/no-require-imports",
+          "severity": 2,
+          "message": "A `require()` style import is forbidden.",
+          "line": 19,
+          "column": 30,
+          "nodeType": "CallExpression",
+          "messageId": "noRequireImports",
+          "endLine": 19,
+          "endColumn": 62
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 88,
+          "column": 9,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 88,
+          "endColumn": 9,
+          "fix": {
+            "range": [
+              2667,
+              2667
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 133,
+          "column": 9,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 133,
+          "endColumn": 9,
+          "fix": {
+            "range": [
+              3938,
+              3938
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/constants.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/data/__mocks__/data/icons.js",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/data/icons.tsx",
+      "errors": [
+        {
+          "ruleId": "@typescript-eslint/no-unused-vars",
+          "severity": 2,
+          "message": "'icons' is defined but only used as a type.",
+          "line": 44,
+          "column": 6,
+          "nodeType": null,
+          "messageId": "usedOnlyAsType",
+          "endLine": 44,
+          "endColumn": 11
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/data/sideBar.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/login/ForgotPasswordModal.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/login/LoginForm/LoginForm.test.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 24,
+          "column": 75,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 24,
+          "endColumn": 75,
+          "fix": {
+            "range": [
+              765,
+              765
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 51,
+          "column": 27,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 51,
+          "endColumn": 27,
+          "fix": {
+            "range": [
+              1707,
+              1707
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 61,
+          "column": 8,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 61,
+          "endColumn": 8,
+          "fix": {
+            "range": [
+              1992,
+              1992
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 112,
+          "column": 36,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 112,
+          "endColumn": 36,
+          "fix": {
+            "range": [
+              3515,
+              3515
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 141,
+          "column": 11,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 141,
+          "endColumn": 11,
+          "fix": {
+            "range": [
+              4276,
+              4276
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 144,
+          "column": 71,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 144,
+          "endColumn": 71,
+          "fix": {
+            "range": [
+              4370,
+              4370
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/login/LoginForm/LoginForm.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/login/LoginSection.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/login/hooks/useAuthCheck.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/login/hooks/useAuthStatus.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/login/hooks/useForgotPassword.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/login/hooks/useLogin.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/login/hooks/useUser.ts",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Delete `··`",
+          "line": 9,
+          "column": 1,
+          "nodeType": null,
+          "messageId": "delete",
+          "endLine": 9,
+          "endColumn": 3,
+          "fix": {
+            "range": [
+              247,
+              249
+            ],
+            "text": ""
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/login/schema/login.ts",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Replace `.string().email(\"Please·enter·a·valid·email\")` with `⏎····.string()⏎····.email(\"Please·enter·a·valid·email\")⏎····`",
+          "line": 4,
+          "column": 13,
+          "nodeType": null,
+          "messageId": "replace",
+          "endLine": 4,
+          "endColumn": 58,
+          "fix": {
+            "range": [
+              76,
+              121
+            ],
+            "text": "\n    .string()\n    .email(\"Please enter a valid email\")\n    "
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/login/services/apiForgotPassword.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/login/services/apiLogin.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/login/services/checkAuth.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/logout/hooks/useLogout.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/logout/services/apiLogout.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/oauth/LoginWith.test.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 22,
+          "column": 31,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 22,
+          "endColumn": 31,
+          "fix": {
+            "range": [
+              737,
+              737
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/oauth/LoginWith.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/oauth/OauthOptions.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/oauth/hooks/useOauth.ts",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `;`",
+          "line": 5,
+          "column": 36,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 5,
+          "endColumn": 36,
+          "fix": {
+            "range": [
+              149,
+              149
+            ],
+            "text": ";"
+          }
+        }
+      ],
+      "warnings": [
+        {
+          "ruleId": "react-hooks/exhaustive-deps",
+          "severity": 1,
+          "message": "React Hook useEffect has a missing dependency: 'login'. Either include it or remove the dependency array.",
+          "line": 14,
+          "column": 6,
+          "nodeType": "ArrayExpression",
+          "endLine": 14,
+          "endColumn": 8,
+          "suggestions": [
+            {
+              "desc": "Update the dependencies array to be: [login]",
+              "fix": {
+                "range": [
+                  324,
+                  326
+                ],
+                "text": "[login]"
+              }
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "filePath": "/app/src/features/authentication/oauth/hooks/useOauthLogin.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/oauth/services/apiOauth.ts",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Delete `·`",
+          "line": 4,
+          "column": 3,
+          "nodeType": null,
+          "messageId": "delete",
+          "endLine": 4,
+          "endColumn": 4,
+          "fix": {
+            "range": [
+              82,
+              83
+            ],
+            "text": ""
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Delete `⏎`",
+          "line": 10,
+          "column": 1,
+          "nodeType": null,
+          "messageId": "delete",
+          "endLine": 11,
+          "endColumn": 1,
+          "fix": {
+            "range": [
+              267,
+              268
+            ],
+            "text": ""
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/oauth/services/apiUser.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/reset-password/ResetPasswordModal.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/reset-password/hooks/useResetPassword.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/reset-password/schema/schema.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/reset-password/services/apiResetPassword.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/signup/ConfirmationEmailModal.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 135,
+          "column": 8,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 135,
+          "endColumn": 8,
+          "fix": {
+            "range": [
+              3262,
+              3262
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/signup/SignupForm.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/signup/SignupSection.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/signup/hooks/useSendConfirmationEmail.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/signup/hooks/useSignup.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/signup/hooks/useVerifyEmail.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/signup/schema/signup.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/signup/services/apiConfirmCode.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/signup/services/apiSignup.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/signup/services/apiVerfiyCode.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/chats/Avatar.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/chats/ChatBody.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/chats/ChatBox.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `;`",
+          "line": 14,
+          "column": 2,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 14,
+          "endColumn": 2,
+          "fix": {
+            "range": [
+              317,
+              317
+            ],
+            "text": ";"
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/chats/ChatInput.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 106,
+          "column": 54,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 106,
+          "endColumn": 54,
+          "fix": {
+            "range": [
+              2646,
+              2646
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/chats/ChatItem.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/chats/ChatsList.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/chats/Message.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 141,
+          "column": 28,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 141,
+          "endColumn": 28,
+          "fix": {
+            "range": [
+              3502,
+              3502
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 156,
+          "column": 42,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 156,
+          "endColumn": 42,
+          "fix": {
+            "range": [
+              3998,
+              3998
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/chats/MessageBox.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 55,
+          "column": 13,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 55,
+          "endColumn": 13,
+          "fix": {
+            "range": [
+              1075,
+              1075
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 72,
+          "column": 20,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 72,
+          "endColumn": 20,
+          "fix": {
+            "range": [
+              1439,
+              1439
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prefer-const",
+          "severity": 2,
+          "message": "'id' is never reassigned. Use 'const' instead.",
+          "line": 78,
+          "column": 7,
+          "nodeType": "Identifier",
+          "messageId": "useConst",
+          "endLine": 78,
+          "endColumn": 9,
+          "fix": {
+            "range": [
+              1596,
+              1655
+            ],
+            "text": "const id = useAppSelector((state) => state.user.userInfo.id);"
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 91,
+          "column": 46,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 91,
+          "endColumn": 46,
+          "fix": {
+            "range": [
+              2015,
+              2015
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/chats/MessageOptionList.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/chats/ReplyWrapper.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Replace `{getIcon(\"Close\")}` with `⏎········{getIcon(\"Close\")}⏎······`",
+          "line": 42,
+          "column": 62,
+          "nodeType": null,
+          "messageId": "replace",
+          "endLine": 42,
+          "endColumn": 80,
+          "fix": {
+            "range": [
+              1031,
+              1049
+            ],
+            "text": "\n        {getIcon(\"Close\")}\n      "
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/chats/SendButton.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Replace `⏎···⏎······` with `····`",
+          "line": 10,
+          "column": 1,
+          "nodeType": null,
+          "messageId": "replace",
+          "endLine": 12,
+          "endColumn": 7,
+          "fix": {
+            "range": [
+              194,
+              205
+            ],
+            "text": "    "
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Delete `··`",
+          "line": 13,
+          "column": 1,
+          "nodeType": null,
+          "messageId": "delete",
+          "endLine": 13,
+          "endColumn": 3,
+          "fix": {
+            "range": [
+              217,
+              219
+            ],
+            "text": ""
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Delete `··`",
+          "line": 14,
+          "column": 1,
+          "nodeType": null,
+          "messageId": "delete",
+          "endLine": 14,
+          "endColumn": 3,
+          "fix": {
+            "range": [
+              243,
+              245
+            ],
+            "text": ""
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Delete `··`",
+          "line": 15,
+          "column": 7,
+          "nodeType": null,
+          "messageId": "delete",
+          "endLine": 15,
+          "endColumn": 9,
+          "fix": {
+            "range": [
+              283,
+              285
+            ],
+            "text": ""
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Delete `··`",
+          "line": 16,
+          "column": 7,
+          "nodeType": null,
+          "messageId": "delete",
+          "endLine": 16,
+          "endColumn": 9,
+          "fix": {
+            "range": [
+              337,
+              339
+            ],
+            "text": ""
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Delete `··`",
+          "line": 17,
+          "column": 1,
+          "nodeType": null,
+          "messageId": "delete",
+          "endLine": 17,
+          "endColumn": 3,
+          "fix": {
+            "range": [
+              354,
+              356
+            ],
+            "text": ""
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Delete `··`",
+          "line": 18,
+          "column": 7,
+          "nodeType": null,
+          "messageId": "delete",
+          "endLine": 18,
+          "endColumn": 9,
+          "fix": {
+            "range": [
+              383,
+              385
+            ],
+            "text": ""
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Replace `··/>⏎` with `/>`",
+          "line": 19,
+          "column": 5,
+          "nodeType": null,
+          "messageId": "replace",
+          "endLine": 20,
+          "endColumn": 1,
+          "fix": {
+            "range": [
+              420,
+              425
+            ],
+            "text": "/>"
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/chats/StartNewChat.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/chats/Topbar.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/chats/emojies/EmojiPicker.tsx",
+      "errors": [
+        {
+          "ruleId": "@typescript-eslint/no-unused-vars",
+          "severity": 2,
+          "message": "'event' is defined but never used.",
+          "line": 57,
+          "column": 58,
+          "nodeType": null,
+          "messageId": "unusedVar",
+          "endLine": 57,
+          "endColumn": 63
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/chats/hooks/useChat.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/chats/hooks/useChats.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/chats/hooks/useHover.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/chats/hooks/useMessageSender.ts",
+      "errors": [
+        {
+          "ruleId": "@typescript-eslint/no-non-null-asserted-optional-chain",
+          "severity": 2,
+          "message": "Optional chain expressions can return undefined by design - using a non-null assertion is unsafe and wrong.",
+          "line": 14,
+          "column": 19,
+          "nodeType": "TSNonNullExpression",
+          "messageId": "noNonNullOptionalChain",
+          "endLine": 14,
+          "endColumn": 37,
+          "suggestions": [
+            {
+              "messageId": "suggestRemovingNonNull",
+              "fix": {
+                "range": [
+                  647,
+                  648
+                ],
+                "text": ""
+              },
+              "desc": "You should remove the non-null assertion."
+            }
+          ]
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/chats/hooks/useOptionListAction.ts",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 24,
+          "column": 51,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 24,
+          "endColumn": 51,
+          "fix": {
+            "range": [
+              631,
+              631
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/chats/hooks/useScrollToLastMsg.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/chats/media/FileDetailsBanner.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/chats/media/FilePreviewItem.tsx",
+      "errors": [
+        {
+          "ruleId": "@typescript-eslint/no-unused-vars",
+          "severity": 2,
+          "message": "'uploadedUrl' is assigned a value but never used.",
+          "line": 49,
+          "column": 17,
+          "nodeType": null,
+          "messageId": "unusedVar",
+          "endLine": 49,
+          "endColumn": 28
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/chats/media/FileViewer.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/chats/media/MediaUploadComponent.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/chats/media/hooks/useUploadMedia.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/chats/media/services/uploadfileHandler.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/chats/services/apiGetChats.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/devices/Devices.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/devices/components/SessionItem.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/devices/hooks/useGetAllSessions.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/devices/hooks/useGetCurrentSessions.ts",
+      "errors": [
+        {
+          "ruleId": "@typescript-eslint/no-unused-vars",
+          "severity": 2,
+          "message": "'GetAllSessions' is defined but never used.",
+          "line": 2,
+          "column": 10,
+          "nodeType": null,
+          "messageId": "unusedVar",
+          "endLine": 2,
+          "endColumn": 24
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/devices/hooks/useLogoutOtherSessions.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/devices/services/GetAllSessions.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/devices/services/GetCurrentSession.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/devices/services/LogoutOtherSessions.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/devices/types/sessions.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/forward/ForwardingInputBar.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 40,
+          "column": 47,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 40,
+          "endColumn": 47,
+          "fix": {
+            "range": [
+              930,
+              930
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/forward/ScrollableChats.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 60,
+          "column": 47,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 60,
+          "endColumn": 47,
+          "fix": {
+            "range": [
+              1514,
+              1514
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 67,
+          "column": 44,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 67,
+          "endColumn": 44,
+          "fix": {
+            "range": [
+              1777,
+              1777
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/forward/chatPopupItem.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/forward/checkBox.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/forward/hooks/useCheckBox.ts",
+      "errors": [],
+      "warnings": [
+        {
+          "ruleId": "react-hooks/exhaustive-deps",
+          "severity": 1,
+          "message": "React Hook useEffect has a missing dependency: 'isChecked'. Either include it or remove the dependency array. You can also do a functional update 'setIsChecked(i => ...)' if you only need 'isChecked' in the 'setIsChecked' call.",
+          "line": 12,
+          "column": 6,
+          "nodeType": "ArrayExpression",
+          "endLine": 12,
+          "endColumn": 20,
+          "suggestions": [
+            {
+              "desc": "Update the dependencies array to be: [isChecked, showCheckBox]",
+              "fix": {
+                "range": [
+                  495,
+                  509
+                ],
+                "text": "[isChecked, showCheckBox]"
+              }
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "filePath": "/app/src/features/pin-messages/components/PinnedMessageProgressBar.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/pin-messages/components/PinnedMessages.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/privacy-settings/AddToBlockMenuList.tsx",
+      "errors": [
+        {
+          "ruleId": "@typescript-eslint/no-explicit-any",
+          "severity": 2,
+          "message": "Unexpected any. Specify a different type.",
+          "line": 62,
+          "column": 50,
+          "nodeType": "TSAnyKeyword",
+          "messageId": "unexpectedAny",
+          "endLine": 62,
+          "endColumn": 53,
+          "suggestions": [
+            {
+              "messageId": "suggestUnknown",
+              "fix": {
+                "range": [
+                  1537,
+                  1540
+                ],
+                "text": "unknown"
+              },
+              "desc": "Use `unknown` instead, this will force you to explicitly, and safely assert the type is correct."
+            },
+            {
+              "messageId": "suggestNever",
+              "fix": {
+                "range": [
+                  1537,
+                  1540
+                ],
+                "text": "never"
+              },
+              "desc": "Use `never` instead, this is useful when instantiating generic type parameters that you don't need to know the type of."
+            }
+          ]
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 70,
+          "column": 20,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 70,
+          "endColumn": 20,
+          "fix": {
+            "range": [
+              1748,
+              1748
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/privacy-settings/BlockItem.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/privacy-settings/BlockList.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/privacy-settings/hooks/useBlock.ts",
+      "errors": [
+        {
+          "ruleId": "@typescript-eslint/no-unused-vars",
+          "severity": 2,
+          "message": "'QueryClient' is defined but never used.",
+          "line": 2,
+          "column": 3,
+          "nodeType": null,
+          "messageId": "unusedVar",
+          "endLine": 2,
+          "endColumn": 14
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/privacy-settings/hooks/useUpdatePrivacy.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/privacy-settings/service/blockUser.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/privacy-settings/service/changeSettings.ts",
+      "errors": [
+        {
+          "ruleId": "@typescript-eslint/no-duplicate-enum-values",
+          "severity": 2,
+          "message": "Duplicate enum member value invite-permissions.",
+          "line": 10,
+          "column": 3,
+          "nodeType": "TSEnumMember",
+          "messageId": "duplicateValue",
+          "endLine": 10,
+          "endColumn": 45
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/privacy-settings/service/getBlockList.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/privacy-settings/service/removeFromBlocks.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/profile-info/ProfileInfo.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/profile-info/components/ProfileItem.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/profile-settings/ProfilePictureSection.tsx",
+      "errors": [
+        {
+          "ruleId": "@typescript-eslint/no-unused-vars",
+          "severity": 2,
+          "message": "'setSelectedImage' is assigned a value but never used.",
+          "line": 75,
+          "column": 25,
+          "nodeType": null,
+          "messageId": "unusedVar",
+          "endLine": 75,
+          "endColumn": 41
+        },
+        {
+          "ruleId": "@typescript-eslint/no-unused-vars",
+          "severity": 2,
+          "message": "'setIsImageEditorOpen' is assigned a value but never used.",
+          "line": 76,
+          "column": 29,
+          "nodeType": null,
+          "messageId": "unusedVar",
+          "endLine": 76,
+          "endColumn": 49
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/profile-settings/ProfileSettings.test.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/profile-settings/ProfileSettings.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 219,
+          "column": 47,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 219,
+          "endColumn": 47,
+          "fix": {
+            "range": [
+              5506,
+              5506
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 251,
+          "column": 13,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 251,
+          "endColumn": 13,
+          "fix": {
+            "range": [
+              6289,
+              6289
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 256,
+          "column": 72,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 256,
+          "endColumn": 72,
+          "fix": {
+            "range": [
+              6421,
+              6421
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/profile-settings/hooks/useDeleteProfilePicture.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/profile-settings/hooks/useProfileSettings.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/profile-settings/hooks/useUpdateProfilePicture.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/profile-settings/hooks/useUpdateProfileSettings.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/profile-settings/schema/EditProfileSchema.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/profile-settings/services/DeleteProfilePicture.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/profile-settings/services/GetProfileSettings.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/profile-settings/services/UpdateProfilePicture.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/profile-settings/services/UpdateProfileSettings.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/search/components/SearchBar.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Replace `⏎····(state:·RootState)·=>·state.search⏎` with `····(state:·RootState)·=>·state.search,`",
+          "line": 75,
+          "column": 1,
+          "nodeType": null,
+          "messageId": "replace",
+          "endLine": 77,
+          "endColumn": 1,
+          "fix": {
+            "range": [
+              1684,
+              1724
+            ],
+            "text": "    (state: RootState) => state.search,"
+          }
+        }
+      ],
+      "warnings": [
+        {
+          "ruleId": "react-hooks/exhaustive-deps",
+          "severity": 1,
+          "message": "React Hook useEffect has a missing dependency: 'performSearch'. Either include it or remove the dependency array.",
+          "line": 126,
+          "column": 6,
+          "nodeType": "ArrayExpression",
+          "endLine": 126,
+          "endColumn": 18,
+          "suggestions": [
+            {
+              "desc": "Update the dependencies array to be: [performSearch, searchTerm]",
+              "fix": {
+                "range": [
+                  3088,
+                  3100
+                ],
+                "text": "[performSearch, searchTerm]"
+              }
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "filePath": "/app/src/features/search/hooks/useScrollToSearchResultsMsg.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/stories/components/AddStory.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/stories/components/ContactStoryIcon.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/stories/components/Story.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/stories/components/StoryIcon.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 75,
+          "column": 96,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 75,
+          "endColumn": 96,
+          "fix": {
+            "range": [
+              1840,
+              1840
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/stories/components/StoryList.tsx",
+      "errors": [
+        {
+          "ruleId": "@typescript-eslint/no-unused-vars",
+          "severity": 2,
+          "message": "'Close' is defined but never used.",
+          "line": 6,
+          "column": 10,
+          "nodeType": null,
+          "messageId": "unusedVar",
+          "endLine": 6,
+          "endColumn": 15
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 61,
+          "column": 17,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 61,
+          "endColumn": 17,
+          "fix": {
+            "range": [
+              1629,
+              1629
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 67,
+          "column": 29,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 67,
+          "endColumn": 29,
+          "fix": {
+            "range": [
+              1827,
+              1827
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 73,
+          "column": 30,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 73,
+          "endColumn": 30,
+          "fix": {
+            "range": [
+              2012,
+              2012
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/stories/components/StoryListContainer.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Delete `⏎`",
+          "line": 30,
+          "column": 1,
+          "nodeType": null,
+          "messageId": "delete",
+          "endLine": 31,
+          "endColumn": 1,
+          "fix": {
+            "range": [
+              816,
+              817
+            ],
+            "text": ""
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/stories/components/StoryPreview.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/stories/components/StorySlide.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Delete `⏎`",
+          "line": 1,
+          "column": 1,
+          "nodeType": null,
+          "messageId": "delete",
+          "endLine": 2,
+          "endColumn": 1,
+          "fix": {
+            "range": [
+              0,
+              1
+            ],
+            "text": ""
+          }
+        },
+        {
+          "ruleId": "@typescript-eslint/no-unused-vars",
+          "severity": 2,
+          "message": "'ReactDOM' is defined but never used.",
+          "line": 2,
+          "column": 8,
+          "nodeType": null,
+          "messageId": "unusedVar",
+          "endLine": 2,
+          "endColumn": 16
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Delete `⏎`",
+          "line": 82,
+          "column": 1,
+          "nodeType": null,
+          "messageId": "delete",
+          "endLine": 83,
+          "endColumn": 1,
+          "fix": {
+            "range": [
+              1804,
+              1805
+            ],
+            "text": ""
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 121,
+          "column": 14,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 121,
+          "endColumn": 14,
+          "fix": {
+            "range": [
+              2813,
+              2813
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 129,
+          "column": 18,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 129,
+          "endColumn": 18,
+          "fix": {
+            "range": [
+              2967,
+              2967
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 151,
+          "column": 70,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 151,
+          "endColumn": 70,
+          "fix": {
+            "range": [
+              3557,
+              3557
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/stories/components/StorySlideCounter.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Delete `⏎`",
+          "line": 29,
+          "column": 1,
+          "nodeType": null,
+          "messageId": "delete",
+          "endLine": 30,
+          "endColumn": 1,
+          "fix": {
+            "range": [
+              567,
+              568
+            ],
+            "text": ""
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 46,
+          "column": 35,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 46,
+          "endColumn": 35,
+          "fix": {
+            "range": [
+              1043,
+              1043
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/stories/components/StorySliderTooltip.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/stories/components/StoryViews.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Delete `⏎`",
+          "line": 31,
+          "column": 1,
+          "nodeType": null,
+          "messageId": "delete",
+          "endLine": 32,
+          "endColumn": 1,
+          "fix": {
+            "range": [
+              884,
+              885
+            ],
+            "text": ""
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/stories/components/UserInfo.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Delete `⏎`",
+          "line": 18,
+          "column": 1,
+          "nodeType": null,
+          "messageId": "delete",
+          "endLine": 19,
+          "endColumn": 1,
+          "fix": {
+            "range": [
+              382,
+              383
+            ],
+            "text": ""
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/stories/hooks/useDeleteStory.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/stories/hooks/useInView.ts",
+      "errors": [],
+      "warnings": [
+        {
+          "ruleId": "react-hooks/exhaustive-deps",
+          "severity": 1,
+          "message": "The ref value 'ref.current' will likely have changed by the time this effect cleanup function runs. If this ref points to a node rendered by React, copy 'ref.current' to a variable inside the effect, and use that variable in the cleanup function.",
+          "line": 21,
+          "column": 47,
+          "nodeType": "Identifier",
+          "endLine": 21,
+          "endColumn": 54
+        }
+      ]
+    },
+    {
+      "filePath": "/app/src/features/stories/hooks/useMyStories.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/stories/hooks/usePostStory.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/stories/hooks/useStories.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/stories/hooks/useViewStory.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/stories/hooks/useViews.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/stories/services/deleteStory.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/stories/services/getMyStories.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/stories/services/getStories.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/stories/services/getViews.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/stories/services/postStory.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/stories/services/viewStory.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/hooks/useCloseChat.ts",
+      "errors": [],
+      "warnings": [
+        {
+          "ruleId": "react-hooks/exhaustive-deps",
+          "severity": 1,
+          "message": "React Hook useEffect has a missing dependency: 'navigate'. Either include it or remove the dependency array.",
+          "line": 19,
+          "column": 6,
+          "nodeType": "ArrayExpression",
+          "endLine": 19,
+          "endColumn": 8,
+          "suggestions": [
+            {
+              "desc": "Update the dependencies array to be: [navigate]",
+              "fix": {
+                "range": [
+                  445,
+                  447
+                ],
+                "text": "[navigate]"
+              }
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "filePath": "/app/src/hooks/useGlobalState.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/hooks/useIndexedDB.ts",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 27,
+          "column": 20,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 27,
+          "endColumn": 20,
+          "fix": {
+            "range": [
+              725,
+              725
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 39,
+          "column": 20,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 39,
+          "endColumn": 20,
+          "fix": {
+            "range": [
+              1002,
+              1002
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/hooks/useMouseLeave.ts",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 21,
+          "column": 24,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 21,
+          "endColumn": 24,
+          "fix": {
+            "range": [
+              494,
+              494
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 30,
+          "column": 26,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 30,
+          "endColumn": 26,
+          "fix": {
+            "range": [
+              671,
+              671
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/hooks/useSocket.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/main.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 22,
+          "column": 16,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 22,
+          "endColumn": 16,
+          "fix": {
+            "range": [
+              568,
+              568
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/mocks/browser.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/mocks/chats/chats.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/mocks/chats/media.ts",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 15,
+          "column": 24,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 15,
+          "endColumn": 24,
+          "fix": {
+            "range": [
+              404,
+              404
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 27,
+          "column": 22,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 27,
+          "endColumn": 22,
+          "fix": {
+            "range": [
+              639,
+              639
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/mocks/data/Sessions.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/mocks/data/blocklist.ts",
+      "errors": [
+        {
+          "ruleId": "prefer-const",
+          "severity": 2,
+          "message": "'blockList' is never reassigned. Use 'const' instead.",
+          "line": 3,
+          "column": 5,
+          "nodeType": "Identifier",
+          "messageId": "useConst",
+          "endLine": 3,
+          "endColumn": 34,
+          "fix": {
+            "range": [
+              74,
+              240
+            ],
+            "text": "const blockList: BlockedUserProps[] = [\n  {\n    id: 1,\n    name: \"Alice\",\n    username: \"alice123\",\n  },\n  {\n    id: 2,\n    name: \"Bob\",\n    username: \"bob123\",\n  },\n];"
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/mocks/data/chats.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/mocks/data/messages.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/mocks/data/users.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/mocks/devices/devices.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/mocks/fileMock.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/mocks/handlers.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/mocks/oauth/oauth.ts",
+      "errors": [
+        {
+          "ruleId": "@typescript-eslint/no-empty-object-type",
+          "severity": 2,
+          "message": "The `{}` (\"empty object\") type allows any non-nullish value, including literals like `0` and `\"\"`.\n- If that's what you want, disable this lint rule with an inline comment or configure the 'allowObjectTypes' rule option.\n- If you want a type meaning \"any object\", you probably want `object` instead.\n- If you want a type meaning \"any value\", you probably want `unknown` instead.",
+          "line": 12,
+          "column": 11,
+          "nodeType": "TSTypeLiteral",
+          "messageId": "noEmptyObject",
+          "endLine": 12,
+          "endColumn": 13,
+          "suggestions": [
+            {
+              "messageId": "replaceEmptyObjectType",
+              "data": {
+                "replacement": "object"
+              },
+              "fix": {
+                "range": [
+                  228,
+                  230
+                ],
+                "text": "object"
+              },
+              "desc": "Replace `{}` with `object`."
+            },
+            {
+              "messageId": "replaceEmptyObjectType",
+              "data": {
+                "replacement": "unknown"
+              },
+              "fix": {
+                "range": [
+                  228,
+                  230
+                ],
+                "text": "unknown"
+              },
+              "desc": "Replace `{}` with `unknown`."
+            }
+          ]
+        },
+        {
+          "ruleId": "@typescript-eslint/no-empty-object-type",
+          "severity": 2,
+          "message": "The `{}` (\"empty object\") type allows any non-nullish value, including literals like `0` and `\"\"`.\n- If that's what you want, disable this lint rule with an inline comment or configure the 'allowObjectTypes' rule option.\n- If you want a type meaning \"any object\", you probably want `object` instead.\n- If you want a type meaning \"any value\", you probably want `unknown` instead.",
+          "line": 20,
+          "column": 9,
+          "nodeType": "TSTypeLiteral",
+          "messageId": "noEmptyObject",
+          "endLine": 20,
+          "endColumn": 11,
+          "suggestions": [
+            {
+              "messageId": "replaceEmptyObjectType",
+              "data": {
+                "replacement": "object"
+              },
+              "fix": {
+                "range": [
+                  345,
+                  347
+                ],
+                "text": "object"
+              },
+              "desc": "Replace `{}` with `object`."
+            },
+            {
+              "messageId": "replaceEmptyObjectType",
+              "data": {
+                "replacement": "unknown"
+              },
+              "fix": {
+                "range": [
+                  345,
+                  347
+                ],
+                "text": "unknown"
+              },
+              "desc": "Replace `{}` with `unknown`."
+            }
+          ]
+        },
+        {
+          "ruleId": "@typescript-eslint/no-empty-object-type",
+          "severity": 2,
+          "message": "The `{}` (\"empty object\") type allows any non-nullish value, including literals like `0` and `\"\"`.\n- If that's what you want, disable this lint rule with an inline comment or configure the 'allowObjectTypes' rule option.\n- If you want a type meaning \"any object\", you probably want `object` instead.\n- If you want a type meaning \"any value\", you probably want `unknown` instead.",
+          "line": 26,
+          "column": 13,
+          "nodeType": "TSTypeLiteral",
+          "messageId": "noEmptyObject",
+          "endLine": 26,
+          "endColumn": 15,
+          "suggestions": [
+            {
+              "messageId": "replaceEmptyObjectType",
+              "data": {
+                "replacement": "object"
+              },
+              "fix": {
+                "range": [
+                  453,
+                  455
+                ],
+                "text": "object"
+              },
+              "desc": "Replace `{}` with `object`."
+            },
+            {
+              "messageId": "replaceEmptyObjectType",
+              "data": {
+                "replacement": "unknown"
+              },
+              "fix": {
+                "range": [
+                  453,
+                  455
+                ],
+                "text": "unknown"
+              },
+              "desc": "Replace `{}` with `unknown`."
+            }
+          ]
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 41,
+          "column": 8,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 41,
+          "endColumn": 8,
+          "fix": {
+            "range": [
+              861,
+              861
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "@typescript-eslint/no-empty-object-type",
+          "severity": 2,
+          "message": "The `{}` (\"empty object\") type allows any non-nullish value, including literals like `0` and `\"\"`.\n- If that's what you want, disable this lint rule with an inline comment or configure the 'allowObjectTypes' rule option.\n- If you want a type meaning \"any object\", you probably want `object` instead.\n- If you want a type meaning \"any value\", you probably want `unknown` instead.",
+          "line": 45,
+          "column": 13,
+          "nodeType": "TSTypeLiteral",
+          "messageId": "noEmptyObject",
+          "endLine": 45,
+          "endColumn": 15,
+          "suggestions": [
+            {
+              "messageId": "replaceEmptyObjectType",
+              "data": {
+                "replacement": "object"
+              },
+              "fix": {
+                "range": [
+                  888,
+                  890
+                ],
+                "text": "object"
+              },
+              "desc": "Replace `{}` with `object`."
+            },
+            {
+              "messageId": "replaceEmptyObjectType",
+              "data": {
+                "replacement": "unknown"
+              },
+              "fix": {
+                "range": [
+                  888,
+                  890
+                ],
+                "text": "unknown"
+              },
+              "desc": "Replace `{}` with `unknown`."
+            }
+          ]
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 60,
+          "column": 8,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 60,
+          "endColumn": 8,
+          "fix": {
+            "range": [
+              1296,
+              1296
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/mocks/privacy-settings/privacySettings.ts",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Delete `⏎`",
+          "line": 11,
+          "column": 1,
+          "nodeType": null,
+          "messageId": "delete",
+          "endLine": 12,
+          "endColumn": 1,
+          "fix": {
+            "range": [
+              366,
+              367
+            ],
+            "text": ""
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 19,
+          "column": 6,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 19,
+          "endColumn": 6,
+          "fix": {
+            "range": [
+              677,
+              677
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prefer-const",
+          "severity": 2,
+          "message": "'user' is never reassigned. Use 'const' instead.",
+          "line": 30,
+          "column": 9,
+          "nodeType": "Identifier",
+          "messageId": "useConst",
+          "endLine": 30,
+          "endColumn": 13,
+          "fix": {
+            "range": [
+              879,
+              941
+            ],
+            "text": "const user = allChats.find((item) => item.id.toString() === id);"
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 50,
+          "column": 24,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 50,
+          "endColumn": 24,
+          "fix": {
+            "range": [
+              1514,
+              1514
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/mocks/profile-settings/profile-picture.ts",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 15,
+          "column": 22,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 15,
+          "endColumn": 22,
+          "fix": {
+            "range": [
+              370,
+              370
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 36,
+          "column": 10,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 36,
+          "endColumn": 10,
+          "fix": {
+            "range": [
+              952,
+              952
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 47,
+          "column": 10,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 47,
+          "endColumn": 10,
+          "fix": {
+            "range": [
+              1172,
+              1172
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/mocks/profile-settings/profile-settings.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/mocks/server.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/mocks/stories/mockStoriesData.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/mocks/stories/stories.ts",
+      "errors": [
+        {
+          "ruleId": "@typescript-eslint/no-empty-object-type",
+          "severity": 2,
+          "message": "The `{}` (\"empty object\") type allows any non-nullish value, including literals like `0` and `\"\"`.\n- If that's what you want, disable this lint rule with an inline comment or configure the 'allowObjectTypes' rule option.\n- If you want a type meaning \"any object\", you probably want `object` instead.\n- If you want a type meaning \"any value\", you probably want `unknown` instead.",
+          "line": 17,
+          "column": 9,
+          "nodeType": "TSTypeLiteral",
+          "messageId": "noEmptyObject",
+          "endLine": 17,
+          "endColumn": 11,
+          "suggestions": [
+            {
+              "messageId": "replaceEmptyObjectType",
+              "data": {
+                "replacement": "object"
+              },
+              "fix": {
+                "range": [
+                  329,
+                  331
+                ],
+                "text": "object"
+              },
+              "desc": "Replace `{}` with `object`."
+            },
+            {
+              "messageId": "replaceEmptyObjectType",
+              "data": {
+                "replacement": "unknown"
+              },
+              "fix": {
+                "range": [
+                  329,
+                  331
+                ],
+                "text": "unknown"
+              },
+              "desc": "Replace `{}` with `unknown`."
+            }
+          ]
+        },
+        {
+          "ruleId": "@typescript-eslint/no-empty-object-type",
+          "severity": 2,
+          "message": "The `{}` (\"empty object\") type allows any non-nullish value, including literals like `0` and `\"\"`.\n- If that's what you want, disable this lint rule with an inline comment or configure the 'allowObjectTypes' rule option.\n- If you want a type meaning \"any object\", you probably want `object` instead.\n- If you want a type meaning \"any value\", you probably want `unknown` instead.",
+          "line": 23,
+          "column": 9,
+          "nodeType": "TSTypeLiteral",
+          "messageId": "noEmptyObject",
+          "endLine": 23,
+          "endColumn": 11,
+          "suggestions": [
+            {
+              "messageId": "replaceEmptyObjectType",
+              "data": {
+                "replacement": "object"
+              },
+              "fix": {
+                "range": [
+                  426,
+                  428
+                ],
+                "text": "object"
+              },
+              "desc": "Replace `{}` with `object`."
+            },
+            {
+              "messageId": "replaceEmptyObjectType",
+              "data": {
+                "replacement": "unknown"
+              },
+              "fix": {
+                "range": [
+                  426,
+                  428
+                ],
+                "text": "unknown"
+              },
+              "desc": "Replace `{}` with `unknown`."
+            }
+          ]
+        },
+        {
+          "ruleId": "@typescript-eslint/no-empty-object-type",
+          "severity": 2,
+          "message": "The `{}` (\"empty object\") type allows any non-nullish value, including literals like `0` and `\"\"`.\n- If that's what you want, disable this lint rule with an inline comment or configure the 'allowObjectTypes' rule option.\n- If you want a type meaning \"any object\", you probably want `object` instead.\n- If you want a type meaning \"any value\", you probably want `unknown` instead.",
+          "line": 36,
+          "column": 9,
+          "nodeType": "TSTypeLiteral",
+          "messageId": "noEmptyObject",
+          "endLine": 36,
+          "endColumn": 11,
+          "suggestions": [
+            {
+              "messageId": "replaceEmptyObjectType",
+              "data": {
+                "replacement": "object"
+              },
+              "fix": {
+                "range": [
+                  659,
+                  661
+                ],
+                "text": "object"
+              },
+              "desc": "Replace `{}` with `object`."
+            },
+            {
+              "messageId": "replaceEmptyObjectType",
+              "data": {
+                "replacement": "unknown"
+              },
+              "fix": {
+                "range": [
+                  659,
+                  661
+                ],
+                "text": "unknown"
+              },
+              "desc": "Replace `{}` with `unknown`."
+            }
+          ]
+        },
+        {
+          "ruleId": "@typescript-eslint/no-empty-object-type",
+          "severity": 2,
+          "message": "The `{}` (\"empty object\") type allows any non-nullish value, including literals like `0` and `\"\"`.\n- If that's what you want, disable this lint rule with an inline comment or configure the 'allowObjectTypes' rule option.\n- If you want a type meaning \"any object\", you probably want `object` instead.\n- If you want a type meaning \"any value\", you probably want `unknown` instead.",
+          "line": 41,
+          "column": 9,
+          "nodeType": "TSTypeLiteral",
+          "messageId": "noEmptyObject",
+          "endLine": 41,
+          "endColumn": 11,
+          "suggestions": [
+            {
+              "messageId": "replaceEmptyObjectType",
+              "data": {
+                "replacement": "object"
+              },
+              "fix": {
+                "range": [
+                  756,
+                  758
+                ],
+                "text": "object"
+              },
+              "desc": "Replace `{}` with `object`."
+            },
+            {
+              "messageId": "replaceEmptyObjectType",
+              "data": {
+                "replacement": "unknown"
+              },
+              "fix": {
+                "range": [
+                  756,
+                  758
+                ],
+                "text": "unknown"
+              },
+              "desc": "Replace `{}` with `unknown`."
+            }
+          ]
+        },
+        {
+          "ruleId": "@typescript-eslint/no-empty-object-type",
+          "severity": 2,
+          "message": "The `{}` (\"empty object\") type allows any non-nullish value, including literals like `0` and `\"\"`.\n- If that's what you want, disable this lint rule with an inline comment or configure the 'allowObjectTypes' rule option.\n- If you want a type meaning \"any object\", you probably want `object` instead.\n- If you want a type meaning \"any value\", you probably want `unknown` instead.",
+          "line": 53,
+          "column": 13,
+          "nodeType": "TSTypeLiteral",
+          "messageId": "noEmptyObject",
+          "endLine": 53,
+          "endColumn": 15,
+          "suggestions": [
+            {
+              "messageId": "replaceEmptyObjectType",
+              "data": {
+                "replacement": "object"
+              },
+              "fix": {
+                "range": [
+                  984,
+                  986
+                ],
+                "text": "object"
+              },
+              "desc": "Replace `{}` with `object`."
+            },
+            {
+              "messageId": "replaceEmptyObjectType",
+              "data": {
+                "replacement": "unknown"
+              },
+              "fix": {
+                "range": [
+                  984,
+                  986
+                ],
+                "text": "unknown"
+              },
+              "desc": "Replace `{}` with `unknown`."
+            }
+          ]
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 80,
+          "column": 12,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 80,
+          "endColumn": 12,
+          "fix": {
+            "range": [
+              1835,
+              1835
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 91,
+          "column": 12,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 91,
+          "endColumn": 12,
+          "fix": {
+            "range": [
+              2067,
+              2067
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 94,
+          "column": 6,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 94,
+          "endColumn": 6,
+          "fix": {
+            "range": [
+              2092,
+              2092
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 128,
+          "column": 12,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 128,
+          "endColumn": 12,
+          "fix": {
+            "range": [
+              3129,
+              3129
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 139,
+          "column": 12,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 139,
+          "endColumn": 12,
+          "fix": {
+            "range": [
+              3353,
+              3353
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 142,
+          "column": 6,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 142,
+          "endColumn": 6,
+          "fix": {
+            "range": [
+              3378,
+              3378
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 159,
+          "column": 10,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 159,
+          "endColumn": 10,
+          "fix": {
+            "range": [
+              3836,
+              3836
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 170,
+          "column": 10,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 170,
+          "endColumn": 10,
+          "fix": {
+            "range": [
+              4039,
+              4039
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 180,
+          "column": 22,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 180,
+          "endColumn": 22,
+          "fix": {
+            "range": [
+              4207,
+              4207
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 191,
+          "column": 8,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 191,
+          "endColumn": 8,
+          "fix": {
+            "range": [
+              4388,
+              4388
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "@typescript-eslint/no-unused-vars",
+          "severity": 2,
+          "message": "'params' is defined but never used.",
+          "line": 195,
+          "column": 48,
+          "nodeType": null,
+          "messageId": "unusedVar",
+          "endLine": 195,
+          "endColumn": 54
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 202,
+          "column": 8,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 202,
+          "endColumn": 8,
+          "fix": {
+            "range": [
+              4574,
+              4574
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/mocks/userauth/login.ts",
+      "errors": [
+        {
+          "ruleId": "@typescript-eslint/no-empty-object-type",
+          "severity": 2,
+          "message": "The `{}` (\"empty object\") type allows any non-nullish value, including literals like `0` and `\"\"`.\n- If that's what you want, disable this lint rule with an inline comment or configure the 'allowObjectTypes' rule option.\n- If you want a type meaning \"any object\", you probably want `object` instead.\n- If you want a type meaning \"any value\", you probably want `unknown` instead.",
+          "line": 13,
+          "column": 11,
+          "nodeType": "TSTypeLiteral",
+          "messageId": "noEmptyObject",
+          "endLine": 13,
+          "endColumn": 13,
+          "suggestions": [
+            {
+              "messageId": "replaceEmptyObjectType",
+              "data": {
+                "replacement": "object"
+              },
+              "fix": {
+                "range": [
+                  271,
+                  273
+                ],
+                "text": "object"
+              },
+              "desc": "Replace `{}` with `object`."
+            },
+            {
+              "messageId": "replaceEmptyObjectType",
+              "data": {
+                "replacement": "unknown"
+              },
+              "fix": {
+                "range": [
+                  271,
+                  273
+                ],
+                "text": "unknown"
+              },
+              "desc": "Replace `{}` with `unknown`."
+            }
+          ]
+        },
+        {
+          "ruleId": "@typescript-eslint/no-empty-object-type",
+          "severity": 2,
+          "message": "The `{}` (\"empty object\") type allows any non-nullish value, including literals like `0` and `\"\"`.\n- If that's what you want, disable this lint rule with an inline comment or configure the 'allowObjectTypes' rule option.\n- If you want a type meaning \"any object\", you probably want `object` instead.\n- If you want a type meaning \"any value\", you probably want `unknown` instead.",
+          "line": 21,
+          "column": 9,
+          "nodeType": "TSTypeLiteral",
+          "messageId": "noEmptyObject",
+          "endLine": 21,
+          "endColumn": 11,
+          "suggestions": [
+            {
+              "messageId": "replaceEmptyObjectType",
+              "data": {
+                "replacement": "object"
+              },
+              "fix": {
+                "range": [
+                  393,
+                  395
+                ],
+                "text": "object"
+              },
+              "desc": "Replace `{}` with `object`."
+            },
+            {
+              "messageId": "replaceEmptyObjectType",
+              "data": {
+                "replacement": "unknown"
+              },
+              "fix": {
+                "range": [
+                  393,
+                  395
+                ],
+                "text": "unknown"
+              },
+              "desc": "Replace `{}` with `unknown`."
+            }
+          ]
+        },
+        {
+          "ruleId": "@typescript-eslint/no-empty-object-type",
+          "severity": 2,
+          "message": "The `{}` (\"empty object\") type allows any non-nullish value, including literals like `0` and `\"\"`.\n- If that's what you want, disable this lint rule with an inline comment or configure the 'allowObjectTypes' rule option.\n- If you want a type meaning \"any object\", you probably want `object` instead.\n- If you want a type meaning \"any value\", you probably want `unknown` instead.",
+          "line": 31,
+          "column": 13,
+          "nodeType": "TSTypeLiteral",
+          "messageId": "noEmptyObject",
+          "endLine": 31,
+          "endColumn": 15,
+          "suggestions": [
+            {
+              "messageId": "replaceEmptyObjectType",
+              "data": {
+                "replacement": "object"
+              },
+              "fix": {
+                "range": [
+                  601,
+                  603
+                ],
+                "text": "object"
+              },
+              "desc": "Replace `{}` with `object`."
+            },
+            {
+              "messageId": "replaceEmptyObjectType",
+              "data": {
+                "replacement": "unknown"
+              },
+              "fix": {
+                "range": [
+                  601,
+                  603
+                ],
+                "text": "unknown"
+              },
+              "desc": "Replace `{}` with `unknown`."
+            }
+          ]
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 47,
+          "column": 26,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 47,
+          "endColumn": 26,
+          "fix": {
+            "range": [
+              1136,
+              1136
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 67,
+          "column": 10,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 67,
+          "endColumn": 10,
+          "fix": {
+            "range": [
+              1677,
+              1677
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 69,
+          "column": 6,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 69,
+          "endColumn": 6,
+          "fix": {
+            "range": [
+              1692,
+              1692
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/mocks/userauth/logout.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/mocks/userauth/resetpassword.ts",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 37,
+          "column": 26,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 37,
+          "endColumn": 26,
+          "fix": {
+            "range": [
+              817,
+              817
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 46,
+          "column": 24,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 46,
+          "endColumn": 24,
+          "fix": {
+            "range": [
+              983,
+              983
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 48,
+          "column": 6,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 48,
+          "endColumn": 6,
+          "fix": {
+            "range": [
+              998,
+              998
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 65,
+          "column": 26,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 65,
+          "endColumn": 26,
+          "fix": {
+            "range": [
+              1415,
+              1415
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 74,
+          "column": 24,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 74,
+          "endColumn": 24,
+          "fix": {
+            "range": [
+              1590,
+              1590
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 76,
+          "column": 6,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 76,
+          "endColumn": 6,
+          "fix": {
+            "range": [
+              1605,
+              1605
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/mocks/userauth/signup.ts",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 39,
+          "column": 26,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 39,
+          "endColumn": 26,
+          "fix": {
+            "range": [
+              870,
+              870
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 49,
+          "column": 24,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 49,
+          "endColumn": 24,
+          "fix": {
+            "range": [
+              1056,
+              1056
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 51,
+          "column": 6,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 51,
+          "endColumn": 6,
+          "fix": {
+            "range": [
+              1071,
+              1071
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/mocks/userauth/verfiyEmail.ts",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 37,
+          "column": 26,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 37,
+          "endColumn": 26,
+          "fix": {
+            "range": [
+              809,
+              809
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 46,
+          "column": 24,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 46,
+          "endColumn": 24,
+          "fix": {
+            "range": [
+              999,
+              999
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 48,
+          "column": 6,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 48,
+          "endColumn": 6,
+          "fix": {
+            "range": [
+              1014,
+              1014
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 65,
+          "column": 26,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 65,
+          "endColumn": 26,
+          "fix": {
+            "range": [
+              1415,
+              1415
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 74,
+          "column": 24,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 74,
+          "endColumn": 24,
+          "fix": {
+            "range": [
+              1590,
+              1590
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 76,
+          "column": 6,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 76,
+          "endColumn": 6,
+          "fix": {
+            "range": [
+              1605,
+              1605
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/pages/Login.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/pages/Signup.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/sockets/SocketContext.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/sockets/SocketProvider.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/state/messages/activeMessage.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/state/messages/messages.ts",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 29,
+          "column": 60,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 29,
+          "endColumn": 60,
+          "fix": {
+            "range": [
+              773,
+              773
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 44,
+          "column": 9,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 44,
+          "endColumn": 9,
+          "fix": {
+            "range": [
+              1149,
+              1149
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 50,
+          "column": 26,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 50,
+          "endColumn": 26,
+          "fix": {
+            "range": [
+              1337,
+              1337
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 60,
+          "column": 67,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 60,
+          "endColumn": 67,
+          "fix": {
+            "range": [
+              1517,
+              1517
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 64,
+          "column": 62,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 64,
+          "endColumn": 62,
+          "fix": {
+            "range": [
+              1685,
+              1685
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 73,
+          "column": 67,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 73,
+          "endColumn": 67,
+          "fix": {
+            "range": [
+              1864,
+              1864
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 77,
+          "column": 62,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 77,
+          "endColumn": 62,
+          "fix": {
+            "range": [
+              2032,
+              2032
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 95,
+          "column": 55,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 95,
+          "endColumn": 55,
+          "fix": {
+            "range": [
+              2547,
+              2547
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 106,
+          "column": 60,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 106,
+          "endColumn": 60,
+          "fix": {
+            "range": [
+              2826,
+              2826
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 126,
+          "column": 32,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 126,
+          "endColumn": 32,
+          "fix": {
+            "range": [
+              3440,
+              3440
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/state/messages/search.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/state/side-bar/sideBar.ts",
+      "errors": [
+        {
+          "ruleId": "@typescript-eslint/no-explicit-any",
+          "severity": 2,
+          "message": "Unexpected any. Specify a different type.",
+          "line": 48,
+          "column": 10,
+          "nodeType": "TSAnyKeyword",
+          "messageId": "unexpectedAny",
+          "endLine": 48,
+          "endColumn": 13,
+          "suggestions": [
+            {
+              "messageId": "suggestUnknown",
+              "fix": {
+                "range": [
+                  1092,
+                  1095
+                ],
+                "text": "unknown"
+              },
+              "desc": "Use `unknown` instead, this will force you to explicitly, and safely assert the type is correct."
+            },
+            {
+              "messageId": "suggestNever",
+              "fix": {
+                "range": [
+                  1092,
+                  1095
+                ],
+                "text": "never"
+              },
+              "desc": "Use `never` instead, this is useful when instantiating generic type parameters that you don't need to know the type of."
+            }
+          ]
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/state/store.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/state/theme/theme.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/state/user/user.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/styles/GlobalStyles.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/tests/test-utils.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/types/media.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/types/messages.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/types/sideBar.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/types/socket.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/types/story.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/types/user.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/utils/helpers.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/utils/renderWithHighlight.tsx",
+      "errors": [
+        {
+          "ruleId": "@typescript-eslint/no-explicit-any",
+          "severity": 2,
+          "message": "Unexpected any. Specify a different type.",
+          "line": 11,
+          "column": 19,
+          "nodeType": "TSAnyKeyword",
+          "messageId": "unexpectedAny",
+          "endLine": 11,
+          "endColumn": 22,
+          "suggestions": [
+            {
+              "messageId": "suggestUnknown",
+              "fix": {
+                "range": [
+                  344,
+                  347
+                ],
+                "text": "unknown"
+              },
+              "desc": "Use `unknown` instead, this will force you to explicitly, and safely assert the type is correct."
+            },
+            {
+              "messageId": "suggestNever",
+              "fix": {
+                "range": [
+                  344,
+                  347
+                ],
+                "text": "never"
+              },
+              "desc": "Use `never` instead, this is useful when instantiating generic type parameters that you don't need to know the type of."
+            }
+          ]
+        }
+      ],
+      "warnings": [
+        {
+          "ruleId": "react-refresh/only-export-components",
+          "severity": 1,
+          "message": "Fast refresh only works when a file only exports components. Move your component(s) to a separate file.",
+          "line": 3,
+          "column": 7,
+          "nodeType": "Identifier",
+          "messageId": "localComponents",
+          "endLine": 3,
+          "endColumn": 22
+        }
+      ]
+    },
+    {
+      "filePath": "/app/src/utils/socket.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/utils/static-analysis-script.js",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/vite-env.d.ts",
+      "errors": [],
+      "warnings": []
+    }
+  ]
+}
\ No newline at end of file
diff --git a/app/tsconfig.app.json b/app/tsconfig.app.json
index 3bfb13f1..6ac108b4 100644
--- a/app/tsconfig.app.json
+++ b/app/tsconfig.app.json
@@ -18,7 +18,8 @@
       "types/*": ["./types/*"],
       "@data/*": ["./data/*"],
       "@tests/*": ["./tests/*"],
-      "@services": ["./services/*"]
+      "@services": ["./services/*"],
+      "@utils/*": ["./utils/*"]
     },
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
diff --git a/app/vite.config.ts.timestamp-1734385645418-efb6d73151a22.mjs b/app/vite.config.ts.timestamp-1734385645418-efb6d73151a22.mjs
new file mode 100644
index 00000000..41da1e71
--- /dev/null
+++ b/app/vite.config.ts.timestamp-1734385645418-efb6d73151a22.mjs
@@ -0,0 +1,18 @@
+// vite.config.ts
+import { defineConfig, loadEnv } from "file:///home/ahmed/Desktop/projects/telware-frontend/app/node_modules/vite/dist/node/index.js";
+import react from "file:///home/ahmed/Desktop/projects/telware-frontend/app/node_modules/@vitejs/plugin-react/dist/index.mjs";
+import tsconfigPaths from "file:///home/ahmed/Desktop/projects/telware-frontend/app/node_modules/vite-tsconfig-paths/dist/index.js";
+var vite_config_default = ({ mode }) => {
+  process.env = {
+    ...process.env,
+    ...loadEnv(mode, process.cwd())
+  };
+  return defineConfig({
+    server: { port: parseInt(process.env.VITE_PORT) },
+    plugins: [react(), tsconfigPaths()]
+  });
+};
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvaG9tZS9haG1lZC9EZXNrdG9wL3Byb2plY3RzL3RlbHdhcmUtZnJvbnRlbmQvYXBwXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ZpbGVuYW1lID0gXCIvaG9tZS9haG1lZC9EZXNrdG9wL3Byb2plY3RzL3RlbHdhcmUtZnJvbnRlbmQvYXBwL3ZpdGUuY29uZmlnLnRzXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ltcG9ydF9tZXRhX3VybCA9IFwiZmlsZTovLy9ob21lL2FobWVkL0Rlc2t0b3AvcHJvamVjdHMvdGVsd2FyZS1mcm9udGVuZC9hcHAvdml0ZS5jb25maWcudHNcIjtpbXBvcnQgeyBkZWZpbmVDb25maWcsIGxvYWRFbnYgfSBmcm9tIFwidml0ZVwiO1xuaW1wb3J0IHJlYWN0IGZyb20gXCJAdml0ZWpzL3BsdWdpbi1yZWFjdFwiO1xuaW1wb3J0IHRzY29uZmlnUGF0aHMgZnJvbSBcInZpdGUtdHNjb25maWctcGF0aHNcIjtcblxuLy8gaHR0cHM6Ly92aXRlanMuZGV2L2NvbmZpZy9cblxuZXhwb3J0IGRlZmF1bHQgKHsgbW9kZSB9KSA9PiB7XG4gIHByb2Nlc3MuZW52ID0ge1xuICAgIC4uLnByb2Nlc3MuZW52LFxuICAgIC4uLmxvYWRFbnYobW9kZSwgcHJvY2Vzcy5jd2QoKSksXG4gIH07XG4gIHJldHVybiBkZWZpbmVDb25maWcoe1xuICAgIHNlcnZlcjogeyBwb3J0OiBwYXJzZUludChwcm9jZXNzLmVudi5WSVRFX1BPUlQpIH0sXG4gICAgcGx1Z2luczogW3JlYWN0KCksIHRzY29uZmlnUGF0aHMoKV0sXG4gIH0pO1xufTtcbiJdLAogICJtYXBwaW5ncyI6ICI7QUFBcVUsU0FBUyxjQUFjLGVBQWU7QUFDM1csT0FBTyxXQUFXO0FBQ2xCLE9BQU8sbUJBQW1CO0FBSTFCLElBQU8sc0JBQVEsQ0FBQyxFQUFFLEtBQUssTUFBTTtBQUMzQixVQUFRLE1BQU07QUFBQSxJQUNaLEdBQUcsUUFBUTtBQUFBLElBQ1gsR0FBRyxRQUFRLE1BQU0sUUFBUSxJQUFJLENBQUM7QUFBQSxFQUNoQztBQUNBLFNBQU8sYUFBYTtBQUFBLElBQ2xCLFFBQVEsRUFBRSxNQUFNLFNBQVMsUUFBUSxJQUFJLFNBQVMsRUFBRTtBQUFBLElBQ2hELFNBQVMsQ0FBQyxNQUFNLEdBQUcsY0FBYyxDQUFDO0FBQUEsRUFDcEMsQ0FBQztBQUNIOyIsCiAgIm5hbWVzIjogW10KfQo=
diff --git a/docs/flows/sockets-dev.md b/docs/flows/sockets-dev.md
new file mode 100644
index 00000000..609541d1
--- /dev/null
+++ b/docs/flows/sockets-dev.md
@@ -0,0 +1,59 @@
+# Mock communication between 2 users
+
+## 1. Run the Server
+
+### Steps:
+
+1. Navigate to the `socket-server` directory:
+
+   ```bash
+   cd ./app/socket-server
+   ```
+
+2. Install dependencies:
+   ```bash
+   npm i
+   ```
+3. Start the server:
+   ```bash
+   nodemon index.js
+   ```
+
+---
+
+## 2. Configure the App
+
+1. Navigate to the `app` directory:
+   ```bash
+   cd ./app
+   ```
+2. Add the following line to the `.env` file:
+   ```
+   VITE_SOCKET_BACKEND_API=http://localhost:4000
+   ```
+
+---
+
+## 3. Run the Clients
+
+### Client 1
+
+1. Start the application:
+   ```bash
+   npm run dev
+   ```
+2. Log in with **User 1**:
+   - **Email:** `johndoe@example.com`
+   - **Password:** `1234`
+3. **Note:** Ensure all `localStorage` data is cleared before logging in.
+
+### Client 2
+
+1. Start the application:
+   ```bash
+   npm run dev
+   ```
+2. Log in with **User 2**:
+   - **Email:** `ay7aga@example.com`
+   - **Password:** `1234`
+3. **Note:** Ensure all `localStorage` data is cleared before logging in.
diff --git a/telware-frontend.tmux b/telware-frontend.tmux
new file mode 100755
index 00000000..3748a77f
--- /dev/null
+++ b/telware-frontend.tmux
@@ -0,0 +1,23 @@
+#!/bin/bash
+
+SESSION_NAME="telware-frontend"
+
+tmux has-session -t $SESSION_NAME 2>/dev/null
+
+if [ $? != 0 ]; then
+
+  # Window 1: Open nvim
+  tmux new-session -d -s $SESSION_NAME -n vim
+  tmux send-keys -t $SESSION_NAME 'v' C-m
+
+  # Window 2: Docker Compose
+  tmux new-window -t $SESSION_NAME -n docker
+  tmux send-keys -t $SESSION_NAME:2 'docker-compose up' C-m
+
+  # Window 3: Attach to the container
+  tmux new-window -t $SESSION_NAME -n container
+  tmux send-keys -t $SESSION_NAME:3 'docker exec -it telware-frontend-frontend-1 /bin/sh' C-m
+fi
+
+# Attach to the session
+tmux attach-session -t $SESSION_NAME