diff --git a/src/assets/css/style.scss b/src/assets/css/style.scss
index d95e7f316cd7014be12696a47e454ab49d1c37b5..449fa34f2ceeb6e61fda1ba0be80dad320799a09 100644
--- a/src/assets/css/style.scss
+++ b/src/assets/css/style.scss
@@ -1,2 +1,4 @@
+$primary: #17a2b8;
+
 @import 'node_modules/bootstrap/scss/bootstrap';
 @import 'node_modules/bootstrap-vue/src/index.scss';
diff --git a/src/components/pages/LoginPage.vue b/src/components/pages/LoginPage.vue
index 1ce29830c05f15b199967843c5a27365ff0792fb..15941fd521dccd1088fe1ee72ae2435283373a22 100644
--- a/src/components/pages/LoginPage.vue
+++ b/src/components/pages/LoginPage.vue
@@ -1,26 +1,116 @@
 <template>
-  <div>
-    Ini buat login
+  <div id="placeholder">
+    <div id="container">
+      <b-card no-body>
+        <b-tabs card>
+          <b-tab title="Masuk" active>
+            <b-form @submit="submitLogin">
+              <b-form-group label="Nama Pengguna:">
+                <b-form-input
+                  type="text"
+                  v-model="login.username"
+                  required
+                  placeholder="Masukkan nama pengguna" />
+              </b-form-group>
+
+              <b-form-group label="Kata sandi:">
+                <b-form-input
+                  type="password"
+                  v-model="login.password"
+                  required
+                  placeholder="Masukkan kata sandi" />
+              </b-form-group>
+
+              <b-button type="submit" variant="primary">Masuk</b-button>
+            </b-form>
+          </b-tab>
+          <b-tab title="Daftar">
+            <b-form @submit="submitRegister">
+              <b-form-group label="NIK/NIP:">
+                <b-form-input
+                  type="text"
+                  v-model="register.nik"
+                  required
+                  placeholder="Masukkan NIK/NIP Anda" />
+              </b-form-group>
+
+              <b-form-group label="Nama Lengkap:">
+                <b-form-input
+                  type="text"
+                  v-model="register.name"
+                  required
+                  placeholder="Masukkan nama lengkap" />
+              </b-form-group>
+
+              <b-form-group label="Nama Pengguna:">
+                <b-form-input
+                  type="text"
+                  v-model="register.username"
+                  required
+                  placeholder="Masukkan nama pengguna" />
+              </b-form-group>
+
+              <b-form-group label="Kata sandi:">
+                <b-form-input
+                  type="password"
+                  v-model="register.password"
+                  required
+                  placeholder="Masukkan kata sandi" />
+              </b-form-group>
+
+              <b-form-group label="Konfirmasi kata sandi:">
+                <b-form-input
+                  type="password"
+                  v-model="register.confirmPassword"
+                  required
+                  placeholder="Masukkan ulang kata sandi" />
+              </b-form-group>
+
+              <b-button type="submit" variant="primary">Daftar</b-button>
+            </b-form>
+          </b-tab>
+        </b-tabs>
+      </b-card>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-    name: 'LoginPage',
-    components: {
-
-    },
-    data() {
-      return {
+  name: 'LoginPage',
+  components: {
 
+  },
+  data() {
+    return {
+      login: {
+        username: '',
+        password: ''
+      },
+      register: {
+        nik: '',
+        name: '',
+        username: '',
+        password: '',
+        confirmPassword: ''
       }
+    }
+  },
+  created : function() {
+    this.$store.commit('changed','Jenis Keuangan')
+  },
+  methods: {
+    submitLogin: function(event) {
+      // TODO: Create function to log in the user
+      this.$store.commit('setUser', 'ABCD', 1, this.login.username)
+      this.$router.push('/')
     },
-    methods: {
-        
-    },
-    created : function() {
-      this.$store.commit('changed','Jenis Anggaran')
+    submitRegister: function(event) {
+      // TODO: Create function to register new user
+      this.$store.commit('setUser', 'ABCD', 1, this.register.username)
+      this.$router.push('/')
     }
+  }
 }
 </script>
 
@@ -28,4 +118,21 @@ export default {
 <style lang="scss" scoped>
 @import 'src/assets/css/style.scss';
 
+#placeholder {
+  display: flex;
+  padding: 30px 20px;
+
+  #container {
+    height: auto;
+    width: 100%;
+    min-width: 250px;
+    max-width: 500px;
+    margin: auto;
+    border-radius: 5px;
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
+  }
+}
+
+
+
 </style>
\ No newline at end of file
diff --git a/src/components/store/Store.js b/src/components/store/Store.js
index 072f52280055092f1c4aacf8f14600720417f481..ecda9dfd10f464694de99487c7f66d72f4e0a3f5 100644
--- a/src/components/store/Store.js
+++ b/src/components/store/Store.js
@@ -7,7 +7,12 @@ export const store = new Vuex.Store({
   state : {
     pilihan : 'Jenis Keuangan',
     count : 0,
-    year : ''
+    year : '',
+    user : {
+      token : '',
+      id : -1,
+      name : ''
+    }
   },
   computed: {
     pilihan() {
@@ -20,6 +25,11 @@ export const store = new Vuex.Store({
     },
     setYear(state, data) {
       state.year = data
+    },
+    setUser(state, token, id, name) {
+      state.user.token = token
+      state.user.id = id
+      state.user.name = name
     }
   },
   getters : {