diff --git a/docusaurus.config.js b/docusaurus.config.js
index 5b0cea7..7b207f5 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -15,7 +15,7 @@ const config = {
   favicon: 'img/favicon.ico',
 
   // Set the production url of your site here
-  url: 'https://your-docusaurus-site.example.com',
+  url: 'https://ai.wirediv.com',
   // Set the /<baseUrl>/ pathname under which your site is served
   // For GitHub pages deployment, it is often '/<projectName>/'
   baseUrl: '/',
diff --git a/src/pages/login.js b/src/pages/login.js
new file mode 100644
index 0000000..68dece1
--- /dev/null
+++ b/src/pages/login.js
@@ -0,0 +1,90 @@
+import React, { useState } from "react";
+import Layout from "@theme/Layout";
+import { signIn } from "@site/src/pocketbase";
+
+export default function Login() {
+
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    setLoading(true)
+    await signIn(email, password)
+    setLoading(false)
+  };
+  return (
+      <div
+        style={{
+          flexGrow: 1,
+          display: "flex",
+          justifyItems: "center",
+          alignItems: "center",
+          marginRight: "auto",
+          marginLeft: "auto",
+          flexDirection: 'column'
+        }}
+      >
+        <form
+          onSubmit={handleSubmit}
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            width: "400px",
+            margin: "auto",
+          }}
+        >
+          <img src="img/combination-icon.png" width={'100px'} style={{ margin: "auto" }} />
+          <h1 style={{ marginLeft: 'auto', marginRight: 'auto' }}>Wirediv</h1>
+          <h2 style={{ marginLeft: 'auto', marginRight: 'auto' }}>AI Course</h2>
+          <label htmlFor="email" style={{ marginBottom: "10px" }}>
+            Email:
+          </label>
+          <input
+            type="email"
+            id="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            style={{
+              marginBottom: "10px",
+              padding: "10px",
+              borderRadius: "5px",
+              border: "1px solid #ccc",
+              fontSize: "18px"
+            }}
+          />
+          <label htmlFor="password" style={{ marginBottom: "10px" }}>
+            Password:
+          </label>
+          <input
+            type="password"
+            id="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            style={{
+              marginBottom: "10px",
+              padding: "10px",
+              borderRadius: "5px",
+              border: "1px solid #ccc",
+              fontSize: "18px"
+            }}
+          />
+          <button
+            type="submit"
+            style={{
+              padding: "10px",
+              borderRadius: "5px",
+              border: "none",
+              backgroundColor: "#fd5367",
+              color: "white",
+              marginTop: '1rem'
+            }}
+            disabled={loading}
+          >
+            {loading ? 'Loading...' : 'Login'}
+          </button>
+        </form>
+      </div>
+  )
+}
\ No newline at end of file
diff --git a/src/theme/Root.js b/src/theme/Root.js
index a43eb94..6a71006 100644
--- a/src/theme/Root.js
+++ b/src/theme/Root.js
@@ -1,18 +1,9 @@
 import React, { useState } from "react";
-import { signIn, auth } from "@site/src/pocketbase";
+import { auth } from "@site/src/pocketbase";
+import Login from "../pages/login";
 
 export default function Root({ children }) {
   const [userAuth, setUserAuth] = useState("");
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [loading, setLoading] = useState(false);
-
-  const handleSubmit = async (event) => {
-    event.preventDefault();
-    setLoading(true)
-    await signIn(email,password)
-    setLoading(false)
-  };
 
   auth.onChange(async function (user) {
     if (user !== null) {
@@ -25,74 +16,7 @@ export default function Root({ children }) {
       {userAuth != "" ? (
         <>{children}</>
       ) : (
-        <div
-          style={{
-            flexGrow: 1,
-            display: "flex",
-            justifyItems: "center",
-            alignItems: "center",
-            marginRight: "auto",
-            marginLeft: "auto",
-            flexDirection: 'column'
-          }}
-        >
-          <form
-            onSubmit={handleSubmit}
-            style={{
-              display: "flex",
-              flexDirection: "column",
-              width: "400px",
-              margin: "auto",
-            }}
-          >
-            <img src="img/combination-icon.png"  />
-            <h1 style={{marginLeft: 'auto', marginRight: 'auto'}}>Wirediv AI Course Langchain</h1>
-            <label htmlFor="email" style={{ marginBottom: "10px" }}>
-              Email:
-            </label>
-            <input
-              type="email"
-              id="email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              style={{
-                marginBottom: "10px",
-                padding: "5px",
-                borderRadius: "5px",
-                border: "1px solid #ccc",
-              }}
-            />
-            <label htmlFor="password" style={{ marginBottom: "10px" }}>
-              Password:
-            </label>
-            <input
-              type="password"
-              id="password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              style={{
-                marginBottom: "10px",
-                padding: "5px",
-                borderRadius: "5px",
-                border: "1px solid #ccc",
-              }}
-            />
-            <button
-              type="submit"
-              style={{
-                padding: "5px",
-                borderRadius: "5px",
-                border: "none",
-                backgroundColor: "#fd5367",
-                color: "white",
-                marginTop: '1rem'
-              }}
-              disabled={loading}
-            >
-              {loading ? 'Loading...':'Login'}
-            </button>
-          </form>
-        </div>
+        <Login />
       )}
     </>
   );