diff --git a/resources/logo-full.png b/resources/logo-full.png
new file mode 100644
index 00000000..7d8a2baf
Binary files /dev/null and b/resources/logo-full.png differ
diff --git a/resources/logo.png b/resources/logo.png
new file mode 100644
index 00000000..165553b5
Binary files /dev/null and b/resources/logo.png differ
diff --git a/web/public/favicon.svg b/web/public/favicon.svg
deleted file mode 100644
index 2978542b..00000000
--- a/web/public/favicon.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text x="0.1em" y=".9em" font-size="90">✍️</text></svg>
\ No newline at end of file
diff --git a/web/public/logo-full.png b/web/public/logo-full.png
new file mode 100644
index 00000000..7d8a2baf
Binary files /dev/null and b/web/public/logo-full.png differ
diff --git a/web/public/logo.png b/web/public/logo.png
index 22ae1e7f..165553b5 100644
Binary files a/web/public/logo.png and b/web/public/logo.png differ
diff --git a/web/src/less/auth.less b/web/src/less/auth.less
index 312f2921..8a818e02 100644
--- a/web/src/less/auth.less
+++ b/web/src/less/auth.less
@@ -13,14 +13,10 @@
         @apply flex flex-col justify-start items-start w-full mb-4;
 
         > .title-container {
-          @apply w-full flex flex-row justify-between items-center;
+          @apply w-full flex flex-row justify-between items-center mb-2;
 
-          > .title-text {
-            @apply text-2xl mb-2;
-
-            > .icon-text {
-              @apply text-4xl;
-            }
+          > .logo-img {
+            @apply h-16 w-auto;
           }
         }
 
@@ -61,7 +57,7 @@
         @apply flex flex-row justify-end items-center w-full mt-2;
 
         > .btn {
-          @apply px-1 py-2 text-sm rounded hover:opacity-80;
+          @apply flex flex-row justify-center items-center px-1 py-2 text-sm rounded hover:opacity-80;
 
           &.signin-btn {
             @apply bg-green-600 text-white px-3 shadow;
@@ -70,6 +66,10 @@
           &.requesting {
             @apply cursor-wait opacity-80;
           }
+
+          > .img-icon {
+            @apply w-4 h-auto mr-1 animate-spin;
+          }
         }
       }
 
diff --git a/web/src/pages/Auth.tsx b/web/src/pages/Auth.tsx
index bbea4787..f8127dc7 100644
--- a/web/src/pages/Auth.tsx
+++ b/web/src/pages/Auth.tsx
@@ -4,8 +4,9 @@ import { validate, ValidatorConfig } from "../helpers/validator";
 import useI18n from "../hooks/useI18n";
 import useLoading from "../hooks/useLoading";
 import { globalService, locationService, userService } from "../services";
+import Icon from "../components/Icon";
+import Only from "../components/common/OnlyWhen";
 import toastHelper from "../components/Toast";
-import GitHubBadge from "../components/GitHubBadge";
 import "../less/auth.less";
 
 interface Props {}
@@ -123,10 +124,7 @@ const Auth: React.FC<Props> = () => {
         <div className="auth-form-wrapper">
           <div className="page-header-container">
             <div className="title-container">
-              <p className="title-text">
-                <span className="icon-text">✍️</span> Memos
-              </p>
-              <GitHubBadge />
+              <img className="logo-img" src="/logo-full.png" alt="" />
             </div>
             <p className="slogan-text">{t("slogan")}</p>
           </div>
@@ -141,21 +139,17 @@ const Auth: React.FC<Props> = () => {
             </div>
           </div>
           <div className="action-btns-container">
-            {siteHost || pageLoadingState.isLoading ? (
+            <Only when={!pageLoadingState.isLoading}>
               <button
                 className={`btn signin-btn ${actionBtnLoadingState.isLoading ? "requesting" : ""}`}
-                onClick={() => handleSigninBtnsClick()}
+                onClick={() => (siteHost ? handleSigninBtnsClick() : handleSigninBtnsClick())}
               >
-                {t("common.sign-in")}
+                <Only when={actionBtnLoadingState.isLoading}>
+                  <Icon.Loader className="img-icon" />
+                </Only>
+                {siteHost ? t("common.sign-in") : t("auth.signup-as-host")}
               </button>
-            ) : (
-              <button
-                className={`btn signin-btn ${actionBtnLoadingState.isLoading ? "requesting" : ""}`}
-                onClick={() => handleSignUpAsHostBtnsClick()}
-              >
-                {t("auth.signup-as-host")}
-              </button>
-            )}
+            </Only>
           </div>
           <p className={`tip-text ${siteHost || pageLoadingState.isLoading ? "" : "host-tip"}`}>
             {siteHost || pageLoadingState.isLoading ? t("auth.not-host-tip") : t("auth.host-tip")}