diff --git a/src/img/get-started/make-your-voice-heard-500x500.jpg b/src/img/get-started/make-your-voice-heard-500x500.jpg
new file mode 100644
index 000000000..b73d2a430
Binary files /dev/null and b/src/img/get-started/make-your-voice-heard-500x500.jpg differ
diff --git a/src/img/get-started/make-your-voice-heard-500x500.png b/src/img/get-started/make-your-voice-heard-500x500.png
deleted file mode 100644
index 3ed8dbd6a..000000000
Binary files a/src/img/get-started/make-your-voice-heard-500x500.png and /dev/null differ
diff --git a/src/img/welcome/header-image-desktop.jpg b/src/img/welcome/header-image-desktop.jpg
new file mode 100644
index 000000000..7f1f8cdfc
Binary files /dev/null and b/src/img/welcome/header-image-desktop.jpg differ
diff --git a/src/img/welcome/header-image-desktop.png b/src/img/welcome/header-image-desktop.png
deleted file mode 100755
index dc6deeed2..000000000
Binary files a/src/img/welcome/header-image-desktop.png and /dev/null differ
diff --git a/src/js/common/stories/Button.jsx b/src/js/common/stories/Button.jsx
deleted file mode 100644
index a8c17f021..000000000
--- a/src/js/common/stories/Button.jsx
+++ /dev/null
@@ -1,50 +0,0 @@
-// import React from 'react';
-// import PropTypes from 'prop-types';
-// import './button.css';
-
-// /**
-//  * Primary UI component for user interaction
-//  */
-// export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
-//   const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
-//   return (
-//     <button
-//       type="button"
-//       className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
-//       style={backgroundColor && { backgroundColor }}
-//       {...props}
-//     >
-//       {label}
-//     </button>
-//   );
-// };
-
-// Button.propTypes = {
-//   /**
-//    * Is this the principal call to action on the page?
-//    */
-//   primary: PropTypes.bool,
-//   /**
-//    * What background color to use
-//    */
-//   backgroundColor: PropTypes.string,
-//   /**
-//    * How large should the button be?
-//    */
-//   size: PropTypes.oneOf(['small', 'medium', 'large']),
-//   /**
-//    * Button contents
-//    */
-//   label: PropTypes.string.isRequired,
-//   /**
-//    * Optional click handler
-//    */
-//   onClick: PropTypes.func,
-// };
-
-// Button.defaultProps = {
-//   backgroundColor: null,
-//   primary: false,
-//   size: 'medium',
-//   onClick: undefined,
-// };
diff --git a/src/js/common/stories/Button.stories.js b/src/js/common/stories/Buttons.stories.js
similarity index 98%
rename from src/js/common/stories/Button.stories.js
rename to src/js/common/stories/Buttons.stories.js
index bbbec8d3b..6bad8303a 100644
--- a/src/js/common/stories/Button.stories.js
+++ b/src/js/common/stories/Buttons.stories.js
@@ -4,7 +4,7 @@ import Button from '../../components/Buttons/BaseButton';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 export default {
-  title: 'Example/Button',
+  title: 'Design System/Buttons',
   component: Button,
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
diff --git a/src/js/common/stories/Colors.stories.js b/src/js/common/stories/Colors.stories.js
new file mode 100644
index 000000000..a221eac48
--- /dev/null
+++ b/src/js/common/stories/Colors.stories.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import colors from '../components/Style/Colors';
+
+export default {
+  title: 'Design System/Colors',
+};
+
+const ColorBox = ({ color, label, subtitle }) => (
+    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '220px' }}>
+      <div
+      style={{
+        backgroundColor: color,
+        width: '120px',
+        height: '120px',
+        borderRadius: '50%',
+        strokeWidth: '2px',
+        stroke: '#EFEFEF',
+        boxShadow: '3px 9px 6px 0px rgba(0, 0, 0, 0.25) inset, 10px 14px 11px 0px rgba(0, 0, 0, 0.16) inset',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'flex-end',
+      }}
+      />
+      <div style={{ marginTop: '14px', color: colors.darkGrey, textAlign: 'center', fontFamily: 'Roboto', fontSize: '18px', fontStyle: 'normal', fontWeight: 400 }}>{label}</div>
+      <div style={{ marginBottom: '14px', color: colors.grey, textAlign: 'center', fontFamily: 'Roboto', fontSize: '20px', fontStyle: 'normal', fontWeight: 400, lineHeight: '120.4%', textTransform: 'lowercase' }}>{subtitle}</div>
+    </div>
+);
+
+export const Colors = () => (
+  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100vh' }}>
+    <ColorBox color={colors.primary} label="Primary Color" subtitle="#0834CD" />
+    <ColorBox color={colors.primaryHover} label="Primary Hover Color" subtitle="#09288A" />
+    <ColorBox color={colors.darkGrey} label="Dark Grey" subtitle="#454F69" />
+    <ColorBox color={colors.middleGrey} label="Middle Grey" subtitle="#8C92A2" />
+  </div>
+);
+
diff --git a/src/js/common/stories/button.css b/src/js/common/stories/button.css
deleted file mode 100644
index dc91dc763..000000000
--- a/src/js/common/stories/button.css
+++ /dev/null
@@ -1,30 +0,0 @@
-.storybook-button {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  font-weight: 700;
-  border: 0;
-  border-radius: 3em;
-  cursor: pointer;
-  display: inline-block;
-  line-height: 1;
-}
-.storybook-button--primary {
-  color: white;
-  background-color: #1ea7fd;
-}
-.storybook-button--secondary {
-  color: #333;
-  background-color: transparent;
-  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
-}
-.storybook-button--small {
-  font-size: 12px;
-  padding: 10px 16px;
-}
-.storybook-button--medium {
-  font-size: 14px;
-  padding: 11px 20px;
-}
-.storybook-button--large {
-  font-size: 16px;
-  padding: 12px 24px;
-}
diff --git a/src/js/components/Buttons/BaseButton.jsx b/src/js/components/Buttons/BaseButton.jsx
index 528cb3131..a169632ff 100644
--- a/src/js/components/Buttons/BaseButton.jsx
+++ b/src/js/components/Buttons/BaseButton.jsx
@@ -4,48 +4,52 @@ import styled from 'styled-components';
 import colors from '../../common/components/Style/Colors';
 
 const StyledButton = styled.button`
-  /* Default styles */
-  color: ${colors.white};
-  font-weight: 600;
-  border-radius: 4px;
-  aria-label: "Button";
-  border: none;
-  cursor: pointer;
+/* Default styles */
+color: ${colors.white};
+font-weight: 600;
+border-radius: 4px;
+aria-label: "Button";
+border: none;
+cursor: pointer;
 
-  /* Hover state */
-  &:hover {
-    background-color: ${colors.primaryHover};
-  }
-
-  /* Primary styles */
-  ${(props) => props.primary && `
-    background-color: ${colors.primary};
-    color: white;
-  `}
+&:focus {
+  outline: 2px solid ${colors.primary} !important;
+  outline-offset: 2px;
+}
 
-  /* Primary Disabled styles */
-  ${(props) => !props.primary && `
-    background-color: ${colors.lightGrey};
-    color: ${colors.grey};
-    cursor: not-allowed;
+/* Hover state */
+&:hover {
+  background-color: ${colors.primaryHover};
+}
 
-    &:hover {
-      background-color: ${colors.lightGrey};
-      color: ${colors.grey};
-    }
+/* Primary styles */
+${(props) => props.primary && `
+  background-color: ${colors.primary};
+  color: white;
+`}
 
-  `}
+/* Primary Disabled styles */
+${(props) => !props.primary && `
+  background-color: ${colors.lightGrey};
+  color: ${colors.grey};
+  cursor: not-allowed;
 
-  /* Secondary styles */
-    ${(props) => props.secondary && `
-    background-color: transparent;
+  &:hover {
+    background-color: ${colors.lightGrey};
     color: ${colors.grey};
+  }
+`}
 
-    &:hover {
-      background-color: ${colors.secondaryHover};
-      color: ${colors.primary}};
-      cursor: pointer;
-    }
+/* Secondary styles */
+  ${(props) => props.secondary && `
+  background-color: transparent;
+  color: ${colors.grey};
+
+  &:hover {
+    background-color: ${colors.secondaryHover};
+    color: ${colors.primary}};
+    cursor: pointer;
+  }
     `}
 
   /* Size styles */
@@ -63,12 +67,17 @@ const StyledButton = styled.button`
     font-size: 18px;
     padding: 15px;
     width: 450px;
-
   `}
 `;
 
-const Button = ({ primary, size, label, ...props }) => (
-  <StyledButton primary={primary === true} size={size} aria-label={label} {...props}>
+const Button = ({ primary, size, label, onClick, ...props }) => (
+  <StyledButton
+    primary={primary === true}
+    size={size}
+    aria-label={label}
+    onClick={onClick}
+    {...props}
+  >
     {label}
   </StyledButton>
 );
@@ -82,6 +91,7 @@ Button.propTypes = {
   onClick: PropTypes.func,
 };
 
+
 Button.defaultProps = {
   primary: false,
   size: 'medium',
diff --git a/src/js/components/Ready/ViewUpcomingBallotButton.jsx b/src/js/components/Ready/ViewUpcomingBallotButton.jsx
index e01f3fd93..408970490 100644
--- a/src/js/components/Ready/ViewUpcomingBallotButton.jsx
+++ b/src/js/components/Ready/ViewUpcomingBallotButton.jsx
@@ -99,36 +99,12 @@ class ViewUpcomingBallotButton extends React.Component {
       electionDataExistsForUpcomingElection,
     } = this.state;
     return (
-    // <ViewUpcomingBallotButtonWrapper>
-    //   <Button
-    //     color="primary"
-    //     id={electionDataExistsForUpcomingElection ? 'viewUpcomingBallotButton' : 'viewUpcomingBallotFindYourFriends'}
-    //     onClick={electionDataExistsForUpcomingElection ? this.onClickFunctionLocal : this.goToFindFriends}
-    //     style={{
-    //       boxShadow: 'none !important',
-    //       textTransform: 'none',
-    //       width: 250,
-    //     }}
-    //     variant="contained"
-    //   >
-    //     {electionDataExistsForUpcomingElection ? (
-    //       <>View your ballot</>
-    //     ) : (
-    //       <>Find your friends</>
-    //     )}
-    //   </Button>
-    // </ViewUpcomingBallotButtonWrapper>
-
       <ViewUpcomingBallotButtonWrapper>
         <BaseButton
           id={electionDataExistsForUpcomingElection ? 'viewUpcomingBallotButton' : 'viewUpcomingBallotFindYourFriends'}
           onClick={electionDataExistsForUpcomingElection ? this.onClickFunctionLocal : this.goToFindFriends}
           primary
-          label={electionDataExistsForUpcomingElection ? (
-            <>View Your Ballot</>
-          ) : (
-            <>Find Your Friends</>
-          )}
+          label={electionDataExistsForUpcomingElection ? 'View Your Ballot' : 'Find Your Friends'}
         />
       </ViewUpcomingBallotButtonWrapper>
     );