diff --git a/src/components/pages/SettingsPage.vue b/src/components/pages/SettingsPage.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4f67f2573ebe247c075032e65a2a1ada05feebfa
--- /dev/null
+++ b/src/components/pages/SettingsPage.vue
@@ -0,0 +1,148 @@
+<template>
+  <div id="placeholder">
+    <div id="container">
+      <b-card no-body>
+        <b-tabs card>
+          <b-tab title="Ubah Kata Sandi" active>
+            <b-alert
+              :show="dismissCountDown"
+              dismissible
+              :variant="alertVariant"
+              @dismissed="dismissCountDown=0"
+              @dismiss-count-down="countdownCallback"
+            >
+              {{ message }}
+            </b-alert>
+            <b-form @submit.prevent="submitChangePassword">
+              <b-form-group label="Kata sandi lama:">
+                <b-form-input
+                  type="password"
+                  v-model="changePass.oldPassword"
+                  required
+                  placeholder="Masukkan kata sandi lama" />
+              </b-form-group>
+
+              <b-form-group label="Kata sandi baru:">
+                <b-form-input
+                  type="password"
+                  v-model="changePass.newPassword"
+                  required
+                  placeholder="Masukkan kata sandi baru" />
+              </b-form-group>
+
+              <b-form-group label="Konfirmasi kata sandi baru:">
+                <b-form-input
+                  type="password"
+                  v-model="changePass.confirmPassword"
+                  required
+                  placeholder="Masukkan kata sandi baru" />
+              </b-form-group>
+              <b-button @click="submitChangePassword" type="submit" variant="primary">Ubah Kata Sandi</b-button>
+            </b-form>
+          </b-tab>
+        </b-tabs>
+      </b-card>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UserSettings',
+  components: {
+
+  },
+  data() {
+    return {
+      changePass: {
+        oldPassword: '',
+        newPassword: '',
+        confirmPassword: ''
+      },
+      message: '',
+      dismissSecs: 15,
+      dismissCountDown: 0,
+      alertVariant: 'danger'
+    }
+  },
+  created : function() {
+    this.$store.commit('changed','Jenis Anggaran')
+  },
+  methods: {
+    submitChangePassword() {
+      if (this.changePass.oldPassword.length === 0) {
+        this.setMessage("Kata sandi lama wajib diisi", 'warning')
+        return
+      }
+      if (this.changePass.newPassword.length === 0) {
+        this.setMessage("Kata sandi baru wajib diisi", 'warning')
+        return
+      }
+      if (this.changePass.newPassword !== this.changePass.confirmPassword) {
+        this.setMessage("Kata sandi baru tidak cocok", 'warning')
+        return
+      }
+
+      let fetchData = {
+        method: 'POST',
+        body: JSON.stringify(
+          {
+            current_password: this.changePass.oldPassword,
+            new_password: this.changePass.newPassword
+          }
+        ),
+        headers: {
+          "Content-Type": "application/json",
+          "Authorization": this.$store.state.user.token
+        }
+      };
+
+      fetch(`${this.$store.state.baseUrl}/api/change-password`, fetchData)
+      .then(response => response.json())
+      .then(response => {
+        if(response.status === 200) {
+          this.setMessage('Kata sandi berhasil diubah!', 'success')
+        } else if (response.status === 401) {
+          this.setMessage('Kata sandi lama Anda salah. Silakan masukkan kembali kata sandi lama yang benar.', 'danger')
+        } else {
+          this.setMessage('Terjadi kesalahan. Kesalahan: ' + response.message, 'danger')
+        }
+      })
+      .catch(error => {
+        this.setMessage('Tidak dapat terhubung dengan server. Mohon periksa koneksi internet dan cobalah beberapa saat lagi.', 'danger')
+      })
+    },
+    countdownCallback(dismissCountDown) {
+      this.dismissCountDown = dismissCountDown
+    },
+    setMessage(message, variant) {
+      this.message = message
+      this.alertVariant = variant
+      this.dismissCountDown = this.dismissSecs
+    }
+  }
+}
+</script>
+
+
+<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/partials/Navbar.vue b/src/components/partials/Navbar.vue
index 8ae46fd39db578c1653ac587062dc94d11c3ce1a..f6782aa113f7b76c3f520c10f13e881d6695718b 100644
--- a/src/components/partials/Navbar.vue
+++ b/src/components/partials/Navbar.vue
@@ -45,7 +45,7 @@
             >
               Panel Admin
             </b-dropdown-item>
-            <b-dropdown-item v-on:click="gotoPage('SemuaAnggaran')">
+            <b-dropdown-item v-on:click="gotoPage('UserSettings')">
               Pengaturan
             </b-dropdown-item>
             <b-dropdown-item v-on:click="logOut()">
diff --git a/src/router/index.js b/src/router/index.js
index 4a95d4e3b7e87d2b2707f93df09e368f37f38c9b..fa7d7fa16d106bfe81577a6be161ff45f59a2f61 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -9,6 +9,7 @@ import BiayaLangsung from '@/components/pages/BiayaLangsungPage'
 import SemuaAnggaran from '@/components/pages/SemuaAnggaran'
 import SimpleCardContainer from '@/components/partials/SimpleCardContainer'
 import PanelAdministrator from '@/components/pages/PanelAdministrator'
+import UserSettings from '@/components/pages/SettingsPage'
 Vue.use(Router)
 
 export default new Router({
@@ -63,6 +64,11 @@ export default new Router({
       name: 'PanelAdministrator',
       component: PanelAdministrator
     },
+    {
+      path: '/pengaturan',
+      name: 'UserSettings',
+      component: UserSettings
+    },
   ],
   mode: 'history',
 })