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>