diff --git a/package.json b/package.json
index 6244465..f21cf8c 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,8 @@
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-vue": "^8.0.3",
     "prettier": "^2.4.1",
+    "sass": "^1.49.8",
+    "sass-loader": "^12.6.0",
     "vue-template-compiler": "^2.6.14"
   }
 }
diff --git a/public/dog.png b/public/dog.png
new file mode 100644
index 0000000..71573f7
Binary files /dev/null and b/public/dog.png differ
diff --git a/public/favicon.ico b/public/favicon.ico
deleted file mode 100644
index df36fcf..0000000
Binary files a/public/favicon.ico and /dev/null differ
diff --git a/public/index.html b/public/index.html
index 48c498e..2db3355 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="icon" href="<%= BASE_URL %>dog.png">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@5.8.55/css/materialdesignicons.min.css">
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
     <title><%= htmlWebpackPlugin.options.title %></title>
diff --git a/src/App.vue b/src/App.vue
index 935a866..48f4dd1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1 +1 @@
-<template>
  <div id="app">
    <div class="container">
      <b-navbar>
        <template #start>
          <b-navbar-item href="#"> Home </b-navbar-item>
          <b-navbar-dropdown label="Info">
            <b-navbar-item href="#"> About </b-navbar-item>
            <b-navbar-item href="#"> Contact </b-navbar-item>
          </b-navbar-dropdown>
        </template>

        <template #end>
          <b-navbar-item tag="div">
            <div class="buttons">
              <a class="button is-light">
                <strong>Sign up</strong>
              </a>
              <a class="button is-light"> Log in </a>
            </div>
          </b-navbar-item>
        </template>
      </b-navbar>
      <div class="notification is-primary">
        This container is <strong>centered</strong> on desktop and larger
        viewports.
      </div>
      <div class="card">
        <div class="card-content">
          <div class="content">
            Lorem ipsum leo risus, porta ac consectetur ac, vestibulum at eros.
            Donec id elit non mi porta gravida at eget metus. Cum sociis
            natoquаe penatibus et magnis dis parturient montes, nascetur
            ridiculus mus. Cras mattis consectetur purus sit amet fermentum.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, sequi.
          </div>
          <footer class="card-footer">
            <a href="#" class="card-footer-item">Save</a>
            <a href="#" class="card-footer-item">Edit</a>
            <a href="#" class="card-footer-item">Delete</a>
          </footer>
        </div>
      </div>
      <b-table :data="data" :columns="columns"></b-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          id: 1,
          first_name: 'Jesse',
          last_name: 'Simmons',
          date: '2016-10-15 13:43:27',
          gender: 'Male',
        },
        {
          id: 2,
          first_name: 'John',
          last_name: 'Jacobs',
          date: '2016-12-15 06:00:53',
          gender: 'Male',
        },
        {
          id: 3,
          first_name: 'Tina',
          last_name: 'Gilbert',
          date: '2016-04-26 06:26:28',
          gender: 'Female',
        },
        {
          id: 4,
          first_name: 'Clarence',
          last_name: 'Flores',
          date: '2016-04-10 10:28:46',
          gender: 'Male',
        },
        {
          id: 5,
          first_name: 'Anne',
          last_name: 'Lee',
          date: '2016-12-06 14:38:38',
          gender: 'Female',
        },
      ],
      columns: [
        {
          field: 'id',
          label: 'ID',
          width: '40',
          numeric: true,
        },
        {
          field: 'first_name',
          label: 'First Name',
        },
        {
          field: 'last_name',
          label: 'Last Name',
        },
        {
          field: 'date',
          label: 'Date',
          centered: true,
        },
        {
          field: 'gender',
          label: 'Gender',
        },
      ],
    }
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>
\ No newline at end of file
+<template>
  <div id="app">
    <div class="container">
      <HeaderComponent />
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import HeaderComponent from '@/components/HeaderComponent'

export default {
  components: { HeaderComponent },
  data() {
    return {}
  },
}
</script>
\ No newline at end of file
diff --git a/src/assets/dog.png b/src/assets/dog.png
new file mode 100644
index 0000000..71573f7
Binary files /dev/null and b/src/assets/dog.png differ
diff --git a/src/assets/logo.png b/src/assets/logo.png
deleted file mode 100644
index f3d2503..0000000
Binary files a/src/assets/logo.png and /dev/null differ
diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
new file mode 100644
index 0000000..6ea628f
--- /dev/null
+++ b/src/assets/scss/main.scss
@@ -0,0 +1,11 @@
+@import "~bulma/sass/utilities/_all";
+
+$navbar-item-hover-color: orange;
+$navbar-height: 4.5rem;
+$navbar-item-img-max-height: 4rem;
+$input-focus-border-color: orange;
+$button-focus-border-color: orange;
+$button-hover-border-color: orange;
+
+@import "~bulma";
+@import "~buefy/src/scss/buefy";
diff --git a/src/components/HeaderComponent.vue b/src/components/HeaderComponent.vue
new file mode 100644
index 0000000..e3941cc
--- /dev/null
+++ b/src/components/HeaderComponent.vue
@@ -0,0 +1,91 @@
+<template>
+  <b-navbar transparent shadow active>
+    <template #brand>
+      <b-navbar-item tag="router-link" :to="{ name: 'home' }" class="p-0">
+        <img src="../assets/dog.png" alt="psina" />
+      </b-navbar-item>
+    </template>
+    <template #start>
+      <b-navbar-item
+        class="is-link"
+        exact-active-class="home-active"
+        tag="router-link"
+        :to="{ name: 'home' }"
+        onclick="this.blur()"
+      >
+        Home
+      </b-navbar-item>
+      <b-navbar-item
+        href="https://github.com/ZorgCC/psina-avatar-server/wiki"
+        rel="noopener noreferrer"
+        target="_blank"
+        onclick="this.blur()"
+      >
+        Docs
+      </b-navbar-item>
+      <b-navbar-item
+        href="https://github.com/ZorgCC/psina-avatar-server"
+        rel="noopener noreferrer"
+        target="_blank"
+        onclick="this.blur()"
+      >
+        Source</b-navbar-item
+      >
+    </template>
+
+    <template #end>
+      <b-navbar-item tag="div">
+        <div class="buttons">
+          <router-link
+            class="button is-light has-background-white is-rounded"
+            :to="{ name: 'settings' }"
+          >
+            <!-- TODO create route setting -->
+            <b-icon
+              :class="{ 'home-active': isAuth }"
+              class="settings-hover"
+              icon="cog"
+            ></b-icon>
+          </router-link>
+          <b-button
+            v-if="isAuth"
+            class="button is-light is-rounded"
+            active-class="login-active"
+            @click="isAuth = false"
+          >
+            Log out
+          </b-button>
+          <router-link
+            v-else
+            class="button is-light is-rounded"
+            active-class="login-active"
+            :to="{ name: 'login' }"
+          >
+            Log in
+          </router-link>
+        </div>
+      </b-navbar-item>
+    </template>
+  </b-navbar>
+</template>
+<script>
+export default {
+  name: 'HeaderComponent',
+  data() {
+    return {
+      isAuth: false,
+    }
+  },
+}
+</script>
+<style lang="scss" scoped>
+.home-active {
+  color: orange;
+}
+.login-active {
+  border-color: orange !important;
+}
+.settings-hover:hover {
+  color: orange;
+}
+</style>
diff --git a/src/main.js b/src/main.js
index 3eb88be..9ebe54a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,7 +2,7 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import Buefy from 'buefy'
-import 'buefy/dist/buefy.css'
+import './assets/scss/main.scss'
 
 Vue.config.productionTip = false
 Vue.use(Buefy)
diff --git a/src/router/index.js b/src/router/index.js
index 808e9d6..40fd8c4 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -4,24 +4,25 @@ import VueRouter from 'vue-router'
 Vue.use(VueRouter)
 
 const routes = [
-  // {
-  //   path: '/',
-  //   name: 'home',
-  //   component: HomeView,
-  // },
-  // {
-  //   path: '/about',
-  //   name: 'about',
-  //   // route level code-splitting
-  //   // this generates a separate chunk (about.[hash].js) for this route
-  //   // which is lazy-loaded when the route is visited.
-  //   component: () =>
-  //     import(/* webpackChunkName: "about" */ '../views/AboutView.vue'),
-  // },
+  {
+    path: '/',
+    name: 'home',
+    component: () => import('../views/HomeView'),
+  },
+  {
+    path: '/login',
+    name: 'login',
+    component: () => import('../views/LoginView.vue'),
+  },
 ]
 
 const router = new VueRouter({
   routes,
 })
 
+// router.beforeEach((to, from, next) => {
+//   if (to.name !== 'login') next({ name: 'login' })
+//   else next()
+// })
+
 export default router
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
new file mode 100644
index 0000000..0fee7c8
--- /dev/null
+++ b/src/views/HomeView.vue
@@ -0,0 +1,11 @@
+<template>
+  <h2>home</h2>
+</template>
+
+<script>
+export default {
+  name: 'HomeView',
+}
+</script>
+
+<style scoped></style>
diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
new file mode 100644
index 0000000..d4b9586
--- /dev/null
+++ b/src/views/LoginView.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="columns is-centered">
+    <div class="column is-two-fifths">
+      <div class="hero is-fullheight-with-navbar">
+        <div class="hero-body">
+          <form
+            class="content"
+            style="width: 100%; transform: translateY(-50%)"
+          >
+            <p v-if="!isValid" class="has-text-danger has-text-centered">
+              Incorrect username or password! Please try again!
+            </p>
+            <b-field
+              label-position="on-border"
+              :type="{ 'is-danger': !isValid }"
+            >
+              <template #label>
+                <span class="has-text-grey">Username</span>
+              </template>
+              <b-input
+                rounded
+                icon="account"
+                value="johnsilver"
+                @focus="isValid = true"
+              ></b-input>
+            </b-field>
+            <b-field
+              label-position="on-border"
+              :type="{ 'is-danger': !isValid }"
+            >
+              <template #label>
+                <span class="has-text-grey">Password</span>
+              </template>
+              <b-input
+                rounded
+                icon="lock"
+                value="123"
+                type="password"
+                @focus="isValid = true"
+              ></b-input>
+            </b-field>
+            <div class="buttons is-right">
+              <b-button
+                class="m-0"
+                rounded
+                onclick="this.blur()"
+                @click.prevent="isValid = !isValid"
+              >
+                Log in
+              </b-button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LoginView',
+  data() {
+    return {
+      isValid: true,
+    }
+  },
+}
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 0000000..aead08e
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,10 @@
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.scss$/,
+        use: ['vue-style-loader', 'css-loader', 'sass-loader'],
+      },
+    ],
+  },
+}
diff --git a/yarn.lock b/yarn.lock
index 7f3f303..3692087 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2096,7 +2096,7 @@ charcodes@^0.2.0:
   resolved "https://registry.npmmirror.com/charcodes/-/charcodes-0.2.0.tgz#5208d327e6cc05f99eb80ffc814707572d1f14e4"
   integrity sha512-Y4kiDb+AM4Ecy58YkuZrrSRJBDQdQ2L+NyS1vHHFtNtUjgutcZfx3yp1dAONI/oPaPmyGfCLx5CxL+zauIMyKQ==
 
-chokidar@^3.5.3:
+"chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.3:
   version "3.5.3"
   resolved "https://registry.npmmirror.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
   integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
@@ -3538,6 +3538,11 @@ ignore@^5.2.0:
   resolved "https://registry.npmmirror.com/ignore/-/ignore-5.2.0.tgz#6d3bac8fa7fe0d45d9f9be7bac2fc279577e345a"
   integrity sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==
 
+immutable@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.0.0.tgz#b86f78de6adef3608395efb269a91462797e2c23"
+  integrity sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw==
+
 import-fresh@^3.0.0, import-fresh@^3.2.1:
   version "3.3.0"
   resolved "https://registry.npmmirror.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
@@ -3854,7 +3859,7 @@ kind-of@^6.0.2:
   resolved "https://registry.npmmirror.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
   integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
 
-klona@^2.0.5:
+klona@^2.0.4, klona@^2.0.5:
   version "2.0.5"
   resolved "https://registry.npmmirror.com/klona/-/klona-2.0.5.tgz#d166574d90076395d9963aa7a928fabb8d76afbc"
   integrity sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==
@@ -5133,6 +5138,23 @@ safe-buffer@5.2.1, safe-buffer@>=5.1.0, safe-buffer@^5.0.1, safe-buffer@^5.1.0,
   resolved "https://registry.npmmirror.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
+sass-loader@^12.6.0:
+  version "12.6.0"
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-12.6.0.tgz#5148362c8e2cdd4b950f3c63ac5d16dbfed37bcb"
+  integrity sha512-oLTaH0YCtX4cfnJZxKSLAyglED0naiYfNG1iXfU5w1LNZ+ukoA5DtyDIN5zmKVZwYNJP4KRc5Y3hkWga+7tYfA==
+  dependencies:
+    klona "^2.0.4"
+    neo-async "^2.6.2"
+
+sass@^1.49.8:
+  version "1.49.8"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.49.8.tgz#9bbbc5d43d14862db07f1c04b786c9da9b641828"
+  integrity sha512-NoGOjvDDOU9og9oAxhRnap71QaTjjlzrvLnKecUJ3GxhaQBrV6e7gPuSPF28u1OcVAArVojPAe4ZhOXwwC4tGw==
+  dependencies:
+    chokidar ">=3.0.0 <4.0.0"
+    immutable "^4.0.0"
+    source-map-js ">=0.6.2 <2.0.0"
+
 schema-utils@^2.6.5:
   version "2.7.1"
   resolved "https://registry.npmmirror.com/schema-utils/-/schema-utils-2.7.1.tgz#1ca4f32d1b24c590c203b8e7a50bf0ea4cd394d7"
@@ -5327,7 +5349,7 @@ sockjs@^0.3.21:
     uuid "^8.3.2"
     websocket-driver "^0.7.4"
 
-source-map-js@^1.0.2:
+"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==