diff --git a/vocodes/public/index.html b/vocodes/public/index.html
index e2792566ff..23fc4ba8f3 100644
--- a/vocodes/public/index.html
+++ b/vocodes/public/index.html
@@ -39,6 +39,7 @@
 
       gtag('config', 'UA-32811180-4');
     </script>
+    <link href="https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:ital,wght@0,300;0,400;1,300&family=Fugaz+One&family=Nunito&display=swap" rel="stylesheet"> 
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/vocodes/src/App.scss b/vocodes/src/App.scss
index 7da91651c1..0169424c21 100644
--- a/vocodes/src/App.scss
+++ b/vocodes/src/App.scss
@@ -78,9 +78,20 @@ footer {
 }
 
 nav {
-  font-family: $nav-font-family;
+  font-family: "Fugaz One";
   width: $page-width;
   text-align: justify;
+  #logo_text {
+    font-family: "Fugaz One";
+    font-size: 2.5em;
+    .vo {
+      color:  #209CEE;
+    }
+    .codes {
+      color:  rgba(32, 156, 238, 0.685);
+    }
+    margin-right: 0.5em;
+  }
   a,
   a:link {
     text-decoration: none;
diff --git a/vocodes/src/navigation/TopNav.tsx b/vocodes/src/navigation/TopNav.tsx
index bda2383885..7464c5196c 100644
--- a/vocodes/src/navigation/TopNav.tsx
+++ b/vocodes/src/navigation/TopNav.tsx
@@ -9,6 +9,9 @@ interface Props {
 function TopNav(props: Props) {
   return (
     <nav>
+      <span id="logo_text">
+        <span className="vo">Vo</span><span className="codes">codes</span>
+      </span>
       <a href="#speak" onClick={() => props.switchModeCallback(Mode.SPEAK_MODE)}>Speak</a>
       <a href="#history" onClick={() => props.switchModeCallback(Mode.HISTORY_MODE)}>History</a>
       <a href="#use" onClick={() => props.switchModeCallback(Mode.ABOUT_MODE)}>About</a>