diff --git a/frontend/src/apps/main/components/navbar/index.tsx b/frontend/src/apps/main/components/navbar/index.tsx
index 7841216a8..2f5bc1dac 100644
--- a/frontend/src/apps/main/components/navbar/index.tsx
+++ b/frontend/src/apps/main/components/navbar/index.tsx
@@ -1,25 +1,45 @@
-import React from "react";
-import "./style";
-import { Link } from "react-router-dom";
+import React, { useState } from "react";
+import "./style.scss";
+import { Link, NavLink } from "react-router-dom";
 
-export const Navbar = () => (
-  <div className="navbar">
-    <div className="menu">
-      <div className="item">
-        <Link to="/">Logo</Link>
-      </div>
-      <div className="item">
-        <Link to="/Learn">Learn</Link>
-      </div>
-      <div className="item">
-        <Link to="/Learn/Getting_Started">Get Started</Link>
-      </div>
-      <div className="item">
-        <Link to="/Learn/Git_Basics/Git_and_Github">Git and Github</Link>
+interface NavigationLink {
+  id: number;
+  name: string;
+  to: string;
+}
+
+interface Props {
+  navitems: NavigationLink[];
+}
+
+export const Navbar: React.FC<Props> = ({ navitems }) => {
+  const [isOpen, setOpen] = useState("open");
+  const navToggle = () => {
+    isOpen === "" ? setOpen("open") : setOpen("");
+  };
+
+  return (
+    <nav className="Navbar">
+      <Link className="brand" to="/">
+        Dzcode.io
+      </Link>
+      <div className="Navbar__burger" onClick={navToggle}>
+        <div className="burger__button" />
       </div>
-      <div className="item">
-        <Link to="/Articles">Articles</Link>
+      <div className={`Navbar__list ${isOpen}`}>
+        {navitems.map((navitem: NavigationLink) => {
+          return (
+            <NavLink
+              className="navLink"
+              activeClassName="Navbar__link--active"
+              key={navitem.id}
+              to={navitem.to}
+            >
+              {navitem.name}
+            </NavLink>
+          );
+        })}
       </div>
-    </div>
-  </div>
-);
+    </nav>
+  );
+};
diff --git a/frontend/src/apps/main/components/navbar/style.scss b/frontend/src/apps/main/components/navbar/style.scss
index 63d9b7e91..de1fa6b52 100644
--- a/frontend/src/apps/main/components/navbar/style.scss
+++ b/frontend/src/apps/main/components/navbar/style.scss
@@ -1,20 +1,146 @@
 @import "../../../../common/style/variables";
 
-.navbar {
-  height: $navbar-height;
+.Navbar {
+  width: 100%;
+  padding: 2% 10%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
   position: relative;
-  background-color: $light;
-  .menu {
-    .item {
+  background-color: $bg-primary;
+  font-family: "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
+    "Helvetica Neue", sans-serif;
+
+  position: fixed;
+  top: 0;
+  right: 0;
+  .brand {
+    font-size: 1.2rem;
+    color: text-primary;
+    font-weight: bolder;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 15px 0;
+    text-decoration: none;
+    font-weight: bold;
+    color: $text-primary;
+  }
+
+  .Navbar__burger {
+    width: 35px;
+    height: 35px;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .burger__button {
+      width: 100%;
+      height: 3px;
+      position: absolute;
+      top: 50%;
+      right: 0;
+      background-color: $bg-secondary;
+      z-index: 5;
+
+      &::before {
+        content: "";
+        width: 100%;
+        height: 3px;
+        background-color: $bg-secondary;
+        position: absolute;
+        top: -10px;
+        right: 0;
+      }
+
+      &::after {
+        content: "";
+        width: 100%;
+        height: 3px;
+        background-color: $bg-secondary;
+        position: absolute;
+        top: 10px;
+        right: 0;
+      }
+    }
+  }
+
+  .Navbar__list {
+    position: absolute;
+    right: 0;
+    width: 100%;
+    top: 100%;
+    background-color: #fff;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 5px;
+    transform: scaleY(0);
+    transform-origin: top;
+    transition: ease 0.3s;
+    opacity: 0;
+
+    &.open {
+      transform: scaleY(1);
+      transition: ease-in-out 0.5s;
+      opacity: 1;
+    }
+
+    .navLink {
+      text-decoration: none;
+      color: $text-primary;
+      max-width: 150px;
       text-align: center;
-      display: inline-block;
-      width: 20%;
+      padding: 12px;
       position: relative;
-      height: $navbar-height;
-      > * {
+      font-size: 1rem;
+      font-weight: 500;
+
+      &::after {
+        content: "";
         position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
+        top: 100%;
+        left: 20%;
+        width: 0;
+        height: 1px;
+        background-color: $bg-secondary;
+        transform: center;
+        transition: ease-in-out 0.4s;
+      }
+
+      &:hover {
+        &::after {
+          width: 60%;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (min-width: $large) {
+  .Navbar {
+    width: 100%;
+    padding: 10px 5%;
+
+    .brand {
+      font-size: 1.4rem;
+    }
+
+    .Navbar__burger {
+      display: none;
+    }
+    .Navbar__list {
+      position: initial;
+      flex-direction: row;
+      max-width: 60%;
+
+      .navLink {
+        margin-left: 40px;
+        font-size: 1.25rem;
       }
     }
   }
diff --git a/frontend/src/apps/main/entry/index.tsx b/frontend/src/apps/main/entry/index.tsx
index 285b71b33..ee24ec358 100644
--- a/frontend/src/apps/main/entry/index.tsx
+++ b/frontend/src/apps/main/entry/index.tsx
@@ -12,10 +12,19 @@ const Landing = lazy(() => import("t9/apps/main/scenes/landing"));
 const Articles = lazy(() => import("t9/apps/main/scenes/articles"));
 const Learn = lazy(() => import("t9/apps/main/scenes/learn"));
 
+// Temp data: Todo: replace with props from the store
+
+const navitems = [
+  { id: 1, to: "/learn", name: "Learn" },
+  { id: 2, to: "/getstarted", name: "Get Started" },
+  { id: 3, to: "/gitgithub", name: "Git & Github" },
+  { id: 4, to: "/articles", name: "Articles" },
+];
+
 export const App: React.SFC<{}> = () => {
   return (
     <BrowserRouter>
-      <Navbar />
+      <Navbar navitems={navitems} />
       <Suspense fallback={Loading}>
         <Switch>
           <Route path="/" exact={true} component={Landing} />
diff --git a/frontend/src/common/style/_variables.scss b/frontend/src/common/style/_variables.scss
index 30ea8bc12..da37e3396 100644
--- a/frontend/src/common/style/_variables.scss
+++ b/frontend/src/common/style/_variables.scss
@@ -1,13 +1,18 @@
-// TODO: update color palette
-// colors
+// Colors
 $primary: #1c8ad8;
 $secondary: #dc004e;
 $dark: #000;
 $light: #fff;
 $link: #1890ff;
 
-// TODO: update responsiveness range
-// responsiveness
+$text-primary: #000000;
+$text-secondary: #ffffff;
+$bg-primary: #ffffff;
+$bg-secondary: #000000;
+
+// MediaQueries
+$X-large: 1600px;
+$large: 1200px;
 $regular: 800px;
 $medium: 600px;
 $small: 420px;
@@ -15,3 +20,19 @@ $x-small: 330px;
 
 // others
 $navbar-height: 60px;
+
+// Fonts
+$font-primary: Helvetica, Arial, sans-serif;
+
+// animation
+$transition-speed: 600ms;
+
+// resets
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}