diff --git a/package.json b/package.json
index 6f4d930..1abafb3 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,7 @@
     "deploy": "firebase deploy"
   },
   "dependencies": {
-    "@brown-ccv/disco-styles": "2.2.0",
+    "@brown-ccv/disco-styles": "2.2.1",
     "@fortawesome/free-brands-svg-icons": "^5.14.0",
     "@fortawesome/vue-fontawesome": "2",
     "bulma": "^0.9.0",
diff --git a/src/components/d-hero.vue b/src/components/d-hero.vue
index 479ca69..9aef6c4 100644
--- a/src/components/d-hero.vue
+++ b/src/components/d-hero.vue
@@ -12,6 +12,7 @@
         <h2 data-testid="subtitle" class="d-subtitle">
           {{ subtitle }}
         </h2>
+        <slot name="button"></slot>
       </div>
     </div>
   </section>
diff --git a/src/components/index.js b/src/components/index.js
index f69f6d1..de17bd6 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -9,5 +9,7 @@ export { default as DBanner } from './d-banner.vue';
 export { default as DNavbar } from './d-navbar.vue';
 export { default as DPersonCard } from './d-person-card.vue';
 export { default as DFooter } from './d-footer.vue';
+export { default as DCard } from './d-card.vue';
+export { default as DModal } from './d-modal.vue';
 
 export { default as discoBaseMixin } from '../mixins/disco-base-mixin.js';
diff --git a/src/stories/footer.stories.mdx b/src/stories/footer.stories.mdx
index 179c61f..5355f05 100644
--- a/src/stories/footer.stories.mdx
+++ b/src/stories/footer.stories.mdx
@@ -173,7 +173,7 @@ export const Template = (args, { argTypes }) => ({
 });
 
 <Canvas >
-    <Story name='Footer' args={{variant: 'white'}}>
+    <Story name='Footer' args={{variant: 'light'}}>
         {Template.bind({})}
     </Story>
 </Canvas>
\ No newline at end of file
diff --git a/src/stories/hero.stories.mdx b/src/stories/hero.stories.mdx
index 154f14f..760e29b 100644
--- a/src/stories/hero.stories.mdx
+++ b/src/stories/hero.stories.mdx
@@ -1,12 +1,15 @@
 import { Meta, ArgsTable, Story, Canvas } from '@storybook/addon-docs/blocks';
 import DHero from '../components/d-hero.vue';
+import DButton from '../components/d-button.vue';
+
 import { COLOR_VARIANTS } from '../utils';
 
 <Meta 
     title='Elements/Hero' 
     component={DHero} 
     argTypes={{
-        variant: { control: { type: 'select', options: COLOR_VARIANTS } }
+        variant: { control: { type: 'select', options: COLOR_VARIANTS } },
+        accent: { control: { type: 'select', options: COLOR_VARIANTS } }
     }}
 />
 
@@ -21,12 +24,16 @@ import { COLOR_VARIANTS } from '../utils';
 
 export const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components: { DHero },
-  template: `<DHero :title='title' :subtitle='subtitle' :variant='variant' :fullHeight="fullHeight"/>`
+  components: { DHero, DButton },
+  template: `<DHero :title='title' :subtitle='subtitle' :variant='variant' :fullHeight="fullHeight">
+                <template #button>
+                    <DButton :variant='accent' name="Learn about CCV's services" />
+                </template>
+  `
 });
 
 <Canvas >
-    <Story name='Hero' args={{variant: 'success', title: 'Disco Design System', subtitle: 'Powering CCV\'s Web Apps', fullHeight: false}}>
+    <Story name='Hero' args={{variant: 'warning', accent: 'success', title: 'Disco Design System', subtitle: 'Powering CCV\'s Web Apps', fullHeight: false}}>
         {Template.bind({})}
     </Story>
 </Canvas>
\ No newline at end of file
diff --git a/src/stories/navbar.stories.mdx b/src/stories/navbar.stories.mdx
index 5ac8ac0..366d439 100644
--- a/src/stories/navbar.stories.mdx
+++ b/src/stories/navbar.stories.mdx
@@ -1,26 +1,31 @@
-import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks';
+import { Meta, ArgsTable, Story, Canvas } from '@storybook/addon-docs/blocks';
 import DNavbar from '../components/d-navbar.vue';
 import DButton from '../components/d-button.vue';
 import CCVLogo from '../components/logos/CCVLogo.vue'
 import BrownLogo from '../components/logos/BrownLogo.vue'
 
-<Meta title="Elements/Navigation Bar" component={DNavbar} />
+import { COLOR_VARIANTS } from '../utils';
+
+<Meta title="Elements/Navigation Bar" 
+	component={DNavbar}     
+	argTypes={{
+        variant: { control: { type: 'select', options: COLOR_VARIANTS } }
+    }} 
+/>
 
 # Table of Contents
 
-<Props of={DNavbar} />
+<ArgsTable story="Navbar" />
 
 # DNavbar component
 ```jsx
 <DNavbar />
 ```
 
-<Preview >
-	<Story name="Navigation Bar">
-		{{
-			components: {DNavbar, CCVLogo, BrownLogo, DButton},
-			template: `
-				<DNavbar>
+export const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { DNavbar, CCVLogo, BrownLogo, DButton },
+  template: `<DNavbar :variant="variant">
 					<template v-slot:brand>
 						<a class="navbar-item" href="#" aria-label="Back to Home">
 							<BrownLogo class="d-nav-brand" size="m" />
@@ -118,12 +123,16 @@ import BrownLogo from '../components/logos/BrownLogo.vue'
 						</li>
 					</template>
 				</DNavbar>
-			`
-		}}
+  `
+});
+
+<Canvas>
+	<Story name="Navigation Bar" args={{variant: 'light'}}>
+    {Template.bind({})}
 	</Story>
-</Preview>
+</Canvas>
 
-<Preview >
+<Canvas>
 	<Story name="Navigation Bar Simple">
 		{{
 			components: {DNavbar, CCVLogo, BrownLogo, DButton},
@@ -132,4 +141,4 @@ import BrownLogo from '../components/logos/BrownLogo.vue'
 			`
 		}}
 	</Story>
-</Preview>
\ No newline at end of file
+</Canvas>
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 1884fc9..50d0be4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1056,10 +1056,10 @@
   resolved "https://registry.yarnpkg.com/@base2/pretty-print-object/-/pretty-print-object-1.0.0.tgz#860ce718b0b73f4009e153541faff2cb6b85d047"
   integrity sha512-4Th98KlMHr5+JkxfcoDT//6vY8vM+iSPrLNpHhRyLx2CFYi8e2RfqPLdpbnpo0Q5lQC5hNB79yes07zb02fvCw==
 
-"@brown-ccv/disco-styles@2.2.0":
-  version "2.2.0"
-  resolved "https://npm.pkg.github.com/download/@brown-ccv/disco-styles/2.2.0/306d87690530f63cc1d420b00b1da3294ecf3952963dde2999068b20b813b128#14bf0d5154b33bd28d7c2fe8563f13f05c68c623"
-  integrity sha512-ooTtx84vCoxlj8IKod3ZSKXU4ryw4I6bpnRjZCv1BNJlZ3PonkdOw0jUiA/HUK+KKXufFm4KSNBxHn3rnCjp5Q==
+"@brown-ccv/disco-styles@2.2.1":
+  version "2.2.1"
+  resolved "https://npm.pkg.github.com/download/@brown-ccv/disco-styles/2.2.1/d26719417a7d6f6d95576784cfd5e7d5d577eb33fc7ffdcafe738cb4e11f3d92#82b4ccdd6ef8c113f9ac94b6e615386139edfd6d"
+  integrity sha512-IGOIOckk/3zyHCQgRDTTpg5v34Ze1nmjmuNfX8umadw5jNiptiQJ6wYOM0S+pI/yAciLPbuLiUKz9tDrZTKjWg==
   dependencies:
     bulma "^0.9.0"
     cz-conventional-changelog "^3.2.0"