diff --git a/README.md b/README.md
index 3ea5176a..d265ffed 100644
--- a/README.md
+++ b/README.md
@@ -53,7 +53,7 @@ import { tv } from 'tailwind-variants'
 
 export const buttonStyles = tv({
   base:
-    'text-main-11 flex items-center gap-1 border-1 outline-offset-0 outline-0 text-nowrap',
+    'text-main-11 flex items-center   border-1 outline-offset-0 outline-0 text-nowrap',
   variants: {
     look: {
       base:
diff --git a/src/components/dapp/WalletButton.tsx b/src/components/dapp/WalletButton.tsx
index 8349d055..d3cdcd2f 100644
--- a/src/components/dapp/WalletButton.tsx
+++ b/src/components/dapp/WalletButton.tsx
@@ -36,7 +36,7 @@ export default function WalletButton(props: ButtonProps) {
 
   if (!connected)
     return (
-      <Modal title="Connect Wallet" className="mx-auto w-full max-w-[500px]" modal={<WalletConnectors />}>
+      <Modal title="CONNECT WALLET" className="mx-auto w-full max-w-[500px]" modal={<WalletConnectors />}>
         <Button look="hype" size="lg" {...props}>
           Connect wallet
         </Button>
diff --git a/src/components/extenders/Modal.tsx b/src/components/extenders/Modal.tsx
index 5de12c73..2b44e36c 100644
--- a/src/components/extenders/Modal.tsx
+++ b/src/components/extenders/Modal.tsx
@@ -28,7 +28,7 @@ export default function Modal({ state, title, description, modal, children, clas
         <Dialog.Content
           style={vars}
           className={mergeClass("fixed top-1/2 left-1/2 z-50 -translate-x-1/2 -translate-y-1/2", className)}>
-          <Box size="xl" className="shadow-md" {...props}>
+          <Box size="xl" className="!p-md*4 lg:!p-lg*4 shadow-md" {...props}>
             {title && (
               <Dialog.Title asChild={!!title}>
                 {typeof title === "string" ? <Title h={3}>{title}</Title> : title}
diff --git a/src/components/extenders/Select.tsx b/src/components/extenders/Select.tsx
index f99e0a2a..8c0b0fdd 100644
--- a/src/components/extenders/Select.tsx
+++ b/src/components/extenders/Select.tsx
@@ -14,7 +14,7 @@ import Group from "./Group";
 
 export const selectStyles = tv({
   base: [
-    "text-main-11 rounded-sm flex items-center dim focus-visible:outline-main-12 !leading-none justify-between gap-1 text-nowrap font-text font-semibold",
+    "text-main-11 rounded-sm flex items-center dim focus-visible:outline-main-12 !leading-none justify-between text-nowrap font-text font-semibold",
   ],
   slots: {
     dropdown: "outline-0 z-50 origin-top animate-drop animate-stretch mt-sm min-w-[var(--popover-anchor-width)]",
@@ -27,26 +27,26 @@ export const selectStyles = tv({
   variants: {
     look: {
       soft: {
-        base: "bg-main-0 border-main-9 active:text-main-12 text-main-11",
+        base: "bg-main-0 active:text-main-12 text-main-11",
         icon: "border-main-0",
         item: "hover:bg-main-5 data-[active-item]:bg-main-5 active:bg-main-4 text-main-12",
       },
       base: {
+        base: "bg-main-0 border-main-9 border-1 active:text-main-12 text-main-11",
+        icon: "border-main-0",
+        item: "hover:bg-main-5 data-[active-item]:bg-main-5 active:bg-main-4 text-main-12",
+      },
+      bold: {
         base: "bg-main-1 active:text-main-12 text-main-11",
         icon: "",
         item: "hover:bg-main-5 data-[active-item]:bg-main-5 active:bg-main-4 text-main-12",
         check: "text-accent-10",
       },
-      bold: {
+      tint: {
         base: "bg-main-5 active:text-main-12 text-main-11",
         icon: "",
         item: "hover:bg-main-3 data-[active-item]:bg-main-6 active:bg-main-5 text-main-12",
       },
-      tint: {
-        base: "bg-main-8 active:text-main-12 text-main-11",
-        icon: "",
-        item: "hover:bg-accent-6 data-[active-item]:bg-accent-6 active:bg-accent-5 text-main-12",
-      },
       hype: {
         base: "bg-accent-5 active:text-main-12 text-accent-11",
         icon: "",
@@ -55,35 +55,35 @@ export const selectStyles = tv({
     },
     size: {
       xs: {
-        base: "text-xs",
+        base: "gap-xs text-xs",
         value: "px-sm*2 py-xs*2",
         icon: "text-sm",
         item: "px-md text-xs",
         prefixLabel: "text-xs",
       },
       sm: {
-        base: "text-sm",
+        base: "gap-sm text-sm",
         value: "px-md py-sm",
         icon: "text-base",
         item: "px-md text-sm",
         prefixLabel: "text-sm",
       },
       md: {
-        base: "text-md",
+        base: "gap-md text-md",
         value: "px-md text-md py-md",
         icon: "text-lg",
         item: "px-md text-md",
         prefixLabel: "text-sm",
       },
       lg: {
-        base: "text-lg",
+        base: "gap-lg text-lg",
         value: "px-xl/2 py-lg",
         icon: "text-xl",
         item: "px-lg text-lg",
         prefixLabel: "text-base",
       },
       xl: {
-        base: "text-xl",
+        base: "gap-xl text-xl",
         value: "px-sm*2 py-lg",
         icon: "text-xl",
         item: "px-xl text-xl",
@@ -263,8 +263,10 @@ export default function Select<
                 {allOption && !searchInput && (
                   <Ariakit.SelectItem
                     className={mergeClass(item())}
-                    // biome-ignore lint/suspicious/noExplicitAny: template makes this typing difficult even tough it works
-                    onClick={() => setValue((!!multiple ? [] : undefined) as any as Value)}
+                    onClick={() =>
+                      // biome-ignore lint/suspicious/noExplicitAny: template makes this typing difficult even tough it works
+                      setValue((!!multiple ? [] : undefined) as any as Value)
+                    }
                     render={
                       <Ariakit.ComboboxItem
                         children={[
diff --git a/src/components/primitives/Box.tsx b/src/components/primitives/Box.tsx
index 6efc4cc1..f1361fc7 100644
--- a/src/components/primitives/Box.tsx
+++ b/src/components/primitives/Box.tsx
@@ -4,58 +4,61 @@ import { mergeClass } from "../../utils/css";
 import { sizeScale } from "../../utils/tailwind";
 import type { Component, Styled, Themable } from "../../utils/types";
 
-export const boxStyles = tv({
-  base: "flex flex-col border-1 gap-1",
-  variants: {
-    look: {
-      soft: "bg-main-1 border-main-0",
-      base: "bg-main-3 border-main-0 text-main-12",
-      bold: "bg-main-2 border-main-6 text-main-12",
-      tint: "bg-accent-4 border-main-0 text-main-12",
-      hype: "bg-accent-4 border-accent-6 text-main-12",
-    },
-    size: {
-      xs: "p-xs gap-xs",
-      sm: "p-sm gap-sm",
-      md: "p-md gap-md",
-      lg: "p-lg gap-md",
-      xl: "p-xl gap-xl",
-    },
-    container: {
-      true: "",
-      false: "",
+export const boxStyles = tv(
+  {
+    base: "flex flex-col border-1",
+    variants: {
+      look: {
+        soft: "bg-main-1 border-main-0",
+        base: "bg-main-3 border-main-0 text-main-12",
+        bold: "bg-main-2 border-main-6 text-main-12",
+        tint: "bg-accent-4 border-main-0 text-main-12",
+        hype: "bg-accent-4 border-accent-6 text-main-12",
+      },
+      size: {
+        xs: "p-xs gap-xs",
+        sm: "p-sm gap-sm",
+        md: "p-md gap-md",
+        lg: "p-lg gap-md",
+        xl: "p-xl gap-xl",
+      },
+      container: {
+        true: "",
+        false: "",
+      },
+      content: {
+        xs: "",
+        sm: "",
+        md: "",
+        lg: "",
+        xl: "",
+      },
     },
-    content: {
-      xs: "",
-      sm: "",
-      md: "",
-      lg: "",
-      xl: "",
+    defaultVariants: {
+      size: "md",
+      content: "md",
+      look: "base",
+      container: true,
     },
+    compoundVariants: sizeScale.flatMap(size =>
+      sizeScale.flatMap(content => [
+        {
+          size,
+          content,
+          container: true as const,
+          class: `rounded-${size}+${content}` as `rounded-${typeof size}+${typeof content}`,
+        },
+        {
+          size,
+          content,
+          container: false as const,
+          class: `rounded-${size}` as `rounded-${typeof size}`,
+        },
+      ]),
+    ),
   },
-  defaultVariants: {
-    size: "md",
-    content: "md",
-    look: "base",
-    container: true,
-  },
-  compoundVariants: sizeScale.flatMap(size =>
-    sizeScale.flatMap(content => [
-      {
-        size,
-        content,
-        container: true as const,
-        class: `rounded-${size}+${content}` as `rounded-${typeof size}+${typeof content}`,
-      },
-      {
-        size,
-        content,
-        container: false as const,
-        class: `rounded-${size}` as `rounded-${typeof size}`,
-      },
-    ]),
-  ),
-});
+  { twMerge: false },
+);
 
 export type BoxProps = Component<Styled<typeof boxStyles> & Themable>;
 
diff --git a/src/components/primitives/Icon.tsx b/src/components/primitives/Icon.tsx
index 5beab083..fe28ef0e 100644
--- a/src/components/primitives/Icon.tsx
+++ b/src/components/primitives/Icon.tsx
@@ -6,7 +6,7 @@ import type { Component, Styled } from "../..";
 import Image from "./Image";
 
 export const iconStyles = tv({
-  base: "flex flex-col border-0 gap-1 overflow-hidden self-center rounded-sm w-[calc(1em+2px)] h-[calc(1em+2px)]",
+  base: "flex flex-col border-0   overflow-hidden self-center rounded-sm w-[1em] h-[1em]",
   variants: {
     size: {
       xs: "",
diff --git a/src/components/primitives/Input.tsx b/src/components/primitives/Input.tsx
index c7b388fc..2c7c3bc4 100644
--- a/src/components/primitives/Input.tsx
+++ b/src/components/primitives/Input.tsx
@@ -7,7 +7,7 @@ import type { Component, GetSet, Styled } from "../../utils/types";
 import Group from "../extenders/Group";
 
 export const inputStyles = tv({
-  base: "text-main-12 flex items-center gap-1 text-nowrap font-text",
+  base: "text-main-12 flex items-center   text-nowrap font-text",
   variants: {
     look: {
       none: "bg-main-0 border-0",
diff --git a/src/components/primitives/Slider.tsx b/src/components/primitives/Slider.tsx
index 74dcce85..3addc17f 100644
--- a/src/components/primitives/Slider.tsx
+++ b/src/components/primitives/Slider.tsx
@@ -6,7 +6,7 @@ import type { Component, GetSet, Styled } from "../../utils/types";
 
 export const sliderStyles = tv({
   base: [
-    "relative text-main-11 flex items-center justify-between gap-1 border-1 outline-offset-0 outline-0 text-nowrap font-text font-bold",
+    "relative text-main-11 flex items-center justify-between   border-1 outline-offset-0 outline-0 text-nowrap font-text font-bold",
   ],
   slots: {
     thumb: "aspect-square text-xs border-1 bg-main-4 mt-sm shadow-md font-text font-normal",
diff --git a/src/components/primitives/Tabs.tsx b/src/components/primitives/Tabs.tsx
index 0b3eb039..6c10178d 100644
--- a/src/components/primitives/Tabs.tsx
+++ b/src/components/primitives/Tabs.tsx
@@ -1,6 +1,8 @@
 import { Link, useLocation } from "@remix-run/react";
+
 import type { ReactNode } from "react";
 import { type VariantProps, tv } from "tailwind-variants";
+import { Container } from "../..";
 import useThemableProps from "../../hooks/theming/useThemableProps";
 import { mergeClass } from "../../utils/css";
 import type { Component, Styled, Themable } from "../../utils/types";
@@ -14,50 +16,61 @@ export const tabsStyles = tv(
       base: "flex items-center ease !leading-none text-xl border-main-0 font-bold select-none focus-visible:outline focus-visible:outline-dashed focus-visible:outline-main-12 text-nowrap font-text",
       line: "",
       active: "",
+      container: "",
     },
     variants: {
       look: {
         soft: {
           base: "text-main-12",
-          line: "border-b-1 border-accent-11",
+          line: "border-accent-11",
           active: "border-accent-11",
+          container: "",
         },
         base: {
           base: "text-main-12",
-          line: "border-b-1 border-accent-11",
+          line: "border-accent-11",
           active: "border-accent-11",
+          container: "bg-main-3",
         },
         bold: {
           base: "text-main-12",
-          line: "border-b-1 border-accent-11",
+          line: "border-accent-11",
           active: "border-accent-11",
+          container: "",
         },
         tint: {
           base: "text-main-12",
-          line: "border-b-1 border-accent-11",
+          line: "border-accent-11",
           active: "border-accent-11",
+          container: "",
         },
         hype: {
           base: "text-main-12",
-          line: "border-b-1 border-accent-11",
+          line: "border-accent-11",
           active: "border-accent-11",
+          container: "",
         },
       },
       size: {
         xs: {
-          base: "border-b-1 pb-xs gap-sm text-xs",
+          base: "pb-xs gap-sm text-xs",
+          container: "mb-xs pt-xs*2",
         },
         sm: {
           base: "border-b-2 pb-sm gap-sm text-sm",
+          container: "mb-sm pt-sm*2",
         },
         md: {
           base: "border-b-4 pb-md gap-sm text-base",
+          container: "mb-md pt-md*2",
         },
         lg: {
           base: "border-b-5 pb-lg gap-sm text-lg",
+          container: "mb-lg pt-lg*2",
         },
         xl: {
           base: "border-b-6 pb-xl gap-sm text-xl",
+          container: "mb-xl pt-xl*2",
         },
       },
     },
@@ -91,38 +104,42 @@ export default function Tabs({ look, size, to, theme, className, tabs = [], ...p
   const styleProps = tabsStyles({ look, size });
   const location = useLocation();
 
-  const { base, active, line } = tabsStyles({
+  const { base, active, line, container } = tabsStyles({
     look: look ?? "base",
     size: size ?? "md",
   });
 
   return (
-    <Group className={mergeClass(line(), "gap-xl*2 items-center w-full")}>
-      {tabs.map(tab => {
-        return (
-          <>
-            {tab.link ? (
-              <EventBlocker key={tab.key}>
-                <Link
-                  to={tab.link}
-                  style={themeVars}
-                  className={mergeClass(styleProps, base(), className, location.pathname === tab.link && active())}>
-                  {tab.label}
-                </Link>
-              </EventBlocker>
-            ) : (
-              <button
-                key={tab.key}
-                style={themeVars}
-                className={mergeClass(styleProps, base(), className, location.pathname === tab.link && active())}
-                type="button"
-                {...props}>
-                {tab.label}
-              </button>
-            )}
-          </>
-        );
-      })}
+    <Group className={mergeClass(container(), "w-full")}>
+      <Container>
+        <Group className={mergeClass(line(), "gap-xl*2 items-center w-full")}>
+          {tabs.map(tab => {
+            return (
+              <>
+                {tab.link ? (
+                  <EventBlocker key={tab.key}>
+                    <Link
+                      to={tab.link}
+                      style={themeVars}
+                      className={mergeClass(styleProps, base(), className, location.pathname === tab.link && active())}>
+                      {tab.label}
+                    </Link>
+                  </EventBlocker>
+                ) : (
+                  <button
+                    key={tab.key}
+                    style={themeVars}
+                    className={mergeClass(styleProps, base(), className, location.pathname === tab.link && active())}
+                    type="button"
+                    {...props}>
+                    {tab.label}
+                  </button>
+                )}
+              </>
+            );
+          })}
+        </Group>
+      </Container>
     </Group>
   );
 }
diff --git a/src/components/primitives/Text.tsx b/src/components/primitives/Text.tsx
index edc2f9f8..1134fa8b 100644
--- a/src/components/primitives/Text.tsx
+++ b/src/components/primitives/Text.tsx
@@ -9,7 +9,7 @@ export const textStyles = tv(
       look: {
         base: "text-main-11",
         soft: "text-main-11",
-        bold: "text-secondary-12",
+        bold: "text-main-12",
         tint: "text-accent-12",
         hype: "text-accent-11",
       },
@@ -21,9 +21,9 @@ export const textStyles = tv(
         xl: "text-xl",
         display1: "font-title font-bold leading-tight italic uppercase !text-[clamp(44px,5vw+0.875rem,104px)]",
         1: "font-title !text-3xl",
-        2: "font-title font-bold leading-none italic !text-[clamp(52px,1vw+2.875rem,64px)]",
-        3: "font-title font-bold leading-snug italic !text-[clamp(28px,1vw+1.375rem,40px)]",
-        4: "font-title leading-normal !text-[clamp(16px,1vw+1.375rem,30px)]",
+        2: "font-title font-bold leading-none italic !text-[clamp(38px,0.667vw+2.125rem,46px)]",
+        3: "font-title font-bold leading-none italic !text-[clamp(26px,0.667vw+1.375rem,34px)]",
+        4: "font-title font-bold leading-[1.18] !text-[clamp(18px,0.667vw+0.875rem,26px)]",
         5: "font-title font-bold leading-normal !text-[clamp(15px,0.25vw+0.84375rem,18px)] uppercase tracking-[1.6px] ",
         6: "font-title !text-sm",
       },
diff --git a/src/components/primitives/Title.tsx b/src/components/primitives/Title.tsx
index 3365fd2f..2880c70d 100644
--- a/src/components/primitives/Title.tsx
+++ b/src/components/primitives/Title.tsx
@@ -11,7 +11,7 @@ export const titleStyles = tv(
       look: {
         base: "text-main-12",
         soft: "text-main-11",
-        bold: "text-secondary-12",
+        bold: "text-main-12",
         hype: "text-accent-12",
       },
     },