diff --git a/core/components/Logo/index.tsx b/core/components/Logo/index.tsx
index 353f5172..c7b86988 100644
--- a/core/components/Logo/index.tsx
+++ b/core/components/Logo/index.tsx
@@ -6,7 +6,7 @@ const LogoSection = () => {
           <img
             alt="Botway Logo"
             src="https://cdn-botway.deno.dev/simple/logo-white.svg"
-            className="block w-56"
+            className="block w-72"
           />
         </div>
       </div>
diff --git a/core/supabase/auth/container/reset.tsx b/core/supabase/auth/container/reset.tsx
index 4246d130..56cbef59 100644
--- a/core/supabase/auth/container/reset.tsx
+++ b/core/supabase/auth/container/reset.tsx
@@ -41,12 +41,12 @@ const ResetPassword = () => {
 
   return (
     <Template>
-      <h2 className="text-xl font-medium md:text-2xl text-white">
+      <h2 className="text-xl font-farray font-medium md:text-2xl text-white">
         Reset Password
       </h2>
 
       <p className="text-sm font-medium pt-1 cursor-pointer">
-        <a onClick={() => setView(VIEWS.SIGN_IN)} className="text-blue-700">
+        <a onClick={() => setView(VIEWS.SIGN_IN)} className="text-blue-700 font-mono">
           Return to Sign In page
         </a>
       </p>
diff --git a/core/supabase/auth/container/sign-in.tsx b/core/supabase/auth/container/sign-in.tsx
index 27b5f4ef..dba59634 100644
--- a/core/supabase/auth/container/sign-in.tsx
+++ b/core/supabase/auth/container/sign-in.tsx
@@ -33,22 +33,22 @@ const SignIn = () => {
 
   return (
     <Template>
-      <h2 className="text-xl font-medium md:text-2xl text-white">
+      <h2 className="text-xl font-farray font-medium md:text-2xl text-white">
         Welcome to Botway
       </h2>
 
-      <p className="text-sm text-gray-500 font-medium pt-2 cursor-pointer">
+      <p className="text-[13px] md:text-sm text-gray-500 font-medium pt-2 cursor-pointer">
         Don't have an Account?{" "}
-        <a onClick={() => setView(VIEWS.SIGN_UP)} className="text-blue-700">
+        <a onClick={() => setView(VIEWS.SIGN_UP)} className="text-blue-700 font-mono">
           Sign up for an account
         </a>
       </p>
 
-      <p className="text-sm text-gray-500 font-medium pt-1.5 cursor-pointer">
+      <p className="text-[13px] md:text-sm text-gray-500 font-medium pt-1.5 cursor-pointer">
         Forget Password?{" "}
         <a
           onClick={() => setView(VIEWS.FORGOTTEN_PASSWORD)}
-          className="text-blue-700"
+          className="text-blue-700 font-mono"
         >
           Reset
         </a>
diff --git a/core/supabase/auth/container/sign-up.tsx b/core/supabase/auth/container/sign-up.tsx
index 67dffe64..cedcc891 100644
--- a/core/supabase/auth/container/sign-up.tsx
+++ b/core/supabase/auth/container/sign-up.tsx
@@ -76,14 +76,14 @@ const SignUp = () => {
 
   return (
     <Template>
-      <h2 className="text-xl font-medium md:text-2xl text-white">
-        Create a new Botway User
+      <h2 className="text-xl font-farray font-medium md:text-2xl text-white">
+        Create a new Account
       </h2>
 
       <p className="text-sm text-gray-500 font-medium pt-1 cursor-pointer">
         Already have an account?{" "}
-        <a onClick={() => setView(VIEWS.SIGN_IN)} className="text-blue-700">
-          Sign in.
+        <a onClick={() => setView(VIEWS.SIGN_IN)} className="text-blue-700 font-mono">
+          Sign in
         </a>
       </p>
 
diff --git a/core/supabase/auth/container/tmp.tsx b/core/supabase/auth/container/tmp.tsx
index f4285f55..c23e5042 100644
--- a/core/supabase/auth/container/tmp.tsx
+++ b/core/supabase/auth/container/tmp.tsx
@@ -7,12 +7,12 @@ const Template = ({ children }: { children: React.ReactNode }) => {
   return (
     <>
       <div className="block md:hidden">
-        <main className="flex flex-col place-content-center flex-row-reverse h-[90vh]">
+        <main className="flex flex-col place-content-center h-[90vh]">
           <LogoSection />
 
           <Toaster />
 
-          <section className="justify-center md:bg-grid-gray-800 px-6 md:px-0 md:flex md:w-2/3 md:border-r border-gray-800">
+          <section className="justify-center md:bg-grid-gray-800/[0.6] px-6 md:px-0 md:flex md:w-2/3 md:border-r border-gray-800">
             <div className="w-full max-w-sm py-4 mx-auto my-auto min-w-min md:py-9 md:w-7/12">
               {children}
             </div>
@@ -25,7 +25,7 @@ const Template = ({ children }: { children: React.ReactNode }) => {
 
           <Toaster />
 
-          <section className="justify-center md:bg-grid-gray-800 px-4 md:px-0 md:flex md:w-2/3 md:border-r border-gray-800">
+          <section className="justify-center md:bg-grid-gray-800/[0.6] px-4 md:px-0 md:flex md:w-2/3 md:border-r border-gray-800">
             <div className="w-full max-w-sm py-4 mx-auto my-auto min-w-min md:py-9 md:w-7/12">
               {children}
             </div>