diff --git a/apps/mock-shopify-serverless/src/handlers/payment.ts b/apps/mock-shopify-serverless/src/handlers/payment.ts
index 82b8fab2..6d7e11c7 100644
--- a/apps/mock-shopify-serverless/src/handlers/payment.ts
+++ b/apps/mock-shopify-serverless/src/handlers/payment.ts
@@ -30,7 +30,7 @@ export const payment = async (event: APIGatewayProxyEventV2): Promise<APIGateway
                 payment_method: {
                     type: 'type',
                     data: {
-                        cancel_url: 'localhost:4004/processing',
+                        cancel_url: 'http://localhost:4004/processing',
                     },
                 },
                 proposed_at: '2021-08-10T18:02:00.000Z',
diff --git a/apps/payment-ui/src/components/Button/Primary.tsx b/apps/payment-ui/src/components/Button/Primary.tsx
index ae72638a..9ced9e35 100755
--- a/apps/payment-ui/src/components/Button/Primary.tsx
+++ b/apps/payment-ui/src/components/Button/Primary.tsx
@@ -31,7 +31,7 @@ export const Primary = forwardRef<HTMLButtonElement, Props>(function Primary(pro
                 'disabled:bg-slate-200',
                 'disabled:cursor-not-allowed',
                 !pending && 'hover:bg-indigo-500',
-                pending && 'cursor-not-allowed',
+                pending && 'cursor-not-allowed'
             )}
             onClick={e => {
                 if (!pending && !disabled) {
@@ -46,11 +46,11 @@ export const Primary = forwardRef<HTMLButtonElement, Props>(function Primary(pro
                     'font-semibold',
                     'items-center',
                     'justify-center',
-                    'text-current',
+                    'text-center',
                     'text-sm',
                     'transition-all',
                     'group-disabled:text-neutral-400',
-                    pending ? 'opacity-0' : 'opacity-100',
+                    pending ? 'opacity-0' : 'opacity-100'
                 )}
             >
                 {rest.children}
diff --git a/apps/payment-ui/src/components/DefaultLayout.tsx b/apps/payment-ui/src/components/DefaultLayout.tsx
index d80f98f8..0c814a25 100644
--- a/apps/payment-ui/src/components/DefaultLayout.tsx
+++ b/apps/payment-ui/src/components/DefaultLayout.tsx
@@ -1,4 +1,5 @@
 import DisplaySection from '@/components/DisplaySection';
+import FooterSection from './FooterSection';
 
 interface Props {
     className?: string;
@@ -12,6 +13,7 @@ export function DefaultLayout(props: Props) {
             <div className="flex flex-col flex-auto container mx-auto bg-white rounded-t-2xl max-w-2xl px-4 sm:px-20 pt-16">
                 {props.children}
             </div>
+            <FooterSection />
         </main>
     );
 }
diff --git a/apps/payment-ui/src/components/DisplaySection.tsx b/apps/payment-ui/src/components/DisplaySection.tsx
index 5f72cd11..7757da91 100755
--- a/apps/payment-ui/src/components/DisplaySection.tsx
+++ b/apps/payment-ui/src/components/DisplaySection.tsx
@@ -1,30 +1,9 @@
-import { getPaymentDetails } from '@/features/payment-details/paymentDetailsSlice';
 import Image from 'next/image';
-import { MdArrowBack } from 'react-icons/md';
-import { useSelector } from 'react-redux';
 
 const DisplaySection = () => {
-    const paymentDetails = useSelector(getPaymentDetails);
-
-    const handleBackButtonClick = () => {
-        if (paymentDetails?.cancelUrl) {
-            window.location.href = paymentDetails.cancelUrl;
-        }
-    };
-
     return (
-        <div className="w-full max-w-xl mx-auto">
-            <div className="container mx-auto">
-                <div className="grid grid-cols-3 h-16 py-2 font-black text-white text-2xl">
-                    <button className="btn btn-ghost z-10" onClick={handleBackButtonClick}>
-                        <MdArrowBack color="white" size={30} />
-                    </button>
-                    <div className="flex flex-col mx-auto my-auto">
-                        <Image src="/solana-pay.svg" alt="Solana Pay Logo" width={80} height={200} />
-                    </div>
-                    <div />
-                </div>
-            </div>
+        <div className="flex items-center justify-center h-16 py-2 w-full max-w-xl mx-auto">
+            <Image src="/solana-pay.svg" alt="Solana Pay Logo" width={80} height={200} />
         </div>
     );
 };
diff --git a/apps/payment-ui/src/components/FooterSection.tsx b/apps/payment-ui/src/components/FooterSection.tsx
index 76a37e4c..86b370e3 100644
--- a/apps/payment-ui/src/components/FooterSection.tsx
+++ b/apps/payment-ui/src/components/FooterSection.tsx
@@ -1,3 +1,4 @@
+import * as Button from '@/components/Button';
 import CancelTransactionButton from '@/components/CancelTransactionButton';
 import SolanaPayErrorView from '@/components/SolanaPayErrorView';
 import WalletSection from '@/components/WalletSection';
@@ -7,8 +8,10 @@ import {
     getIsSolanaPayNotification,
     getSolanaPayNotification,
 } from '@/features/notification/notificationSlice';
+import { getPaymentDetails } from '@/features/payment-details/paymentDetailsSlice';
 import { getPaymentMethod } from '@/features/payment-options/paymentOptionsSlice';
 import { MergedState, getMergedState } from '@/features/payment-session/paymentSessionSlice';
+import { useRouter } from 'next/router';
 import { useSelector } from 'react-redux';
 
 const FooterSection = () => {
@@ -18,6 +21,9 @@ const FooterSection = () => {
     const solanaPayNotification = useSelector(getSolanaPayNotification);
     const connectedWalletNotification = useSelector(getConnectWalletNotification);
 
+    const paymentDetails = useSelector(getPaymentDetails);
+    const router = useRouter();
+
     const isPayWithWalletSection = () =>
         paymentMethod == 'connect-wallet' &&
         mergedState == MergedState.start &&
@@ -30,12 +36,18 @@ const FooterSection = () => {
         connectedWalletNotification != Notification.declined;
 
     return (
-        <div className="w-full">
-            <div className="container h-36 mx-auto px-4 sm:px-20 bg-white text-white text-center max-w-2xl">
+        <div className="container w-full max-w-2xl mx-auto bg-white text-white text-center px-4 sm:px-20">
+            <div className="">
                 {isPayWithWalletSection() && <WalletSection />}
                 {isSolanaPayErrorView() && <SolanaPayErrorView />}
                 {isCancelTransactionButton() && <CancelTransactionButton />}
             </div>
+            <Button.Primary
+                onClick={() => router.push(paymentDetails?.cancelUrl!)}
+                className="bg-red-600 text-white w-full shadow-xl text-lg my-2"
+            >
+                Cancel order
+            </Button.Primary>
         </div>
     );
 };
diff --git a/apps/payment-ui/src/components/WalletSection.tsx b/apps/payment-ui/src/components/WalletSection.tsx
index 7c2a9b96..ef622b4c 100644
--- a/apps/payment-ui/src/components/WalletSection.tsx
+++ b/apps/payment-ui/src/components/WalletSection.tsx
@@ -8,33 +8,20 @@ const WalletSection = () => {
     const { connected } = useWallet();
 
     return (
-        <div className="flex flex-col justify-end h-full pb-4 py-2 items-center w-full">
+        <div className="flex flex-col justify-end h-full items-center w-full">
             {!connected ? (
-                <WalletMultiButton
-                    style={{
-                        backgroundColor: 'black',
-                        width: '400',
-                        display: 'flex',
-                        justifyContent: 'center',
-                        alignItems: 'center',
-                        zIndex: 100,
-                    }}
-                >
-                    <div className="flex flex-row items-center justify-center">
-                        <div className="pl-1">Connect wallet</div>
-                    </div>
-                </WalletMultiButton>
-            ) : (
                 <div className="w-full">
-                    <div className="pb-4">
-                        <SimpleNotificationView />
-                    </div>
-                    <div className="pb-2">
-                        <CustomerProfile />
-                    </div>
-                    <div className="pt-2">
-                        <BuyButton />
-                    </div>
+                    <WalletMultiButton>
+                        <div className="flex flex-row items-center justify-center">
+                            <div className="pl-1">Connect wallet</div>
+                        </div>
+                    </WalletMultiButton>
+                </div>
+            ) : (
+                <div className="w-full flex flex-col space-y-2">
+                    <SimpleNotificationView />
+                    <CustomerProfile />
+                    <BuyButton />
                 </div>
             )}
         </div>
diff --git a/apps/payment-ui/src/pages/[paymentId]/index.tsx b/apps/payment-ui/src/pages/[paymentId]/index.tsx
index 8ee8f2bf..f3f67030 100644
--- a/apps/payment-ui/src/pages/[paymentId]/index.tsx
+++ b/apps/payment-ui/src/pages/[paymentId]/index.tsx
@@ -1,6 +1,5 @@
 import CheckoutSection from '@/components/CheckoutSection';
 import { DefaultLayout } from '@/components/DefaultLayout';
-import FooterSection from '@/components/FooterSection';
 import { useRouter } from 'next/router';
 
 export default function CheckoutPage() {
@@ -13,7 +12,6 @@ export default function CheckoutPage() {
     return (
         <DefaultLayout>
             <CheckoutSection />
-            <FooterSection />
         </DefaultLayout>
     );
 }
diff --git a/apps/payment-ui/src/pages/_app.tsx b/apps/payment-ui/src/pages/_app.tsx
index 24b6cd63..5269e3f6 100755
--- a/apps/payment-ui/src/pages/_app.tsx
+++ b/apps/payment-ui/src/pages/_app.tsx
@@ -5,6 +5,7 @@ import WalletHandler from '@/components/handlers/WalletHandler';
 import WebsocketHandler from '@/components/handlers/WebsocketHandler';
 import WindowHandler from '@/components/handlers/WindowHandler';
 import '@/styles/globals.css';
+import '@/styles/wallet.css';
 import {
     SolanaMobileWalletAdapter,
     createDefaultAddressSelector,
@@ -14,7 +15,6 @@ import {
 import { WalletAdapterNetwork } from '@solana/wallet-adapter-base';
 import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react';
 import { WalletModalProvider } from '@solana/wallet-adapter-react-ui';
-import '@solana/wallet-adapter-react-ui/styles.css';
 import { PhantomWalletAdapter, SolflareWalletAdapter } from '@solana/wallet-adapter-wallets';
 import { clusterApiUrl } from '@solana/web3.js';
 import type { AppProps } from 'next/app';
diff --git a/apps/payment-ui/src/styles/globals.css b/apps/payment-ui/src/styles/globals.css
index 36ebdbc4..2a2c3fd9 100755
--- a/apps/payment-ui/src/styles/globals.css
+++ b/apps/payment-ui/src/styles/globals.css
@@ -31,14 +31,6 @@ a {
     width: 100%;
 }
 
-.wallet-adapter-button-trigger {
-    background-color: black;
-}
-
-.wallet-adapter-button-trigger {
-    background-color: black;
-}
-
 @layer base {
     :root {
         --background: 0 0% 100%;
diff --git a/apps/payment-ui/src/styles/wallet.css b/apps/payment-ui/src/styles/wallet.css
new file mode 100644
index 00000000..8edc0baa
--- /dev/null
+++ b/apps/payment-ui/src/styles/wallet.css
@@ -0,0 +1,302 @@
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');
+
+.wallet-adapter-button {
+    background-color: transparent;
+    border: none;
+    color: #fff;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
+        Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    font-size: 14px;
+    font-weight: 600;
+    height: 48px;
+    line-height: 48px;
+    padding: 0 24px;
+    border-radius: 4px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.wallet-adapter-button-trigger {
+    background-color: #512da8;
+}
+
+.wallet-adapter-button:not([disabled]):focus-visible {
+    outline-color: white;
+}
+
+.wallet-adapter-button:not([disabled]):hover {
+    background-color: #1a1f2e;
+}
+
+.wallet-adapter-button[disabled] {
+    background: #404144;
+    color: #999;
+    cursor: not-allowed;
+}
+
+.wallet-adapter-button-end-icon,
+.wallet-adapter-button-start-icon,
+.wallet-adapter-button-end-icon img,
+.wallet-adapter-button-start-icon img {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+}
+
+.wallet-adapter-button-end-icon {
+    margin-left: 12px;
+}
+
+.wallet-adapter-button-start-icon {
+    margin-right: 12px;
+}
+
+.wallet-adapter-collapse {
+    width: 100%;
+}
+
+.wallet-adapter-dropdown {
+    position: relative;
+    display: block;
+}
+
+.wallet-adapter-dropdown-list {
+    position: absolute;
+    z-index: 99;
+    display: grid;
+    grid-template-rows: 1fr;
+    grid-row-gap: 10px;
+    padding: 10px;
+    top: 100%;
+    right: 0;
+    margin: 0;
+    list-style: none;
+    background: #2c2d30;
+    border-radius: 10px;
+    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.6);
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
+    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
+        Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+}
+
+.wallet-adapter-dropdown-list-active {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(10px);
+}
+
+.wallet-adapter-dropdown-list-item {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    white-space: nowrap;
+    box-sizing: border-box;
+    padding: 0 20px;
+    width: 100%;
+    border-radius: 6px;
+    font-size: 14px;
+    font-weight: 600;
+    height: 37px;
+    color: #fff;
+}
+
+.wallet-adapter-dropdown-list-item:not([disabled]):hover {
+    background-color: #1a1f2e;
+}
+
+.wallet-adapter-modal-collapse-button svg {
+    align-self: center;
+    fill: #999;
+}
+
+.wallet-adapter-modal-collapse-button.wallet-adapter-modal-collapse-button-active svg {
+    transform: rotate(180deg);
+    transition: transform ease-in 150ms;
+}
+
+.wallet-adapter-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    opacity: 0;
+    transition: opacity linear 150ms;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 1040;
+    overflow-y: auto;
+}
+
+.wallet-adapter-modal.wallet-adapter-modal-fade-in {
+    opacity: 1;
+}
+
+.wallet-adapter-modal-button-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 18px;
+    right: 18px;
+    padding: 12px;
+    cursor: pointer;
+    background: #1a1f2e;
+    border: none;
+    border-radius: 50%;
+}
+
+.wallet-adapter-modal-button-close:focus-visible {
+    outline-color: white;
+}
+
+.wallet-adapter-modal-button-close svg {
+    fill: #777;
+    transition: fill 200ms ease 0s;
+}
+
+.wallet-adapter-modal-button-close:hover svg {
+    fill: #fff;
+}
+
+.wallet-adapter-modal-overlay {
+    background: rgba(0, 0, 0, 0.5);
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+}
+
+.wallet-adapter-modal-container {
+    display: flex;
+    margin: 3rem;
+    min-height: calc(100vh - 6rem); /* 100vh - 2 * margin */
+    align-items: center;
+    justify-content: center;
+}
+
+@media (max-width: 480px) {
+    .wallet-adapter-modal-container {
+        margin: 1rem;
+        min-height: calc(100vh - 2rem); /* 100vh - 2 * margin */
+    }
+}
+
+.wallet-adapter-modal-wrapper {
+    box-sizing: border-box;
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    z-index: 1050;
+    max-width: 400px;
+    border-radius: 10px;
+    background: #10141f;
+    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.6);
+    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
+        Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    flex: 1;
+}
+
+.wallet-adapter-modal-wrapper .wallet-adapter-button {
+    width: 100%;
+}
+
+.wallet-adapter-modal-title {
+    font-weight: 500;
+    font-size: 24px;
+    line-height: 36px;
+    margin: 0;
+    padding: 64px 48px 48px 48px;
+    text-align: center;
+    color: #fff;
+}
+
+@media (max-width: 374px) {
+    .wallet-adapter-modal-title {
+        font-size: 18px;
+    }
+}
+
+.wallet-adapter-modal-list {
+    margin: 0 0 12px 0;
+    padding: 0;
+    width: 100%;
+    list-style: none;
+}
+
+.wallet-adapter-modal-list .wallet-adapter-button {
+    font-weight: 400;
+    border-radius: 0;
+    font-size: 18px;
+}
+
+.wallet-adapter-modal-list .wallet-adapter-button-end-icon,
+.wallet-adapter-modal-list .wallet-adapter-button-start-icon,
+.wallet-adapter-modal-list .wallet-adapter-button-end-icon img,
+.wallet-adapter-modal-list .wallet-adapter-button-start-icon img {
+    width: 28px;
+    height: 28px;
+}
+
+.wallet-adapter-modal-list .wallet-adapter-button span {
+    margin-left: auto;
+    font-size: 14px;
+    opacity: 0.6;
+}
+
+.wallet-adapter-modal-list-more {
+    cursor: pointer;
+    border: none;
+    padding: 12px 24px 24px 12px;
+    align-self: flex-end;
+    display: flex;
+    align-items: center;
+    background-color: transparent;
+    color: #fff;
+}
+
+.wallet-adapter-modal-list-more svg {
+    transition: all 0.1s ease;
+    fill: rgba(255, 255, 255, 1);
+    margin-left: 0.5rem;
+}
+
+.wallet-adapter-modal-list-more-icon-rotate {
+    transform: rotate(180deg);
+}
+
+.wallet-adapter-modal-middle {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0 24px 24px 24px;
+    box-sizing: border-box;
+}
+
+.wallet-adapter-modal-middle-button {
+    display: block;
+    cursor: pointer;
+    margin-top: 48px;
+    width: 100%;
+    background-color: #512da8;
+    padding: 12px;
+    font-size: 18px;
+    border: none;
+    border-radius: 8px;
+    color: #fff;
+}