diff --git a/packages/keychain/__image_snapshots__/components-connect-authenticate--default-chromium.png b/packages/keychain/__image_snapshots__/components-connect-authenticate--default-chromium.png
index 1a2b49f98..d609b8b6a 100644
Binary files a/packages/keychain/__image_snapshots__/components-connect-authenticate--default-chromium.png and b/packages/keychain/__image_snapshots__/components-connect-authenticate--default-chromium.png differ
diff --git a/packages/keychain/__image_snapshots__/components-connect-create-createcontroller--default-chromium.png b/packages/keychain/__image_snapshots__/components-connect-create-createcontroller--default-chromium.png
index e2f4063d1..f3567959c 100644
Binary files a/packages/keychain/__image_snapshots__/components-connect-create-createcontroller--default-chromium.png and b/packages/keychain/__image_snapshots__/components-connect-create-createcontroller--default-chromium.png differ
diff --git a/packages/keychain/__image_snapshots__/components-connect-create-createcontroller--with-generic-error-chromium.png b/packages/keychain/__image_snapshots__/components-connect-create-createcontroller--with-generic-error-chromium.png
index 47fa09f35..1b2256991 100644
Binary files a/packages/keychain/__image_snapshots__/components-connect-create-createcontroller--with-generic-error-chromium.png and b/packages/keychain/__image_snapshots__/components-connect-create-createcontroller--with-generic-error-chromium.png differ
diff --git a/packages/keychain/__image_snapshots__/components-connect-create-createcontroller--with-light-mode-chromium.png b/packages/keychain/__image_snapshots__/components-connect-create-createcontroller--with-light-mode-chromium.png
index e2f4063d1..f3567959c 100644
Binary files a/packages/keychain/__image_snapshots__/components-connect-create-createcontroller--with-light-mode-chromium.png and b/packages/keychain/__image_snapshots__/components-connect-create-createcontroller--with-light-mode-chromium.png differ
diff --git a/packages/keychain/__image_snapshots__/components-connect-create-createcontroller--with-theme-chromium.png b/packages/keychain/__image_snapshots__/components-connect-create-createcontroller--with-theme-chromium.png
index 061a7b18f..40f37c3ab 100644
Binary files a/packages/keychain/__image_snapshots__/components-connect-create-createcontroller--with-theme-chromium.png and b/packages/keychain/__image_snapshots__/components-connect-create-createcontroller--with-theme-chromium.png differ
diff --git a/packages/keychain/__image_snapshots__/components-connect-create-createcontroller--with-timeout-error-chromium.png b/packages/keychain/__image_snapshots__/components-connect-create-createcontroller--with-timeout-error-chromium.png
index 1ff2e2da1..370a11920 100644
Binary files a/packages/keychain/__image_snapshots__/components-connect-create-createcontroller--with-timeout-error-chromium.png and b/packages/keychain/__image_snapshots__/components-connect-create-createcontroller--with-timeout-error-chromium.png differ
diff --git a/packages/keychain/__image_snapshots__/components-connect-create-createcontroller--with-validation-error-chromium.png b/packages/keychain/__image_snapshots__/components-connect-create-createcontroller--with-validation-error-chromium.png
index 084538f95..d7b93225e 100644
Binary files a/packages/keychain/__image_snapshots__/components-connect-create-createcontroller--with-validation-error-chromium.png and b/packages/keychain/__image_snapshots__/components-connect-create-createcontroller--with-validation-error-chromium.png differ
diff --git a/packages/keychain/__image_snapshots__/components-connect-createsession--default-chromium.png b/packages/keychain/__image_snapshots__/components-connect-createsession--default-chromium.png
index dd8bf67dc..7e2dac90e 100644
Binary files a/packages/keychain/__image_snapshots__/components-connect-createsession--default-chromium.png and b/packages/keychain/__image_snapshots__/components-connect-createsession--default-chromium.png differ
diff --git a/packages/keychain/__image_snapshots__/components-connect-createsession--with-preset-chromium.png b/packages/keychain/__image_snapshots__/components-connect-createsession--with-preset-chromium.png
index 94e6316e8..5c316bb2b 100644
Binary files a/packages/keychain/__image_snapshots__/components-connect-createsession--with-preset-chromium.png and b/packages/keychain/__image_snapshots__/components-connect-createsession--with-preset-chromium.png differ
diff --git a/packages/keychain/__image_snapshots__/components-connect-upgrade--default-chromium.png b/packages/keychain/__image_snapshots__/components-connect-upgrade--default-chromium.png
index e9cec5e09..dcc472a14 100644
Binary files a/packages/keychain/__image_snapshots__/components-connect-upgrade--default-chromium.png and b/packages/keychain/__image_snapshots__/components-connect-upgrade--default-chromium.png differ
diff --git a/packages/keychain/__image_snapshots__/components-deploycontroller--default-chromium.png b/packages/keychain/__image_snapshots__/components-deploycontroller--default-chromium.png
index e0fbc229b..a89e22673 100644
Binary files a/packages/keychain/__image_snapshots__/components-deploycontroller--default-chromium.png and b/packages/keychain/__image_snapshots__/components-deploycontroller--default-chromium.png differ
diff --git a/packages/keychain/__image_snapshots__/components-errorpage--default-chromium.png b/packages/keychain/__image_snapshots__/components-errorpage--default-chromium.png
index be5dae80c..15709d0fe 100644
Binary files a/packages/keychain/__image_snapshots__/components-errorpage--default-chromium.png and b/packages/keychain/__image_snapshots__/components-errorpage--default-chromium.png differ
diff --git a/packages/keychain/__image_snapshots__/components-errorpage--long-error-chromium.png b/packages/keychain/__image_snapshots__/components-errorpage--long-error-chromium.png
index f8b02469e..167f323a4 100644
Binary files a/packages/keychain/__image_snapshots__/components-errorpage--long-error-chromium.png and b/packages/keychain/__image_snapshots__/components-errorpage--long-error-chromium.png differ
diff --git a/packages/keychain/__image_snapshots__/components-failure--default-chromium.png b/packages/keychain/__image_snapshots__/components-failure--default-chromium.png
index 2cd016b0a..a07ce8b84 100644
Binary files a/packages/keychain/__image_snapshots__/components-failure--default-chromium.png and b/packages/keychain/__image_snapshots__/components-failure--default-chromium.png differ
diff --git a/packages/keychain/__image_snapshots__/components-funding--default-chromium.png b/packages/keychain/__image_snapshots__/components-funding--default-chromium.png
index 7c3d8809f..91093c2d2 100644
Binary files a/packages/keychain/__image_snapshots__/components-funding--default-chromium.png and b/packages/keychain/__image_snapshots__/components-funding--default-chromium.png differ
diff --git a/packages/keychain/__image_snapshots__/components-funding-depositeth--default-chromium.png b/packages/keychain/__image_snapshots__/components-funding-depositeth--default-chromium.png
index 85a311931..adfa0d703 100644
Binary files a/packages/keychain/__image_snapshots__/components-funding-depositeth--default-chromium.png and b/packages/keychain/__image_snapshots__/components-funding-depositeth--default-chromium.png differ
diff --git a/packages/keychain/__image_snapshots__/components-funding-purchasecredits--default-chromium.png b/packages/keychain/__image_snapshots__/components-funding-purchasecredits--default-chromium.png
index 94a503a76..c6f291024 100644
Binary files a/packages/keychain/__image_snapshots__/components-funding-purchasecredits--default-chromium.png and b/packages/keychain/__image_snapshots__/components-funding-purchasecredits--default-chromium.png differ
diff --git a/packages/keychain/__image_snapshots__/components-layout-container-header-banner--expanded-chromium.png b/packages/keychain/__image_snapshots__/components-layout-container-header-banner--expanded-chromium.png
index 021ddc0b8..ceba738c6 100644
Binary files a/packages/keychain/__image_snapshots__/components-layout-container-header-banner--expanded-chromium.png and b/packages/keychain/__image_snapshots__/components-layout-container-header-banner--expanded-chromium.png differ
diff --git a/packages/keychain/__image_snapshots__/components-layout-container-header-banner--icon-component-prop-chromium.png b/packages/keychain/__image_snapshots__/components-layout-container-header-banner--icon-component-prop-chromium.png
new file mode 100644
index 000000000..1d06e600d
Binary files /dev/null and b/packages/keychain/__image_snapshots__/components-layout-container-header-banner--icon-component-prop-chromium.png differ
diff --git a/packages/keychain/__image_snapshots__/components-layout-container-header-banner--icon-element-prop-chromium.png b/packages/keychain/__image_snapshots__/components-layout-container-header-banner--icon-element-prop-chromium.png
new file mode 100644
index 000000000..1d06e600d
Binary files /dev/null and b/packages/keychain/__image_snapshots__/components-layout-container-header-banner--icon-element-prop-chromium.png differ
diff --git a/packages/keychain/__image_snapshots__/components-layout-container-header-banner--very-long-title-chromium.png b/packages/keychain/__image_snapshots__/components-layout-container-header-banner--very-long-title-chromium.png
new file mode 100644
index 000000000..1d06e600d
Binary files /dev/null and b/packages/keychain/__image_snapshots__/components-layout-container-header-banner--very-long-title-chromium.png differ
diff --git a/packages/keychain/__image_snapshots__/components-pending--default-chromium.png b/packages/keychain/__image_snapshots__/components-pending--default-chromium.png
index cbc12c0d4..fde9b2562 100644
Binary files a/packages/keychain/__image_snapshots__/components-pending--default-chromium.png and b/packages/keychain/__image_snapshots__/components-pending--default-chromium.png differ
diff --git a/packages/keychain/__image_snapshots__/components-settings--default-chromium.png b/packages/keychain/__image_snapshots__/components-settings--default-chromium.png
index 1e09823a5..a64792296 100644
Binary files a/packages/keychain/__image_snapshots__/components-settings--default-chromium.png and b/packages/keychain/__image_snapshots__/components-settings--default-chromium.png differ
diff --git a/packages/keychain/__image_snapshots__/components-settings-delegate--default-chromium.png b/packages/keychain/__image_snapshots__/components-settings-delegate--default-chromium.png
index d74fe8ac2..f25e95702 100644
Binary files a/packages/keychain/__image_snapshots__/components-settings-delegate--default-chromium.png and b/packages/keychain/__image_snapshots__/components-settings-delegate--default-chromium.png differ
diff --git a/packages/keychain/__image_snapshots__/components-settings-recovery--default-chromium.png b/packages/keychain/__image_snapshots__/components-settings-recovery--default-chromium.png
index 04cb65629..c18340a20 100644
Binary files a/packages/keychain/__image_snapshots__/components-settings-recovery--default-chromium.png and b/packages/keychain/__image_snapshots__/components-settings-recovery--default-chromium.png differ
diff --git a/packages/keychain/__image_snapshots__/components-signmessage--default-chromium.png b/packages/keychain/__image_snapshots__/components-signmessage--default-chromium.png
index 94e9f2844..118ea55a2 100644
Binary files a/packages/keychain/__image_snapshots__/components-signmessage--default-chromium.png and b/packages/keychain/__image_snapshots__/components-signmessage--default-chromium.png differ
diff --git a/packages/keychain/__image_snapshots__/components-transaction-confirmtransaction--default-chromium.png b/packages/keychain/__image_snapshots__/components-transaction-confirmtransaction--default-chromium.png
index 4c2dd5510..75718f023 100644
Binary files a/packages/keychain/__image_snapshots__/components-transaction-confirmtransaction--default-chromium.png and b/packages/keychain/__image_snapshots__/components-transaction-confirmtransaction--default-chromium.png differ
diff --git a/packages/keychain/__image_snapshots__/components-transaction-confirmtransaction--with-theme-chromium.png b/packages/keychain/__image_snapshots__/components-transaction-confirmtransaction--with-theme-chromium.png
index fffa85860..46722b5d1 100644
Binary files a/packages/keychain/__image_snapshots__/components-transaction-confirmtransaction--with-theme-chromium.png and b/packages/keychain/__image_snapshots__/components-transaction-confirmtransaction--with-theme-chromium.png differ
diff --git a/packages/keychain/index.html b/packages/keychain/index.html
index 1c96ade2e..62608acd4 100644
--- a/packages/keychain/index.html
+++ b/packages/keychain/index.html
@@ -50,7 +50,7 @@
       })();
     </script>
   </head>
-  <body class="h-screen bg-background text-foreground">
+  <body class="h-screen bg-background text-foreground overflow-y-auto">
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
diff --git a/packages/keychain/src/components/DeployController.tsx b/packages/keychain/src/components/DeployController.tsx
index 687a29f53..d185d8552 100644
--- a/packages/keychain/src/components/DeployController.tsx
+++ b/packages/keychain/src/components/DeployController.tsx
@@ -170,7 +170,7 @@ export function DeployController({
           title="Deploying Controller"
           description={`Your controller is being deployed on ${chainName}`}
         >
-          <Content alignItems="center">
+          <Content className="items-center">
             {deployHash && controller && (
               <ExplorerLink
                 chainId={controller.chainId()}
@@ -201,7 +201,7 @@ export function DeployController({
           title="Success!"
           description={`Your controller has been deployed on ${chainName}`}
         >
-          <Content alignItems="center">
+          <Content className="items-center">
             {deployHash && controller && (
               <ExplorerLink
                 chainId={controller.chainId()}
diff --git a/packages/keychain/src/components/ErrorBoundary.tsx b/packages/keychain/src/components/ErrorBoundary.tsx
index 11aa73462..049678cf3 100644
--- a/packages/keychain/src/components/ErrorBoundary.tsx
+++ b/packages/keychain/src/components/ErrorBoundary.tsx
@@ -46,7 +46,7 @@ export function ErrorPage({ error }: { error: Error }) {
       description="Something went wrong"
       icon={<AlertIcon size="lg" />}
     >
-      <Content gap={4}>
+      <Content className="gap-4">
         <div className="flex w-full px-4 py-6 bg-secondary border border-quaternary rounded">
           <p className="w-full text-sm">{error.message}</p>
         </div>
diff --git a/packages/keychain/src/components/connect/CreateSession.tsx b/packages/keychain/src/components/connect/CreateSession.tsx
index 8165cafb9..c8af9c6ce 100644
--- a/packages/keychain/src/components/connect/CreateSession.tsx
+++ b/packages/keychain/src/components/connect/CreateSession.tsx
@@ -118,7 +118,7 @@ export function CreateSession({
         }
       }}
     >
-      <Content gap={6}>
+      <Content className="gap-6">
         <SessionConsent isVerified={policies?.verified} />
         {policies?.verified ? (
           <VerifiedSessionSummary
diff --git a/packages/keychain/src/components/connect/create/CreateController.tsx b/packages/keychain/src/components/connect/create/CreateController.tsx
index a04e2d81e..9f7b573c4 100644
--- a/packages/keychain/src/components/connect/create/CreateController.tsx
+++ b/packages/keychain/src/components/connect/create/CreateController.tsx
@@ -1,6 +1,6 @@
 import { useRef, useState, useEffect } from "react";
 import { Container, Footer, Content } from "@/components/layout";
-import { Button, cn } from "@cartridge/ui-next";
+import { Button, cn, Input } from "@cartridge/ui-next";
 import { useControllerTheme } from "@/hooks/theme";
 import { usePostHog } from "posthog-js/react";
 import { useDebounce } from "@/hooks/debounce";
@@ -8,7 +8,6 @@ import { useUsernameValidation } from "./useUsernameValidation";
 import { LoginMode } from "../types";
 import { Legal, StatusTray } from ".";
 import { useCreateController } from "./useCreateController";
-import { Input } from "@cartridge/ui-next";
 import { ErrorAlert } from "@/components/ErrorAlert";
 import { VerifiableControllerTheme } from "@/context/theme";
 import InAppSpy from "inapp-spy";
@@ -58,7 +57,7 @@ export function CreateControllerView({
           if (e.key === "Enter") e.preventDefault();
         }}
       >
-        <Content mb="2rem" gap={0}>
+        <Content className="gap-0">
           <div
             className={cn(
               "border-[#E46958] rounded",
diff --git a/packages/keychain/src/components/funding/DepositEth.tsx b/packages/keychain/src/components/funding/DepositEth.tsx
index eb055e030..7e9f08da8 100644
--- a/packages/keychain/src/components/funding/DepositEth.tsx
+++ b/packages/keychain/src/components/funding/DepositEth.tsx
@@ -155,7 +155,7 @@ function DepositEthInner({ onComplete, onBack }: DepositEthProps) {
       Icon={EthereumIcon}
       onBack={onBack}
     >
-      <Content gap={6}>
+      <Content className="gap-6">
         <Balance showBalances={["eth"]} />
       </Content>
 
diff --git a/packages/keychain/src/components/funding/PurchaseCredits.tsx b/packages/keychain/src/components/funding/PurchaseCredits.tsx
index 4cf267d82..61db5c63c 100644
--- a/packages/keychain/src/components/funding/PurchaseCredits.tsx
+++ b/packages/keychain/src/components/funding/PurchaseCredits.tsx
@@ -131,7 +131,7 @@ export function PurchaseCredits({ onBack }: PurchaseCreditsProps) {
       }
       onBack={state === PurchaseState.SELECTION ? onBack : undefined}
     >
-      <Content gap={6}>
+      <Content className="gap-6">
         <Balance showBalances={["credits"]} />
         <ErrorAlert
           variant=""
diff --git a/packages/keychain/src/components/funding/StripeCheckout.tsx b/packages/keychain/src/components/funding/StripeCheckout.tsx
index e421673ce..4138533e4 100644
--- a/packages/keychain/src/components/funding/StripeCheckout.tsx
+++ b/packages/keychain/src/components/funding/StripeCheckout.tsx
@@ -81,7 +81,7 @@ export default function StripeCheckout({
       icon={<CoinsIcon variant="solid" />}
       onBack={onBack}
     >
-      <Content gap={6}>
+      <Content className="gap-6">
         <form id="payment-form">
           <PaymentElement
             id="payment-element"
diff --git a/packages/keychain/src/components/funding/index.tsx b/packages/keychain/src/components/funding/index.tsx
index 582ed3c26..b03a4ffb0 100644
--- a/packages/keychain/src/components/funding/index.tsx
+++ b/packages/keychain/src/components/funding/index.tsx
@@ -50,7 +50,7 @@ export function Funding({ onComplete, title }: FundingProps) {
       description={controller && <CopyAddress address={controller.address} />}
       icon={<ArrowIcon variant="down" />}
     >
-      <Content gap={6}>
+      <Content className="gap-6">
         <Balance showBalances={["credits", "eth"]} />
       </Content>
       <Footer>
diff --git a/packages/keychain/src/components/layout/Content.tsx b/packages/keychain/src/components/layout/Content.tsx
index 341774876..84882b37d 100644
--- a/packages/keychain/src/components/layout/Content.tsx
+++ b/packages/keychain/src/components/layout/Content.tsx
@@ -1,12 +1,18 @@
-import { StackProps, VStack } from "@chakra-ui/react";
-import { useLayout } from "./container";
-
-export function Content({ children, ...stackProps }: StackProps) {
-  const { footer } = useLayout();
+import { cn } from "@cartridge/ui-next";
+import { PropsWithChildren } from "react";
 
+export function Content({
+  children,
+  className,
+}: PropsWithChildren & { className?: string }) {
   return (
-    <VStack w="full" px={4} pb={footer.height} align="stretch" {...stackProps}>
+    <div
+      className={cn(
+        "w-full px-4 pb-[var(--footer-height)] flex flex-col items-stretch gap-2",
+        className,
+      )}
+    >
       {children}
-    </VStack>
+    </div>
   );
 }
diff --git a/packages/keychain/src/components/layout/container/header/Banner.stories.tsx b/packages/keychain/src/components/layout/container/header/Banner.stories.tsx
index 57610fd9e..720ef45d3 100644
--- a/packages/keychain/src/components/layout/container/header/Banner.stories.tsx
+++ b/packages/keychain/src/components/layout/container/header/Banner.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { Banner } from "./Banner";
-import { LayoutContext } from "..";
+import { EthereumIcon, TransferDuoIcon } from "@cartridge/ui-next";
 
 const meta: Meta<typeof Banner> = {
   component: Banner,
@@ -11,23 +11,11 @@ const meta: Meta<typeof Banner> = {
       values: [{ name: "dark", value: "#161a17" }],
     },
   },
-  decorators: [
-    (Story, context) => (
-      <LayoutContext.Provider
-        value={{
-          variant: context.parameters.variant || "default",
-          footer: {
-            height: 0,
-            setHeight: () => {},
-            isOpen: false,
-            onToggle: () => {},
-          },
-        }}
-      >
-        <Story />
-      </LayoutContext.Provider>
-    ),
-  ],
+  args: {
+    variant: "compressed",
+    title: "Welcome to Keychain",
+    description: "Secure your digital assets",
+  },
 } satisfies Meta<typeof Banner>;
 
 export default meta;
@@ -35,21 +23,29 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Expanded: Story = {
-  parameters: {
+  args: {
     variant: "expanded",
   },
+};
+
+export const Compressed: Story = {};
+
+export const IconComponentProp: Story = {
   args: {
-    title: "Welcome to Keychain",
-    description: "Secure your digital assets",
+    Icon: TransferDuoIcon,
   },
 };
 
-export const Compressed: Story = {
-  parameters: {
-    variant: "compressed",
+export const IconElementProp: Story = {
+  args: {
+    icon: <EthereumIcon />,
   },
+};
+
+export const VeryLongTitle: Story = {
   args: {
-    title: "Welcome to Keychain",
-    description: "Secure your digital assets",
+    title: "This is a very long title that should be truncated",
+    description:
+      "This is a very long description that should be wrapped and demonstrate how text behaves when it extends beyond multiple lines. It's important to test how the UI handles lengthy content to ensure proper wrapping, readability, and overall visual appeal. How does this much longer description look in the component?",
   },
 };
diff --git a/packages/keychain/src/components/layout/container/header/Banner.tsx b/packages/keychain/src/components/layout/container/header/Banner.tsx
index 27b396c9c..890fe0a1a 100644
--- a/packages/keychain/src/components/layout/container/header/Banner.tsx
+++ b/packages/keychain/src/components/layout/container/header/Banner.tsx
@@ -1,169 +1,125 @@
-import {
-  VStack,
-  Circle,
-  Text,
-  Center,
-  Flex,
-  Image,
-  Square,
-  HStack,
-} from "@chakra-ui/react";
-import { useControllerTheme } from "@/hooks/theme";
-import { useLayoutVariant } from "../";
-import { TOP_BAR_HEIGHT } from "./TopBar";
-import { IconProps } from "@cartridge/ui-next";
+import { cn, IconProps } from "@cartridge/ui-next";
 
 export type BannerProps = {
   Icon?: React.ComponentType<IconProps>;
   icon?: React.ReactElement;
   title: string | React.ReactElement;
   description?: string | React.ReactElement;
+  variant?: BannerVariant;
 };
-export function Banner({ Icon, icon, title, description }: BannerProps) {
-  const theme = useControllerTheme();
-  const variant = useLayoutVariant();
 
+export type BannerVariant = "expanded" | "compressed";
+
+export function Banner({
+  Icon,
+  icon,
+  title,
+  description,
+  variant = "compressed",
+}: BannerProps) {
   switch (variant) {
     case "expanded":
       return (
-        <VStack w="full" pb={6}>
-          <VStack
-            h={136}
-            w="full"
-            className="bg-[image:var(--theme-cover-url)]"
-            bgSize="cover"
-            bgPos="center"
-            position="relative"
-            mb={10}
-            _before={{
-              content: '""',
-              position: "absolute",
-              top: 0,
-              left: 0,
-              right: 0,
-              bottom: 0,
-              background: `linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, var(--chakra-colors-solid-bg) 100%)`,
-              pointerEvents: "none",
-            }}
-          >
-            <Center position="absolute" bottom={-ICON_OFFSET / 4} left={4}>
-              <HStack w="full" gap={4} align="center">
-                <Flex
-                  position="relative"
-                  h={`${ICON_SIZE}px`}
-                  w={`${ICON_SIZE}px`}
-                  minW={`${ICON_SIZE}px`}
-                >
-                  <Flex
-                    position="absolute"
-                    inset={0}
-                    borderWidth={4}
-                    borderColor="solid.bg"
-                    borderRadius="lg"
-                  />
-                  <Flex
-                    bg="darkGray.700"
-                    borderRadius="lg"
-                    h="100%"
-                    w="100%"
-                    justify="center"
-                    alignItems="center"
-                    overflow="hidden"
-                  >
-                    {Icon ? (
-                      <Circle size="100%" bg="solid.primary">
-                        <Icon size="lg" />
-                      </Circle>
-                    ) : icon ? (
-                      <Circle size="100%" bg="solid.primary">
-                        {icon}
-                      </Circle>
-                    ) : (
-                      <Image
-                        src={theme.icon}
-                        w="100%"
-                        h="100%"
-                        alt="Controller Icon"
-                        objectFit="cover"
-                      />
-                    )}
-                  </Flex>
-                </Flex>
-
-                <VStack align="flex-start" spacing={1}>
-                  <Text fontSize="lg" fontWeight="semibold">
-                    {title}
-                  </Text>
-
-                  {description && (
-                    <Text fontSize="sm" color="text.secondary">
-                      {description}
-                    </Text>
-                  )}
-                </VStack>
-              </HStack>
-            </Center>
-          </VStack>
-        </VStack>
+        <div className="flex flex-col w-full h-[136px] bg-[image:var(--theme-cover-url)] bg-cover bg-center relative mb-16 before:content-[''] before:absolute before:inset-0 before:bg-gradient-to-b before:from-transparent before:to-[var(--chakra-colors-solid-bg)] before:pointer-events-none">
+          <div className="p-4 flex items-center gap-4 absolute -bottom-10 left-1">
+            <HeaderIcon variant={variant} Icon={Icon} icon={icon} />
+            <Headline
+              variant={variant}
+              title={title}
+              description={description}
+            />
+          </div>
+        </div>
       );
     case "compressed":
     default:
       return (
-        <VStack w="full">
-          <HStack
-            h={TOP_BAR_HEIGHT / 4}
-            w="full"
-            className="bg-[image:var(--theme-cover-url)]"
-            bgSize="cover"
-            bgPos="center"
-            pb={6}
-          />
+        <div className="flex flex-col">
+          <div className="w-full bg-[image:var(--theme-cover-url)] bg-cover bg-center h-14 pb-6" />
+          <div className="p-4 flex items-center gap-4">
+            <HeaderIcon variant={variant} Icon={Icon} icon={icon} />
+            <Headline
+              variant={variant}
+              title={title}
+              description={description}
+            />
+          </div>
+        </div>
+      );
+  }
+}
+
+function HeaderIcon({
+  variant,
+  Icon,
+  icon,
+}: Pick<BannerProps, "variant" | "Icon" | "icon">) {
+  return (
+    <IconWrapper variant={variant}>
+      {(() => {
+        if (Icon) {
+          return <Icon />;
+        }
 
-          <HStack w="full" p={4} gap={4} minW={0}>
-            {Icon ? (
-              <Square size="44px" bg="solid.primary" borderRadius="md">
-                <Icon size="lg" />
-              </Square>
-            ) : icon ? (
-              <Square size="44px" bg="solid.primary" borderRadius="md">
-                {icon}
-              </Square>
-            ) : (
-              <Image
-                src={theme.icon}
-                boxSize="44px"
-                alt="Controller Icon"
-                borderRadius="md"
-              />
-            )}
+        if (icon) {
+          return icon;
+        }
 
-            <VStack w="full" align="stretch" gap={1} minW={0}>
-              <Text
-                w="full"
-                fontSize="lg"
-                fontWeight="semibold"
-                noOfLines={1}
-                textOverflow="ellipsis"
-              >
-                {title}
-              </Text>
+        return (
+          <div className="size-full rounded bg-[image:var(--theme-icon-url)] bg-cover bg-center" />
+        );
+      })()}
+    </IconWrapper>
+  );
+}
 
-              {description && (
-                <Text
-                  w="full"
-                  fontSize="xs"
-                  color="text.secondary"
-                  overflowWrap="break-word"
-                >
-                  {description}
-                </Text>
-              )}
-            </VStack>
-          </HStack>
-        </VStack>
+function IconWrapper({
+  variant,
+  children,
+}: {
+  variant?: BannerVariant;
+  children: React.ReactNode;
+}) {
+  switch (variant) {
+    case "expanded":
+      return (
+        <div className="rounded size-20 bg-background flex items-center justify-center">
+          <div className="rounded bg-secondary size-[calc(100%-8px)] flex items-center justify-center">
+            {children}
+          </div>
+        </div>
+      );
+    default:
+    case "compressed":
+      return (
+        <div className="rounded size-11 flex items-center justify-center bg-secondary">
+          {children}
+        </div>
       );
   }
 }
 
-const ICON_SIZE = 80;
-const ICON_OFFSET = 40;
+function Headline({
+  variant,
+  title,
+  description,
+}: Pick<BannerProps, "variant" | "title" | "description">) {
+  return (
+    <div className="flex-1 flex flex-col gap-1">
+      <div className="text-lg font-semibold line-clamp-1 text-ellipsis">
+        {title}
+      </div>
+
+      {description && (
+        <div
+          className={cn(
+            "text-muted-foreground break-words",
+            variant === "compressed" ? "text-xs" : "text-sm",
+          )}
+        >
+          {description}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/packages/keychain/src/components/layout/container/header/TopBar.tsx b/packages/keychain/src/components/layout/container/header/TopBar.tsx
index c0529d427..0ab79c44a 100644
--- a/packages/keychain/src/components/layout/container/header/TopBar.tsx
+++ b/packages/keychain/src/components/layout/container/header/TopBar.tsx
@@ -1,4 +1,3 @@
-import { Spacer, HStack } from "@chakra-ui/react";
 import { CloseButton } from "./CloseButton";
 import { SettingsButton } from "./SettingsButton";
 import { BackButton } from "./BackButton";
@@ -26,42 +25,31 @@ export function TopBar({
   );
 
   return (
-    <HStack
-      w="full"
-      zIndex="overlay"
-      align="center"
-      justify="flex-start"
-      flexShrink={0}
-      bg="transparent"
-      position="absolute"
-      top={0}
-      h={TOP_BAR_HEIGHT / 4}
-      p={2}
-    >
-      {onBack ? (
-        <BackButton onClick={onBack} />
-      ) : (
-        <CloseButton onClose={onClose} />
-      )}
-
-      <Spacer />
-
-      {!hideNetwork && chainId && <Network chainId={chainId} />}
-
-      {!hideAccount && (
-        <>
-          {/* {!!address && (
+    <div className="flex items-center justify-between absolute top-0 left-0 right-0 h-14 p-2 z-50">
+      <div>
+        {onBack ? (
+          <BackButton onClick={onBack} />
+        ) : (
+          <CloseButton onClose={onClose} />
+        )}
+      </div>
+
+      <div className="flex items-center gap-2">
+        {!hideNetwork && chainId && <Network chainId={chainId} />}
+
+        {!hideAccount && (
+          <>
+            {/* {!!address && (
             <>
               <EthBalance chainId={chainId} address={address} />
               {chainId && <AccountMenu onLogout={onLogout} address={address} />}
             </>
           )} */}
-        </>
-      )}
+          </>
+        )}
 
-      {showSettings && <SettingsButton onClick={() => openSettings()} />}
-    </HStack>
+        {showSettings && <SettingsButton onClick={() => openSettings()} />}
+      </div>
+    </div>
   );
 }
-
-export const TOP_BAR_HEIGHT = 56;
diff --git a/packages/keychain/src/components/layout/container/index.tsx b/packages/keychain/src/components/layout/container/index.tsx
index fa9abc6e7..91292bba6 100644
--- a/packages/keychain/src/components/layout/container/index.tsx
+++ b/packages/keychain/src/components/layout/container/index.tsx
@@ -1,15 +1,5 @@
-import {
-  Container as ChakraContainer,
-  VStack,
-  StyleProps,
-  Flex,
-  Show,
-} from "@chakra-ui/react";
-import { motion } from "framer-motion";
-import { PropsWithChildren, createContext, useContext, useState } from "react";
+import { PropsWithChildren } from "react";
 import { Header, HeaderProps } from "./header";
-import { useDisclosure } from "@cartridge/ui-next";
-
 export function Container({
   children,
   onBack,
@@ -20,14 +10,11 @@ export function Container({
   icon,
   title,
   description,
+  className,
   variant,
-}: {
-  variant?: LayoutVariant;
-} & PropsWithChildren &
-  StyleProps &
-  HeaderProps) {
+}: PropsWithChildren & HeaderProps & { className?: string }) {
   return (
-    <Wrapper variant={variant}>
+    <ResponsiveWrapper>
       <Header
         onBack={onBack}
         onClose={onClose}
@@ -37,100 +24,27 @@ export function Container({
         icon={icon}
         title={title}
         description={description}
+        variant={variant}
       />
-
-      <VStack w="full">{children}</VStack>
-    </Wrapper>
+      <div className={className}>{children}</div>
+    </ResponsiveWrapper>
   );
 }
 
-export const FOOTER_HEIGHT = 40;
-export const PORTAL_WINDOW_HEIGHT = 600;
-
-function Wrapper({
-  variant = "compressed",
-  children,
-  ...rest
-}: React.PropsWithChildren & { variant?: LayoutVariant }) {
-  const [height, setHeight] = useState(0);
-  const { isOpen, onToggle } = useDisclosure();
-
+function ResponsiveWrapper({ children }: PropsWithChildren) {
   return (
-    <LayoutContext.Provider
-      value={{ variant, footer: { height, setHeight, isOpen, onToggle } }}
-    >
-      {/** Show as full page  */}
-      <Show below="md">
-        <ChakraContainer
-          w="100vw"
-          h="100vh"
-          bg="solid.bg"
-          p={0}
-          as={motion.div}
-          animate={{ opacity: 1 }}
-          initial={{ opacity: 0 }}
-          centerContent
-          position="relative"
-          {...rest}
-        >
+    <>
+      {/* for desktop */}
+      <div className="hidden md:flex w-screen h-screen items-center justify-center">
+        <div className="w-desktop border border-muted rounded-xl flex flex-col relative overflow-hidden align-middle">
           {children}
-        </ChakraContainer>
-      </Show>
-
-      {/** Show as modal  */}
-      <Show above="md">
-        <Flex w="100vw" h="100vh" p={0} align="center">
-          <ChakraContainer
-            w="432px"
-            // h={`${PORTAL_WINDOW_HEIGHT}px`}
-            borderWidth={1}
-            borderColor="solid.primaryAccent"
-            verticalAlign="middle"
-            bg="solid.bg"
-            p={0}
-            as={motion.div}
-            animate={{ opacity: 1 }}
-            initial={{ opacity: 0 }}
-            centerContent
-            borderRadius="lg"
-            overflow="hidden"
-            position="relative"
-            {...rest}
-          >
-            {children}
-          </ChakraContainer>
-        </Flex>
-      </Show>
-    </LayoutContext.Provider>
+        </div>
+      </div>
+
+      {/* device smaller than desktop width */}
+      <div className="md:hidden w-screen h-screen max-w-desktop relative flex flex-col bg-background">
+        {children}
+      </div>
+    </>
   );
 }
-
-export const LayoutContext = createContext<LayoutContextValue>({
-  variant: "expanded",
-  footer: {
-    height: 0,
-    setHeight: () => {},
-    isOpen: false,
-    onToggle: () => {},
-  },
-});
-
-export type LayoutContextValue = {
-  variant: LayoutVariant;
-  footer: {
-    height: number;
-    setHeight: (height: number) => void;
-    isOpen: boolean;
-    onToggle: () => void;
-  };
-};
-
-export type LayoutVariant = "expanded" | "compressed";
-
-export function useLayout() {
-  return useContext(LayoutContext);
-}
-
-export function useLayoutVariant(): LayoutVariant {
-  return useLayout().variant;
-}
diff --git a/packages/keychain/src/components/layout/footer/index.tsx b/packages/keychain/src/components/layout/footer/index.tsx
index 24a3dccd7..357e09619 100644
--- a/packages/keychain/src/components/layout/footer/index.tsx
+++ b/packages/keychain/src/components/layout/footer/index.tsx
@@ -1,25 +1,27 @@
-import { HStack, VStack, Text } from "@chakra-ui/react";
-import React, { forwardRef, memo, useEffect, useRef } from "react";
-import { FOOTER_HEIGHT, useLayout } from "@/components/layout";
-import { Link } from "react-router-dom";
+import { forwardRef, memo, PropsWithChildren, useEffect, useRef } from "react";
 import { cn } from "@cartridge/ui-next";
+import { Link } from "react-router-dom";
 
 export function Footer({
   children,
+  className,
   showCatridgeLogo,
-}: React.PropsWithChildren & {
-  showCatridgeLogo?: boolean;
-}) {
+}: PropsWithChildren & { className?: string; showCatridgeLogo?: boolean }) {
   const ref = useRef<HTMLDivElement | null>(null);
-  const { footer } = useLayout();
 
   useEffect(() => {
-    if (!ref.current) return;
+    if (!ref.current) {
+      document.documentElement.style.setProperty("--footer-height", "0px");
+      return;
+    }
 
     const observer = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        footer.setHeight(entry.contentRect.height);
-      }
+      const rect = entries[0].contentRect;
+      if (!rect.height) return;
+      document.documentElement.style.setProperty(
+        "--footer-height",
+        `${rect.height + 16 * 2}px`,
+      );
     });
 
     observer.observe(ref.current);
@@ -27,61 +29,31 @@ export function Footer({
     return () => {
       observer.disconnect();
     };
-  }, [footer]);
-
-  useEffect(() => {
-    window.document.body.style.overflowY = footer.isOpen ? "hidden" : "auto";
-  }, [footer.isOpen]);
+  }, []);
 
   return (
-    <VStack
-      position={["fixed", "fixed", "absolute"]}
-      bottom={0}
-      w="full"
-      zIndex={1}
-      gap={0}
-      bgColor="solid.bg"
-      overflow="hidden"
+    <div
+      className={cn(
+        "flex flex-col gap-2 w-full pt-4 fixed md:absolute left-0 bottom-0 bg-background",
+        !showCatridgeLogo && "pb-4",
+        className,
+      )}
       ref={ref}
     >
-      <VStack
-        justifySelf="flex-end"
-        bg="solid.bg"
-        w="full"
-        align="stretch"
-        p={4}
-        pb={showCatridgeLogo ? 1 : 4}
-      >
-        {children}
-      </VStack>
+      <div className="flex flex-col px-4 gap-2">{children}</div>
 
       {showCatridgeLogo && (
-        <HStack
-          justifySelf="flex-end"
-          bg="solid.bg"
-          w="full"
-          color="text.secondary"
-          alignItems="center"
-          justify="center"
-          h={FOOTER_HEIGHT / 4}
-          gap={1}
-          opacity={0.5}
-          as={Link}
+        <Link
           to="https://cartridge.gg"
           target="_blank"
-          overflow="hidden"
-          _hover={{
-            color: "brand.primary",
-          }}
+          className="h-10 flex items-center justify-center gap-1 text-muted hover:text-primary"
         >
-          <ControllerIcon height={22} />
-          <Text fontSize="xs" fontWeight={500} color="currentColor">
-            by
-          </Text>
+          <ControllerIcon />
+          <div className="text-xs font-medium">by</div>
           <CartridgeLogo />
-        </HStack>
+        </Link>
       )}
-    </VStack>
+    </div>
   );
 }
 
@@ -135,12 +107,12 @@ export const CartridgeLogo = memo(
   ),
 );
 
-const ControllerIcon = ({ height = 16 }: { height?: number }) => (
+const ControllerIcon = () => (
   <svg
-    height={height}
     viewBox="0 0 64 64"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    className="h-6"
   >
     <path
       d="M29.9624 15.6199H34.0374V20.3101H29.9624V15.6199Z"
@@ -156,5 +128,3 @@ const ControllerIcon = ({ height = 16 }: { height?: number }) => (
     />
   </svg>
 );
-
-export const FOOTER_MIN_HEIGHT = 252;
diff --git a/packages/keychain/src/components/settings/index.tsx b/packages/keychain/src/components/settings/index.tsx
index 04c048595..7dee880eb 100644
--- a/packages/keychain/src/components/settings/index.tsx
+++ b/packages/keychain/src/components/settings/index.tsx
@@ -1,6 +1,6 @@
 import { GearIcon, Button } from "@cartridge/ui-next";
 import { useState } from "react";
-import { Container, Footer } from "@/components/layout";
+import { Container, Content, Footer } from "@/components/layout";
 import { Recovery } from "./Recovery";
 import { Delegate } from "./Delegate";
 import { useConnection } from "@/hooks/connection";
@@ -71,6 +71,7 @@ export function Settings() {
 
   return (
     <Container variant="compressed" title="Controller Settings" Icon={GearIcon}>
+      <Content />
       {/* <Content>
         <VStack gap="30px" w="full">
           <VStack>
@@ -158,6 +159,7 @@ export function Settings() {
           </VStack>
         </VStack>
       </Content> */}
+
       <Footer>
         <Button variant="secondary" onClick={logout}>
           Log out
diff --git a/packages/keychain/src/components/transaction/ConfirmTransaction.tsx b/packages/keychain/src/components/transaction/ConfirmTransaction.tsx
index eeb23e83a..2a2009707 100644
--- a/packages/keychain/src/components/transaction/ConfirmTransaction.tsx
+++ b/packages/keychain/src/components/transaction/ConfirmTransaction.tsx
@@ -1,5 +1,5 @@
 import { ResponseCodes, toArray } from "@cartridge/controller";
-import { Content, FOOTER_MIN_HEIGHT } from "@/components/layout";
+import { Content } from "@/components/layout";
 import { TransactionDuoIcon } from "@cartridge/ui-next";
 import { useConnection } from "@/hooks/connection";
 import { TransactionSummary } from "@/components/transaction/TransactionSummary";
@@ -39,7 +39,7 @@ export function ConfirmTransaction() {
       transactionsDetail={ctx.transactionsDetail}
       onSubmit={onSubmit}
     >
-      <Content pb={FOOTER_MIN_HEIGHT}>
+      <Content>
         <TransactionSummary calls={transactions} />
       </Content>
     </ExecutionContainer>