diff --git a/app/assets/fonts/CashSansMono-Regular.woff2 b/app/assets/fonts/CashSansMono-Regular.woff2
new file mode 100644
index 0000000..79ca6db
Binary files /dev/null and b/app/assets/fonts/CashSansMono-Regular.woff2 differ
diff --git a/app/components/layout/footer.tsx b/app/components/layout/footer.tsx
index a92ad18..2c9f222 100644
--- a/app/components/layout/footer.tsx
+++ b/app/components/layout/footer.tsx
@@ -3,7 +3,7 @@ import { Goose } from "../icons/goose";
 
 const Footer = () => {
   return (
-    <footer className="w-full fixed bottom-0 border-t border-[#1e1e1e] text-white h-[54px]">
+    <footer className="w-full fixed bottom-0 border-t border-[#1e1e1e] text-white py-2 text-sm sm:text-base">
       <div className="flex justify-center items-center h-full">
         <div className="flex flex-rows">
           Made with{" "}
@@ -14,12 +14,12 @@ const Footer = () => {
           >
             <Goose className="mx-1" /> codename goose
           </a>
-        </div>
-
-        <div className="mx-4">|</div>
-
-        <div>
-          <a href="https://github.com/block/bitcoin-treasury/blob/main/DISCLAIMER.md" target="_blank" className="hover:underline">
+          <span className="mx-2 sm:mx-4">|</span>
+          <a
+            href="https://github.com/block/bitcoin-treasury/blob/main/DISCLAIMER.md"
+            target="_blank"
+            className="hover:underline"
+          >
             Disclaimer
           </a>
         </div>
diff --git a/app/components/solari/Flap.tsx b/app/components/solari/Flap.tsx
index 498379c..fd45c4f 100644
--- a/app/components/solari/Flap.tsx
+++ b/app/components/solari/Flap.tsx
@@ -69,7 +69,7 @@ export const Flap = React.memo<FlapProps>(
     }, [isHovered, animating, bottom, half, hoverDuration]);
 
     // Base flap classes
-    const flapBaseClasses = `absolute h-full w-full origin-center z-20 rounded-sm`;
+    const flapBaseClasses = `absolute h-full w-full origin-center z-20 rounded-sm leading-[0.9]`;
 
     // Top flap classes
     const topClasses = classNames(
@@ -103,12 +103,12 @@ export const Flap = React.memo<FlapProps>(
     // Hinge classes
     const hingeClasses = classNames(
       "w-full absolute left-0 top-1/2 -translate-y-1/2 z-30 h-[0.02em] bg-black",
-      "before:content-[''] before:absolute before:left-[20%] before:bg-black before:shadow-[0.5px_0_1px_rgba(0,0,0,0.15)]",
-      "after:content-[''] after:absolute after:left-[80%] after:bg-black after:shadow-[0.5px_0_1px_rgba(0,0,0,0.15)]",
+      "before:content-[''] before:absolute before:left-[20%] before:bg-black",
+      "after:content-[''] after:absolute after:left-[80%] after:bg-black",
       {
         "sm:before:w-[2px] sm:before:h-[16px] sm:after:w-[2px] sm:after:h-[16px] sm:before:top-[-6px] sm:after:top-[-6px]":
           true, // Default size for larger screens
-        "before:w-[1px] before:h-[8px] after:w-[1px] after:h-[8px] after:top-[-3px] before:top-[-3px]":
+        "before:w-[0.5px] before:h-[4px] after:w-[0.5px] after:h-[4px] after:top-[-1.5px] before:top-[-1.5px] before:shadow-none after:shadow-none":
           true, // Smaller size for mobile view
       }
     );
diff --git a/app/components/solari/FlapDigit.tsx b/app/components/solari/FlapDigit.tsx
index b0ce472..43c70a4 100644
--- a/app/components/solari/FlapDigit.tsx
+++ b/app/components/solari/FlapDigit.tsx
@@ -37,7 +37,7 @@ export const FlapDigit = React.memo<FlapDigitProps>(
 
     return (
       <div
-        className={`text-[#e1e1e1] bg-[#1a1a1a] relative inline-block h-[1em] font-mono text-3xl xs:text-4xl sm:text-5xl md:text-6xl lg:text-7xl lg:leading-[66px] border border-black leading-none text-center w-[1.3ch] rounded-sm ${
+        className={`text-[#e1e1e1] bg-[#1a1a1a] relative inline-block h-[1em] font-mono text-xl xs:text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl border border-black text-center w-[1.3ch] min-w-[1ch] rounded-sm ${
           className || ""
         }`}
         style={containerStyle}
diff --git a/app/components/solari/FlapDisplay.tsx b/app/components/solari/FlapDisplay.tsx
index aed7154..de9f476 100644
--- a/app/components/solari/FlapDisplay.tsx
+++ b/app/components/solari/FlapDisplay.tsx
@@ -132,7 +132,7 @@ export const FlapDisplay = memo<FlapDisplayProps>(
     return (
       <div
         id={id}
-        className={`${containerClassName} flex relative w-full overflow-hidden justify-center gap-1`}
+        className={`${containerClassName} flex relative w-full overflow-x-auto overflow-y-hidden justify-start md:justify-center gap-[2px] sm:gap-1 px-2`}
         style={{
           ...css,
           transform: "perspective(1000px)",
diff --git a/app/layout.tsx b/app/layout.tsx
index 6781e49..a2ad9ba 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -13,12 +13,12 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en" suppressHydrationWarning>
+    <html lang="en" suppressHydrationWarning className="h-full">
       <body
-        className={`font-mono bg-black text-textStandard relative antialiased`}
+        className={`h-full font-mono bg-black text-textStandard relative antialiased`}
       >
         <ThemeProvider attribute="data-theme">
-          <div className="h-[calc(100vh-54px)] flex justify-center items-center">
+          <div className="h-full flex justify-center items-center">
             <main className="h-full">{children}</main>
           </div>
           <Footer />
diff --git a/app/page.tsx b/app/page.tsx
index e06c5ea..8b10544 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -195,7 +195,7 @@ function HomeContent() {
         <SolariBoard rows={currentBoardRows} className="relative" />
       </div>
 
-      <div className="flex flex-rows w-full justify-between opacity-0 transition-opacity duration-300 animate-fadeIn">
+      <div className="flex flex-rows w-full justify-center opacity-0 transition-opacity duration-300 animate-fadeIn">
         {/* Status indicator */}
         <div className="flex items-center justify-center gap-2 text-zinc-400 mt-2 sm:mt-4">
           <div
diff --git a/app/styles/main.css b/app/styles/main.css
index 90640de..c17576b 100644
--- a/app/styles/main.css
+++ b/app/styles/main.css
@@ -84,19 +84,14 @@
 @font-face {
   font-family: "Cash Sans";
   src: url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff2/CashSans-Regular.woff2)
-      format("woff2"),
-    url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff/CashSans-Regular.woff)
-      format("woff");
+    format("woff2");
   font-weight: 400;
   font-style: normal;
 }
 
 @font-face {
   font-family: "Cash Sans Mono";
-  src: url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff2/CashSansMono-Regular.woff2)
-      format("woff2"),
-    url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff/CashSansMono-Regular.woff)
-      format("woff");
+  src: url(../assets/fonts/CashSansMono-Regular.woff2) format("woff2");
   font-weight: 400;
   font-style: normal;
 }