diff --git a/services/design-system/.storybook/preview.ts b/services/design-system/.storybook/preview.ts
index 8c2a141ca..91a20c2c5 100644
--- a/services/design-system/.storybook/preview.ts
+++ b/services/design-system/.storybook/preview.ts
@@ -1,4 +1,5 @@
 import type { Preview } from '@storybook/react';
+import '../src/styles/index.scss';
 
 const preview: Preview = {
   parameters: {
diff --git a/services/design-system/README.md b/services/design-system/README.md
index a0dae1e40..cc069d0c0 100644
--- a/services/design-system/README.md
+++ b/services/design-system/README.md
@@ -13,9 +13,11 @@ publishes a package of those designs for use in other applications.
 
 **Features**:
 
-- Aids in local development of UI components.
-- Deploys a static design system website.
-- Front-end library containing UI components.
+- **UI Component Development**: Allows for the local development of UI
+  components in isolation.
+- **UI Component Library**: This is library containing UI components that
+  front-ends can use to ensure consistently in design.
+- **UI Design System**: Deploys a static design system website.
 
 ## Components
 
diff --git a/services/design-system/src/components/Button/Button.tsx b/services/design-system/src/components/Button/Button.tsx
index 2dfe39ee5..a25efb89c 100644
--- a/services/design-system/src/components/Button/Button.tsx
+++ b/services/design-system/src/components/Button/Button.tsx
@@ -1,4 +1,5 @@
 import MUIButton, { ButtonProps as MUIButtonProps } from '@mui/material/Button';
+import './style.module.scss';
 
 export type ButtonProps = {
   selected?: boolean;
@@ -13,13 +14,7 @@ export const Button = (props: ButtonProps) => {
   return (
     <MUIButton
       {...muiProps}
-      style={{
-        ...(props.selected && { backgroundColor: '#616366', color: '#FFF' }),
-        fontFamily: 'Helvetica, arial, sans-serif',
-        fontWeight: 'bold',
-        borderRadius: '36px',
-        padding: '15px 30px 10px 30px',
-      }}
+      className='button'
     >
       {children}
     </MUIButton>
diff --git a/services/design-system/src/components/Button/style.module.scss b/services/design-system/src/components/Button/style.module.scss
new file mode 100644
index 000000000..4b22a37a2
--- /dev/null
+++ b/services/design-system/src/components/Button/style.module.scss
@@ -0,0 +1,17 @@
+.button {
+  &.select {
+    background-color: #616366 !important;
+    color: #FFF !important;
+  };
+  font-family: Helvetica, arial, sans-serif !important;
+  font-weight: bold !important;
+  border-radius: 36px !important;
+  padding: 15px 30px 10px 30px !important;
+  &:focus {
+    outline-style: solid !important;
+    outline: #F00;
+    outline-color: #FFF !important;
+    outline-offset: -10px !important;
+    outline-width: 4px !important;
+  }
+}
\ No newline at end of file
diff --git a/services/design-system/src/components/PageFooter/PageFooter.tsx b/services/design-system/src/components/PageFooter/PageFooter.tsx
index 40b4a970f..c3b54414c 100644
--- a/services/design-system/src/components/PageFooter/PageFooter.tsx
+++ b/services/design-system/src/components/PageFooter/PageFooter.tsx
@@ -1,4 +1,4 @@
-// import './page-footer.scss';
+import './style.module.scss';
 
 export type PageFooterLink = {
   label: string;
diff --git a/services/design-system/src/components/PageFooter/page-footer.scss b/services/design-system/src/components/PageFooter/style.module.scss
similarity index 100%
rename from services/design-system/src/components/PageFooter/page-footer.scss
rename to services/design-system/src/components/PageFooter/style.module.scss
diff --git a/services/design-system/src/components/Typography/style.module.scss b/services/design-system/src/components/Typography/style.module.scss
index 2769bc6cb..71ba43111 100644
--- a/services/design-system/src/components/Typography/style.module.scss
+++ b/services/design-system/src/components/Typography/style.module.scss
@@ -6,12 +6,12 @@
   font-family: "Eczar", serif;
   font-weight: 800;
   font-size: 2rem;
-  color: var(--primary);
+  // color: var(--primary);
   padding: 12px 0;
   &.fill {
     border-radius: 5px;
     padding: 13px;
-    color: var(--primary);
+    // color: var(--primary);
   };
   &.border {
     font-size: 4rem;
diff --git a/services/design-system/src/styles/index.scss b/services/design-system/src/styles/index.scss
new file mode 100644
index 000000000..f1b98eb8e
--- /dev/null
+++ b/services/design-system/src/styles/index.scss
@@ -0,0 +1,3 @@
+@forward '../components/Typography/style.module.scss';
+@forward '../components/PageFooter/style.module.scss';
+@forward '../components/Button/style.module.scss';
\ No newline at end of file