diff --git a/apps/landing/src/index.css b/apps/landing/src/index.css
index 88ca7820b..9be361bcb 100644
--- a/apps/landing/src/index.css
+++ b/apps/landing/src/index.css
@@ -612,7 +612,7 @@ ul li {
   font-size: 0.833rem;
   background-color: hsl(240, 20%, 98%);
   border: 1px solid hsl(236, 10.6%, 87.9%);
-  padding: 8px 18px;
+  padding: 8px 16px;
   color: hsl(227, 5.2%, 51.8%);
 }
 
@@ -842,11 +842,18 @@ ul li {
   gap: 10px;
 }
 
+.overview__container__mobile {
+  margin-top: 55px;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  /* gap: 20px; */
+}
+
 .overview__container {
   margin-top: 55px;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: 40px;
+  /* gap: 40px; */
 }
 
 .overview__item {
@@ -881,13 +888,6 @@ ul li {
   gap: 20px;
 }
 
-.overview__container {
-  margin-top: 55px;
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 40px;
-}
-
 .overview__item {
   display: flex;
   flex-direction: column;
diff --git a/apps/landing/src/pages/landing/Landing.vue b/apps/landing/src/pages/landing/Landing.vue
index b3cbd9eda..17cbd0d29 100644
--- a/apps/landing/src/pages/landing/Landing.vue
+++ b/apps/landing/src/pages/landing/Landing.vue
@@ -63,7 +63,7 @@ const toggleQuestionItem = (index: number) => {
 </script>
 
 <template>
-  <div>
+  <div class="csm:m-[16px] overflow-x-hidden">
     <nav class="nav">
       <div class="nav__container">
         <a href="/">
@@ -112,15 +112,17 @@ const toggleQuestionItem = (index: number) => {
         <div class="cta__container">
           <a
             :href="appUrl"
-            class="btn-primary"
+            class="btn-primary flex justify-center csm:min-w-[145px]"
           >
-            Launch Staking App
+            <span class="csm:hidden">Launch Staking App</span>
+            <span class="md-lg:hidden">Launch App</span>
           </a>
           <a
             href="https://drive.google.com/file/d/1giIojTS-4gf0xWXUirmd2AaqalFmgA72/view"
             class="btn-secondary"
           >
-            Read the Whitepaper
+            <span class="csm:hidden">Read the Whitepaper</span>
+            <span class="md-lg:hidden">Read Whitepaper</span>
           </a>
         </div>
       </div>
@@ -132,16 +134,19 @@ const toggleQuestionItem = (index: number) => {
     <section class="overview">
       <div class="overview__header">
         <!-- <span class="highlight text-8">Minimized Risk & Maximized Rewards</span> -->
-        <h2>
+        <h2 class="csm:hidden">
           Casimir is built to maximize your rewards <br>
           without compromising security.
         </h2>
+        <h2 class="md-lg:hidden">
+          Casimir is built to maximize your rewards without compromising security.
+        </h2>
       </div>
       <!-- <div class="mock"><img src="/hero.png" /></div> -->
-      <div class="overview__container">
+      <div class="overview__container csm:gap-[20px] md-lg:gap-[40px]">
         <div class="overview__item">
           <div class="overview__item__header">
-            <div class="icon">
+            <div class="icon csm:hidden">
               <img
                 src="/disc.svg"
                 width="17"
@@ -156,7 +161,7 @@ const toggleQuestionItem = (index: number) => {
 
         <div class="overview__item">
           <div class="overview__item__header">
-            <div class="icon">
+            <div class="icon csm:hidden">
               <img
                 src="/key.svg"
                 width="17"
@@ -172,7 +177,7 @@ const toggleQuestionItem = (index: number) => {
 
         <div class="overview__item">
           <div class="overview__item__header">
-            <div class="icon">
+            <div class="icon csm:hidden">
               <img
                 src="/disc.svg"
                 width="17"
@@ -188,7 +193,7 @@ const toggleQuestionItem = (index: number) => {
 
         <div class="overview__item">
           <div class="overview__item__header">
-            <div class="icon">
+            <div class="icon csm:hidden">
               <img
                 src="/flash.svg"
                 width="17"
@@ -203,7 +208,7 @@ const toggleQuestionItem = (index: number) => {
 
         <div class="overview__item">
           <div class="overview__item__header">
-            <div class="icon">
+            <div class="icon csm:hidden">
               <img
                 src="/credit-card.svg"
                 width="17"
@@ -219,7 +224,7 @@ const toggleQuestionItem = (index: number) => {
 
         <div class="overview__item">
           <div class="overview__item__header">
-            <div class="icon">
+            <div class="icon csm:hidden">
               <img
                 src="/users.svg"
                 width="17"
@@ -233,8 +238,48 @@ const toggleQuestionItem = (index: number) => {
         </div>
       </div>
     </section>
+    
+    <!-- Hide this section on small screens for now -->
+    <section class="bento md-lg:hidden">
+      <div class="overview__header">
+        <h2 class="csm:hidden">
+          One place to connect your wallets, <br> stake, withdraw, and see your analytics.
+        </h2>
+        <h2 class="md-lg:hidden">
+          One place to connect your wallets, stake, withdraw, and see your analytics.
+        </h2>
+      </div>
+      <div class="bento__container">
+        <div class="bento__base__card bento__card__1">
+          <h2 class="text-6">
+            Track all of your historical balances, rewards, and  <br> withdrawals in one dashboard.
+          </h2>
+          <div><img src="/analytics-chart.png"></div>
+        </div>
+
+        <div class="bento__base__card bento__card__4">
+          <h2 class="text-6">
+            Natively stake or withdraw ETH.
+          </h2>
+          <div><img src="/staking-component.png"></div>
+        </div>
+
+        <div class="bento__base__card bento__card__3">
+          <h2 class="text-6">
+            Get your transaction history <br> for any connected address.
+          </h2>
+          <div><img src="/tx.png"></div>
+        </div>
 
-    <section class="bento">
+        <div class="bento__base__card bento__card__2">
+          <h2 class="text-6">
+            Connect any number of wallets at the same time.
+          </h2>
+          <div><img src="/multi-wallet.png"></div>
+        </div>
+      </div>
+    </section>
+    <section class="bento csm:hidden">
       <div class="overview__header">
         <h2>
           One place to connect your wallets, <br> stake, withdraw, and see your analytics.
diff --git a/apps/landing/tailwind.config.js b/apps/landing/tailwind.config.js
index 91d323137..b7a221579 100644
--- a/apps/landing/tailwind.config.js
+++ b/apps/landing/tailwind.config.js
@@ -1,119 +1,120 @@
 module.exports = {
     content: [
-        './**/*.{vue,ts,js,css}'
+        "./**/*.{vue,ts,js,css}"
     ],
     theme: {
         extend: {
             padding: {
-                'margins': '48px',
-                'y-spacer': '25px'
+                "margins": "48px",
+                "y-spacer": "25px"
             },
             colors: {
                 // Main Colors
-                'primary': '#0D5FFF',
-                'black': '#000',
-                'secondary': '#C1D3F8',
-                'white': '#fff',
-                'shade': '#615959',
-                'grey' : '#727476',
+                "primary": "#0D5FFF",
+                "black": "#000",
+                "secondary": "#C1D3F8",
+                "white": "#fff",
+                "shade": "#615959",
+                "grey" : "#727476",
 
                 // Blues
-                'blue_1': '#E5EEFF',
-                'blue_2': '#C1D3F8',
-                'blue_3': '#80ABFF',
-                'blue_4': '#4D89FF',
-                'blue_5': '#0D5FFF',
-                'blue_6': '#004EE6',
-                'blue_7': '#003CB3',
-                'blue_8': '#002B80',
-                'blue_9': '#001A4D',
-                'blue_10': '#00091A',
+                "blue_1": "#E5EEFF",
+                "blue_2": "#C1D3F8",
+                "blue_3": "#80ABFF",
+                "blue_4": "#4D89FF",
+                "blue_5": "#0D5FFF",
+                "blue_6": "#004EE6",
+                "blue_7": "#003CB3",
+                "blue_8": "#002B80",
+                "blue_9": "#001A4D",
+                "blue_10": "#00091A",
 
                 // Greys Shades
-                'grey_1': '#F2F2F2',
-                'grey_2': '#D9D9D9',
-                'grey_3': '#BFBFBF',
-                'grey_4': '#A6A6A6',
-                'grey_5': '#8C8C8C',
-                'grey_6': '#737373',
-                'grey_7': '#595959',
-                'grey_8': '#404040',
-                'grey_9': '#262626',
-                'grey_10': '#000000',
+                "grey_1": "#F2F2F2",
+                "grey_2": "#D9D9D9",
+                "grey_3": "#BFBFBF",
+                "grey_4": "#A6A6A6",
+                "grey_5": "#8C8C8C",
+                "grey_6": "#737373",
+                "grey_7": "#595959",
+                "grey_8": "#404040",
+                "grey_9": "#262626",
+                "grey_10": "#000000",
 
                 // Functional Colors
-                'warning': '#FBBD84',
-                'approve': '#7BE198',
-                'decline': '#FF8080',
-                'border': '#B2BACB',
+                "warning": "#FBBD84",
+                "approve": "#7BE198",
+                "decline": "#FF8080",
+                "border": "#B2BACB",
             },
             spacing: {
-                'gutter': '16px',
-                'navbar': '300px',
-                'margins': '48px',
-                'marginsX': '48px',
-                'marginsY': '24px',
+                "gutter": "16px",
+                "navbar": "300px",
+                "margins": "48px",
+                "marginsX": "48px",
+                "marginsY": "24px",
 
-                '1': '1px',
-                '2': '2px',
-                '3': '3px',
-                '4': '4px',
-                '5': '5px',
-                '6': '6px',
-                '7': '7px',
-                '8': '8px',
-                '9': '9px',
-                '10': '10px',
-                '11': '11px',
-                '12': '12px',
-                '15': '15px',
-                '16': '16px',
-                '20': '20px',
-                '22': '22px',
-                '25': '25px',
-                '30': '30px',
-                '35': '35px',
-                '40': '40px',
-                '45': '45px',
-                '50': '50px',
-                '70': '70px',
-                '75': '75px',
-                '100': '100px',
+                "1": "1px",
+                "2": "2px",
+                "3": "3px",
+                "4": "4px",
+                "5": "5px",
+                "6": "6px",
+                "7": "7px",
+                "8": "8px",
+                "9": "9px",
+                "10": "10px",
+                "11": "11px",
+                "12": "12px",
+                "15": "15px",
+                "16": "16px",
+                "20": "20px",
+                "22": "22px",
+                "25": "25px",
+                "30": "30px",
+                "35": "35px",
+                "40": "40px",
+                "45": "45px",
+                "50": "50px",
+                "70": "70px",
+                "75": "75px",
+                "100": "100px",
                 // if change, change anim in index.css
-                'sidebar-open': '300px',
-                'sidebar-closed': '75px'
+                "sidebar-open": "300px",
+                "sidebar-closed": "75px"
             }
         },
         fontFamily: {
-            'regular': 'OpenSauceOneRegular',
-            'medium': 'OpenSauceOneMedium',
-            'semibold': 'OpenSauceOneSemibold',
-            'bold': 'OpenSauceOneBold',
-            'extrabold': 'OpenSauceOneExtrabold',
-            'black': 'OpenSauceOneBlack',
-            'light': 'OpenSauceOneLight',
+            "regular": "OpenSauceOneRegular",
+            "medium": "OpenSauceOneMedium",
+            "semibold": "OpenSauceOneSemibold",
+            "bold": "OpenSauceOneBold",
+            "extrabold": "OpenSauceOneExtrabold",
+            "black": "OpenSauceOneBlack",
+            "light": "OpenSauceOneLight",
         },
         screens: {
-            '360s': {'min': '0px', 'max': '360px'},
-            '400s': {'min': '0px', 'max': '400px'},
-            '450s': {'min': '0px', 'max': '450px'},
-            '550s': {'min': '0px', 'max': '550px'},
-            '600s': {'min': '0px', 'max': '600px'},
-            '700s': {'min': '0px', 'max': '700px'},
-            '800s': {'min': '0px', 'max': '800px'},
-            '900s': {'min': '0px', 'max': '900px'},
-            '1000s': {'min': '0px', 'max': '1000px'},
-            '1100s': {'min': '0px', 'max': '1100px'},
-            '1200s': {'min': '0px', 'max': '1200px'},
+            // "360s": { "min": "0px", "max": "360px" },
+            // "400s": { "min": "0px", "max": "400px" },
+            // "450s": { "min": "0px", "max": "450px" },
+            // "550s": { "min": "0px", "max": "550px" },
+            // "600s": { "min": "0px", "max": "600px" },
+            // "700s": { "min": "0px", "max": "700px" },
+            // "800s": { "min": "0px", "max": "800px" },
+            // "900s": { "min": "0px", "max": "900px" },
+            // "1000s": { "min": "0px", "max": "1000px" },
+            // "1100s": { "min": "0px", "max": "1100px" },
+            // "1200s": { "min": "0px", "max": "1200px" },
             // no screen 
-            // 'noscreen': {'min': '360px'},
-            // 'xsm': {'min': '0px', 'max': '359px'},
-            // 'sm': {'min': '360px', 'max': '719px'},
-            // 'md': {'min': '720px', 'max': '1023px'},
-            // 'lg': {'min': '1024px'},
+            "noscreen": { "min": "360px" },
+            "xsm": { "min": "0px", "max": "359px" },
+            "sm": { "min": "360px", "max": "719px" },
+            "md": { "min": "720px", "max": "1023px" },
+            "lg": { "min": "1024px" },
 
             // Combine smalls
-            // 'csm': {'min': '0px', 'max': '719px'},
+            "csm": { "min": "0px", "max": "719px" },
+            "md-lg": { "min": "720px" },
 
             // Combine smalls & medium
             // 'csm-md': {'min': '0px', 'max': '1023px'},