diff --git a/app/_components/ui/button.tsx b/app/_components/ui/button.tsx
index 1f2a016..5edc78a 100644
--- a/app/_components/ui/button.tsx
+++ b/app/_components/ui/button.tsx
@@ -6,46 +6,48 @@ import { type VariantProps, cva } from 'class-variance-authority';
 import { cn } from "@/app/_utils/cn";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium transition-colors outline-offset-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring/70 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
-        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-        outline: 'border border-input bg-background  hover:border-neutral-200 dark:hover:bg-neutral-900',
-        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 hover:underline',
+        default: "bg-primary text-primary-foreground shadow-sm shadow-black/5 hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm shadow-black/5 hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm shadow-black/5 hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm shadow-black/5 hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
-        default: 'h-10 px-4 py-2',
-        sm: 'h-9 rounded-md px-3',
-        lg: 'h-11 rounded-md px-8',
-        icon: 'h-10 w-10',
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-lg px-3 text-xs",
+        lg: "h-10 rounded-lg px-8",
+        icon: "h-9 w-9",
       },
     },
     defaultVariants: {
-      variant: 'default',
-      size: 'default',
+      variant: "default",
+      size: "default",
     },
   },
-)
+);
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
   VariantProps<typeof buttonVariants> {
-  asChild?: boolean
+  asChild?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : 'button'
+    const Comp = asChild ? Slot : "button";
     return (
       <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
-    )
+    );
   },
-)
-Button.displayName = 'Button'
+);
+Button.displayName = "Button";
 
 export { Button, buttonVariants };
-
diff --git a/content/en/glossary/aria-attributes.mdx b/content/en/glossary/aria-attributes.mdx
index 3643df8..c1b6d1c 100644
--- a/content/en/glossary/aria-attributes.mdx
+++ b/content/en/glossary/aria-attributes.mdx
@@ -36,4 +36,3 @@ ARIA (Accessible Rich Internet Applications) attributes are HTML attributes that
 ## Related Patterns
 
 - [Pagination](/patterns/navigation/pagination)
-- [Navigation Patterns](/patterns/navigation)
diff --git a/content/en/pattern-guide/choosing-input-types.mdx b/content/en/pattern-guide/choosing-input-types.mdx
index 7fb5f07..3fb70e2 100644
--- a/content/en/pattern-guide/choosing-input-types.mdx
+++ b/content/en/pattern-guide/choosing-input-types.mdx
@@ -33,7 +33,7 @@ import { PatternNextSteps } from "@app/_components/pattern-comparison/pattern-ne
   <DecisionFlowSection nodes={inputTypeNodes} edges={inputTypeEdges} title="Input Types Decision Flow" />
   <ComparisonGrid patterns={comparisonData.patterns} />
   <ImplementationMetrics patterns={implementationData.patterns} />
-  <ExamplesGrid examples={examplesData.examples} />
+  {/* <ExamplesGrid examples={examplesData.examples} /> */}
   <PatternNextSteps patterns={nextStepsData.patterns} />
 </div>
 
@@ -399,17 +399,17 @@ export const nextStepsData = {
     {
       title: "Text Input Implementation",
       description: "How to implement and style text inputs",
-      href: "/patterns/forms/text-input",
+      href: "/patterns/forms/text-field",
     },
     {
       title: "Select Component Guide",
       description: "Building accessible select components",
-      href: "/patterns/forms/select",
+      href: "/patterns/forms/selection-input",
     },
     {
-      title: "Radio & Checkbox Patterns",
+      title: "Radio Pattern",
       description: "Best practices for option selection",
-      href: "/patterns/forms/radio-checkbox",
+      href: "/patterns/forms/radio",
     },
   ],
 };
diff --git a/content/en/patterns/forms/button.mdx b/content/en/patterns/forms/button.mdx
index 873a95c..89869b4 100644
--- a/content/en/patterns/forms/button.mdx
+++ b/content/en/patterns/forms/button.mdx
@@ -8,6 +8,10 @@ status: complete
 import { BrowserSupport } from "@app/_components/browser-support";
 import { BuildEffort } from "@app/_components/build-effort";
 import { FaqStructuredData } from "@app/_components/faq-structured-data";
+import {
+  ButtonTextOnly,
+  ButtonWithIcon,
+} from "@app/_components/variations/buttons";
 
 # Button
 
@@ -137,17 +141,11 @@ end
 
 1. **Text Only**
 
-   ```html
-   <button type="button">Button</button>
-   ```
+<ButtonTextOnly />
 
 2. **Icon Only**
 
-   ```html
-   <button type="button" aria-label="Settings">
-     <svg aria-hidden="true">...</svg>
-   </button>
-   ```
+<ButtonWithIcon />
 
 3. **Icon + Text**
 
diff --git a/content/en/patterns/forms/input-selection-guide.mdx b/content/en/patterns/forms/input-selection-guide.mdx
index 711adf4..63167ad 100644
--- a/content/en/patterns/forms/input-selection-guide.mdx
+++ b/content/en/patterns/forms/input-selection-guide.mdx
@@ -4,7 +4,9 @@ description: "Learn how to select the most appropriate input types for your web
 icon: Text
 ---
 
-### When to use Different Types of Text Fields?
+# Input Selection Guide
+
+## When to use Different Types of Text Fields?
 
 ```mermaid
 graph TD
diff --git a/content/en/patterns/forms/password.mdx b/content/en/patterns/forms/password.mdx
index 41adf86..c3717f1 100644
--- a/content/en/patterns/forms/password.mdx
+++ b/content/en/patterns/forms/password.mdx
@@ -141,8 +141,6 @@ Password fields are commonly used in **authentication forms, account creation, a
 ## Related Patterns
 
 - [Text Field](/patterns/forms/text-field) – Standard input for non-sensitive text.
-- [Two-Factor Authentication](/patterns/security/2fa) – Additional authentication layer.
-- [Security Best Practices](/patterns/security/best-practices) – Guidelines for secure input handling.
 
 ## Frequently Asked Questions