diff --git a/package-lock.json b/package-lock.json
index faf489a5..3b6c8825 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3586,14 +3586,14 @@
       }
     },
     "node_modules/@storybook/builder-vite": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/@storybook/builder-vite/-/builder-vite-0.4.0.tgz",
-      "integrity": "sha512-UJQMkbY/IeJooKkTIKskd5D9okRwVDhUnVGYRvJ4QOnjJ8kJroveFgw2Tm10vEoLbqVHufMG55k5Kes4xzQrUQ==",
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@storybook/builder-vite/-/builder-vite-0.4.2.tgz",
+      "integrity": "sha512-KBBiDdYCK0BCOns8iCVrtzaIiYQF9NjwQ7u3HY/a0bmAuaXPd9m3t6Tvp2jNwmdRAtHOHXnM+d6ROJAI77DCYg==",
       "dev": true,
       "dependencies": {
         "@joshwooding/vite-plugin-react-docgen-typescript": "0.2.1",
         "@storybook/core-common": "^6.4.3",
-        "@storybook/mdx1-csf": "^1.0.0-next.0",
+        "@storybook/mdx1-csf": "1.0.0-next.0",
         "@storybook/node-logger": "^6.4.3",
         "@storybook/semver": "^7.3.2",
         "@storybook/source-loader": "^6.4.3",
@@ -3610,6 +3610,7 @@
         "@storybook/mdx2-csf": ">=1.0.0-next.0",
         "@sveltejs/vite-plugin-svelte": "^2.0.0",
         "@vitejs/plugin-react": "^3.0.0",
+        "@vitejs/plugin-react-swc": "^3.0.0",
         "@vitejs/plugin-vue": "^4.0.0",
         "vite": ">= 4.0.0",
         "vue-docgen-api": "^4.40.0"
@@ -3621,6 +3622,12 @@
         "@sveltejs/vite-plugin-svelte": {
           "optional": true
         },
+        "@vitejs/plugin-react": {
+          "optional": true
+        },
+        "@vitejs/plugin-react-swc": {
+          "optional": true
+        },
         "@vitejs/plugin-vue": {
           "optional": true
         },
@@ -20833,7 +20840,7 @@
         "@storybook/addon-interactions": "^6.5.16",
         "@storybook/addon-links": "^6.5.16",
         "@storybook/addon-styling": "^0.3.2",
-        "@storybook/builder-vite": "^0.4.0",
+        "@storybook/builder-vite": "^0.4.2",
         "@storybook/html": "^6.5.16",
         "@storybook/testing-library": "^0.0.13",
         "@whitespace/storybook-addon-html": "^5.1.1",
@@ -22263,7 +22270,7 @@
         "@storybook/addon-interactions": "^6.5.16",
         "@storybook/addon-links": "^6.5.16",
         "@storybook/addon-styling": "^0.3.2",
-        "@storybook/builder-vite": "^0.4.0",
+        "@storybook/builder-vite": "^0.4.2",
         "@storybook/html": "^6.5.16",
         "@storybook/testing-library": "^0.0.13",
         "@whitespace/storybook-addon-html": "^5.1.1",
@@ -23260,14 +23267,14 @@
       }
     },
     "@storybook/builder-vite": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/@storybook/builder-vite/-/builder-vite-0.4.0.tgz",
-      "integrity": "sha512-UJQMkbY/IeJooKkTIKskd5D9okRwVDhUnVGYRvJ4QOnjJ8kJroveFgw2Tm10vEoLbqVHufMG55k5Kes4xzQrUQ==",
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@storybook/builder-vite/-/builder-vite-0.4.2.tgz",
+      "integrity": "sha512-KBBiDdYCK0BCOns8iCVrtzaIiYQF9NjwQ7u3HY/a0bmAuaXPd9m3t6Tvp2jNwmdRAtHOHXnM+d6ROJAI77DCYg==",
       "dev": true,
       "requires": {
         "@joshwooding/vite-plugin-react-docgen-typescript": "0.2.1",
         "@storybook/core-common": "^6.4.3",
-        "@storybook/mdx1-csf": "^1.0.0-next.0",
+        "@storybook/mdx1-csf": "1.0.0-next.0",
         "@storybook/node-logger": "^6.4.3",
         "@storybook/semver": "^7.3.2",
         "@storybook/source-loader": "^6.4.3",
diff --git a/packages/styles/.storybook/main.cjs b/packages/styles/.storybook/main.cjs
index 1d6a0864..5f51b1f0 100644
--- a/packages/styles/.storybook/main.cjs
+++ b/packages/styles/.storybook/main.cjs
@@ -9,7 +9,6 @@ module.exports = {
       name: "@storybook/addon-essentials",
       options: {
         backgrounds: false,
-        docs: false,
         measure: false,
         outline: false,
       }
@@ -23,7 +22,7 @@ module.exports = {
       },
     },
     "@storybook/addon-interactions",
-    "@storybook/addon-links",
+    "@storybook/addon-links"
   ],
   "staticDirs": [
     "../dist",
diff --git a/packages/styles/.storybook/preview.cjs b/packages/styles/.storybook/preview.cjs
index 69ea9dd1..188b64f8 100644
--- a/packages/styles/.storybook/preview.cjs
+++ b/packages/styles/.storybook/preview.cjs
@@ -51,6 +51,10 @@ export const parameters = {
       disable: true,
     },
   },
+  previewTabs: {
+    canvas: { hidden: true },
+    'storybook/docs/panel': { hidden: true }
+  },
   viewport: {
     viewports: CUSTOM_VIEWPORTS,
   },
diff --git a/packages/styles/package.json b/packages/styles/package.json
index cb10ec68..89bef53e 100644
--- a/packages/styles/package.json
+++ b/packages/styles/package.json
@@ -23,7 +23,7 @@
     "@storybook/addon-interactions": "^6.5.16",
     "@storybook/addon-links": "^6.5.16",
     "@storybook/addon-styling": "^0.3.2",
-    "@storybook/builder-vite": "^0.4.0",
+    "@storybook/builder-vite": "^0.4.2",
     "@storybook/html": "^6.5.16",
     "@storybook/testing-library": "^0.0.13",
     "@whitespace/storybook-addon-html": "^5.1.1",
diff --git a/packages/styles/src/components/button/button.md b/packages/styles/src/components/button/button.md
new file mode 100644
index 00000000..2ee12fc3
--- /dev/null
+++ b/packages/styles/src/components/button/button.md
@@ -0,0 +1,26 @@
+# Button
+
+**Variants**
+- Default
+- Square
+- Floating Action
+- Call-to-Action
+
+**Color**
+- Primary
+- Secondary
+- Danger
+
+**Fill**
+- Solid
+- Outline
+- Ghost
+
+### Components Affected
+
+1. Input Group
+2. Breadcrumb
+3. Form Inputs
+4. File Upload (Button Focus)
+5. Drawer (Button Focus)
+6. Banner (`_mixin.scss`)
\ No newline at end of file
diff --git a/packages/styles/src/components/button/button.stories.js b/packages/styles/src/components/button/button.stories.js
index d62e95f1..bfbfaf16 100644
--- a/packages/styles/src/components/button/button.stories.js
+++ b/packages/styles/src/components/button/button.stories.js
@@ -1,65 +1,172 @@
 export default {
   title: 'Patterns/Button',
-  argType: {
-    className: { control: 'text' }
+  parameters: {
+    layout: 'centered',
   },
+  argTypes: {
+    disabled: {
+      name: 'Disabled',
+      description: 'When `[disabled="true"]` attribute is present, specifies that the button should be disabled. A disabled button is unusable and un-clickable.',
+      control: 'boolean'
+    }
+  }
 };
 
-const Template = ({ className }) => {
-  return `
-    <button class="${className}">
-      <i class="fas fa-clipboard-check"></i>
-      vet passenger
-    </button>
-  `;
-};
+const setBtnFill = (color, fill) => {
+  const btnColor = `cbp-btn__${color}`
 
-export const Primary = Template.bind({});
-Primary.args = {
-  className: 'cbp-btn cbp-btn__primary'
-};
+  if (fill === 'solid') {
+    return btnColor;
+  } else {
+    return `${btnColor}-${fill}`
+  }
+}
 
-export const PrimaryOutline = Template.bind({});
-PrimaryOutline.args = {
-  className: 'cbp-btn cbp-btn__primary--outline'
-};
-
-export const PrimaryGhost = Template.bind({});
-PrimaryGhost.args = {
-  className: 'cbp-btn cbp-btn__primary--ghost'
-};
+const Template = ({ variant, color, fill, label, disabled, type, ariaLabel }) => (
+  `
+    <button
+      class="${variant === 'default' ? 'cbp-btn' : 'cbp-btn-square'} ${setBtnFill(color, fill)}"
+      type=${type}
+      ${disabled ? "disabled='true'" : ''}
+      ${variant === 'default' ? '' : 'aria-label=' + ariaLabel}
+    >
+      <i class="fas fa-clipboard-check"></i>
+      ${variant === 'default' ? label : ''}
+    </button>
+  `
+);
 
-export const Secondary = Template.bind({});
-Secondary.args = {
-  className: 'cbp-btn cbp-btn__secondary'
-};
+const FloatingActionTemplate = ({ color, disabled, ariaLabel }) => (
+  `
+    <button 
+      class="cbp-btn cbp-btn__${color}-float"
+      type="button"
+      aria-label="${ariaLabel}"
+      ${disabled ? "disabled='true'" : ''}
+    >
+      <i class="fas fa-arrow-up"></i>
+    </button>
+  `
+)
 
-export const SecondaryOutline = Template.bind({});
-SecondaryOutline.args = {
-  className: 'cbp-btn cbp-btn__secondary--outline'
-};
+const CTATemplate = ({ label, disabled, type }) => (
+  `
+    <button
+      class="cbp-btn-cta cbp-btn__primary"
+      type=${type}
+      ${disabled ? "disabled='true'" : ''}
+    >
+      <i class="fas fa-clipboard-check"></i>
+      ${label}
+    </button>
+  `
+);
 
-export const SecondaryGhost = Template.bind({});
-SecondaryGhost.args = {
-  className: 'cbp-btn cbp-btn__secondary--ghost'
+export const Default = Template.bind({});
+Default.args = {
+  variant: 'default',
+  color: 'primary',
+  fill: 'solid',
+  label: 'Default',
+  type: 'button',
+  disabled: false,
+  ariaLabel: ''
 };
+Default.argTypes = {
+  variant: {
+    name: 'Button Variant',
+    description: 'Choose button variant',
+    control: 'radio',
+    options: ['default', 'square']
+  },
+  label: {
+    name: 'Button Label',
+    description: 'Label text in the `<button>` element and used to describe the action when clicked.',
+    control: 'text'
+  },
+  color: {
+    name: 'Button Color',
+    description: '`primary` is generally the dominant action among their peer buttons, `secondary` is the most common to appear but is not the dominant action over its peers, `danger` can indicate an action that cannot easily be undone.',
+    control: 'radio',
+    options: [
+      'primary',
+      'secondary',
+      'danger'
+    ]
+  },
+  fill: {
+    name: 'Button Fill',
+    description: 'Displays button fill in the overall button hierarchy. Available options are: `Solid`, `Outline` and `Ghost`.',
+    control: 'select',
+    options: [
+      'solid',
+      'outline',
+      'ghost'
+    ],
+  },
+  type: {
+    name: 'Button Type Attribute',
+    description: 'The `type` attribute sets the default behavior of the button',
+    defaultValue: 'button',
+    control: 'radio',
+    options: [
+      'submit',
+      'reset',
+      'button'
+    ]
+  },
+  ariaLabel: { 
+    name: 'Aria Label Attribute',
+    description: 'When a button displays an icon without a label, `aria-label` should be set to define the accessible label.',
+    control: 'text'
+  }
+}
 
-export const Danger = Template.bind({});
-Danger.args = {
-  className: 'cbp-btn cbp-btn__danger'
+export const FloatingActionButton = FloatingActionTemplate.bind({});
+FloatingActionButton.args = {
+  color: 'primary',
+  ariaLabel: 'back to top',
+  disabled: false
 };
+FloatingActionButton.argTypes = {
+  color: {
+    name: 'Button Color',
+    description: 'The floating action button is reserved for actions that must be accessible above all other content because of the nature of what they do.',
+    control: 'radio',
+    options: [
+      'primary',
+      'secondary'
+    ]
+  },
+  ariaLabel: { 
+    name: 'Aria Label Attribute',
+    description: 'When a button displays an icon without a label, `aria-label` should be set to define the accessible label.',
+    control: 'text'
+  }
+}
+FloatingActionButton.storyName = 'Floating Action';
 
-export const DangerOutline = Template.bind({});
-DangerOutline.args = {
-  className: 'cbp-btn cbp-btn__danger--outline'
+export const CTAButton = CTATemplate.bind({});
+CTAButton.args = {
+  label: 'Call-To-Action',
+  disabled: false
 };
-
-export const DangerGhost = Template.bind({});
-DangerGhost.args = {
-  className: 'cbp-btn cbp-btn__danger--ghost'
+CTAButton.argTypes = {
+  label: {
+    name: 'Button Label',
+    description: 'Label text in the `<button>` element and used to describe the action when clicked. There should be no more than one of these on any given page, **CTA buttons are not part of a group and should be the only option given**.',
+    control: 'text'
+  },
+  type: {
+    name: 'Button Type Attribute',
+    description: 'The `type` attribute sets the default behavior of the button',
+    defaultValue: 'button',
+    control: 'radio',
+    options: [
+      'submit',
+      'reset',
+      'button'
+    ]
+  },
 };
-
-export const CTAButton = Template.bind({});
-CTAButton.args = {
-  className: 'cbp-btn cbp-btn__cta'
-};
\ No newline at end of file
+CTAButton.storyName = 'Call-To-Action';
\ No newline at end of file
diff --git a/packages/styles/src/components/button/square.stories.js b/packages/styles/src/components/button/square.stories.js
deleted file mode 100644
index ebb682e6..00000000
--- a/packages/styles/src/components/button/square.stories.js
+++ /dev/null
@@ -1,69 +0,0 @@
-export default {
-  title: 'Patterns/Button',
-  argType: {
-    className: { control: 'text' },
-  },
-};
-
-const Template = ({ className }) => {
-  return `
-    <button class="${className}">
-      <i class="fas fa-clipboard-check"></i>
-    </button>
-  `;
-};
-
-export const PrimarySquare = Template.bind({});
-PrimarySquare.args = {
-  className: 'cbp-btn cbp-btn__square cbp-btn__square-primary',
-};
-
-export const PrimaryOutlineSquare = Template.bind({});
-PrimaryOutlineSquare.args = {
-  className: 'cbp-btn cbp-btn__square cbp-btn__square-primary--outline',
-};
-
-export const PrimaryGhostSquare = Template.bind({});
-PrimaryGhostSquare.args = {
-  className: 'cbp-btn cbp-btn__square cbp-btn__square-primary--ghost',
-};
-
-export const SecondarySquare = Template.bind({});
-SecondarySquare.args = {
-  className: 'cbp-btn cbp-btn__square cbp-btn__square-secondary',
-};
-
-export const SecondaryOutlineSquare = Template.bind({});
-SecondaryOutlineSquare.args = {
-  className: 'cbp-btn cbp-btn__square cbp-btn__square-secondary--outline',
-};
-
-export const SecondaryGhostSquare = Template.bind({});
-SecondaryGhostSquare.args = {
-  className: 'cbp-btn cbp-btn__square cbp-btn__square-secondary--ghost',
-};
-
-export const DangerSquare = Template.bind({});
-DangerSquare.args = {
-  className: 'cbp-btn cbp-btn__square cbp-btn__square-danger',
-};
-
-export const DangerOutlineSquare = Template.bind({});
-DangerOutlineSquare.args = {
-  className: 'cbp-btn cbp-btn__square cbp-btn__square-danger--outline',
-};
-
-export const DangerGhostSquare = Template.bind({});
-DangerGhostSquare.args = {
-  className: 'cbp-btn cbp-btn__square cbp-btn__square-danger--ghost',
-};
-
-export const PrimaryFloatingAction = Template.bind({});
-PrimaryFloatingAction.args = {
-  className: 'cbp-btn cbp-btn__primary cbp-btn__primary--float',
-};
-
-export const SecondaryFloatingAction = Template.bind({});
-SecondaryFloatingAction.args = {
-  className: 'cbp-btn cbp-btn__secondary cbp-btn__secondary--float',
-};
diff --git a/packages/styles/src/components/card/decisionCard.stories.js b/packages/styles/src/components/card/decisionCard.stories.js
index 2f2519c8..ae912dd5 100644
--- a/packages/styles/src/components/card/decisionCard.stories.js
+++ b/packages/styles/src/components/card/decisionCard.stories.js
@@ -67,7 +67,7 @@ const DefaultDecisionCardTemplate = ({ title, actionsLayout, danger }) => {
       <div class="cbp-card__content">
         <div class="cbp-card__header">
           <h4 class="cbp-card__title"><i class="fas fa-circle cbp-margin-right-2x"></i>${title}</h4>
-          <button class="cbp-btn cbp-btn__square cbp-btn__square-secondary--ghost">
+          <button class="cbp-btn-square cbp-btn__secondary-ghost">
             <i class="fas fa-clipboard-check"></i>
           </button>
         </div>
@@ -75,7 +75,7 @@ const DefaultDecisionCardTemplate = ({ title, actionsLayout, danger }) => {
           The card has this passage of example text to emphasize
           truncation and reveal functionality and some other things...
         </p>
-        <button class="cbp-btn cbp-btn__secondary--ghost cbp-margin-top-4x" type="button">
+        <button class="cbp-btn cbp-btn__secondary-ghost cbp-margin-top-4x" type="button">
           <i class="fas fa-angle-down"></i>
           More
         </button>
diff --git a/packages/styles/src/components/link/link.md b/packages/styles/src/components/link/link.md
new file mode 100644
index 00000000..f3aecaeb
--- /dev/null
+++ b/packages/styles/src/components/link/link.md
@@ -0,0 +1,22 @@
+# Hyperlink (Anchor)
+
+### Purpose
+
+`<a href="[url]" class="cbp-link">` creates a hyperlink to web pages within or outside of the current URL. Text links can be embedded within a block of text and should not be used in lieu of a button. 
+
+### Functional Requirements
+
+- **Inline Text Link:** used when a link needs to be embedded in a chunk of text. These links should lead to other pages or applications.
+- **Definition Text Link:** used when the developer wants to give more information about a term or acronym and can be used in conjunction with an `<abbr>` tag. These links should lead to other pages or applications. 
+
+### Accessibility 
+
+- It is **_NOT RECOMMENDED_** to use `aria-disabled=true` on an element with an `href` attribute.
+- HTML does not allow for the use of the `disabled` attribute on a hyperlink, `aria-disabled=true` communicates the hyperlink as being disabled to assistive technologies but does not actually disable the element.
+- Most effective way to communicate and actually disable a hyperlink would be to remove the `href` from the `<a>` element, creating a placeholder. ARIA can be applied to this placeholder link to communicate the element's intended role and state.
+
+### References
+
+- Disabling a Link (Blog Post) - (Link)[https://www.scottohara.me/blog/2021/05/28/disabled-links.html]
+- Disabled Link with ARIA - (Link)[https://w3c.github.io/html-aria/#example-communicate-a-disabled-link-with-aria]
+- `<a>`: The Anchor Element - (MDN)[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a]
\ No newline at end of file
diff --git a/packages/styles/src/components/link/link.stories.js b/packages/styles/src/components/link/link.stories.js
index d0ab2aa4..000221bd 100644
--- a/packages/styles/src/components/link/link.stories.js
+++ b/packages/styles/src/components/link/link.stories.js
@@ -1,10 +1,39 @@
 export default {
-  title: 'Patterns/Link'
+  title: 'Patterns/Link',
+  parameters: {
+    layout: 'centered'
+  }
 };
 
-const Template = () => (
-  `<a href="#" class="cbp-link__inline" aria-disabled="false">Text Link</a>`
+const LinkTemplate = ({ label, definition }) => (
+  `<a href="#" class="cbp-link ${definition ? 'cbp-link--definition' : '' }">${label}</a>`
 )
 
-export const Link = Template.bind({});
-Link.args = {}
+const DisabledLinkTemplate = ({ label }) => (
+  `<a class="cbp-link" role=link aria-disabled="true">${label}</a>`
+)
+
+export const Link = LinkTemplate.bind({});
+Link.args = {
+  label: 'Text Link',
+  definition: false
+};
+Link.argTypes = {
+  label: {
+    name: 'Link Label',
+    description: 'Label of the Link to display',
+    type: { name: 'string', required: true }
+  },
+  definition: {
+    name: 'Definition Modifier',
+    description: 'Used when the developer wants to give more information about a term or acronym and can be used in conjuction with a `<abbr>` tag',
+    type: { name: 'boolean', required: false }
+  }
+}
+Link.storyName = 'Default';
+
+export const DisabledLink = DisabledLinkTemplate.bind({});
+DisabledLink.args = {
+  label: 'Disabled Text Link'
+};
+DisabledLink.storyName = 'Disabled';
\ No newline at end of file
diff --git a/packages/styles/src/components/typography/typography.stories.js b/packages/styles/src/components/typography/typography.stories.js
index c6b09a15..02090646 100644
--- a/packages/styles/src/components/typography/typography.stories.js
+++ b/packages/styles/src/components/typography/typography.stories.js
@@ -1,5 +1,5 @@
 export default {
-  title: 'Patterns/Typography',
+  title: 'Foundations/Typography',
   argTypes: {
     label: { control: 'text' },
     onClick: { action: 'onClick' },
diff --git a/packages/styles/src/sass/components/_breadcrumb.scss b/packages/styles/src/sass/components/_breadcrumb.scss
index 71d6d39e..9ed4fb49 100644
--- a/packages/styles/src/sass/components/_breadcrumb.scss
+++ b/packages/styles/src/sass/components/_breadcrumb.scss
@@ -1,6 +1,6 @@
 //@use '../base/colors' as *;
-@use 'link' as *;
-@use 'button' as *;
+// @use 'link' as *;
+// @use 'button' as *;
 
 .cbp-breadcrumb {
   align-items: center;
@@ -19,7 +19,7 @@
   }
 
   & > a {
-    @extend .cbp-link__inline;
+    // @extend .cbp-link__inline;
     letter-spacing: unset;
   }
 
@@ -57,9 +57,9 @@
 }
 
 .cbp-breadcrumb__btn {
-  @extend .cbp-btn;
-  @extend .cbp-btn__square; 
-  @extend .cbp-btn__square-primary--ghost;
+  // @extend .cbp-btn;
+  // @extend .cbp-btn__square; 
+  // @extend .cbp-btn__square-primary--ghost;
 }
 
 /* Header (Might not be part of actual breadcrumb */
diff --git a/packages/styles/src/sass/components/_fileupload.scss b/packages/styles/src/sass/components/_fileupload.scss
index 3f69337c..cfefc6fa 100644
--- a/packages/styles/src/sass/components/_fileupload.scss
+++ b/packages/styles/src/sass/components/_fileupload.scss
@@ -1,6 +1,3 @@
-//@use '../base/colors' as *;
-@use './button/states' as *;
-
 .cbp-form__file {
   display: flex;
   align-items: center;
@@ -49,9 +46,7 @@
   outline-offset: -6px;
 }
 
-.cbp-form__file:focus-within > .cbp-btn__secondary {
-  @include btn-focus;
-}
+.cbp-form__file:focus-within > .cbp-btn__secondary {}
 
 .cbp-form__file:focus-within > .cbp-btn__secondary {
   background-color: var(--cbp-color-interactive-focus-dark);
@@ -156,7 +151,6 @@
     }
 
     &:focus {
-      @include btn-focus;
       
       & > i {
         color: var(--cbp-color-interactive-neutral-lighter);
@@ -246,7 +240,6 @@
     }
 
     &:focus {
-      @include btn-focus;
 
       & > i {
         color: var(--cbp-color-interactive-neutral-lighter);
diff --git a/packages/styles/src/sass/components/_index.scss b/packages/styles/src/sass/components/_index.scss
index 5439b6e2..1caeb649 100644
--- a/packages/styles/src/sass/components/_index.scss
+++ b/packages/styles/src/sass/components/_index.scss
@@ -13,7 +13,7 @@
 @use 'form';
 @use 'header';
 @use 'input-group';
-@use './link';
+@use 'link';
 @use './modal';
 @use './overflow-menu';
 @use './pagination';
diff --git a/packages/styles/src/sass/components/_link.scss b/packages/styles/src/sass/components/_link.scss
deleted file mode 100644
index e9ef33f9..00000000
--- a/packages/styles/src/sass/components/_link.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-//@use '../base/colors' as *;
-
-.cbp-link__inline {
-  color: var(--cbp-color-interactive-primary-base);
-  cursor: pointer;
-  font-weight: 400;
-  text-decoration: underline;
-
-  &:hover:not([disabled]) {
-    color:  var(--cbp-color-interactive-primary-dark);
-    font-weight: 700;
-  }
-
-  &:focus:not([disabled]) {
-    color:  var(--cbp-color-interactive-focus-dark);
-    font-weight: 700;
-    outline: 2px solid  var(--cbp-color-interactive-focus-dark);
-  }
-
-  &:visited:not([disabled]) {
-    color:  var(--cbp-color-interactive-visited-dark);
-
-    &:focus:not([disabled]) {
-      color:  var(--cbp-color-interactive-focus-dark);
-    }
-  }
-}
-
-.cbp-link__inline--disabled {
-  color:  var(--cbp-color-text-base) !important;
-  cursor: not-allowed;
-  font-style: italic;
-
-  &:hover {
-    color: var(--cbp-color-interactive-neutral-dark) !important;
-  }
-
-  &:focus {
-    color:  var(--cbp-color-interactive-focus-dark) !important;
-    font-weight: 700;
-    outline: 2px solid  var(--cbp-color-interactive-focus-dark);
-  }
-}
\ No newline at end of file
diff --git a/packages/styles/src/sass/components/banner/_mixin.scss b/packages/styles/src/sass/components/banner/_mixin.scss
index 08b7598f..163d33f9 100644
--- a/packages/styles/src/sass/components/banner/_mixin.scss
+++ b/packages/styles/src/sass/components/banner/_mixin.scss
@@ -1,5 +1,5 @@
 //@use '../../base/colors' as *;
-@use '../button' as *;
+// @use '../button' as *;
 
 @mixin banner-info($bg-color) {
   background-color: $bg-color;
@@ -47,7 +47,7 @@
 }
 
 @mixin banner-dismiss($text-color) {
-  @extend .cbp-btn;
-  @extend .cbp-btn__secondary--ghost;
+  // @extend .cbp-btn;
+  // @extend .cbp-btn__secondary--ghost;
   color: $text-color;
 }
diff --git a/packages/styles/src/sass/components/button/_base.scss b/packages/styles/src/sass/components/button/_base.scss
new file mode 100644
index 00000000..f4bd3b40
--- /dev/null
+++ b/packages/styles/src/sass/components/button/_base.scss
@@ -0,0 +1,129 @@
+// Base Button CSS
+.cbp-btn {
+  border-width: var(--cbp-border-size-md);
+  border-style: solid;
+  border-radius: var(--cbp-border-radius-soft);
+  cursor: pointer;
+  font-weight: var(--cbp-font-weight-medium);
+  letter-spacing: var(--cbp-letter-spacing-loose); // Replace with CSS Variables after all letter-spacing sizes confirmed
+  padding: var(--cbp-space-2x) var(--cbp-space-3x);
+  text-transform: uppercase;
+  transition: all var(--cbp-motion-duration-shorter);
+  min-height: 2.25rem;
+
+  & > i {
+    margin-right: var(--cbp-space-2x);
+  }
+
+  &:focus {
+    background: var(--cbp-color-interactive-focus-dark);
+    border-color: var(--cbp-color-interactive-focus-dark);
+    border-width: var(--cbp-border-size-md);
+    border-style: solid;
+    color: var(--cbp-color-text-lightest);
+    outline: var(--cbp-border-size-sm) solid var(--cbp-color-white);
+    outline-offset: calc(-1 * var(--cbp-space-1x));
+  
+    &:hover {
+      background-color: var(--cbp-color-interactive-focus-dark);
+      border-color: var(--cbp-color-interactive-focus-dark);
+      color: var(--cbp-color-text-lightest);
+    }
+  }
+
+  // TODO: why are disabled buttons interactive? Ask Jeremy
+  &:disabled {
+    background-color: var(--cbp-color-interactive-disabled-light);
+    border-color: var(--cbp-color-interactive-disabled-light);
+    color: var(--cbp-color-interactive-disabled-dark);
+    font-style: italic;
+  
+    // font-weight property does not apply in :disabled pseudo-class
+    &:hover {
+      background-color: var(--cbp-color-interactive-disabled-dark);
+      border-color: var(--cbp-color-interactive-disabled-dark);
+      color: var(--cbp-color-text-darkest);
+    }
+  }
+
+  &:active {
+    background-color: var(--cbp-color-interactive-active-dark);
+    border-color: var(--cbp-color-interactive-active-dark);
+    font-style: italic;
+  }
+}
+
+.cbp-btn-square {
+  @extend .cbp-btn;
+  padding: unset;
+  letter-spacing: unset;
+  min-height: 2.25rem;
+  min-width: 2.25rem;
+
+  & > i {
+    margin-right: 0;
+  }
+}
+
+.cbp-btn-cta {
+  @extend .cbp-btn;
+  font-size: var(--cbp-font-size-heading-sm);
+  padding-left: var(--cbp-space-4x);
+  padding-right: var(--cbp-space-4x);
+  min-height: 3.25rem;
+
+  & > i {
+    margin-right: var(--cbp-space-3x);
+  }
+}
+
+[data-cbp-theme='dark'] {
+  .cbp-btn {
+    &:hover {
+      color: var(--cbp-color-text-lightest);
+    }
+
+    &:focus {
+      background-color: var(--cbp-color-interactive-focus-light);
+      border-color: var(--cbp-color-interactive-focus-light);
+      color: var(--cbp-color-text-darkest);
+      outline: var(--cbp-border-size-md) solid var(--cbp-color-black);
+      outline-offset: calc(-1 * var(--cbp-space-1x));
+
+      &:hover {
+        background-color: var(--cbp-color-interactive-focus-light);
+        border-color: var(--cbp-color-interactive-focus-light);
+        color: var(--cbp-color-text-darkest);
+      }
+    }
+
+    &:disabled {
+      background-color: var(--cbp-color-interactive-disabled-dark);
+      border-color: var(--cbp-color-interactive-disabled-dark);
+      color: var(--cbp-color-interactive-disabled-light);
+
+      &:hover {
+        background-color: var(--cbp-color-interactive-disabled-light);
+        border-color: var(--cbp-color-interactive-disabled-light);
+        color: var(--cbp-color-text-darker);
+      }
+    }
+  }
+}
+
+
+// Ripple Animation on Button Click
+span.ripple {
+  animation: ripple 400ms linear;
+  background-color: rgba(255, 255, 255, 0.15);
+  border-radius: 50%;
+  position: absolute;
+  transform: scale(0);
+}
+
+@keyframes ripple {
+  to {
+    transform: scale(4);
+    opacity: 0;
+  }
+}
\ No newline at end of file
diff --git a/packages/styles/src/sass/components/button/_buttons.scss b/packages/styles/src/sass/components/button/_buttons.scss
deleted file mode 100644
index aa627240..00000000
--- a/packages/styles/src/sass/components/button/_buttons.scss
+++ /dev/null
@@ -1,607 +0,0 @@
-// @use './states';
-//@use '../../base/colors' as *;
-@use 'mixins' as *;
-
-/*
-TODO: reorganize more logically, reduce mixing/extends; write readable CSS
-The use of !important means this is not well organized and seems unmaintainable
-also should not need :not(disabled) all over the place
-*/
-
-.btn-disabled {
-  background: var(--cbp-color-interactive-disabled-light);
-  color: var(--cbp-color-interactive-disabled-dark);
-  cursor: pointer; // ???
-  font-style: italic;
-  font-weight: 500;
-
-  // TODO: why are disabled buttons interactive?
-  &:hover {
-    background-color: var(--cbp-color-interactive-disabled-dark);
-    color: var(--cbp-color-text-darkest);
-  }
-}
-
-/* PRIMARY FOCUS PROPERTIES */
-.btn-focus {
-  background: var(--cbp-color-interactive-focus-dark);
-  color: var(--cbp-color-white);
-  font-weight: 700;
-  outline: 2px solid var(--cbp-color-white);
-  outline-offset: -4px;
-
-  &:hover {
-    background-color: var(--cbp-color-interactive-focus-dark);
-    color: var(--cbp-color-white);
-  }
-}
-
-/* ACTIVE (:active) PROPERTIES */
-.btn-active {
-  @extend .btn-focus;
-  outline: none;
-}
-
-/* OUTLINE ACTIVE STATE PROPERTIES */
-.btn-outline-active {
-  background: var(--cbp-color-white);
-  border: 2px solid var(--cbp-color-interactive-active-dark) !important;
-  box-shadow: none;
-  color: var(--cbp-color-interactive-active-dark) !important;
-  font-style: italic;
-}
-
-/* GHOST ACTIVE STATE PROPERTIES */
-.btn-ghost-active {
-  @extend .btn-outline-active;
-  border: 0;
-}
-
-/* OUTLINE DISABLED PROPERTIES*/
-.btn-outline-disabled {
-  background: var(--cbp-color-white);
-  border: 2px solid var(--cbp-color-text-base);
-  color: var(--cbp-color-text-base);
-  cursor: not-allowed;
-  font-style: italic;
-  
-  &:hover {
-    background-color: var(--cbp-color-interactive-disabled-light);
-    border: 2px solid var(--cbp-color-interactive-disabled-light);
-    color: var(--cbp-color-text-darker);
-    font-weight: 700;
-  }
-}
-
-span.ripple {
-  animation: ripple 400ms linear;
-  background-color: rgba(255, 255, 255, 0.15);
-  border-radius: 50%;
-  position: absolute;
-  transform: scale(0);
-}
-
-@keyframes ripple {
-  to {
-    transform: scale(4);
-    opacity: 0;
-  }
-}
-
-/* Extended Classes */
-
-.cbp-btn-group { 
-  display: flex;
-  justify-content: space-between;
-
-  &--around { justify-content: space-around; }
-  &--center { justify-content: center; }
-  &--left { justify-content: flex-start; }
-  &--right { justify-content: flex-end; }
-}
-
-.cbp-btn {
-  align-items: center;
-  border: var(--cbp-border-size-md) solid transparent;
-  border-radius: var(--cbp-border-radius-soft);
-  box-sizing: border-box;
-  cursor: pointer;
-  display: flex;
-  font-family: "Roboto", sans-serif;
-  font-size: 14px;
-  font-weight: 500;
-  justify-content: center;
-  letter-spacing: 1.08px;
-  overflow: hidden;
-  padding: var(--cbp-space-2x) var(--cbp-space-3x);
-  position: relative;
-  text-transform: uppercase;
-  transition: all 300ms;
-
-  & > i {
-    margin-right: 8px;
-    pointer-events: none;
-  }
-
-  &__primary {
-    background-color: var(--cbp-color-interactive-primary-dark);
-    color: var(--cbp-color-text-lightest);
-
-    /* HOVER */
-    &:hover:not([disabled]) {
-      background-color: var(--cbp-color-interactive-primary-darker);
-      font-weight: 700;
-    }
-
-    /* FOCUSED */
-    &:focus:not([disabled]) {
-      @extend .btn-focus;
-    }
-    
-    /* DISABLED */
-    &:disabled {
-      @extend .btn-disabled;
-
-      &:hover {
-        background: var(--cbp-color-interactive-disabled-dark);
-        color: var(--cbp-color-text-darkest);
-        font-weight: 700;
-      }
-
-      &:focus {
-        @extend .btn-focus;
-      }
-    }
-    
-    &:active:not([disabled]) {
-      @extend .btn-active;
-    }
-
-    /* PRIMARY OUTLINE */
-    &--outline {
-      @include outline(var(--cbp-color-interactive-primary-dark), var(--cbp-color-interactive-primary-dark));
-    }
-
-    /* PRIMARY GHOST */
-    &--ghost {
-      @include ghost(var(--cbp-color-interactive-primary-dark), var(--cbp-color-interactive-primary-lighter));
-      
-      &:disabled {
-        background-color: transparent !important;
-      }
-    }
-
-    /* PRIMARY FLOATING ACTION */
-    &--float {
-      @include float(var(--cbp-color-interactive-primary-dark), var(--cbp-color-interactive-primary-darker));
-    }
-  }
-
-  /* SECONDARY BUTTON */
-  &__secondary {
-    background-color: var(--cbp-color-interactive-neutral-dark);
-    color: var(--cbp-color-text-lightest);
-
-    &:hover:not([disabled]) {
-      background-color: var(--cbp-color-interactive-neutral-darker);
-      font-weight: 700;
-    }
-
-    &:focus:not([disabled]) {
-      @extend .btn-focus;
-    }
-
-    &:disabled {
-      @extend .btn-disabled;
-    }
-
-    &:active:not([disabled]) {
-      @extend .btn-active;
-    }
-
-    /* SECONDARY OUTLINE */
-    &--outline {
-      @include outline(var(--cbp-color-interactive-neutral-darker), var(--cbp-color-interactive-neutral-darker));
-      
-      &:hover:not([disabled]) {
-        color: var(--cbp-color-text-lightest);
-      }
-    }
-
-    /* SECONDARY GHOST BUTTON */
-    &--ghost {
-      @include ghost(var(--cbp-color-interactive-neutral-dark), var(--cbp-color-interactive-neutral-lighter));
-    }
-
-    /* SECONDARY FLOATING ACTION */
-    &--float {
-      @include float(var(--cbp-color-interactive-neutral-dark), var(--cbp-color-interactive-neutral-darker));
-    }
-  }
-
-  /* BUTTON DANGER */
-  &__danger {
-    background-color: var(--cbp-color-danger-base);
-    color: var(--cbp-color-white);
-
-    /* BUTTON DANGER HOVER */
-    &:hover:not([disabled]) {
-      background-color: var(--cbp-color-danger-dark);
-      font-weight: 700;
-    }
-
-    /* BUTTON DANGER FOCUS */
-    &:focus:not([disabled]) {
-      @extend .btn-focus;
-    }
-
-    &:active:not([disabled]) {
-      @extend .btn-active;
-    }
-
-    &:disabled {
-      @extend .btn-disabled;
-    }
-
-    /* BUTTON DANGER OUTLINE */
-    &--outline {
-      @include outline(var(--cbp-color-danger-base), var(--cbp-color-danger-base));
-      
-      &:hover:not([disabled]) {
-        color: var(--cbp-color-text-lightest);
-      }
-    }
-
-    /* DANGER GHOST BUTTON */
-    &--ghost {
-      @include ghost(var(--cbp-color-danger-base), var(--cbp-color-danger-lighter));
-    }
-  }
-
-  &__square {
-    width: 36px;
-
-    & > i {
-      margin-right: 0 !important;
-    }
-
-    &:focus:not([disabled]) {
-      @extend .btn-focus;
-    }
-
-    &:active:not([disabled]) {
-      @extend .btn-active;
-    }
-    &-primary {
-      background-color: var(--cbp-color-interactive-primary-dark);
-      color: var(--cbp-color-text-lightest);
-
-      &:hover:not([disabled]) {
-        background-color: var(--cbp-color-interactive-primary-darker);
-      }
-
-      &--outline {
-        @include outline(var(--cbp-color-interactive-primary-dark), var(--cbp-color-interactive-primary-dark));
-
-        &:hover:not([disabled]) {
-          color: var(--cbp-color-text-lightest);
-        }
-      }
-      &--ghost {
-        @include ghost(var(--cbp-color-interactive-primary-dark), var(--cbp-color-interactive-primary-lighter));
-      }
-    }
-
-    &-secondary {
-      background-color: var(--cbp-color-interactive-neutral-dark);
-      color: var(--cbp-color-white);
-
-      &:hover:not([disabled]) {
-        background-color: var(--cbp-color-interactive-neutral-darker);
-      }
-
-      &--outline {
-        @include outline(var(--cbp-color-interactive-neutral-darker), var(--cbp-color-interactive-neutral-darker));
-
-        &:hover:not([disabled]) {
-          color: var(--cbp-color-text-lightest);
-        }
-      }
-      &--ghost {
-        @include ghost(var(--cbp-color-interactive-neutral-dark), var(--cbp-color-interactive-neutral-lighter));
-      }
-    }
-
-    &-danger {
-      background-color: var(--cbp-color-danger-base);
-      color: var(--cbp-color-white);
-
-      &:hover:not([disabled]) {
-        background-color: var(--cbp-color-danger-dark);
-      }
-
-      &--outline {
-        @include outline(var(--cbp-color-danger-base), var(--cbp-color-danger-base));
-
-        &:hover:not([disabled]) {
-          color: var(--cbp-color-text-lightest);
-        }
-      }
-
-      &--ghost {
-        @include ghost(var(--cbp-color-danger-base), var(--cbp-color-danger-lighter));
-      }
-    }
-  }
-
-  &__cta {
-    @extend .cbp-btn__primary;
-    font-size: 18px;
-    height: 52px;
-    padding: 0 16px;
-
-    & > i {
-      margin-right: 12px;
-    }
-  }
-
-  /**
-    Button active states indicating selection of button(s).
-    Separate from the pseudo-class :active
-  */
-
-  /* ACTIVE STATE PROPERTIES */
-  &--active {
-    background-color: var(--cbp-color-interactive-active-dark) !important;
-    box-shadow: none;
-    cursor: not-allowed;
-    font-style: italic;
-    outline: none;
-
-    &:hover {
-      font-weight: 500 !important;
-    }
-  }
-
-  /* OUTLINE ACTIVE STATE PROPERTIES */
-  &--outline-active {
-    background-color: var(--cbp-color-white);
-    border: 2px solid var(--cbp-color-interactive-active-dark) !important;
-    color: var(--cbp-color-interactive-active-dark) !important;
-    cursor: not-allowed;
-    font-style: italic;
-    outline: none;
-
-    &:hover {
-      background-color: var(--cbp-color-white) !important;
-      font-weight: 500 !important;
-    }
-  }
-
-  /* GHOST ACTIVE STATE PROPERTIES */
-  &--ghost-active {
-    background-color: transparent;
-    border: 0;
-    color: var(--cbp-color-interactive-active-dark) !important;
-    cursor: not-allowed;
-    font-style: italic;
-    outline: none;
-
-    &:hover {
-      background-color: transparent !important;
-      font-weight: 500 !important;
-    }
-  }
-}
-
-/* DARK MODE */
-// Abstract when 'theme' folder is created
-
-[data-theme="dark"] {
-  .cbp-btn__primary {
-    background-color: var(--cbp-color-interactive-primary-base);
-
-    &:hover {
-      background-color: var(--cbp-color-interactive-primary-dark);
-    }
-
-    &:focus {
-      @extend .btn-focus;
-      // DRY
-      background-color: var(--cbp-color-interactive-focus-light);
-      color: var(--cbp-color-text-darkest);
-      outline: 2px solid var(--cbp-color-black);
-      outline-offset: -4px;
-
-      &:hover {
-        background-color: var(--cbp-color-interactive-focus-light);
-        color: var(--cbp-color-text-darkest);
-      }
-    }
-
-    /* DISABLED */
-    &:disabled {
-      @extend .btn-disabled;
-      background-color: var(--cbp-color-interactive-disabled-light);
-      color: var(--cbp-color-interactive-disabled-dark);
-
-      &:hover {
-        background: var(--cbp-color-interactive-disabled-dark);
-        color: var(--cbp-color-text-darker);
-        font-weight: 700;
-      }
-
-      &:focus {
-        @extend .btn-focus;
-        // DRY
-        background-color: var(--cbp-color-interactive-focus-light);
-        color:var(--cbp-color-text-darkest);
-        outline: 2px solid var(--cbp-color-black);
-        outline-offset: -4px;
-
-        &:hover {
-          background-color: var(--cbp-color-interactive-focus-light);
-          color: var(--cbp-color-text-darkest);
-        }
-      }
-
-      &:active:not([disabled]) {
-        @extend .btn-active;
-        outline: none;
-      }
-    }
-  }
-
-
-  .cbp-btn__primary--outline {
-    &:hover {
-      background-color: var(--cbp-color-interactive-primary-light);
-      border-color: var(--cbp-color-interactive-primary-light);
-      color: var(--cbp-color-text-darkest);
-    }
-  }
-  .cbp-btn__primary--ghost {
-    &:hover {
-      background-color: var(--cbp-color-interactive-primary-dark);
-    }
-  }
-  // .cbp-btn__primary--float {}
-
-  .cbp-btn__secondary {
-    background-color: var(--cbp-color-interactive-neutral-lighter);
-
-    &:hover {
-      background-color: var(--cbp-color-interactive-neutral-light);
-    }
-  }
-  .cbp-btn__secondary--outline {
-    background-color: var(--cbp-color-base-neutral-darker);
-    border-color: var(--cbp-color-interactive-neutral-lighter) !important;
-    color: var(--cbp-color-interactive-neutral-lighter);
-
-    &:hover {
-      background-color: var(--cbp-color-interactive-neutral-lighter);
-      color: var(--cbp-color-text-darkest);
-    }
-  }
-  .cbp-btn__secondary--ghost {
-    color: var(--cbp-color-interactive-neutral-lighter);
-
-    &:hover {
-      background-color: var(--cbp-color-interactive-neutral-dark);
-      color: var(--cbp-color-text-lightest);
-    }
-  }
-
-  // .cbp-btn__secondary--float {}
-
-  .cbp-btn__danger {
-    &:hover {
-      background-color: var(--cbp-color-danger-lighter);
-      color: var(--cbp-color-danger-darker);
-    }
-  }
-
-  .cbp-btn__danger--outline {
-    background-color: var(--cbp-color-base-neutral-darker);
-    border-color: var(--cbp-color-danger-light);
-    color: var(--cbp-color-danger-light);
-    &:hover {
-      background-color: var(--cbp-color-danger-light);
-      border-color: var(--cbp-color-danger-light);
-      color: var(--cbp-color-text-darkest);
-    }
-  }
-
-  .cbp-btn__danger--ghost {
-    color: var(--cbp-color-danger-light);
-
-    &:hover {
-      background-color: var(--cbp-color-danger-dark);
-      color: var(--cbp-color-text-lightest);
-    }
-  }
-
-  // .cbp-btn__square {}
-
-  .cbp-btn__square-primary {
-    &:hover {
-      background-color: var(--cbp-color-interactive-primary-lighter);
-      color: var(--cbp-color-text-darkest);
-    }
-  }
-
-  .cbp-btn__square-primary--outline {
-    background-color: var(--cbp-color-base-neutral-darker);
-    border-color: var(--cbp-color-interactive-primary-light);
-    color: var(--cbp-color-interactive-primary-light);
-
-    &:hover:not([disabled]) {
-      background-color: var(--cbp-color-interactive-primary-light);
-      border-color: var(--cbp-color-interactive-primary-light);
-      color: var(--cbp-color-text-darkest);
-    }
-  }
-  // .cbp-btn__square-primary--ghost {}
-
-  .cbp-btn__square-secondary {
-    background-color: var(--cbp-color-interactive-neutral-light);
-    color: var(--cbp-color-text-darkest);
-
-    &:hover {
-      background-color: var(--cbp-color-interactive-neutral-lighter);
-    }
-  }
-
-  .cbp-btn__square-secondary--outline {
-    background-color: var(--cbp-color-base-neutral-darker);
-    border-color: var(--cbp-color-interactive-neutral-lighter);
-    color: var(--cbp-color-interactive-neutral-lighter);
-
-    &:hover:not([disabled]) {
-      background-color: var(--cbp-color-interactive-neutral-lighter);
-      border-color: var(--cbp-color-interactive-neutral-lighter);
-      color: var(--cbp-color-text-darkest);
-    }
-  }
-
-  .cbp-btn__square-secondary--ghost {
-    color: var(--cbp-color-interactive-neutral-lighter);
-
-    &:hover:not([disabled]) {
-      background-color: var(--cbp-color-interactive-neutral-dark);
-    }
-  }
-
-  .cbp-btn__square-danger {
-    background-color: var(--cbp-color-danger-light);
-    color: var(--cbp-color-danger-darker);
-
-    &:hover:not([disabled]) {
-      background-color: var(--cbp-color-danger-lighter);
-      color: var(--cbp-color-danger-darker);
-    }
-  }
-
-  .cbp-btn__square-danger--outline {
-    background-color: var(--cbp-color-base-neutral-darker);
-    border-color: var(--cbp-color-danger-light);
-    color: var(--cbp-color-danger-light);
-
-    &:hover:not([disabled]) {
-      background-color: var(--cbp-color-danger-light);
-      border-color: var(--cbp-color-danger-light);
-      color: var(--cbp-color-text-darkest);
-    }
-  }
-
-  .cbp-btn__square-danger--ghost {
-    background-color: var(--cbp-color-base-neutral-darker);
-    color: var(--cbp-color-danger-light);
-
-    &:hover:not([disabled]) {
-      background-color: var(--cbp-color-danger-dark);
-      color: var(--cbp-color-text-lightest);
-    }
-  }
-}
\ No newline at end of file
diff --git a/packages/styles/src/sass/components/button/_danger.scss b/packages/styles/src/sass/components/button/_danger.scss
new file mode 100644
index 00000000..c34a561a
--- /dev/null
+++ b/packages/styles/src/sass/components/button/_danger.scss
@@ -0,0 +1,97 @@
+@use 'mixins' as *;
+
+.cbp-btn__danger {
+  background-color: var(--cbp-color-danger-base);
+  border-color: var(--cbp-color-danger-base);
+  color: var(--cbp-color-text-lightest);
+
+  &:hover {
+    background-color: var(--cbp-color-danger-dark);
+    border-color: var(--cbp-color-danger-dark);
+  }
+
+  @include btn-outline-pseudo;
+}
+
+.cbp-btn__danger-outline {
+  background-color: var(--cbp-color-white);
+  border: var(--cbp-border-size-md) solid var(--cbp-color-danger-base);
+  color: var(--cbp-color-danger-base);
+  padding-top: var(--cbp-space-2x);
+  padding-bottom: var(--cbp-space-2x);
+  
+  &:hover {
+    background-color: var(--cbp-color-danger-dark);
+    border-color: var(--cbp-color-danger-dark);
+    color: var(--cbp-color-text-lightest);
+  }
+
+  @include btn-outline-pseudo;
+}
+
+.cbp-btn__danger-ghost {
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--cbp-color-danger-base);
+
+  &:hover {
+    background-color: var(--cbp-color-danger-lighter);
+    color: var(--cbp-color-danger-dark);
+  }
+
+  &:disabled {
+    background-color: transparent;
+    color: var(--cbp-color-interactive-disabled-dark);
+
+    &:hover {
+      background-color: var(--cbp-color-interactive-disabled-light);
+      color: var(--cbp-color-text-darker);
+    }
+  }
+
+  &:active {
+    background-color: transparent;
+    color: var(--cbp-color-interactive-active-dark);
+  }
+}
+
+[data-cbp-theme="dark"] {
+  & .cbp-btn__danger {
+    background-color: var(--cbp-color-danger-light);
+    border-color: var(--cbp-color-danger-light);
+    color: var(--cbp-color-danger-darker);
+  
+    &:hover {
+      background-color: var(--cbp-color-danger-base);
+      border-color: var(--cbp-color-danger-base);
+    }
+
+    @include btn-outline-pseudo($darkMode: true);
+  }
+
+  & .cbp-btn__danger-outline {
+    background-color: var(--cbp-color-base-neutral-darker);
+    border-color: var(--cbp-color-danger-light);
+    color: var(--cbp-color-danger-light);
+
+    &:hover {
+      background-color: var(--cbp-color-danger-base);
+      border-color: var(--cbp-color-danger-base);
+    }
+
+    @include btn-outline-pseudo($darkMode: true);
+  }
+
+  .cbp-btn__danger-ghost {
+    color: var(--cbp-color-danger-light);
+
+    &:hover {
+      background-color: var(--cbp-color-danger-base);
+      color: var(--cbp-color-text-lightest);
+    }
+
+    &:disabled {
+      background-color: transparent;
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/styles/src/sass/components/button/_general.scss b/packages/styles/src/sass/components/button/_general.scss
deleted file mode 100644
index 5820aaad..00000000
--- a/packages/styles/src/sass/components/button/_general.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-@use 'sass:map';
-//@use '../../base/colors' as *;
-
-
-$button-type: (
-  "primary": var(--cbp-color-interactive-primary-dark),
-  "secondary": var(--cbp-color-interactive-neutral-dark),
-  "danger": var(--cbp-color-danger-base),
-);
-
-@mixin base-btn {
-  display: flex;
-  align-items: center;
-  height: 2.25rem;
-  border: 2px solid transparent;
-  border-radius: 3px;
-  box-sizing: border-box;
-  cursor: pointer;
-
-  font-family: inherit;
-  font-size: .875rem;
-  font-weight: 500;
-  
-  justify-content: center;
-  letter-spacing: 1.08px;
-  overflow: hidden;
-  padding: 0 12px;
-  position: relative;
-  text-transform: uppercase;
-  transition: all 300ms;
-
-  & > i {
-    margin-right: 8px;
-    pointer-events: none;
-  }
-}
-
-@mixin btn-type($type) {
-  .cbp-btn__#{$type} {
-    @content;
-  }
-}
diff --git a/packages/styles/src/sass/components/button/_index.scss b/packages/styles/src/sass/components/button/_index.scss
index 65cb25eb..17c0c430 100644
--- a/packages/styles/src/sass/components/button/_index.scss
+++ b/packages/styles/src/sass/components/button/_index.scss
@@ -1,2 +1,5 @@
-@forward 'buttons';
+@forward 'base';
+@forward 'primary';
+@forward 'secondary';
+@forward 'danger';
 @forward 'segmentedbuttongroup';
\ No newline at end of file
diff --git a/packages/styles/src/sass/components/button/_mixins.scss b/packages/styles/src/sass/components/button/_mixins.scss
index 33d5012a..46a5782b 100644
--- a/packages/styles/src/sass/components/button/_mixins.scss
+++ b/packages/styles/src/sass/components/button/_mixins.scss
@@ -1,124 +1,65 @@
-//@use '../../base/colors' as *;
-
-/**
-  Mixin for Outline Buttons
-  ================================
-  @param {$color} - text color
-  @param {$bg-hover} - background-color for hover state
-*/
-
-@mixin outline ($color, $bg-hover) {
-  background-color: var(--cbp-color-white);
-  border: 2px solid $color;
-  color: $color;
-
-  /* PRIMARY OUTLINE HOVER */
-  &:hover:not([disabled]) {
-    background-color: $bg-hover;
-    border-color: $bg-hover;
-    color: $color;
-    font-weight: 700;
-  }
-
-  /* PRIMARY OUTLINE FOCUS */
-  &:focus:not([disabled]) {
-    @extend .btn-focus;
-    border: 2px solid var(--cbp-color-interactive-focus-dark);
-  }  
-
-  /* PRIMARY OUTLINE DISABLED */
-  &:disabled {
-    @extend .btn-outline-disabled;
-  }
-
-  /* PRIMARY OUTLINE ACTIVE - On-click/Press-down */
-  &:active:not([disabled]) {
-    @extend .btn-active;
-  }
-}
-
-/**
-  Mixin for Floating Action Button
-  ================================
-  @param $background
-  @param $hover-background
-*/
+// $bg-hover applies to both background-color and border-color properties
+@mixin btn-outline-pseudo($darkMode: false) {
+  @if $darkMode {
+    &:focus {
+      border-color: var(--cbp-color-interactive-focus-light);
+    }
 
-@mixin float ($background, $hover-background) {
-  background-color: $background;
-  border-radius: 30px;
-  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5);
-  box-sizing: border-box;
-  color: var(--cbp-color-text-lightest);
-  cursor: pointer;
-  font-size: 24px;
-  height: 56px;
-  justify-content: center;
-  padding: 0;
-  text-align: center;
-  width: 56px;
-  z-index: 99998;
+    &:disabled {
+      background-color: var(--cbp-color-base-neutral-darker);
+      border-color: var(--cbp-color-interactive-disabled-light);
+      color: var(--cbp-color-interactive-disabled-light);
 
-  & > i {
-    margin-right: 0;
-  }
+      &:hover {
+        background-color: var(--cbp-color-interactive-disabled-light);
+        border-color: var(--cbp-color-interactive-disabled-light);
+        color: var(--cbp-color-text-darker);
+      }
+    }
 
-  &:hover {
-    background-color: $hover-background;
-  }
+    &:active {
+      background-color: var(--cbp-color-base-neutral-darker);
+      border-color: var(--cbp-color-interactive-active-light);
+      color: var(--cbp-color-interactive-active-light);
+    }
+  } @else {
+    &:focus {
+      border-color: var(--cbp-color-interactive-focus-dark);
+    }
 
-  &:focus:not([disabled]) {
-    @extend .btn-focus;
-  }
+    &:disabled {
+      background-color: var(--cbp-color-white);
+      border-color: var(--cbp-color-interactive-disabled-dark);
+      color: var(--cbp-color-interactive-disabled-dark);
 
-  &:disabled {
-    background-color: var(--cbp-color-interactive-disabled-light);
-    color: var(--cbp-color-interactive-disabled-dark);
-  }
+      &:hover {
+        background-color: var(--cbp-color-interactive-disabled-light);
+        border-color: var(--cbp-color-interactive-disabled-light);
+        color: var(--cbp-color-text-darker);
+      }
+    }
 
-  &:active:not([disabled]) {
-    @extend .btn-active;
-    cursor: grabbing;
+    &:active {
+      background-color: var(--cbp-color-white);
+      border-color: var(--cbp-color-interactive-active-dark);
+      color: var(--cbp-color-interactive-active-dark);
+    }
   }
 }
 
-/**
-  Mixin for Ghost Styling
-  =======================
-  @param {$color}: used to color the icon of the ghost button
-  @param {$hover-bg}: hover background color 
-*/
-@mixin ghost ($color, $hover-bg) {
-  background-color: transparent;
-  border: 0;
-  color: $color;
-
-  & > i {
-    margin-right: 8px;
-  }
-
-  &:hover:not([disabled]) {
-    background-color: $hover-bg;
-  }
-
-  &:focus:not([disabled]) {
-    @extend .btn-focus;
-    border: 2px solid var(--cbp-color-interactive-focus-dark);
-  }
-
-  &:active:not([disabled]) {
-    @extend .btn-active;
+@mixin btn-active-solid-pseudo($darkMode: false) {
+  @if $darkMode {
+    &:active {
+      background-color: var(--cbp-color-interactive-active-light);
+      border-color: var(--cbp-color-interactive-active-light);
+      color: var(--cbp-color-text-darkest);
+    }
   }
-
-  &:disabled {
-    background-color: inherit;
-    color: var(--cbp-color-interactive-disabled-dark);
-    font-style: italic;
-
-    &:hover {
-      background-color: var(--cbp-color-interactive-disabled-light) !important;
-      color: var(--cbp-color-text-darker);
-      font-weight: 700;
+  @else {
+    &:active {
+      background-color: var(--cbp-color-interactive-active-dark);
+      border-color: var(--cbp-color-interactive-active-dark);
+      font-style: italic;
     }
   }
 }
\ No newline at end of file
diff --git a/packages/styles/src/sass/components/button/_primary.scss b/packages/styles/src/sass/components/button/_primary.scss
new file mode 100644
index 00000000..1c77c58c
--- /dev/null
+++ b/packages/styles/src/sass/components/button/_primary.scss
@@ -0,0 +1,133 @@
+@use 'mixins' as *;
+
+.cbp-btn__primary {
+  background-color: var(--cbp-color-interactive-primary-dark);
+  border-color: var(--cbp-color-interactive-primary-dark);
+  color: var(--cbp-color-text-lightest);
+
+  &:hover {
+    background-color: var(--cbp-color-interactive-primary-darker);
+    border-color: var(--cbp-color-interactive-primary-darker);
+  }
+
+  @include btn-active-solid-pseudo;
+}
+
+.cbp-btn__primary-outline {
+  background-color: var(--cbp-color-white);
+  border-color: var(--cbp-color-interactive-primary-dark);
+  color: var(--cbp-color-interactive-primary-dark);
+  padding-top: var(--cbp-space-2x);
+  padding-bottom: var(--cbp-space-2x);
+
+  &:hover {
+    background-color: var(--cbp-color-interactive-primary-darker);
+    border-color: var(--cbp-color-interactive-primary-darker);
+    color: var(--cbp-color-text-lightest);
+  }
+
+  @include btn-outline-pseudo;
+}
+
+.cbp-btn__primary-ghost {
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--cbp-color-interactive-primary-dark);
+
+  &:hover {
+    background-color: var(--cbp-color-interactive-primary-lighter);
+  }
+
+  &:disabled {
+    background-color: transparent;
+    color: var(--cbp-color-interactive-disabled-dark);
+
+    &:hover {
+      background-color: var(--cbp-color-interactive-disabled-light);
+      color: var(--cbp-color-text-darker);
+    }
+  }
+
+  &:active {
+    background-color: transparent;
+    color: var(--cbp-color-interactive-active-dark);
+  }
+}
+
+.cbp-btn__primary-float {
+  background-color: var(--cbp-color-interactive-primary-dark);
+  border-color: var(--cbp-color-interactive-primary-dark);
+  border-radius: var(--cbp-border-radius-circle);
+  box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.5);
+  color: var(--cbp-color-text-lightest);
+  height: 3.5rem;
+  font-size: var(--cbp-font-size-heading-xl);
+  letter-spacing: unset;
+  position: absolute;
+  width: 3.5rem;
+  z-index: var(--cbp-z-index-level-4);
+
+  & > i {
+    margin-right: 0;
+  }
+
+  &:hover {
+    background-color: var(--cbp-color-interactive-primary-darker);
+    border-color: var(--cbp-color-interactive-primary-darker);
+  }
+
+  &:active {
+    cursor: grabbing;
+  }
+}
+
+[data-cbp-theme="dark"] {
+  & .cbp-btn__primary {
+    background-color: var(--cbp-color-interactive-primary-base);
+    border-color: var(--cbp-color-interactive-primary-base);
+
+    &:hover {
+      background-color: var(--cbp-color-interactive-primary-dark);
+      border-color: var(--cbp-color-interactive-primary-dark);
+    }
+
+    @include btn-active-solid-pseudo($darkMode: true);
+  }
+
+  & .cbp-btn__primary-outline {
+    background-color: var(--cbp-color-base-neutral-darker);
+    border-color: var(--cbp-color-interactive-primary-light);
+    color: var(--cbp-color-interactive-primary-light);
+
+    &:hover {
+      background-color: var(--cbp-color-interactive-primary-dark);
+      border-color: var(--cbp-color-interactive-primary-dark);
+    }
+
+    @include btn-outline-pseudo($darkMode: true);
+  }
+
+  .cbp-btn__primary-ghost {
+    color: var(--cbp-color-interactive-primary-light);
+
+    &:hover {
+      background-color: var(--cbp-color-interactive-primary-darker);
+      color: var(--cbp-color-interactive-primary-lighter);
+    }
+
+    &:disabled {
+      background-color: transparent;
+    }
+  }
+
+  .cbp-btn__primary-float {
+    background-color: var(--cbp-color-interactive-primary-base);
+    border-color: var(--cbp-color-interactive-primary-base);
+    color: var(--cbp-color-text-lightest);
+  
+    &:hover {
+      background-color: var(--cbp-color-interactive-primary-dark);
+      border-color: var(--cbp-color-interactive-primary-dark);
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/styles/src/sass/components/button/_secondary.scss b/packages/styles/src/sass/components/button/_secondary.scss
new file mode 100644
index 00000000..a5e29229
--- /dev/null
+++ b/packages/styles/src/sass/components/button/_secondary.scss
@@ -0,0 +1,135 @@
+@use 'mixins' as *;
+
+.cbp-btn__secondary {
+  background-color: var(--cbp-color-interactive-neutral-dark);
+  border-color: var(--cbp-color-interactive-neutral-dark);
+  color: var(--cbp-color-text-lightest);
+
+  &:hover {
+    background-color: var(--cbp-color-interactive-neutral-darker);
+    border-color: var(--cbp-color-interactive-neutral-darker);
+  }
+  @include btn-active-solid-pseudo;
+}
+
+.cbp-btn__secondary-outline {
+  background-color: var(--cbp-color-white);
+  border: var(--cbp-border-size-md) solid var(--cbp-color-interactive-neutral-dark);
+  color: var(--cbp-color-interactive-neutral-dark);
+  padding-top: var(--cbp-space-2x);
+  padding-bottom: var(--cbp-space-2x);
+  
+  &:hover {
+    background-color: var(--cbp-color-interactive-neutral-darker);
+    border-color: var(--cbp-color-interactive-neutral-darker);
+    color: var(--cbp-color-text-lightest);
+  }
+
+  @include btn-outline-pseudo;
+}
+
+.cbp-btn__secondary-ghost {
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--cbp-color-interactive-neutral-dark);
+
+  &:hover {
+    background-color: var(--cbp-color-interactive-neutral-lighter);
+  }
+
+  &:disabled {
+    background-color: transparent;
+    color: var(--cbp-color-interactive-disabled-dark);
+
+    &:hover {
+      background-color: var(--cbp-color-interactive-disabled-light);
+      color: var(--cbp-color-text-darker);
+    }
+  }
+
+  &:active {
+    background-color: transparent;
+    color: var(--cbp-color-interactive-active-dark);
+  }
+}
+
+.cbp-btn__secondary-float {
+  background-color: var(--cbp-color-interactive-neutral-dark);
+  border-color: var(--cbp-color-interactive-neutral-dark);
+  border-radius: var(--cbp-border-radius-circle);
+  box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.5);
+  color: var(--cbp-color-text-lightest);
+  height: 3.5rem;
+  font-size: var(--cbp-font-size-heading-xl);
+  letter-spacing: unset;
+  position: absolute;
+  width: 3.5rem;
+  z-index: var(--cbp-z-index-level-4);
+
+  & > i {
+    margin-right: 0;
+  }
+
+  &:hover {
+    background-color: var(--cbp-color-interactive-neutral-darker);
+    border-color: var(--cbp-color-interactive-neutral-darker);
+  }
+
+  &:active {
+    cursor: grabbing;
+  }
+}
+
+[data-cbp-theme="dark"] {
+  & .cbp-btn__secondary {
+    background-color: var(--cbp-color-interactive-neutral-lighter);
+    border-color: var(--cbp-color-interactive-neutral-lighter);
+    color: var(--cbp-color-text-darkest);
+
+    &:hover {
+      background-color: var(--cbp-color-interactive-neutral-light);
+      border-color: var(--cbp-color-interactive-neutral-light);
+    }
+
+    @include btn-active-solid-pseudo($darkMode: true);
+  }
+
+  & .cbp-btn__secondary-outline {
+    background-color: var(--cbp-color-base-neutral-darker);
+    border-color: var(--cbp-color-interactive-neutral-lighter);
+    color: var(--cbp-color-interactive-neutral-lighter);
+
+    &:hover {
+      background-color: var(--cbp-color-interactive-neutral-light);
+      border-color: var(--cbp-color-interactive-neutral-light);
+      color: var(--cbp-color-text-darkest);
+    }
+
+    @include btn-outline-pseudo($darkMode: true);
+  }
+
+  & .cbp-btn__secondary-ghost {
+    color: var(--cbp-color-interactive-neutral-lighter);
+
+    &:hover {
+      background-color: var(--cbp-color-interactive-neutral-darker);
+      color: var(--cbp-color-interactive-neutral-lighter);
+    }
+
+    &:disabled {
+      background-color: transparent;
+    }
+  }
+
+  & .cbp-btn__secondary-float {
+    background-color: var(--cbp-color-interactive-neutral-lighter);
+    border-color: var(--cbp-color-interactive-neutral-lighter);
+    color: var(--cbp-color-text-darkest);
+  
+    &:hover {
+      background-color: var(--cbp-color-interactive-neutral-light);
+      border-color: var(--cbp-color-interactive-neutral-light);
+      color: var(--cbp-color-text-darkest);
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/styles/src/sass/components/button/_segmentedbuttongroup.scss b/packages/styles/src/sass/components/button/_segmentedbuttongroup.scss
index c3308a00..16f21ec3 100644
--- a/packages/styles/src/sass/components/button/_segmentedbuttongroup.scss
+++ b/packages/styles/src/sass/components/button/_segmentedbuttongroup.scss
@@ -1,4 +1,4 @@
-@use 'buttons' as *;
+@use 'base' as *;
 @use 'mixins' as *;
 
 
diff --git a/packages/styles/src/sass/components/button/_states.scss b/packages/styles/src/sass/components/button/_states.scss
deleted file mode 100644
index d5c1373b..00000000
--- a/packages/styles/src/sass/components/button/_states.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-@use '../../base/colors' as *;
-
-@mixin btn-active($theme: light) {
-  @if $theme == light {
-    background-color: var(--cbp-color-interactive-active-dark) !important;
-    box-shadow: none;
-    cursor: not-allowed;
-    font-style: italic;
-    outline: none;
-  
-    &:hover {
-      font-weight: 500 !important;
-    } 
-  } @else {
-    background-color: var(--cbp-color-interactive-active-light);
-    color: var(--cbp-color-text-darkest);
-  }
-}
-
-@mixin btn-disabled {
-  background: var(--cbp-color-interactive-disabled-light);
-  color: var(--cbp-color-interactive-disabled-dark);
-  cursor: pointer;
-  font-style: italic;
-  font-weight: 500;
-
-  &:hover {
-    background-color: var(--cbp-color-interactive-disabled-dark);
-    color: var(--cbp-color-text-darkest);
-  }
-}
-
-@mixin btn-focus {
-  background: var(--cbp-color-interactive-focus-dark);
-  color: var(--cbp-color-text-lightest);
-  font-weight: 700;
-  outline: 2px solid var(--cbp-color-white);
-  outline-offset: -4px;
-
-  & > i {
-    color: var(--cbp-color-text-lightest);
-  }
-
-  &:hover {
-    background-color: var(--cbp-color-interactive-focus-dark);
-  }
-
-  &:hover > i {
-    color: var(--cbp-color-text-lightest);
-  }
-}
\ No newline at end of file
diff --git a/packages/styles/src/sass/components/card/_decision.scss b/packages/styles/src/sass/components/card/_decision.scss
index ac853015..ac2d1356 100644
--- a/packages/styles/src/sass/components/card/_decision.scss
+++ b/packages/styles/src/sass/components/card/_decision.scss
@@ -18,8 +18,8 @@
   & > a[href] {
     @extend .cbp-btn;
     border-radius: 0;
-    padding-top: var(--cbp-space-3x);
-    padding-bottom: var(--cbp-space-3x);
+    padding: var(--cbp-space-3x) 0;
+    text-align: center;
     text-decoration: none;
     width: 100%;
   }
diff --git a/packages/styles/src/sass/components/drawer/_hamburger.scss b/packages/styles/src/sass/components/drawer/_hamburger.scss
index cb60be2c..4a543249 100644
--- a/packages/styles/src/sass/components/drawer/_hamburger.scss
+++ b/packages/styles/src/sass/components/drawer/_hamburger.scss
@@ -1,5 +1,5 @@
 //@use '../../base/colors' as *;
-@use '../button/states' as *;
+// @use '../button/states' as *;
 
 @mixin hamburger-menu {
   background-color: transparent;
@@ -23,7 +23,7 @@
   }
 
   &:focus {
-    @include btn-focus;
+    // @include btn-focus;
     border: 0;
   }
 }
diff --git a/packages/styles/src/sass/components/form/_inputs.scss b/packages/styles/src/sass/components/form/_inputs.scss
index 9a3e388c..2aca253b 100644
--- a/packages/styles/src/sass/components/form/_inputs.scss
+++ b/packages/styles/src/sass/components/form/_inputs.scss
@@ -1,5 +1,5 @@
 //@use '../../base/colors' as *;
-@use '../button/index' as *;
+// @use '../button/index' as *;
 @use 'general' as *;
 
 .cbp-form__group {
@@ -73,9 +73,9 @@
   }
 
   & > button {
-    @extend .cbp-btn;
-    @extend .cbp-btn__square;
-    @extend .cbp-btn__square-secondary;
+    // @extend .cbp-btn;
+    // @extend .cbp-btn__square;
+    // @extend .cbp-btn__square-secondary;
     border-bottom-left-radius: 0;
     border-top-left-radius: 0;
     margin-left: -2px;
@@ -89,7 +89,7 @@
 
 .cbp-form__password--error {
   & > button {
-    @extend .cbp-btn__square-danger;
+    // @extend .cbp-btn__square-danger;
   }
 }
 
diff --git a/packages/styles/src/sass/components/header/_application.scss b/packages/styles/src/sass/components/header/_application.scss
index 121c2a6a..72742ff4 100644
--- a/packages/styles/src/sass/components/header/_application.scss
+++ b/packages/styles/src/sass/components/header/_application.scss
@@ -1,4 +1,4 @@
-@use '../button/states' as *;
+// @use '../button/states' as *;
 @use '../drawer/hamburger' as *;
 @use '../../tokens/breakpoints' as *;
 
@@ -72,7 +72,7 @@
     }
 
     &:focus {
-      @include btn-focus;
+      // @include btn-focus;
       border-bottom: 0;
     }
 
diff --git a/packages/styles/src/sass/components/input-group/_groups.scss b/packages/styles/src/sass/components/input-group/_groups.scss
index 5d1f583b..31c20e9e 100644
--- a/packages/styles/src/sass/components/input-group/_groups.scss
+++ b/packages/styles/src/sass/components/input-group/_groups.scss
@@ -1,6 +1,6 @@
 //@use '../../base/colors' as *;
 @use '../form/general' as *;
-@use '../button' as *;
+// @use '../button' as *;
 
 .cbp-field-group {
   display: flex;
@@ -20,8 +20,8 @@
   }
 
   & > button {
-    @extend .cbp-btn;
-    @extend .cbp-btn__secondary;
+    // @extend .cbp-btn;
+    // @extend .cbp-btn__secondary;
     border-bottom-left-radius: 0;
     border-top-left-radius: 0;
     display: inline-block;
@@ -35,9 +35,9 @@
   }
 
   & > .square {
-    @extend .cbp-btn;
-    @extend .cbp-btn__square;
-    @extend .cbp-btn__square-secondary;
+    // @extend .cbp-btn;
+    // @extend .cbp-btn__square;
+    // @extend .cbp-btn__square-secondary;
     border-bottom-left-radius: 0;
     border-top-left-radius: 0;
     margin-left: -2px;
@@ -51,11 +51,11 @@
 
 .cbp-field-group--error {
   & > button {
-    @extend .cbp-btn__square-danger;
+    // @extend .cbp-btn__square-danger;
   }
 
   & > .square {
-    @extend .cbp-btn__square-danger;
+    // @extend .cbp-btn__square-danger;
   }
 }
 
diff --git a/packages/styles/src/sass/components/link/_index.scss b/packages/styles/src/sass/components/link/_index.scss
new file mode 100644
index 00000000..ab4abed0
--- /dev/null
+++ b/packages/styles/src/sass/components/link/_index.scss
@@ -0,0 +1,78 @@
+.cbp-link {
+  &:link {
+    color: var(--cbp-color-interactive-primary-base);
+  }
+
+  &:visited {
+    color:  var(--cbp-color-interactive-visited-dark);
+  }
+  
+  &:focus {
+    color: var(--cbp-color-interactive-focus-dark);
+    font-weight: var(--cbp-font-weight-bold);
+    outline: var(--cbp-border-size-md) solid var(--cbp-color-interactive-focus-dark);
+    outline-offset: var(--cbp-border-size-sm);
+
+    &:hover {
+      color: var(--cbp-color-interactive-focus-dark);
+    }
+  }
+
+  &:hover {
+    color:  var(--cbp-color-interactive-primary-dark);
+    font-weight: var(--cbp-font-weight-bold);
+  }
+
+  &[aria-disabled=true] {
+    color: var(--cbp-color-interactive-disabled-dark);
+    font-style: italic;
+    text-decoration: underline;
+  
+    &:hover {
+      color: var(--cbp-color-interactive-neutral-dark);
+    }
+  
+    &:focus {
+      color: var(--cbp-color-interactive-focus-dark);
+    }
+  }
+}
+
+.cbp-link--definition:link {
+  text-decoration-style: dotted;
+}
+
+[data-cbp-theme="dark"] .cbp-link {
+  &:link {
+    color: var(--cbp-color-interactive-primary-light);
+  }
+  
+  &:visited {
+    color: var(--cbp-color-interactive-visited-light);
+  }
+
+  &:focus {
+    color: var(--cbp-color-interactive-focus-light);
+    outline: var(--cbp-border-size-md) solid var(--cbp-color-interactive-focus-light);
+
+    &:hover {
+      color: var(--cbp-color-interactive-focus-light);
+    }
+  }
+
+  &:hover {
+    color:  var(--cbp-color-interactive-primary-base);
+  }
+
+  &[aria-disabled=true] {
+    color: var(--cbp-color-interactive-disabled-light);
+  
+    &:hover {
+      color: var(--cbp-color-interactive-neutral-light);
+    }
+  
+    &:focus {
+      color: var(--cbp-color-interactive-focus-light);
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/styles/src/stories/Introduction.stories.mdx b/packages/styles/src/stories/Introduction.stories.mdx
new file mode 100644
index 00000000..dc12811b
--- /dev/null
+++ b/packages/styles/src/stories/Introduction.stories.mdx
@@ -0,0 +1,40 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Foundations/Introduction" />
+
+<style>
+  {`
+    .cbp-mdx-intro {
+      text-align: center;
+    }
+
+    .cbp-mdx-intro img {
+      display: inline-block;
+      margin-bottom: 2rem;
+    }
+
+    .cbp-mdx-intro h1 {
+      font-size: 2.5rem;
+      font-weight: 700;
+      margin-bottom: 3rem;
+    }
+
+    .cbp-mdx-wip {
+      font-size: 1rem;
+      line-height: 1.5;
+    }
+  `}
+</style>
+
+<div class="cbp-mdx-intro">
+  <img src="assets/images/CBP_SEAL.svg" height="245" width="245" />
+
+  # CBP Design System
+</div>
+
+## Work in Progress
+---
+
+<p class="cbp-mdx-wip">
+  The CBP Design System (1.0) is still in a stage of <b>very active development</b>. As such, much of the code base is still somewhat fragile and may break at any time. While we encourage you to explore our offerings, please do so with the knowledge that the codebase in these repositories will change rapidly and with little warning. Use at your own risk. We will communicate when a stable release will be made available.
+</p>
\ No newline at end of file