diff --git a/public/css/hop-styling.css b/public/css/hop-styling.css
index b6524f00..b6ce2c08 100644
--- a/public/css/hop-styling.css
+++ b/public/css/hop-styling.css
@@ -4,7 +4,7 @@
 /* IMPORTANT: READ README.md in this folder! Do not edit .css file directly! */
 @import url("https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap");
 body {
-  font-family: Urbanist, Arial, Helvetica, sans-serif;
+  font-family: Urbanist, Roboto, Arial, sans-serif;
   font-weight: 400;
   color: #000;
   margin: 0;
diff --git a/public/index.html b/public/index.html
index ae1b046e..d3c8d677 100644
--- a/public/index.html
+++ b/public/index.html
@@ -12,6 +12,7 @@
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
 
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
diff --git a/public/scss/hop-styling.scss b/public/scss/hop-styling.scss
index eab65544..26aec47e 100644
--- a/public/scss/hop-styling.scss
+++ b/public/scss/hop-styling.scss
@@ -4,7 +4,7 @@
 /* IMPORTANT: READ README.md in this folder! Do not edit .css file directly! */
 @import url("https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap");
 body {
-    font-family: Urbanist, Arial, Helvetica, sans-serif;
+    font-family: Urbanist, Roboto, Arial, sans-serif;
     font-weight: 400;
     color: #000;
     margin: 0;
diff --git a/src/iss-components/nav-button/nav-button.spec.js b/src/iss-components/nav-button/nav-button.spec.js
deleted file mode 100644
index 3f5ace6e..00000000
--- a/src/iss-components/nav-button/nav-button.spec.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import navButton from '@/iss-components/nav-button/nav-button.vue';
-
-describe('NavButton', () => {
-    it('should display input when type is button', () => {
-        const wrapper = shallowMount(navButton, {
-            propsData: {
-                text: 'Hello',
-                scenario: 'test',
-                type: 'button'
-            }
-        });
-
-        expect(wrapper.find('input').exists()).toBe(true);
-        expect(wrapper.find('p').exists()).toBe(false);
-    });
-
-    it('should display p element when type is text', () => {
-        const wrapper = shallowMount(navButton, {
-            propsData: {
-                text: 'Hello',
-                scenario: 'test',
-                type: 'text'
-            }
-        });
-
-        expect(wrapper.find('input').exists()).toBe(false);
-        expect(wrapper.find('p').exists()).toBe(true);
-    });
-});
diff --git a/src/iss-components/nav-button/nav-button.vue b/src/iss-components/nav-button/nav-button.vue
deleted file mode 100644
index 8bc801bb..00000000
--- a/src/iss-components/nav-button/nav-button.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<template>
-    <input
-        v-if="type == 'button'"
-        type="button"
-        class="nav-button"
-        :value="text"
-        @click="navTo" />
-    <p
-        v-else
-        type=""
-        class="nav-text"
-        @click="navTo">
-        {{ text }}
-    </p>
-</template>
-
-<script>
-
-export default ({
-    name: 'nav-button',
-    props: {
-        text: String,
-        scenario: String,
-        type: String
-    },
-    methods: {
-        navTo() {
-            this.$router.navigate(this.scenario, this.$route);
-        }
-    }
-});
-</script>
-
-<style lang="scss" scoped>
-    .nav-button {
-        background-color: lightgray;
-        padding: 2.5px;
-        border-radius: 5px;
-        min-width: 70px;
-        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
-        font-size: 14px;
-    }
-
-    .nav-text {
-        color: blue;
-        cursor: pointer;
-        text-decoration: underline;
-    }
-
-</style>
diff --git a/src/styles/ux-variables.scss b/src/styles/ux-variables.scss
index 2d78a6dc..0d7a6d0c 100644
--- a/src/styles/ux-variables.scss
+++ b/src/styles/ux-variables.scss
@@ -117,7 +117,7 @@ $theme-colors: (
 $body-color: $gray-600;
 
 //Fonts
-$font-family-sans-serif: UrbanistRegular, Arial, Helvetica, sans-serif;
+$font-family-sans-serif: UrbanistRegular, Roboto, Arial, sans-serif;
 $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
     monospace;
 // stylelint-enable value-keyword-case