diff --git a/client/src/containers/Admin/Users/AllUsers.css b/client/src/containers/Admin/Users/AllUsers.css
new file mode 100644
index 0000000..0a2329a
--- /dev/null
+++ b/client/src/containers/Admin/Users/AllUsers.css
@@ -0,0 +1,153 @@
+.users-wrapper {
+  padding: 20px;
+}
+
+/* Header */
+.header-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+/* Filters */
+.filters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin: 20px 0;
+}
+
+.filters input,
+.filters select {
+  padding: 8px;
+  border-radius: 6px;
+  border: 1px solid #ccc;
+}
+
+/* Scrollable Table */
+.table-scroll {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.users-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.users-table th,
+.users-table td {
+  padding: 10px;
+  border: 1px solid #ddd;
+}
+
+.wrap {
+  word-wrap: break-word;
+  max-width: 250px;
+}
+
+/* Badges */
+.badge {
+  padding: 5px 8px;
+  border-radius: 6px;
+  font-weight: bold;
+  text-transform: capitalize;
+}
+
+.badge.active {
+  background: #4caf50;
+  color: white;
+}
+
+.badge.archived {
+  background: #b71c1c;
+  color: white;
+}
+
+.badge.yes {
+  background: #007bff;
+  color: white;
+}
+
+.badge.no {
+  background: #616161;
+  color: white;
+}
+
+/* Archive Button */
+.archive-btn {
+  background: #d32f2f;
+  color: white;
+  border: none;
+  padding: 6px 10px;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.archive-btn:hover {
+  opacity: 0.85;
+}
+
+/* Edit Button */
+.edit-btn {
+  background: #007bff;
+  color: white;
+  padding: 6px 10px;
+  border-radius: 6px;
+  text-decoration: none;
+}
+
+.edit-btn:hover {
+  opacity: 0.85;
+}
+
+/* Email clickable link */
+.email-link {
+  color: #007bff;
+  text-decoration: none;
+}
+
+.email-link:hover {
+  text-decoration: underline;
+}
+
+/* Pagination */
+.pagination {
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+  gap: 15px;
+}
+
+.pagination button {
+  padding: 8px 12px;
+  border: none;
+  background: #007bff;
+  color: white;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.pagination button:disabled {
+  opacity: 0.5;
+}
+
+/* Home Link */
+.home-link {
+  display: block;
+  text-align: center;
+  margin-top: 25px;
+  color: #007bff;
+  text-decoration: none;
+}
+
+/* MOBILE */
+@media (max-width: 600px) {
+  .filters {
+    flex-direction: column;
+  }
+
+  .wrap {
+    max-width: 140px;
+  }
+}
diff --git a/client/src/containers/Admin/Users/AllUsers.tsx b/client/src/containers/Admin/Users/AllUsers.tsx
index e0be1a8..7ea76d5 100644
--- a/client/src/containers/Admin/Users/AllUsers.tsx
+++ b/client/src/containers/Admin/Users/AllUsers.tsx
@@ -1,69 +1,260 @@
-import React, { useEffect, useState } from 'react'
-// import { useParams } from "react-router-dom";
+// import React, { useEffect, useState } from 'react'
+// // import { useParams } from "react-router-dom";
+// import axios from "axios";
+// import {Link} from 'react-router-dom'
+
+// const AllUsers = () => {
+//   const [data, setData] = useState([]);
+//   // const { id } = useParams();
+
+//   const getData = async () => {
+//     const { data } = await axios.get(`/api/user/view`);
+//     setData(data);
+//   };
+
+//   useEffect(() => {
+//     getData();
+//   }, []);
+
+
+//   return (
+//     <>
+//       <div>AllUsers</div>
+
+//       <h1> I will create a login  with authorization and authentication for Admin's and User's momentarily</h1><br />
+
+//       Users API. This is Raw Data coming from the database. This will be used to apply all Users Information to the page for the admin edit user or freeze user or even archive."<br/><br/> 
+
+//       {/* {JSON.stringify(data)}<br /><br /> */}
+//       <table>
+//         <thead>
+//           <tr>
+//             <th></th>
+//             <th>Edit</th>
+//             <th>Email</th>
+//             <th>Password</th>
+//             <th>Description</th>
+//             <th>Archived</th>
+//             <th>Admin</th>
+//             <th>Developer</th>
+//           </tr>
+//         </thead>
+//         <tbody>
+//           {data.map((r: any, id: any) => (
+//             <tr key={id}>
+//               <td>
+//                 {" "}
+//                 {/* <input onClick={handleID} type="submit" value={`${r.id}`} /> */}
+//               </td>
+//               <td><Link to="/AdminUserProfile">Edit  </Link></td>
+//               <td>{r.email ? r.email : "No Email"}</td>
+//               <td>{r.password ? r.password : "NoPassword"}</td>
+//               <td>{r.description ? r.description : "No Information"}</td>
+//               <td>{r.archived ? r.archived : "Active"}</td>
+//               <td>{r.admin ? r.admin : "No"}</td>
+//               <td>{r.developer? r.developer : "No"}</td>
+//               {/* <td>{r}</td> */}  
+//             </tr>
+//           ))}
+//         </tbody>
+//       </table>
+//      {/* <Link to="/AdminUserProfile">Click to edit single user, change information, approve business to use the site + credit, or archive user.</Link><br/><br/> */}
+
+//     <br />
+//      <Link to="/Admin">Home</Link>
+//     </>
+//   )
+// }
+
+// export default AllUsers
+
+import React, { useEffect, useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
 import axios from "axios";
-import {Link} from 'react-router-dom'
+import "./AllUsers.css";
 
-const AllUsers = () => {
-  const [data, setData] = useState([]);
-  // const { id } = useParams();
+interface User {
+  _id: string;
+  email: string;
+  password?: string;
+  description?: string;
+  archived?: boolean;
+  admin?: boolean;
+  developer?: boolean;
+}
+
+const ITEMS_PER_PAGE = 10;
+
+const AllUsers: React.FC = () => {
+  const [users, setUsers] = useState<User[]>([]);
+  const [search, setSearch] = useState("");
+  const [archivedFilter, setArchivedFilter] = useState("all");
+  const [page, setPage] = useState(1);
+  const navigate = useNavigate();
 
-  const getData = async () => {
-    const { data } = await axios.get(`/api/user/view`);
-    setData(data);
+  // Fetch users
+  const fetchUsers = async () => {
+    try {
+      const { data } = await axios.get("/api/user/view");
+      setUsers(data);
+    } catch (error) {
+      console.error("Error fetching users:", error);
+    }
   };
 
   useEffect(() => {
-    getData();
+    fetchUsers();
   }, []);
 
+  // Filtered users
+  const filteredUsers = users.filter((user) => {
+    const matchesSearch =
+      user.email?.toLowerCase().includes(search.toLowerCase()) ||
+      user.description?.toLowerCase().includes(search.toLowerCase());
+    const matchesArchived =
+      archivedFilter === "all" ||
+      (archivedFilter === "archived" && user.archived) ||
+      (archivedFilter === "active" && !user.archived);
+    return matchesSearch && matchesArchived;
+  });
+
+  // Pagination
+  const startIndex = (page - 1) * ITEMS_PER_PAGE;
+  const pageUsers = filteredUsers.slice(
+    startIndex,
+    startIndex + ITEMS_PER_PAGE
+  );
+  const totalPages = Math.ceil(filteredUsers.length / ITEMS_PER_PAGE);
+
+  // Archive toggle
+  const toggleArchive = async (id: string, current: boolean) => {
+    try {
+      await axios.put(`/api/user/archive/${id}`, { archived: !current });
+      setUsers((prev) =>
+        prev.map((u) => (u._id === id ? { ...u, archived: !current } : u))
+      );
+    } catch (error) {
+      console.error("Error updating archive:", error);
+    }
+  };
 
   return (
-    <>
-      <div>AllUsers</div>
-
-      <h1> I will create a login  with authorization and authentication for Admin's and User's momentarily</h1><br />
-
-      Users API. This is Raw Data coming from the database. This will be used to apply all Users Information to the page for the admin edit user or freeze user or even archive."<br/><br/> 
-
-      {/* {JSON.stringify(data)}<br /><br /> */}
-      <table>
-        <thead>
-          <tr>
-            <th></th>
-            <th>Edit</th>
-            <th>Email</th>
-            <th>Password</th>
-            <th>Description</th>
-            <th>Archived</th>
-            <th>Admin</th>
-            <th>Developer</th>
-          </tr>
-        </thead>
-        <tbody>
-          {data.map((r: any, id: any) => (
-            <tr key={id}>
-              <td>
-                {" "}
-                {/* <input onClick={handleID} type="submit" value={`${r.id}`} /> */}
-              </td>
-              <td><Link to="/AdminUserProfile">Edit  </Link></td>
-              <td>{r.email ? r.email : "No Email"}</td>
-              <td>{r.password ? r.password : "NoPassword"}</td>
-              <td>{r.description ? r.description : "No Information"}</td>
-              <td>{r.archived ? r.archived : "Active"}</td>
-              <td>{r.admin ? r.admin : "No"}</td>
-              <td>{r.developer? r.developer : "No"}</td>
-              {/* <td>{r}</td> */}  
+    <div className="users-wrapper">
+      <div className="header-row">
+        <h2>All Users</h2>
+      </div>
+
+      {/* Search + Filter */}
+      <div className="filters">
+        <input
+          type="text"
+          placeholder="Search by email or description..."
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+        />
+        <select
+          value={archivedFilter}
+          onChange={(e) => setArchivedFilter(e.target.value)}
+        >
+          <option value="all">All Users</option>
+          <option value="active">Active</option>
+          <option value="archived">Archived</option>
+        </select>
+      </div>
+
+      {/* Scrollable table */}
+      <div className="table-scroll">
+        <table className="users-table">
+          <thead>
+            <tr>
+              <th>Email (click to edit)</th>
+              <th>Password</th>
+              <th>Description</th>
+              <th>Archived</th>
+              <th>Admin</th>
+              <th>Developer</th>
+              <th>Actions</th>
             </tr>
-          ))}
-        </tbody>
-      </table>
-     {/* <Link to="/AdminUserProfile">Click to edit single user, change information, approve business to use the site + credit, or archive user.</Link><br/><br/> */}
-
-    <br />
-     <Link to="/Admin">Home</Link>
-    </>
-  )
-}
+          </thead>
+          <tbody>
+            {pageUsers.length > 0 ? (
+              pageUsers.map((user) => (
+                <tr key={user._id}>
+                  <td>
+                    <Link to={`/AdminUserProfile/${user._id}`} className="email-link">
+                      {user.email}
+                    </Link>
+                  </td>
+                  <td>{user.password || "—"}</td>
+                  <td className="wrap">{user.description || "—"}</td>
+                  <td>
+                    <span
+                      className={`badge ${user.archived ? "archived" : "active"}`}
+                    >
+                      {user.archived ? "Archived" : "Active"}
+                    </span>
+                  </td>
+                  <td>
+                    <span className={`badge ${user.admin ? "yes" : "no"}`}>
+                      {user.admin ? "Yes" : "No"}
+                    </span>
+                  </td>
+                  <td>
+                    <span className={`badge ${user.developer ? "yes" : "no"}`}>
+                      {user.developer ? "Yes" : "No"}
+                    </span>
+                  </td>
+                  <td>
+                    <button
+                      className="archive-btn"
+                      onClick={() => toggleArchive(user._id, !!user.archived)}
+                    >
+                      {user.archived ? "Unarchive" : "Archive"}
+                    </button>
+                    &nbsp;
+                    <Link
+                      to={`/AdminUserProfile/${user._id}`}
+                      className="edit-btn"
+                    >
+                      Edit
+                    </Link>
+                  </td>
+                </tr>
+              ))
+            ) : (
+              <tr>
+                <td colSpan={7} className="center">
+                  No users found
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Pagination */}
+      {totalPages > 1 && (
+        <div className="pagination">
+          <button disabled={page === 1} onClick={() => setPage(page - 1)}>
+            Prev
+          </button>
+          <span>
+            Page {page} of {totalPages}
+          </span>
+          <button
+            disabled={page === totalPages}
+            onClick={() => setPage(page + 1)}
+          >
+            Next
+          </button>
+        </div>
+      )}
+
+      <Link to="/Admin" className="home-link">
+        Back Home
+      </Link>
+    </div>
+  );
+};
 
-export default AllUsers
\ No newline at end of file
+export default AllUsers;
diff --git a/client/src/containers/Admin/Users/UserProfile/UserProfile.tsx b/client/src/containers/Admin/Users/UserProfile/UserProfile.tsx
index d64cd2a..8c1dc57 100644
--- a/client/src/containers/Admin/Users/UserProfile/UserProfile.tsx
+++ b/client/src/containers/Admin/Users/UserProfile/UserProfile.tsx
@@ -1,229 +1,346 @@
-import React from "react";
-import Button from "react-bootstrap/Button"
-import { Link } from "react-router-dom";
+// import React from "react";
+// import Button from "react-bootstrap/Button"
+// import { Link } from "react-router-dom";
+
+// const UserProfile = () => {
+//   return (
+//     <>
+//       <div className="container" style={{ textAlign: "center" }}>
+//         <div className="row jumbotron">
+//           <div className="display-4" style={{ padding: "40px" }}>
+//             Profile Update
+//           </div>
+
+//           <form style={{ margin: "0 auto" }}>
+//             <div className="form-group">
+//               <div className="form-group">
+//                 <label htmlFor="exampleFormControlFile1">
+//                   Example file input
+//                 </label>
+//                 <input
+//                   type="file"
+//                   className="form-control-file"
+//                   id="exampleFormControlFile1"
+//                 />
+//               </div>
+//               <label htmlFor="exampleInputEmail1">Email address</label>
+//               <input
+//                 type="email"
+//                 className="form-control"
+//                 id="exampleInputEmail1"
+//                 aria-describedby="emailHelp"
+//                 placeholder="Enter email"
+//               />
+//               <small id="emailHelp" className="form-text text-muted">
+//                 We'll never share your email with anyone else.
+//               </small>
+//             </div>
+//             <div className="form-group">
+//               <label htmlFor="exampleInputPassword1">Password</label>
+//               <input
+//                 type="password"
+//                 className="form-control"
+//                 id="exampleInputPassword1"
+//                 placeholder="Password"
+//               />
+//             </div>
+//             <div className="form-group">
+//               <label htmlFor="exampleFormControlInput1">Email address</label>
+//               <input
+//                 type="email"
+//                 className="form-control"
+//                 id="exampleFormControlInput1"
+//                 placeholder="name@example.com"
+//               />
+//             </div>
+//             <div className="form-row">
+//               <div className="form-group col-md-6">
+//                 <label htmlFor="inputEmail4">Email</label>
+//                 <input
+//                   type="email"
+//                   className="form-control"
+//                   id="inputEmail4"
+//                   placeholder="Email"
+//                 />
+//               </div>
+//               <div className="form-group col-md-6">
+//                 <label htmlFor="inputPassword4">Password</label>
+//                 <input
+//                   type="password"
+//                   className="form-control"
+//                   id="inputPassword4"
+//                   placeholder="Password"
+//                 />
+//               </div>
+//             </div>
+//             <div className="form-group">
+//               <label htmlFor="inputAddress">Address</label>
+//               <input
+//                 type="text"
+//                 className="form-control"
+//                 id="inputAddress"
+//                 placeholder="1234 Main St"
+//               />
+//             </div>
+//             <div className="form-group">
+//               <label htmlFor="inputAddress2">Address 2</label>
+//               <input
+//                 type="text"
+//                 className="form-control"
+//                 id="inputAddress2"
+//                 placeholder="Apartment, studio, or floor"
+//               />
+//             </div>
+//             <div className="form-row">
+//               <div className="form-group col-md-6">
+//                 <label htmlFor="inputCity">City</label>
+//                 <input type="text" className="form-control" id="inputCity" />
+//               </div>
+//               <div className="form-group col-md-4">
+//                 <label htmlFor="inputState">State</label>
+//                 <select id="inputState" className="form-control">
+//                   <option selected>Choose...</option>
+//                   <option>...</option>
+//                 </select>
+//               </div>
+//               <div className="form-group col-md-2">
+//                 <label htmlFor="inputZip">Zip</label>
+//                 <input type="text" className="form-control" id="inputZip" />
+//               </div>
+//             </div>
+//             <div className="form-group">
+//               <div className="form-check">
+//                 <input
+//                   className="form-check-input"
+//                   type="checkbox"
+//                   id="gridCheck"
+//                 />
+//                 <label className="form-check-label" htmlFor="gridCheck">
+//                   Check me out
+//                 </label>
+//               </div>
+//             </div>
+//             <div className="form-check">
+//               <input
+//                 type="checkbox"
+//                 className="form-check-input"
+//                 id="exampleCheck1"
+//               />
+//               <label className="form-check-label" htmlFor="exampleCheck1">
+//                 Check me out
+//               </label>
+//             </div>
+//             <div className="form-check">
+//               <input
+//                 type="checkbox"
+//                 className="form-check-input"
+//                 id="exampleCheck1"
+//               />
+//               <label className="form-check-label" htmlFor="exampleCheck1">
+//                 Check me out
+//               </label>
+//             </div>
+//             <div className="form-check">
+//               <input
+//                 type="checkbox"
+//                 className="form-check-input"
+//                 id="exampleCheck1"
+//               />
+//               <label className="form-check-label" htmlFor="exampleCheck1">
+//                 Check me out
+//               </label>
+//             </div>
+//             <div className="form-check">
+//               <input
+//                 type="checkbox"
+//                 className="form-check-input"
+//                 id="exampleCheck1"
+//               />
+//               <label className="form-check-label" htmlFor="exampleCheck1">
+//                 Check me out
+//               </label>
+//             </div>
+//             <div className="form-check">
+//               <input
+//                 type="checkbox"
+//                 className="form-check-input"
+//                 id="exampleCheck1"
+//               />
+//               <label className="form-check-label" htmlFor="exampleCheck1">
+//                 Check me out
+//               </label>
+//             </div>
+//             <div className="form-group">
+//               <label htmlFor="exampleFormControlSelect1">Example select</label>
+//               <select className="form-control" id="exampleFormControlSelect1">
+//                 <option>1</option>
+//                 <option>2</option>
+//                 <option>3</option>
+//                 <option>4</option>
+//                 <option>5</option>
+//               </select>
+//             </div>
+//             <div className="form-group">
+//               <label htmlFor="exampleFormControlSelect2">
+//                 Example multiple select
+//               </label>
+//               <select
+//                 multiple
+//                 className="form-control"
+//                 id="exampleFormControlSelect2"
+//               >
+//                 <option>1</option>
+//                 <option>2</option>
+//                 <option>3</option>
+//                 <option>4</option>
+//                 <option>5</option>
+//               </select>
+//             </div>
+//             <div className="form-group">
+//               <label htmlFor="exampleFormControlTextarea1">
+//                 Example textarea
+//               </label>
+//               <textarea
+//                 className="form-control"
+//                 id="exampleFormControlTextarea1"
+//                 rows={3}
+//               ></textarea>
+//             </div>
+//             <div className="form-check">
+//               <input
+//                 type="checkbox"
+//                 className="form-check-input"
+//                 id="exampleCheck1"
+//               />
+//               <label className="form-check-label" htmlFor="exampleCheck1">
+//                 Check me out
+//               </label>
+//             </div>
+//             <Button type="submit" className="btn btn-primary">
+//               Submit
+//             </Button>
+//           </form>
+//         </div>
+//       </div>
+//       <Link to="/Admin">Home</Link>
+//     </>
+//   );
+// };
+
+// export default UserProfile;
+
+import React, { useEffect, useState } from "react";
+import { useParams, useNavigate, Link } from "react-router-dom";
+import axios from "axios";
+import Button from "react-bootstrap/Button";
+
+interface User {
+  email: string;
+  password?: string;
+  description?: string;
+}
+
+const UserProfile: React.FC = () => {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const [user, setUser] = useState<User>({ email: "", password: "", description: "" });
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
+
+  // Fetch user by ID
+  const fetchUser = async () => {
+    try {
+      const { data } = await axios.get(`/api/user/${id}`);
+      setUser(data);
+    } catch (err) {
+      setError("Failed to fetch user.");
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchUser();
+  }, [id]);
+
+  // Handle input changes
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const { name, value } = e.target;
+    setUser((prev) => ({ ...prev, [name]: value }));
+  };
+
+  // Handle form submit
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    try {
+      await axios.put(`/api/user/update/${id}`, {
+        email: user.email,
+        password: user.password,
+        description: user.description,
+      });
+      setSuccess(true);
+      setTimeout(() => navigate("/AllUsers"), 1000);
+    } catch (err) {
+      setError("Failed to update user.");
+      console.error(err);
+    }
+  };
+
+  if (loading) return <p>Loading user data...</p>;
 
-const UserProfile = () => {
   return (
-    <>
-      <div className="container" style={{ textAlign: "center" }}>
-        <div className="row jumbotron">
-          <div className="display-4" style={{ padding: "40px" }}>
-            Profile Update
-          </div>
-
-          <form style={{ margin: "0 auto" }}>
-            <div className="form-group">
-              <div className="form-group">
-                <label htmlFor="exampleFormControlFile1">
-                  Example file input
-                </label>
-                <input
-                  type="file"
-                  className="form-control-file"
-                  id="exampleFormControlFile1"
-                />
-              </div>
-              <label htmlFor="exampleInputEmail1">Email address</label>
-              <input
-                type="email"
-                className="form-control"
-                id="exampleInputEmail1"
-                aria-describedby="emailHelp"
-                placeholder="Enter email"
-              />
-              <small id="emailHelp" className="form-text text-muted">
-                We'll never share your email with anyone else.
-              </small>
-            </div>
-            <div className="form-group">
-              <label htmlFor="exampleInputPassword1">Password</label>
-              <input
-                type="password"
-                className="form-control"
-                id="exampleInputPassword1"
-                placeholder="Password"
-              />
-            </div>
-            <div className="form-group">
-              <label htmlFor="exampleFormControlInput1">Email address</label>
-              <input
-                type="email"
-                className="form-control"
-                id="exampleFormControlInput1"
-                placeholder="name@example.com"
-              />
-            </div>
-            <div className="form-row">
-              <div className="form-group col-md-6">
-                <label htmlFor="inputEmail4">Email</label>
-                <input
-                  type="email"
-                  className="form-control"
-                  id="inputEmail4"
-                  placeholder="Email"
-                />
-              </div>
-              <div className="form-group col-md-6">
-                <label htmlFor="inputPassword4">Password</label>
-                <input
-                  type="password"
-                  className="form-control"
-                  id="inputPassword4"
-                  placeholder="Password"
-                />
-              </div>
-            </div>
-            <div className="form-group">
-              <label htmlFor="inputAddress">Address</label>
-              <input
-                type="text"
-                className="form-control"
-                id="inputAddress"
-                placeholder="1234 Main St"
-              />
-            </div>
-            <div className="form-group">
-              <label htmlFor="inputAddress2">Address 2</label>
-              <input
-                type="text"
-                className="form-control"
-                id="inputAddress2"
-                placeholder="Apartment, studio, or floor"
-              />
-            </div>
-            <div className="form-row">
-              <div className="form-group col-md-6">
-                <label htmlFor="inputCity">City</label>
-                <input type="text" className="form-control" id="inputCity" />
-              </div>
-              <div className="form-group col-md-4">
-                <label htmlFor="inputState">State</label>
-                <select id="inputState" className="form-control">
-                  <option selected>Choose...</option>
-                  <option>...</option>
-                </select>
-              </div>
-              <div className="form-group col-md-2">
-                <label htmlFor="inputZip">Zip</label>
-                <input type="text" className="form-control" id="inputZip" />
-              </div>
-            </div>
-            <div className="form-group">
-              <div className="form-check">
-                <input
-                  className="form-check-input"
-                  type="checkbox"
-                  id="gridCheck"
-                />
-                <label className="form-check-label" htmlFor="gridCheck">
-                  Check me out
-                </label>
-              </div>
-            </div>
-            <div className="form-check">
-              <input
-                type="checkbox"
-                className="form-check-input"
-                id="exampleCheck1"
-              />
-              <label className="form-check-label" htmlFor="exampleCheck1">
-                Check me out
-              </label>
-            </div>
-            <div className="form-check">
-              <input
-                type="checkbox"
-                className="form-check-input"
-                id="exampleCheck1"
-              />
-              <label className="form-check-label" htmlFor="exampleCheck1">
-                Check me out
-              </label>
-            </div>
-            <div className="form-check">
-              <input
-                type="checkbox"
-                className="form-check-input"
-                id="exampleCheck1"
-              />
-              <label className="form-check-label" htmlFor="exampleCheck1">
-                Check me out
-              </label>
-            </div>
-            <div className="form-check">
-              <input
-                type="checkbox"
-                className="form-check-input"
-                id="exampleCheck1"
-              />
-              <label className="form-check-label" htmlFor="exampleCheck1">
-                Check me out
-              </label>
-            </div>
-            <div className="form-check">
-              <input
-                type="checkbox"
-                className="form-check-input"
-                id="exampleCheck1"
-              />
-              <label className="form-check-label" htmlFor="exampleCheck1">
-                Check me out
-              </label>
-            </div>
-            <div className="form-group">
-              <label htmlFor="exampleFormControlSelect1">Example select</label>
-              <select className="form-control" id="exampleFormControlSelect1">
-                <option>1</option>
-                <option>2</option>
-                <option>3</option>
-                <option>4</option>
-                <option>5</option>
-              </select>
-            </div>
-            <div className="form-group">
-              <label htmlFor="exampleFormControlSelect2">
-                Example multiple select
-              </label>
-              <select
-                multiple
-                className="form-control"
-                id="exampleFormControlSelect2"
-              >
-                <option>1</option>
-                <option>2</option>
-                <option>3</option>
-                <option>4</option>
-                <option>5</option>
-              </select>
-            </div>
-            <div className="form-group">
-              <label htmlFor="exampleFormControlTextarea1">
-                Example textarea
-              </label>
-              <textarea
-                className="form-control"
-                id="exampleFormControlTextarea1"
-                rows={3}
-              ></textarea>
-            </div>
-            <div className="form-check">
-              <input
-                type="checkbox"
-                className="form-check-input"
-                id="exampleCheck1"
-              />
-              <label className="form-check-label" htmlFor="exampleCheck1">
-                Check me out
-              </label>
-            </div>
-            <Button type="submit" className="btn btn-primary">
-              Submit
-            </Button>
-          </form>
+    <div className="container" style={{ maxWidth: 600, marginTop: 40 }}>
+      <h2>Update User</h2>
+      {error && <p style={{ color: "red" }}>{error}</p>}
+      {success && <p style={{ color: "green" }}>User updated successfully!</p>}
+
+      <form onSubmit={handleSubmit}>
+        <div className="form-group">
+          <label>Email</label>
+          <input
+            type="email"
+            name="email"
+            className="form-control"
+            value={user.email}
+            onChange={handleChange}
+            required
+          />
+        </div>
+
+        <div className="form-group">
+          <label>Password</label>
+          <input
+            type="password"
+            name="password"
+            className="form-control"
+            value={user.password}
+            onChange={handleChange}
+            placeholder="Enter new password"
+          />
         </div>
-      </div>
-      <Link to="/Admin">Home</Link>
-    </>
+
+        <div className="form-group">
+          <label>Description</label>
+          <textarea
+            name="description"
+            className="form-control"
+            value={user.description}
+            onChange={handleChange}
+            rows={3}
+          />
+        </div>
+
+        <Button type="submit" className="btn btn-primary">
+          Update User
+        </Button>
+      </form>
+
+      <Link to="/AllUsers" style={{ display: "block", marginTop: 20 }}>
+        Back to All Users
+      </Link>
+    </div>
   );
 };