diff --git a/components/Layout.tsx b/components/Layout.tsx
index c57d8fd..3369d4d 100644
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@@ -15,7 +15,7 @@ const Layout = ({ children, title = 'This is the default title' }: Props) => (
       <meta name="viewport" content="initial-scale=1.0, width=device-width" />
     </Head>
     <header>
-    <nav className="navbar" role="navigation" aria-label="main navigation">
+    <nav className="navbar is-primary" role="navigation" aria-label="main navigation">
   <div className="navbar-brand">
     <a className="navbar-item" href="https://bulma.io">
       <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28"/>
@@ -80,6 +80,10 @@ const Layout = ({ children, title = 'This is the default title' }: Props) => (
       <a className="navbar-item" href="/users">
         Users List
       </a>
+
+      <a className="navbar-item" href="/api/users">
+        Users API
+      </a>
     </div>
 
     <div className="navbar-end">
diff --git a/theming/_variables.scss b/theming/_variables.scss
index 3ebf3c8..fadc172 100644
--- a/theming/_variables.scss
+++ b/theming/_variables.scss
@@ -1,3 +1,7 @@
 ////////////////////////////////////////////////
 // DEFAULT
-////////////////////////////////////////////////
\ No newline at end of file
+////////////////////////////////////////////////
+$UTD-ORANGE: rgb(232,117,0);
+$UTD-GREEN: rgb(18,71,52);
+
+$primary: $UTD-GREEN;
\ No newline at end of file