diff --git a/src/components/checkbox-group/checkbox-group.properties.scss b/src/components/checkbox-group/checkbox-group.properties.scss
index 7cbe183..67310cd 100644
--- a/src/components/checkbox-group/checkbox-group.properties.scss
+++ b/src/components/checkbox-group/checkbox-group.properties.scss
@@ -18,6 +18,24 @@
   initial-value: transparent;
 };
 
+@property --lui-checkbox__border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #bdcee3;
+};
+
+@property --lui-checkbox__color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: inherit;
+};
+
+@property --lui-checkbox__background--hover {
+  syntax: "*";
+  inherits: true;
+  initial-value: #f7f9fc;
+};
+
 @property --lui-checkbox__background--active {
   syntax: "*";
   inherits: true;
diff --git a/src/components/checkbox-group/checkbox-group.scss b/src/components/checkbox-group/checkbox-group.scss
index 35542a7..d5819aa 100644
--- a/src/components/checkbox-group/checkbox-group.scss
+++ b/src/components/checkbox-group/checkbox-group.scss
@@ -13,6 +13,7 @@
     gap: 0.5rem;
     font-size: var(--lui-checkbox__font-size);
     cursor: pointer;
+    color: var(--lui-checkbox__color);
   }
 
   .lui-cg-item-checkbox {
@@ -23,7 +24,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    border: 1px solid #bdcee3;
+    border: 1px solid var(--lui-checkbox__border-color);
     position: relative;
     cursor: pointer;
     padding: 0;
@@ -35,7 +36,7 @@
   }
 
   .lui-cg-item-checkbox:where(:not([data-state=checked])):hover {
-    background-color: #f7f9fc;
+    background-color: var(--lui-checkbox__background--hover);
   }
 
   .lui-cg-item-checkbox-indicator {
diff --git a/src/components/pagination/pagination.properties.scss b/src/components/pagination/pagination.properties.scss
index 1fc848c..7ef000d 100644
--- a/src/components/pagination/pagination.properties.scss
+++ b/src/components/pagination/pagination.properties.scss
@@ -1,9 +1,15 @@
 @property --lui-pagination__select-border {
   syntax: '*';
-  inherits: false;
+  inherits: true;
   initial-value: 1px solid #bdcee3;
 }
 
+@property --lui-pagination__select-background {
+  syntax: '*';
+  inherits: true;
+  initial-value: white;
+}
+
 @property --lui-pagination__navigation-gap {
   syntax: "*";
   inherits: true;
diff --git a/src/components/pagination/pagination.scss b/src/components/pagination/pagination.scss
index 2b46792..ba88698 100644
--- a/src/components/pagination/pagination.scss
+++ b/src/components/pagination/pagination.scss
@@ -73,7 +73,7 @@
     min-height: 36px;
     border: var(--lui-pagination__select-border);
     border-radius: var(--lui-pagination__item-border-radius);
-    background: #fff;
+    background: var(--lui-pagination__select-background);
     cursor: pointer;
   }
 
diff --git a/src/components/product-card/product-card.stories.tsx b/src/components/product-card/product-card.stories.tsx
index af24ff4..598c240 100644
--- a/src/components/product-card/product-card.stories.tsx
+++ b/src/components/product-card/product-card.stories.tsx
@@ -376,8 +376,8 @@ export const Themes: Story = {
               '--lui-pc__btn-color': 'white',
               '--lui-pc__badge-background': '#CBC6E9',
               '--lui-pc__badge-color': 'rebeccapurple',
-              '--lui-swatch-btn-border-color-hover': '#666',
-              '--lui-swatch-btn-border-color-active': '#999',
+              '--lui-swatch__btn-border-color-hover': '#666',
+              '--lui-swatch__btn-border-color-active': '#999',
           } as CSSProperties}
         >
           <ProductCard.Root {...args}>
diff --git a/src/components/range/range.properties.scss b/src/components/range/range.properties.scss
index 8984401..bf67886 100644
--- a/src/components/range/range.properties.scss
+++ b/src/components/range/range.properties.scss
@@ -66,6 +66,18 @@
   initial-value: #bdcee3;
 };
 
+@property --lui-range__input-background {
+  syntax: "*";
+  inherits: true;
+  initial-value: transparent;
+};
+
+@property --lui-range__input-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: inherit;
+};
+
 @property --lui-range__btn-background {
   syntax: "*";
   inherits: true;
diff --git a/src/components/range/range.scss b/src/components/range/range.scss
index 12719ab..fa35bf6 100644
--- a/src/components/range/range.scss
+++ b/src/components/range/range.scss
@@ -54,6 +54,8 @@
     border: 1px solid var(--lui-range__input-border-color);
     border-radius: var(--lui-range__border-radius);
     width: 100%;
+    background: var(--lui-range__input-background);
+    color: var(--lui-range__input-color);
   }
 
   .lui-range-input-separator {
diff --git a/src/components/swatch-bar/__snapshots__/swatch-bar.spec.tsx.snap b/src/components/swatch-bar/__snapshots__/swatch-bar.spec.tsx.snap
index 61e7a9a..f71f650 100644
--- a/src/components/swatch-bar/__snapshots__/swatch-bar.spec.tsx.snap
+++ b/src/components/swatch-bar/__snapshots__/swatch-bar.spec.tsx.snap
@@ -26,7 +26,7 @@ exports[`SwatchBar > should render successfully 1`] = `
       data-state="off"
       disabled=""
       role="radio"
-      style="--lui-swatch-btn-border-color--active: crimson;"
+      style="--lui-swatch__btn--active-border-color: crimson;"
       tabindex="-1"
       type="button"
     >
@@ -43,7 +43,7 @@ exports[`SwatchBar > should render successfully 1`] = `
       data-radix-collection-item=""
       data-state="off"
       role="radio"
-      style="--lui-swatch-btn-border-color--active: rebeccapurple;"
+      style="--lui-swatch__btn--active-border-color: rebeccapurple;"
       tabindex="-1"
       type="button"
     >
@@ -60,7 +60,7 @@ exports[`SwatchBar > should render successfully 1`] = `
       data-radix-collection-item=""
       data-state="off"
       role="radio"
-      style="--lui-swatch-btn-border-color--active: gold;"
+      style="--lui-swatch__btn--active-border-color: gold;"
       tabindex="-1"
       type="button"
     >
diff --git a/src/components/swatch-bar/components/swatch-color.tsx b/src/components/swatch-bar/components/swatch-color.tsx
index fce296c..c019a1c 100644
--- a/src/components/swatch-bar/components/swatch-color.tsx
+++ b/src/components/swatch-bar/components/swatch-color.tsx
@@ -20,7 +20,7 @@ export const SwatchColor = forwardRef((
         {...rest}
         value={value}
         className={cn('lui-swatch-item lui-swatch-item--color', className)}
-        style={{'--lui-swatch-btn-border-color--active': color} as CSSProperties}
+        style={{'--lui-swatch__btn--active-border-color': color} as CSSProperties}
         ref={forwardedRef}
       >
         <div className="lui-swatch-color" style={{backgroundColor: color}}></div>
diff --git a/src/components/swatch-bar/swatch-bar.properties.scss b/src/components/swatch-bar/swatch-bar.properties.scss
index 2b3f2c0..3e15552 100644
--- a/src/components/swatch-bar/swatch-bar.properties.scss
+++ b/src/components/swatch-bar/swatch-bar.properties.scss
@@ -1,42 +1,60 @@
 @import url("../theme/theme.properties.scss");
 
-@property --lui-swatch-btn-bg-color {
-  syntax: "<color>";
+@property --lui-swatch__btn-background {
+  syntax: "*";
   inherits: true;
   initial-value: transparent;
 };
 
-@property --lui-swatch-btn-border-color {
+@property --lui-swatch__btn-border-color {
   syntax: "<color>";
   inherits: true;
   initial-value: transparent;
 };
 
-@property --lui-swatch-btn-border-color--hover {
+@property --lui-swatch__btn--text-border-color {
   syntax: "<color>";
   inherits: true;
-  initial-value: #8d9db9;
+  initial-value: #ccc;
 };
 
-@property --lui-swatch-btn--text-bg-color--hover {
+@property --lui-swatch__btn--text-color {
   syntax: "<color>";
   inherits: true;
-  initial-value: #e1e8f5;
+  initial-value: black;
 };
 
-@property --lui-swatch-btn--text-bg-color--active {
+@property --lui-swatch__btn-border-color--hover {
   syntax: "<color>";
   inherits: true;
+  initial-value: #8d9db9;
+};
+
+@property --lui-swatch__btn--text--hover-background {
+  syntax: "*";
+  inherits: true;
   initial-value: #e1e8f5;
 };
 
-@property --lui-swatch-btn-border-color--active {
+@property --lui-swatch__btn--text--active-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: white;
+};
+
+@property --lui-swatch__btn--text--active-bg-color {
+  syntax: "*";
+  inherits: true;
+  initial-value: #3e63dd;
+};
+
+@property --lui-swatch__btn--active-border-color {
   syntax: "<color>";
   inherits: true;
-  initial-value: #002840;
+  initial-value: white;
 };
 
-@property --lui-swatch-btn-padding {
+@property --lui-swatch__btn-padding {
   syntax: "*";
   inherits: true;
   initial-value: 0.2rem;
diff --git a/src/components/swatch-bar/swatch-bar.scss b/src/components/swatch-bar/swatch-bar.scss
index 2bf3979..2b1d8d5 100644
--- a/src/components/swatch-bar/swatch-bar.scss
+++ b/src/components/swatch-bar/swatch-bar.scss
@@ -24,9 +24,9 @@
   }
 
   .lui-swatch-item {
-    background: var(--lui-swatch-btn-bg-color);
-    border: 1px solid var(--lui-swatch-btn-border-color);
-    padding: var(--lui-swatch-btn-padding);
+    background: var(--lui-swatch__btn-background);
+    border: 1px solid var(--lui-swatch__btn-border-color);
+    padding: var(--lui-swatch__btn-padding);
     border-radius: 3px;
     cursor: pointer;
   }
@@ -36,22 +36,23 @@
   }
 
   .lui-swatch-item--image {
-    --lui-swatch-btn-padding: 0;
+    --lui-swatch__btn-padding: 0;
     margin: 0;
     line-height: 0;
   }
 
   .lui-swatch-item--text {
-    --lui-swatch-btn-border-color: #ccc;
-    --lui-swatch-btn-padding: 0.2rem 0.4rem;
+    --lui-swatch__btn-border-color: var(--lui-swatch__btn--text-border-color);
+    --lui-swatch__btn-padding: 0.2rem 0.4rem;
+    color: var(--lui-swatch__btn--text-color);
   }
 
   .lui-swatch-item[data-state="off"]:hover:not(:disabled), .lui-swatch-item[data-state="off"]:focus:not(:disabled) {
-    --lui-swatch-btn-border-color: var(--lui-swatch-btn-border-color--hover);
+    --lui-swatch__btn-border-color: var(--lui-swatch__btn-border-color--hover);
   }
 
   .lui-swatch-item--text[data-state="off"]:hover:not(:disabled) {
-    --lui-swatch-btn-bg-color: var(--lui-swatch-btn--text-bg-color--hover);
+    --lui-swatch__btn-background: var(--lui-swatch__btn--text--hover-background);
   }
 
   .lui-swatch-item:disabled {
@@ -62,10 +63,10 @@
 
   .lui-swatch-item:disabled:before {
     position: absolute;
-    top: var(--lui-swatch-btn-padding);
-    left: var(--lui-swatch-btn-padding);
-    right: var(--lui-swatch-btn-padding);
-    bottom: var(--lui-swatch-btn-padding);
+    top: var(--lui-swatch__btn-padding);
+    left: var(--lui-swatch__btn-padding);
+    right: var(--lui-swatch__btn-padding);
+    bottom: var(--lui-swatch__btn-padding);
     display: block;
     background-image: url('./disabled.svg');
     content: "";
@@ -73,12 +74,12 @@
   }
 
   .lui-swatch-item[data-state="on"] {
-    --lui-swatch-btn-border-color: var(--lui-swatch-btn-border-color--active);
+    --lui-swatch__btn-border-color: var(--lui-swatch__btn--active-border-color);
   }
 
   .lui-swatch-item--text[data-state="on"] {
-    color: var(--lui-swatch-btn-border-color--active);
-    --lui-swatch-btn-bg-color: var(--lui-swatch-btn--text-bg-color--hover);
+    color: var(--lui-swatch__btn--text--active-color);
+    --lui-swatch__btn-background: var(--lui-swatch__btn--text--active-bg-color);
   }
 
   .lui-swatch-item--image img {
diff --git a/src/components/tag/tag.types.ts b/src/components/tag/tag.types.ts
index 8459dc3..8482c60 100644
--- a/src/components/tag/tag.types.ts
+++ b/src/components/tag/tag.types.ts
@@ -1,6 +1,6 @@
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, HTMLAttributes } from 'react';
 
-export interface TagProps extends PropsWithChildren {
+export interface TagProps extends PropsWithChildren, HTMLAttributes<HTMLDivElement> {
   /**
    * Custom class name for the container of the component.
    */
diff --git a/src/components/theme/theme.properties.scss b/src/components/theme/theme.properties.scss
index a73b471..46e4e4f 100644
--- a/src/components/theme/theme.properties.scss
+++ b/src/components/theme/theme.properties.scss
@@ -27,3 +27,9 @@
   inherits: true;
   initial-value: #5e739c;
 }
+
+@property --lui-base__link-color {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: #002840;
+}
diff --git a/src/components/theme/theme.scss b/src/components/theme/theme.scss
index 5d4e3ad..61d23bf 100644
--- a/src/components/theme/theme.scss
+++ b/src/components/theme/theme.scss
@@ -11,4 +11,14 @@
     *,:after,:before {
         box-sizing: var(--lui-base__box-sizing);
     }
+
+    .lui-link {
+      text-decoration: none;
+      color: var(--lui-base__link-color);
+      border-bottom: 1px dashed var(--lui-base__link-color);
+
+      &:hover {
+        border-bottom-style: solid;
+      }
+    }
 }
diff --git a/src/components/theme/theme.stories.tsx b/src/components/theme/theme.stories.tsx
index 95ace9c..0929ea6 100644
--- a/src/components/theme/theme.stories.tsx
+++ b/src/components/theme/theme.stories.tsx
@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { useState, useMemo } from 'react';
 import { useArgs } from '@storybook/preview-api';
-import { StarFilledIcon } from '@radix-ui/react-icons';
+import { AccessibilityIcon, ColorWheelIcon, MixIcon, StarFilledIcon } from '@radix-ui/react-icons';
 
 import { ProductCard } from '../product-card';
 import { SwatchBar } from '../swatch-bar';
@@ -74,13 +74,59 @@ const product = {
 };
 
 const themes = {
-  'default': {},
+  'default': {
+    borderRadius: '6px',
+    border: '2px solid gold',
+  },
+  'dark 🌙': {
+    '--lui-base__subtl-color': 'lime',
+    '--lui-checkbox__background--active': 'lime',
+    '--lui-checkbox__indicator-color': 'black',
+    '--lui-cg__overflow-trigger-color': 'lime',
+    '--lui-checkbox__color': 'white',
+    '--lui-checkbox__border-color': 'lime',
+    '--lui-checkbox__background--hover': '#0c2707',
+    '--lui-pc__box-shadow': '0 4px 9px 0 rgba(68, 214, 44, 0.15), 0 17px 17px 0 rgba(68, 214, 44, 0.12), 0 38px 23px 0 rgba(68, 214, 44, 0.08), 0 68px 27px 0 rgba(68, 214, 44, 0.04), 0 107px 30px 0 rgba(68, 214, 44, 0.01)',
+    '--lui-pc__btn-background': 'lime',
+    '--lui-pc__btn-border-color': 'lime',
+    '--lui-pc__btn-color': 'black',
+    '--lui-range__slider-range-background': 'lime',
+    '--lui-range__slider-control-background': 'lime',
+    '--lui-range__btn-background': 'lime',
+    '--lui-range__btn-color': 'black',
+    '--lui-range__btn-border-color': 'lime',
+    '--lui-range__input-border-color': 'lime',
+    '--lui-range__input-color': 'lime',
+    '--lui-tag__bg': 'lime',
+    '--lui-tag__color': 'black',
+    '--lui-swatch__btn-background': 'black',
+    '--lui-swatch__btn--text-color': 'lime',
+    '--lui-swatch__btn--text--hover-background': '#0c2707',
+    '--lui-pagination__item-background--active': 'lime',
+    '--lui-pagination__item-color': 'lime',
+    '--lui-pagination__item-color--active': 'black',
+    '--lui-pagination__item-background--hover': '#0c2707',
+    '--lui-pagination__select-background': 'lime',
+    '--lui-pagination__select-border': '1px solid lime',
+    '--lui-swatch__btn-border-color--hover': 'lime',
+    '--lui-swatch__btn--active-border-color': 'lime',
+    '--lui-swatch__btn--text-border-color': 'lime',
+    '--lui-swatch__btn--text--active-bg-color': 'lime',
+    '--lui-swatch__btn--text--active-color': 'black',
+    background: 'black',
+    color: 'white',
+    borderRadius: '6px',
+    border: '2px solid lime',
+  },
   'purple 🦄': {
+    borderRadius: '6px',
+    border: '2px solid rebeccapurple',
     '--lui-checkbox__background--active': 'rebeccapurple',
     '--lui-cg__overflow-trigger-color': 'rebeccapurple',
     '--lui-pc__btn-background': 'rebeccapurple',
     '--lui-pc__btn-border-color': 'rebeccapurple',
     '--lui-pc__btn-color': 'white',
+    '--lui-swatch__btn--text--active-bg-color': 'rebeccapurple',
     '--lui-range__slider-range-background': 'rebeccapurple',
     '--lui-range__slider-control-background': 'rebeccapurple',
     '--lui-range__btn-background': 'rebeccapurple',
@@ -91,9 +137,15 @@ const themes = {
     '--lui-pagination__item-background--active': 'rebeccapurple',
   },
   'rainbow 🌈': {
+    borderRadius: '6px',
+    border: '2px solid transparent',
+    backgroundImage: 'linear-gradient(white, white), linear-gradient( 226.4deg,  rgba(255,26,1,1) 28.9%, rgba(254,155,1,1) 33%, rgba(255,241,0,1) 48.6%, rgba(34,218,1,1) 65.3%, rgba(0,141,254,1) 80.6%, rgba(113,63,254,1) 100.1% )',
+    backgroundOrigin: 'border-box',
+    backgroundClip: 'content-box, border-box',
     '--lui-base__font-family': 'Comic Sans MS, Textile, Cursive',
     '--lui-checkbox__background--active': 'linear-gradient( 226.4deg,  rgba(255,26,1,1) 28.9%, rgba(254,155,1,1) 33%, rgba(255,241,0,1) 48.6%, rgba(34,218,1,1) 65.3%, rgba(0,141,254,1) 80.6%, rgba(113,63,254,1) 100.1% )',
     '--lui-pc__btn-background': 'linear-gradient( 226.4deg,  rgba(255,26,1,1) 28.9%, rgba(254,155,1,1) 33%, rgba(255,241,0,1) 48.6%, rgba(34,218,1,1) 65.3%, rgba(0,141,254,1) 80.6%, rgba(113,63,254,1) 100.1% )',
+    '--lui-swatch__btn--text--active-bg-color': 'linear-gradient( 226.4deg,  rgba(255,26,1,1) 28.9%, rgba(254,155,1,1) 33%, rgba(255,241,0,1) 48.6%, rgba(34,218,1,1) 65.3%, rgba(0,141,254,1) 80.6%, rgba(113,63,254,1) 100.1% )',
     '--lui-range__slider-range-background': 'linear-gradient( 226.4deg,  rgba(255,26,1,1) 28.9%, rgba(254,155,1,1) 33%, rgba(255,241,0,1) 48.6%, rgba(34,218,1,1) 65.3%, rgba(0,141,254,1) 80.6%, rgba(113,63,254,1) 100.1% )',
     '--lui-range__slider-control-background': 'linear-gradient( 226.4deg,  rgba(255,26,1,1) 28.9%, rgba(254,155,1,1) 33%, rgba(255,241,0,1) 48.6%, rgba(34,218,1,1) 65.3%, rgba(0,141,254,1) 80.6%, rgba(113,63,254,1) 100.1% )',
     '--lui-range__btn-background': 'linear-gradient( 226.4deg,  rgba(255,26,1,1) 28.9%, rgba(254,155,1,1) 33%, rgba(255,241,0,1) 48.6%, rgba(34,218,1,1) 65.3%, rgba(0,141,254,1) 80.6%, rgba(113,63,254,1) 100.1% )',
@@ -132,10 +184,10 @@ export const Basic: Story = {
     return (
       <div>
         <Theme style={{margin: '0 0 1rem 0', display: 'flex', flexDirection: 'column', gap: '1rem'}}>
-          <div style={{fontSize: '1.1rem', padding: '1rem'}}>
-            <div style={{margin: '0 1rem 0.5rem'}}>
-              <span style={{background: 'gold', padding: '0.25rem', borderRadius: '6px', fontWeight: 600}}>Accessibility</span> {' '}
-              and <span style={{background: 'gold', padding: '0.25rem', borderRadius: '6px', fontWeight: 600}}>internationalization (i18n)</span> supported out of the box
+          <div style={{fontSize: '0.875rem', padding: '1rem', border: '2px solid gold', borderRadius: '6px'}}>
+            <div style={{display: 'inline-flex', gap: '0.25rem', alignItems: 'center'}}>
+              <Tag style={{display: 'inline-block'}}>Accessibility <AccessibilityIcon /></Tag> {' '}
+              and <Tag style={{display: 'inline-block'}}>internationalization (i18n)</Tag> supported out of the box
             </div>
             <div style={{display: 'flex', gap: '1rem', flexWrap: 'wrap', width: '100%', padding: '0 1rem 1rem', fontSize: '0.875rem'}}>
               <div>
@@ -148,7 +200,7 @@ export const Basic: Story = {
               </div>
 
               <div>
-                <div style={{margin: '0.5rem 0'}}><b>currency</b> {args.currency}</div>
+                <div style={{margin: '0.5rem 0'}}><b>currency</b></div>
                 <SwatchBar.Root>
                   <SwatchBar.SwatchGroup value={args.currency} onValueChange={(newCurrency) => updateArgs({currency: newCurrency})}>
                     {currencies.map(cur => <SwatchBar.SwatchText key={cur} value={cur}>{cur}</SwatchBar.SwatchText>)}
@@ -165,18 +217,16 @@ export const Basic: Story = {
                 </SwatchBar.Root>
               </div>
             </div>
-            <div style={{margin: '0 1rem 1rem'}}>
-              <span style={{background: 'gold', padding: '0.25rem', borderRadius: '6px', fontWeight: 600, display: 'inline-block'}}>
-                Optional theme
-                <SwatchBar.Root style={{display: 'inline-block', marginLeft: '0.5rem', '--lui-swatch-btn-bg-color': 'white', borderRadius: '6px'}  as CSSProperties}>
+            <div style={{margin: '0 0 1rem', display: 'inline-flex', gap: '0.25rem', alignItems: 'center'}}>
+              <Tag style={{display: 'inline-block'}}>Optional theme <ColorWheelIcon /></Tag> {' ('}
+                <SwatchBar.Root style={{display: 'inline-block', marginLeft: '0.5rem', '--lui-swatch__btn-background': 'white', borderRadius: '6px'}  as CSSProperties}>
                   <SwatchBar.SwatchGroup value={args.disableStyles ? 'true' : 'false'} onValueChange={(newDisableStyles) => updateArgs({disableStyles: newDisableStyles === 'true'})}>
                     <SwatchBar.SwatchText value={'false'}>On</SwatchBar.SwatchText>
                     <SwatchBar.SwatchText value={'true'}>Off</SwatchBar.SwatchText>
                   </SwatchBar.SwatchGroup>
                 </SwatchBar.Root>
-              </span>
-              {' '}
-              that can be customized with CSS variables
+              {') '}
+              that can be customized with CSS variables:
               {' '}
               <SwatchBar.Root style={{display: 'inline-block', marginLeft: '0.5rem'}}>
                 <SwatchBar.SwatchGroup value={showcaseTheme} onValueChange={setShowcaseTheme}>
@@ -185,22 +235,21 @@ export const Basic: Story = {
               </SwatchBar.Root>
             </div>
 
-            <div style={{margin: '0 1rem', lineHeight: '1.5'}}>
-              <span style={{background: 'gold', padding: '0.25rem', borderRadius: '6px', fontWeight: 600}}>Composable architecture</span>, mixin with your own components or just use the hooks and BYOC (bring your own components).
+            <div style={{margin: '0 0 1rem', display: 'inline-flex', gap: '0.25rem', alignItems: 'center'}}>
+              <Tag style={{display: 'inline-block'}}>Composable architecture <MixIcon /></Tag>, mixin with your own components or just use the hooks and BYOC (bring your own components).
             </div>
-            <div style={{margin: '0 1rem', lineHeight: '1.5', fontSize: '0.9rem'}}>
-              Try it out on our <a href="https://github.com/bloomreach/web-code-samples" target="_blank" rel="noreferrer">web code samples</a>{' '}
-              (Eg., <a href="https://codesandbox.io/p/sandbox/github/bloomreach/web-code-samples/tree/main/examples/facets" target="_blank" rel="noreferrer">Facets</a>, <a href="https://stackblitz.com/github/bloomreach/web-code-samples/tree/main/examples/pixel" target="_blank" rel="noreferrer">Storefront with pixel instrumentation</a>)
+            <div>
+              Try it out on our <a className="lui-link" href="https://github.com/bloomreach/web-code-samples" target="_blank" rel="noreferrer">web code samples</a>{' '}
+              (Eg., <a className="lui-link" href="https://codesandbox.io/p/sandbox/github/bloomreach/web-code-samples/tree/main/examples/facets" target="_blank" rel="noreferrer">Facets</a>, <a className="lui-link" href="https://stackblitz.com/github/bloomreach/web-code-samples/tree/main/examples/pixel" target="_blank" rel="noreferrer">Storefront with pixel instrumentation</a>)
             </div>
           </div>
         </Theme>
-        <hr />
         <div>
           <Theme {...args} style={themeStyles}>
-            <div style={{display: 'flex', gap: '0.5rem', padding: '0 2rem'}}>
+            <div style={{display: 'flex', gap: '0.5rem', padding: '1rem 2rem 0.5rem'}}>
               <div style={{flexGrow: 1}}></div>
               <div style={{display: 'flex', gap: '0.5rem'}}>
-                <div style={{fontSize: '0.875rem', opacity: 0.5, margin: '0.5rem 0'}}>Sort by</div>
+                <div style={{fontSize: '0.875rem', margin: '0.5rem 0', color: 'var(--lui-base__subtl-color)'}}>Sort by</div>
                 <SwatchBar.Root>
                   <SwatchBar.SwatchGroup value={sort} onValueChange={setSort}>
                     <SwatchBar.SwatchText value="relevance">Best Match</SwatchBar.SwatchText>
@@ -483,7 +532,7 @@ export const Basic: Story = {
                 count={1000000} page={page} itemsPerPage={itemsPerPage}
                 onPageChange={setPage}
                 onItemsPerPageChange={setItemsPerPage}
-                style={{marginBottom: '1rem'}}
+                style={{padding: '0.5rem 1rem'}}
               >
                 <Pagination.Overview>
                   <Pagination.Summary />
@@ -493,6 +542,7 @@ export const Basic: Story = {
                 count={1000000} page={page} itemsPerPage={itemsPerPage}
                 onPageChange={setPage}
                 onItemsPerPageChange={setItemsPerPage}
+                style={{padding: '0.5rem 1rem 1rem'}}
               >
                 <Pagination.Overview>
                   <Pagination.ItemsPerPageSelector />