diff --git a/.gitignore b/.gitignore
index 38e2889d9..ded9ce84b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -23,4 +23,5 @@ out/
 /src/bin/etherpad-1.deb
 /src/bin/node.exe
 plugin_packages
-pnpm-lock.yaml
\ No newline at end of file
+pnpm-lock.yaml
+.next
\ No newline at end of file
diff --git a/src/next-env.d.ts b/src/next-env.d.ts
new file mode 100644
index 000000000..4f11a03dc
--- /dev/null
+++ b/src/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/src/node/hooks/express/admin.ts b/src/node/hooks/express/admin.ts
index b819b255a..6c5a22347 100644
--- a/src/node/hooks/express/admin.ts
+++ b/src/node/hooks/express/admin.ts
@@ -15,13 +15,18 @@ const handle = app.getRequestHandler()
  */
 exports.expressCreateServer = (hookName:string, args: ArgsExpressType, cb:Function): any => {
 
-  args.app.get('/admin-new', (req:any, res:any) => {
-    return app.render(req, res, '/admin', req.query)
+  app.prepare().then(()=>{
+    args.app.get('/admin-new', (req:any, res:any) => {
+      return app.render(req, res, '/admin/admin', req.query)
+    })
+
+
+
+    args.app.all('*', (req:any, res:any) => {
+      return handle(req, res)
+    })
   })
 
-  args.app.all('/admin/*', (req:any, res:any) => {
-    return handle(req, res)
-  })
 
   args.app.get('/admin', (req:any, res:any) => {
     if ('/' !== req.path[req.path.length - 1]) return res.redirect('./admin/');
diff --git a/src/package.json b/src/package.json
index 0001e9c8b..ce7cee82c 100644
--- a/src/package.json
+++ b/src/package.json
@@ -68,6 +68,7 @@
     "socket.io": "^3.1.2",
     "socket.io-client": "^4.7.4",
     "superagent": "^8.1.2",
+    "tailwindcss": "^3.4.1",
     "terser": "^5.28.1",
     "threads": "^1.7.0",
     "tinycon": "0.6.8",
@@ -88,6 +89,7 @@
     "@types/jsdom": "^21.1.6",
     "@types/mocha": "^10.0.6",
     "@types/node": "^20.11.20",
+    "@types/react": "18.2.58",
     "@types/sinon": "^17.0.3",
     "@types/supertest": "^6.0.2",
     "@types/underscore": "^1.11.15",
diff --git a/src/pages/Admin.tsx b/src/pages/Admin.tsx
deleted file mode 100644
index 5eb903aff..000000000
--- a/src/pages/Admin.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-export const Admin = ()=>{
-    return(
-        <div>
-            <h1>Admin</h1>
-        </div>
-    )
-}
diff --git a/src/pages/admin/admin.tsx b/src/pages/admin/admin.tsx
new file mode 100644
index 000000000..bfb7e54d4
--- /dev/null
+++ b/src/pages/admin/admin.tsx
@@ -0,0 +1,10 @@
+export const Admin = ()=>{
+
+    return(
+        <div>
+            <h1 className="text-red-50">Admin12345</h1>
+        </div>
+    )
+}
+
+export default Admin
\ No newline at end of file
diff --git a/src/postcss.config.js b/src/postcss.config.js
new file mode 100644
index 000000000..12a703d90
--- /dev/null
+++ b/src/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/src/tailwind.config.ts b/src/tailwind.config.ts
new file mode 100644
index 000000000..eddac8615
--- /dev/null
+++ b/src/tailwind.config.ts
@@ -0,0 +1,20 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+    content: [
+        "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+        "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+        "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+    ],
+    theme: {
+        extend: {
+            backgroundImage: {
+                "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+                "gradient-conic":
+                    "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+            },
+        },
+    },
+    plugins: [],
+};
+export default config;
\ No newline at end of file
diff --git a/src/tsconfig.json b/src/tsconfig.json
index b15344f98..21a1795b4 100644
--- a/src/tsconfig.json
+++ b/src/tsconfig.json
@@ -2,18 +2,31 @@
   "compilerOptions": {
     /* Visit https://aka.ms/tsconfig to read more about this file */
     "moduleDetection": "force",
-    "lib": ["ES2023"],
+    "lib": [
+      "ES2023"
+    ],
     /* Language and Environment */
-    "target": "es6",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
-    /* Modules */
-    "module": "commonjs",                                /* Specify what module code is generated. */
-    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
-    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
-    /* Type Checking */
-    "strict": true,                                      /* Enable all strict type-checking options. */
-    /* Completeness */
+    "target": "es6", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. *//* Modules */
+    "module": "commonjs", /* Specify what module code is generated. */
+    "esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
+    "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. *//* Type Checking */
+    "strict": true, /* Enable all strict type-checking options. *//* Completeness */
     "skipLibCheck": true,
     /* Skip type checking all .d.ts files. */
-    "jsx": "react"
-  }
+    "jsx": "preserve",
+    "allowJs": true,
+    "noEmit": true,
+    "incremental": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }