diff --git a/package.json b/package.json
index 0048941..bfa20c6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@inkonchain/ink-kit",
-  "version": "0.9.1-beta.5",
+  "version": "0.9.1-beta.16",
   "description": "",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
@@ -19,7 +19,8 @@
       "import": "./dist/providers.es.js",
       "require": "./dist/providers.cjs.js"
     },
-    "./style.css": "./dist/style.css"
+    "./style.css": "./dist/style.css",
+    "./tailwind.css": "./dist/tailwind.css"
   },
   "scripts": {
     "build": "tsc && vite build --mode production",
@@ -77,7 +78,7 @@
     "@tanstack/react-query": "^5",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19",
-    "tailwindcss": "^3",
+    "tailwindcss": "^3 || ^4",
     "viem": "^2",
     "wagmi": "^2"
   },
diff --git a/scripts/import-svgs.mjs b/scripts/import-svgs.mjs
index 98553bf..72553c6 100644
--- a/scripts/import-svgs.mjs
+++ b/scripts/import-svgs.mjs
@@ -22,11 +22,14 @@ async function processSvgsInFolder(folder) {
     (await fs.readdir(folder, { recursive: true })).map(async (name) => {
       if (name.includes("=")) {
         const currentPath = name.split("/").slice(0, -1).join("/");
-        const newName = currentPath + "/" + name.split("=")[1];
-        if (await fs.access(path.join(folder, newName)).catch(() => false)) {
-          await fs.unlink(path.join(folder, newName));
+        const newName = path.join(
+          folder,
+          currentPath + "/" + name.split("=")[1]
+        );
+        if (await fs.access(newName).catch(() => false)) {
+          await fs.unlink(newName);
         }
-        await fs.rename(path.join(folder, name), path.join(folder, newName));
+        await fs.rename(path.join(folder, name), newName);
       }
     })
   );
diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx
index 191535a..67b080b 100644
--- a/src/components/Alert/Alert.tsx
+++ b/src/components/Alert/Alert.tsx
@@ -92,3 +92,5 @@ export const Alert: React.FC<AlertProps> = ({
     </div>
   );
 };
+
+Alert.displayName = "Alert";
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index f3920a3..9810ebc 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from "react";
+import React, { PropsWithChildren, forwardRef } from "react";
 import { classNames, variantClassNames } from "../../util/classes";
 import { Slot, Slottable } from "../Slot/Slot";
 
@@ -14,80 +14,88 @@ export interface ButtonProps
   iconRight?: React.ReactNode;
 }
 
-export const Button: React.FC<ButtonProps> = ({
-  asChild,
-  className,
-  children,
-  variant = "primary",
-  size = "md",
-  rounded = "default",
-  iconLeft,
-  iconRight,
-  ...restProps
-}: ButtonProps) => {
-  const Component = asChild ? Slot : "button";
-  const iconClasses = classNames(
-    "ink:size-3 ink:-my-1",
-    variant === "wallet" &&
-      classNames(
-        "ink:*:object-cover ink:*:w-full ink:*:h-full ink:*:rounded-full",
-        variantClassNames(size, {
-          md: "ink:size-4",
-          lg: "ink:size-6",
-        })
-      )
-  );
-  return (
-    <Component
-      className={classNames(
-        "ink:rounded-full ink:font-default ink:transition-colors ink:hover:cursor-pointer ink:disabled:cursor-not-allowed ink:transition-default-animation ink:box-border ink:backdrop-blur-lg",
-        "ink:flex ink:items-center ink:justify-center ink:gap-1 ink:shrink-0 ink:select-none ink:no-underline",
-        variantClassNames(size, {
-          md: "ink:px-2 ink:py-1.5 ink:text-body-3-bold ink:h-5",
-          lg: "ink:px-4 ink:py-3 ink:text-h5 ink:h-8",
-        }),
-        variantClassNames(rounded, {
-          full: `ink:rounded-full ${variantClassNames(size, {
-            md: "ink:p-1 ink:size-5",
-            lg: "ink:p-2 ink:size-8",
-          })}`,
-          default: "",
-        }),
-        variantClassNames(variant, {
-          primary:
-            "ink:bg-button-primary ink:text-text-on-primary ink:hover:bg-button-primary-hover ink:disabled:bg-button-primary-disabled ink:disabled:text-text-on-primary-disabled ink:active:bg-button-primary-pressed",
-          secondary:
-            "ink:bg-button-secondary ink:text-text-on-secondary ink:hover:bg-button-secondary-hover ink:disabled:bg-button-secondary-disabled ink:disabled:text-text-on-secondary-disabled ink:active:bg-button-secondary-pressed",
-          wallet: classNames(
-            "ink:bg-background-light-transparent ink:text-body-2-bold ink:text-text-default ink:hover:bg-background-light ink:disabled:bg-background-light-transparent-disabled ink:disabled:text-muted ink:active:bg-background-light",
-            "ink:border-background-container ink:border",
-            iconLeft &&
-              variantClassNames(size, {
-                md: "ink:pl-0.5",
-                lg: "ink:pl-1",
-              }),
-            iconRight &&
-              variantClassNames(size, {
-                md: "ink:pr-0.5",
-                lg: "ink:pr-1",
-              })
-          ),
-          transparent:
-            "ink:bg-transparent ink:text-text-default ink:hover:bg-background-light-transparent ink:disabled:bg-transparent ink:disabled:text-muted",
-        }),
-        className
-      )}
-      {...restProps}
-    >
-      <Slottable child={children}>
-        {(child) => (
-          <>
-            {iconLeft && <div className={iconClasses}>{iconLeft}</div>}
-            {child}
-            {iconRight && <div className={iconClasses}>{iconRight}</div>}
-          </>
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  function Button(
+    {
+      asChild,
+      className,
+      children,
+      variant = "primary",
+      size = "md",
+      rounded = "default",
+      iconLeft,
+      iconRight,
+      ...restProps
+    },
+    ref
+  ) {
+    const Component = asChild ? Slot : "button";
+    const iconClasses = classNames(
+      "ink:size-3 ink:-my-1",
+      variant === "wallet" &&
+        classNames(
+          "ink:*:object-cover ink:*:w-full ink:*:h-full ink:*:rounded-full",
+          variantClassNames(size, {
+            md: "ink:size-4",
+            lg: "ink:size-6",
+          })
+        )
+    );
+    return (
+      <Component
+        className={classNames(
+          "ink:rounded-full ink:font-default ink:transition-colors ink:hover:cursor-pointer ink:disabled:cursor-not-allowed ink:transition-default-animation ink:box-border ink:backdrop-blur-lg",
+          "ink:flex ink:items-center ink:justify-center ink:gap-1 ink:shrink-0 ink:select-none ink:no-underline",
+          variantClassNames(size, {
+            md: "ink:px-2 ink:py-1.5 ink:text-body-3-bold ink:h-5",
+            lg: "ink:px-4 ink:py-3 ink:text-h5 ink:h-8",
+          }),
+          variantClassNames(rounded, {
+            full: `ink:rounded-full ${variantClassNames(size, {
+              md: "ink:p-1 ink:size-5",
+              lg: "ink:p-2 ink:size-8",
+            })}`,
+            default: "",
+          }),
+          variantClassNames(variant, {
+            primary:
+              "ink:bg-button-primary ink:text-text-on-primary ink:hover:bg-button-primary-hover ink:disabled:bg-button-primary-disabled ink:disabled:text-text-on-primary-disabled ink:active:bg-button-primary-pressed",
+            secondary:
+              "ink:bg-button-secondary ink:text-text-on-secondary ink:hover:bg-button-secondary-hover ink:disabled:bg-button-secondary-disabled ink:disabled:text-text-on-secondary-disabled ink:active:bg-button-secondary-pressed",
+            wallet: classNames(
+              "ink:bg-background-light-transparent ink:text-body-2-bold ink:text-text-default ink:hover:bg-background-light ink:disabled:bg-background-light-transparent-disabled ink:disabled:text-muted ink:active:bg-background-light",
+              "ink:border-background-container ink:border",
+              iconLeft &&
+                variantClassNames(size, {
+                  md: "ink:pl-0.5",
+                  lg: "ink:pl-1",
+                }),
+              iconRight &&
+                variantClassNames(size, {
+                  md: "ink:pr-0.5",
+                  lg: "ink:pr-1",
+                })
+            ),
+            transparent:
+              "ink:bg-transparent ink:text-text-default ink:hover:bg-background-light-transparent ink:disabled:bg-transparent ink:disabled:text-muted",
+          }),
+          className
         )}
-      </Slottable>
-    </Component>
-  );
-};
+        {...restProps}
+        ref={ref}
+      >
+        <Slottable child={children}>
+          {(child) => (
+            <>
+              {iconLeft && <div className={iconClasses}>{iconLeft}</div>}
+              {child}
+              {iconRight && <div className={iconClasses}>{iconRight}</div>}
+            </>
+          )}
+        </Slottable>
+      </Component>
+    );
+  }
+);
+
+Button.displayName = "Button";
diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
index 903b2b7..cb4da8f 100644
--- a/src/components/Card/Card.tsx
+++ b/src/components/Card/Card.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { forwardRef } from "react";
 import { classNames, variantClassNames } from "../../util/classes";
 import { Slot, Slottable } from "../Slot";
 import { cva, type VariantProps } from "class-variance-authority";
@@ -61,19 +61,23 @@ ink:overflow-hidden
   }
 );
 
-export const Card: React.FC<CardProps> = ({
-  children,
-  className,
-  image,
-  imageLocation,
-  asChild,
-  variant,
-  clickable,
-  size,
-}) => {
+export const Card = forwardRef<HTMLDivElement, CardProps>(function Card(
+  {
+    children,
+    className,
+    image,
+    imageLocation,
+    asChild,
+    variant,
+    clickable,
+    size,
+  },
+  ref
+) {
   const Component = asChild ? Slot : "div";
   return (
     <Component
+      ref={ref}
       className={classNames(
         cardVariants({
           variant,
@@ -128,4 +132,6 @@ export const Card: React.FC<CardProps> = ({
       </Slottable>
     </Component>
   );
-};
+});
+
+Card.displayName = "Card";
diff --git a/src/components/Card/Content/CallToAction.tsx b/src/components/Card/Content/CallToAction.tsx
index 7ab7a0c..5197d74 100644
--- a/src/components/Card/Content/CallToAction.tsx
+++ b/src/components/Card/Content/CallToAction.tsx
@@ -21,3 +21,5 @@ export const CallToAction: React.FC<CallToActionProps> = ({
     </div>
   );
 };
+
+CallToAction.displayName = "CallToAction";
diff --git a/src/components/Card/Content/CardInfo.tsx b/src/components/Card/Content/CardInfo.tsx
index 0088379..f7e7794 100644
--- a/src/components/Card/Content/CardInfo.tsx
+++ b/src/components/Card/Content/CardInfo.tsx
@@ -35,3 +35,5 @@ export const CardInfo = ({
     </Card>
   );
 };
+
+CardInfo.displayName = "CardInfo";
diff --git a/src/components/Card/Content/CardInfos.tsx b/src/components/Card/Content/CardInfos.tsx
index 140b4eb..3df1e29 100644
--- a/src/components/Card/Content/CardInfos.tsx
+++ b/src/components/Card/Content/CardInfos.tsx
@@ -18,3 +18,5 @@ export const CardInfos = ({ children, className }: CardInfosProps) => {
     </div>
   );
 };
+
+CardInfos.displayName = "CardInfos";
diff --git a/src/components/Card/Content/Image.tsx b/src/components/Card/Content/Image.tsx
index 3a01e0f..5d18139 100644
--- a/src/components/Card/Content/Image.tsx
+++ b/src/components/Card/Content/Image.tsx
@@ -53,3 +53,5 @@ export const Image: React.FC<ImageProps> = ({
     </div>
   );
 };
+
+Image.displayName = "Image";
diff --git a/src/components/Card/Content/LargeLink.tsx b/src/components/Card/Content/LargeLink.tsx
index 8e67213..058b630 100644
--- a/src/components/Card/Content/LargeLink.tsx
+++ b/src/components/Card/Content/LargeLink.tsx
@@ -47,3 +47,5 @@ export const LargeLink = ({
     </Component>
   );
 };
+
+LargeLink.displayName = "LargeLink";
diff --git a/src/components/Card/Content/LargeLinks.tsx b/src/components/Card/Content/LargeLinks.tsx
index ffc9582..42dab63 100644
--- a/src/components/Card/Content/LargeLinks.tsx
+++ b/src/components/Card/Content/LargeLinks.tsx
@@ -18,3 +18,5 @@ export const LargeLinks = ({ children, className }: LargeLinksProps) => {
     </div>
   );
 };
+
+LargeLinks.displayName = "LargeLinks";
diff --git a/src/components/Card/Content/Link.tsx b/src/components/Card/Content/Link.tsx
index 7f05ce9..b5f8d9f 100644
--- a/src/components/Card/Content/Link.tsx
+++ b/src/components/Card/Content/Link.tsx
@@ -37,3 +37,5 @@ export const Link = ({
     </Tiny>
   );
 };
+
+Link.displayName = "Link";
diff --git a/src/components/Card/Content/Tagline.tsx b/src/components/Card/Content/Tagline.tsx
index c736ec7..e7af6a4 100644
--- a/src/components/Card/Content/Tagline.tsx
+++ b/src/components/Card/Content/Tagline.tsx
@@ -28,3 +28,5 @@ export const Tagline: React.FC<TaglineProps> = ({
     </div>
   );
 };
+
+Tagline.displayName = "Tagline";
diff --git a/src/components/Card/Content/Tiny.tsx b/src/components/Card/Content/Tiny.tsx
index 311d055..72c67c4 100644
--- a/src/components/Card/Content/Tiny.tsx
+++ b/src/components/Card/Content/Tiny.tsx
@@ -32,3 +32,5 @@ export const Tiny = ({
     </div>
   );
 };
+
+Tiny.displayName = "Tiny";
diff --git a/src/components/Card/Content/TitleAndDescription.tsx b/src/components/Card/Content/TitleAndDescription.tsx
index 3251138..1c451d5 100644
--- a/src/components/Card/Content/TitleAndDescription.tsx
+++ b/src/components/Card/Content/TitleAndDescription.tsx
@@ -26,7 +26,7 @@ export const TitleAndDescription = ({
         {title}
       </h3>
       {description && (
-        <p
+        <div
           className={classNames(
             "ink:text-body-3-regular ink:text-(--ink-card-muted-color) ink:box-border ink:m-0",
             variantClassNames(size, {
@@ -37,8 +37,10 @@ export const TitleAndDescription = ({
           )}
         >
           {description}
-        </p>
+        </div>
       )}
     </div>
   );
 };
+
+TitleAndDescription.displayName = "TitleAndDescription";
diff --git a/src/components/Card/Content/index.ts b/src/components/Card/Content/index.ts
index 728727c..4b0812f 100644
--- a/src/components/Card/Content/index.ts
+++ b/src/components/Card/Content/index.ts
@@ -1,6 +1,6 @@
 export * from "./CallToAction";
-export * from "./CardInfos";
 export * from "./CardInfo";
+export * from "./CardInfos";
 export * from "./Image";
 export * from "./LargeLink";
 export * from "./LargeLinks";
diff --git a/src/components/Card/index.ts b/src/components/Card/index.ts
index 72a9b89..9378ab2 100644
--- a/src/components/Card/index.ts
+++ b/src/components/Card/index.ts
@@ -1,2 +1,2 @@
-export * as CardContent from "./Content";
 export * from "./Card";
+export * as CardContent from "./Content";
diff --git a/src/components/Checkbox/Checkbox.stories.tsx b/src/components/Checkbox/Checkbox.stories.tsx
index 371e846..1ed1119 100644
--- a/src/components/Checkbox/Checkbox.stories.tsx
+++ b/src/components/Checkbox/Checkbox.stories.tsx
@@ -120,7 +120,7 @@ export const NestingWithIndeterminateState: Story = {
   },
 };
 
-/** If you want to use the Checkbox without it's own managed state, don't set `onChange` and simply pass `checked={value}`. */
+/** If you want to use the Checkbox without it's own managed state, set checked={undefined} and onChange={undefined}, and add `data-checked={value}` to the parent item. */
 export const ManagedByAParentItem: Story = {
   argTypes: {
     onChange: {
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index 1df6fc0..7fcad5a 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -2,7 +2,8 @@ import { Checkbox as HeadlessCheckbox } from "@headlessui/react";
 import { classNames } from "../../util/classes";
 import { InkIcon } from "../..";
 
-export interface CheckboxProps {
+export interface CheckboxProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> {
   checked?: boolean;
   indeterminate?: boolean;
   onChange?: (enabled: boolean) => void;
@@ -12,6 +13,8 @@ export const Checkbox: React.FC<CheckboxProps> = ({
   checked,
   indeterminate,
   onChange,
+  className,
+  ...props
 }) => {
   const Component = onChange ? HeadlessCheckbox : "span";
   return (
@@ -36,10 +39,12 @@ export const Checkbox: React.FC<CheckboxProps> = ({
         "ink:text-button-primary ink:data-checked:text-text-on-primary ink:data-indeterminate:text-text-on-primary",
         "ink:group-data-checked:text-text-on-primary ink:group-data-indeterminate:text-text-on-primary",
         "ink:group-data-selected:text-text-on-primary",
-        "ink:cursor-pointer"
+        "ink:cursor-pointer",
+        className
       )}
       data-checked={checked ? "true" : undefined}
       data-indeterminate={indeterminate ? "true" : undefined}
+      {...props}
     >
       <div className="ink:absolute ink:inset-0 ink:flex ink:items-center ink:justify-center ink:box-border">
         <InkIcon.Check
diff --git a/src/components/FieldLabel/FieldLabel.tsx b/src/components/FieldLabel/FieldLabel.tsx
index 73be7ed..f323e50 100644
--- a/src/components/FieldLabel/FieldLabel.tsx
+++ b/src/components/FieldLabel/FieldLabel.tsx
@@ -28,3 +28,5 @@ export const FieldLabel: React.FC<FieldLabelProps> = ({
     </Field>
   );
 };
+
+FieldLabel.displayName = "FieldLabel";
diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
index 77c48c3..3258894 100644
--- a/src/components/Input/Input.tsx
+++ b/src/components/Input/Input.tsx
@@ -33,3 +33,5 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
     );
   }
 );
+
+Input.displayName = "Input";
diff --git a/src/components/ListItem/ListItem.tsx b/src/components/ListItem/ListItem.tsx
index 24a6aad..3fb4635 100644
--- a/src/components/ListItem/ListItem.tsx
+++ b/src/components/ListItem/ListItem.tsx
@@ -73,3 +73,5 @@ export const ListItem: React.FC<ListItemProps> = ({
     </Component>
   );
 };
+
+ListItem.displayName = "ListItem";
diff --git a/src/components/Listbox/Listbox.tsx b/src/components/Listbox/Listbox.tsx
index 2b5ccdc..c32911d 100644
--- a/src/components/Listbox/Listbox.tsx
+++ b/src/components/Listbox/Listbox.tsx
@@ -20,3 +20,5 @@ export const Listbox = <T extends object>({
     </HeadlessListbox>
   );
 };
+
+Listbox.displayName = "Listbox";
diff --git a/src/components/Listbox/ListboxOption.tsx b/src/components/Listbox/ListboxOption.tsx
index e594371..6b06345 100644
--- a/src/components/Listbox/ListboxOption.tsx
+++ b/src/components/Listbox/ListboxOption.tsx
@@ -36,3 +36,5 @@ export const ListboxOption = <T,>({
     </HeadlessListboxOption>
   );
 };
+
+ListboxOption.displayName = "ListboxOption";
diff --git a/src/components/Listbox/ListboxOptions.tsx b/src/components/Listbox/ListboxOptions.tsx
index bb5ba87..79a0fdb 100644
--- a/src/components/Listbox/ListboxOptions.tsx
+++ b/src/components/Listbox/ListboxOptions.tsx
@@ -20,3 +20,5 @@ export const ListboxOptions = ({
     </HeadlessListboxOptions>
   );
 };
+
+ListboxOptions.displayName = "ListboxOptions";
diff --git a/src/components/Listbox/index.ts b/src/components/Listbox/index.ts
index f6568fa..c8ad441 100644
--- a/src/components/Listbox/index.ts
+++ b/src/components/Listbox/index.ts
@@ -1,4 +1,4 @@
 export * from "./Listbox";
 export * from "./ListboxButton";
-export * from "./ListboxOptions";
 export * from "./ListboxOption";
+export * from "./ListboxOptions";
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index 1a9d4c3..3092309 100644
--- a/src/components/Modal/Modal.tsx
+++ b/src/components/Modal/Modal.tsx
@@ -57,7 +57,7 @@ export const Modal = <TOnCloseProps,>({
         onClose={() => handleClose()}
         transition
         className="ink:relative ink:font-default ink:text-text-default"
-        style={{ zIndex: 5 + modalIndex }}
+        style={{ zIndex: 15 + modalIndex }}
       >
         {hasBackdrop && (
           <DialogBackdrop
@@ -93,3 +93,5 @@ export const Modal = <TOnCloseProps,>({
     </>
   );
 };
+
+Modal.displayName = "Modal";
diff --git a/src/components/Modal/ModalContext.tsx b/src/components/Modal/ModalContext.tsx
index 6b06a49..d0ca3d2 100644
--- a/src/components/Modal/ModalContext.tsx
+++ b/src/components/Modal/ModalContext.tsx
@@ -73,3 +73,5 @@ export const ModalProvider = ({ children }: { children: React.ReactNode }) => {
     </ModalManagementContext.Provider>
   );
 };
+
+ModalProvider.displayName = "ModalProvider";
diff --git a/src/components/Modal/index.ts b/src/components/Modal/index.ts
index 730b8bd..adef1ed 100644
--- a/src/components/Modal/index.ts
+++ b/src/components/Modal/index.ts
@@ -1,3 +1,3 @@
-export * from "./ModalContext";
-export * from "./Modal";
 export * as ModalLayout from "./Layouts";
+export * from "./Modal";
+export * from "./ModalContext";
diff --git a/src/components/Panel/Panel.tsx b/src/components/Panel/Panel.tsx
index 897f7eb..47648c9 100644
--- a/src/components/Panel/Panel.tsx
+++ b/src/components/Panel/Panel.tsx
@@ -21,3 +21,5 @@ export const Panel: React.FC<PanelProps> = ({ children, className }) => {
     </div>
   );
 };
+
+Panel.displayName = "Panel";
diff --git a/src/components/Popover/Popover.tsx b/src/components/Popover/Popover.tsx
index 2a0cdbd..beda8cf 100644
--- a/src/components/Popover/Popover.tsx
+++ b/src/components/Popover/Popover.tsx
@@ -15,3 +15,5 @@ export const Popover = ({ children, className }: PopoverProps) => {
     </HeadlessPopover>
   );
 };
+
+Popover.displayName = "Popover";
diff --git a/src/components/Popover/PopoverButton.tsx b/src/components/Popover/PopoverButton.tsx
index 0321c01..600ce6e 100644
--- a/src/components/Popover/PopoverButton.tsx
+++ b/src/components/Popover/PopoverButton.tsx
@@ -28,3 +28,5 @@ export const PopoverButton: React.FC<PopoverButtonProps> = ({
     />
   );
 };
+
+PopoverButton.displayName = "PopoverButton";
diff --git a/src/components/Popover/PopoverPanel.tsx b/src/components/Popover/PopoverPanel.tsx
index 04a9a3b..24c045e 100644
--- a/src/components/Popover/PopoverPanel.tsx
+++ b/src/components/Popover/PopoverPanel.tsx
@@ -27,3 +27,5 @@ export const PopoverPanel: React.FC<PopoverPanelProps> = ({
     </HeadlessPopoverPanel>
   );
 };
+
+PopoverPanel.displayName = "PopoverPanel";
diff --git a/src/components/Radio/Radio.tsx b/src/components/Radio/Radio.tsx
index 0b0282d..fa1127c 100644
--- a/src/components/Radio/Radio.tsx
+++ b/src/components/Radio/Radio.tsx
@@ -26,3 +26,5 @@ export const Radio: React.FC<RadioProps> = ({ value, asChild }) => {
     </Component>
   );
 };
+
+Radio.displayName = "Radio";
diff --git a/src/components/Radio/RadioGroup.tsx b/src/components/Radio/RadioGroup.tsx
index 3b3ce85..02a92ab 100644
--- a/src/components/Radio/RadioGroup.tsx
+++ b/src/components/Radio/RadioGroup.tsx
@@ -21,3 +21,5 @@ export const RadioGroup: React.FC<RadioGroupProps> = ({
     </HeadlessRadioGroup>
   );
 };
+
+RadioGroup.displayName = "RadioGroup";
diff --git a/src/components/Radio/RadioLabel.tsx b/src/components/Radio/RadioLabel.tsx
index c6ba2cf..652015e 100644
--- a/src/components/Radio/RadioLabel.tsx
+++ b/src/components/Radio/RadioLabel.tsx
@@ -5,3 +5,5 @@ export interface RadioLabelProps extends FieldLabelProps {}
 export const RadioLabel: React.FC<RadioLabelProps> = (props) => {
   return <FieldLabel {...props} />;
 };
+
+RadioLabel.displayName = "RadioLabel";
diff --git a/src/components/SegmentedControl/SegmentedControl.tsx b/src/components/SegmentedControl/SegmentedControl.tsx
index 7eabce0..d9bc87c 100644
--- a/src/components/SegmentedControl/SegmentedControl.tsx
+++ b/src/components/SegmentedControl/SegmentedControl.tsx
@@ -131,3 +131,5 @@ export const SegmentedControl = <TOptionValue extends string>({
     </div>
   );
 };
+
+SegmentedControl.displayName = "SegmentedControl";
diff --git a/src/components/Tag/Tag.tsx b/src/components/Tag/Tag.tsx
index 06543ab..7b94f6c 100644
--- a/src/components/Tag/Tag.tsx
+++ b/src/components/Tag/Tag.tsx
@@ -46,30 +46,31 @@ export interface TagProps
   icon?: React.ReactNode;
 }
 
-export const Tag = React.forwardRef<HTMLDivElement, TagProps>(
-  ({ className, variant, selected, icon, children, ...props }, ref) => {
-    return (
-      <div
-        ref={ref}
-        className={classNames(
-          tagVariants({ variant, selected, hasIcon: !!icon, className })
-        )}
-        {...props}
-      >
-        {icon && (
-          <div
-            className={classNames(
-              "ink:flex ink:items-center ink:justify-center",
-              variant === "featured" ? "ink:size-1.5" : "ink:size-2"
-            )}
-          >
-            {icon}
-          </div>
-        )}
-        {children}
-      </div>
-    );
-  }
-);
+export const Tag = React.forwardRef<HTMLDivElement, TagProps>(function Tag(
+  { className, variant, selected, icon, children, ...props },
+  ref
+) {
+  return (
+    <div
+      ref={ref}
+      className={classNames(
+        tagVariants({ variant, selected, hasIcon: !!icon, className })
+      )}
+      {...props}
+    >
+      {icon && (
+        <div
+          className={classNames(
+            "ink:flex ink:items-center ink:justify-center",
+            variant === "featured" ? "ink:size-1.5" : "ink:size-2"
+          )}
+        >
+          {icon}
+        </div>
+      )}
+      {children}
+    </div>
+  );
+});
 
 Tag.displayName = "Tag";
diff --git a/src/components/Toggle/Toggle.tsx b/src/components/Toggle/Toggle.tsx
index 1561792..343131f 100644
--- a/src/components/Toggle/Toggle.tsx
+++ b/src/components/Toggle/Toggle.tsx
@@ -40,3 +40,5 @@ export const Toggle: React.FC<ToggleProps> = ({ checked, onChange }) => {
     </Switch>
   );
 };
+
+Toggle.displayName = "Toggle";
diff --git a/src/components/Typography/Typography.tsx b/src/components/Typography/Typography.tsx
index 0d722e3..21dcfbb 100644
--- a/src/components/Typography/Typography.tsx
+++ b/src/components/Typography/Typography.tsx
@@ -68,3 +68,5 @@ export const Typography: React.FC<TypographyProps> = ({
     </Component>
   );
 };
+
+Typography.displayName = "Typography";
diff --git a/src/components/Wallet/ConnectWallet.tsx b/src/components/Wallet/ConnectWallet.tsx
index 74c0a7a..28955a9 100644
--- a/src/components/Wallet/ConnectWallet.tsx
+++ b/src/components/Wallet/ConnectWallet.tsx
@@ -167,3 +167,5 @@ const ConnectedWalletSection = ({
     </>
   );
 };
+
+ConnectWallet.displayName = "ConnectWallet";
diff --git a/src/components/index.ts b/src/components/index.ts
index 26a8a43..9f4617e 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -3,8 +3,8 @@ export * from "./Button";
 export * from "./Card";
 export * from "./Checkbox";
 export * from "./Input";
-export * from "./ListItem";
 export * from "./Listbox";
+export * from "./ListItem";
 export * from "./Modal";
 export * from "./Popover";
 export * from "./SegmentedControl";
diff --git a/src/icons/ArrowDiagonal.svg b/src/icons/ArrowDiagonal.svg
new file mode 100644
index 0000000..6774377
--- /dev/null
+++ b/src/icons/ArrowDiagonal.svg
@@ -0,0 +1,3 @@
+<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 6C8 5.44772 8.44772 5 9 5H16C17.6569 5 19 6.34315 19 8V15C19 15.5523 18.5523 16 18 16C17.4477 16 17 15.5523 17 15V8.41421L7.20711 18.2071C6.81658 18.5976 6.18342 18.5976 5.79289 18.2071C5.40237 17.8166 5.40237 17.1834 5.79289 16.7929L15.5858 7H9C8.44772 7 8 6.55228 8 6Z" fill="currentColor"/>
+</svg>
diff --git a/src/icons/Calendar.svg b/src/icons/Calendar.svg
new file mode 100644
index 0000000..dc89986
--- /dev/null
+++ b/src/icons/Calendar.svg
@@ -0,0 +1,3 @@
+<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 2C8.55228 2 9 2.44772 9 3V4H15V3C15 2.44772 15.4477 2 16 2C16.5523 2 17 2.44772 17 3V4H18C19.6569 4 21 5.34315 21 7V18C21 19.6569 19.6569 21 18 21H6C4.34315 21 3 19.6569 3 18V7C3 5.34315 4.34315 4 6 4H7V3C7 2.44772 7.44772 2 8 2ZM6 6C5.44772 6 5 6.44772 5 7V9H19V7C19 6.44772 18.5523 6 18 6H6ZM19 11H5V18C5 18.5523 5.44772 19 6 19H18C18.5523 19 19 18.5523 19 18V11Z" fill="currentColor"/>
+</svg>
diff --git a/src/icons/Filter.svg b/src/icons/Filter.svg
new file mode 100644
index 0000000..58afb76
--- /dev/null
+++ b/src/icons/Filter.svg
@@ -0,0 +1,3 @@
+<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 5C2 4.44772 2.44772 4 3 4H21C21.5523 4 22 4.44772 22 5C22 5.55228 21.5523 6 21 6H3C2.44772 6 2 5.55228 2 5ZM5 12C5 11.4477 5.44772 11 6 11H18C18.5523 11 19 11.4477 19 12C19 12.5523 18.5523 13 18 13H6C5.44772 13 5 12.5523 5 12ZM8 19C8 18.4477 8.44772 18 9 18H15C15.5523 18 16 18.4477 16 19C16 19.5523 15.5523 20 15 20H9C8.44772 20 8 19.5523 8 19Z" fill="currentColor"/>
+</svg>
diff --git a/src/icons/Location.svg b/src/icons/Location.svg
new file mode 100644
index 0000000..e1f0641
--- /dev/null
+++ b/src/icons/Location.svg
@@ -0,0 +1,3 @@
+<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C8.68629 4 6 6.68629 6 10C6 11.8964 6.84877 13.7791 8.01178 15.4528C9.16717 17.1156 10.5688 18.4804 11.5264 19.32C11.8056 19.5648 12.1944 19.5648 12.4736 19.32C13.4312 18.4804 14.8328 17.1156 15.9882 15.4528C17.1512 13.7791 18 11.8964 18 10C18 6.68629 15.3137 4 12 4ZM4 10C4 5.58172 7.58172 2 12 2C16.4183 2 20 5.58172 20 10C20 12.4742 18.9059 14.7588 17.6306 16.5941C16.3478 18.4403 14.8159 19.9262 13.7922 20.8238C12.7584 21.7302 11.2416 21.7302 10.2078 20.8238C9.18407 19.9262 7.65218 18.4403 6.36935 16.5941C5.09414 14.7588 4 12.4742 4 10ZM11.9978 8.5C11.1694 8.5 10.4978 9.17157 10.4978 10C10.4978 10.8284 11.1694 11.5 11.9978 11.5C12.8262 11.5 13.4978 10.8284 13.4978 10C13.4978 9.17157 12.8262 8.5 11.9978 8.5ZM8.4978 10C8.4978 8.067 10.0648 6.5 11.9978 6.5C13.9308 6.5 15.4978 8.067 15.4978 10C15.4978 11.933 13.9308 13.5 11.9978 13.5C10.0648 13.5 8.4978 11.933 8.4978 10Z" fill="currentColor"/>
+</svg>
diff --git a/src/icons/PlusSmall.svg b/src/icons/PlusSmall.svg
new file mode 100644
index 0000000..0ad1095
--- /dev/null
+++ b/src/icons/PlusSmall.svg
@@ -0,0 +1,3 @@
+<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 6C12.5523 6 13 6.44772 13 7V11H17C17.5523 11 18 11.4477 18 12C18 12.5523 17.5523 13 17 13H13V17C13 17.5523 12.5523 18 12 18C11.4477 18 11 17.5523 11 17V13H7C6.44772 13 6 12.5523 6 12C6 11.4477 6.44772 11 7 11H11V7C11 6.44772 11.4477 6 12 6Z" fill="currentColor"/>
+</svg>
diff --git a/src/icons/Power.svg b/src/icons/Power.svg
new file mode 100644
index 0000000..2ecf9a4
--- /dev/null
+++ b/src/icons/Power.svg
@@ -0,0 +1,3 @@
+<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.9 3C12.9 2.50294 12.4971 2.1 12 2.1C11.5029 2.1 11.1 2.50294 11.1 3V10.2C11.1 10.6971 11.5029 11.1 12 11.1C12.4971 11.1 12.9 10.6971 12.9 10.2V3ZM16.4918 4.80109C16.0611 4.55302 15.5108 4.70108 15.2628 5.1318C15.0147 5.56253 15.1628 6.1128 15.5935 6.36088C16.9672 7.15209 18.0414 8.37456 18.6494 9.83862C19.2574 11.3027 19.3652 12.9265 18.9561 14.4581C18.547 15.9897 17.6439 17.3434 16.3868 18.3093C15.1298 19.2752 13.5891 19.7992 12.0038 19.8C10.4185 19.8009 8.87724 19.2785 7.61916 18.3139C6.36109 17.3493 5.45653 15.9965 5.04583 14.4653C4.63512 12.9342 4.74124 11.3103 5.34771 9.84558C5.95418 8.38088 7.0271 7.15729 8.4 6.36465C8.83047 6.11612 8.97796 5.56569 8.72943 5.13522C8.4809 4.70476 7.93047 4.55727 7.5 4.8058C5.78388 5.7966 4.44273 7.3261 3.68464 9.15696C2.92655 10.9878 2.7939 13.0177 3.30728 14.9317C3.82066 16.8456 4.95136 18.5366 6.52395 19.7424C8.09654 20.9481 10.0231 21.6011 12.0047 21.6C13.9863 21.599 15.9122 20.944 17.4835 19.7366C19.0549 18.5293 20.1838 16.8371 20.6952 14.9226C21.2065 13.0081 21.0718 10.9783 20.3118 9.14826C19.5518 7.31819 18.209 5.7901 16.4918 4.80109Z" fill="currentColor"/>
+</svg>
diff --git a/src/icons/index.ts b/src/icons/index.ts
index 4d8c3bd..8b9d41e 100644
--- a/src/icons/index.ts
+++ b/src/icons/index.ts
@@ -4,7 +4,9 @@
 
 export { default as Apps } from "./Apps.svg?react";
 export { default as Arrow } from "./Arrow.svg?react";
+export { default as ArrowDiagonal } from "./ArrowDiagonal.svg?react";
 export { default as Bridge } from "./Bridge.svg?react";
+export { default as Calendar } from "./Calendar.svg?react";
 export { default as Check } from "./Check.svg?react";
 export { default as CheckBadge } from "./CheckBadge.svg?react";
 export { default as CheckFill } from "./CheckFill.svg?react";
@@ -17,24 +19,28 @@ export { default as Deposit } from "./Deposit.svg?react";
 export { default as Disconnect } from "./Disconnect.svg?react";
 export { default as Dots } from "./Dots.svg?react";
 export { default as Error } from "./Error.svg?react";
+export { default as Filter } from "./Filter.svg?react";
 export { default as History } from "./History.svg?react";
 export { default as Home } from "./Home.svg?react";
 export { default as Info } from "./Info.svg?react";
 export { default as InkLogo } from "./InkLogo.svg?react";
 export { default as Loading } from "./Loading.svg?react";
+export { default as Location } from "./Location.svg?react";
+export * as Logo from "./Logo/index.ts";
 export { default as Mail } from "./Mail.svg?react";
 export { default as Menu } from "./Menu.svg?react";
 export { default as Minus } from "./Minus.svg?react";
 export { default as Moon } from "./Moon.svg?react";
+export * as Page from "./Page/index.ts";
 export { default as Panel } from "./Panel.svg?react";
 export { default as Plus } from "./Plus.svg?react";
+export { default as PlusSmall } from "./PlusSmall.svg?react";
+export { default as Power } from "./Power.svg?react";
 export { default as Profile } from "./Profile.svg?react";
 export { default as Search } from "./Search.svg?react";
 export { default as Settings } from "./Settings.svg?react";
+export * as Social from "./Social/index.ts";
 export { default as Sun } from "./Sun.svg?react";
 export { default as Swap } from "./Swap.svg?react";
 export { default as Users } from "./Users.svg?react";
 export { default as Wallet } from "./Wallet.svg?react";
-export * as Logo from "./Logo/index.ts";
-export * as Page from "./Page/index.ts";
-export * as Social from "./Social/index.ts";
diff --git a/src/index.ts b/src/index.ts
index a521ede..786cd7a 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,5 +1,6 @@
 import "./tailwind.css";
+
 export * from "./components";
-export * from "./layout";
 export * from "./hooks";
 export * as InkIcon from "./icons";
+export * from "./layout";
diff --git a/src/layout/ForStories/ExampleLayoutLinks.tsx b/src/layout/ForStories/ExampleLayoutLinks.tsx
index 246923a..a24bd82 100644
--- a/src/layout/ForStories/ExampleLayoutLinks.tsx
+++ b/src/layout/ForStories/ExampleLayoutLinks.tsx
@@ -5,13 +5,14 @@ export const EXAMPLE_LINKS: InkLayoutLink[] = [
   {
     children: "Home",
     href: "#home",
-    icon: <InkIcon.Home />,
+    leftIcon: <InkIcon.Home />,
     target: "_self",
+    active: true,
   },
   {
     children: "Settings",
     href: "#settings",
-    icon: <InkIcon.Settings />,
+    leftIcon: <InkIcon.Settings />,
     target: "_self",
   },
 ];
diff --git a/src/layout/ForStories/ExampleSideNav.tsx b/src/layout/ForStories/ExampleSideNav.tsx
index cf0f1bc..1920abb 100644
--- a/src/layout/ForStories/ExampleSideNav.tsx
+++ b/src/layout/ForStories/ExampleSideNav.tsx
@@ -1,4 +1,4 @@
-import { InkLayoutSideNav } from "../InkLayout";
+import { InkLayoutSideNav } from "../InkLayout/InkLayoutSideNav";
 import { EXAMPLE_LINKS } from "./ExampleLayoutLinks";
 
 export const ExampleSideNav = () => {
diff --git a/src/layout/ForStories/ExampleTopNav.tsx b/src/layout/ForStories/ExampleTopNav.tsx
index 350609d..9afe6ff 100644
--- a/src/layout/ForStories/ExampleTopNav.tsx
+++ b/src/layout/ForStories/ExampleTopNav.tsx
@@ -1,4 +1,4 @@
-import { SegmentedControl } from "../../components";
+import { SegmentedControl } from "../../components/SegmentedControl";
 
 export const ExampleTopNav = () => {
   return (
diff --git a/src/layout/InkLayout/InkLayout.stories.tsx b/src/layout/InkLayout/InkLayout.stories.tsx
index 838f116..4001531 100644
--- a/src/layout/InkLayout/InkLayout.stories.tsx
+++ b/src/layout/InkLayout/InkLayout.stories.tsx
@@ -52,14 +52,15 @@ export const SideNavWithCustomButtons: Story = {
           {
             children: <a className="ink:text-button-primary!">Home</a>,
             href: "#home",
-            icon: <InkIcon.Home />,
+            leftIcon: <InkIcon.Home />,
             target: "_self",
             asChild: true,
+            active: true,
           },
           {
             children: <a className="ink:text-button-primary!">Settings</a>,
             href: "#settings",
-            icon: <InkIcon.Settings />,
+            leftIcon: <InkIcon.Settings />,
             target: "_self",
             asChild: true,
           },
diff --git a/src/layout/InkLayout/InkLayout.tsx b/src/layout/InkLayout/InkLayout.tsx
index 68322fa..b61e2b5 100644
--- a/src/layout/InkLayout/InkLayout.tsx
+++ b/src/layout/InkLayout/InkLayout.tsx
@@ -121,3 +121,5 @@ const InkLayoutContent = ({
     </>
   );
 };
+
+InkLayout.displayName = "InkLayout";
diff --git a/src/layout/InkLayout/InkLayoutContext.tsx b/src/layout/InkLayout/InkLayoutContext.tsx
index 50c38cf..0344998 100644
--- a/src/layout/InkLayout/InkLayoutContext.tsx
+++ b/src/layout/InkLayout/InkLayoutContext.tsx
@@ -31,3 +31,5 @@ export const InkLayoutProvider = ({
     </InkLayoutContext.Provider>
   );
 };
+
+InkLayoutProvider.displayName = "InkLayoutProvider";
diff --git a/src/layout/InkLayout/InkLayoutSideNav.tsx b/src/layout/InkLayout/InkLayoutSideNav.tsx
index 5df086e..23cb9fe 100644
--- a/src/layout/InkLayout/InkLayoutSideNav.tsx
+++ b/src/layout/InkLayout/InkLayoutSideNav.tsx
@@ -13,8 +13,8 @@ export const InkLayoutSideNav: React.FC<InkLayoutSideNavProps> = ({
   return (
     <nav className="ink:h-full ink:flex ink:flex-col ink:font-default ink:text-text-default ink:text-body-3-bold ink:pb-4 ink:gap-4 ink:box-border">
       <div className="ink:flex-1 ink:flex ink:flex-col">
-        {links.map((link, i) => {
-          return <InkNavLink {...link} key={link.href} active={i === 0} />;
+        {links.map((link) => {
+          return <InkNavLink {...link} key={link.href} />;
         })}
       </div>
       <div className="ink:flex-1 ink:flex ink:flex-col ink:justify-end">
@@ -23,3 +23,5 @@ export const InkLayoutSideNav: React.FC<InkLayoutSideNavProps> = ({
     </nav>
   );
 };
+
+InkLayoutSideNav.displayName = "InkLayoutSideNav";
diff --git a/src/layout/InkLayout/InkNavLink.tsx b/src/layout/InkLayout/InkNavLink.tsx
index 40b12d9..2cc3587 100644
--- a/src/layout/InkLayout/InkNavLink.tsx
+++ b/src/layout/InkLayout/InkNavLink.tsx
@@ -1,39 +1,58 @@
 import React from "react";
-import { classNames } from "../../util/classes";
+import { classNames, variantClassNames } from "../../util/classes";
 import { Slot, Slottable } from "../../components/Slot";
 
 export interface InkLayoutLink extends React.ComponentPropsWithoutRef<"a"> {
   children: React.ReactNode;
   onClick?: React.MouseEventHandler<HTMLElement>;
   href?: string;
-  icon?: React.ReactNode;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
   target?: StringWithAutocomplete<"_blank" | "_self">;
   asChild?: boolean;
   active?: boolean;
 }
 
-export interface InkNavLinkProps extends InkLayoutLink {}
+export interface InkNavLinkProps extends InkLayoutLink {
+  variant?: "default" | "mobile";
+}
 
 export const InkNavLink: React.FC<InkNavLinkProps> = ({
   href,
-  icon,
+  leftIcon,
+  rightIcon,
   children,
   className = "",
   asChild,
   onClick,
   active,
+  variant = "default",
   ...props
 }) => {
   const Component = asChild ? Slot : "a";
 
+  const iconClasses = classNames(
+    variantClassNames(variant, {
+      default: "ink:size-3 ink:p-0.5",
+      mobile: "ink:size-3",
+    })
+  );
+
   return (
     <Component
       href={href}
       className={classNames(
-        "ink:flex ink:items-center ink:gap-1 ink:px-1.5 ink:py-1 ink:text-inherit ink:no-underline ink:rounded-md ink:box-border ink:hover:text-text-default",
-        active
-          ? "ink:bg-background-container ink:text-text-default"
-          : "ink:text-text-muted",
+        "ink:flex ink:items-center ink:px-1.5 ink:text-inherit ink:no-underline ink:rounded-md ink:box-border ink:hover:text-text-default",
+        variantClassNames(variant, {
+          default: classNames(
+            "ink:gap-1 ink:py-1 ink:text-body-3-bold",
+            active
+              ? "ink:bg-background-container ink:text-text-default"
+              : "ink:text-text-muted"
+          ),
+          mobile:
+            "ink:gap-2 ink:py-1.5 ink:text-body-1-bold ink:text-text-default ink:hover:bg-background-container",
+        }),
         className
       )}
       draggable={false}
@@ -43,11 +62,24 @@ export const InkNavLink: React.FC<InkNavLinkProps> = ({
       <Slottable child={children}>
         {(child) => (
           <>
-            {icon && <div className="ink:size-3 ink:p-0.5">{icon}</div>}
-            {child}
+            {leftIcon && <div className={iconClasses}>{leftIcon}</div>}
+            <div
+              className={classNames(
+                "ink:flex-1 ink:flex ink:items-center ink:justify-between",
+                variantClassNames(variant, {
+                  default: "ink:gap-1",
+                  mobile: "ink:gap-2",
+                })
+              )}
+            >
+              {child}
+              {rightIcon && <div className={iconClasses}>{rightIcon}</div>}
+            </div>
           </>
         )}
       </Slottable>
     </Component>
   );
 };
+
+InkNavLink.displayName = "InkNavLink";
diff --git a/src/layout/InkLayout/MobileNav/InkLayoutMobileNav.tsx b/src/layout/InkLayout/MobileNav/InkLayoutMobileNav.tsx
index bbf44d7..3793e24 100644
--- a/src/layout/InkLayout/MobileNav/InkLayoutMobileNav.tsx
+++ b/src/layout/InkLayout/MobileNav/InkLayoutMobileNav.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { InkLayoutLink, InkNavLink } from "../InkNavLink";
+import { InkIcon } from "../../..";
 
 export interface InkLayoutMobileNavProps {
   links: InkLayoutLink[];
@@ -16,7 +17,21 @@ export const InkLayoutMobileNav: React.FC<InkLayoutMobileNavProps> = ({
     <nav className="ink:h-full ink:w-full ink:p-3 ink:box-border ink:font-default ink:text-text-default ink:gap-4 ink:flex ink:flex-col ink:pb-4">
       <div className="ink:flex ink:flex-col ink:gap-1">
         {links.map((link) => {
-          return <InkNavLink {...link} key={link.href} onClick={onLinkClick} />;
+          return (
+            <InkNavLink
+              {...link}
+              key={link.href}
+              onClick={onLinkClick}
+              variant="mobile"
+              rightIcon={
+                typeof link.rightIcon === "undefined" ? (
+                  <InkIcon.Chevron className="ink:text-text-muted ink:rotate-270" />
+                ) : (
+                  link.rightIcon
+                )
+              }
+            />
+          );
         })}
       </div>
       <div className="ink:flex-1 ink:flex ink:flex-col ink:justify-end">
@@ -25,3 +40,5 @@ export const InkLayoutMobileNav: React.FC<InkLayoutMobileNavProps> = ({
     </nav>
   );
 };
+
+InkLayoutMobileNav.displayName = "InkLayoutMobileNav";
diff --git a/src/layout/InkLayout/index.ts b/src/layout/InkLayout/index.ts
index 38e1484..638b64d 100644
--- a/src/layout/InkLayout/index.ts
+++ b/src/layout/InkLayout/index.ts
@@ -1,5 +1,5 @@
 export * from "./InkLayout";
+export { useInkLayoutContext } from "./InkLayoutContext";
 export * from "./InkLayoutSideNav";
 export * from "./InkNavLink";
 export * from "./MobileNav";
-export { useInkLayoutContext } from "./InkLayoutContext";
diff --git a/src/layout/InkParts/InkHeader.tsx b/src/layout/InkParts/InkHeader.tsx
index 7608d80..8ec3f3b 100644
--- a/src/layout/InkParts/InkHeader.tsx
+++ b/src/layout/InkParts/InkHeader.tsx
@@ -24,3 +24,5 @@ export const InkHeader: React.FC<InkHeaderProps> = ({
     </div>
   );
 };
+
+InkHeader.displayName = "InkHeader";
diff --git a/src/layout/InkParts/InkPageLayout.tsx b/src/layout/InkParts/InkPageLayout.tsx
index 8ed4877..241ce76 100644
--- a/src/layout/InkParts/InkPageLayout.tsx
+++ b/src/layout/InkParts/InkPageLayout.tsx
@@ -25,3 +25,5 @@ export const InkPageLayout: React.FC<InkPageLayoutProps> = ({
     </div>
   );
 };
+
+InkPageLayout.displayName = "InkPageLayout";
diff --git a/src/layout/InkParts/InkPanel.tsx b/src/layout/InkParts/InkPanel.tsx
index 35252bb..dd3bafd 100644
--- a/src/layout/InkParts/InkPanel.tsx
+++ b/src/layout/InkParts/InkPanel.tsx
@@ -39,3 +39,5 @@ export const InkPanel = forwardRef<HTMLDivElement, InkPanelProps>(
     );
   }
 );
+
+InkPanel.displayName = "InkPanel";