diff --git a/web/src/layouts/MainLayout/MainLayout.js b/web/src/layouts/MainLayout/MainLayout.js
index 5d5dcba..b3d5a2c 100644
--- a/web/src/layouts/MainLayout/MainLayout.js
+++ b/web/src/layouts/MainLayout/MainLayout.js
@@ -11,36 +11,41 @@ const MainLayout = ({ children }) => {
   return (
     <>
       <header>
-        <nav className="flex justify-between h-20 bg-gray-900">
+        <nav className="flex justify-between h-20 px-12 bg-gradient-to-r from-gray-900 to-indigo-900">
           <ul className="flex items-center">
             <li>
               <Link to={routes.home()}>
                 <Tooltip title="We need a logo!" >
-                  <div className="h-10 w-10 bg-indigo-500 rounded-full ml-12" data-tip="hello world" data-place="bottom"></div>
+                  <div className="h-10 w-10 bg-indigo-500 rounded-full" data-tip="hello world" data-place="bottom"></div>
                 </Tooltip>
               </Link>
             </li>
             <li>
               <Tooltip title="Very alpha, there's lots of work todo" >
                 <div className="ml-8 flex">
-                  <h2 className="text-indigo-200 text-2xl">CadHub</h2>
-                  <div className="text-pink-500 pb-4 text-sm" >pre-alpha</div>
+                  <h2 className="text-indigo-200 text-4xl font-ropa-sans tracking-widest">CadHub</h2>
+                  <div className="text-pink-500 pb-4 text-sm font-ropa-sans" >pre-alpha</div>
                 </div>
               </Tooltip>
             </li>
           </ul>
           <ul className="flex items-center">
-            <li className="mr-8 rounded-full border-2 border-indigo-300">
+            <li className="mr-8 h-10 w-10 rounded-full border-2 border-indigo-300 flex items-center justify-center">
               <Link to={routes.newPart()}>
                 <Svg name="plus" className="text-indigo-300" />
               </Link>
             </li>
-            <li className="mr-12 p-px border-2 rounded-full border-indigo-300 text-indigo-200">
-              <a href="#" onClick={isAuthenticated ? logOut : logIn}>
-                {isAuthenticated ? 'Log Out' : 'Log In'}
-                <img src={avatar} className="rounded-full h-10 w-10" />
-              </a>
-            </li>
+            {
+              isAuthenticated ?
+              <li className="h-10 w-10 border-2 rounded-full border-indigo-300 text-indigo-200">
+                <a href="#" onClick={logOut}>
+                  <img src={avatar} className="rounded-full object-cover" />
+                </a>
+              </li>:
+              <li>
+                <a href="#" className='text-indigo-200 font-semibold underline' onClick={logIn}>Sign in/up</a>
+              </li>
+            }
           </ul>
         </nav>
       </header>