diff --git a/client/components/Nav.jsx b/client/components/Nav.jsx
index 93c47fd2..a34b9e46 100644
--- a/client/components/Nav.jsx
+++ b/client/components/Nav.jsx
@@ -541,13 +541,13 @@ class Nav extends React.PureComponent {
     return (
       <ul className="nav__items-right" title="user-menu">
         <li className="nav__item">
-          <Link to="/login">
+          <Link to="/login" className="nav__auth-button">
             <span className="nav__item-header">Log in</span>
           </Link>
         </li>
-        <span className="nav__item-spacer">or</span>
+        <span className="nav__item-or">or</span>
         <li className="nav__item">
-          <Link to="/signup">
+          <Link to="/signup" className="nav__auth-button">
             <span className="nav__item-header">Sign up</span>
           </Link>
         </li>
diff --git a/client/styles/components/_nav.scss b/client/styles/components/_nav.scss
index ab7414fc..f63ef9ad 100644
--- a/client/styles/components/_nav.scss
+++ b/client/styles/components/_nav.scss
@@ -44,15 +44,10 @@
   }
 }
 
-.nav__item:first-child,
 .nav__item--no-icon {
   padding-left: #{15 / $base-font-size}rem;
 }
 
-.nav__item:last-child {
-  padding-right: #{15 / $base-font-size}rem;
-}
-
 .nav__item-header-triangle polygon {
   @include themify() {
     fill: getThemifyVariable('icon-color');
@@ -123,10 +118,20 @@
 .nav__item-spacer {
   @include themify() {
     color: map-get($theme-map, 'inactive-text-color');
-    margin: 0 #{8 / $base-font-size}rem;
+    margin-left: #{8 / $base-font-size}rem;
   }
 }
 
+.nav__item-or {
+  @include themify() {
+    color: map-get($theme-map, 'inactive-text-color');
+  }
+}
+
+.nav__auth-button {
+  padding: #{10 / $base-font-size}rem;
+}
+
 // .nav__dropdown button {
 //   padding: 0;
 // }