diff --git a/components/Containers/Footer/index.module.css b/components/Containers/Footer/index.module.css
index 732cace0cabf8..8aa87274a822e 100644
--- a/components/Containers/Footer/index.module.css
+++ b/components/Containers/Footer/index.module.css
@@ -2,16 +2,18 @@
   @apply flex
     flex-col
     items-center
-    gap-6
     border-t
     border-neutral-200
     bg-white
-    py-4
+    
     dark:border-neutral-900
     dark:bg-neutral-950
+    sm:gap-0
     sm:px-8
+    sm:py-0
     md:flex-row
     md:justify-between
+    md:gap-6
     md:py-5;
 
   .sectionPrimary {
@@ -20,8 +22,9 @@
       content-start
       items-center
       justify-center
-      gap-1
-      self-stretch;
+      self-stretch
+      sm:gap-0
+      md:gap-1;
 
     a {
       @apply whitespace-nowrap;
@@ -32,13 +35,23 @@
     @apply flex
       flex-col
       items-center
-      gap-1
-      md:flex-row;
+      sm:gap-0
+      md:flex-row
+      md:gap-1;
 
     .social {
       @apply flex
         items-center
-        gap-1;
+        sm:gap-0
+        md:gap-1;
     }
   }
 }
+
+.mobileFooter {
+  @apply block md:hidden;
+}
+
+.desktopFooter {
+  @apply hidden md:block;
+}
diff --git a/layouts/About.tsx b/layouts/About.tsx
index ef2258cab5999..9ce249f7c1361 100644
--- a/layouts/About.tsx
+++ b/layouts/About.tsx
@@ -1,11 +1,14 @@
 import type { FC, PropsWithChildren } from 'react';
 
 import WithBreadcrumbs from '@/components/withBreadcrumbs';
+import WithFooter from '@/components/withFooter';
 import WithMetaBar from '@/components/withMetaBar';
 import WithNavBar from '@/components/withNavBar';
 import WithSidebar from '@/components/withSidebar';
 import ArticleLayout from '@/layouts/Article';
 
+import styles from '/components/Containers/Footer/index.module.css';
+
 const AboutLayout: FC<PropsWithChildren> = ({ children }) => (
   <>
     <WithNavBar />
@@ -17,10 +20,16 @@ const AboutLayout: FC<PropsWithChildren> = ({ children }) => (
         <main>{children}</main>
 
         <WithMetaBar />
+        <div className={styles.mobileFooter}>
+          <WithFooter />
+        </div>
       </div>
 
       <WithBreadcrumbs navKeys={['about', 'getInvolved']} />
     </ArticleLayout>
+    <div className={styles.desktopFooter}>
+      <WithFooter />
+    </div>
   </>
 );
 
diff --git a/layouts/Learn.tsx b/layouts/Learn.tsx
index 6b4f6763f1925..13d88ae5f2810 100644
--- a/layouts/Learn.tsx
+++ b/layouts/Learn.tsx
@@ -1,12 +1,14 @@
 import type { FC, PropsWithChildren } from 'react';
 
 import WithBreadcrumbs from '@/components/withBreadcrumbs';
+import WithFooter from '@/components/withFooter';
 import WithMetaBar from '@/components/withMetaBar';
 import WithNavBar from '@/components/withNavBar';
 import WithProgressionSidebar from '@/components/withProgressionSidebar';
 import WithSidebarCrossLinks from '@/components/withSidebarCrossLinks';
 import ArticleLayout from '@/layouts/Article';
 
+import styles from '/components/Containers/Footer/index.module.css';
 const LearnLayout: FC<PropsWithChildren> = ({ children }) => (
   <>
     <WithNavBar />
@@ -22,10 +24,16 @@ const LearnLayout: FC<PropsWithChildren> = ({ children }) => (
         </main>
 
         <WithMetaBar />
+        <div className={styles.mobileFooter}>
+          <WithFooter />
+        </div>
       </div>
 
       <WithBreadcrumbs navKeys={['learn']} />
     </ArticleLayout>
+    <div className={styles.desktopFooter}>
+      <WithFooter />
+    </div>
   </>
 );
 
diff --git a/layouts/layouts.module.css b/layouts/layouts.module.css
index 5c2197b363535..a2b95da9b5864 100644
--- a/layouts/layouts.module.css
+++ b/layouts/layouts.module.css
@@ -43,7 +43,7 @@
         xl:px-18;
     }
 
-    > *:last-child {
+    > *:nth-child(2) {
       @apply mt-8
         border-t
         grid-in-[metabar]