diff --git a/client/src/Components/EditAccount/EditAccount.jsx b/client/src/Components/EditAccount/EditAccount.jsx
index 8ca67423..db0ed1d3 100644
--- a/client/src/Components/EditAccount/EditAccount.jsx
+++ b/client/src/Components/EditAccount/EditAccount.jsx
@@ -8,12 +8,11 @@ import ModalToggler from "../Modals/ModalToggler.jsx";
 import RegisterUserForm from "./RegisterUserForm.jsx";
 import usePublicUserStore from "../../store/user/public-user.store.js";
 import CloudinaryImageService from "../../service/asset/image.service.js";
-import "./EditAccount.css";
 
 const EditAccount = () => {
-  const publicUserStore = usePublicUserStore()
+  const publicUserStore = usePublicUserStore();
   const userData = JSON.parse(localStorage.getItem("userData"));
-  const entity = publicUserStore.getEntity()
+  const entity = publicUserStore.getEntity();
   const [editProfile, setEditProfileActive] = useState(false);
   const [newProfile, setNewProfile] = useState({
     userid: entity.userid ? entity.userid : "",
@@ -58,199 +57,185 @@ const EditAccount = () => {
   const handleImageChange = async (e) => {
     const file = e.target.files[0];
     let url;
-    if (!file)
-      return
+    if (!file) return;
 
-    const loadingToast = toast.loading('Saving image...');
+    const loadingToast = toast.loading("Saving image...");
     try {
-      const response = await CloudinaryImageService.uploadImage(file)
-      url = response.data.url
+      const response = await CloudinaryImageService.uploadImage(file);
+      url = response.data.url;
     } catch (err) {
       toast.dismiss(loadingToast);
-      console.log(err)
-      return
+      console.log(err);
+      return;
     }
 
     if (url) {
-      const publicUser = publicUserStore.getEntity()
-      await publicUserStore.updatePublicUser({ ...publicUser, profile_picture: url })
+      const publicUser = publicUserStore.getEntity();
+      await publicUserStore.updatePublicUser({
+        ...publicUser,
+        profile_picture: url,
+      });
     }
     toast.dismiss(loadingToast);
-    toast.success("Profile picture updated successfully", { autoClose: 500 })
+    toast.success("Profile picture updated successfully", { autoClose: 500 });
   };
 
-
   const handleSubmit = async (e) => {
     e.preventDefault();
     const status = await publicUserStore.updatePublicUser(newProfile);
     if (status) {
-      toast.success("Account updated successfully", { autoClose: 500 })
+      toast.success("Account updated successfully", { autoClose: 500 });
     }
   };
 
   return (
-    <div
-      className="min-h-screen flex flex-col justify-start items-center bg-profile-hero bg-cover bg-no-repeat
-      bg-center relative"
-    >
+    <div className="min-h-screen flex flex-col justify-center items-center bg-profile-hero bg-cover bg-no-repeat bg-center relative">
       {entity.role !== "public_user" && (
-        <div className={"absolute top-0 left-0"}>
+        <div className="absolute top-0 left-0">
           <button onClick={() => navigate(-1)}>
-            <MdKeyboardDoubleArrowLeft size={40}/>
+            <MdKeyboardDoubleArrowLeft size={40} />
           </button>
         </div>
       )}
-      <div className="flex flex-col flex-grow w-full justify-center">
-        <div
-          className="flex flex-row bg-white min-w-fit min-h-fit self-center overflow-hidden
-          border-none rounded-lg shadow-md"
+      <div className="flex flex-col w-full max-w-md justify-center items-center rounded-lg shadow-md bg-white">
+        <form
+          className="flex flex-col px-8 py-6 gap-4 w-full"
+          onSubmit={handleSubmit}
         >
-          <form
-            className="flex flex-col px-16 py-8 gap-8 w-full"
-            onSubmit={handleSubmit}
-          >
-            <h2 className="self-center font-inter font-bold text-3xl">
-              User Page
-            </h2>
-            <div className="flex items-center justify-center gap-16">
-              {/* Avatar Image */}
-              <div
-                className="relative rounded-full overflow-hidden w-32 h-32 bg-gray-200 flex items-center justify-center"
-                onMouseEnter={() => setIsHovering(true)}
-                onMouseLeave={() => setIsHovering(false)}
-              >
-                {publicUserStore.getEntity().profile_picture ? (
-                  <>
-                    <img
-                      src={publicUserStore.getEntity().profile_picture}
-                      alt="Uploaded"
-                      className="absolute top-0 left-0 w-full h-full object-cover"
-                    />
-                    <label
-                      htmlFor="imageInput"
-                      className={`absolute inset-0 z-10 flex items-center justify-center cursor-pointer ${
-                        isHovering ? "opacity-100" : "opacity-0"
-                      }`}
-                      style={{ transition: 'opacity 0.3s' }}
-                    >
-                      <p className="text-white text-center bg-black bg-opacity-50 px-2 py-1 rounded">Upload Image</p>
-                    </label>
-                    <input
-                      type="file"
-                      id="imageInput"
-                      accept="image/*"
-                      onChange={handleImageChange}
-                      className="hidden"
-                    />
-                  </>
+          <h2 className="self-center font-inter font-bold text-3xl">
+            User Page
+          </h2>
+          <div className="flex flex-col items-center justify-center gap-8">
+            {/* Avatar Image */}
+            <div className="relative rounded-full overflow-hidden w-32 h-32 bg-gray-200 flex items-center justify-center"
+              onMouseEnter={() => setIsHovering(true)}
+              onMouseLeave={() => setIsHovering(false)}>
+              {publicUserStore.getEntity().profile_picture ? (
+                <>
+                  <img
+                    src={publicUserStore.getEntity().profile_picture}
+                    alt="Uploaded"
+                    className="absolute top-0 left-0 w-full h-full object-cover"
+                  />
+                  <label
+                    htmlFor="imageInput"
+                    className={`absolute inset-0 z-10 flex items-center justify-center cursor-pointer ${
+                      isHovering ? "opacity-100" : "opacity-0"
+                    }`}
+                    style={{ transition: 'opacity 0.3s' }}
+                  >
+                    <p className="text-white text-center bg-black bg-opacity-50 px-2 py-1 rounded">Upload Image</p>
+                  </label>
+                  <input
+                    type="file"
+                    id="imageInput"
+                    accept="image/*"
+                    onChange={handleImageChange}
+                    className="hidden"
+                  />
+                </>
+              ) : (
+                <>
+                  <label
+                    htmlFor="imageInput"
+                    className="absolute inset-0 z-10 flex items-center justify-center cursor-pointer">
+                    <p className="text-white text-center bg-black bg-opacity-50 px-2 py-1 rounded">Upload Image</p>
+                  </label>
+                  <input
+                    type="file"
+                    id="imageInput"
+                    accept="image/*"
+                    onChange={handleImageChange}
+                    className="hidden"
+                  />
+                </>
+              )}
+            </div>
+            {/* Content of the form */}
+            <div className="flex flex-col min-w-[360px]">
+              <div className="flex justify-between">
+                <p className="font-bold">First name:</p>
+                {!editProfile ? (
+                  <p>{newProfile.first_name}</p>
                 ) : (
-                  <>
-                    <label htmlFor="imageInput"
-                           className={'absolute inset-0 z-10 flex items-center justify-center cursor-pointer'}>
-                      <p className="text-white text-center bg-black bg-opacity-50 px-2 py-1 rounded">Upload Image</p>
-                    </label>
-                    <input
-                      type="file"
-                      id="imageInput"
-                      accept="image/*"
-                      onChange={handleImageChange}
-                      className="hidden"
-                    />
-                  </>
+                  <input
+                    type="text"
+                    value={newProfile.first_name}
+                    onChange={handleFirstNameChange}
+                    name="first_name"
+                    className="border rounded p-1"
+                  />
                 )}
               </div>
-              {/* Content of the form */}
-              <div className="flex flex-col min-w-[360px]">
-                <div className="row justify-content-center">
-                  <div className="col-lg-5 col-sm-2 headers">
-                    <p>First name: </p>
-                    <p>Last name: </p>
-                    <p>Email: </p>
-                    <p>Current Plan: </p>
-                  </div>
-                  <div
-                    className={`col-lg-5 col-sm-4 information ${
-                      !editProfile ? "" : "editable"
-                    }`}
-                  >
-                    {!editProfile ? (
-                      <>
-                        <p>{newProfile.first_name}</p>
-                        <p>{newProfile.last_name}</p>
-                        <p>{newProfile.email}</p>
-                        <p>{entity.role}</p>
-                      </>
-                    ) : (
-                      <>
-                        <input
-                          type="text"
-                          value={newProfile.first_name}
-                          onChange={handleFirstNameChange}
-                          name="first_name"
-                        />
-                        <input
-                          type="text"
-                          value={newProfile.last_name}
-                          onChange={handleLastNameChange}
-                          name="last_name"
-                        />
-                        <input
-                          type="email"
-                          value={newProfile.email}
-                          onChange={handleEmailChange}
-                          name="email"
-                        />
-                        <p>{entity.role}</p>
-                      </>
-                    )}
-                  </div>
-                </div>
+              <div className="flex justify-between">
+                <p className="font-bold">Last name:</p>
+                {!editProfile ? (
+                  <p>{newProfile.last_name}</p>
+                ) : (
+                  <input
+                    type="text"
+                    value={newProfile.last_name}
+                    onChange={handleLastNameChange}
+                    name="last_name"
+                    className="border rounded p-1"
+                  />
+                )}
               </div>
-            </div>
-            <div className="row">
-              <div className="col-lg-12 editpage__buttons">
-                <button
-                  style={{ backgroundColor: "black", color: "white" }}
-                  onClick={() => setEditProfileActive(!editProfile)}
-                >
-                  Update Info
-                </button>
-                <button
-                  style={{ color: "white", backgroundColor: "black" }}
-                  onClick={() => setEditProfileActive(!editProfile)}
-                  type="submit"
-                >
-                  Done
-                </button>
-                <Modal>
-                  <ModalToggler>
-                    <button
-                      type={"button"}
-                      style={{ backgroundColor: "black", color: "white" }}
-                      onClick={(event) => {
-                        event.preventDefault()
-                        setEditProfileActive(!editProfile)
-                      }}
-                    >
-                      Activate Registration Key
-                    </button>
-                  </ModalToggler>
-                  <ModalContent
-                    title={"Account Activation"}
-                    description={
-                      "Enter the token you have been given by the company to activate your " +
-                      "account."
-                    }
-                  >
-                    <RegisterUserForm/>
-                  </ModalContent>
-                </Modal>
+              <div className="flex justify-between">
+                <p className="font-bold">Email:</p>
+                {!editProfile ? (
+                  <p>{newProfile.email}</p>
+                ) : (
+                  <input
+                    type="email"
+                    value={newProfile.email}
+                    onChange={handleEmailChange}
+                    name="email"
+                    className="border rounded p-1"
+                  />
+                )}
+              </div>
+              <div className="flex justify-between">
+                <p className="font-bold">Current Plan:</p>
+                <p>{entity.role}</p>
               </div>
             </div>
-          </form>
-        </div>
+          </div>
+          <div className="flex justify-center gap-4">
+            <button
+              className="bg-black text-white px-4 py-2 rounded"
+              onClick={() => setEditProfileActive(!editProfile)}
+            >
+              {editProfile ? "Cancel" : "Edit Profile"}
+            </button>
+            {editProfile && (
+              <button
+                className="bg-black text-white px-4 py-2 rounded"
+                type="submit"
+              >
+                Done
+              </button>
+            )}
+            <Modal>
+              <ModalToggler>
+                <button className="bg-black text-white px-4 py-2 rounded">
+                  Activate Registration Key
+                </button>
+              </ModalToggler>
+              <ModalContent
+                title="Account Activation"
+                description="Enter the token you have been given by the company to activate your account."
+              >
+                <RegisterUserForm />
+              </ModalContent>
+            </Modal>
+          </div>
+        </form>
       </div>
     </div>
   );
 };
+
 export default EditAccount;
+
+
diff --git a/client/src/Components/EditAccount/EditAccountCMC.jsx b/client/src/Components/EditAccount/EditAccountCMC.jsx
index efcc40e2..7d91ff25 100644
--- a/client/src/Components/EditAccount/EditAccountCMC.jsx
+++ b/client/src/Components/EditAccount/EditAccountCMC.jsx
@@ -1,4 +1,4 @@
-import  { useState } from "react";
+import { useState } from "react";
 import axios from "axios";
 import { Link } from "react-router-dom";
 import { MdKeyboardDoubleArrowLeft } from "react-icons/md";
@@ -85,77 +85,79 @@ const EditAccountCMC = () => {
   };
 
   return (
-    <div className="edit__account__home">
+    <div className="min-h-screen flex flex-col justify-center items-center bg-profile-hero bg-cover bg-no-repeat bg-center relative">
       <div>
         <Link to="/DashBoardHomeCMC">
           <MdKeyboardDoubleArrowLeft size={40} />
         </Link>
       </div>
-      <div className="body__container">
-        <div className="card__container">
-          <div className="container">
-            <form onSubmit={handleSubmit}>
-              <div className="col-lg-12 user__title">
-                <p>CMC Page</p>
-              </div>
-              <div className="row justify-content-center">
-                <div className="col-lg-8 col-sm-12">
-                  <div className="row justify-content-center">
-                    <div className="col-lg-5 col-sm-2 headers">
-                      <p>Name: </p>
-                      <p>Email: </p>
-                      <p>Current Plan: </p>
-                    </div>
-                    <div
-                      className={`col-lg-5 col-sm-4 information ${
-                        !editProfile ? "" : "editable"
-                      }`}
-                    >
-                      {!editProfile ? (
-                        <>
-                          <p>{newProfile.company_name}</p>
-                          <p>{newProfile.email}</p>
-                          <p>{currentPlan}</p>
-                        </>
-                      ) : (
-                        <>
-                          <input
-                            type="text"
-                            value={newProfile.company_name}
-                            onChange={handleNameChange}
-                            name="name"
-                          />
-                          <input
-                            type="email"
-                            value={newProfile.email}
-                            onChange={handleEmailChange}
-                            name="email"
-                          />
-                          <p>{currentPlan}</p>
-                        </>
-                      )}
+      <div className="edit__account__home bg-white shadow-md rounded-lg overflow-hidden w-full max-w-md">
+        <div className="body__container">
+          <div className="card__container">
+            <div className="container">
+              <form onSubmit={handleSubmit}>
+                <div className="col-lg-12 user__title flex justify-center">
+                  <p className="font-bold text-2xl">CMC Page</p>
+                </div>
+                <div className="row justify-content-center">
+                  <div className="col-lg-8 col-sm-12">
+                    <div className="row justify-content-center">
+                      <div className="col-lg-5 col-sm-2 headers">
+                        <p>Name: </p>
+                        <p>Email: </p>
+                        <p>Current Plan: </p>
+                      </div>
+                      <div
+                        className={`col-lg-5 col-sm-4 information ${
+                          !editProfile ? "" : "editable"
+                        }`}
+                      >
+                        {!editProfile ? (
+                          <>
+                            <p>{newProfile.company_name}</p>
+                            <p>{newProfile.email}</p>
+                            <p>{currentPlan}</p>
+                          </>
+                        ) : (
+                          <>
+                            <input
+                              type="text"
+                              value={newProfile.company_name}
+                              onChange={handleNameChange}
+                              name="name"
+                            />
+                            <input
+                              type="email"
+                              value={newProfile.email}
+                              onChange={handleEmailChange}
+                              name="email"
+                            />
+                            <p>{currentPlan}</p>
+                          </>
+                        )}
+                      </div>
                     </div>
                   </div>
                 </div>
-              </div>
-              <div className="row">
-                <div className="col-lg-12 editpage__buttons">
-                  <button
-                    style={{ backgroundColor: "black", color: "white" }}
-                    onClick={() => setEditProfileActive(!editProfile)}
-                  >
-                    Update Info
-                  </button>
-                  <button
-                    style={{ color: "white", backgroundColor: "black" }}
-                    onClick={() => setEditProfileActive(!editProfile)}
-                    type="submit"
-                  >
-                    Done
-                  </button>
+                <div className="row">
+                  <div className="col-lg-12 editpage__buttons">
+                    <button
+                      style={{ backgroundColor: "black", color: "white" }}
+                      onClick={() => setEditProfileActive(!editProfile)}
+                    >
+                      Update Info
+                    </button>
+                    <button
+                      style={{ color: "white", backgroundColor: "black" }}
+                      onClick={() => setEditProfileActive(!editProfile)}
+                      type="submit"
+                    >
+                      Done
+                    </button>
+                  </div>
                 </div>
-              </div>
-            </form>
+              </form>
+            </div>
           </div>
         </div>
       </div>
@@ -163,3 +165,5 @@ const EditAccountCMC = () => {
   );
 };
 export default EditAccountCMC;
+
+