diff --git a/resources/logo.png b/resources/logo.png
index 4e9bc7d..d89c773 100644
Binary files a/resources/logo.png and b/resources/logo.png differ
diff --git a/web/public/logo.png b/web/public/logo.png
index 4e9bc7d..d89c773 100644
Binary files a/web/public/logo.png and b/web/public/logo.png differ
diff --git a/web/src/pages/SignIn.tsx b/web/src/pages/SignIn.tsx
index fe394dd..25e1ebd 100644
--- a/web/src/pages/SignIn.tsx
+++ b/web/src/pages/SignIn.tsx
@@ -6,7 +6,6 @@ import * as api from "../helpers/api";
 import { userService } from "../services";
 import { useAppSelector } from "../stores";
 import useLoading from "../hooks/useLoading";
-import Icon from "../components/Icon";
 
 const SignIn: React.FC = () => {
   const navigate = useNavigate();
@@ -59,12 +58,9 @@ const SignIn: React.FC = () => {
     <div className="flex flex-row justify-center items-center w-full h-screen bg-white">
       <div className="w-80 max-w-full h-full py-4 flex flex-col justify-start items-center">
         <div className="w-full py-4 grow flex flex-col justify-center items-center">
-          <div className="flex flex-row justify-start items-center w-full mb-4">
-            <img src="/logo.png" className="w-14 h-auto mr-1" alt="" />
-            <div className="text-3xl font-medium font-mono flex flex-row justify-start items-center">
-              Shortify
-              {actionBtnLoadingState.isLoading && <Icon.Loader className="ml-2 w-5 h-auto animate-spin" />}
-            </div>
+          <div className="flex flex-col justify-start items-center w-full gap-y-2 mb-4">
+            <img src="/logo.png" className="w-16 h-auto" alt="logo" />
+            <span className="text-2xl font-medium font-mono opacity-80">Shortify</span>
           </div>
           <form className="w-full" onSubmit={handleSigninBtnClick}>
             <div className={`flex flex-col justify-start items-start w-full ${actionBtnLoadingState.isLoading ? "opacity-80" : ""}`}>
@@ -88,6 +84,7 @@ const SignIn: React.FC = () => {
                 className="w-full"
                 type="submit"
                 color="primary"
+                loading={actionBtnLoadingState.isLoading}
                 disabled={actionBtnLoadingState.isLoading || !allowConfirm}
                 onClick={handleSigninBtnClick}
               >
diff --git a/web/src/pages/SignUp.tsx b/web/src/pages/SignUp.tsx
index 1ee6127..0d6f0ff 100644
--- a/web/src/pages/SignUp.tsx
+++ b/web/src/pages/SignUp.tsx
@@ -5,7 +5,6 @@ import { toast } from "react-hot-toast";
 import * as api from "../helpers/api";
 import { userService } from "../services";
 import useLoading from "../hooks/useLoading";
-import Icon from "../components/Icon";
 
 const SignUp: React.FC = () => {
   const navigate = useNavigate();
@@ -61,14 +60,11 @@ const SignUp: React.FC = () => {
     <div className="flex flex-row justify-center items-center w-full h-screen bg-white">
       <div className="w-80 max-w-full h-full py-4 flex flex-col justify-start items-center">
         <div className="w-full py-4 grow flex flex-col justify-center items-center">
-          <div className="flex flex-row justify-start items-center w-full mb-4">
-            <img src="/logo.png" className="w-14 h-auto mr-1" alt="" />
-            <div className="text-3xl font-medium font-mono flex flex-row justify-start items-center">
-              Shortify
-              {actionBtnLoadingState.isLoading && <Icon.Loader className="ml-2 w-5 h-auto animate-spin" />}
-            </div>
+          <div className="flex flex-col justify-start items-center w-full gap-y-2 mb-4">
+            <img src="/logo.png" className="w-16 h-auto" alt="logo" />
+            <span className="text-2xl font-medium font-mono opacity-80">Shortify</span>
           </div>
-          <p className="w-full mb-4 mt-2 text-2xl">Create your account</p>
+          <p className="w-full text-center mb-4 text-2xl">Create your account</p>
           <form className="w-full" onSubmit={handleSignupBtnClick}>
             <div className={`flex flex-col justify-start items-start w-full ${actionBtnLoadingState.isLoading ? "opacity-80" : ""}`}>
               <div className="w-full flex flex-col mb-2">
@@ -95,6 +91,7 @@ const SignUp: React.FC = () => {
                 className="w-full"
                 type="submit"
                 color="primary"
+                loading={actionBtnLoadingState.isLoading}
                 disabled={actionBtnLoadingState.isLoading || !allowConfirm}
                 onClick={handleSignupBtnClick}
               >