diff --git a/src/components/_icons/copy.icon.tsx b/src/components/_icons/copy.icon.tsx
index 7eabdc45..5c80573a 100644
--- a/src/components/_icons/copy.icon.tsx
+++ b/src/components/_icons/copy.icon.tsx
@@ -1,8 +1,7 @@
 import BaseIconProps from "@/interfaces/base-icon-props.interface";
-import exports from "@/styles/exports.module.scss";
 
 export const CopyIcon = ({
-  color = exports.lightGrey,
+  color = "stroke-gray-light",
   height = 24,
   width = 29,
   className,
@@ -18,14 +17,14 @@ export const CopyIcon = ({
     >
       <path
         d="M15.6719 18.7832H19.9844V4.7832H8.48438V10.0332"
-        stroke={color}
+        className={color}
         strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
         d="M15.6719 10.0332H4.17188V24.0332H15.6719V10.0332Z"
-        stroke={color}
+        className={color}
         strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"
diff --git a/src/components/_icons/dark-mode.icon.tsx b/src/components/_icons/dark-mode.icon.tsx
index a0e46a52..3f3bc493 100644
--- a/src/components/_icons/dark-mode.icon.tsx
+++ b/src/components/_icons/dark-mode.icon.tsx
@@ -1,10 +1,9 @@
 import BaseIconProps from "@/interfaces/base-icon-props.interface";
-import exports from "@/styles/exports.module.scss";
 
 export const DarkModeIcon = ({
   width = 13,
   height = 13,
-  color = exports.black,
+  color = "stroke-black",
 }: BaseIconProps) => {
   return (
     <svg
@@ -16,7 +15,7 @@ export const DarkModeIcon = ({
     >
       <path
         d="M1.81641 5.94881C1.81571 7.01988 2.17729 8.05969 2.84237 8.89924C3.50745 9.7388 4.43693 10.3287 5.47974 10.5731C6.52254 10.8176 7.61736 10.7021 8.58623 10.2455C9.55511 9.78897 10.3411 9.01813 10.8164 8.05831C6.56291 8.05831 4.45341 5.94831 4.45341 1.69531C3.66133 2.08835 2.99476 2.6948 2.52885 3.44633C2.06293 4.19786 1.81618 5.06458 1.81641 5.94881Z"
-        stroke={color}
+        className={color}
         strokeWidth="1.33"
         strokeLinecap="round"
         strokeLinejoin="round"
diff --git a/src/components/_icons/light-mode.icon.tsx b/src/components/_icons/light-mode.icon.tsx
index 12425d3a..8d4c41c3 100644
--- a/src/components/_icons/light-mode.icon.tsx
+++ b/src/components/_icons/light-mode.icon.tsx
@@ -1,10 +1,9 @@
 import BaseIconProps from "@/interfaces/base-icon-props.interface";
-import exports from "@/styles/exports.module.scss";
 
 export const LightModeIcon = ({
   width = 13,
   height = 13,
-  color = exports.black,
+  color = "stroke-black",
 }: BaseIconProps) => {
   return (
     <svg
@@ -17,7 +16,7 @@ export const LightModeIcon = ({
       <g clipPath="url(#clip0_5629_3418)">
         <path
           d="M10.21 6.54232H10.6266M6.04329 2.37565V1.95898M6.04329 11.1257V10.709M9.37663 9.87565L8.95996 9.45898M9.37663 3.20898L8.95996 3.62565M2.70996 9.87565L3.12663 9.45898M2.70996 3.20898L3.12663 3.62565M1.45996 6.54232H1.87663M6.04329 9.04232C6.70633 9.04232 7.34222 8.77893 7.81106 8.31008C8.2799 7.84124 8.54329 7.20536 8.54329 6.54232C8.54329 5.87928 8.2799 5.24339 7.81106 4.77455C7.34222 4.30571 6.70633 4.04232 6.04329 4.04232C5.38025 4.04232 4.74437 4.30571 4.27553 4.77455C3.80669 5.24339 3.54329 5.87928 3.54329 6.54232C3.54329 7.20536 3.80669 7.84124 4.27553 8.31008C4.74437 8.77893 5.38025 9.04232 6.04329 9.04232Z"
-          stroke={color}
+          className={color}
           strokeWidth="1.33"
           strokeLinecap="round"
           strokeLinejoin="round"
diff --git a/src/components/_shared/footer/footer.component.tsx b/src/components/_shared/footer/footer.component.tsx
index 0e436163..43ac692a 100644
--- a/src/components/_shared/footer/footer.component.tsx
+++ b/src/components/_shared/footer/footer.component.tsx
@@ -42,7 +42,7 @@ const DesktopFooter = () => {
 
 const MobileFooter = () => {
   return (
-    <footer className="bg-black px-4 pb-8 pt-10 lg:hidden">
+    <footer className="block px-4 pb-8 pt-10 dark:bg-black lg:hidden">
       <div className="border-t border-black dark:border-gray-light">
         <MobileAccordionMenu classNames="bg-transparent" />
         <div className="mt-6 flex justify-between">
diff --git a/src/components/_shared/learn-more/learn-more.component.tsx b/src/components/_shared/learn-more/learn-more.component.tsx
index e4729208..7fb0f9a7 100644
--- a/src/components/_shared/learn-more/learn-more.component.tsx
+++ b/src/components/_shared/learn-more/learn-more.component.tsx
@@ -4,9 +4,6 @@ import BaseComponentProps from "@/interfaces/base-component-props.interface";
 import { ChevronIcon, DiscordIcon, LearnMoreIcon } from "@/components/_icons";
 
 import { Button } from "@/components/_shared";
-import exports from "@/styles/exports.module.scss";
-
-import styles from "./learn-more.module.scss";
 import { cn } from "@/styles/helpers";
 
 interface LearnMoreProps extends BaseComponentProps {}
@@ -16,30 +13,32 @@ export const LearnMore = ({ className, style }: LearnMoreProps) => {
 
   return (
     <div className={cn("mt-x4", className)} style={style}>
-      <div className="main-container">
+      <div className="mx-auto w-full max-w-[1120px]">
         {pathname === "/" && (
-          <div className={cn(styles.learn_more)}>
-            <div className={cn(styles.content)}>
-              <h2 className="my-x1 text-6xl font-semibold">Learn more</h2>
-              <p className={styles.description}>
+          <div className="flex flex-col items-center justify-between gap-x3 bg-black-off px-x5 py-0 lg:flex-row lg:pl-x13 lg:pr-x11">
+            <div className="max-w-[500px] text-white">
+              <h2 className="my-x1 mb-x5 text-center text-6xl font-semibold lg:text-left">
+                Learn more
+              </h2>
+              <p className="text-x3 leading-x5 text-center lg:text-left">
                 If you&apos;re interested in learning more about Mento, finding
                 out what the team is working on now, or would like to
                 contribute, please join our discord server.
               </p>
               <Button
-                className={cn(styles.button, "mt-x4")}
+                className="mt-x4 w-full max-w-full"
                 href="https://discord.gg"
                 target="_blank"
               >
-                <div className={styles.button__content}>
-                  <DiscordIcon color={exports.white} />
+                <div className="flex items-center gap-x2 px-x3 sm:w-full">
+                  <DiscordIcon />
                   <span>Join the community</span>
-                  <ChevronIcon direction="right" color={exports.white} />
+                  <ChevronIcon direction="right" />
                 </div>
               </Button>
             </div>
-            <div className={styles.learn_more__icon}>
-              <LearnMoreIcon />
+            <div>
+              <LearnMoreIcon className="h-auto max-w-full" />
             </div>
           </div>
         )}