diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index d1b43b4..807065a 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -17,6 +17,7 @@
         "overlayscrollbars": "^2.15.1",
         "overlayscrollbars-react": "^0.5.6",
         "react": "^19.2.4",
+        "react-device-detect": "^2.2.3",
         "react-dom": "^19.2.4",
         "react-router-dom": "^7.14.0",
         "zustand": "^5.0.12"
@@ -3763,6 +3764,19 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-device-detect": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/react-device-detect/-/react-device-detect-2.2.3.tgz",
+      "integrity": "sha512-buYY3qrCnQVlIFHrC5UcUoAj7iANs/+srdkwsnNjI7anr3Tt7UY6MqNxtMLlr0tMBied0O49UZVK8XKs3ZIiPw==",
+      "license": "MIT",
+      "dependencies": {
+        "ua-parser-js": "^1.0.33"
+      },
+      "peerDependencies": {
+        "react": ">= 0.14.0",
+        "react-dom": ">= 0.14.0"
+      }
+    },
     "node_modules/react-dom": {
       "version": "19.2.4",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz",
@@ -4132,6 +4146,32 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/ua-parser-js": {
+      "version": "1.0.41",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.41.tgz",
+      "integrity": "sha512-LbBDqdIC5s8iROCUjMbW1f5dJQTEFB1+KO9ogbvlb3nm9n4YHa5p4KTvFPWvh2Hs8gZMBuiB1/8+pdfe/tDPug==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/ua-parser-js"
+        },
+        {
+          "type": "paypal",
+          "url": "https://paypal.me/faisalman"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/faisalman"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "ua-parser-js": "script/cli.js"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 378bd9f..4d48109 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -21,6 +21,7 @@
     "overlayscrollbars": "^2.15.1",
     "overlayscrollbars-react": "^0.5.6",
     "react": "^19.2.4",
+    "react-device-detect": "^2.2.3",
     "react-dom": "^19.2.4",
     "react-router-dom": "^7.14.0",
     "zustand": "^5.0.12"
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 4c3f03c..cef53ee 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,5 +1,16 @@
+import { BrowserView, MobileView } from 'react-device-detect'
 import PCRoutes from './routes/pc'
+import MobileRoutes from './routes/mobile'
 
 export default function App() {
-  return <PCRoutes />
+  return (
+    <>
+      <BrowserView>
+        <PCRoutes />
+      </BrowserView>
+      <MobileView>
+        <MobileRoutes />
+      </MobileView>
+    </>
+  )
 }