diff --git a/package-lock.json b/package-lock.json
index 19314de..d386378 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,24 +8,32 @@
       "name": "campfirecritics",
       "version": "0.0.0",
       "dependencies": {
+        "@react-three/fiber": "^8.18.0",
+        "@react-three/postprocessing": "^2.19.1",
         "@tailwindcss/forms": "^0.5.10",
         "@tailwindcss/typography": "^0.5.16",
         "chart.js": "^4.4.3",
+        "cors": "^2.8.5",
         "dompurify": "^3.2.5",
+        "express": "^5.1.0",
         "framer-motion": "^11.18.2",
         "gsap": "^3.13.0",
+        "node-telegram-bot-api": "^0.66.0",
         "pocketbase": "^0.21.3",
+        "postprocessing": "^6.37.3",
         "react": "^18.2.0",
+        "react-beautiful-dnd": "^13.1.1",
         "react-chartjs-2": "^5.2.0",
         "react-datepicker": "^8.3.0",
         "react-dom": "^18.2.0",
-        "react-fast-marquee": "^1.6.4",
+        "react-fast-marquee": "^1.6.5",
         "react-hot-toast": "^2.5.2",
         "react-icons": "^5.5.0",
         "react-quill": "^2.0.0",
         "react-router-dom": "^6.23.1",
         "react-select": "^5.10.1",
-        "react-toastify": "^10.0.5",
+        "react-toastify": "^11.0.5",
+        "three": "^0.167.1",
         "uuid": "^11.1.0"
       },
       "devDependencies": {
@@ -349,6 +357,105 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@cypress/request": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/@cypress/request/-/request-3.0.8.tgz",
+      "integrity": "sha512-h0NFgh1mJmm1nr4jCwkGHwKneVYKghUyWe6TMNrk0B9zsjAJxpg8C4/+BAcmLgCPa1vj1V8rNUaILl+zYRUWBQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "aws-sign2": "~0.7.0",
+        "aws4": "^1.8.0",
+        "caseless": "~0.12.0",
+        "combined-stream": "~1.0.6",
+        "extend": "~3.0.2",
+        "forever-agent": "~0.6.1",
+        "form-data": "~4.0.0",
+        "http-signature": "~1.4.0",
+        "is-typedarray": "~1.0.0",
+        "isstream": "~0.1.2",
+        "json-stringify-safe": "~5.0.1",
+        "mime-types": "~2.1.19",
+        "performance-now": "^2.1.0",
+        "qs": "6.14.0",
+        "safe-buffer": "^5.1.2",
+        "tough-cookie": "^5.0.0",
+        "tunnel-agent": "^0.6.0",
+        "uuid": "^8.3.2"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/@cypress/request-promise": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@cypress/request-promise/-/request-promise-5.0.0.tgz",
+      "integrity": "sha512-eKdYVpa9cBEw2kTBlHeu1PP16Blwtum6QHg/u9s/MoHkZfuo1pRGka1VlUHXF5kdew82BvOJVVGk0x8X0nbp+w==",
+      "license": "ISC",
+      "dependencies": {
+        "bluebird": "^3.5.0",
+        "request-promise-core": "1.1.3",
+        "stealthy-require": "^1.1.1",
+        "tough-cookie": "^4.1.3"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      },
+      "peerDependencies": {
+        "@cypress/request": "^3.0.0"
+      }
+    },
+    "node_modules/@cypress/request-promise/node_modules/tough-cookie": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.4.tgz",
+      "integrity": "sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "psl": "^1.1.33",
+        "punycode": "^2.1.1",
+        "universalify": "^0.2.0",
+        "url-parse": "^1.5.3"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@cypress/request/node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/@cypress/request/node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/@cypress/request/node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
+    "node_modules/@dimforge/rapier3d-compat": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/@dimforge/rapier3d-compat/-/rapier3d-compat-0.12.0.tgz",
+      "integrity": "sha512-uekIGetywIgopfD97oDL5PfeezkFpNhwlzlaEYNOA0N6ghdsOvh/HYjSMek5Q2O1PYvRSDFcqFVJl4r4ZBwOow==",
+      "license": "Apache-2.0",
+      "peer": true
+    },
     "node_modules/@emotion/babel-plugin": {
       "version": "11.13.5",
       "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz",
@@ -1130,6 +1237,82 @@
         "node": ">=14"
       }
     },
+    "node_modules/@react-three/fiber": {
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/@react-three/fiber/-/fiber-8.18.0.tgz",
+      "integrity": "sha512-FYZZqD0UUHUswKz3LQl2Z7H24AhD14XGTsIRw3SJaXUxyfVMi+1yiZGmqTcPt/CkPpdU7rrxqcyQ1zJE5DjvIQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.17.8",
+        "@types/react-reconciler": "^0.26.7",
+        "@types/webxr": "*",
+        "base64-js": "^1.5.1",
+        "buffer": "^6.0.3",
+        "its-fine": "^1.0.6",
+        "react-reconciler": "^0.27.0",
+        "react-use-measure": "^2.1.7",
+        "scheduler": "^0.21.0",
+        "suspend-react": "^0.1.3",
+        "zustand": "^3.7.1"
+      },
+      "peerDependencies": {
+        "expo": ">=43.0",
+        "expo-asset": ">=8.4",
+        "expo-file-system": ">=11.0",
+        "expo-gl": ">=11.0",
+        "react": ">=18 <19",
+        "react-dom": ">=18 <19",
+        "react-native": ">=0.64",
+        "three": ">=0.133"
+      },
+      "peerDependenciesMeta": {
+        "expo": {
+          "optional": true
+        },
+        "expo-asset": {
+          "optional": true
+        },
+        "expo-file-system": {
+          "optional": true
+        },
+        "expo-gl": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@react-three/fiber/node_modules/scheduler": {
+      "version": "0.21.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.21.0.tgz",
+      "integrity": "sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "node_modules/@react-three/postprocessing": {
+      "version": "2.19.1",
+      "resolved": "https://registry.npmjs.org/@react-three/postprocessing/-/postprocessing-2.19.1.tgz",
+      "integrity": "sha512-7P25LOSToH/I6b3UipNK17IIFlX4FDUmWcaomfwu82+CzhXTOz8Fcc1ZXEZ7vFA/5Fr/2peNlXgXZJvoa+aCdA==",
+      "license": "MIT",
+      "dependencies": {
+        "buffer": "^6.0.3",
+        "maath": "^0.6.0",
+        "n8ao": "^1.6.6",
+        "postprocessing": "^6.32.1",
+        "three-stdlib": "^2.23.4"
+      },
+      "peerDependencies": {
+        "@react-three/fiber": "^8.0",
+        "react": "^18.0",
+        "three": ">= 0.138.0"
+      }
+    },
     "node_modules/@remix-run/router": {
       "version": "1.23.0",
       "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.0.tgz",
@@ -1459,6 +1642,13 @@
         "node": ">=4"
       }
     },
+    "node_modules/@tweenjs/tween.js": {
+      "version": "23.1.3",
+      "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-23.1.3.tgz",
+      "integrity": "sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==",
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -1504,6 +1694,12 @@
         "@babel/types": "^7.20.7"
       }
     },
+    "node_modules/@types/draco3d": {
+      "version": "1.4.10",
+      "resolved": "https://registry.npmjs.org/@types/draco3d/-/draco3d-1.4.10.tgz",
+      "integrity": "sha512-AX22jp8Y7wwaBgAixaSvkoG4M/+PlAcm3Qs4OW8yT9DM4xUpWKeFhLueTAyZF39pviAdcDdeJoACapiAceqNcw==",
+      "license": "MIT"
+    },
     "node_modules/@types/estree": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.7.tgz",
@@ -1511,6 +1707,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/hoist-non-react-statics": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.6.tgz",
+      "integrity": "sha512-lPByRJUer/iN/xa4qpyL0qmL11DqNW81iU/IG1S3uvRUq4oKagz8VCxZjiWkumgt66YT3vOdDgZ0o32sGKtCEw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
     "node_modules/@types/node": {
       "version": "22.15.2",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-22.15.2.tgz",
@@ -1523,6 +1729,12 @@
         "undici-types": "~6.21.0"
       }
     },
+    "node_modules/@types/offscreencanvas": {
+      "version": "2019.7.3",
+      "resolved": "https://registry.npmjs.org/@types/offscreencanvas/-/offscreencanvas-2019.7.3.tgz",
+      "integrity": "sha512-ieXiYmgSRXUDeOntE1InxjWyvEelZGP63M+cGuquuRLuIKKT1osnkXjxev9B7d1nXSug5vpunx+gNlbVxMlC9A==",
+      "license": "MIT"
+    },
     "node_modules/@types/parse-json": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
@@ -1564,6 +1776,27 @@
         "@types/react": "^18.0.0"
       }
     },
+    "node_modules/@types/react-reconciler": {
+      "version": "0.26.7",
+      "resolved": "https://registry.npmjs.org/@types/react-reconciler/-/react-reconciler-0.26.7.tgz",
+      "integrity": "sha512-mBDYl8x+oyPX/VBb3E638N0B7xG+SPk/EAMcVPeexqus/5aTpTphQi0curhhshOqRrc9t6OPoJfEUkbymse/lQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/react-redux": {
+      "version": "7.1.34",
+      "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.34.tgz",
+      "integrity": "sha512-GdFaVjEbYv4Fthm2ZLvj1VSCedV7TqE5y1kNwnjSdBOTXuRSgowux6J8TAct15T3CKBr63UMk+2CO7ilRhyrAQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hoist-non-react-statics": "^3.3.0",
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0",
+        "redux": "^4.0.0"
+      }
+    },
     "node_modules/@types/react-transition-group": {
       "version": "4.4.12",
       "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz",
@@ -1573,6 +1806,29 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/stats.js": {
+      "version": "0.17.4",
+      "resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.4.tgz",
+      "integrity": "sha512-jIBvWWShCvlBqBNIZt0KAshWpvSjhkwkEu4ZUcASoAvhmrgAUI2t1dXrjSL4xXVLB4FznPrIsX3nKXFl/Dt4vA==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@types/three": {
+      "version": "0.176.0",
+      "resolved": "https://registry.npmjs.org/@types/three/-/three-0.176.0.tgz",
+      "integrity": "sha512-FwfPXxCqOtP7EdYMagCFePNKoG1AGBDUEVKtluv2BTVRpSt7b+X27xNsirPCTCqY1pGYsPUzaM3jgWP7dXSxlw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@dimforge/rapier3d-compat": "^0.12.0",
+        "@tweenjs/tween.js": "~23.1.3",
+        "@types/stats.js": "*",
+        "@types/webxr": "*",
+        "@webgpu/types": "*",
+        "fflate": "~0.8.2",
+        "meshoptimizer": "~0.18.1"
+      }
+    },
     "node_modules/@types/trusted-types": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
@@ -1580,6 +1836,12 @@
       "license": "MIT",
       "optional": true
     },
+    "node_modules/@types/webxr": {
+      "version": "0.5.22",
+      "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.22.tgz",
+      "integrity": "sha512-Vr6Stjv5jPRqH690f5I5GLjVk8GSsoQSYJ2FVd/3jJF7KaqfwPi3ehfBS96mlQ2kPCwZaX6U0rG2+NGHBKkA/A==",
+      "license": "MIT"
+    },
     "node_modules/@ungap/structured-clone": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.0.tgz",
@@ -1607,6 +1869,26 @@
         "vite": "^4.2.0 || ^5.0.0 || ^6.0.0"
       }
     },
+    "node_modules/@webgpu/types": {
+      "version": "0.1.60",
+      "resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.60.tgz",
+      "integrity": "sha512-8B/tdfRFKdrnejqmvq95ogp8tf52oZ51p3f4QD5m5Paey/qlX4Rhhy5Y8tgFMi7Ms70HzcMMw3EQjH/jdhTwlA==",
+      "license": "BSD-3-Clause",
+      "peer": true
+    },
+    "node_modules/accepts": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-2.0.0.tgz",
+      "integrity": "sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-types": "^3.0.0",
+        "negotiator": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.14.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz",
@@ -1634,7 +1916,6 @@
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
@@ -1710,7 +1991,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz",
       "integrity": "sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bound": "^1.0.3",
@@ -1744,6 +2024,23 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/array.prototype.findindex": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/array.prototype.findindex/-/array.prototype.findindex-2.2.4.tgz",
+      "integrity": "sha512-LLm4mhxa9v8j0A/RPnpQAP4svXToJFh+Hp1pNYl5ZD5qpB4zdx/D4YjpVcETkhFbUKWO3iGMVLvrOnnmkAJT6A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.6",
+        "es-object-atoms": "^1.0.0",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/array.prototype.findlast": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/array.prototype.findlast/-/array.prototype.findlast-1.2.5.tgz",
@@ -1824,7 +2121,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.4.tgz",
       "integrity": "sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "array-buffer-byte-length": "^1.0.1",
@@ -1842,16 +2138,39 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/asn1": {
+      "version": "0.2.6",
+      "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.6.tgz",
+      "integrity": "sha512-ix/FxPn0MDjeyJ7i/yoHGFt/EX6LyNbxSEhPPXODPL+KB0VPk86UYfL0lMdy+KCnv+fmvIzySwaK5COwqVbWTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": "~2.1.0"
+      }
+    },
+    "node_modules/assert-plus": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+      "integrity": "sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/async-function": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/async-function/-/async-function-1.0.0.tgz",
       "integrity": "sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
       }
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.21",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz",
@@ -1894,7 +2213,6 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
       "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "possible-typed-array-names": "^1.0.0"
@@ -1906,6 +2224,21 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/aws-sign2": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
+      "integrity": "sha512-08kcGqnYf/YmjoRhfxyu+CLxBjUtHLXLXX/vUfx9l2LYzG3c1m61nrpyFUZI6zeS+Li/wWMMidD9KgrqtGq3mA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/aws4": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.13.2.tgz",
+      "integrity": "sha512-lHe62zvbTB5eEABUVi/AwVh0ZKY9rMMDhmm+eeyuuUQbQ3+J+fONVQOZyj+DdrvD4BY33uYniyRJ4UJIaSKAfw==",
+      "license": "MIT"
+    },
     "node_modules/babel-plugin-macros": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
@@ -1947,6 +2280,35 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "license": "MIT"
     },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/bcrypt-pbkdf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
+      "integrity": "sha512-qeFIXtP4MSoi6NLqO12WfqARWWuCKi2Rn/9hJLEmtB5yTNr9DqFWkJRCf2qShWzPeAMRnOgCrq0sg/KLv5ES9w==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tweetnacl": "^0.14.3"
+      }
+    },
     "node_modules/binary-extensions": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
@@ -1959,6 +2321,42 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/bl": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-1.2.3.tgz",
+      "integrity": "sha512-pvcNpa0UU69UT341rO6AYy4FVAIkUHuZXRIWbq+zHnsVcRzDDjIAhGuuYoi0d//cwIwtt4pkpKycWEfjdV+vww==",
+      "license": "MIT",
+      "dependencies": {
+        "readable-stream": "^2.3.5",
+        "safe-buffer": "^5.1.1"
+      }
+    },
+    "node_modules/bluebird": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
+      "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
+      "license": "MIT"
+    },
+    "node_modules/body-parser": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-2.2.0.tgz",
+      "integrity": "sha512-02qvAaxv8tp7fBa/mw1ga98OGm+eCbqzJOKoRt70sLmfEEi+jyBYVTDGfCL/k06/4EMk/z01gCe7HoCH/f2LTg==",
+      "license": "MIT",
+      "dependencies": {
+        "bytes": "^3.1.2",
+        "content-type": "^1.0.5",
+        "debug": "^4.4.0",
+        "http-errors": "^2.0.0",
+        "iconv-lite": "^0.6.3",
+        "on-finished": "^2.4.1",
+        "qs": "^6.14.0",
+        "raw-body": "^3.0.0",
+        "type-is": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -2015,6 +2413,39 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/buffer": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.2.1"
+      }
+    },
+    "node_modules/bytes": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/call-bind": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
@@ -2101,6 +2532,12 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/caseless": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
+      "integrity": "sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==",
+      "license": "Apache-2.0"
+    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -2202,6 +2639,18 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "license": "MIT"
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/commander": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -2218,6 +2667,27 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/content-disposition": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-1.0.0.tgz",
+      "integrity": "sha512-Au9nRL8VNUut/XSzbQA38+M78dzP4D+eqg3gfJHMIHHYa3bg067xj1KxMUWj+VULbiZMowKngFFbKczUrNJ1mg==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "5.2.1"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/content-type": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
+      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/convert-source-map": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
@@ -2225,6 +2695,43 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/cookie": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
+      "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cookie-signature": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.2.2.tgz",
+      "integrity": "sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.6.0"
+      }
+    },
+    "node_modules/core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
+      "license": "MIT"
+    },
+    "node_modules/cors": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+      "license": "MIT",
+      "dependencies": {
+        "object-assign": "^4",
+        "vary": "^1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/cosmiconfig": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
@@ -2264,6 +2771,15 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-box-model": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.1.tgz",
+      "integrity": "sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==",
+      "license": "MIT",
+      "dependencies": {
+        "tiny-invariant": "^1.0.6"
+      }
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -2282,11 +2798,22 @@
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
       "license": "MIT"
     },
+    "node_modules/dashdash": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
+      "integrity": "sha512-jRFi8UDGo6j+odZiEpjazZaWqEal3w/basFjQHQEwVtZJGDpxbH1MeYluwCS8Xq5wmLJooDlMgvVarmWfGM44g==",
+      "license": "MIT",
+      "dependencies": {
+        "assert-plus": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/data-view-buffer": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
       "integrity": "sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bound": "^1.0.3",
@@ -2304,7 +2831,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.2.tgz",
       "integrity": "sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bound": "^1.0.3",
@@ -2322,7 +2848,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.1.tgz",
       "integrity": "sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bound": "^1.0.2",
@@ -2424,6 +2949,24 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/depd": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -2460,14 +3003,20 @@
       }
     },
     "node_modules/dompurify": {
-      "version": "3.2.5",
-      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.5.tgz",
-      "integrity": "sha512-mLPd29uoRe9HpvwP2TxClGQBzGXeEC/we/q+bFlmPPmj2p2Ugl3r6ATu/UU1v77DXNcehiBg9zsr1dREyA/dJQ==",
+      "version": "3.2.6",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.6.tgz",
+      "integrity": "sha512-/2GogDQlohXPZe6D6NOgQvXLPSYBqIWMnZ8zzOhn09REE4eyAzb+Hed3jhoM9OkuaJ8P6ZGTTVWQKAi8ieIzfQ==",
       "license": "(MPL-2.0 OR Apache-2.0)",
       "optionalDependencies": {
         "@types/trusted-types": "^2.0.7"
       }
     },
+    "node_modules/draco3d": {
+      "version": "1.5.7",
+      "resolved": "https://registry.npmjs.org/draco3d/-/draco3d-1.5.7.tgz",
+      "integrity": "sha512-m6WCKt/erDXcw+70IJXnG7M3awwQPAsZvJGX5zY7beBqpELw6RDGkYVU0W43AFxye4pDZ5i2Lbyc/NNGqwjUVQ==",
+      "license": "Apache-2.0"
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -2488,6 +3037,22 @@
       "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
       "license": "MIT"
     },
+    "node_modules/ecc-jsbn": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
+      "integrity": "sha512-eh9O+hwRHNbG4BLTjEl3nw044CkGm5X6LoaCf7LPp7UU8Qrt47JYNi6nPX8xjW97TKGKm1ouctg0QSpZe9qrnw==",
+      "license": "MIT",
+      "dependencies": {
+        "jsbn": "~0.1.0",
+        "safer-buffer": "^2.1.0"
+      }
+    },
+    "node_modules/ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
+      "license": "MIT"
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.143",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.143.tgz",
@@ -2501,6 +3066,24 @@
       "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
       "license": "MIT"
     },
+    "node_modules/encodeurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/end-of-stream": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
+      "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
+      "license": "MIT",
+      "dependencies": {
+        "once": "^1.4.0"
+      }
+    },
     "node_modules/error-ex": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -2514,7 +3097,6 @@
       "version": "1.23.9",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.9.tgz",
       "integrity": "sha512-py07lI0wjxAC/DcfK1S6G7iANonniZwTISvdPzk9hzeH0IZIshbuuFxLIU96OyF89Yb9hiqWn8M/bY83KY5vzA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "array-buffer-byte-length": "^1.0.2",
@@ -2638,7 +3220,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
       "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0",
@@ -2654,7 +3235,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.1.0.tgz",
       "integrity": "sha512-d9T8ucsEhh8Bi1woXCf+TIKDIROLG5WCkxg8geBCbvk22kzwC5G2OnXVMO6FUsvQlgUUXQ2itephWDLqDzbeCw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "hasown": "^2.0.2"
@@ -2667,7 +3247,6 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.3.0.tgz",
       "integrity": "sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-callable": "^1.2.7",
@@ -2730,6 +3309,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
+      "license": "MIT"
+    },
     "node_modules/escape-string-regexp": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -2985,23 +3570,82 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/eventemitter3": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz",
       "integrity": "sha512-jLN68Dx5kyFHaePoXWPsCGW5qdyZQtLYHkxkg02/Mz6g0kYpDx4FyP6XfArhQdlOC4b8Mv+EMxPo/8La7Tzghg==",
       "license": "MIT"
     },
+    "node_modules/express": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/express/-/express-5.1.0.tgz",
+      "integrity": "sha512-DT9ck5YIRU+8GYzzU5kT3eHGA5iL+1Zd0EutOmTE9Dtk+Tvuzd23VBU+ec7HPNSTxXYO55gPV/hq4pSBJDjFpA==",
+      "license": "MIT",
+      "dependencies": {
+        "accepts": "^2.0.0",
+        "body-parser": "^2.2.0",
+        "content-disposition": "^1.0.0",
+        "content-type": "^1.0.5",
+        "cookie": "^0.7.1",
+        "cookie-signature": "^1.2.1",
+        "debug": "^4.4.0",
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "etag": "^1.8.1",
+        "finalhandler": "^2.1.0",
+        "fresh": "^2.0.0",
+        "http-errors": "^2.0.0",
+        "merge-descriptors": "^2.0.0",
+        "mime-types": "^3.0.0",
+        "on-finished": "^2.4.1",
+        "once": "^1.4.0",
+        "parseurl": "^1.3.3",
+        "proxy-addr": "^2.0.7",
+        "qs": "^6.14.0",
+        "range-parser": "^1.2.1",
+        "router": "^2.2.0",
+        "send": "^1.1.0",
+        "serve-static": "^2.2.0",
+        "statuses": "^2.0.1",
+        "type-is": "^2.0.1",
+        "vary": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
     "node_modules/extend": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
       "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
       "license": "MIT"
     },
+    "node_modules/extsprintf": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
+      "integrity": "sha512-11Ndz7Nv+mvAC1j0ktTa7fAb0vLyGGX+rMHNBYQviQDGU0Hw7lhctJANqbPhu9nV9/izT/IntTgZ7Im/9LJs9g==",
+      "engines": [
+        "node >=0.6.0"
+      ],
+      "license": "MIT"
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/fast-diff": {
@@ -3042,7 +3686,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
       "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/fast-levenshtein": {
@@ -3061,6 +3704,13 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/fflate": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+      "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -3074,6 +3724,15 @@
         "node": "^10.12.0 || >=12.0.0"
       }
     },
+    "node_modules/file-type": {
+      "version": "3.9.0",
+      "resolved": "https://registry.npmjs.org/file-type/-/file-type-3.9.0.tgz",
+      "integrity": "sha512-RLoqTXE8/vPmMuTI88DAzhMYC99I8BWv7zYP4A1puo5HIjEJ5EX48ighy4ZyKMG9EDXxBgW6e++cn7d1xuFghA==",
+      "license": "MIT",
+      "engines": {
+        "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",
@@ -3086,6 +3745,23 @@
         "node": ">=8"
       }
     },
+    "node_modules/finalhandler": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-2.1.0.tgz",
+      "integrity": "sha512-/t88Ty3d5JWQbWYgaOGCCYfXRwV1+be02WqYYlL6h0lEiUAMPM8o8qKGO01YIkOHzka2up08wvgYD0mDiI+q3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.4.0",
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "on-finished": "^2.4.1",
+        "parseurl": "^1.3.3",
+        "statuses": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/find-root": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
@@ -3135,7 +3811,6 @@
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
       "integrity": "sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-callable": "^1.2.7"
@@ -3163,6 +3838,60 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/forever-agent": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
+      "integrity": "sha512-j0KLYPhm6zeac4lz3oJ3o65qvgQCcPubiyotZrXqEaG4hNagNYO8qdlUrX5vwqv9ohqeT/Z3j6+yW067yWWdUw==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.2.tgz",
+      "integrity": "sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/form-data/node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/form-data/node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/forwarded": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
+      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/fraction.js": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
@@ -3204,6 +3933,15 @@
         }
       }
     },
+    "node_modules/fresh": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-2.0.0.tgz",
+      "integrity": "sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -3238,7 +3976,6 @@
       "version": "1.1.8",
       "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.8.tgz",
       "integrity": "sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.8",
@@ -3315,7 +4052,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.1.0.tgz",
       "integrity": "sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bound": "^1.0.3",
@@ -3329,6 +4065,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/getpass": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
+      "integrity": "sha512-0fzj9JxOLfJ+XGLhR8ze3unN0KZCgZwiSSDz168VERjK8Wl8kVSdcu2kspd4s4wtAa1y/qrVRiAA0WclVsu0ng==",
+      "license": "MIT",
+      "dependencies": {
+        "assert-plus": "^1.0.0"
+      }
+    },
     "node_modules/glob": {
       "version": "10.4.5",
       "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
@@ -3405,7 +4150,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.4.tgz",
       "integrity": "sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "define-properties": "^1.2.1",
@@ -3452,11 +4196,35 @@
       "integrity": "sha512-QL7MJ2WMjm1PHWsoFrAQH/J8wUeqZvMtHO58qdekHpCfhvhSL4gSiz6vJf5EeMP0LOn3ZCprL2ki/gjED8ghVw==",
       "license": "Standard 'no charge' license: https://gsap.com/standard-license."
     },
+    "node_modules/har-schema": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
+      "integrity": "sha512-Oqluz6zhGX8cyRaTQlFMPw80bSJVG2x/cFb8ZPhUILGgHka9SsokCCOQgpveePerqidZOrT14ipqfJb7ILcW5Q==",
+      "license": "ISC",
+      "peer": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/har-validator": {
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.5.tgz",
+      "integrity": "sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==",
+      "deprecated": "this library is no longer supported",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "ajv": "^6.12.3",
+        "har-schema": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/has-bigints": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz",
       "integrity": "sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -3491,7 +4259,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.2.0.tgz",
       "integrity": "sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "dunder-proto": "^1.0.0"
@@ -3551,6 +4318,68 @@
         "react-is": "^16.7.0"
       }
     },
+    "node_modules/http-errors": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
+      "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
+      "license": "MIT",
+      "dependencies": {
+        "depd": "2.0.0",
+        "inherits": "2.0.4",
+        "setprototypeof": "1.2.0",
+        "statuses": "2.0.1",
+        "toidentifier": "1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/http-signature": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.4.0.tgz",
+      "integrity": "sha512-G5akfn7eKbpDN+8nPS/cb57YeA1jLTVxjpCj7tmm3QKPdyDy7T+qSC40e9ptydSWvkwjSXw1VbkpyEm39ukeAg==",
+      "license": "MIT",
+      "dependencies": {
+        "assert-plus": "^1.0.0",
+        "jsprim": "^2.0.2",
+        "sshpk": "^1.18.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -3603,14 +4432,12 @@
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/internal-slot": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz",
       "integrity": "sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0",
@@ -3621,6 +4448,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/ipaddr.js": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/is-arguments": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.2.0.tgz",
@@ -3641,7 +4477,6 @@
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
       "integrity": "sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.8",
@@ -3665,7 +4500,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.1.1.tgz",
       "integrity": "sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "async-function": "^1.0.0",
@@ -3685,7 +4519,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.1.0.tgz",
       "integrity": "sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "has-bigints": "^1.0.2"
@@ -3713,7 +4546,6 @@
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.2.2.tgz",
       "integrity": "sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bound": "^1.0.3",
@@ -3730,7 +4562,6 @@
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
       "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -3758,7 +4589,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.2.tgz",
       "integrity": "sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bound": "^1.0.2",
@@ -3801,7 +4631,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/is-finalizationregistry/-/is-finalizationregistry-1.1.1.tgz",
       "integrity": "sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bound": "^1.0.3"
@@ -3826,7 +4655,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.0.tgz",
       "integrity": "sha512-nPUB5km40q9e8UfN/Zc24eLlzdSf9OfKByBw9CIdw4H1giPMeA0OIJvbchsCu4npfI2QcMVBsGEBHKZ7wLTWmQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bound": "^1.0.3",
@@ -3857,7 +4685,6 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
       "integrity": "sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -3879,7 +4706,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.1.1.tgz",
       "integrity": "sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bound": "^1.0.3",
@@ -3902,6 +4728,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-promise": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-4.0.0.tgz",
+      "integrity": "sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==",
+      "license": "MIT"
+    },
     "node_modules/is-regex": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
@@ -3924,7 +4756,6 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.3.tgz",
       "integrity": "sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -3937,7 +4768,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.4.tgz",
       "integrity": "sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bound": "^1.0.3"
@@ -3953,7 +4783,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.1.1.tgz",
       "integrity": "sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bound": "^1.0.3",
@@ -3970,7 +4799,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.1.1.tgz",
       "integrity": "sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bound": "^1.0.2",
@@ -3988,7 +4816,6 @@
       "version": "1.1.15",
       "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.15.tgz",
       "integrity": "sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "which-typed-array": "^1.1.16"
@@ -4000,11 +4827,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-typedarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
+      "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==",
+      "license": "MIT"
+    },
     "node_modules/is-weakmap": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz",
       "integrity": "sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -4017,7 +4849,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.1.1.tgz",
       "integrity": "sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bound": "^1.0.3"
@@ -4033,7 +4864,6 @@
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.4.tgz",
       "integrity": "sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bound": "^1.0.3",
@@ -4050,7 +4880,6 @@
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
       "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/isexe": {
@@ -4059,6 +4888,12 @@
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
       "license": "ISC"
     },
+    "node_modules/isstream": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
+      "integrity": "sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g==",
+      "license": "MIT"
+    },
     "node_modules/iterator.prototype": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.5.tgz",
@@ -4077,6 +4912,27 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/its-fine": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/its-fine/-/its-fine-1.2.5.tgz",
+      "integrity": "sha512-fXtDA0X0t0eBYAGLVM5YsgJGsJ5jEmqZEPrGbzdf5awjv0xE7nqv3TVnvtUF060Tkes15DbDAKW/I48vsb6SyA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/react-reconciler": "^0.28.0"
+      },
+      "peerDependencies": {
+        "react": ">=18.0"
+      }
+    },
+    "node_modules/its-fine/node_modules/@types/react-reconciler": {
+      "version": "0.28.9",
+      "resolved": "https://registry.npmjs.org/@types/react-reconciler/-/react-reconciler-0.28.9.tgz",
+      "integrity": "sha512-HHM3nxyUZ3zAylX8ZEyrDNd2XZOnQ0D5XfunJF5FLQnZbHHYq4UWvW1QfelQNXv1ICNkwYhfxjwfnqivYB6bFg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/jackspeak": {
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
@@ -4120,6 +4976,12 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/jsbn": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
+      "integrity": "sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg==",
+      "license": "MIT"
+    },
     "node_modules/jsesc": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
@@ -4145,11 +5007,16 @@
       "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
       "license": "MIT"
     },
+    "node_modules/json-schema": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
+      "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==",
+      "license": "(AFL-2.1 OR BSD-3-Clause)"
+    },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
       "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/json-stable-stringify-without-jsonify": {
@@ -4159,6 +5026,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/json-stringify-safe": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
+      "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==",
+      "license": "ISC"
+    },
     "node_modules/json5": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
@@ -4172,6 +5045,21 @@
         "node": ">=6"
       }
     },
+    "node_modules/jsprim": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-2.0.2.tgz",
+      "integrity": "sha512-gqXddjPqQ6G40VdnI6T6yObEC+pDNvyP95wdQhkWkg7crHH3km5qP1FsOXEkzEQwnz6gz5qGTn1c2Y52wP3OyQ==",
+      "engines": [
+        "node >=0.6.0"
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "assert-plus": "1.0.0",
+        "extsprintf": "1.3.0",
+        "json-schema": "0.4.0",
+        "verror": "1.10.0"
+      }
+    },
     "node_modules/jsx-ast-utils": {
       "version": "3.3.5",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
@@ -4292,6 +5180,16 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/maath": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/maath/-/maath-0.6.0.tgz",
+      "integrity": "sha512-dSb2xQuP7vDnaYqfoKzlApeRcR2xtN8/f7WV/TMAkBC8552TwTLtOO0JTcSygkYMjNDPoo6V01jTw/aPi4JrMw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/three": ">=0.144.0",
+        "three": ">=0.144.0"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -4301,12 +5199,33 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/media-typer": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-1.1.0.tgz",
+      "integrity": "sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/memoize-one": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
       "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==",
       "license": "MIT"
     },
+    "node_modules/merge-descriptors": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-2.0.0.tgz",
+      "integrity": "sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -4316,6 +5235,13 @@
         "node": ">= 8"
       }
     },
+    "node_modules/meshoptimizer": {
+      "version": "0.18.1",
+      "resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-0.18.1.tgz",
+      "integrity": "sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==",
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/micromatch": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
@@ -4329,6 +5255,39 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+      "license": "MIT",
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.54.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz",
+      "integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-3.0.1.tgz",
+      "integrity": "sha512-xRc4oEhT6eaBpU1XF7AjpOFD+xQmXNB5OVKwp4tqCuBpHLS/ZbBDrc07mYTDqVMg6PfxUjjNp85O6Cd2Z/5HWA==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "^1.54.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/mini-svg-data-uri": {
       "version": "1.4.4",
       "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
@@ -4392,6 +5351,16 @@
         "thenify-all": "^1.0.0"
       }
     },
+    "node_modules/n8ao": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/n8ao/-/n8ao-1.10.0.tgz",
+      "integrity": "sha512-zWdSfXkCUz6E7LM/Occ0JRWcp0HFlS03EUZ/LrqS8WwWFK74V4h7uzwRPugkdaBsJnclab+CJnWzNnlh7ozWVQ==",
+      "license": "ISC",
+      "peerDependencies": {
+        "postprocessing": ">=6.30.0",
+        "three": ">=0.137"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
@@ -4417,6 +5386,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/negotiator": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-1.0.0.tgz",
+      "integrity": "sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/node-releases": {
       "version": "2.0.19",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
@@ -4424,6 +5402,41 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/node-telegram-bot-api": {
+      "version": "0.66.0",
+      "resolved": "https://registry.npmjs.org/node-telegram-bot-api/-/node-telegram-bot-api-0.66.0.tgz",
+      "integrity": "sha512-s4Hrg5q+VPl4/tJVG++pImxF6eb8tNJNj4KnDqAOKL6zGU34lo9RXmyAN158njwGN+v8hdNf8s9fWIYW9hPb5A==",
+      "license": "MIT",
+      "dependencies": {
+        "@cypress/request": "^3.0.1",
+        "@cypress/request-promise": "^5.0.0",
+        "array.prototype.findindex": "^2.0.2",
+        "bl": "^1.2.3",
+        "debug": "^3.2.7",
+        "eventemitter3": "^3.0.0",
+        "file-type": "^3.9.0",
+        "mime": "^1.6.0",
+        "pump": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.12"
+      }
+    },
+    "node_modules/node-telegram-bot-api/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/node-telegram-bot-api/node_modules/eventemitter3": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-3.1.2.tgz",
+      "integrity": "sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q==",
+      "license": "MIT"
+    },
     "node_modules/normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -4443,6 +5456,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/oauth-sign": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",
+      "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==",
+      "license": "Apache-2.0",
+      "peer": true,
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -4465,7 +5488,6 @@
       "version": "1.13.4",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
       "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -4503,7 +5525,6 @@
       "version": "4.1.7",
       "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.7.tgz",
       "integrity": "sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.8",
@@ -4574,11 +5595,22 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/on-finished": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+      "license": "MIT",
+      "dependencies": {
+        "ee-first": "1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
       "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "wrappy": "1"
@@ -4606,7 +5638,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/own-keys/-/own-keys-1.0.1.tgz",
       "integrity": "sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "get-intrinsic": "^1.2.6",
@@ -4694,6 +5725,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -4751,6 +5791,15 @@
       "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
       "license": "ISC"
     },
+    "node_modules/path-to-regexp": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-8.2.0.tgz",
+      "integrity": "sha512-TdrF7fW9Rphjq4RjrW0Kp2AW0Ahwu9sRGTkS6bvDi0SCwZlEZYmcfDbEsTz8RVk0EHIS/Vd1bv3JhG+1xZuAyQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/path-type": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
@@ -4760,6 +5809,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
+      "license": "MIT"
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -4806,7 +5861,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
       "integrity": "sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -4975,6 +6029,21 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "license": "MIT"
     },
+    "node_modules/postprocessing": {
+      "version": "6.37.3",
+      "resolved": "https://registry.npmjs.org/postprocessing/-/postprocessing-6.37.3.tgz",
+      "integrity": "sha512-2FzfZg41Ml/ddvSalLdCz7H53Wmr/ZvK238fauTG1CI97+65BDgo1dNH6AKhAWc5q9ngpyG5EYiXVbNCl2t1iA==",
+      "license": "Zlib",
+      "peerDependencies": {
+        "three": ">= 0.157.0 < 0.177.0"
+      }
+    },
+    "node_modules/potpack": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/potpack/-/potpack-1.0.2.tgz",
+      "integrity": "sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ==",
+      "license": "ISC"
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -4985,6 +6054,12 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+      "license": "MIT"
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -4996,16 +6071,71 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/proxy-addr": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
+      "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
+      "license": "MIT",
+      "dependencies": {
+        "forwarded": "0.2.0",
+        "ipaddr.js": "1.9.1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/psl": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/psl/-/psl-1.15.0.tgz",
+      "integrity": "sha512-JZd3gMVBAVQkSs6HdNZo9Sdo0LNcQeMNP3CozBJb3JYC/QUYZTnKxP+f8oWRX4rHP5EurWxqAHTSwUCjlNKa1w==",
+      "license": "MIT",
+      "dependencies": {
+        "punycode": "^2.3.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/lupomontero"
+      }
+    },
+    "node_modules/pump": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-2.0.1.tgz",
+      "integrity": "sha512-ruPMNRkN3MHP1cWJc9OWr+T/xDP0jhXYCLfJcBuX54hhfIBnaQmAUMfDcG4DM5UMWByBbJY69QSphm3jtDKIkA==",
+      "license": "MIT",
+      "dependencies": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
       "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
       }
     },
+    "node_modules/qs": {
+      "version": "6.14.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.0.tgz",
+      "integrity": "sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/querystringify": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
+      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==",
+      "license": "MIT"
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -5054,6 +6184,36 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/raf-schd": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.3.tgz",
+      "integrity": "sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==",
+      "license": "MIT"
+    },
+    "node_modules/range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/raw-body": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-3.0.0.tgz",
+      "integrity": "sha512-RmkhL8CAyCRPXCE28MMH0z2PNWQBNk2Q09ZdxM9IOOXwxwZbN+qbWaatPkdkWIKL2ZVDImrN/pK5HTRz2PcS4g==",
+      "license": "MIT",
+      "dependencies": {
+        "bytes": "3.1.2",
+        "http-errors": "2.0.0",
+        "iconv-lite": "0.6.3",
+        "unpipe": "1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/react": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
@@ -5066,6 +6226,32 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-beautiful-dnd": {
+      "version": "13.1.1",
+      "resolved": "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-13.1.1.tgz",
+      "integrity": "sha512-0Lvs4tq2VcrEjEgDXHjT98r+63drkKEgqyxdA7qD3mvKwga6a5SscbdLPO2IExotU1jW8L0Ksdl0Cj2AF67nPQ==",
+      "deprecated": "react-beautiful-dnd is now deprecated. Context and options: https://github.com/atlassian/react-beautiful-dnd/issues/2672",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@babel/runtime": "^7.9.2",
+        "css-box-model": "^1.2.0",
+        "memoize-one": "^5.1.1",
+        "raf-schd": "^4.0.2",
+        "react-redux": "^7.2.0",
+        "redux": "^4.0.4",
+        "use-memo-one": "^1.1.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.5 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.5 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/react-beautiful-dnd/node_modules/memoize-one": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
+      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==",
+      "license": "MIT"
+    },
     "node_modules/react-chartjs-2": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-5.3.0.tgz",
@@ -5161,6 +6347,62 @@
         "react-dom": "^16 || ^17 || ^18"
       }
     },
+    "node_modules/react-reconciler": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.27.0.tgz",
+      "integrity": "sha512-HmMDKciQjYmBRGuuhIaKA1ba/7a+UsM5FzOZsMO2JYHt9Jh8reCb7j1eDC95NOyUlKM9KRyvdx0flBuDvYSBoA==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.21.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0"
+      }
+    },
+    "node_modules/react-reconciler/node_modules/scheduler": {
+      "version": "0.21.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.21.0.tgz",
+      "integrity": "sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "node_modules/react-redux": {
+      "version": "7.2.9",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.9.tgz",
+      "integrity": "sha512-Gx4L3uM182jEEayZfRbI/G11ZpYdNAnBs70lFVMNdHJI76XYtR+7m0MN+eAs7UHBPhWXcnFPaS+9owSCJQHNpQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.15.4",
+        "@types/react-redux": "^7.1.20",
+        "hoist-non-react-statics": "^3.3.2",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.7.2",
+        "react-is": "^17.0.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8.3 || ^17 || ^18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-redux/node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+      "license": "MIT"
+    },
     "node_modules/react-refresh": {
       "version": "0.17.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
@@ -5225,16 +6467,16 @@
       }
     },
     "node_modules/react-toastify": {
-      "version": "10.0.6",
-      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-10.0.6.tgz",
-      "integrity": "sha512-yYjp+omCDf9lhZcrZHKbSq7YMuK0zcYkDFTzfRFgTXkTFHZ1ToxwAonzA4JI5CxA91JpjFLmwEsZEgfYfOqI1A==",
+      "version": "11.0.5",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-11.0.5.tgz",
+      "integrity": "sha512-EpqHBGvnSTtHYhCPLxML05NLY2ZX0JURbAdNYa6BUkk+amz4wbKBQvoKQAB0ardvSarUBuY4Q4s1sluAzZwkmA==",
       "license": "MIT",
       "dependencies": {
-        "clsx": "^2.1.0"
+        "clsx": "^2.1.1"
       },
       "peerDependencies": {
-        "react": ">=18",
-        "react-dom": ">=18"
+        "react": "^18 || ^19",
+        "react-dom": "^18 || ^19"
       }
     },
     "node_modules/react-transition-group": {
@@ -5253,6 +6495,21 @@
         "react-dom": ">=16.6.0"
       }
     },
+    "node_modules/react-use-measure": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.7.tgz",
+      "integrity": "sha512-KrvcAo13I/60HpwGO5jpW7E9DfusKyLPLvuHlUyP5zqnmAPhNc6qTRjUQrdTADl0lpPpDVU2/Gg51UlOGHXbdg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.13",
+        "react-dom": ">=16.13"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -5262,6 +6519,33 @@
         "pify": "^2.3.0"
       }
     },
+    "node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "license": "MIT",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/readable-stream/node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+      "license": "MIT"
+    },
+    "node_modules/readable-stream/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT"
+    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -5274,11 +6558,19 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/redux": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
+      "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.9.2"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
       "integrity": "sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.8",
@@ -5317,6 +6609,165 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/request": {
+      "version": "2.88.2",
+      "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
+      "integrity": "sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==",
+      "deprecated": "request has been deprecated, see https://github.com/request/request/issues/3142",
+      "license": "Apache-2.0",
+      "peer": true,
+      "dependencies": {
+        "aws-sign2": "~0.7.0",
+        "aws4": "^1.8.0",
+        "caseless": "~0.12.0",
+        "combined-stream": "~1.0.6",
+        "extend": "~3.0.2",
+        "forever-agent": "~0.6.1",
+        "form-data": "~2.3.2",
+        "har-validator": "~5.1.3",
+        "http-signature": "~1.2.0",
+        "is-typedarray": "~1.0.0",
+        "isstream": "~0.1.2",
+        "json-stringify-safe": "~5.0.1",
+        "mime-types": "~2.1.19",
+        "oauth-sign": "~0.9.0",
+        "performance-now": "^2.1.0",
+        "qs": "~6.5.2",
+        "safe-buffer": "^5.1.2",
+        "tough-cookie": "~2.5.0",
+        "tunnel-agent": "^0.6.0",
+        "uuid": "^3.3.2"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/request-promise-core": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/request-promise-core/-/request-promise-core-1.1.3.tgz",
+      "integrity": "sha512-QIs2+ArIGQVp5ZYbWD5ZLCY29D5CfWizP8eWnm8FoGD1TX61veauETVQbrV60662V0oFBkrDOuaBI8XgtuyYAQ==",
+      "license": "ISC",
+      "dependencies": {
+        "lodash": "^4.17.15"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      },
+      "peerDependencies": {
+        "request": "^2.34"
+      }
+    },
+    "node_modules/request/node_modules/form-data": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
+      "integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.6",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 0.12"
+      }
+    },
+    "node_modules/request/node_modules/http-signature": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
+      "integrity": "sha512-CAbnr6Rz4CYQkLYUtSNXxQPUH2gK8f3iWexVlsnMeD+GjlsQ0Xsy1cOX+mN3dtxYomRy21CiOzU8Uhw6OwncEQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "assert-plus": "^1.0.0",
+        "jsprim": "^1.2.2",
+        "sshpk": "^1.7.0"
+      },
+      "engines": {
+        "node": ">=0.8",
+        "npm": ">=1.3.7"
+      }
+    },
+    "node_modules/request/node_modules/jsprim": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.2.tgz",
+      "integrity": "sha512-P2bSOMAc/ciLz6DzgjVlGJP9+BrJWu5UDGK70C2iweC5QBIeFf0ZXRvGjEj2uYgrY2MkAAhsSWHDWlFtEroZWw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "assert-plus": "1.0.0",
+        "extsprintf": "1.3.0",
+        "json-schema": "0.4.0",
+        "verror": "1.10.0"
+      },
+      "engines": {
+        "node": ">=0.6.0"
+      }
+    },
+    "node_modules/request/node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/request/node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/request/node_modules/qs": {
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.3.tgz",
+      "integrity": "sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA==",
+      "license": "BSD-3-Clause",
+      "peer": true,
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/request/node_modules/tough-cookie": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
+      "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
+      "license": "BSD-3-Clause",
+      "peer": true,
+      "dependencies": {
+        "psl": "^1.1.28",
+        "punycode": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/request/node_modules/uuid": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+      "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
+      "deprecated": "Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.",
+      "license": "MIT",
+      "peer": true,
+      "bin": {
+        "uuid": "bin/uuid"
+      }
+    },
+    "node_modules/requires-port": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
+      "license": "MIT"
+    },
     "node_modules/resolve": {
       "version": "2.0.0-next.5",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.5.tgz",
@@ -5433,6 +6884,22 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/router": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/router/-/router-2.2.0.tgz",
+      "integrity": "sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.4.0",
+        "depd": "^2.0.0",
+        "is-promise": "^4.0.0",
+        "parseurl": "^1.3.3",
+        "path-to-regexp": "^8.0.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -5460,7 +6927,6 @@
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.3.tgz",
       "integrity": "sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.8",
@@ -5476,11 +6942,30 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/safe-push-apply": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/safe-push-apply/-/safe-push-apply-1.0.0.tgz",
       "integrity": "sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0",
@@ -5497,7 +6982,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.1.0.tgz",
       "integrity": "sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bound": "^1.0.2",
@@ -5511,6 +6995,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "license": "MIT"
+    },
     "node_modules/scheduler": {
       "version": "0.23.2",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
@@ -5530,6 +7020,43 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/send": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/send/-/send-1.2.0.tgz",
+      "integrity": "sha512-uaW0WwXKpL9blXE2o0bRhoL2EGXIrZxQ2ZQ4mgcfoBxdFmQold+qWsD2jLrfZ0trjKL6vOw0j//eAwcALFjKSw==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.3.5",
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "etag": "^1.8.1",
+        "fresh": "^2.0.0",
+        "http-errors": "^2.0.0",
+        "mime-types": "^3.0.1",
+        "ms": "^2.1.3",
+        "on-finished": "^2.4.1",
+        "range-parser": "^1.2.1",
+        "statuses": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/serve-static": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-2.2.0.tgz",
+      "integrity": "sha512-61g9pCh0Vnh7IutZjtLGGpTA355+OPn2TyDv/6ivP2h/AdAVX9azsoxmg2/M6nZeQZNYBEwIcsne1mJd9oQItQ==",
+      "license": "MIT",
+      "dependencies": {
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "parseurl": "^1.3.3",
+        "send": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
     "node_modules/set-function-length": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
@@ -5566,7 +7093,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/set-proto/-/set-proto-1.0.0.tgz",
       "integrity": "sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "dunder-proto": "^1.0.1",
@@ -5577,6 +7103,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/setprototypeof": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
+      "license": "ISC"
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -5602,7 +7134,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
       "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0",
@@ -5622,7 +7153,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
       "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0",
@@ -5639,7 +7169,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
       "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bound": "^1.0.2",
@@ -5658,7 +7187,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
       "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bound": "^1.0.2",
@@ -5704,6 +7232,64 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/sshpk": {
+      "version": "1.18.0",
+      "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.18.0.tgz",
+      "integrity": "sha512-2p2KJZTSqQ/I3+HX42EpYOa2l3f8Erv8MWKsy2I9uf4wA7yFIkXRffYdsx86y6z4vHtV8u7g+pPlr8/4ouAxsQ==",
+      "license": "MIT",
+      "dependencies": {
+        "asn1": "~0.2.3",
+        "assert-plus": "^1.0.0",
+        "bcrypt-pbkdf": "^1.0.0",
+        "dashdash": "^1.12.0",
+        "ecc-jsbn": "~0.1.1",
+        "getpass": "^0.1.1",
+        "jsbn": "~0.1.0",
+        "safer-buffer": "^2.0.2",
+        "tweetnacl": "~0.14.0"
+      },
+      "bin": {
+        "sshpk-conv": "bin/sshpk-conv",
+        "sshpk-sign": "bin/sshpk-sign",
+        "sshpk-verify": "bin/sshpk-verify"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/statuses": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
+      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/stealthy-require": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/stealthy-require/-/stealthy-require-1.1.1.tgz",
+      "integrity": "sha512-ZnWpYnYugiOVEY5GkcuJK1io5V8QmNYChG62gSit9pQVGErXtrKuPC55ITaVSukmMta5qpMU7vqLt2Lnni4f/g==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/string_decoder/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT"
+    },
     "node_modules/string-width": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
@@ -5806,7 +7392,6 @@
       "version": "1.2.10",
       "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.10.tgz",
       "integrity": "sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.8",
@@ -5828,7 +7413,6 @@
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.9.tgz",
       "integrity": "sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.8",
@@ -5847,7 +7431,6 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz",
       "integrity": "sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.7",
@@ -5964,6 +7547,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/suspend-react": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/suspend-react/-/suspend-react-0.1.3.tgz",
+      "integrity": "sha512-aqldKgX9aZqpoDp3e8/BZ8Dm7x1pJl+qI3ZKxDN0i/IQTWUwBx/ManmlVJ3wowqbno6c2bmiIfs+Um6LbsjJyQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=17.0"
+      }
+    },
     "node_modules/tabbable": {
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
@@ -6055,6 +7647,59 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/three": {
+      "version": "0.167.1",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.167.1.tgz",
+      "integrity": "sha512-gYTLJA/UQip6J/tJvl91YYqlZF47+D/kxiWrbTon35ZHlXEN0VOo+Qke2walF1/x92v55H6enomymg4Dak52kw==",
+      "license": "MIT"
+    },
+    "node_modules/three-stdlib": {
+      "version": "2.36.0",
+      "resolved": "https://registry.npmjs.org/three-stdlib/-/three-stdlib-2.36.0.tgz",
+      "integrity": "sha512-kv0Byb++AXztEGsULgMAs8U2jgUdz6HPpAB/wDJnLiLlaWQX2APHhiTJIN7rqW+Of0eRgcp7jn05U1BsCP3xBA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/draco3d": "^1.4.0",
+        "@types/offscreencanvas": "^2019.6.4",
+        "@types/webxr": "^0.5.2",
+        "draco3d": "^1.4.1",
+        "fflate": "^0.6.9",
+        "potpack": "^1.0.1"
+      },
+      "peerDependencies": {
+        "three": ">=0.128.0"
+      }
+    },
+    "node_modules/three-stdlib/node_modules/fflate": {
+      "version": "0.6.10",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.6.10.tgz",
+      "integrity": "sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg==",
+      "license": "MIT"
+    },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
+      "license": "MIT"
+    },
+    "node_modules/tldts": {
+      "version": "6.1.86",
+      "resolved": "https://registry.npmjs.org/tldts/-/tldts-6.1.86.tgz",
+      "integrity": "sha512-WMi/OQ2axVTf/ykqCQgXiIct+mSQDFdH2fkwhPwgEwvJ1kSzZRiinb0zF2Xb8u4+OqPChmyI6MEu4EezNJz+FQ==",
+      "license": "MIT",
+      "dependencies": {
+        "tldts-core": "^6.1.86"
+      },
+      "bin": {
+        "tldts": "bin/cli.js"
+      }
+    },
+    "node_modules/tldts-core": {
+      "version": "6.1.86",
+      "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-6.1.86.tgz",
+      "integrity": "sha512-Je6p7pkk+KMzMv2XXKmAE3McmolOQFdxkKw0R8EYNr7sELW46JqnNeTX8ybPiQgvg1ymCoF8LXs5fzFaZvJPTA==",
+      "license": "MIT"
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -6067,6 +7712,27 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/toidentifier": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/tough-cookie": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-5.1.2.tgz",
+      "integrity": "sha512-FVDYdxtnj0G6Qm/DhNPSb8Ju59ULcup3tuJxkFb5K8Bv2pUXILbf0xZWU8PX8Ov19OXljbUyveOFwRMwkXzO+A==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tldts": "^6.1.32"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/ts-interface-checker": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
@@ -6079,6 +7745,24 @@
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
       "license": "0BSD"
     },
+    "node_modules/tunnel-agent": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
+      "integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "safe-buffer": "^5.0.1"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/tweetnacl": {
+      "version": "0.14.5",
+      "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
+      "integrity": "sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA==",
+      "license": "Unlicense"
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -6105,11 +7789,24 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/type-is": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-2.0.1.tgz",
+      "integrity": "sha512-OZs6gsjF4vMp32qrCbiVSkrFmXtG/AZhY3t0iAMrMBiAZyV9oALtXO8hsrHbMXF9x6L3grlFuwW2oAz7cav+Gw==",
+      "license": "MIT",
+      "dependencies": {
+        "content-type": "^1.0.5",
+        "media-typer": "^1.1.0",
+        "mime-types": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/typed-array-buffer": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz",
       "integrity": "sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bound": "^1.0.3",
@@ -6124,7 +7821,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.3.tgz",
       "integrity": "sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.8",
@@ -6144,7 +7840,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.4.tgz",
       "integrity": "sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "available-typed-arrays": "^1.0.7",
@@ -6166,7 +7861,6 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.7.tgz",
       "integrity": "sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.7",
@@ -6187,7 +7881,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz",
       "integrity": "sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bound": "^1.0.3",
@@ -6211,6 +7904,24 @@
       "optional": true,
       "peer": true
     },
+    "node_modules/universalify": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
+      "integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
+    "node_modules/unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",
@@ -6246,12 +7957,21 @@
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
       "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
-      "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/url-parse": {
+      "version": "1.5.10",
+      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
+      "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
+      "license": "MIT",
+      "dependencies": {
+        "querystringify": "^2.1.1",
+        "requires-port": "^1.0.0"
+      }
+    },
     "node_modules/use-isomorphic-layout-effect": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.2.1.tgz",
@@ -6266,6 +7986,15 @@
         }
       }
     },
+    "node_modules/use-memo-one": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.3.tgz",
+      "integrity": "sha512-g66/K7ZQGYrI6dy8GLpVcMsBp4s17xNkYJVSMvTEevGy3nDxHOfE6z8BVE22+5G5x7t3+bhzrlTDB7ObrEE0cQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -6285,6 +8014,35 @@
         "uuid": "dist/esm/bin/uuid"
       }
     },
+    "node_modules/vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/verror": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
+      "integrity": "sha512-ZZKSmDAEFOijERBLkmYfJ+vmk3w+7hOLYDNkRCuRuMJGEmqYNCNLyBBFwWKVMhfwaEF3WOd0Zlw86U/WC/+nYw==",
+      "engines": [
+        "node >=0.6.0"
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "assert-plus": "^1.0.0",
+        "core-util-is": "1.0.2",
+        "extsprintf": "^1.2.0"
+      }
+    },
+    "node_modules/verror/node_modules/core-util-is": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
+      "integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==",
+      "license": "MIT"
+    },
     "node_modules/vite": {
       "version": "5.4.18",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.18.tgz",
@@ -6364,7 +8122,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.1.1.tgz",
       "integrity": "sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-bigint": "^1.1.0",
@@ -6384,7 +8141,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/which-builtin-type/-/which-builtin-type-1.2.1.tgz",
       "integrity": "sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bound": "^1.0.2",
@@ -6412,7 +8168,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.2.tgz",
       "integrity": "sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-map": "^2.0.3",
@@ -6431,7 +8186,6 @@
       "version": "1.1.19",
       "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.19.tgz",
       "integrity": "sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "available-typed-arrays": "^1.0.7",
@@ -6551,7 +8305,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/yallist": {
@@ -6585,6 +8338,23 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zustand": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-3.7.2.tgz",
+      "integrity": "sha512-PIJDIZKtokhof+9+60cpockVOq05sJzHCriyvaLBmEJixseQ1a5Kdov6fWZfWOu5SK9c+FhH1jU0tntLxRJYMA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        }
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 31deacc..32e0a1b 100644
--- a/package.json
+++ b/package.json
@@ -7,27 +7,37 @@
     "dev": "vite",
     "build": "vite build",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "server": "node server.js",
+    "dev:full": "concurrently \"npm run dev\" \"npm run server\""
   },
   "dependencies": {
+    "@react-three/fiber": "^8.18.0",
+    "@react-three/postprocessing": "^2.19.1",
     "@tailwindcss/forms": "^0.5.10",
     "@tailwindcss/typography": "^0.5.16",
     "chart.js": "^4.4.3",
+    "cors": "^2.8.5",
     "dompurify": "^3.2.5",
+    "express": "^5.1.0",
     "framer-motion": "^11.18.2",
     "gsap": "^3.13.0",
+    "node-telegram-bot-api": "^0.66.0",
     "pocketbase": "^0.21.3",
+    "postprocessing": "^6.37.3",
     "react": "^18.2.0",
+    "react-beautiful-dnd": "^13.1.1",
     "react-chartjs-2": "^5.2.0",
     "react-datepicker": "^8.3.0",
     "react-dom": "^18.2.0",
-    "react-fast-marquee": "^1.6.4",
+    "react-fast-marquee": "^1.6.5",
     "react-hot-toast": "^2.5.2",
     "react-icons": "^5.5.0",
     "react-quill": "^2.0.0",
     "react-router-dom": "^6.23.1",
     "react-select": "^5.10.1",
-    "react-toastify": "^10.0.5",
+    "react-toastify": "^11.0.5",
+    "three": "^0.167.1",
     "uuid": "^11.1.0"
   },
   "devDependencies": {
diff --git a/public/icon.png b/public/icon.png
index 8b13789..b85a870 100644
Binary files a/public/icon.png and b/public/icon.png differ
diff --git a/public/logo.png b/public/logo.png
index 8b13789..72b37c2 100644
Binary files a/public/logo.png and b/public/logo.png differ
diff --git a/server.js b/server.js
new file mode 100644
index 0000000..757f09b
--- /dev/null
+++ b/server.js
@@ -0,0 +1,176 @@
+import express from 'express';
+import cors from 'cors';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+import generateReviewRouter from './src/api/generate-review.js';
+import TelegramBot from 'node-telegram-bot-api';
+import PocketBase from 'pocketbase';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const app = express();
+const port = process.env.PORT || 3000;
+
+// Инициализация Telegram бота
+const bot = new TelegramBot('8057681898:AAE0BCbcg6M0BgREaOeXsjK7yXBHVpOIs9c', { polling: false });
+
+// Инициализация PocketBase
+const pb = new PocketBase('https://pocketbase.campfiregg.ru');
+
+// Middleware
+app.use(cors());
+app.use(express.json());
+
+// API routes
+app.use('/api', generateReviewRouter);
+
+// Telegram авторизация
+app.post('/api/auth/telegram', async (req, res) => {
+  try {
+    const { id, first_name, username, photo_url, auth_date, hash } = req.body;
+    
+    if (!id) {
+      return res.status(400).json({
+        success: false,
+        error: 'Отсутствует ID пользователя Telegram'
+      });
+    }
+
+    console.log('Получены данные от Telegram:', { id, first_name, username });
+
+    // Очищаем и валидируем данные
+    const cleanUsername = (username || `user_${id}`).replace(/[^a-zA-Z0-9_]/g, '_').toLowerCase();
+    const cleanFirstName = (first_name || '').replace(/[<>]/g, '');
+
+    // Проверяем, существует ли пользователь с таким Telegram ID
+    const users = await pb.collection('users').getList(1, 1, {
+      filter: `telegram_id = ${id}`
+    });
+
+    let user;
+    if (users.items.length > 0) {
+      // Если пользователь существует, используем его
+      user = users.items[0];
+      console.log('Найден существующий пользователь:', user.id);
+    } else {
+      // Генерируем случайный пароль для пользователя
+      const randomPassword = Math.random().toString(36).slice(-8);
+      
+      // Если пользователь не существует, создаем нового
+      try {
+        const userData = {
+          username: cleanUsername,
+          login: cleanUsername,
+          telegram_id: id,
+          telegram_username: username,
+          telegram_first_name: cleanFirstName,
+          telegram_photo_url: photo_url,
+          email: `${cleanUsername}@telegram.user`,
+          password: randomPassword,
+          passwordConfirm: randomPassword,
+          verified: true
+        };
+
+        console.log('Создаем пользователя с данными:', userData);
+        
+        user = await pb.collection('users').create(userData);
+        console.log('Создан новый пользователь:', user.id);
+      } catch (createError) {
+        console.error('Ошибка при создании пользователя:', createError);
+        return res.status(500).json({
+          success: false,
+          error: 'Ошибка при создании пользователя: ' + (createError.data?.message || createError.message)
+        });
+      }
+    }
+    
+    // Генерируем JWT токен
+    const token = `telegram_${id}_${Date.now()}`;
+    
+    res.json({
+      success: true,
+      token,
+      user: {
+        id: user.id,
+        username: user.username,
+        login: user.login,
+        telegram_id: id,
+        telegram_username: username,
+        telegram_first_name: first_name,
+        telegram_photo_url: photo_url
+      }
+    });
+  } catch (error) {
+    console.error('Ошибка авторизации через Telegram:', error);
+    res.status(500).json({
+      success: false,
+      error: 'Ошибка авторизации: ' + (error.data?.message || error.message)
+    });
+  }
+});
+
+// Привязка Telegram к существующему профилю
+app.post('/api/auth/telegram/link', async (req, res) => {
+  try {
+    const { id, first_name, username, photo_url, auth_date, hash, userId } = req.body;
+    
+    if (!userId) {
+      return res.status(400).json({
+        success: false,
+        error: 'Не указан ID пользователя'
+      });
+    }
+
+    // Проверяем, не привязан ли уже этот Telegram ID к другому аккаунту
+    const existingUsers = await pb.collection('users').getList(1, 1, {
+      filter: `telegram_id = ${id}`
+    });
+
+    if (existingUsers.items.length > 0) {
+      return res.status(400).json({
+        success: false,
+        error: 'Этот Telegram аккаунт уже привязан к другому профилю'
+      });
+    }
+
+    // Обновляем профиль пользователя
+    const user = await pb.collection('users').update(userId, {
+      telegram_id: id,
+      telegram_username: username,
+      telegram_first_name: first_name,
+      telegram_photo_url: photo_url
+    });
+    
+    res.json({
+      success: true,
+      user: {
+        id: user.id,
+        username: user.username,
+        telegram_id: id,
+        telegram_username: username,
+        telegram_first_name: first_name,
+        telegram_photo_url: photo_url
+      }
+    });
+  } catch (error) {
+    console.error('Ошибка привязки Telegram:', error);
+    res.status(500).json({
+      success: false,
+      error: 'Ошибка привязки Telegram'
+    });
+  }
+});
+
+// Serve static files in production
+if (process.env.NODE_ENV === 'production') {
+  app.use(express.static(join(__dirname, 'dist')));
+  
+  app.get('*', (req, res) => {
+    res.sendFile(join(__dirname, 'dist', 'index.html'));
+  });
+}
+
+app.listen(port, () => {
+  console.log(`Server is running on port ${port}`);
+}); 
\ No newline at end of file
diff --git a/src/App.jsx b/src/App.jsx
index da0aa8a..94efd6d 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,116 +1,54 @@
-import React, { useEffect } from 'react';
-import { Routes, Route } from 'react-router-dom';
+import React, { useRef, useEffect, useState } from 'react';
 import { AuthProvider } from './contexts/AuthContext';
 import { ProfileActionsProvider } from './contexts/ProfileActionsContext';
-import { ClickSparkProvider, useClickSpark } from './contexts/ClickSparkContext';
-import ClickSpark from './components/reactbits/Animations/ClickSpark/ClickSpark';
-import AuthRoute from './components/auth/AuthRoute';
-import GuestRoute from './components/auth/GuestRoute';
+import { ClickSparkProvider } from './contexts/ClickSparkContext';
+import { MediaProvider } from './contexts/MediaContext';
+import { withErrorBoundary } from './hooks/useErrorBoundary';
 import Header from './components/layout/Header';
 import Footer from './components/layout/Footer';
-import HomePage from './pages/HomePage';
-import CatalogPage from './pages/CatalogPage';
-import MediaOverviewPage from './pages/MediaOverviewPage';
-import ProfilePage from './pages/ProfilePage';
-import RatingPage from './pages/RatingPage';
-import AdminLayout from './components/admin/AdminLayout';
-import AdminDashboard from './pages/admin/AdminDashboard';
-import AdminMediaPage from './pages/admin/AdminMediaPage';
-import AdminUsersPage from './pages/admin/AdminUsersPage';
-import AdminSeasonsPage from './pages/admin/AdminSeasonsPage';
-import AdminAchievementsPage from './pages/admin/AdminAchievementsPage';
-import AdminSupportPage from './pages/admin/AdminSupportPage';
-import NotFoundPage from './pages/NotFoundPage';
-import LoginPage from './pages/LoginPage';
-import RegisterPage from './pages/RegisterPage';
-import ForgotPasswordPage from './pages/ForgotPasswordPage';
-import SupportTicketForm from './components/support/SupportTicketForm';
-import PrivacyPolicyPage from './pages/legal/PrivacyPolicyPage';
-import TermsOfServicePage from './pages/legal/TermsOfServicePage';
-import UserAgreementPage from './pages/legal/UserAgreementPage';
-import ProfileSettingsPage from './pages/ProfileSettingsPage';
-import AdminSuggestionsPage from './pages/admin/AdminSuggestionsPage';
-import AdminRoute from './components/auth/AdminRoute';
-import SupportPage from './pages/SupportPage';
+import AppRoutes from './routes';
+import MobileApp from './mobile/App';
 import './index.css';
 
 const AppContent = () => {
-  const { addSpark } = useClickSpark();
+  const [isMobile, setIsMobile] = useState(false);
 
   useEffect(() => {
-    const handleClick = (e) => {
-      console.log('[ClickSpark] Добавление искры:', e.clientX, e.clientY);
-      addSpark(e.clientX, e.clientY);
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth <= 768);
     };
 
-    document.addEventListener('click', handleClick);
-    return () => document.removeEventListener('click', handleClick);
-  }, [addSpark]);
+    checkMobile();
+    window.addEventListener('resize', checkMobile);
+
+    return () => window.removeEventListener('resize', checkMobile);
+  }, []);
+
+  if (isMobile) {
+    return <MobileApp />;
+  }
 
   return (
-        <div className="flex flex-col min-h-screen bg-campfire-dark text-campfire-light">
-      <ClickSpark
-        sparkColor="#FFA500"
-        sparkSize={10}
-        sparkRadius={15}
-        sparkCount={8}
-        duration={400}
-        easing="cubic-bezier(0.4, 0, 0.2, 1)"
-        extraScale={1.0}
-      />
-          <Header />
+    <div className="flex flex-col min-h-screen bg-campfire-dark text-campfire-light">
+      <Header />
       <main className="flex-grow pt-16 pb-32">
-            <Routes>
-              <Route path="/" element={<HomePage />} />
-              <Route path="/catalog" element={<CatalogPage />} />
-              <Route path="/media/:path" element={<MediaOverviewPage />} />
-              <Route path="/rating" element={<RatingPage />} />
-          <Route path="/forgot-password" element={<ForgotPasswordPage />} />
-
-          <Route path="/profile" element={<AuthRoute><ProfilePage /></AuthRoute>} />
-          <Route path="/profile/:username" element={<ProfilePage />} />
-          <Route path="/settings" element={<AuthRoute><ProfileSettingsPage /></AuthRoute>} />
-
-          <Route path="/auth" element={<GuestRoute />}>
-            <Route path="login" element={<LoginPage />} />
-            <Route path="register" element={<RegisterPage />} />
-              </Route>
-
-          <Route path="/admin" element={<AdminRoute />}>
-                <Route element={<AdminLayout />}>
-                  <Route index element={<AdminDashboard />} />
-                  <Route path="media" element={<AdminMediaPage />} />
-                  <Route path="media/:mediaId/seasons" element={<AdminSeasonsPage />} />
-              <Route path="users" element={<AdminUsersPage />} />
-              <Route path="seasons" element={<AdminSeasonsPage />} />
-                  <Route path="achievements" element={<AdminAchievementsPage />} />
-              <Route path="support" element={<AdminSupportPage />} />
-              <Route path="suggestions" element={<AdminSuggestionsPage />} />
-                </Route>
-              </Route>
-
-          <Route path="/support" element={<AuthRoute />}>
-            <Route index element={<SupportPage />} />
-          </Route>
-
-          <Route path="/privacy-policy" element={<PrivacyPolicyPage />} />
-          <Route path="/terms-of-service" element={<TermsOfServicePage />} />
-          <Route path="/user-agreement" element={<UserAgreementPage />} />
-
-              <Route path="*" element={<NotFoundPage />} />
-            </Routes>
-          </main>
-          <Footer />
-        </div>
+        <AppRoutes />
+      </main>
+      <Footer />
+    </div>
   );
 };
 
+const AppContentWithErrorBoundary = withErrorBoundary(AppContent);
+
 function App() {
   return (
     <AuthProvider>
       <ProfileActionsProvider>
         <ClickSparkProvider>
-          <AppContent />
+          <MediaProvider>
+            <AppContentWithErrorBoundary />
+          </MediaProvider>
         </ClickSparkProvider>
       </ProfileActionsProvider>
     </AuthProvider>
diff --git a/src/api/generate-review.js b/src/api/generate-review.js
new file mode 100644
index 0000000..cf756dc
--- /dev/null
+++ b/src/api/generate-review.js
@@ -0,0 +1,95 @@
+import { Router } from 'express';
+
+const router = Router();
+
+// Функция для задержки
+const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));
+
+router.post('/generate-review', async (req, res) => {
+  try {
+    const { prompt, model, temperature, max_tokens } = req.body;
+
+    const headers = {
+      'Content-Type': 'application/json',
+      'Authorization': 'Bearer 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',
+      'HTTP-Referer': 'http://localhost:5173',
+      'X-Title': 'Campfire Critics'
+    };
+
+    console.log('Request headers:', headers);
+
+    // Максимальное количество попыток
+    const maxRetries = 3;
+    let retryCount = 0;
+    let lastError = null;
+
+    while (retryCount < maxRetries) {
+      try {
+        const response = await fetch('https://openrouter.ai/api/v1/chat/completions', {
+          method: 'POST',
+          headers,
+          body: JSON.stringify({
+            model,
+            messages: [
+              {
+                role: 'user',
+                content: [
+                  {
+                    type: 'text',
+                    text: prompt
+                  }
+                ]
+              }
+            ],
+            temperature,
+            max_tokens
+          })
+        });
+
+        if (response.status === 429) {
+          console.log(`Rate limit hit, attempt ${retryCount + 1} of ${maxRetries}`);
+          // Увеличиваем время ожидания с каждой попыткой
+          await delay(Math.pow(2, retryCount) * 1000);
+          retryCount++;
+          continue;
+        }
+
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => null);
+          console.error('OpenRouter API Error:', errorData);
+          console.error('Response status:', response.status);
+          console.error('Response headers:', response.headers);
+          return res.status(response.status).json({
+            error: {
+              message: errorData?.error?.message || 'Ошибка при генерации рецензии',
+              code: response.status
+            }
+          });
+        }
+
+        const data = await response.json();
+        return res.json(data);
+      } catch (error) {
+        lastError = error;
+        console.error(`Attempt ${retryCount + 1} failed:`, error);
+        retryCount++;
+        if (retryCount < maxRetries) {
+          await delay(Math.pow(2, retryCount) * 1000);
+        }
+      }
+    }
+
+    // Если все попытки исчерпаны
+    throw lastError || new Error('Превышен лимит запросов к API');
+  } catch (error) {
+    console.error('Error in generate-review endpoint:', error);
+    res.status(500).json({
+      error: {
+        message: error.message || 'Внутренняя ошибка сервера',
+        code: 500
+      }
+    });
+  }
+});
+
+export default router; 
\ No newline at end of file
diff --git a/src/assets/cat.png b/src/assets/cat.png
new file mode 100644
index 0000000..d069010
Binary files /dev/null and b/src/assets/cat.png differ
diff --git a/src/components/LatestReviewsMarquee.jsx b/src/components/LatestReviewsMarquee.jsx
index 92d01e9..bf69710 100644
--- a/src/components/LatestReviewsMarquee.jsx
+++ b/src/components/LatestReviewsMarquee.jsx
@@ -64,7 +64,7 @@ const LatestReviewsMarquee = () => {
 
           const username = user.username || 'Анонимный пользователь';
           const avatarUrl = user.profile_picture ? getFileUrl(user, 'profile_picture', { thumb: '40x40' }) : null;
-          const userProfileLink = user.username ? `/profile/${user.username}` : '#';
+          const userProfileLink = user.login ? `/profile/${user.login}` : '#';
 
           const mediaTitle = media.title || 'Неизвестное произведение';
           const mediaLink = media.path ? `/media/${media.path}` : '#';
diff --git a/src/components/TelegramAuth.jsx b/src/components/TelegramAuth.jsx
new file mode 100644
index 0000000..be8d3c0
--- /dev/null
+++ b/src/components/TelegramAuth.jsx
@@ -0,0 +1,100 @@
+import React, { useEffect, useRef } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { useAuth } from '../contexts/AuthContext';
+
+const TelegramAuth = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const scriptRef = useRef(null);
+  const containerRef = useRef(null);
+  const { user, userProfile } = useAuth();
+
+  // Определяем, является ли это привязкой к существующему профилю
+  const isLinking = location.pathname === '/profile/telegram-link';
+
+  useEffect(() => {
+    // Создаем скрипт для Telegram Login Widget
+    const script = document.createElement('script');
+    script.src = 'https://telegram.org/js/telegram-widget.js?22';
+    script.setAttribute('data-telegram-login', 'CampFireAuthBot');
+    script.setAttribute('data-size', 'large');
+    script.setAttribute('data-radius', '8');
+    script.setAttribute('data-request-access', 'write');
+    script.setAttribute('data-userpic', 'false');
+    script.setAttribute('data-onauth', 'onTelegramAuth(user)');
+    script.async = true;
+    scriptRef.current = script;
+
+    // Добавляем функцию обратного вызова
+    window.onTelegramAuth = async (user) => {
+      try {
+        const endpoint = isLinking ? '/api/auth/telegram/link' : '/api/auth/telegram';
+        
+        const response = await fetch(endpoint, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            ...user,
+            userId: isLinking ? userProfile?.id : undefined
+          }),
+        });
+
+        const data = await response.json();
+
+        if (!response.ok) {
+          throw new Error(data.error || 'Ошибка авторизации');
+        }
+        
+        if (data.success) {
+          if (isLinking) {
+            // После привязки возвращаемся на страницу профиля
+            navigate(`/profile/${userProfile.login}`);
+          } else {
+            // При авторизации сохраняем токен и перенаправляем на главную
+            localStorage.setItem('token', data.token);
+            // Используем setTimeout для гарантии сохранения токена перед редиректом
+            setTimeout(() => {
+              window.location.href = '/';
+            }, 100);
+          }
+        } else {
+          throw new Error(data.error || 'Ошибка авторизации');
+        }
+      } catch (error) {
+        console.error('Ошибка авторизации:', error);
+        alert(error.message || 'Произошла ошибка при авторизации. Пожалуйста, попробуйте снова.');
+      }
+    };
+
+    // Добавляем скрипт на страницу
+    if (containerRef.current) {
+      containerRef.current.appendChild(script);
+    }
+
+    return () => {
+      // Удаляем скрипт при размонтировании компонента
+      if (containerRef.current && scriptRef.current) {
+        try {
+          containerRef.current.removeChild(scriptRef.current);
+        } catch (error) {
+          console.error('Ошибка при удалении скрипта:', error);
+        }
+      }
+    };
+  }, [navigate, isLinking, userProfile]);
+
+  return (
+    <div className="min-h-screen bg-campfire-dark pt-20 flex justify-center items-center">
+      <div className="w-full max-w-md p-8 bg-campfire-charcoal rounded-lg shadow-lg">
+        <h2 className="text-2xl font-bold mb-6 text-center text-campfire-light">
+          {isLinking ? 'Привязка Telegram' : 'Вход через Telegram'}
+        </h2>
+        <div ref={containerRef} className="flex justify-center"></div>
+      </div>
+    </div>
+  );
+};
+
+export default TelegramAuth; 
\ No newline at end of file
diff --git a/src/components/admin/AIReviewModal.jsx b/src/components/admin/AIReviewModal.jsx
new file mode 100644
index 0000000..6780183
--- /dev/null
+++ b/src/components/admin/AIReviewModal.jsx
@@ -0,0 +1,187 @@
+import React, { useState } from 'react';
+import { FaRobot, FaSpinner } from 'react-icons/fa';
+import { createReviewViaAPI, getReviewsByMediaId } from '../../services/pocketbaseService';
+
+const AIReviewModal = ({ media, onClose, onSuccess }) => {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [review, setReview] = useState(null);
+
+  const generateAIReview = async () => {
+    setLoading(true);
+    setError(null);
+
+    try {
+      // Проверяем, является ли characteristics уже объектом
+      let characteristics;
+      try {
+        characteristics = typeof media.characteristics === 'string' 
+          ? JSON.parse(media.characteristics)
+          : media.characteristics;
+      } catch (e) {
+        console.error('Ошибка при парсинге characteristics:', e);
+        characteristics = media.characteristics;
+      }
+
+      // Получаем существующие рецензии для обучения ИИ
+      const existingReviews = await getReviewsByMediaId(media.id);
+      const reviewsContent = existingReviews.map(r => r.content).join('\n\n');
+
+      const prompt = `Ты - эксперт по оценке ${media.type === 'movie' ? 'фильмов' : media.type === 'tv' ? 'сериалов' : media.type === 'anime' ? 'аниме' : 'игр'} на сайте Campfire Critics.
+      Твоя задача - написать рецензию на "${media.title}", основываясь на мнении пользователей сайта.
+      
+      Вот существующие рецензии пользователей на это произведение:
+      ${reviewsContent}
+      
+      Напиши рецензию, которая отражает общее мнение пользователей сайта, но при этом сохраняет профессиональный тон.
+      Оцени следующие характеристики по шкале от 1 до 10: ${Object.keys(characteristics).join(', ')}.
+      
+      Ответ должен быть в формате JSON:
+      {
+        "content": "текст рецензии",
+        "ratings": {
+          "характеристика1": число,
+          "характеристика2": число,
+          ...
+        }
+      }`;
+
+      const response = await fetch('/api/generate-review', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          prompt,
+          model: 'google/gemma-3-27b-it:free',
+          temperature: 0.7,
+          max_tokens: 1000
+        })
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.error?.message || 'Ошибка при генерации рецензии');
+      }
+
+      const data = await response.json();
+      
+      // Извлекаем JSON из markdown-формата
+      let aiResponseText = data.choices[0].message.content;
+      
+      // Ищем JSON в тексте (может быть обернут в ```json или просто быть чистым JSON)
+      const jsonMatch = aiResponseText.match(/```(?:json)?\s*(\{[\s\S]*?\})\s*```/) || 
+                       aiResponseText.match(/(\{[\s\S]*\})/);
+      
+      if (!jsonMatch) {
+        throw new Error('Не удалось найти JSON в ответе ИИ');
+      }
+      
+      try {
+        const aiResponse = JSON.parse(jsonMatch[1] || jsonMatch[0]);
+
+        if (!aiResponse || typeof aiResponse !== 'object') {
+          console.error('Неверный формат ответа:', aiResponse);
+          throw new Error('Неверный формат ответа от ИИ');
+        }
+
+        if (!aiResponse.content || !aiResponse.ratings) {
+          console.error('Отсутствуют обязательные поля:', aiResponse);
+          throw new Error('Отсутствуют обязательные поля в ответе ИИ');
+        }
+
+        // Проверяем, что все оценки являются числами
+        const ratings = aiResponse.ratings;
+        for (const [key, value] of Object.entries(ratings)) {
+          if (typeof value !== 'number' || isNaN(value)) {
+            ratings[key] = Number(value);
+            if (isNaN(ratings[key])) {
+              throw new Error(`Некорректное значение оценки для характеристики "${key}"`);
+            }
+          }
+        }
+
+        // Рассчитываем общую оценку
+        const overallRating = Object.values(ratings).reduce((sum, value) => sum + value, 0) / Object.keys(ratings).length;
+
+        // Создаем рецензию
+        const reviewData = {
+          media_id: media.id,
+          user_id: 'g520s25pzm0t6e1',
+          content: aiResponse.content,
+          ratings: aiResponse.ratings,
+          has_spoilers: false,
+          media_type: media.type,
+          overall_rating: parseFloat(overallRating.toFixed(2)),
+          progress: media.type === 'game' ? 'completed' : 'watched'
+        };
+
+        const createdReview = await createReviewViaAPI(reviewData);
+        setReview(createdReview);
+        onSuccess(createdReview);
+      } catch (parseError) {
+        console.error('Ошибка парсинга JSON:', parseError);
+        console.error('Проблемный текст:', aiResponseText);
+        throw new Error('Неверный формат JSON в ответе ИИ');
+      }
+    } catch (err) {
+      console.error('Ошибка при генерации рецензии:', err);
+      setError(err.message || 'Произошла ошибка при генерации рецензии');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="p-6 bg-campfire-charcoal rounded-lg shadow-md text-campfire-light">
+      <h2 className="text-2xl font-bold mb-6">ИИ-рецензия для {media.title}</h2>
+
+      {error && (
+        <div className="bg-status-error/20 text-status-error p-4 rounded-md mb-6">
+          {error}
+        </div>
+      )}
+
+      {!review ? (
+        <div className="text-center">
+          <p className="mb-6 text-campfire-ash">
+            Нажмите кнопку ниже, чтобы сгенерировать рецензию с помощью ИИ
+          </p>
+          <button
+            onClick={generateAIReview}
+            disabled={loading}
+            className="btn-primary flex items-center gap-2 mx-auto"
+          >
+            {loading ? <FaSpinner className="animate-spin" /> : <FaRobot />}
+            <span>{loading ? 'Генерация...' : 'Сгенерировать рецензию'}</span>
+          </button>
+        </div>
+      ) : (
+        <div className="space-y-4">
+          <div className="bg-campfire-dark p-4 rounded-lg">
+            <h3 className="font-semibold mb-2">Рецензия:</h3>
+            <p className="text-campfire-ash">{review.content}</p>
+          </div>
+          <div className="bg-campfire-dark p-4 rounded-lg">
+            <h3 className="font-semibold mb-2">Оценки:</h3>
+            <div className="grid grid-cols-2 gap-4">
+              {Object.entries(review.ratings).map(([key, value]) => (
+                <div key={key} className="flex justify-between">
+                  <span className="text-campfire-ash">{key}:</span>
+                  <span className="text-campfire-light">{value}/10</span>
+                </div>
+              ))}
+            </div>
+          </div>
+          <div className="flex justify-end mt-6">
+            <button onClick={onClose} className="btn-secondary">
+              Закрыть
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default AIReviewModal; 
\ No newline at end of file
diff --git a/src/components/admin/AchievementForm.jsx b/src/components/admin/AchievementForm.jsx
index 93ae688..4719d3d 100644
--- a/src/components/admin/AchievementForm.jsx
+++ b/src/components/admin/AchievementForm.jsx
@@ -1,15 +1,57 @@
 import React, { useState, useEffect } from 'react';
 import { pb } from '../../services/pocketbaseService'; // Import pb for create/update
+import * as FaIcons from 'react-icons/fa';
+import * as MdIcons from 'react-icons/md';
+import * as IoIcons from 'react-icons/io5';
+import * as BiIcons from 'react-icons/bi';
+import * as HiIcons from 'react-icons/hi';
+import * as RiIcons from 'react-icons/ri';
+import { FaSearch } from 'react-icons/fa';
 
 const AchievementForm = ({ onSuccess, onCancel, achievementToEdit }) => {
   const [formData, setFormData] = useState({
     title: '',
     description: '',
     xp_reward: 0,
-    // Add other fields like icon if you have them
+    icon: 'FaTrophy'
   });
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [showIconPicker, setShowIconPicker] = useState(false);
+  const [selectedIconSet, setSelectedIconSet] = useState('fa');
+
+  // Объединяем все доступные иконки
+  const allIcons = {
+    fa: Object.keys(FaIcons),
+    md: Object.keys(MdIcons),
+    io: Object.keys(IoIcons),
+    bi: Object.keys(BiIcons),
+    hi: Object.keys(HiIcons),
+    ri: Object.keys(RiIcons)
+  };
+
+  // Получаем текущий набор иконок
+  const currentIcons = allIcons[selectedIconSet] || allIcons.fa;
+
+  // Фильтруем иконки по поисковому запросу
+  const filteredIcons = currentIcons.filter(iconName => 
+    iconName.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  // Получаем компонент иконки по имени
+  const getIconComponent = (iconName) => {
+    const prefix = iconName.substring(0, 2).toLowerCase();
+    switch (prefix) {
+      case 'fa': return FaIcons[iconName];
+      case 'md': return MdIcons[iconName];
+      case 'io': return IoIcons[iconName];
+      case 'bi': return BiIcons[iconName];
+      case 'hi': return HiIcons[iconName];
+      case 'ri': return RiIcons[iconName];
+      default: return FaIcons.FaTrophy;
+    }
+  };
 
   useEffect(() => {
     if (achievementToEdit) {
@@ -17,15 +59,15 @@ const AchievementForm = ({ onSuccess, onCancel, achievementToEdit }) => {
         title: achievementToEdit.title,
         description: achievementToEdit.description,
         xp_reward: achievementToEdit.xp_reward,
-        // Load other fields here
+        icon: achievementToEdit.icon || 'FaTrophy'
       });
     } else {
-       // Reset form if creating a new achievement
-       setFormData({
-            title: '',
-            description: '',
-            xp_reward: 0,
-       });
+      setFormData({
+        title: '',
+        description: '',
+        xp_reward: 0,
+        icon: 'FaTrophy'
+      });
     }
   }, [achievementToEdit]);
 
@@ -33,10 +75,18 @@ const AchievementForm = ({ onSuccess, onCancel, achievementToEdit }) => {
     const { name, value, type } = e.target;
     setFormData({
       ...formData,
-      [name]: type === 'number' ? parseInt(value, 10) || 0 : value, // Parse number input
+      [name]: type === 'number' ? parseInt(value, 10) || 0 : value,
     });
   };
 
+  const handleIconSelect = (iconName) => {
+    setFormData(prev => ({
+      ...prev,
+      icon: iconName
+    }));
+    setShowIconPicker(false);
+  };
+
   const handleSubmit = async (e) => {
     e.preventDefault();
     setLoading(true);
@@ -45,17 +95,11 @@ const AchievementForm = ({ onSuccess, onCancel, achievementToEdit }) => {
     try {
       let record;
       if (achievementToEdit) {
-        // Update existing achievement
-        console.log('PocketBase: Updating achievement:', achievementToEdit.id, formData);
         record = await pb.collection('achievements').update(achievementToEdit.id, formData);
-        console.log('PocketBase: Achievement updated:', record);
       } else {
-        // Create new achievement
-        console.log('PocketBase: Creating achievement:', formData);
         record = await pb.collection('achievements').create(formData);
-        console.log('PocketBase: Achievement created:', record);
       }
-      onSuccess(); // Call success callback
+      onSuccess();
     } catch (err) {
       console.error('Error saving achievement:', err);
       setError(err.message);
@@ -64,6 +108,8 @@ const AchievementForm = ({ onSuccess, onCancel, achievementToEdit }) => {
     }
   };
 
+  const IconComponent = getIconComponent(formData.icon);
+
   return (
     <form onSubmit={handleSubmit} className="p-4">
       {error && (
@@ -112,20 +158,74 @@ const AchievementForm = ({ onSuccess, onCancel, achievementToEdit }) => {
         />
       </div>
 
-      {/* Add file input for icon if needed */}
-      {/*
       <div className="mb-4">
-          <label htmlFor="icon" className="block text-sm font-medium text-campfire-ash mb-1">Иконка</label>
-          <input
-              type="file"
-              id="icon"
-              name="icon"
-              onChange={handleFileChange} // You'll need a separate handler for files
-              className="w-full text-campfire-light text-sm file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-campfire-amber file:text-campfire-dark hover:file:bg-campfire-light"
-          />
-      </div>
-      */}
+        <label className="block text-sm font-medium text-campfire-ash mb-1">Иконка</label>
+        <div className="relative">
+          <button
+            type="button"
+            onClick={() => setShowIconPicker(!showIconPicker)}
+            className="w-full px-3 py-2 bg-campfire-dark text-campfire-light border border-campfire-ash/30 rounded-md focus:outline-none focus:ring-campfire-amber focus:border-campfire-amber flex items-center justify-between"
+          >
+            <div className="flex items-center space-x-2">
+              <IconComponent className="text-campfire-amber" size={20} />
+              <span>{formData.icon}</span>
+            </div>
+            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+              <path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
+            </svg>
+          </button>
 
+          {showIconPicker && (
+            <div className="absolute z-10 mt-1 w-full bg-campfire-dark border border-campfire-ash/30 rounded-md shadow-lg">
+              <div className="p-2 border-b border-campfire-ash/30">
+                <div className="flex space-x-2 mb-2">
+                  {Object.keys(allIcons).map(set => (
+                    <button
+                      key={set}
+                      type="button"
+                      onClick={() => setSelectedIconSet(set)}
+                      className={`px-3 py-1 rounded-md text-sm ${
+                        selectedIconSet === set 
+                          ? 'bg-campfire-amber text-campfire-dark' 
+                          : 'bg-campfire-charcoal text-campfire-light hover:bg-campfire-amber/10'
+                      }`}
+                    >
+                      {set.toUpperCase()}
+                    </button>
+                  ))}
+                </div>
+                <div className="relative">
+                  <input
+                    type="text"
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                    placeholder="Поиск иконок..."
+                    className="w-full px-3 py-2 pl-8 bg-campfire-charcoal text-campfire-light border border-campfire-ash/30 rounded-md focus:outline-none focus:ring-campfire-amber focus:border-campfire-amber"
+                  />
+                  <FaSearch className="absolute left-2 top-3 text-campfire-ash" />
+                </div>
+              </div>
+              <div className="max-h-60 overflow-y-auto p-2 grid grid-cols-6 gap-2">
+                {filteredIcons.map(iconName => {
+                  const Icon = getIconComponent(iconName);
+                  return (
+                    <button
+                      key={iconName}
+                      type="button"
+                      onClick={() => handleIconSelect(iconName)}
+                      className={`p-2 rounded-md flex items-center justify-center hover:bg-campfire-amber/10 transition-colors ${
+                        formData.icon === iconName ? 'bg-campfire-amber/20' : ''
+                      }`}
+                    >
+                      <Icon className="text-campfire-amber" size={20} />
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
 
       <div className="flex justify-end space-x-4 mt-6">
         <button
diff --git a/src/components/admin/MediaForm.jsx b/src/components/admin/MediaForm.jsx
index 0dcbee2..528fe11 100644
--- a/src/components/admin/MediaForm.jsx
+++ b/src/components/admin/MediaForm.jsx
@@ -1,8 +1,9 @@
 import React, { useState, useEffect, useMemo } from 'react'; // Import useMemo
 import { createMedia, updateMedia, validateMediaData, formatMediaData, getFileUrl, mediaTypes } from '../../services/pocketbaseService';
 import { useAuth } from '../../contexts/AuthContext';
-import { FaUpload, FaTimesCircle } from 'react-icons/fa'; // Import icons
+import { FaUpload, FaTimesCircle, FaTrash, FaCrop } from 'react-icons/fa'; // Import icons
 import { v4 as uuidv4 } from 'uuid'; // Import uuid for unique IDs
+import ImageCropper from '../common/ImageCropper';
 
 // Define characteristic presets
 const characteristicPresets = {
@@ -64,9 +65,15 @@ function MediaForm({ media, onSuccess }) {
   const [isPopular, setIsPopular] = useState(false); // State for is_popular
   const [progressType, setProgressType] = useState('completed'); // State for progress_type
   const [releaseDate, setReleaseDate] = useState(''); // State for release_date
+  const [tmdbId, setTmdbId] = useState(null);
+  const [tmdbType, setTmdbType] = useState(null);
 
   const [posterPreview, setPosterPreview] = useState(null);
   const [backdropPreview, setBackdropPreview] = useState(null);
+  const [posterPosition, setPosterPosition] = useState({ x: 50, y: 50 }); // Добавляем состояние для позиции постера
+  const [backdropPosition, setBackdropPosition] = useState({ x: 50, y: 50 }); // Добавляем состояние для позиции баннера
+  const [posterScale, setPosterScale] = useState(1); // Добавляем состояние для масштаба постера
+  const [backdropScale, setBackdropScale] = useState(1); // Добавляем состояние для масштаба баннера
 
   const [loading, setLoading] = useState(false);
   const [errors, setErrors] = useState([]);
@@ -75,13 +82,20 @@ function MediaForm({ media, onSuccess }) {
 
   const isEditing = !!media; // Determine if we are editing or creating
 
+  const [showPosterCropper, setShowPosterCropper] = useState(false);
+  const [showBackdropCropper, setShowBackdropCropper] = useState(false);
+  const [tempPosterFile, setTempPosterFile] = useState(null);
+  const [tempBackdropFile, setTempBackdropFile] = useState(null);
+
   useEffect(() => {
     if (media) {
       // Populate form for editing
       setTitle(media.title || '');
       setPath(media.path || '');
       setType(media.type || '');
-      setOverview(media.overview || media.description || ''); // Use overview or description
+      setOverview(media.overview || media.description || '');
+      setTmdbId(media.tmdb_id || null);
+      setTmdbType(media.tmdb_type || null);
 
       // Convert characteristics object from PocketBase to array of { id, key, label }
       let initialCharacteristicsArray = [];
@@ -128,6 +142,8 @@ function MediaForm({ media, onSuccess }) {
       setIsPopular(false); // Reset is_popular
       setProgressType('completed'); // Default progressType to 'completed' for new media
       setReleaseDate(''); // Reset release_date
+      setTmdbId(null);
+      setTmdbType(null);
       setPosterPreview(null);
       setBackdropPreview(null);
     }
@@ -244,11 +260,11 @@ function MediaForm({ media, onSuccess }) {
     const file = e.target.files[0];
     if (file) {
       if (field === 'poster') {
-        setPoster(file);
-        setPosterPreview(URL.createObjectURL(file));
+        setTempPosterFile(file);
+        setShowPosterCropper(true);
       } else if (field === 'backdrop') {
-        setBackdrop(file);
-        setBackdropPreview(URL.createObjectURL(file));
+        setTempBackdropFile(file);
+        setShowBackdropCropper(true);
       }
     }
   };
@@ -263,6 +279,23 @@ function MediaForm({ media, onSuccess }) {
       }
   };
 
+  // Добавляем функцию для обработки изменения позиции
+  const handlePositionChange = (field, x, y) => {
+    if (field === 'poster') {
+      setPosterPosition({ x, y });
+    } else if (field === 'backdrop') {
+      setBackdropPosition({ x, y });
+    }
+  };
+
+  // Добавляем функцию для обработки изменения масштаба
+  const handleScaleChange = (field, scale) => {
+    if (field === 'poster') {
+      setPosterScale(scale);
+    } else if (field === 'backdrop') {
+      setBackdropScale(scale);
+    }
+  };
 
   const handleSubmit = async (e) => {
     e.preventDefault();
@@ -273,40 +306,64 @@ function MediaForm({ media, onSuccess }) {
     formData.append('title', title);
     formData.append('path', path);
     formData.append('type', type);
-    formData.append('overview', overview); // Use overview field
+    formData.append('overview', overview);
     formData.append('is_published', isPublished);
-    formData.append('is_popular', isPopular); // Include is_popular
-    formData.append('progress_type', progressType); // Include progress_type
-    // Append release_date if it exists
+    formData.append('is_popular', isPopular);
+    formData.append('progress_type', progressType);
+    
     if (releaseDate) {
         formData.append('release_date', releaseDate);
     }
 
-
-    // Append files if they are new File objects
-    if (poster instanceof File) {
-      formData.append('poster', poster);
+    if (tmdbId) {
+        formData.append('tmdb_id', tmdbId);
     }
-    if (backdrop instanceof File) {
-      formData.append('backdrop', backdrop);
+    if (tmdbType) {
+        formData.append('tmdb_type', tmdbType);
     }
 
-    // Handle file deletion by setting the field to null in FormData
-    // This is necessary if the user removed a previously existing file
+    // Обработка файлов
     if (isEditing) {
-        // If editing and posterPreview is null but media.poster existed, set poster to null
-        if (!posterPreview && media.poster) {
-            formData.append('poster', ''); // PocketBase expects empty string or null for deletion
+      // При редактировании
+      if (poster instanceof File) {
+        // Если есть новый файл
+        formData.append('poster', poster);
+        // Если poster_src не существует или равен N/A, сохраняем оригинальный файл
+        if (!media.poster_src || media.poster_src === 'N/A') {
+          formData.append('poster_src', poster);
         }
-         // If editing and backdropPreview is null but media.backdrop existed, set backdrop to null
-        if (!backdropPreview && media.backdrop) {
-            formData.append('backdrop', ''); // PocketBase expects empty string or null for deletion
+      } else if (!posterPreview && media.poster) {
+        // Если файл удален
+        formData.append('poster', '');
+        formData.append('poster_src', '');
+      }
+
+      if (backdrop instanceof File) {
+        // Если есть новый файл
+        formData.append('backdrop', backdrop);
+        // Если backdrop_src не существует или равен N/A, сохраняем оригинальный файл
+        if (!media.backdrop_src || media.backdrop_src === 'N/A') {
+          formData.append('backdrop_src', backdrop);
+        }
+      } else if (!backdropPreview && media.backdrop) {
+        // Если файл удален
+        formData.append('backdrop', '');
+        formData.append('backdrop_src', '');
+      }
+    } else {
+      // При создании
+      if (poster instanceof File) {
+        formData.append('poster_src', poster);
+        formData.append('poster', poster);
+      }
+      if (backdrop instanceof File) {
+        formData.append('backdrop_src', backdrop);
+        formData.append('backdrop', backdrop);
         }
     }
 
-    // Convert characteristics array [{ id, key, label }] back to object { key: label } for PocketBase
+    // Convert characteristics array to object
     const characteristicsObject = characteristics.reduce((acc, char) => {
-        // Only include if key is not empty
         if (char.key.trim()) {
             acc[char.key.trim()] = char.label;
         }
@@ -321,26 +378,12 @@ function MediaForm({ media, onSuccess }) {
         formData.append('created_by', user.id);
     }
 
-
-    // Validate data before submitting
-    // Pass the characteristics object for validation
-    const validationErrors = validateMediaData(formData, characteristicsObject);
-    if (validationErrors.length > 0) {
-        setErrors(validationErrors);
-        setLoading(false);
-        return;
-    }
-
-    // Format data (less critical with FormData, but can be used for final checks)
-    const dataToSubmit = formatMediaData(formData);
-
-
     try {
       if (isEditing) {
-        await updateMedia(media.id, dataToSubmit);
+        await updateMedia(media.id, formData);
         console.log('Media updated successfully');
       } else {
-        await createMedia(dataToSubmit);
+        await createMedia(formData);
         console.log('Media created successfully');
       }
       onSuccess(); // Close modal and refresh list
@@ -348,7 +391,6 @@ function MediaForm({ media, onSuccess }) {
       console.error('Error submitting media form:', err);
        if (err.response && err.response.data) {
            console.error('PocketBase Response Data:', err.response.data);
-           // Attempt to extract specific error messages from PocketBase response
            const apiErrors = [];
            for (const field in err.response.data) {
                if (err.response.data[field].message) {
@@ -368,6 +410,66 @@ function MediaForm({ media, onSuccess }) {
     }
   };
 
+  const handleCrop = (blob, type) => {
+    const file = new File([blob], type === 'poster' ? 'poster.jpg' : 'backdrop.jpg', {
+      type: 'image/jpeg'
+    });
+
+    if (type === 'poster') {
+      setPoster(file);
+      setPosterPreview(URL.createObjectURL(blob));
+      setShowPosterCropper(false);
+      setTempPosterFile(null);
+    } else {
+      setBackdrop(file);
+      setBackdropPreview(URL.createObjectURL(blob));
+      setShowBackdropCropper(false);
+      setTempBackdropFile(null);
+    }
+  };
+
+  const handleRecrop = async (type) => {
+    try {
+      let file;
+      if (type === 'poster') {
+        if (media?.poster_src) {
+          // Используем оригинальный файл из poster_src
+          const response = await fetch(getFileUrl(media, 'poster_src'));
+          const blob = await response.blob();
+          file = new File([blob], 'poster.jpg', { type: 'image/jpeg' });
+        } else if (poster instanceof File) {
+          file = poster;
+        } else if (media?.poster) {
+          const response = await fetch(getFileUrl(media, 'poster'));
+          const blob = await response.blob();
+          file = new File([blob], 'poster.jpg', { type: 'image/jpeg' });
+        }
+        if (file) {
+          setTempPosterFile(file);
+          setShowPosterCropper(true);
+        }
+      } else if (type === 'backdrop') {
+        if (media?.backdrop_src) {
+          // Используем оригинальный файл из backdrop_src
+          const response = await fetch(getFileUrl(media, 'backdrop_src'));
+          const blob = await response.blob();
+          file = new File([blob], 'backdrop.jpg', { type: 'image/jpeg' });
+        } else if (backdrop instanceof File) {
+          file = backdrop;
+        } else if (media?.backdrop) {
+          const response = await fetch(getFileUrl(media, 'backdrop'));
+          const blob = await response.blob();
+          file = new File([blob], 'backdrop.jpg', { type: 'image/jpeg' });
+        }
+        if (file) {
+          setTempBackdropFile(file);
+          setShowBackdropCropper(true);
+        }
+      }
+    } catch (error) {
+      console.error('Error preparing image for recrop:', error);
+    }
+  };
 
   return (
     <div className="p-6 bg-campfire-charcoal rounded-lg shadow-md text-campfire-light max-h-[80vh] overflow-y-auto custom-scrollbar">
@@ -488,89 +590,107 @@ function MediaForm({ media, onSuccess }) {
 
         {/* File Uploads */}
         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-            {/* Poster Upload */}
+            {/* Poster Upload with Controls */}
             <div>
                 <label className="block text-sm font-medium text-campfire-light mb-1">
                     Постер
                 </label>
-                <div className="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-campfire-ash/30 border-dashed rounded-md relative">
+                <div className="relative">
                     {posterPreview ? (
-                        <>
-                            <img src={posterPreview} alt="Poster Preview" className="max-h-40 object-contain" />
+                        <div className="relative">
+                            <img
+                                src={posterPreview}
+                                alt="Poster preview"
+                                className="w-full h-64 object-contain rounded-lg"
+                            />
+                            <div className="absolute top-2 right-2 flex gap-2">
+                                <button
+                                    type="button"
+                                    onClick={() => handleRecrop('poster')}
+                                    className="p-2 bg-campfire-amber text-campfire-dark rounded-full hover:bg-campfire-amber/80"
+                                >
+                                    <FaCrop />
+                                </button>
                             <button
                                 type="button"
                                 onClick={() => handleRemoveFile('poster')}
-                                className="absolute top-2 right-2 text-status-error hover:text-red-700 transition-colors"
-                                aria-label="Remove poster"
+                                    className="p-2 bg-red-500 text-white rounded-full hover:bg-red-600"
                             >
-                                <FaTimesCircle size={20} />
+                                    <FaTrash />
                             </button>
-                        </>
+                            </div>
+                        </div>
                     ) : (
-                        <div className="space-y-1 text-center">
-                            <FaUpload className="mx-auto h-12 w-12 text-campfire-ash" />
-                            <div className="flex text-sm text-campfire-ash">
+                        <div className="border-2 border-dashed border-campfire-ash rounded-lg p-6 text-center">
+                            <input
+                                type="file"
+                                accept="image/*"
+                                onChange={(e) => handleFileChange(e, 'poster')}
+                                className="hidden"
+                                id="poster-upload"
+                            />
                                 <label
                                     htmlFor="poster-upload"
-                                    className="relative cursor-pointer bg-campfire-charcoal rounded-md font-medium text-campfire-amber hover:text-campfire-ember focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-campfire-amber"
-                                >
-                                    <span>Загрузить файл</span>
-                                    <input
-                                        id="poster-upload"
-                                        name="poster"
-                                        type="file"
-                                        className="sr-only"
-                                        onChange={(e) => handleFileChange(e, 'poster')}
-                                        accept="image/*"
-                                    />
+                                className="cursor-pointer flex flex-col items-center"
+                            >
+                                <FaUpload className="text-3xl text-campfire-ash mb-2" />
+                                <span className="text-campfire-ash">
+                                    Нажмите для загрузки постера
+                                </span>
                                 </label>
-                                <p className="pl-1">или перетащите сюда</p>
-                            </div>
-                            <p className="text-xs text-campfire-ash">PNG, JPG, GIF до 10MB</p>
                         </div>
                     )}
                 </div>
             </div>
 
-            {/* Backdrop Upload */}
+            {/* Backdrop Upload with Controls */}
              <div>
                 <label className="block text-sm font-medium text-campfire-light mb-1">
                     Фон (Backdrop)
                 </label>
-                <div className="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-campfire-ash/30 border-dashed rounded-md relative">
+                <div className="relative">
                      {backdropPreview ? (
-                        <>
-                            <img src={backdropPreview} alt="Backdrop Preview" className="max-h-40 object-contain" />
+                        <div className="relative">
+                            <img
+                                src={backdropPreview}
+                                alt="Backdrop preview"
+                                className="w-full h-64 object-cover rounded-lg"
+                            />
+                            <div className="absolute top-2 right-2 flex gap-2">
+                                <button
+                                    type="button"
+                                    onClick={() => handleRecrop('backdrop')}
+                                    className="p-2 bg-campfire-amber text-campfire-dark rounded-full hover:bg-campfire-amber/80"
+                                >
+                                    <FaCrop />
+                                </button>
                              <button
                                 type="button"
                                 onClick={() => handleRemoveFile('backdrop')}
-                                className="absolute top-2 right-2 text-status-error hover:text-red-700 transition-colors"
-                                aria-label="Remove backdrop"
+                                    className="p-2 bg-red-500 text-white rounded-full hover:bg-red-600"
                             >
-                                <FaTimesCircle size={20} />
+                                    <FaTrash />
                             </button>
-                        </>
+                            </div>
+                        </div>
                     ) : (
-                        <div className="space-y-1 text-center">
-                            <FaUpload className="mx-auto h-12 w-12 text-campfire-ash" />
-                            <div className="flex text-sm text-campfire-ash">
+                        <div className="border-2 border-dashed border-campfire-ash rounded-lg p-6 text-center">
+                            <input
+                                type="file"
+                                accept="image/*"
+                                onChange={(e) => handleFileChange(e, 'backdrop')}
+                                className="hidden"
+                                id="backdrop-upload"
+                            />
                                 <label
                                     htmlFor="backdrop-upload"
-                                    className="relative cursor-pointer bg-campfire-charcoal rounded-md font-medium text-campfire-amber hover:text-campfire-ember focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-campfire-amber"
-                                >
-                                    <span>Загрузить файл</span>
-                                    <input
-                                        id="backdrop-upload"
-                                        name="backdrop"
-                                        type="file"
-                                        className="sr-only"
-                                        onChange={(e) => handleFileChange(e, 'backdrop')}
-                                        accept="image/*"
-                                    />
+                                className="cursor-pointer flex flex-col items-center"
+                            >
+                                <FaUpload className="text-3xl text-campfire-ash mb-2" />
+                                <span className="text-campfire-ash">
+                                    Нажмите для загрузки баннера
+                                </span>
                                 </label>
-                                <p className="pl-1">или перетащите сюда</p>
-                            </div>
-                            <p className="text-xs text-campfire-ash">PNG, JPG, GIF до 10MB</p>
                         </div>
                     )}
                 </div>
@@ -706,6 +826,34 @@ function MediaForm({ media, onSuccess }) {
           </button>
         </div>
       </form>
+
+      {showPosterCropper && tempPosterFile && (
+        <ImageCropper
+          imageUrl={URL.createObjectURL(tempPosterFile)}
+          onCrop={(blob) => handleCrop(blob, 'poster')}
+          onCancel={() => {
+            setShowPosterCropper(false);
+            setTempPosterFile(null);
+          }}
+          aspectRatio={2/3}
+          maxWidth={500}
+          maxHeight={750}
+        />
+      )}
+
+      {showBackdropCropper && tempBackdropFile && (
+        <ImageCropper
+          imageUrl={URL.createObjectURL(tempBackdropFile)}
+          onCrop={(blob) => handleCrop(blob, 'backdrop')}
+          onCancel={() => {
+            setShowBackdropCropper(false);
+            setTempBackdropFile(null);
+          }}
+          aspectRatio={16/9}
+          maxWidth={1920}
+          maxHeight={1080}
+        />
+      )}
     </div>
   );
 }
diff --git a/src/components/admin/NotificationManager.jsx b/src/components/admin/NotificationManager.jsx
new file mode 100644
index 0000000..73dea3b
--- /dev/null
+++ b/src/components/admin/NotificationManager.jsx
@@ -0,0 +1,332 @@
+import React, { useState, useEffect } from 'react';
+import { pb } from '../../services/pocketbaseService';
+import { FaBell, FaUsers, FaFilter, FaPaperPlane, FaPlus, FaTrash } from 'react-icons/fa';
+
+const NotificationManager = () => {
+    const [title, setTitle] = useState('');
+    const [message, setMessage] = useState('');
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const [success, setSuccess] = useState(null);
+    const [filters, setFilters] = useState([{ field: '', operator: '=', value: '' }]);
+    const [mediaList, setMediaList] = useState([]);
+    const [selectedMedia, setSelectedMedia] = useState([]);
+    const [minReviews, setMinReviews] = useState(1);
+
+    useEffect(() => {
+        loadMediaList();
+    }, []);
+
+    const loadMediaList = async () => {
+        try {
+            const records = await pb.collection('media').getList(1, 1000, {
+                sort: 'title'
+            });
+            setMediaList(records.items);
+        } catch (error) {
+            console.error('Error loading media list:', error);
+        }
+    };
+
+    const operators = [
+        { value: '=', label: 'Равно' },
+        { value: '!=', label: 'Не равно' },
+        { value: '>', label: 'Больше' },
+        { value: '<', label: 'Меньше' },
+        { value: '>=', label: 'Больше или равно' },
+        { value: '<=', label: 'Меньше или равно' },
+        { value: '~', label: 'Содержит' },
+        { value: '!~', label: 'Не содержит' }
+    ];
+
+    const fields = [
+        { value: 'level', label: 'Уровень' },
+        { value: 'review_count', label: 'Количество рецензий' },
+        { value: 'email', label: 'Email' },
+        { value: 'showcase', label: 'Витрина' },
+        { value: 'created', label: 'Дата регистрации' },
+        { value: 'has_reviewed', label: 'Оставил рецензию на медиа' }
+    ];
+
+    const addFilter = () => {
+        setFilters([...filters, { field: '', operator: '=', value: '' }]);
+    };
+
+    const removeFilter = (index) => {
+        setFilters(filters.filter((_, i) => i !== index));
+    };
+
+    const updateFilter = (index, field, value) => {
+        const newFilters = [...filters];
+        newFilters[index][field] = value;
+        setFilters(newFilters);
+    };
+
+    const buildFilterString = () => {
+        return filters
+            .filter(f => f.field && f.operator && f.value)
+            .map(f => {
+                let value = f.value;
+                // Если значение не число и не булево, заключаем в кавычки
+                if (isNaN(value) && value !== 'true' && value !== 'false') {
+                    value = `"${value}"`;
+                }
+                return `${f.field} ${f.operator} ${value}`;
+            })
+            .join(' && ');
+    };
+
+    const handleMediaSelect = (mediaId) => {
+        setSelectedMedia(prev => {
+            if (prev.includes(mediaId)) {
+                return prev.filter(id => id !== mediaId);
+            } else {
+                return [...prev, mediaId];
+            }
+        });
+    };
+
+    const sendNotification = async () => {
+        if (!title || !message) {
+            setError('Заполните заголовок и сообщение');
+            return;
+        }
+
+        setLoading(true);
+        setError(null);
+        setSuccess(null);
+
+        try {
+            let filterString = buildFilterString();
+            
+            // Если выбран фильтр по медиа, добавляем подзапрос для получения пользователей с рецензиями
+            if (selectedMedia.length > 0) {
+                const reviews = await pb.collection('reviews').getList(1, 1000, {
+                    filter: `media_id ?~ "${selectedMedia.join('" || media_id ?~ "')}"`,
+                    fields: 'user_id'
+                });
+                
+                // Группируем рецензии по пользователям
+                const userReviews = reviews.items.reduce((acc, review) => {
+                    acc[review.user_id] = (acc[review.user_id] || 0) + 1;
+                    return acc;
+                }, {});
+
+                // Фильтруем пользователей по минимальному количеству рецензий
+                const userIds = Object.entries(userReviews)
+                    .filter(([_, count]) => count >= minReviews)
+                    .map(([userId]) => userId);
+
+                if (userIds.length > 0) {
+                    const mediaFilter = `id ?~ "${userIds.join('" || id ?~ "')}"`;
+                    filterString = filterString ? `${filterString} && ${mediaFilter}` : mediaFilter;
+                } else {
+                    throw new Error('Нет пользователей, соответствующих выбранным критериям');
+                }
+            }
+
+            // Получаем список пользователей по фильтру
+            const users = await pb.collection('users').getList(1, 1000, {
+                filter: filterString || undefined
+            });
+
+            if (users.items.length === 0) {
+                throw new Error('Нет пользователей, соответствующих выбранным фильтрам');
+            }
+
+            // Отправляем уведомления каждому пользователю
+            for (const user of users.items) {
+                await pb.collection('notifications').create({
+                    user_id: user.id,
+                    type: 'system',
+                    title,
+                    message,
+                    is_read: false
+                });
+            }
+
+            setSuccess(`Уведомления отправлены ${users.items.length} пользователям`);
+            setTitle('');
+            setMessage('');
+            setFilters([{ field: '', operator: '=', value: '' }]);
+            setSelectedMedia([]);
+            setMinReviews(1);
+        } catch (error) {
+            console.error('Error sending notifications:', error);
+            setError(error.message || 'Произошла ошибка при отправке уведомлений');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <div className="bg-campfire-dark rounded-lg p-6">
+            <h2 className="text-2xl font-bold text-campfire-light mb-6 flex items-center">
+                <FaBell className="mr-2" />
+                Отправка уведомлений
+            </h2>
+
+            {error && (
+                <div className="bg-red-500/10 border border-red-500/20 text-red-500 p-4 rounded-lg mb-4">
+                    {error}
+                </div>
+            )}
+
+            {success && (
+                <div className="bg-green-500/10 border border-green-500/20 text-green-500 p-4 rounded-lg mb-4">
+                    {success}
+                </div>
+            )}
+
+            <div className="space-y-4">
+                <div>
+                    <label className="block text-sm font-medium text-campfire-light mb-2">
+                        Заголовок
+                    </label>
+                    <input
+                        type="text"
+                        value={title}
+                        onChange={(e) => setTitle(e.target.value)}
+                        className="w-full p-2 bg-campfire-charcoal border border-campfire-ash/30 rounded-md text-campfire-light focus:ring-2 focus:ring-campfire-amber focus:border-transparent"
+                        placeholder="Введите заголовок уведомления"
+                    />
+                </div>
+
+                <div>
+                    <label className="block text-sm font-medium text-campfire-light mb-2">
+                        Сообщение
+                    </label>
+                    <textarea
+                        value={message}
+                        onChange={(e) => setMessage(e.target.value)}
+                        className="w-full p-2 bg-campfire-charcoal border border-campfire-ash/30 rounded-md text-campfire-light focus:ring-2 focus:ring-campfire-amber focus:border-transparent"
+                        rows="4"
+                        placeholder="Введите текст уведомления"
+                    />
+                </div>
+
+                <div>
+                    <label className="block text-sm font-medium text-campfire-light mb-2">
+                        Фильтр по рецензиям
+                    </label>
+                    <div className="space-y-4">
+                        <div>
+                            <label className="block text-sm text-campfire-light/70 mb-2">
+                                Минимальное количество рецензий
+                            </label>
+                            <input
+                                type="number"
+                                min="1"
+                                value={minReviews}
+                                onChange={(e) => setMinReviews(parseInt(e.target.value) || 1)}
+                                className="w-full p-2 bg-campfire-charcoal border border-campfire-ash/30 rounded-md text-campfire-light focus:ring-2 focus:ring-campfire-amber focus:border-transparent"
+                            />
+                        </div>
+                        <div>
+                            <label className="block text-sm text-campfire-light/70 mb-2">
+                                Выберите медиа
+                            </label>
+                            <div className="max-h-48 overflow-y-auto bg-campfire-charcoal border border-campfire-ash/30 rounded-md">
+                                {mediaList.map(media => (
+                                    <div
+                                        key={media.id}
+                                        className="flex items-center space-x-2 p-2 hover:bg-campfire-ash/20 cursor-pointer"
+                                        onClick={() => handleMediaSelect(media.id)}
+                                    >
+                                        <input
+                                            type="checkbox"
+                                            checked={selectedMedia.includes(media.id)}
+                                            onChange={() => {}}
+                                            className="text-campfire-amber focus:ring-campfire-amber"
+                                        />
+                                        <span className="text-campfire-light">{media.title}</span>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div>
+                    <div className="flex justify-between items-center mb-2">
+                        <label className="block text-sm font-medium text-campfire-light">
+                            Дополнительные фильтры
+                        </label>
+                        <button
+                            onClick={addFilter}
+                            className="flex items-center text-campfire-amber hover:text-campfire-amber/80"
+                        >
+                            <FaPlus className="mr-1" />
+                            Добавить фильтр
+                        </button>
+                    </div>
+
+                    <div className="space-y-2">
+                        {filters.map((filter, index) => (
+                            <div key={index} className="flex items-center space-x-2">
+                                <select
+                                    value={filter.field}
+                                    onChange={(e) => updateFilter(index, 'field', e.target.value)}
+                                    className="flex-1 p-2 bg-campfire-charcoal border border-campfire-ash/30 rounded-md text-campfire-light focus:ring-2 focus:ring-campfire-amber focus:border-transparent"
+                                >
+                                    <option value="">Выберите поле</option>
+                                    {fields.map(field => (
+                                        <option key={field.value} value={field.value}>
+                                            {field.label}
+                                        </option>
+                                    ))}
+                                </select>
+
+                                <select
+                                    value={filter.operator}
+                                    onChange={(e) => updateFilter(index, 'operator', e.target.value)}
+                                    className="w-32 p-2 bg-campfire-charcoal border border-campfire-ash/30 rounded-md text-campfire-light focus:ring-2 focus:ring-campfire-amber focus:border-transparent"
+                                >
+                                    {operators.map(op => (
+                                        <option key={op.value} value={op.value}>
+                                            {op.label}
+                                        </option>
+                                    ))}
+                                </select>
+
+                                <input
+                                    type="text"
+                                    value={filter.value}
+                                    onChange={(e) => updateFilter(index, 'value', e.target.value)}
+                                    className="flex-1 p-2 bg-campfire-charcoal border border-campfire-ash/30 rounded-md text-campfire-light focus:ring-2 focus:ring-campfire-amber focus:border-transparent"
+                                    placeholder="Значение"
+                                />
+
+                                {filters.length > 1 && (
+                                    <button
+                                        onClick={() => removeFilter(index)}
+                                        className="p-2 text-red-500 hover:text-red-400"
+                                    >
+                                        <FaTrash />
+                                    </button>
+                                )}
+                            </div>
+                        ))}
+                    </div>
+                </div>
+
+                <button
+                    onClick={sendNotification}
+                    disabled={loading}
+                    className="w-full py-2 px-4 bg-campfire-amber text-campfire-dark rounded-md hover:bg-campfire-amber/80 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center"
+                >
+                    {loading ? (
+                        'Отправка...'
+                    ) : (
+                        <>
+                            <FaPaperPlane className="mr-2" />
+                            Отправить уведомления
+                        </>
+                    )}
+                </button>
+            </div>
+        </div>
+    );
+};
+
+export default NotificationManager; 
\ No newline at end of file
diff --git a/src/components/admin/TMDBImportModal.jsx b/src/components/admin/TMDBImportModal.jsx
new file mode 100644
index 0000000..420f67f
--- /dev/null
+++ b/src/components/admin/TMDBImportModal.jsx
@@ -0,0 +1,153 @@
+import React, { useState } from 'react';
+import { FaSearch, FaSpinner } from 'react-icons/fa';
+
+const TMDBImportModal = ({ onClose, onImport }) => {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [searchResults, setSearchResults] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  const searchTMDB = async (query) => {
+    if (!query.trim()) return;
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const response = await fetch(
+        `https://api.themoviedb.org/3/search/multi?api_key=ba3a2d0e9b1ceaf29511da9f2d26bf91&query=${encodeURIComponent(query)}&language=ru-RU`,
+        {
+          headers: {
+            'Authorization': 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJiYTNhMmQwZTliMWNlYWYyOTUxMWRhOWYyZDI2YmY5MSIsIm5iZiI6MTc0NTc0MjkwNy4yMTQwMDAyLCJzdWIiOiI2ODBkZWMzYjE2MzVkMjkxOGM4MGZkN2IiLCJzY29wZXMiOlsiYXBpX3JlYWQiXSwidmVyc2lvbiI6MX0.xHuQc27ZvJWzl1oLdBK50nMSxNsETd863gjnDnOuyCU'
+          }
+        }
+      );
+
+      if (!response.ok) {
+        throw new Error('Ошибка при поиске в TMDB');
+      }
+
+      const data = await response.json();
+      setSearchResults(data.results.filter(item => item.media_type === 'movie' || item.media_type === 'tv'));
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSearch = (e) => {
+    e.preventDefault();
+    searchTMDB(searchQuery);
+  };
+
+  const handleImport = async (item) => {
+    try {
+      setLoading(true);
+      setError(null);
+
+      // Получаем детальную информацию о фильме/сериале
+      const response = await fetch(
+        `https://api.themoviedb.org/3/${item.media_type}/${item.id}?api_key=ba3a2d0e9b1ceaf29511da9f2d26bf91&language=ru-RU`,
+        {
+          headers: {
+            'Authorization': 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJiYTNhMmQwZTliMWNlYWYyOTUxMWRhOWYyZDI2YmY5MSIsIm5iZiI6MTc0NTc0MjkwNy4yMTQwMDAyLCJzdWIiOiI2ODBkZWMzYjE2MzVkMjkxOGM4MGZkN2IiLCJzY29wZXMiOlsiYXBpX3JlYWQiXSwidmVyc2lvbiI6MX0.xHuQc27ZvJWzl1oLdBK50nMSxNsETd863gjnDnOuyCU'
+          }
+        }
+      );
+
+      if (!response.ok) {
+        throw new Error('Ошибка при получении деталей');
+      }
+
+      const details = await response.json();
+
+      // Формируем данные для импорта
+      const importData = {
+        title: details.title || details.name,
+        path: (details.title || details.name).toLowerCase().replace(/[^a-z0-9]+/g, '-'),
+        type: item.media_type === 'movie' ? 'movie' : 'tv',
+        overview: details.overview,
+        release_date: details.release_date || details.first_air_date,
+        poster_path: details.poster_path,
+        backdrop_path: details.backdrop_path,
+        tmdb_id: details.id,
+        tmdb_type: item.media_type
+      };
+
+      onImport(importData);
+      onClose();
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="p-6 bg-campfire-charcoal rounded-lg shadow-md text-campfire-light">
+      <h2 className="text-2xl font-bold mb-6">Импорт из TMDB</h2>
+
+      <form onSubmit={handleSearch} className="mb-6">
+        <div className="flex gap-2">
+          <input
+            type="text"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            placeholder="Поиск фильмов и сериалов..."
+            className="flex-1 input px-3 py-2 bg-campfire-dark text-campfire-light border border-campfire-ash/30 rounded-md focus:outline-none focus:ring-campfire-amber focus:border-campfire-amber"
+          />
+          <button
+            type="submit"
+            disabled={loading}
+            className="btn-primary flex items-center gap-2"
+          >
+            {loading ? <FaSpinner className="animate-spin" /> : <FaSearch />}
+            <span>Поиск</span>
+          </button>
+        </div>
+      </form>
+
+      {error && (
+        <div className="bg-status-error/20 text-status-error p-4 rounded-md mb-6">
+          {error}
+        </div>
+      )}
+
+      {searchResults.length > 0 && (
+        <div className="space-y-4 max-h-[60vh] overflow-y-auto custom-scrollbar">
+          {searchResults.map((item) => (
+            <div
+              key={item.id}
+              className="flex items-center gap-4 p-4 bg-campfire-dark rounded-lg hover:bg-campfire-ash/20 transition-colors"
+            >
+              {item.poster_path && (
+                <img
+                  src={`https://image.tmdb.org/t/p/w92${item.poster_path}`}
+                  alt={item.title || item.name}
+                  className="w-16 h-24 object-cover rounded"
+                />
+              )}
+              <div className="flex-1">
+                <h3 className="font-semibold">{item.title || item.name}</h3>
+                <p className="text-sm text-campfire-ash">
+                  {item.media_type === 'movie' ? 'Фильм' : 'Сериал'} •{' '}
+                  {new Date(item.release_date || item.first_air_date).getFullYear()}
+                </p>
+              </div>
+              <button
+                onClick={() => handleImport(item)}
+                disabled={loading}
+                className="btn-secondary"
+              >
+                Импорт
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TMDBImportModal; 
\ No newline at end of file
diff --git a/src/components/common/ImageCropper.jsx b/src/components/common/ImageCropper.jsx
new file mode 100644
index 0000000..df81248
--- /dev/null
+++ b/src/components/common/ImageCropper.jsx
@@ -0,0 +1,284 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { FaCrop, FaCheck, FaTimes } from 'react-icons/fa';
+
+const ImageCropper = ({ 
+  imageUrl, 
+  onCrop, 
+  onCancel, 
+  aspectRatio = 2/3, // По умолчанию для постера
+  maxWidth = 500,
+  maxHeight = 750
+}) => {
+  const [crop, setCrop] = useState({ x: 0, y: 0, width: 0, height: 0 });
+  const [isDragging, setIsDragging] = useState(false);
+  const [startPos, setStartPos] = useState({ x: 0, y: 0 });
+  const [imageSize, setImageSize] = useState({ width: 0, height: 0 });
+  const containerRef = useRef(null);
+  const imageRef = useRef(null);
+
+  // Добавляем обработчик колесика мыши
+  const handleWheel = (e) => {
+    e.preventDefault();
+    const delta = e.deltaY > 0 ? -0.1 : 0.1; // Уменьшаем при прокрутке вниз, увеличиваем при прокрутке вверх
+    
+    // Вычисляем новые размеры с сохранением соотношения сторон
+    const newWidth = Math.max(100, Math.min(imageSize.width, crop.width * (1 + delta)));
+    const newHeight = newWidth / aspectRatio;
+    
+    // Проверяем, не выходит ли новая область за пределы изображения
+    if (newWidth <= imageSize.width && newHeight <= imageSize.height) {
+      // Центрируем новую область относительно текущей
+      const newX = crop.x + (crop.width - newWidth) / 2;
+      const newY = crop.y + (crop.height - newHeight) / 2;
+      
+      setCrop({
+        x: Math.max(0, Math.min(newX, imageSize.width - newWidth)),
+        y: Math.max(0, Math.min(newY, imageSize.height - newHeight)),
+        width: newWidth,
+        height: newHeight
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (imageRef.current) {
+      const img = imageRef.current;
+      img.onload = () => {
+        // Получаем оригинальные размеры изображения
+        const originalWidth = img.naturalWidth;
+        const originalHeight = img.naturalHeight;
+        
+        // Вычисляем размеры для отображения с учетом максимальных размеров окна
+        const maxWidth = window.innerWidth * 0.8;
+        const maxHeight = window.innerHeight * 0.6;
+        
+        // Вычисляем масштаб для отображения
+        const scale = Math.min(
+          maxWidth / originalWidth,
+          maxHeight / originalHeight
+        );
+        
+        // Устанавливаем размеры для отображения
+        const displayWidth = originalWidth * scale;
+        const displayHeight = originalHeight * scale;
+        
+        setImageSize({ 
+          width: displayWidth, 
+          height: displayHeight,
+          scale: scale,
+          originalWidth,
+          originalHeight
+        });
+
+        // Вычисляем размеры области кадрирования
+        let cropWidth, cropHeight;
+        
+        if (aspectRatio === 16/9) { // Для баннера
+          cropWidth = Math.min(displayWidth, displayHeight * (16/9));
+          cropHeight = cropWidth / (16/9);
+        } else if (aspectRatio === 2/3) { // Для постера
+          cropWidth = Math.min(displayWidth, displayHeight * (2/3));
+          cropHeight = cropWidth / (2/3);
+        } else {
+          cropWidth = displayWidth;
+          cropHeight = displayHeight;
+        }
+
+        // Центрируем область кадрирования
+        setCrop({
+          x: (displayWidth - cropWidth) / 2,
+          y: (displayHeight - cropHeight) / 2,
+          width: cropWidth,
+          height: cropHeight
+        });
+      };
+    }
+  }, [imageUrl, aspectRatio]);
+
+  const handleMouseDown = (e) => {
+    const rect = containerRef.current.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+
+    // Проверяем, находится ли клик внутри области кадрирования
+    if (
+      x >= crop.x && 
+      x <= crop.x + crop.width && 
+      y >= crop.y && 
+      y <= crop.y + crop.height
+    ) {
+      setIsDragging(true);
+      setStartPos({ x: x - crop.x, y: y - crop.y });
+    }
+  };
+
+  const handleMouseMove = (e) => {
+    if (!isDragging) return;
+
+    const rect = containerRef.current.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+
+    // Вычисляем новую позицию с учетом границ
+    let newX = x - startPos.x;
+    let newY = y - startPos.y;
+
+    // Ограничиваем движение границами изображения
+    newX = Math.max(0, Math.min(newX, imageSize.width - crop.width));
+    newY = Math.max(0, Math.min(newY, imageSize.height - crop.height));
+
+    setCrop(prev => ({
+      ...prev,
+      x: newX,
+      y: newY
+    }));
+  };
+
+  const handleMouseUp = () => {
+    setIsDragging(false);
+  };
+
+  const handleCrop = () => {
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    
+    // Получаем оригинальные размеры изображения
+    const { originalWidth, originalHeight, scale } = imageSize;
+    
+    // Вычисляем размеры для выходного изображения
+    let targetWidth, targetHeight;
+    
+    if (aspectRatio === 16/9) { // Для баннера
+      targetWidth = 1920;
+      targetHeight = 1080;
+    } else if (aspectRatio === 2/3) { // Для постера
+      targetWidth = 1000;
+      targetHeight = 1500;
+    } else {
+      targetWidth = originalWidth;
+      targetHeight = originalHeight;
+    }
+    
+    canvas.width = targetWidth;
+    canvas.height = targetHeight;
+    
+    // Вычисляем координаты и размеры в оригинальном масштабе
+    const sourceX = crop.x / scale;
+    const sourceY = crop.y / scale;
+    const sourceWidth = crop.width / scale;
+    const sourceHeight = crop.height / scale;
+    
+    // Рисуем кадрированное изображение
+    ctx.drawImage(
+      imageRef.current,
+      sourceX,
+      sourceY,
+      sourceWidth,
+      sourceHeight,
+      0,
+      0,
+      targetWidth,
+      targetHeight
+    );
+    
+    // Получаем кадрированное изображение в виде blob
+    canvas.toBlob((blob) => {
+      onCrop(blob);
+    }, 'image/jpeg', 0.95);
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black/80 z-50 flex items-center justify-center p-4">
+      <div className="bg-campfire-charcoal rounded-lg p-6 max-w-[90vw] max-h-[90vh] w-full overflow-auto">
+        <div className="flex justify-between items-center mb-4">
+          <h3 className="text-xl font-bold text-campfire-light">Кадрирование изображения</h3>
+          <div className="flex gap-2">
+            <button
+              onClick={handleCrop}
+              className="btn-primary flex items-center gap-2"
+            >
+              <FaCheck /> Применить
+            </button>
+            <button
+              onClick={onCancel}
+              className="btn-secondary flex items-center gap-2"
+            >
+              <FaTimes /> Отмена
+            </button>
+          </div>
+        </div>
+
+        <div 
+          ref={containerRef}
+          className="relative bg-campfire-dark rounded-lg overflow-hidden mx-auto"
+          style={{ 
+            width: Math.min(imageSize.width, window.innerWidth * 0.8),
+            height: Math.min(imageSize.height, window.innerHeight * 0.6)
+          }}
+          onMouseDown={handleMouseDown}
+          onMouseMove={handleMouseMove}
+          onMouseUp={handleMouseUp}
+          onMouseLeave={handleMouseUp}
+          onWheel={handleWheel}
+        >
+          <img
+            ref={imageRef}
+            src={imageUrl}
+            alt="Для кадрирования"
+            className="max-w-full h-auto"
+          />
+          
+          {/* Область кадрирования */}
+          <div
+            className="absolute border-2 border-campfire-amber cursor-move"
+            style={{
+              left: crop.x,
+              top: crop.y,
+              width: crop.width,
+              height: crop.height
+            }}
+          >
+            {/* Сетка */}
+            <div className="absolute inset-0 grid grid-cols-3 grid-rows-3">
+              {[...Array(4)].map((_, i) => (
+                <div
+                  key={`v${i}`}
+                  className="absolute top-0 bottom-0 w-px bg-campfire-amber/50"
+                  style={{ left: `${(i * 100) / 3}%` }}
+                />
+              ))}
+              {[...Array(4)].map((_, i) => (
+                <div
+                  key={`h${i}`}
+                  className="absolute left-0 right-0 h-px bg-campfire-amber/50"
+                  style={{ top: `${(i * 100) / 3}%` }}
+                />
+              ))}
+            </div>
+          </div>
+
+          {/* Затемнение вне области кадрирования */}
+          <div className="absolute inset-0 bg-black/50">
+            <div
+              className="absolute bg-transparent"
+              style={{
+                left: crop.x,
+                top: crop.y,
+                width: crop.width,
+                height: crop.height
+              }}
+            />
+          </div>
+        </div>
+
+        <div className="mt-4 text-sm text-campfire-ash">
+          <p>• Перетащите область кадрирования для выбора нужной части изображения</p>
+          <p>• Используйте колесико мыши для изменения размера области кадрирования</p>
+          <p>• Используйте сетку для точного позиционирования</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ImageCropper; 
\ No newline at end of file
diff --git a/src/components/common/LazyImage.jsx b/src/components/common/LazyImage.jsx
new file mode 100644
index 0000000..d361a6e
--- /dev/null
+++ b/src/components/common/LazyImage.jsx
@@ -0,0 +1,31 @@
+import React, { useState, useEffect } from 'react';
+
+const LazyImage = ({ src, alt, className, fallbackSrc = 'https://images.pexels.com/photos/1704488/pexels-photo-1704488.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1' }) => {
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    const img = new Image();
+    img.src = src;
+    img.onload = () => setIsLoaded(true);
+    img.onerror = () => setError(true);
+  }, [src]);
+
+  return (
+    <div className={`relative ${className}`}>
+      {!isLoaded && !error && (
+        <div className="absolute inset-0 bg-campfire-charcoal animate-pulse" />
+      )}
+      <img
+        src={error ? fallbackSrc : src}
+        alt={alt}
+        className={`w-full h-full object-cover transition-opacity duration-300 ${
+          isLoaded ? 'opacity-100' : 'opacity-0'
+        }`}
+        loading="lazy"
+      />
+    </div>
+  );
+};
+
+export default LazyImage; 
\ No newline at end of file
diff --git a/src/components/common/LoadingSpinner.jsx b/src/components/common/LoadingSpinner.jsx
new file mode 100644
index 0000000..2e3e10e
--- /dev/null
+++ b/src/components/common/LoadingSpinner.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const LoadingSpinner = () => {
+  return (
+    <div className="min-h-screen bg-campfire-dark pt-20 flex justify-center items-center">
+      <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-campfire-amber"></div>
+    </div>
+  );
+};
+
+export default LoadingSpinner; 
\ No newline at end of file
diff --git a/src/components/common/MobileWarning.jsx b/src/components/common/MobileWarning.jsx
new file mode 100644
index 0000000..c7af0c4
--- /dev/null
+++ b/src/components/common/MobileWarning.jsx
@@ -0,0 +1,26 @@
+import React from 'react';
+
+const MobileWarning = ({ onDismiss }) => {
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-campfire-dark p-4">
+      <div className="bg-campfire-charcoal rounded-lg shadow-xl p-6 max-w-md text-center">
+        <h2 className="text-2xl font-bold text-campfire-amber mb-4">Мобильная версия в разработке</h2>
+        <p className="text-campfire-light mb-6">
+          В настоящее время сайт оптимизирован только для десктопных устройств. 
+          Для наилучшего опыта рекомендуем использовать компьютер или планшет.
+        </p>
+        <div className="text-campfire-light/70 text-sm mb-6">
+          Мы работаем над мобильной версией и скоро она будет доступна!
+        </div>
+        <button
+          onClick={onDismiss}
+          className="px-6 py-2 bg-campfire-amber text-campfire-dark rounded-lg hover:bg-campfire-amber/80 transition-colors font-medium"
+        >
+          Мне всё равно, перейти
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default MobileWarning; 
\ No newline at end of file
diff --git a/src/components/common/VirtualList.jsx b/src/components/common/VirtualList.jsx
new file mode 100644
index 0000000..05371e8
--- /dev/null
+++ b/src/components/common/VirtualList.jsx
@@ -0,0 +1,107 @@
+import React, { useEffect, useRef, useState, memo } from 'react';
+import PropTypes from 'prop-types';
+
+const VirtualList = memo(function VirtualList({
+  items,
+  height,
+  itemHeight,
+  renderItem,
+  overscan = 3,
+  className = '',
+  onScroll,
+  initialScrollOffset = 0
+}) {
+  const [scrollTop, setScrollTop] = useState(initialScrollOffset);
+  const [viewportHeight, setViewportHeight] = useState(height);
+  const containerRef = useRef(null);
+
+  // Вычисляем видимые элементы
+  const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
+  const endIndex = Math.min(
+    items.length - 1,
+    Math.ceil((scrollTop + viewportHeight) / itemHeight) + overscan
+  );
+
+  // Вычисляем смещение для видимых элементов
+  const offsetY = startIndex * itemHeight;
+
+  // Обработчик прокрутки
+  const handleScroll = (event) => {
+    const newScrollTop = event.target.scrollTop;
+    setScrollTop(newScrollTop);
+    onScroll?.(newScrollTop);
+  };
+
+  // Обновление высоты при изменении размера окна
+  useEffect(() => {
+    const updateHeight = () => {
+      if (containerRef.current) {
+        setViewportHeight(containerRef.current.clientHeight);
+      }
+    };
+
+    updateHeight();
+    window.addEventListener('resize', updateHeight);
+    return () => window.removeEventListener('resize', updateHeight);
+  }, []);
+
+  // Установка начальной позиции прокрутки
+  useEffect(() => {
+    if (containerRef.current && initialScrollOffset > 0) {
+      containerRef.current.scrollTop = initialScrollOffset;
+    }
+  }, [initialScrollOffset]);
+
+  return (
+    <div
+      ref={containerRef}
+      className={`overflow-auto ${className}`}
+      style={{ height }}
+      onScroll={handleScroll}
+    >
+      <div
+        style={{
+          height: items.length * itemHeight,
+          position: 'relative'
+        }}
+      >
+        <div
+          style={{
+            position: 'absolute',
+            top: offsetY,
+            left: 0,
+            right: 0
+          }}
+        >
+          {items.slice(startIndex, endIndex + 1).map((item, index) => (
+            <div
+              key={item.id || index}
+              style={{
+                height: itemHeight,
+                position: 'absolute',
+                top: index * itemHeight,
+                left: 0,
+                right: 0
+              }}
+            >
+              {renderItem(item, startIndex + index)}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+});
+
+VirtualList.propTypes = {
+  items: PropTypes.array.isRequired,
+  height: PropTypes.number.isRequired,
+  itemHeight: PropTypes.number.isRequired,
+  renderItem: PropTypes.func.isRequired,
+  overscan: PropTypes.number,
+  className: PropTypes.string,
+  onScroll: PropTypes.func,
+  initialScrollOffset: PropTypes.number
+};
+
+export default VirtualList; 
\ No newline at end of file
diff --git a/src/components/common/index.js b/src/components/common/index.js
new file mode 100644
index 0000000..b0f8f3a
--- /dev/null
+++ b/src/components/common/index.js
@@ -0,0 +1,5 @@
+export { default as Modal } from './Modal';
+export { default as Button } from './Button';
+export { default as Input } from './Input';
+export { default as Card } from './Card';
+export { default as LoadingSpinner } from './LoadingSpinner'; 
\ No newline at end of file
diff --git a/src/components/layout/Header.jsx b/src/components/layout/Header.jsx
index b2142f8..2a13fe0 100644
--- a/src/components/layout/Header.jsx
+++ b/src/components/layout/Header.jsx
@@ -3,7 +3,7 @@ import { Link, NavLink, useNavigate, useLocation } from 'react-router-dom';
 import { useAuth } from '../../contexts/AuthContext';
 import { useProfileActions } from '../../contexts/ProfileActionsContext';
 import { getFileUrl } from '../../services/pocketbaseService';
-import { FaUserCircle, FaSignOutAlt, FaEdit, FaBars, FaTimes, FaTachometerAlt, FaBook, FaTrophy, FaCog, FaHeadset, FaHome, FaUser } from 'react-icons/fa'; // Import FaBook, FaTrophy, FaCog, and FaHeadset
+import { FaUserCircle, FaSignOutAlt, FaEdit, FaBars, FaTimes, FaTachometerAlt, FaBook, FaTrophy, FaCog, FaHeadset, FaHome, FaUser, FaBell } from 'react-icons/fa'; // Import FaBook, FaTrophy, FaCog, and FaHeadset
 import { FiSearch } from 'react-icons/fi';
 import SearchBar from '../ui/SearchBar';
 import AlphaBadge from '../ui/AlphaBadge';
@@ -12,9 +12,12 @@ import { canManageSystem } from '../../utils/permissions';
 import Dock from '../reactbits/Components/Dock/Dock';
 import '../reactbits/Components/Dock/Dock.css';
 import { AnimatePresence, motion } from 'framer-motion';
+import { pb } from '../../services/pocketbaseService';
+import { formatDistanceToNow } from 'date-fns';
+import { ru } from 'date-fns/locale';
 
 const Header = () => {
-  const { user, userProfile, signOut } = useAuth();
+  const { user, userProfile, logout } = useAuth();
   const profileActions = useProfileActions();
   const navigate = useNavigate();
   const location = useLocation();
@@ -25,6 +28,11 @@ const Header = () => {
   const profileMenuRef = useRef(null);
   const mobileMenuRef = useRef(null);
   const searchContainerRef = useRef(null); // Ref for the search dropdown container
+  const [isNotificationsOpen, setIsNotificationsOpen] = useState(false);
+  const notificationsRef = useRef(null);
+  const [notifications, setNotifications] = useState([]);
+  const [unreadCount, setUnreadCount] = useState(0);
+  const [logoError, setLogoError] = useState(false);
 
   // Эффект для проверки доступности локального логотипа при монтировании
   useEffect(() => {
@@ -34,8 +42,8 @@ const Header = () => {
     img.src = localLogo;
   }, []); // Запускаем только один раз при монтировании
 
-  const handleExternalLogoError = () => {
-    console.log("External logo failed to load.");
+  const handleLogoError = () => {
+    setLogoError(true);
   };
 
   const toggleProfileMenu = () => {
@@ -43,6 +51,13 @@ const Header = () => {
     setIsMobileMenu(false); // Close mobile menu if profile opens
     setIsSearchOpen(false); // Close search if profile opens
   };
+  
+  const toggleNotificationMenu = () => {
+    setIsNotificationsOpen(!isNotificationsOpen);
+    setIsProfileMenuOpen(false);
+    setIsMobileMenu(false);
+    setIsSearchOpen(false);
+  };
 
   const toggleMobileMenu = () => {
     setIsMobileMenu(!isMobileMenuOpen);
@@ -92,17 +107,10 @@ const Header = () => {
   }, []);
 
   // Handle Edit Profile click from Header
-  const handleEditProfileClick = () => {
-      if (userProfile) {
-          console.log('Header: Edit Profile clicked. Navigating to profile and triggering modal.');
-          navigate(`/profile/${userProfile.username}`);
-          if (profileActions?.triggerEditModal) {
-              profileActions.triggerEditModal();
-          }
-          closeMenus();
-      } else {
-          console.log('Header: Edit Profile clicked, but userProfile is not available.');
-      }
+  const handleEditProfile = () => {
+    if (userProfile) {
+      navigate(`/profile/${userProfile.username}`, { state: { shouldOpenEditModal: true } });
+    }
   };
 
   const canAccessAdmin = canManageSystem(user);
@@ -134,7 +142,7 @@ const Header = () => {
     }
   ];
 
-  const profileItems = [
+  const profileItems = user ? [
     {
       icon: (
         <div className="flex items-center gap-2 px-2">
@@ -143,22 +151,104 @@ const Header = () => {
             alt={userProfile?.username || 'User'}
             className="w-6 h-6 rounded-full object-cover border border-campfire-ash/30"
           />
-          <span className="text-[10px] text-campfire-light truncate max-w-[60px]">{userProfile?.username || 'Профиль'}</span>
+          <span className="text-[10px] text-campfire-light truncate max-w-[60px]">{userProfile?.login || 'Профиль'}</span>
         </div>
       ),
-      onClick: () => navigate(userProfile ? `/profile/${userProfile.username}` : '/auth/login'),
+      onClick: () => navigate(`/profile/${userProfile?.login}`),
       className: location.pathname.startsWith('/profile') ? 'bg-campfire-amber/20' : '',
       showLabel: false,
       isRectangular: true
     },
+    {
+      icon: <FaBell className={`w-5 h-5 ${isNotificationsOpen ? 'text-campfire-amber' : 'text-campfire-light'}`} />,
+      onClick: toggleNotificationMenu,
+      className: isNotificationsOpen ? 'bg-campfire-amber/20' : '',
+      showLabel: false
+    },
     {
       icon: <FaBars className="w-5 h-5 text-campfire-light" />,
-      label: 'Меню',
       onClick: toggleProfileMenu,
-      className: isProfileMenuOpen ? 'bg-campfire-amber/20' : ''
+      className: isProfileMenuOpen ? 'bg-campfire-amber/20' : '',
+      showLabel: false
+    }
+  ] : [
+    {
+      icon: <FaUser className="w-5 h-5 text-campfire-light" />,
+      onClick: () => navigate('/auth/login'),
+      className: location.pathname === '/auth/login' ? 'bg-campfire-amber/20' : '',
+      showLabel: false
     }
   ];
 
+  // Закрываем меню при изменении маршрута
+  useEffect(() => {
+    setIsProfileMenuOpen(false);
+    setIsNotificationsOpen(false);
+  }, [location]);
+
+  // Обработка клика вне меню
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (profileMenuRef.current && !profileMenuRef.current.contains(event.target)) {
+        setIsProfileMenuOpen(false);
+      }
+      if (notificationsRef.current && !notificationsRef.current.contains(event.target)) {
+        setIsNotificationsOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (user) {
+      loadNotifications();
+    }
+  }, [user]);
+
+  const loadNotifications = async () => {
+    try {
+      const records = await pb.collection('notifications').getList(1, 10, {
+        filter: `user_id = "${user.id}"`,
+        sort: '-created'
+      });
+      setNotifications(records.items);
+      setUnreadCount(records.items.filter(n => !n.is_read).length);
+    } catch (error) {
+      console.error('Error loading notifications:', error);
+    }
+  };
+
+  const markAsRead = async (notificationId) => {
+    try {
+      await pb.collection('notifications').update(notificationId, {
+        is_read: true
+      });
+      setNotifications(notifications.map(n => 
+        n.id === notificationId ? { ...n, is_read: true } : n
+      ));
+      setUnreadCount(prev => Math.max(0, prev - 1));
+    } catch (error) {
+      console.error('Error marking notification as read:', error);
+    }
+  };
+
+  // Прокрутка страницы вверх при изменении маршрута
+  useEffect(() => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth'
+    });
+  }, [location.pathname]);
+
+  const handleLogout = () => {
+    logout();
+    navigate('/auth');
+  };
+
   return (
 		<>
       <header className="fixed top-2 left-0 right-0 z-50">
@@ -170,7 +260,7 @@ const Header = () => {
                 src={logoSrc}
                 alt="CampFire мнение"
                 className="h-12"
-                onError={handleExternalLogoError}
+                onError={handleLogoError}
               />
         </Link>
 
@@ -220,24 +310,73 @@ const Header = () => {
                 spring={{ mass: 0.2, stiffness: 200, damping: 15 }}
               />
 
-              {/* Profile Dropdown Menu */}
+              {/* Notifications Dropdown */}
               <AnimatePresence>
-              {isProfileMenuOpen && (
+                {isNotificationsOpen && (
                   <motion.div
                     initial={{ opacity: 0, y: -10 }}
                     animate={{ opacity: 1, y: 0 }}
                     exit={{ opacity: 0, y: -10 }}
                     transition={{ duration: 0.2 }}
+                    ref={notificationsRef}
+                    className="absolute right-0 top-full mt-2 w-80 bg-campfire-charcoal rounded-md shadow-lg py-1 z-50 border border-campfire-ash/30"
+                  >
+                    <div className="p-4">
+                      <h3 className="text-lg font-semibold text-campfire-light mb-4">Уведомления</h3>
+                      {notifications.length === 0 ? (
+                        <p className="text-campfire-light/70 text-center py-4">Нет новых уведомлений</p>
+                      ) : (
+                        <div className="space-y-2 max-h-96 overflow-y-auto">
+                          {notifications.map(notification => (
+                            <div
+                              key={notification.id}
+                              className={`p-3 rounded-md cursor-pointer transition-colors ${
+                                notification.is_read 
+                                  ? 'bg-campfire-ash/10 hover:bg-campfire-ash/20' 
+                                  : 'bg-campfire-amber/10 hover:bg-campfire-amber/20'
+                              }`}
+                              onClick={() => markAsRead(notification.id)}
+                            >
+                              <div className="flex justify-between items-start">
+                                <div>
+                                  <h4 className="font-medium text-campfire-light">{notification.title}</h4>
+                                  <p className="text-sm text-campfire-light/70">{notification.message}</p>
+                                </div>
+                                <span className="text-xs text-campfire-light/50">
+                                  {formatDistanceToNow(new Date(notification.created), { 
+                                    addSuffix: true,
+                                    locale: ru 
+                                  })}
+                                </span>
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  </motion.div>
+                )}
+              </AnimatePresence>
+
+              {/* Profile Dropdown Menu */}
+              <AnimatePresence>
+                {isProfileMenuOpen && (
+                  <motion.div
+                    initial={{ opacity: 0, y: -10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    exit={{ opacity: 0, y: -10 }}
+                    transition={{ duration: 0.2 }}
+                    ref={profileMenuRef}
                     className="absolute right-0 top-full mt-2 w-48 bg-campfire-charcoal rounded-md shadow-lg py-1 z-50 border border-campfire-ash/30"
                   >
-                  <Link
-                    to={`/profile/${userProfile?.username}`}
-                    onClick={closeMenus}
-                    className="block px-4 py-2 text-sm text-campfire-light hover:bg-campfire-ash/20 flex items-center space-x-2"
-                  >
-                    <FaUserCircle />
-                    <span>Мой профиль</span>
-                  </Link>
+                    <Link
+                      to={`/profile/${userProfile?.login}`}
+                      onClick={closeMenus}
+                      className="block px-4 py-2 text-sm text-campfire-light hover:bg-campfire-ash/20 flex items-center space-x-2"
+                    >
+                      <FaUserCircle />
+                      <span>Мой профиль</span>
+                    </Link>
                     {canAccessAdmin && (
                        <Link
                            to="/admin"
@@ -250,7 +389,7 @@ const Header = () => {
                    )}
                    {userProfile && (
                        <button
-                           onClick={handleEditProfileClick}
+                           onClick={handleEditProfile}
                            className="block w-full text-left px-4 py-2 text-sm text-campfire-light hover:bg-campfire-ash/20 flex items-center space-x-2"
                        >
                            <FaEdit />
@@ -267,10 +406,7 @@ const Header = () => {
                           <span>Поддержка</span>
                         </Link>
                   <button
-                    onClick={() => {
-                      signOut();
-                      closeMenus();
-                    }}
+                    onClick={handleLogout}
                     className="block w-full text-left px-4 py-2 text-sm text-campfire-light hover:bg-campfire-ash/20 flex items-center space-x-2"
                   >
                     <FaSignOutAlt />
@@ -279,7 +415,7 @@ const Header = () => {
                       </>
                     )}
                   </motion.div>
-              )}
+                )}
               </AnimatePresence>
             </div>
 
@@ -343,10 +479,7 @@ const Header = () => {
             </NavLink>
              {user && (
                  <button
-                     onClick={() => {
-                         signOut();
-                         closeMenus();
-                     }}
+                     onClick={handleLogout}
                      className="block w-full text-left px-4 py-2 text-campfire-light hover:bg-campfire-ash/20 flex items-center space-x-2"
                  >
                      <FaSignOutAlt />
@@ -368,16 +501,28 @@ const Header = () => {
         className="md:hidden fixed bottom-0 left-0 right-0 z-50 bg-campfire-charcoal/80 backdrop-blur-md border-t border-campfire-ash/20"
       >
         <div className="container-custom py-2">
-          <Dock
-            items={mainItems}
-            className="bg-campfire-charcoal/50 backdrop-blur-sm rounded-md"
-            distance={120}
-            panelHeight={50}
-            baseItemSize={32}
-            dockHeight={30}
-            magnification={40}
-            spring={{ mass: 0.2, stiffness: 200, damping: 15 }}
-          />
+          <div className="flex justify-between items-center">
+            <Dock
+              items={mainItems}
+              className="bg-campfire-charcoal/50 backdrop-blur-sm rounded-md"
+              distance={120}
+              panelHeight={50}
+              baseItemSize={32}
+              dockHeight={30}
+              magnification={40}
+              spring={{ mass: 0.2, stiffness: 200, damping: 15 }}
+            />
+            <Dock
+              items={profileItems}
+              className="bg-campfire-charcoal/50 backdrop-blur-sm rounded-md"
+              distance={120}
+              panelHeight={50}
+              baseItemSize={32}
+              dockHeight={30}
+              magnification={40}
+              spring={{ mass: 0.2, stiffness: 200, damping: 15 }}
+            />
+          </div>
         </div>
       </motion.div>
 
diff --git a/src/components/layout/Layout.jsx b/src/components/layout/Layout.jsx
index 337d557..b3dbfb5 100644
--- a/src/components/layout/Layout.jsx
+++ b/src/components/layout/Layout.jsx
@@ -5,30 +5,27 @@ import { useAuth } from '../../contexts/AuthContext'; // Import useAuth
 
 console.log('Layout.jsx: Rendering Layout component'); // Add logging
 
-function Layout() {
-  const { isInitialized } = useAuth(); // Use isInitialized from auth context
+const Layout = () => {
+  const { loading, isInitialized } = useAuth();
 
-  // Optionally render a loading state if auth is not initialized
-  if (!isInitialized) {
-     console.log('Layout.jsx: Auth not initialized, rendering loading state.'); // Add logging
-     return (
-        <div className="min-h-screen flex items-center justify-center bg-campfire-dark">
-           <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-campfire-amber"></div>
-        </div>
-     );
+  if (!isInitialized || loading) {
+    return (
+      <div className="min-h-screen bg-campfire-dark flex items-center justify-center">
+        <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-campfire-amber"></div>
+      </div>
+    );
   }
 
   console.log('Layout.jsx: Auth initialized, rendering Header, Outlet, and Footer.'); // Add logging
   return (
-    <div className="flex flex-col min-h-screen bg-campfire-dark text-campfire-light">
+    <div className="min-h-screen bg-campfire-dark flex flex-col">
       <Header />
-      {/* Removed container-custom and mx-auto to allow content to stretch */}
-      <main className="flex-grow px-4 py-8">
-        <Outlet /> {/* Renders the matched route's component */}
+      <main className="flex-grow">
+        <Outlet />
       </main>
       <Footer />
     </div>
   );
-}
+};
 
 export default Layout;
diff --git a/src/components/media/MediaCard.jsx b/src/components/media/MediaCard.jsx
index 4a7adb2..c3ac67d 100644
--- a/src/components/media/MediaCard.jsx
+++ b/src/components/media/MediaCard.jsx
@@ -1,13 +1,15 @@
+import React, { memo } from 'react';
 import { Link } from 'react-router-dom';
 import { FaFire } from 'react-icons/fa'; // Changed FaStar to FaFire
 import { getFileUrl } from '../../services/pocketbaseService'; // Corrected import path
 import { useEffect } from 'react'; // Import useEffect for logging
 import { useAuth } from '../../contexts/AuthContext'; // Import useAuth
+import LazyImage from '../common/LazyImage';
 
 // MediaCard component displays a card for a media item.
 // It now accepts averageRating and reviewCount props from the parent.
 // Added userProfile prop to check admin/critic role
-function MediaCard({ media, userProfile }) {
+const MediaCard = memo(function MediaCard({ media, userProfile }) {
   // Destructure media properties, including the new ones from Supabase
   // Use 'path' for the link instead of 'id'
   // Используем 'poster' вместо 'poster_url' для имени файла
@@ -42,11 +44,10 @@ function MediaCard({ media, userProfile }) {
       <div className="card group h-full bg-campfire-charcoal rounded-lg overflow-hidden shadow-lg border border-campfire-ash/20 transition-all duration-300 hover:shadow-xl hover:border-campfire-amber/30 relative"> {/* Added relative for absolute positioning */}
         <div className="relative overflow-hidden aspect-[2/3]">
           {/* Используем posterUrl, полученный через getFileUrl */}
-          <img
+          <LazyImage
             src={posterUrl}
             alt={title}
-            className="w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-300"
-            loading="lazy"
+            className="w-full h-full transform group-hover:scale-105 transition-transform duration-300"
           />
           {/* Display average rating and review count */}
           {/* Проверяем, что average_rating не null и не undefined перед отображением */}
@@ -84,6 +85,6 @@ function MediaCard({ media, userProfile }) {
       </div>
     </Link>
   );
-}
+});
 
 export default MediaCard;
diff --git a/src/components/media/MediaCarousel.jsx b/src/components/media/MediaCarousel.jsx
index 657c387..83a8fae 100644
--- a/src/components/media/MediaCarousel.jsx
+++ b/src/components/media/MediaCarousel.jsx
@@ -1,30 +1,53 @@
-import React from 'react';
-import TiltedCard from '../components/reactbits/Components/TiltedCard/TiltedCard';
+import React, { memo, useCallback } from 'react';
+import { FaChevronLeft, FaChevronRight } from 'react-icons/fa';
+import MediaCard from './MediaCard';
 
-// Simple Media Carousel component
-const MediaCarousel = ({ media, userProfile }) => {
-  if (!media || media.length === 0) {
-    return <div className="text-campfire-ash text-center">Нет контента для отображения.</div>;
-  }
+const MediaCarousel = memo(function MediaCarousel({ title, media, userProfile }) {
+  const scrollContainerRef = React.useRef(null);
+
+  const scroll = useCallback((direction) => {
+    if (scrollContainerRef.current) {
+      const scrollAmount = direction === 'left' ? -400 : 400;
+      scrollContainerRef.current.scrollBy({
+        left: scrollAmount,
+        behavior: 'smooth'
+      });
+    }
+  }, []);
 
   return (
-    // Use flexbox for horizontal layout and overflow-x-auto for scrolling
-    // Add padding-bottom to prevent scrollbar from covering content
-    <div className="flex overflow-x-auto space-x-8 pb-4 scrollbar-thin scrollbar-thumb-campfire-amber scrollbar-track-campfire-charcoal">
-      {media.map((mediaItem) => (
-        // Wrap MediaCard in a div with flex-shrink-0 to prevent shrinking
-        // Set a fixed width for each card in the carousel
-        <div key={mediaItem.id} className="flex-shrink-0 w-40 sm:w-48 md:w-56 lg:w-64"> {/* Adjust width as needed */}
-          <TiltedCard 
-            imageSrc={mediaItem.poster_path}
-            captionText={mediaItem.title}
-            rating={mediaItem.rating}
-            releaseDate={mediaItem.release_date}
-          />
+    <div className="mb-8">
+      <div className="flex items-center justify-between mb-4">
+        <h2 className="text-xl font-bold text-campfire-light">{title}</h2>
+        <div className="flex space-x-2">
+          <button
+            onClick={() => scroll('left')}
+            className="p-2 rounded-full bg-campfire-charcoal text-campfire-light hover:bg-campfire-amber hover:text-campfire-dark transition-colors"
+          >
+            <FaChevronLeft />
+          </button>
+          <button
+            onClick={() => scroll('right')}
+            className="p-2 rounded-full bg-campfire-charcoal text-campfire-light hover:bg-campfire-amber hover:text-campfire-dark transition-colors"
+          >
+            <FaChevronRight />
+          </button>
         </div>
-      ))}
+      </div>
+      
+      <div
+        ref={scrollContainerRef}
+        className="flex space-x-4 overflow-x-auto pb-4 scrollbar-hide"
+        style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
+      >
+        {media.map((item) => (
+          <div key={item.id} className="flex-shrink-0 w-[200px]">
+            <MediaCard media={item} userProfile={userProfile} />
+          </div>
+        ))}
+      </div>
     </div>
   );
-};
+});
 
 export default MediaCarousel;
diff --git a/src/components/media/MediaHeader.jsx b/src/components/media/MediaHeader.jsx
new file mode 100644
index 0000000..9c24166
--- /dev/null
+++ b/src/components/media/MediaHeader.jsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { FaArrowLeft, FaFire } from 'react-icons/fa';
+
+const MediaHeader = ({ media }) => {
+  const backdropUrl = media.backdrop ? `url(${media.backdrop})` : 'none';
+  const posterUrl = media.poster ? `url(${media.poster})` : 'none';
+
+  return (
+    <div className="relative">
+      {/* Backdrop */}
+      <div 
+        className="relative h-[500px] w-full"
+        style={{
+          backgroundImage: `url(${getFileUrl(media, 'backdrop')})`,
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          backgroundRepeat: 'no-repeat'
+        }}
+      >
+        {/* Gradient Overlay */}
+        <div className="absolute inset-0 bg-gradient-to-t from-campfire-dark via-campfire-dark/80 to-transparent"></div>
+        
+        {/* Content */}
+        <div className="container-custom relative z-10 h-full flex items-end pb-12">
+          <div className="flex items-center">
+            {/* Poster */}
+            <img
+              src={getFileUrl(media, 'poster')}
+              alt={media.title}
+              className="w-32 md:w-48 rounded-lg shadow-xl mr-8 object-cover"
+            />
+            <div>
+              <h1 className="text-4xl md:text-5xl font-bold text-campfire-light mb-4">
+                {media.title}
+              </h1>
+              <div className="flex items-center text-campfire-ash text-lg mb-4">
+                <span className="text-campfire-amber mr-4 text-2xl font-bold">
+                  {media.average_rating ? parseFloat(media.average_rating).toFixed(1) : 'N/A'} / 10
+                </span>
+                <FaFire className="text-campfire-amber mr-4 text-xl" />
+                <span className="text-campfire-ash text-lg mr-4">
+                  {media.review_count || 0} рецензий
+                </span>
+                {media.release_date && (
+                  <span className="text-campfire-ash text-lg">
+                    Дата выхода: {new Date(media.release_date).toLocaleDateString()}
+                  </span>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MediaHeader; 
\ No newline at end of file
diff --git a/src/components/navigation/ProfileMenu.jsx b/src/components/navigation/ProfileMenu.jsx
index 4b1430c..2af4ccb 100644
--- a/src/components/navigation/ProfileMenu.jsx
+++ b/src/components/navigation/ProfileMenu.jsx
@@ -1,18 +1,19 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, memo, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { getFileUrl } from '../../utils/fileUtils';
+import LazyImage from '../common/LazyImage';
 
-const ProfileMenu = ({ isOpen, onClose, user, onSignOut }) => {
+const ProfileMenu = memo(function ProfileMenu({ isOpen, onClose, user, onSignOut }) {
     const navigate = useNavigate();
     const menuRef = useRef(null);
 
-    useEffect(() => {
-        const handleClickOutside = (event) => {
-            if (menuRef.current && !menuRef.current.contains(event.target)) {
-                onClose();
-            }
-        };
+    const handleClickOutside = useCallback((event) => {
+        if (menuRef.current && !menuRef.current.contains(event.target)) {
+            onClose();
+        }
+    }, [onClose]);
 
+    useEffect(() => {
         if (isOpen) {
             document.addEventListener('mousedown', handleClickOutside);
         }
@@ -20,7 +21,17 @@ const ProfileMenu = ({ isOpen, onClose, user, onSignOut }) => {
         return () => {
             document.removeEventListener('mousedown', handleClickOutside);
         };
-    }, [isOpen, onClose]);
+    }, [isOpen, handleClickOutside]);
+
+    const handleProfileClick = useCallback(() => {
+        navigate(`/profile/${user.login}`);
+        onClose();
+    }, [navigate, user.login, onClose]);
+
+    const handleSignOut = useCallback(() => {
+        onSignOut();
+        onClose();
+    }, [onSignOut, onClose]);
 
     if (!isOpen) return null;
 
@@ -33,10 +44,10 @@ const ProfileMenu = ({ isOpen, onClose, user, onSignOut }) => {
             >
                 <div className="p-4 border-b border-campfire-gold/20">
                     <div className="flex items-center space-x-3">
-                        <img
+                        <LazyImage
                             src={getFileUrl(user, 'profile_picture', { thumb: '100x100' }) || '/default-avatar.png'}
                             alt={user.username}
-                            className="w-10 h-10 rounded-full object-cover"
+                            className="w-10 h-10 rounded-full"
                         />
                         <div>
                             <h3 className="text-campfire-light font-semibold">{user.username}</h3>
@@ -46,19 +57,13 @@ const ProfileMenu = ({ isOpen, onClose, user, onSignOut }) => {
                 </div>
                 <div className="py-2">
                     <button
-                        onClick={() => {
-                            navigate(`/profile/${user.username}`);
-                            onClose();
-                        }}
+                        onClick={handleProfileClick}
                         className="w-full px-4 py-2 text-left text-campfire-light hover:bg-campfire-gold/10 transition-colors"
                     >
                         Профиль
                     </button>
                     <button
-                        onClick={() => {
-                            onSignOut();
-                            onClose();
-                        }}
+                        onClick={handleSignOut}
                         className="w-full px-4 py-2 text-left text-campfire-light hover:bg-campfire-gold/10 transition-colors"
                     >
                         Выйти
@@ -67,6 +72,6 @@ const ProfileMenu = ({ isOpen, onClose, user, onSignOut }) => {
             </div>
         </div>
     );
-};
+});
 
 export default ProfileMenu; 
\ No newline at end of file
diff --git a/src/components/notifications/NotificationCenter.jsx b/src/components/notifications/NotificationCenter.jsx
new file mode 100644
index 0000000..63763af
--- /dev/null
+++ b/src/components/notifications/NotificationCenter.jsx
@@ -0,0 +1,275 @@
+import React, { useState, useEffect } from 'react';
+import { pb } from '../../services/pocketbaseService';
+import { useAuth } from '../../contexts/AuthContext';
+import { FaBell, FaTrophy, FaHeart, FaComment, FaCog, FaLevelUpAlt } from 'react-icons/fa';
+
+const NotificationCenter = () => {
+    const { user } = useAuth();
+    const [notifications, setNotifications] = useState([]);
+    const [unreadCount, setUnreadCount] = useState(0);
+    const [isOpen, setIsOpen] = useState(false);
+    const [settings, setSettings] = useState(null);
+    const [error, setError] = useState(null);
+
+    useEffect(() => {
+        if (user) {
+            loadNotifications();
+            loadSettings();
+            
+            // Подписываемся на новые уведомления
+            try {
+                const subscription = pb.collection('notifications').subscribe('*', () => {
+                    loadNotifications();
+                });
+                
+                // Возвращаем функцию очистки
+                return () => {
+                    if (subscription && typeof subscription.unsubscribe === 'function') {
+                        subscription.unsubscribe();
+                    }
+                };
+            } catch (err) {
+                console.error('Error subscribing to notifications:', err);
+                setError('Не удалось подписаться на уведомления');
+            }
+        }
+    }, [user]);
+
+    const loadNotifications = async () => {
+        try {
+            const records = await pb.collection('notifications').getList(1, 50, {
+                filter: `user_id = "${user.id}"`,
+                sort: '-created',
+                expand: 'user_id'
+            });
+            setNotifications(records.items);
+            setUnreadCount(records.items.filter(n => !n.is_read).length);
+            setError(null);
+        } catch (error) {
+            console.error('Error loading notifications:', error);
+            setError('Не удалось загрузить уведомления');
+        }
+    };
+
+    const loadSettings = async () => {
+        try {
+            const record = await pb.collection('notification_settings').getFirstListItem(`user_id = "${user.id}"`);
+            setSettings(record);
+            setError(null);
+        } catch (error) {
+            if (error.status === 404) {
+                try {
+                    // Создаем настройки по умолчанию
+                    const defaultSettings = {
+                        user_id: user.id,
+                        achievement: true,
+                        like: true,
+                        review_comment: true,
+                        system: true,
+                        level_up: true,
+                        email_notifications: false
+                    };
+                    const newSettings = await pb.collection('notification_settings').create(defaultSettings);
+                    setSettings(newSettings);
+                    setError(null);
+                } catch (createError) {
+                    console.error('Error creating notification settings:', createError);
+                    setError('Не удалось создать настройки уведомлений');
+                }
+            } else {
+                console.error('Error loading notification settings:', error);
+                setError('Не удалось загрузить настройки уведомлений');
+            }
+        }
+    };
+
+    const markAsRead = async (notificationId) => {
+        try {
+            await pb.collection('notifications').update(notificationId, { is_read: true });
+            loadNotifications();
+        } catch (error) {
+            console.error('Error marking notification as read:', error);
+        }
+    };
+
+    const markAllAsRead = async () => {
+        try {
+            const unreadNotifications = notifications.filter(n => !n.is_read);
+            await Promise.all(
+                unreadNotifications.map(n => 
+                    pb.collection('notifications').update(n.id, { is_read: true })
+                )
+            );
+            loadNotifications();
+        } catch (error) {
+            console.error('Error marking all notifications as read:', error);
+        }
+    };
+
+    const updateSettings = async (setting, value) => {
+        try {
+            await pb.collection('notification_settings').update(settings.id, {
+                [setting]: value
+            });
+            setSettings(prev => ({ ...prev, [setting]: value }));
+        } catch (error) {
+            console.error('Error updating notification settings:', error);
+        }
+    };
+
+    const getNotificationIcon = (type) => {
+        switch (type) {
+            case 'achievement':
+                return <FaTrophy className="text-campfire-amber" />;
+            case 'like':
+                return <FaHeart className="text-campfire-amber" />;
+            case 'review_comment':
+                return <FaComment className="text-campfire-amber" />;
+            case 'level_up':
+                return <FaLevelUpAlt className="text-campfire-amber" />;
+            default:
+                return <FaCog className="text-campfire-amber" />;
+        }
+    };
+
+    return (
+        <div className="relative">
+            <button
+                onClick={() => setIsOpen(!isOpen)}
+                className="relative p-2 rounded-full hover:bg-campfire-charcoal/20 transition-colors"
+            >
+                <FaBell className="text-campfire-light" />
+                {unreadCount > 0 && (
+                    <span className="absolute top-0 right-0 w-4 h-4 bg-campfire-amber rounded-full text-xs flex items-center justify-center text-campfire-dark">
+                        {unreadCount}
+                    </span>
+                )}
+            </button>
+
+            {isOpen && (
+                <div className="absolute right-0 mt-2 w-80 bg-campfire-dark rounded-lg shadow-lg border border-campfire-ash/20 z-50">
+                    <div className="p-4 border-b border-campfire-ash/20">
+                        <div className="flex justify-between items-center">
+                            <h3 className="text-lg font-semibold text-campfire-light">Уведомления</h3>
+                            {unreadCount > 0 && (
+                                <button
+                                    onClick={markAllAsRead}
+                                    className="text-sm text-campfire-amber hover:underline"
+                                >
+                                    Отметить все как прочитанные
+                                </button>
+                            )}
+                        </div>
+                    </div>
+
+                    {error && (
+                        <div className="p-4 text-center text-red-500 text-sm">
+                            {error}
+                        </div>
+                    )}
+
+                    <div className="max-h-96 overflow-y-auto">
+                        {notifications.length > 0 ? (
+                            notifications.map(notification => (
+                                <div
+                                    key={notification.id}
+                                    className={`p-4 border-b border-campfire-ash/20 hover:bg-campfire-charcoal/20 transition-colors ${
+                                        !notification.is_read ? 'bg-campfire-charcoal/10' : ''
+                                    }`}
+                                    onClick={() => markAsRead(notification.id)}
+                                >
+                                    <div className="flex items-start space-x-3">
+                                        <div className="flex-shrink-0 mt-1">
+                                            {getNotificationIcon(notification.type)}
+                                        </div>
+                                        <div className="flex-grow">
+                                            <h4 className="text-sm font-semibold text-campfire-light">
+                                                {notification.title}
+                                            </h4>
+                                            <p className="text-sm text-campfire-ash mt-1">
+                                                {notification.message}
+                                            </p>
+                                            <p className="text-xs text-campfire-ash/60 mt-2">
+                                                {new Date(notification.created).toLocaleString()}
+                                            </p>
+                                        </div>
+                                    </div>
+                                </div>
+                            ))
+                        ) : (
+                            <div className="p-4 text-center text-campfire-ash">
+                                Нет уведомлений
+                            </div>
+                        )}
+                    </div>
+
+                    <div className="p-4 border-t border-campfire-ash/20">
+                        <h4 className="text-sm font-semibold text-campfire-light mb-3">
+                            Настройки уведомлений
+                        </h4>
+                        {settings && (
+                            <div className="space-y-2">
+                                <label className="flex items-center space-x-2">
+                                    <input
+                                        type="checkbox"
+                                        checked={settings.achievement}
+                                        onChange={(e) => updateSettings('achievement', e.target.checked)}
+                                        className="rounded border-campfire-ash/30 text-campfire-amber focus:ring-campfire-amber"
+                                    />
+                                    <span className="text-sm text-campfire-light">Достижения</span>
+                                </label>
+                                <label className="flex items-center space-x-2">
+                                    <input
+                                        type="checkbox"
+                                        checked={settings.like}
+                                        onChange={(e) => updateSettings('like', e.target.checked)}
+                                        className="rounded border-campfire-ash/30 text-campfire-amber focus:ring-campfire-amber"
+                                    />
+                                    <span className="text-sm text-campfire-light">Лайки рецензий</span>
+                                </label>
+                                <label className="flex items-center space-x-2">
+                                    <input
+                                        type="checkbox"
+                                        checked={settings.review_comment}
+                                        onChange={(e) => updateSettings('review_comment', e.target.checked)}
+                                        className="rounded border-campfire-ash/30 text-campfire-amber focus:ring-campfire-amber"
+                                    />
+                                    <span className="text-sm text-campfire-light">Комментарии к рецензиям</span>
+                                </label>
+                                <label className="flex items-center space-x-2">
+                                    <input
+                                        type="checkbox"
+                                        checked={settings.level_up}
+                                        onChange={(e) => updateSettings('level_up', e.target.checked)}
+                                        className="rounded border-campfire-ash/30 text-campfire-amber focus:ring-campfire-amber"
+                                    />
+                                    <span className="text-sm text-campfire-light">Повышение уровня</span>
+                                </label>
+                                <label className="flex items-center space-x-2">
+                                    <input
+                                        type="checkbox"
+                                        checked={settings.system}
+                                        onChange={(e) => updateSettings('system', e.target.checked)}
+                                        className="rounded border-campfire-ash/30 text-campfire-amber focus:ring-campfire-amber"
+                                    />
+                                    <span className="text-sm text-campfire-light">Системные уведомления</span>
+                                </label>
+                                <label className="flex items-center space-x-2">
+                                    <input
+                                        type="checkbox"
+                                        checked={settings.email_notifications}
+                                        onChange={(e) => updateSettings('email_notifications', e.target.checked)}
+                                        className="rounded border-campfire-ash/30 text-campfire-amber focus:ring-campfire-amber"
+                                    />
+                                    <span className="text-sm text-campfire-light">Email-уведомления</span>
+                                </label>
+                            </div>
+                        )}
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default NotificationCenter; 
\ No newline at end of file
diff --git a/src/components/profile/ProfileHeader.jsx b/src/components/profile/ProfileHeader.jsx
deleted file mode 100644
index 424dcfa..0000000
--- a/src/components/profile/ProfileHeader.jsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react';
-import { FaEdit } from 'react-icons/fa';
-import { useNavigate } from 'react-router-dom';
-
-const ProfileHeader = ({ user, isOwnProfile }) => {
-  const navigate = useNavigate();
-
-  const handleEditClick = () => {
-    navigate('/profile/settings');
-  };
-
-  return (
-    <div className="relative">
-      <div 
-        className="relative cursor-pointer group"
-        onClick={isOwnProfile ? handleEditClick : undefined}
-      >
-        <img
-          src={user?.avatar || '/default-avatar.png'}
-          alt={user?.username}
-          className="w-32 h-32 rounded-full object-cover border-4 border-campfire-primary"
-        />
-        {isOwnProfile && (
-          <div className="absolute inset-0 bg-campfire-dark/50 rounded-full opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
-            <FaEdit className="text-campfire-light text-2xl" />
-          </div>
-        )}
-      </div>
-      <h1 className="text-3xl font-bold text-campfire-light mt-4">{user?.username}</h1>
-      {user?.bio && (
-        <p className="text-campfire-light/60 mt-2">{user.bio}</p>
-      )}
-    </div>
-  );
-};
-
-export default ProfileHeader; 
\ No newline at end of file
diff --git a/src/components/reactbits/Animations/ClickSpark/ClickSpark.jsx b/src/components/reactbits/Animations/ClickSpark/ClickSpark.jsx
index 6e6f279..71515f1 100644
--- a/src/components/reactbits/Animations/ClickSpark/ClickSpark.jsx
+++ b/src/components/reactbits/Animations/ClickSpark/ClickSpark.jsx
@@ -22,6 +22,7 @@ const ClickSpark = forwardRef(({
     addSpark: (x, y) => {
       const canvas = canvasRef.current;
       if (!canvas) return;
+      
       const rect = canvas.getBoundingClientRect();
       const sparkX = x - rect.left;
       const sparkY = y - rect.top;
@@ -34,7 +35,7 @@ const ClickSpark = forwardRef(({
         startTime: now,
       }));
 
-      sparksRef.current.push(...newSparks);
+      sparksRef.current = [...sparksRef.current, ...newSparks];
     }
   }));
 
@@ -156,4 +157,6 @@ const ClickSpark = forwardRef(({
   );
 });
 
+ClickSpark.displayName = 'ClickSpark';
+
 export default ClickSpark;
\ No newline at end of file
diff --git a/src/components/reactbits/Animations/PixelTransition/PixelTransition.jsx b/src/components/reactbits/Animations/PixelTransition/PixelTransition.jsx
new file mode 100644
index 0000000..c236c95
--- /dev/null
+++ b/src/components/reactbits/Animations/PixelTransition/PixelTransition.jsx
@@ -0,0 +1,152 @@
+/*
+	Installed from https://reactbits.dev/tailwind/
+*/
+
+import { useRef, useEffect, useState } from 'react';
+import { gsap } from 'gsap';
+
+function PixelTransition({
+  firstContent,
+  secondContent,
+  gridSize = 50,
+  pixelColor = 'currentColor',
+  animationStepDuration = 0.3,
+  className = '',
+  style = {},
+  aspectRatio = '10%',
+}) {
+  const containerRef = useRef(null);
+  const pixelGridRef = useRef(null);
+  const activeRef = useRef(null);
+  const delayedCallRef = useRef(null);
+
+  const [isActive, setIsActive] = useState(false);
+
+  const isTouchDevice =
+    'ontouchstart' in window ||
+    navigator.maxTouchPoints > 0 ||
+    window.matchMedia('(pointer: coarse)').matches;
+
+  useEffect(() => {
+    const pixelGridEl = pixelGridRef.current;
+    if (!pixelGridEl) return;
+
+    pixelGridEl.innerHTML = '';
+
+    for (let row = 0; row < gridSize; row++) {
+      for (let col = 0; col < gridSize; col++) {
+        const pixel = document.createElement('div');
+        pixel.classList.add('pixelated-image-card__pixel');
+        pixel.classList.add('absolute', 'hidden');
+        pixel.style.backgroundColor = pixelColor;
+
+        const size = 100 / gridSize;
+        pixel.style.width = `${size}%`;
+        pixel.style.height = `${size}%`;
+        pixel.style.left = `${col * size}%`;
+        pixel.style.top = `${row * size}%`;
+
+        pixelGridEl.appendChild(pixel);
+      }
+    }
+  }, [gridSize, pixelColor]);
+
+  const animatePixels = (activate) => {
+    setIsActive(activate);
+
+    const pixelGridEl = pixelGridRef.current;
+    const activeEl = activeRef.current;
+    if (!pixelGridEl || !activeEl) return;
+
+    const pixels = pixelGridEl.querySelectorAll('.pixelated-image-card__pixel');
+    if (!pixels.length) return;
+
+    gsap.killTweensOf(pixels);
+    if (delayedCallRef.current) {
+      delayedCallRef.current.kill();
+    }
+
+    gsap.set(pixels, { display: 'none' });
+
+    const totalPixels = pixels.length;
+    const staggerDuration = animationStepDuration / totalPixels;
+
+    gsap.to(pixels, {
+      display: 'block',
+      duration: 0,
+      stagger: {
+        each: staggerDuration,
+        from: 'random'
+      }
+    });
+
+    delayedCallRef.current = gsap.delayedCall(animationStepDuration, () => {
+      activeEl.style.display = activate ? 'block' : 'none';
+      activeEl.style.pointerEvents = activate ? 'none' : '';
+    });
+
+    gsap.to(pixels, {
+      display: 'none',
+      duration: 0,
+      delay: animationStepDuration,
+      stagger: {
+        each: staggerDuration,
+        from: 'random'
+      }
+    });
+  };
+
+  const handleMouseEnter = () => {
+    if (!isActive) animatePixels(true);
+  };
+  const handleMouseLeave = () => {
+    if (isActive) animatePixels(false);
+  };
+  const handleClick = () => {
+    animatePixels(!isActive);
+  };
+
+  return (
+    <div
+      ref={containerRef}
+      // Combine your own className with the Tailwind classes for styling
+      className={`
+        ${className}
+        bg-[#222]
+        text-white
+        rounded-[15px]
+        border-2
+        border-white
+        w-[300px]
+        max-w-full
+        relative
+        overflow-hidden
+      `}
+      style={style}
+      onMouseEnter={!isTouchDevice ? handleMouseEnter : undefined}
+      onMouseLeave={!isTouchDevice ? handleMouseLeave : undefined}
+      onClick={isTouchDevice ? handleClick : undefined}
+    >
+      <div style={{ paddingTop: aspectRatio }} />
+
+      <div className="absolute inset-0 w-full h-full">
+        {firstContent}
+      </div>
+
+      <div
+        ref={activeRef}
+        className="absolute inset-0 w-full h-full z-[2]"
+        style={{ display: 'none' }}
+      >
+        {secondContent}
+      </div>
+
+      <div
+        ref={pixelGridRef}
+        className="absolute inset-0 w-full h-full pointer-events-none z-[3]"
+      />
+    </div>
+  );
+}
+
+export default PixelTransition;
diff --git a/src/components/reactbits/Backgrounds/Dither/Dither.jsx b/src/components/reactbits/Backgrounds/Dither/Dither.jsx
new file mode 100644
index 0000000..3063cae
--- /dev/null
+++ b/src/components/reactbits/Backgrounds/Dither/Dither.jsx
@@ -0,0 +1,295 @@
+/*
+	Installed from https://reactbits.dev/tailwind/
+*/
+
+/* eslint-disable react/no-unknown-property */
+import { useRef, useState, useEffect } from "react";
+import { Canvas, useFrame, useThree } from "@react-three/fiber";
+import { EffectComposer, wrapEffect } from "@react-three/postprocessing";
+import { Effect } from "postprocessing";
+import * as THREE from "three";
+
+const waveVertexShader = `
+precision highp float;
+varying vec2 vUv;
+void main() {
+  vUv = uv;
+  vec4 modelPosition = modelMatrix * vec4(position, 1.0);
+  vec4 viewPosition = viewMatrix * modelPosition;
+  gl_Position = projectionMatrix * viewPosition;
+}
+`;
+
+const waveFragmentShader = `
+precision highp float;
+uniform vec2 resolution;
+uniform float time;
+uniform float waveSpeed;
+uniform float waveFrequency;
+uniform float waveAmplitude;
+uniform vec3 waveColor;
+uniform vec2 mousePos;
+uniform int enableMouseInteraction;
+uniform float mouseRadius;
+
+vec4 mod289(vec4 x) { return x - floor(x * (1.0/289.0)) * 289.0; }
+vec4 permute(vec4 x) { return mod289(((x * 34.0) + 1.0) * x); }
+vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }
+vec2 fade(vec2 t) { return t*t*t*(t*(t*6.0-15.0)+10.0); }
+
+float cnoise(vec2 P) {
+  vec4 Pi = floor(P.xyxy) + vec4(0.0,0.0,1.0,1.0);
+  vec4 Pf = fract(P.xyxy) - vec4(0.0,0.0,1.0,1.0);
+  Pi = mod289(Pi);
+  vec4 ix = Pi.xzxz;
+  vec4 iy = Pi.yyww;
+  vec4 fx = Pf.xzxz;
+  vec4 fy = Pf.yyww;
+  vec4 i = permute(permute(ix) + iy);
+  vec4 gx = fract(i * (1.0/41.0)) * 2.0 - 1.0;
+  vec4 gy = abs(gx) - 0.5;
+  vec4 tx = floor(gx + 0.5);
+  gx = gx - tx;
+  vec2 g00 = vec2(gx.x, gy.x);
+  vec2 g10 = vec2(gx.y, gy.y);
+  vec2 g01 = vec2(gx.z, gy.z);
+  vec2 g11 = vec2(gx.w, gy.w);
+  vec4 norm = taylorInvSqrt(vec4(dot(g00,g00), dot(g01,g01), dot(g10,g10), dot(g11,g11)));
+  g00 *= norm.x; g01 *= norm.y; g10 *= norm.z; g11 *= norm.w;
+  float n00 = dot(g00, vec2(fx.x, fy.x));
+  float n10 = dot(g10, vec2(fx.y, fy.y));
+  float n01 = dot(g01, vec2(fx.z, fy.z));
+  float n11 = dot(g11, vec2(fx.w, fy.w));
+  vec2 fade_xy = fade(Pf.xy);
+  vec2 n_x = mix(vec2(n00, n01), vec2(n10, n11), fade_xy.x);
+  return 2.3 * mix(n_x.x, n_x.y, fade_xy.y);
+}
+
+const int OCTAVES = 8;
+float fbm(vec2 p) {
+  float value = 0.0;
+  float amp = 1.0;
+  float freq = waveFrequency;
+  for (int i = 0; i < OCTAVES; i++) {
+    value += amp * abs(cnoise(p));
+    p *= freq;
+    amp *= waveAmplitude;
+  }
+  return value;
+}
+
+float pattern(vec2 p) {
+  vec2 p2 = p - time * waveSpeed;
+  return fbm(p - fbm(p + fbm(p2)));
+}
+
+void main() {
+  vec2 uv = gl_FragCoord.xy / resolution.xy;
+  uv -= 0.5;
+  uv.x *= resolution.x / resolution.y;
+  float f = pattern(uv);
+  if (enableMouseInteraction == 1) {
+    vec2 mouseNDC = (mousePos / resolution - 0.5) * vec2(1.0, -1.0);
+    mouseNDC.x *= resolution.x / resolution.y;
+    float dist = length(uv - mouseNDC);
+    float effect = 1.0 - smoothstep(0.0, mouseRadius, dist);
+    f -= 0.5 * effect;
+  }
+  vec3 col = mix(vec3(0.0), waveColor, f);
+  gl_FragColor = vec4(col, 1.0);
+}
+`;
+
+const ditherFragmentShader = `
+precision highp float;
+uniform float colorNum;
+uniform float pixelSize;
+const float bayerMatrix8x8[64] = float[64](
+  0.0/64.0, 48.0/64.0, 12.0/64.0, 60.0/64.0,  3.0/64.0, 51.0/64.0, 15.0/64.0, 63.0/64.0,
+  32.0/64.0,16.0/64.0, 44.0/64.0, 28.0/64.0, 35.0/64.0,19.0/64.0, 47.0/64.0, 31.0/64.0,
+  8.0/64.0, 56.0/64.0,  4.0/64.0, 52.0/64.0, 11.0/64.0,59.0/64.0,  7.0/64.0, 55.0/64.0,
+  40.0/64.0,24.0/64.0, 36.0/64.0, 20.0/64.0, 43.0/64.0,27.0/64.0, 39.0/64.0, 23.0/64.0,
+  2.0/64.0, 50.0/64.0, 14.0/64.0, 62.0/64.0,  1.0/64.0,49.0/64.0, 13.0/64.0, 61.0/64.0,
+  34.0/64.0,18.0/64.0, 46.0/64.0, 30.0/64.0, 33.0/64.0,17.0/64.0, 45.0/64.0, 29.0/64.0,
+  10.0/64.0,58.0/64.0,  6.0/64.0, 54.0/64.0,  9.0/64.0,57.0/64.0,  5.0/64.0, 53.0/64.0,
+  42.0/64.0,26.0/64.0, 38.0/64.0, 22.0/64.0, 41.0/64.0,25.0/64.0, 37.0/64.0, 21.0/64.0
+);
+
+vec3 dither(vec2 uv, vec3 color) {
+  vec2 scaledCoord = floor(uv * resolution / pixelSize);
+  int x = int(mod(scaledCoord.x, 8.0));
+  int y = int(mod(scaledCoord.y, 8.0));
+  float threshold = bayerMatrix8x8[y * 8 + x] - 0.25;
+  float step = 1.0 / (colorNum - 1.0);
+  color += threshold * step;
+  float bias = 0.2;
+  color = clamp(color - bias, 0.0, 1.0);
+  return floor(color * (colorNum - 1.0) + 0.5) / (colorNum - 1.0);
+}
+
+void mainImage(in vec4 inputColor, in vec2 uv, out vec4 outputColor) {
+  vec2 normalizedPixelSize = pixelSize / resolution;
+  vec2 uvPixel = normalizedPixelSize * floor(uv / normalizedPixelSize);
+  vec4 color = texture2D(inputBuffer, uvPixel);
+  color.rgb = dither(uv, color.rgb);
+  outputColor = color;
+}
+`;
+
+class RetroEffectImpl extends Effect {
+  constructor() {
+    const uniforms = new Map([
+      ["colorNum", new THREE.Uniform(4.0)],
+      ["pixelSize", new THREE.Uniform(2.0)]
+    ]);
+    super("RetroEffect", ditherFragmentShader, { uniforms });
+    this.uniforms = uniforms;
+  }
+  set colorNum(value) {
+    this.uniforms.get("colorNum").value = value;
+  }
+  get colorNum() {
+    return this.uniforms.get("colorNum").value;
+  }
+  set pixelSize(value) {
+    this.uniforms.get("pixelSize").value = value;
+  }
+  get pixelSize() {
+    return this.uniforms.get("pixelSize").value;
+  }
+}
+
+const RetroEffect = wrapEffect(RetroEffectImpl);
+
+function DitheredWaves({
+  waveSpeed,
+  waveFrequency,
+  waveAmplitude,
+  waveColor,
+  colorNum,
+  pixelSize,
+  disableAnimation,
+  enableMouseInteraction,
+  mouseRadius
+}) {
+  const mesh = useRef(null);
+  const effect = useRef(null);
+  const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
+  const { viewport, size, gl } = useThree();
+
+  const waveUniformsRef = useRef({
+    time: { value: 0 },
+    resolution: { value: new THREE.Vector2(0, 0) },
+    waveSpeed: { value: waveSpeed },
+    waveFrequency: { value: waveFrequency },
+    waveAmplitude: { value: waveAmplitude },
+    waveColor: { value: new THREE.Color(...waveColor) },
+    mousePos: { value: new THREE.Vector2(0, 0) },
+    enableMouseInteraction: { value: enableMouseInteraction ? 1 : 0 },
+    mouseRadius: { value: mouseRadius }
+  });
+
+  useEffect(() => {
+    const dpr = gl.getPixelRatio();
+    const newWidth = Math.floor(size.width * dpr);
+    const newHeight = Math.floor(size.height * dpr);
+    const currentRes = waveUniformsRef.current.resolution.value;
+    if (currentRes.x !== newWidth || currentRes.y !== newHeight) {
+      currentRes.set(newWidth, newHeight);
+      if (
+        effect.current &&
+        effect.current.uniforms &&
+        effect.current.uniforms.resolution &&
+        effect.current.uniforms.resolution.value
+      ) {
+        effect.current.uniforms.resolution.value.set(newWidth, newHeight);
+      }
+    }
+  }, [size, gl]);
+
+  useFrame(({ clock }) => {
+    if (!disableAnimation) {
+      waveUniformsRef.current.time.value = clock.getElapsedTime();
+    }
+    waveUniformsRef.current.waveSpeed.value = waveSpeed;
+    waveUniformsRef.current.waveFrequency.value = waveFrequency;
+    waveUniformsRef.current.waveAmplitude.value = waveAmplitude;
+    waveUniformsRef.current.waveColor.value.set(...waveColor);
+    waveUniformsRef.current.enableMouseInteraction.value = enableMouseInteraction ? 1 : 0;
+    waveUniformsRef.current.mouseRadius.value = mouseRadius;
+    if (enableMouseInteraction) {
+      waveUniformsRef.current.mousePos.value.set(mousePos.x, mousePos.y);
+    }
+    if (effect.current) {
+      effect.current.colorNum = colorNum;
+      effect.current.pixelSize = pixelSize;
+    }
+  });
+
+  const handlePointerMove = (e) => {
+    if (!enableMouseInteraction) return;
+    const rect = gl.domElement.getBoundingClientRect();
+    const dpr = gl.getPixelRatio();
+    const x = (e.clientX - rect.left) * dpr;
+    const y = (e.clientY - rect.top) * dpr;
+    setMousePos({ x, y });
+  };
+
+  return (
+    <>
+      <mesh ref={mesh} scale={[viewport.width, viewport.height, 1]}>
+        <planeGeometry args={[1, 1]} />
+        <shaderMaterial
+          vertexShader={waveVertexShader}
+          fragmentShader={waveFragmentShader}
+          uniforms={waveUniformsRef.current}
+        />
+      </mesh>
+      <EffectComposer>
+        <RetroEffect ref={effect} />
+      </EffectComposer>
+      <mesh
+        onPointerMove={handlePointerMove}
+        position={[0, 0, 0.01]}
+        scale={[viewport.width, viewport.height, 1]}
+        visible={false}
+      >
+        <planeGeometry args={[1, 1]} />
+        <meshBasicMaterial transparent opacity={0} />
+      </mesh>
+    </>
+  );
+}
+
+export default function Dither({
+  waveSpeed = 0.05,
+  waveFrequency = 3,
+  waveAmplitude = 0.3,
+  waveColor = [0.5, 0.5, 0.5],
+  colorNum = 4,
+  pixelSize = 2,
+  disableAnimation = false,
+  enableMouseInteraction = true,
+  mouseRadius = 1
+}) {
+  return (
+    <Canvas
+      className="w-full h-full relative"
+      camera={{ position: [0, 0, 6] }}
+      dpr={window.devicePixelRatio}
+      gl={{ antialias: true, preserveDrawingBuffer: true }}
+    >
+      <DitheredWaves
+        waveSpeed={waveSpeed}
+        waveFrequency={waveFrequency}
+        waveAmplitude={waveAmplitude}
+        waveColor={waveColor}
+        colorNum={colorNum}
+        pixelSize={pixelSize}
+        disableAnimation={disableAnimation}
+        enableMouseInteraction={enableMouseInteraction}
+        mouseRadius={mouseRadius}
+      />
+    </Canvas>
+  );
+}
diff --git a/src/components/reactbits/Backgrounds/GridMotion/GridMotion.jsx b/src/components/reactbits/Backgrounds/GridMotion/GridMotion.jsx
index f6a9ed6..c0894d0 100644
--- a/src/components/reactbits/Backgrounds/GridMotion/GridMotion.jsx
+++ b/src/components/reactbits/Backgrounds/GridMotion/GridMotion.jsx
@@ -65,7 +65,7 @@ const GridMotion = ({ items = [], gradientColor = 'black' }) => {
           className="absolute inset-0 pointer-events-none z-[4] bg-[url('../../../assets/noise.png')] bg-[length:250px]"
         ></div>
         <div
-          className="gap-4 flex-none relative w-[150vw] h-[150vh] grid grid-rows-4 grid-cols-1 rotate-[-15deg] origin-center z-[2]"
+          className="gap-4 flex-none relative w-[120vw] h-[200vh] grid grid-rows-4 grid-cols-1 rotate-[-15deg] origin-center z-[2]"
         >
           {[...Array(4)].map((_, rowIndex) => (
             <div
diff --git a/src/components/reactbits/Backgrounds/ShapeBlur/ShapeBlur.jsx b/src/components/reactbits/Backgrounds/ShapeBlur/ShapeBlur.jsx
new file mode 100644
index 0000000..2d67336
--- /dev/null
+++ b/src/components/reactbits/Backgrounds/ShapeBlur/ShapeBlur.jsx
@@ -0,0 +1,255 @@
+/*
+	Installed from https://reactbits.dev/tailwind/
+*/
+
+import { useRef, useEffect } from 'react';
+import * as THREE from 'three';
+
+const vertexShader = /* glsl */`
+  varying vec2 v_texcoord;
+  void main() {
+      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+      v_texcoord = uv;
+  }
+`;
+
+const fragmentShader = /* glsl */`
+  varying vec2 v_texcoord;
+
+  uniform vec2 u_mouse;
+  uniform vec2 u_resolution;
+  uniform float u_pixelRatio;
+
+  uniform float u_shapeSize;
+  uniform float u_roundness;
+  uniform float u_borderSize;
+  uniform float u_circleSize;
+  uniform float u_circleEdge;
+
+  #ifndef PI
+  #define PI 3.1415926535897932384626433832795
+  #endif
+  #ifndef TWO_PI
+  #define TWO_PI 6.2831853071795864769252867665590
+  #endif
+
+  #ifndef VAR
+  #define VAR 0
+  #endif
+
+  #ifndef FNC_COORD
+  #define FNC_COORD
+  vec2 coord(in vec2 p) {
+      p = p / u_resolution.xy;
+      if (u_resolution.x > u_resolution.y) {
+          p.x *= u_resolution.x / u_resolution.y;
+          p.x += (u_resolution.y - u_resolution.x) / u_resolution.y / 2.0;
+      } else {
+          p.y *= u_resolution.y / u_resolution.x;
+          p.y += (u_resolution.x - u_resolution.y) / u_resolution.x / 2.0;
+      }
+      p -= 0.5;
+      p *= vec2(-1.0, 1.0);
+      return p;
+  }
+  #endif
+
+  #define st0 coord(gl_FragCoord.xy)
+  #define mx coord(u_mouse * u_pixelRatio)
+
+  float sdRoundRect(vec2 p, vec2 b, float r) {
+      vec2 d = abs(p - 0.5) * 4.2 - b + vec2(r);
+      return min(max(d.x, d.y), 0.0) + length(max(d, 0.0)) - r;
+  }
+  float sdCircle(in vec2 st, in vec2 center) {
+      return length(st - center) * 2.0;
+  }
+  float sdPoly(in vec2 p, in float w, in int sides) {
+      float a = atan(p.x, p.y) + PI;
+      float r = TWO_PI / float(sides);
+      float d = cos(floor(0.5 + a / r) * r - a) * length(max(abs(p) * 1.0, 0.0));
+      return d * 2.0 - w;
+  }
+
+  float aastep(float threshold, float value) {
+      float afwidth = length(vec2(dFdx(value), dFdy(value))) * 0.70710678118654757;
+      return smoothstep(threshold - afwidth, threshold + afwidth, value);
+  }
+  float fill(in float x) { return 1.0 - aastep(0.0, x); }
+  float fill(float x, float size, float edge) {
+      return 1.0 - smoothstep(size - edge, size + edge, x);
+  }
+  float stroke(in float d, in float t) { return (1.0 - aastep(t, abs(d))); }
+  float stroke(float x, float size, float w, float edge) {
+      float d = smoothstep(size - edge, size + edge, x + w * 0.5) - smoothstep(size - edge, size + edge, x - w * 0.5);
+      return clamp(d, 0.0, 1.0);
+  }
+
+  float strokeAA(float x, float size, float w, float edge) {
+      float afwidth = length(vec2(dFdx(x), dFdy(x))) * 0.70710678;
+      float d = smoothstep(size - edge - afwidth, size + edge + afwidth, x + w * 0.5)
+              - smoothstep(size - edge - afwidth, size + edge + afwidth, x - w * 0.5);
+      return clamp(d, 0.0, 1.0);
+  }
+
+  void main() {
+      vec2 st = st0 + 0.5;
+      vec2 posMouse = mx * vec2(1., -1.) + 0.5;
+      
+      float size = u_shapeSize;
+      float roundness = u_roundness;
+      float borderSize = u_borderSize;
+      float circleSize = u_circleSize;
+      float circleEdge = u_circleEdge;
+      
+      float sdfCircle = fill(
+          sdCircle(st, posMouse),
+          circleSize,
+          circleEdge
+      );
+      
+      float sdf;
+      if (VAR == 0) {
+          sdf = sdRoundRect(st, vec2(size), roundness);
+          sdf = strokeAA(sdf, 0.0, borderSize, sdfCircle) * 4.0;
+      } else if (VAR == 1) {
+          sdf = sdCircle(st, vec2(0.5));
+          sdf = fill(sdf, 0.6, sdfCircle) * 1.2;
+      } else if (VAR == 2) {
+          sdf = sdCircle(st, vec2(0.5));
+          sdf = strokeAA(sdf, 0.58, 0.02, sdfCircle) * 4.0;
+      } else if (VAR == 3) {
+          sdf = sdPoly(st - vec2(0.5, 0.45), 0.3, 3);
+          sdf = fill(sdf, 0.05, sdfCircle) * 1.4;
+      }
+      
+      vec3 color = vec3(sdf);
+      float alpha = step(0.01, sdf);
+      gl_FragColor = vec4(color.rgb, alpha);
+  }
+`;
+
+
+const ShapeBlur = ({
+  className = '',
+  variation = 0,
+  pixelRatioProp = 2,
+  shapeSize = 1.2,
+  roundness = 0.4,
+  borderSize = 0.05,
+  circleSize = 0.3,
+  circleEdge = 0.5
+}) => {
+  const mountRef = useRef();
+
+  useEffect(() => {
+    const mount = mountRef.current;
+    let animationFrameId;
+    let time = 0, lastTime = 0;
+
+    const vMouse = new THREE.Vector2();
+    const vMouseDamp = new THREE.Vector2();
+    const vResolution = new THREE.Vector2();
+
+    let w = 1, h = 1;
+
+    const scene = new THREE.Scene();
+    const camera = new THREE.OrthographicCamera();
+    camera.position.z = 1;
+
+    const renderer = new THREE.WebGLRenderer({ alpha: true });
+    renderer.setClearColor(0x000000, 0);
+    mount.appendChild(renderer.domElement);
+
+    const geo = new THREE.PlaneGeometry(1, 1);
+    const material = new THREE.ShaderMaterial({
+      vertexShader,
+      fragmentShader,
+      uniforms: {
+        u_mouse: { value: vMouseDamp },
+        u_resolution: { value: vResolution },
+        u_pixelRatio: { value: pixelRatioProp },
+        u_shapeSize: { value: shapeSize },
+        u_roundness: { value: roundness },
+        u_borderSize: { value: borderSize },
+        u_circleSize: { value: circleSize },
+        u_circleEdge: { value: circleEdge }
+      },
+      defines: { VAR: variation },
+      transparent: true
+    });
+
+    const quad = new THREE.Mesh(geo, material);
+    scene.add(quad);
+
+    const onPointerMove = (e) => {
+      const rect = mount.getBoundingClientRect();
+      vMouse.set(e.clientX - rect.left, e.clientY - rect.top);
+    };
+
+    document.addEventListener('mousemove', onPointerMove);
+    document.addEventListener('pointermove', onPointerMove);
+
+    const resize = () => {
+      const container = mountRef.current;
+      w = container.clientWidth;
+      h = container.clientHeight;
+      const dpr = Math.min(window.devicePixelRatio, 2);
+
+      renderer.setSize(w, h);
+      renderer.setPixelRatio(dpr);
+
+      camera.left = -w / 2;
+      camera.right = w / 2;
+      camera.top = h / 2;
+      camera.bottom = -h / 2;
+      camera.updateProjectionMatrix();
+
+      quad.scale.set(w, h, 1);
+      vResolution.set(w, h).multiplyScalar(dpr);
+      material.uniforms.u_pixelRatio.value = dpr;
+    };
+
+    resize();
+    window.addEventListener('resize', resize);
+
+    const ro = new ResizeObserver(() => resize());
+    if (mountRef.current) ro.observe(mountRef.current);
+
+    const update = () => {
+      time = performance.now() * 0.001;
+      const dt = time - lastTime;
+      lastTime = time;
+
+      ['x', 'y'].forEach(k => {
+        vMouseDamp[k] = THREE.MathUtils.damp(vMouseDamp[k], vMouse[k], 8, dt);
+      });
+
+      renderer.render(scene, camera);
+      animationFrameId = requestAnimationFrame(update);
+    };
+    update();
+
+    return () => {
+      cancelAnimationFrame(animationFrameId);
+      window.removeEventListener('resize', resize);
+      if (ro) ro.disconnect();
+      document.removeEventListener('mousemove', onPointerMove);
+      document.removeEventListener('pointermove', onPointerMove);
+      mount.removeChild(renderer.domElement);
+      renderer.dispose();
+    };
+  }, [
+    variation,
+    pixelRatioProp,
+    shapeSize,
+    roundness,
+    borderSize,
+    circleSize,
+    circleEdge
+  ]);
+
+  return <div ref={mountRef} className={`w-full h-full ${className}`} />;
+};
+
+export default ShapeBlur;
diff --git a/src/components/reactbits/Backgrounds/Squares/Squares.jsx b/src/components/reactbits/Backgrounds/Squares/Squares.jsx
new file mode 100644
index 0000000..4bbcf39
--- /dev/null
+++ b/src/components/reactbits/Backgrounds/Squares/Squares.jsx
@@ -0,0 +1,160 @@
+/*
+	Installed from https://reactbits.dev/tailwind/
+*/
+
+import { useRef, useEffect } from "react";
+
+const Squares = ({
+  direction = "right",
+  speed = 1,
+  borderColor = "#999",
+  squareSize = 40,
+  hoverFillColor = "#222",
+}) => {
+  const canvasRef = useRef(null);
+  const requestRef = useRef(null);
+  const numSquaresX = useRef(0);
+  const numSquaresY = useRef(0);
+  const gridOffset = useRef({ x: 0, y: 0 });
+  const hoveredSquareRef = useRef(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+
+    const resizeCanvas = () => {
+      canvas.width = canvas.offsetWidth;
+      canvas.height = canvas.offsetHeight;
+      numSquaresX.current = Math.ceil(canvas.width / squareSize) + 1;
+      numSquaresY.current = Math.ceil(canvas.height / squareSize) + 1;
+    };
+
+    window.addEventListener("resize", resizeCanvas);
+    resizeCanvas();
+
+    const drawGrid = () => {
+      if (!ctx) return;
+
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+      const startX = Math.floor(gridOffset.current.x / squareSize) * squareSize;
+      const startY = Math.floor(gridOffset.current.y / squareSize) * squareSize;
+
+      for (let x = startX; x < canvas.width + squareSize; x += squareSize) {
+        for (let y = startY; y < canvas.height + squareSize; y += squareSize) {
+          const squareX = x - (gridOffset.current.x % squareSize);
+          const squareY = y - (gridOffset.current.y % squareSize);
+
+          if (
+            hoveredSquareRef.current &&
+            Math.floor((x - startX) / squareSize) ===
+            hoveredSquareRef.current.x &&
+            Math.floor((y - startY) / squareSize) === hoveredSquareRef.current.y
+          ) {
+            ctx.fillStyle = hoverFillColor;
+            ctx.fillRect(squareX, squareY, squareSize, squareSize);
+          }
+
+          ctx.strokeStyle = borderColor;
+          ctx.strokeRect(squareX, squareY, squareSize, squareSize);
+        }
+      }
+
+      const gradient = ctx.createRadialGradient(
+        canvas.width / 2,
+        canvas.height / 2,
+        0,
+        canvas.width / 2,
+        canvas.height / 2,
+        Math.sqrt(canvas.width ** 2 + canvas.height ** 2) / 2
+      );
+      gradient.addColorStop(0, "rgba(0, 0, 0, 0)");
+      gradient.addColorStop(1, "#060606");
+
+      ctx.fillStyle = gradient;
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+    };
+
+    const updateAnimation = () => {
+      const effectiveSpeed = Math.max(speed, 0.1);
+      switch (direction) {
+        case "right":
+          gridOffset.current.x =
+            (gridOffset.current.x - effectiveSpeed + squareSize) % squareSize;
+          break;
+        case "left":
+          gridOffset.current.x =
+            (gridOffset.current.x + effectiveSpeed + squareSize) % squareSize;
+          break;
+        case "up":
+          gridOffset.current.y =
+            (gridOffset.current.y + effectiveSpeed + squareSize) % squareSize;
+          break;
+        case "down":
+          gridOffset.current.y =
+            (gridOffset.current.y - effectiveSpeed + squareSize) % squareSize;
+          break;
+        case "diagonal":
+          gridOffset.current.x =
+            (gridOffset.current.x - effectiveSpeed + squareSize) % squareSize;
+          gridOffset.current.y =
+            (gridOffset.current.y - effectiveSpeed + squareSize) % squareSize;
+          break;
+        default:
+          break;
+      }
+
+      drawGrid();
+      requestRef.current = requestAnimationFrame(updateAnimation);
+    };
+
+    const handleMouseMove = (event) => {
+      const rect = canvas.getBoundingClientRect();
+      const mouseX = event.clientX - rect.left;
+      const mouseY = event.clientY - rect.top;
+
+      const startX = Math.floor(gridOffset.current.x / squareSize) * squareSize;
+      const startY = Math.floor(gridOffset.current.y / squareSize) * squareSize;
+
+      const hoveredSquareX = Math.floor(
+        (mouseX + gridOffset.current.x - startX) / squareSize
+      );
+      const hoveredSquareY = Math.floor(
+        (mouseY + gridOffset.current.y - startY) / squareSize
+      );
+
+      if (
+        !hoveredSquareRef.current ||
+        hoveredSquareRef.current.x !== hoveredSquareX ||
+        hoveredSquareRef.current.y !== hoveredSquareY
+      ) {
+        hoveredSquareRef.current = { x: hoveredSquareX, y: hoveredSquareY };
+      }
+    };
+
+    const handleMouseLeave = () => {
+      hoveredSquareRef.current = null;
+    };
+
+    canvas.addEventListener("mousemove", handleMouseMove);
+    canvas.addEventListener("mouseleave", handleMouseLeave);
+    requestRef.current = requestAnimationFrame(updateAnimation);
+
+    return () => {
+      window.removeEventListener("resize", resizeCanvas);
+      if (requestRef.current) cancelAnimationFrame(requestRef.current);
+      canvas.removeEventListener("mousemove", handleMouseMove);
+      canvas.removeEventListener("mouseleave", handleMouseLeave);
+    };
+  }, [direction, speed, borderColor, hoverFillColor, squareSize]);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      className="w-full h-full border-none block"
+    ></canvas>
+  );
+};
+
+export default Squares;
diff --git a/src/components/reactbits/Components/Dock/Dock.jsx b/src/components/reactbits/Components/Dock/Dock.jsx
index c595a6b..eade121 100644
--- a/src/components/reactbits/Components/Dock/Dock.jsx
+++ b/src/components/reactbits/Components/Dock/Dock.jsx
@@ -89,11 +89,7 @@ function DockLabel({ children, className = "", showLabel = true, ...rest }) {
   }, [isHovered]);
 
   if (!showLabel) {
-    return (
-      <span className={`${className} text-[10px] text-campfire-light ml-2`}>
-        {children}
-      </span>
-    );
+    return null;
   }
 
   return (
@@ -157,7 +153,7 @@ export default function Dock({
           isHovered.set(0);
           mouseX.set(Infinity);
         }}
-        className={`${className} flex items-end w-fit gap-4 rounded-2xl border-neutral-700 border-2 pb-2 px-4`}
+        className={`${className} flex items-end w-fit gap-2 md:gap-4 rounded-2xl border-neutral-700 border-2 pb-2 px-2 md:px-4`}
         style={{ height: panelHeight }}
         role="toolbar"
         aria-label="Application dock"
diff --git a/src/components/reactbits/Components/PixelCard/PixelCard.jsx b/src/components/reactbits/Components/PixelCard/PixelCard.jsx
new file mode 100644
index 0000000..f328f5d
--- /dev/null
+++ b/src/components/reactbits/Components/PixelCard/PixelCard.jsx
@@ -0,0 +1,279 @@
+/*
+	Installed from https://reactbits.dev/tailwind/
+*/
+
+import { useEffect, useRef } from "react";
+
+class Pixel {
+  constructor(canvas, context, x, y, color, speed, delay) {
+    this.width = canvas.width;
+    this.height = canvas.height;
+    this.ctx = context;
+    this.x = x;
+    this.y = y;
+    this.color = color;
+    this.speed = this.getRandomValue(0.1, 0.9) * speed;
+    this.size = 0;
+    this.sizeStep = Math.random() * 0.4;
+    this.minSize = 0.5;
+    this.maxSizeInteger = 2;
+    this.maxSize = this.getRandomValue(this.minSize, this.maxSizeInteger);
+    this.delay = delay;
+    this.counter = 0;
+    this.counterStep = Math.random() * 4 + (this.width + this.height) * 0.01;
+    this.isIdle = false;
+    this.isReverse = false;
+    this.isShimmer = false;
+  }
+
+  getRandomValue(min, max) {
+    return Math.random() * (max - min) + min;
+  }
+
+  draw() {
+    const centerOffset = this.maxSizeInteger * 0.5 - this.size * 0.5;
+    this.ctx.fillStyle = this.color;
+    this.ctx.fillRect(
+      this.x + centerOffset,
+      this.y + centerOffset,
+      this.size,
+      this.size
+    );
+  }
+
+  appear() {
+    this.isIdle = false;
+    if (this.counter <= this.delay) {
+      this.counter += this.counterStep;
+      return;
+    }
+    if (this.size >= this.maxSize) {
+      this.isShimmer = true;
+    }
+    if (this.isShimmer) {
+      this.shimmer();
+    } else {
+      this.size += this.sizeStep;
+    }
+    this.draw();
+  }
+
+  disappear() {
+    this.isShimmer = false;
+    this.counter = 0;
+    if (this.size <= 0) {
+      this.isIdle = true;
+      return;
+    } else {
+      this.size -= 0.1;
+    }
+    this.draw();
+  }
+
+  shimmer() {
+    if (this.size >= this.maxSize) {
+      this.isReverse = true;
+    } else if (this.size <= this.minSize) {
+      this.isReverse = false;
+    }
+    if (this.isReverse) {
+      this.size -= this.speed;
+    } else {
+      this.size += this.speed;
+    }
+  }
+}
+
+function getEffectiveSpeed(value, reducedMotion) {
+  const min = 0;
+  const max = 100;
+  const throttle = 0.001;
+  const parsed = parseInt(value, 10);
+
+  if (parsed <= min || reducedMotion) {
+    return min;
+  } else if (parsed >= max) {
+    return max * throttle;
+  } else {
+    return parsed * throttle;
+  }
+}
+
+/**
+ *  You can change/expand these as you like.
+ */
+const VARIANTS = {
+  default: {
+    activeColor: null,
+    gap: 5,
+    speed: 35,
+    colors: " #ff3c00, #FF3300, #FF6A00, #FF0000",
+    noFocus: false
+  },
+  blue: {
+    activeColor: "#e0f2fe",
+    gap: 10,
+    speed: 25,
+    colors: "#e0f2fe,#7dd3fc,#0ea5e9",
+    noFocus: false
+  },
+  yellow: {
+    activeColor: "#fef08a",
+    gap: 3,
+    speed: 20,
+    colors: "#fef08a,#fde047,#eab308",
+    noFocus: false
+  },
+  pink: {
+    activeColor: "#fecdd3",
+    gap: 6,
+    speed: 80,
+    colors: "#fecdd3,#fda4af,#e11d48",
+    noFocus: true
+  }
+};
+
+export default function PixelCard({
+  variant = "default",
+  gap,
+  speed,
+  colors,
+  noFocus,
+  className = "",
+  children
+}) {
+  const containerRef = useRef(null);
+  const canvasRef = useRef(null);
+  const pixelsRef = useRef([]);
+  const animationRef = useRef(null);
+  const timePreviousRef = useRef(performance.now());
+  const reducedMotion = useRef(
+    window.matchMedia("(prefers-reduced-motion: reduce)").matches
+  ).current;
+
+  const variantCfg = VARIANTS[variant] || VARIANTS.default;
+  const finalGap = gap ?? variantCfg.gap;
+  const finalSpeed = speed ?? variantCfg.speed;
+  const finalColors = colors ?? variantCfg.colors;
+  const finalNoFocus = noFocus ?? variantCfg.noFocus;
+
+  const initPixels = () => {
+    if (!containerRef.current || !canvasRef.current) return;
+
+    const rect = containerRef.current.getBoundingClientRect();
+    const width = Math.floor(rect.width);
+    const height = Math.floor(rect.height);
+    const ctx = canvasRef.current.getContext("2d");
+
+    canvasRef.current.width = width;
+    canvasRef.current.height = height;
+    canvasRef.current.style.width = `${width}px`;
+    canvasRef.current.style.height = `${height}px`;
+
+    const colorsArray = finalColors.split(",");
+    const pxs = [];
+    for (let x = 0; x < width; x += parseInt(finalGap, 10)) {
+      for (let y = 0; y < height; y += parseInt(finalGap, 10)) {
+        const color =
+          colorsArray[Math.floor(Math.random() * colorsArray.length)];
+
+        const dx = x - width / 2;
+        const dy = y - height / 2;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+        const delay = reducedMotion ? 0 : distance;
+
+        pxs.push(
+          new Pixel(
+            canvasRef.current,
+            ctx,
+            x,
+            y,
+            color,
+            getEffectiveSpeed(finalSpeed, reducedMotion),
+            delay
+          )
+        );
+      }
+    }
+    pixelsRef.current = pxs;
+  };
+
+  const doAnimate = (fnName) => {
+    animationRef.current = requestAnimationFrame(() => doAnimate(fnName));
+    const timeNow = performance.now();
+    const timePassed = timeNow - timePreviousRef.current;
+    const timeInterval = 1000 / 60; // ~60 FPS
+
+    if (timePassed < timeInterval) return;
+    timePreviousRef.current = timeNow - (timePassed % timeInterval);
+
+    const ctx = canvasRef.current?.getContext("2d");
+    if (!ctx || !canvasRef.current) return;
+
+    ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
+
+    let allIdle = true;
+    for (let i = 0; i < pixelsRef.current.length; i++) {
+      const pixel = pixelsRef.current[i];
+      pixel[fnName]();
+      if (!pixel.isIdle) {
+        allIdle = false;
+      }
+    }
+    if (allIdle) {
+      cancelAnimationFrame(animationRef.current);
+    }
+  };
+
+  const handleAnimation = (name) => {
+    cancelAnimationFrame(animationRef.current);
+    animationRef.current = requestAnimationFrame(() => doAnimate(name));
+  };
+
+  const onMouseEnter = () => handleAnimation("disappear");
+  const onMouseLeave = () => handleAnimation("appear");
+  const onFocus = (e) => {
+    if (e.currentTarget.contains(e.relatedTarget)) return;
+    handleAnimation("disappear");
+  };
+  const onBlur = (e) => {
+    if (e.currentTarget.contains(e.relatedTarget)) return;
+    handleAnimation("appear");
+  };
+
+  useEffect(() => {
+    initPixels();
+    const observer = new ResizeObserver(() => {
+      initPixels();
+    });
+    if (containerRef.current) {
+      observer.observe(containerRef.current);
+      handleAnimation("appear");
+    }
+    return () => {
+      observer.disconnect();
+      cancelAnimationFrame(animationRef.current);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [finalGap, finalSpeed, finalColors, finalNoFocus]);
+
+  return (
+    <div
+      ref={containerRef}
+      className={`h-[400px] w-[300px] relative overflow-hidden grid place-items-center aspect-[4/5] border border-[#27272a] rounded-[25px] isolate transition-colors duration-200 ease-[cubic-bezier(0.5,1,0.89,1)] select-none ${className}`}
+
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+
+      onFocus={finalNoFocus ? undefined : onFocus}
+      onBlur={finalNoFocus ? undefined : onBlur}
+      tabIndex={finalNoFocus ? -1 : 0}
+    >
+      <canvas
+        className="w-full h-full block"
+        ref={canvasRef}
+      />
+      {children}
+    </div>
+  );
+}
diff --git a/src/components/reactbits/Components/TiltedCard/TiltedCard.jsx b/src/components/reactbits/Components/TiltedCard/TiltedCard.jsx
index 4b66324..ada099e 100644
--- a/src/components/reactbits/Components/TiltedCard/TiltedCard.jsx
+++ b/src/components/reactbits/Components/TiltedCard/TiltedCard.jsx
@@ -63,9 +63,8 @@ export default function TiltedCard({
       ctx.drawImage(img, 0, 0);
       
       try {
-        // Получаем данные только из нижней трети изображения
-        const bottomThird = Math.floor(img.height * 0.66);
-        const imageData = ctx.getImageData(0, bottomThird, img.width, img.height - bottomThird);
+        // Получаем данные со всего изображения
+        const imageData = ctx.getImageData(0, 0, img.width, img.height);
         const data = imageData.data;
         
         let r = 0, g = 0, b = 0;
@@ -87,8 +86,10 @@ export default function TiltedCard({
         // Вычисляем яркость по формуле
         const brightness = (r * 0.299 + g * 0.587 + b * 0.114);
         
-        // Если яркость больше 128, считаем фон светлым
-        setIsDark(brightness < 128);
+        // Проверяем, является ли фон светлым
+        // Используем более простую логику с одним порогом
+        const isLightBackground = brightness > 180;
+        setIsDark(!isLightBackground);
       } catch (error) {
         // В случае ошибки CORS, используем темный фон по умолчанию
         console.warn('Не удалось определить яркость изображения:', error);
@@ -160,7 +161,7 @@ export default function TiltedCard({
       )}
 
       <motion.div
-        className="relative [transform-style:preserve-3d]"
+        className="relative [transform-style:preserve-3d] group"
         style={{
           width: imageWidth,
           height: imageHeight,
@@ -172,7 +173,7 @@ export default function TiltedCard({
         <motion.img
           src={imageSrc}
           alt={altText}
-          className="absolute top-0 left-0 object-cover rounded-[15px] will-change-transform [transform:translateZ(0)]"
+          className="absolute top-0 left-0 object-cover rounded-[15px] will-change-transform [transform:translateZ(0)] group-hover:z-50"
           style={{
             width: imageWidth,
             height: imageHeight,
@@ -191,27 +192,23 @@ export default function TiltedCard({
           <motion.div
             className="absolute top-3 right-3 z-[3] will-change-transform [transform:translateZ(40px)]"
           >
-            <div className="bg-campfire-amber text-campfire-dark px-3 py-1.5 rounded-full shadow-lg font-bold text-sm flex items-center gap-1.5">
-              <FaFire className="text-campfire-dark text-sm" />
-              <span>{rating}</span>
+            <div className="bg-campfire-dark/80 text-campfire-amber px-3 py-1.5 rounded-full shadow-lg font-bold text-sm flex items-center gap-1.5">
+              <FaFire className="text-campfire-amber text-sm drop-shadow-[0_0_8px_rgba(255,51,0,1)]" />
+              <span className="drop-shadow-[0_0_8px_rgba(255,51,0,1)]">{rating}</span>
+            </div>
+          </motion.div>
+        )}
+
+        {releaseDate && (
+          <motion.div
+            className="absolute top-3 left-3 z-[3] will-change-transform [transform:translateZ(40px)]"
+          >
+            <div className="bg-campfire-dark/80 text-campfire-light px-3 py-1.5 rounded-full shadow-lg font-bold text-sm">
+              {formatYear(releaseDate)}
             </div>
           </motion.div>
         )}
 
-        <motion.div
-          className="absolute bottom-0 left-0 right-0 z-[3] will-change-transform [transform:translateZ(40px)]"
-        >
-          <div className={`bg-gradient-to-t ${isDark ? 'from-campfire-dark/90' : 'from-campfire-light/90'} to-transparent p-3 rounded-b-[15px] text-center`}>
-            <h3 className={`text-base font-bold line-clamp-2 ${isDark ? 'text-campfire-light' : 'text-campfire-dark'}`}>
-              {captionText}
-            </h3>
-            {releaseDate && (
-              <p className={`text-sm mt-1 ${isDark ? 'text-campfire-light/80' : 'text-campfire-dark/80'}`}>
-                {formatYear(releaseDate)}
-              </p>
-            )}
-          </div>
-        </motion.div>
       </motion.div>
 
       {showTooltip && (
diff --git a/src/components/reactbits/Components/TiltedCard/TiltedCardShowcase.jsx b/src/components/reactbits/Components/TiltedCard/TiltedCardShowcase.jsx
new file mode 100644
index 0000000..4b66324
--- /dev/null
+++ b/src/components/reactbits/Components/TiltedCard/TiltedCardShowcase.jsx
@@ -0,0 +1,232 @@
+/*
+	Installed from https://reactbits.dev/tailwind/
+*/
+
+import { useRef, useState, useEffect } from "react";
+import { motion, useMotionValue, useSpring } from "framer-motion";
+import { FaFire } from "react-icons/fa";
+
+const springValues = {
+  damping: 30,
+  stiffness: 100,
+  mass: 2,
+};
+
+export default function TiltedCard({
+  imageSrc,
+  altText = "Tilted card image",
+  captionText = "",
+  containerHeight = "300px",
+  containerWidth = "100%",
+  imageHeight = "300px",
+  imageWidth = "300px",
+  scaleOnHover = 1.1,
+  rotateAmplitude = 14,
+  showMobileWarning = true,
+  showTooltip = true,
+  overlayContent = null,
+  displayOverlayContent = false,
+  rating = null,
+  releaseDate = null
+}) {
+  const ref = useRef(null);
+  const [isDark, setIsDark] = useState(true);
+  const x = useMotionValue(0);
+  const y = useMotionValue(0);
+  const rotateX = useSpring(useMotionValue(0), springValues);
+  const rotateY = useSpring(useMotionValue(0), springValues);
+  const scale = useSpring(1, springValues);
+  const opacity = useSpring(0);
+  const rotateFigcaption = useSpring(0, {
+    stiffness: 350,
+    damping: 30,
+    mass: 1,
+  });
+
+  const [lastY, setLastY] = useState(0);
+
+  useEffect(() => {
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+    img.src = imageSrc;
+
+    img.onload = () => {
+      // Создаем временный canvas для анализа цвета
+      const canvas = document.createElement('canvas');
+      const ctx = canvas.getContext('2d');
+      
+      // Устанавливаем размер canvas равным размеру изображения
+      canvas.width = img.width;
+      canvas.height = img.height;
+      
+      // Рисуем изображение
+      ctx.drawImage(img, 0, 0);
+      
+      try {
+        // Получаем данные только из нижней трети изображения
+        const bottomThird = Math.floor(img.height * 0.66);
+        const imageData = ctx.getImageData(0, bottomThird, img.width, img.height - bottomThird);
+        const data = imageData.data;
+        
+        let r = 0, g = 0, b = 0;
+        let count = 0;
+        
+        // Анализируем каждый 4-й пиксель для производительности
+        for (let i = 0; i < data.length; i += 16) {
+          r += data[i];
+          g += data[i + 1];
+          b += data[i + 2];
+          count++;
+        }
+        
+        // Вычисляем средний цвет
+        r = Math.floor(r / count);
+        g = Math.floor(g / count);
+        b = Math.floor(b / count);
+        
+        // Вычисляем яркость по формуле
+        const brightness = (r * 0.299 + g * 0.587 + b * 0.114);
+        
+        // Если яркость больше 128, считаем фон светлым
+        setIsDark(brightness < 128);
+      } catch (error) {
+        // В случае ошибки CORS, используем темный фон по умолчанию
+        console.warn('Не удалось определить яркость изображения:', error);
+        setIsDark(true);
+      }
+    };
+
+    img.onerror = () => {
+      // В случае ошибки загрузки изображения, используем темный фон
+      setIsDark(true);
+    };
+  }, [imageSrc]);
+
+  function handleMouse(e) {
+    if (!ref.current) return;
+
+    const rect = ref.current.getBoundingClientRect();
+    const offsetX = e.clientX - rect.left - rect.width / 2;
+    const offsetY = e.clientY - rect.top - rect.height / 2;
+
+    const rotationX = (offsetY / (rect.height / 2)) * -rotateAmplitude;
+    const rotationY = (offsetX / (rect.width / 2)) * rotateAmplitude;
+
+    rotateX.set(rotationX);
+    rotateY.set(rotationY);
+
+    x.set(e.clientX - rect.left);
+    y.set(e.clientY - rect.top);
+
+    const velocityY = offsetY - lastY;
+    rotateFigcaption.set(-velocityY * 0.6);
+    setLastY(offsetY);
+  }
+
+  function handleMouseEnter() {
+    scale.set(scaleOnHover);
+    opacity.set(1);
+  }
+
+  function handleMouseLeave() {
+    opacity.set(0);
+    scale.set(1);
+    rotateX.set(0);
+    rotateY.set(0);
+    rotateFigcaption.set(0);
+  }
+
+  const formatYear = (dateString) => {
+    if (!dateString) return '';
+    return new Date(dateString).getFullYear();
+  };
+
+  return (
+    <figure
+      ref={ref}
+      className="relative w-full h-full [perspective:800px] flex flex-col items-center justify-center"
+      style={{
+        height: containerHeight,
+        width: containerWidth,
+      }}
+      onMouseMove={handleMouse}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      {showMobileWarning && (
+        <div className="absolute top-4 text-center text-sm block sm:hidden">
+          This effect is not optimized for mobile. Check on desktop.
+        </div>
+      )}
+
+      <motion.div
+        className="relative [transform-style:preserve-3d]"
+        style={{
+          width: imageWidth,
+          height: imageHeight,
+          rotateX,
+          rotateY,
+          scale,
+        }}
+      >
+        <motion.img
+          src={imageSrc}
+          alt={altText}
+          className="absolute top-0 left-0 object-cover rounded-[15px] will-change-transform [transform:translateZ(0)]"
+          style={{
+            width: imageWidth,
+            height: imageHeight,
+          }}
+        />
+
+        {displayOverlayContent && overlayContent && (
+          <motion.div
+            className="absolute top-0 left-0 z-[2] will-change-transform [transform:translateZ(30px)]"
+          >
+            {overlayContent}
+          </motion.div>
+        )}
+
+        {rating !== null && rating !== undefined && (
+          <motion.div
+            className="absolute top-3 right-3 z-[3] will-change-transform [transform:translateZ(40px)]"
+          >
+            <div className="bg-campfire-amber text-campfire-dark px-3 py-1.5 rounded-full shadow-lg font-bold text-sm flex items-center gap-1.5">
+              <FaFire className="text-campfire-dark text-sm" />
+              <span>{rating}</span>
+            </div>
+          </motion.div>
+        )}
+
+        <motion.div
+          className="absolute bottom-0 left-0 right-0 z-[3] will-change-transform [transform:translateZ(40px)]"
+        >
+          <div className={`bg-gradient-to-t ${isDark ? 'from-campfire-dark/90' : 'from-campfire-light/90'} to-transparent p-3 rounded-b-[15px] text-center`}>
+            <h3 className={`text-base font-bold line-clamp-2 ${isDark ? 'text-campfire-light' : 'text-campfire-dark'}`}>
+              {captionText}
+            </h3>
+            {releaseDate && (
+              <p className={`text-sm mt-1 ${isDark ? 'text-campfire-light/80' : 'text-campfire-dark/80'}`}>
+                {formatYear(releaseDate)}
+              </p>
+            )}
+          </div>
+        </motion.div>
+      </motion.div>
+
+      {showTooltip && (
+        <motion.figcaption
+          className="pointer-events-none absolute left-0 top-0 rounded-[4px] bg-white px-[10px] py-[4px] text-[10px] text-[#2d2d2d] opacity-0 z-[3] hidden sm:block"
+          style={{
+            x,
+            y,
+            opacity,
+            rotate: rotateFigcaption,
+          }}
+        >
+          {captionText}
+        </motion.figcaption>
+      )}
+    </figure>
+  );
+}
diff --git a/src/components/reactbits/index.js b/src/components/reactbits/index.js
new file mode 100644
index 0000000..036aa97
--- /dev/null
+++ b/src/components/reactbits/index.js
@@ -0,0 +1,16 @@
+// Components
+export { default as TiltedCard } from './Components/TiltedCard/TiltedCard';
+export { default as PixelCard } from './Components/PixelCard/PixelCard';
+export { default as Stepper } from './Components/Stepper/Stepper';
+export { default as Dock } from './Components/Dock/Dock';
+
+// Animations
+export { default as ClickSpark } from './Animations/ClickSpark/ClickSpark';
+
+// Backgrounds
+export { default as GridMotion } from './Backgrounds/GridMotion/GridMotion';
+export { default as Squares } from './Backgrounds/Squares/Squares';
+export { default as Dither } from './Backgrounds/Dither/Dither';
+
+// Text Animations
+export { default as FuzzyText } from './TextAnimations/FuzzyText/FuzzyText'; 
\ No newline at end of file
diff --git a/src/components/reviews/CommentSection.jsx b/src/components/reviews/CommentSection.jsx
new file mode 100644
index 0000000..97fc9cb
--- /dev/null
+++ b/src/components/reviews/CommentSection.jsx
@@ -0,0 +1,164 @@
+import React, { useState, useEffect } from 'react';
+import { FaComment, FaReply } from 'react-icons/fa';
+import { pb } from '../../services/pocketbaseService';
+import { createReviewCommentNotification, createCommentReplyNotification } from '../../services/notificationService';
+
+const CommentSection = ({ reviewId }) => {
+    const [comments, setComments] = useState([]);
+    const [newComment, setNewComment] = useState('');
+    const [replyTo, setReplyTo] = useState(null);
+    const [isLoading, setIsLoading] = useState(false);
+
+    useEffect(() => {
+        loadComments();
+    }, [reviewId]);
+
+    const loadComments = async () => {
+        try {
+            const records = await pb.collection('review_comments').getList(1, 50, {
+                filter: `review_id = "${reviewId}"`,
+                sort: '-created',
+                expand: 'user_id,parent_id'
+            });
+            setComments(records.items);
+        } catch (error) {
+            console.error('Error loading comments:', error);
+        }
+    };
+
+    const handleSubmitComment = async (e) => {
+        e.preventDefault();
+        if (!newComment.trim() || isLoading) return;
+
+        setIsLoading(true);
+        try {
+            const authData = pb.authStore.model;
+            if (!authData) {
+                throw new Error('Требуется авторизация');
+            }
+
+            // Получаем рецензию для уведомления
+            const review = await pb.collection('reviews').getOne(reviewId, {
+                expand: 'media_id'
+            });
+
+            const commentData = {
+                review_id: reviewId,
+                user_id: authData.id,
+                content: newComment.trim(),
+                parent_id: replyTo?.id || null
+            };
+
+            const comment = await pb.collection('review_comments').create(commentData);
+
+            // Создаем уведомление
+            if (replyTo) {
+                // Уведомление о ответе на комментарий
+                await createCommentReplyNotification(
+                    replyTo.user_id,
+                    replyTo,
+                    comment,
+                    authData
+                );
+            } else {
+                // Уведомление о новом комментарии к рецензии
+                await createReviewCommentNotification(
+                    review.user_id,
+                    review,
+                    comment,
+                    authData
+                );
+            }
+
+            setNewComment('');
+            setReplyTo(null);
+            await loadComments();
+        } catch (error) {
+            console.error('Error submitting comment:', error);
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const renderComment = (comment) => {
+        const user = comment.expand?.user_id;
+        const isReply = comment.parent_id;
+
+        return (
+            <div key={comment.id} className={`mt-4 ${isReply ? 'ml-8' : ''}`}>
+                <div className="flex items-start space-x-2">
+                    <img
+                        src={user?.avatar || '/default-avatar.png'}
+                        alt={user?.username}
+                        className="w-8 h-8 rounded-full"
+                    />
+                    <div className="flex-1">
+                        <div className="bg-gray-100 rounded-lg p-3">
+                            <div className="font-medium">{user?.username}</div>
+                            <p className="text-gray-700">{comment.content}</p>
+                        </div>
+                        <div className="mt-1 text-sm text-gray-500">
+                            <button
+                                onClick={() => setReplyTo(comment)}
+                                className="hover:text-blue-500"
+                            >
+                                <FaReply className="inline mr-1" />
+                                Ответить
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                {comment.expand?.parent_id && (
+                    <div className="mt-2 text-sm text-gray-500">
+                        Ответ на комментарий {comment.expand.parent_id.user_id.username}
+                    </div>
+                )}
+            </div>
+        );
+    };
+
+    return (
+        <div className="mt-6">
+            <h3 className="text-lg font-medium mb-4">
+                <FaComment className="inline mr-2" />
+                Комментарии
+            </h3>
+
+            <form onSubmit={handleSubmitComment} className="mb-6">
+                <div className="flex space-x-2">
+                    <input
+                        type="text"
+                        value={newComment}
+                        onChange={(e) => setNewComment(e.target.value)}
+                        placeholder={replyTo ? `Ответить ${replyTo.expand?.user_id.username}` : 'Написать комментарий...'}
+                        className="flex-1 rounded-lg border border-gray-300 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    />
+                    <button
+                        type="submit"
+                        disabled={isLoading}
+                        className="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    >
+                        {isLoading ? 'Отправка...' : 'Отправить'}
+                    </button>
+                </div>
+                {replyTo && (
+                    <div className="mt-2 text-sm text-gray-500">
+                        Ответ на комментарий {replyTo.expand?.user_id.username}
+                        <button
+                            onClick={() => setReplyTo(null)}
+                            className="ml-2 text-red-500 hover:text-red-600"
+                        >
+                            Отменить
+                        </button>
+                    </div>
+                )}
+            </form>
+
+            <div className="space-y-4">
+                {comments.map(renderComment)}
+            </div>
+        </div>
+    );
+};
+
+export default CommentSection; 
\ No newline at end of file
diff --git a/src/components/reviews/LikeButton.jsx b/src/components/reviews/LikeButton.jsx
index 67aa174..0dd15c0 100644
--- a/src/components/reviews/LikeButton.jsx
+++ b/src/components/reviews/LikeButton.jsx
@@ -3,6 +3,7 @@ import { FaHeart, FaRegHeart } from 'react-icons/fa';
 import { useAuth } from '../../contexts/AuthContext';
 import { pb } from '../../services/pocketbaseService';
 import { toast } from 'react-toastify';
+import { createReviewLikeNotification } from '../../services/notificationService';
 
 const LikeButton = ({ reviewId, initialLikes = 0, onLikeChange, reviewOwnerId }) => {
   const { user } = useAuth();
@@ -18,7 +19,9 @@ const LikeButton = ({ reviewId, initialLikes = 0, onLikeChange, reviewOwnerId })
 
       try {
         // Получаем рецензию и проверяем, есть ли пользователь в списке лайков
-        const review = await pb.collection('reviews').getOne(reviewId);
+        const review = await pb.collection('reviews').getOne(reviewId, {
+          expand: 'media_id'
+        });
         const likes = review.likes || [];
         setIsLiked(likes.includes(user.id));
         setLikesCount(likes.length);
@@ -53,7 +56,9 @@ const LikeButton = ({ reviewId, initialLikes = 0, onLikeChange, reviewOwnerId })
     setIsLoading(true);
     try {
       // Получаем текущую рецензию
-      const review = await pb.collection('reviews').getOne(reviewId);
+      const review = await pb.collection('reviews').getOne(reviewId, {
+        expand: 'media_id,user_id'
+      });
       const currentLikes = review.likes || [];
 
       let newLikes;
@@ -63,6 +68,15 @@ const LikeButton = ({ reviewId, initialLikes = 0, onLikeChange, reviewOwnerId })
       } else {
         // Добавляем лайк
         newLikes = [...currentLikes, user.id];
+        
+        // Создаем уведомление о лайке, если это новый лайк и лайкающий не является автором рецензии
+        if (review.user_id !== user.id) {
+          await createReviewLikeNotification(
+            review.user_id,
+            review,
+            user
+          );
+        }
       }
 
       // Обновляем рецензию с новым списком лайков
diff --git a/src/components/reviews/ReviewCard.jsx b/src/components/reviews/ReviewCard.jsx
index 2be79e4..1b651a6 100644
--- a/src/components/reviews/ReviewCard.jsx
+++ b/src/components/reviews/ReviewCard.jsx
@@ -40,7 +40,7 @@ function ReviewCard({ review, isDetailed = false, characteristics }) {
       {/* Review Header */}
       <div className="flex justify-between items-start mb-4">
         <div className="flex items-center">
-          <Link to={`/profile/${userProfile?.username}`}> {/* Use userProfile?.id */}
+          <Link to={`/profile/${userProfile?.login}`}> {/* Use userProfile?.id */}
             <img
               src={userProfile?.profile_picture || 'https://questhowth.ie/wp-content/uploads/2018/04/user-placeholder.png'} // Use userProfile?.profile_picture
               alt={userProfile?.username} // Use userProfile?.username
@@ -48,7 +48,7 @@ function ReviewCard({ review, isDetailed = false, characteristics }) {
             />
           </Link>
           <div>
-            <Link to={`/profile/${userProfile?.username}`} className="font-medium text-campfire-light hover:text-campfire-amber"> {/* Use userProfile?.id */}
+            <Link to={`/profile/${userProfile?.login}`} className="font-medium text-campfire-light hover:text-campfire-amber"> {/* Use userProfile?.id */}
               {userProfile?.username} {/* Use userProfile?.username */}
             </Link>
             {userProfile?.is_critic && ( // Use userProfile?.is_critic
diff --git a/src/components/reviews/ReviewForm.jsx b/src/components/reviews/ReviewForm.jsx
index 881dfd1..3a79feb 100644
--- a/src/components/reviews/ReviewForm.jsx
+++ b/src/components/reviews/ReviewForm.jsx
@@ -123,10 +123,21 @@ function ReviewForm({ mediaId, seasonId, mediaType, progressType, onSubmit, onEd
 
 
   const handleRatingChange = (category, value) => {
-    setRatings(prev => ({
-      ...prev,
-      [category]: value // Store the number directly from FlameRatingInput
-    }));
+    const newRatings = {
+      ...ratings,
+      [category]: value
+    };
+    
+    // Рассчитываем overall_rating как среднее всех оценок
+    const validRatings = Object.values(newRatings).filter(rating => typeof rating === 'number');
+    const overallRating = validRatings.length > 0 
+      ? validRatings.reduce((sum, rating) => sum + rating, 0) / validRatings.length 
+      : 0;
+    
+    setRatings({
+      ...newRatings,
+      overall: overallRating
+    });
   };
 
   const handleProgressChange = (value) => {
@@ -145,55 +156,35 @@ function ReviewForm({ mediaId, seasonId, mediaType, progressType, onSubmit, onEd
     setIsSubmitting(true);
 
     try {
-      // Validate that all characteristics have a rating (since N/A is removed)
-      const allRatingsValid = Object.keys(characteristics).every(key =>
-          typeof ratings[key] === 'number' && ratings[key] >= 1 && ratings[key] <= 10
-      );
-
-      // Validate that progress is filled/selected
-      const isProgressValid = isProgressSelect ? Object.keys(progressOptions).includes(progress) : progress.trim() !== '';
-
-      // Validate that a season is selected if media supports seasons and it's not the overall review
-      // This validation is now relaxed: if supportsSeasons, formSeasonId can be null OR a valid season ID
-      const isSeasonSelectedValid = supportsSeasons ? (formSeasonId === null || seasons.some(s => s.id === formSeasonId)) : true;
-
-      // Validate that content is not empty (check Quill's internal state or HTML string)
-      // Quill's empty state is typically '<p><br></p>' or just ''
-      const isContentValid = content.trim() !== '' && content !== '<p><br></p>';
-
-
-      if (!allRatingsValid || !isProgressValid || !isSeasonSelectedValid || !isContentValid) {
-          console.error("Validation failed: Not all characteristics have a valid rating, progress is invalid/empty, season selection is invalid, or content is empty.");
-          // Optionally set an error message here if needed, though button is disabled
-          setIsSubmitting(false);
-          return;
-      }
-
+      // Рассчитываем overall_rating перед отправкой
+      const validRatings = Object.entries(ratings)
+        .filter(([key, value]) => key !== 'overall' && typeof value === 'number');
+      const overallRating = validRatings.length > 0 
+        ? validRatings.reduce((sum, [_, rating]) => sum + rating, 0) / validRatings.length 
+        : 0;
 
       const reviewData = {
         media_id: mediaId,
-        season_id: formSeasonId, // Use the season selected in the form (can be null)
+        season_id: formSeasonId,
         media_type: mediaType,
-        content, // Use content from Quill editor state (HTML string)
-        ratings, // Store the ratings object { [key]: number }
+        content,
+        ratings: {
+          ...ratings,
+          overall: overallRating
+        },
         has_spoilers: hasSpoilers,
-        progress, // Include progress (text field)
+        progress: progress,
+        progress_type: progressType
       };
 
       if (existingReview && isEditing) {
-        // If editing an existing review
         await onEdit(existingReview.id, reviewData);
-        console.log('ReviewForm: Edit submitted, setting isEditing to false'); // LOG
-        setIsEditing(false); // Exit editing mode after submit
+        setIsEditing(false);
       } else {
-        // If creating a new review
         await onSubmit(reviewData);
-        // Form reset is handled by the useEffect when existingReview becomes null or changes
       }
-
     } catch (error) {
       console.error('Error submitting review:', error);
-      // Optionally set an error state to display to the user
     } finally {
       setIsSubmitting(false);
     }
diff --git a/src/components/reviews/ReviewItem.jsx b/src/components/reviews/ReviewItem.jsx
index dfb4068..6b2ee69 100644
--- a/src/components/reviews/ReviewItem.jsx
+++ b/src/components/reviews/ReviewItem.jsx
@@ -1,9 +1,11 @@
-import React, { useState } from 'react';
+import React, { useState, memo } from 'react';
 import { Link } from 'react-router-dom';
 import { FaFire, FaRegCommentDots, FaEye, FaClock, FaCheckCircle, FaGamepad } from 'react-icons/fa';
 import { getFileUrl } from '../../services/pocketbaseService';
 import DOMPurify from 'dompurify';
 import LikeButton from './LikeButton';
+import { PixelCard } from '../reactbits';
+import LazyImage from '../common/LazyImage';
 
 // Mapping for watched/completed status values
 const watchedStatusLabels = {
@@ -18,7 +20,7 @@ const completedStatusLabels = {
 
 
 // ReviewItem now expects review, media, season, reviewCharacteristics, isProfilePage, and isSmallCard props
-function ReviewItem({ review, media, season, reviewCharacteristics = {}, isProfilePage = false, isSmallCard = false }) {
+const ReviewItem = memo(function ReviewItem({ review, media, season, reviewCharacteristics = {}, isProfilePage = false, isSmallCard = false }) {
   const [showFullReview, setShowFullReview] = useState(false);
   const [showSpoilers, setShowSpoilers] = useState(false);
 
@@ -32,13 +34,15 @@ function ReviewItem({ review, media, season, reviewCharacteristics = {}, isProfi
 
   const reviewTitle = reviewMedia
       ? `${reviewMedia.title}${reviewSeason ? ` - Сезон ${reviewSeason.season_number}${reviewSeason.title ? `: ${reviewSeason.title}` : ''}` : ''}`
-      : 'Неизвестное произведение';
+      : 'Загрузка...';
 
   const reviewLink = reviewMedia ? `/media/${reviewMedia.path}` : '#';
 
 
   // Sanitize HTML content from the rich text editor
   const sanitizedContent = DOMPurify.sanitize(review.content);
+  const plainTextContent = sanitizedContent.replace(/<[^>]*>?/gm, '');
+  const isLongReview = plainTextContent.length > 300;
 
 
   // Determine progress display based on media's progress_type
@@ -85,10 +89,10 @@ function ReviewItem({ review, media, season, reviewCharacteristics = {}, isProfi
               {/* Small Poster in corner - Only show on profile page small cards */}
               {isProfilePage && reviewMedia?.poster && (
                   <div className="absolute top-0 right-0 w-16 h-24 overflow-hidden rounded-tr-lg rounded-bl-lg border-b border-l border-campfire-ash/30"> {/* Adjusted size and positioning */}
-                      <img
+                      <LazyImage
                           src={getFileUrl(reviewMedia, 'poster')}
                           alt={`Постер ${reviewMedia.title}`}
-                          className="w-full h-full object-cover" // Ensure image covers the container
+                          className="w-full h-full"
                       />
                   </div>
               )}
@@ -96,10 +100,10 @@ function ReviewItem({ review, media, season, reviewCharacteristics = {}, isProfi
               {/* User Avatar and Title */}
               <div className={`flex items-center mb-3 ${isProfilePage && reviewMedia?.poster ? 'pr-20' : ''}`}> {/* Added right padding conditionally */}
                   {reviewUser && (
-                      <img
+                      <LazyImage
                           src={getFileUrl(reviewUser, 'profile_picture') || 'https://images.pexels.com/photos/1704488/pexels-photo-1704488.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'}
                           alt={reviewUser.username}
-                          className="w-8 h-8 rounded-full object-cover mr-3 border border-campfire-ash/30"
+                          className="w-8 h-8 rounded-full mr-3 border border-campfire-ash/30"
                       />
                   )}
                   <h3 className="text-sm font-bold text-campfire-amber leading-tight line-clamp-2 flex-grow">
@@ -141,10 +145,10 @@ function ReviewItem({ review, media, season, reviewCharacteristics = {}, isProfi
       {/* Media Poster - Only show on profile page large cards (Showcase) */}
       {isProfilePage && reviewMedia?.poster && (
           <Link to={reviewLink} className="block mb-4 self-center">
-              <img
+              <LazyImage
                   src={getFileUrl(reviewMedia, 'poster')}
                   alt={`Постер ${reviewMedia.title}`}
-                  className="w-32 h-auto object-cover rounded-md"
+                  className="w-32 h-auto rounded-md"
               />
           </Link>
       )}
@@ -154,18 +158,18 @@ function ReviewItem({ review, media, season, reviewCharacteristics = {}, isProfi
         <div className="flex items-center">
           {/* User Avatar */}
           {reviewUser && (
-             <Link to={`/profile/${reviewUser.username}`} className="flex-shrink-0 mr-4">
-                <img
+             <Link to={`/profile/${reviewUser.login}`} className="flex-shrink-0 mr-4">
+                <LazyImage
                    src={getFileUrl(reviewUser, 'profile_picture') || 'https://images.pexels.com/photos/1704488/pexels-photo-1704488.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'}
                    alt={reviewUser.username}
-                   className="w-10 h-10 rounded-full object-cover border border-campfire-ash/30"
+                   className="w-10 h-10 rounded-full border border-campfire-ash/30"
                 />
              </Link>
           )}
           <div>
             {/* User Link */}
             {reviewUser && (
-                <Link to={`/profile/${reviewUser.username}`} className="text-campfire-light font-semibold hover:underline text-sm">
+                <Link to={`/profile/${reviewUser.login}`} className="text-campfire-light font-semibold hover:underline text-sm">
                     {reviewUser.username}
                 </Link>
             )}
@@ -210,37 +214,42 @@ function ReviewItem({ review, media, season, reviewCharacteristics = {}, isProfi
       {/* Review Content and Footer (Flex container) */}
       <div className="flex flex-col flex-grow">
           {/* Review Content */}
-          <div className={`text-campfire-ash leading-relaxed mb-4 ${!showFullReview ? 'line-clamp-4' : ''}`}>
+          <div className="text-campfire-ash leading-relaxed mb-4">
             {review.has_spoilers && !showSpoilers ? (
-              <div className="bg-status-warning/10 border border-status-warning/20 text-status-warning p-4 rounded-md">
-                <p className="font-semibold mb-2">Внимание: Эта рецензия содержит спойлеры!</p>
-                <button
-                  onClick={() => setShowSpoilers(true)}
-                  className="text-status-warning hover:underline text-sm"
-                >
-                  Показать спойлеры
-                </button>
-              </div>
+              <PixelCard
+                variant="default"
+                className="w-full group"
+                noFocus={true}
+                gap={9}
+                onMouseEnter={() => setShowSpoilers(true)}
+              >
+                <div className="absolute inset-0 flex flex-col items-center justify-center p-6 text-center opacity-100 transition-opacity duration-300 group-hover:opacity-0 pointer-events-none">
+                  <div className="text-2xl font-bold text-campfire-amber mb-4">⚠️ Внимание!</div>
+                  <p className="text-campfire-light mb-6">Эта рецензия содержит спойлеры к произведению</p>
+                  <div className="px-6 py-2 bg-campfire-ash/20 text-campfire-amber rounded-xl">
+                    Наведите для просмотра
+                  </div>
+                </div>
+                <div className="absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+                  <div className="p-6 h-full overflow-y-auto custom-scrollbar">
+                    <div dangerouslySetInnerHTML={{ __html: sanitizedContent }} />
+                  </div>
+                </div>
+              </PixelCard>
             ) : (
-              <div dangerouslySetInnerHTML={{ __html: sanitizedContent }} />
+              <div className="relative group">
+                <div className="p-6 overflow-y-auto custom-scrollbar max-h-[400px] border rounded-xl border-campfire-ash/20">
+                  <div dangerouslySetInnerHTML={{ __html: sanitizedContent }} />
+                </div>
+              </div>
             )}
           </div>
 
-          {/* Read More Button */}
-          {review.content && review.content.length > 300 && (
-             <button
-               onClick={() => setShowFullReview(!showFullReview)}
-               className="text-campfire-amber hover:underline text-sm self-start mb-4"
-             >
-               {showFullReview ? 'Свернуть' : 'Читать далее'}
-             </button>
-          )}
-
           {/* Footer: Date, Comment Count (Placeholder) and Progress */}
           <div className="flex items-end justify-between text-campfire-ash text-xs mt-auto pt-4 border-t border-campfire-ash/20">
             <div className="flex items-center space-x-4">
-            <span>{new Date(review.created).toLocaleDateString()}</span>
-            {renderProgress()}
+              <span>{new Date(review.created).toLocaleDateString()}</span>
+              {renderProgress()}
             </div>
             <LikeButton 
               reviewId={review.id} 
@@ -251,6 +260,6 @@ function ReviewItem({ review, media, season, reviewCharacteristics = {}, isProfi
       </div>
     </div>
   );
-}
+});
 
 export default ReviewItem;
diff --git a/src/components/ui/AlphaBadge.jsx b/src/components/ui/AlphaBadge.jsx
index bf9b9dd..f678900 100644
--- a/src/components/ui/AlphaBadge.jsx
+++ b/src/components/ui/AlphaBadge.jsx
@@ -4,7 +4,7 @@ const AlphaBadge = () => {
   return (
     <div className="fixed top-2 right-2 z-[60]">
       <div className="bg-campfire-charcoal/80 backdrop-blur-md px-3 py-1 rounded-full text-xs text-campfire-light border border-campfire-ash/20">
-        Alpha 6.2
+        Alpha 8.4
       </div>
     </div>
   );
diff --git a/src/components/ui/SearchBar.jsx b/src/components/ui/SearchBar.jsx
index 2b46ea8..9131f31 100644
--- a/src/components/ui/SearchBar.jsx
+++ b/src/components/ui/SearchBar.jsx
@@ -3,7 +3,7 @@ import { FiSearch, FiX } from 'react-icons/fi';
 import { searchMedia } from '../../services/pocketbaseService';
 import SearchResults from './SearchResults';
 
-const SearchBar = ({ onClose }) => {
+const SearchBar = ({ onClose, mobileMode = false }) => {
   const [query, setQuery] = useState('');
   const [results, setResults] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
@@ -86,6 +86,17 @@ const SearchBar = ({ onClose }) => {
 
       {/* Search Results */}
       {(query.length >= 2 || results.length > 0) && (
+        mobileMode ? (
+          <div className="mt-2 bg-campfire-charcoal/95 backdrop-blur-md border-b border-campfire-ash/30 shadow-lg rounded-lg">
+            <div className="container-custom mx-auto px-4 py-4">
+              {isLoading ? (
+                <div className="text-campfire-light text-center">Поиск...</div>
+              ) : (
+                <SearchResults results={results} onResultClick={handleResultClick} />
+              )}
+            </div>
+          </div>
+        ) : (
         <div className="fixed left-0 right-0 top-[72px] bg-campfire-charcoal/95 backdrop-blur-md border-b border-campfire-ash/30 shadow-lg">
           <div className="container-custom mx-auto px-4 py-4">
             {isLoading ? (
@@ -95,6 +106,7 @@ const SearchBar = ({ onClose }) => {
             )}
           </div>
         </div>
+        )
       )}
     </div>
   );
diff --git a/src/contexts/AuthContext.jsx b/src/contexts/AuthContext.jsx
index 913e6d4..024a172 100644
--- a/src/contexts/AuthContext.jsx
+++ b/src/contexts/AuthContext.jsx
@@ -3,7 +3,7 @@ import React, {
   useContext,
   useState,
   useEffect,
-  useMemo,
+  useCallback,
 } from "react";
 import {
   pb, // Import PocketBase instance for authStore listener
@@ -13,8 +13,11 @@ import {
   getUserProfile,
   requestPasswordReset as pbRequestPasswordReset, // Import the new function
 } from "../services/pocketbaseService"; // Use the new service file
+import { getNotificationSettings } from '../services/notificationService';
+import { useCache } from '../hooks/useCache';
+import { useErrorBoundary } from '../hooks/useErrorBoundary';
 
-const AuthContext = createContext();
+const AuthContext = createContext(null);
 
 export const useAuth = () => {
   // CORRECT: useContext is called at the top level of the useAuth hook function
@@ -29,240 +32,125 @@ export const useAuth = () => {
 };
 
 export const AuthProvider = ({ children }) => {
-  const [currentUser, setCurrentUser] = useState(null);
+  const [user, setUser] = useState(null);
   const [userProfile, setUserProfile] = useState(null);
-  const [loading, setLoading] = useState(true); // Start in loading state
-  const [error, setError] = useState(null);
-  const [isInitialized, setIsInitialized] = useState(false); // Track initialization
+  const [loading, setLoading] = useState(true);
+  const [isInitialized, setIsInitialized] = useState(false);
+  const { error, handleError, clearError } = useErrorBoundary();
 
-  console.log('AuthProvider: Component rendering. State:', { currentUser: !!currentUser, userProfile: !!userProfile, loading, error, isInitialized }); // Add logging
-
-  // Function to load user profile (kept for potential manual refresh)
-  const loadUserProfile = async (userId) => {
-    if (!userId) {
-      console.log('AuthProvider: loadUserProfile: Нет userId для загрузки профиля');
-      return null;
-    }
-
-    try {
-      console.log('AuthProvider: loadUserProfile: Загрузка профиля пользователя:', userId);
-      // In PocketBase, the auth model *is* the user record, so we don't need a separate profile fetch
-      // unless we need expanded relations not included in the auth model.
-      // For now, we assume the auth model is sufficient for basic profile info.
-      // If we needed expanded data, we'd use pb.collection('users').getOne(userId, { expand: '...' });
-      const profile = await pb.collection('users').getOne(userId); // Fetch the full user record
-      console.log('AuthProvider: loadUserProfile: Профиль загружен:', profile);
-      return profile;
-
-    } catch (error) {
-      console.error('AuthProvider: loadUserProfile: Ошибка загрузки профиля:', error); // Add error logging
-      // Don't set global error here, just log
-      return null;
-    }
-  };
-
-  useEffect(() => {
-    let mounted = true;
-    console.log('AuthProvider: useEffect: Инициализация PocketBase authStore listener...'); // Add logging
-
-    // Use PocketBase's authStore.onChange listener
-    // The 'true' argument runs the listener immediately on mount,
-    // which is perfect for initial auth state check.
-    const unsubscribe = pb.authStore.onChange(async (token, model) => {
-      if (!mounted) {
-        console.log('AuthProvider: authStore.onChange: Component unmounted, skipping state update.'); // Add logging
-        return;
+  // Кэширование профиля пользователя
+  const { data: cachedProfile, refetch: refetchProfile } = useCache(
+    user ? `profile_${user.id}` : null,
+    async () => {
+      if (!user) return null;
+      try {
+        const profile = await pb.collection('users').getOne(user.id);
+        return profile;
+      } catch (err) {
+        handleError(err);
+        return null;
       }
+    },
+    {
+      expiry: 5 * 60 * 1000, // 5 минут
+      dependencies: [user?.id]
+    }
+  );
 
-      console.log('AuthProvider: authStore.onChange: Изменение состояния авторизации:', { token: !!token, model: !!model }); // Add logging
+  // Инициализация аутентификации
+  useEffect(() => {
+    const initializeAuth = async () => {
+      try {
+        setLoading(true);
+        clearError();
 
-      // setLoading(true); // Avoid setting loading here to prevent flicker during state changes
-      setError(null); // Clear previous errors
-
-      try { // Wrap state update logic in try-catch
-        if (model) { // model is the authenticated user record
-          console.log('AuthProvider: authStore.onChange: Пользователь найден:', model.id); // Add logging
-          setCurrentUser(model); // Set the user model directly
-          // Fetch the full user record including any necessary expansions if the auth model is insufficient
-          // For now, let's assume the auth model has basic profile fields like username, avatar, etc.
-          // If you need expanded relations (like 'showcase'), you might need a separate fetch here
-          // or ensure they are included in the auth model via PocketBase settings if possible.
-          // For simplicity, let's just use the model as the profile for now.
-          setUserProfile(model); // In PocketBase, model is the user record
-          setError(null); // Clear error on successful user/profile load
-        } else {
-          console.log('AuthProvider: authStore.onChange: Пользователь не найден (вышел)'); // Add logging
-          setCurrentUser(null);
-          setUserProfile(null);
-          setError(null); // Clear error when user logs out
+        // Проверяем текущую сессию
+        const authData = pb.authStore.model;
+        if (authData) {
+          setUser(authData);
+          const profile = await pb.collection('users').getOne(authData.id);
+          setUserProfile(profile);
         }
       } catch (err) {
-         console.error('AuthProvider: authStore.onChange: Ошибка при обработке изменения состояния:', err); // Add error logging
-         setError(err.message || 'Ошибка при обработке состояния авторизации');
-         setCurrentUser(null);
-         setUserProfile(null);
-      } finally {
-         // Always set initialized and loading=false after the first check runs
-         // This ensures the provider is marked as ready after the initial auth state is determined.
-         if (!isInitialized) { // Only set initialized once
-            setIsInitialized(true);
-            console.log('AuthProvider: authStore.onChange: Initialized set to true.'); // Add logging
-         }
-         setLoading(false); // Always set loading to false after processing the change
-         console.log('AuthProvider: authStore.onChange: Обработка завершена. isInitialized:', isInitialized, 'loading:', loading); // Add logging
-      }
-
-
-    }, true); // The 'true' argument runs the listener immediately on mount
-
-    return () => {
-      console.log('AuthProvider: useEffect cleanup: Отписка от изменений состояния авторизации'); // Add logging
-      mounted = false;
-      unsubscribe(); // Unsubscribe from the listener
-    };
-  }, []); // Empty dependency array means this runs only once on mount
-
-  // Manual profile refresh function (useful after profile updates)
-  const refreshUserProfile = async () => {
-    if (currentUser) {
-      setLoading(true); // Indicate loading while refreshing profile
-      try {
-        console.log('AuthProvider: refreshUserProfile: Refreshing profile for user:', currentUser.id); // Add logging
-        // Fetch the latest user record
-        const profile = await pb.collection('users').getOne(currentUser.id);
-        setUserProfile(profile);
-        setError(null);
-        console.log('AuthProvider: refreshUserProfile: Profile refreshed successfully.'); // Add logging
-      } catch (err) {
-        console.error('AuthProvider: Ошибка при обновлении профиля:', err); // Add error logging
-        setError(err.message);
+        handleError(err);
       } finally {
         setLoading(false);
-        console.log('AuthProvider: refreshUserProfile: Refresh complete.'); // Add logging
+        setIsInitialized(true);
       }
-    } else {
-       console.log('AuthProvider: refreshUserProfile: No current user to refresh profile.'); // Add logging
-    }
-  };
+    };
 
+    initializeAuth();
+  }, [clearError, handleError]);
 
-  const signIn = async (email, password) => {
+  // Обработчик входа
+  const login = useCallback(async (email, password) => {
     try {
-      setLoading(true); // Set loading at the start of the async operation
-      setError(null);
-      console.log('AuthProvider: signIn: Попытка входа для', email); // Add logging
-      const userRecord = await pbSignIn(email, password); // pbSignIn returns the record
-      console.log('AuthProvider: signIn: Вход успешен', userRecord); // Add logging
-      // authStore.onChange listener will handle setting currentUser and userProfile
-      return userRecord;
-    } catch (error) {
-      console.error('AuthProvider: signIn: Ошибка входа:', error); // Add error logging
-      setError(error.message);
-      throw error;
-    } finally {
-      // Loading is handled by authStore.onChange after state update
-      // However, if authStore.onChange doesn't fire (e.g., invalid credentials),
-      // we need to ensure loading is set to false here.
-      // Let's add a small delay or check authStore state to avoid race conditions
-      // with the authStore.onChange listener. A simple finally block might conflict.
-      // A better approach is to rely solely on authStore.onChange for loading state
-      // after the initial check, but ensure errors are caught and displayed.
-      // For now, let's ensure error is set and the UI reacts to it.
-      // setLoading(false); // Removed to rely on authStore.onChange
-      console.log('AuthProvider: signIn: Operation finished.'); // Add logging
+      clearError();
+      const authData = await pb.collection('users').authWithPassword(email, password);
+      setUser(authData.record);
+      const profile = await pb.collection('users').getOne(authData.record.id);
+      setUserProfile(profile);
+      return profile;
+    } catch (err) {
+      handleError(err);
+      throw err;
     }
-  };
+  }, [clearError, handleError]);
 
-  const signUp = async (email, password, username) => {
+  // Обработчик выхода
+  const logout = useCallback(() => {
     try {
-      setLoading(true); // Set loading at the start of the async operation
-      setError(null);
-      console.log('AuthProvider: signUp: Попытка регистрации для', email); // Add logging
-      const { user, profile } = await pbSignUp(email, password, username); // pbSignUp returns user and profile
-      console.log('AuthProvider: signUp: Регистрация успешна', { user, profile }); // Add logging
-      // authStore.onChange listener will handle setting currentUser and userProfile
-      return { user, profile };
-    } catch (error) {
-      console.error('AuthProvider: signUp: Ошибка регистрации:', error); // Add error logging
-      setError(error.message);
-      throw error;
-    } finally {
-      // Loading is handled by authStore.onChange after state update
-      // setLoading(false); // Removed to rely on authStore.onChange
-      console.log('AuthProvider: signUp: Operation finished.'); // Add logging
+      clearError();
+      pb.authStore.clear();
+      setUser(null);
+      setUserProfile(null);
+    } catch (err) {
+      handleError(err);
     }
-  };
+  }, [clearError, handleError]);
 
-  const signOut = async () => {
+  // Обновление профиля
+  const updateProfile = useCallback(async (data) => {
     try {
-      setLoading(true); // Set loading at the start of the async operation
-      setError(null);
-      console.log('AuthProvider: signOut: Попытка выхода'); // Add logging
-      await pbSignOut();
-      console.log('AuthProvider: signOut: Выход успешен'); // Add logging
-      // authStore.onChange listener will handle setting currentUser and userProfile
-    } catch (error) {
-      console.error('AuthProvider: signOut: Ошибка выхода:', error); // Add error logging
-      setError(error.message);
-      throw error;
-    } finally {
-      // Loading is handled by authStore.onChange after state update
-      // setLoading(false); // Removed to rely on authStore.onChange
-      console.log('AuthProvider: signOut: Operation finished.'); // Add logging
+      clearError();
+      if (!user) throw new Error('Пользователь не авторизован');
+      
+      const updatedProfile = await pb.collection('users').update(user.id, data);
+      setUserProfile(updatedProfile);
+      return updatedProfile;
+    } catch (err) {
+      handleError(err);
+      throw err;
     }
-  };
+  }, [user, clearError, handleError]);
 
-  // New function for password reset request
-  const requestPasswordReset = async (email) => {
+  // Обработчик регистрации
+  const signUp = useCallback(async (login, password, email = null) => {
     try {
-      setLoading(true);
-      setError(null);
-      console.log('AuthProvider: requestPasswordReset: Попытка сброса пароля для', email); // Add logging
-      await pbRequestPasswordReset(email);
-      console.log('AuthProvider: requestPasswordReset: Запрос на сброс пароля отправлен'); // Add logging
-      return true; // Indicate success
-    } catch (error) {
-      console.error('AuthProvider: requestPasswordReset: Ошибка при запросе сброса пароля:', error); // Add error logging
-      setError(error.message);
-      throw error;
-    } finally {
-      setLoading(false);
-      console.log('AuthProvider: requestPasswordReset: Operation finished.'); // Add logging
+      clearError();
+      const result = await pbSignUp(login, password, email);
+      setUser(result.user);
+      setUserProfile(result.profile);
+      return result;
+    } catch (err) {
+      handleError(err);
+      throw err;
     }
-  };
+  }, [clearError, handleError]);
 
-
-  // Use useMemo for context value
-  const value = useMemo(() => ({
-    user: currentUser, // This is the PocketBase user record
-    userProfile, // This is the same as user in PocketBase context
+  const value = {
+    user,
+    userProfile: cachedProfile || userProfile,
     loading,
-    error,
-    signIn, // Include signIn in the context value
-    signUp,
-    signOut,
     isInitialized,
-    refreshUserProfile, // Add refresh function to context
-    requestPasswordReset, // Add password reset function
-  }), [currentUser, userProfile, loading, error, isInitialized, signIn, signUp, signOut, refreshUserProfile, requestPasswordReset]); // Add functions to dependency array
+    error,
+    login,
+    logout,
+    signUp,
+    updateProfile,
+    refetchProfile
+  };
 
-  console.log('AuthProvider: Rendering with value:', { user: !!value.user, userProfile: !!value.userProfile, loading: value.loading, error: !!value.error, isInitialized: value.isInitialized }); // Add logging
-
-  // Render loading or error state until initialized
-  // Removed the error display block here to rely on pages displaying errors from context
-  // We still show a loading spinner if not initialized or loading
-  if (loading || !isInitialized) {
-     console.log('AuthProvider: Рендеринг состояния загрузки/инициализации...'); // Add logging
-     return (
-        <div className="min-h-screen flex items-center justify-center bg-campfire-dark">
-           <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-campfire-amber"></div>
-        </div>
-     );
-  }
-
-
-  // Render children only when initialized and loading is false
-  console.log('AuthProvider: Инициализация завершена. Рендеринг детей.'); // Add logging
   return (
     <AuthContext.Provider value={value}>
       {children}
diff --git a/src/contexts/ClickSparkContext.jsx b/src/contexts/ClickSparkContext.jsx
index 6193784..4732d92 100644
--- a/src/contexts/ClickSparkContext.jsx
+++ b/src/contexts/ClickSparkContext.jsx
@@ -1,26 +1,26 @@
-import React, { createContext, useContext, useCallback, useRef } from 'react';
+import React, { createContext, useContext, useRef, useCallback } from 'react';
 import ClickSpark from '../components/reactbits/Animations/ClickSpark/ClickSpark';
 
 const ClickSparkContext = createContext(null);
 
-export const useClickSpark = () => {
-  const context = useContext(ClickSparkContext);
-  if (!context) {
-    throw new Error('useClickSpark must be used within a ClickSparkProvider');
-  }
-  return context;
-};
-
 export const ClickSparkProvider = ({ children }) => {
   const clickSparkRef = useRef(null);
 
   const addSpark = useCallback((x, y) => {
-    console.log('[ClickSpark] Добавление искры:', x, y);
     if (clickSparkRef.current) {
       clickSparkRef.current.addSpark(x, y);
     }
   }, []);
 
+  React.useEffect(() => {
+    const handleClick = (e) => {
+      addSpark(e.clientX, e.clientY);
+    };
+
+    document.addEventListener('click', handleClick);
+    return () => document.removeEventListener('click', handleClick);
+  }, [addSpark]);
+
   return (
     <ClickSparkContext.Provider value={{ addSpark }}>
       <ClickSpark
@@ -37,4 +37,12 @@ export const ClickSparkProvider = ({ children }) => {
       </ClickSpark>
     </ClickSparkContext.Provider>
   );
+};
+
+export const useClickSpark = () => {
+  const context = useContext(ClickSparkContext);
+  if (!context) {
+    throw new Error('useClickSpark должен использоваться внутри ClickSparkProvider');
+  }
+  return context;
 }; 
\ No newline at end of file
diff --git a/src/contexts/MediaContext.jsx b/src/contexts/MediaContext.jsx
index 186bd44..ceda438 100644
--- a/src/contexts/MediaContext.jsx
+++ b/src/contexts/MediaContext.jsx
@@ -1,72 +1,104 @@
-import React, { createContext, useContext, useState } from 'react';
-import { createMedia, validateMediaData, formatMediaData } from '../services/pocketbaseService'; // Import from pocketbaseService, including validation/formatting
+import React, { createContext, useContext, useState, useCallback } from 'react';
+import { createMedia, validateMediaData, formatMediaData, pb } from '../services/pocketbaseService'; // Import from pocketbaseService, including validation/formatting
+import { useCache } from '../hooks/useCache';
+import { useErrorBoundary } from '../hooks/useErrorBoundary';
 
-const MediaContext = createContext();
-
-export const useMedia = () => {
-  const context = useContext(MediaContext);
-  if (!context) {
-    throw new Error('useMedia must be used within a MediaProvider');
-  }
-  return context;
-};
+const MediaContext = createContext(null);
 
 export const MediaProvider = ({ children }) => {
-  // Removed searchResults and selectedMedia states as search/details logic is likely handled elsewhere now
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState(null);
+  const [selectedMedia, setSelectedMedia] = useState(null);
+  const { error, handleError, clearError } = useErrorBoundary();
 
-  // Removed handleSearch and handleSelectMedia as they likely relied on the removed mediaService functionality
-  // If external search/details is needed, this logic will need to be reimplemented using a different service/API.
-
-  const handleCreateMedia = async (mediaData) => {
-    try {
-      setLoading(true);
-      setError(null);
-
-      console.log('MediaContext: Попытка создания медиа:', mediaData);
-
-      // Валидация данных (теперь из pocketbaseService)
-      const errors = validateMediaData(mediaData);
-      if (errors.length > 0) {
-        console.error('MediaContext: Ошибки валидации:', errors);
-        throw new Error('Ошибки валидации:\n' + errors.join('\n'));
+  // Кэширование медиа-контента
+  const { data: mediaList, refetch: refetchMedia } = useCache(
+    'media_list',
+    async () => {
+      try {
+        const records = await pb.collection('media').getFullList({
+          sort: '-created',
+          expand: 'genres,seasons'
+        });
+        return records;
+      } catch (err) {
+        handleError(err);
+        return [];
       }
-      console.log('MediaContext: Валидация данных успешна.');
-
-
-      // Форматирование данных (теперь из pocketbaseService)
-      const formattedData = formatMediaData(mediaData);
-      console.log('MediaContext: Данные отформатированы для PocketBase:', formattedData);
-
-
-      // Создание медиа через PocketBase
-      const newMedia = await createMedia(formattedData);
-      console.log('MediaContext: Медиа успешно создано:', newMedia);
-      return newMedia;
-    } catch (error) {
-      console.error('MediaContext: Ошибка при создании медиа:', error);
-      // PocketBase errors might have a response structure
-      if (error.response && error.response.data) {
-         console.error('MediaContext: PocketBase Response data:', error.response.data);
-         // Attempt to extract specific error messages from PocketBase response
-         const pbErrors = Object.values(error.response.data).map(err => err.message).join('\n');
-         setError('Ошибка при создании медиа:\n' + pbErrors || error.message || 'Неизвестная ошибка');
-      } else {
-         setError(error.message || 'Ошибка при создании медиа');
-      }
-      throw error; // Re-throw to allow calling component to handle
-    } finally {
-      setLoading(false);
+    },
+    {
+      expiry: 5 * 60 * 1000, // 5 минут
     }
-  };
+  );
+
+  // Получение медиа по ID
+  const getMediaById = useCallback(async (id) => {
+    try {
+      clearError();
+      const media = await pb.collection('media').getOne(id, {
+        expand: 'genres,seasons,ratings'
+      });
+      return media;
+    } catch (err) {
+      handleError(err);
+      return null;
+    }
+  }, [clearError, handleError]);
+
+  // Поиск медиа
+  const searchMedia = useCallback(async (query) => {
+    try {
+      clearError();
+      const records = await pb.collection('media').getFullList({
+        filter: `title ~ "${query}" || description ~ "${query}"`,
+        expand: 'genres'
+      });
+      return records;
+    } catch (err) {
+      handleError(err);
+      return [];
+    }
+  }, [clearError, handleError]);
+
+  // Фильтрация медиа
+  const filterMedia = useCallback(async (filters) => {
+    try {
+      clearError();
+      let filterString = '';
+      
+      if (filters.genre) {
+        filterString += `genres ?~ "${filters.genre}"`;
+      }
+      
+      if (filters.year) {
+        filterString += filterString ? ' && ' : '';
+        filterString += `year = ${filters.year}`;
+      }
+      
+      if (filters.type) {
+        filterString += filterString ? ' && ' : '';
+        filterString += `type = "${filters.type}"`;
+      }
+
+      const records = await pb.collection('media').getFullList({
+        filter: filterString,
+        expand: 'genres'
+      });
+      
+      return records;
+    } catch (err) {
+      handleError(err);
+      return [];
+    }
+  }, [clearError, handleError]);
 
   const value = {
-    // Removed searchResults, selectedMedia
-    loading,
+    mediaList,
+    selectedMedia,
     error,
-    // Removed handleSearch, handleSelectMedia
-    handleCreateMedia
+    setSelectedMedia,
+    getMediaById,
+    searchMedia,
+    filterMedia,
+    refetchMedia
   };
 
   return (
@@ -75,3 +107,11 @@ export const MediaProvider = ({ children }) => {
     </MediaContext.Provider>
   );
 };
+
+export const useMedia = () => {
+  const context = useContext(MediaContext);
+  if (!context) {
+    throw new Error('useMedia должен использоваться внутри MediaProvider');
+  }
+  return context;
+};
diff --git a/src/contexts/ProfileActionsContext.jsx b/src/contexts/ProfileActionsContext.jsx
index b8b2598..73d3854 100644
--- a/src/contexts/ProfileActionsContext.jsx
+++ b/src/contexts/ProfileActionsContext.jsx
@@ -1,20 +1,70 @@
 import React, { createContext, useContext, useState, useCallback } from 'react';
+import { pb } from '../services/pocketbaseService';
+import { useErrorBoundary } from '../hooks/useErrorBoundary';
 
 const ProfileActionsContext = createContext(null);
 
 export const ProfileActionsProvider = ({ children }) => {
-  const [shouldOpenEditModal, setShouldOpenEditModal] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const { error, handleError, clearError } = useErrorBoundary();
 
-  const triggerEditModal = useCallback(() => {
-    setShouldOpenEditModal(true);
-  }, []);
+  // Обновление профиля
+  const updateProfile = useCallback(async (userId, data) => {
+    try {
+      setLoading(true);
+      clearError();
+      const updatedProfile = await pb.collection('users').update(userId, data);
+      return updatedProfile;
+    } catch (err) {
+      handleError(err);
+      throw err;
+    } finally {
+      setLoading(false);
+    }
+  }, [clearError, handleError]);
 
-  const resetEditModalTrigger = useCallback(() => {
-    setShouldOpenEditModal(false);
-  }, []);
+  // Обновление аватара
+  const updateAvatar = useCallback(async (userId, file) => {
+    try {
+      setLoading(true);
+      clearError();
+      const formData = new FormData();
+      formData.append('avatar', file);
+      const updatedProfile = await pb.collection('users').update(userId, formData);
+      return updatedProfile;
+    } catch (err) {
+      handleError(err);
+      throw err;
+    } finally {
+      setLoading(false);
+    }
+  }, [clearError, handleError]);
+
+  // Обновление настроек уведомлений
+  const updateNotificationSettings = useCallback(async (userId, settings) => {
+    try {
+      setLoading(true);
+      clearError();
+      const updatedSettings = await pb.collection('notification_settings').update(userId, settings);
+      return updatedSettings;
+    } catch (err) {
+      handleError(err);
+      throw err;
+    } finally {
+      setLoading(false);
+    }
+  }, [clearError, handleError]);
+
+  const value = {
+    loading,
+    error,
+    updateProfile,
+    updateAvatar,
+    updateNotificationSettings
+  };
 
   return (
-    <ProfileActionsContext.Provider value={{ shouldOpenEditModal, triggerEditModal, resetEditModalTrigger }}>
+    <ProfileActionsContext.Provider value={value}>
       {children}
     </ProfileActionsContext.Provider>
   );
@@ -23,14 +73,7 @@ export const ProfileActionsProvider = ({ children }) => {
 export const useProfileActions = () => {
   const context = useContext(ProfileActionsContext);
   if (!context) {
-    // This check is important. If useProfileActions is called outside the provider,
-    // it indicates a structural issue in the component tree.
-    // However, in this specific case, the Header is outside the ProfilePage route,
-    // so we need to handle the case where the context is null gracefully in the Header.
-    // We'll return null or undefined from the hook if context is not available.
-    // The components using the hook must check for null/undefined.
-    // console.warn('useProfileActions must be used within a ProfileActionsProvider');
-    return null; // Return null if context is not available
+    throw new Error('useProfileActions должен использоваться внутри ProfileActionsProvider');
   }
   return context;
 };
diff --git a/src/hooks/useCache.js b/src/hooks/useCache.js
new file mode 100644
index 0000000..9376211
--- /dev/null
+++ b/src/hooks/useCache.js
@@ -0,0 +1,86 @@
+import { useState, useEffect, useCallback } from 'react';
+
+const CACHE_EXPIRY = 5 * 60 * 1000; // 5 минут
+
+const cache = new Map();
+
+export const useCache = (key, fetchFn, options = {}) => {
+  const {
+    expiry = CACHE_EXPIRY,
+    dependencies = [],
+    skipCache = false
+  } = options;
+
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  const fetchData = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+
+      // Проверяем кэш
+      if (!skipCache && cache.has(key)) {
+        const cachedData = cache.get(key);
+        if (Date.now() - cachedData.timestamp < expiry) {
+          setData(cachedData.data);
+          setLoading(false);
+          return;
+        }
+      }
+
+      // Если нет в кэше или кэш устарел, делаем запрос
+      const result = await fetchFn();
+      
+      // Сохраняем в кэш
+      if (!skipCache) {
+        cache.set(key, {
+          data: result,
+          timestamp: Date.now()
+        });
+      }
+
+      setData(result);
+    } catch (err) {
+      setError(err);
+      console.error('Cache Error:', err);
+    } finally {
+      setLoading(false);
+    }
+  }, [key, fetchFn, expiry, skipCache, ...dependencies]);
+
+  // Очистка устаревших данных из кэша
+  useEffect(() => {
+    const cleanup = () => {
+      const now = Date.now();
+      for (const [cacheKey, value] of cache.entries()) {
+        if (now - value.timestamp > expiry) {
+          cache.delete(cacheKey);
+        }
+      }
+    };
+
+    const interval = setInterval(cleanup, expiry);
+    return () => clearInterval(interval);
+  }, [expiry]);
+
+  // Очистка конкретного ключа из кэша
+  const clearCache = useCallback((cacheKey = key) => {
+    cache.delete(cacheKey);
+  }, [key]);
+
+  // Очистка всего кэша
+  const clearAllCache = useCallback(() => {
+    cache.clear();
+  }, []);
+
+  return {
+    data,
+    loading,
+    error,
+    refetch: fetchData,
+    clearCache,
+    clearAllCache
+  };
+}; 
\ No newline at end of file
diff --git a/src/hooks/useErrorBoundary.jsx b/src/hooks/useErrorBoundary.jsx
new file mode 100644
index 0000000..ebb9214
--- /dev/null
+++ b/src/hooks/useErrorBoundary.jsx
@@ -0,0 +1,53 @@
+import { useState, useCallback } from 'react';
+
+export const useErrorBoundary = () => {
+  const [error, setError] = useState(null);
+
+  const handleError = useCallback((error) => {
+    console.error('Context Error:', error);
+    setError(error);
+  }, []);
+
+  const clearError = useCallback(() => {
+    setError(null);
+  }, []);
+
+  return {
+    error,
+    handleError,
+    clearError,
+    hasError: error !== null
+  };
+};
+
+export const withErrorBoundary = (WrappedComponent) => {
+  return function WithErrorBoundary(props) {
+    const { error, handleError, clearError, hasError } = useErrorBoundary();
+
+    if (hasError) {
+      return (
+        <div className="min-h-screen bg-campfire-dark pt-20 flex justify-center items-center">
+          <div className="bg-status-error/20 text-status-error p-4 rounded-lg text-center">
+            <h2 className="text-xl font-bold mb-2">Произошла ошибка</h2>
+            <p>{error?.message || 'Неизвестная ошибка'}</p>
+            <button
+              onClick={clearError}
+              className="mt-4 px-4 py-2 bg-campfire-amber text-campfire-dark rounded-lg hover:bg-campfire-amber/80 transition-colors"
+            >
+              Попробовать снова
+            </button>
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <WrappedComponent
+        {...props}
+        error={error}
+        handleError={handleError}
+        clearError={clearError}
+      />
+    );
+  };
+}; 
\ No newline at end of file
diff --git a/src/main.jsx b/src/main.jsx
index 56e61de..0eb18a9 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,20 +1,16 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
+import React from 'react';
+import ReactDOM from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
-import App from './App.jsx'
-import './index.css'
+import App from './App';
+import './index.css';
 import { AuthProvider } from './contexts/AuthContext'; // Import AuthProvider
 
-console.log('main.jsx: Приложение инициализируется');
-
-createRoot(document.getElementById('root')).render(
-  <StrictMode>
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
     <BrowserRouter>
       <AuthProvider> {/* Wrap App with AuthProvider */}
         <App />
       </AuthProvider>
     </BrowserRouter>
-  </StrictMode>,
-)
-
-console.log('main.jsx: Приложение отрендерено');
+  </React.StrictMode>
+);
diff --git a/src/mobile/App.jsx b/src/mobile/App.jsx
new file mode 100644
index 0000000..4374e83
--- /dev/null
+++ b/src/mobile/App.jsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import MobileRoutes from './routes';
+
+const MobileApp = () => {
+  return <MobileRoutes />;
+};
+
+export default MobileApp; 
\ No newline at end of file
diff --git a/src/mobile/components/AchievementsModal.jsx b/src/mobile/components/AchievementsModal.jsx
new file mode 100644
index 0000000..2c68b09
--- /dev/null
+++ b/src/mobile/components/AchievementsModal.jsx
@@ -0,0 +1,75 @@
+import React from 'react';
+import Modal from '../../components/common/Modal';
+import { FaTrophy, FaFire } from 'react-icons/fa';
+import * as FaIcons from 'react-icons/fa';
+import * as MdIcons from 'react-icons/md';
+import * as IoIcons from 'react-icons/io5';
+import * as BiIcons from 'react-icons/bi';
+import * as HiIcons from 'react-icons/hi';
+import * as RiIcons from 'react-icons/ri';
+
+const AchievementsModal = ({ isOpen, onClose, userAchievements }) => {
+  const getIconComponent = (iconName) => {
+    if (!iconName) return FaTrophy;
+    
+    const prefix = iconName.substring(0, 2).toLowerCase();
+    switch (prefix) {
+      case 'fa': return FaIcons[iconName] || FaTrophy;
+      case 'md': return MdIcons[iconName] || FaTrophy;
+      case 'io': return IoIcons[iconName] || FaTrophy;
+      case 'bi': return BiIcons[iconName] || FaTrophy;
+      case 'hi': return HiIcons[iconName] || FaTrophy;
+      case 'ri': return RiIcons[iconName] || FaTrophy;
+      default: return FaTrophy;
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      title="Достижения"
+    >
+      <div className="space-y-4">
+        {userAchievements.length > 0 ? (
+          userAchievements.map((achievement) => {
+            const IconComponent = getIconComponent(achievement.icon);
+
+            return (
+              <div
+                key={achievement.id}
+                className="bg-campfire-charcoal/20 backdrop-blur-md border border-campfire-ash/30 rounded-lg p-4"
+              >
+                <div className="flex items-center gap-4">
+                  <div className="w-12 h-12 rounded-lg bg-campfire-amber/10 flex items-center justify-center">
+                    <IconComponent className="w-6 h-6 text-campfire-amber" />
+                  </div>
+                  <div className="flex-1">
+                    <h3 className="text-campfire-light font-medium">
+                      {achievement.title}
+                    </h3>
+                    <p className="text-campfire-ash text-sm mt-1">
+                      {achievement.description}
+                    </p>
+                    {achievement.xp_reward > 0 && (
+                      <div className="flex items-center text-campfire-amber text-sm mt-2">
+                        <FaFire className="mr-1" />
+                        <span>+{achievement.xp_reward} XP</span>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
+            );
+          })
+        ) : (
+          <div className="text-center py-8 text-campfire-ash">
+            У вас пока нет достижений
+          </div>
+        )}
+      </div>
+    </Modal>
+  );
+};
+
+export default AchievementsModal; 
\ No newline at end of file
diff --git a/src/mobile/components/GridMotionMobile.jsx b/src/mobile/components/GridMotionMobile.jsx
new file mode 100644
index 0000000..0c65406
--- /dev/null
+++ b/src/mobile/components/GridMotionMobile.jsx
@@ -0,0 +1,112 @@
+import { useEffect, useRef } from 'react';
+import { gsap } from 'gsap';
+
+const GridMotionMobile = ({ items = [], gradientColor = 'rgba(251,191,36,0.08)' }) => {
+  const gridRef = useRef(null);
+  const rowRefs = useRef([]);
+  const touchXRef = useRef(window.innerWidth / 2);
+  const scrollYRef = useRef(window.scrollY);
+
+  // Вместо 4 рядов x 12 колонок:
+  const rows = 3; // например, 10 рядов
+  const cols = 3;  // например, 5 колонок
+  const totalItems = rows * cols;
+  const defaultItems = Array.from({ length: totalItems }, (_, index) => `Item ${index + 1}`);
+  const combinedItems = items.length > 0 ? items.slice(0, totalItems) : defaultItems;
+
+  useEffect(() => {
+    gsap.ticker.lagSmoothing(0);
+
+    const handleTouchMove = (e) => {
+      if (e.touches && e.touches.length > 0) {
+        touchXRef.current = e.touches[0].clientX;
+      }
+    };
+    const handleMouseMove = (e) => {
+      touchXRef.current = e.clientX;
+    };
+    const handleScroll = () => {
+      scrollYRef.current = window.scrollY;
+    };
+
+    const updateMotion = () => {
+      // Смещение по X зависит от прокрутки и от касания
+      const maxMoveAmount = 80;
+      const baseDuration = 0.2;
+      const inertiaFactors = [0.5, 0.3, 0.2, 0.1];
+      // scrollFactor: 0 (верх) → 1 (глубокий скролл)
+      const scrollFactor = Math.min(1, scrollYRef.current / 400);
+      rowRefs.current.forEach((row, index) => {
+        if (row) {
+          const direction = index % 2 === 0 ? 1 : -1;
+          // mouse/touch + scrollY
+          const moveAmount = (
+            ((touchXRef.current / window.innerWidth) * maxMoveAmount - maxMoveAmount / 2) * direction +
+            direction * scrollFactor * maxMoveAmount * 1.2
+          );
+          gsap.to(row, {
+            x: moveAmount,
+            duration: baseDuration + inertiaFactors[index % inertiaFactors.length],
+            ease: 'power3.out',
+            overwrite: 'auto',
+          });
+        }
+      });
+    };
+
+    const removeAnimationLoop = gsap.ticker.add(updateMotion);
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('touchmove', handleTouchMove);
+    window.addEventListener('scroll', handleScroll, { passive: true });
+
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('touchmove', handleTouchMove);
+      window.removeEventListener('scroll', handleScroll);
+      removeAnimationLoop();
+    };
+  }, []);
+
+  return (
+    <div ref={gridRef} className="h-full w-full overflow-hidden pointer-events-none select-none">
+      <section
+        className="w-full h-[800px] overflow-hidden relative flex items-center justify-center pt-16"
+      >
+        <div className="absolute inset-0 z-[1] bg-[url('../../../assets/noise.png')] bg-[length:180px] opacity-10"></div>
+        <div className={`gap-2 flex-none relative w-[120vw] h-[800px] grid grid-rows-${rows} grid-cols-1 rotate-[-6deg] origin-center z-[2]`}>
+          {[...Array(rows)].map((_, rowIndex) => (
+            <div
+              key={rowIndex}
+              className={`grid gap-2 grid-cols-${cols}`}
+              style={{ willChange: 'transform, filter' }}
+              ref={(el) => (rowRefs.current[rowIndex] = el)}
+            >
+              {[...Array(cols)].map((_, itemIndex) => {
+                const content = combinedItems[rowIndex * cols + itemIndex];
+                return (
+                  <div key={itemIndex} className="relative">
+                    <div
+                      className="relative w-full h-full overflow-hidden rounded-[8px] bg-[#181818] opacity-70 flex items-center justify-center text-white text-[1rem] shadow-sm"
+                    >
+                      {typeof content === 'string' && content.startsWith('http') ? (
+                        <div
+                          className="w-full h-full bg-cover bg-center absolute top-0 left-0"
+                          style={{ backgroundImage: `url(${content})` }}
+                        ></div>
+                      ) : (
+                        <div className="p-2 text-center z-[1] opacity-60">{content}</div>
+                      )}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          ))}
+        </div>
+        <div className="relative w-full h-full top-0 left-0 pointer-events-none"></div>
+      </section>
+    </div>
+  );
+};
+
+export default GridMotionMobile; 
\ No newline at end of file
diff --git a/src/mobile/components/MobileDock.jsx b/src/mobile/components/MobileDock.jsx
new file mode 100644
index 0000000..49df6f3
--- /dev/null
+++ b/src/mobile/components/MobileDock.jsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import Dock from '../../components/reactbits/Components/Dock/Dock';
+import { FaHome, FaList, FaChartBar, FaUser } from 'react-icons/fa';
+import MobileLogo from './MobileLogo';
+import { useAuth } from '../../contexts/AuthContext';
+
+const MobileDock = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { userProfile } = useAuth();
+
+  // Формируем navItems динамически, чтобы профиль был с login
+  const navItems = [
+    {
+      icon: <FaHome className="w-6 h-6" />,
+      path: '/',
+    },
+    {
+      icon: <FaList className="w-6 h-6" />,
+      path: '/catalog',
+    },
+    {
+      icon: <FaChartBar className="w-6 h-6" />,
+      path: '/rating',
+    },
+    {
+      icon: <FaUser className="w-6 h-6" />,
+      path: userProfile ? `/profile/${userProfile.login}` : '/auth/login',
+    },
+  ];
+
+  const items = navItems.map((item) => ({
+    ...item,
+    onClick: () => navigate(item.path),
+    className:
+      location.pathname === item.path || (item.path.startsWith('/profile') && location.pathname.startsWith('/profile'))
+        ? 'border-campfire-amber text-campfire-amber bg-campfire-charcoal/80'
+        : 'border-campfire-ash/30 text-campfire-ash bg-campfire-charcoal/40',
+    isRectangular: false,
+  }));
+
+  return (
+    <div className="w-full max-w-md mx-auto px-2 flex items-center gap-2 justify-center">
+      <Dock
+        items={items}
+        className="w-full justify-between bg-campfire-charcoal/40"
+        panelHeight={60}
+        dockHeight={90}
+        baseItemSize={44}
+        magnification={60}
+        distance={120}
+      />
+    </div>
+  );
+};
+
+export default MobileDock; 
\ No newline at end of file
diff --git a/src/mobile/components/MobileLogo.jsx b/src/mobile/components/MobileLogo.jsx
new file mode 100644
index 0000000..de5e3a1
--- /dev/null
+++ b/src/mobile/components/MobileLogo.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+const MobileLogo = ({ small = false }) => (
+  <div className={`transition-all duration-300 select-none flex items-center justify-center ${small ? 'h-8' : 'h-16'}`} style={{ minHeight: small ? 32 : 64 }}>
+    <img
+      src="/logo.png"
+      alt="Campfire Logo"
+      className={small ? 'h-8 w-auto' : 'h-16 w-auto'}
+      style={{ objectFit: 'contain', filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.15))' }}
+      draggable={false}
+    />
+  </div>
+);
+
+export default MobileLogo; 
\ No newline at end of file
diff --git a/src/mobile/components/MobileMediaCard.jsx b/src/mobile/components/MobileMediaCard.jsx
new file mode 100644
index 0000000..7746022
--- /dev/null
+++ b/src/mobile/components/MobileMediaCard.jsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { getFileUrl } from '../../services/pocketbaseService';
+import { FaStar } from 'react-icons/fa';
+import { motion } from 'framer-motion';
+
+const MobileMediaCard = ({ media }) => {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      whileHover={{ y: -5 }}
+      className="bg-campfire-charcoal/20 backdrop-blur-md border border-campfire-ash/30 rounded-lg overflow-hidden"
+    >
+      <Link to={`/media/${media.path}`}>
+        <div className="relative aspect-[2/3]">
+          <img
+            src={getFileUrl(media, 'poster')}
+            alt={media.title}
+            className="w-full h-full object-cover"
+          />
+          <div className="absolute inset-0 bg-gradient-to-t from-campfire-dark via-transparent to-transparent"></div>
+          <div className="absolute bottom-0 left-0 right-0 p-3">
+            <h3 className="text-campfire-light font-semibold line-clamp-1">
+              {media.title}
+            </h3>
+            <div className="flex items-center text-campfire-amber mt-1">
+              <FaStar className="mr-1" />
+              <span>{media.average_rating?.toFixed(1) || '0.0'}</span>
+            </div>
+          </div>
+        </div>
+      </Link>
+    </motion.div>
+  );
+};
+
+export default MobileMediaCard; 
\ No newline at end of file
diff --git a/src/mobile/components/MobileMediaForm.jsx b/src/mobile/components/MobileMediaForm.jsx
new file mode 100644
index 0000000..e8f951b
--- /dev/null
+++ b/src/mobile/components/MobileMediaForm.jsx
@@ -0,0 +1,228 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { pb, getFileUrl } from '../../services/pocketbaseService';
+import { FaUpload, FaTrash } from 'react-icons/fa';
+import { motion } from 'framer-motion';
+
+const MobileMediaForm = () => {
+  const navigate = useNavigate();
+  const { path } = useParams();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [formData, setFormData] = useState({
+    title: '',
+    description: '',
+    type: 'movie',
+    poster: null,
+    characteristics: [
+      { name: 'Сюжет', value: 0 },
+      { name: 'Актерская игра', value: 0 },
+      { name: 'Визуальные эффекты', value: 0 },
+      { name: 'Звук', value: 0 },
+      { name: 'Музыка', value: 0 }
+    ],
+    seasons: []
+  });
+
+  useEffect(() => {
+    if (path) {
+      const fetchMedia = async () => {
+        try {
+          const media = await pb.collection('media').getFirstListItem(`path="${path}"`);
+          setFormData({
+            ...media,
+            poster: null
+          });
+        } catch (err) {
+          console.error('Error fetching media:', err);
+          setError('Не удалось загрузить данные');
+        }
+      };
+      fetchMedia();
+    }
+  }, [path]);
+
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: value
+    }));
+  };
+
+  const handleCharacteristicChange = (index, value) => {
+    const newCharacteristics = [...formData.characteristics];
+    newCharacteristics[index].value = parseInt(value);
+    setFormData(prev => ({
+      ...prev,
+      characteristics: newCharacteristics
+    }));
+  };
+
+  const handlePosterChange = async (e) => {
+    const file = e.target.files[0];
+    if (file) {
+      setFormData(prev => ({
+        ...prev,
+        poster: file
+      }));
+    }
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+
+    try {
+      const data = {
+        ...formData,
+        path: formData.path || formData.title.toLowerCase().replace(/[^a-z0-9]+/g, '-')
+      };
+
+      if (path) {
+        // Обновление существующего медиа
+        await pb.collection('media').update(path, data);
+      } else {
+        // Создание нового медиа
+        await pb.collection('media').create(data);
+      }
+
+      navigate(`/media/${data.path}`);
+    } catch (err) {
+      console.error('Error saving media:', err);
+      setError('Не удалось сохранить данные');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      className="min-h-screen bg-campfire-dark p-4"
+    >
+      <form onSubmit={handleSubmit} className="space-y-6">
+        <div>
+          <label className="block text-campfire-light mb-2">Название</label>
+          <input
+            type="text"
+            name="title"
+            value={formData.title}
+            onChange={handleInputChange}
+            className="w-full bg-campfire-charcoal/20 border border-campfire-ash/30 rounded-lg p-3 text-campfire-light"
+            required
+          />
+        </div>
+
+        <div>
+          <label className="block text-campfire-light mb-2">Описание</label>
+          <textarea
+            name="description"
+            value={formData.description}
+            onChange={handleInputChange}
+            className="w-full bg-campfire-charcoal/20 border border-campfire-ash/30 rounded-lg p-3 text-campfire-light h-32"
+            required
+          />
+        </div>
+
+        <div>
+          <label className="block text-campfire-light mb-2">Тип</label>
+          <select
+            name="type"
+            value={formData.type}
+            onChange={handleInputChange}
+            className="w-full bg-campfire-charcoal/20 border border-campfire-ash/30 rounded-lg p-3 text-campfire-light"
+          >
+            <option value="movie">Фильм</option>
+            <option value="series">Сериал</option>
+            <option value="game">Игра</option>
+            <option value="anime">Аниме</option>
+          </select>
+        </div>
+
+        <div>
+          <label className="block text-campfire-light mb-2">Постер</label>
+          <div className="flex items-center gap-4">
+            {formData.poster && (
+              <div className="relative w-24 h-36">
+                <img
+                  src={typeof formData.poster === 'string' ? getFileUrl(formData, 'poster') : URL.createObjectURL(formData.poster)}
+                  alt="Poster preview"
+                  className="w-full h-full object-cover rounded-lg"
+                />
+                <button
+                  type="button"
+                  onClick={() => setFormData(prev => ({ ...prev, poster: null }))}
+                  className="absolute -top-2 -right-2 w-6 h-6 bg-campfire-charcoal/80 rounded-full flex items-center justify-center text-campfire-light hover:text-campfire-amber"
+                >
+                  <FaTrash size={12} />
+                </button>
+              </div>
+            )}
+            <label className="flex-1">
+              <input
+                type="file"
+                accept="image/*"
+                onChange={handlePosterChange}
+                className="hidden"
+              />
+              <div className="flex items-center justify-center gap-2 px-4 py-3 bg-campfire-charcoal/20 border border-campfire-ash/30 rounded-lg text-campfire-light hover:bg-campfire-charcoal/30 cursor-pointer">
+                <FaUpload />
+                <span>Загрузить постер</span>
+              </div>
+            </label>
+          </div>
+        </div>
+
+        <div>
+          <label className="block text-campfire-light mb-2">Характеристики</label>
+          <div className="space-y-4">
+            {formData.characteristics.map((char, index) => (
+              <div key={char.name}>
+                <div className="flex justify-between items-center mb-2">
+                  <span className="text-campfire-light">{char.name}</span>
+                  <span className="text-campfire-amber">{char.value}/10</span>
+                </div>
+                <input
+                  type="range"
+                  min="0"
+                  max="10"
+                  value={char.value}
+                  onChange={(e) => handleCharacteristicChange(index, e.target.value)}
+                  className="w-full"
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {error && (
+          <div className="bg-status-error/20 text-status-error p-4 rounded-lg text-center">
+            {error}
+          </div>
+        )}
+
+        <div className="flex gap-4">
+          <button
+            type="button"
+            onClick={() => navigate(-1)}
+            className="flex-1 px-4 py-3 bg-campfire-charcoal/50 text-campfire-light border border-campfire-ash/30 rounded-lg hover:bg-campfire-charcoal/70 transition-colors"
+          >
+            Отмена
+          </button>
+          <button
+            type="submit"
+            disabled={loading}
+            className="flex-1 px-4 py-3 bg-campfire-amber text-campfire-dark rounded-lg hover:bg-campfire-amber/80 transition-colors disabled:opacity-50"
+          >
+            {loading ? 'Сохранение...' : path ? 'Сохранить' : 'Создать'}
+          </button>
+        </div>
+      </form>
+    </motion.div>
+  );
+};
+
+export default MobileMediaForm; 
\ No newline at end of file
diff --git a/src/mobile/components/MobileReviewForm.jsx b/src/mobile/components/MobileReviewForm.jsx
new file mode 100644
index 0000000..22ab5e7
--- /dev/null
+++ b/src/mobile/components/MobileReviewForm.jsx
@@ -0,0 +1,351 @@
+import React, { useState, useEffect } from 'react';
+import { createReview, updateReview } from '../../services/pocketbaseService';
+import { FaFire } from 'react-icons/fa';
+import RatingChart from '../../components/reviews/RatingChart';
+import FlameRatingInput from '../../components/reviews/FlameRatingInput';
+
+const watchedStatusLabels = {
+  not_watched: 'Не просмотрено',
+  watched: 'Просмотрено',
+};
+
+const completedStatusLabels = {
+  not_completed: 'Не пройдено',
+  completed: 'Пройдено',
+};
+
+function MobileReviewForm({ 
+  mediaId, 
+  seasonId, 
+  mediaType, 
+  progress_type,
+  onSubmit, 
+  onEdit, 
+  onDelete, 
+  characteristics = {}, 
+  existingReview, 
+  seasons = [], 
+  selectedSeasonId 
+}) {
+  const initialRatings = Object.keys(characteristics).reduce((acc, key) => {
+    acc[key] = 5;
+    return acc;
+  }, {});
+
+  const [ratings, setRatings] = useState(initialRatings);
+  const [content, setContent] = useState('');
+  const [hasSpoilers, setHasSpoilers] = useState(false);
+  const [progress, setProgress] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isEditing, setIsEditing] = useState(false);
+  const [formSeasonId, setFormSeasonId] = useState(selectedSeasonId);
+
+  const getProgressOptions = () => {
+    if (progress_type === 'hours') {
+      return null;
+    } else if (progress_type === 'watched') {
+      return watchedStatusLabels;
+    } else if (progress_type === 'completed') {
+      return completedStatusLabels;
+    }
+    return watchedStatusLabels;
+  };
+
+  const progressOptions = getProgressOptions();
+  const isProgressSelect = progressOptions !== null;
+  const supportsSeasons = mediaType === 'tv' || mediaType === 'anime';
+
+  useEffect(() => {
+    if (existingReview) {
+      const populatedRatings = Object.keys(characteristics).reduce((acc, key) => {
+        acc[key] = typeof existingReview.ratings?.[key] === 'number' ? existingReview.ratings[key] : 5;
+        return acc;
+      }, {});
+
+      setRatings(populatedRatings);
+      setContent(existingReview.content || '');
+      setHasSpoilers(existingReview.has_spoilers ?? false);
+      setProgress(existingReview.progress || '');
+      setFormSeasonId(existingReview.season_id || null);
+      setIsEditing(false);
+    } else {
+      const newInitialRatings = Object.keys(characteristics).reduce((acc, key) => {
+        acc[key] = 5;
+        return acc;
+      }, {});
+      setRatings(newInitialRatings);
+      setContent('');
+      setHasSpoilers(false);
+      if (isProgressSelect) {
+        setProgress(Object.keys(progressOptions)[0] || '');
+      } else {
+        setProgress('');
+      }
+      setFormSeasonId(selectedSeasonId);
+      setIsEditing(false);
+    }
+  }, [characteristics, existingReview, progress_type, isProgressSelect, selectedSeasonId, seasons]);
+
+  const handleRatingChange = (category, value) => {
+    const newRatings = {
+      ...ratings,
+      [category]: value
+    };
+    
+    const validRatings = Object.values(newRatings).filter(rating => typeof rating === 'number');
+    const overallRating = validRatings.length > 0 
+      ? validRatings.reduce((sum, rating) => sum + rating, 0) / validRatings.length 
+      : 0;
+    
+    setRatings({
+      ...newRatings,
+      overall: overallRating
+    });
+  };
+
+  const handleProgressChange = (value) => {
+    setProgress(value);
+  };
+
+  const handleFormSeasonChange = (e) => {
+    const value = e.target.value === '' ? null : e.target.value;
+    setFormSeasonId(value);
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsSubmitting(true);
+
+    try {
+      const validRatings = Object.entries(ratings)
+        .filter(([key, value]) => key !== 'overall' && typeof value === 'number');
+      const overallRating = validRatings.length > 0 
+        ? validRatings.reduce((sum, [_, rating]) => sum + rating, 0) / validRatings.length 
+        : 0;
+
+      const reviewData = {
+        media_id: mediaId,
+        season_id: formSeasonId,
+        media_type: mediaType,
+        content,
+        ratings: {
+          ...ratings,
+          overall: overallRating
+        },
+        overall_rating: overallRating,
+        has_spoilers: hasSpoilers,
+        progress: progress,
+        progress_type: progress_type
+      };
+
+      if (existingReview && isEditing) {
+        await onEdit(existingReview.id, reviewData);
+        setIsEditing(false);
+      } else {
+        await onSubmit(reviewData);
+      }
+    } catch (error) {
+      console.error('Error submitting review:', error);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (window.confirm('Вы уверены, что хотите удалить эту рецензию?')) {
+      setIsSubmitting(true);
+      try {
+        await onDelete(existingReview.id, mediaId);
+      } catch (error) {
+        console.error('Error deleting review:', error);
+      } finally {
+        setIsSubmitting(false);
+      }
+    }
+  };
+
+  const isFormValid = content.trim() !== '' &&
+    Object.keys(characteristics).length > 0 &&
+    Object.keys(characteristics).every(key =>
+      typeof ratings[key] === 'number' && ratings[key] >= 1 && ratings[key] <= 10
+    ) &&
+    (isProgressSelect ? Object.keys(progressOptions).includes(progress) : progress.trim() !== '') &&
+    (supportsSeasons ? (formSeasonId === null || seasons.some(s => s.id === formSeasonId)) : true);
+
+  if (existingReview && !isEditing) {
+    return (
+      <div className="bg-campfire-charcoal/20 backdrop-blur-md border border-campfire-ash/30 rounded-xl p-4 text-center">
+        <p className="text-campfire-light mb-4">Вы уже написали рецензию на это произведение.</p>
+        <div className="flex justify-center space-x-4">
+          <button
+            onClick={() => setIsEditing(true)}
+            className="btn-secondary flex items-center"
+            disabled={isSubmitting}
+          >
+            Редактировать
+          </button>
+          <button
+            onClick={handleDelete}
+            className="btn-danger flex items-center text-white"
+            disabled={isSubmitting}
+          >
+            Удалить
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-campfire-charcoal/20 backdrop-blur-md border border-campfire-ash/30 rounded-xl p-4">
+      <form onSubmit={handleSubmit}>
+        <div className="space-y-6">
+          {supportsSeasons && seasons.length > 0 && (
+            <div>
+              <label htmlFor="season-select" className="block mb-2 text-campfire-light">
+                Сезон <span className="text-red-500">*</span>
+              </label>
+              <select
+                id="season-select"
+                value={formSeasonId === null ? '' : formSeasonId}
+                onChange={handleFormSeasonChange}
+                className="w-full p-3 bg-campfire-dark border border-campfire-ash/30 rounded-xl text-campfire-light"
+                required={supportsSeasons && formSeasonId === undefined}
+              >
+                <option value="">Общее</option>
+                {seasons.map(season => (
+                  <option key={season.id} value={season.id}>
+                    Сезон {season.season_number} {season.title ? ` - ${season.title}` : ''}
+                  </option>
+                ))}
+              </select>
+            </div>
+          )}
+
+          <div>
+            <label className="block mb-2 text-campfire-light">
+              {progress_type === 'hours'
+                ? 'Часов проведено'
+                : progress_type === 'watched'
+                  ? 'Статус просмотра'
+                  : progress_type === 'completed'
+                    ? 'Статус прохождения'
+                    : 'Прогресс'
+              } <span className="text-red-500">*</span>
+            </label>
+            {isProgressSelect ? (
+              <div className="flex rounded-xl overflow-hidden border border-campfire-ash/30">
+                {Object.entries(progressOptions).map(([key, label]) => (
+                  <button
+                    key={key}
+                    type="button"
+                    onClick={() => handleProgressChange(key)}
+                    className={`flex-1 text-center py-3 text-sm font-medium ${
+                      progress === key
+                        ? 'bg-campfire-amber text-campfire-dark'
+                        : 'bg-campfire-dark text-campfire-ash'
+                    }`}
+                  >
+                    {label}
+                  </button>
+                ))}
+              </div>
+            ) : (
+              <input
+                type="number"
+                min="0"
+                step="0.5"
+                placeholder="Введите количество часов..."
+                value={progress}
+                onChange={(e) => handleProgressChange(e.target.value)}
+                className="w-full p-3 bg-campfire-dark border border-campfire-ash/30 rounded-xl text-campfire-light"
+                required
+              />
+            )}
+          </div>
+
+          <div className="space-y-4">
+            {Object.entries(characteristics).map(([key, label]) => (
+              <div key={key} className="space-y-2">
+                <div className="flex justify-between items-center mb-1">
+                  <label className="block text-sm font-medium text-campfire-light">{label}</label>
+                  <span className="flex items-center text-campfire-amber font-bold text-lg">
+                    <FaFire className="mr-1 text-base" />
+                    {ratings[key] !== undefined ? ratings[key] : 5}
+                  </span>
+                </div>
+                <FlameRatingInput
+                  value={ratings[key] !== undefined ? ratings[key] : 5}
+                  onChange={(value) => handleRatingChange(key, value)}
+                />
+              </div>
+            ))}
+          </div>
+
+          <div>
+            <label className="block mb-2 text-campfire-light text-sm font-medium">
+              Ваша рецензия <span className="text-red-500">*</span>
+            </label>
+            <textarea
+              value={content}
+              onChange={(e) => setContent(e.target.value)}
+              placeholder="Поделитесь своими мыслями об этом произведении..."
+              className="w-full p-3 bg-campfire-dark border border-campfire-ash/30 rounded-xl text-campfire-light min-h-[200px] resize-y"
+              required
+            />
+          </div>
+
+          <div className="flex items-center">
+            <input
+              type="checkbox"
+              id="spoiler-check"
+              checked={hasSpoilers}
+              onChange={(e) => setHasSpoilers(e.target.checked)}
+              className="w-4 h-4 text-campfire-amber bg-campfire-dark border-campfire-ash rounded focus:ring-campfire-amber focus:ring-2"
+            />
+            <label htmlFor="spoiler-check" className="ml-2 text-campfire-light text-sm">
+              Эта рецензия содержит спойлеры
+            </label>
+          </div>
+
+          <div>
+            <p className="text-center text-campfire-light mb-4 font-semibold">Предварительный просмотр вашей оценки</p>
+            <RatingChart
+              ratings={Object.entries(ratings).reduce((acc, [key, value]) => {
+                if (characteristics.hasOwnProperty(key) && typeof value === 'number' && value >= 1 && value <= 10) {
+                  acc[key] = value;
+                }
+                return acc;
+              }, {})}
+              labels={characteristics}
+              size="medium"
+            />
+          </div>
+        </div>
+
+        <div className="flex justify-end mt-6">
+          <button
+            type="submit"
+            disabled={isSubmitting || !isFormValid}
+            className="btn-primary disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {isSubmitting ? (existingReview ? 'Сохранение...' : 'Отправка...') : (existingReview ? 'Сохранить изменения' : 'Отправить рецензию')}
+          </button>
+        </div>
+
+        {!isFormValid && (
+          <p className="text-status-error text-sm mt-2 text-right">
+            Пожалуйста, заполните все обязательные поля (рецензия, прогресс, все оценки от 1 до 10{supportsSeasons ? ', сезон' : ''}).
+          </p>
+        )}
+        {Object.keys(characteristics).length === 0 && (
+          <p className="text-status-error text-sm mt-2 text-right">
+            Характеристики для этого произведения не загружены.
+          </p>
+        )}
+      </form>
+    </div>
+  );
+}
+
+export default MobileReviewForm; 
\ No newline at end of file
diff --git a/src/mobile/components/ShowcaseSortModal.jsx b/src/mobile/components/ShowcaseSortModal.jsx
new file mode 100644
index 0000000..e4568a5
--- /dev/null
+++ b/src/mobile/components/ShowcaseSortModal.jsx
@@ -0,0 +1,144 @@
+import React, { useState, useEffect } from 'react';
+import { FaCheckCircle, FaRegCircle, FaFire } from 'react-icons/fa';
+import Modal from '../../components/common/Modal';
+
+function ShowcaseSortModal({ isOpen, onClose, reviews = [], showcase = [], onSave }) {
+  const [selectedReviewIds, setSelectedReviewIds] = useState([]);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState(null);
+
+  // Инициализируем состояние только при первом открытии модального окна
+  useEffect(() => {
+    if (isOpen && selectedReviewIds.length === 0) {
+      setSelectedReviewIds(showcase || []);
+    }
+  }, [isOpen]);
+
+  // Сбрасываем состояние при закрытии
+  useEffect(() => {
+    if (!isOpen) {
+      setSelectedReviewIds([]);
+      setError(null);
+    }
+  }, [isOpen]);
+
+  const handleToggleReview = (reviewId) => {
+    setSelectedReviewIds(prev => {
+      const isSelected = prev.includes(reviewId);
+      if (isSelected) {
+        return prev.filter(id => id !== reviewId);
+      } else {
+        if (prev.length < 3) {
+          return [...prev, reviewId];
+        } else {
+          alert('Вы можете выбрать до 3 рецензий для витрины.');
+          return prev;
+        }
+      }
+    });
+  };
+
+  const handleSave = async () => {
+    if (typeof onSave !== 'function') {
+      console.error('onSave is not a function');
+      setError('Ошибка: функция сохранения не определена');
+      return;
+    }
+
+    setIsSubmitting(true);
+    setError(null);
+
+    try {
+      await onSave(selectedReviewIds);
+      onClose();
+    } catch (err) {
+      console.error('Error updating showcase:', err);
+      setError(err.message || 'Произошла ошибка при обновлении витрины.');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      title={`Управление витриной (${selectedReviewIds.length}/3)`}
+      size="lg"
+    >
+      <div className="space-y-4">
+        {error && (
+          <div className="bg-red-500/10 border border-red-500/20 text-red-500 p-4 rounded-lg">
+            Ошибка: {error}
+          </div>
+        )}
+        <p className="text-campfire-ash text-sm">Выберите до 3 рецензий, которые будут отображаться на вашей витрине.</p>
+        {reviews.length > 0 ? (
+          <ul className="space-y-3 max-h-96 overflow-y-auto pr-2 custom-scrollbar">
+            {reviews.map(review => {
+              const reviewMedia = review.expand?.media_id;
+              const reviewSeason = review.expand?.season_id;
+              const isSelected = selectedReviewIds.includes(review.id);
+
+              const reviewTitle = reviewMedia
+                ? `${reviewMedia.title}${reviewSeason ? ` - Сезон ${reviewSeason.season_number}${reviewSeason.title ? `: ${reviewSeason.title}` : ''}` : ''}`
+                : 'Загрузка...';
+
+              return (
+                <li
+                  key={review.id}
+                  className={`p-3 rounded-md border cursor-pointer flex items-center justify-between transition-colors duration-200
+                    ${isSelected
+                      ? 'bg-campfire-amber/20 border-campfire-amber text-campfire-light'
+                      : 'bg-campfire-dark border-campfire-ash/30 text-campfire-ash hover:bg-campfire-ash/10'
+                    }`}
+                  onClick={() => handleToggleReview(review.id)}
+                >
+                  <div className="flex-grow mr-4">
+                    <p className="font-semibold text-sm">{reviewTitle}</p>
+                    <p className="text-xs mt-1 flex items-center">
+                      Оценка: <span className="flex items-center text-campfire-amber ml-1 font-bold">
+                        <FaFire className="mr-1 text-xs" />
+                        {review.overall_rating !== null && review.overall_rating !== undefined ? review.overall_rating.toFixed(1) : 'N/A'} / 10
+                      </span>
+                    </p>
+                  </div>
+                  {isSelected ? (
+                    <FaCheckCircle size={20} className="text-campfire-amber" />
+                  ) : (
+                    <FaRegCircle size={20} className="text-campfire-ash" />
+                  )}
+                </li>
+              );
+            })}
+          </ul>
+        ) : (
+          <div className="text-center py-4 text-campfire-ash">
+            У вас пока нет рецензий для добавления на витрину.
+          </div>
+        )}
+
+        <div className="flex justify-end space-x-4 mt-6">
+          <button
+            type="button"
+            onClick={onClose}
+            className="btn-secondary"
+            disabled={isSubmitting}
+          >
+            Отмена
+          </button>
+          <button
+            type="button"
+            onClick={handleSave}
+            className="btn-primary disabled:opacity-50 disabled:cursor-not-allowed"
+            disabled={isSubmitting}
+          >
+            {isSubmitting ? 'Сохранение...' : 'Сохранить витрину'}
+          </button>
+        </div>
+      </div>
+    </Modal>
+  );
+}
+
+export default ShowcaseSortModal; 
\ No newline at end of file
diff --git a/src/mobile/components/ShowcaseThemeModal.jsx b/src/mobile/components/ShowcaseThemeModal.jsx
new file mode 100644
index 0000000..fff4dc8
--- /dev/null
+++ b/src/mobile/components/ShowcaseThemeModal.jsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import Modal from '../../components/common/Modal';
+import { FaPalette, FaSquare, FaWaveSquare } from 'react-icons/fa';
+
+const ShowcaseThemeModal = ({ isOpen, onClose, currentTheme, onSelectTheme }) => {
+  const themes = [
+    {
+      id: 'none',
+      name: 'Без темы',
+      icon: FaPalette,
+      description: 'Простой фон без анимации'
+    },
+    {
+      id: 'squares',
+      name: 'Квадраты',
+      icon: FaSquare,
+      description: 'Анимированные квадраты'
+    },
+    {
+      id: 'dither',
+      name: 'Волны',
+      icon: FaWaveSquare,
+      description: 'Анимированные волны'
+    }
+  ];
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      title="Выберите тему витрины"
+    >
+      <div className="space-y-4">
+        {themes.map((theme) => {
+          const Icon = theme.icon;
+          const isSelected = currentTheme === theme.id;
+
+          return (
+            <button
+              key={theme.id}
+              onClick={() => onSelectTheme(theme.id)}
+              className={`w-full p-4 rounded-lg border transition-all duration-200 ${
+                isSelected
+                  ? 'bg-campfire-amber/20 border-campfire-amber text-campfire-light'
+                  : 'bg-campfire-charcoal/20 border-campfire-ash/30 text-campfire-ash hover:bg-campfire-charcoal/30'
+              }`}
+            >
+              <div className="flex items-center gap-4">
+                <div className={`w-12 h-12 rounded-lg flex items-center justify-center ${
+                  isSelected ? 'bg-campfire-amber/20' : 'bg-campfire-charcoal/40'
+                }`}>
+                  <Icon className={`w-6 h-6 ${isSelected ? 'text-campfire-amber' : 'text-campfire-ash'}`} />
+                </div>
+                <div className="flex-1 text-left">
+                  <h3 className={`font-medium ${isSelected ? 'text-campfire-light' : 'text-campfire-ash'}`}>
+                    {theme.name}
+                  </h3>
+                  <p className="text-sm text-campfire-ash mt-1">
+                    {theme.description}
+                  </p>
+                </div>
+              </div>
+            </button>
+          );
+        })}
+      </div>
+    </Modal>
+  );
+};
+
+export default ShowcaseThemeModal; 
\ No newline at end of file
diff --git a/src/mobile/layout/MobileLayout.jsx b/src/mobile/layout/MobileLayout.jsx
new file mode 100644
index 0000000..cf97036
--- /dev/null
+++ b/src/mobile/layout/MobileLayout.jsx
@@ -0,0 +1,53 @@
+import React, { useEffect, useState } from 'react';
+import { Outlet, Link, useLocation } from 'react-router-dom';
+import MobileDock from '../components/MobileDock';
+import MobileLogo from '../components/MobileLogo';
+
+const HEADER_HEIGHT = 86; // px
+const DOCK_SCROLL_THRESHOLD = 18;
+
+const MobileLayout = () => {
+  const [showDock, setShowDock] = useState(false);
+  const location = useLocation();
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setShowDock(window.scrollY > DOCK_SCROLL_THRESHOLD);
+    };
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    handleScroll();
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, [location.pathname]);
+
+  return (
+    <div className="min-h-screen bg-campfire-dark flex flex-col">
+      {/* Fixed контейнер для логотипа и Dock */}
+      <div
+        className="fixed top-0 left-0 w-full z-50 flex items-center justify-center"
+        style={{ height: `${HEADER_HEIGHT}px`, minHeight: `${HEADER_HEIGHT}px` }}
+      >
+        {/* Логотип */}
+        <div
+          className={`absolute left-0 top-0 w-full h-full flex items-center justify-center transition-transform duration-500 ${showDock ? '-translate-y-full' : 'translate-y-0'}`}
+          style={{ willChange: 'transform' }}
+        >
+          <Link to="/" aria-label="На главную">
+            <MobileLogo />
+          </Link>
+        </div>
+        {/* Dock */}
+        <div
+          className={`absolute left-0 top-0 w-full h-full flex items-center justify-center transition-transform duration-500 ${showDock ? 'translate-y-0' : 'translate-y-full'}`}
+          style={{ willChange: 'transform' }}
+        >
+          <MobileDock />
+        </div>
+      </div>
+      <main className="flex-grow pt-[165px]">
+        <Outlet />
+      </main>
+    </div>
+  );
+};
+
+export default MobileLayout; 
\ No newline at end of file
diff --git a/src/mobile/pages/MobileAuth.jsx b/src/mobile/pages/MobileAuth.jsx
new file mode 100644
index 0000000..f0bb7ba
--- /dev/null
+++ b/src/mobile/pages/MobileAuth.jsx
@@ -0,0 +1,140 @@
+import React, { useState } from 'react';
+import { Link, useNavigate, useLocation } from 'react-router-dom';
+import { useAuth } from '../../contexts/AuthContext';
+import { FaEnvelope, FaLock, FaUser, FaArrowLeft } from 'react-icons/fa';
+
+const MobileAuth = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { login, register } = useAuth();
+  const [isLogin, setIsLogin] = useState(location.pathname === '/auth/login');
+  const [formData, setFormData] = useState({
+    email: '',
+    password: '',
+    username: ''
+  });
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+
+    try {
+      if (isLogin) {
+        await login(formData.email, formData.password);
+      } else {
+        await register(formData.email, formData.password, formData.username);
+      }
+      navigate('/');
+    } catch (error) {
+      setError(error.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleChange = (e) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value
+    });
+  };
+
+  return (
+    <div className="min-h-screen flex flex-col px-4 py-4">
+      <button
+        onClick={() => navigate(-1)}
+        className="flex items-center text-campfire-light mb-6"
+      >
+        <FaArrowLeft className="mr-2" />
+        Назад
+      </button>
+
+      <div className="flex-1 flex flex-col justify-center">
+        <h1 className="text-2xl font-bold text-campfire-light mb-6 text-center">
+          {isLogin ? 'Вход' : 'Регистрация'}
+        </h1>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          {!isLogin && (
+            <div className="relative">
+              <input
+                type="text"
+                name="username"
+                value={formData.username}
+                onChange={handleChange}
+                placeholder="Имя пользователя"
+                required
+                className="w-full pl-10 pr-4 py-2 bg-campfire-dark/50 border border-campfire-ash/30 rounded-lg text-campfire-light focus:outline-none focus:border-campfire-amber"
+              />
+              <FaUser className="absolute left-3 top-1/2 transform -translate-y-1/2 text-campfire-ash" />
+            </div>
+          )}
+
+          <div className="relative">
+            <input
+              type="email"
+              name="email"
+              value={formData.email}
+              onChange={handleChange}
+              placeholder="Email"
+              required
+              className="w-full pl-10 pr-4 py-2 bg-campfire-dark/50 border border-campfire-ash/30 rounded-lg text-campfire-light focus:outline-none focus:border-campfire-amber"
+            />
+            <FaEnvelope className="absolute left-3 top-1/2 transform -translate-y-1/2 text-campfire-ash" />
+          </div>
+
+          <div className="relative">
+            <input
+              type="password"
+              name="password"
+              value={formData.password}
+              onChange={handleChange}
+              placeholder="Пароль"
+              required
+              className="w-full pl-10 pr-4 py-2 bg-campfire-dark/50 border border-campfire-ash/30 rounded-lg text-campfire-light focus:outline-none focus:border-campfire-amber"
+            />
+            <FaLock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-campfire-ash" />
+          </div>
+
+          {error && (
+            <div className="text-red-500 text-sm text-center">
+              {error}
+            </div>
+          )}
+
+          <button
+            type="submit"
+            disabled={loading}
+            className="w-full py-3 bg-campfire-amber text-campfire-dark rounded-lg font-semibold hover:bg-campfire-amber/90 transition-colors disabled:opacity-50"
+          >
+            {loading ? (
+              <div className="flex items-center justify-center">
+                <div className="animate-spin rounded-full h-5 w-5 border-t-2 border-b-2 border-campfire-dark"></div>
+              </div>
+            ) : isLogin ? (
+              'Войти'
+            ) : (
+              'Зарегистрироваться'
+            )}
+          </button>
+        </form>
+
+        <div className="mt-6 text-center">
+          <button
+            onClick={() => setIsLogin(!isLogin)}
+            className="text-campfire-amber hover:text-campfire-amber/90"
+          >
+            {isLogin
+              ? 'Нет аккаунта? Зарегистрируйтесь'
+              : 'Уже есть аккаунт? Войдите'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MobileAuth; 
\ No newline at end of file
diff --git a/src/mobile/pages/MobileCatalog.jsx b/src/mobile/pages/MobileCatalog.jsx
new file mode 100644
index 0000000..13f2c34
--- /dev/null
+++ b/src/mobile/pages/MobileCatalog.jsx
@@ -0,0 +1,185 @@
+import React, { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import { pb } from '../../services/pocketbaseService';
+import { getFileUrl } from '../../services/pocketbaseService';
+import { FaStar, FaFilter } from 'react-icons/fa';
+import SearchBar from '../../components/ui/SearchBar';
+
+const MobileCatalog = () => {
+  const [media, setMedia] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [filters, setFilters] = useState({
+    type: '',
+    genre: '',
+    year: '',
+    sort: '-created'
+  });
+  const [showFilters, setShowFilters] = useState(false);
+
+  useEffect(() => {
+    fetchMedia();
+  }, [filters]);
+
+  const fetchMedia = async () => {
+    try {
+      setLoading(true);
+      const filter = [];
+      
+      if (filters.type) {
+        filter.push(`type = "${filters.type}"`);
+      }
+      if (filters.genre) {
+        filter.push(`genres ?~ "${filters.genre}"`);
+      }
+      if (filters.year) {
+        filter.push(`year = ${filters.year}`);
+      }
+
+      const records = await pb.collection('media').getList(1, 50, {
+        sort: filters.sort,
+        filter: filter.join(' && ')
+      });
+
+      setMedia(records.items);
+    } catch (error) {
+      console.error('Error fetching media:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleFilterChange = (key, value) => {
+    setFilters(prev => ({
+      ...prev,
+      [key]: value
+    }));
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-campfire-amber"></div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-campfire-dark">
+      <div className="px-4 pt-4">
+        <SearchBar mobileMode={true} />
+      </div>
+      {/* Фильтры */}
+      <div className="px-4 py-4">
+        <div className="mb-6">
+          <button
+            onClick={() => setShowFilters(!showFilters)}
+            className="w-full flex items-center justify-center space-x-2 bg-campfire-dark/50 border border-campfire-ash/30 rounded-lg p-3 text-campfire-light"
+          >
+            <FaFilter />
+            <span>Фильтры</span>
+          </button>
+
+          {showFilters && (
+            <div className="mt-4 space-y-4 bg-campfire-dark/50 border border-campfire-ash/30 rounded-lg p-4">
+              <div>
+                <label className="block text-campfire-light mb-2">Тип</label>
+                <select
+                  value={filters.type}
+                  onChange={(e) => handleFilterChange('type', e.target.value)}
+                  className="w-full bg-campfire-dark border border-campfire-ash/30 rounded-lg p-2 text-campfire-light"
+                >
+                  <option value="">Все</option>
+                  <option value="movie">Фильмы</option>
+                  <option value="series">Сериалы</option>
+                  <option value="game">Игры</option>
+                </select>
+              </div>
+
+              <div>
+                <label className="block text-campfire-light mb-2">Жанр</label>
+                <select
+                  value={filters.genre}
+                  onChange={(e) => handleFilterChange('genre', e.target.value)}
+                  className="w-full bg-campfire-dark border border-campfire-ash/30 rounded-lg p-2 text-campfire-light"
+                >
+                  <option value="">Все</option>
+                  <option value="action">Боевик</option>
+                  <option value="comedy">Комедия</option>
+                  <option value="drama">Драма</option>
+                  <option value="horror">Ужасы</option>
+                  <option value="sci-fi">Фантастика</option>
+                </select>
+              </div>
+
+              <div>
+                <label className="block text-campfire-light mb-2">Год</label>
+                <select
+                  value={filters.year}
+                  onChange={(e) => handleFilterChange('year', e.target.value)}
+                  className="w-full bg-campfire-dark border border-campfire-ash/30 rounded-lg p-2 text-campfire-light"
+                >
+                  <option value="">Все</option>
+                  {Array.from({ length: 24 }, (_, i) => 2024 - i).map(year => (
+                    <option key={year} value={year}>{year}</option>
+                  ))}
+                </select>
+              </div>
+
+              <div>
+                <label className="block text-campfire-light mb-2">Сортировка</label>
+                <select
+                  value={filters.sort}
+                  onChange={(e) => handleFilterChange('sort', e.target.value)}
+                  className="w-full bg-campfire-dark border border-campfire-ash/30 rounded-lg p-2 text-campfire-light"
+                >
+                  <option value="-created">Сначала новые</option>
+                  <option value="created">Сначала старые</option>
+                  <option value="-average_rating">По рейтингу</option>
+                  <option value="title">По названию</option>
+                </select>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Список медиа */}
+        <div className="space-y-4">
+          {media.map((item) => (
+            <Link
+              key={item.id}
+              to={`/media/${item.path}`}
+              className="block bg-campfire-dark/50 border border-campfire-ash/30 rounded-lg p-4"
+            >
+              <div className="flex items-center space-x-4">
+                <img
+                  src={getFileUrl(item, 'poster')}
+                  alt={item.title}
+                  className="w-16 h-24 rounded-lg object-cover"
+                />
+                <div className="flex-1">
+                  <h3 className="text-campfire-light font-semibold mb-1">
+                    {item.title}
+                  </h3>
+                  <div className="flex items-center space-x-2 text-sm">
+                    <div className="flex items-center text-campfire-amber">
+                      <FaStar className="mr-1" />
+                      <span>{item.average_rating?.toFixed(1) || '0.0'}</span>
+                    </div>
+                    <span className="text-campfire-ash">
+                      {item.review_count || 0} обзоров
+                    </span>
+                  </div>
+                  <p className="text-campfire-ash text-sm mt-1">
+                    {item.type === 'movie' ? 'Фильм' : item.type === 'series' ? 'Сериал' : 'Игра'} • {item.year}
+                  </p>
+                </div>
+              </div>
+            </Link>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MobileCatalog; 
\ No newline at end of file
diff --git a/src/mobile/pages/MobileHome.jsx b/src/mobile/pages/MobileHome.jsx
new file mode 100644
index 0000000..30cf349
--- /dev/null
+++ b/src/mobile/pages/MobileHome.jsx
@@ -0,0 +1,232 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import { Link } from 'react-router-dom';
+import { getLatestReviews, listMedia, listUsersRankedByReviews, getFileUrl, getMediaCount, getReviewsCount } from '../../services/pocketbaseService';
+import { FaStar, FaHeart, FaComment, FaCrown, FaMedal } from 'react-icons/fa';
+import GridMotionMobile from '../components/GridMotionMobile';
+import CountUp from '../../components/reactbits/TextAnimations/CountUp/CountUp';
+import { motion, AnimatePresence } from 'framer-motion';
+import RotatingText from '../../components/reactbits/TextAnimations/RotatingText/RotatingText';
+
+const MobileHome = () => {
+  const [popularMedia, setPopularMedia] = useState([]);
+  const [latestReviews, setLatestReviews] = useState([]);
+  const [topUsers, setTopUsers] = useState([]);
+  const [stats, setStats] = useState({ mediaCount: 0, reviewsCount: 0 });
+  const [posters, setPosters] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [isDataReady, setIsDataReady] = useState(false);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        setLoading(true);
+        setError(null);
+        const [mediaData, reviewsData, usersData, mediaCount, reviewsCount] = await Promise.all([
+          listMedia(null, 1, 40, null, false, true, '-review_count'),
+          getLatestReviews(5),
+          listUsersRankedByReviews(3),
+          getMediaCount(),
+          getReviewsCount()
+        ]);
+        setPopularMedia(mediaData?.data || []);
+        setLatestReviews(reviewsData || []);
+        setTopUsers(usersData || []);
+        setStats({
+          mediaCount: parseInt(mediaCount) || 0,
+          reviewsCount: parseInt(reviewsCount) || 0
+        });
+        setPosters((mediaData?.data || []).filter(item => item.poster).map(item => getFileUrl(item, 'poster')));
+        setIsDataReady(true);
+        setLoading(false);
+        console.log(mediaData?.data)
+      } catch (err) {
+        setError('Не удалось загрузить данные');
+        setLoading(false);
+      }
+    };
+    fetchData();
+  }, []);
+
+  if (loading || !isDataReady) {
+    return (
+      <div className="min-h-screen bg-campfire-dark flex flex-col justify-center items-center">
+        <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-campfire-amber mb-4"></div>
+        <span className="text-campfire-light">Загрузка...</span>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="min-h-screen bg-campfire-dark flex items-center justify-center p-4">
+        <div className="bg-status-error/20 text-status-error p-4 rounded-lg text-center">
+          {error}
+        </div>
+      </div>
+    );
+  }
+
+  // Для GridMotionMobile: минимум 48 постеров
+  const minPosters = 48;
+  let postersForGrid = posters;
+  console.log(posters)
+  if (posters.length < minPosters) {
+    const placeholder = '/placeholder-poster.jpg';
+    postersForGrid = [
+      ...posters,
+      ...Array(minPosters - posters.length).fill(placeholder)
+    ];
+  }
+
+  return (
+    <div className="min-h-screen bg-campfire-dark pb-8">
+      {/* GridMotion + статистика */}
+      <section className="relative h-[500px] mb-8 overflow-hidden">
+        <div className="absolute inset-0 z-0 pointer-events-none">
+          <GridMotionMobile items={postersForGrid} gradientColor="rgba(251, 191, 36, 0.08)" />
+        </div>
+        <div className="absolute inset-0 from-campfire-dark/0 via-campfire-dark/60 to-campfire-dark z-10"></div>
+        <div className="relative z-20 flex flex-col items-center justify-center h-full px-4">
+          <div className="text-center max-w-md mx-auto">
+            <h2 className="text-xl font-bold text-campfire-light mb-4 drop-shadow-lg">
+              <div className="flex flex-col items-center justify-center gap-2">
+                <span>Составляй рецензии на</span>
+                <div className="w-28 text-center">
+                  <RotatingText
+                    texts={["Фильмы", "Сериалы", "Игры", "Аниме"]}
+                    className="inline-block text-campfire-amber drop-shadow-[0_0_8px_rgba(255,51,0,0.6)]"
+                    rotationInterval={1500}
+                    auto={true}
+                    loop={true}
+                  />
+                </div>
+              </div>
+            </h2>
+            <div className="flex flex-col items-center justify-center w-full max-w-xs mx-auto">
+              <div className="bg-campfire-darker/80 backdrop-blur-md p-4 rounded-lg text-center shadow-md mb-4 w-full">
+                <h3 className="text-campfire-light text-xs mb-1">Медиа в каталоге</h3>
+                <CountUp to={stats.mediaCount} className="text-xl font-bold text-campfire-amber" duration={2} start={0} />
+              </div>
+              <div className="bg-campfire-darker/80 backdrop-blur-md p-4 rounded-lg text-center shadow-md w-full">
+                <h3 className="text-campfire-light text-xs mb-1">Рецензий написано</h3>
+                <CountUp to={stats.reviewsCount} className="text-xl font-bold text-campfire-amber" duration={2} start={0} />
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Топ рецензенты */}
+      <section className="px-4 mb-8">
+        <h2 className="text-xl font-bold text-campfire-light mb-4">Топ рецензенты</h2>
+        <div className="flex justify-center items-end gap-4">
+          {topUsers.map((user, idx) => (
+            <div key={user.id} className="flex flex-col items-center w-1/3">
+              <div className={`relative ${idx === 0 ? 'scale-110' : ''}`}>
+                <div className={`w-20 h-20 rounded-full overflow-hidden border-2 ${idx === 0 ? 'border-campfire-amber' : idx === 1 ? 'border-campfire-ash/30' : 'border-campfire-ember/30'} mb-2`}>
+                  <img
+                    src={getFileUrl(user, 'profile_picture') || '/default-avatar.png'}
+                    alt={user.username}
+                    className="w-full h-full object-cover"
+                  />
+                </div>
+                <div className={`absolute -top-2 -right-2 w-6 h-6 rounded-full flex items-center justify-center ${idx === 0 ? 'bg-campfire-amber text-campfire-dark' : 'bg-campfire-ash/30 text-campfire-light'}`}>
+                  <span className="font-bold">{idx + 1}</span>
+                </div>
+              </div>
+              <Link to={`/profile/${user.login}`} className="text-campfire-light hover:text-campfire-amber font-medium text-sm">
+                {user.username}
+              </Link>
+              <span className="text-campfire-ash text-xs">{user.review_count} рецензий</span>
+            </div>
+          ))}
+        </div>
+        <div className="text-center mt-4">
+          <Link to="/rating" className="text-campfire-amber hover:underline text-sm">Посмотреть рейтинг</Link>
+        </div>
+      </section>
+
+      {/* Последние обзоры */}
+      <section className="px-4 mb-8">
+        <h2 className="text-xl font-bold text-campfire-light mb-4">Последние обзоры</h2>
+        <div className="space-y-4">
+          {latestReviews.map((review) => (
+            <Link
+              key={review.id}
+              to={`/media/${review.expand?.media_id?.path}`}
+              className="block bg-campfire-charcoal/20 backdrop-blur-md border border-campfire-ash/30 rounded-lg p-4 hover:bg-campfire-charcoal/30 transition-colors"
+            >
+              <div className="flex items-start gap-4">
+                <img
+                  src={getFileUrl(review.expand?.media_id, 'poster')}
+                  alt={review.expand?.media_id?.title}
+                  className="w-16 h-24 object-cover rounded-lg"
+                />
+                <div className="flex-1">
+                  <h3 className="text-base font-semibold text-campfire-light mb-1">
+                    {review.expand?.media_id?.title}
+                  </h3>
+                  <div className="flex items-center gap-2 mb-2">
+                    <div className="flex items-center text-campfire-amber">
+                      <FaStar className="mr-1" />
+                      <span>{review.rating}</span>
+                    </div>
+                    <span className="text-campfire-ash">•</span>
+                    <span className="text-campfire-ash text-xs">
+                      {new Date(review.created).toLocaleDateString()}
+                    </span>
+                  </div>
+                  <p className="text-campfire-light/80 line-clamp-2">
+                    {review.text}
+                  </p>
+                  <div className="flex items-center gap-4 mt-2">
+                    <div className="flex items-center text-campfire-ash">
+                      <FaHeart className="mr-1" />
+                      <span>{review.likes?.length || 0}</span>
+                    </div>
+                    <div className="flex items-center text-campfire-ash">
+                      <FaComment className="mr-1" />
+                      <span>{review.comments?.length || 0}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </Link>
+          ))}
+        </div>
+      </section>
+
+      {/* Популярные медиа */}
+      <section className="px-4 mb-8">
+        <h2 className="text-xl font-bold text-campfire-light mb-4">Популярные медиа</h2>
+        <div className="grid grid-cols-2 gap-4">
+          {popularMedia.filter(media => media?.path).map((media) => (
+            <Link
+              key={media.id}
+              to={`/media/${media.path}`}
+              className="block bg-campfire-charcoal/20 backdrop-blur-md border border-campfire-ash/30 rounded-lg overflow-hidden hover:bg-campfire-charcoal/30 transition-colors"
+            >
+              <img
+                src={getFileUrl(media, 'poster')}
+                alt={media.title}
+                className="w-full aspect-[2/3] object-cover"
+              />
+              <div className="p-3">
+                <h3 className="text-campfire-light font-semibold line-clamp-1">
+                  {media.title}
+                </h3>
+                <div className="flex items-center text-campfire-amber mt-1">
+                  <FaStar className="mr-1" />
+                  <span>{media.average_rating?.toFixed(1) || '0.0'}</span>
+                </div>
+              </div>
+            </Link>
+          ))}
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default MobileHome; 
\ No newline at end of file
diff --git a/src/mobile/pages/MobileLogin.jsx b/src/mobile/pages/MobileLogin.jsx
new file mode 100644
index 0000000..91a1e7f
--- /dev/null
+++ b/src/mobile/pages/MobileLogin.jsx
@@ -0,0 +1,178 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import { useAuth } from '../../contexts/AuthContext';
+import { getUsers } from '../../services/pocketbaseService';
+import { motion } from 'framer-motion';
+import MobileLogo from '../components/MobileLogo';
+import { FiHome } from 'react-icons/fi';
+
+const MobileLogin = () => {
+  const [loginInput, setLoginInput] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+  const navigate = useNavigate();
+
+  const { user, userProfile, loading: authLoading, login, isInitialized } = useAuth();
+
+  useEffect(() => {
+    if (!authLoading && isInitialized) {
+      if (user && userProfile) {
+        navigate(`/profile/${userProfile.login}`);
+      }
+    }
+  }, [user, userProfile, authLoading, isInitialized, navigate]);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+
+    try {
+      await login(loginInput, password);
+      if (userProfile) {
+        navigate(`/profile/${userProfile.login}`);
+      }
+    } catch (err) {
+      let message = '';
+
+      if (err?.message?.includes('Неверный логин или пароль') || err?.message?.includes('Failed to authenticate') || err?.message?.includes('Invalid login credentials')) {
+        try {
+          const users = await getUsers(1, 50);
+          if (users && users.length > 0) {
+            const randomUser = users[Math.floor(Math.random() * users.length)];
+            message = `Неверный логин или пароль. Возможно, вы имели в виду: ${randomUser.username}`;
+          } else {
+            message = 'Неверный логин или пароль.';
+          }
+        } catch {
+          message = 'Неверный логин или пароль.';
+        }
+      } else if (err?.message?.toLowerCase().includes('user') && err?.message?.toLowerCase().includes('not found')) {
+        message = 'Пользователь не найден.';
+      } else {
+        message = err.message || 'Произошла ошибка при входе.';
+      }
+      setError(message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const containerVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.5,
+        ease: "easeOut"
+      }
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-campfire-dark flex flex-col justify-center items-center p-4">
+      <div className="w-full flex flex-col items-center mb-6">
+        <MobileLogo className="w-20 h-20 mb-2" />
+        <Link to="/" className="flex items-center gap-2 text-campfire-amber hover:text-campfire-ember text-sm font-medium mt-2">
+          <FiHome /> На главную
+        </Link>
+      </div>
+      <motion.div 
+        className="w-full max-w-md"
+        variants={containerVariants}
+        initial="hidden"
+        animate="visible"
+      >
+        <div className="bg-campfire-charcoal rounded-lg shadow-lg p-6 border border-campfire-ash/20">
+          <h1 className="text-2xl font-bold text-campfire-light mb-6 text-center">Вход</h1>
+          {error && (
+            <div className="mb-4 p-3 bg-status-error/20 text-status-error rounded-lg text-center">
+              {error}
+            </div>
+          )}
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <label htmlFor="login" className="block text-sm font-medium text-campfire-light mb-1">
+                Логин
+              </label>
+              <input
+                type="text"
+                id="login"
+                value={loginInput}
+                onChange={(e) => setLoginInput(e.target.value)}
+                className="input w-full px-3 py-2 bg-campfire-dark text-campfire-light border border-campfire-ash/30 rounded-md focus:outline-none focus:ring-campfire-amber focus:border-campfire-amber transition-colors"
+                placeholder="Введите логин"
+                required
+                autoComplete="username"
+              />
+            </div>
+
+            <div>
+              <label htmlFor="password" className="block text-sm font-medium text-campfire-light mb-1">
+                Пароль
+              </label>
+              <input
+                type="password"
+                id="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="input w-full px-3 py-2 bg-campfire-dark text-campfire-light border border-campfire-ash/30 rounded-md focus:outline-none focus:ring-campfire-amber focus:border-campfire-amber transition-colors"
+                placeholder="••••••••"
+                required
+                autoComplete="current-password"
+              />
+            </div>
+
+            <button
+              type="submit"
+              disabled={loading}
+              className={`btn-primary w-full ${loading ? "opacity-80 cursor-not-allowed" : ""} transition-colors duration-200`}
+            >
+              {loading ? (
+                <span className="inline-flex items-center">
+                  <svg
+                    className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                  >
+                    <circle
+                      className="opacity-25"
+                      cx="12"
+                      cy="12"
+                      r="10"
+                      stroke="currentColor"
+                      strokeWidth="4"
+                    ></circle>
+                    <path
+                      className="opacity-75"
+                      fill="currentColor"
+                      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                    ></path>
+                  </svg>
+                  Входим...
+                </span>
+              ) : (
+                "Войти"
+              )}
+            </button>
+          </form>
+
+          <div className="mt-6 text-center text-sm text-campfire-ash">
+            Еще нет аккаунта?{" "}
+            <Link
+              to="/auth/register"
+              className="text-campfire-amber hover:text-campfire-ember font-medium transition-colors"
+            >
+              Зарегистрироваться
+            </Link>
+          </div>
+        </div>
+      </motion.div>
+    </div>
+  );
+};
+
+export default MobileLogin; 
\ No newline at end of file
diff --git a/src/mobile/pages/MobileMedia.jsx b/src/mobile/pages/MobileMedia.jsx
new file mode 100644
index 0000000..1a574f0
--- /dev/null
+++ b/src/mobile/pages/MobileMedia.jsx
@@ -0,0 +1,277 @@
+import React, { useState, useEffect } from 'react';
+import { useParams, Link } from 'react-router-dom';
+import { useAuth } from '../../contexts/AuthContext';
+import { getMediaByPath, getReviewsByMediaId, getFileUrl, likeReview, unlikeReview } from '../../services/pocketbaseService';
+import { FaStar, FaHeart, FaRegHeart, FaComment, FaShare, FaArrowLeft } from 'react-icons/fa';
+import MobileReviewForm from '../components/MobileReviewForm';
+
+const MobileMedia = () => {
+  const { path } = useParams();
+  const { userProfile } = useAuth();
+  const [media, setMedia] = useState(null);
+  const [reviews, setReviews] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [showReviewForm, setShowReviewForm] = useState(false);
+  const [activeTab, setActiveTab] = useState('reviews');
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+    fetchData();
+  }, [path]);
+
+  const fetchData = async () => {
+    try {
+      setLoading(true);
+      setError(null);
+
+      const [mediaData, reviewsData] = await Promise.all([
+        getMediaByPath(path),
+        getReviewsByMediaId(path)
+      ]);
+
+      setMedia(mediaData);
+      setReviews(reviewsData);
+    } catch (err) {
+      console.error('Error fetching media data:', err);
+      setError('Не удалось загрузить данные медиа.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleLike = async (reviewId) => {
+    if (!userProfile) return;
+
+    try {
+      const review = reviews.find(r => r.id === reviewId);
+      if (review.likes?.includes(userProfile.id)) {
+        await unlikeReview(reviewId);
+        review.likes = review.likes.filter(id => id !== userProfile.id);
+      } else {
+        await likeReview(reviewId);
+        review.likes = [...(review.likes || []), userProfile.id];
+      }
+      setReviews([...reviews]);
+    } catch (err) {
+      console.error('Error handling like:', err);
+    }
+  };
+
+  const handleShare = async () => {
+    try {
+      await navigator.share({
+        title: media.title,
+        text: `Посмотрите ${media.title} на Campfire Critics!`,
+        url: window.location.href
+      });
+    } catch (err) {
+      console.error('Error sharing:', err);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-campfire-amber"></div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="bg-status-error/20 text-status-error p-4 rounded-lg text-center">
+          {error}
+        </div>
+      </div>
+    );
+  }
+
+  if (!media) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="bg-status-error/20 text-status-error p-4 rounded-lg text-center">
+          Медиа не найдено
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-campfire-dark">
+      {/* Header */}
+      <div className="relative h-64">
+        <img
+          src={getFileUrl(media, 'banner')}
+          alt={media.title}
+          className="w-full h-full object-cover"
+        />
+        <div className="absolute inset-0 bg-gradient-to-t from-campfire-dark to-transparent" />
+        <div className="absolute inset-0 flex items-end p-4">
+          <div className="flex items-center space-x-4">
+            <Link to="/" className="text-campfire-light hover:text-campfire-amber">
+              <FaArrowLeft className="w-6 h-6" />
+            </Link>
+            <h1 className="text-2xl font-bold text-campfire-light">{media.title}</h1>
+          </div>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="px-4 py-6">
+        {/* Media Info */}
+        <div className="flex space-x-4 mb-6">
+          <img
+            src={getFileUrl(media, 'poster')}
+            alt={media.title}
+            className="w-24 h-36 object-cover rounded-lg"
+          />
+          <div className="flex-grow">
+            <div className="flex items-center space-x-2 mb-2">
+              <FaStar className="text-campfire-amber" />
+              <span className="text-campfire-light font-semibold">
+                {media.average_rating?.toFixed(1) || '0.0'}
+              </span>
+              <span className="text-campfire-ash">
+                ({media.review_count || 0} обзоров)
+              </span>
+            </div>
+            <p className="text-campfire-ash text-sm line-clamp-3">{media.description}</p>
+          </div>
+        </div>
+
+        {/* Tabs */}
+        <div className="flex space-x-2 mb-6">
+          <button
+            onClick={() => setActiveTab('reviews')}
+            className={`flex-1 py-2 px-4 rounded-full text-sm font-medium ${
+              activeTab === 'reviews'
+                ? 'bg-campfire-amber text-campfire-dark'
+                : 'bg-campfire-charcoal/20 text-campfire-ash'
+            }`}
+          >
+            Рецензии
+          </button>
+          <button
+            onClick={() => setActiveTab('about')}
+            className={`flex-1 py-2 px-4 rounded-full text-sm font-medium ${
+              activeTab === 'about'
+                ? 'bg-campfire-amber text-campfire-dark'
+                : 'bg-campfire-charcoal/20 text-campfire-ash'
+            }`}
+          >
+            О медиа
+          </button>
+        </div>
+
+        {/* Tab Content */}
+        {activeTab === 'reviews' ? (
+          <div className="space-y-6">
+            {userProfile && (
+              <button
+                onClick={() => setShowReviewForm(!showReviewForm)}
+                className="w-full py-3 bg-campfire-amber text-campfire-dark font-semibold rounded-xl hover:bg-campfire-amber/90"
+              >
+                {showReviewForm ? 'Отмена' : 'Написать рецензию'}
+              </button>
+            )}
+
+            {showReviewForm && (
+              <MobileReviewForm
+                mediaId={media.id}
+                onSuccess={() => {
+                  setShowReviewForm(false);
+                  fetchData();
+                }}
+                onCancel={() => setShowReviewForm(false)}
+              />
+            )}
+
+            {reviews.map((review) => (
+              <div key={review.id} className="bg-campfire-charcoal/20 backdrop-blur-md border border-campfire-ash/30 rounded-xl p-4">
+                <div className="flex items-center space-x-3 mb-3">
+                  <Link to={`/profile/${review.expand.user_id.login}`}>
+                    <img
+                      src={getFileUrl(review.expand.user_id, 'profile_picture') || 'https://via.placeholder.com/150'}
+                      alt={review.expand.user_id.username}
+                      className="w-10 h-10 rounded-full object-cover border border-campfire-ash/30"
+                    />
+                  </Link>
+                  <div className="flex-grow">
+                    <Link to={`/profile/${review.expand.user_id.login}`} className="text-campfire-light font-semibold hover:text-campfire-amber">
+                      {review.expand.user_id.username}
+                    </Link>
+                    <div className="flex items-center space-x-2 text-sm">
+                      <FaStar className="text-campfire-amber" />
+                      <span className="text-campfire-light">{review.rating}</span>
+                      <span className="text-campfire-ash">
+                        {new Date(review.created).toLocaleDateString()}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+                <div className="text-campfire-light mb-3" dangerouslySetInnerHTML={{ __html: review.content }} />
+                <div className="flex items-center space-x-4">
+                  <button
+                    onClick={() => handleLike(review.id)}
+                    className="flex items-center space-x-1 text-campfire-ash hover:text-campfire-amber"
+                  >
+                    {review.likes?.includes(userProfile?.id) ? (
+                      <FaHeart className="text-campfire-amber" />
+                    ) : (
+                      <FaRegHeart />
+                    )}
+                    <span>{review.likes?.length || 0}</span>
+                  </button>
+                  <button className="flex items-center space-x-1 text-campfire-ash hover:text-campfire-amber">
+                    <FaComment />
+                    <span>{review.comments?.length || 0}</span>
+                  </button>
+                  <button
+                    onClick={handleShare}
+                    className="flex items-center space-x-1 text-campfire-ash hover:text-campfire-amber"
+                  >
+                    <FaShare />
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="space-y-4">
+            <div className="bg-campfire-charcoal/20 backdrop-blur-md border border-campfire-ash/30 rounded-xl p-4">
+              <h3 className="text-campfire-light font-semibold mb-2">Описание</h3>
+              <p className="text-campfire-ash">{media.description}</p>
+            </div>
+            {media.genres && (
+              <div className="bg-campfire-charcoal/20 backdrop-blur-md border border-campfire-ash/30 rounded-xl p-4">
+                <h3 className="text-campfire-light font-semibold mb-2">Жанры</h3>
+                <div className="flex flex-wrap gap-2">
+                  {media.genres.map((genre) => (
+                    <span
+                      key={genre}
+                      className="px-3 py-1 bg-campfire-amber/20 text-campfire-amber rounded-full text-sm"
+                    >
+                      {genre}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            )}
+            {media.release_date && (
+              <div className="bg-campfire-charcoal/20 backdrop-blur-md border border-campfire-ash/30 rounded-xl p-4">
+                <h3 className="text-campfire-light font-semibold mb-2">Дата выхода</h3>
+                <p className="text-campfire-ash">
+                  {new Date(media.release_date).toLocaleDateString()}
+                </p>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default MobileMedia; 
\ No newline at end of file
diff --git a/src/mobile/pages/MobileMediaOverviewPage.jsx b/src/mobile/pages/MobileMediaOverviewPage.jsx
new file mode 100644
index 0000000..ea030da
--- /dev/null
+++ b/src/mobile/pages/MobileMediaOverviewPage.jsx
@@ -0,0 +1,514 @@
+import React, { useState, useEffect } from 'react';
+import { useParams, Link, useNavigate } from 'react-router-dom';
+import { pb, getFileUrl } from '../../services/pocketbaseService';
+import { FaStar, FaHeart, FaComment, FaEdit, FaTrash, FaFire } from 'react-icons/fa';
+import { motion, AnimatePresence } from 'framer-motion';
+import { useAuth } from '../../contexts/AuthContext';
+import RatingChart from '../../components/reviews/RatingChart';
+import ReviewForm from '../components/MobileReviewForm';
+import Modal from '../../components/common/Modal';
+
+const MobileMediaOverviewPage = () => {
+  const { path } = useParams();
+  const { user } = useAuth();
+  const navigate = useNavigate();
+  const [media, setMedia] = useState(null);
+  const [reviews, setReviews] = useState([]);
+  const [userReview, setUserReview] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const [activeTab, setActiveTab] = useState('overview');
+  const [selectedSeasonId, setSelectedSeasonId] = useState(null);
+  const [seasons, setSeasons] = useState([]);
+  const [selectedSeasonDetails, setSelectedSeasonDetails] = useState(null);
+  const [isReviewFormOpen, setIsReviewFormOpen] = useState(false);
+  const [isReviewExpanded, setIsReviewExpanded] = useState({});
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        setLoading(true);
+        setError(null);
+
+        // Получаем данные медиа
+        const mediaData = await pb.collection('media').getFirstListItem(`path="${path}"`, {
+          expand: 'poster,backdrop'
+        });
+
+        // Получаем рецензии
+        const reviewsData = await pb.collection('reviews').getList(1, 50, {
+          filter: `media_id="${mediaData.id}"`,
+          sort: '-created',
+          expand: 'user_id'
+        });
+
+        // Если это сериал или аниме, получаем сезоны
+        if (mediaData.type === 'tv' || mediaData.type === 'anime') {
+          const seasonsData = await pb.collection('seasons').getList(1, 50, {
+            filter: `media_id="${mediaData.id}"`,
+            sort: 'season_number'
+          });
+          setSeasons(seasonsData.items);
+        }
+
+        // Получаем рецензию пользователя, если он авторизован
+        if (user) {
+          try {
+            const userReviewData = await pb.collection('reviews').getFirstListItem(
+              `user_id="${user.id}" && media_id="${mediaData.id}"`
+            );
+            setUserReview(userReviewData);
+          } catch (err) {
+            // Если рецензия не найдена, это нормально
+            setUserReview(null);
+          }
+        }
+
+        setMedia(mediaData);
+        setReviews(reviewsData.items || []);
+      } catch (err) {
+        console.error('Error fetching media data:', err);
+        if (err.status === 404) {
+          setError('Медиа не найдено');
+          navigate('/404');
+        } else {
+          setError('Не удалось загрузить данные');
+        }
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+  }, [path, user, navigate]);
+
+  // Функция для загрузки деталей сезона
+  const loadSeasonDetails = async (seasonId) => {
+    try {
+      const seasonData = await pb.collection('seasons').getOne(seasonId);
+      setSelectedSeasonDetails(seasonData);
+    } catch (err) {
+      console.error('Error loading season details:', err);
+    }
+  };
+
+  // Обработчик изменения сезона
+  useEffect(() => {
+    if (selectedSeasonId) {
+      loadSeasonDetails(selectedSeasonId);
+    } else {
+      setSelectedSeasonDetails(null);
+    }
+  }, [selectedSeasonId]);
+
+  // Функция для расчета средних оценок по характеристикам
+  const calculateAverageRatings = (reviews) => {
+    if (!reviews || !Array.isArray(reviews) || reviews.length === 0) {
+      return null;
+    }
+
+    const categories = [
+      'plot', 'characters', 'visuals', 'soundtrack', 'acting', 'direction',
+      'pacing', 'dialogue', 'world_building', 'animation', 'art_style'
+    ];
+
+    const averages = {};
+    categories.forEach(category => {
+      const validRatings = reviews
+        .map(review => review.ratings?.[category])
+        .filter(rating => rating !== undefined && rating !== null);
+      
+      if (validRatings.length > 0) {
+        averages[category] = validRatings.reduce((sum, rating) => sum + rating, 0) / validRatings.length;
+      }
+    });
+
+    return averages;
+  };
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-campfire-dark flex items-center justify-center">
+        <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-campfire-amber"></div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="min-h-screen bg-campfire-dark flex items-center justify-center p-4">
+        <div className="bg-status-error/20 text-status-error p-4 rounded-lg text-center">
+          {error}
+        </div>
+      </div>
+    );
+  }
+
+  const isOwnMedia = user && media && user.id === media.created_by;
+  const averageRatings = calculateAverageRatings(reviews);
+
+  const renderFireRating = (rating) => {
+    const maxFires = 10;
+    const fires = [];
+    const normalizedRating = Math.round((rating / 10) * maxFires);
+
+    for (let i = 0; i < maxFires; i++) {
+      fires.push(
+        <FaFire
+          key={i}
+          className={`text-lg ${
+            i < normalizedRating ? 'text-campfire-amber' : 'text-campfire-ash/30'
+          }`}
+        />
+      );
+    }
+    return fires;
+  };
+
+  return (
+    <div className="min-h-screen bg-campfire-dark">
+      {/* Media Header */}
+      <div className="relative h-[400px] mb-8">
+        <div className="absolute inset-0">
+          <img
+            src={getFileUrl(media, 'backdrop') || getFileUrl(media, 'poster')}
+            alt={media.title}
+            className="w-full h-full object-cover"
+          />
+          <div className="absolute inset-0 bg-gradient-to-t from-campfire-dark via-campfire-dark/80 to-transparent"></div>
+        </div>
+
+        <div className="absolute bottom-0 left-0 right-0 p-6">
+          <div className="flex items-end gap-4">
+            <img
+              src={getFileUrl(media, 'poster')}
+              alt={media.title}
+              className="w-24 h-36 object-cover rounded-lg shadow-lg"
+            />
+            <div className="flex-1">
+              <h1 className="text-2xl font-bold text-campfire-light mb-2">
+                {media.title}
+              </h1>
+              <div className="flex items-center gap-4 text-campfire-ash text-sm">
+                <div className="flex items-center">
+                  <FaStar className="text-campfire-amber mr-1" />
+                  <span>{media.average_rating?.toFixed(1) || '0.0'}</span>
+                </div>
+                <span>•</span>
+                <span>{media.review_count || 0} рецензий</span>
+                <span>•</span>
+                <span>{media.type}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Seasons Navigation (if applicable) */}
+      {(media.type === 'tv' || media.type === 'anime') && seasons.length > 0 && (
+        <div className="px-4 mb-8">
+          <div className="flex flex-wrap gap-2">
+            <button
+              onClick={() => setSelectedSeasonId(null)}
+              className={`px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200 ${
+                selectedSeasonId === null
+                  ? 'bg-campfire-amber text-campfire-dark'
+                  : 'bg-campfire-charcoal text-campfire-ash hover:bg-campfire-ash/20'
+              }`}
+            >
+              Общее
+            </button>
+            {seasons.map(season => (
+              <button
+                key={season.id}
+                onClick={() => setSelectedSeasonId(season.id)}
+                className={`px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200 ${
+                  selectedSeasonId === season.id
+                    ? 'bg-campfire-amber text-campfire-dark'
+                    : 'bg-campfire-charcoal text-campfire-ash hover:bg-campfire-ash/20'
+                }`}
+              >
+                Сезон {season.season_number}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Selected Season Details */}
+      {selectedSeasonDetails && (
+        <div className="px-4 mb-8">
+          <div className="bg-campfire-charcoal/20 backdrop-blur-md border border-campfire-ash/30 rounded-lg p-4">
+            <h3 className="text-xl font-bold text-campfire-light mb-2">
+              Сезон {selectedSeasonDetails.season_number}
+            </h3>
+            {selectedSeasonDetails.overview && (
+              <p className="text-campfire-light/80 mb-4">{selectedSeasonDetails.overview}</p>
+            )}
+            <div className="flex items-center gap-4 text-campfire-ash text-sm">
+              <div className="flex items-center">
+                <FaStar className="text-campfire-amber mr-1" />
+                <span>{selectedSeasonDetails.average_rating?.toFixed(1) || '0.0'}</span>
+              </div>
+              <span>•</span>
+              <span>{selectedSeasonDetails.review_count || 0} рецензий</span>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Tabs */}
+      <div className="px-4 mb-8">
+        <div className="flex gap-4 border-b border-campfire-ash/30">
+          <button
+            onClick={() => setActiveTab('overview')}
+            className={`pb-2 px-1 ${
+              activeTab === 'overview'
+                ? 'text-campfire-amber border-b-2 border-campfire-amber'
+                : 'text-campfire-ash hover:text-campfire-light'
+            }`}
+          >
+            Обзор
+          </button>
+          <button
+            onClick={() => setActiveTab('reviews')}
+            className={`pb-2 px-1 ${
+              activeTab === 'reviews'
+                ? 'text-campfire-amber border-b-2 border-campfire-amber'
+                : 'text-campfire-ash hover:text-campfire-light'
+            }`}
+          >
+            Рецензии
+          </button>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="px-4">
+        <AnimatePresence mode="wait">
+          {activeTab === 'overview' ? (
+            <motion.div
+              key="overview"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -20 }}
+              className="space-y-6"
+            >
+              <div>
+                <h2 className="text-xl font-bold text-campfire-light mb-2">Описание</h2>
+                <p className="text-campfire-light/80">{media.overview}</p>
+              </div>
+
+              {media.release_date && (
+                <div>
+                  <h2 className="text-xl font-bold text-campfire-light mb-2">Дата выхода</h2>
+                  <p className="text-campfire-light/80">
+                    {new Date(media.release_date).toLocaleDateString()}
+                  </p>
+                </div>
+              )}
+
+              {/* График средних оценок */}
+              {(() => {
+                if (averageRatings && Object.keys(averageRatings).length > 0) {
+                  return (
+                    <div className="mt-6">
+                      <h3 className="text-campfire-light font-medium mb-4">Средние оценки</h3>
+                      <RatingChart 
+                        ratings={averageRatings}
+                        labels={media.characteristics}
+                      />
+                    </div>
+                  );
+                }
+                return null;
+              })()}
+            </motion.div>
+          ) : (
+            <motion.div
+              key="reviews"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -20 }}
+              className="space-y-4"
+            >
+              {/* Review Form */}
+              {user ? (
+                <div className="mb-8">
+                  {userReview ? (
+                    <div className="bg-campfire-charcoal/20 backdrop-blur-md border border-campfire-ash/30 rounded-lg p-4">
+                      <h3 className="text-lg font-semibold text-campfire-light mb-2">Ваша рецензия</h3>
+                      <div className="flex items-center gap-2 mb-2">
+                        <div className="flex items-center text-campfire-amber">
+                          <FaStar className="mr-1" />
+                          <span>{userReview.rating}</span>
+                        </div>
+                        <span className="text-campfire-ash">•</span>
+                        <span className="text-campfire-ash text-sm">
+                          {new Date(userReview.created).toLocaleDateString()}
+                        </span>
+                      </div>
+                      <p className="text-campfire-light/80">{userReview.text}</p>
+                      <button
+                        onClick={() => setIsReviewFormOpen(true)}
+                        className="mt-4 text-campfire-amber hover:underline"
+                      >
+                        Редактировать
+                      </button>
+                    </div>
+                  ) : (
+                    <button
+                      onClick={() => setIsReviewFormOpen(true)}
+                      className="w-full py-3 bg-campfire-amber text-campfire-dark rounded-lg hover:bg-campfire-amber/80 transition-colors"
+                    >
+                      Написать рецензию
+                    </button>
+                  )}
+                </div>
+              ) : (
+                <div className="bg-campfire-charcoal/20 backdrop-blur-md border border-campfire-ash/30 rounded-lg p-4 text-center">
+                  <p className="text-campfire-light">
+                    <Link to="/auth/login" className="text-campfire-amber hover:underline">
+                      Войдите
+                    </Link>
+                    , чтобы оставить рецензию
+                  </p>
+                </div>
+              )}
+
+              {/* Reviews List */}
+              {reviews && Array.isArray(reviews) && reviews.length > 0 ? (
+                reviews.map((review) => (
+                  <div
+                    key={review.id}
+                    className="bg-campfire-charcoal/20 backdrop-blur-md border border-campfire-ash/30 rounded-lg p-4"
+                  >
+                    <div className="flex items-start gap-4">
+                      <img
+                        src={getFileUrl(review.expand?.user_id, 'profile_picture') || '/default-avatar.png'}
+                        alt={review.expand?.user_id?.username}
+                        className="w-12 h-12 rounded-full object-cover"
+                      />
+                      <div className="flex-1">
+                        <div className="flex items-center justify-between mb-2">
+                          <Link
+                            to={`/profile/${review.expand?.user_id?.login}`}
+                            className="text-campfire-light font-medium hover:text-campfire-amber"
+                          >
+                            {review.expand?.user_id?.username}
+                          </Link>
+                          <div className="flex items-center text-campfire-amber">
+                            <FaFire className="mr-1" />
+                            <span>{review.ratings?.overall?.toFixed(1) || '0.0'}</span>
+                          </div>
+                        </div>
+                        <p className={`text-campfire-light/80 ${!isReviewExpanded[review.id] && 'line-clamp-3'}`}>
+                          {review.text}
+                        </p>
+                        {review.text && review.text.length > 200 && (
+                          <button
+                            onClick={() => setIsReviewExpanded(prev => ({
+                              ...prev,
+                              [review.id]: !prev[review.id]
+                            }))}
+                            className="mt-2 text-campfire-amber hover:underline"
+                          >
+                            {isReviewExpanded[review.id] ? 'Свернуть' : 'Развернуть'}
+                          </button>
+                        )}
+                        <div className="flex items-center gap-4 mt-2 text-campfire-ash text-sm">
+                          <div className="flex items-center">
+                            <FaHeart className="mr-1" />
+                            <span>{review.likes?.length || 0}</span>
+                          </div>
+                          <div className="flex items-center">
+                            <FaComment className="mr-1" />
+                            <span>{review.comments?.length || 0}</span>
+                          </div>
+                          <span>•</span>
+                          <span>{new Date(review.created).toLocaleDateString()}</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                ))
+              ) : (
+                <div className="text-center py-8 text-campfire-light">
+                  Пока нет рецензий
+                </div>
+              )}
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+
+      {/* Review Form Modal */}
+      <Modal
+        isOpen={isReviewFormOpen}
+        onClose={() => setIsReviewFormOpen(false)}
+        title={userReview ? 'Редактировать рецензию' : 'Написать рецензию'}
+      >
+        <ReviewForm
+  mediaId={media.id}
+  seasonId={selectedSeasonId}
+  mediaType={media.type}
+  progress_type={media.progress_type}
+  characteristics={media.characteristics}
+  existingReview={userReview}
+  onEdit={async (reviewId, data) => {
+    try {
+      await pb.collection('reviews').update(reviewId, data);
+      await fetchUserReview();
+      setIsReviewFormOpen(false);
+    } catch (err) {
+      console.error('Error updating review:', err);
+    }
+  }}
+          onSubmit={async (data) => {
+            try {
+              if (userReview) {
+                await pb.collection('reviews').update(userReview.id, data);
+              } else {
+                await pb.collection('reviews').create({
+                  ...data,
+                  user_id: user.id,
+                  media_id: media.id
+                });
+              }
+              setIsReviewFormOpen(false);
+              // Обновляем данные
+              const reviewsData = await pb.collection('reviews').getList(1, 50, {
+                filter: `media_id="${media.id}"`,
+                sort: '-created',
+                expand: 'user_id'
+              });
+              setReviews(reviewsData.items);
+            } catch (err) {
+              console.error('Error saving review:', err);
+            }
+          }}
+          onDelete={async () => {
+            try {
+              await pb.collection('reviews').delete(userReview.id);
+              setIsReviewFormOpen(false);
+              setUserReview(null);
+              // Обновляем данные
+              const reviewsData = await pb.collection('reviews').getList(1, 50, {
+                filter: `media_id="${media.id}"`,
+                sort: '-created',
+                expand: 'user_id'
+              });
+              setReviews(reviewsData.items);
+            } catch (err) {
+              console.error('Error deleting review:', err);
+            }
+          }}
+          seasons={seasons}
+          selectedSeasonId={selectedSeasonId}
+        />
+      </Modal>
+    </div>
+  );
+};
+
+export default MobileMediaOverviewPage; 
\ No newline at end of file
diff --git a/src/mobile/pages/MobileNotFound.jsx b/src/mobile/pages/MobileNotFound.jsx
new file mode 100644
index 0000000..82546d6
--- /dev/null
+++ b/src/mobile/pages/MobileNotFound.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const MobileNotFound = () => {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen px-4 text-center">
+      <h1 className="text-4xl font-bold text-campfire-amber mb-4">404</h1>
+      <p className="text-xl text-campfire-light mb-8">
+        Страница не найдена
+      </p>
+      <Link
+        to="/"
+        className="px-6 py-3 bg-campfire-amber text-campfire-dark rounded-lg font-semibold hover:bg-campfire-amber/90 transition-colors"
+      >
+        Вернуться на главную
+      </Link>
+    </div>
+  );
+};
+
+export default MobileNotFound; 
\ No newline at end of file
diff --git a/src/mobile/pages/MobileProfile.jsx b/src/mobile/pages/MobileProfile.jsx
new file mode 100644
index 0000000..ecbcefc
--- /dev/null
+++ b/src/mobile/pages/MobileProfile.jsx
@@ -0,0 +1,414 @@
+import React, { useState, useEffect } from 'react';
+import { useParams, Link, useNavigate } from 'react-router-dom';
+import { useAuth } from '../../contexts/AuthContext';
+import { pb, getFileUrl, getUserAchievements } from '../../services/pocketbaseService';
+import { FaStar, FaHeart, FaComment, FaEdit, FaSignOutAlt, FaPalette, FaTrophy, FaGripVertical } from 'react-icons/fa';
+import { motion, AnimatePresence } from 'framer-motion';
+import ShowcaseThemeModal from '../components/ShowcaseThemeModal';
+import AchievementsModal from '../components/AchievementsModal';
+import ShowcaseSortModal from '../components/ShowcaseSortModal';
+import Squares from '../../components/reactbits/Backgrounds/Squares/Squares';
+import Dither from '../../components/reactbits/Backgrounds/Dither/Dither';
+
+const MobileProfile = () => {
+  const { login } = useParams();
+  const { user, userProfile, logout } = useAuth();
+  const navigate = useNavigate();
+  const [profile, setProfile] = useState(null);
+  const [reviews, setReviews] = useState([]);
+  const [achievements, setAchievements] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const [isThemeModalOpen, setIsThemeModalOpen] = useState(false);
+  const [isAchievementsModalOpen, setIsAchievementsModalOpen] = useState(false);
+  const [isSortModalOpen, setIsSortModalOpen] = useState(false);
+  const [showcaseTheme, setShowcaseTheme] = useState({
+    type: 'none',
+    background: '#1a1a1a',
+    squares: {
+      direction: 'down',
+      speed: 0.25,
+      borderColor: '#FFFFFF',
+      squareSize: 20,
+      hoverFillColor: '#FF6A00',
+      backgroundColor: '#1a1a1a'
+    },
+    dither: {
+      waveSpeed: 0.05,
+      waveFrequency: 3,
+      waveAmplitude: 0.3,
+      waveColor: [0.4, 0.4, 0.4],
+      colorNum: 4,
+      pixelSize: 2,
+      enableMouseInteraction: false,
+      mouseRadius: 1
+    }
+  });
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        setLoading(true);
+        setError(null);
+
+        // Получаем данные пользователя
+        const userData = await pb.collection('users').getFirstListItem(`login="${login}"`, {
+          expand: 'showcase,showcase.media_id'
+        });
+
+        // Получаем рецензии пользователя
+        const reviewsData = await pb.collection('reviews').getList(1, 10, {
+          filter: `user_id="${userData.id}"`,
+          sort: '-created',
+          expand: 'media_id'
+        });
+
+        // Получаем достижения пользователя
+        const achievementsData = await getUserAchievements(userData.id);
+
+        // Парсим тему витрины
+        if (userData.showcase_theme) {
+          try {
+            const parsedTheme = typeof userData.showcase_theme === 'string' 
+              ? JSON.parse(userData.showcase_theme)
+              : userData.showcase_theme;
+            setShowcaseTheme(parsedTheme);
+          } catch (parseError) {
+            console.warn('Ошибка при парсинге showcase_theme:', parseError);
+          }
+        }
+
+        setProfile(userData);
+        setReviews(reviewsData.items);
+        setAchievements(achievementsData || []);
+      } catch (err) {
+        console.error('Error fetching profile data:', err);
+        setError('Не удалось загрузить данные профиля');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+  }, [login]);
+
+  const handleLogout = async () => {
+    try {
+      await logout();
+      navigate('/');
+    } catch (err) {
+      console.error('Error logging out:', err);
+    }
+  };
+
+  const handleThemeChange = async (theme) => {
+    try {
+      await pb.collection('users').update(profile.id, {
+        showcase_theme: JSON.stringify({
+          ...showcaseTheme,
+          type: theme
+        })
+      });
+      setShowcaseTheme(prev => ({
+        ...prev,
+        type: theme
+      }));
+      setIsThemeModalOpen(false);
+    } catch (err) {
+      console.error('Error updating theme:', err);
+    }
+  };
+
+  const handleSaveOrder = async (selectedReviewIds) => {
+    try {
+      await pb.collection('users').update(profile.id, {
+        showcase: selectedReviewIds
+      });
+      // Обновляем локальное состояние
+      setProfile(prev => ({
+        ...prev,
+        showcase: selectedReviewIds
+      }));
+      setIsSortModalOpen(false);
+    } catch (err) {
+      console.error('Error saving showcase order:', err);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-campfire-dark flex items-center justify-center">
+        <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-campfire-amber"></div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="min-h-screen bg-campfire-dark flex items-center justify-center p-4">
+        <div className="bg-status-error/20 text-status-error p-4 rounded-lg text-center">
+          {error}
+        </div>
+      </div>
+    );
+  }
+
+  const isOwnProfile = user && profile && user.id === profile.id;
+
+  return (
+    <motion.div 
+      className="min-h-screen bg-campfire-dark"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+    >
+      {/* Profile Header */}
+      <div className="relative h-[300px] mb-8">
+        <div className="absolute inset-0">
+          <img
+            src={getFileUrl(profile, 'banner_picture')}
+            alt="Profile banner"
+            className="w-full h-full object-cover"
+          />
+          <div className="absolute inset-0 bg-gradient-to-t from-campfire-dark via-campfire-dark/80 to-transparent"></div>
+        </div>
+        
+        <div className="absolute bottom-0 left-0 right-0 p-6">
+          <div className="flex items-end gap-4">
+            <div className="relative">
+              <div className="w-24 h-24 rounded-full overflow-hidden border-4 border-campfire-dark">
+                <img
+                  src={getFileUrl(profile, 'profile_picture') || '/default-avatar.png'}
+                  alt={profile.username}
+                  className="w-full h-full object-cover"
+                />
+              </div>
+            </div>
+            <div className="flex-1">
+              <h1 className="text-2xl font-bold text-campfire-light mb-1">
+                {profile.username}
+              </h1>
+              <div className="flex items-center gap-4 text-campfire-ash text-sm">
+                <div className="flex items-center">
+                  <FaStar className="text-campfire-amber mr-1" />
+                  <span>{profile.average_rating?.toFixed(1) || '0.0'}</span>
+                </div>
+                <span>•</span>
+                <span>{profile.review_count || 0} рецензий</span>
+              </div>
+            </div>
+          </div>
+
+          {isOwnProfile && (
+            <div className="flex flex-wrap gap-2 mt-4">
+              <Link
+                to="/profile/edit"
+                className="flex items-center gap-2 px-4 py-2 bg-campfire-amber text-campfire-dark rounded-lg hover:bg-campfire-amber/80 transition-colors"
+              >
+                <FaEdit />
+                <span>Редактировать</span>
+              </Link>
+              <button
+                onClick={() => setIsAchievementsModalOpen(true)}
+                className="flex items-center gap-2 px-4 py-2 bg-campfire-charcoal/50 text-campfire-light border border-campfire-ash/30 rounded-lg hover:bg-campfire-charcoal/70 transition-colors"
+              >
+                <FaTrophy />
+                <span>Достижения</span>
+              </button>
+              <button
+                onClick={handleLogout}
+                className="flex items-center gap-2 px-4 py-2 bg-campfire-charcoal/50 text-campfire-light border border-campfire-ash/30 rounded-lg hover:bg-campfire-charcoal/70 transition-colors"
+              >
+                <FaSignOutAlt />
+                <span>Выйти</span>
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Showcase Section */}
+      <section className="px-4 mb-8">
+        <div className="flex justify-between items-center mb-4">
+          <h2 className="text-xl font-bold text-campfire-light">Витрина рецензий</h2>
+          {isOwnProfile && (
+            <div className="flex gap-2">
+              <button
+                onClick={() => setIsThemeModalOpen(true)}
+                className="flex items-center gap-2 px-4 py-2 bg-campfire-charcoal/50 text-campfire-light border border-campfire-ash/30 rounded-lg hover:bg-campfire-charcoal/70 transition-colors"
+              >
+                <FaPalette />
+                <span>Тема</span>
+              </button>
+              <button
+                onClick={() => setIsSortModalOpen(true)}
+                className="flex items-center gap-2 px-4 py-2 bg-campfire-charcoal/50 text-campfire-light border border-campfire-ash/30 rounded-lg hover:bg-campfire-charcoal/70 transition-colors"
+              >
+                <FaGripVertical />
+                <span>Выбрать 3 рецензии</span>
+              </button>
+            </div>
+          )}
+        </div>
+        <div className="relative rounded-3xl overflow-hidden" style={{ backgroundColor: showcaseTheme.background }}>
+          {showcaseTheme.type === 'squares' && (
+            <div className="absolute inset-0 pointer-events-none" style={{ backgroundColor: showcaseTheme.squares.backgroundColor }}>
+              <Squares 
+                direction={showcaseTheme.squares.direction}
+                speed={showcaseTheme.squares.speed}
+                borderColor={showcaseTheme.squares.borderColor}
+                squareSize={showcaseTheme.squares.squareSize}
+                hoverFillColor={showcaseTheme.squares.hoverFillColor}
+              />
+            </div>
+          )}
+          {showcaseTheme.type === 'dither' && (
+            <div className="absolute inset-0 z-0" style={{ pointerEvents: showcaseTheme.dither.enableMouseInteraction ? 'auto' : 'none' }}>
+              <Dither
+                waveSpeed={showcaseTheme.dither.waveSpeed}
+                waveFrequency={showcaseTheme.dither.waveFrequency}
+                waveAmplitude={showcaseTheme.dither.waveAmplitude}
+                waveColor={showcaseTheme.dither.waveColor}
+                colorNum={showcaseTheme.dither.colorNum}
+                pixelSize={showcaseTheme.dither.pixelSize}
+                enableMouseInteraction={showcaseTheme.dither.enableMouseInteraction}
+                mouseRadius={showcaseTheme.dither.mouseRadius}
+              />
+            </div>
+          )}
+          <div className="relative z-10 p-4">
+            {profile.expand?.showcase && profile.expand.showcase.length > 0 ? (
+              <div className="space-y-4">
+                {profile.expand.showcase.map(review => (
+                  <Link
+                    key={review.id}
+                    to={`/media/${review.expand?.media_id?.path}`}
+                    className="block bg-campfire-charcoal/20 backdrop-blur-md border border-campfire-ash/30 rounded-lg p-4 hover:bg-campfire-charcoal/30 transition-colors"
+                  >
+                    <div className="flex items-start gap-4">
+                      <img
+                        src={getFileUrl(review.expand?.media_id, 'poster')}
+                        alt={review.expand?.media_id?.title}
+                        className="w-20 h-28 object-cover rounded-lg"
+                      />
+                      <div className="flex-1">
+                        <h3 className="text-lg font-semibold text-campfire-light mb-1">
+                          {review.expand?.media_id?.title}
+                        </h3>
+                        <div className="flex items-center gap-2 mb-2">
+                          <div className="flex items-center text-campfire-amber">
+                            <FaStar className="mr-1" />
+                            <span>{review.rating}</span>
+                          </div>
+                          <span className="text-campfire-ash">•</span>
+                          <span className="text-campfire-ash text-sm">
+                            {new Date(review.created).toLocaleDateString()}
+                          </span>
+                        </div>
+                        <p className="text-campfire-light/80 line-clamp-2">
+                          {review.text}
+                        </p>
+                        <div className="flex items-center gap-4 mt-2">
+                          <div className="flex items-center text-campfire-ash">
+                            <FaHeart className="mr-1" />
+                            <span>{review.likes?.length || 0}</span>
+                          </div>
+                          <div className="flex items-center text-campfire-ash">
+                            <FaComment className="mr-1" />
+                            <span>{review.comments?.length || 0}</span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </Link>
+                ))}
+              </div>
+            ) : (
+              <div className="text-center py-8 text-campfire-light">
+                {isOwnProfile ? (
+                  <>
+                    Ваша витрина пуста. <button onClick={() => setIsSortModalOpen(true)} className="text-campfire-amber hover:underline">Выберите</button> 3 лучшие рецензии!
+                  </>
+                ) : (
+                  'У пользователя пока нет рецензий на витрине.'
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      </section>
+
+      {/* Reviews Section */}
+      <section className="px-4 mb-8">
+        <h2 className="text-xl font-bold text-campfire-light mb-4">Рецензии</h2>
+        <div className="space-y-4">
+          {reviews.map((review) => (
+            <Link
+              key={review.id}
+              to={`/media/${review.expand?.media_id?.path}`}
+              className="block bg-campfire-charcoal/20 backdrop-blur-md border border-campfire-ash/30 rounded-lg p-4 hover:bg-campfire-charcoal/30 transition-colors"
+            >
+              <div className="flex items-start gap-4">
+                <img
+                  src={getFileUrl(review.expand?.media_id, 'poster')}
+                  alt={review.expand?.media_id?.title}
+                  className="w-20 h-28 object-cover rounded-lg"
+                />
+                <div className="flex-1">
+                  <h3 className="text-lg font-semibold text-campfire-light mb-1">
+                    {review.expand?.media_id?.title}
+                  </h3>
+                  <div className="flex items-center gap-2 mb-2">
+                    <div className="flex items-center text-campfire-amber">
+                      <FaStar className="mr-1" />
+                      <span>{review.rating}</span>
+                    </div>
+                    <span className="text-campfire-ash">•</span>
+                    <span className="text-campfire-ash text-sm">
+                      {new Date(review.created).toLocaleDateString()}
+                    </span>
+                  </div>
+                  <p className="text-campfire-light/80 line-clamp-2">
+                    {review.text}
+                  </p>
+                  <div className="flex items-center gap-4 mt-2">
+                    <div className="flex items-center text-campfire-ash">
+                      <FaHeart className="mr-1" />
+                      <span>{review.likes?.length || 0}</span>
+                    </div>
+                    <div className="flex items-center text-campfire-ash">
+                      <FaComment className="mr-1" />
+                      <span>{review.comments?.length || 0}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </Link>
+          ))}
+        </div>
+      </section>
+
+      <ShowcaseThemeModal
+        isOpen={isThemeModalOpen}
+        onClose={() => setIsThemeModalOpen(false)}
+        currentTheme={showcaseTheme.type}
+        onSelectTheme={handleThemeChange}
+      />
+
+      <AchievementsModal
+        isOpen={isAchievementsModalOpen}
+        onClose={() => setIsAchievementsModalOpen(false)}
+        userAchievements={achievements}
+      />
+
+      <ShowcaseSortModal
+        isOpen={isSortModalOpen}
+        onClose={() => setIsSortModalOpen(false)}
+        reviews={reviews}
+        showcase={profile?.showcase || []}
+        onSave={handleSaveOrder}
+      />
+    </motion.div>
+  );
+};
+
+export default MobileProfile; 
\ No newline at end of file
diff --git a/src/mobile/pages/MobileRating.jsx b/src/mobile/pages/MobileRating.jsx
new file mode 100644
index 0000000..2f99882
--- /dev/null
+++ b/src/mobile/pages/MobileRating.jsx
@@ -0,0 +1,235 @@
+import React, { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { listMedia, listUsersRankedByReviews, listUsersRankedByLevel, getReviewsByLikes, getFileUrl } from '../../services/pocketbaseService';
+import { useAuth } from '../../contexts/AuthContext';
+import { FaFire, FaStar, FaUsers, FaLevelUpAlt, FaMedal, FaHeart } from 'react-icons/fa';
+
+const MobileRating = () => {
+  const { userProfile } = useAuth();
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [activeTab, setActiveTab] = useState('media-rating');
+
+  const [mediaByRating, setMediaByRating] = useState([]);
+  const [mediaByReviews, setMediaByReviews] = useState([]);
+  const [usersByReviews, setUsersByReviews] = useState([]);
+  const [usersByLevel, setUsersByLevel] = useState([]);
+  const [reviewsByLikes, setReviewsByLikes] = useState([]);
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+
+  const fetchData = async () => {
+    try {
+      setLoading(true);
+      setError(null);
+
+      const [
+        mediaRatingData,
+        mediaReviewsData,
+        usersReviewsData,
+        usersLevelData,
+        reviewsLikesData
+      ] = await Promise.all([
+        listMedia(null, 1, 20, userProfile, false, true, '-average_rating'),
+        listMedia(null, 1, 20, userProfile, false, true, '-review_count'),
+        listUsersRankedByReviews(20),
+        listUsersRankedByLevel(20),
+        getReviewsByLikes(20)
+      ]);
+
+      setMediaByRating(mediaRatingData.data || []);
+      setMediaByReviews(mediaReviewsData.data || []);
+      setUsersByReviews(usersReviewsData || []);
+      setUsersByLevel(usersLevelData || []);
+      setReviewsByLikes(reviewsLikesData || []);
+
+    } catch (err) {
+      console.error('Error fetching rating data:', err);
+      setError('Не удалось загрузить данные рейтинга.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, [userProfile]);
+
+  const renderMediaList = (mediaItems) => (
+    <div className="grid grid-cols-2 gap-x-4 gap-y-6 mb-8 px-4">
+      {mediaItems.map((mediaItem) => (
+        <Link to={`/media/${mediaItem.path}`} key={mediaItem.id} className="block">
+          <div className="bg-campfire-charcoal/20 backdrop-blur-md border border-campfire-ash/30 rounded-2xl overflow-hidden">
+            <img
+              src={getFileUrl(mediaItem, 'poster')}
+              alt={mediaItem.title}
+              className="w-full aspect-[2/3] object-cover"
+            />
+            <div className="p-3">
+              <h3 className="text-campfire-light font-semibold text-sm mb-1 line-clamp-1">
+                {mediaItem.title}
+              </h3>
+              <div className="flex items-center space-x-2 text-xs">
+                <div className="flex items-center text-campfire-amber">
+                  <FaStar className="mr-1" />
+                  <span>{mediaItem.average_rating?.toFixed(1) || '0.0'}</span>
+                </div>
+                <span className="text-campfire-ash">
+                  {mediaItem.review_count || 0} обзоров
+                </span>
+              </div>
+            </div>
+          </div>
+        </Link>
+      ))}
+    </div>
+  );
+
+  const renderUserList = (userItems, rankType) => (
+    <div className="space-y-4 px-4">
+      {userItems.map((user, index) => (
+        <Link to={`/profile/${user.login}`} key={user.id} className="block">
+          <div className="bg-campfire-charcoal/20 backdrop-blur-md border border-campfire-ash/30 rounded-2xl shadow-md p-4 flex items-center mb-4">
+            <span className="text-campfire-amber font-bold text-xl mr-4 w-8 text-center">{index + 1}.</span>
+            <img
+              src={getFileUrl(user, 'profile_picture') || 'https://via.placeholder.com/150'}
+              alt={user.username}
+              className="w-12 h-12 rounded-full object-cover mr-4 border border-campfire-ash/30"
+            />
+            <div className="flex-grow">
+              <h3 className="text-campfire-light font-semibold">{user.username}</h3>
+              {rankType === 'reviews' && (
+                <p className="text-campfire-ash text-sm">Рецензий: <b className="text-campfire-amber">{user.review_count || 0}</b></p>
+              )}
+              {rankType === 'level' && (
+                <p className="text-campfire-ash text-sm">Уровень: <b className="text-campfire-amber">{user.level || 1}</b></p>
+              )}
+            </div>
+          </div>
+        </Link>
+      ))}
+    </div>
+  );
+
+  const renderReviewList = (reviews) => (
+    <div className="space-y-4 px-4">
+      {reviews.map((review, index) => (
+        <Link to={`/media/${review.expand.media_id.path}`} key={review.id} className="block">
+          <div className="bg-campfire-charcoal/20 backdrop-blur-md border border-campfire-ash/30 rounded-2xl p-4">
+            <div className="flex items-center mb-2">
+              <span className="text-campfire-amber font-bold text-xl mr-4 w-8 text-center">{index + 1}.</span>
+              <div className="flex-grow">
+                <h3 className="text-campfire-light font-semibold">{review.expand.media_id.title}</h3>
+                <p className="text-campfire-ash text-sm">Автор: {review.expand.user_id.username}</p>
+              </div>
+              <div className="flex items-center text-campfire-amber">
+                <FaHeart className="mr-1" />
+                <span>{review.likes?.length || 0}</span>
+              </div>
+            </div>
+            <div className="text-campfire-ash text-sm line-clamp-2" dangerouslySetInnerHTML={{ __html: review.content }} />
+          </div>
+        </Link>
+      ))}
+    </div>
+  );
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-campfire-amber"></div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="bg-status-error/20 text-status-error p-4 rounded-lg text-center">
+          {error}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-campfire-dark pb-4">
+      <h1 className="text-2xl font-bold mb-8 text-campfire-light text-center">Рейтинги</h1>
+
+      <div className="flex overflow-x-auto space-x-2 pb-4 mb-6 px-4">
+        <button
+          onClick={() => setActiveTab('media-rating')}
+          className={`px-4 py-2 text-sm font-medium whitespace-nowrap rounded-full ${
+            activeTab === 'media-rating' 
+              ? 'bg-campfire-amber text-campfire-dark' 
+              : 'bg-campfire-charcoal/20 text-campfire-ash'
+          }`}
+        >
+          Медиа по рейтингу
+        </button>
+        <button
+          onClick={() => setActiveTab('media-reviews')}
+          className={`px-4 py-2 text-sm font-medium whitespace-nowrap rounded-full ${
+            activeTab === 'media-reviews' 
+              ? 'bg-campfire-amber text-campfire-dark' 
+              : 'bg-campfire-charcoal/20 text-campfire-ash'
+          }`}
+        >
+          Медиа по рецензиям
+        </button>
+        <button
+          onClick={() => setActiveTab('reviews-likes')}
+          className={`px-4 py-2 text-sm font-medium whitespace-nowrap rounded-full ${
+            activeTab === 'reviews-likes' 
+              ? 'bg-campfire-amber text-campfire-dark' 
+              : 'bg-campfire-charcoal/20 text-campfire-ash'
+          }`}
+        >
+          Рецензии по лайкам
+        </button>
+        <button
+          onClick={() => setActiveTab('users-reviews')}
+          className={`px-4 py-2 text-sm font-medium whitespace-nowrap rounded-full ${
+            activeTab === 'users-reviews' 
+              ? 'bg-campfire-amber text-campfire-dark' 
+              : 'bg-campfire-charcoal/20 text-campfire-ash'
+          }`}
+        >
+          Пользователи по рецензиям
+        </button>
+        <button
+          onClick={() => setActiveTab('users-level')}
+          className={`px-4 py-2 text-sm font-medium whitespace-nowrap rounded-full ${
+            activeTab === 'users-level' 
+              ? 'bg-campfire-amber text-campfire-dark' 
+              : 'bg-campfire-charcoal/20 text-campfire-ash'
+          }`}
+        >
+          Пользователи по уровню
+        </button>
+      </div>
+
+      <div>
+        {activeTab === 'media-rating' && (
+          mediaByRating.length > 0 ? renderMediaList(mediaByRating) : <p className="text-campfire-ash text-center py-8">Нет данных для этого рейтинга.</p>
+        )}
+        {activeTab === 'media-reviews' && (
+          mediaByReviews.length > 0 ? renderMediaList(mediaByReviews) : <p className="text-campfire-ash text-center py-8">Нет данных для этого рейтинга.</p>
+        )}
+        {activeTab === 'reviews-likes' && (
+          reviewsByLikes.length > 0 ? renderReviewList(reviewsByLikes) : <p className="text-campfire-ash text-center py-8">Нет данных для этого рейтинга.</p>
+        )}
+        {activeTab === 'users-reviews' && (
+          usersByReviews.length > 0 ? renderUserList(usersByReviews, 'reviews') : <p className="text-campfire-ash text-center py-8">Нет данных для этого рейтинга.</p>
+        )}
+        {activeTab === 'users-level' && (
+          usersByLevel.length > 0 ? renderUserList(usersByLevel, 'level') : <p className="text-campfire-ash text-center py-8">Нет данных для этого рейтинга.</p>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default MobileRating; 
\ No newline at end of file
diff --git a/src/mobile/pages/MobileRegister.jsx b/src/mobile/pages/MobileRegister.jsx
new file mode 100644
index 0000000..bd76eb9
--- /dev/null
+++ b/src/mobile/pages/MobileRegister.jsx
@@ -0,0 +1,208 @@
+import React, { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { signUp } from '../../services/pocketbaseService';
+import { useAuth } from '../../contexts/AuthContext';
+import { FaEye, FaEyeSlash, FaUser, FaEnvelope, FaLock } from 'react-icons/fa';
+import MobileLogo from '../components/MobileLogo';
+import { FiHome } from 'react-icons/fi';
+
+const MobileRegister = () => {
+  const navigate = useNavigate();
+  const { setUser } = useAuth();
+  const [formData, setFormData] = useState({
+    username: '',
+    email: '',
+    password: '',
+    confirmPassword: ''
+  });
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: value
+    }));
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError('');
+
+    if (formData.password !== formData.confirmPassword) {
+      setError('Пароли не совпадают');
+      return;
+    }
+
+    if (formData.username.length < 3 || formData.username.length > 20) {
+      setError('Имя пользователя должно быть от 3 до 20 символов');
+      return;
+    }
+
+    if (!/^[a-zA-Z0-9_-]+$/.test(formData.username)) {
+      setError('Имя пользователя может содержать только буквы, цифры, дефис и подчеркивание');
+      return;
+    }
+
+    if (formData.password.length < 6) {
+      setError('Пароль должен быть не менее 6 символов');
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      const { user } = await signUp(formData.username, formData.password, formData.email);
+      setUser(user);
+      navigate('/');
+    } catch (err) {
+      if (err.message.includes('username')) {
+        setError('Это имя пользователя уже занято');
+      } else if (err.message.includes('email')) {
+        setError('Этот email уже зарегистрирован');
+      } else {
+        setError(err.message || 'Не удалось зарегистрироваться');
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-campfire-dark flex flex-col justify-center items-center p-4">
+      <div className="w-full flex flex-col items-center mb-6">
+        <MobileLogo className="w-20 h-20 mb-2" />
+        <Link to="/" className="flex items-center gap-2 text-campfire-amber hover:text-campfire-ember text-sm font-medium mt-2">
+          <FiHome /> На главную
+        </Link>
+      </div>
+      <div className="w-full max-w-md">
+        <div className="bg-campfire-charcoal/20 backdrop-blur-md border border-campfire-ash/30 rounded-xl p-6">
+          <h1 className="text-2xl font-bold text-campfire-light mb-6 text-center">Регистрация</h1>
+          
+          {error && (
+            <div className="bg-status-error/20 text-status-error p-3 rounded-lg mb-4 text-center">
+              {error}
+            </div>
+          )}
+
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div className="relative">
+              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                <FaUser className="text-campfire-ash" />
+              </div>
+              <input
+                type="text"
+                name="username"
+                value={formData.username}
+                onChange={handleChange}
+                placeholder="Имя пользователя"
+                required
+                pattern="[a-zA-Z0-9_-]+"
+                title="Только буквы, цифры, дефис и подчеркивание"
+                className="w-full pl-10 pr-4 py-2 bg-campfire-charcoal/20 border border-campfire-ash/30 rounded-lg text-campfire-light placeholder-campfire-ash focus:outline-none focus:border-campfire-amber"
+              />
+            </div>
+
+            <div className="relative">
+              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                <FaEnvelope className="text-campfire-ash" />
+              </div>
+              <input
+                type="email"
+                name="email"
+                value={formData.email}
+                onChange={handleChange}
+                placeholder="Email"
+                required
+                className="w-full pl-10 pr-4 py-2 bg-campfire-charcoal/20 border border-campfire-ash/30 rounded-lg text-campfire-light placeholder-campfire-ash focus:outline-none focus:border-campfire-amber"
+              />
+            </div>
+
+            <div className="relative">
+              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                <FaLock className="text-campfire-ash" />
+              </div>
+              <input
+                type={showPassword ? 'text' : 'password'}
+                name="password"
+                value={formData.password}
+                onChange={handleChange}
+                placeholder="Пароль"
+                required
+                minLength="6"
+                className="w-full pl-10 pr-12 py-2 bg-campfire-charcoal/20 border border-campfire-ash/30 rounded-lg text-campfire-light placeholder-campfire-ash focus:outline-none focus:border-campfire-amber"
+              />
+              <button
+                type="button"
+                onClick={() => setShowPassword(!showPassword)}
+                className="absolute inset-y-0 right-0 pr-3 flex items-center"
+              >
+                {showPassword ? (
+                  <FaEyeSlash className="text-campfire-ash hover:text-campfire-light" />
+                ) : (
+                  <FaEye className="text-campfire-ash hover:text-campfire-light" />
+                )}
+              </button>
+            </div>
+
+            <div className="relative">
+              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                <FaLock className="text-campfire-ash" />
+              </div>
+              <input
+                type={showConfirmPassword ? 'text' : 'password'}
+                name="confirmPassword"
+                value={formData.confirmPassword}
+                onChange={handleChange}
+                placeholder="Подтвердите пароль"
+                required
+                minLength="6"
+                className="w-full pl-10 pr-12 py-2 bg-campfire-charcoal/20 border border-campfire-ash/30 rounded-lg text-campfire-light placeholder-campfire-ash focus:outline-none focus:border-campfire-amber"
+              />
+              <button
+                type="button"
+                onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                className="absolute inset-y-0 right-0 pr-3 flex items-center"
+              >
+                {showConfirmPassword ? (
+                  <FaEyeSlash className="text-campfire-ash hover:text-campfire-light" />
+                ) : (
+                  <FaEye className="text-campfire-ash hover:text-campfire-light" />
+                )}
+              </button>
+            </div>
+
+            <button
+              type="submit"
+              disabled={loading}
+              className="w-full py-2 bg-campfire-amber text-campfire-dark font-semibold rounded-lg hover:bg-campfire-amber/90 disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {loading ? (
+                <div className="flex items-center justify-center">
+                  <div className="animate-spin rounded-full h-5 w-5 border-t-2 border-b-2 border-campfire-dark"></div>
+                </div>
+              ) : (
+                'Зарегистрироваться'
+              )}
+            </button>
+          </form>
+
+          <div className="mt-4 text-center">
+            <p className="text-campfire-ash">
+              Уже есть аккаунт?{' '}
+              <Link to="/auth/login" className="text-campfire-amber hover:text-campfire-amber/90">
+                Войти
+              </Link>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MobileRegister; 
\ No newline at end of file
diff --git a/src/mobile/pages/MobileReview.jsx b/src/mobile/pages/MobileReview.jsx
new file mode 100644
index 0000000..5a369ed
--- /dev/null
+++ b/src/mobile/pages/MobileReview.jsx
@@ -0,0 +1,273 @@
+import React, { useState, useEffect } from 'react';
+import { useParams, Link, useNavigate } from 'react-router-dom';
+import { pb } from '../../services/pocketbaseService';
+import { getFileUrl } from '../../services/pocketbaseService';
+import { useAuth } from '../../contexts/AuthContext';
+import { FaArrowLeft, FaStar, FaHeart, FaComment, FaEdit, FaTrash } from 'react-icons/fa';
+import { formatDistanceToNow } from 'date-fns';
+import { ru } from 'date-fns/locale';
+
+const MobileReview = () => {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const { user } = useAuth();
+  const [review, setReview] = useState(null);
+  const [comments, setComments] = useState([]);
+  const [newComment, setNewComment] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [liked, setLiked] = useState(false);
+
+  useEffect(() => {
+    fetchReview();
+  }, [id]);
+
+  const fetchReview = async () => {
+    try {
+      const record = await pb.collection('reviews').getOne(id, {
+        expand: 'user_id,media_id'
+      });
+      setReview(record);
+
+      // Получаем комментарии отдельно
+      const comments = await pb.collection('comments').getList(1, 50, {
+        filter: `review_id = "${id}"`,
+        expand: 'user_id',
+        sort: '-created'
+      });
+      setComments(comments.items);
+
+      if (user) {
+        const likes = await pb.collection('likes').getList(1, 1, {
+          filter: `review_id = "${id}" && user_id = "${user.id}"`
+        });
+        setLiked(likes.items.length > 0);
+      }
+    } catch (error) {
+      console.error('Error fetching review:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleLike = async () => {
+    if (!user) {
+      navigate('/auth/login');
+      return;
+    }
+
+    try {
+      if (liked) {
+        const likes = await pb.collection('likes').getList(1, 1, {
+          filter: `review_id = "${id}" && user_id = "${user.id}"`
+        });
+        if (likes.items.length > 0) {
+          await pb.collection('likes').delete(likes.items[0].id);
+        }
+      } else {
+        await pb.collection('likes').create({
+          review_id: id,
+          user_id: user.id
+        });
+      }
+      setLiked(!liked);
+      fetchReview();
+    } catch (error) {
+      console.error('Error toggling like:', error);
+    }
+  };
+
+  const handleComment = async (e) => {
+    e.preventDefault();
+    if (!user) {
+      navigate('/auth/login');
+      return;
+    }
+
+    try {
+      await pb.collection('comments').create({
+        review_id: id,
+        user_id: user.id,
+        content: newComment
+      });
+      setNewComment('');
+      fetchReview();
+    } catch (error) {
+      console.error('Error adding comment:', error);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (window.confirm('Вы уверены, что хотите удалить этот обзор?')) {
+      try {
+        await pb.collection('reviews').delete(id);
+        navigate(-1);
+      } catch (error) {
+        console.error('Error deleting review:', error);
+      }
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-campfire-amber"></div>
+      </div>
+    );
+  }
+
+  if (!review) {
+    return (
+      <div className="flex flex-col items-center justify-center min-h-screen px-4 text-center">
+        <h1 className="text-2xl font-bold text-campfire-amber mb-4">Обзор не найден</h1>
+        <Link
+          to="/"
+          className="px-6 py-3 bg-campfire-amber text-campfire-dark rounded-lg font-semibold hover:bg-campfire-amber/90 transition-colors"
+        >
+          Вернуться на главную
+        </Link>
+      </div>
+    );
+  }
+
+  const isOwnReview = user && user.id === review.user_id;
+
+  return (
+    <div className="px-4 py-4">
+      <button
+        onClick={() => navigate(-1)}
+        className="flex items-center text-campfire-light mb-6"
+      >
+        <FaArrowLeft className="mr-2" />
+        Назад
+      </button>
+
+      <div className="bg-campfire-dark/50 border border-campfire-ash/30 rounded-lg overflow-hidden mb-6">
+        <div className="relative">
+          <img
+            src={getFileUrl(review.expand?.media_id, 'poster')}
+            alt={review.expand?.media_id?.title}
+            className="w-full h-64 object-cover"
+          />
+          <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-campfire-dark to-transparent p-4">
+            <h1 className="text-xl font-bold text-campfire-light">
+              {review.expand?.media_id?.title}
+            </h1>
+          </div>
+        </div>
+
+        <div className="p-4">
+          <div className="flex items-center justify-between mb-4">
+            <div className="flex items-center space-x-2">
+              <img
+                src={getFileUrl(review.expand?.user_id, 'profile_picture')}
+                alt={review.expand?.user_id?.username}
+                className="w-8 h-8 rounded-full"
+              />
+              <div>
+                <Link
+                  to={`/profile/${review.expand?.user_id?.username}`}
+                  className="text-campfire-light font-semibold"
+                >
+                  {review.expand?.user_id?.username}
+                </Link>
+                <p className="text-campfire-ash text-sm">
+                  {formatDistanceToNow(new Date(review.created), { addSuffix: true, locale: ru })}
+                </p>
+              </div>
+            </div>
+            {isOwnReview && (
+              <div className="flex space-x-2">
+                <Link
+                  to={`/review/${review.id}/edit`}
+                  className="p-2 text-campfire-light hover:text-campfire-amber"
+                >
+                  <FaEdit />
+                </Link>
+                <button
+                  onClick={handleDelete}
+                  className="p-2 text-campfire-light hover:text-red-500"
+                >
+                  <FaTrash />
+                </button>
+              </div>
+            )}
+          </div>
+
+          <div className="flex items-center space-x-4 mb-4">
+            <span className="text-campfire-amber">
+              <FaStar className="inline mr-1" />
+              {review.rating}/10
+            </span>
+            <button
+              onClick={handleLike}
+              className={`flex items-center space-x-1 ${
+                liked ? 'text-red-500' : 'text-campfire-light'
+              }`}
+            >
+              <FaHeart />
+              <span>{review.likes || 0}</span>
+            </button>
+          </div>
+
+          <p className="text-campfire-light whitespace-pre-wrap">
+            {review.content}
+          </p>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <h2 className="text-lg font-semibold text-campfire-light">Комментарии</h2>
+
+        <form onSubmit={handleComment} className="flex space-x-2">
+          <input
+            type="text"
+            value={newComment}
+            onChange={(e) => setNewComment(e.target.value)}
+            placeholder="Написать комментарий..."
+            className="flex-1 px-4 py-2 bg-campfire-dark/50 border border-campfire-ash/30 rounded-lg text-campfire-light focus:outline-none focus:border-campfire-amber"
+          />
+          <button
+            type="submit"
+            disabled={!newComment.trim()}
+            className="px-4 py-2 bg-campfire-amber text-campfire-dark rounded-lg font-semibold hover:bg-campfire-amber/90 transition-colors disabled:opacity-50"
+          >
+            Отправить
+          </button>
+        </form>
+
+        <div className="space-y-4">
+          {comments.map((comment) => (
+            <div
+              key={comment.id}
+              className="bg-campfire-dark/50 border border-campfire-ash/30 rounded-lg p-4"
+            >
+              <div className="flex items-center space-x-2 mb-2">
+                <img
+                  src={getFileUrl(comment.expand?.user_id, 'profile_picture')}
+                  alt={comment.expand?.user_id?.username}
+                  className="w-6 h-6 rounded-full"
+                />
+                <div>
+                  <Link
+                    to={`/profile/${comment.expand?.user_id?.username}`}
+                    className="text-campfire-light font-semibold text-sm"
+                  >
+                    {comment.expand?.user_id?.username}
+                  </Link>
+                  <p className="text-campfire-ash text-xs">
+                    {formatDistanceToNow(new Date(comment.created), { addSuffix: true, locale: ru })}
+                  </p>
+                </div>
+              </div>
+              <p className="text-campfire-light text-sm">
+                {comment.content}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MobileReview; 
\ No newline at end of file
diff --git a/src/mobile/pages/MobileSearch.jsx b/src/mobile/pages/MobileSearch.jsx
new file mode 100644
index 0000000..b18423f
--- /dev/null
+++ b/src/mobile/pages/MobileSearch.jsx
@@ -0,0 +1,174 @@
+import React, { useState, useEffect } from 'react';
+import { Link, useSearchParams } from 'react-router-dom';
+import { pb } from '../../services/pocketbaseService';
+import { getFileUrl } from '../../services/pocketbaseService';
+import { FaSearch, FaTimes } from 'react-icons/fa';
+
+const MobileSearch = () => {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [searchQuery, setSearchQuery] = useState(searchParams.get('q') || '');
+  const [results, setResults] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [activeTab, setActiveTab] = useState('all');
+
+  useEffect(() => {
+    if (searchQuery) {
+      performSearch();
+    }
+  }, [searchQuery, activeTab]);
+
+  const performSearch = async () => {
+    setLoading(true);
+    try {
+      let filter = '';
+      if (activeTab === 'media') {
+        filter = `title ~ "${searchQuery}"`;
+      } else if (activeTab === 'users') {
+        filter = `username ~ "${searchQuery}"`;
+      } else {
+        const [mediaResults, userResults] = await Promise.all([
+          pb.collection('media').getList(1, 10, {
+            filter: `title ~ "${searchQuery}"`
+          }),
+          pb.collection('users').getList(1, 10, {
+            filter: `username ~ "${searchQuery}"`
+          })
+        ]);
+        setResults([...mediaResults.items, ...userResults.items]);
+        setLoading(false);
+        return;
+      }
+
+      const records = await pb.collection(activeTab === 'users' ? 'users' : 'media').getList(1, 20, {
+        filter: filter
+      });
+      setResults(records.items);
+    } catch (error) {
+      console.error('Error performing search:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSearch = (e) => {
+    e.preventDefault();
+    setSearchParams({ q: searchQuery });
+  };
+
+  const clearSearch = () => {
+    setSearchQuery('');
+    setSearchParams({});
+    setResults([]);
+  };
+
+  return (
+    <div className="px-4 py-4">
+      <form onSubmit={handleSearch} className="mb-6">
+        <div className="relative">
+          <input
+            type="text"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            placeholder="Поиск..."
+            className="w-full pl-10 pr-10 py-2 bg-campfire-dark/50 border border-campfire-ash/30 rounded-lg text-campfire-light focus:outline-none focus:border-campfire-amber"
+          />
+          <FaSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 text-campfire-ash" />
+          {searchQuery && (
+            <button
+              type="button"
+              onClick={clearSearch}
+              className="absolute right-3 top-1/2 transform -translate-y-1/2 text-campfire-ash hover:text-campfire-light"
+            >
+              <FaTimes />
+            </button>
+          )}
+        </div>
+      </form>
+
+      <div className="flex space-x-4 mb-6">
+        <button
+          onClick={() => setActiveTab('all')}
+          className={`flex-1 py-2 px-4 rounded-lg ${
+            activeTab === 'all'
+              ? 'bg-campfire-amber text-campfire-dark'
+              : 'bg-campfire-dark/50 text-campfire-light'
+          }`}
+        >
+          Все
+        </button>
+        <button
+          onClick={() => setActiveTab('media')}
+          className={`flex-1 py-2 px-4 rounded-lg ${
+            activeTab === 'media'
+              ? 'bg-campfire-amber text-campfire-dark'
+              : 'bg-campfire-dark/50 text-campfire-light'
+          }`}
+        >
+          Медиа
+        </button>
+        <button
+          onClick={() => setActiveTab('users')}
+          className={`flex-1 py-2 px-4 rounded-lg ${
+            activeTab === 'users'
+              ? 'bg-campfire-amber text-campfire-dark'
+              : 'bg-campfire-dark/50 text-campfire-light'
+          }`}
+        >
+          Пользователи
+        </button>
+      </div>
+
+      {loading ? (
+        <div className="flex items-center justify-center py-8">
+          <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-campfire-amber"></div>
+        </div>
+      ) : results.length > 0 ? (
+        <div className="space-y-4">
+          {results.map((item) => (
+            <Link
+              key={item.id}
+              to={activeTab === 'users' ? `/profile/${item.username}` : `/media/${item.id}`}
+              className="flex items-center space-x-4 bg-campfire-dark/50 border border-campfire-ash/30 rounded-lg p-4"
+            >
+              {activeTab === 'users' ? (
+                <>
+                  <img
+                    src={getFileUrl(item, 'profile_picture')}
+                    alt={item.username}
+                    className="w-12 h-12 rounded-full object-cover"
+                  />
+                  <div>
+                    <h3 className="text-campfire-light font-semibold">{item.username}</h3>
+                    <p className="text-campfire-ash text-sm">
+                      {item.reviews_count || 0} обзоров
+                    </p>
+                  </div>
+                </>
+              ) : (
+                <>
+                  <img
+                    src={getFileUrl(item, 'poster')}
+                    alt={item.title}
+                    className="w-12 h-12 rounded-lg object-cover"
+                  />
+                  <div>
+                    <h3 className="text-campfire-light font-semibold">{item.title}</h3>
+                    <p className="text-campfire-ash text-sm">
+                      {item.type === 'movie' ? 'Фильм' : item.type === 'series' ? 'Сериал' : 'Игра'}
+                    </p>
+                  </div>
+                </>
+              )}
+            </Link>
+          ))}
+        </div>
+      ) : searchQuery ? (
+        <div className="text-center py-8">
+          <p className="text-campfire-light">Ничего не найдено</p>
+        </div>
+      ) : null}
+    </div>
+  );
+};
+
+export default MobileSearch; 
\ No newline at end of file
diff --git a/src/mobile/routes.jsx b/src/mobile/routes.jsx
new file mode 100644
index 0000000..54af8e0
--- /dev/null
+++ b/src/mobile/routes.jsx
@@ -0,0 +1,57 @@
+import React, { lazy, Suspense } from 'react';
+import { Routes, Route, Navigate } from 'react-router-dom';
+import MobileLayout from './layout/MobileLayout';
+import LoadingSpinner from '../components/common/LoadingSpinner';
+import { useAuth } from '../contexts/AuthContext';
+
+const MobileHome = lazy(() => import('./pages/MobileHome'));
+const MobileCatalog = lazy(() => import('./pages/MobileCatalog'));
+const MobileProfile = lazy(() => import('./pages/MobileProfile'));
+const MobileRating = lazy(() => import('./pages/MobileRating'));
+const MobileLogin = lazy(() => import('./pages/MobileLogin'));
+const MobileRegister = lazy(() => import('./pages/MobileRegister'));
+const MobileMediaOverviewPage = lazy(() => import('./pages/MobileMediaOverviewPage'));
+const MobileMediaForm = lazy(() => import('./components/MobileMediaForm'));
+const MobileNotFound = lazy(() => import('./pages/MobileNotFound'));
+
+const LazyLoad = ({ children }) => (
+  <Suspense fallback={<LoadingSpinner />}>{children}</Suspense>
+);
+
+const PrivateRoute = ({ children }) => {
+  const { isAuthenticated } = useAuth();
+  return isAuthenticated ? children : <Navigate to="/auth/login" />;
+};
+
+const MobileRoutes = () => {
+  return (
+    <Routes>
+      {/* Страницы авторизации */}
+      <Route path="/auth">
+        <Route path="login" element={<LazyLoad><MobileLogin /></LazyLoad>} />
+        <Route path="register" element={<LazyLoad><MobileRegister /></LazyLoad>} />
+      </Route>
+
+      {/* Все остальные страницы внутри MobileLayout */}
+      <Route path="/" element={<MobileLayout />}>
+        <Route index element={<LazyLoad><MobileHome /></LazyLoad>} />
+        <Route path="catalog" element={<LazyLoad><MobileCatalog /></LazyLoad>} />
+        <Route path="rating" element={<LazyLoad><MobileRating /></LazyLoad>} />
+        <Route path="media/:path" element={<LazyLoad><MobileMediaOverviewPage /></LazyLoad>} />
+        <Route path="profile" element={<PrivateRoute><LazyLoad><MobileProfile /></LazyLoad></PrivateRoute>} />
+        <Route path="profile/:login" element={<LazyLoad><MobileProfile /></LazyLoad>} />
+        <Route path="*" element={<LazyLoad><MobileNotFound /></LazyLoad>} />
+      </Route>
+      <Route
+        path="/media/new"
+        element={
+          <PrivateRoute>
+            <MobileMediaForm />
+          </PrivateRoute>
+        }
+      />
+    </Routes>
+  );
+};
+
+export default MobileRoutes; 
\ No newline at end of file
diff --git a/src/mobile/routes/MobileRoutes.jsx b/src/mobile/routes/MobileRoutes.jsx
new file mode 100644
index 0000000..f489ac2
--- /dev/null
+++ b/src/mobile/routes/MobileRoutes.jsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import { Routes, Route, Navigate } from 'react-router-dom';
+import { useAuth } from '../../contexts/AuthContext';
+import MobileHome from '../pages/MobileHome';
+import MobileProfile from '../pages/MobileProfile';
+import MobileMediaOverviewPage from '../pages/MobileMediaOverviewPage';
+import MobileMediaForm from '../components/MobileMediaForm';
+import MobileLogin from '../pages/MobileLogin';
+import MobileRegister from '../pages/MobileRegister';
+import MobileCatalog from '../pages/MobileCatalog';
+import MobileRating from '../pages/MobileRating';
+import MobileSearch from '../pages/MobileSearch';
+
+const PrivateRoute = ({ children }) => {
+  const { user } = useAuth();
+  return user ? children : <Navigate to="/login" />;
+};
+
+const MobileRoutes = () => {
+  return (
+    <Routes>
+      <Route path="/" element={<MobileHome />} />
+      <Route path="/login" element={<MobileLogin />} />
+      <Route path="/register" element={<MobileRegister />} />
+      <Route path="/catalog" element={<MobileCatalog />} />
+      <Route path="/rating" element={<MobileRating />} />
+      <Route path="/search" element={<MobileSearch />} />
+      <Route path="/profile/:login" element={<MobileProfile />} />
+      <Route path="/media/:path" element={<MobileMediaOverviewPage />} />
+      <Route
+        path="/media/:path/edit"
+        element={
+          <PrivateRoute>
+            <MobileMediaForm />
+          </PrivateRoute>
+        }
+      />
+      <Route
+        path="/media/new"
+        element={
+          <PrivateRoute>
+            <MobileMediaForm />
+          </PrivateRoute>
+        }
+      />
+    </Routes>
+  );
+};
+
+export default MobileRoutes; 
\ No newline at end of file
diff --git a/src/pages/AdminPage.jsx b/src/pages/AdminPage.jsx
new file mode 100644
index 0000000..7875bd2
--- /dev/null
+++ b/src/pages/AdminPage.jsx
@@ -0,0 +1,17 @@
+import NotificationManager from '../components/admin/NotificationManager';
+
+const tabs = [
+    { id: 'dashboard', label: 'Обзор', icon: <FaTachometerAlt /> },
+    { id: 'users', label: 'Пользователи', icon: <FaUsers /> },
+    { id: 'media', label: 'Медиа', icon: <FaFilm /> },
+    { id: 'reviews', label: 'Рецензии', icon: <FaStar /> },
+    { id: 'achievements', label: 'Достижения', icon: <FaTrophy /> },
+    { id: 'notifications', label: 'Уведомления', icon: <FaBell /> },
+    { id: 'settings', label: 'Настройки', icon: <FaCog /> }
+];
+
+{activeTab === 'notifications' && (
+    <div className="space-y-6">
+        <NotificationManager />
+    </div>
+)} 
\ No newline at end of file
diff --git a/src/pages/HomePage.css b/src/pages/HomePage.css
new file mode 100644
index 0000000..ed3eaa1
--- /dev/null
+++ b/src/pages/HomePage.css
@@ -0,0 +1,8 @@
+.scroll-container {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.scroll-container::-webkit-scrollbar {
+  display: none;
+} 
\ No newline at end of file
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
index 74e72fb..9fba5ca 100644
--- a/src/pages/HomePage.jsx
+++ b/src/pages/HomePage.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useCallback } from 'react';
+import React, { useEffect, useState, useCallback, useRef } from 'react';
 import { Link } from 'react-router-dom';
 import { getLatestReviews, listMedia, listUsersRankedByReviews, getFileUrl, getFeaturedMedia } from '../services/pocketbaseService';
 import { useAuth } from '../contexts/AuthContext';
@@ -15,6 +15,9 @@ import GridSection from '../components/home/GridSection';
 import FeaturedMedia from '../components/home/FeaturedMedia';
 import TiltedCard from '../components/reactbits/Components/TiltedCard/TiltedCard';
 import { motion, AnimatePresence } from 'framer-motion';
+import MediaCard from '../components/media/MediaCard';
+import { useMedia } from '../contexts/MediaContext';
+import './HomePage.css';
 
 const HomePage = () => {
   const { userProfile } = useAuth();
@@ -30,6 +33,9 @@ const HomePage = () => {
   const [posters, setPosters] = useState([]);
   const [featuredMedia, setFeaturedMedia] = useState([]);
   const [isDataReady, setIsDataReady] = useState(false);
+  const popularContainerRef = useRef(null);
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(false);
 
   const containerVariants = {
     hidden: { opacity: 0 },
@@ -70,6 +76,81 @@ const HomePage = () => {
     }
   };
 
+  const checkScroll = useCallback(() => {
+    if (!popularContainerRef.current) return;
+    
+    const container = popularContainerRef.current;
+    const { scrollLeft, scrollWidth, clientWidth } = container;
+    
+    // Добавляем отладочную информацию
+    console.log('Scroll check:', {
+      scrollLeft,
+      scrollWidth,
+      clientWidth,
+      canScrollLeft: scrollLeft > 0,
+      canScrollRight: scrollLeft < scrollWidth - clientWidth - 1
+    });
+    
+    setCanScrollLeft(scrollLeft > 0);
+    setCanScrollRight(scrollLeft < scrollWidth - clientWidth - 1);
+  }, []);
+
+  useEffect(() => {
+    const container = popularContainerRef.current;
+    if (!container) return;
+
+    // Принудительно проверяем состояние после монтирования
+    setTimeout(() => {
+      checkScroll();
+    }, 100);
+
+    container.addEventListener('scroll', checkScroll);
+    window.addEventListener('resize', checkScroll);
+
+    return () => {
+      container.removeEventListener('scroll', checkScroll);
+      window.removeEventListener('resize', checkScroll);
+    };
+  }, [checkScroll, popularMedia]);
+
+  const scroll = (direction) => {
+    if (!popularContainerRef.current) return;
+
+    const container = popularContainerRef.current;
+    const scrollAmount = container.clientWidth * 0.8;
+
+    // Если достигли конца вправо, переходим в начало
+    if (direction === 'right' && container.scrollLeft >= container.scrollWidth - container.clientWidth - 10) {
+      container.scrollTo({
+        left: 0,
+        behavior: 'smooth'
+      });
+      return;
+    }
+
+    // Если достигли начала влево, переходим в конец
+    if (direction === 'left' && container.scrollLeft <= 10) {
+      container.scrollTo({
+        left: container.scrollWidth,
+        behavior: 'smooth'
+      });
+      return;
+    }
+
+    container.scrollBy({
+      left: direction === 'left' ? -scrollAmount : scrollAmount,
+      behavior: 'smooth'
+    });
+  };
+
+  // Добавляем эффект для принудительной проверки при изменении данных
+  useEffect(() => {
+    if (popularMedia.length > 0) {
+      // Даем время на рендеринг и загрузку изображений
+      setTimeout(checkScroll, 500);
+    }
+  }, [popularMedia, checkScroll]);
+
   const fetchData = useCallback(async () => {
     try {
       setLoading(true);
@@ -90,40 +171,25 @@ const HomePage = () => {
         getMediaCount(),
         getReviewsCount()
       ]);
-
-      console.log('[HomePage] Получены медиа:', {
-        total: popularMediaData.count,
-        items: popularMediaData.data.map(item => ({
-          id: item.id,
-          title: item.title,
-          poster: item.poster
-        }))
-      });
       
-      setPopularMedia(popularMediaData.data || []);
-      setLatestAddedMedia(latestAddedMediaData.data || []);
-      setLatestReviews(latestReviewsData || []);
-      setTopUsers(topUsersData || []);
+      if (popularMediaData?.data) setPopularMedia(popularMediaData.data);
+      if (latestAddedMediaData?.data) setLatestAddedMedia(latestAddedMediaData.data);
+      if (latestReviewsData) setLatestReviews(latestReviewsData);
+      if (topUsersData) setTopUsers(topUsersData);
 
       setStats({
         mediaCount: parseInt(mediaCount) || 0,
         reviewsCount: parseInt(reviewsCount) || 0
       });
 
-      const posterUrls = latestAddedMediaData.data
-        .filter(item => {
-          console.log('[HomePage] Проверка постера для:', item.title, 'Постер:', item.poster);
-          return item.poster;
-        })
-        .slice(0, 30)
-        .map(item => {
-          const url = getFileUrl(item, 'poster');
-          console.log('[HomePage] URL постера для:', item.title, 'URL:', url);
-          return url;
-        });
+      if (latestAddedMediaData?.data) {
+        const posterUrls = latestAddedMediaData.data
+          .filter(item => item.poster)
+          .slice(0, 30)
+          .map(item => getFileUrl(item, 'poster'));
 
-      console.log('[HomePage] Итоговый список постеров:', posterUrls);
-      setPosters(posterUrls);
+        setPosters(posterUrls);
+      }
 
       await new Promise(resolve => setTimeout(resolve, 1000));
       setIsDataReady(true);
@@ -140,21 +206,11 @@ const HomePage = () => {
     fetchData();
   }, [fetchData]);
 
-  useEffect(() => {
-    const handleClick = (e) => {
-      console.log('[ClickSpark] Добавление искры:', e.clientX, e.clientY);
-      addSpark(e.clientX, e.clientY);
-    };
-
-    document.addEventListener('click', handleClick);
-    return () => document.removeEventListener('click', handleClick);
-  }, [addSpark]);
-
   useEffect(() => {
     const fetchFeaturedMedia = async () => {
       try {
         const media = await getFeaturedMedia();
-        setFeaturedMedia(media);
+        if (media) setFeaturedMedia(media);
       } catch (error) {
         console.error('Error fetching featured media:', error);
       }
@@ -211,7 +267,7 @@ const HomePage = () => {
         <div className="space-y-4">
             {topUsers.map((user) => (
                 <div key={user.id} className="flex items-center space-x-4 bg-campfire-dark/50 p-4 rounded-lg">
-                    <Link to={`/profile/${user.username}`} className="flex-shrink-0">
+                    <Link to={`/profile/${user.login}`} className="flex-shrink-0">
                         <img
                             src={getFileUrl(user, 'profile_picture', { thumb: '100x100' }) || '/default-avatar.png'}
                             alt={user.username}
@@ -219,7 +275,7 @@ const HomePage = () => {
                         />
                     </Link>
                     <div className="flex-grow">
-                        <Link to={`/profile/${user.username}`} className="text-campfire-light hover:text-campfire-gold">
+                        <Link to={`/profile/${user.login}`} className="text-campfire-light hover:text-campfire-gold">
                             <h3 className="text-lg font-semibold">{user.username}</h3>
                         </Link>
                         <p className="text-campfire-ash text-sm">Рецензий: {user.review_count}</p>
@@ -230,7 +286,103 @@ const HomePage = () => {
     );
   };
 
-console.log(posters)
+  const PopularSection = ({ popularMedia }) => {
+    const containerRef = useRef(null);
+    const [canScrollLeft, setCanScrollLeft] = useState(false);
+    const [canScrollRight, setCanScrollRight] = useState(false);
+
+    const checkScroll = useCallback(() => {
+      if (!containerRef.current) return;
+      
+      const { scrollLeft, scrollWidth, clientWidth } = containerRef.current;
+      setCanScrollLeft(scrollLeft > 0);
+      setCanScrollRight(scrollLeft < scrollWidth - clientWidth - 1);
+    }, []);
+
+    useEffect(() => {
+      const container = containerRef.current;
+      if (!container) return;
+
+      checkScroll();
+      container.addEventListener('scroll', checkScroll);
+      window.addEventListener('resize', checkScroll);
+
+      return () => {
+        container.removeEventListener('scroll', checkScroll);
+        window.removeEventListener('resize', checkScroll);
+      };
+    }, [checkScroll, popularMedia]);
+
+    const scroll = (direction) => {
+      if (!containerRef.current) return;
+
+      const container = containerRef.current;
+      const scrollAmount = container.clientWidth * 0.8; // Прокручиваем на 80% ширины контейнера
+
+      container.scrollBy({
+        left: direction === 'left' ? -scrollAmount : scrollAmount,
+        behavior: 'smooth'
+      });
+    };
+
+    return (
+      <section className="py-8">
+        <div className="flex justify-between items-center mb-6">
+          <div className="flex items-center space-x-4">
+            <div className="w-1 h-8 bg-campfire-amber/20 rounded-full"></div>
+            <h2 className="text-2xl font-bold text-campfire-light">Популярное</h2>
+          </div>
+          <div className="flex items-center space-x-2">
+            <button 
+              onClick={() => scroll('left')}
+              className="w-8 h-8 rounded-full bg-campfire-charcoal/20 border border-campfire-ash/10 flex items-center justify-center text-campfire-light transition-all duration-300 hover:bg-campfire-amber/10 hover:border-campfire-amber/20"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+              </svg>
+            </button>
+            <button 
+              onClick={() => scroll('right')}
+              className="w-8 h-8 rounded-full bg-campfire-charcoal/20 border border-campfire-ash/10 flex items-center justify-center text-campfire-light transition-all duration-300 hover:bg-campfire-amber/10 hover:border-campfire-amber/20"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+              </svg>
+            </button>
+          </div>
+        </div>
+
+        <div className="relative group">
+          {/* Градиентные затемнения по бокам */}
+          <div className="absolute left-0 top-0 bottom-0 w-16 bg-gradient-to-r from-campfire-dark to-transparent z-10 pointer-events-none"></div>
+          <div className="absolute right-0 top-0 bottom-0 w-16 bg-gradient-to-l from-campfire-dark to-transparent z-10 pointer-events-none"></div>
+
+          <div 
+            ref={containerRef}
+            className="flex overflow-x-auto pb-4 gap-4 scrollbar-none"
+            style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
+          >
+            {popularMedia.map(media => (
+              <div key={media.id} className="flex-none w-64 transform transition-transform duration-300 hover:scale-105">
+                <MediaCard media={media} />
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+    );
+  };
+
+  // Добавляем стили для скрытия скроллбара
+  const styles = `
+    .hide-scrollbar {
+      -ms-overflow-style: none;
+      scrollbar-width: none;
+    }
+    .hide-scrollbar::-webkit-scrollbar {
+      display: none;
+    }
+  `;
 
   return (
     <AnimatePresence mode="wait">
@@ -263,7 +415,7 @@ console.log(posters)
           animate="visible"
           variants={containerVariants}
         >
-          <div className="">
+          <div>
             {/* Grid Section with Stats Overlay */}
             <motion.div variants={itemVariants}>
               <GridSection posters={posters} stats={stats} />
@@ -282,39 +434,63 @@ console.log(posters)
               <div className="space-y-12">
                 {/* Popular Section */}
                 <motion.div variants={itemVariants}>
-                  <h2 className="text-2xl font-bold text-campfire-light mb-6 border-b border-campfire-ash/20 pb-5">Популярное</h2>
+                  <div className="flex justify-between items-center mb-6">
+                    <div className="flex items-center space-x-4">
+                      <div className="w-1 h-8 bg-campfire-amber/20 rounded-full"></div>
+                      <h2 className="text-2xl font-bold text-campfire-light">Популярное</h2>
+                    </div>
+                    <div className="flex items-center space-x-2">
+                      <button 
+                        onClick={() => scroll('left')}
+                        className="w-8 h-8 rounded-full bg-campfire-charcoal/20 border border-campfire-ash/10 flex items-center justify-center text-campfire-light transition-all duration-300 hover:bg-campfire-amber/10 hover:border-campfire-amber/20"
+                      >
+                        <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+                        </svg>
+                      </button>
+                      <button 
+                        onClick={() => scroll('right')}
+                        className="w-8 h-8 rounded-full bg-campfire-charcoal/20 border border-campfire-ash/10 flex items-center justify-center text-campfire-light transition-all duration-300 hover:bg-campfire-amber/10 hover:border-campfire-amber/20"
+                      >
+                        <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                        </svg>
+                      </button>
+                    </div>
+                  </div>
                   {popularMedia.length > 0 ? (
-                    <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-8 md:gap-20">
-                      {popularMedia.map((mediaItem) => (
-                        <motion.div
-                          key={mediaItem.id}
-                          variants={itemVariants}
-                          whileHover={{ scale: 1.05 }}
-                          transition={{ duration: 0.2 }}
-                        >
-                          <Link 
-                            to={`/media/${mediaItem.path}`}
-                            className="block group"
-                          >
-                            <TiltedCard
-                              imageSrc={mediaItem.poster ? getFileUrl(mediaItem, 'poster', { thumb: '300x450' }) : 'https://via.placeholder.com/300x450'}
-                              altText={mediaItem.title}
-                              captionText={mediaItem.title}
-                              containerHeight="360px"
-                              containerWidth="100%"
-                              imageHeight="360px"
-                              imageWidth="240px"
-                              scaleOnHover={1.05}
-                              rotateAmplitude={10}
-                              showMobileWarning={false}
-                              showTooltip={false}
-                              displayOverlayContent={false}
-                              rating={mediaItem.average_rating}
-                              releaseDate={mediaItem.release_date}
-                            />
-                          </Link>
-                        </motion.div>
-                      ))}
+                    <div className="relative">
+                      {/* Градиенты по бокам */}
+                      <div className="absolute left-0 top-0 bottom-0 w-24 bg-gradient-to-r from-campfire-dark to-transparent z-10 pointer-events-none"></div>
+                      <div className="absolute right-0 top-0 bottom-0 w-24 bg-gradient-to-l from-campfire-dark to-transparent z-10 pointer-events-none"></div>
+                      
+                      <div 
+                        ref={popularContainerRef}
+                        className="overflow-x-auto pb-8 custom-scrollbar scroll-smooth px-6"
+                        style={{ 
+                          scrollbarWidth: 'none', 
+                          msOverflowStyle: 'none'
+                        }}
+                      >
+                        <div className="flex space-x-8 min-w-max">
+                          {/* Дублируем карточки для бесконечной прокрутки */}
+                          {[...popularMedia].map((mediaItem, index) => (
+                            <motion.div
+                              key={`${mediaItem.id}-${index}`}
+                              variants={itemVariants}
+                              whileHover={{ scale: 1.05 }}
+                              transition={{ duration: 0.2 }}
+                              className="flex-none w-80 transform-gpu"
+                            >
+                              <MediaCard
+                                media={mediaItem}
+                                userProfile={userProfile}
+                                isSmallCard={true}
+                              />
+                            </motion.div>
+                          ))}
+                        </div>
+                      </div>
                     </div>
                   ) : (
                     <p className="text-campfire-ash text-center py-8">Нет данных о популярном медиа.</p>
@@ -346,7 +522,7 @@ console.log(posters)
                                 <span className="text-campfire-light font-bold">2</span>
                               </div>
                             </div>
-                            <Link to={`/profile/${topUsers[1].username}`} className="text-campfire-light hover:text-campfire-amber font-medium">
+                            <Link to={`/profile/${topUsers[1].login}`} className="text-campfire-light hover:text-campfire-amber font-medium">
                               {topUsers[1].username}
                             </Link>
                             <span className="text-campfire-ash text-sm">{topUsers[1].review_count} рецензий</span>
@@ -371,7 +547,7 @@ console.log(posters)
                                 <span className="text-campfire-dark font-bold">1</span>
                               </div>
                             </div>
-                            <Link to={`/profile/${topUsers[0].username}`} className="text-campfire-light hover:text-campfire-amber font-medium">
+                            <Link to={`/profile/${topUsers[0].login}`} className="text-campfire-light hover:text-campfire-amber font-medium">
                               {topUsers[0].username}
                             </Link>
                             <span className="text-campfire-ash text-sm">{topUsers[0].review_count} рецензий</span>
@@ -396,7 +572,7 @@ console.log(posters)
                                 <span className="text-campfire-light font-bold">3</span>
                               </div>
                             </div>
-                            <Link to={`/profile/${topUsers[2].username}`} className="text-campfire-light hover:text-campfire-amber font-medium">
+                            <Link to={`/profile/${topUsers[2].login}`} className="text-campfire-light hover:text-campfire-amber font-medium">
                               {topUsers[2].username}
                             </Link>
                             <span className="text-campfire-ash text-sm">{topUsers[2].review_count} рецензий</span>
@@ -439,7 +615,7 @@ console.log(posters)
                               scaleOnHover={1.05}
                               rotateAmplitude={10}
                               showMobileWarning={false}
-                              showTooltip={false}
+                              showTooltip={true}
                               displayOverlayContent={false}
                               rating={mediaItem.average_rating}
                               releaseDate={mediaItem.release_date}
@@ -464,4 +640,4 @@ console.log(posters)
   );
 };
 
-export default HomePage;
+export default HomePage;
\ No newline at end of file
diff --git a/src/pages/LoginPage.jsx b/src/pages/LoginPage.jsx
index fcb1326..10aed4a 100644
--- a/src/pages/LoginPage.jsx
+++ b/src/pages/LoginPage.jsx
@@ -1,33 +1,25 @@
 import React, { useState, useEffect } from 'react';
 import { useNavigate, Link } from 'react-router-dom';
 import { useAuth } from '../contexts/AuthContext'; // Import useAuth
+import { getUsers } from '../services/pocketbaseService';
+import { FaTelegram } from 'react-icons/fa';
 
 const LoginPage = () => {
-  const [login, setLogin] = useState('');
+  const [loginInput, setLoginInput] = useState('');
   const [password, setPassword] = useState('');
   const [error, setError] = useState('');
   const [loading, setLoading] = useState(false);
   const navigate = useNavigate();
 
-  const { user, userProfile, loading: authLoading, signIn, isInitialized } = useAuth(); // Get isInitialized
-
-  console.log('LoginPage: Rendering. State:', { user: !!user, userProfile: !!userProfile, authLoading, isInitialized, componentLoading: loading, componentError: error }); // Add component render log
+  const { user, userProfile, loading: authLoading, login, isInitialized } = useAuth(); // Get isInitialized
 
   useEffect(() => {
-    console.log('LoginPage useEffect: Running. State:', { user: !!user, userProfile: !!userProfile, authLoading, isInitialized }); // Add useEffect log
-    if (!authLoading && isInitialized) { // Wait for auth to be initialized and not loading
-        if (user && userProfile) {
-            console.log('LoginPage useEffect: User and profile loaded, redirecting to profile:', userProfile.username);
-            navigate(`/profile/${userProfile.username}`);
-        } else {
-            console.log('LoginPage useEffect: No user and auth initialized, staying on login.');
-        }
-    } else if (authLoading) {
-       console.log('LoginPage useEffect: Auth is loading...');
-    } else if (!isInitialized) {
-       console.log('LoginPage useEffect: Auth is not initialized...');
+    if (!authLoading && isInitialized) {
+      if (user && userProfile) {
+        navigate(`/profile/${userProfile.username}`);
+      }
     }
-  }, [user, userProfile, authLoading, isInitialized, navigate]); // Add isInitialized to dependencies
+  }, [user, userProfile, authLoading, isInitialized, navigate]);
 
   const handleSubmit = async (e) => {
     e.preventDefault();
@@ -35,31 +27,38 @@ const LoginPage = () => {
     setLoading(true);
 
     try {
-        await signIn(login, password);
-        navigate('/');
+      await login(loginInput, password);
+      // После успешного входа перенаправляем на страницу профиля
+      if (userProfile) {
+        navigate(`/profile/${userProfile.username}`);
+      }
     } catch (err) {
-        console.error('Login error:', err);
-        setError(err.message);
+      let message = '';
+
+      if (err?.message?.includes('Неверный логин или пароль') || err?.message?.includes('Failed to authenticate') || err?.message?.includes('Invalid login credentials')) {
+        // Попробуем предложить похожий логин
+        try {
+          const users = await getUsers(1, 50);
+          if (users && users.length > 0) {
+            const randomUser = users[Math.floor(Math.random() * users.length)];
+            message = `Неверный логин или пароль. Возможно, вы имели в виду: ${randomUser.username}`;
+          } else {
+            message = 'Неверный логин или пароль.';
+          }
+        } catch {
+          message = 'Неверный логин или пароль.';
+        }
+      } else if (err?.message?.toLowerCase().includes('user') && err?.message?.toLowerCase().includes('not found')) {
+        message = 'Пользователь не найден.';
+      } else {
+        message = err.message || 'Произошла ошибка при входе.';
+      }
+      setError(message);
     } finally {
-        setLoading(false);
+      setLoading(false);
     }
   };
 
-  // Render loading state based on AuthContext loading
-  // Removed the check here to allow the form to render even if auth is loading,
-  // relying on the AuthProvider's own loading state handling.
-  // This might help diagnose if the component itself is not rendering.
-  // if (authLoading || !isInitialized) {
-  //    console.log('LoginPage: Rendering initial auth loading state.');
-  //    return (
-  //       <div className="pt-20 min-h-screen flex items-center justify-center bg-campfire-dark text-campfire-light">
-  //          Загрузка авторизации...
-  //       </div>
-  //    );
-  // }
-
-  console.log('LoginPage: Rendering login form.'); // Log before rendering form
-
   return (
     <div className="min-h-screen bg-campfire-dark pt-20 flex justify-center items-center">
       <div className="w-full max-w-md p-8 bg-campfire-charcoal rounded-lg shadow-lg">
@@ -77,8 +76,8 @@ const LoginPage = () => {
             <input
               type="text"
               id="login"
-              value={login}
-              onChange={(e) => setLogin(e.target.value)}
+              value={loginInput}
+              onChange={(e) => setLoginInput(e.target.value)}
               className="input w-full px-3 py-2 bg-campfire-dark text-campfire-light border border-campfire-ash/30 rounded-md focus:outline-none focus:ring-campfire-amber focus:border-campfire-amber transition-colors"
               placeholder="Введите логин"
               required
@@ -135,6 +134,25 @@ const LoginPage = () => {
               "Войти"
             )}
           </button>
+
+          <div className="relative my-4">
+            <div className="absolute inset-0 flex items-center">
+              <div className="w-full border-t border-campfire-ash/30"></div>
+            </div>
+            <div className="relative flex justify-center text-sm">
+              <span className="px-2 bg-campfire-charcoal text-campfire-ash">или</span>
+            </div>
+          </div>
+
+          {/* Временно отключена авторизация через Telegram
+          <Link
+            to="/auth/telegram"
+            className="flex items-center justify-center w-full px-4 py-2 text-white bg-[#0088cc] hover:bg-[#0077b3] rounded-md transition-colors duration-200"
+          >
+            <FaTelegram className="w-5 h-5 mr-2" />
+            Войти через Telegram
+          </Link>
+          */}
         </form>
 
         <div className="mt-6 text-center text-sm text-campfire-ash">
diff --git a/src/pages/MediaOverviewPage.jsx b/src/pages/MediaOverviewPage.jsx
index 7569727..8efc387 100644
--- a/src/pages/MediaOverviewPage.jsx
+++ b/src/pages/MediaOverviewPage.jsx
@@ -19,6 +19,7 @@ import RatingChart from '../components/reviews/RatingChart';
 import { FaFire, FaEdit } from 'react-icons/fa'; // Import FaEdit icon
 import Modal from '../components/common/Modal'; // Import Modal
 import MediaForm from '../components/admin/MediaForm'; // Import MediaForm
+import { toast } from 'react-hot-toast';
 
 const MediaOverviewPage = () => { // Renamed component
   // Get the 'path' parameter from the URL
@@ -252,49 +253,31 @@ const MediaOverviewPage = () => { // Renamed component
   };
 
   // Handle media edit submission from the modal
-  const handleMediaEditSubmit = async (mediaData) => {
-      if (!media) return; // Should not happen if modal is opened with media loaded
-
-      try {
-          // updateMedia expects FormData
-          const formData = new FormData();
-          // Append all fields from mediaData object
-          Object.keys(mediaData).forEach(key => {
-              // Handle files separately if needed, but MediaForm should return FormData
-              // If MediaForm returns a plain object, you'll need to convert it to FormData here
-              // Assuming MediaForm returns FormData directly:
-               if (mediaData[key] instanceof FileList) {
-                   // Handle FileList - append each file
-                   for (let i = 0; i < mediaData[key].length; i++) {
-                       formData.append(key, mediaData[key][i]);
-                   }
-               } else if (mediaData[key] instanceof File) {
-                   formData.append(key, mediaData[key]);
-               }
-               else if (mediaData[key] !== null && mediaData[key] !== undefined) {
-                   // Convert non-file values to string, especially booleans or numbers
-                   formData.append(key, String(mediaData[key]));
-               } else {
-                   // Handle null/undefined fields if needed (e.g., to clear a field)
-                   // PocketBase handles null for file fields to delete them
-                   formData.append(key, ''); // Append empty string for null/undefined non-file fields
-               }
-          });
-
-          console.log('MediaOverviewPage: Submitting media edit for ID:', media.id, 'with data:', mediaData); // Renamed log
-          // Call the updateMedia service function
-          await updateMedia(media.id, formData);
-          console.log('MediaOverviewPage: Media updated successfully. Reloading data...'); // Renamed log
-          setIsEditModalOpen(false); // Close modal
-          // Reload page data to show updated media details
-          // Reloading media will trigger the effects to reload seasons and reviews
-          loadMediaAndSeasons(); // Trigger full reload
-
-      } catch (error) {
-          console.error('MediaOverviewPage: Error updating media:', error); // Renamed log
-          // Handle error (e.g., show message in modal)
-          throw error; // Re-throw to allow MediaForm to handle error state
+  const handleMediaEditSubmit = async (formData) => {
+    try {
+      setLoading(true);
+      const response = await updateMedia(media.id, formData);
+      setMedia(response);
+      setIsEditModalOpen(false);
+      toast.success('Контент успешно обновлен');
+    } catch (error) {
+      console.error('Error updating media:', error);
+      let errorMessage = 'Произошла ошибка при обновлении контента';
+      
+      if (error.response?.data) {
+        const data = error.response.data;
+        if (typeof data === 'object') {
+          const errors = Object.entries(data)
+            .map(([field, error]) => `${field}: ${error.message || error}`)
+            .join(', ');
+          errorMessage = errors || errorMessage;
+        }
       }
+      
+      toast.error(errorMessage);
+    } finally {
+      setLoading(false);
+    }
   };
 
 
@@ -363,18 +346,24 @@ const MediaOverviewPage = () => { // Renamed component
 
 
   return (
-    <div className="min-h-screen bg-campfire-dark pt-0"> {/* Changed pt-20 to pt-0 */}
+    <div className="min-h-screen bg-campfire-dark"> {/* Добавляем отступ сверху */}
       {/* Hero Section */}
       <div
-        className="relative h-96 bg-cover bg-center"
-        // Use getFileUrl for backdrop field
-        style={{ backgroundImage: `url(${getFileUrl(media, 'backdrop')})` }}
+        className="relative h-[666px] w-full bg-cover bg-center bg-no-repeat"
+        style={{ 
+          backgroundImage: `url(${getFileUrl(media, 'backdrop')})`,
+          backgroundSize: 'cover',
+          backgroundPosition: 'top', // Смещаем изображение немного вниз
+          backgroundRepeat: 'no-repeat'
+        }}
       >
-        <div className="absolute inset-0 bg-gradient-to-t from-campfire-dark to-transparent opacity-90"></div>
-        <div className="container-custom relative z-10 flex items-end h-full pb-12">
+        {/* Gradient Overlay */}
+        <div className="absolute inset-0 bg-gradient-to-t from-campfire-dark via-campfire-dark/80 to-transparent"></div>
+        
+        {/* Content */}
+        <div className="container-custom relative z-10 h-full flex items-end pb-12">
           <div className="flex items-center">
             <img
-              // Use getFileUrl for poster field
               src={getFileUrl(media, 'poster')}
               alt={media.title}
               className="w-32 md:w-48 rounded-lg shadow-xl mr-8 object-cover"
@@ -383,29 +372,20 @@ const MediaOverviewPage = () => { // Renamed component
               <h1 className="text-4xl md:text-5xl font-bold text-campfire-light mb-4">
                 {media.title}
               </h1>
-              {/* Updated rating, star, review count, and added release date */}
               <div className="flex items-center text-campfire-ash text-lg mb-4">
-                 {/* Larger Rating */}
-                 <span className="text-campfire-amber mr-4 text-2xl font-bold"> {/* Increased size and weight */}
-                    {media.average_rating !== null && media.average_rating !== undefined && !isNaN(parseFloat(media.average_rating)) ? parseFloat(media.average_rating).toFixed(1) : 'N/A'} / 10
-                 </span>
-                 {/* Star Icon */}
-                 <FaFire className="text-campfire-amber mr-4 text-xl" /> {/* Adjusted icon size */}
-                 {/* Review Count */}
-                 <span className="text-campfire-ash text-lg mr-4"> {/* Added mr-4 for spacing */}
-                    {media.review_count !== null && media.review_count !== undefined && !isNaN(parseInt(media.review_count)) ? parseInt(media.review_count) : 0} рецензий
-                 </span>
-                 {/* Release Date */}
-                 {media.release_date && ( // Only show if release_date exists
-                     <span className="text-campfire-ash text-lg">
-                         Дата выхода: {new Date(media.release_date).toLocaleDateString()}
-                     </span>
-                 )}
+                <span className="text-campfire-amber mr-4 text-2xl font-bold">
+                  {media.average_rating ? parseFloat(media.average_rating).toFixed(1) : 'N/A'} / 10
+                </span>
+                <FaFire className="text-campfire-amber mr-4 text-xl" />
+                <span className="text-campfire-ash text-lg mr-4">
+                  {media.review_count || 0} рецензий
+                </span>
+                {media.release_date && (
+                  <span className="text-campfire-ash text-lg">
+                    Дата выхода: {new Date(media.release_date).toLocaleDateString()}
+                  </span>
+                )}
               </div>
-              {/* REMOVED: Duplicate overview text from hero section */}
-              {/* <p className="text-campfire-ash text-lg max-w-2xl line-clamp-3">
-                {media.overview || media.description}
-              </p> */}
             </div>
           </div>
         </div>
@@ -549,7 +529,7 @@ const MediaOverviewPage = () => { // Renamed component
           ) : (
             <div className="bg-campfire-charcoal rounded-lg shadow-md p-6 text-center">
               <p className="text-campfire-light">
-                <a href="/auth" className="text-campfire-amber hover:underline">Войдите</a>, чтобы оставить рецензию.
+                <a href="/auth/login" className="text-campfire-amber hover:underline">Войдите</a>, чтобы оставить рецензию.
               </p>
             </div>
           )}
diff --git a/src/pages/NotFoundPage.jsx b/src/pages/NotFoundPage.jsx
index 14731a9..e800ed2 100644
--- a/src/pages/NotFoundPage.jsx
+++ b/src/pages/NotFoundPage.jsx
@@ -1,18 +1,25 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { FaHome } from 'react-icons/fa';
 import FuzzyText from '../components/reactbits/TextAnimations/FuzzyText/FuzzyText';
 import notFoundImage from '../assets/404.webp';
+import catImage from '../assets/cat.png';
 
 const NotFoundPage = () => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    setIsVisible(true);
+  }, []);
+
   return (
     <div className="min-h-screen bg-campfire-dark flex flex-col items-center justify-center p-4">
-      <div className="text-center">
-        <img
-          src={notFoundImage}
-          alt="404" 
-          className="w-64 h-64 mb-8 mx-auto"
-        />
+      <div className={`text-center transition-opacity duration-1000 ${isVisible ? 'opacity-100' : 'opacity-0'}`}>
+      <img
+  src={catImage}
+  alt="Кот в капюшоне"
+  className={`w-full max-w-md mb-8 mx-auto transition-all duration-1000 ease-out ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-16'}`} // Увеличено translate-y для большего начального смещения
+/>
         <FuzzyText
           fontSize="clamp(4rem, 15vw, 12rem)"
           fontWeight={900}
diff --git a/src/pages/ProfilePage.jsx b/src/pages/ProfilePage.jsx
index e882bd8..91fb47c 100644
--- a/src/pages/ProfilePage.jsx
+++ b/src/pages/ProfilePage.jsx
@@ -1,8 +1,8 @@
-import React, { useEffect, useState, useCallback } from 'react';
+import React, { useEffect, useState, useCallback, useRef, memo } from 'react';
 import { useParams, Link, useNavigate } from 'react-router-dom'; // Import useNavigate
 import {
   pb, // Import pb instance
-  getUserProfileByUsername,
+  getUserProfileByLogin,
   getUserAchievements,
   getReviewsByUserId,
   getFileUrl,
@@ -11,19 +11,88 @@ import {
   getXpForCurrentLevel,
   getXpForNextLevel,
   getAllAchievements, // Import getAllAchievements
-  awardAchievement // Import awardAchievement
+  awardAchievement, // Import awardAchievement
+  calculateLevel // Добавляем импорт calculateLevel
 } from '../services/pocketbaseService';
 import { useAuth } from '../contexts/AuthContext';
 import { useProfileActions } from '../contexts/ProfileActionsContext';
 import ReviewItem from '../components/reviews/ReviewItem';
 import ReviewList from '../components/reviews/ReviewList';
 import Modal from '../components/common/Modal';
-import { FaEdit, FaCheckCircle, FaRegCircle, FaFire, FaTrophy, FaAward } from 'react-icons/fa'; // Added FaAward
+import LazyImage from '../components/common/LazyImage';
+import { FaEdit, FaCheckCircle, FaRegCircle, FaFire, FaTrophy, FaAward, FaPalette, FaUser, FaTelegram } from 'react-icons/fa';
+import * as FaIcons from 'react-icons/fa';
+import * as MdIcons from 'react-icons/md';
+import * as IoIcons from 'react-icons/io5';
+import * as BiIcons from 'react-icons/bi';
+import * as HiIcons from 'react-icons/hi';
+import * as RiIcons from 'react-icons/ri';
 import { mediaTypes } from '../services/pocketbaseService';
+import Squares from '../components/reactbits/Backgrounds/Squares/Squares';
+import Dither from '../components/reactbits/Backgrounds/Dither/Dither';
 
+// Мемоизированный компонент для отображения достижений
+const AchievementItem = memo(({ achievement }) => {
+  const getIconComponent = (iconName) => {
+    if (!iconName) return FaTrophy;
+    
+    const prefix = iconName.substring(0, 2).toLowerCase();
+    switch (prefix) {
+      case 'fa': return FaIcons[iconName] || FaTrophy;
+      case 'md': return MdIcons[iconName] || FaTrophy;
+      case 'io': return IoIcons[iconName] || FaTrophy;
+      case 'bi': return BiIcons[iconName] || FaTrophy;
+      case 'hi': return HiIcons[iconName] || FaTrophy;
+      case 'ri': return RiIcons[iconName] || FaTrophy;
+      default: return FaTrophy;
+    }
+  };
+
+  const IconComponent = getIconComponent(achievement.icon);
+
+  return (
+    <div className="group flex-none w-72 bg-campfire-charcoal/20 rounded-2xl p-4 border border-campfire-ash/10 hover:border-campfire-amber/20 transition-all duration-300">
+      <div className="flex items-center space-x-4">
+        <div className="w-12 h-12 rounded-xl bg-campfire-amber/10 flex items-center justify-center">
+          <IconComponent className="text-campfire-amber" size={24} />
+        </div>
+        <div className="flex-grow">
+          <h4 className="text-sm font-semibold text-campfire-light truncate">{achievement.title}</h4>
+          {achievement.xp_reward > 0 && (
+            <p className="text-xs text-campfire-amber mt-1 flex items-center">
+              <FaFire className="mr-1" /> +{achievement.xp_reward} XP
+            </p>
+          )}
+        </div>
+      </div>
+      {/* Описание при наведении */}
+      <div className="absolute left-0 right-0 top-20 mt-2 p-3 bg-campfire-dark/10 rounded-lg border border-campfire-ash/20 shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 pointer-events-none">
+        <p className="text-xs text-campfire-light whitespace-normal">{achievement.description}</p>
+      </div>
+    </div>
+  );
+});
+
+// Мемоизированный компонент для отображения статистики
+const ProfileStats = memo(({ profileUser }) => (
+  <div className="grid grid-cols-3 gap-4 mb-6">
+    <div className="bg-campfire-charcoal p-4 rounded-lg text-center">
+      <h3 className="text-lg font-bold text-campfire-amber">{profileUser.review_count || 0}</h3>
+      <p className="text-sm text-campfire-ash">Рецензий</p>
+    </div>
+    <div className="bg-campfire-charcoal p-4 rounded-lg text-center">
+      <h3 className="text-lg font-bold text-campfire-amber">{profileUser.media_count || 0}</h3>
+      <p className="text-sm text-campfire-ash">Медиа</p>
+    </div>
+    <div className="bg-campfire-charcoal p-4 rounded-lg text-center">
+      <h3 className="text-lg font-bold text-campfire-amber">{profileUser.achievement_count || 0}</h3>
+      <p className="text-sm text-campfire-ash">Достижений</p>
+    </div>
+  </div>
+));
 
 const ProfilePage = () => {
-  const { username } = useParams();
+  const { login } = useParams();
   const { user: currentUser, userProfile: currentUserProfile, loading: authLoading, isInitialized: authInitialized } = useAuth(); // currentUser is the PocketBase auth model
   const { shouldOpenEditModal, resetEditModalTrigger } = useProfileActions() || {};
   const navigate = useNavigate(); // Initialize useNavigate
@@ -32,9 +101,16 @@ const ProfilePage = () => {
   const [reviews, setReviews] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
+  const [achievementsScrollPosition, setAchievementsScrollPosition] = useState(0);
+  const achievementsContainerRef = useRef(null);
 
   const [isEditingProfile, setIsEditingProfile] = useState(false);
-  const [editFormData, setEditFormData] = useState({ description: '', profile_picture: null, banner_picture: null });
+  const [editFormData, setEditFormData] = useState({ 
+    description: '', 
+    profile_picture: null, 
+    banner_picture: null,
+    email: '' // Добавляем поле для email
+  });
   const [profilePictureFile, setProfilePictureFile] = useState(null);
   const [bannerPictureFile, setBannerPictureFile] = useState(null);
   const [deleteProfilePicture, setDeleteProfilePicture] = useState(false);
@@ -51,6 +127,30 @@ const ProfilePage = () => {
   const [userAchievementIds, setUserAchievementIds] = useState([]); // To track achievements the user already has
   const [selectedAchievementIdsToAssign, setSelectedAchievementIdsToAssign] = useState([]); // To track achievements to assign/remove
 
+  const [showcaseTheme, setShowcaseTheme] = useState({
+    type: 'none',
+    background: '#1a1a1a',
+    squares: {
+      direction: 'down',
+      speed: 0.25,
+      borderColor: '#FFFFFF',
+      squareSize: 20,
+      hoverFillColor: '#FF6A00',
+      backgroundColor: '#1a1a1a'
+    },
+    dither: {
+      waveSpeed: 0.05,
+      waveFrequency: 3,
+      waveAmplitude: 0.3,
+      waveColor: [0.4, 0.4, 0.4],
+      colorNum: 4,
+      pixelSize: 2,
+      enableMouseInteraction: false,
+      mouseRadius: 1
+    }
+  });
+  const [isCustomizingTheme, setIsCustomizingTheme] = useState(false);
+  const [previewTheme, setPreviewTheme] = useState(null);
 
   // Determine if the logged-in user is viewing their own profile
   const isOwnProfile = currentUser && profileUser && currentUser.id === profileUser.id;
@@ -59,8 +159,8 @@ const ProfilePage = () => {
 
 
   const loadProfileData = useCallback(async () => {
-      if (!username) {
-          setError('Имя пользователя не указано.');
+      if (!login) {
+          setError('Логин пользователя не указан.');
           setLoading(false);
           return;
       }
@@ -68,12 +168,48 @@ const ProfilePage = () => {
           setLoading(true);
           setError(null);
 
-          // Fetch user profile by username, expanding showcase relation
-          const userData = await getUserProfileByUsername(username);
+          // Fetch user profile by login, expanding showcase relation
+          const userData = await getUserProfileByLogin(login);
           if (!userData) {
               throw new Error('Пользователь не найден.');
           }
           setProfileUser(userData);
+          
+          // Безопасная обработка showcase_theme
+          if (userData.showcase_theme) {
+              try {
+                  const parsedTheme = typeof userData.showcase_theme === 'string' 
+                      ? JSON.parse(userData.showcase_theme)
+                      : userData.showcase_theme;
+                  setShowcaseTheme(parsedTheme);
+              } catch (parseError) {
+                  console.warn('Ошибка при парсинге showcase_theme:', parseError);
+                  // Устанавливаем тему по умолчанию
+                  setShowcaseTheme({
+                      type: 'none',
+                      background: '#1a1a1a',
+                      squares: {
+                          direction: 'down',
+                          speed: 0.25,
+                          borderColor: '#FFFFFF',
+                          squareSize: 20,
+                          hoverFillColor: '#FF6A00',
+                          backgroundColor: '#1a1a1a'
+                      },
+                      dither: {
+                          waveSpeed: 0.05,
+                          waveFrequency: 3,
+                          waveAmplitude: 0.3,
+                          waveColor: [0.4, 0.4, 0.4],
+                          colorNum: 4,
+                          pixelSize: 2,
+                          enableMouseInteraction: false,
+                          mouseRadius: 1
+                      }
+                  });
+              }
+          }
+
           console.log('ProfilePage: User data loaded:', userData);
           console.log('ProfilePage: User showcase data:', userData.showcase, 'expanded:', userData.expand?.showcase);
 
@@ -84,7 +220,6 @@ const ProfilePage = () => {
           // Store user's current achievement IDs for assignment modal
           setUserAchievementIds(achievementsData.map(ua => ua.achievement_id) || []);
 
-
           // Fetch user's reviews
           const reviewsData = await getReviewsByUserId(userData.id);
           setReviews(reviewsData || []);
@@ -93,18 +228,17 @@ const ProfilePage = () => {
           // Initialize showcase selection state for management modal
           setSelectedShowcaseReviewIds(userData.showcase || []);
 
-
       } catch (err) {
           console.error('Error loading profile data:', err);
           setError('Не удалось загрузить данные профиля.');
       } finally {
           setLoading(false);
       }
-  }, [username]);
+  }, [login]);
 
 
   useEffect(() => {
-      console.log('ProfilePage mounted or dependencies changed. username:', username, 'currentUser:', !!currentUser, 'authLoading:', authLoading, 'authInitialized:', authInitialized, 'profileUser:', !!profileUser, 'isOwnProfile:', isOwnProfile); // Added profileUser and isOwnProfile to log
+      console.log('ProfilePage mounted or dependencies changed. login:', login, 'currentUser:', !!currentUser, 'authLoading:', authLoading, 'authInitialized:', authInitialized, 'profileUser:', !!profileUser, 'isOwnProfile:', isOwnProfile); // Added profileUser and isOwnProfile to log
       // Wait for auth to be initialized before loading profile data
       if (!authLoading && authInitialized) {
           console.log('ProfilePage useEffect: Auth initialized and not loading. Loading profile data...');
@@ -112,7 +246,7 @@ const ProfilePage = () => {
       } else {
           console.log('ProfilePage useEffect: Waiting for auth initialization or loading...');
       }
-  }, [username, currentUser, authLoading, authInitialized, loadProfileData]); // Added authInitialized to dependencies
+  }, [login, currentUser, authLoading, authInitialized, loadProfileData]); // Added authInitialized to dependencies
 
 
   // Effect to open edit modal if triggered by context (e.g., from Header)
@@ -146,6 +280,7 @@ const ProfilePage = () => {
           description: profileUser.description || '',
           profile_picture: null,
           banner_picture: null,
+          email: profileUser.email || '' // Добавляем email в начальные данные
       });
       setProfilePictureFile(null);
       setBannerPictureFile(null);
@@ -191,52 +326,30 @@ const ProfilePage = () => {
       setEditFormError(null);
 
       try {
-          // Use pb.collection('users').update() with FormData
           const formData = new FormData();
           formData.append('description', editFormData.description);
+          formData.append('email', editFormData.email); // Добавляем email в formData
 
           if (profilePictureFile) {
               formData.append('profile_picture', profilePictureFile);
           } else if (deleteProfilePicture && profileUser.profile_picture) {
-              // To delete an existing file, append the field name with null
               formData.append('profile_picture', null);
           }
 
           if (bannerPictureFile) {
               formData.append('banner_picture', bannerPictureFile);
           } else if (deleteBannerPicture && profileUser.banner_picture) {
-              // To delete an existing file, append the field name with null
               formData.append('banner_picture', null);
           }
 
-          // Use pb instance imported directly
           await pb.collection('users').update(profileUser.id, formData);
 
-
           console.log('Profile updated successfully.');
           setIsEditingProfile(false);
-          // Refresh the user profile in AuthContext and on the page
-          // Assuming refreshUserProfile in AuthContext fetches the latest user record
-          // and updates the context state, which will then update profileUser state here.
-          // If not, we might need to manually update profileUser state or refetch.
-          // Let's call loadProfileData to ensure page data is fresh.
           loadProfileData();
-
-
-      } catch (err) {
-          console.error('Error updating profile:', err);
-          // PocketBase validation errors might be in err.response.data.data
-          const pbErrorData = err.response?.data?.data;
-          let errorMessage = err.message || 'Произошла ошибка при обновлении профиля.';
-
-          if (pbErrorData) {
-              // Attempt to format PocketBase validation errors
-              errorMessage = Object.entries(pbErrorData)
-                  .map(([field, errorInfo]) => `${field}: ${errorInfo.message}`)
-                  .join(', ');
-          }
-
-          setEditFormError(errorMessage);
+      } catch (error) {
+          console.error('Error updating profile:', error);
+          setEditFormError(error.message || 'Произошла ошибка при обновлении профиля');
       } finally {
           setIsSubmittingEdit(false);
       }
@@ -310,31 +423,23 @@ const ProfilePage = () => {
 
   // --- Achievement Assignment Handlers (New) ---
   const handleAssignAchievements = async () => {
-      if (!profileUser || !isAdmin) return; // Only admin can assign
+      if (!profileUser || !isAdmin) return;
 
-      console.log('ProfilePage: Opening achievement assignment modal.'); // Added log
+      console.log('ProfilePage: Opening achievement assignment modal.');
       setIsAssigningAchievements(true);
-      setEditFormError(null); // Reuse editFormError state for simplicity in modals
+      setEditFormError(null);
 
       try {
-          // Fetch all available achievements
-          // Use getAllAchievements function from service
           const allAchievements = await getAllAchievements();
           setAvailableAchievements(allAchievements);
 
-          // Initialize selected achievements with the ones the user already has
-          // We need the IDs of the user_achievements records to potentially delete them,
-          // or just the achievement_id to manage assignment status.
-          // Let's manage assignment status by achievement_id for simplicity in the modal UI.
-          // The actual update will involve creating/deleting user_achievements records.
-          const currentUserAchievementIds = achievements.map(ua => ua.achievement_id);
+          // Инициализируем выбранные достижения теми, которые уже есть у пользователя
+          const currentUserAchievementIds = achievements.map(ua => ua.id);
           setSelectedAchievementIdsToAssign(currentUserAchievementIds);
 
-
       } catch (err) {
           console.error('Error loading achievements for assignment:', err);
           setEditFormError(err.message || 'Не удалось загрузить список достижений.');
-          // Close modal on error? Or show error inside? Let's show inside.
       }
   };
 
@@ -352,36 +457,73 @@ const ProfilePage = () => {
   const handleSaveAchievementAssignment = async () => {
       if (!profileUser || !isAdmin) return;
 
-      setIsSubmittingEdit(true); // Reuse submitting state
+      setIsSubmittingEdit(true);
       setEditFormError(null);
 
       try {
-          // Logic to update user_achievements collection
-          // Compare userAchievementIds (current) with selectedAchievementIdsToAssign (desired)
-          const currentIds = new Set(userAchievementIds);
-          const desiredIds = new Set(selectedAchievementIdsToAssign);
+          // Получаем текущие достижения пользователя
+          const currentAchievements = await getUserAchievements(profileUser.id);
+          
+          // Находим достижения для добавления и удаления
+          const achievementsToAdd = selectedAchievementIdsToAssign.filter(id => 
+              !currentAchievements.some(ua => ua.id === id)
+          );
+          
+          const achievementsToRemove = currentAchievements.filter(ua => 
+              !selectedAchievementIdsToAssign.includes(ua.id)
+          );
 
-          const idsToAdd = selectedAchievementIdsToAssign.filter(id => !currentIds.has(id));
-          const idsToRemove = userAchievementIds.filter(id => !desiredIds.has(id));
-
-          // Add new user_achievements records
-          for (const achievementId of idsToAdd) {
-              // Use awardAchievement function from service
-              await awardAchievement(profileUser.id, achievementId, currentUser.id); // Pass current user as awarded_by
+          // Собираем XP для удаления
+          let totalXpToRemove = 0;
+          for (const achievement of achievementsToRemove) {
+              totalXpToRemove += achievement.xp_reward || 0;
           }
 
-          // Remove user_achievements records
-          // Need to find the user_achievements record IDs for the achievements to remove
-          const userAchievementsToRemove = achievements.filter(ua => idsToRemove.includes(ua.achievement_id));
-          for (const ua of userAchievementsToRemove) {
-              // Use pb instance imported directly
-              await pb.collection('user_achievements').delete(ua.id);
+          // Добавляем новые достижения
+          for (const achievementId of achievementsToAdd) {
+              await awardAchievement(profileUser.id, achievementId);
+          }
+
+          // Удаляем снятые достижения
+          for (const userAchievement of achievementsToRemove) {
+              // Получаем ID записи user_achievements
+              const userAchievementRecord = await pb.collection('user_achievements').getList(1, 1, {
+                  filter: `user_id = "${profileUser.id}" && achievement_id = "${userAchievement.id}"`
+              });
+              
+              if (userAchievementRecord.items.length > 0) {
+                  await pb.collection('user_achievements').delete(userAchievementRecord.items[0].id);
+              }
+          }
+
+          // Обновляем XP пользователя
+          if (totalXpToRemove > 0) {
+                  const currentXp = profileUser.xp || 0;
+              const newXp = Math.max(0, currentXp - totalXpToRemove);
+              const newLevel = calculateLevel(newXp);
+              
+              await pb.collection('users').update(profileUser.id, {
+                  xp: newXp,
+                  level: newLevel
+              });
+              }
+
+          // Обновляем список достижений и данные пользователя
+          const [updatedAchievements, updatedUserData] = await Promise.all([
+              getUserAchievements(profileUser.id),
+              pb.collection('users').getOne(profileUser.id)
+          ]);
+          
+          setAchievements(updatedAchievements);
+          setProfileUser(updatedUserData);
+          
+          // Сбрасываем позицию прокрутки и обновляем состояние кнопок
+          if (achievementsContainerRef.current) {
+              achievementsContainerRef.current.scrollLeft = 0;
+              setAchievementsScrollPosition(0);
           }
 
-          console.log('Achievement assignment updated successfully.');
           setIsAssigningAchievements(false);
-          loadProfileData(); // Refresh profile data to show updated achievements
-
       } catch (err) {
           console.error('Error saving achievement assignment:', err);
           const pbErrorData = err.response?.data?.data;
@@ -403,6 +545,93 @@ const ProfilePage = () => {
       setEditFormError(null);
   };
 
+  const handleAchievementsScroll = (direction) => {
+    if (!achievementsContainerRef.current) return;
+    
+    const container = achievementsContainerRef.current;
+    const scrollAmount = 310; // Примерная ширина карточки + отступ
+    
+    if (direction === 'left') {
+      container.scrollLeft -= scrollAmount;
+    } else {
+      container.scrollLeft += scrollAmount;
+    }
+    
+    setAchievementsScrollPosition(container.scrollLeft);
+  };
+
+  // Добавляем функцию для переключения темы
+  const handleToggleShowcaseTheme = async () => {
+    if (!profileUser || !isOwnProfile) return;
+    
+    try {
+      const newTheme = showcaseTheme.type === 'squares' ? 'dither' : 'squares';
+      await pb.collection('users').update(profileUser.id, {
+        showcase_theme: JSON.stringify({
+          type: newTheme,
+          squares: showcaseTheme.squares,
+          dither: showcaseTheme.dither
+        })
+      });
+      setShowcaseTheme({
+        type: newTheme,
+        squares: showcaseTheme.squares,
+        dither: showcaseTheme.dither
+      });
+    } catch (error) {
+      console.error('Error updating showcase theme:', error);
+    }
+  };
+
+  // Функция для открытия модального окна кастомизации
+  const handleCustomizeTheme = () => {
+    setPreviewTheme(JSON.parse(JSON.stringify(showcaseTheme))); // Создаем глубокую копию
+    setIsCustomizingTheme(true);
+  };
+
+  // Функция для обновления параметров темы
+  const handleThemeParamChange = (themeType, param, value) => {
+    setPreviewTheme(prev => ({
+      ...prev,
+      [themeType]: {
+        ...prev[themeType],
+        [param]: value
+      }
+    }));
+  };
+
+  // Функция для сохранения темы
+  const handleSaveTheme = async () => {
+    if (!profileUser || !isOwnProfile) return;
+    
+    try {
+      await pb.collection('users').update(profileUser.id, {
+        showcase_theme: JSON.stringify(previewTheme)
+      });
+      setShowcaseTheme(previewTheme);
+      setIsCustomizingTheme(false);
+    } catch (error) {
+      console.error('Error updating showcase theme:', error);
+    }
+  };
+
+  // Добавляем функцию для проверки доступности темы
+  const isThemeAvailable = (themeType) => {
+    const userLevel = profileUser?.level || 1;
+    
+    switch (themeType) {
+        case 'none':
+            return true;
+        case 'background':
+            return userLevel >= 2;
+        case 'squares':
+            return userLevel >= 3;
+        case 'dither':
+            return userLevel >= 7;
+        default:
+            return false;
+    }
+  };
 
   if (loading || authLoading || !authInitialized) { // Show loading if auth is still initializing/loading
     console.log('ProfilePage: Showing initial loading state. Loading:', loading, 'AuthLoading:', authLoading, 'AuthInitialized:', authInitialized);
@@ -448,142 +677,264 @@ const ProfilePage = () => {
   ];
 
   return (
-    <div className="min-h-screen bg-campfire-dark pt-0">
+    <div className="min-h-screen bg-campfire-dark">
       {/* Banner Section */}
       <div
-        className="relative h-64 bg-cover bg-center"
-        style={{ backgroundImage: `url(${getFileUrl(profileUser, 'banner_picture') || 'https://images.pexels.com/photos/1103970/pexels-photo-1103970.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'})` }}
+        className="relative h-[600px] bg-cover bg-center"
+        style={{ 
+          backgroundImage: `url(${getFileUrl(profileUser, 'banner_picture') || 'https://images.pexels.com/photos/1103970/pexels-photo-1103970.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'})`,
+          backgroundPosition: 'center 20%'
+        }}
       >
-        <div className="absolute inset-0 bg-gradient-to-t from-campfire-dark to-transparent opacity-90"></div>
-        <div className="container-custom relative z-10 flex items-end h-full pb-8">
-          <div className="flex items-center w-full">
-            <img
-              src={getFileUrl(profileUser, 'profile_picture') || 'https://images.pexels.com/photos/1704488/pexels-photo-1704488.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'}
-              alt={profileUser.username}
-              className="w-24 h-24 md:w-32 md:h-32 rounded-full border-4 border-campfire-dark shadow-xl object-cover"
-            />
-            <div className="ml-6 flex-grow">
-              <h1 className="text-3xl md:text-4xl font-bold text-campfire-light mb-2">
-                {profileUser.username}
-              </h1>
-              {/* User Stats */}
-              <div className="flex items-center text-campfire-ash text-sm md:text-base">
-                 <span className="mr-4">Уровень: <b className="text-campfire-amber">{profileUser.level || 1}</b></span>
-                 <span className="mr-4">Рецензий: <b className="text-campfire-amber">{profileUser.review_count || 0}</b></span>
-                 <span>Средняя оценка: <b className="text-campfire-amber">{profileUser.average_rating !== null && profileUser.average_rating !== undefined ? profileUser.average_rating.toFixed(1) : 'N/A'}</b></span>
+        <div className="absolute inset-0 from-campfire-dark/0 via-campfire-dark/50 to-campfire-dark"></div>
+        
+        {/* Admin Panel */}
+        {isAdmin && (
+          <div className="absolute top-8 right-8 z-50">
+            <div className="bg-campfire-charcoal/20 rounded-2xl p-4 border border-campfire-amber/10 backdrop-blur-md">
+              <div className="space-y-4">
+                <button
+                  onClick={handleAssignAchievements}
+                  className="w-full py-2 px-4 bg-campfire-amber/10 rounded-2xl flex items-center justify-center space-x-2 hover:bg-campfire-amber/20 transition-all duration-300"
+                >
+                  <FaAward size={12} />
+                  <span className="text-campfire-amber text-sm">Назначить</span>
+                </button>
               </div>
+            </div>
+          </div>
+        )}
+
+        <div className="container-custom relative z-10 h-full flex items-end">
+            <div className="w-full">
+            {/* Profile Info Card */}
+            <div className="w-full bg-campfire-dark/40 rounded-t-3xl p-8 shadow-md backdrop-blur-md">
+                {/* User Info Section */}
+                <div className="flex items-start justify-between mb-8">
+                  {/* Left Section with Avatar and User Info */}
+                  <div className="flex items-start space-x-4 flex-grow">
+                    {/* Profile Picture Container */}
+                    <div className="bg-campfire-charcoal/20 rounded-2xl p-3">
+                      <div className="w-24 h-24 rounded-2xl bg-campfire-dark/40 overflow-hidden shadow-[0_0_30px_rgba(251,191,36,0.1)] backdrop-blur-md">
+                        {profileUser.profile_picture ? (
+                          <LazyImage
+                            src={getFileUrl(profileUser, 'profile_picture')}
+                            alt={`${profileUser.login}'s profile`}
+                            className="w-full h-full object-cover"
+                          />
+                        ) : (
+                          <div className="w-full h-full flex items-center justify-center bg-campfire-charcoal/40">
+                            <FaUser className="w-16 h-16 text-campfire-light/80" />
+              </div>
+                        )}
+                      </div>
+                    </div>
+
+                    {/* User Info Container */}
+                    <div className="bg-campfire-charcoal/20 rounded-2xl p-4 flex-grow">
+                      <div className="flex items-center justify-between">
+                        {/* Left part: Username, Login, Edit button */}
+                        <div className="flex items-center space-x-4">
+                          <h1 className="text-2xl font-bold text-campfire-light tracking-tight">{profileUser.username}</h1>
+                          <div className="px-3 py-1 bg-campfire-amber/10 rounded-full">
+                            <p className="text-campfire-amber font-medium text-sm">@{profileUser.login}</p>
+                          </div>
+                          {isOwnProfile && (
+                            <button
+                              onClick={handleEditProfile}
+                              className="py-2 bg-campfire-amber/10 rounded-2xl flex items-center p-4 hover:bg-campfire-amber/20 transition-all duration-300"
+                              title="Редактировать профиль"
+                            >
+                              <FaEdit size={12} />
+                            </button>
+                          )}
+                        </div>
+
+                        {/* Right part: Stats */}
+                        <div className="flex items-center space-x-6">
+                          <div className="flex items-center">
+                            <FaTrophy className="text-campfire-amber/80 mr-2 text-sm" />
+                            <div>
+                              <p className="text-xs text-campfire-light">Уровень</p>
+                              <p className="text-sm font-bold text-campfire-amber/90">{profileUser.level || 1}</p>
+                            </div>
+                          </div>
+                          <div className="w-px h-8 bg-campfire-ash/10"></div>
+                          <div className="flex items-center">
+                            <FaFire className="text-campfire-amber/80 mr-2 text-sm" />
+                            <div>
+                              <p className="text-xs text-campfire-light">Рецензий</p>
+                              <p className="text-sm font-bold text-campfire-amber/90">{profileUser.review_count || 0}</p>
+                            </div>
+                          </div>
+                          <div className="w-px h-8 bg-campfire-ash/10"></div>
+                          <div className="flex items-center">
+                            <FaAward className="text-campfire-amber/80 mr-2 text-sm" />
+                            <div>
+                              <p className="text-xs text-campfire-light">Достижений</p>
+                              <p className="text-sm font-bold text-campfire-amber/90">{achievements.length}</p>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div className="mt-4 pt-4 border-t border-campfire-ash/10">
+                        <p className="text-campfire-light/80 text-sm leading-relaxed">
+                          {profileUser.description || 'Пользователь пока ничего не рассказал о себе.'}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Achievements Section */}
+                <div className="mb-8">
+                  <div className="flex justify-between items-center mb-6">
+                    <div className="flex items-center space-x-4">
+                      <div className="w-1 h-8 bg-campfire-amber/20 rounded-full"></div>
+                      <h2 className="text-2xl font-bold text-campfire-light">Достижения</h2>
+                    </div>
+                    <div className="flex items-center space-x-2">
+                      <button 
+                        onClick={() => handleAchievementsScroll('left')}
+                        className="w-8 h-8 rounded-full bg-campfire-charcoal/20 border border-campfire-ash/10 flex items-center justify-center text-campfire-light hover:bg-campfire-amber/10 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed"
+                        disabled={achievementsScrollPosition <= 0}
+                      >
+                        <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+                        </svg>
+                      </button>
+                      <button 
+                        onClick={() => handleAchievementsScroll('right')}
+                        className="w-8 h-8 rounded-full bg-campfire-charcoal/20 border border-campfire-ash/10 flex items-center justify-center text-campfire-light hover:bg-campfire-amber/10 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed"
+                        disabled={!achievementsContainerRef.current || achievementsScrollPosition >= achievementsContainerRef.current.scrollWidth - achievementsContainerRef.current.clientWidth}
+                      >
+                        <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                        </svg>
+                      </button>
+                    </div>
+                  </div>
+                  {achievements.length > 0 ? (
+                    <div className="relative">
+                      <div 
+                        ref={achievementsContainerRef}
+                        className="flex overflow-x-auto pb-4 gap-4 custom-scrollbar scroll-smooth"
+                        onScroll={(e) => setAchievementsScrollPosition(e.target.scrollLeft)}
+                      >
+                        {achievements.map(achievement => (
+                          <AchievementItem key={achievement.id} achievement={achievement} />
+                        ))}
+                      </div>
+                    </div>
+                  ) : (
+                    <div className="bg-campfire-charcoal/20 rounded-2xl p-8 text-center border border-campfire-ash/10">
+                      <p className="text-campfire-light">У пользователя пока нет достижений</p>
+                    </div>
+                  )}
+                </div>
+
                {/* XP Progress Bar */}
-               <div className="w-full bg-campfire-ash/30 rounded-full h-2.5 mt-2">
+                <div className="bg-campfire-charcoal/20 rounded-2xl p-4 border border-campfire-ash/10">
+                  <div className="flex justify-between text-sm mb-2">
+                    <span className="text-campfire-light">XP: {profileUser.xp || 0} / {xpForNextLevel}</span>
+                    <span className="text-campfire-light">Уровень {currentLevel + 1}</span>
+                  </div>
+                  <div className="w-full bg-campfire-charcoal/20 rounded-full h-3">
                    <div
-                       className="bg-campfire-amber h-2.5 rounded-full transition-all duration-500 ease-out"
+                      className="bg-gradient-to-r from-campfire-amber/80 to-campfire-amber h-3 rounded-full transition-all duration-500 ease-out"
                        style={{ width: `${xpProgress}%` }}
                    ></div>
-               </div>
-               <p className="text-campfire-ash text-xs mt-1">
-                   XP: {profileUser.xp || 0} / {xpForNextLevel} (до Уровня {currentLevel + 1})
-               </p>
             </div>
           </div>
         </div>
       </div>
-
-      <div className="container-custom py-12">
-        {/* Description */}
-        <div className="mb-12">
-          <h2 className="text-2xl font-bold text-campfire-light mb-4">О себе</h2>
-          <p className="text-campfire-ash leading-relaxed">
-            {profileUser.description || 'Пользователь пока ничего не рассказал о себе.'}
-          </p>
         </div>
+        </div>
+
+      <div className="container-custom py-12 mt-16">
 
         {/* Showcase Section */}
         <div className="mb-12">
             <div className="flex justify-between items-center mb-6 border-b border-campfire-ash/20 pb-4">
                 <h2 className="text-2xl font-bold text-campfire-light">Витрина рецензий</h2>
-                {isOwnProfile && (
-                    <button
-                        onClick={handleManageShowcase}
-                        className="btn-secondary flex items-center space-x-2"
-                    >
-                        <FaEdit size={18} />
-                        <span>Управлять витриной</span>
-                    </button>
-                )}
-            </div>
-            {profileUser.expand?.showcase && profileUser.expand.showcase.length > 0 ? (
-                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-                    {profileUser.expand.showcase.map(review => (
-                        <ReviewItem
-                            key={review.id}
-                            review={review}
-                            media={review.expand?.media_id}
-                            season={review.expand?.season_id}
-                            reviewCharacteristics={review.expand?.media_id?.characteristics || {}}
-                            isProfilePage={true}
-                        />
-                    ))}
-                </div>
-            ) : (
-                <div className="text-center py-8 text-campfire-light">
-                    {isOwnProfile ? (
+                <div className="flex items-center space-x-4">
+                    {isOwnProfile && (
                         <>
-                            Ваша витрина пуста. <button onClick={handleManageShowcase} className="text-campfire-amber hover:underline">Добавьте</button> сюда свои лучшие рецензии!
+                            <button
+                                onClick={handleCustomizeTheme}
+                                className="btn-secondary flex items-center space-x-2"
+                                title="Настроить тему фона"
+                            >
+                                <FaPalette size={18} />
+                                <span>Настроить тему</span>
+                            </button>
+                            <button
+                                onClick={handleManageShowcase}
+                                className="btn-secondary flex items-center space-x-2"
+                            >
+                                <FaEdit size={18} />
+                                <span>Управлять витриной</span>
+                            </button>
                         </>
-                    ) : (
-                        'У пользователя пока нет рецензий на витрине.'
                     )}
                 </div>
-            )}
-        </div>
-
-
-        {/* Achievements Section */}
-        <div className="mb-12">
-          <div className="flex justify-between items-center mb-6 border-b border-campfire-ash/20 pb-4">
-            <h2 className="text-2xl font-bold text-campfire-light">Достижения</h2>
-             {/* Assign Achievements Button (only for admins, visible on any profile) */}
-             {isAdmin && ( // Use isAdmin check
-                 <button
-                     onClick={handleAssignAchievements} // New handler
-                     className="btn-secondary flex items-center space-x-2"
-                 >
-                     <FaAward size={18} /> {/* Changed icon */}
-                     <span>Назначить достижения</span> {/* Changed text */}
-                 </button>
-             )}
-          </div>
-          {achievements.length > 0 ? (
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-              {achievements.map(ua => (
-                <div key={ua.id} className="bg-campfire-charcoal rounded-lg shadow-md p-4 flex items-center space-x-4 border border-campfire-amber/30">
-                  {ua.expand?.achievement_id ? (
-                    <>
-                      <div className="flex-shrink-0 text-campfire-amber">
-                          <FaTrophy size={32} />
-                      </div>
-                      <div>
-                        <h3 className="text-lg font-semibold text-campfire-light">{ua.expand.achievement_id.name}</h3>
-                        <p className="text-campfire-ash text-sm">{ua.expand.achievement_id.description}</p>
-                         {ua.expand.achievement_id.xp_reward > 0 && (
-                            <p className="text-campfire-light text-xs mt-1 flex items-center">
-                                <FaFire className="mr-1 text-campfire-amber" /> +{ua.expand.achievement_id.xp_reward} XP
-                            </p>
-                         )}
-                      </div>
-                    </>
-                  ) : (
-                    <p className="text-campfire-ash">Достижение (ID: {ua.achievement_id})</p>
-                  )}
+            </div>
+            <div className="relative rounded-3xl overflow-hidden" style={{ backgroundColor: showcaseTheme.background }}>
+                {showcaseTheme.type === 'squares' && (
+                    <div className="absolute inset-0 pointer-events-none" style={{ backgroundColor: showcaseTheme.squares.backgroundColor }}>
+                        <Squares 
+                            direction={showcaseTheme.squares.direction}
+                            speed={showcaseTheme.squares.speed}
+                            borderColor={showcaseTheme.squares.borderColor}
+                            squareSize={showcaseTheme.squares.squareSize}
+                            hoverFillColor={showcaseTheme.squares.hoverFillColor}
+                        />
+                    </div>
+                )}
+                {showcaseTheme.type === 'dither' && (
+                    <div className="absolute inset-0 z-0" style={{ pointerEvents: showcaseTheme.dither.enableMouseInteraction ? 'auto' : 'none' }}>
+                        <Dither
+                            waveSpeed={showcaseTheme.dither.waveSpeed}
+                            waveFrequency={showcaseTheme.dither.waveFrequency}
+                            waveAmplitude={showcaseTheme.dither.waveAmplitude}
+                            waveColor={showcaseTheme.dither.waveColor}
+                            colorNum={showcaseTheme.dither.colorNum}
+                            pixelSize={showcaseTheme.dither.pixelSize}
+                            enableMouseInteraction={showcaseTheme.dither.enableMouseInteraction}
+                            mouseRadius={showcaseTheme.dither.mouseRadius}
+                        />
+                    </div>
+                )}
+                <div className="relative z-10 p-8" style={{ pointerEvents: 'none' }}>
+                    {profileUser.expand?.showcase && profileUser.expand.showcase.length > 0 ? (
+                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" style={{ pointerEvents: 'auto' }}>
+                            {profileUser.expand.showcase.map(review => (
+                                <ReviewItem
+                                    key={review.id}
+                                    review={review}
+                                    media={review.expand?.media_id}
+                                    season={review.expand?.season_id}
+                                    reviewCharacteristics={review.expand?.media_id?.characteristics || {}}
+                                    isProfilePage={true}
+                                />
+                            ))}
+                        </div>
+                    ) : (
+                        <div className="text-center py-8 text-campfire-light">
+                            {isOwnProfile ? (
+                                <>
+                                    Ваша витрина пуста. <button onClick={handleManageShowcase} className="text-campfire-amber hover:underline">Добавьте</button> сюда свои лучшие рецензии!
+                                </>
+                            ) : (
+                                'У пользователя пока нет рецензий на витрине.'
+                            )}
+                        </div>
+                    )}
                 </div>
-              ))}
             </div>
-          ) : (
-            <div className="text-center py-8 text-campfire-light">
-              У пользователя пока нет достижений.
-            </div>
-          )}
         </div>
 
+
         {/* All Reviews Section - Render as smaller cards */}
         <div className="mb-12">
           <h2 className="text-2xl font-bold text-campfire-light mb-6 border-b border-campfire-ash/20 pb-4">Все рецензии</h2>
@@ -624,6 +975,22 @@ const ProfilePage = () => {
                       </div>
                   )}
 
+                  {/* Email */}
+                  <div>
+                      <label htmlFor="email" className="block mb-2 text-campfire-light text-sm font-medium">
+                          Email (опционально)
+                      </label>
+                      <input
+                          type="email"
+                          id="email"
+                          name="email"
+                          value={editFormData.email}
+                          onChange={handleEditFormChange}
+                          className="w-full p-3 bg-campfire-dark border border-campfire-ash/30 rounded-md text-campfire-light focus:ring-2 focus:ring-campfire-amber focus:border-transparent transition-colors"
+                          placeholder="your@email.com"
+                      />
+                  </div>
+
                   {/* Description */}
                   <div>
                       <label htmlFor="description" className="block mb-2 text-campfire-light text-sm font-medium">
@@ -647,7 +1014,7 @@ const ProfilePage = () => {
                       {profileUser.profile_picture && !deleteProfilePicture && (
                           <div className="mb-4">
                               <p className="text-sm text-campfire-ash mb-2">Текущее фото:</p>
-                              <img src={getFileUrl(profileUser, 'profile_picture')} alt="Current Profile" className="w-20 h-20 rounded-full mb-2 object-cover" />
+                              <LazyImage src={getFileUrl(profileUser, 'profile_picture')} alt="Current Profile" className="w-20 h-20 rounded-full mb-2 object-cover" />
                               <button
                                   type="button"
                                   onClick={() => handleRemoveExistingPicture('profile_picture')}
@@ -679,7 +1046,7 @@ const ProfilePage = () => {
                       {profileUser.banner_picture && !deleteBannerPicture && (
                           <div className="mb-4">
                               <p className="text-sm text-campfire-ash mb-2">Текущий баннер:</p>
-                              <img src={getFileUrl(profileUser, 'banner_picture')} alt="Current Banner" className="w-full h-32 object-cover rounded-md mb-2" />
+                              <LazyImage src={getFileUrl(profileUser, 'banner_picture')} alt="Current Banner" className="w-full h-32 object-cover rounded-md mb-2" />
                               <button
                                   type="button"
                                   onClick={() => handleRemoveExistingPicture('banner_picture')}
@@ -750,7 +1117,7 @@ const ProfilePage = () => {
 
                               const reviewTitle = reviewMedia
                                   ? `${reviewMedia.title}${reviewSeason ? ` - Сезон ${reviewSeason.season_number}${reviewSeason.title ? `: ${reviewSeason.title}` : ''}` : ''}`
-                                  : 'Неизвестное произведение';
+                                  : 'Загрузка...';
 
 
                               return (
@@ -768,7 +1135,6 @@ const ProfilePage = () => {
                                           <p className="text-xs mt-1 flex items-center">
                                              Оценка: <span className="flex items-center text-campfire-amber ml-1 font-bold">
                                                 <FaFire className="mr-1 text-xs" />
-                                                {/* Corrected access to overall_rating */}
                                                 {review.overall_rating !== null && review.overall_rating !== undefined ? review.overall_rating.toFixed(1) : 'N/A'} / 10
                                              </span>
                                           </p>
@@ -811,8 +1177,8 @@ const ProfilePage = () => {
           </Modal>
       )}
 
-      {/* Achievement Assignment Modal (New) */}
-      {profileUser && isAdmin && ( // Only show if profileUser is loaded and current user is admin
+      {/* Achievement Assignment Modal */}
+      {profileUser && isAdmin && (
           <Modal
               isOpen={isAssigningAchievements}
               onClose={handleCancelAchievementAssignment}
@@ -820,29 +1186,29 @@ const ProfilePage = () => {
               size="lg"
           >
               <div className="space-y-4">
-                  {editFormError && ( // Reuse error state
+                  {editFormError && (
                       <div className="bg-red-500/10 border border-red-500/20 text-red-500 p-4 rounded-lg">
                           Ошибка: {editFormError}
                       </div>
                   )}
                   <p className="text-campfire-ash text-sm">Выберите достижения, которые нужно назначить или снять с пользователя.</p>
+                  
                   {availableAchievements.length > 0 ? (
                       <ul className="space-y-3 max-h-96 overflow-y-auto pr-2 custom-scrollbar">
-                          {availableAchievements.map(achievement => {
+                          {availableAchievements.map((achievement) => {
                               const isSelected = selectedAchievementIdsToAssign.includes(achievement.id);
-
                               return (
                                   <li
                                       key={achievement.id}
+                                      onClick={() => handleToggleAchievementAssignment(achievement.id)}
                                       className={`p-3 rounded-md border cursor-pointer flex items-center justify-between transition-colors duration-200
                                           ${isSelected
                                               ? 'bg-campfire-amber/20 border-campfire-amber text-campfire-light'
                                               : 'bg-campfire-dark border-campfire-ash/30 text-campfire-ash hover:bg-campfire-ash/10'
                                           }`}
-                                      onClick={() => handleToggleAchievementAssignment(achievement.id)}
                                   >
                                       <div className="flex-grow mr-4">
-                                          <p className="font-semibold text-sm">{achievement.name}</p>
+                                          <p className="font-semibold text-sm">{achievement.title}</p>
                                           <p className="text-xs text-campfire-ash mt-1">{achievement.description}</p>
                                            {achievement.xp_reward > 0 && (
                                               <p className="text-campfire-light text-xs mt-1 flex items-center">
@@ -865,10 +1231,8 @@ const ProfilePage = () => {
                       </div>
                   )}
 
-                  {/* Form Actions */}
                   <div className="flex justify-end space-x-4 mt-6">
                       <button
-                          type="button"
                           onClick={handleCancelAchievementAssignment}
                           className="btn-secondary"
                           disabled={isSubmittingEdit}
@@ -876,7 +1240,6 @@ const ProfilePage = () => {
                           Отмена
                       </button>
                       <button
-                          type="button"
                           onClick={handleSaveAchievementAssignment}
                           className="btn-primary disabled:opacity-50 disabled:cursor-not-allowed"
                           disabled={isSubmittingEdit}
@@ -888,6 +1251,205 @@ const ProfilePage = () => {
           </Modal>
       )}
 
+      {/* Theme Customization Modal */}
+      {isCustomizingTheme && (
+          <Modal
+              isOpen={isCustomizingTheme}
+              onClose={() => setIsCustomizingTheme(false)}
+              title="Настройка темы витрины"
+              size="xl"
+          >
+              <div className="space-y-6">
+                  <div className="grid grid-cols-2 gap-6">
+                      {/* Preview */}
+                      <div className="relative h-[300px] rounded-2xl overflow-hidden" style={{ backgroundColor: previewTheme.background }}>
+                          <div className="absolute inset-0">
+                              {previewTheme.type === 'squares' && (
+                                  <Squares 
+                                      direction={previewTheme.squares.direction}
+                                      speed={previewTheme.squares.speed}
+                                      borderColor={previewTheme.squares.borderColor}
+                                      squareSize={previewTheme.squares.squareSize}
+                                      hoverFillColor={previewTheme.squares.hoverFillColor}
+                                  />
+                              )}
+                              {previewTheme.type === 'dither' && (
+                                  <Dither
+                                      waveSpeed={previewTheme.dither.waveSpeed}
+                                      waveFrequency={previewTheme.dither.waveFrequency}
+                                      waveAmplitude={previewTheme.dither.waveAmplitude}
+                                      waveColor={previewTheme.dither.waveColor}
+                                      colorNum={previewTheme.dither.colorNum}
+                                      pixelSize={previewTheme.dither.pixelSize}
+                                      enableMouseInteraction={previewTheme.dither.enableMouseInteraction}
+                                      mouseRadius={previewTheme.dither.mouseRadius}
+                                  />
+                              )}
+                          </div>
+                      </div>
+
+                      {/* Controls */}
+                      <div className="space-y-4">
+                          <div>
+                              <label className="block text-sm font-medium text-campfire-light mb-2">
+                                  Тип темы
+                              </label>
+                              <select
+                                  value={previewTheme.type}
+                                  onChange={(e) => setPreviewTheme(prev => ({ ...prev, type: e.target.value }))}
+                                  className="w-full p-2 bg-campfire-dark border border-campfire-ash/30 rounded-md text-campfire-light focus:ring-2 focus:ring-campfire-amber focus:border-transparent transition-colors"
+                              >
+                                  <option value="none">Без темы</option>
+                                  <option value="background" disabled={!isThemeAvailable('background')}>
+                                      Цвет фона {!isThemeAvailable('background') && '(Доступно со 2 уровня)'}
+                                  </option>
+                                  <option value="squares" disabled={!isThemeAvailable('squares')}>
+                                      Квадраты {!isThemeAvailable('squares') && '(Доступно с 3 уровня)'}
+                                  </option>
+                                  <option value="dither" disabled={!isThemeAvailable('dither')}>
+                                      Волны {!isThemeAvailable('dither') && '(Доступно с 7 уровня)'}
+                                  </option>
+                              </select>
+                          </div>
+
+                          {previewTheme.type === 'background' && (
+                              <div>
+                                  <div className="flex justify-between items-center mb-2">
+                                      <label className="text-sm font-medium text-campfire-light">
+                                          Цвет фона
+                                      </label>
+                                      <div className="w-6 h-6 rounded-full border border-campfire-ash/30" style={{ backgroundColor: previewTheme.background }}></div>
+                                  </div>
+                                  <input
+                                      type="color"
+                                      value={previewTheme.background}
+                                      onChange={(e) => setPreviewTheme(prev => ({ ...prev, background: e.target.value }))}
+                                      className="w-full h-10 rounded-md cursor-pointer [&::-webkit-color-swatch]:border-0 [&::-webkit-color-swatch]:rounded-md"
+                                  />
+                              </div>
+                          )}
+
+                          {previewTheme.type === 'squares' && isThemeAvailable('squares') && (
+                              <>
+                                  <div>
+                                      <div className="flex justify-between items-center mb-2">
+                                          <label className="text-sm font-medium text-campfire-light">
+                                              Направление
+                                          </label>
+                                          <select
+                                              value={previewTheme.squares.direction}
+                                              onChange={(e) => handleThemeParamChange('squares', 'direction', e.target.value)}
+                                              className="w-full p-2 bg-campfire-dark border border-campfire-ash/30 rounded-md text-campfire-light focus:ring-2 focus:ring-campfire-amber focus:border-transparent transition-colors"
+                                          >
+                                              <option value="up">Вверх</option>
+                                              <option value="down">Вниз</option>
+                                              <option value="left">Влево</option>
+                                              <option value="right">Вправо</option>
+                                              <option value="diagonal">По диагонали</option>
+                                          </select>
+                                      </div>
+                                      <div>
+                                          <div className="flex justify-between items-center mb-2">
+                                              <label className="text-sm font-medium text-campfire-light">
+                                                  Скорость
+                                              </label>
+                                              <span className="text-xs text-campfire-ash">{previewTheme.squares.speed.toFixed(1)}</span>
+                                          </div>
+                                          <input
+                                              type="range"
+                                              min="0.1"
+                                              max="1"
+                                              step="0.1"
+                                              value={previewTheme.squares.speed}
+                                              onChange={(e) => handleThemeParamChange('squares', 'speed', parseFloat(e.target.value))}
+                                              className="w-full h-1 bg-campfire-ash/20 rounded-lg appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-campfire-amber [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:transition-all [&::-webkit-slider-thumb]:hover:scale-110 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-campfire-amber [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:transition-all [&::-moz-range-thumb]:hover:scale-110 [&::-moz-range-thumb]:border-0"
+                                          />
+                                      </div>
+                                      <div>
+                                          <div className="flex justify-between items-center mb-2">
+                                              <label className="text-sm font-medium text-campfire-light">
+                                                  Цвет границ
+                                              </label>
+                                              <div className="w-6 h-6 rounded-full border border-campfire-ash/30" style={{ backgroundColor: previewTheme.squares.borderColor }}></div>
+                                          </div>
+                                          <input
+                                              type="color"
+                                              value={previewTheme.squares.borderColor}
+                                              onChange={(e) => handleThemeParamChange('squares', 'borderColor', e.target.value)}
+                                              className="w-full h-10 rounded-md cursor-pointer [&::-webkit-color-swatch]:border-0 [&::-webkit-color-swatch]:rounded-md [&::-moz-color-swatch]:border-0 [&::-moz-color-swatch]:rounded-md"
+                                          />
+                                      </div>
+                                      <div>
+                                          <div className="flex justify-between items-center mb-2">
+                                              <label className="text-sm font-medium text-campfire-light">
+                                                  Размер квадратов
+                                              </label>
+                                              <span className="text-xs text-campfire-ash">{previewTheme.squares.squareSize}px</span>
+                                          </div>
+                                          <input
+                                              type="range"
+                                              min="10"
+                                              max="50"
+                                              step="1"
+                                              value={previewTheme.squares.squareSize}
+                                              onChange={(e) => handleThemeParamChange('squares', 'squareSize', parseInt(e.target.value))}
+                                              className="w-full h-1 bg-campfire-ash/20 rounded-lg appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-campfire-amber [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:transition-all [&::-webkit-slider-thumb]:hover:scale-110 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-campfire-amber [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:transition-all [&::-moz-range-thumb]:hover:scale-110 [&::-moz-range-thumb]:border-0"
+                                          />
+                                      </div>
+                                      <div>
+                                          <div className="flex justify-between items-center mb-2">
+                                              <label className="text-sm font-medium text-campfire-light">
+                                                  Цвет при наведении
+                                              </label>
+                                              <div className="w-6 h-6 rounded-full border border-campfire-ash/30" style={{ backgroundColor: previewTheme.squares.hoverFillColor }}></div>
+                                          </div>
+                                          <input
+                                              type="color"
+                                              value={previewTheme.squares.hoverFillColor}
+                                              onChange={(e) => handleThemeParamChange('squares', 'hoverFillColor', e.target.value)}
+                                              className="w-full h-10 rounded-md cursor-pointer [&::-webkit-color-swatch]:border-0 [&::-webkit-color-swatch]:rounded-md [&::-moz-color-swatch]:border-0 [&::-moz-color-swatch]:rounded-md"
+                                          />
+                                      </div>
+                                      <div>
+                                          <div className="flex justify-between items-center mb-2">
+                                              <label className="text-sm font-medium text-campfire-light">
+                                                  Цвет фона квадратов
+                                              </label>
+                                              <div className="w-6 h-6 rounded-full border border-campfire-ash/30" style={{ backgroundColor: previewTheme.squares.backgroundColor }}></div>
+                                          </div>
+                                          <input
+                                              type="color"
+                                              value={previewTheme.squares.backgroundColor}
+                                              onChange={(e) => handleThemeParamChange('squares', 'backgroundColor', e.target.value)}
+                                              className="w-full h-10 rounded-md cursor-pointer [&::-webkit-color-swatch]:border-0 [&::-webkit-color-swatch]:rounded-md [&::-moz-color-swatch]:border-0 [&::-moz-color-swatch]:rounded-md"
+                                          />
+                                      </div>
+                                  </div>
+                              </>
+                          )}
+                      </div>
+                  </div>
+
+                  {/* Modal Actions */}
+                  <div className="flex justify-end space-x-4 mt-6">
+                      <button
+                          type="button"
+                          onClick={() => setIsCustomizingTheme(false)}
+                          className="btn-secondary"
+                      >
+                          Отмена
+                      </button>
+                      <button
+                          type="button"
+                          onClick={handleSaveTheme}
+                          className="btn-primary"
+                      >
+                          Сохранить тему
+                      </button>
+                  </div>
+              </div>
+          </Modal>
+      )}
 
     </div>
   );
diff --git a/src/pages/ProfileSettingsPage.jsx b/src/pages/ProfileSettingsPage.jsx
deleted file mode 100644
index fb84e04..0000000
--- a/src/pages/ProfileSettingsPage.jsx
+++ /dev/null
@@ -1,433 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { useAuth } from '../contexts/AuthContext';
-import { Navigate, useNavigate } from 'react-router-dom';
-import { updateUserProfile, uploadFile, deleteFile, getFileUrl } from '../services/pocketbaseService'; // Use PocketBase service
-import { toast } from 'react-toastify';
-import { FaSpinner } from 'react-icons/fa';
-
-const ProfileSettingsPage = () => {
-  const { user, userProfile, isInitialized, loading: authLoading, error: authError, refreshUserProfile } = useAuth(); // user and userProfile are the same PocketBase record
-  const navigate = useNavigate();
-
-  const [formData, setFormData] = useState({
-    username: '',
-    description: '',
-    profile_picture_file: undefined, // Use undefined initially to distinguish from null (cleared)
-    banner_picture_file: undefined, // Use undefined initially to distinguish from null (cleared)
-  });
-
-  const [previewAvatar, setPreviewAvatar] = useState(null); // URL for avatar preview
-  const [previewBanner, setPreviewBanner] = useState(null); // URL for banner preview
-  const [isSaving, setIsSaving] = useState(false);
-  const [saveError, setSaveError] = useState(null);
-
-  // Store initial data for comparison
-  const [initialData, setInitialData] = useState(null);
-  // Store initial file names for comparison (PocketBase stores filenames)
-  const [initialFiles, setInitialFiles] = useState({
-      profile_picture: null,
-      banner_picture: null, // Corrected key
-  });
-
-
-  // Effect to populate form when userProfile is loaded
-  useEffect(() => {
-    if (userProfile) {
-      const dataToPopulate = {
-        username: userProfile.username || '',
-        description: userProfile.description || '',
-        profile_picture_file: undefined, // Reset file inputs to undefined (not touched)
-        banner_picture_file: undefined, // Reset file inputs to undefined (not touched)
-      };
-      setFormData(dataToPopulate);
-      // Store initial data for comparison
-      setInitialData(dataToPopulate);
-
-      // Store initial file names
-      setInitialFiles({
-          profile_picture: userProfile.profile_picture || null,
-          banner_picture: userProfile.banner_picture || null, // Corrected key
-      });
-
-
-      // Use the actual URLs from userProfile for initial previews
-      // PocketBase file fields store filenames, use getFileUrl to get the actual URL
-      setPreviewAvatar(getFileUrl(userProfile, 'profile_picture') || null);
-      setPreviewBanner(getFileUrl(userProfile, 'banner_picture') || null); // Corrected field name
-    }
-  }, [userProfile]);
-
-  // Wait for auth to initialize before deciding
-  if (!isInitialized || authLoading) {
-    return (
-      <div className="min-h-screen flex items-center justify-center bg-campfire-dark pt-20">
-        <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-campfire-amber"></div>
-      </div>
-    );
-  }
-
-  // If user is not logged in, redirect to login page
-  if (!user) {
-    return <Navigate to="/auth" replace />;
-  }
-
-  // If user is logged in but profile is not loaded yet (and not saving), show loading
-  // This handles the case where user is logged in but userProfile is still null initially
-  // In PocketBase, user and userProfile are the same record from authStore.model,
-  // so if user exists, userProfile should also exist unless there's an init issue.
-  // Still good to keep this check for robustness.
-  if (!userProfile && !isSaving) {
-     return (
-        <div className="min-h-screen flex items-center justify-center bg-campfire-dark pt-20">
-           <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-campfire-amber"></div>
-        </div>
-     );
-  }
-
-
-  const handleInputChange = (e) => {
-    const { name, value } = e.target;
-    setFormData({ ...formData, [name]: value });
-  };
-
-  const handleFileChange = (e) => {
-    const { name, files } = e.target;
-    const file = files[0];
-
-    // Determine which file input changed based on the 'name' attribute
-    const isAvatar = name === 'profile_picture';
-    const isBanner = name === 'banner_picture'; // Corrected name check
-
-    if (file) {
-      // Update the correct file state variable
-      if (isAvatar) {
-        setFormData(prev => ({ ...prev, profile_picture_file: file }));
-        // Create a preview URL
-        const reader = new FileReader();
-        reader.onloadend = () => setPreviewAvatar(reader.result);
-        reader.readAsDataURL(file);
-      } else if (isBanner) { // Corrected check
-        setFormData(prev => ({ ...prev, banner_picture_file: file })); // Corrected state key
-        // Create a preview URL
-        const reader = new FileReader();
-        reader.onloadend = () => setPreviewBanner(reader.result);
-        reader.readAsDataURL(file);
-      }
-    } else {
-       // If file input is cleared (user cancels file selection or clicks clear)
-       if (isAvatar) {
-          setFormData(prev => ({ ...prev, profile_picture_file: null })); // Set to null to indicate clearing
-          // Revert preview to the original URL from userProfile if it exists
-          setPreviewAvatar(getFileUrl(userProfile, 'profile_picture') || null);
-       } else if (isBanner) { // Corrected check
-          setFormData(prev => ({ ...prev, banner_picture_file: null })); // Set to null to indicate clearing
-          // Revert preview to the original URL from userProfile if it exists
-          setPreviewBanner(getFileUrl(userProfile, 'banner_picture') || null); // Corrected field name
-       }
-    }
-  };
-
-  const handleClearFile = async (type) => {
-     if (!user || !userProfile) return;
-
-     const fileStateKey = type === 'avatar' ? 'profile_picture_file' : 'banner_picture_file'; // Corrected state key for banner
-     const previewSetter = type === 'avatar' ? setPreviewAvatar : setPreviewBanner;
-
-     // Clear the file input state by setting it to null
-     setFormData(prev => ({ ...prev, [fileStateKey]: null }));
-     // Clear the preview immediately
-     previewSetter(null);
-
-     console.log(`Marked ${type} file for clearing.`);
-  };
-
-
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    if (!user || !userProfile || !initialData || !initialFiles) return; // Ensure initialData and initialFiles are available
-
-    setIsSaving(true);
-    setSaveError(null);
-
-    const formDataToSubmit = new FormData();
-    let changesMade = false;
-
-    // Handle Text Field Changes
-    if (formData.username !== initialData.username) {
-        formDataToSubmit.append('username', formData.username);
-        changesMade = true;
-        console.log('Username changed:', formData.username);
-    }
-    if (formData.description !== initialData.description) {
-        formDataToSubmit.append('description', formData.description);
-        changesMade = true;
-        console.log('Description changed:', formData.description);
-    }
-
-    // Handle Avatar File Change/Clear
-    const newAvatarFile = formData.profile_picture_file; // Can be File, null (cleared), or undefined (not touched)
-    const initialAvatarFileName = initialFiles.profile_picture; // Can be string (filename) or null
-
-    // Check if the avatar file input was touched (either a new file selected or cleared)
-    if (newAvatarFile !== undefined) {
-        if (newAvatarFile instanceof File) {
-            // New avatar file selected
-            console.log('New avatar file selected. Adding to FormData.');
-            formDataToSubmit.append('profile_picture', newAvatarFile);
-            changesMade = true;
-        } else if (newAvatarFile === null && initialAvatarFileName) {
-            // Avatar input was cleared AND there was an existing avatar - mark for deletion
-            console.log('Avatar cleared. Marking profile_picture for deletion.');
-            formDataToSubmit.append('profile_picture', null); // Set field to null to delete file
-            changesMade = true;
-        }
-        // If newAvatarFile is null and initialAvatarFileName is null, do nothing (already no file).
-    }
-    // If newAvatarFile is undefined, the input wasn't touched, do nothing (keep existing file if any).
-
-
-    // Handle Banner File Change/Clear
-    const newBannerFile = formData.banner_picture_file; // Can be File, null (cleared), or undefined (not touched)
-    const initialBannerFileName = initialFiles.banner_picture; // Can be string (filename) or null
-
-    // Check if the banner file input was touched (either a new file selected or cleared)
-    if (newBannerFile !== undefined) {
-        if (newBannerFile instanceof File) {
-            // New banner file selected
-            console.log('New banner file selected. Adding to FormData.');
-            formDataToSubmit.append('banner_picture', newBannerFile);
-            changesMade = true;
-        } else if (newBannerFile === null && initialBannerFileName) {
-            // Banner input was cleared AND there was an existing banner - mark for deletion
-            console.log('Banner cleared. Marking banner_picture for deletion.');
-            formDataToSubmit.append('banner_picture', null); // Set field to null to delete file
-            changesMade = true;
-        }
-        // If newBannerFile is null and initialBannerFileName is null, do nothing (already no file).
-    }
-    // If newBannerFile is undefined, the input wasn't touched, do nothing (keep existing file if any).
-
-
-    // Check if any changes were made
-    if (!changesMade) {
-        console.log('No changes detected, cancelling save.');
-        toast.info('Нет изменений для сохранения.');
-        setIsSaving(false);
-        return; // Stop the submission process
-    }
-
-    // Log FormData contents before sending (for debugging)
-    console.log('Attempting to update profile with FormData:');
-    for (let pair of formDataToSubmit.entries()) {
-        console.log(pair[0]+ ': ' + pair[1]);
-    }
-
-
-    try {
-      // PocketBase update method correctly handles FormData with partial updates
-      // Only fields present in FormData will be updated.
-      await updateUserProfile(user.id, formDataToSubmit); // Pass the single FormData object
-      console.log('Profile update successful.');
-
-      // Refresh the user record in context to get the latest data and file URLs
-      await refreshUserProfile();
-
-      toast.success('Профиль успешно обновлен!');
-      navigate(`/profile/${user.username}`);
-
-    } catch (error) {
-      console.error('Failed to save profile:', error);
-      if (error.response && error.response.data) {
-         console.error('PocketBase: Response data:', error.response.data);
-         // Check for specific PocketBase validation errors
-         if (error.response.data.username && error.response.data.username.code === 'validation_not_unique') {
-            setSaveError('Имя пользователя уже занято.');
-            toast.error('Имя пользователя уже занято.');
-         } else {
-            // Generic error message from PocketBase response
-            const errorMessages = Object.values(error.response.data).map(err => err.message).join(', ');
-            setSaveError(`Ошибка сохранения: ${errorMessages || error.message}`);
-            toast.error(`Ошибка сохранения профиля: ${errorMessages || error.message}`);
-         }
-      } else {
-         // General error message
-         setSaveError(error.message || 'Произошла ошибка при сохранении.');
-         toast.error(`Ошибка сохранения профиля: ${error.message || 'Произошла ошибка'}`);
-      }
-    } finally {
-      setIsSaving(false);
-    }
-  };
-
-  // Render the settings page content for the logged-in user
-  return (
-    <div className="min-h-screen bg-campfire-dark pt-20">
-      <div className="container-custom py-12">
-        <div className="bg-campfire-charcoal rounded-lg shadow-lg border border-campfire-ash/20 p-8">
-          <h1 className="text-2xl font-bold text-campfire-light mb-6">
-            Настройки профиля
-          </h1>
-
-          {saveError && (
-            <div className="bg-red-800 text-white p-3 rounded mb-4">
-              {saveError}
-            </div>
-          )}
-
-          {userProfile && (
-            <form onSubmit={handleSubmit} className="space-y-6">
-              {/* Avatar Upload */}
-              <div>
-                <label htmlFor="profile_picture" className="block text-sm font-medium text-campfire-ash mb-2">
-                  Аватар
-                </label>
-                <div className="flex items-center space-x-4">
-                  <div className="flex-shrink-0">
-                    <img
-                      className="h-20 w-20 rounded-full object-cover border border-campfire-ash/30"
-                      // Use previewAvatar (FileReader URL) if a new file is selected,
-                      // otherwise use the URL from the userProfile (generated by getFileUrl)
-                      src={previewAvatar || getFileUrl(userProfile, 'profile_picture') || 'https://via.placeholder.com/150/333333/FFFFFF?text=No+Avatar'}
-                      alt="Аватар пользователя"
-                    />
-                  </div>
-                  <div>
-                    <input
-                      type="file"
-                      id="profile_picture"
-                      name="profile_picture" // Use name matching handleFileChange logic
-                      accept="image/*"
-                      onChange={handleFileChange}
-                      className="block w-full text-sm text-campfire-ash
-                        file:mr-4 file:py-2 file:px-4
-                        file:rounded-full file:border-0
-                        file:text-sm file:font-semibold
-                        file:bg-campfire-amber file:text-campfire-dark
-                        hover:file:bg-campfire-amber/80 cursor-pointer"
-                    />
-                     {(previewAvatar || getFileUrl(userProfile, 'profile_picture')) && ( // Show clear button if there's a preview or existing picture
-                        <button
-                           type="button"
-                           onClick={() => handleClearFile('avatar')}
-                           className="mt-2 text-sm text-red-400 hover:text-red-500"
-                        >
-                           Удалить аватар
-                        </button>
-                     )}
-                  </div>
-                </div>
-              </div>
-
-              {/* Banner Upload */}
-              <div>
-                <label htmlFor="banner_picture" className="block text-sm font-medium text-campfire-ash mb-2"> {/* Corrected htmlFor and label text */}
-                  Баннер
-                </label>
-                <div className="relative w-full h-40 rounded-lg overflow-hidden border border-campfire-ash/30 bg-campfire-dark">
-                   {/* Use previewBanner or getFileUrl for banner */}
-                   {(previewBanner || getFileUrl(userProfile, 'banner_picture')) ? (
-                      <img
-                         className="w-full h-full object-cover"
-                         src={previewBanner || getFileUrl(userProfile, 'banner_picture')} // Corrected field name
-                         alt="Баннер пользователя"
-                      />
-                   ) : (
-                      <div className="w-full h-full flex items-center justify-center text-campfire-ash/50">
-                         Нет баннера
-                      </div>
-                   )}
-                   <input
-                      type="file"
-                      id="banner_picture" // Corrected id
-                      name="banner_picture" // Corrected name matching handleFileChange logic
-                      accept="image/*"
-                      onChange={handleFileChange}
-                      className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
-                   />
-                </div>
-                 {(previewBanner || getFileUrl(userProfile, 'banner_picture')) && ( // Show clear button if there's a preview or existing banner (Corrected field name)
-                    <button
-                       type="button"
-                       onClick={() => handleClearFile('banner')}
-                       className="mt-2 text-sm text-red-400 hover:text-red-500"
-                    >
-                       Удалить баннер
-                    </button>
-                 )}
-              </div>
-
-
-              {/* Username Input */}
-              <div>
-                <label htmlFor="username" className="block text-sm font-medium text-campfire-ash mb-2">
-                  Имя пользователя
-                </label>
-                <input
-                  type="text"
-                  id="username"
-                  name="username"
-                  value={formData.username}
-                  onChange={handleInputChange}
-                  className="w-full px-3 py-2 bg-campfire-dark text-campfire-light border border-campfire-ash/30 rounded-md focus:outline-none focus:ring-campfire-amber focus:border-campfire-amber"
-                  required
-                />
-              </div>
-
-              {/* Description (Bio) Textarea */}
-              <div>
-                <label htmlFor="description" className="block text-sm font-medium text-campfire-ash mb-2">
-                  О себе (Биография)
-                </label>
-                <textarea
-                  id="description"
-                  name="description"
-                  value={formData.description}
-                  onChange={handleInputChange}
-                  rows="4"
-                  className="w-full px-3 py-2 bg-campfire-dark text-campfire-light border border-campfire-ash/30 rounded-md focus:outline-none focus:ring-campfire-amber focus:border-campfire-amber"
-                ></textarea>
-              </div>
-
-              {/* Stats (Placeholder) */}
-              <div>
-                 <h3 className="text-lg font-semibold text-campfire-light mb-4">Статистика</h3>
-                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-campfire-ash">
-                    <div className="bg-campfire-dark p-4 rounded-md border border-campfire-ash/30">
-                       <p className="text-sm">Всего обзоров:</p>
-                       <p className="text-xl font-bold text-campfire-light">{userProfile.review_count || 0}</p>
-                    </div>
-                    <div className="bg-campfire-dark p-4 rounded-md border border-campfire-ash/30">
-                       <p className="text-sm">Средняя оценка:</p>
-                       <p className="text-xl font-bold text-campfire-light">{userProfile.average_rating ? userProfile.average_rating.toFixed(1) : 'N/A'}</p>
-                    </div>
-                    {/* Add more stats here if available in userProfile */}
-                 </div>
-              </div>
-
-
-              {/* Save Button */}
-              <div>
-                <button
-                  type="submit"
-                  className="w-full bg-campfire-amber text-campfire-dark font-bold py-2 px-4 rounded-md hover:bg-campfire-amber/80 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-campfire-amber focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-not-allowed"
-                  disabled={isSaving}
-                >
-                  {isSaving ? (
-                    <span className="flex items-center">
-                      <FaSpinner className="animate-spin mr-2" />
-                      Сохранение...
-                    </span>
-                  ) : (
-                    'Сохранить изменения'
-                  )}
-                </button>
-              </div>
-            </form>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default ProfileSettingsPage;
diff --git a/src/pages/RatingPage.jsx b/src/pages/RatingPage.jsx
index 5b423f0..dea497f 100644
--- a/src/pages/RatingPage.jsx
+++ b/src/pages/RatingPage.jsx
@@ -87,7 +87,7 @@ const RatingPage = () => {
     const renderUserList = (userItems, rankType) => (
         <div className="space-y-4">
             {userItems.map((user, index) => (
-                <Link to={`/profile/${user.username}`} key={user.id} className="bg-campfire-charcoal rounded-lg shadow-md p-4 flex items-center border border-campfire-ash/20 hover:border-campfire-amber transition-colors duration-200">
+                <Link to={`/profile/${user.login}`} key={user.id} className="bg-campfire-charcoal rounded-lg shadow-md p-4 flex items-center border border-campfire-ash/20 hover:border-campfire-amber transition-colors duration-200">
                     <span className="text-campfire-amber font-bold text-xl mr-4 w-8 text-center">{index + 1}.</span>
                     <img
                         src={getFileUrl(user, 'profile_picture') || 'https://images.pexels.com/photos/1704488/pexels-photo-1704488.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'}
diff --git a/src/pages/RegisterPage.jsx b/src/pages/RegisterPage.jsx
index fd699aa..26f24a1 100644
--- a/src/pages/RegisterPage.jsx
+++ b/src/pages/RegisterPage.jsx
@@ -13,25 +13,13 @@ function RegisterPage() {
   const { user, userProfile, loading: authLoading, signUp, isInitialized } = useAuth();
   const navigate = useNavigate();
 
-  console.log('RegisterPage: Rendering. State:', { user: !!user, userProfile: !!userProfile, authLoading, isInitialized, componentLoading: loading, componentError: error }); // Add component render log
-
-
   useEffect(() => {
-    console.log('RegisterPage useEffect: Running. State:', { user: !!user, userProfile: !!userProfile, authLoading, isInitialized }); // Add useEffect log
-    if (!authLoading && isInitialized) { // Wait for auth to be initialized and not loading
-        if (user && userProfile) {
-            console.log('RegisterPage useEffect: User and profile loaded, redirecting to home.');
-            navigate("/"); // Redirect after successful registration or if already logged in
-        } else {
-            console.log('RegisterPage useEffect: No user and auth initialized, staying on register.');
-        }
-    } else if (authLoading) {
-       console.log('RegisterPage useEffect: Auth is loading...');
-    } else if (!isInitialized) {
-       console.log('RegisterPage useEffect: Auth is not initialized...');
+    if (!authLoading && isInitialized) {
+      if (user && userProfile) {
+        navigate("/");
+      }
     }
-  }, [user, userProfile, authLoading, isInitialized, navigate]); // Add isInitialized to dependencies
-
+  }, [user, userProfile, authLoading, isInitialized, navigate]);
 
   const handleSubmit = async (e) => {
     e.preventDefault();
@@ -51,13 +39,11 @@ function RegisterPage() {
       return;
     }
 
-    // Проверка на допустимые символы в логине
     if (!/^[a-zA-Z0-9_]+$/.test(login)) {
       setError("Логин может содержать только латинские буквы, цифры и знак подчеркивания");
       return;
     }
 
-    // Проверка длины логина
     if (login.length < 3 || login.length > 20) {
       setError("Логин должен быть от 3 до 20 символов");
       return;
@@ -66,14 +52,8 @@ function RegisterPage() {
     try {
       setError("");
       setLoading(true);
-      console.log('RegisterPage handleSubmit: Attempting sign up...');
       await signUp(login, password, email || null);
-      console.log('RegisterPage handleSubmit: Sign up process initiated. Redirect handled by useEffect.');
-      // Redirect is now handled by the useEffect based on auth state change
-
     } catch (err) {
-      console.error("Registration error:", err);
-      // More specific error handling for PocketBase unique constraints
       if (err.response && err.response.data) {
         const errorData = err.response.data;
         if (errorData.login && errorData.login.code === 'validation_not_unique') {
@@ -91,20 +71,13 @@ function RegisterPage() {
     }
   };
 
-  // Render loading state based on AuthContext loading
-  // Removed the check here to allow the form to render even if auth is loading,
-  // relying on the AuthProvider's own loading state handling.
-  // This might help diagnose if the component itself is not rendering.
-  // if (authLoading || !isInitialized) {
-  //    console.log('RegisterPage: Rendering initial auth loading state.');
-  //    return (
-  //       <div className="pt-20 min-h-screen flex items-center justify-center bg-campfire-dark text-campfire-light">
-  //          Загрузка авторизации...
-  //       </div>
-  //    );
-  // }
-
-  console.log('RegisterPage: Rendering registration form.'); // Log before rendering form
+  if (authLoading || !isInitialized) {
+    return (
+      <div className="min-h-screen bg-campfire-dark pt-20 flex justify-center items-center">
+        <div className="animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-campfire-amber"></div>
+      </div>
+    );
+  }
 
   return (
     <div className="pt-20 min-h-screen flex items-center justify-center bg-campfire-dark text-campfire-light">
diff --git a/src/pages/admin/AdminAchievementsPage.jsx b/src/pages/admin/AdminAchievementsPage.jsx
index 5b89676..2b4bbc2 100644
--- a/src/pages/admin/AdminAchievementsPage.jsx
+++ b/src/pages/admin/AdminAchievementsPage.jsx
@@ -2,7 +2,13 @@ import React, { useState, useEffect } from 'react';
 import { getAllAchievements, pb } from '../../services/pocketbaseService'; // Import pb for file URL
 import AchievementForm from '../../components/admin/AchievementForm'; // Import the form component
 import Modal from '../../components/common/Modal'; // Assuming you have a Modal component
-import { FaTrophy, FaEdit, FaTrash } from 'react-icons/fa'; // Icons
+import { FaEdit, FaTrash } from 'react-icons/fa'; // Icons
+import * as FaIcons from 'react-icons/fa';
+import * as MdIcons from 'react-icons/md';
+import * as IoIcons from 'react-icons/io5';
+import * as BiIcons from 'react-icons/bi';
+import * as HiIcons from 'react-icons/hi';
+import * as RiIcons from 'react-icons/ri';
 
 const AdminAchievementsPage = () => {
   const [achievements, setAchievements] = useState([]);
@@ -11,6 +17,20 @@ const AdminAchievementsPage = () => {
   const [showFormModal, setShowFormModal] = useState(false); // State for form modal
   const [achievementToEdit, setAchievementToEdit] = useState(null); // State for editing
 
+  // Получаем компонент иконки по имени
+  const getIconComponent = (iconName) => {
+    const prefix = iconName.substring(0, 2).toLowerCase();
+    switch (prefix) {
+      case 'fa': return FaIcons[iconName];
+      case 'md': return MdIcons[iconName];
+      case 'io': return IoIcons[iconName];
+      case 'bi': return BiIcons[iconName];
+      case 'hi': return HiIcons[iconName];
+      case 'ri': return RiIcons[iconName];
+      default: return FaIcons.FaTrophy;
+    }
+  };
+
   useEffect(() => {
     loadAchievements();
   }, []);
@@ -90,37 +110,38 @@ const AdminAchievementsPage = () => {
         </div>
       ) : (
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-          {achievements.map((achievement) => (
-            <div
-              key={achievement.id}
-              className="bg-campfire-charcoal rounded-lg p-4 flex items-center space-x-4 border border-campfire-ash/20"
-            >
-              {/* Achievement Icon (using a placeholder for now) */}
-              <div className="flex-shrink-0 text-campfire-amber">
-                  {/* You would ideally use the achievement.icon here if available */}
-                  <FaTrophy size={30} />
-              </div>
-              <div className="flex-grow">
-                <h3 className="font-semibold text-campfire-light">{achievement.title}</h3>
-                <p className="text-sm text-campfire-ash">{achievement.description}</p>
-                <p className="text-xs text-campfire-amber mt-1">+ {achievement.xp_reward} XP</p>
-              </div>
-              <div className="flex flex-col space-y-2">
-                 <button
+          {achievements.map((achievement) => {
+            const IconComponent = getIconComponent(achievement.icon);
+            return (
+              <div
+                key={achievement.id}
+                className="bg-campfire-charcoal rounded-lg p-4 flex items-center space-x-4 border border-campfire-ash/20"
+              >
+                <div className="flex-shrink-0 text-campfire-amber">
+                  <IconComponent size={30} />
+                </div>
+                <div className="flex-grow">
+                  <h3 className="font-semibold text-campfire-light">{achievement.title}</h3>
+                  <p className="text-sm text-campfire-ash">{achievement.description}</p>
+                  <p className="text-xs text-campfire-amber mt-1">+ {achievement.xp_reward} XP</p>
+                </div>
+                <div className="flex flex-col space-y-2">
+                  <button
                     onClick={() => handleEditClick(achievement)}
                     className="text-campfire-amber hover:text-campfire-light"
-                 >
+                  >
                     <FaEdit size={18} />
-                 </button>
-                 <button
+                  </button>
+                  <button
                     onClick={() => handleDeleteClick(achievement.id)}
                     className="text-red-500 hover:text-red-400"
-                 >
+                  >
                     <FaTrash size={18} />
-                 </button>
+                  </button>
+                </div>
               </div>
-            </div>
-          ))}
+            );
+          })}
         </div>
       )}
 
diff --git a/src/pages/admin/AdminDashboard.jsx b/src/pages/admin/AdminDashboard.jsx
index 495c0e5..23d75f1 100644
--- a/src/pages/admin/AdminDashboard.jsx
+++ b/src/pages/admin/AdminDashboard.jsx
@@ -1,11 +1,13 @@
 import React, { useState, useEffect } from 'react';
 import { getAdminStats } from '../../services/pocketbaseService';
-import { FaUsers, FaFilm, FaComment, FaHeadset, FaLightbulb } from 'react-icons/fa';
+import { FaUsers, FaFilm, FaComment, FaHeadset, FaLightbulb, FaBell, FaTachometerAlt } from 'react-icons/fa';
+import NotificationManager from '../../components/admin/NotificationManager';
 
 const AdminDashboard = () => {
   const [stats, setStats] = useState(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
+  const [activeTab, setActiveTab] = useState('dashboard');
 
   useEffect(() => {
     const loadStats = async () => {
@@ -47,68 +49,98 @@ const AdminDashboard = () => {
     <div className="container-custom pt-8 text-campfire-light">
       <h1 className="text-3xl font-bold mb-6">Административная панель</h1>
       <p className="text-campfire-ash mb-8">Добро пожаловать в административную панель CampFire Critics.</p>
-      
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-        <div className="bg-campfire-charcoal p-6 rounded-lg shadow-md border border-campfire-ash/20">
-          <div className="flex items-center space-x-4 mb-4">
-            <div className="bg-campfire-amber/20 p-3 rounded-lg">
-              <FaUsers className="text-campfire-amber text-2xl" />
-            </div>
-            <div>
-              <h3 className="text-xl font-semibold text-campfire-light">Пользователи</h3>
-              <p className="text-3xl font-bold text-campfire-amber">{stats?.users || 0}</p>
-            </div>
-          </div>
-        </div>
 
-        <div className="bg-campfire-charcoal p-6 rounded-lg shadow-md border border-campfire-ash/20">
-          <div className="flex items-center space-x-4 mb-4">
-            <div className="bg-campfire-amber/20 p-3 rounded-lg">
-              <FaFilm className="text-campfire-amber text-2xl" />
-            </div>
-            <div>
-              <h3 className="text-xl font-semibold text-campfire-light">Медиа</h3>
-              <p className="text-3xl font-bold text-campfire-amber">{stats?.media || 0}</p>
-            </div>
-          </div>
-        </div>
-
-        <div className="bg-campfire-charcoal p-6 rounded-lg shadow-md border border-campfire-ash/20">
-          <div className="flex items-center space-x-4 mb-4">
-            <div className="bg-campfire-amber/20 p-3 rounded-lg">
-              <FaComment className="text-campfire-amber text-2xl" />
-            </div>
-            <div>
-              <h3 className="text-xl font-semibold text-campfire-light">Обзоры</h3>
-              <p className="text-3xl font-bold text-campfire-amber">{stats?.reviews || 0}</p>
-            </div>
-          </div>
-        </div>
-
-        <div className="bg-campfire-charcoal p-6 rounded-lg shadow-md border border-campfire-ash/20">
-          <div className="flex items-center space-x-4 mb-4">
-            <div className="bg-campfire-amber/20 p-3 rounded-lg">
-              <FaHeadset className="text-campfire-amber text-2xl" />
-            </div>
-            <div>
-              <h3 className="text-xl font-semibold text-campfire-light">Тикеты</h3>
-              <p className="text-3xl font-bold text-campfire-amber">{stats?.tickets || 0}</p>
-            </div>
-          </div>
-        </div>
-
-        <div className="bg-campfire-charcoal p-6 rounded-lg shadow-md border border-campfire-ash/20">
-          <div className="flex items-center space-x-4 mb-4">
-            <div className="bg-campfire-amber/20 p-3 rounded-lg">
-              <FaLightbulb className="text-campfire-amber text-2xl" />
-            </div>
-            <div>
-              <h3 className="text-xl font-semibold text-campfire-light">Предложения</h3>
-              <p className="text-3xl font-bold text-campfire-amber">{stats?.suggestions || 0}</p>
-            </div>
-          </div>
-        </div>
+      {/* Tabs */}
+      <div className="flex space-x-4 mb-6">
+        <button
+          onClick={() => setActiveTab('dashboard')}
+          className={`px-4 py-2 rounded-md flex items-center space-x-2 ${
+            activeTab === 'dashboard' ? 'bg-campfire-amber text-campfire-dark' : 'bg-campfire-charcoal text-campfire-light'
+          }`}
+        >
+          <FaTachometerAlt />
+          <span>Обзор</span>
+        </button>
+        <button
+          onClick={() => setActiveTab('notifications')}
+          className={`px-4 py-2 rounded-md flex items-center space-x-2 ${
+            activeTab === 'notifications' ? 'bg-campfire-amber text-campfire-dark' : 'bg-campfire-charcoal text-campfire-light'
+          }`}
+        >
+          <FaBell />
+          <span>Уведомления</span>
+        </button>
       </div>
+      
+      {activeTab === 'dashboard' && (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          <div className="bg-campfire-charcoal p-6 rounded-lg shadow-md border border-campfire-ash/20">
+            <div className="flex items-center space-x-4 mb-4">
+              <div className="bg-campfire-amber/20 p-3 rounded-lg">
+                <FaUsers className="text-campfire-amber text-2xl" />
+              </div>
+              <div>
+                <h3 className="text-xl font-semibold text-campfire-light">Пользователи</h3>
+                <p className="text-3xl font-bold text-campfire-amber">{stats?.users || 0}</p>
+              </div>
+            </div>
+          </div>
+
+          <div className="bg-campfire-charcoal p-6 rounded-lg shadow-md border border-campfire-ash/20">
+            <div className="flex items-center space-x-4 mb-4">
+              <div className="bg-campfire-amber/20 p-3 rounded-lg">
+                <FaFilm className="text-campfire-amber text-2xl" />
+              </div>
+              <div>
+                <h3 className="text-xl font-semibold text-campfire-light">Медиа</h3>
+                <p className="text-3xl font-bold text-campfire-amber">{stats?.media || 0}</p>
+              </div>
+            </div>
+          </div>
+
+          <div className="bg-campfire-charcoal p-6 rounded-lg shadow-md border border-campfire-ash/20">
+            <div className="flex items-center space-x-4 mb-4">
+              <div className="bg-campfire-amber/20 p-3 rounded-lg">
+                <FaComment className="text-campfire-amber text-2xl" />
+              </div>
+              <div>
+                <h3 className="text-xl font-semibold text-campfire-light">Обзоры</h3>
+                <p className="text-3xl font-bold text-campfire-amber">{stats?.reviews || 0}</p>
+              </div>
+            </div>
+          </div>
+
+          <div className="bg-campfire-charcoal p-6 rounded-lg shadow-md border border-campfire-ash/20">
+            <div className="flex items-center space-x-4 mb-4">
+              <div className="bg-campfire-amber/20 p-3 rounded-lg">
+                <FaHeadset className="text-campfire-amber text-2xl" />
+              </div>
+              <div>
+                <h3 className="text-xl font-semibold text-campfire-light">Тикеты</h3>
+                <p className="text-3xl font-bold text-campfire-amber">{stats?.tickets || 0}</p>
+              </div>
+            </div>
+          </div>
+
+          <div className="bg-campfire-charcoal p-6 rounded-lg shadow-md border border-campfire-ash/20">
+            <div className="flex items-center space-x-4 mb-4">
+              <div className="bg-campfire-amber/20 p-3 rounded-lg">
+                <FaLightbulb className="text-campfire-amber text-2xl" />
+              </div>
+              <div>
+                <h3 className="text-xl font-semibold text-campfire-light">Предложения</h3>
+                <p className="text-3xl font-bold text-campfire-amber">{stats?.suggestions || 0}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {activeTab === 'notifications' && (
+        <div className="space-y-6">
+          <NotificationManager />
+        </div>
+      )}
     </div>
   );
 };
diff --git a/src/pages/admin/AdminMediaPage.jsx b/src/pages/admin/AdminMediaPage.jsx
index 3896150..c9f6136 100644
--- a/src/pages/admin/AdminMediaPage.jsx
+++ b/src/pages/admin/AdminMediaPage.jsx
@@ -4,7 +4,9 @@ import { useAuth } from '../../contexts/AuthContext';
 import { listMedia, deleteMedia, mediaTypes } from '../../services/pocketbaseService';
 import Modal from '../../components/common/Modal';
 import MediaForm from '../../components/admin/MediaForm';
-import { FaEdit, FaTrashAlt, FaPlus, FaTv } from 'react-icons/fa'; // Import FaTv icon
+import TMDBImportModal from '../../components/admin/TMDBImportModal';
+import AIReviewModal from '../../components/admin/AIReviewModal';
+import { FaEdit, FaTrashAlt, FaPlus, FaTv, FaDownload, FaRobot } from 'react-icons/fa'; // Import FaTv icon
 
 const AdminMediaPage = () => {
     const navigate = useNavigate();
@@ -16,10 +18,12 @@ const AdminMediaPage = () => {
 
     const [isAddModalOpen, setIsAddModalOpen] = useState(false);
     const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+    const [isImportModalOpen, setIsImportModalOpen] = useState(false);
     const [mediaToEdit, setMediaToEdit] = useState(null);
     const [filterType, setFilterType] = useState(''); // State for type filter
     const [filterPublished, setFilterPublished] = useState(''); // State for published filter ('', 'true', 'false')
-
+    const [isAIReviewModalOpen, setIsAIReviewModalOpen] = useState(false);
+    const [selectedMedia, setSelectedMedia] = useState(null);
 
     // Check if the current user is admin
     const isAdmin = userProfile?.role === 'admin';
@@ -115,6 +119,21 @@ const AdminMediaPage = () => {
         navigate(`/admin/media/${mediaId}/seasons`);
     };
 
+    const handleImportSuccess = (importData) => {
+        setMediaToEdit(importData);
+        setIsAddModalOpen(true);
+    };
+
+    const handleAIReview = (media) => {
+        setSelectedMedia(media);
+        setIsAIReviewModalOpen(true);
+    };
+
+    const handleAIReviewSuccess = () => {
+        setIsAIReviewModalOpen(false);
+        setSelectedMedia(null);
+        loadMediaData(); // Перезагружаем данные после создания рецензии
+    };
 
     if (authLoading || loading) {
         return <div className="flex justify-center items-center h-screen text-campfire-light">Загрузка...</div>;
@@ -137,16 +156,30 @@ const AdminMediaPage = () => {
 
 
     return (
-        <div> {/* Removed container-custom and pt-20 */}
+        <div className="container-custom py-12">
             <div className="flex justify-between items-center mb-8">
-                <h2 className="text-2xl font-bold text-campfire-light">Управление контентом</h2>
+                <h1 className="text-3xl font-bold text-campfire-light">
+                    Управление <span className="font-semibold text-campfire-amber">контентом</span>
+                </h1>
+                <div className="flex gap-4">
+                    <button
+                        onClick={() => setIsImportModalOpen(true)}
+                        className="btn-secondary flex items-center gap-2"
+                    >
+                        <FaDownload />
+                        <span>Импорт из TMDB</span>
+                    </button>
                 <button
-                    onClick={handleAddMedia}
-                    className="btn-primary flex items-center space-x-2"
+                        onClick={() => {
+                            setMediaToEdit(null);
+                            setIsAddModalOpen(true);
+                        }}
+                        className="btn-primary flex items-center gap-2"
                 >
-                    <FaPlus size={18} />
+                        <FaPlus />
                     <span>Добавить контент</span>
                 </button>
+                </div>
             </div>
 
             {/* Filters */}
@@ -273,6 +306,14 @@ const AdminMediaPage = () => {
                                             >
                                                 <FaTrashAlt size={18} />
                                             </button>
+                                            {/* AI Review Button */}
+                                            <button
+                                                onClick={() => handleAIReview(media)}
+                                                className="text-campfire-amber hover:text-campfire-light transition-colors"
+                                                title="Создать ИИ-рецензию"
+                                            >
+                                                <FaRobot size={18} />
+                                            </button>
                                         </div>
                                     </td>
                                 </tr>
@@ -289,7 +330,7 @@ const AdminMediaPage = () => {
                 title="Добавить новый контент"
                 size="lg" // Use lg size
             >
-                <MediaForm onSuccess={handleFormSuccess} />
+                <MediaForm onSuccess={handleFormSuccess} media={mediaToEdit} />
             </Modal>
 
             {/* Edit Media Modal */}
@@ -302,6 +343,35 @@ const AdminMediaPage = () => {
                 {/* Pass mediaToEdit to the form */}
                 <MediaForm media={mediaToEdit} onSuccess={handleFormSuccess} />
             </Modal>
+
+            {/* Import Modal */}
+            <Modal
+                isOpen={isImportModalOpen}
+                onClose={() => setIsImportModalOpen(false)}
+                title="Импорт из TMDB"
+                size="lg"
+            >
+                <TMDBImportModal
+                    onClose={() => setIsImportModalOpen(false)}
+                    onImport={handleImportSuccess}
+                />
+            </Modal>
+
+            {/* AI Review Modal */}
+            <Modal
+                isOpen={isAIReviewModalOpen}
+                onClose={() => setIsAIReviewModalOpen(false)}
+                title="ИИ-рецензия"
+                size="lg"
+            >
+                {selectedMedia && (
+                    <AIReviewModal
+                        media={selectedMedia}
+                        onClose={() => setIsAIReviewModalOpen(false)}
+                        onSuccess={handleAIReviewSuccess}
+                    />
+                )}
+            </Modal>
         </div>
     );
 };
diff --git a/src/routes/index.jsx b/src/routes/index.jsx
new file mode 100644
index 0000000..9bfd6ff
--- /dev/null
+++ b/src/routes/index.jsx
@@ -0,0 +1,130 @@
+import React, { lazy, Suspense } from 'react';
+import { Routes, Route } from 'react-router-dom';
+import AuthRoute from '../components/auth/AuthRoute';
+import GuestRoute from '../components/auth/GuestRoute';
+import AdminRoute from '../components/auth/AdminRoute';
+import AdminLayout from '../components/admin/AdminLayout';
+import LoadingSpinner from '../components/common/LoadingSpinner';
+import TelegramAuth from '../components/TelegramAuth';
+
+// Ленивая загрузка страниц
+const HomePage = lazy(() => import('../pages/HomePage'));
+const CatalogPage = lazy(() => import('../pages/CatalogPage'));
+const MediaOverviewPage = lazy(() => import('../pages/MediaOverviewPage'));
+const ProfilePage = lazy(() => import('../pages/ProfilePage'));
+const RatingPage = lazy(() => import('../pages/RatingPage'));
+const LoginPage = lazy(() => import('../pages/LoginPage'));
+const RegisterPage = lazy(() => import('../pages/RegisterPage'));
+const ForgotPasswordPage = lazy(() => import('../pages/ForgotPasswordPage'));
+const SupportPage = lazy(() => import('../pages/SupportPage'));
+const NotFoundPage = lazy(() => import('../pages/NotFoundPage'));
+
+// Админские страницы
+const AdminDashboard = lazy(() => import('../pages/admin/AdminDashboard'));
+const AdminMediaPage = lazy(() => import('../pages/admin/AdminMediaPage'));
+const AdminUsersPage = lazy(() => import('../pages/admin/AdminUsersPage'));
+const AdminSeasonsPage = lazy(() => import('../pages/admin/AdminSeasonsPage'));
+const AdminAchievementsPage = lazy(() => import('../pages/admin/AdminAchievementsPage'));
+const AdminSupportPage = lazy(() => import('../pages/admin/AdminSupportPage'));
+const AdminSuggestionsPage = lazy(() => import('../pages/admin/AdminSuggestionsPage'));
+
+// Легальные страницы
+const PrivacyPolicyPage = lazy(() => import('../pages/legal/PrivacyPolicyPage'));
+const TermsOfServicePage = lazy(() => import('../pages/legal/TermsOfServicePage'));
+const UserAgreementPage = lazy(() => import('../pages/legal/UserAgreementPage'));
+
+// Компонент для обработки ошибок
+const ErrorBoundary = ({ children }) => {
+  const [hasError, setHasError] = React.useState(false);
+  const [error, setError] = React.useState(null);
+
+  React.useEffect(() => {
+    const handleError = (error) => {
+      setHasError(true);
+      setError(error);
+      // Здесь можно добавить логирование ошибки
+      console.error('Route Error:', error);
+    };
+
+    window.addEventListener('error', handleError);
+    return () => window.removeEventListener('error', handleError);
+  }, []);
+
+  if (hasError) {
+    return (
+      <div className="min-h-screen bg-campfire-dark pt-20 flex justify-center items-center">
+        <div className="bg-status-error/20 text-status-error p-4 rounded-lg text-center">
+          <h2 className="text-xl font-bold mb-2">Произошла ошибка</h2>
+          <p>{error?.message || 'Неизвестная ошибка'}</p>
+          <button
+            onClick={() => window.location.reload()}
+            className="mt-4 px-4 py-2 bg-campfire-amber text-campfire-dark rounded-lg hover:bg-campfire-amber/80 transition-colors"
+          >
+            Перезагрузить страницу
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return children;
+};
+
+// Компонент для обертки ленивой загрузки
+const LazyLoad = ({ children }) => (
+  <ErrorBoundary>
+    <Suspense fallback={<LoadingSpinner />}>
+      {children}
+    </Suspense>
+  </ErrorBoundary>
+);
+
+const AppRoutes = () => {
+  return (
+    <Routes>
+      <Route path="/" element={<LazyLoad><HomePage /></LazyLoad>} />
+      <Route path="/catalog" element={<LazyLoad><CatalogPage /></LazyLoad>} />
+      <Route path="/media/:path" element={<LazyLoad><MediaOverviewPage /></LazyLoad>} />
+      <Route path="/rating" element={<LazyLoad><RatingPage /></LazyLoad>} />
+      <Route path="/forgot-password" element={<LazyLoad><ForgotPasswordPage /></LazyLoad>} />
+
+      <Route path="/profile" element={<AuthRoute><LazyLoad><ProfilePage /></LazyLoad></AuthRoute>} />
+      <Route path="/profile/:login" element={<LazyLoad><ProfilePage /></LazyLoad>} />
+      <Route path="/profile/telegram-link" element={<AuthRoute><TelegramAuth /></AuthRoute>} />
+
+      <Route path="/auth" element={<GuestRoute />}>
+        <Route path="login" element={<LazyLoad><LoginPage /></LazyLoad>} />
+        <Route path="register" element={<LazyLoad><RegisterPage /></LazyLoad>} />
+      </Route>
+
+      {/* Временно отключена авторизация через Telegram
+      <Route path="/auth/telegram" element={<TelegramAuth />} />
+      */}
+
+      <Route path="/admin" element={<AdminRoute />}>
+        <Route element={<AdminLayout />}>
+          <Route index element={<LazyLoad><AdminDashboard /></LazyLoad>} />
+          <Route path="media" element={<LazyLoad><AdminMediaPage /></LazyLoad>} />
+          <Route path="media/:mediaId/seasons" element={<LazyLoad><AdminSeasonsPage /></LazyLoad>} />
+          <Route path="users" element={<LazyLoad><AdminUsersPage /></LazyLoad>} />
+          <Route path="seasons" element={<LazyLoad><AdminSeasonsPage /></LazyLoad>} />
+          <Route path="achievements" element={<LazyLoad><AdminAchievementsPage /></LazyLoad>} />
+          <Route path="support" element={<LazyLoad><AdminSupportPage /></LazyLoad>} />
+          <Route path="suggestions" element={<LazyLoad><AdminSuggestionsPage /></LazyLoad>} />
+        </Route>
+      </Route>
+
+      <Route path="/support" element={<AuthRoute />}>
+        <Route index element={<LazyLoad><SupportPage /></LazyLoad>} />
+      </Route>
+
+      <Route path="/privacy-policy" element={<LazyLoad><PrivacyPolicyPage /></LazyLoad>} />
+      <Route path="/terms-of-service" element={<LazyLoad><TermsOfServicePage /></LazyLoad>} />
+      <Route path="/user-agreement" element={<LazyLoad><UserAgreementPage /></LazyLoad>} />
+
+      <Route path="*" element={<LazyLoad><NotFoundPage /></LazyLoad>} />
+    </Routes>
+  );
+};
+
+export default AppRoutes; 
\ No newline at end of file
diff --git a/src/services/notificationService.js b/src/services/notificationService.js
new file mode 100644
index 0000000..5f732d0
--- /dev/null
+++ b/src/services/notificationService.js
@@ -0,0 +1,193 @@
+import { pb } from './pocketbaseService';
+
+export const createNotification = async (userId, type, title, message, data = {}) => {
+    try {
+        // Проверяем настройки уведомлений пользователя
+        const settings = await pb.collection('notification_settings').getFirstListItem(`user_id = "${userId}"`);
+        
+        // Проверяем, включены ли уведомления данного типа
+        if (!settings[type]) {
+            return null;
+        }
+
+        // Создаем уведомление
+        const notification = await pb.collection('notifications').create({
+            user_id: userId,
+            type,
+            title,
+            message,
+            data,
+            is_read: false
+        });
+
+        // Если включены email-уведомления, отправляем email
+        if (settings.email_notifications) {
+            // TODO: Добавить отправку email
+        }
+
+        return notification;
+    } catch (error) {
+        console.error('Error creating notification:', error);
+        if (error.status === 403) {
+            console.error('Permission denied: User does not have access to notifications');
+        }
+        return null;
+    }
+};
+
+export const createAchievementNotification = async (userId, achievement) => {
+    return createNotification(
+        userId,
+        'achievement',
+        'Новое достижение!',
+        `Вы получили достижение "${achievement.name}"`,
+        { achievement_id: achievement.id }
+    );
+};
+
+export const createReviewLikeNotification = async (userId, review, likedBy) => {
+    return createNotification(
+        userId,
+        'like',
+        'Новый лайк',
+        `${likedBy.username} оценил вашу рецензию на "${review.expand?.media_id?.title}"`,
+        { review_id: review.id }
+    );
+};
+
+export const createReviewCommentNotification = async (userId, review, comment, commentedBy) => {
+    return createNotification(
+        userId,
+        'review_comment',
+        'Новый комментарий',
+        `${commentedBy.username} прокомментировал вашу рецензию на "${review.expand?.media_id?.title}"`,
+        { review_id: review.id, comment_id: comment.id, commented_by_id: commentedBy.id }
+    );
+};
+
+export const createLevelUpNotification = async (userId, newLevel) => {
+    return createNotification(
+        userId,
+        'level_up',
+        'Повышение уровня!',
+        `Поздравляем! Вы достигли ${newLevel} уровня`,
+        { level: newLevel }
+    );
+};
+
+export const createSystemNotification = async (userId, title, message, data = {}) => {
+    return createNotification(
+        userId,
+        'system',
+        title,
+        message,
+        data
+    );
+};
+
+export const createNewFollowerNotification = async (userId, follower) => {
+    return createNotification(
+        userId,
+        'follower',
+        'Новый подписчик',
+        `${follower.username} подписался на вас`,
+        { follower_id: follower.id }
+    );
+};
+
+export const createCommentReplyNotification = async (userId, comment, reply, repliedBy) => {
+    return createNotification(
+        userId,
+        'comment_reply',
+        'Новый ответ на комментарий',
+        `${repliedBy.username} ответил на ваш комментарий`,
+        { comment_id: comment.id, reply_id: reply.id, replied_by_id: repliedBy.id }
+    );
+};
+
+export const createModerationNotification = async (userId, type, content) => {
+    const messages = {
+        review_approved: 'Ваша рецензия была одобрена',
+        review_rejected: 'Ваша рецензия была отклонена',
+        comment_approved: 'Ваш комментарий был одобрен',
+        comment_rejected: 'Ваш комментарий был отклонен'
+    };
+
+    return createNotification(
+        userId,
+        'moderation',
+        'Модерация контента',
+        messages[type] || 'Ваш контент был проверен модератором',
+        { type, content_id: content.id }
+    );
+};
+
+export const markNotificationAsRead = async (notificationId) => {
+    try {
+        return await pb.collection('notifications').update(notificationId, { is_read: true });
+    } catch (error) {
+        console.error('Error marking notification as read:', error);
+        return null;
+    }
+};
+
+export const markAllNotificationsAsRead = async (userId) => {
+    try {
+        const notifications = await pb.collection('notifications').getList(1, 1000, {
+            filter: `user_id = "${userId}" && is_read = false`
+        });
+
+        await Promise.all(
+            notifications.items.map(n => 
+                pb.collection('notifications').update(n.id, { is_read: true })
+            )
+        );
+
+        return true;
+    } catch (error) {
+        console.error('Error marking all notifications as read:', error);
+        return false;
+    }
+};
+
+export const getNotificationSettings = async (userId) => {
+    try {
+        // Сначала проверяем, есть ли уже настройки
+        const existingSettings = await pb.collection('notification_settings').getList(1, 1, {
+            filter: `user_id = "${userId}"`
+        });
+
+        if (existingSettings.items.length > 0) {
+            return existingSettings.items[0];
+        }
+
+        // Если настроек нет, создаем новые
+        return await pb.collection('notification_settings').create({
+            user_id: userId,
+            achievement: true,
+            like: true,
+            review_comment: true,
+            system: true,
+            level_up: true,
+            follower: true,
+            comment_reply: true,
+            moderation: true,
+            email_notifications: false
+        });
+    } catch (error) {
+        console.error('Error in getNotificationSettings:', error);
+        throw error;
+    }
+};
+
+export const updateNotificationSettings = async (settingsId, settings) => {
+    try {
+        return await pb.collection('notification_settings').update(settingsId, settings);
+    } catch (error) {
+        console.error('Error updating notification settings:', error);
+        if (error.status === 403) {
+            throw new Error('Нет доступа к настройкам уведомлений');
+        }
+        throw error;
+    }
+}; 
\ No newline at end of file
diff --git a/src/services/pocketbaseService.js b/src/services/pocketbaseService.js
index bcffc12..5978c7c 100644
--- a/src/services/pocketbaseService.js
+++ b/src/services/pocketbaseService.js
@@ -12,16 +12,6 @@ const pb = new PocketBase(pbUrl);
 
 // Disable auto-cancellation to prevent issues with concurrent requests
 pb.autoCancellation(false);
-console.log('[PocketBase] Инициализирован с URL:', pbUrl);
-
-// --- REMOVED: Explicit cookie loading and saving ---
-// pb.authStore.loadFromCookie(document.cookie);
-// pb.authStore.onChange(() => {
-//     document.cookie = pb.authStore.exportToCookie({ httpOnly: false });
-// });
-// --- END REMOVED ---
-
-console.log('PocketBase client initialized with URL:', pbUrl);
 
 // --- Media Types Definition ---
 // Define the available media types and their display labels
@@ -88,12 +78,9 @@ export const getXpForCurrentLevel = (currentLevel) => {
 // PocketBase uses a single sign-up function for users
 export const signUp = async (login, password, email = null) => {
   try {
-    console.log('PocketBase: Начало регистрации:', { login, email });
-
-    // Создаем FormData для загрузки дефолтного аватара
     const formData = new FormData();
     formData.append('login', login);
-    formData.append('username', login); // Дублируем login в username
+    formData.append('username', login);
     formData.append('email', email || '');
     formData.append('password', password);
     formData.append('passwordConfirm', password);
@@ -107,39 +94,24 @@ export const signUp = async (login, password, email = null) => {
     formData.append('level', '1');
     formData.append('showcase', '[]');
 
-    // Создаем пользователя
     const record = await pb.collection('users').create(formData);
-    console.log('PocketBase: Пользователь создан:', record);
-
-    // Очищаем текущую сессию перед авторизацией
     pb.authStore.clear();
-
-    // Auto-login after successful signup
     const authData = await pb.collection('users').authWithPassword(login, password);
-    console.log('PocketBase: Автоматический вход после регистрации успешен:', authData);
-
-    // Return the authenticated user and their record
     return { user: authData.record, profile: authData.record };
 
   } catch (error) {
     console.error('PocketBase: Ошибка при регистрации:', error);
-    if (error.response && error.response.data) {
-      console.error('PocketBase: Response data:', error.response.data);
-    }
     throw error;
   }
 };
 
 export const signIn = async (login, password) => {
   try {
-    console.log('PocketBase: Попытка входа для', login);
     const authData = await pb.collection('users').authWithPassword(login, password);
-    console.log('PocketBase: Вход успешен:', authData);
     return authData.record;
   } catch (error) {
     console.error('PocketBase: Ошибка входа:', error);
     if (error.response && error.response.data) {
-      console.error('PocketBase: Response data:', error.response.data);
       if (error.response.data.message) {
         if (error.response.data.message.includes('Invalid login credentials')) {
           throw new Error('Неверный логин или пароль');
@@ -156,9 +128,7 @@ export const signIn = async (login, password) => {
 
 export const signOut = async () => {
   try {
-    console.log('PocketBase: Попытка выхода');
     pb.authStore.clear();
-    console.log('PocketBase: Выход успешен');
   } catch (error) {
     console.error('PocketBase: Ошибка выхода:', error);
     throw error;
@@ -166,23 +136,16 @@ export const signOut = async () => {
 };
 
 export const getCurrentUser = () => {
-  // PocketBase stores the authenticated user in authStore.model
   return pb.authStore.isValid ? pb.authStore.model : null;
 };
 
 // New function to request password reset
 export const requestPasswordReset = async (email) => {
   try {
-    console.log('PocketBase: Попытка запроса сброса пароля для', email);
-    // PocketBase SDK function for password reset request
     await pb.collection('users').requestPasswordReset(email);
-    console.log('PocketBase: Запрос на сброс пароля отправлен для', email);
-    return true; // Indicate success
+    return true;
   } catch (error) {
     console.error('PocketBase: Ошибка при запроса сброса пароля:', error);
-     if (error.response && error.response.data) {
-        console.error('PocketBase: Response data:', error.response.data);
-    }
     throw error;
   }
 };
@@ -191,7 +154,6 @@ export const requestPasswordReset = async (email) => {
 // --- User Functions (PocketBase 'users' collection) ---
 export const getUserProfile = async (userId) => {
   try {
-    console.log('[PocketBase] Загрузка профиля:', userId);
     const record = await pb.collection('users').getOne(userId, {
       expand: 'showcase,showcase.media_id,showcase.season_id'
     });
@@ -205,7 +167,6 @@ export const getUserProfile = async (userId) => {
 // New function to get user profile by username
 export const getUserProfileByUsername = async (username) => {
   try {
-    console.log('[PocketBase] Поиск профиля по имени:', username);
     const userRecord = await pb.collection('users').getFirstListItem(`username="${username}"`, {
       expand: 'showcase,showcase.media_id,showcase.season_id'
     });
@@ -216,21 +177,27 @@ export const getUserProfileByUsername = async (username) => {
   }
 };
 
+export const getUserProfileByLogin = async (login) => {
+    try {
+        const records = await pb.collection('users').getList(1, 1, {
+            filter: `login = "${login}"`,
+            expand: 'showcase,showcase.media_id,showcase.season_id'
+        });
+        return records.items[0] || null;
+    } catch (error) {
+        console.error('Error fetching user profile by login:', error);
+        throw error;
+    }
+};
 
 export const updateUserProfile = async (userId, profileData) => {
   try {
-    console.log('PocketBase: Обновление профиля пользователя:', userId, 'с данными:', profileData);
-    // PocketBase update requires the record ID
-    // Note: This function is intended for updating non-file fields.
-    // File uploads/deletions are handled by uploadFile/deleteFile.
     const record = await pb.collection('users').update(userId, profileData);
-    console.log('PocketBase: Профиль пользователя обновлен успешно:', record);
-    console.log('PocketBase: Обновленная профиль статистика:', { average_rating: record.average_rating, review_count: record.review_count, xp: record.xp, level: record.level }); // Log new fields
     return record;
   } catch (error) {
     console.error('PocketBase: Ошибка обновления профиля:', error);
-     if (error.response && error.response.data) {
-        console.error('PocketBase: Response data:', error.response.data);
+    if (error.response && error.response.data) {
+      console.error('PocketBase: Response data:', error.response.data);
     }
     throw error;
   }
@@ -247,16 +214,13 @@ export const updateUserShowcase = async (userId, reviewIds) => {
         throw new Error('Invalid reviewIds array');
     }
     try {
-        console.log('PocketBase: Обновление витрины пользователя:', userId, 'с рецензиями:', reviewIds);
-        // Update the 'showcase' multiple relation field
         const updatedUser = await pb.collection('users').update(userId, {
             showcase: reviewIds // Pass the array of review IDs
         });
-        console.log('PocketBase: Витрина пользователя обновлена успешно:', updatedUser);
         return updatedUser;
     } catch (error) {
         console.error('PocketBase: Ошибка обновления витрины пользователя:', error);
-         if (error.response && error.response.data) {
+        if (error.response && error.response.data) {
             console.error('PocketBase: Response data:', error.response.data);
         }
         throw error;
@@ -265,16 +229,11 @@ export const updateUserShowcase = async (userId, reviewIds) => {
 
 // New function to list users ranked by review count
 export const listUsersRankedByReviews = async (limit = 20) => {
-    console.log('PocketBase: Получение списка пользователей по количеству рецензий (лимит:', limit, ')');
     try {
-        // Fetch users, sorted by review_count descending
         const records = await pb.collection('users').getList(1, limit, {
             sort: '-review_count',
             filter: 'review_count > 0', // Only include users with at least one review
-            // You might want to select specific fields to reduce payload size
-            // fields: 'id,username,profile_picture,review_count'
         });
-        console.log('PocketBase: Получен список пользователей по рецензиям:', records.items);
         return records.items;
     } catch (error) {
         console.error('PocketBase: Ошибка получения списка пользователей по рецензиям:', error);
@@ -284,16 +243,11 @@ export const listUsersRankedByReviews = async (limit = 20) => {
 
 // New function to list users ranked by level
 export const listUsersRankedByLevel = async (limit = 20) => {
-    console.log('PocketBase: Получение списка пользователей по уровню (лимит:', limit, ')');
     try {
-        // Fetch users, sorted by level descending, then XP descending
         const records = await pb.collection('users').getList(1, limit, {
             sort: '-level,-xp', // Sort by level first, then XP
             filter: 'level > 1 || xp > 0', // Only include users above level 1 or with some XP
-            // You might want to select specific fields to reduce payload size
-            // fields: 'id,username,profile_picture,level,xp'
         });
-        console.log('PocketBase: Получен список пользователей по уровню:', records.items);
         return records.items;
     } catch (error) {
         console.error('PocketBase: Ошибка получения списка пользователей по уровню:', error);
@@ -306,33 +260,70 @@ export const listUsersRankedByLevel = async (limit = 20) => {
 
 // Placeholder/Example validation function - adjust based on your actual media schema
 // Now accepts characteristics as an object { key: label }
-export const validateMediaData = (mediaData, characteristicsObject) => {
+export const validateMediaData = (formData, characteristics) => {
     const errors = [];
-    if (!mediaData.get('title')) {
+  if (!formData.get('title')) {
         errors.push('Название обязательно.');
     }
-    if (!mediaData.get('type')) {
+  if (!formData.get('type')) {
         errors.push('Тип медиа обязателен.');
     }
-     if (!mediaData.get('progress_type')) { // Validate new field
+  if (!formData.get('progress_type')) { // Validate new field
         errors.push('Тип прогресса обязателен.');
     }
     // Add more validation rules as needed based on your schema
 
     // Validate characteristic count (min 6, max 8) using the passed object
-    const charCount = Object.keys(characteristicsObject).length;
+  const charCount = Object.keys(characteristics).length;
     if (charCount < 6 || charCount > 8) {
          errors.push(`Должно быть от 6 до 8 характеристик (сейчас: ${charCount}).`);
     }
 
     // Validate that characteristic keys are not empty
-    for (const key in characteristicsObject) {
+  for (const key in characteristics) {
         if (!key.trim()) {
             errors.push('Ключ характеристики не может быть пустым.');
             break; // Stop checking keys after finding one empty
         }
     }
 
+  // Validate position and scale values if they exist
+  const posterPosition = formData.get('poster_position');
+  const backdropPosition = formData.get('backdrop_position');
+  const posterScale = formData.get('poster_scale');
+  const backdropScale = formData.get('backdrop_scale');
+
+  if (posterPosition) {
+    try {
+      const position = JSON.parse(posterPosition);
+      if (typeof position.x !== 'number' || typeof position.y !== 'number' ||
+          position.x < 0 || position.x > 100 || position.y < 0 || position.y > 100) {
+        errors.push('Некорректные значения позиции постера');
+      }
+    } catch (e) {
+      errors.push('Некорректный формат позиции постера');
+    }
+  }
+
+  if (backdropPosition) {
+    try {
+      const position = JSON.parse(backdropPosition);
+      if (typeof position.x !== 'number' || typeof position.y !== 'number' ||
+          position.x < 0 || position.x > 100 || position.y < 0 || position.y > 100) {
+        errors.push('Некорректные значения позиции баннера');
+      }
+    } catch (e) {
+      errors.push('Некорректный формат позиции баннера');
+    }
+  }
+
+  if (posterScale && (isNaN(posterScale) || posterScale < 0.5 || posterScale > 2)) {
+    errors.push('Некорректное значение масштаба постера');
+  }
+
+  if (backdropScale && (isNaN(backdropScale) || backdropScale < 0.5 || backdropScale > 2)) {
+    errors.push('Некорректное значение масштаба баннера');
+  }
 
     return errors;
 };
@@ -340,30 +331,53 @@ export const validateMediaData = (mediaData, characteristicsObject) => {
 // Placeholder/Example formatting function - adjust based on your actual media schema
 // This function is less critical if you're building FormData correctly in the component
 // but can be used for final checks or transformations.
-export const formatMediaData = (mediaData) => {
-    // Assuming mediaData is already a FormData object prepared in the component
-    // You might add default values or transform data here if needed
-    // Example: Ensure is_published is boolean
-    // if (mediaData.has('is_published')) {
-    //     mediaData.set('is_published', mediaData.get('is_published') === 'true');
-    // }
-    return mediaData; // Return the FormData object
+export const formatMediaData = (formData) => {
+  const data = {
+    title: formData.get('title'),
+    path: formData.get('path'),
+    type: formData.get('type'),
+    overview: formData.get('overview'),
+    is_published: formData.get('is_published') === 'true',
+    is_popular: formData.get('is_popular') === 'true',
+    progress_type: formData.get('progress_type'),
+    release_date: formData.get('release_date'),
+    characteristics: formData.get('characteristics'),
+    tmdb_id: formData.get('tmdb_id'),
+    tmdb_type: formData.get('tmdb_type')
+  };
+
+  // Add position and scale data if they exist
+  const posterPosition = formData.get('poster_position');
+  const backdropPosition = formData.get('backdrop_position');
+  const posterScale = formData.get('poster_scale');
+  const backdropScale = formData.get('backdrop_scale');
+
+  if (posterPosition) {
+    data.poster_position = posterPosition;
+  }
+  if (backdropPosition) {
+    data.backdrop_position = backdropPosition;
+  }
+  if (posterScale) {
+    data.poster_scale = parseFloat(posterScale);
+  }
+  if (backdropScale) {
+    data.backdrop_scale = parseFloat(backdropScale);
+  }
+
+  return data;
 };
 
 
 // createMedia using FormData
 export const createMedia = async (mediaData) => {
   try {
-    console.log('PocketBase: Создание медиа:', mediaData);
-    // PocketBase create with FormData handles file uploads
-    // Ensure mediaData is FormData and includes 'created_by', 'is_published', etc.
     const record = await pb.collection('media').create(mediaData);
-    console.log('PocketBase: Медиа создано с ID:', record.id);
     return record;
   } catch (error) {
     console.error('PocketBase: Ошибка создания медиа:', error);
-     if (error.response && error.response.data) {
-        console.error('PocketBase: Response data:', error.response.data);
+    if (error.response && error.response.data) {
+      console.error('PocketBase: Response data:', error.response.data);
     }
     throw error;
   }
@@ -372,27 +386,20 @@ export const createMedia = async (mediaData) => {
 // Assuming 'path' is a field in your PocketBase 'media' collection
 export const getMediaByPath = async (path) => {
   try {
-    console.log('PocketBase: Получение медиа по пути:', path);
-    // Fetch media record directly, relying on stored average_rating and review_count
     const records = await pb.collection('media').getList(1, 1, {
       filter: `path = "${path}"`,
     });
 
     if (records.items.length > 0) {
        const item = records.items[0];
-       console.log('PocketBase: Медиа найдено по пути:', item);
-       console.log('PocketBase: Медиа статистика по пути:', { average_rating: item.average_rating, review_count: item.review_count });
        return item; // Return the media item with stored stats
     } else {
-      console.log('PocketBase: Медиа не найдено по пути:', path);
       return null;
     }
   } catch (error) {
-    console.error('PocketBase: Ошибка получения медиа по пути:', error);
-     if (error.status === 404) { // List returns 200 with empty items, getOne returns 404
-        console.log('PocketBase: Медиа не найдено по пути (404):', path);
+    if (error.status === 404) { // List returns 200 with empty items, getOne returns 404
         return null;
-     }
+    }
     throw error;
   }
 };
@@ -400,19 +407,13 @@ export const getMediaByPath = async (path) => {
 
 export const getMediaById = async (id) => {
   try {
-    console.log('PocketBase: Получение медиа по ID:', id);
-    // Fetch media record directly, relying on stored average_rating and review_count
     const record = await pb.collection('media').getOne(id);
-    console.log('PocketBase: Медиа найдено по ID:', record);
-    console.log('PocketBase: Медиа статистика по ID:', { average_rating: record.average_rating, review_count: record.review_count });
     return record; // Return the media item with stored stats
 
   } catch (error) {
-    console.error('PocketBase: Ошибка получения медиа по ID:', error);
-     if (error.status === 404) {
-        console.log('PocketBase: Медиа не найдено по ID:', id);
+    if (error.status === 404) {
         return null;
-     }
+    }
     throw error;
   }
 };
@@ -431,17 +432,6 @@ export const listMedia = async (
     filterString = ''
 ) => {
   try {
-        console.log('[PocketBase] Запрос медиа:', {
-            type,
-            page,
-            limit,
-            user,
-            isPopular,
-            published,
-            sort,
-            filterString
-        });
-
         let filter = [];
 
         // Базовые фильтры
@@ -464,7 +454,6 @@ export const listMedia = async (
 
         // Объединяем все фильтры
         const finalFilter = filter.join(' && ');
-        console.log('PocketBase: listMedia filter:', finalFilter);
 
         const response = await pb.collection('media').getList(page, limit, {
             filter: finalFilter,
@@ -472,23 +461,18 @@ export const listMedia = async (
             expand: 'created_by'
         });
 
-        console.log('PocketBase: Получен список медиа:', response.items);
     return {
             data: response.items,
             count: response.totalItems,
             totalPages: response.totalPages
     };
   } catch (error) {
-        console.error('[PocketBase] Ошибка получения списка медиа:', error);
     throw error;
   }
 };
 
 // New function to list popular media
 export const listPopularMedia = async (limit = 10, user = null) => {
-    console.log('PocketBase: Получение списка популярных медиа (лимит:', limit, ')');
-    // Call listMedia with isPopular = true
-    // Pass user to respect published status for non-admins/critics
     return listMedia(null, 1, limit, user, true, true); // Ensure popular media is also published
 };
 
@@ -496,17 +480,12 @@ export const listPopularMedia = async (limit = 10, user = null) => {
 // updateMedia using FormData
 export const updateMedia = async (id, mediaData) => {
   try {
-    console.log('PocketBase: Обновление медиа:', id, 'с данными:', mediaData);
-    // PocketBase update requires the record ID
-    // Pass FormData directly if mediaData is FormData
     const record = await pb.collection('media').update(id, mediaData);
-    console.log('PocketBase: Медиа обновлено успешно:', record);
-    console.log('PocketBase: Обновленная медиа статистика:', { average_rating: record.average_rating, review_count: record.review_count, is_published: record.is_published, is_popular: record.is_popular });
     return record;
   } catch (error) {
     console.error('PocketBase: Ошибка обновления медиа:', error);
-     if (error.response && error.response.data) {
-        console.error('PocketBase: Response data:', error.response.data);
+    if (error.response && error.response.data) {
+      console.error('PocketBase: Response data:', error.response.data);
     }
     throw error;
   }
@@ -514,10 +493,7 @@ export const updateMedia = async (id, mediaData) => {
 
 export const deleteMedia = async (id) => {
   try {
-    console.log('PocketBase: Удаление медиа:', id);
-    // PocketBase delete requires the record ID
     await pb.collection('media').delete(id);
-    console.log('PocketBase: Медиа удалено успешно:', id);
     return { success: true }; // Indicate success
   } catch (error) {
     console.error('PocketBase: Ошибка удаления медиа:', error);
@@ -531,9 +507,7 @@ export const deleteMedia = async (id) => {
 // MODIFIED: If collectionName is 'media', fetch ALL reviews related to this media_id,
 // regardless of whether they have a season_id or not.
 export const updateRatingStats = async (collectionName, recordId) => {
-  console.log(`PocketBase: Попытка обновления статистики рейтинга для ${collectionName} ID:`, recordId);
   if (!recordId) {
-     console.error(`PocketBase: updateRatingStats вызван с undefined ${collectionName}Id`);
      return;
   }
   try {
@@ -555,7 +529,6 @@ export const updateRatingStats = async (collectionName, recordId) => {
             fields: 'ratings' // Only fetch the ratings field
         });
     } else {
-        console.error(`PocketBase: Неизвестное имя коллекции для обновления статистики рейтинга: ${collectionName}`);
         return;
     }
 
@@ -600,14 +573,12 @@ export const updateRatingStats = async (collectionName, recordId) => {
       review_count: reviewCount // review_count is the total number of reviews, regardless of N/A
     });
 
-    console.log(`PocketBase: Средний рейтинг ${collectionName} обновлен для ID:`, recordId, '->', updatedRecord);
-    console.log(`PocketBase: Обновленная статистика ${collectionName} (updateRatingStats):`, { average_rating: updatedRecord.average_rating, review_count: updatedRecord.review_count });
     return updatedRecord;
 
   } catch (error) {
     console.error(`PocketBase: Ошибка обновления среднего рейтинга ${collectionName}:`, error);
-     if (error.response && error.response.data) {
-        console.error('PocketBase: Response data:', error.response.data);
+    if (error.response && error.response.data) {
+      console.error('PocketBase: Response data:', error.response.data);
     }
     throw error;
   }
@@ -617,10 +588,8 @@ export const updateRatingStats = async (collectionName, recordId) => {
 // --- User Review Stats Update ---
 const updateUserReviewStats = async (userId) => {
    if (!userId) {
-      console.warn('PocketBase: updateUserReviewStats called with undefined userId');
       return;
    }
-   console.log('PocketBase: Попытка обновления статистики обзоров для пользователя ID:', userId);
    try {
       // Fetch all reviews by this user
       const reviewsRecords = await pb.collection('reviews').getList(1, 500, { // Fetch up to 500 reviews by user
@@ -668,13 +637,11 @@ const updateUserReviewStats = async (userId) => {
          review_count: reviewCount // review_count is the total number of reviews by the user
       });
 
-      console.log('PocketBase: Статистика обзоров пользователя обновлена для ID:', userId, '->', updatedUser);
-      console.log('PocketBase: Обновленная статистика пользователя (updateUserReviewStats):', { average_rating: updatedUser.average_rating, review_count: updatedUser.review_count, xp: updatedUser.xp, level: updatedUser.level }); // Log new fields
       return updatedUser;
 
    } catch (error) {
       console.error('PocketBase: Ошибка обновления статистики обзоров пользователя:', error);
-       if (error.response && error.response.data) {
+      if (error.response && error.response.data) {
         console.error('PocketBase: Response data:', error.response.data);
     }
       throw error;
@@ -685,21 +652,14 @@ const updateUserReviewStats = async (userId) => {
 // --- Review Functions (PocketBase 'reviews' collection) ---
 export const getLatestReviews = async (limit = 10) => {
   try {
-    console.log('PocketBase: Получение последних обзоров (лимит:', limit, ')');
-    // Fetch reviews, sorted by creation date, EXPANDING user_id, media_id, and season_id
     const records = await pb.collection('reviews').getList(1, limit, {
       sort: '-created',
       expand: 'user_id,media_id,season_id' // Use the actual relation field names
     });
 
-    console.log('PocketBase: Получены последние обзоры с expand:', records.items);
-
-    // The items now contain the expanded data in the 'expand' field
-    // No need for manual fetching and mapping
     return records.items;
 
   } catch (error) {
-    console.error('PocketBase: Ошибка получения последних обзоров:', error);
     throw error;
   }
 };
@@ -708,28 +668,21 @@ export const getLatestReviews = async (limit = 10) => {
 // Modified to potentially filter by media_id OR season_id
 export const getReviewsByMediaId = async (mediaId, seasonId = null, getAllReviews = false) => {
   try {
-        console.log('PocketBase: Получение рецензий для медиа:', { mediaId, seasonId, getAllReviews });
-        
-    let filter = `media_id = "${mediaId}"`;
+        let filter = `media_id = "${mediaId}"`;
         
         // Если не запрашиваем все рецензии и указан сезон, добавляем фильтр по сезону
         if (!getAllReviews && seasonId) {
             filter += ` && season_id = "${seasonId}"`;
         }
         
-        // Если запрашиваем все рецензии, не добавляем фильтр по сезону
-        // Если запрашиваем общие рецензии (seasonId = null), добавляем фильтр season_id = null
-        
         const records = await pb.collection('reviews').getList(1, 100, {
       filter: filter,
       sort: '-created',
             expand: 'user_id,media_id,season_id'
     });
 
-        console.log('PocketBase: Получены рецензии:', records.items);
     return records.items;
   } catch (error) {
-        console.error('PocketBase: Ошибка при получении рецензий:', error);
     throw error;
   }
 };
@@ -737,22 +690,15 @@ export const getReviewsByMediaId = async (mediaId, seasonId = null, getAllReview
 // New function to get reviews by user ID
 export const getReviewsByUserId = async (userId) => {
   try {
-    console.log('PocketBase: Получение обзоров для пользователя ID:', userId);
-    // Fetch reviews filtered by user_id, sorted by creation date, EXPANDING media_id, user_id, and season_id
     const records = await pb.collection('reviews').getList(1, 500, { // Fetch up to 500 reviews, adjust limit as needed
       filter: `user_id = "${userId}"`,
       sort: '-created',
       expand: 'media_id,user_id,season_id' // Use the actual relation field names
     });
 
-    console.log('PocketBase: Получены обзоры по пользователю ID с expand:', records.items);
-
-    // The items now contain the expanded data in the 'expand' field
-    // No need for manual fetching and mapping
     return records.items;
 
   } catch (error) {
-    console.error('PocketBase: Ошибка получения обзоров по пользователю ID:', error);
     throw error;
   }
 };
@@ -761,7 +707,6 @@ export const getReviewsByUserId = async (userId) => {
 // Modified to potentially get user review for media OR season
 export const getUserReviewForMedia = async (userId, mediaId, seasonId = null) => {
   try {
-    console.log('PocketBase: Получение обзора пользователя', userId, 'для медиа', mediaId, 'и сезона', seasonId);
     let filter = `user_id = "${userId}" && media_id = "${mediaId}"`;
      if (seasonId) {
         filter += ` && season_id = "${seasonId}"`; // Filter for a specific season
@@ -777,16 +722,13 @@ export const getUserReviewForMedia = async (userId, mediaId, seasonId = null) =>
 
     if (records.items.length > 0) {
       const item = records.items[0];
-      console.log('PocketBase: Найден обзор пользователя с expand:', item);
        // The item now contains the expanded data in the 'expand' field
        // No need for manual fetching and mapping
        return item;
     } else {
-      console.log('PocketBase: Обзор пользователя не найден');
       return null;
     }
   } catch (error) {
-    console.error('PocketBase: Ошибка получения обзора пользователя для медиа/сезона:', error);
     throw error;
   }
 };
@@ -797,8 +739,6 @@ const REVIEW_XP_REWARD = 25;
 // Modified to accept season_id
 export const createReview = async (reviewData) => {
   try {
-    console.log('PocketBase: Создание обзора:', reviewData);
-
     // Add the current user's ID to the review data
     const currentUser = pb.authStore.model;
     if (!currentUser) {
@@ -834,11 +774,8 @@ export const createReview = async (reviewData) => {
         // media_id, season_id, content, ratings, has_spoilers, progress fields are expected in reviewData
     };
 
-    console.log('PocketBase: Данные для создания обзора:', dataToSend);
-
     // PocketBase create
     const record = await pb.collection('reviews').create(dataToSend);
-    console.log('PocketBase: Обзор создан с ID:', record.id);
 
     // --- Level and XP Logic ---
     // Fetch the user's current XP and level
@@ -847,14 +784,11 @@ export const createReview = async (reviewData) => {
     const newXP = currentXP + REVIEW_XP_REWARD;
     const newLevel = calculateLevel(newXP);
 
-    console.log(`PocketBase: Начисление XP за рецензию. Текущий XP: ${currentXP}, Начислено: ${REVIEW_XP_REWARD}, Новый XP: ${newXP}, Новый уровень: ${newLevel}`);
-
     // Update the user's XP and level
     await pb.collection('users').update(currentUser.id, {
         xp: newXP,
         level: newLevel
     });
-    console.log('PocketBase: XP и уровень пользователя обновлены.');
     // --- End Level and XP Logic ---
 
 
@@ -866,8 +800,6 @@ export const createReview = async (reviewData) => {
     } else if (reviewData.media_id) {
         // If it's an overall media review, just update the media stats
         await updateRatingStats('media', reviewData.media_id);
-    } else {
-        console.warn('PocketBase: Обзор создан без media_id или season_id.');
     }
 
 
@@ -879,8 +811,8 @@ export const createReview = async (reviewData) => {
     return record;
   } catch (error) {
     console.error('PocketBase: Ошибка создания обзора:', error);
-     if (error.response && error.response.data) {
-        console.error('PocketBase: Response data:', error.response.data);
+    if (error.response && error.response.data) {
+      console.error('PocketBase: Response data:', error.response.data);
     }
     throw error;
   }
@@ -889,8 +821,6 @@ export const createReview = async (reviewData) => {
 // Modified to accept season_id in reviewData
 export const updateReview = async (reviewId, reviewData) => {
   try {
-    console.log('PocketBase: Обновление обзора:', reviewId, 'с данными:', reviewData);
-
     // Calculate overall_rating from the ratings object if it's being updated
     let calculatedOverallRating = undefined; // Use undefined so it's not included if ratings isn't in reviewData
     if (reviewData.ratings && typeof reviewData.ratings === 'object') {
@@ -920,12 +850,9 @@ export const updateReview = async (reviewId, reviewData) => {
         // media_id, season_id, content, ratings, has_spoilers, progress fields are expected in reviewData
     };
 
-    console.log('PocketBase: Данные для обновления обзора:', dataToSend);
-
 
     // PocketBase update requires the record ID
     const record = await pb.collection('reviews').update(reviewId, dataToSend);
-    console.log('PocketBase: Обзор обновлен успешно:', record);
 
     // After updating a review, update the average rating and review count for the associated media OR season
     // Need media_id/season_id from reviewData or fetch the review first
@@ -941,8 +868,6 @@ export const updateReview = async (reviewId, reviewData) => {
     } else if (mediaIdToUpdate) {
         // If it's an overall media review, just update the media stats
         await updateRatingStats('media', mediaIdToUpdate);
-    } else {
-       console.warn('PocketBase: media_id или season_id не найден для обновления статистики после обновления обзора.');
     }
 
 
@@ -951,16 +876,14 @@ export const updateReview = async (reviewId, reviewData) => {
     const userIdToUpdate = reviewData.user_id || record.user_id; // Use user_id from update data or the updated record
      if (userIdToUpdate) {
        await updateUserReviewStats(userIdToUpdate);
-    } else {
-       console.warn('PocketBase: user_id не найден для обновления статистики пользователя после удаления обзора.');
     }
 
 
     return record;
   } catch (error) {
     console.error('PocketBase: Ошибка обновления обзора:', error);
-     if (error.response && error.response.data) {
-        console.error('PocketBase: Response data:', error.response.data);
+    if (error.response && error.response.data) {
+      console.error('PocketBase: Response data:', error.response.data);
     }
     throw error;
   }
@@ -969,8 +892,6 @@ export const updateReview = async (reviewId, reviewData) => {
 // Modified to accept mediaId (optional, for convenience)
 export const deleteReview = async (reviewId, mediaId = null) => {
   try {
-    console.log('PocketBase: Удаление обзора:', reviewId);
-
     // Get the review first to get the user_id, media_id, and season_id before deleting
     const reviewToDelete = await pb.collection('reviews').getOne(reviewId);
     const userIdToUpdate = reviewToDelete?.user_id;
@@ -980,7 +901,6 @@ export const deleteReview = async (reviewId, mediaId = null) => {
 
     // PocketBase delete requires the record ID
     await pb.collection('reviews').delete(reviewId);
-    console.log('PocketBase: Обзор удален успешно:', reviewId);
 
     // After deleting a review, update the average rating and review count for the associated media OR season
     if (seasonIdToUpdate) {
@@ -992,22 +912,17 @@ export const deleteReview = async (reviewId, mediaId = null) => {
     } else if (mediaIdToUpdate) {
        // If it was an overall media review, just update the media stats
        await updateRatingStats('media', mediaIdToUpdate);
-    } else {
-       console.warn('PocketBase: mediaId или seasonId не найден для обновления среднего рейтинга после удаления обзора.');
     }
 
     // After deleting a review, update the user's review stats (average rating and review count)
     // XP and Level are NOT decreased on review deletion in this basic implementation.
      if (userIdToUpdate) {
        await updateUserReviewStats(userIdToUpdate);
-    } else {
-       console.warn('PocketBase: user_id не найден для обновления статистики пользователя после удаления обзора.');
     }
 
 
     return true; // Indicate success
   } catch (error) {
-    console.error('PocketBase: Ошибка удаления обзора:', error);
     throw error;
   }
 };
@@ -1021,14 +936,11 @@ export const deleteReview = async (reviewId, mediaId = null) => {
  */
 export const getAllAchievements = async () => {
   try {
-    console.log('PocketBase: Получение всех достижений');
     const records = await pb.collection('achievements').getFullList({
       sort: 'created', // Or sort by xp_reward, etc.
     });
-    console.log('PocketBase: Получены достижения:', records);
     return records;
   } catch (error) {
-    console.error('PocketBase: Ошибка получения достижений:', error);
     throw error;
   }
 };
@@ -1040,27 +952,25 @@ export const getAllAchievements = async () => {
  */
 export const getUserAchievements = async (userId) => {
   if (!userId) {
-    console.warn('PocketBase: getUserAchievements called with undefined userId');
     return [];
   }
   try {
-    console.log('PocketBase: Получение достижений пользователя:', userId);
     // Fetch user_achievements records, expanding the 'achievement_id' relation
-    const records = await pb.collection('user_achievements').getList(1, 500, { // Fetch up to 500 user achievements
+    const records = await pb.collection('user_achievements').getList(1, 500, {
       filter: `user_id = "${userId}"`,
-      sort: '-awarded_at', // Sort by when they were awarded
-      expand: 'achievement_id' // Expand the related achievement record
+      sort: '-awarded_at',
+      expand: 'achievement_id'
     });
 
-    console.log('PocketBase: Получены достижения пользователя с expand:', records.items);
-
-    // The items now contain the expanded data in the 'expand' field
-    // e.g., item.expand.achievement_id will be the achievement record
-    return records.items;
+    // Преобразуем данные, чтобы использовать достижение напрямую
+    return records.items.map(item => ({
+      ...item.expand.achievement_id,
+      awarded_at: item.awarded_at
+    }));
 
   } catch (error) {
-    console.error('PocketBase: Ошибка получения достижений пользователя:', error);
-    throw error;
+    console.error('Error fetching user achievements:', error);
+    return [];
   }
 };
 
@@ -1073,19 +983,15 @@ export const getUserAchievements = async (userId) => {
  */
 export const awardAchievement = async (userId, achievementId, awardedByUserId = null) => {
   if (!userId || !achievementId) {
-    console.error('PocketBase: awardAchievement called with missing userId or achievementId');
     throw new Error('Missing userId or achievementId');
   }
   try {
-    console.log(`PocketBase: Попытка выдать достижение ${achievementId} пользователю ${userId}`);
-
     // Check if the user already has this achievement to prevent duplicates
     const existing = await pb.collection('user_achievements').getList(1, 1, {
         filter: `user_id = "${userId}" && achievement_id = "${achievementId}"`
     });
 
     if (existing.items.length > 0) {
-        console.log(`PocketBase: Пользователь ${userId} уже имеет достижение ${achievementId}. Пропуск.`);
         return existing.items[0]; // Return the existing record
     }
 
@@ -1098,7 +1004,6 @@ export const awardAchievement = async (userId, achievementId, awardedByUserId =
       awarded_at: new Date().toISOString(), // Set current time
     });
 
-    console.log('PocketBase: Запись user_achievement создана:', userAchievementRecord);
 
     // Fetch the achievement details to get the XP reward
     const achievement = await pb.collection('achievements').getOne(achievementId);
@@ -1110,22 +1015,19 @@ export const awardAchievement = async (userId, achievementId, awardedByUserId =
     const newXP = currentXP + xpReward;
     const newLevel = calculateLevel(newXP);
 
-    console.log(`PocketBase: Начисление XP за достижение. Текущий XP: ${currentXP}, Начислено: ${xpReward}, Новый XP: ${newXP}, Новый уровень: ${newLevel}`);
-
     // Update the user's XP and level
     await pb.collection('users').update(userId, {
         xp: newXP,
         level: newLevel
     });
-    console.log('PocketBase: XP и уровень пользователя обновлены после выдачи достижения.');
 
 
     return userAchievementRecord;
 
   } catch (error) {
     console.error('PocketBase: Ошибка при выдаче достижения:', error);
-     if (error.response && error.response.data) {
-        console.error('PocketBase: Response data:', error.response.data);
+    if (error.response && error.response.data) {
+      console.error('PocketBase: Response data:', error.response.data);
     }
     throw error;
   }
@@ -1145,12 +1047,9 @@ export const awardAchievement = async (userId, achievementId, awardedByUserId =
  */
 export const uploadFile = async (file, collectionName, recordId, fieldName) => {
   if (!file) {
-    console.warn(`PocketBase: No file provided for ${fieldName} upload.`);
     return null; // Or throw an error if file is required
   }
 
-  console.log(`PocketBase: Attempting to upload file for record ${recordId} in collection "${collectionName}" field "${fieldName}"`);
-
   try {
     // PocketBase file upload is part of updating the record using FormData
     const formData = new FormData();
@@ -1159,15 +1058,12 @@ export const uploadFile = async (file, collectionName, recordId, fieldName) => {
     // Use update to add/replace the file
     const record = await pb.collection(collectionName).update(recordId, formData);
 
-    console.log(`PocketBase: File uploaded successfully for field "${fieldName}". Record updated:`, record);
-
-    // Return the updated record
     return record;
 
   } catch (error) {
     console.error(`PocketBase: Caught error during ${fieldName} upload process:`, error);
-     if (error.response && error.response.data) {
-        console.error('PocketBase: Response data:', error.response.data);
+    if (error.response && error.response.data) {
+      console.error('PocketBase: Response data:', error.response.data);
     }
     throw error;
   }
@@ -1182,7 +1078,6 @@ export const uploadFile = async (file, collectionName, recordId, fieldName) => {
  * @throws {Error} If the update fails.
  */
 export const deleteFile = async (collectionName, recordId, fieldName) => {
-   console.log(`PocketBase: Attempting to delete file for record ${recordId} in collection "${collectionName}" field "${fieldName}"`);
    try {
       // To delete a file in PocketBase, you update the record and set the file field to null
       // The JS SDK update method with { fieldName: null } handles this correctly.
@@ -1192,12 +1087,11 @@ export const deleteFile = async (collectionName, recordId, fieldName) => {
 
       const record = await pb.collection(collectionName).update(recordId, updateData);
 
-      console.log(`PocketBase: File reference removed for field "${fieldName}". Record updated:`, record);
       return record;
 
    } catch (error) {
       console.error(`PocketBase: Caught error during ${fieldName} deletion process:`, error);
-       if (error.response && error.response.data) {
+      if (error.response && error.response.data) {
         console.error('PocketBase: Response data:', error.response.data);
     }
     throw error;
@@ -1221,7 +1115,6 @@ export const getFileUrl = (record, fieldName, options = {}) => {
      // The fieldName itself holds the filename(s)
      return pb.getFileUrl(record, record[fieldName], options);
   } catch (e) {
-     console.error('Error generating file URL:', e);
      return null;
   }
 };
@@ -1236,7 +1129,6 @@ export const searchMedia = async (query) => {
   if (!query || query.trim() === '') {
     return [];
   }
-  console.log('PocketBase: Поиск медиа по запросу:', query);
   try {
     // PocketBase search is done using filters
     // We can search in 'title' OR 'overview' fields
@@ -1244,15 +1136,11 @@ export const searchMedia = async (query) => {
     const records = await pb.collection('media').getList(1, 50, { // Limit results to 50 for quick search
       filter: `title ~ "${query}" || overview ~ "${query}"`, // Case-insensitive search using '~'
       sort: '-created', // Optional: sort results
-      // You might want to select specific fields to reduce payload size
-      // fields: 'id,title,type,path,poster,release_date'
     });
 
-    console.log('PocketBase: Результаты поиска:', records.items);
     return records.items;
 
   } catch (error) {
-    console.error('PocketBase: Ошибка при поиске медиа:', error);
     throw error;
   }
 };
@@ -1283,7 +1171,6 @@ export const searchMedia = async (query) => {
  */
 export const getSeasonsByMediaId = async (mediaId, options = {}) => {
     try {
-    console.log('PocketBase: Получение сезонов для медиа:', mediaId);
     const filter = `media_id = "${mediaId}"`;
     
     const queryOptions = {
@@ -1293,10 +1180,8 @@ export const getSeasonsByMediaId = async (mediaId, options = {}) => {
     };
 
     const records = await pb.collection('seasons').getList(1, 100, queryOptions);
-    console.log('PocketBase: Получены сезоны:', records.items);
     return records.items;
   } catch (err) {
-    console.error('Error getting seasons by media ID:', err);
     throw err;
     }
 };
@@ -1308,21 +1193,16 @@ export const getSeasonsByMediaId = async (mediaId, options = {}) => {
  */
 export const getSeasonById = async (seasonId) => {
     if (!seasonId) {
-        console.warn('PocketBase: getSeasonById called with undefined seasonId');
         return null;
     }
     try {
-        console.log('PocketBase: Получение сезона по ID:', seasonId);
         const record = await pb.collection('seasons').getOne(seasonId);
-        console.log('PocketBase: Сезон найден по ID:', record);
         return record;
     } catch (error) {
-        console.error('PocketBase: Ошибка получения сезона по ID:', error);
-         if (error.status === 404) {
-            console.log('PocketBase: Сезон не найден по ID:', seasonId);
+        if (error.status === 404) {
             return null;
-         }
-         if (error.response && error.response.data) {
+        }
+        if (error.response && error.response.data) {
             console.error('PocketBase: Response data:', error.response.data);
         }
         throw error;
@@ -1336,15 +1216,12 @@ export const getSeasonById = async (seasonId) => {
  */
 export const createSeason = async (seasonData) => {
   try {
-    console.log('PocketBase: Создание сезона:', seasonData);
-    // PocketBase create with FormData handles file uploads
     const record = await pb.collection('seasons').create(seasonData);
-    console.log('PocketBase: Сезон создан с ID:', record.id);
     return record;
   } catch (error) {
     console.error('PocketBase: Ошибка создания сезона:', error);
-     if (error.response && error.response.data) {
-        console.error('PocketBase: Response data:', error.response.data);
+    if (error.response && error.response.data) {
+      console.error('PocketBase: Response data:', error.response.data);
     }
     throw error;
   }
@@ -1358,22 +1235,16 @@ export const createSeason = async (seasonData) => {
  */
 export const updateSeason = async (seasonId, seasonData) => {
   try {
-    console.log('PocketBase: Обновление сезона:', seasonId, 'с данными:', seasonData);
-    // PocketBase update requires the record ID
-    // Pass FormData directly if seasonData is FormData
     const record = await pb.collection('seasons').update(seasonId, seasonData);
-    console.log('PocketBase: Сезон обновлен успешно:', record);
     return record;
   } catch (error) {
     console.error('PocketBase: Ошибка обновления сезона:', error);
-     // --- Added Logging ---
-     if (error.response) {
-        console.error('PocketBase: Response status:', error.response.status);
-        console.error('PocketBase: Response data:', error.response.data);
-     } else {
-        console.error('PocketBase: No response data available.');
-     }
-     // --- End Added Logging ---
+    if (error.response) {
+      console.error('PocketBase: Response status:', error.response.status);
+      console.error('PocketBase: Response data:', error.response.data);
+    } else {
+      console.error('PocketBase: No response data available.');
+    }
     throw error;
   }
 };
@@ -1385,21 +1256,16 @@ export const updateSeason = async (seasonId, seasonData) => {
  */
 export const deleteSeason = async (seasonId) => {
   try {
-    console.log('PocketBase: Удаление сезона:', seasonId);
-    // PocketBase delete requires the record ID
     await pb.collection('seasons').delete(seasonId);
-    console.log('PocketBase: Сезон удален успешно:', seasonId);
     return true; // Indicate success
   } catch (error) {
     console.error('PocketBase: Ошибка удаления сезона:', error);
-     // --- Added Logging ---
-     if (error.response) {
-        console.error('PocketBase: Response status:', error.response.status);
-        console.error('PocketBase: Response data:', error.response.data);
-     } else {
-        console.error('PocketBase: No response data available.');
-     }
-     // --- End Added Logging ---
+    if (error.response) {
+      console.error('PocketBase: Response status:', error.response.status);
+      console.error('PocketBase: Response data:', error.response.data);
+    } else {
+      console.error('PocketBase: No response data available.');
+    }
     throw error;
   }
 };
@@ -1414,7 +1280,6 @@ export const deleteSeason = async (seasonId) => {
  */
 export const getSeasons = async (options = {}) => {
     try {
-        console.log('PocketBase: Получение сезонов с опциями:', options);
         let filter = '';
         
         // Build filter string based on options
@@ -1437,7 +1302,6 @@ export const getSeasons = async (options = {}) => {
 
         const records = await pb.collection('seasons').getFullList(queryOptions);
 
-        console.log('PocketBase: Получены сезоны:', records);
         return records;
     } catch (error) {
         console.error('PocketBase: Ошибка получения сезонов:', error);
@@ -1457,7 +1321,6 @@ export const getSuggestions = async (page = 1, perPage = 20, sort = '-created')
     });
     return records.items;
   } catch (error) {
-    console.error('Error fetching suggestions:', error);
     throw error;
   }
 };
@@ -1469,7 +1332,6 @@ export const getSuggestionById = async (id) => {
     });
     return record;
   } catch (error) {
-    console.error('Error fetching suggestion:', error);
     throw error;
   }
 };
@@ -1479,7 +1341,6 @@ export const createSuggestion = async (data) => {
     const record = await pb.collection('suggestions').create(data);
     return record;
   } catch (error) {
-    console.error('Error creating suggestion:', error);
     throw error;
   }
 };
@@ -1489,7 +1350,6 @@ export const updateSuggestion = async (id, data) => {
     const record = await pb.collection('suggestions').update(id, data);
     return record;
   } catch (error) {
-    console.error('Error updating suggestion:', error);
     throw error;
   }
 };
@@ -1498,7 +1358,6 @@ export const deleteSuggestion = async (id) => {
   try {
     await pb.collection('suggestions').delete(id);
   } catch (error) {
-    console.error('Error deleting suggestion:', error);
     throw error;
   }
 };
@@ -1506,15 +1365,12 @@ export const deleteSuggestion = async (id) => {
 // Функции для работы с пользователями
 export const getUsers = async (page = 1, perPage = 20, sort = '-created') => {
   try {
-    console.log('PocketBase: Получение списка пользователей');
     const records = await pb.collection('users').getList(page, perPage, {
       sort
     });
     
-    console.log('PocketBase: Получены пользователи:', records.items);
     return records.items;
   } catch (error) {
-    console.error('PocketBase: Ошибка получения пользователей:', error);
     throw error;
   }
 };
@@ -1549,7 +1405,6 @@ export const getMediaCount = async () => {
     });
     return records.totalItems;
   } catch (error) {
-    console.error('Error getting media count:', error);
     return 0;
   }
 };
@@ -1561,7 +1416,6 @@ export const getReviewsCount = async () => {
     });
     return records.totalItems;
   } catch (error) {
-    console.error('Error getting reviews count:', error);
     return 0;
   }
 };
@@ -1574,14 +1428,12 @@ export const getFeaturedMedia = async () => {
     });
     return records.items;
   } catch (error) {
-    console.error('Error fetching featured media:', error);
     return [];
   }
 };
 
 export const getReviewsByLikes = async (limit = 20) => {
     try {
-        console.log('PocketBase: Получение рецензий по лайкам (лимит:', limit, ')');
         const records = await pb.collection('reviews').getList(1, 100, {
             expand: 'media_id,user_id'
         });
@@ -1593,10 +1445,8 @@ export const getReviewsByLikes = async (limit = 20) => {
             return bLikes - aLikes;
         }).slice(0, limit);
 
-        console.log('PocketBase: Получены рецензии по лайкам:', sortedReviews);
         return sortedReviews;
     } catch (error) {
-        console.error('PocketBase: Ошибка получения рецензий по лайкам:', error);
         throw error;
     }
 };
@@ -1663,7 +1513,88 @@ export const getAdminStats = async () => {
 
     return stats;
   } catch (error) {
-    console.error('Error fetching admin stats:', error);
+    throw error;
+  }
+};
+
+// Функция для создания рецензии через API
+export const createReviewViaAPI = async (reviewData) => {
+  try {
+    // Рассчитываем общую оценку, если она не предоставлена
+    if (!reviewData.overall_rating && reviewData.ratings) {
+      const ratings = reviewData.ratings;
+      const validRatings = Object.values(ratings).filter(value => typeof value === 'number' && !isNaN(value));
+      if (validRatings.length > 0) {
+        reviewData.overall_rating = parseFloat((validRatings.reduce((sum, value) => sum + value, 0) / validRatings.length).toFixed(2));
+      }
+    }
+
+    // Убеждаемся, что media_type установлен
+    if (!reviewData.media_type && reviewData.media_id) {
+      const media = await pb.collection('media').getOne(reviewData.media_id);
+      reviewData.media_type = media.type;
+    }
+
+    // Устанавливаем progress по умолчанию, если не предоставлен
+    if (!reviewData.progress) {
+      reviewData.progress = reviewData.media_type === 'game' ? 'completed' : 'watched';
+    }
+
+    const record = await pb.collection('reviews').create(reviewData);
+
+    // Обновляем статистику медиа
+    if (record.media_id) {
+      await updateRatingStats('media', record.media_id);
+    }
+
+    return record;
+  } catch (error) {
+    console.error('Error creating review:', error);
+    throw error;
+  }
+};
+
+// Функции для работы с лайками рецензий
+export const likeReview = async (reviewId) => {
+  try {
+    const currentUser = pb.authStore.model;
+    if (!currentUser) {
+      throw new Error('User not authenticated');
+    }
+
+    const review = await pb.collection('reviews').getOne(reviewId);
+    const likes = review.likes || [];
+    
+    if (!likes.includes(currentUser.id)) {
+      likes.push(currentUser.id);
+      await pb.collection('reviews').update(reviewId, { likes });
+    }
+
+    return true;
+  } catch (error) {
+    console.error('Error liking review:', error);
+    throw error;
+  }
+};
+
+export const unlikeReview = async (reviewId) => {
+  try {
+    const currentUser = pb.authStore.model;
+    if (!currentUser) {
+      throw new Error('User not authenticated');
+    }
+
+    const review = await pb.collection('reviews').getOne(reviewId);
+    const likes = review.likes || [];
+    
+    if (likes.includes(currentUser.id)) {
+      const updatedLikes = likes.filter(id => id !== currentUser.id);
+      await pb.collection('reviews').update(reviewId, { likes: updatedLikes });
+    }
+
+    return true;
+  } catch (error) {
+    console.error('Error unliking review:', error);
     throw error;
   }
 };
diff --git a/vite.config.js b/vite.config.js
index b9e8006..f9aa083 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -6,6 +6,30 @@ export default defineConfig({
   plugins: [react()],
   server: {
     allowedHosts: ['mneie.campfiregg.site'],
-    host: true
+    host: true,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:3000',
+        changeOrigin: true,
+        secure: false
+      }
+    }
+  },
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          'react-vendor': ['react', 'react-dom', 'react-router-dom'],
+          'ui-vendor': ['framer-motion', 'react-icons', 'react-select'],
+          'media-vendor': ['@react-three/fiber', '@react-three/postprocessing', 'three', 'postprocessing'],
+          'utils-vendor': ['chart.js', 'react-chartjs-2', 'dompurify', 'pocketbase']
+        }
+      }
+    },
+    chunkSizeWarningLimit: 1000,
+    sourcemap: false
+  },
+  optimizeDeps: {
+    include: ['react', 'react-dom', 'react-router-dom']
   }
 })