saved.patch

diff --git a/ClientApp/package-lock.json b/ClientApp/package-lock.json
index d6791ae..2dfa7b9 100644
--- a/ClientApp/package-lock.json
+++ b/ClientApp/package-lock.json
@@ -23,7 +23,6 @@
         "react-scripts": "^5.0.1",
         "react-transition-group": "^4.4.5",
         "reactstrap": "^9.2.3",
-        "rimraf": "^2.6.2",
         "web-vitals": "^0.2.4",
         "workbox-background-sync": "^5.1.3",
         "workbox-broadcast-update": "^5.1.3",
@@ -50,6 +49,7 @@
         "eslint-plugin-react": "^7.23.2",
         "nan": "^2.14.2",
         "postcss": "^8.5.6",
+        "rimraf": "^6.0.1",
         "tailwindcss": "^3.4.13",
         "typescript": "^4.2.4"
       }
@@ -2664,6 +2664,29 @@
       "deprecated": "Use @eslint/object-schema instead",
       "license": "BSD-3-Clause"
     },
+    "node_modules/@isaacs/balanced-match": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@isaacs/balanced-match/-/balanced-match-4.0.1.tgz",
+      "integrity": "sha512-yzMTt9lEb8Gv7zRioUilSglI0c0smZ9k5D65677DLWLtWJaXIS3CqcGyUFByYKlnUj6TkjLVs54fBl6+TiGQDQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/@isaacs/brace-expansion": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@isaacs/brace-expansion/-/brace-expansion-5.0.0.tgz",
+      "integrity": "sha512-ZT55BDLV0yv0RBm2czMiZ+SqCGO7AvmOM3G/w2xhVPH+te0aKgFjmBvGlL1dH+ql2tgGO3MVrbb3jCKyvpgnxA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@isaacs/balanced-match": "^4.0.1"
+      },
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -16399,16 +16422,106 @@
       }
     },
     "node_modules/rimraf": {
-      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
-      "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
-      "deprecated": "Rimraf versions prior to v4 are no longer supported",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-6.0.1.tgz",
+      "integrity": "sha512-9dkvaxAsk/xNXSJzMgFqqMCuFgt2+KsOFek3TMLfo8NCPfWpBmqwyNn5Y+NX56QUYfCtsyhF3ayiboEoUmJk/A==",
+      "dev": true,
       "license": "ISC",
       "dependencies": {
-        "glob": "^7.1.3"
+        "glob": "^11.0.0",
+        "package-json-from-dist": "^1.0.0"
       },
       "bin": {
-        "rimraf": "bin.js"
+        "rimraf": "dist/esm/bin.mjs"
+      },
+      "engines": {
+        "node": "20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/rimraf/node_modules/glob": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-11.0.3.tgz",
+      "integrity": "sha512-2Nim7dha1KVkaiF4q6Dj+ngPPMdfvLJEOpZk/jKiUAkqKebpGAWQXAq9z1xu9HKu5lWfqw/FASuccEjyznjPaA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "foreground-child": "^3.3.1",
+        "jackspeak": "^4.1.1",
+        "minimatch": "^10.0.3",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^2.0.0"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "engines": {
+        "node": "20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/rimraf/node_modules/jackspeak": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-4.1.1.tgz",
+      "integrity": "sha512-zptv57P3GpL+O0I7VdMJNBZCu+BPHVQUk55Ft8/QCJjTVxrnJHuVuX/0Bl2A6/+2oyR/ZMEuFKwmzqqZ/U5nPQ==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "engines": {
+        "node": "20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/rimraf/node_modules/lru-cache": {
+      "version": "11.2.2",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.2.tgz",
+      "integrity": "sha512-F9ODfyqML2coTIsQpSkRHnLSZMtkU8Q+mSfcaIyKwy58u+8k5nvAYeiNhsyMARvzNcXJ9QfWVrcPsC9e9rAxtg==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/rimraf/node_modules/minimatch": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.1.1.tgz",
+      "integrity": "sha512-enIvLvRAFZYXJzkCYG5RKmPfrFArdLv+R+lbQ53BmIMLIry74bjKzX6iHAm8WYamJkhSSEabrWN5D97XnKObjQ==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/brace-expansion": "^5.0.0"
+      },
+      "engines": {
+        "node": "20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/rimraf/node_modules/path-scurry": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-2.0.0.tgz",
+      "integrity": "sha512-ypGJsmGtdXUOeM5u93TyeIEfEhM6s+ljAhrk5vAvSx8uyY/02OvrZnA0YNGUrPXfpJMgI1ODd3nwz8Npx4O4cg==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "lru-cache": "^11.0.0",
+        "minipass": "^7.1.2"
+      },
+      "engines": {
+        "node": "20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
     "node_modules/rollup": {
diff --git a/ClientApp/package.json b/ClientApp/package.json
index 2109360..188722a 100644
--- a/ClientApp/package.json
+++ b/ClientApp/package.json
@@ -18,7 +18,6 @@
     "react-scripts": "^5.0.1",
     "react-transition-group": "^4.4.5",
     "reactstrap": "^9.2.3",
-    "rimraf": "^2.6.2",
     "web-vitals": "^0.2.4",
     "workbox-background-sync": "^5.1.3",
     "workbox-broadcast-update": "^5.1.3",
@@ -45,6 +44,7 @@
     "eslint-plugin-react": "^7.23.2",
     "nan": "^2.14.2",
     "postcss": "^8.5.6",
+    "rimraf": "^6.0.1",
     "tailwindcss": "^3.4.13",
     "typescript": "^4.2.4"
   },
diff --git a/ClientApp/src/App.js b/ClientApp/src/App.js
index 1bde9d3..633317f 100644
--- a/ClientApp/src/App.js
+++ b/ClientApp/src/App.js
@@ -1,24 +1,54 @@
-// remove BrowserRouter import
-import { Routes, Route } from 'react-router-dom';
-import Layout from './components/Layout';
-import Home from './components/Home';
-import FetchData from './components/FetchData';
-import Counter from './components/Counter';
-import SignIn from './components/SignIn';
-import SignUp from './components/SignUp';
-import './custom.css';
+// src/App.js
+import { Routes, Route } from "react-router-dom";
+
+import Layout from "./components/Layout";
+import SignIn from "./components/SignIn";
+import SignUp from "./components/SignUp";
+import { RequireAuth, RequireRole } from "./components/RouteGuards";
+
+import Home from "./pages/Home";
+import FetchData from "./pages/FetchData";
+import Counter from "./pages/Counter";
+import ForgotPassword from "./pages/ForgotPassword";
+
+import AdminDashboard from "./components/dashboard/AdminDashboard";
+import TeacherDashboard from "./components/dashboard/TeacherDashboard";
+import StudentDashboard from "./components/dashboard/StudentDashboard";
+import SlpDashboard from "./components/dashboard/SlpDashboard";
+
+import "./custom.css";
 
 export default function App() {
   return (
     <Layout>
       <Routes>
+        {/* Public */}
         <Route path="/" element={<Home />} />
         <Route path="/counter" element={<Counter />} />
         <Route path="/fetch-data" element={<FetchData />} />
+        <Route path="/forgot-password" element={<ForgotPassword />} />
         <Route path="/sign-in" element={<SignIn />} />
         <Route path="/sign-up" element={<SignUp />} />
-        {/* <Route path="/forgot-password" element={<ForgotPassword />} />
-        <Route path="/dashboard" element={<Dashboard />} /> */}
+
+        {/* Protected */}
+        <Route element={<RequireAuth />}>
+          <Route path="/dashboard">
+            <Route element={<RequireRole allow={["admin"]} />}>
+              <Route path="admin" element={<AdminDashboard />} />
+            </Route>
+            <Route element={<RequireRole allow={["teacher"]} />}>
+              <Route path="teacher" element={<TeacherDashboard />} />
+            </Route>
+            <Route element={<RequireRole allow={["student"]} />}>
+              <Route path="student" element={<StudentDashboard />} />
+            </Route>
+            <Route element={<RequireRole allow={["slp"]} />}>
+              <Route path="slp" element={<SlpDashboard />} />
+            </Route>
+          </Route>
+        </Route>
+
+        {/* Fallback */}
         <Route path="*" element={<div className="p-3">Not found</div>} />
       </Routes>
     </Layout>
diff --git a/ClientApp/src/components/Counter.js b/ClientApp/src/components/Counter.js
deleted file mode 100644
index d1a421f..0000000
--- a/ClientApp/src/components/Counter.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import { useState } from "react";
-
-export default function Counter() {
-  const [count, setCount] = useState(0);
-
-  return (
-    <div>
-      <h1>Counter</h1>
-      <p>This is a simple example of a React component.</p>
-      <p aria-live="polite">
-        Current count: <strong>{count}</strong>
-      </p>
-      <button className="btn btn-primary" onClick={() => setCount(c => c + 1)}>
-        Increment
-      </button>
-    </div>
-  );
-}
diff --git a/ClientApp/src/components/Dashboard.js b/ClientApp/src/components/Dashboard.js
deleted file mode 100644
index e69de29..0000000
diff --git a/ClientApp/src/components/FetchData.js b/ClientApp/src/components/FetchData.js
deleted file mode 100644
index 191809c..0000000
--- a/ClientApp/src/components/FetchData.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import { useEffect, useState } from "react";
-
-export default function FetchData() {
-  const [forecasts, setForecasts] = useState([]);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    let active = true;
-    (async () => {
-      try {
-        const res = await fetch("weatherforecast");
-        const data = await res.json();
-        if (active) {
-          setForecasts(data);
-          setLoading(false);
-        }
-      } catch (e) {
-        if (active) setLoading(false);
-        console.error("Failed to load weatherforecast", e);
-      }
-    })();
-    return () => {
-      active = false;
-    };
-  }, []);
-
-  const renderTable = (rows) => (
-    <table className="table table-striped" aria-labelledby="tableLabel">
-      <thead>
-        <tr>
-          <th>Date</th>
-          <th>Temp. (C)</th>
-          <th>Temp. (F)</th>
-          <th>Summary</th>
-        </tr>
-      </thead>
-      <tbody>
-        {rows.map((f, i) => (
-          <tr key={f.date ?? i}>
-            <td>{f.date}</td>
-            <td>{f.temperatureC}</td>
-            <td>{f.temperatureF}</td>
-            <td>{f.summary}</td>
-          </tr>
-        ))}
-      </tbody>
-    </table>
-  );
-
-  return (
-    <div>
-      <h1 id="tableLabel">Weather forecast</h1>
-      <p>This component demonstrates fetching data from the server.</p>
-      {loading ? <p><em>Loading...</em></p> : renderTable(forecasts)}
-    </div>
-  );
-}
diff --git a/ClientApp/src/components/ForgotPassword.js b/ClientApp/src/components/ForgotPassword.js
deleted file mode 100644
index e69de29..0000000
diff --git a/ClientApp/src/components/Home.js b/ClientApp/src/components/Home.js
deleted file mode 100644
index 7e30841..0000000
--- a/ClientApp/src/components/Home.js
+++ /dev/null
@@ -1,44 +0,0 @@
-export default function Home() {
-  return (
-    <div>
-      <h1>Hello, world!</h1>
-      <p>Welcome to your new single-page application, built with:</p>
-      <ul>
-        <li>
-          <a href="https://get.asp.net/">ASP.NET Core</a> and{" "}
-          <a href="https://msdn.microsoft.com/en-us/library/67ef8sbd.aspx">C#</a>{" "}
-          for cross-platform server-side code
-        </li>
-        <li>
-          <a href="https://facebook.github.io/react/">React</a> for client-side code
-        </li>
-        <li>
-          <a href="http://getbootstrap.com/">Bootstrap</a> for layout and styling
-        </li>
-      </ul>
-      <p>To help you get started, we have also set up:</p>
-      <ul>
-        <li>
-          <strong>Client-side navigation</strong>. For example, click <em>Counter</em> then{" "}
-          <em>Back</em> to return here.
-        </li>
-        <li>
-          <strong>Development server integration</strong>. In development mode, the development
-          server from <code>create-react-app</code> runs in the background automatically, so your
-          client-side resources are dynamically built on demand and the page refreshes when you
-          modify any file.
-        </li>
-        <li>
-          <strong>Efficient production builds</strong>. In production mode, development-time
-          features are disabled, and your <code>dotnet publish</code> configuration produces
-          minified, efficiently bundled JavaScript files.
-        </li>
-      </ul>
-      <p>
-        The <code>ClientApp</code> subdirectory is a standard React application based on the{" "}
-        <code>create-react-app</code> template. If you open a command prompt in that directory, you
-        can run <code>npm</code> commands such as <code>npm test</code> or <code>npm install</code>.
-      </p>
-    </div>
-  );
-}
diff --git a/ClientApp/src/components/SignIn.js b/ClientApp/src/components/SignIn.js
index 7e8a449..40006d2 100644
--- a/ClientApp/src/components/SignIn.js
+++ b/ClientApp/src/components/SignIn.js
@@ -1,21 +1,27 @@
 import { useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { EyeSlashIcon, EyeIcon } from "@heroicons/react/24/solid";
+import { findUser, signInSession, dashboardPathForRole } from "../utils/auth";
 
 export default function SignIn() {
   const [passwordShown, setPasswordShown] = useState(false);
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
+  const [err, setErr] = useState("");
   const navigate = useNavigate();
 
   function handleSubmit(e) {
     e.preventDefault();
-    localStorage.setItem("authUser", JSON.stringify({ email }));
-    navigate("/dashboard");
+    const user = findUser(email, password);
+    if (!user) {
+      setErr("Invalid email or password");
+      return;
+    }
+    signInSession(user);
+    navigate(dashboardPathForRole(user.role), { replace: true });
   }
 
   return (
-    // <div className="min-h-screen bg-white text-gray-900 flex flex-col justify-center px-6 py-12 lg:px-8">
     <div className="min-h-screen bg-white text-gray-900 flex flex-col px-6 py-12 lg:px-8 mt-[100px]">
       <div className="sm:mx-auto sm:w-full sm:max-w-sm">
         <h2 className="mt-10 text-center text-2xl font-bold tracking-tight">
@@ -25,6 +31,8 @@ export default function SignIn() {
 
       <div className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
         <form onSubmit={handleSubmit} className="space-y-6">
+          {err && <p className="text-sm text-red-600">{err}</p>}
+
           {/* Email */}
           <div>
             <label htmlFor="email" className="block text-sm font-medium text-gray-900">
@@ -78,11 +86,7 @@ export default function SignIn() {
                 className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
                 aria-label="Toggle password visibility"
               >
-                {passwordShown ? (
-                  <EyeSlashIcon className="h-5 w-5" />
-                ) : (
-                  <EyeIcon className="h-5 w-5" />
-                )}
+                {passwordShown ? <EyeSlashIcon className="h-5 w-5" /> : <EyeIcon className="h-5 w-5" />}
               </button>
             </div>
           </div>
@@ -103,11 +107,7 @@ export default function SignIn() {
             Sign up
           </Link>
         </p>
-       
       </div>
     </div>
   );
 }
-
-
-
diff --git a/ClientApp/src/components/SignUp.js b/ClientApp/src/components/SignUp.js
index 5416460..57c4b56 100644
--- a/ClientApp/src/components/SignUp.js
+++ b/ClientApp/src/components/SignUp.js
@@ -1,111 +1,137 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { saveUser, signInSession, dashboardPathForRole } from "../utils/auth";
 
+export default function SignUp() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [fullName, setFullName] = useState("");
+  const [role, setRole] = useState("");
+  const [err, setErr] = useState("");
+  const navigate = useNavigate();
 
+  function handleSubmit(e) {
+    e.preventDefault();
+    if (!role) {
+      setErr("Please select a role");
+      return;
+    }
+    const user = { email, password, fullName, role };
+    saveUser(user);
+    signInSession(user);
+    navigate(dashboardPathForRole(role), { replace: true });
+  }
 
-export default function SignUp() {
+  return (
+    <div className="min-h-screen bg-white text-gray-900 flex flex-col px-6 py-12 lg:px-8 mt-[100px]">
+      <div className="sm:mx-auto sm:w-full sm:max-w-sm">
+        <h2 className="mt-10 text-center text-2xl font-bold tracking-tight">
+          Sign Up for an account
+        </h2>
+      </div>
 
-    return (
-        // <div className="min-h-screen bg-white text-gray-900 flex flex-col justify-center px-6 py-12 lg:px-8">
-        <div className="min-h-screen bg-white text-gray-900 flex flex-col px-6 py-12 lg:px-8 mt-[100px]">
-            <div className="sm:mx-auto sm:w-full sm:max-w-sm">
-                <h2 className="mt-10 text-center text-2xl font-bold tracking-tight">
-                    Sign Up for an account
-                </h2>
-            </div>
+      <div className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
+        <form onSubmit={handleSubmit} className="space-y-6">
+          {err && <p className="text-sm text-red-600">{err}</p>}
 
-            <div className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
-                <form className="space-y-6">
-                    {/* Email */}
-                    <div>
-                        <label htmlFor="email" className="block text-sm font-medium text-gray-900">
-                            Email address
-                        </label>
-                        <div className="mt-2">
-                            <input
-                                id="email"
-                                name="email"
-                                type="email"
-                                autoComplete="email"
-                                required
-                                className="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm"
-                                placeholder="name@mail.com"
-                            />
-                        </div>
-                    </div>
+          {/* Email */}
+          <div>
+            <label htmlFor="email" className="block text-sm font-medium text-gray-900">
+              Email address
+            </label>
+            <div className="mt-2">
+              <input
+                id="email"
+                name="email"
+                type="email"
+                autoComplete="email"
+                required
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm"
+                placeholder="name@mail.com"
+              />
+            </div>
+          </div>
 
-                    {/* Password */}
-                    <div>
-                        <div className="flex items-center justify-between">
-                            <label htmlFor="password" className="block text-sm font-medium text-gray-900">
-                                Password
-                            </label>
-                        </div>
-                        <div className="mt-2 relative">
-                            <input
-                                id="password"
-                                name="password"
-                                type="password"
-                                autoComplete="current-password"
-                                required
-                                className="block w-full rounded-md bg-white px-3 py-1.5 pr-10 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm"
-                                placeholder="********"
-                            />
-                        </div>
-                    </div>
-                    
-                    {/*Full Name */}
-                    <div>
-                        <div className="flex items-center justify-between">
-                            <label htmlFor="fullName" className="block text-sm font-medium text-gray-900">
-                                Full Name
-                            </label>
-                        </div>
-                        <div className="mt-2">
-                            <input
-                                id="fullName"
-                                name="fullName"
-                                type="text"
-                                autoComplete="name"
-                                required
-                                className="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm"
-                                placeholder="First M. Last"
-                            />
-                        </div>
-                    </div>
+          {/* Password */}
+          <div>
+            <div className="flex items-center justify-between">
+              <label htmlFor="password" className="block text-sm font-medium text-gray-900">
+                Password
+              </label>
+            </div>
+            <div className="mt-2 relative">
+              <input
+                id="password"
+                name="password"
+                type="password"
+                autoComplete="new-password"
+                required
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="block w-full rounded-md bg-white px-3 py-1.5 pr-10 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm"
+                placeholder="********"
+              />
+            </div>
+          </div>
 
-                    {/* Role Selection */}
-                    <div>
-                        <label htmlFor="role" className="block text-sm font-medium text-gray-900">
-                        Role
-                        </label>
-                        <div className="mt-2">
-                            <select
-                                id="role"
-                                name="role"
-                                required
-                                className="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm"
-                                >
-                                <option value="">Select a role</option>
-                                <option value="teacher">Teacher</option>
-                                <option value="student">Student</option>
-                                <option value="slp">SLP</option>
-                                <option value="admin">Admin</option>
-                            </select>
-                        </div>
-                    </div>
-                    
-                    {/* Submit Button */}
-                    <div>
-                        <button
-                            type="submit"
-                            className="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
-                >
-                            Sign Up
-                        </button>
-                    </div>
-                </form>
+          {/* Full Name */}
+          <div>
+            <div className="flex items-center justify-between">
+              <label htmlFor="fullName" className="block text-sm font-medium text-gray-900">
+                Full Name
+              </label>
             </div>
-        </div>
-    );
+            <div className="mt-2">
+              <input
+                id="fullName"
+                name="fullName"
+                type="text"
+                autoComplete="name"
+                required
+                value={fullName}
+                onChange={(e) => setFullName(e.target.value)}
+                className="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm"
+                placeholder="First M. Last"
+              />
+            </div>
+          </div>
 
+          {/* Role Selection */}
+          <div>
+            <label htmlFor="role" className="block text-sm font-medium text-gray-900">
+              Role
+            </label>
+            <div className="mt-2">
+              <select
+                id="role"
+                name="role"
+                required
+                value={role}
+                onChange={(e) => setRole(e.target.value)}
+                className="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm"
+              >
+                <option value="">Select a role</option>
+                <option value="teacher">Teacher</option>
+                <option value="student">Student</option>
+                <option value="slp">SLP</option>
+                <option value="admin">Admin</option>
+              </select>
+            </div>
+          </div>
 
-}
\ No newline at end of file
+          {/* Submit Button */}
+          <div>
+            <button
+              type="submit"
+              className="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+            >
+              Sign Up
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}