From 6a25eca01cddf02b30ac9fcbb5fc13fa2eeb2502 Mon Sep 17 00:00:00 2001
From: Mattias <mattias.rasmusson.1032@student.lu.se>
Date: Fri, 15 Mar 2024 14:16:11 +0100
Subject: [PATCH 1/6] Changed layout for register-component

---
 frontend/src/Components/Register.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/frontend/src/Components/Register.tsx b/frontend/src/Components/Register.tsx
index d0e3da6..e8d93c5 100644
--- a/frontend/src/Components/Register.tsx
+++ b/frontend/src/Components/Register.tsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { NewUser } from "../Types/Users";
 import { api } from "../API/API";
+import Logo from "../assets/Logo.svg";
 
 export default function Register(): JSX.Element {
   const [username, setUsername] = useState("");
@@ -12,16 +13,21 @@ export default function Register(): JSX.Element {
   };
 
   return (
-    <div>
-      <div className="w-full max-w-xs">
+    <div className="flex flex-col h-screen w-screen items-center justify-center">
+      <div className="border-4 border-black bg-white flex flex-col items-center justify-center h-fit w-fit rounded-3xl content-center pl-20 pr-20">
         <form
-          className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"
+          className="bg-white rounded px-8 pt-6 pb-8 mb-4 items-center justify-center flex flex-col w-fit h-fit"
           onSubmit={(e) => {
             e.preventDefault();
             void handleRegister();
           }}
         >
-          <h3 className="pb-2">Register new user</h3>
+          <img
+            src={Logo}
+            className="logo w-[7vw] mb-10 mt-10"
+            alt="TTIME Logo"
+          />
+          <h3 className="pb-2 text-center">Register new user</h3>
           <div className="mb-4">
             <label
               className="block text-gray-700 text-sm font-bold mb-2"

From a49cfc9f01e142e07bd81528378b179acece0e39 Mon Sep 17 00:00:00 2001
From: Davenludd <david.ludde01@gmail.com>
Date: Fri, 15 Mar 2024 14:30:45 +0100
Subject: [PATCH 2/6] Update button styles and add type prop

---
 frontend/src/Components/Button.tsx   | 3 +++
 frontend/src/Components/Register.tsx | 2 +-
 frontend/src/Pages/LoginPage.tsx     | 2 ++
 3 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/frontend/src/Components/Button.tsx b/frontend/src/Components/Button.tsx
index cf6a887..38a1853 100644
--- a/frontend/src/Components/Button.tsx
+++ b/frontend/src/Components/Button.tsx
@@ -1,14 +1,17 @@
 function Button({
   text,
   onClick,
+  type,
 }: {
   text: string;
   onClick: () => void;
+  type: "submit" | "button" | "reset";
 }): JSX.Element {
   return (
     <button
       onClick={onClick}
       className="inline-block py-1 px-8 font-bold bg-orange-500 text-white border-2 border-black rounded-full cursor-pointer mt-5 mb-5 transition-colors duration-10 hover:bg-orange-600 hover:text-gray-300 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 4vh;"
+      type={type}
     >
       {text}
     </button>
diff --git a/frontend/src/Components/Register.tsx b/frontend/src/Components/Register.tsx
index e8d93c5..c873a0e 100644
--- a/frontend/src/Components/Register.tsx
+++ b/frontend/src/Components/Register.tsx
@@ -66,7 +66,7 @@ export default function Register(): JSX.Element {
           </div>
           <div className="flex items-center justify-between">
             <button
-              className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
+              className="inline-block py-1 px-8 font-bold bg-orange-500 text-white border-2 border-black rounded-full cursor-pointer mt-5 mb-5 transition-colors duration-10 hover:bg-orange-600 hover:text-gray-300 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 4vh;"
               type="submit"
             >
               Register
diff --git a/frontend/src/Pages/LoginPage.tsx b/frontend/src/Pages/LoginPage.tsx
index b3a1579..fdce1bd 100644
--- a/frontend/src/Pages/LoginPage.tsx
+++ b/frontend/src/Pages/LoginPage.tsx
@@ -67,6 +67,7 @@ function LoginPage(): JSX.Element {
               onClick={(): void => {
                 return;
               }}
+              type="button"
             />
           </Link>
           <Link to="/register">
@@ -75,6 +76,7 @@ function LoginPage(): JSX.Element {
               onClick={(): void => {
                 return;
               }}
+              type="button"
             />
           </Link>
         </div>

From 855dccdfa4bb6a52b7f2d2257ac9b4e4dec3451f Mon Sep 17 00:00:00 2001
From: Davenludd <david.ludde01@gmail.com>
Date: Fri, 15 Mar 2024 14:30:53 +0100
Subject: [PATCH 3/6] Add type="button" to buttons

---
 frontend/src/Pages/UserPages/UserEditTimeReportPage.tsx  | 2 ++
 frontend/src/Pages/UserPages/UserNewTimeReportPage.tsx   | 2 ++
 frontend/src/Pages/UserPages/UserProjectPage.tsx         | 1 +
 frontend/src/Pages/UserPages/UserViewTimeReportsPage.tsx | 1 +
 4 files changed, 6 insertions(+)

diff --git a/frontend/src/Pages/UserPages/UserEditTimeReportPage.tsx b/frontend/src/Pages/UserPages/UserEditTimeReportPage.tsx
index de1699b..af3bbc1 100644
--- a/frontend/src/Pages/UserPages/UserEditTimeReportPage.tsx
+++ b/frontend/src/Pages/UserPages/UserEditTimeReportPage.tsx
@@ -17,12 +17,14 @@ function UserEditTimeReportPage(): JSX.Element {
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
       <Button
         text="Back"
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
     </>
   );
diff --git a/frontend/src/Pages/UserPages/UserNewTimeReportPage.tsx b/frontend/src/Pages/UserPages/UserNewTimeReportPage.tsx
index 8f96c4a..c93527a 100644
--- a/frontend/src/Pages/UserPages/UserNewTimeReportPage.tsx
+++ b/frontend/src/Pages/UserPages/UserNewTimeReportPage.tsx
@@ -18,6 +18,7 @@ function UserNewTimeReportPage(): JSX.Element {
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
       <Link to="/project">
         <Button
@@ -25,6 +26,7 @@ function UserNewTimeReportPage(): JSX.Element {
           onClick={(): void => {
             return;
           }}
+          type="button"
         />
       </Link>
     </>
diff --git a/frontend/src/Pages/UserPages/UserProjectPage.tsx b/frontend/src/Pages/UserPages/UserProjectPage.tsx
index cfb4a06..defd8dd 100644
--- a/frontend/src/Pages/UserPages/UserProjectPage.tsx
+++ b/frontend/src/Pages/UserPages/UserProjectPage.tsx
@@ -27,6 +27,7 @@ function UserProjectPage(): JSX.Element {
           onClick={(): void => {
             return;
           }}
+          type="button"
         />
       </Link>
     </>
diff --git a/frontend/src/Pages/UserPages/UserViewTimeReportsPage.tsx b/frontend/src/Pages/UserPages/UserViewTimeReportsPage.tsx
index b4fb365..c474288 100644
--- a/frontend/src/Pages/UserPages/UserViewTimeReportsPage.tsx
+++ b/frontend/src/Pages/UserPages/UserViewTimeReportsPage.tsx
@@ -11,6 +11,7 @@ function UserViewTimeReportsPage(): JSX.Element {
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
     </>
   );

From a16d1d8011bc522c60390ebb6406fd9dec309b55 Mon Sep 17 00:00:00 2001
From: Davenludd <david.ludde01@gmail.com>
Date: Fri, 15 Mar 2024 14:32:17 +0100
Subject: [PATCH 4/6] Add type="button" to buttons in PMChangeRole,
 PMOtherUsersTR, PMProjectMembers, PMProjectPage, PMTotalTimeActivity,
 PMTotalTimeRole, PMUnsignedReports, and PMViewUnsignedReport components

---
 frontend/src/Pages/ProjectManagerPages/PMChangeRole.tsx        | 2 ++
 frontend/src/Pages/ProjectManagerPages/PMOtherUsersTR.tsx      | 1 +
 frontend/src/Pages/ProjectManagerPages/PMProjectMembers.tsx    | 3 +++
 frontend/src/Pages/ProjectManagerPages/PMProjectPage.tsx       | 1 +
 frontend/src/Pages/ProjectManagerPages/PMTotalTimeActivity.tsx | 1 +
 frontend/src/Pages/ProjectManagerPages/PMTotalTimeRole.tsx     | 1 +
 frontend/src/Pages/ProjectManagerPages/PMUnsignedReports.tsx   | 1 +
 .../src/Pages/ProjectManagerPages/PMViewUnsignedReport.tsx     | 3 +++
 8 files changed, 13 insertions(+)

diff --git a/frontend/src/Pages/ProjectManagerPages/PMChangeRole.tsx b/frontend/src/Pages/ProjectManagerPages/PMChangeRole.tsx
index 6d87b90..bd800a7 100644
--- a/frontend/src/Pages/ProjectManagerPages/PMChangeRole.tsx
+++ b/frontend/src/Pages/ProjectManagerPages/PMChangeRole.tsx
@@ -11,12 +11,14 @@ function ChangeRole(): JSX.Element {
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
       <Button
         text="Back"
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
     </>
   );
diff --git a/frontend/src/Pages/ProjectManagerPages/PMOtherUsersTR.tsx b/frontend/src/Pages/ProjectManagerPages/PMOtherUsersTR.tsx
index 06d405b..fd11b1b 100644
--- a/frontend/src/Pages/ProjectManagerPages/PMOtherUsersTR.tsx
+++ b/frontend/src/Pages/ProjectManagerPages/PMOtherUsersTR.tsx
@@ -11,6 +11,7 @@ function PMOtherUsersTR(): JSX.Element {
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
     </>
   );
diff --git a/frontend/src/Pages/ProjectManagerPages/PMProjectMembers.tsx b/frontend/src/Pages/ProjectManagerPages/PMProjectMembers.tsx
index a198b8e..e67cd41 100644
--- a/frontend/src/Pages/ProjectManagerPages/PMProjectMembers.tsx
+++ b/frontend/src/Pages/ProjectManagerPages/PMProjectMembers.tsx
@@ -11,18 +11,21 @@ function PMProjectMembers(): JSX.Element {
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
       <Button
         text="Time / Role"
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
       <Button
         text="Back"
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
     </>
   );
diff --git a/frontend/src/Pages/ProjectManagerPages/PMProjectPage.tsx b/frontend/src/Pages/ProjectManagerPages/PMProjectPage.tsx
index 009a5bd..7441f17 100644
--- a/frontend/src/Pages/ProjectManagerPages/PMProjectPage.tsx
+++ b/frontend/src/Pages/ProjectManagerPages/PMProjectPage.tsx
@@ -29,6 +29,7 @@ function PMProjectPage(): JSX.Element {
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
     </>
   );
diff --git a/frontend/src/Pages/ProjectManagerPages/PMTotalTimeActivity.tsx b/frontend/src/Pages/ProjectManagerPages/PMTotalTimeActivity.tsx
index c36d2df..5ae5a4b 100644
--- a/frontend/src/Pages/ProjectManagerPages/PMTotalTimeActivity.tsx
+++ b/frontend/src/Pages/ProjectManagerPages/PMTotalTimeActivity.tsx
@@ -19,6 +19,7 @@ function PMTotalTimeActivity(): JSX.Element {
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
     </>
   );
diff --git a/frontend/src/Pages/ProjectManagerPages/PMTotalTimeRole.tsx b/frontend/src/Pages/ProjectManagerPages/PMTotalTimeRole.tsx
index f3b3c5a..4f28ea0 100644
--- a/frontend/src/Pages/ProjectManagerPages/PMTotalTimeRole.tsx
+++ b/frontend/src/Pages/ProjectManagerPages/PMTotalTimeRole.tsx
@@ -11,6 +11,7 @@ function PMTotalTimeRole(): JSX.Element {
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
     </>
   );
diff --git a/frontend/src/Pages/ProjectManagerPages/PMUnsignedReports.tsx b/frontend/src/Pages/ProjectManagerPages/PMUnsignedReports.tsx
index 1f4937f..d361f6d 100644
--- a/frontend/src/Pages/ProjectManagerPages/PMUnsignedReports.tsx
+++ b/frontend/src/Pages/ProjectManagerPages/PMUnsignedReports.tsx
@@ -11,6 +11,7 @@ function PMUnsignedReports(): JSX.Element {
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
     </>
   );
diff --git a/frontend/src/Pages/ProjectManagerPages/PMViewUnsignedReport.tsx b/frontend/src/Pages/ProjectManagerPages/PMViewUnsignedReport.tsx
index 923548f..8bf9143 100644
--- a/frontend/src/Pages/ProjectManagerPages/PMViewUnsignedReport.tsx
+++ b/frontend/src/Pages/ProjectManagerPages/PMViewUnsignedReport.tsx
@@ -19,18 +19,21 @@ function PMViewUnsignedReport(): JSX.Element {
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
       <Button
         text="Save"
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
       <Button
         text="Back"
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
     </>
   );

From a388109a8a05fd942b2699d74bcdd8add1631755 Mon Sep 17 00:00:00 2001
From: Davenludd <david.ludde01@gmail.com>
Date: Fri, 15 Mar 2024 14:34:08 +0100
Subject: [PATCH 5/6] Add type attribute to button elements in Admin Pages

---
 frontend/src/Pages/AdminPages/AdminAddProject.tsx            | 2 ++
 frontend/src/Pages/AdminPages/AdminAddUser.tsx               | 2 ++
 frontend/src/Pages/AdminPages/AdminChangeUsername.tsx        | 2 ++
 frontend/src/Pages/AdminPages/AdminManageProjects.tsx        | 2 ++
 frontend/src/Pages/AdminPages/AdminManageUsers.tsx           | 2 ++
 frontend/src/Pages/AdminPages/AdminProjectAddMember.tsx      | 2 ++
 frontend/src/Pages/AdminPages/AdminProjectChangeUserRole.tsx | 2 ++
 frontend/src/Pages/AdminPages/AdminProjectManageMembers.tsx  | 2 ++
 frontend/src/Pages/AdminPages/AdminProjectPage.tsx           | 2 ++
 frontend/src/Pages/AdminPages/AdminProjectStatistics.tsx     | 1 +
 frontend/src/Pages/AdminPages/AdminProjectViewMemberInfo.tsx | 2 ++
 frontend/src/Pages/AdminPages/AdminViewUserInfo.tsx          | 2 ++
 12 files changed, 23 insertions(+)

diff --git a/frontend/src/Pages/AdminPages/AdminAddProject.tsx b/frontend/src/Pages/AdminPages/AdminAddProject.tsx
index 9fd8bed..2922400 100644
--- a/frontend/src/Pages/AdminPages/AdminAddProject.tsx
+++ b/frontend/src/Pages/AdminPages/AdminAddProject.tsx
@@ -11,12 +11,14 @@ function AdminAddProject(): JSX.Element {
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
       <Button
         text="Back"
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
     </>
   );
diff --git a/frontend/src/Pages/AdminPages/AdminAddUser.tsx b/frontend/src/Pages/AdminPages/AdminAddUser.tsx
index a1337df..5e8c01f 100644
--- a/frontend/src/Pages/AdminPages/AdminAddUser.tsx
+++ b/frontend/src/Pages/AdminPages/AdminAddUser.tsx
@@ -11,12 +11,14 @@ function AdminAddUser(): JSX.Element {
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
       <Button
         text="Back"
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
     </>
   );
diff --git a/frontend/src/Pages/AdminPages/AdminChangeUsername.tsx b/frontend/src/Pages/AdminPages/AdminChangeUsername.tsx
index b8711cb..2e03a8c 100644
--- a/frontend/src/Pages/AdminPages/AdminChangeUsername.tsx
+++ b/frontend/src/Pages/AdminPages/AdminChangeUsername.tsx
@@ -11,12 +11,14 @@ function AdminChangeUsername(): JSX.Element {
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
       <Button
         text="Back"
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
     </>
   );
diff --git a/frontend/src/Pages/AdminPages/AdminManageProjects.tsx b/frontend/src/Pages/AdminPages/AdminManageProjects.tsx
index cfa0808..261dd4c 100644
--- a/frontend/src/Pages/AdminPages/AdminManageProjects.tsx
+++ b/frontend/src/Pages/AdminPages/AdminManageProjects.tsx
@@ -11,12 +11,14 @@ function AdminManageProjects(): JSX.Element {
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
       <Button
         text="Back"
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
     </>
   );
diff --git a/frontend/src/Pages/AdminPages/AdminManageUsers.tsx b/frontend/src/Pages/AdminPages/AdminManageUsers.tsx
index b25b120..cd38180 100644
--- a/frontend/src/Pages/AdminPages/AdminManageUsers.tsx
+++ b/frontend/src/Pages/AdminPages/AdminManageUsers.tsx
@@ -11,12 +11,14 @@ function AdminManageUsers(): JSX.Element {
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
       <Button
         text="Back"
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
     </>
   );
diff --git a/frontend/src/Pages/AdminPages/AdminProjectAddMember.tsx b/frontend/src/Pages/AdminPages/AdminProjectAddMember.tsx
index 97f570c..63fdb4b 100644
--- a/frontend/src/Pages/AdminPages/AdminProjectAddMember.tsx
+++ b/frontend/src/Pages/AdminPages/AdminProjectAddMember.tsx
@@ -11,12 +11,14 @@ function AdminProjectAddMember(): JSX.Element {
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
       <Button
         text="Back"
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
     </>
   );
diff --git a/frontend/src/Pages/AdminPages/AdminProjectChangeUserRole.tsx b/frontend/src/Pages/AdminPages/AdminProjectChangeUserRole.tsx
index 88df69c..dd80fa9 100644
--- a/frontend/src/Pages/AdminPages/AdminProjectChangeUserRole.tsx
+++ b/frontend/src/Pages/AdminPages/AdminProjectChangeUserRole.tsx
@@ -11,12 +11,14 @@ function AdminProjectChangeUserRole(): JSX.Element {
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
       <Button
         text="Back"
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
     </>
   );
diff --git a/frontend/src/Pages/AdminPages/AdminProjectManageMembers.tsx b/frontend/src/Pages/AdminPages/AdminProjectManageMembers.tsx
index 330cbe8..717e8c5 100644
--- a/frontend/src/Pages/AdminPages/AdminProjectManageMembers.tsx
+++ b/frontend/src/Pages/AdminPages/AdminProjectManageMembers.tsx
@@ -11,12 +11,14 @@ function AdminProjectManageMembers(): JSX.Element {
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
       <Button
         text="Back"
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
     </>
   );
diff --git a/frontend/src/Pages/AdminPages/AdminProjectPage.tsx b/frontend/src/Pages/AdminPages/AdminProjectPage.tsx
index 022dee3..0b15aeb 100644
--- a/frontend/src/Pages/AdminPages/AdminProjectPage.tsx
+++ b/frontend/src/Pages/AdminPages/AdminProjectPage.tsx
@@ -11,12 +11,14 @@ function AdminProjectPage(): JSX.Element {
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
       <Button
         text="Back"
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
     </>
   );
diff --git a/frontend/src/Pages/AdminPages/AdminProjectStatistics.tsx b/frontend/src/Pages/AdminPages/AdminProjectStatistics.tsx
index 1d21530..a5d9f95 100644
--- a/frontend/src/Pages/AdminPages/AdminProjectStatistics.tsx
+++ b/frontend/src/Pages/AdminPages/AdminProjectStatistics.tsx
@@ -11,6 +11,7 @@ function AdminProjectStatistics(): JSX.Element {
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
     </>
   );
diff --git a/frontend/src/Pages/AdminPages/AdminProjectViewMemberInfo.tsx b/frontend/src/Pages/AdminPages/AdminProjectViewMemberInfo.tsx
index 125282f..e15ef35 100644
--- a/frontend/src/Pages/AdminPages/AdminProjectViewMemberInfo.tsx
+++ b/frontend/src/Pages/AdminPages/AdminProjectViewMemberInfo.tsx
@@ -11,12 +11,14 @@ function AdminProjectViewMemberInfo(): JSX.Element {
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
       <Button
         text="Back"
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
     </>
   );
diff --git a/frontend/src/Pages/AdminPages/AdminViewUserInfo.tsx b/frontend/src/Pages/AdminPages/AdminViewUserInfo.tsx
index da17ca0..bbfdc8e 100644
--- a/frontend/src/Pages/AdminPages/AdminViewUserInfo.tsx
+++ b/frontend/src/Pages/AdminPages/AdminViewUserInfo.tsx
@@ -11,12 +11,14 @@ function AdminViewUserInfo(): JSX.Element {
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
       <Button
         text="Back"
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
     </>
   );

From 49209663886040d52fb7554e37c1523c8b6ffe94 Mon Sep 17 00:00:00 2001
From: Mattias <mattias.rasmusson.1032@student.lu.se>
Date: Fri, 15 Mar 2024 14:52:05 +0100
Subject: [PATCH 6/6] Additional register-layout changes

---
 frontend/src/Components/Register.tsx | 24 ++++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/frontend/src/Components/Register.tsx b/frontend/src/Components/Register.tsx
index c873a0e..e4a3ba0 100644
--- a/frontend/src/Components/Register.tsx
+++ b/frontend/src/Components/Register.tsx
@@ -2,6 +2,7 @@ import { useState } from "react";
 import { NewUser } from "../Types/Users";
 import { api } from "../API/API";
 import Logo from "../assets/Logo.svg";
+import Button from "./Button";
 
 export default function Register(): JSX.Element {
   const [username, setUsername] = useState("");
@@ -27,16 +28,18 @@ export default function Register(): JSX.Element {
             className="logo w-[7vw] mb-10 mt-10"
             alt="TTIME Logo"
           />
-          <h3 className="pb-2 text-center">Register new user</h3>
+          <h3 className="pb-4 mb-2 text-center font-bold text-[18px]">
+            Register New User
+          </h3>
           <div className="mb-4">
             <label
-              className="block text-gray-700 text-sm font-bold mb-2"
+              className="block text-gray-700 text-sm font-sans font-bold mb-2"
               htmlFor="username"
             >
               Username
             </label>
             <input
-              className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+              className="appearance-none border-2 border-black rounded-2xl w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
               id="username"
               type="text"
               placeholder="Username"
@@ -48,13 +51,13 @@ export default function Register(): JSX.Element {
           </div>
           <div className="mb-6">
             <label
-              className="block text-gray-700 text-sm font-bold mb-2"
+              className="block text-gray-700 text-sm font-sans font-bold mb-2"
               htmlFor="password"
             >
               Password
             </label>
             <input
-              className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline"
+              className="appearance-none border-2 border-black rounded-2xl w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
               id="password"
               type="password"
               placeholder="Choose your password"
@@ -65,12 +68,13 @@ export default function Register(): JSX.Element {
             />
           </div>
           <div className="flex items-center justify-between">
-            <button
-              className="inline-block py-1 px-8 font-bold bg-orange-500 text-white border-2 border-black rounded-full cursor-pointer mt-5 mb-5 transition-colors duration-10 hover:bg-orange-600 hover:text-gray-300 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 4vh;"
+            <Button
+              text="Register"
+              onClick={(): void => {
+                return;
+              }}
               type="submit"
-            >
-              Register
-            </button>
+            />
           </div>
         </form>
         <p className="text-center text-gray-500 text-xs"></p>