diff --git a/src/assets/scss/components/navigation.scss b/src/assets/scss/components/navigation.scss
index 449fcde..7737e97 100644
--- a/src/assets/scss/components/navigation.scss
+++ b/src/assets/scss/components/navigation.scss
@@ -11,7 +11,11 @@
     height: 25px;
   }
 }
-
+.btn-text-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 @media only screen and (max-width: 768px) {
   .nav-header {
     padding: 22px 10px 0;
diff --git a/src/components/Navigation.js b/src/components/Navigation.js
index 9aa2f7b..6c4b08d 100644
--- a/src/components/Navigation.js
+++ b/src/components/Navigation.js
@@ -65,7 +65,7 @@ const Navigation = (props) => {
       <nav className='navbar-content flex flex-row'>
         {state.auth && (
           <Link
-            className='btn btn-default'
+            className='btn btn-default btn-text-center'
             data-cy='btn-new-story'
             to='/newStory'
           >