diff --git a/scaffolds/nextjs-dedicated-wallet/scaffold.tsx b/scaffolds/nextjs-dedicated-wallet/scaffold.tsx
index da3851c..118155a 100644
--- a/scaffolds/nextjs-dedicated-wallet/scaffold.tsx
+++ b/scaffolds/nextjs-dedicated-wallet/scaffold.tsx
@@ -26,9 +26,12 @@ export default createScaffold<NextDedicatedWalletData>(
     >
       {(data) => (
         <>
-          <Template source="./public/background.svg" />
+          <Template source="./public/info.svg" />
+          <Template source="./public/link_white.svg" />
+          <Template source="./public/login_bg.png" />
+          <Template source="./public/logo.svg" />
+          <Template source="./public/redirect_bg.png" />
           <Template source="./public/favicon.ico" />
-          <Template source="./public/magic_color_white.svg" />
           <Template source="./public/link.svg" />
           <Template source="./.env.example" />
           <Template source="./.eslintrc.json" />
diff --git a/scaffolds/nextjs-dedicated-wallet/template/public/background.svg b/scaffolds/nextjs-dedicated-wallet/template/public/background.svg
deleted file mode 100644
index c611daa..0000000
--- a/scaffolds/nextjs-dedicated-wallet/template/public/background.svg
+++ /dev/null
@@ -1,32 +0,0 @@
-<svg preserveAspectRatio="none" viewBox="0 0 844 280" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_9511_133829)">
-<rect width="844" height="280" fill="#24163A"/>
-<g opacity="0.7">
-<path opacity="0.4" d="M623.509 93.4622L622.209 96.2932L623.509 99.1243L620.681 97.8225L617.854 99.1243L619.154 96.2932L617.854 93.4622L620.681 94.7639L623.509 93.4622Z" fill="white"/>
-<ellipse cx="735.376" cy="108.082" rx="2.63264" ry="2.63601" fill="#A799FF"/>
-<ellipse opacity="0.5" cx="231.157" cy="197.282" rx="2.63264" ry="2.63601" fill="#A799FF"/>
-<ellipse cx="230.974" cy="88.4298" rx="1.7131" ry="1.71528" transform="rotate(135 230.974 88.4298)" fill="#A799FF"/>
-<circle opacity="0.7" cx="774.406" cy="167.149" r="1.71528" fill="#90F0D3"/>
-<path d="M545.413 104.836L546.175 110.004L551.336 110.767L546.175 111.53L545.413 116.698L544.651 111.53L539.49 110.767L544.651 110.004L545.413 104.836Z" fill="#A799FF"/>
-<ellipse opacity="0.6" cx="138.868" cy="138.535" rx="1.71528" ry="1.71748" fill="#A799FF"/>
-</g>
-<g style="mix-blend-mode:color-dodge" opacity="0.4" filter="url(#filter0_f_9511_133829)">
-<circle cx="801.205" cy="380" r="296" fill="url(#paint0_linear_9511_133829)"/>
-</g>
-<path d="M102.381 157L103.288 165.808L112.096 166.715L103.288 167.622L102.381 176.43L101.475 167.622L92.6663 166.715L101.475 165.808L102.381 157Z" fill="#A799FF"/>
-</g>
-<defs>
-<filter id="filter0_f_9511_133829" x="305.205" y="-116" width="992" height="992" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="100" result="effect1_foregroundBlur_9511_133829"/>
-</filter>
-<linearGradient id="paint0_linear_9511_133829" x1="409.48" y1="179.725" x2="1097.2" y2="836.899" gradientUnits="userSpaceOnUse">
-<stop stop-color="#808CFF"/>
-<stop offset="1" stop-color="#FC63FF"/>
-</linearGradient>
-<clipPath id="clip0_9511_133829">
-<rect width="844" height="280" fill="white"/>
-</clipPath>
-</defs>
-</svg>
\ No newline at end of file
diff --git a/scaffolds/nextjs-dedicated-wallet/template/public/info.svg b/scaffolds/nextjs-dedicated-wallet/template/public/info.svg
new file mode 100644
index 0000000..df6edb9
--- /dev/null
+++ b/scaffolds/nextjs-dedicated-wallet/template/public/info.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.47581 2 2 6.51613 2 12C2 17.5242 6.47581 22 12 22C17.4839 22 22 17.5242 22 12C22 6.51613 17.4839 2 12 2ZM11.9999 6.19352C11.2741 6.19352 10.7096 6.79835 10.7096 7.48384C10.7096 8.20964 11.2741 8.77416 11.9999 8.77416C12.6854 8.77416 13.2903 8.20964 13.2903 7.48384C13.2903 6.79835 12.6854 6.19352 11.9999 6.19352ZM10.5483 15.8709C10.2661 15.8709 10.0645 16.1129 10.0645 16.3548V16.6774C10.0645 16.9596 10.2661 17.1613 10.5483 17.1613H13.4515C13.6935 17.1613 13.9354 16.9596 13.9354 16.6774V16.3548C13.9354 16.1129 13.6935 15.8709 13.4515 15.8709H12.9677V10.2258C12.9677 9.98384 12.7257 9.7419 12.4838 9.7419H10.5483C10.2661 9.7419 10.0645 9.98384 10.0645 10.2258V10.5484C10.0645 10.8306 10.2661 11.0322 10.5483 11.0322H11.0322V15.8709H10.5483Z" fill="#4E4D52"/>
+</svg>
\ No newline at end of file
diff --git a/scaffolds/nextjs-dedicated-wallet/template/public/link_white.svg b/scaffolds/nextjs-dedicated-wallet/template/public/link_white.svg
new file mode 100644
index 0000000..c87852b
--- /dev/null
+++ b/scaffolds/nextjs-dedicated-wallet/template/public/link_white.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.38889 6.33333C5.38889 6.08285 5.48839 5.84263 5.66551 5.66551C5.84263 5.48839 6.08285 5.38889 6.33333 5.38889H10.1111C10.3616 5.38889 10.6018 5.28938 10.7789 5.11227C10.9561 4.93515 11.0556 4.69493 11.0556 4.44444C11.0556 4.19396 10.9561 3.95374 10.7789 3.77662C10.6018 3.5995 10.3616 3.5 10.1111 3.5H6.33333C5.58189 3.5 4.86122 3.79851 4.32986 4.32986C3.79851 4.86122 3.5 5.58189 3.5 6.33333V17.6667C3.5 18.4181 3.79851 19.1388 4.32986 19.6701C4.86122 20.2015 5.58189 20.5 6.33333 20.5H17.6667C18.4181 20.5 19.1388 20.2015 19.6701 19.6701C20.2015 19.1388 20.5 18.4181 20.5 17.6667V13.8889C20.5 13.6384 20.4005 13.3982 20.2234 13.2211C20.0463 13.0439 19.806 12.9444 19.5556 12.9444C19.3051 12.9444 19.0648 13.0439 18.8877 13.2211C18.7106 13.3982 18.6111 13.6384 18.6111 13.8889V17.6667C18.6111 17.9171 18.5116 18.1574 18.3345 18.3345C18.1574 18.5116 17.9171 18.6111 17.6667 18.6111H6.33333C6.08285 18.6111 5.84263 18.5116 5.66551 18.3345C5.48839 18.1574 5.38889 17.9171 5.38889 17.6667V6.33333ZM14.8333 3.5C14.5829 3.5 14.3426 3.5995 14.1655 3.77662C13.9884 3.95374 13.8889 4.19396 13.8889 4.44444C13.8889 4.69493 13.9884 4.93515 14.1655 5.11227C14.3426 5.28938 14.5829 5.38889 14.8333 5.38889H17.2757L11.3323 11.3323C11.1602 11.5104 11.065 11.749 11.0672 11.9966C11.0693 12.2442 11.1687 12.4811 11.3438 12.6562C11.5189 12.8313 11.7558 12.9307 12.0034 12.9328C12.251 12.935 12.4896 12.8398 12.6677 12.6677L18.6111 6.72433V9.16667C18.6111 9.41715 18.7106 9.65737 18.8877 9.83449C19.0648 10.0116 19.3051 10.1111 19.5556 10.1111C19.806 10.1111 20.0463 10.0116 20.2234 9.83449C20.4005 9.65737 20.5 9.41715 20.5 9.16667V4.44444C20.5 4.19396 20.4005 3.95374 20.2234 3.77662C20.0463 3.5995 19.806 3.5 19.5556 3.5H14.8333Z" fill="#FFFFFF"/>
+</svg>
\ No newline at end of file
diff --git a/scaffolds/nextjs-dedicated-wallet/template/public/login_bg.png b/scaffolds/nextjs-dedicated-wallet/template/public/login_bg.png
new file mode 100644
index 0000000..a4021c4
Binary files /dev/null and b/scaffolds/nextjs-dedicated-wallet/template/public/login_bg.png differ
diff --git a/scaffolds/nextjs-dedicated-wallet/template/public/logo.svg b/scaffolds/nextjs-dedicated-wallet/template/public/logo.svg
new file mode 100644
index 0000000..e13da68
--- /dev/null
+++ b/scaffolds/nextjs-dedicated-wallet/template/public/logo.svg
@@ -0,0 +1,9 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Logo">
+<g id="Favicon">
+<path d="M16 0C17.461 1.69611 19.0723 3.27125 20.8148 4.70713C19.6537 8.27674 19.0287 12.0692 19.0287 16C19.0287 19.9308 19.6537 23.7233 20.8148 27.2929C19.0723 28.7288 17.461 30.3039 16 32C14.539 30.3039 12.9277 28.7287 11.1852 27.2929C12.3463 23.7233 12.9713 19.9308 12.9713 16C12.9713 12.0692 12.3463 8.27675 11.1852 4.70713C12.9277 3.27126 14.539 1.69612 16 0Z" fill="white"/>
+<path d="M7.85464 24.8249C6.01021 23.5995 4.05274 22.5166 2 21.5929C2.56942 19.8237 2.87573 17.9458 2.87573 16C2.87573 14.0542 2.56942 12.1763 2 10.4071C4.05273 9.48345 6.0102 8.40049 7.85464 7.17508C8.55991 10.0081 8.93309 12.9628 8.93309 16C8.93309 19.0372 8.55991 21.9919 7.85464 24.8249Z" fill="white"/>
+<path d="M23.0669 16C23.0669 19.0373 23.4401 21.9919 24.1454 24.8249C25.9898 23.5995 27.9473 22.5166 30 21.5929C29.4306 19.8237 29.1243 17.9458 29.1243 16C29.1243 14.0542 29.4306 12.1763 30 10.4071C27.9473 9.48345 25.9898 8.40049 24.1454 7.17507C23.4401 10.0081 23.0669 12.9628 23.0669 16Z" fill="white"/>
+</g>
+</g>
+</svg>
\ No newline at end of file
diff --git a/scaffolds/nextjs-dedicated-wallet/template/public/magic_color_white.svg b/scaffolds/nextjs-dedicated-wallet/template/public/magic_color_white.svg
deleted file mode 100644
index 3267c05..0000000
--- a/scaffolds/nextjs-dedicated-wallet/template/public/magic_color_white.svg
+++ /dev/null
@@ -1,34 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 25.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 832 300" style="enable-background:new 0 0 832 300;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
-	.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#6851FF;}
-</style>
-<path class="st0" d="M711.6,105.9c8.8,0,15.9-7.1,15.9-15.9S720.4,74,711.6,74c-8.8,0-15.9,7.1-15.9,15.9S702.8,105.9,711.6,105.9z
-	 M328.8,88h32.9l34.7,82.9h1.5L432.7,88h32.9v123.4h-25.9v-80.3h-1L406,210.8h-17.6l-32.6-80h-1v80.7h-25.9V88z M515.6,213.1
-	c-9,0-16.5-2.3-22.5-6.9c-6-4.6-8.9-11.5-8.9-20.7c0-6.9,1.7-12.3,5-16.3c3.3-3.9,7.7-6.8,13.1-8.6c5.4-1.8,11.3-3.1,17.5-3.6
-	c8.2-0.8,14.1-1.6,17.6-2.5c3.5-0.9,5.3-2.8,5.3-5.8v-0.4c0-3.8-1.2-6.8-3.7-8.9c-2.4-2.1-5.9-3.1-10.3-3.1c-4.7,0-8.5,1-11.3,3
-	s-4.6,4.6-5.5,7.7l-24.3-1.9c1.8-8.4,6.3-15.1,13.4-20.1c7.2-4.9,16.4-7.4,27.8-7.4c7,0,13.6,1.1,19.7,3.3c6.1,2.2,11,5.6,14.8,10.2
-	c3.8,4.6,5.7,10.5,5.7,17.9v62.4H544v-12.8h-0.7c-2.3,4.3-5.7,7.8-10.3,10.5C528.3,211.8,522.5,213.1,515.6,213.1z M523.1,195.4
-	c5.7,0,10.5-1.6,14.2-4.9c3.7-3.3,5.5-7.4,5.5-12.2v-9.8c-1,0.7-2.6,1.3-4.8,1.8c-2.1,0.5-4.4,1-6.9,1.4c-2.4,0.4-4.6,0.7-6.5,1
-	c-4.6,0.6-8.3,1.9-11.2,3.8c-2.8,1.9-4.2,4.6-4.2,8.3c0,3.5,1.3,6.2,3.9,8C515.7,194.5,519,195.4,523.1,195.4z M601.8,240.1
-	c7.3,4.9,17.3,7.4,30,7.4c9,0,17-1.3,24-4c6.9-2.7,12.4-6.6,16.3-11.8c4-5.2,6-11.7,6-19.3v-93.5H652v15.6h-1
-	c-1.2-2.5-2.8-5.1-5.1-7.7c-2.2-2.6-5.1-4.7-8.7-6.4c-3.6-1.8-8-2.7-13.3-2.7c-6.9,0-13.3,1.8-19.1,5.3c-5.8,3.5-10.5,8.7-14,15.7
-	c-3.5,7-5.2,15.8-5.2,26.3c0,10.2,1.7,18.7,5.1,25.4c3.5,6.7,8.1,11.6,13.9,14.9c5.8,3.3,12.3,4.9,19.4,4.9c7.6,0,13.5-1.5,17.9-4.6
-	c4.4-3.1,7.4-6.6,9.1-10.4h1.1v16.9c0,6.1-1.9,10.4-5.6,13.1c-3.7,2.7-8.4,4-14.1,4c-5.8,0-10.2-1-13.4-3.1c-3.1-2-5.2-4.3-6.2-6.8
-	l-24.3,3.2C590.1,229.2,594.6,235.2,601.8,240.1z M647,183.9c-3.5,4.6-8.3,6.9-14.7,6.9c-6.4,0-11.4-2.3-14.8-7
-	c-3.4-4.7-5.1-11-5.1-19c0-7.9,1.7-14.3,5.1-19.3c3.4-5,8.4-7.5,14.8-7.5c6.4,0,11.3,2.4,14.7,7.3c3.4,4.9,5.2,11.4,5.2,19.5
-	C652.3,173,650.5,179.3,647,183.9z M699,211.4v-92.6h26.2v92.6H699z M764,207.2c7,4,15.3,6,25,6c8.4,0,15.7-1.5,21.9-4.5
-	c6.2-3,11-7.2,14.5-12.6c3.5-5.4,5.5-11.6,5.9-18.7h-24.8c-0.8,4.9-2.7,8.8-5.8,11.5c-3.1,2.7-6.9,4-11.4,4c-6.1,0-11-2.4-14.7-7.2
-	c-3.7-4.9-5.5-11.7-5.5-20.6c0-8.8,1.8-15.5,5.5-20.3s8.6-7.2,14.7-7.2c4.8,0,8.7,1.4,11.6,4.3c3,2.8,4.8,6.5,5.5,11.2h24.8
-	c-0.4-7.2-2.4-13.4-6-18.7c-3.6-5.3-8.5-9.4-14.7-12.4c-6.2-2.9-13.4-4.4-21.7-4.4c-9.6,0-17.8,2-24.8,6.1
-	c-6.9,4-12.3,9.6-16.1,16.8c-3.7,7.2-5.6,15.5-5.6,25c0,9.4,1.8,17.6,5.5,24.8C751.7,197.5,757,203.1,764,207.2z"/>
-<path class="st1" d="M124.4,0c13,15.9,27.3,30.7,42.8,44.1c-10.3,33.5-15.9,69-15.9,105.9s5.6,72.4,15.9,105.9
-	c-15.5,13.5-29.8,28.2-42.8,44.1c-13-15.9-27.3-30.7-42.8-44.1c10.3-33.5,15.9-69,15.9-105.9c0-36.9-5.6-72.4-15.9-105.9
-	C97.1,30.7,111.4,15.9,124.4,0z M52,232.7c-16.4-11.5-33.8-21.6-52-30.3c5.1-16.6,7.8-34.2,7.8-52.4c0-18.2-2.7-35.8-7.8-52.4
-	c18.2-8.7,35.6-18.8,52-30.3c6.3,26.6,9.6,54.3,9.6,82.7C61.6,178.5,58.3,206.2,52,232.7z M187.2,150c0,28.5,3.3,56.2,9.6,82.7
-	c16.4-11.5,33.8-21.6,52-30.3c-5.1-16.6-7.8-34.2-7.8-52.4c0-18.2,2.7-35.8,7.8-52.4c-18.2-8.7-35.6-18.8-52-30.3
-	C190.5,93.8,187.2,121.5,187.2,150z"/>
-</svg>
diff --git a/scaffolds/nextjs-dedicated-wallet/template/public/redirect_bg.png b/scaffolds/nextjs-dedicated-wallet/template/public/redirect_bg.png
new file mode 100644
index 0000000..aa322ee
Binary files /dev/null and b/scaffolds/nextjs-dedicated-wallet/template/public/redirect_bg.png differ
diff --git a/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/Dashboard.tsx b/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/Dashboard.tsx
index c690b9b..4e02d36 100644
--- a/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/Dashboard.tsx
+++ b/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/Dashboard.tsx
@@ -11,13 +11,11 @@ export default function Dashboard({ token, setToken }: LoginProps) {
   return (
     <div className="home-page">
       <Header />
-      <Spacer size={32} />
-      <Spacer size={120} />
       <div className="cards-container">
-        <SendTransaction />
-        <Spacer size={10} />
         <UserInfo token={token} setToken={setToken} />
         <Spacer size={10} />
+        <SendTransaction />
+        <Spacer size={10} />
         <WalletMethods token={token} setToken={setToken} />
         <Spacer size={15} />
       </div>
diff --git a/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/Header.tsx b/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/Header.tsx
index ebe7cfc..a6e4012 100644
--- a/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/Header.tsx
+++ b/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/Header.tsx
@@ -1,11 +1,17 @@
 import Image from 'next/image';
-import MagicColorWhite from 'public/magic_color_white.svg';
+import Logo from 'public/logo.svg';
 import DevLinks from './DevLinks';
 
 const Header = () => {
   return (
     <div className="app-header-container">
-      <Image className="h-[180] w-[120px] m-2" src={MagicColorWhite} alt="logo" />
+      <div className="flex flex-col gap-2.5 items-center">
+        <Image src={Logo} alt="logo" />
+        <div className="text-center text-white text-xl font-extrabold font-['Inter'] leading-[30px]">Magic</div>
+        <div className="text-center text-white text-opacity-50 text-base font-normal font-['SF Mono'] leading-normal">
+          Demo
+        </div>
+      </div>
       <DevLinks />
     </div>
   );
diff --git a/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/Login.tsx b/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/Login.tsx
index 2516d62..9cac8d6 100644
--- a/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/Login.tsx
+++ b/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/Login.tsx
@@ -8,7 +8,7 @@ const Login = ({ token, setToken }: LoginProps) => {
   return (
     <div className="login-page">
       <Header />
-      <div className="login-method-grid">
+      <div className={`max-w-[100%] grid grid-cols-<%= Math.min(loginMethods.length, 3) %> grid-flow-row auto-rows-fr gap-5 p-4 mt-8`}>
       <% loginMethods.forEach(authType => { %>
       <% if (authType !== "Social Logins") { %>
         <%-`<${authType.replaceAll(' ', '')} token={token} setToken={setToken} />`-%>
diff --git a/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/MagicDashboardRedirect.tsx b/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/MagicDashboardRedirect.tsx
index 2225998..4c2cbed 100644
--- a/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/MagicDashboardRedirect.tsx
+++ b/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/MagicDashboardRedirect.tsx
@@ -1,6 +1,9 @@
 import React, { useCallback } from 'react';
-import Spacer from '../ui/Spacer';
 import DevLinks from './DevLinks';
+import Image from 'next/image';
+import Info from 'public/info.svg';
+import Link from 'public/link_white.svg';
+import Logo from 'public/logo.svg';
 
 const MagicDashboardRedirect = () => {
   const onClick = useCallback(() => {
@@ -9,18 +12,27 @@ const MagicDashboardRedirect = () => {
 
   return (
     <div className="redirect-container">
-      <Spacer size={32} />
-      <Spacer size={20} />
-      <div className="text-center">
-        <h3 className="max-w-[500px] text-center text-[#ffffffcc] text-xl font-normal m-0">
-          Please set your <code>NEXT_PUBLIC_MAGIC_API_KEY</code> environment variable in <code>.env</code>. You can get
-          your Magic API key from the Magic Dashboard.
-        </h3>
+      <div className="flex flex-col mt-10 gap-2.5 items-center">
+        <Image src={Logo} alt="logo" />
+        <div className="text-center text-white text-xl font-extrabold font-['Inter'] leading-[30px]">Magic</div>
+        <div className="text-center text-white text-opacity-50 text-base font-normal font-['SF Mono'] leading-normal">
+          Demo
+        </div>
       </div>
-      <Spacer size={32} />
-      <div className="text-center">
-        <button className="login-button min-w-[296px]" onClick={onClick}>
-          Go to Dashboard
+      <div className="flex flex-col items-center flex-1">
+        <div className="redirect-card">
+          <div className="flex gap-2 mx-4 my-2 ">
+            <Image src={Info} alt="logo" />
+            <h3 className="max-w-[480px] text-[#4E4D52] text-base font-normal">
+              Please set your <code>NEXT_PUBLIC_MAGIC_API_KEY</code> environment variable in <code>.env</code>. You can
+              get your Magic API key from the Magic Dashboard.
+            </h3>
+          </div>
+        </div>
+
+        <button className="api-button" onClick={onClick} disabled={false}>
+          Get API keys
+          <Image src={Link} alt="link-icon" className="ml-[6px] my-auto" />
         </button>
       </div>
       <DevLinks />
diff --git a/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Discord.tsx b/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Discord.tsx
index 489fafb..763aed7 100644
--- a/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Discord.tsx
+++ b/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Discord.tsx
@@ -55,18 +55,16 @@ const Discord = ({ token, setToken }: LoginProps) => {
         <Spinner />
       ) : (
         <div className="login-method-grid-item-container">
-          <div
-            className={classNames(
-              'login-method-grid-item-container m-2',
-              token.length > 0 ? 'cursor-default' : 'cursor-pointer',
-            )}
+          <button
+            className="social-login-button"
             onClick={() => {
               if (token.length == 0) login();
             }}
+            disabled={false}
           >
-            <Image src={discord} alt="Discord" height={24} width={24} />
-            <div className="text-xs font-semibold">Discord</div>
-          </div>
+            <Image src={discord} alt="Discord" height={24} width={24} className="mr-6" />
+            <div className="text-xs font-semibold text-center w-full">Continue with Discord</div>
+          </button>
         </div>
       )}
     </Card>
diff --git a/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/EmailOTP.tsx b/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/EmailOTP.tsx
index f1bae1c..662e77c 100644
--- a/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/EmailOTP.tsx
+++ b/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/EmailOTP.tsx
@@ -68,7 +68,7 @@ const EmailOTP = ({ token, setToken }: LoginProps) => {
           disabled={isLoginInProgress || (token.length > 0 ? false : email.length == 0)}
           onClick={() => handleLogin()}
         >
-          {isLoginInProgress ? <Spinner /> : 'Login'}
+          {isLoginInProgress ? <Spinner /> : 'Log in / Sign up'}
         </button>
       </div>
     </Card>
diff --git a/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Facebook.tsx b/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Facebook.tsx
index 4e9f1c0..17bd3a1 100644
--- a/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Facebook.tsx
+++ b/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Facebook.tsx
@@ -55,18 +55,16 @@ const Facebook = ({ token, setToken }: LoginProps) => {
         <Spinner />
       ) : (
         <div className="login-method-grid-item-container">
-          <div
-            className={classNames(
-              'login-method-grid-item-container m-2',
-              token.length > 0 ? 'cursor-default' : 'cursor-pointer',
-            )}
+          <button
+            className="social-login-button"
             onClick={() => {
               if (token.length == 0) login();
             }}
+            disabled={false}
           >
-            <Image src={facebook} alt="Facebook" height={24} width={24} />
-            <div className="text-xs font-semibold">Facebook</div>
-          </div>
+            <Image src={facebook} alt="Facebook" height={24} width={24} className="mr-6" />
+            <div className="text-xs font-semibold text-center w-full">Continue with Facebook</div>
+          </button>
         </div>
       )}
     </Card>
diff --git a/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Github.tsx b/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Github.tsx
index e527a3e..8004de7 100644
--- a/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Github.tsx
+++ b/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Github.tsx
@@ -55,18 +55,16 @@ const Github = ({ token, setToken }: LoginProps) => {
         <Spinner />
       ) : (
         <div className="login-method-grid-item-container">
-          <div
-            className={classNames(
-              'login-method-grid-item-container m-2',
-              token.length > 0 ? 'cursor-default' : 'cursor-pointer',
-            )}
+          <button
+            className="social-login-button"
             onClick={() => {
               if (token.length == 0) login();
             }}
+            disabled={false}
           >
-            <Image src={github} alt="Github" height={24} width={24} />
-            <div className="text-xs font-semibold">Github</div>
-          </div>
+            <Image src={github} alt="Github" height={24} width={24} className="mr-6" />
+            <div className="text-xs font-semibold text-center w-full">Continue with Github</div>
+          </button>
         </div>
       )}
     </Card>
diff --git a/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Google.tsx b/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Google.tsx
index 324e347..4dc8087 100644
--- a/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Google.tsx
+++ b/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Google.tsx
@@ -55,18 +55,16 @@ const Google = ({ token, setToken }: LoginProps) => {
         <Spinner />
       ) : (
         <div className="login-method-grid-item-container">
-          <div
-            className={classNames(
-              'login-method-grid-item-container m-2',
-              token.length > 0 ? 'cursor-default' : 'cursor-pointer',
-            )}
+          <button
+            className="social-login-button"
             onClick={() => {
               if (token.length == 0) login();
             }}
+            disabled={false}
           >
-            <Image src={google} alt="Google" height={24} width={24} />
-            <div className="text-xs font-semibold">Google</div>
-          </div>
+            <Image src={google} alt="Google" height={24} width={24} className="mr-6" />
+            <div className="text-xs font-semibold text-center w-full">Continue with Google</div>
+          </button>
         </div>
       )}
     </Card>
diff --git a/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/SMSOTP.tsx b/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/SMSOTP.tsx
index 68adc0c..2b3e474 100644
--- a/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/SMSOTP.tsx
+++ b/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/SMSOTP.tsx
@@ -74,7 +74,7 @@ const SMSOTP = ({ token, setToken }: LoginProps) => {
           disabled={isLoginInProgress || (token.length > 0 ? false : phone.length == 0)}
           onClick={() => handleLogin()}
         >
-          {isLoginInProgress ? <Spinner /> : 'Login'}
+          {isLoginInProgress ? <Spinner /> : 'Log in / Sign up'}
         </button>
       </div>
     </Card>
diff --git a/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Twitch.tsx b/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Twitch.tsx
index fe7af2c..8986ba7 100644
--- a/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Twitch.tsx
+++ b/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Twitch.tsx
@@ -55,18 +55,16 @@ const Twitch = ({ token, setToken }: LoginProps) => {
         <Spinner />
       ) : (
         <div className="login-method-grid-item-container">
-          <div
-            className={classNames(
-              'login-method-grid-item-container m-2',
-              token.length > 0 ? 'cursor-default' : 'cursor-pointer',
-            )}
+          <button
+            className="social-login-button"
             onClick={() => {
               if (token.length == 0) login();
             }}
+            disabled={false}
           >
-            <Image src={twitch} alt="Twitch" height={24} width={24} />
-            <div className="text-xs font-semibold">Twitch</div>
-          </div>
+            <Image src={twitch} alt="Twitch" height={24} width={24} className="mr-6" />
+            <div className="text-xs font-semibold text-center w-full">Continue with Twitch</div>
+          </button>
         </div>
       )}
     </Card>
diff --git a/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Twitter.tsx b/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Twitter.tsx
index a7c12e3..f90a7a2 100644
--- a/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Twitter.tsx
+++ b/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Twitter.tsx
@@ -55,18 +55,16 @@ const Twitter = ({ token, setToken }: LoginProps) => {
         <Spinner />
       ) : (
         <div className="login-method-grid-item-container">
-          <div
-            className={classNames(
-              'login-method-grid-item-container m-2',
-              token.length > 0 ? 'cursor-default' : 'cursor-pointer',
-            )}
+          <button
+            className="social-login-button"
             onClick={() => {
               if (token.length == 0) login();
             }}
+            disabled={false}
           >
-            <Image src={twitter} alt="Twitter" height={24} width={24} />
-            <div className="text-xs font-semibold">Twitter</div>
-          </div>
+            <Image src={twitter} alt="Twitter" height={24} width={24} className="mr-6" />
+            <div className="text-xs font-semibold text-center w-full">Continue with Twitter</div>
+          </button>
         </div>
       )}
     </Card>
diff --git a/scaffolds/nextjs-dedicated-wallet/template/src/styles/globals.css b/scaffolds/nextjs-dedicated-wallet/template/src/styles/globals.css
index 83bde73..7222af2 100644
--- a/scaffolds/nextjs-dedicated-wallet/template/src/styles/globals.css
+++ b/scaffolds/nextjs-dedicated-wallet/template/src/styles/globals.css
@@ -47,7 +47,7 @@ ul {
 }
 
 .nft-name {
-  @apply text-black font-semibold;
+  @apply font-semibold text-black;
   font-family: 'Inter';
 }
 
@@ -60,7 +60,7 @@ ul {
 }
 
 .cards-container {
-  @apply mt-[-250px] relative;
+  @apply relative top-[30px] md:top-[-60px] lg:top-[-60px];
 }
 
 @media only screen and (max-width: 767px) {
@@ -70,7 +70,7 @@ ul {
 }
 
 .network-dropdown {
-  @apply w-fit m-auto rounded-xl;
+  @apply m-auto w-fit rounded-xl;
 }
 
 .active-network {
@@ -116,7 +116,7 @@ ul {
   @apply flex flex-col items-center min-h-screen bg-gray-300;
 }
 .login-method-grid {
-  @apply w-[100%] grid grid-cols-4 gap-5 p-4;
+  @apply max-w-[100%] grid-rows-3 gap-5 p-4 mt-8;
 }
 
 .login-method-grid-item-container {
@@ -125,7 +125,7 @@ ul {
 
 .login-button {
   @apply w-full h-12 text-white font-semibold text-base leading-6 transition-[0.1s] text-center transition-[0.1s] m-auto px-2 py-3 rounded-[300px] border-[none];
-  background: #a799ff;
+  background: #8271f3;
 }
 
 .login-button:disabled {
@@ -142,7 +142,7 @@ ul {
 }
 
 .links {
-  @apply flex justify-center text-white font-semibold mt-5 mb-3 mx-auto;
+  @apply flex justify-center mx-auto mt-5 text-sm mb-3 font-semibold text-white;
 }
 .link {
   @apply transition-[0.1s] px-[30px] py-0;
@@ -163,7 +163,7 @@ ul {
   @apply cursor-pointer;
 }
 .link-divider {
-  @apply h-5 w-px;
+  @apply w-px h-5;
 }
 
 .footer-links {
@@ -221,7 +221,7 @@ ul {
   @apply w-[50px] text-center flex items-center justify-center cursor-default;
 }
 .loading {
-  @apply animate-spin cursor-default;
+  @apply cursor-default animate-spin;
 }
 
 @keyframes rotation {
@@ -234,18 +234,18 @@ ul {
 }
 
 .card {
-  @apply w-[300px] flex flex-col shadow-[0px_4px_24px_rgba(49,49,49,0.1)] mt-0 mb-[27px] mx-auto px-6 py-8 rounded-2xl bg-[#ffffff];
+  @apply w-[344px] flex flex-col shadow-[0px_4px_24px_rgba(49,49,49,0.1)] mt-0 mb-[27px] mx-auto px-6 py-8 rounded-2xl bg-[#ffffff];
 }
 
 .card-header {
   @apply text-xl font-semibold text-left mt-0 mb-[25px];
 }
 .card-label-container {
-  @apply flex justify-between items-center mb-3;
+  @apply flex items-center justify-between mb-3;
 }
 
 .card-label {
-  @apply text-sm font-medium  cursor-pointer;
+  @apply text-sm font-medium cursor-pointer;
 }
 .toast {
   @apply fixed w-fit text-white font-medium shadow-[4px_8px_20px_rgba(0,0,0,0.15)] mx-auto my-0 px-4 py-2 rounded-[10px] top-[30px] inset-x-0 bg-[#00875f];
@@ -291,10 +291,35 @@ a {
 }
 
 .app-header-container {
-  @apply block pt-4 w-full drop-shadow-[0_35px_35px_rgba(0,0,0,0.25)] min-h-[30vh] flex flex-col items-center bg-magic block;
+  @apply block w-full drop-shadow-[0_35px_35px_rgba(0,0,0,0.25)] min-h-[40%] flex-col gap-2.5 p-8 items-center bg-[url('/login_bg.png')] bg-cover bg-no-repeat pb-20;
   text-align: -webkit-center;
 }
 
 .redirect-container {
-  @apply flex flex-col items-center min-h-screen bg-[length:100%_auto] bg-[url('/background.svg')];
+  @apply flex flex-col items-center h-screen bg-center bg-cover bg-no-repeat bg-[url('/redirect_bg.png')];
+}
+
+.redirect-card {
+  @apply bg-[#F8F8FA] rounded-[10px] shadow-[0px_4px_24px_rgba(49,49,49,0.1)] p-2 m-12;
+}
+
+.social-login-button {
+  @apply flex flex-row min-w-[296px] h-12 text-[#3C4043] transition-[0.1s] px-6 py-3 rounded-[300px] bg-[#ffffff] border-2 border-[#DADCE0] relative top-16;
+}
+
+.social-login-button:disabled {
+  @apply opacity-50;
+}
+
+.social-login-button:hover:enabled {
+  @apply cursor-pointer;
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)), #ffffff;
+}
+.social-login-button:active:enabled {
+  @apply opacity-50 scale-[0.99];
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)), #ffffff;
+}
+
+.api-button {
+  @apply bg-[#6844bc] text-[#FFFFFF] flex w-[280px] justify-center items-center h-12 font-semibold text-base leading-6 transition-[0.1s] px-6 py-3 rounded-[300px] border-[none];
 }
diff --git a/scaffolds/nextjs-dedicated-wallet/template/tailwind.config.js b/scaffolds/nextjs-dedicated-wallet/template/tailwind.config.js
index 1da1a7e..0fc0404 100644
--- a/scaffolds/nextjs-dedicated-wallet/template/tailwind.config.js
+++ b/scaffolds/nextjs-dedicated-wallet/template/tailwind.config.js
@@ -1,19 +1,17 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-	content: [
-		'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
-		'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
-		'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
-	],
-	theme: {
-		extend: {
-			backgroundImage: {
-				magic: "url('../../public//background.svg')",
-				'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-				'gradient-conic':
-					'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
-			},
-		},
-	},
-	plugins: [],
-}
+  content: [
+    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+        'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+      },
+    },
+  },
+  plugins: [],
+};
diff --git a/scaffolds/nextjs-flow-dedicated-wallet/scaffold.tsx b/scaffolds/nextjs-flow-dedicated-wallet/scaffold.tsx
index 789184f..b581920 100644
--- a/scaffolds/nextjs-flow-dedicated-wallet/scaffold.tsx
+++ b/scaffolds/nextjs-flow-dedicated-wallet/scaffold.tsx
@@ -10,10 +10,13 @@ export default createScaffold<NextDedicatedWalletData>(
     <Zombi {...props} prompts={mergePrompts(AuthTypePrompt.questions, PublishableApiKeyPrompt.questions)}>
       {(data) => (
         <>
-          <Template source="./public/background.svg" />
-          <Template source="./public/link.svg" />
+          <Template source="./public/info.svg" />
+          <Template source="./public/link_white.svg" />
+          <Template source="./public/login_bg.png" />
+          <Template source="./public/logo.svg" />
+          <Template source="./public/redirect_bg.png" />
           <Template source="./public/favicon.ico" />
-          <Template source="./public/magic_color_white.svg" />
+          <Template source="./public/link.svg" />
           <Template source="./.env.example" />
           <Template source="./.eslintrc.json" />
           <Template source="./.gitignore" />
diff --git a/scaffolds/nextjs-flow-dedicated-wallet/template/public/background.svg b/scaffolds/nextjs-flow-dedicated-wallet/template/public/background.svg
deleted file mode 100644
index c611daa..0000000
--- a/scaffolds/nextjs-flow-dedicated-wallet/template/public/background.svg
+++ /dev/null
@@ -1,32 +0,0 @@
-<svg preserveAspectRatio="none" viewBox="0 0 844 280" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_9511_133829)">
-<rect width="844" height="280" fill="#24163A"/>
-<g opacity="0.7">
-<path opacity="0.4" d="M623.509 93.4622L622.209 96.2932L623.509 99.1243L620.681 97.8225L617.854 99.1243L619.154 96.2932L617.854 93.4622L620.681 94.7639L623.509 93.4622Z" fill="white"/>
-<ellipse cx="735.376" cy="108.082" rx="2.63264" ry="2.63601" fill="#A799FF"/>
-<ellipse opacity="0.5" cx="231.157" cy="197.282" rx="2.63264" ry="2.63601" fill="#A799FF"/>
-<ellipse cx="230.974" cy="88.4298" rx="1.7131" ry="1.71528" transform="rotate(135 230.974 88.4298)" fill="#A799FF"/>
-<circle opacity="0.7" cx="774.406" cy="167.149" r="1.71528" fill="#90F0D3"/>
-<path d="M545.413 104.836L546.175 110.004L551.336 110.767L546.175 111.53L545.413 116.698L544.651 111.53L539.49 110.767L544.651 110.004L545.413 104.836Z" fill="#A799FF"/>
-<ellipse opacity="0.6" cx="138.868" cy="138.535" rx="1.71528" ry="1.71748" fill="#A799FF"/>
-</g>
-<g style="mix-blend-mode:color-dodge" opacity="0.4" filter="url(#filter0_f_9511_133829)">
-<circle cx="801.205" cy="380" r="296" fill="url(#paint0_linear_9511_133829)"/>
-</g>
-<path d="M102.381 157L103.288 165.808L112.096 166.715L103.288 167.622L102.381 176.43L101.475 167.622L92.6663 166.715L101.475 165.808L102.381 157Z" fill="#A799FF"/>
-</g>
-<defs>
-<filter id="filter0_f_9511_133829" x="305.205" y="-116" width="992" height="992" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="100" result="effect1_foregroundBlur_9511_133829"/>
-</filter>
-<linearGradient id="paint0_linear_9511_133829" x1="409.48" y1="179.725" x2="1097.2" y2="836.899" gradientUnits="userSpaceOnUse">
-<stop stop-color="#808CFF"/>
-<stop offset="1" stop-color="#FC63FF"/>
-</linearGradient>
-<clipPath id="clip0_9511_133829">
-<rect width="844" height="280" fill="white"/>
-</clipPath>
-</defs>
-</svg>
\ No newline at end of file
diff --git a/scaffolds/nextjs-flow-dedicated-wallet/template/public/info.svg b/scaffolds/nextjs-flow-dedicated-wallet/template/public/info.svg
new file mode 100644
index 0000000..df6edb9
--- /dev/null
+++ b/scaffolds/nextjs-flow-dedicated-wallet/template/public/info.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.47581 2 2 6.51613 2 12C2 17.5242 6.47581 22 12 22C17.4839 22 22 17.5242 22 12C22 6.51613 17.4839 2 12 2ZM11.9999 6.19352C11.2741 6.19352 10.7096 6.79835 10.7096 7.48384C10.7096 8.20964 11.2741 8.77416 11.9999 8.77416C12.6854 8.77416 13.2903 8.20964 13.2903 7.48384C13.2903 6.79835 12.6854 6.19352 11.9999 6.19352ZM10.5483 15.8709C10.2661 15.8709 10.0645 16.1129 10.0645 16.3548V16.6774C10.0645 16.9596 10.2661 17.1613 10.5483 17.1613H13.4515C13.6935 17.1613 13.9354 16.9596 13.9354 16.6774V16.3548C13.9354 16.1129 13.6935 15.8709 13.4515 15.8709H12.9677V10.2258C12.9677 9.98384 12.7257 9.7419 12.4838 9.7419H10.5483C10.2661 9.7419 10.0645 9.98384 10.0645 10.2258V10.5484C10.0645 10.8306 10.2661 11.0322 10.5483 11.0322H11.0322V15.8709H10.5483Z" fill="#4E4D52"/>
+</svg>
\ No newline at end of file
diff --git a/scaffolds/nextjs-flow-dedicated-wallet/template/public/link_white.svg b/scaffolds/nextjs-flow-dedicated-wallet/template/public/link_white.svg
new file mode 100644
index 0000000..c87852b
--- /dev/null
+++ b/scaffolds/nextjs-flow-dedicated-wallet/template/public/link_white.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.38889 6.33333C5.38889 6.08285 5.48839 5.84263 5.66551 5.66551C5.84263 5.48839 6.08285 5.38889 6.33333 5.38889H10.1111C10.3616 5.38889 10.6018 5.28938 10.7789 5.11227C10.9561 4.93515 11.0556 4.69493 11.0556 4.44444C11.0556 4.19396 10.9561 3.95374 10.7789 3.77662C10.6018 3.5995 10.3616 3.5 10.1111 3.5H6.33333C5.58189 3.5 4.86122 3.79851 4.32986 4.32986C3.79851 4.86122 3.5 5.58189 3.5 6.33333V17.6667C3.5 18.4181 3.79851 19.1388 4.32986 19.6701C4.86122 20.2015 5.58189 20.5 6.33333 20.5H17.6667C18.4181 20.5 19.1388 20.2015 19.6701 19.6701C20.2015 19.1388 20.5 18.4181 20.5 17.6667V13.8889C20.5 13.6384 20.4005 13.3982 20.2234 13.2211C20.0463 13.0439 19.806 12.9444 19.5556 12.9444C19.3051 12.9444 19.0648 13.0439 18.8877 13.2211C18.7106 13.3982 18.6111 13.6384 18.6111 13.8889V17.6667C18.6111 17.9171 18.5116 18.1574 18.3345 18.3345C18.1574 18.5116 17.9171 18.6111 17.6667 18.6111H6.33333C6.08285 18.6111 5.84263 18.5116 5.66551 18.3345C5.48839 18.1574 5.38889 17.9171 5.38889 17.6667V6.33333ZM14.8333 3.5C14.5829 3.5 14.3426 3.5995 14.1655 3.77662C13.9884 3.95374 13.8889 4.19396 13.8889 4.44444C13.8889 4.69493 13.9884 4.93515 14.1655 5.11227C14.3426 5.28938 14.5829 5.38889 14.8333 5.38889H17.2757L11.3323 11.3323C11.1602 11.5104 11.065 11.749 11.0672 11.9966C11.0693 12.2442 11.1687 12.4811 11.3438 12.6562C11.5189 12.8313 11.7558 12.9307 12.0034 12.9328C12.251 12.935 12.4896 12.8398 12.6677 12.6677L18.6111 6.72433V9.16667C18.6111 9.41715 18.7106 9.65737 18.8877 9.83449C19.0648 10.0116 19.3051 10.1111 19.5556 10.1111C19.806 10.1111 20.0463 10.0116 20.2234 9.83449C20.4005 9.65737 20.5 9.41715 20.5 9.16667V4.44444C20.5 4.19396 20.4005 3.95374 20.2234 3.77662C20.0463 3.5995 19.806 3.5 19.5556 3.5H14.8333Z" fill="#FFFFFF"/>
+</svg>
\ No newline at end of file
diff --git a/scaffolds/nextjs-flow-dedicated-wallet/template/public/login_bg.png b/scaffolds/nextjs-flow-dedicated-wallet/template/public/login_bg.png
new file mode 100644
index 0000000..a4021c4
Binary files /dev/null and b/scaffolds/nextjs-flow-dedicated-wallet/template/public/login_bg.png differ
diff --git a/scaffolds/nextjs-flow-dedicated-wallet/template/public/logo.svg b/scaffolds/nextjs-flow-dedicated-wallet/template/public/logo.svg
new file mode 100644
index 0000000..e13da68
--- /dev/null
+++ b/scaffolds/nextjs-flow-dedicated-wallet/template/public/logo.svg
@@ -0,0 +1,9 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Logo">
+<g id="Favicon">
+<path d="M16 0C17.461 1.69611 19.0723 3.27125 20.8148 4.70713C19.6537 8.27674 19.0287 12.0692 19.0287 16C19.0287 19.9308 19.6537 23.7233 20.8148 27.2929C19.0723 28.7288 17.461 30.3039 16 32C14.539 30.3039 12.9277 28.7287 11.1852 27.2929C12.3463 23.7233 12.9713 19.9308 12.9713 16C12.9713 12.0692 12.3463 8.27675 11.1852 4.70713C12.9277 3.27126 14.539 1.69612 16 0Z" fill="white"/>
+<path d="M7.85464 24.8249C6.01021 23.5995 4.05274 22.5166 2 21.5929C2.56942 19.8237 2.87573 17.9458 2.87573 16C2.87573 14.0542 2.56942 12.1763 2 10.4071C4.05273 9.48345 6.0102 8.40049 7.85464 7.17508C8.55991 10.0081 8.93309 12.9628 8.93309 16C8.93309 19.0372 8.55991 21.9919 7.85464 24.8249Z" fill="white"/>
+<path d="M23.0669 16C23.0669 19.0373 23.4401 21.9919 24.1454 24.8249C25.9898 23.5995 27.9473 22.5166 30 21.5929C29.4306 19.8237 29.1243 17.9458 29.1243 16C29.1243 14.0542 29.4306 12.1763 30 10.4071C27.9473 9.48345 25.9898 8.40049 24.1454 7.17507C23.4401 10.0081 23.0669 12.9628 23.0669 16Z" fill="white"/>
+</g>
+</g>
+</svg>
\ No newline at end of file
diff --git a/scaffolds/nextjs-flow-dedicated-wallet/template/public/magic_color_white.svg b/scaffolds/nextjs-flow-dedicated-wallet/template/public/magic_color_white.svg
deleted file mode 100644
index 3267c05..0000000
--- a/scaffolds/nextjs-flow-dedicated-wallet/template/public/magic_color_white.svg
+++ /dev/null
@@ -1,34 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 25.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 832 300" style="enable-background:new 0 0 832 300;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
-	.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#6851FF;}
-</style>
-<path class="st0" d="M711.6,105.9c8.8,0,15.9-7.1,15.9-15.9S720.4,74,711.6,74c-8.8,0-15.9,7.1-15.9,15.9S702.8,105.9,711.6,105.9z
-	 M328.8,88h32.9l34.7,82.9h1.5L432.7,88h32.9v123.4h-25.9v-80.3h-1L406,210.8h-17.6l-32.6-80h-1v80.7h-25.9V88z M515.6,213.1
-	c-9,0-16.5-2.3-22.5-6.9c-6-4.6-8.9-11.5-8.9-20.7c0-6.9,1.7-12.3,5-16.3c3.3-3.9,7.7-6.8,13.1-8.6c5.4-1.8,11.3-3.1,17.5-3.6
-	c8.2-0.8,14.1-1.6,17.6-2.5c3.5-0.9,5.3-2.8,5.3-5.8v-0.4c0-3.8-1.2-6.8-3.7-8.9c-2.4-2.1-5.9-3.1-10.3-3.1c-4.7,0-8.5,1-11.3,3
-	s-4.6,4.6-5.5,7.7l-24.3-1.9c1.8-8.4,6.3-15.1,13.4-20.1c7.2-4.9,16.4-7.4,27.8-7.4c7,0,13.6,1.1,19.7,3.3c6.1,2.2,11,5.6,14.8,10.2
-	c3.8,4.6,5.7,10.5,5.7,17.9v62.4H544v-12.8h-0.7c-2.3,4.3-5.7,7.8-10.3,10.5C528.3,211.8,522.5,213.1,515.6,213.1z M523.1,195.4
-	c5.7,0,10.5-1.6,14.2-4.9c3.7-3.3,5.5-7.4,5.5-12.2v-9.8c-1,0.7-2.6,1.3-4.8,1.8c-2.1,0.5-4.4,1-6.9,1.4c-2.4,0.4-4.6,0.7-6.5,1
-	c-4.6,0.6-8.3,1.9-11.2,3.8c-2.8,1.9-4.2,4.6-4.2,8.3c0,3.5,1.3,6.2,3.9,8C515.7,194.5,519,195.4,523.1,195.4z M601.8,240.1
-	c7.3,4.9,17.3,7.4,30,7.4c9,0,17-1.3,24-4c6.9-2.7,12.4-6.6,16.3-11.8c4-5.2,6-11.7,6-19.3v-93.5H652v15.6h-1
-	c-1.2-2.5-2.8-5.1-5.1-7.7c-2.2-2.6-5.1-4.7-8.7-6.4c-3.6-1.8-8-2.7-13.3-2.7c-6.9,0-13.3,1.8-19.1,5.3c-5.8,3.5-10.5,8.7-14,15.7
-	c-3.5,7-5.2,15.8-5.2,26.3c0,10.2,1.7,18.7,5.1,25.4c3.5,6.7,8.1,11.6,13.9,14.9c5.8,3.3,12.3,4.9,19.4,4.9c7.6,0,13.5-1.5,17.9-4.6
-	c4.4-3.1,7.4-6.6,9.1-10.4h1.1v16.9c0,6.1-1.9,10.4-5.6,13.1c-3.7,2.7-8.4,4-14.1,4c-5.8,0-10.2-1-13.4-3.1c-3.1-2-5.2-4.3-6.2-6.8
-	l-24.3,3.2C590.1,229.2,594.6,235.2,601.8,240.1z M647,183.9c-3.5,4.6-8.3,6.9-14.7,6.9c-6.4,0-11.4-2.3-14.8-7
-	c-3.4-4.7-5.1-11-5.1-19c0-7.9,1.7-14.3,5.1-19.3c3.4-5,8.4-7.5,14.8-7.5c6.4,0,11.3,2.4,14.7,7.3c3.4,4.9,5.2,11.4,5.2,19.5
-	C652.3,173,650.5,179.3,647,183.9z M699,211.4v-92.6h26.2v92.6H699z M764,207.2c7,4,15.3,6,25,6c8.4,0,15.7-1.5,21.9-4.5
-	c6.2-3,11-7.2,14.5-12.6c3.5-5.4,5.5-11.6,5.9-18.7h-24.8c-0.8,4.9-2.7,8.8-5.8,11.5c-3.1,2.7-6.9,4-11.4,4c-6.1,0-11-2.4-14.7-7.2
-	c-3.7-4.9-5.5-11.7-5.5-20.6c0-8.8,1.8-15.5,5.5-20.3s8.6-7.2,14.7-7.2c4.8,0,8.7,1.4,11.6,4.3c3,2.8,4.8,6.5,5.5,11.2h24.8
-	c-0.4-7.2-2.4-13.4-6-18.7c-3.6-5.3-8.5-9.4-14.7-12.4c-6.2-2.9-13.4-4.4-21.7-4.4c-9.6,0-17.8,2-24.8,6.1
-	c-6.9,4-12.3,9.6-16.1,16.8c-3.7,7.2-5.6,15.5-5.6,25c0,9.4,1.8,17.6,5.5,24.8C751.7,197.5,757,203.1,764,207.2z"/>
-<path class="st1" d="M124.4,0c13,15.9,27.3,30.7,42.8,44.1c-10.3,33.5-15.9,69-15.9,105.9s5.6,72.4,15.9,105.9
-	c-15.5,13.5-29.8,28.2-42.8,44.1c-13-15.9-27.3-30.7-42.8-44.1c10.3-33.5,15.9-69,15.9-105.9c0-36.9-5.6-72.4-15.9-105.9
-	C97.1,30.7,111.4,15.9,124.4,0z M52,232.7c-16.4-11.5-33.8-21.6-52-30.3c5.1-16.6,7.8-34.2,7.8-52.4c0-18.2-2.7-35.8-7.8-52.4
-	c18.2-8.7,35.6-18.8,52-30.3c6.3,26.6,9.6,54.3,9.6,82.7C61.6,178.5,58.3,206.2,52,232.7z M187.2,150c0,28.5,3.3,56.2,9.6,82.7
-	c16.4-11.5,33.8-21.6,52-30.3c-5.1-16.6-7.8-34.2-7.8-52.4c0-18.2,2.7-35.8,7.8-52.4c-18.2-8.7-35.6-18.8-52-30.3
-	C190.5,93.8,187.2,121.5,187.2,150z"/>
-</svg>
diff --git a/scaffolds/nextjs-flow-dedicated-wallet/template/public/redirect_bg.png b/scaffolds/nextjs-flow-dedicated-wallet/template/public/redirect_bg.png
new file mode 100644
index 0000000..aa322ee
Binary files /dev/null and b/scaffolds/nextjs-flow-dedicated-wallet/template/public/redirect_bg.png differ
diff --git a/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/Dashboard.tsx b/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/Dashboard.tsx
index 25a067a..4e02d36 100644
--- a/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/Dashboard.tsx
+++ b/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/Dashboard.tsx
@@ -1,27 +1,25 @@
-import React from 'react'
-import WalletMethods from './cards/WalletMethodsCard'
-import SendTransaction from './cards/SendTransactionCard'
-import Spacer from '@/components/ui/Spacer'
-import {LoginProps} from '@/utils/types'
-import UserInfo from './cards/UserInfoCard'
-import DevLinks from './DevLinks'
-import Header from './Header'
+import React from 'react';
+import WalletMethods from './cards/WalletMethodsCard';
+import SendTransaction from './cards/SendTransactionCard';
+import Spacer from '@/components/ui/Spacer';
+import { LoginProps } from '@/utils/types';
+import UserInfo from './cards/UserInfoCard';
+import DevLinks from './DevLinks';
+import Header from './Header';
 
-export default function Dashboard({token, setToken}: LoginProps) {
-	return (
-		<div className='home-page'>
-			<Header />
-			<Spacer size={32} />
-			<Spacer size={120} />
-			<div className='cards-container'>
-				<SendTransaction />
-				<Spacer size={10} />
-				<UserInfo token={token} setToken={setToken} />
-				<Spacer size={10} />
-				<WalletMethods token={token} setToken={setToken} />
-				<Spacer size={15} />
-			</div>
-			<DevLinks primary />
-		</div>
-	)
+export default function Dashboard({ token, setToken }: LoginProps) {
+  return (
+    <div className="home-page">
+      <Header />
+      <div className="cards-container">
+        <UserInfo token={token} setToken={setToken} />
+        <Spacer size={10} />
+        <SendTransaction />
+        <Spacer size={10} />
+        <WalletMethods token={token} setToken={setToken} />
+        <Spacer size={15} />
+      </div>
+      <DevLinks primary />
+    </div>
+  );
 }
diff --git a/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/Header.tsx b/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/Header.tsx
index b997a10..a6e4012 100644
--- a/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/Header.tsx
+++ b/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/Header.tsx
@@ -1,19 +1,20 @@
-import Image from 'next/image'
-import MagicColorWhite from 'public/magic_color_white.svg'
-import {Dispatch, SetStateAction} from 'react'
-import DevLinks from './DevLinks'
+import Image from 'next/image';
+import Logo from 'public/logo.svg';
+import DevLinks from './DevLinks';
 
 const Header = () => {
-	return (
-		<div className='app-header-container'>
-			<Image
-				className='h-[180] w-[120px] m-2'
-				src={MagicColorWhite}
-				alt='logo'
-			/>
-			<DevLinks />
-		</div>
-	)
-}
+  return (
+    <div className="app-header-container">
+      <div className="flex flex-col gap-2.5 items-center">
+        <Image src={Logo} alt="logo" />
+        <div className="text-center text-white text-xl font-extrabold font-['Inter'] leading-[30px]">Magic</div>
+        <div className="text-center text-white text-opacity-50 text-base font-normal font-['SF Mono'] leading-normal">
+          Demo
+        </div>
+      </div>
+      <DevLinks />
+    </div>
+  );
+};
 
-export default Header
+export default Header;
diff --git a/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/Login.tsx b/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/Login.tsx
index a2ba0ba..9cac8d6 100644
--- a/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/Login.tsx
+++ b/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/Login.tsx
@@ -1,22 +1,22 @@
-import {LoginProps} from '@/utils/types'
+import { LoginProps } from '@/utils/types'
 import Header from './Header'
 <% loginMethods.forEach(authType => { %>
 <%-`import ${authType.replaceAll(' ', '')} from './auth/${authType.replaceAll(' ', '')}';`-%>
 <% }) %>
 
-const Login = ({token, setToken}: LoginProps) => {
-	return (
-		<div className='login-page'>
-			<Header />
-			<div className='login-method-grid'>
-			<% loginMethods.forEach(authType => { %>
-			<% if (authType !== "Social Logins") { %>
-				<%-`<${authType.replaceAll(' ', '')} token={token} setToken={setToken} />`-%>
-			<% } %>
-			<% }) %>
-			</div>
-		</div>
-	)
+const Login = ({ token, setToken }: LoginProps) => {
+  return (
+    <div className="login-page">
+      <Header />
+      <div className={`max-w-[100%] grid grid-cols-<%= Math.min(loginMethods.length, 3) %> grid-flow-row auto-rows-fr gap-5 p-4 mt-8`}>
+      <% loginMethods.forEach(authType => { %>
+      <% if (authType !== "Social Logins") { %>
+        <%-`<${authType.replaceAll(' ', '')} token={token} setToken={setToken} />`-%>
+      <% } %>
+  		<% }) %>
+      </div>
+    </div>
+  )
 }
 
 export default Login
diff --git a/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/MagicDashboardRedirect.tsx b/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/MagicDashboardRedirect.tsx
index 3c0eb04..4c2cbed 100644
--- a/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/MagicDashboardRedirect.tsx
+++ b/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/MagicDashboardRedirect.tsx
@@ -1,35 +1,43 @@
-import React, {useCallback} from 'react'
-import Spacer from '../ui/Spacer'
-import Header from './Header'
-import DevLinks from './DevLinks'
+import React, { useCallback } from 'react';
+import DevLinks from './DevLinks';
+import Image from 'next/image';
+import Info from 'public/info.svg';
+import Link from 'public/link_white.svg';
+import Logo from 'public/logo.svg';
 
 const MagicDashboardRedirect = () => {
-	const onClick = useCallback(() => {
-		window.open('https://dashboard.magic.link/signup', '_blank')
-	}, [])
+  const onClick = useCallback(() => {
+    window.open('https://dashboard.magic.link/signup', '_blank');
+  }, []);
 
-	return (
-		<div className='redirect-container'>
-			<Spacer size={32} />
-			<Spacer size={20} />
-			<div className='text-center'>
-				<h3 className='max-w-[500px] text-center text-[#ffffffcc] text-xl font-normal m-0'>
-					Please set your <code>NEXT_PUBLIC_MAGIC_API_KEY</code>{' '}
-					environment variable in <code>.env</code>. You can get your
-					Magic API key from the Magic Dashboard.
-				</h3>
-			</div>
-			<Spacer size={32} />
-			<div className='text-center'>
-				<button
-					className='login-button min-w-[300px]'
-					onClick={onClick}>
-					Go to Dashboard
-				</button>
-			</div>
-			<DevLinks />
-		</div>
-	)
-}
+  return (
+    <div className="redirect-container">
+      <div className="flex flex-col mt-10 gap-2.5 items-center">
+        <Image src={Logo} alt="logo" />
+        <div className="text-center text-white text-xl font-extrabold font-['Inter'] leading-[30px]">Magic</div>
+        <div className="text-center text-white text-opacity-50 text-base font-normal font-['SF Mono'] leading-normal">
+          Demo
+        </div>
+      </div>
+      <div className="flex flex-col items-center flex-1">
+        <div className="redirect-card">
+          <div className="flex gap-2 mx-4 my-2 ">
+            <Image src={Info} alt="logo" />
+            <h3 className="max-w-[480px] text-[#4E4D52] text-base font-normal">
+              Please set your <code>NEXT_PUBLIC_MAGIC_API_KEY</code> environment variable in <code>.env</code>. You can
+              get your Magic API key from the Magic Dashboard.
+            </h3>
+          </div>
+        </div>
 
-export default MagicDashboardRedirect
+        <button className="api-button" onClick={onClick} disabled={false}>
+          Get API keys
+          <Image src={Link} alt="link-icon" className="ml-[6px] my-auto" />
+        </button>
+      </div>
+      <DevLinks />
+    </div>
+  );
+};
+
+export default MagicDashboardRedirect;
diff --git a/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/auth/Discord.tsx b/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/auth/Discord.tsx
index d05c653..763aed7 100644
--- a/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/auth/Discord.tsx
+++ b/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/auth/Discord.tsx
@@ -1,81 +1,73 @@
-import {LoginProps} from '@/utils/types'
-import {useMagic} from '../MagicProvider'
-import {useEffect, useState} from 'react'
-import {saveToken} from '@/utils/common'
-import Spinner from '@/components/ui/Spinner'
-import classNames from 'classnames'
-import Image from 'next/image'
-import discord from 'public/social/Discord.svg'
-import Card from '@/components/ui/Card'
-import CardHeader from '@/components/ui/CardHeader'
+import { LoginProps } from '@/utils/types';
+import { useMagic } from '../MagicProvider';
+import { useEffect, useState } from 'react';
+import { saveToken } from '@/utils/common';
+import Spinner from '@/components/ui/Spinner';
+import classNames from 'classnames';
+import Image from 'next/image';
+import discord from 'public/social/Discord.svg';
+import Card from '@/components/ui/Card';
+import CardHeader from '@/components/ui/CardHeader';
 
-const Discord = ({token, setToken}: LoginProps) => {
-	const {magic} = useMagic()
-	const [isAuthLoading, setIsAuthLoading] = useState<string | null>(null)
+const Discord = ({ token, setToken }: LoginProps) => {
+  const { magic } = useMagic();
+  const [isAuthLoading, setIsAuthLoading] = useState<string | null>(null);
 
-	useEffect(() => {
-		setIsAuthLoading(localStorage.getItem('isAuthLoading'))
-	}, [])
+  useEffect(() => {
+    setIsAuthLoading(localStorage.getItem('isAuthLoading'));
+  }, []);
 
-	useEffect(() => {
-		const checkLogin = async () => {
-			try {
-				if (magic) {
-					const result = await magic?.oauth.getRedirectResult()
-					//do stuff with user profile data
-					saveToken(result.magic.idToken, setToken, 'SOCIAL')
-					setLoadingFlag('false')
-				}
-			} catch (e) {
-				console.log('social login error: ' + e)
-				setLoadingFlag('false')
-			}
-		}
+  useEffect(() => {
+    const checkLogin = async () => {
+      try {
+        if (magic) {
+          const result = await magic?.oauth.getRedirectResult();
+          //do stuff with user profile data
+          saveToken(result.magic.idToken, setToken, 'SOCIAL');
+          setLoadingFlag('false');
+        }
+      } catch (e) {
+        console.log('social login error: ' + e);
+        setLoadingFlag('false');
+      }
+    };
 
-		checkLogin()
-	}, [magic, setToken])
+    checkLogin();
+  }, [magic, setToken]);
 
-	const login = async () => {
-		setLoadingFlag('true')
-		await magic?.oauth.loginWithRedirect({
-			provider: 'discord',
-			redirectURI: window.location.origin,
-		})
-	}
+  const login = async () => {
+    setLoadingFlag('true');
+    await magic?.oauth.loginWithRedirect({
+      provider: 'discord',
+      redirectURI: window.location.origin,
+    });
+  };
 
-	const setLoadingFlag = (loading: string) => {
-		localStorage.setItem('isAuthLoading', loading)
-		setIsAuthLoading(loading)
-	}
+  const setLoadingFlag = (loading: string) => {
+    localStorage.setItem('isAuthLoading', loading);
+    setIsAuthLoading(loading);
+  };
 
-	return (
-		<Card>
-			<CardHeader id='discord'>Discord Login</CardHeader>
-			{isAuthLoading && isAuthLoading !== 'false' ? (
-				<Spinner />
-			) : (
-				<div className='login-method-grid-item-container'>
-					<div
-						className={classNames(
-							'login-method-grid-item-container m-2',
-							token.length > 0
-								? 'cursor-default'
-								: 'cursor-pointer'
-						)}
-						onClick={() => {
-							if (token.length == 0) login()
-						}}>
-						<Image
-							src={discord}
-							alt='Discord'
-							height={24}
-							width={24}
-						/>
-						<div className='text-xs font-semibold'>Discord</div>
-					</div>
-				</div>
-			)}
-		</Card>
-	)
-}
-export default Discord
+  return (
+    <Card>
+      <CardHeader id="discord">Discord Login</CardHeader>
+      {isAuthLoading && isAuthLoading !== 'false' ? (
+        <Spinner />
+      ) : (
+        <div className="login-method-grid-item-container">
+          <button
+            className="social-login-button"
+            onClick={() => {
+              if (token.length == 0) login();
+            }}
+            disabled={false}
+          >
+            <Image src={discord} alt="Discord" height={24} width={24} className="mr-6" />
+            <div className="text-xs font-semibold text-center w-full">Continue with Discord</div>
+          </button>
+        </div>
+      )}
+    </Card>
+  );
+};
+export default Discord;
diff --git a/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/auth/EmailOTP.tsx b/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/auth/EmailOTP.tsx
index 3327f6b..662e77c 100644
--- a/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/auth/EmailOTP.tsx
+++ b/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/auth/EmailOTP.tsx
@@ -1,90 +1,78 @@
-import {useMagic} from '../MagicProvider'
-import showToast from '@/utils/showToast'
-import Spinner from '../../ui/Spinner'
-import classNames from 'classnames'
-import {RPCError, RPCErrorCode} from 'magic-sdk'
-import {LoginProps} from '@/utils/types'
-import {saveToken} from '@/utils/common'
-import Card from '../../ui/Card'
-import CardHeader from '../../ui/CardHeader'
-import {useState} from 'react'
-import FormInput from '@/components/ui/FormInput'
+import { useMagic } from '../MagicProvider';
+import showToast from '@/utils/showToast';
+import Spinner from '../../ui/Spinner';
+import { RPCError, RPCErrorCode } from 'magic-sdk';
+import { LoginProps } from '@/utils/types';
+import { saveToken } from '@/utils/common';
+import Card from '../../ui/Card';
+import CardHeader from '../../ui/CardHeader';
+import { useState } from 'react';
+import FormInput from '@/components/ui/FormInput';
 
-const EmailOTP = ({token, setToken}: LoginProps) => {
-	const {magic} = useMagic()
-	const [email, setEmail] = useState('')
-	const [emailError, setEmailError] = useState(false)
-	const [isLoginInProgress, setLoginInProgress] = useState(false)
+const EmailOTP = ({ token, setToken }: LoginProps) => {
+  const { magic } = useMagic();
+  const [email, setEmail] = useState('');
+  const [emailError, setEmailError] = useState(false);
+  const [isLoginInProgress, setLoginInProgress] = useState(false);
 
-	const handleLogin = async () => {
-		if (
-			!email.match(
-				/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
-			)
-		) {
-			setEmailError(true)
-		} else {
-			try {
-				setLoginInProgress(true)
-				setEmailError(false)
-				const account = await magic?.auth.loginWithEmailOTP({email})
-				if (account) {
-					saveToken(account, setToken, 'EMAIL')
-					setEmail('')
-				}
-			} catch (e) {
-				console.log('login error: ' + JSON.stringify(e))
-				if (e instanceof RPCError) {
-					switch (e.code) {
-						case RPCErrorCode.MagicLinkFailedVerification:
-						case RPCErrorCode.MagicLinkExpired:
-						case RPCErrorCode.MagicLinkRateLimited:
-						case RPCErrorCode.UserAlreadyLoggedIn:
-							showToast({message: e.message, type: 'error'})
-							break
-						default:
-							showToast({
-								message:
-									'Something went wrong. Please try again',
-								type: 'error',
-							})
-					}
-				}
-			} finally {
-				setLoginInProgress(false)
-			}
-		}
-	}
+  const handleLogin = async () => {
+    if (!email.match(/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/)) {
+      setEmailError(true);
+    } else {
+      try {
+        setLoginInProgress(true);
+        setEmailError(false);
+        const account = await magic?.auth.loginWithEmailOTP({ email });
+        if (account) {
+          saveToken(account, setToken, 'EMAIL');
+          setEmail('');
+        }
+      } catch (e) {
+        console.log('login error: ' + JSON.stringify(e));
+        if (e instanceof RPCError) {
+          switch (e.code) {
+            case RPCErrorCode.MagicLinkFailedVerification:
+            case RPCErrorCode.MagicLinkExpired:
+            case RPCErrorCode.MagicLinkRateLimited:
+            case RPCErrorCode.UserAlreadyLoggedIn:
+              showToast({ message: e.message, type: 'error' });
+              break;
+            default:
+              showToast({
+                message: 'Something went wrong. Please try again',
+                type: 'error',
+              });
+          }
+        }
+      } finally {
+        setLoginInProgress(false);
+      }
+    }
+  };
 
-	return (
-		<Card>
-			<CardHeader id='login'>Email OTP Login</CardHeader>
-			<div className='login-method-grid-item-container'>
-				<FormInput
-					onChange={(e) => {
-						if (emailError) setEmailError(false)
-						setEmail(e.target.value)
-					}}
-					placeholder={
-						token.length > 0 ? 'Already logged in' : 'Email'
-					}
-					value={email}
-				/>
-				{emailError && (
-					<span className='error'>Enter a valid email</span>
-				)}
-				<button
-					className='login-button'
-					disabled={
-						isLoginInProgress ||
-						(token.length > 0 ? false : email.length == 0)
-					}
-					onClick={() => handleLogin()}>
-					{isLoginInProgress ? <Spinner /> : 'Login'}
-				</button>
-			</div>
-		</Card>
-	)
-}
+  return (
+    <Card>
+      <CardHeader id="login">Email OTP Login</CardHeader>
+      <div className="login-method-grid-item-container">
+        <FormInput
+          onChange={(e) => {
+            if (emailError) setEmailError(false);
+            setEmail(e.target.value);
+          }}
+          placeholder={token.length > 0 ? 'Already logged in' : 'Email'}
+          value={email}
+        />
+        {emailError && <span className="error">Enter a valid email</span>}
+        <button
+          className="login-button"
+          disabled={isLoginInProgress || (token.length > 0 ? false : email.length == 0)}
+          onClick={() => handleLogin()}
+        >
+          {isLoginInProgress ? <Spinner /> : 'Log in / Sign up'}
+        </button>
+      </div>
+    </Card>
+  );
+};
 
-export default EmailOTP
+export default EmailOTP;
diff --git a/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/auth/Facebook.tsx b/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/auth/Facebook.tsx
index 107761a..17bd3a1 100644
--- a/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/auth/Facebook.tsx
+++ b/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/auth/Facebook.tsx
@@ -1,81 +1,73 @@
-import {LoginProps} from '@/utils/types'
-import {useMagic} from '../MagicProvider'
-import {useEffect, useState} from 'react'
-import {saveToken} from '@/utils/common'
-import Spinner from '../../ui/Spinner'
-import classNames from 'classnames'
-import Image from 'next/image'
-import facebook from 'public/social/Facebook.svg'
-import Card from '../../ui/Card'
-import CardHeader from '../../ui/CardHeader'
+import { LoginProps } from '@/utils/types';
+import { useMagic } from '../MagicProvider';
+import { useEffect, useState } from 'react';
+import { saveToken } from '@/utils/common';
+import Spinner from '../../ui/Spinner';
+import classNames from 'classnames';
+import Image from 'next/image';
+import facebook from 'public/social/Facebook.svg';
+import Card from '../../ui/Card';
+import CardHeader from '../../ui/CardHeader';
 
-const Facebook = ({token, setToken}: LoginProps) => {
-	const {magic} = useMagic()
-	const [isAuthLoading, setIsAuthLoading] = useState<string | null>(null)
+const Facebook = ({ token, setToken }: LoginProps) => {
+  const { magic } = useMagic();
+  const [isAuthLoading, setIsAuthLoading] = useState<string | null>(null);
 
-	useEffect(() => {
-		setIsAuthLoading(localStorage.getItem('isAuthLoading'))
-	}, [])
+  useEffect(() => {
+    setIsAuthLoading(localStorage.getItem('isAuthLoading'));
+  }, []);
 
-	useEffect(() => {
-		const checkLogin = async () => {
-			try {
-				if (magic) {
-					const result = await magic?.oauth.getRedirectResult()
-					//do stuff with user profile data
-					saveToken(result.magic.idToken, setToken, 'SOCIAL')
-					setLoadingFlag('false')
-				}
-			} catch (e) {
-				console.log('social login error: ' + e)
-				setLoadingFlag('false')
-			}
-		}
+  useEffect(() => {
+    const checkLogin = async () => {
+      try {
+        if (magic) {
+          const result = await magic?.oauth.getRedirectResult();
+          //do stuff with user profile data
+          saveToken(result.magic.idToken, setToken, 'SOCIAL');
+          setLoadingFlag('false');
+        }
+      } catch (e) {
+        console.log('social login error: ' + e);
+        setLoadingFlag('false');
+      }
+    };
 
-		checkLogin()
-	}, [magic, setToken])
+    checkLogin();
+  }, [magic, setToken]);
 
-	const login = async () => {
-		setLoadingFlag('true')
-		await magic?.oauth.loginWithRedirect({
-			provider: 'facebook',
-			redirectURI: window.location.origin,
-		})
-	}
+  const login = async () => {
+    setLoadingFlag('true');
+    await magic?.oauth.loginWithRedirect({
+      provider: 'facebook',
+      redirectURI: window.location.origin,
+    });
+  };
 
-	const setLoadingFlag = (loading: string) => {
-		localStorage.setItem('isAuthLoading', loading)
-		setIsAuthLoading(loading)
-	}
+  const setLoadingFlag = (loading: string) => {
+    localStorage.setItem('isAuthLoading', loading);
+    setIsAuthLoading(loading);
+  };
 
-	return (
-		<Card>
-			<CardHeader id='facebook'>Facebook Login</CardHeader>
-			{isAuthLoading && isAuthLoading !== 'false' ? (
-				<Spinner />
-			) : (
-				<div className='login-method-grid-item-container'>
-					<div
-						className={classNames(
-							'login-method-grid-item-container m-2',
-							token.length > 0
-								? 'cursor-default'
-								: 'cursor-pointer'
-						)}
-						onClick={() => {
-							if (token.length == 0) login()
-						}}>
-						<Image
-							src={facebook}
-							alt='Google'
-							height={24}
-							width={24}
-						/>
-						<div className='text-xs font-semibold'>Facebook</div>
-					</div>
-				</div>
-			)}
-		</Card>
-	)
-}
-export default Facebook
+  return (
+    <Card>
+      <CardHeader id="facebook">Facebook Login</CardHeader>
+      {isAuthLoading && isAuthLoading !== 'false' ? (
+        <Spinner />
+      ) : (
+        <div className="login-method-grid-item-container">
+          <button
+            className="social-login-button"
+            onClick={() => {
+              if (token.length == 0) login();
+            }}
+            disabled={false}
+          >
+            <Image src={facebook} alt="Facebook" height={24} width={24} className="mr-6" />
+            <div className="text-xs font-semibold text-center w-full">Continue with Facebook</div>
+          </button>
+        </div>
+      )}
+    </Card>
+  );
+};
+export default Facebook;
diff --git a/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/auth/Github.tsx b/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/auth/Github.tsx
index 431fd34..8004de7 100644
--- a/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/auth/Github.tsx
+++ b/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/auth/Github.tsx
@@ -1,81 +1,73 @@
-import {LoginProps} from '@/utils/types'
-import {useMagic} from '../MagicProvider'
-import {useEffect, useState} from 'react'
-import {saveToken} from '@/utils/common'
-import Spinner from '../../ui/Spinner'
-import classNames from 'classnames'
-import Image from 'next/image'
-import github from 'public/social/Github.svg'
-import Card from '../../ui/Card'
-import CardHeader from '../../ui/CardHeader'
+import { LoginProps } from '@/utils/types';
+import { useMagic } from '../MagicProvider';
+import { useEffect, useState } from 'react';
+import { saveToken } from '@/utils/common';
+import Spinner from '../../ui/Spinner';
+import classNames from 'classnames';
+import Image from 'next/image';
+import github from 'public/social/Github.svg';
+import Card from '../../ui/Card';
+import CardHeader from '../../ui/CardHeader';
 
-const Github = ({token, setToken}: LoginProps) => {
-	const {magic} = useMagic()
-	const [isAuthLoading, setIsAuthLoading] = useState<string | null>(null)
+const Github = ({ token, setToken }: LoginProps) => {
+  const { magic } = useMagic();
+  const [isAuthLoading, setIsAuthLoading] = useState<string | null>(null);
 
-	useEffect(() => {
-		setIsAuthLoading(localStorage.getItem('isAuthLoading'))
-	}, [])
+  useEffect(() => {
+    setIsAuthLoading(localStorage.getItem('isAuthLoading'));
+  }, []);
 
-	useEffect(() => {
-		const checkLogin = async () => {
-			try {
-				if (magic) {
-					const result = await magic?.oauth.getRedirectResult()
-					//do stuff with user profile data
-					saveToken(result.magic.idToken, setToken, 'SOCIAL')
-					setLoadingFlag('false')
-				}
-			} catch (e) {
-				console.log('social login error: ' + e)
-				setLoadingFlag('false')
-			}
-		}
+  useEffect(() => {
+    const checkLogin = async () => {
+      try {
+        if (magic) {
+          const result = await magic?.oauth.getRedirectResult();
+          //do stuff with user profile data
+          saveToken(result.magic.idToken, setToken, 'SOCIAL');
+          setLoadingFlag('false');
+        }
+      } catch (e) {
+        console.log('social login error: ' + e);
+        setLoadingFlag('false');
+      }
+    };
 
-		checkLogin()
-	}, [magic, setToken])
+    checkLogin();
+  }, [magic, setToken]);
 
-	const login = async () => {
-		setLoadingFlag('true')
-		await magic?.oauth.loginWithRedirect({
-			provider: 'github',
-			redirectURI: window.location.origin,
-		})
-	}
+  const login = async () => {
+    setLoadingFlag('true');
+    await magic?.oauth.loginWithRedirect({
+      provider: 'github',
+      redirectURI: window.location.origin,
+    });
+  };
 
-	const setLoadingFlag = (loading: string) => {
-		localStorage.setItem('isAuthLoading', loading)
-		setIsAuthLoading(loading)
-	}
+  const setLoadingFlag = (loading: string) => {
+    localStorage.setItem('isAuthLoading', loading);
+    setIsAuthLoading(loading);
+  };
 
-	return (
-		<Card>
-			<CardHeader id='github'>Github Login</CardHeader>
-			{isAuthLoading && isAuthLoading !== 'false' ? (
-				<Spinner />
-			) : (
-				<div className='login-method-grid-item-container'>
-					<div
-						className={classNames(
-							'login-method-grid-item-container m-2',
-							token.length > 0
-								? 'cursor-default'
-								: 'cursor-pointer'
-						)}
-						onClick={() => {
-							if (token.length == 0) login()
-						}}>
-						<Image
-							src={github}
-							alt='Google'
-							height={24}
-							width={24}
-						/>
-						<div className='text-xs font-semibold'>Github</div>
-					</div>
-				</div>
-			)}
-		</Card>
-	)
-}
-export default Github
+  return (
+    <Card>
+      <CardHeader id="github">Github Login</CardHeader>
+      {isAuthLoading && isAuthLoading !== 'false' ? (
+        <Spinner />
+      ) : (
+        <div className="login-method-grid-item-container">
+          <button
+            className="social-login-button"
+            onClick={() => {
+              if (token.length == 0) login();
+            }}
+            disabled={false}
+          >
+            <Image src={github} alt="Github" height={24} width={24} className="mr-6" />
+            <div className="text-xs font-semibold text-center w-full">Continue with Github</div>
+          </button>
+        </div>
+      )}
+    </Card>
+  );
+};
+export default Github;
diff --git a/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/auth/Google.tsx b/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/auth/Google.tsx
index 29ab572..4dc8087 100644
--- a/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/auth/Google.tsx
+++ b/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/auth/Google.tsx
@@ -1,81 +1,73 @@
-import {LoginProps} from '@/utils/types'
-import {useMagic} from '../MagicProvider'
-import {useEffect, useState} from 'react'
-import {saveToken} from '@/utils/common'
-import Spinner from '../../ui/Spinner'
-import classNames from 'classnames'
-import Image from 'next/image'
-import google from 'public/social/Google.svg'
-import Card from '../../ui/Card'
-import CardHeader from '../../ui/CardHeader'
+import { LoginProps } from '@/utils/types';
+import { useMagic } from '../MagicProvider';
+import { useEffect, useState } from 'react';
+import { saveToken } from '@/utils/common';
+import Spinner from '../../ui/Spinner';
+import classNames from 'classnames';
+import Image from 'next/image';
+import google from 'public/social/Google.svg';
+import Card from '../../ui/Card';
+import CardHeader from '../../ui/CardHeader';
 
-const Google = ({token, setToken}: LoginProps) => {
-	const {magic} = useMagic()
-	const [isAuthLoading, setIsAuthLoading] = useState<string | null>(null)
+const Google = ({ token, setToken }: LoginProps) => {
+  const { magic } = useMagic();
+  const [isAuthLoading, setIsAuthLoading] = useState<string | null>(null);
 
-	useEffect(() => {
-		setIsAuthLoading(localStorage.getItem('isAuthLoading'))
-	}, [])
+  useEffect(() => {
+    setIsAuthLoading(localStorage.getItem('isAuthLoading'));
+  }, []);
 
-	useEffect(() => {
-		const checkLogin = async () => {
-			try {
-				if (magic) {
-					const result = await magic?.oauth.getRedirectResult()
-					//do stuff with user profile data
-					saveToken(result.magic.idToken, setToken, 'SOCIAL')
-					setLoadingFlag('false')
-				}
-			} catch (e) {
-				console.log('social login error: ' + e)
-				setLoadingFlag('false')
-			}
-		}
+  useEffect(() => {
+    const checkLogin = async () => {
+      try {
+        if (magic) {
+          const result = await magic?.oauth.getRedirectResult();
+          //do stuff with user profile data
+          saveToken(result.magic.idToken, setToken, 'SOCIAL');
+          setLoadingFlag('false');
+        }
+      } catch (e) {
+        console.log('social login error: ' + e);
+        setLoadingFlag('false');
+      }
+    };
 
-		checkLogin()
-	}, [magic, setToken])
+    checkLogin();
+  }, [magic, setToken]);
 
-	const login = async () => {
-		setLoadingFlag('true')
-		await magic?.oauth.loginWithRedirect({
-			provider: 'google',
-			redirectURI: window.location.origin,
-		})
-	}
+  const login = async () => {
+    setLoadingFlag('true');
+    await magic?.oauth.loginWithRedirect({
+      provider: 'google',
+      redirectURI: window.location.origin,
+    });
+  };
 
-	const setLoadingFlag = (loading: string) => {
-		localStorage.setItem('isAuthLoading', loading)
-		setIsAuthLoading(loading)
-	}
+  const setLoadingFlag = (loading: string) => {
+    localStorage.setItem('isAuthLoading', loading);
+    setIsAuthLoading(loading);
+  };
 
-	return (
-		<Card>
-			<CardHeader id='google'>Google Login</CardHeader>
-			{isAuthLoading && isAuthLoading !== 'false' ? (
-				<Spinner />
-			) : (
-				<div className='login-method-grid-item-container'>
-					<div
-						className={classNames(
-							'login-method-grid-item-container m-2',
-							token.length > 0
-								? 'cursor-default'
-								: 'cursor-pointer'
-						)}
-						onClick={() => {
-							if (token.length == 0) login()
-						}}>
-						<Image
-							src={google}
-							alt='Google'
-							height={24}
-							width={24}
-						/>
-						<div className='text-xs font-semibold'>Google</div>
-					</div>
-				</div>
-			)}
-		</Card>
-	)
-}
-export default Google
+  return (
+    <Card>
+      <CardHeader id="google">Google Login</CardHeader>
+      {isAuthLoading && isAuthLoading !== 'false' ? (
+        <Spinner />
+      ) : (
+        <div className="login-method-grid-item-container">
+          <button
+            className="social-login-button"
+            onClick={() => {
+              if (token.length == 0) login();
+            }}
+            disabled={false}
+          >
+            <Image src={google} alt="Google" height={24} width={24} className="mr-6" />
+            <div className="text-xs font-semibold text-center w-full">Continue with Google</div>
+          </button>
+        </div>
+      )}
+    </Card>
+  );
+};
+export default Google;
diff --git a/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/auth/LoginForm.tsx b/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/auth/LoginForm.tsx
deleted file mode 100644
index 80a53f2..0000000
--- a/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/auth/LoginForm.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import {LoginProps} from '@/utils/types'
-import {useEffect, useMemo, useState} from 'react'
-import {saveToken} from '@/utils/common'
-import Spinner from '../../ui/Spinner'
-import {useRouter} from 'next/router'
-import Card from '../../ui/Card'
-import CardHeader from '../../ui/CardHeader'
-
-const setScriptAttributesAndAddScript = (src: string) => {
-	const script = document.createElement('script')
-	script.src = src
-	script.setAttribute(
-		'data-magic-publishable-api-key',
-		process.env.NEXT_PUBLIC_MAGIC_API_KEY!
-	)
-	script.setAttribute('data-redirect-uri', '/')
-	script.async = true
-
-	document.body.appendChild(script)
-}
-
-const LoginForm = ({token, setToken}: LoginProps) => {
-	const router = useRouter()
-	const [isLoginInProgress, setLoginInProgress] = useState(false)
-
-	useMemo(async () => {
-		if (token.length == 0 && router.query) {
-			if (router.query.didt) {
-				await saveToken(router.query.didt as string, setToken, 'FORM')
-				router.replace('/', undefined, {shallow: true})
-			}
-			if (router.query.magic_credential) {
-				await saveToken(
-					router.query.magic_credential as string,
-					setToken,
-					'FORM'
-				)
-				router.replace('/', undefined, {shallow: true})
-			}
-		}
-	}, [router, setToken, token.length])
-
-	useEffect(() => {
-		if (token.length > 0 && !isLoginInProgress) {
-			setLoginInProgress(false)
-		}
-	}, [token, setLoginInProgress, isLoginInProgress])
-
-	const handleLogin = () => {
-		setLoginInProgress(true)
-		setScriptAttributesAndAddScript('https://auth.magic.link/pnp/login')
-	}
-
-	return (
-		<Card>
-			<CardHeader id='login'>Login Form</CardHeader>
-			<button
-				className='login-button'
-				disabled={isLoginInProgress}
-				onClick={() => handleLogin()}>
-				{isLoginInProgress ? <Spinner /> : 'Login'}
-			</button>
-			<span className='text-xs mt-2'>
-				Please wait a few seconds after clicking login as this button is
-				executing a magic script
-			</span>
-		</Card>
-	)
-}
-
-export default LoginForm
diff --git a/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/auth/SMSOTP.tsx b/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/auth/SMSOTP.tsx
index 239e4ac..2b3e474 100644
--- a/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/auth/SMSOTP.tsx
+++ b/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/auth/SMSOTP.tsx
@@ -1,90 +1,84 @@
-import {useState} from 'react'
-import {useMagic} from '../MagicProvider'
-import showToast from '@/utils/showToast'
-import Spinner from '../../ui/Spinner'
-import classNames from 'classnames'
-import {RPCError, RPCErrorCode} from 'magic-sdk'
-import {LoginProps} from '@/utils/types'
-import {saveToken} from '@/utils/common'
-import Card from '../../ui/Card'
-import CardHeader from '../../ui/CardHeader'
-import FormInput from '@/components/ui/FormInput'
+import { useState } from 'react';
+import { useMagic } from '../MagicProvider';
+import showToast from '@/utils/showToast';
+import Spinner from '../../ui/Spinner';
+import { RPCError, RPCErrorCode } from 'magic-sdk';
+import { LoginProps } from '@/utils/types';
+import { saveToken } from '@/utils/common';
+import Card from '../../ui/Card';
+import CardHeader from '../../ui/CardHeader';
+import FormInput from '@/components/ui/FormInput';
 
-const SMSOTP = ({token, setToken}: LoginProps) => {
-	const {magic} = useMagic()
-	const [phone, setPhone] = useState('')
-	const [phoneError, setPhoneError] = useState(false)
-	const [isLoginInProgress, setLoginInProgress] = useState(false)
+const SMSOTP = ({ token, setToken }: LoginProps) => {
+  const { magic } = useMagic();
+  const [phone, setPhone] = useState('');
+  const [phoneError, setPhoneError] = useState(false);
+  const [isLoginInProgress, setLoginInProgress] = useState(false);
 
-	const handleLogin = async () => {
-		if (!phone.match(/^\+?\d{10,14}$/)) {
-			setPhoneError(true)
-		} else {
-			try {
-				setLoginInProgress(true)
-				setPhoneError(false)
-				const account = await magic?.auth.loginWithSMS({
-					phoneNumber: phone,
-				})
-				if (account) {
-					saveToken(account, setToken, 'SMS')
-					setPhone('')
-				}
-			} catch (e) {
-				console.log('login error: ' + JSON.stringify(e))
-				if (e instanceof RPCError) {
-					switch (e.code) {
-						case RPCErrorCode.MagicLinkFailedVerification:
-						case RPCErrorCode.MagicLinkExpired:
-						case RPCErrorCode.MagicLinkRateLimited:
-						case RPCErrorCode.UserAlreadyLoggedIn:
-							showToast({message: e.message, type: 'error'})
-							break
-						default:
-							showToast({
-								message:
-									'Something went wrong. Please try again',
-								type: 'error',
-							})
-					}
-				}
-			} finally {
-				setLoginInProgress(false)
-			}
-		}
-	}
+  const handleLogin = async () => {
+    if (!phone.match(/^\+?\d{10,14}$/)) {
+      setPhoneError(true);
+    } else {
+      try {
+        setLoginInProgress(true);
+        setPhoneError(false);
+        const account = await magic?.auth.loginWithSMS({
+          phoneNumber: phone,
+        });
+        if (account) {
+          saveToken(account, setToken, 'SMS');
+          setPhone('');
+        }
+      } catch (e) {
+        console.log('login error: ' + JSON.stringify(e));
+        if (e instanceof RPCError) {
+          switch (e.code) {
+            case RPCErrorCode.MagicLinkFailedVerification:
+            case RPCErrorCode.MagicLinkExpired:
+            case RPCErrorCode.MagicLinkRateLimited:
+            case RPCErrorCode.UserAlreadyLoggedIn:
+              showToast({ message: e.message, type: 'error' });
+              break;
+            default:
+              showToast({
+                message: 'Something went wrong. Please try again',
+                type: 'error',
+              });
+          }
+        }
+      } finally {
+        setLoginInProgress(false);
+      }
+    }
+  };
 
-	return (
-		<Card>
-			<CardHeader id='sms'>SMS Login</CardHeader>
-			<div className='login-method-grid-item-container'>
-				<FormInput
-					onChange={(e) => {
-						if (phoneError) setPhoneError(false)
-						setPhone(e.target.value)
-					}}
-					placeholder={
-						token.length > 0 ? 'Already logged in' : '+11234567890'
-					}
-					value={phone}
-				/>
-				{phoneError && (
-					<span className='self-start text-xs font-semibold text-red-700 justify-self-start'>
-						Enter a valid phone number
-					</span>
-				)}
-				<button
-					className='login-button'
-					disabled={
-						isLoginInProgress ||
-						(token.length > 0 ? false : phone.length == 0)
-					}
-					onClick={() => handleLogin()}>
-					{isLoginInProgress ? <Spinner /> : 'Login'}
-				</button>
-			</div>
-		</Card>
-	)
-}
+  return (
+    <Card>
+      <CardHeader id="sms">SMS Login</CardHeader>
+      <div className="login-method-grid-item-container">
+        <FormInput
+          onChange={(e) => {
+            if (phoneError) setPhoneError(false);
+            setPhone(e.target.value);
+          }}
+          placeholder={token.length > 0 ? 'Already logged in' : '+11234567890'}
+          value={phone}
+        />
+        {phoneError && (
+          <span className="self-start text-xs font-semibold text-red-700 justify-self-start">
+            Enter a valid phone number
+          </span>
+        )}
+        <button
+          className="login-button"
+          disabled={isLoginInProgress || (token.length > 0 ? false : phone.length == 0)}
+          onClick={() => handleLogin()}
+        >
+          {isLoginInProgress ? <Spinner /> : 'Log in / Sign up'}
+        </button>
+      </div>
+    </Card>
+  );
+};
 
-export default SMSOTP
+export default SMSOTP;
diff --git a/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/auth/Twitch.tsx b/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/auth/Twitch.tsx
index 3f03e01..8986ba7 100644
--- a/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/auth/Twitch.tsx
+++ b/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/auth/Twitch.tsx
@@ -1,81 +1,73 @@
-import {LoginProps} from '@/utils/types'
-import {useMagic} from '../MagicProvider'
-import {useEffect, useState} from 'react'
-import {saveToken} from '@/utils/common'
-import Spinner from '../../ui/Spinner'
-import classNames from 'classnames'
-import Image from 'next/image'
-import twitch from 'public/social/Twitch.svg'
-import Card from '../../ui/Card'
-import CardHeader from '../../ui/CardHeader'
+import { LoginProps } from '@/utils/types';
+import { useMagic } from '../MagicProvider';
+import { useEffect, useState } from 'react';
+import { saveToken } from '@/utils/common';
+import Spinner from '../../ui/Spinner';
+import classNames from 'classnames';
+import Image from 'next/image';
+import twitch from 'public/social/Twitch.svg';
+import Card from '../../ui/Card';
+import CardHeader from '../../ui/CardHeader';
 
-const Twitch = ({token, setToken}: LoginProps) => {
-	const {magic} = useMagic()
-	const [isAuthLoading, setIsAuthLoading] = useState<string | null>(null)
+const Twitch = ({ token, setToken }: LoginProps) => {
+  const { magic } = useMagic();
+  const [isAuthLoading, setIsAuthLoading] = useState<string | null>(null);
 
-	useEffect(() => {
-		setIsAuthLoading(localStorage.getItem('isAuthLoading'))
-	}, [])
+  useEffect(() => {
+    setIsAuthLoading(localStorage.getItem('isAuthLoading'));
+  }, []);
 
-	useEffect(() => {
-		const checkLogin = async () => {
-			try {
-				if (magic) {
-					const result = await magic?.oauth.getRedirectResult()
-					//do stuff with user profile data
-					saveToken(result.magic.idToken, setToken, 'SOCIAL')
-					setLoadingFlag('false')
-				}
-			} catch (e) {
-				console.log('social login error: ' + e)
-				setLoadingFlag('false')
-			}
-		}
+  useEffect(() => {
+    const checkLogin = async () => {
+      try {
+        if (magic) {
+          const result = await magic?.oauth.getRedirectResult();
+          //do stuff with user profile data
+          saveToken(result.magic.idToken, setToken, 'SOCIAL');
+          setLoadingFlag('false');
+        }
+      } catch (e) {
+        console.log('social login error: ' + e);
+        setLoadingFlag('false');
+      }
+    };
 
-		checkLogin()
-	}, [magic, setToken])
+    checkLogin();
+  }, [magic, setToken]);
 
-	const login = async () => {
-		setLoadingFlag('true')
-		await magic?.oauth.loginWithRedirect({
-			provider: 'twitch',
-			redirectURI: window.location.origin,
-		})
-	}
+  const login = async () => {
+    setLoadingFlag('true');
+    await magic?.oauth.loginWithRedirect({
+      provider: 'twitch',
+      redirectURI: window.location.origin,
+    });
+  };
 
-	const setLoadingFlag = (loading: string) => {
-		localStorage.setItem('isAuthLoading', loading)
-		setIsAuthLoading(loading)
-	}
+  const setLoadingFlag = (loading: string) => {
+    localStorage.setItem('isAuthLoading', loading);
+    setIsAuthLoading(loading);
+  };
 
-	return (
-		<Card>
-			<CardHeader id='twitcg'>Twitch Login</CardHeader>
-			{isAuthLoading && isAuthLoading !== 'false' ? (
-				<Spinner />
-			) : (
-				<div className='login-method-grid-item-container'>
-					<div
-						className={classNames(
-							'login-method-grid-item-container m-2',
-							token.length > 0
-								? 'cursor-default'
-								: 'cursor-pointer'
-						)}
-						onClick={() => {
-							if (token.length == 0) login()
-						}}>
-						<Image
-							src={twitch}
-							alt='Twitch'
-							height={24}
-							width={24}
-						/>
-						<div className='text-xs font-semibold'>Twitch</div>
-					</div>
-				</div>
-			)}
-		</Card>
-	)
-}
-export default Twitch
+  return (
+    <Card>
+      <CardHeader id="twitcg">Twitch Login</CardHeader>
+      {isAuthLoading && isAuthLoading !== 'false' ? (
+        <Spinner />
+      ) : (
+        <div className="login-method-grid-item-container">
+          <button
+            className="social-login-button"
+            onClick={() => {
+              if (token.length == 0) login();
+            }}
+            disabled={false}
+          >
+            <Image src={twitch} alt="Twitch" height={24} width={24} className="mr-6" />
+            <div className="text-xs font-semibold text-center w-full">Continue with Twitch</div>
+          </button>
+        </div>
+      )}
+    </Card>
+  );
+};
+export default Twitch;
diff --git a/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/auth/Twitter.tsx b/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/auth/Twitter.tsx
index d60db9e..f90a7a2 100644
--- a/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/auth/Twitter.tsx
+++ b/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/auth/Twitter.tsx
@@ -1,81 +1,73 @@
-import {LoginProps} from '@/utils/types'
-import {useMagic} from '../MagicProvider'
-import {useEffect, useState} from 'react'
-import {saveToken} from '@/utils/common'
-import Spinner from '../../ui/Spinner'
-import classNames from 'classnames'
-import Image from 'next/image'
-import twitter from 'public/social/Twitter.svg'
-import Card from '../../ui/Card'
-import CardHeader from '../../ui/CardHeader'
+import { LoginProps } from '@/utils/types';
+import { useMagic } from '../MagicProvider';
+import { useEffect, useState } from 'react';
+import { saveToken } from '@/utils/common';
+import Spinner from '../../ui/Spinner';
+import classNames from 'classnames';
+import Image from 'next/image';
+import twitter from 'public/social/Twitter.svg';
+import Card from '../../ui/Card';
+import CardHeader from '../../ui/CardHeader';
 
-const Twitter = ({token, setToken}: LoginProps) => {
-	const {magic} = useMagic()
-	const [isAuthLoading, setIsAuthLoading] = useState<string | null>(null)
+const Twitter = ({ token, setToken }: LoginProps) => {
+  const { magic } = useMagic();
+  const [isAuthLoading, setIsAuthLoading] = useState<string | null>(null);
 
-	useEffect(() => {
-		setIsAuthLoading(localStorage.getItem('isAuthLoading'))
-	}, [])
+  useEffect(() => {
+    setIsAuthLoading(localStorage.getItem('isAuthLoading'));
+  }, []);
 
-	useEffect(() => {
-		const checkLogin = async () => {
-			try {
-				if (magic) {
-					const result = await magic?.oauth.getRedirectResult()
-					//do stuff with user profile data
-					saveToken(result.magic.idToken, setToken, 'SOCIAL')
-					setLoadingFlag('false')
-				}
-			} catch (e) {
-				console.log('social login error: ' + e)
-				setLoadingFlag('false')
-			}
-		}
+  useEffect(() => {
+    const checkLogin = async () => {
+      try {
+        if (magic) {
+          const result = await magic?.oauth.getRedirectResult();
+          //do stuff with user profile data
+          saveToken(result.magic.idToken, setToken, 'SOCIAL');
+          setLoadingFlag('false');
+        }
+      } catch (e) {
+        console.log('social login error: ' + e);
+        setLoadingFlag('false');
+      }
+    };
 
-		checkLogin()
-	}, [magic, setToken])
+    checkLogin();
+  }, [magic, setToken]);
 
-	const login = async () => {
-		setLoadingFlag('true')
-		await magic?.oauth.loginWithRedirect({
-			provider: 'twitter',
-			redirectURI: window.location.origin,
-		})
-	}
+  const login = async () => {
+    setLoadingFlag('true');
+    await magic?.oauth.loginWithRedirect({
+      provider: 'twitter',
+      redirectURI: window.location.origin,
+    });
+  };
 
-	const setLoadingFlag = (loading: string) => {
-		localStorage.setItem('isAuthLoading', loading)
-		setIsAuthLoading(loading)
-	}
+  const setLoadingFlag = (loading: string) => {
+    localStorage.setItem('isAuthLoading', loading);
+    setIsAuthLoading(loading);
+  };
 
-	return (
-		<Card>
-			<CardHeader id='twitter'>Twitter Login</CardHeader>
-			{isAuthLoading && isAuthLoading !== 'false' ? (
-				<Spinner />
-			) : (
-				<div className='login-method-grid-item-container'>
-					<div
-						className={classNames(
-							'login-method-grid-item-container m-2',
-							token.length > 0
-								? 'cursor-default'
-								: 'cursor-pointer'
-						)}
-						onClick={() => {
-							if (token.length == 0) login()
-						}}>
-						<Image
-							src={twitter}
-							alt='Twitter'
-							height={24}
-							width={24}
-						/>
-						<div className='text-xs font-semibold'>Twitter</div>
-					</div>
-				</div>
-			)}
-		</Card>
-	)
-}
-export default Twitter
+  return (
+    <Card>
+      <CardHeader id="twitter">Twitter Login</CardHeader>
+      {isAuthLoading && isAuthLoading !== 'false' ? (
+        <Spinner />
+      ) : (
+        <div className="login-method-grid-item-container">
+          <button
+            className="social-login-button"
+            onClick={() => {
+              if (token.length == 0) login();
+            }}
+            disabled={false}
+          >
+            <Image src={twitter} alt="Twitter" height={24} width={24} className="mr-6" />
+            <div className="text-xs font-semibold text-center w-full">Continue with Twitter</div>
+          </button>
+        </div>
+      )}
+    </Card>
+  );
+};
+export default Twitter;
diff --git a/scaffolds/nextjs-flow-dedicated-wallet/template/src/styles/globals.css b/scaffolds/nextjs-flow-dedicated-wallet/template/src/styles/globals.css
index aba4039..7222af2 100644
--- a/scaffolds/nextjs-flow-dedicated-wallet/template/src/styles/globals.css
+++ b/scaffolds/nextjs-flow-dedicated-wallet/template/src/styles/globals.css
@@ -5,301 +5,321 @@
 @tailwind utilities;
 
 :root {
-	--foreground-rgb: 0, 0, 0;
-	--background-start-rgb: 214, 219, 220;
-	--background-end-rgb: 255, 255, 255;
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
 }
 
 @media (prefers-color-scheme: dark) {
-	:root {
-		--foreground-rgb: 255, 255, 255;
-		--background-start-rgb: 0, 0, 0;
-		--background-end-rgb: 0, 0, 0;
-	}
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+  }
 }
 
 html,
 body {
-	@apply m-0 p-0 bg-[#f8f8fa] scroll-pt-12;
-	font-family: 'Inter', sans-serif;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
+  @apply m-0 p-0 bg-[#f8f8fa] scroll-pt-12;
+  font-family: 'Inter', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 nav > ul > li {
-	@apply text-left list-none text-[#777679] cursor-pointer mb-[15px];
+  @apply text-left list-none text-[#777679] cursor-pointer mb-[15px];
 }
 
 ul {
-	@apply w-fit m-0 pl-[30px] pr-0 py-0;
+  @apply w-fit m-0 pl-[30px] pr-0 py-0;
 }
 
 .active {
-	@apply text-[#6851ff] font-semibold;
+  @apply text-[#6851ff] font-semibold;
 }
 
 .active::before {
-	@apply content-['\2022'] text-[#6851ff] font-[bold] inline-block w-[1em] ml-[-1em];
+  @apply content-['\2022'] text-[#6851ff] font-[bold] inline-block w-[1em] ml-[-1em];
 }
 
 .nft {
-	@apply text-[#777679];
+  @apply text-[#777679];
 }
 
 .nft-name {
-	@apply text-black font-semibold;
-	font-family: 'Inter';
+  @apply font-semibold text-black;
+  font-family: 'Inter';
 }
 
 .nft-list {
-	@apply overflow-auto max-h-[270px];
+  @apply overflow-auto max-h-[270px];
 }
 
 .nft:not(:last-child) {
-	@apply mb-2.5;
+  @apply mb-2.5;
 }
 
 .cards-container {
-	@apply mt-[-250px] relative;
+  @apply relative top-[30px] md:top-[-60px] lg:top-[-60px];
 }
 
 @media only screen and (max-width: 767px) {
-	.cards-container {
-		@apply mt-[-89px];
-	}
+  .cards-container {
+    @apply mt-[-89px];
+  }
 }
 
 .network-dropdown {
-	@apply w-fit m-auto rounded-xl;
+  @apply m-auto w-fit rounded-xl;
 }
 
 .active-network {
-	@apply border w-[264px] flex items-center cursor-pointer justify-between m-auto px-4 py-3 rounded-xl border-solid border-[#dddbe0] bg-[#fff];
+  @apply border w-[264px] flex items-center cursor-pointer justify-between m-auto px-4 py-3 rounded-xl border-solid border-[#dddbe0] bg-[#fff];
 }
 
 .active-network::selection {
-	@apply bg-transparent;
+  @apply bg-transparent;
 }
 
 .rotate {
-	@apply rotate-180;
+  @apply rotate-180;
 }
 
 .network-options {
-	@apply overflow-hidden w-fit border mx-auto my-[5px] px-0 py-[5px] rounded-xl border-solid border-[#dddbe0] bg-[#fff];
+  @apply overflow-hidden w-fit border mx-auto my-[5px] px-0 py-[5px] rounded-xl border-solid border-[#dddbe0] bg-[#fff];
 }
 
 .network-dropdown-option {
-	@apply w-[264px] flex items-center justify-start transition-[0.1s] m-auto px-4 py-3 bg-[#fff];
+  @apply w-[264px] flex items-center justify-start transition-[0.1s] m-auto px-4 py-3 bg-[#fff];
 }
 
 .network-dropdown-option:hover {
-	@apply text-white cursor-pointer bg-[#6851ff];
+  @apply text-white cursor-pointer bg-[#6851ff];
 }
 
 .network-dropdown-option:active {
-	@apply opacity-50;
+  @apply opacity-50;
 }
 .magic-logo {
-	@apply mt-10 mb-[15px] mx-0 text-center;
+  @apply mb-[15px] mx-0 text-center;
 }
 .demo-sub-header {
-	@apply text-[rgba(255,255,255,0.5)] text-xl font-normal m-0;
-	font-family: monospace;
+  @apply text-[rgba(255,255,255,0.5)] text-xl font-normal m-0;
+  font-family: monospace;
 }
 
 .home-page {
-	@apply flex flex-col justify-center items-center min-h-screen relative;
+  @apply flex flex-col justify-center items-center min-h-screen relative bg-[length:100vw_320px] bg-no-repeat bg-[url('/main.svg')];
 }
 
 .login-page {
-	@apply flex flex-col items-center min-h-screen bg-gray-300;
+  @apply flex flex-col items-center min-h-screen bg-gray-300;
 }
 .login-method-grid {
-	@apply w-[100%] grid grid-cols-4 gap-5 p-4;
+  @apply max-w-[100%] grid-rows-3 gap-5 p-4 mt-8;
 }
 
 .login-method-grid-item-container {
-	@apply flex flex-col items-center justify-center;
+  @apply flex flex-col items-center justify-center;
 }
 
 .login-button {
-	@apply w-full h-12 text-white font-semibold text-base leading-6 transition-[0.1s] text-center transition-[0.1s] m-auto px-2 py-3 rounded-[300px] border-[none];
-	background: #a799ff;
+  @apply w-full h-12 text-white font-semibold text-base leading-6 transition-[0.1s] text-center transition-[0.1s] m-auto px-2 py-3 rounded-[300px] border-[none];
+  background: #8271f3;
 }
 
 .login-button:disabled {
-	background: #a799ff;
+  background: #a799ff;
 }
 
 .login-button:hover:enabled {
-	@apply cursor-pointer;
-	background: linear-gradient(0deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)),
-		#a799ff;
+  @apply cursor-pointer;
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)), #a799ff;
 }
 .login-button:active:enabled {
-	@apply opacity-50 cursor-pointer scale-[0.99];
-	background: #a799ff;
+  @apply opacity-50 cursor-pointer scale-[0.99];
+  background: #a799ff;
 }
 
 .links {
-	@apply flex justify-center text-white font-semibold mt-5 mb-3 mx-auto;
+  @apply flex justify-center mx-auto mt-5 text-sm mb-3 font-semibold text-white;
 }
 .link {
-	@apply transition-[0.1s] px-[30px] py-0;
+  @apply transition-[0.1s] px-[30px] py-0;
 }
 
 @media only screen and (max-width: 420px) {
-	.link {
-		@apply px-[15px] py-0;
-	}
+  .link {
+    @apply px-[15px] py-0;
+  }
 }
 @media only screen and (max-width: 320px) {
-	.link {
-		@apply px-[5px] py-0;
-	}
+  .link {
+    @apply px-[5px] py-0;
+  }
 }
 
 .link > a {
-	@apply cursor-pointer;
+  @apply cursor-pointer;
 }
 .link-divider {
-	@apply h-5 w-px;
+  @apply w-px h-5;
 }
 
 .footer-links {
-	@apply flex items-center absolute w-full mt-[30px] mb-0 mx-auto bottom-10;
+  @apply flex items-center absolute w-full mt-[30px] mb-0 mx-auto bottom-10;
 }
 .wallet-method-container {
-	@apply text-left;
+  @apply text-left;
 }
 
 .wallet-method {
-	@apply w-fit text-[#522fd4] bg-[#edebff] text-base cursor-pointer font-medium transition-[0.1s] h-8 px-3 py-1.5 rounded-[32px] border-[none];
-	font-family: monospace;
+  @apply w-fit text-[#522fd4] bg-[#edebff] text-base cursor-pointer font-medium transition-[0.1s] h-8 px-3 py-1.5 rounded-[32px] border-[none];
+  font-family: monospace;
 }
 
 .wallet-method:hover:enabled {
-	background: linear-gradient(0deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)),
-		#edebff;
-	background-blend-mode: color-burn, normal;
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)), #edebff;
+  background-blend-mode: color-burn, normal;
 }
 
 .wallet-method:active:enabled {
-	@apply opacity-50 scale-[0.99];
-	background: linear-gradient(0deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)),
-		#edebff;
+  @apply opacity-50 scale-[0.99];
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)), #edebff;
 }
 .wallet-method-desc {
-	@apply text-[#77767a] text-left text-sm mt-2.5;
+  @apply text-[#77767a] text-left text-sm mt-2.5;
 }
 
 .form-input {
-	@apply box-border flex flex-row items-center w-full h-12 border text-base leading-6 text-[#18171a] mb-[15px] px-4 py-3 rounded-[10px] border-solid border-[#dddbe0];
-	background: #ffffff;
+  @apply box-border flex flex-row items-center w-full h-12 border text-base leading-6 text-[#18171a] mb-[15px] px-4 py-3 rounded-[10px] border-solid border-[#dddbe0];
+  background: #ffffff;
 }
 
 .form-input::placeholder {
-	color: #77767a;
+  color: #77767a;
 }
 
 .form-button {
-	@apply flex flex-row justify-center items-center w-full h-12 text-[#522fd4] font-semibold text-base leading-6 transition-[0.1s] px-6 py-3 rounded-[300px] border-[none] bg-[#edebff];
+  @apply flex flex-row justify-center items-center w-full h-12 text-[#522fd4] font-semibold text-base leading-6 transition-[0.1s] px-6 py-3 rounded-[300px] border-[none] bg-[#edebff];
 }
 
 .form-button:disabled {
-	@apply opacity-50;
+  @apply opacity-50;
 }
 
 .form-button:hover:enabled {
-	@apply cursor-pointer;
-	background: linear-gradient(0deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)),
-		#edebff;
+  @apply cursor-pointer;
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)), #edebff;
 }
 .form-button:active:enabled {
-	@apply opacity-50 scale-[0.99];
-	background: linear-gradient(0deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)),
-		#edebff;
+  @apply opacity-50 scale-[0.99];
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)), #edebff;
 }
 
 .loading-container {
-	@apply w-[50px] text-center flex items-center justify-center cursor-default;
+  @apply w-[50px] text-center flex items-center justify-center cursor-default;
 }
 .loading {
-	@apply animate-spin cursor-default;
+  @apply cursor-default animate-spin;
 }
 
 @keyframes rotation {
-	0% {
-		transform: rotate(0);
-	}
-	100% {
-		transform: rotate(360deg);
-	}
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
 .card {
-	@apply w-[300px] flex flex-col shadow-[0px_4px_24px_rgba(49,49,49,0.1)] mt-0 mb-[27px] mx-auto px-6 py-8 rounded-2xl bg-[#ffffff];
+  @apply w-[344px] flex flex-col shadow-[0px_4px_24px_rgba(49,49,49,0.1)] mt-0 mb-[27px] mx-auto px-6 py-8 rounded-2xl bg-[#ffffff];
 }
 
 .card-header {
-	@apply text-xl font-semibold text-left mt-0 mb-[25px];
+  @apply text-xl font-semibold text-left mt-0 mb-[25px];
 }
 .card-label-container {
-	@apply flex justify-between items-center mb-3;
+  @apply flex items-center justify-between mb-3;
 }
 
 .card-label {
-	@apply text-sm font-medium  cursor-pointer;
+  @apply text-sm font-medium cursor-pointer;
 }
 .toast {
-	@apply fixed w-fit text-white font-medium shadow-[4px_8px_20px_rgba(0,0,0,0.15)] mx-auto my-0 px-4 py-2 rounded-[10px] top-[30px] inset-x-0 bg-[#00875f];
+  @apply fixed w-fit text-white font-medium shadow-[4px_8px_20px_rgba(0,0,0,0.15)] mx-auto my-0 px-4 py-2 rounded-[10px] top-[30px] inset-x-0 bg-[#00875f];
 }
 
 .action-button {
-	@apply font-semibold text-[#6851ff] cursor-pointer transition-[0.1s];
+  @apply font-semibold text-[#6851ff] cursor-pointer transition-[0.1s];
 }
 .disconnect-button {
-	@apply font-semibold text-[#d43100] cursor-pointer transition-[0.1s];
+  @apply font-semibold text-[#d43100] cursor-pointer transition-[0.1s];
 }
 .action-button:hover,
 .disconnect-button:hover {
-	@apply opacity-70;
+  @apply opacity-70;
 }
 .action-button:active,
 .disconnect-button:active {
-	@apply scale-[0.98];
+  @apply scale-[0.98];
 }
 .code {
-	@apply text-base text-left p-2.5 rounded-[10px];
-	font-family: monospace;
-	background: #f8f8fa;
-	word-wrap: break-word;
+  @apply text-base text-left p-2.5 rounded-[10px];
+  font-family: monospace;
+  background: #f8f8fa;
+  word-wrap: break-word;
 }
 .error {
-	@apply self-start text-xs font-semibold text-red-700 justify-self-start;
+  @apply self-start text-xs font-semibold text-red-700 justify-self-start;
 }
 .divider {
-	@apply mx-0 my-[15px] border-b-[#ededf3] border-b border-solid;
+  @apply mx-0 my-[15px] border-b-[#ededf3] border-b border-solid;
 }
 .flex-row {
-	@apply flex items-center;
+  @apply flex items-center;
 }
 .green-dot {
-	@apply h-1.5 w-1.5 bg-[#00cc8f] mr-2.5 rounded-[50%];
+  @apply h-1.5 w-1.5 bg-[#00cc8f] mr-2.5 rounded-[50%];
 }
 .connected {
-	@apply text-base mx-0 my-[5px];
+  @apply text-base mx-0 my-[5px];
 }
 a {
-	all: unset;
+  all: unset;
 }
 
 .app-header-container {
-	@apply block w-full drop-shadow-[0_35px_35px_rgba(0,0,0,0.25)] min-h-[30vh] flex flex-col items-center bg-magic block;
-	text-align: -webkit-center;
+  @apply block w-full drop-shadow-[0_35px_35px_rgba(0,0,0,0.25)] min-h-[40%] flex-col gap-2.5 p-8 items-center bg-[url('/login_bg.png')] bg-cover bg-no-repeat pb-20;
+  text-align: -webkit-center;
 }
 
 .redirect-container {
-	@apply flex flex-col items-center min-h-screen bg-[length:100%_auto] bg-[url('/background.svg')];
+  @apply flex flex-col items-center h-screen bg-center bg-cover bg-no-repeat bg-[url('/redirect_bg.png')];
+}
+
+.redirect-card {
+  @apply bg-[#F8F8FA] rounded-[10px] shadow-[0px_4px_24px_rgba(49,49,49,0.1)] p-2 m-12;
+}
+
+.social-login-button {
+  @apply flex flex-row min-w-[296px] h-12 text-[#3C4043] transition-[0.1s] px-6 py-3 rounded-[300px] bg-[#ffffff] border-2 border-[#DADCE0] relative top-16;
+}
+
+.social-login-button:disabled {
+  @apply opacity-50;
+}
+
+.social-login-button:hover:enabled {
+  @apply cursor-pointer;
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)), #ffffff;
+}
+.social-login-button:active:enabled {
+  @apply opacity-50 scale-[0.99];
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)), #ffffff;
+}
+
+.api-button {
+  @apply bg-[#6844bc] text-[#FFFFFF] flex w-[280px] justify-center items-center h-12 font-semibold text-base leading-6 transition-[0.1s] px-6 py-3 rounded-[300px] border-[none];
 }
diff --git a/scaffolds/nextjs-flow-dedicated-wallet/template/tailwind.config.js b/scaffolds/nextjs-flow-dedicated-wallet/template/tailwind.config.js
index 1da1a7e..0fc0404 100644
--- a/scaffolds/nextjs-flow-dedicated-wallet/template/tailwind.config.js
+++ b/scaffolds/nextjs-flow-dedicated-wallet/template/tailwind.config.js
@@ -1,19 +1,17 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-	content: [
-		'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
-		'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
-		'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
-	],
-	theme: {
-		extend: {
-			backgroundImage: {
-				magic: "url('../../public//background.svg')",
-				'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-				'gradient-conic':
-					'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
-			},
-		},
-	},
-	plugins: [],
-}
+  content: [
+    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+        'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+      },
+    },
+  },
+  plugins: [],
+};
diff --git a/scaffolds/nextjs-solana-dedicated-wallet/scaffold.tsx b/scaffolds/nextjs-solana-dedicated-wallet/scaffold.tsx
index 332196e..e6c4776 100644
--- a/scaffolds/nextjs-solana-dedicated-wallet/scaffold.tsx
+++ b/scaffolds/nextjs-solana-dedicated-wallet/scaffold.tsx
@@ -10,9 +10,12 @@ export default createScaffold<NextDedicatedWalletData>(
     <Zombi {...props} prompts={mergePrompts(AuthTypePrompt.questions, PublishableApiKeyPrompt.questions)}>
       {(data) => (
         <>
-          <Template source="./public/background.svg" />
+          <Template source="./public/info.svg" />
+          <Template source="./public/link_white.svg" />
+          <Template source="./public/login_bg.png" />
+          <Template source="./public/logo.svg" />
+          <Template source="./public/redirect_bg.png" />
           <Template source="./public/favicon.ico" />
-          <Template source="./public/magic_color_white.svg" />
           <Template source="./public/link.svg" />
           <Template source="./.env.example" />
           <Template source="./.eslintrc.json" />
diff --git a/scaffolds/nextjs-solana-dedicated-wallet/template/public/background.svg b/scaffolds/nextjs-solana-dedicated-wallet/template/public/background.svg
deleted file mode 100644
index c611daa..0000000
--- a/scaffolds/nextjs-solana-dedicated-wallet/template/public/background.svg
+++ /dev/null
@@ -1,32 +0,0 @@
-<svg preserveAspectRatio="none" viewBox="0 0 844 280" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_9511_133829)">
-<rect width="844" height="280" fill="#24163A"/>
-<g opacity="0.7">
-<path opacity="0.4" d="M623.509 93.4622L622.209 96.2932L623.509 99.1243L620.681 97.8225L617.854 99.1243L619.154 96.2932L617.854 93.4622L620.681 94.7639L623.509 93.4622Z" fill="white"/>
-<ellipse cx="735.376" cy="108.082" rx="2.63264" ry="2.63601" fill="#A799FF"/>
-<ellipse opacity="0.5" cx="231.157" cy="197.282" rx="2.63264" ry="2.63601" fill="#A799FF"/>
-<ellipse cx="230.974" cy="88.4298" rx="1.7131" ry="1.71528" transform="rotate(135 230.974 88.4298)" fill="#A799FF"/>
-<circle opacity="0.7" cx="774.406" cy="167.149" r="1.71528" fill="#90F0D3"/>
-<path d="M545.413 104.836L546.175 110.004L551.336 110.767L546.175 111.53L545.413 116.698L544.651 111.53L539.49 110.767L544.651 110.004L545.413 104.836Z" fill="#A799FF"/>
-<ellipse opacity="0.6" cx="138.868" cy="138.535" rx="1.71528" ry="1.71748" fill="#A799FF"/>
-</g>
-<g style="mix-blend-mode:color-dodge" opacity="0.4" filter="url(#filter0_f_9511_133829)">
-<circle cx="801.205" cy="380" r="296" fill="url(#paint0_linear_9511_133829)"/>
-</g>
-<path d="M102.381 157L103.288 165.808L112.096 166.715L103.288 167.622L102.381 176.43L101.475 167.622L92.6663 166.715L101.475 165.808L102.381 157Z" fill="#A799FF"/>
-</g>
-<defs>
-<filter id="filter0_f_9511_133829" x="305.205" y="-116" width="992" height="992" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="100" result="effect1_foregroundBlur_9511_133829"/>
-</filter>
-<linearGradient id="paint0_linear_9511_133829" x1="409.48" y1="179.725" x2="1097.2" y2="836.899" gradientUnits="userSpaceOnUse">
-<stop stop-color="#808CFF"/>
-<stop offset="1" stop-color="#FC63FF"/>
-</linearGradient>
-<clipPath id="clip0_9511_133829">
-<rect width="844" height="280" fill="white"/>
-</clipPath>
-</defs>
-</svg>
\ No newline at end of file
diff --git a/scaffolds/nextjs-solana-dedicated-wallet/template/public/info.svg b/scaffolds/nextjs-solana-dedicated-wallet/template/public/info.svg
new file mode 100644
index 0000000..df6edb9
--- /dev/null
+++ b/scaffolds/nextjs-solana-dedicated-wallet/template/public/info.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.47581 2 2 6.51613 2 12C2 17.5242 6.47581 22 12 22C17.4839 22 22 17.5242 22 12C22 6.51613 17.4839 2 12 2ZM11.9999 6.19352C11.2741 6.19352 10.7096 6.79835 10.7096 7.48384C10.7096 8.20964 11.2741 8.77416 11.9999 8.77416C12.6854 8.77416 13.2903 8.20964 13.2903 7.48384C13.2903 6.79835 12.6854 6.19352 11.9999 6.19352ZM10.5483 15.8709C10.2661 15.8709 10.0645 16.1129 10.0645 16.3548V16.6774C10.0645 16.9596 10.2661 17.1613 10.5483 17.1613H13.4515C13.6935 17.1613 13.9354 16.9596 13.9354 16.6774V16.3548C13.9354 16.1129 13.6935 15.8709 13.4515 15.8709H12.9677V10.2258C12.9677 9.98384 12.7257 9.7419 12.4838 9.7419H10.5483C10.2661 9.7419 10.0645 9.98384 10.0645 10.2258V10.5484C10.0645 10.8306 10.2661 11.0322 10.5483 11.0322H11.0322V15.8709H10.5483Z" fill="#4E4D52"/>
+</svg>
\ No newline at end of file
diff --git a/scaffolds/nextjs-solana-dedicated-wallet/template/public/link_white.svg b/scaffolds/nextjs-solana-dedicated-wallet/template/public/link_white.svg
new file mode 100644
index 0000000..c87852b
--- /dev/null
+++ b/scaffolds/nextjs-solana-dedicated-wallet/template/public/link_white.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.38889 6.33333C5.38889 6.08285 5.48839 5.84263 5.66551 5.66551C5.84263 5.48839 6.08285 5.38889 6.33333 5.38889H10.1111C10.3616 5.38889 10.6018 5.28938 10.7789 5.11227C10.9561 4.93515 11.0556 4.69493 11.0556 4.44444C11.0556 4.19396 10.9561 3.95374 10.7789 3.77662C10.6018 3.5995 10.3616 3.5 10.1111 3.5H6.33333C5.58189 3.5 4.86122 3.79851 4.32986 4.32986C3.79851 4.86122 3.5 5.58189 3.5 6.33333V17.6667C3.5 18.4181 3.79851 19.1388 4.32986 19.6701C4.86122 20.2015 5.58189 20.5 6.33333 20.5H17.6667C18.4181 20.5 19.1388 20.2015 19.6701 19.6701C20.2015 19.1388 20.5 18.4181 20.5 17.6667V13.8889C20.5 13.6384 20.4005 13.3982 20.2234 13.2211C20.0463 13.0439 19.806 12.9444 19.5556 12.9444C19.3051 12.9444 19.0648 13.0439 18.8877 13.2211C18.7106 13.3982 18.6111 13.6384 18.6111 13.8889V17.6667C18.6111 17.9171 18.5116 18.1574 18.3345 18.3345C18.1574 18.5116 17.9171 18.6111 17.6667 18.6111H6.33333C6.08285 18.6111 5.84263 18.5116 5.66551 18.3345C5.48839 18.1574 5.38889 17.9171 5.38889 17.6667V6.33333ZM14.8333 3.5C14.5829 3.5 14.3426 3.5995 14.1655 3.77662C13.9884 3.95374 13.8889 4.19396 13.8889 4.44444C13.8889 4.69493 13.9884 4.93515 14.1655 5.11227C14.3426 5.28938 14.5829 5.38889 14.8333 5.38889H17.2757L11.3323 11.3323C11.1602 11.5104 11.065 11.749 11.0672 11.9966C11.0693 12.2442 11.1687 12.4811 11.3438 12.6562C11.5189 12.8313 11.7558 12.9307 12.0034 12.9328C12.251 12.935 12.4896 12.8398 12.6677 12.6677L18.6111 6.72433V9.16667C18.6111 9.41715 18.7106 9.65737 18.8877 9.83449C19.0648 10.0116 19.3051 10.1111 19.5556 10.1111C19.806 10.1111 20.0463 10.0116 20.2234 9.83449C20.4005 9.65737 20.5 9.41715 20.5 9.16667V4.44444C20.5 4.19396 20.4005 3.95374 20.2234 3.77662C20.0463 3.5995 19.806 3.5 19.5556 3.5H14.8333Z" fill="#FFFFFF"/>
+</svg>
\ No newline at end of file
diff --git a/scaffolds/nextjs-solana-dedicated-wallet/template/public/login_bg.png b/scaffolds/nextjs-solana-dedicated-wallet/template/public/login_bg.png
new file mode 100644
index 0000000..a4021c4
Binary files /dev/null and b/scaffolds/nextjs-solana-dedicated-wallet/template/public/login_bg.png differ
diff --git a/scaffolds/nextjs-solana-dedicated-wallet/template/public/logo.svg b/scaffolds/nextjs-solana-dedicated-wallet/template/public/logo.svg
new file mode 100644
index 0000000..e13da68
--- /dev/null
+++ b/scaffolds/nextjs-solana-dedicated-wallet/template/public/logo.svg
@@ -0,0 +1,9 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Logo">
+<g id="Favicon">
+<path d="M16 0C17.461 1.69611 19.0723 3.27125 20.8148 4.70713C19.6537 8.27674 19.0287 12.0692 19.0287 16C19.0287 19.9308 19.6537 23.7233 20.8148 27.2929C19.0723 28.7288 17.461 30.3039 16 32C14.539 30.3039 12.9277 28.7287 11.1852 27.2929C12.3463 23.7233 12.9713 19.9308 12.9713 16C12.9713 12.0692 12.3463 8.27675 11.1852 4.70713C12.9277 3.27126 14.539 1.69612 16 0Z" fill="white"/>
+<path d="M7.85464 24.8249C6.01021 23.5995 4.05274 22.5166 2 21.5929C2.56942 19.8237 2.87573 17.9458 2.87573 16C2.87573 14.0542 2.56942 12.1763 2 10.4071C4.05273 9.48345 6.0102 8.40049 7.85464 7.17508C8.55991 10.0081 8.93309 12.9628 8.93309 16C8.93309 19.0372 8.55991 21.9919 7.85464 24.8249Z" fill="white"/>
+<path d="M23.0669 16C23.0669 19.0373 23.4401 21.9919 24.1454 24.8249C25.9898 23.5995 27.9473 22.5166 30 21.5929C29.4306 19.8237 29.1243 17.9458 29.1243 16C29.1243 14.0542 29.4306 12.1763 30 10.4071C27.9473 9.48345 25.9898 8.40049 24.1454 7.17507C23.4401 10.0081 23.0669 12.9628 23.0669 16Z" fill="white"/>
+</g>
+</g>
+</svg>
\ No newline at end of file
diff --git a/scaffolds/nextjs-solana-dedicated-wallet/template/public/magic_color_white.svg b/scaffolds/nextjs-solana-dedicated-wallet/template/public/magic_color_white.svg
deleted file mode 100644
index 3267c05..0000000
--- a/scaffolds/nextjs-solana-dedicated-wallet/template/public/magic_color_white.svg
+++ /dev/null
@@ -1,34 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 25.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 832 300" style="enable-background:new 0 0 832 300;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
-	.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#6851FF;}
-</style>
-<path class="st0" d="M711.6,105.9c8.8,0,15.9-7.1,15.9-15.9S720.4,74,711.6,74c-8.8,0-15.9,7.1-15.9,15.9S702.8,105.9,711.6,105.9z
-	 M328.8,88h32.9l34.7,82.9h1.5L432.7,88h32.9v123.4h-25.9v-80.3h-1L406,210.8h-17.6l-32.6-80h-1v80.7h-25.9V88z M515.6,213.1
-	c-9,0-16.5-2.3-22.5-6.9c-6-4.6-8.9-11.5-8.9-20.7c0-6.9,1.7-12.3,5-16.3c3.3-3.9,7.7-6.8,13.1-8.6c5.4-1.8,11.3-3.1,17.5-3.6
-	c8.2-0.8,14.1-1.6,17.6-2.5c3.5-0.9,5.3-2.8,5.3-5.8v-0.4c0-3.8-1.2-6.8-3.7-8.9c-2.4-2.1-5.9-3.1-10.3-3.1c-4.7,0-8.5,1-11.3,3
-	s-4.6,4.6-5.5,7.7l-24.3-1.9c1.8-8.4,6.3-15.1,13.4-20.1c7.2-4.9,16.4-7.4,27.8-7.4c7,0,13.6,1.1,19.7,3.3c6.1,2.2,11,5.6,14.8,10.2
-	c3.8,4.6,5.7,10.5,5.7,17.9v62.4H544v-12.8h-0.7c-2.3,4.3-5.7,7.8-10.3,10.5C528.3,211.8,522.5,213.1,515.6,213.1z M523.1,195.4
-	c5.7,0,10.5-1.6,14.2-4.9c3.7-3.3,5.5-7.4,5.5-12.2v-9.8c-1,0.7-2.6,1.3-4.8,1.8c-2.1,0.5-4.4,1-6.9,1.4c-2.4,0.4-4.6,0.7-6.5,1
-	c-4.6,0.6-8.3,1.9-11.2,3.8c-2.8,1.9-4.2,4.6-4.2,8.3c0,3.5,1.3,6.2,3.9,8C515.7,194.5,519,195.4,523.1,195.4z M601.8,240.1
-	c7.3,4.9,17.3,7.4,30,7.4c9,0,17-1.3,24-4c6.9-2.7,12.4-6.6,16.3-11.8c4-5.2,6-11.7,6-19.3v-93.5H652v15.6h-1
-	c-1.2-2.5-2.8-5.1-5.1-7.7c-2.2-2.6-5.1-4.7-8.7-6.4c-3.6-1.8-8-2.7-13.3-2.7c-6.9,0-13.3,1.8-19.1,5.3c-5.8,3.5-10.5,8.7-14,15.7
-	c-3.5,7-5.2,15.8-5.2,26.3c0,10.2,1.7,18.7,5.1,25.4c3.5,6.7,8.1,11.6,13.9,14.9c5.8,3.3,12.3,4.9,19.4,4.9c7.6,0,13.5-1.5,17.9-4.6
-	c4.4-3.1,7.4-6.6,9.1-10.4h1.1v16.9c0,6.1-1.9,10.4-5.6,13.1c-3.7,2.7-8.4,4-14.1,4c-5.8,0-10.2-1-13.4-3.1c-3.1-2-5.2-4.3-6.2-6.8
-	l-24.3,3.2C590.1,229.2,594.6,235.2,601.8,240.1z M647,183.9c-3.5,4.6-8.3,6.9-14.7,6.9c-6.4,0-11.4-2.3-14.8-7
-	c-3.4-4.7-5.1-11-5.1-19c0-7.9,1.7-14.3,5.1-19.3c3.4-5,8.4-7.5,14.8-7.5c6.4,0,11.3,2.4,14.7,7.3c3.4,4.9,5.2,11.4,5.2,19.5
-	C652.3,173,650.5,179.3,647,183.9z M699,211.4v-92.6h26.2v92.6H699z M764,207.2c7,4,15.3,6,25,6c8.4,0,15.7-1.5,21.9-4.5
-	c6.2-3,11-7.2,14.5-12.6c3.5-5.4,5.5-11.6,5.9-18.7h-24.8c-0.8,4.9-2.7,8.8-5.8,11.5c-3.1,2.7-6.9,4-11.4,4c-6.1,0-11-2.4-14.7-7.2
-	c-3.7-4.9-5.5-11.7-5.5-20.6c0-8.8,1.8-15.5,5.5-20.3s8.6-7.2,14.7-7.2c4.8,0,8.7,1.4,11.6,4.3c3,2.8,4.8,6.5,5.5,11.2h24.8
-	c-0.4-7.2-2.4-13.4-6-18.7c-3.6-5.3-8.5-9.4-14.7-12.4c-6.2-2.9-13.4-4.4-21.7-4.4c-9.6,0-17.8,2-24.8,6.1
-	c-6.9,4-12.3,9.6-16.1,16.8c-3.7,7.2-5.6,15.5-5.6,25c0,9.4,1.8,17.6,5.5,24.8C751.7,197.5,757,203.1,764,207.2z"/>
-<path class="st1" d="M124.4,0c13,15.9,27.3,30.7,42.8,44.1c-10.3,33.5-15.9,69-15.9,105.9s5.6,72.4,15.9,105.9
-	c-15.5,13.5-29.8,28.2-42.8,44.1c-13-15.9-27.3-30.7-42.8-44.1c10.3-33.5,15.9-69,15.9-105.9c0-36.9-5.6-72.4-15.9-105.9
-	C97.1,30.7,111.4,15.9,124.4,0z M52,232.7c-16.4-11.5-33.8-21.6-52-30.3c5.1-16.6,7.8-34.2,7.8-52.4c0-18.2-2.7-35.8-7.8-52.4
-	c18.2-8.7,35.6-18.8,52-30.3c6.3,26.6,9.6,54.3,9.6,82.7C61.6,178.5,58.3,206.2,52,232.7z M187.2,150c0,28.5,3.3,56.2,9.6,82.7
-	c16.4-11.5,33.8-21.6,52-30.3c-5.1-16.6-7.8-34.2-7.8-52.4c0-18.2,2.7-35.8,7.8-52.4c-18.2-8.7-35.6-18.8-52-30.3
-	C190.5,93.8,187.2,121.5,187.2,150z"/>
-</svg>
diff --git a/scaffolds/nextjs-solana-dedicated-wallet/template/public/redirect_bg.png b/scaffolds/nextjs-solana-dedicated-wallet/template/public/redirect_bg.png
new file mode 100644
index 0000000..aa322ee
Binary files /dev/null and b/scaffolds/nextjs-solana-dedicated-wallet/template/public/redirect_bg.png differ
diff --git a/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/Dashboard.tsx b/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/Dashboard.tsx
index 25a067a..4e02d36 100644
--- a/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/Dashboard.tsx
+++ b/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/Dashboard.tsx
@@ -1,27 +1,25 @@
-import React from 'react'
-import WalletMethods from './cards/WalletMethodsCard'
-import SendTransaction from './cards/SendTransactionCard'
-import Spacer from '@/components/ui/Spacer'
-import {LoginProps} from '@/utils/types'
-import UserInfo from './cards/UserInfoCard'
-import DevLinks from './DevLinks'
-import Header from './Header'
+import React from 'react';
+import WalletMethods from './cards/WalletMethodsCard';
+import SendTransaction from './cards/SendTransactionCard';
+import Spacer from '@/components/ui/Spacer';
+import { LoginProps } from '@/utils/types';
+import UserInfo from './cards/UserInfoCard';
+import DevLinks from './DevLinks';
+import Header from './Header';
 
-export default function Dashboard({token, setToken}: LoginProps) {
-	return (
-		<div className='home-page'>
-			<Header />
-			<Spacer size={32} />
-			<Spacer size={120} />
-			<div className='cards-container'>
-				<SendTransaction />
-				<Spacer size={10} />
-				<UserInfo token={token} setToken={setToken} />
-				<Spacer size={10} />
-				<WalletMethods token={token} setToken={setToken} />
-				<Spacer size={15} />
-			</div>
-			<DevLinks primary />
-		</div>
-	)
+export default function Dashboard({ token, setToken }: LoginProps) {
+  return (
+    <div className="home-page">
+      <Header />
+      <div className="cards-container">
+        <UserInfo token={token} setToken={setToken} />
+        <Spacer size={10} />
+        <SendTransaction />
+        <Spacer size={10} />
+        <WalletMethods token={token} setToken={setToken} />
+        <Spacer size={15} />
+      </div>
+      <DevLinks primary />
+    </div>
+  );
 }
diff --git a/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/Header.tsx b/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/Header.tsx
index b997a10..a6e4012 100644
--- a/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/Header.tsx
+++ b/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/Header.tsx
@@ -1,19 +1,20 @@
-import Image from 'next/image'
-import MagicColorWhite from 'public/magic_color_white.svg'
-import {Dispatch, SetStateAction} from 'react'
-import DevLinks from './DevLinks'
+import Image from 'next/image';
+import Logo from 'public/logo.svg';
+import DevLinks from './DevLinks';
 
 const Header = () => {
-	return (
-		<div className='app-header-container'>
-			<Image
-				className='h-[180] w-[120px] m-2'
-				src={MagicColorWhite}
-				alt='logo'
-			/>
-			<DevLinks />
-		</div>
-	)
-}
+  return (
+    <div className="app-header-container">
+      <div className="flex flex-col gap-2.5 items-center">
+        <Image src={Logo} alt="logo" />
+        <div className="text-center text-white text-xl font-extrabold font-['Inter'] leading-[30px]">Magic</div>
+        <div className="text-center text-white text-opacity-50 text-base font-normal font-['SF Mono'] leading-normal">
+          Demo
+        </div>
+      </div>
+      <DevLinks />
+    </div>
+  );
+};
 
-export default Header
+export default Header;
diff --git a/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/Login.tsx b/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/Login.tsx
index 185ed38..9cac8d6 100644
--- a/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/Login.tsx
+++ b/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/Login.tsx
@@ -1,22 +1,22 @@
-import {LoginProps} from '@/utils/types'
+import { LoginProps } from '@/utils/types'
 import Header from './Header'
 <% loginMethods.forEach(authType => { %>
 <%-`import ${authType.replaceAll(' ', '')} from './auth/${authType.replaceAll(' ', '')}';`-%>
 <% }) %>
 
-const Login = ({token, setToken}: LoginProps) => {
-	return (
-		<div className='login-page'>
-			<Header />
-			<div className='login-method-grid'>
-				<% loginMethods.forEach(authType => { %>
-				<% if (authType !== "Social Logins") { %>
-					<%-`<${authType.replaceAll(' ', '')} token={token} setToken={setToken} />`-%>
-				<% } %>
-				<% }) %>
-			</div>
-		</div>
-	)
+const Login = ({ token, setToken }: LoginProps) => {
+  return (
+    <div className="login-page">
+      <Header />
+      <div className={`max-w-[100%] grid grid-cols-<%= Math.min(loginMethods.length, 3) %> grid-flow-row auto-rows-fr gap-5 p-4 mt-8`}>
+      <% loginMethods.forEach(authType => { %>
+      <% if (authType !== "Social Logins") { %>
+        <%-`<${authType.replaceAll(' ', '')} token={token} setToken={setToken} />`-%>
+      <% } %>
+  		<% }) %>
+      </div>
+    </div>
+  )
 }
 
 export default Login
diff --git a/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/MagicDashboardRedirect.tsx b/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/MagicDashboardRedirect.tsx
index 6083206..4c2cbed 100644
--- a/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/MagicDashboardRedirect.tsx
+++ b/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/MagicDashboardRedirect.tsx
@@ -1,7 +1,9 @@
 import React, { useCallback } from 'react';
-import Spacer from '../ui/Spacer';
-import Header from './Header';
 import DevLinks from './DevLinks';
+import Image from 'next/image';
+import Info from 'public/info.svg';
+import Link from 'public/link_white.svg';
+import Logo from 'public/logo.svg';
 
 const MagicDashboardRedirect = () => {
   const onClick = useCallback(() => {
@@ -10,18 +12,27 @@ const MagicDashboardRedirect = () => {
 
   return (
     <div className="redirect-container">
-      <Spacer size={32} />
-      <Spacer size={20} />
-      <div className="text-center">
-        <h3 className="max-w-[500px] text-center text-[#ffffffcc] text-xl font-normal m-0">
-          Please set your <code>NEXT_PUBLIC_MAGIC_API_KEY</code> environment variable in <code>.env</code>. You can get
-          your Magic API key from the Magic Dashboard.
-        </h3>
+      <div className="flex flex-col mt-10 gap-2.5 items-center">
+        <Image src={Logo} alt="logo" />
+        <div className="text-center text-white text-xl font-extrabold font-['Inter'] leading-[30px]">Magic</div>
+        <div className="text-center text-white text-opacity-50 text-base font-normal font-['SF Mono'] leading-normal">
+          Demo
+        </div>
       </div>
-      <Spacer size={32} />
-      <div className="text-center">
-        <button className="login-button min-w-[300px]" onClick={onClick}>
-          Go to Dashboard
+      <div className="flex flex-col items-center flex-1">
+        <div className="redirect-card">
+          <div className="flex gap-2 mx-4 my-2 ">
+            <Image src={Info} alt="logo" />
+            <h3 className="max-w-[480px] text-[#4E4D52] text-base font-normal">
+              Please set your <code>NEXT_PUBLIC_MAGIC_API_KEY</code> environment variable in <code>.env</code>. You can
+              get your Magic API key from the Magic Dashboard.
+            </h3>
+          </div>
+        </div>
+
+        <button className="api-button" onClick={onClick} disabled={false}>
+          Get API keys
+          <Image src={Link} alt="link-icon" className="ml-[6px] my-auto" />
         </button>
       </div>
       <DevLinks />
diff --git a/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/auth/Discord.tsx b/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/auth/Discord.tsx
index d05c653..763aed7 100644
--- a/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/auth/Discord.tsx
+++ b/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/auth/Discord.tsx
@@ -1,81 +1,73 @@
-import {LoginProps} from '@/utils/types'
-import {useMagic} from '../MagicProvider'
-import {useEffect, useState} from 'react'
-import {saveToken} from '@/utils/common'
-import Spinner from '@/components/ui/Spinner'
-import classNames from 'classnames'
-import Image from 'next/image'
-import discord from 'public/social/Discord.svg'
-import Card from '@/components/ui/Card'
-import CardHeader from '@/components/ui/CardHeader'
+import { LoginProps } from '@/utils/types';
+import { useMagic } from '../MagicProvider';
+import { useEffect, useState } from 'react';
+import { saveToken } from '@/utils/common';
+import Spinner from '@/components/ui/Spinner';
+import classNames from 'classnames';
+import Image from 'next/image';
+import discord from 'public/social/Discord.svg';
+import Card from '@/components/ui/Card';
+import CardHeader from '@/components/ui/CardHeader';
 
-const Discord = ({token, setToken}: LoginProps) => {
-	const {magic} = useMagic()
-	const [isAuthLoading, setIsAuthLoading] = useState<string | null>(null)
+const Discord = ({ token, setToken }: LoginProps) => {
+  const { magic } = useMagic();
+  const [isAuthLoading, setIsAuthLoading] = useState<string | null>(null);
 
-	useEffect(() => {
-		setIsAuthLoading(localStorage.getItem('isAuthLoading'))
-	}, [])
+  useEffect(() => {
+    setIsAuthLoading(localStorage.getItem('isAuthLoading'));
+  }, []);
 
-	useEffect(() => {
-		const checkLogin = async () => {
-			try {
-				if (magic) {
-					const result = await magic?.oauth.getRedirectResult()
-					//do stuff with user profile data
-					saveToken(result.magic.idToken, setToken, 'SOCIAL')
-					setLoadingFlag('false')
-				}
-			} catch (e) {
-				console.log('social login error: ' + e)
-				setLoadingFlag('false')
-			}
-		}
+  useEffect(() => {
+    const checkLogin = async () => {
+      try {
+        if (magic) {
+          const result = await magic?.oauth.getRedirectResult();
+          //do stuff with user profile data
+          saveToken(result.magic.idToken, setToken, 'SOCIAL');
+          setLoadingFlag('false');
+        }
+      } catch (e) {
+        console.log('social login error: ' + e);
+        setLoadingFlag('false');
+      }
+    };
 
-		checkLogin()
-	}, [magic, setToken])
+    checkLogin();
+  }, [magic, setToken]);
 
-	const login = async () => {
-		setLoadingFlag('true')
-		await magic?.oauth.loginWithRedirect({
-			provider: 'discord',
-			redirectURI: window.location.origin,
-		})
-	}
+  const login = async () => {
+    setLoadingFlag('true');
+    await magic?.oauth.loginWithRedirect({
+      provider: 'discord',
+      redirectURI: window.location.origin,
+    });
+  };
 
-	const setLoadingFlag = (loading: string) => {
-		localStorage.setItem('isAuthLoading', loading)
-		setIsAuthLoading(loading)
-	}
+  const setLoadingFlag = (loading: string) => {
+    localStorage.setItem('isAuthLoading', loading);
+    setIsAuthLoading(loading);
+  };
 
-	return (
-		<Card>
-			<CardHeader id='discord'>Discord Login</CardHeader>
-			{isAuthLoading && isAuthLoading !== 'false' ? (
-				<Spinner />
-			) : (
-				<div className='login-method-grid-item-container'>
-					<div
-						className={classNames(
-							'login-method-grid-item-container m-2',
-							token.length > 0
-								? 'cursor-default'
-								: 'cursor-pointer'
-						)}
-						onClick={() => {
-							if (token.length == 0) login()
-						}}>
-						<Image
-							src={discord}
-							alt='Discord'
-							height={24}
-							width={24}
-						/>
-						<div className='text-xs font-semibold'>Discord</div>
-					</div>
-				</div>
-			)}
-		</Card>
-	)
-}
-export default Discord
+  return (
+    <Card>
+      <CardHeader id="discord">Discord Login</CardHeader>
+      {isAuthLoading && isAuthLoading !== 'false' ? (
+        <Spinner />
+      ) : (
+        <div className="login-method-grid-item-container">
+          <button
+            className="social-login-button"
+            onClick={() => {
+              if (token.length == 0) login();
+            }}
+            disabled={false}
+          >
+            <Image src={discord} alt="Discord" height={24} width={24} className="mr-6" />
+            <div className="text-xs font-semibold text-center w-full">Continue with Discord</div>
+          </button>
+        </div>
+      )}
+    </Card>
+  );
+};
+export default Discord;
diff --git a/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/auth/EmailOTP.tsx b/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/auth/EmailOTP.tsx
index 3327f6b..662e77c 100644
--- a/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/auth/EmailOTP.tsx
+++ b/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/auth/EmailOTP.tsx
@@ -1,90 +1,78 @@
-import {useMagic} from '../MagicProvider'
-import showToast from '@/utils/showToast'
-import Spinner from '../../ui/Spinner'
-import classNames from 'classnames'
-import {RPCError, RPCErrorCode} from 'magic-sdk'
-import {LoginProps} from '@/utils/types'
-import {saveToken} from '@/utils/common'
-import Card from '../../ui/Card'
-import CardHeader from '../../ui/CardHeader'
-import {useState} from 'react'
-import FormInput from '@/components/ui/FormInput'
+import { useMagic } from '../MagicProvider';
+import showToast from '@/utils/showToast';
+import Spinner from '../../ui/Spinner';
+import { RPCError, RPCErrorCode } from 'magic-sdk';
+import { LoginProps } from '@/utils/types';
+import { saveToken } from '@/utils/common';
+import Card from '../../ui/Card';
+import CardHeader from '../../ui/CardHeader';
+import { useState } from 'react';
+import FormInput from '@/components/ui/FormInput';
 
-const EmailOTP = ({token, setToken}: LoginProps) => {
-	const {magic} = useMagic()
-	const [email, setEmail] = useState('')
-	const [emailError, setEmailError] = useState(false)
-	const [isLoginInProgress, setLoginInProgress] = useState(false)
+const EmailOTP = ({ token, setToken }: LoginProps) => {
+  const { magic } = useMagic();
+  const [email, setEmail] = useState('');
+  const [emailError, setEmailError] = useState(false);
+  const [isLoginInProgress, setLoginInProgress] = useState(false);
 
-	const handleLogin = async () => {
-		if (
-			!email.match(
-				/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
-			)
-		) {
-			setEmailError(true)
-		} else {
-			try {
-				setLoginInProgress(true)
-				setEmailError(false)
-				const account = await magic?.auth.loginWithEmailOTP({email})
-				if (account) {
-					saveToken(account, setToken, 'EMAIL')
-					setEmail('')
-				}
-			} catch (e) {
-				console.log('login error: ' + JSON.stringify(e))
-				if (e instanceof RPCError) {
-					switch (e.code) {
-						case RPCErrorCode.MagicLinkFailedVerification:
-						case RPCErrorCode.MagicLinkExpired:
-						case RPCErrorCode.MagicLinkRateLimited:
-						case RPCErrorCode.UserAlreadyLoggedIn:
-							showToast({message: e.message, type: 'error'})
-							break
-						default:
-							showToast({
-								message:
-									'Something went wrong. Please try again',
-								type: 'error',
-							})
-					}
-				}
-			} finally {
-				setLoginInProgress(false)
-			}
-		}
-	}
+  const handleLogin = async () => {
+    if (!email.match(/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/)) {
+      setEmailError(true);
+    } else {
+      try {
+        setLoginInProgress(true);
+        setEmailError(false);
+        const account = await magic?.auth.loginWithEmailOTP({ email });
+        if (account) {
+          saveToken(account, setToken, 'EMAIL');
+          setEmail('');
+        }
+      } catch (e) {
+        console.log('login error: ' + JSON.stringify(e));
+        if (e instanceof RPCError) {
+          switch (e.code) {
+            case RPCErrorCode.MagicLinkFailedVerification:
+            case RPCErrorCode.MagicLinkExpired:
+            case RPCErrorCode.MagicLinkRateLimited:
+            case RPCErrorCode.UserAlreadyLoggedIn:
+              showToast({ message: e.message, type: 'error' });
+              break;
+            default:
+              showToast({
+                message: 'Something went wrong. Please try again',
+                type: 'error',
+              });
+          }
+        }
+      } finally {
+        setLoginInProgress(false);
+      }
+    }
+  };
 
-	return (
-		<Card>
-			<CardHeader id='login'>Email OTP Login</CardHeader>
-			<div className='login-method-grid-item-container'>
-				<FormInput
-					onChange={(e) => {
-						if (emailError) setEmailError(false)
-						setEmail(e.target.value)
-					}}
-					placeholder={
-						token.length > 0 ? 'Already logged in' : 'Email'
-					}
-					value={email}
-				/>
-				{emailError && (
-					<span className='error'>Enter a valid email</span>
-				)}
-				<button
-					className='login-button'
-					disabled={
-						isLoginInProgress ||
-						(token.length > 0 ? false : email.length == 0)
-					}
-					onClick={() => handleLogin()}>
-					{isLoginInProgress ? <Spinner /> : 'Login'}
-				</button>
-			</div>
-		</Card>
-	)
-}
+  return (
+    <Card>
+      <CardHeader id="login">Email OTP Login</CardHeader>
+      <div className="login-method-grid-item-container">
+        <FormInput
+          onChange={(e) => {
+            if (emailError) setEmailError(false);
+            setEmail(e.target.value);
+          }}
+          placeholder={token.length > 0 ? 'Already logged in' : 'Email'}
+          value={email}
+        />
+        {emailError && <span className="error">Enter a valid email</span>}
+        <button
+          className="login-button"
+          disabled={isLoginInProgress || (token.length > 0 ? false : email.length == 0)}
+          onClick={() => handleLogin()}
+        >
+          {isLoginInProgress ? <Spinner /> : 'Log in / Sign up'}
+        </button>
+      </div>
+    </Card>
+  );
+};
 
-export default EmailOTP
+export default EmailOTP;
diff --git a/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/auth/Facebook.tsx b/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/auth/Facebook.tsx
index 107761a..17bd3a1 100644
--- a/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/auth/Facebook.tsx
+++ b/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/auth/Facebook.tsx
@@ -1,81 +1,73 @@
-import {LoginProps} from '@/utils/types'
-import {useMagic} from '../MagicProvider'
-import {useEffect, useState} from 'react'
-import {saveToken} from '@/utils/common'
-import Spinner from '../../ui/Spinner'
-import classNames from 'classnames'
-import Image from 'next/image'
-import facebook from 'public/social/Facebook.svg'
-import Card from '../../ui/Card'
-import CardHeader from '../../ui/CardHeader'
+import { LoginProps } from '@/utils/types';
+import { useMagic } from '../MagicProvider';
+import { useEffect, useState } from 'react';
+import { saveToken } from '@/utils/common';
+import Spinner from '../../ui/Spinner';
+import classNames from 'classnames';
+import Image from 'next/image';
+import facebook from 'public/social/Facebook.svg';
+import Card from '../../ui/Card';
+import CardHeader from '../../ui/CardHeader';
 
-const Facebook = ({token, setToken}: LoginProps) => {
-	const {magic} = useMagic()
-	const [isAuthLoading, setIsAuthLoading] = useState<string | null>(null)
+const Facebook = ({ token, setToken }: LoginProps) => {
+  const { magic } = useMagic();
+  const [isAuthLoading, setIsAuthLoading] = useState<string | null>(null);
 
-	useEffect(() => {
-		setIsAuthLoading(localStorage.getItem('isAuthLoading'))
-	}, [])
+  useEffect(() => {
+    setIsAuthLoading(localStorage.getItem('isAuthLoading'));
+  }, []);
 
-	useEffect(() => {
-		const checkLogin = async () => {
-			try {
-				if (magic) {
-					const result = await magic?.oauth.getRedirectResult()
-					//do stuff with user profile data
-					saveToken(result.magic.idToken, setToken, 'SOCIAL')
-					setLoadingFlag('false')
-				}
-			} catch (e) {
-				console.log('social login error: ' + e)
-				setLoadingFlag('false')
-			}
-		}
+  useEffect(() => {
+    const checkLogin = async () => {
+      try {
+        if (magic) {
+          const result = await magic?.oauth.getRedirectResult();
+          //do stuff with user profile data
+          saveToken(result.magic.idToken, setToken, 'SOCIAL');
+          setLoadingFlag('false');
+        }
+      } catch (e) {
+        console.log('social login error: ' + e);
+        setLoadingFlag('false');
+      }
+    };
 
-		checkLogin()
-	}, [magic, setToken])
+    checkLogin();
+  }, [magic, setToken]);
 
-	const login = async () => {
-		setLoadingFlag('true')
-		await magic?.oauth.loginWithRedirect({
-			provider: 'facebook',
-			redirectURI: window.location.origin,
-		})
-	}
+  const login = async () => {
+    setLoadingFlag('true');
+    await magic?.oauth.loginWithRedirect({
+      provider: 'facebook',
+      redirectURI: window.location.origin,
+    });
+  };
 
-	const setLoadingFlag = (loading: string) => {
-		localStorage.setItem('isAuthLoading', loading)
-		setIsAuthLoading(loading)
-	}
+  const setLoadingFlag = (loading: string) => {
+    localStorage.setItem('isAuthLoading', loading);
+    setIsAuthLoading(loading);
+  };
 
-	return (
-		<Card>
-			<CardHeader id='facebook'>Facebook Login</CardHeader>
-			{isAuthLoading && isAuthLoading !== 'false' ? (
-				<Spinner />
-			) : (
-				<div className='login-method-grid-item-container'>
-					<div
-						className={classNames(
-							'login-method-grid-item-container m-2',
-							token.length > 0
-								? 'cursor-default'
-								: 'cursor-pointer'
-						)}
-						onClick={() => {
-							if (token.length == 0) login()
-						}}>
-						<Image
-							src={facebook}
-							alt='Google'
-							height={24}
-							width={24}
-						/>
-						<div className='text-xs font-semibold'>Facebook</div>
-					</div>
-				</div>
-			)}
-		</Card>
-	)
-}
-export default Facebook
+  return (
+    <Card>
+      <CardHeader id="facebook">Facebook Login</CardHeader>
+      {isAuthLoading && isAuthLoading !== 'false' ? (
+        <Spinner />
+      ) : (
+        <div className="login-method-grid-item-container">
+          <button
+            className="social-login-button"
+            onClick={() => {
+              if (token.length == 0) login();
+            }}
+            disabled={false}
+          >
+            <Image src={facebook} alt="Facebook" height={24} width={24} className="mr-6" />
+            <div className="text-xs font-semibold text-center w-full">Continue with Facebook</div>
+          </button>
+        </div>
+      )}
+    </Card>
+  );
+};
+export default Facebook;
diff --git a/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/auth/Github.tsx b/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/auth/Github.tsx
index 431fd34..8004de7 100644
--- a/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/auth/Github.tsx
+++ b/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/auth/Github.tsx
@@ -1,81 +1,73 @@
-import {LoginProps} from '@/utils/types'
-import {useMagic} from '../MagicProvider'
-import {useEffect, useState} from 'react'
-import {saveToken} from '@/utils/common'
-import Spinner from '../../ui/Spinner'
-import classNames from 'classnames'
-import Image from 'next/image'
-import github from 'public/social/Github.svg'
-import Card from '../../ui/Card'
-import CardHeader from '../../ui/CardHeader'
+import { LoginProps } from '@/utils/types';
+import { useMagic } from '../MagicProvider';
+import { useEffect, useState } from 'react';
+import { saveToken } from '@/utils/common';
+import Spinner from '../../ui/Spinner';
+import classNames from 'classnames';
+import Image from 'next/image';
+import github from 'public/social/Github.svg';
+import Card from '../../ui/Card';
+import CardHeader from '../../ui/CardHeader';
 
-const Github = ({token, setToken}: LoginProps) => {
-	const {magic} = useMagic()
-	const [isAuthLoading, setIsAuthLoading] = useState<string | null>(null)
+const Github = ({ token, setToken }: LoginProps) => {
+  const { magic } = useMagic();
+  const [isAuthLoading, setIsAuthLoading] = useState<string | null>(null);
 
-	useEffect(() => {
-		setIsAuthLoading(localStorage.getItem('isAuthLoading'))
-	}, [])
+  useEffect(() => {
+    setIsAuthLoading(localStorage.getItem('isAuthLoading'));
+  }, []);
 
-	useEffect(() => {
-		const checkLogin = async () => {
-			try {
-				if (magic) {
-					const result = await magic?.oauth.getRedirectResult()
-					//do stuff with user profile data
-					saveToken(result.magic.idToken, setToken, 'SOCIAL')
-					setLoadingFlag('false')
-				}
-			} catch (e) {
-				console.log('social login error: ' + e)
-				setLoadingFlag('false')
-			}
-		}
+  useEffect(() => {
+    const checkLogin = async () => {
+      try {
+        if (magic) {
+          const result = await magic?.oauth.getRedirectResult();
+          //do stuff with user profile data
+          saveToken(result.magic.idToken, setToken, 'SOCIAL');
+          setLoadingFlag('false');
+        }
+      } catch (e) {
+        console.log('social login error: ' + e);
+        setLoadingFlag('false');
+      }
+    };
 
-		checkLogin()
-	}, [magic, setToken])
+    checkLogin();
+  }, [magic, setToken]);
 
-	const login = async () => {
-		setLoadingFlag('true')
-		await magic?.oauth.loginWithRedirect({
-			provider: 'github',
-			redirectURI: window.location.origin,
-		})
-	}
+  const login = async () => {
+    setLoadingFlag('true');
+    await magic?.oauth.loginWithRedirect({
+      provider: 'github',
+      redirectURI: window.location.origin,
+    });
+  };
 
-	const setLoadingFlag = (loading: string) => {
-		localStorage.setItem('isAuthLoading', loading)
-		setIsAuthLoading(loading)
-	}
+  const setLoadingFlag = (loading: string) => {
+    localStorage.setItem('isAuthLoading', loading);
+    setIsAuthLoading(loading);
+  };
 
-	return (
-		<Card>
-			<CardHeader id='github'>Github Login</CardHeader>
-			{isAuthLoading && isAuthLoading !== 'false' ? (
-				<Spinner />
-			) : (
-				<div className='login-method-grid-item-container'>
-					<div
-						className={classNames(
-							'login-method-grid-item-container m-2',
-							token.length > 0
-								? 'cursor-default'
-								: 'cursor-pointer'
-						)}
-						onClick={() => {
-							if (token.length == 0) login()
-						}}>
-						<Image
-							src={github}
-							alt='Google'
-							height={24}
-							width={24}
-						/>
-						<div className='text-xs font-semibold'>Github</div>
-					</div>
-				</div>
-			)}
-		</Card>
-	)
-}
-export default Github
+  return (
+    <Card>
+      <CardHeader id="github">Github Login</CardHeader>
+      {isAuthLoading && isAuthLoading !== 'false' ? (
+        <Spinner />
+      ) : (
+        <div className="login-method-grid-item-container">
+          <button
+            className="social-login-button"
+            onClick={() => {
+              if (token.length == 0) login();
+            }}
+            disabled={false}
+          >
+            <Image src={github} alt="Github" height={24} width={24} className="mr-6" />
+            <div className="text-xs font-semibold text-center w-full">Continue with Github</div>
+          </button>
+        </div>
+      )}
+    </Card>
+  );
+};
+export default Github;
diff --git a/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/auth/Google.tsx b/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/auth/Google.tsx
index 29ab572..4dc8087 100644
--- a/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/auth/Google.tsx
+++ b/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/auth/Google.tsx
@@ -1,81 +1,73 @@
-import {LoginProps} from '@/utils/types'
-import {useMagic} from '../MagicProvider'
-import {useEffect, useState} from 'react'
-import {saveToken} from '@/utils/common'
-import Spinner from '../../ui/Spinner'
-import classNames from 'classnames'
-import Image from 'next/image'
-import google from 'public/social/Google.svg'
-import Card from '../../ui/Card'
-import CardHeader from '../../ui/CardHeader'
+import { LoginProps } from '@/utils/types';
+import { useMagic } from '../MagicProvider';
+import { useEffect, useState } from 'react';
+import { saveToken } from '@/utils/common';
+import Spinner from '../../ui/Spinner';
+import classNames from 'classnames';
+import Image from 'next/image';
+import google from 'public/social/Google.svg';
+import Card from '../../ui/Card';
+import CardHeader from '../../ui/CardHeader';
 
-const Google = ({token, setToken}: LoginProps) => {
-	const {magic} = useMagic()
-	const [isAuthLoading, setIsAuthLoading] = useState<string | null>(null)
+const Google = ({ token, setToken }: LoginProps) => {
+  const { magic } = useMagic();
+  const [isAuthLoading, setIsAuthLoading] = useState<string | null>(null);
 
-	useEffect(() => {
-		setIsAuthLoading(localStorage.getItem('isAuthLoading'))
-	}, [])
+  useEffect(() => {
+    setIsAuthLoading(localStorage.getItem('isAuthLoading'));
+  }, []);
 
-	useEffect(() => {
-		const checkLogin = async () => {
-			try {
-				if (magic) {
-					const result = await magic?.oauth.getRedirectResult()
-					//do stuff with user profile data
-					saveToken(result.magic.idToken, setToken, 'SOCIAL')
-					setLoadingFlag('false')
-				}
-			} catch (e) {
-				console.log('social login error: ' + e)
-				setLoadingFlag('false')
-			}
-		}
+  useEffect(() => {
+    const checkLogin = async () => {
+      try {
+        if (magic) {
+          const result = await magic?.oauth.getRedirectResult();
+          //do stuff with user profile data
+          saveToken(result.magic.idToken, setToken, 'SOCIAL');
+          setLoadingFlag('false');
+        }
+      } catch (e) {
+        console.log('social login error: ' + e);
+        setLoadingFlag('false');
+      }
+    };
 
-		checkLogin()
-	}, [magic, setToken])
+    checkLogin();
+  }, [magic, setToken]);
 
-	const login = async () => {
-		setLoadingFlag('true')
-		await magic?.oauth.loginWithRedirect({
-			provider: 'google',
-			redirectURI: window.location.origin,
-		})
-	}
+  const login = async () => {
+    setLoadingFlag('true');
+    await magic?.oauth.loginWithRedirect({
+      provider: 'google',
+      redirectURI: window.location.origin,
+    });
+  };
 
-	const setLoadingFlag = (loading: string) => {
-		localStorage.setItem('isAuthLoading', loading)
-		setIsAuthLoading(loading)
-	}
+  const setLoadingFlag = (loading: string) => {
+    localStorage.setItem('isAuthLoading', loading);
+    setIsAuthLoading(loading);
+  };
 
-	return (
-		<Card>
-			<CardHeader id='google'>Google Login</CardHeader>
-			{isAuthLoading && isAuthLoading !== 'false' ? (
-				<Spinner />
-			) : (
-				<div className='login-method-grid-item-container'>
-					<div
-						className={classNames(
-							'login-method-grid-item-container m-2',
-							token.length > 0
-								? 'cursor-default'
-								: 'cursor-pointer'
-						)}
-						onClick={() => {
-							if (token.length == 0) login()
-						}}>
-						<Image
-							src={google}
-							alt='Google'
-							height={24}
-							width={24}
-						/>
-						<div className='text-xs font-semibold'>Google</div>
-					</div>
-				</div>
-			)}
-		</Card>
-	)
-}
-export default Google
+  return (
+    <Card>
+      <CardHeader id="google">Google Login</CardHeader>
+      {isAuthLoading && isAuthLoading !== 'false' ? (
+        <Spinner />
+      ) : (
+        <div className="login-method-grid-item-container">
+          <button
+            className="social-login-button"
+            onClick={() => {
+              if (token.length == 0) login();
+            }}
+            disabled={false}
+          >
+            <Image src={google} alt="Google" height={24} width={24} className="mr-6" />
+            <div className="text-xs font-semibold text-center w-full">Continue with Google</div>
+          </button>
+        </div>
+      )}
+    </Card>
+  );
+};
+export default Google;
diff --git a/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/auth/LoginForm.tsx b/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/auth/LoginForm.tsx
deleted file mode 100644
index 80a53f2..0000000
--- a/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/auth/LoginForm.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import {LoginProps} from '@/utils/types'
-import {useEffect, useMemo, useState} from 'react'
-import {saveToken} from '@/utils/common'
-import Spinner from '../../ui/Spinner'
-import {useRouter} from 'next/router'
-import Card from '../../ui/Card'
-import CardHeader from '../../ui/CardHeader'
-
-const setScriptAttributesAndAddScript = (src: string) => {
-	const script = document.createElement('script')
-	script.src = src
-	script.setAttribute(
-		'data-magic-publishable-api-key',
-		process.env.NEXT_PUBLIC_MAGIC_API_KEY!
-	)
-	script.setAttribute('data-redirect-uri', '/')
-	script.async = true
-
-	document.body.appendChild(script)
-}
-
-const LoginForm = ({token, setToken}: LoginProps) => {
-	const router = useRouter()
-	const [isLoginInProgress, setLoginInProgress] = useState(false)
-
-	useMemo(async () => {
-		if (token.length == 0 && router.query) {
-			if (router.query.didt) {
-				await saveToken(router.query.didt as string, setToken, 'FORM')
-				router.replace('/', undefined, {shallow: true})
-			}
-			if (router.query.magic_credential) {
-				await saveToken(
-					router.query.magic_credential as string,
-					setToken,
-					'FORM'
-				)
-				router.replace('/', undefined, {shallow: true})
-			}
-		}
-	}, [router, setToken, token.length])
-
-	useEffect(() => {
-		if (token.length > 0 && !isLoginInProgress) {
-			setLoginInProgress(false)
-		}
-	}, [token, setLoginInProgress, isLoginInProgress])
-
-	const handleLogin = () => {
-		setLoginInProgress(true)
-		setScriptAttributesAndAddScript('https://auth.magic.link/pnp/login')
-	}
-
-	return (
-		<Card>
-			<CardHeader id='login'>Login Form</CardHeader>
-			<button
-				className='login-button'
-				disabled={isLoginInProgress}
-				onClick={() => handleLogin()}>
-				{isLoginInProgress ? <Spinner /> : 'Login'}
-			</button>
-			<span className='text-xs mt-2'>
-				Please wait a few seconds after clicking login as this button is
-				executing a magic script
-			</span>
-		</Card>
-	)
-}
-
-export default LoginForm
diff --git a/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/auth/SMSOTP.tsx b/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/auth/SMSOTP.tsx
index 239e4ac..2b3e474 100644
--- a/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/auth/SMSOTP.tsx
+++ b/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/auth/SMSOTP.tsx
@@ -1,90 +1,84 @@
-import {useState} from 'react'
-import {useMagic} from '../MagicProvider'
-import showToast from '@/utils/showToast'
-import Spinner from '../../ui/Spinner'
-import classNames from 'classnames'
-import {RPCError, RPCErrorCode} from 'magic-sdk'
-import {LoginProps} from '@/utils/types'
-import {saveToken} from '@/utils/common'
-import Card from '../../ui/Card'
-import CardHeader from '../../ui/CardHeader'
-import FormInput from '@/components/ui/FormInput'
+import { useState } from 'react';
+import { useMagic } from '../MagicProvider';
+import showToast from '@/utils/showToast';
+import Spinner from '../../ui/Spinner';
+import { RPCError, RPCErrorCode } from 'magic-sdk';
+import { LoginProps } from '@/utils/types';
+import { saveToken } from '@/utils/common';
+import Card from '../../ui/Card';
+import CardHeader from '../../ui/CardHeader';
+import FormInput from '@/components/ui/FormInput';
 
-const SMSOTP = ({token, setToken}: LoginProps) => {
-	const {magic} = useMagic()
-	const [phone, setPhone] = useState('')
-	const [phoneError, setPhoneError] = useState(false)
-	const [isLoginInProgress, setLoginInProgress] = useState(false)
+const SMSOTP = ({ token, setToken }: LoginProps) => {
+  const { magic } = useMagic();
+  const [phone, setPhone] = useState('');
+  const [phoneError, setPhoneError] = useState(false);
+  const [isLoginInProgress, setLoginInProgress] = useState(false);
 
-	const handleLogin = async () => {
-		if (!phone.match(/^\+?\d{10,14}$/)) {
-			setPhoneError(true)
-		} else {
-			try {
-				setLoginInProgress(true)
-				setPhoneError(false)
-				const account = await magic?.auth.loginWithSMS({
-					phoneNumber: phone,
-				})
-				if (account) {
-					saveToken(account, setToken, 'SMS')
-					setPhone('')
-				}
-			} catch (e) {
-				console.log('login error: ' + JSON.stringify(e))
-				if (e instanceof RPCError) {
-					switch (e.code) {
-						case RPCErrorCode.MagicLinkFailedVerification:
-						case RPCErrorCode.MagicLinkExpired:
-						case RPCErrorCode.MagicLinkRateLimited:
-						case RPCErrorCode.UserAlreadyLoggedIn:
-							showToast({message: e.message, type: 'error'})
-							break
-						default:
-							showToast({
-								message:
-									'Something went wrong. Please try again',
-								type: 'error',
-							})
-					}
-				}
-			} finally {
-				setLoginInProgress(false)
-			}
-		}
-	}
+  const handleLogin = async () => {
+    if (!phone.match(/^\+?\d{10,14}$/)) {
+      setPhoneError(true);
+    } else {
+      try {
+        setLoginInProgress(true);
+        setPhoneError(false);
+        const account = await magic?.auth.loginWithSMS({
+          phoneNumber: phone,
+        });
+        if (account) {
+          saveToken(account, setToken, 'SMS');
+          setPhone('');
+        }
+      } catch (e) {
+        console.log('login error: ' + JSON.stringify(e));
+        if (e instanceof RPCError) {
+          switch (e.code) {
+            case RPCErrorCode.MagicLinkFailedVerification:
+            case RPCErrorCode.MagicLinkExpired:
+            case RPCErrorCode.MagicLinkRateLimited:
+            case RPCErrorCode.UserAlreadyLoggedIn:
+              showToast({ message: e.message, type: 'error' });
+              break;
+            default:
+              showToast({
+                message: 'Something went wrong. Please try again',
+                type: 'error',
+              });
+          }
+        }
+      } finally {
+        setLoginInProgress(false);
+      }
+    }
+  };
 
-	return (
-		<Card>
-			<CardHeader id='sms'>SMS Login</CardHeader>
-			<div className='login-method-grid-item-container'>
-				<FormInput
-					onChange={(e) => {
-						if (phoneError) setPhoneError(false)
-						setPhone(e.target.value)
-					}}
-					placeholder={
-						token.length > 0 ? 'Already logged in' : '+11234567890'
-					}
-					value={phone}
-				/>
-				{phoneError && (
-					<span className='self-start text-xs font-semibold text-red-700 justify-self-start'>
-						Enter a valid phone number
-					</span>
-				)}
-				<button
-					className='login-button'
-					disabled={
-						isLoginInProgress ||
-						(token.length > 0 ? false : phone.length == 0)
-					}
-					onClick={() => handleLogin()}>
-					{isLoginInProgress ? <Spinner /> : 'Login'}
-				</button>
-			</div>
-		</Card>
-	)
-}
+  return (
+    <Card>
+      <CardHeader id="sms">SMS Login</CardHeader>
+      <div className="login-method-grid-item-container">
+        <FormInput
+          onChange={(e) => {
+            if (phoneError) setPhoneError(false);
+            setPhone(e.target.value);
+          }}
+          placeholder={token.length > 0 ? 'Already logged in' : '+11234567890'}
+          value={phone}
+        />
+        {phoneError && (
+          <span className="self-start text-xs font-semibold text-red-700 justify-self-start">
+            Enter a valid phone number
+          </span>
+        )}
+        <button
+          className="login-button"
+          disabled={isLoginInProgress || (token.length > 0 ? false : phone.length == 0)}
+          onClick={() => handleLogin()}
+        >
+          {isLoginInProgress ? <Spinner /> : 'Log in / Sign up'}
+        </button>
+      </div>
+    </Card>
+  );
+};
 
-export default SMSOTP
+export default SMSOTP;
diff --git a/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/auth/Twitch.tsx b/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/auth/Twitch.tsx
index 3f03e01..8986ba7 100644
--- a/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/auth/Twitch.tsx
+++ b/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/auth/Twitch.tsx
@@ -1,81 +1,73 @@
-import {LoginProps} from '@/utils/types'
-import {useMagic} from '../MagicProvider'
-import {useEffect, useState} from 'react'
-import {saveToken} from '@/utils/common'
-import Spinner from '../../ui/Spinner'
-import classNames from 'classnames'
-import Image from 'next/image'
-import twitch from 'public/social/Twitch.svg'
-import Card from '../../ui/Card'
-import CardHeader from '../../ui/CardHeader'
+import { LoginProps } from '@/utils/types';
+import { useMagic } from '../MagicProvider';
+import { useEffect, useState } from 'react';
+import { saveToken } from '@/utils/common';
+import Spinner from '../../ui/Spinner';
+import classNames from 'classnames';
+import Image from 'next/image';
+import twitch from 'public/social/Twitch.svg';
+import Card from '../../ui/Card';
+import CardHeader from '../../ui/CardHeader';
 
-const Twitch = ({token, setToken}: LoginProps) => {
-	const {magic} = useMagic()
-	const [isAuthLoading, setIsAuthLoading] = useState<string | null>(null)
+const Twitch = ({ token, setToken }: LoginProps) => {
+  const { magic } = useMagic();
+  const [isAuthLoading, setIsAuthLoading] = useState<string | null>(null);
 
-	useEffect(() => {
-		setIsAuthLoading(localStorage.getItem('isAuthLoading'))
-	}, [])
+  useEffect(() => {
+    setIsAuthLoading(localStorage.getItem('isAuthLoading'));
+  }, []);
 
-	useEffect(() => {
-		const checkLogin = async () => {
-			try {
-				if (magic) {
-					const result = await magic?.oauth.getRedirectResult()
-					//do stuff with user profile data
-					saveToken(result.magic.idToken, setToken, 'SOCIAL')
-					setLoadingFlag('false')
-				}
-			} catch (e) {
-				console.log('social login error: ' + e)
-				setLoadingFlag('false')
-			}
-		}
+  useEffect(() => {
+    const checkLogin = async () => {
+      try {
+        if (magic) {
+          const result = await magic?.oauth.getRedirectResult();
+          //do stuff with user profile data
+          saveToken(result.magic.idToken, setToken, 'SOCIAL');
+          setLoadingFlag('false');
+        }
+      } catch (e) {
+        console.log('social login error: ' + e);
+        setLoadingFlag('false');
+      }
+    };
 
-		checkLogin()
-	}, [magic, setToken])
+    checkLogin();
+  }, [magic, setToken]);
 
-	const login = async () => {
-		setLoadingFlag('true')
-		await magic?.oauth.loginWithRedirect({
-			provider: 'twitch',
-			redirectURI: window.location.origin,
-		})
-	}
+  const login = async () => {
+    setLoadingFlag('true');
+    await magic?.oauth.loginWithRedirect({
+      provider: 'twitch',
+      redirectURI: window.location.origin,
+    });
+  };
 
-	const setLoadingFlag = (loading: string) => {
-		localStorage.setItem('isAuthLoading', loading)
-		setIsAuthLoading(loading)
-	}
+  const setLoadingFlag = (loading: string) => {
+    localStorage.setItem('isAuthLoading', loading);
+    setIsAuthLoading(loading);
+  };
 
-	return (
-		<Card>
-			<CardHeader id='twitcg'>Twitch Login</CardHeader>
-			{isAuthLoading && isAuthLoading !== 'false' ? (
-				<Spinner />
-			) : (
-				<div className='login-method-grid-item-container'>
-					<div
-						className={classNames(
-							'login-method-grid-item-container m-2',
-							token.length > 0
-								? 'cursor-default'
-								: 'cursor-pointer'
-						)}
-						onClick={() => {
-							if (token.length == 0) login()
-						}}>
-						<Image
-							src={twitch}
-							alt='Twitch'
-							height={24}
-							width={24}
-						/>
-						<div className='text-xs font-semibold'>Twitch</div>
-					</div>
-				</div>
-			)}
-		</Card>
-	)
-}
-export default Twitch
+  return (
+    <Card>
+      <CardHeader id="twitcg">Twitch Login</CardHeader>
+      {isAuthLoading && isAuthLoading !== 'false' ? (
+        <Spinner />
+      ) : (
+        <div className="login-method-grid-item-container">
+          <button
+            className="social-login-button"
+            onClick={() => {
+              if (token.length == 0) login();
+            }}
+            disabled={false}
+          >
+            <Image src={twitch} alt="Twitch" height={24} width={24} className="mr-6" />
+            <div className="text-xs font-semibold text-center w-full">Continue with Twitch</div>
+          </button>
+        </div>
+      )}
+    </Card>
+  );
+};
+export default Twitch;
diff --git a/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/auth/Twitter.tsx b/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/auth/Twitter.tsx
index d60db9e..f90a7a2 100644
--- a/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/auth/Twitter.tsx
+++ b/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/auth/Twitter.tsx
@@ -1,81 +1,73 @@
-import {LoginProps} from '@/utils/types'
-import {useMagic} from '../MagicProvider'
-import {useEffect, useState} from 'react'
-import {saveToken} from '@/utils/common'
-import Spinner from '../../ui/Spinner'
-import classNames from 'classnames'
-import Image from 'next/image'
-import twitter from 'public/social/Twitter.svg'
-import Card from '../../ui/Card'
-import CardHeader from '../../ui/CardHeader'
+import { LoginProps } from '@/utils/types';
+import { useMagic } from '../MagicProvider';
+import { useEffect, useState } from 'react';
+import { saveToken } from '@/utils/common';
+import Spinner from '../../ui/Spinner';
+import classNames from 'classnames';
+import Image from 'next/image';
+import twitter from 'public/social/Twitter.svg';
+import Card from '../../ui/Card';
+import CardHeader from '../../ui/CardHeader';
 
-const Twitter = ({token, setToken}: LoginProps) => {
-	const {magic} = useMagic()
-	const [isAuthLoading, setIsAuthLoading] = useState<string | null>(null)
+const Twitter = ({ token, setToken }: LoginProps) => {
+  const { magic } = useMagic();
+  const [isAuthLoading, setIsAuthLoading] = useState<string | null>(null);
 
-	useEffect(() => {
-		setIsAuthLoading(localStorage.getItem('isAuthLoading'))
-	}, [])
+  useEffect(() => {
+    setIsAuthLoading(localStorage.getItem('isAuthLoading'));
+  }, []);
 
-	useEffect(() => {
-		const checkLogin = async () => {
-			try {
-				if (magic) {
-					const result = await magic?.oauth.getRedirectResult()
-					//do stuff with user profile data
-					saveToken(result.magic.idToken, setToken, 'SOCIAL')
-					setLoadingFlag('false')
-				}
-			} catch (e) {
-				console.log('social login error: ' + e)
-				setLoadingFlag('false')
-			}
-		}
+  useEffect(() => {
+    const checkLogin = async () => {
+      try {
+        if (magic) {
+          const result = await magic?.oauth.getRedirectResult();
+          //do stuff with user profile data
+          saveToken(result.magic.idToken, setToken, 'SOCIAL');
+          setLoadingFlag('false');
+        }
+      } catch (e) {
+        console.log('social login error: ' + e);
+        setLoadingFlag('false');
+      }
+    };
 
-		checkLogin()
-	}, [magic, setToken])
+    checkLogin();
+  }, [magic, setToken]);
 
-	const login = async () => {
-		setLoadingFlag('true')
-		await magic?.oauth.loginWithRedirect({
-			provider: 'twitter',
-			redirectURI: window.location.origin,
-		})
-	}
+  const login = async () => {
+    setLoadingFlag('true');
+    await magic?.oauth.loginWithRedirect({
+      provider: 'twitter',
+      redirectURI: window.location.origin,
+    });
+  };
 
-	const setLoadingFlag = (loading: string) => {
-		localStorage.setItem('isAuthLoading', loading)
-		setIsAuthLoading(loading)
-	}
+  const setLoadingFlag = (loading: string) => {
+    localStorage.setItem('isAuthLoading', loading);
+    setIsAuthLoading(loading);
+  };
 
-	return (
-		<Card>
-			<CardHeader id='twitter'>Twitter Login</CardHeader>
-			{isAuthLoading && isAuthLoading !== 'false' ? (
-				<Spinner />
-			) : (
-				<div className='login-method-grid-item-container'>
-					<div
-						className={classNames(
-							'login-method-grid-item-container m-2',
-							token.length > 0
-								? 'cursor-default'
-								: 'cursor-pointer'
-						)}
-						onClick={() => {
-							if (token.length == 0) login()
-						}}>
-						<Image
-							src={twitter}
-							alt='Twitter'
-							height={24}
-							width={24}
-						/>
-						<div className='text-xs font-semibold'>Twitter</div>
-					</div>
-				</div>
-			)}
-		</Card>
-	)
-}
-export default Twitter
+  return (
+    <Card>
+      <CardHeader id="twitter">Twitter Login</CardHeader>
+      {isAuthLoading && isAuthLoading !== 'false' ? (
+        <Spinner />
+      ) : (
+        <div className="login-method-grid-item-container">
+          <button
+            className="social-login-button"
+            onClick={() => {
+              if (token.length == 0) login();
+            }}
+            disabled={false}
+          >
+            <Image src={twitter} alt="Twitter" height={24} width={24} className="mr-6" />
+            <div className="text-xs font-semibold text-center w-full">Continue with Twitter</div>
+          </button>
+        </div>
+      )}
+    </Card>
+  );
+};
+export default Twitter;
diff --git a/scaffolds/nextjs-solana-dedicated-wallet/template/src/styles/globals.css b/scaffolds/nextjs-solana-dedicated-wallet/template/src/styles/globals.css
index 83bde73..7222af2 100644
--- a/scaffolds/nextjs-solana-dedicated-wallet/template/src/styles/globals.css
+++ b/scaffolds/nextjs-solana-dedicated-wallet/template/src/styles/globals.css
@@ -47,7 +47,7 @@ ul {
 }
 
 .nft-name {
-  @apply text-black font-semibold;
+  @apply font-semibold text-black;
   font-family: 'Inter';
 }
 
@@ -60,7 +60,7 @@ ul {
 }
 
 .cards-container {
-  @apply mt-[-250px] relative;
+  @apply relative top-[30px] md:top-[-60px] lg:top-[-60px];
 }
 
 @media only screen and (max-width: 767px) {
@@ -70,7 +70,7 @@ ul {
 }
 
 .network-dropdown {
-  @apply w-fit m-auto rounded-xl;
+  @apply m-auto w-fit rounded-xl;
 }
 
 .active-network {
@@ -116,7 +116,7 @@ ul {
   @apply flex flex-col items-center min-h-screen bg-gray-300;
 }
 .login-method-grid {
-  @apply w-[100%] grid grid-cols-4 gap-5 p-4;
+  @apply max-w-[100%] grid-rows-3 gap-5 p-4 mt-8;
 }
 
 .login-method-grid-item-container {
@@ -125,7 +125,7 @@ ul {
 
 .login-button {
   @apply w-full h-12 text-white font-semibold text-base leading-6 transition-[0.1s] text-center transition-[0.1s] m-auto px-2 py-3 rounded-[300px] border-[none];
-  background: #a799ff;
+  background: #8271f3;
 }
 
 .login-button:disabled {
@@ -142,7 +142,7 @@ ul {
 }
 
 .links {
-  @apply flex justify-center text-white font-semibold mt-5 mb-3 mx-auto;
+  @apply flex justify-center mx-auto mt-5 text-sm mb-3 font-semibold text-white;
 }
 .link {
   @apply transition-[0.1s] px-[30px] py-0;
@@ -163,7 +163,7 @@ ul {
   @apply cursor-pointer;
 }
 .link-divider {
-  @apply h-5 w-px;
+  @apply w-px h-5;
 }
 
 .footer-links {
@@ -221,7 +221,7 @@ ul {
   @apply w-[50px] text-center flex items-center justify-center cursor-default;
 }
 .loading {
-  @apply animate-spin cursor-default;
+  @apply cursor-default animate-spin;
 }
 
 @keyframes rotation {
@@ -234,18 +234,18 @@ ul {
 }
 
 .card {
-  @apply w-[300px] flex flex-col shadow-[0px_4px_24px_rgba(49,49,49,0.1)] mt-0 mb-[27px] mx-auto px-6 py-8 rounded-2xl bg-[#ffffff];
+  @apply w-[344px] flex flex-col shadow-[0px_4px_24px_rgba(49,49,49,0.1)] mt-0 mb-[27px] mx-auto px-6 py-8 rounded-2xl bg-[#ffffff];
 }
 
 .card-header {
   @apply text-xl font-semibold text-left mt-0 mb-[25px];
 }
 .card-label-container {
-  @apply flex justify-between items-center mb-3;
+  @apply flex items-center justify-between mb-3;
 }
 
 .card-label {
-  @apply text-sm font-medium  cursor-pointer;
+  @apply text-sm font-medium cursor-pointer;
 }
 .toast {
   @apply fixed w-fit text-white font-medium shadow-[4px_8px_20px_rgba(0,0,0,0.15)] mx-auto my-0 px-4 py-2 rounded-[10px] top-[30px] inset-x-0 bg-[#00875f];
@@ -291,10 +291,35 @@ a {
 }
 
 .app-header-container {
-  @apply block pt-4 w-full drop-shadow-[0_35px_35px_rgba(0,0,0,0.25)] min-h-[30vh] flex flex-col items-center bg-magic block;
+  @apply block w-full drop-shadow-[0_35px_35px_rgba(0,0,0,0.25)] min-h-[40%] flex-col gap-2.5 p-8 items-center bg-[url('/login_bg.png')] bg-cover bg-no-repeat pb-20;
   text-align: -webkit-center;
 }
 
 .redirect-container {
-  @apply flex flex-col items-center min-h-screen bg-[length:100%_auto] bg-[url('/background.svg')];
+  @apply flex flex-col items-center h-screen bg-center bg-cover bg-no-repeat bg-[url('/redirect_bg.png')];
+}
+
+.redirect-card {
+  @apply bg-[#F8F8FA] rounded-[10px] shadow-[0px_4px_24px_rgba(49,49,49,0.1)] p-2 m-12;
+}
+
+.social-login-button {
+  @apply flex flex-row min-w-[296px] h-12 text-[#3C4043] transition-[0.1s] px-6 py-3 rounded-[300px] bg-[#ffffff] border-2 border-[#DADCE0] relative top-16;
+}
+
+.social-login-button:disabled {
+  @apply opacity-50;
+}
+
+.social-login-button:hover:enabled {
+  @apply cursor-pointer;
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)), #ffffff;
+}
+.social-login-button:active:enabled {
+  @apply opacity-50 scale-[0.99];
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)), #ffffff;
+}
+
+.api-button {
+  @apply bg-[#6844bc] text-[#FFFFFF] flex w-[280px] justify-center items-center h-12 font-semibold text-base leading-6 transition-[0.1s] px-6 py-3 rounded-[300px] border-[none];
 }
diff --git a/scaffolds/nextjs-solana-dedicated-wallet/template/tailwind.config.js b/scaffolds/nextjs-solana-dedicated-wallet/template/tailwind.config.js
index 1da1a7e..0fc0404 100644
--- a/scaffolds/nextjs-solana-dedicated-wallet/template/tailwind.config.js
+++ b/scaffolds/nextjs-solana-dedicated-wallet/template/tailwind.config.js
@@ -1,19 +1,17 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-	content: [
-		'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
-		'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
-		'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
-	],
-	theme: {
-		extend: {
-			backgroundImage: {
-				magic: "url('../../public//background.svg')",
-				'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-				'gradient-conic':
-					'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
-			},
-		},
-	},
-	plugins: [],
-}
+  content: [
+    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+        'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+      },
+    },
+  },
+  plugins: [],
+};