diff --git a/packages/ui-components/src/Containers/Footer/index.module.css b/packages/ui-components/src/Containers/Footer/index.module.css
index 2cc080588e1c3..b4f6a0f44f9b9 100644
--- a/packages/ui-components/src/Containers/Footer/index.module.css
+++ b/packages/ui-components/src/Containers/Footer/index.module.css
@@ -1,86 +1,90 @@
 @reference "../../styles/index.css";
 
-.footer {
-  @apply flex
-    flex-col
-    items-center
-    gap-6
-    border-t
+.container {
+  @apply border-t
     border-neutral-200
     bg-white
     py-4
     text-neutral-500
     sm:px-8
-    md:justify-between
     md:py-5
     dark:border-neutral-900
     dark:bg-neutral-950;
 
-  .row {
-    @apply flex
+  .innerContainer {
+    @apply max-w-10xl
+      mx-auto
+      flex
       flex-col
       items-center
       gap-6
-      md:flex-row
-      md:justify-between
-      md:gap-0
-      md:self-stretch;
-  }
+      md:justify-between;
 
-  .sectionPrimary {
-    @apply flex
-      flex-wrap
-      content-start
-      items-center
-      justify-center
-      gap-1
-      self-stretch;
+    .row {
+      @apply flex
+        flex-col
+        items-center
+        gap-6
+        md:flex-row
+        md:justify-between
+        md:gap-0
+        md:self-stretch;
 
-    a {
-      @apply whitespace-nowrap;
-    }
-  }
+      .sectionPrimary {
+        @apply flex
+          flex-wrap
+          content-start
+          items-center
+          justify-center
+          gap-1
+          self-stretch;
 
-  .sectionSecondary {
-    @apply flex
-      flex-col
-      items-center
-      gap-1
-      md:flex-row;
+        a {
+          @apply whitespace-nowrap;
+        }
+      }
 
-    .social {
-      @apply flex
-        items-center
-        gap-1;
-    }
-  }
+      .sectionSecondary {
+        @apply flex
+          flex-col
+          items-center
+          gap-1
+          md:flex-row;
 
-  .legal {
-    @apply flex
-      flex-col
-      gap-2
-      px-4
-      text-center
-      text-xs
-      text-balance
-      md:px-14;
+        .social {
+          @apply flex
+            items-center
+            gap-1;
+        }
+      }
 
-    p {
-      @apply text-center
-        text-sm
-        text-neutral-800
-        dark:text-neutral-500;
-    }
+      &.legal {
+        @apply flex
+          flex-col
+          gap-2
+          px-4
+          text-center
+          text-xs
+          text-balance;
+
+        p {
+          @apply text-center
+            text-sm
+            text-neutral-800
+            dark:text-neutral-500;
+        }
 
-    a {
-      @apply max-ml:font-semibold
-        text-green-600
-        dark:text-green-400;
+        a {
+          @apply max-ml:font-semibold
+            text-green-600
+            dark:text-green-400;
 
-      &:hover {
-        @apply cursor-pointer
-          text-green-900
-          dark:text-green-200;
+          &:hover {
+            @apply cursor-pointer
+              text-green-900
+              dark:text-green-200;
+          }
+        }
       }
     }
   }
diff --git a/packages/ui-components/src/Containers/Footer/index.tsx b/packages/ui-components/src/Containers/Footer/index.tsx
index 419bf770bbb7c..c9bf03318b86e 100644
--- a/packages/ui-components/src/Containers/Footer/index.tsx
+++ b/packages/ui-components/src/Containers/Footer/index.tsx
@@ -55,9 +55,9 @@ const Footer: FC<FooterProps> = ({
   as = 'a',
   navigation,
   slots,
-}) => {
-  return (
-    <footer className={styles.footer}>
+}) => (
+  <footer className={styles.container}>
+    <div className={styles.innerContainer}>
       <div className={styles.row}>
         <div className={styles.sectionPrimary}>{slots?.primary}</div>
 
@@ -83,9 +83,10 @@ const Footer: FC<FooterProps> = ({
           </div>
         </div>
       </div>
+
       <div className={classNames(styles.row, styles.legal)}>{slots?.legal}</div>
-    </footer>
-  );
-};
+    </div>
+  </footer>
+);
 
 export default Footer;
diff --git a/packages/ui-components/src/Containers/NavBar/index.module.css b/packages/ui-components/src/Containers/NavBar/index.module.css
index 7e569a8eb13fb..a7f3a189d5cc3 100644
--- a/packages/ui-components/src/Containers/NavBar/index.module.css
+++ b/packages/ui-components/src/Containers/NavBar/index.module.css
@@ -3,129 +3,135 @@
 .container {
   @apply border-neutral-200
     bg-white
-    xl:flex
     xl:h-16
-    xl:flex-row
-    xl:items-center
-    xl:gap-8
     xl:border-b
     xl:px-8
     dark:border-neutral-900
     dark:bg-neutral-950;
-}
 
-.nodeIconAndMobileItemsToggler {
-  @apply flex
-    h-16
-    shrink-0
-    items-center
-    border-b
-    border-neutral-200
-    px-4
-    xl:flex
-    xl:h-full
-    xl:items-center
-    xl:border-0
-    xl:px-0
-    dark:border-neutral-900;
-}
+  .innerContainer {
+    @apply max-w-10xl
+      xl:mx-auto
+      xl:flex
+      xl:h-16
+      xl:flex-row
+      xl:items-center
+      xl:gap-8;
 
-.sidebarItemToggler {
-  @apply absolute
-    right-4
-    -z-10
-    -translate-y-[200%]
-    appearance-none
-    opacity-0;
-}
+    .nodeIconAndMobileItemsToggler {
+      @apply flex
+        h-16
+        shrink-0
+        items-center
+        border-b
+        border-neutral-200
+        px-4
+        xl:flex
+        xl:h-full
+        xl:items-center
+        xl:border-0
+        xl:px-0
+        dark:border-neutral-900;
 
-.nodeIconWrapper {
-  @apply h-[30px]
-    flex-1;
-}
+      .nodeIconWrapper {
+        @apply h-[30px]
+          flex-1;
+      }
 
-.navInteractionIcon,
-.sidebarItemToggler {
-  @apply size-6;
-}
+      .sidebarItemTogglerLabel {
+        @apply block
+          cursor-pointer
+          xl:hidden;
 
-.sidebarItemTogglerLabel {
-  @apply block
-    cursor-pointer
-    xl:hidden;
-}
+        .navInteractionIcon {
+          @apply size-6;
+        }
+      }
+    }
 
-.main {
-  @apply flex-1
-    flex-col
-    justify-between
-    gap-4
-    xl:flex
-    xl:flex-row
-    xl:items-center;
-}
+    .sidebarItemToggler {
+      @apply absolute
+        right-4
+        -z-10
+        size-6
+        -translate-y-[200%]
+        appearance-none
+        opacity-0;
+    }
 
-.navItems {
-  @apply flex
-    flex-col
-    gap-0
-    border-b
-    border-neutral-200
-    p-4
-    xl:flex-1
-    xl:flex-row
-    xl:gap-1
-    xl:border-0
-    xl:p-0
-    dark:border-neutral-900;
-}
+    .main {
+      @apply flex-1
+        flex-col
+        justify-between
+        gap-4
+        xl:flex
+        xl:flex-row
+        xl:items-center;
+    }
 
-.actionsWrapper {
-  @apply flex
-    flex-row
-    flex-wrap
-    items-center
-    justify-between
-    gap-2
-    border-b
-    border-neutral-200
-    p-4
-    sm:flex-nowrap
-    xl:basis-96
-    xl:border-0
-    xl:p-0
-    dark:border-neutral-900;
-}
+    .navItems {
+      @apply flex
+        flex-col
+        gap-0
+        border-b
+        border-neutral-200
+        p-4
+        xl:flex-1
+        xl:flex-row
+        xl:gap-1
+        xl:border-0
+        xl:p-0
+        dark:border-neutral-900;
+    }
 
-span.searchButtonSkeleton {
-  @apply my-px
-    mr-2
-    flex-grow
-    rounded-xl;
+    .actionsWrapper {
+      @apply flex
+        flex-row
+        flex-wrap
+        items-center
+        justify-between
+        gap-2
+        border-b
+        border-neutral-200
+        p-4
+        sm:flex-nowrap
+        xl:basis-96
+        xl:border-0
+        xl:p-0
+        dark:border-neutral-900;
 
-  &:empty {
-    @apply h-10;
-  }
-}
+      span.searchButtonSkeleton {
+        @apply my-px
+          mr-2
+          grow
+          rounded-xl;
 
-span.themeToggleSkeleton {
-  @apply size-9
-    rounded-md
-    py-4;
-}
+        &:empty {
+          @apply h-10;
+        }
+      }
 
-.ghIconWrapper {
-  @apply size-9
-    rounded-md
-    p-2;
+      span.themeToggleSkeleton {
+        @apply size-9
+          rounded-md
+          py-4;
+      }
 
-  svg {
-    @apply fill-neutral-700
-      dark:fill-neutral-300;
-  }
+      .ghIconWrapper {
+        @apply size-9
+          rounded-md
+          p-2;
+
+        svg {
+          @apply fill-neutral-700
+            dark:fill-neutral-300;
+        }
 
-  &:hover {
-    @apply bg-neutral-100
-      dark:bg-neutral-900;
+        &:hover {
+          @apply bg-neutral-100
+            dark:bg-neutral-900;
+        }
+      }
+    }
   }
 }
diff --git a/packages/ui-components/src/Containers/NavBar/index.tsx b/packages/ui-components/src/Containers/NavBar/index.tsx
index 5c5f6891f1960..4456420968c6d 100644
--- a/packages/ui-components/src/Containers/NavBar/index.tsx
+++ b/packages/ui-components/src/Containers/NavBar/index.tsx
@@ -14,11 +14,11 @@ import type {
   ElementType,
 } from 'react';
 
-import style from './index.module.css';
+import styles from './index.module.css';
 
 const navInteractionIcons = {
-  show: <Hamburger className={style.navInteractionIcon} />,
-  close: <XMark className={style.navInteractionIcon} />,
+  show: <Hamburger className={styles.navInteractionIcon} />,
+  close: <XMark className={styles.navInteractionIcon} />,
 };
 
 type NavbarProps = {
@@ -44,48 +44,54 @@ const NavBar: FC<PropsWithChildren<NavbarProps>> = ({
   const [isMenuOpen, setIsMenuOpen] = useState(false);
 
   return (
-    <nav className={style.container}>
-      <div className={style.nodeIconAndMobileItemsToggler}>
-        <Component className={style.nodeIconWrapper} href="/" aria-label="Home">
-          <Logo />
-        </Component>
+    <nav className={styles.container}>
+      <div className={styles.innerContainer}>
+        <div className={styles.nodeIconAndMobileItemsToggler}>
+          <Component
+            className={styles.nodeIconWrapper}
+            href="/"
+            aria-label="Home"
+          >
+            <Logo />
+          </Component>
 
-        <Label.Root
-          className={style.sidebarItemTogglerLabel}
-          htmlFor="sidebarItemToggler"
-          role="button"
-          aria-label={sidebarItemTogglerAriaLabel}
-        >
-          {navInteractionIcons[isMenuOpen ? 'close' : 'show']}
-        </Label.Root>
-      </div>
+          <Label.Root
+            className={styles.sidebarItemTogglerLabel}
+            htmlFor="sidebarItemToggler"
+            role="button"
+            aria-label={sidebarItemTogglerAriaLabel}
+          >
+            {navInteractionIcons[isMenuOpen ? 'close' : 'show']}
+          </Label.Root>
+        </div>
 
-      <input
-        className={classNames('peer', style.sidebarItemToggler)}
-        id="sidebarItemToggler"
-        type="checkbox"
-        onChange={e => setIsMenuOpen(() => e.target.checked)}
-        aria-label={sidebarItemTogglerAriaLabel}
-        tabIndex={-1}
-      />
+        <input
+          className={classNames('peer', styles.sidebarItemToggler)}
+          id="sidebarItemToggler"
+          type="checkbox"
+          onChange={e => setIsMenuOpen(() => e.target.checked)}
+          aria-label={sidebarItemTogglerAriaLabel}
+          tabIndex={-1}
+        />
 
-      <div className={classNames(style.main, `hidden peer-checked:flex`)}>
-        {navItems && (
-          <div className={style.navItems}>
-            {navItems.map(({ text, link, target }) => (
-              <NavItem
-                pathname={pathname}
-                as={Component}
-                key={link}
-                href={link}
-                target={target}
-              >
-                {text}
-              </NavItem>
-            ))}
-          </div>
-        )}
-        <div className={style.actionsWrapper}>{children}</div>
+        <div className={classNames(styles.main, `hidden peer-checked:flex`)}>
+          {navItems && (
+            <div className={styles.navItems}>
+              {navItems.map(({ text, link, target }) => (
+                <NavItem
+                  pathname={pathname}
+                  as={Component}
+                  key={link}
+                  href={link}
+                  target={target}
+                >
+                  {text}
+                </NavItem>
+              ))}
+            </div>
+          )}
+          <div className={styles.actionsWrapper}>{children}</div>
+        </div>
       </div>
     </nav>
   );