diff --git a/package.json b/package.json
index 2c700035..5222f9aa 100644
--- a/package.json
+++ b/package.json
@@ -13,25 +13,33 @@
     "lint-fix": "vue-cli-service lint --fix"
   },
   "dependencies": {
-    "bootstrap": "4.6.0",
+    "@ckeditor/ckeditor5-build-classic": "31.1.0",
+    "@ckeditor/ckeditor5-editor-classic": "31.1.0",
+    "@ckeditor/ckeditor5-vue2": "^3.0.1",
+    "axios": "^1.7.7",
+    "bootstrap": "^4.6.0",
+    "bootstrap-vue": "^2.23.1",
     "cache-loader": "^4.1.0",
     "chartist": "0.11.0",
     "google-maps": "3.2.1",
     "register-service-worker": "1.7.2",
     "v-tooltip": "2.0.0-rc.33",
     "vue": "2.7.14",
+    "vue-ckeditor2": "^2.1.5",
+    "vue-loading-overlay": "^6.0.6",
     "vue-router": "3.0.2",
-    "vue2-google-maps": "0.10.7"
+    "vue2-google-maps": "0.10.7",
+    "vuex": "^3.6.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "3.12.1",
     "@vue/cli-plugin-eslint": "3.12.1",
     "@vue/cli-plugin-pwa": "3.12.1",
     "@vue/cli-service": "3.12.1",
+    "cross-env": "^7.0.3",
     "sass": "1.56.2",
     "sass-loader": "10.1.1",
-    "vue-template-compiler": "2.7.14",
-    "cross-env": "^7.0.3"
+    "vue-template-compiler": "2.7.14"
   },
   "browserslist": [
     "> 1%",
diff --git a/src/layout/ContentFooter.vue b/src/layout/ContentFooter.vue
index 66ceb092..e057f8d1 100644
--- a/src/layout/ContentFooter.vue
+++ b/src/layout/ContentFooter.vue
@@ -1,5 +1,5 @@
 <template>
-  <footer class="footer">
+  <!-- <footer class="footer">
     <div class="container-fluid">
       <nav>
         <ul class="footer-menu">
@@ -15,7 +15,7 @@
         Designed by <a href="https://www.creative-tim.com/?ref=pdf-vuejs" target="_blank">Creative Tim</a>.
       </div>
     </div>
-  </footer>
+  </footer> -->
 </template>
 <script>
   export default {}
diff --git a/src/layout/DashboardLayout.vue b/src/layout/DashboardLayout.vue
index 8fdd08fc..7ab60fe7 100644
--- a/src/layout/DashboardLayout.vue
+++ b/src/layout/DashboardLayout.vue
@@ -6,38 +6,30 @@
         <i class="nc-icon nc-chart-pie-35"></i>
         <p>Dashboard</p>
       </sidebar-link>
-      <sidebar-link to="/admin/user">
+      <!-- <sidebar-link to="/admin/user">
         <i class="nc-icon nc-circle-09"></i>
         <p>User Profile</p>
-      </sidebar-link>
-      <sidebar-link to="/admin/table-list">
+      </sidebar-link> -->
+      <sidebar-link to="/admin/users">
         <i class="nc-icon nc-notes"></i>
-        <p>Table list</p>
+        <p>User List</p>
       </sidebar-link>
-      <sidebar-link to="/admin/typography">
-        <i class="nc-icon nc-paper-2"></i>
-        <p>Typography</p>
+      <sidebar-link to="/admin/categories">
+        <i class="nc-icon nc-notes"></i>
+        <p>Category list</p>
       </sidebar-link>
-      <sidebar-link to="/admin/icons">
-        <i class="nc-icon nc-atom"></i>
-        <p>Icons</p>
+      <sidebar-link to="/admin/articles">
+        <i class="nc-icon nc-notes"></i>
+        <p>Article list</p>
       </sidebar-link>
-      <sidebar-link to="/admin/maps">
-        <i class="nc-icon nc-pin-3"></i>
-        <p>Maps</p>
+      <sidebar-link to="/admin/categories">
+        <i class="nc-icon nc-notes"></i>
+        <p>Role list</p>
       </sidebar-link>
       <sidebar-link to="/admin/notifications">
         <i class="nc-icon nc-bell-55"></i>
         <p>Notifications</p>
       </sidebar-link>
-
-      <template slot="bottom-links">
-        <sidebar-link class="active"
-                      to="/admin/upgrade">
-          <i class="nc-icon nc-alien-33"></i>
-          <p>Upgrade to PRO</p>
-        </sidebar-link>
-      </template>
     </side-bar>
     <div class="main-panel">
       <top-navbar></top-navbar>
diff --git a/src/layout/TopNavbar.vue b/src/layout/TopNavbar.vue
index 0681b00e..a4e9d879 100644
--- a/src/layout/TopNavbar.vue
+++ b/src/layout/TopNavbar.vue
@@ -1,7 +1,6 @@
 <template>
   <nav class="navbar navbar-expand-lg">
     <div class="container-fluid">
-      <a class="navbar-brand" href="#">Dashboard</a>
       <button type="button"
               class="navbar-toggler navbar-toggler-right"
               :class="{toggled: $sidebar.showSidebar}"
@@ -20,40 +19,8 @@
               <i class="nc-icon nc-palette"></i>
             </a>
           </li>
-          <base-dropdown tag="li">
-            <template slot="title">
-              <i class="nc-icon nc-planet"></i>
-              <b class="caret"></b>
-              <span class="notification">5</span>
-            </template>
-            <a class="dropdown-item" href="#">Notification 1</a>
-            <a class="dropdown-item" href="#">Notification 2</a>
-            <a class="dropdown-item" href="#">Notification 3</a>
-            <a class="dropdown-item" href="#">Notification 4</a>
-            <a class="dropdown-item" href="#">Another notification</a>
-          </base-dropdown>
-          <li class="nav-item">
-            <a href="#" class="nav-link">
-              <i class="nc-icon nc-zoom-split"></i>
-              <span class="d-lg-block">&nbsp;Search</span>
-            </a>
-          </li>
         </ul>
         <ul class="navbar-nav ml-auto">
-          <li class="nav-item">
-            <a class="nav-link" href="#">
-              Account
-            </a>
-          </li>
-          <base-dropdown title="Dropdown">
-            <a class="dropdown-item" href="#">Action</a>
-            <a class="dropdown-item" href="#">Another action</a>
-            <a class="dropdown-item" href="#">Something</a>
-            <a class="dropdown-item" href="#">Another action</a>
-            <a class="dropdown-item" href="#">Something</a>
-            <div class="divider"></div>
-            <a class="dropdown-item" href="#">Separated link</a>
-          </base-dropdown>
           <li class="nav-item">
             <a href="#" class="nav-link">
               Log out
diff --git a/src/layout/UserLayout.vue b/src/layout/UserLayout.vue
new file mode 100644
index 00000000..8dbcbef7
--- /dev/null
+++ b/src/layout/UserLayout.vue
@@ -0,0 +1,109 @@
+<template>
+    <div class="container mt-5">
+        <div class="d-flex justify-content-between align-items-center mb-4">
+            <h2>List Articles</h2>
+            <b-form-group label="Search" label-for="search-input" class="mb-0">
+                <b-form-input id="search-input" v-model="searchQuery" placeholder="Search article..."
+                    @input="fetchArticles"></b-form-input>
+            </b-form-group>
+        </div>
+
+        <b-form-group label="Category" label-for="category-dropdown">
+            <b-form-select id="category-dropdown" v-model="selectedCategory" :options="categories"
+                @change="fetchArticles"></b-form-select>
+        </b-form-group>
+
+        <div class="row">
+            <div class="col-md-4 mb-4" v-for="article in paginatedArticles" :key="article.id">
+                <b-card :img-src="'http://127.0.0.1/storage/' + article.image_url" img-alt="Image" img-top>
+                    <b-card-title>{{ article.title }}</b-card-title>
+                    <b-card-text>
+                        <p>{{ truncatedContent(article.content) }}</p>
+                        <small class="text-muted">Author: {{ article.user.name }}</small><br />
+                        <small class="text-muted">Created: {{ formatDate(article.created_at) }}</small>
+                    </b-card-text>
+                    <b-button variant="primary" @click="viewArticle(article.id)">Xem chi tiết</b-button>
+                </b-card>
+            </div>
+        </div>
+
+        <b-pagination v-model="currentPage" :total-rows="totalArticles" :per-page="articlesPerPage"
+            @change="fetchArticles" class="mt-4"></b-pagination>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            searchQuery: '',
+            selectedCategory: null,
+            articles: [],
+            currentPage: 1,
+            articlesPerPage: 3,
+            categories: [],
+        };
+    },
+    async created() {
+        await this.fetchCategories();
+        await this.fetchArticles();
+    },
+    computed: {
+        totalArticles() {
+            return this.articles.length;
+        },
+        paginatedArticles() {
+            const start = (this.currentPage - 1) * this.articlesPerPage;
+            return this.articles.slice(start, start + this.articlesPerPage);
+        }
+    },
+    methods: {
+        async fetchCategories() {
+            axios.get('http://127.0.0.1:8000/api/categories')
+                .then(response => {
+                    this.categories = response.data.map(category => ({
+                        value: category.id,
+                        text: category.title,
+                    }));
+                })
+                .catch(error => {
+                    console.error('Error fetching categories:', error);
+                });
+        },
+        async fetchArticles() {
+            axios.get('http://127.0.0.1:8000/api/article', {
+                params: {
+                    search: this.searchQuery,
+                    category: this.selectedCategory,
+                    page: this.currentPage,
+                }
+            })
+                .then(response => {
+                    this.articles = response.data;
+                })
+                .catch(error => {
+                    console.error('Error fetching articles:', error);
+                });
+        },
+        truncatedContent(content) {
+            const plainText = content.replace(/<\/?[^>]+(>|$)/g, "");
+            const truncated = plainText.length > 200 ? plainText.substring(0, 200) + "..." : plainText;
+            
+            return truncated.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+        },
+        viewArticle(id) {
+            this.$router.push({ name: 'ArticleDetail', params: { id } });
+        },
+        formatDate(dateString) {
+            const options = { year: 'numeric', month: 'long', day: 'numeric' };
+            return new Date(dateString).toLocaleDateString(undefined, options);
+        },
+    }
+};
+</script>
+
+<style scoped>
+.card {
+    height: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 71016a76..bae921c7 100644
--- a/src/main.js
+++ b/src/main.js
@@ -13,10 +13,19 @@
  * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 
  */
+import axios from "axios";
+window.axios = axios;
+
+window.axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";
+axios.defaults.headers.common['Authorization'] = `Bearer ${localStorage.getItem("token")}`;
+window.axios.defaults.withCredentials = true;
+
 import Vue from "vue";
 import VueRouter from "vue-router";
 import App from "./App.vue";
 
+import store from './store';
+
 // LightBootstrap plugin
 import LightBootstrap from "./light-bootstrap-main";
 
@@ -28,8 +37,16 @@ import "./registerServiceWorker";
 Vue.use(VueRouter);
 Vue.use(LightBootstrap);
 
+import { BootstrapVue, IconsPlugin } from "bootstrap-vue";
+import "bootstrap/dist/css/bootstrap.css";
+import "bootstrap-vue/dist/bootstrap-vue.css";
+
+Vue.use(BootstrapVue);
+Vue.use(IconsPlugin);
+
 // configure router
 const router = new VueRouter({
+  mode: 'history',
   routes, // short for routes: routes
   linkActiveClass: "nav-item active",
   scrollBehavior: (to) => {
@@ -41,9 +58,31 @@ const router = new VueRouter({
   },
 });
 
-/* eslint-disable no-new */
+// router.beforeEach(async (to, from, next) => {
+//   console.log(to, '123123')
+//   if (to.matched.some(record => record.meta.requiresAuth)) {
+//     if (!store.getters.isAuthenticated) {
+//       try {
+//         if (store.getters.isAuthenticated) {
+//           next();
+//         } else {
+//           next({ name: 'Login' });
+//         }
+//       } catch (error) {
+//         console.error("Error fetching user:", error);
+//         next({ name: 'Login' });
+//       }
+//     } else {
+//       next();
+//     }
+//   } else {
+//     next();
+//   }
+// });
+
 new Vue({
   el: "#app",
+  store,
   render: (h) => h(App),
   router,
 });
diff --git a/src/pages/Article/ArticleAdd.vue b/src/pages/Article/ArticleAdd.vue
new file mode 100644
index 00000000..a5c35fe2
--- /dev/null
+++ b/src/pages/Article/ArticleAdd.vue
@@ -0,0 +1,129 @@
+<template>
+  <div class="container mt-5">
+    <b-form @submit.prevent="onSubmit">
+      <b-form-group label="Image" label-for="image">
+        <b-form-file id="image" v-model="form.image" @change="onFileChange" required></b-form-file>
+        <b-form-text class="mt-2">{{ imageName }}</b-form-text>
+        <img v-if="srcImage" :src="srcImage" alt="Image preview" class="mt-2"
+          style="max-width: 300px; max-height: 200px; border: 1px solid #ccc;" />
+      </b-form-group>
+
+      <b-form-group label="Categories" label-for="categories">
+        <b-form-select
+          id="categories"
+          v-model="form.categories"
+          :options="categoryOptions"
+          multiple
+          required
+        ></b-form-select>
+      </b-form-group>
+
+      <b-form-group label="Title" label-for="title">
+        <b-form-input id="title" v-model="form.title" required></b-form-input>
+      </b-form-group>
+
+      <!-- <b-form-group label="Content" label-for="content">
+        <b-form-textarea id="content" v-model="form.content" required></b-form-textarea>
+      </b-form-group> -->
+      <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
+
+      <b-form-group label="Status" class="mt-2">
+        <b-form-radio-group v-model="form.status" name="status" required>
+          <b-form-radio value="0">Hide</b-form-radio>
+          <b-form-radio value="1">Publish</b-form-radio>
+        </b-form-radio-group>
+      </b-form-group>
+
+      <b-button type="submit" variant="primary">Submit</b-button>
+    </b-form>
+  </div>
+</template>
+
+<script>
+import CKEditor from "@ckeditor/ckeditor5-vue2";
+//import ClassicEditor from "@ckeditor/ckeditor5-editor-classic";
+import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
+
+export default {
+  components: {
+    ckeditor: CKEditor.component,
+  },
+  data() {
+    return {
+      editor: ClassicEditor,
+      editorData: "",
+      editorConfig: {
+      },
+      form: {
+        image: null,
+        title: '',
+        status: 1,
+        categories: []
+      },
+      categoryOptions: [],
+      imageName: '',
+      srcImage: ''
+    };
+  },
+  created() {
+    axios
+        .get('http://127.0.0.1:8000/api/categories')
+        .then((response) => {
+          const categories = response.data.map(category => {
+            return {
+              value: category.id,
+              text: category.title
+            }
+          })
+          this.categoryOptions = categories
+        })
+        .catch((error) => {
+          console.log(error, 'error')
+        })
+  },
+  methods: {
+    onFileChange(event) {
+      const file = event.target.files[0];
+      if (file) {
+        this.form.image = file;
+        this.imageName = file.name;
+        this.srcImage = URL.createObjectURL(file);
+      } else {
+        this.imageName = '';
+        this.srcImage = '';
+      }
+    },
+    onSubmit() {
+      const formData = new FormData();
+      formData.append('image_url', this.form.image);
+      formData.append('title', this.form.title);
+      formData.append('content', this.editorData);
+      formData.append('status', this.form.status);
+      formData.append('user_id', 1);
+      formData.append('categories', JSON.stringify(this.form.categories));
+
+      axios.post('http://127.0.0.1:8000/api/articles', formData)
+        .then(response => {
+          if(response.status == 201) {
+            this.$router.push({name: 'ArticleList'})
+          }
+        })
+        .catch(error => {
+          console.error(error);
+        });
+    },
+    beforeDestroy() {
+      if (this.srcImage) {
+        URL.revokeObjectURL(this.srcImage);
+
+      }
+    }
+  }
+}
+</script>
+
+<style>
+.ck .ck-editor__main div{
+  height: 300px !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/Article/ArticleEdit.vue b/src/pages/Article/ArticleEdit.vue
new file mode 100644
index 00000000..b9f6650f
--- /dev/null
+++ b/src/pages/Article/ArticleEdit.vue
@@ -0,0 +1,149 @@
+<template>
+    <div class="container mt-5">
+        <b-form @submit.prevent="onSubmit">
+            <b-form-group label="Image" label-for="image">
+                <b-form-file id="image" v-model="form.image" @change="onFileChange"></b-form-file>
+                <b-form-text class="mt-2">{{ imageName }}</b-form-text>
+                <img v-if="srcImage" :src="srcImage" alt="Image preview" class="mt-2"
+                    style="max-width: 300px; max-height: 200px; border: 1px solid #ccc;" />
+            </b-form-group>
+
+            <b-form-group label="Categories" label-for="categories">
+                <b-form-select id="categories" v-model="form.categories" :options="categoryOptions" multiple
+                    required></b-form-select>
+            </b-form-group>
+
+            <b-form-group label="Title" label-for="title">
+                <b-form-input id="title" v-model="form.title" required></b-form-input>
+            </b-form-group>
+
+            <!-- <b-form-group label="Content" label-for="content">
+          <b-form-textarea id="content" v-model="form.content" required></b-form-textarea>
+        </b-form-group> -->
+            <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
+
+            <b-form-group label="Status" class="mt-2">
+                <b-form-radio-group v-model="form.status" name="status" required>
+                    <b-form-radio value="0">Hide</b-form-radio>
+                    <b-form-radio value="1">Publish</b-form-radio>
+                </b-form-radio-group>
+            </b-form-group>
+
+            <b-button type="submit" variant="primary">Submit</b-button>
+        </b-form>
+    </div>
+</template>
+
+<script>
+import CKEditor from "@ckeditor/ckeditor5-vue2";
+//import ClassicEditor from "@ckeditor/ckeditor5-editor-classic";
+import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
+
+export default {
+    components: {
+        ckeditor: CKEditor.component,
+    },
+    data() {
+        return {
+            editor: ClassicEditor,
+            editorData: "",
+            editorConfig: {
+            },
+            form: {
+                image: null,
+                title: '',
+                status: 1,
+                categories: []
+            },
+            imageName: '',
+            srcImage: '',
+            categoryOptions: []
+        };
+    },
+    methods: {
+        onFileChange(event) {
+            const file = event.target.files[0];
+            if (file) {
+                this.form.image = file;
+                this.imageName = file.name;
+                this.srcImage = URL.createObjectURL(file);
+            } else {
+                this.imageName = '';
+                this.srcImage = '';
+            }
+        },
+        onSubmit() {
+            const formData = new FormData();
+            if (this.form.image) {
+                formData.append('image_url', this.form.image);
+            }
+            formData.append('title', this.form.title);
+            formData.append('content', this.editorData);
+            formData.append('status', this.form.status);
+            formData.append('user_id', 1);
+
+            const articleId = this.$route.params.id;
+            axios.put(`http://127.0.0.1:8000/api/articles/${articleId}`, formData, {
+                headers: {
+                    'Content-Type': 'multipart/form-data'
+                }
+            })
+                .then(response => {
+                    if (response.status == 201) {
+                        this.$router.push({ name: 'ArticleList' })
+                    }
+                })
+                .catch(error => {
+                    console.log(error);
+                });
+        },
+        fetchArticle() {
+            const articleId = this.$route.params.id;
+            axios.get(`http://127.0.0.1:8000/api/articles/${articleId}`)
+                .then((response) => {
+                    this.editorData = response.data.content
+                    this.form.image = null
+                    this.form.title = response.data.title
+                    this.form.status = response.data.status
+                    this.form.categories = response.data.categories.map(category => category.id);
+                    this.srcImage = 'http://127.0.0.1:8000/storage/' + response.data.image_url
+                })
+                .catch(error => {
+                    console.error('Failed to update user:', error);
+                });
+        },
+        fetchCategory() {
+            axios
+                .get('http://127.0.0.1:8000/api/categories')
+                .then((response) => {
+                    const categories = response.data.map(category => {
+                        return {
+                            value: category.id,
+                            text: category.title
+                        }
+                    })
+                    this.categoryOptions = categories
+                })
+                .catch((error) => {
+                    console.log(error, 'error')
+                })
+        }
+    },
+    mounted() {
+        this.fetchCategory()
+        this.fetchArticle()
+    },
+    beforeDestroy() {
+        if (this.srcImage) {
+            URL.revokeObjectURL(this.srcImage);
+
+        }
+    }
+}
+</script>
+
+<style>
+.ck .ck-editor__main div {
+    height: 300px !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/ArticleList.vue b/src/pages/ArticleList.vue
new file mode 100644
index 00000000..7b2b3592
--- /dev/null
+++ b/src/pages/ArticleList.vue
@@ -0,0 +1,103 @@
+<template>
+  <div class="content">
+    <div class="container-fluid">
+      <div class="row">
+        <div class="col-12">
+          <card class="strpied-tabled-with-hover" body-classes="table-full-width table-responsive">
+            <template slot="header">
+              <h4 class="card-title">List Article</h4>
+              <button type="button" @click="addArticle()">Create Article</button>
+            </template>
+            <b-table :items="articles" :fields="fields" hover striped>
+              <template #cell(image)="data">
+                <div v-if="data.item.image">
+                  <img :src="getImageUrl(data.item.image)" alt="Article Image" width="100">
+                </div>
+                <div v-else>
+                  No Image
+                </div>
+              </template>
+              <template #cell(action)="data">
+                <b-button size="sm" variant="primary" @click="editArticle(data.item)">Edit</b-button>
+                <b-button size="sm" variant="danger" @click="deleteArticle(data.item.id)">Delete</b-button>
+              </template>
+            </b-table>
+          </card>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import LTable from 'src/components/Table.vue'
+import Card from 'src/components/Cards/Card.vue'
+export default {
+  components: {
+    LTable,
+    Card
+  },
+  data() {
+    return {
+      articles: [],
+      fields: [
+        { key: 'id', label: 'ID' },
+        { key: 'user', label: 'Author' },
+        { key: 'image', label: 'Image' },
+        { key: 'title', label: 'Title' },
+        // { key: 'content', label: 'Content' },
+        { key: 'action', label: 'Action' }
+      ],
+    }
+  },
+  created() {
+    axios
+      .get('http://127.0.0.1:8000/api/articles')
+      .then((response) => {
+        console.log(response.data)
+        const articles = response.data.map(article => {
+          return {
+            id: article.id,
+            title: article.title,
+            content: article.content,
+            image: article.image_url,
+            user: article.user.name,
+            created: article.created_at
+          }
+        })
+        this.articles = articles
+      })
+      .catch((error) => {
+        console.log(error, 'error')
+      })
+  },
+  methods: {
+    addArticle() {
+      this.$router.push({ name: 'ArticleAdd' })
+    },
+    editArticle(article) {
+      this.$router.push({ name: 'ArticleEdit', params: { id: article.id } });
+    },
+    deleteArticle(articleId) {
+      if (confirm('Are you sure you want to delete this Article?')) {
+        axios.delete(`http://127.0.0.1:8000/api/articles/${articleId}`)
+          .then(response => {
+            if (response.status == 200) {
+              const index = this.articles.findIndex(article => article.id == articleId);
+              if (index !== -1) {
+                this.articles.splice(index, 1);
+              }
+            }
+          })
+          .catch(error => {
+            console.error('Failed to delete Article:', error);
+            alert('Failed to delete Article.');
+          });
+      }
+    },
+    getImageUrl(imagePath) {
+      return `http://127.0.0.1:8000/storage/${imagePath}`;
+    },
+  }
+}
+</script>
+<style></style>
\ No newline at end of file
diff --git a/src/pages/Category/CategoryAdd.vue b/src/pages/Category/CategoryAdd.vue
new file mode 100644
index 00000000..4ee01a20
--- /dev/null
+++ b/src/pages/Category/CategoryAdd.vue
@@ -0,0 +1,58 @@
+<template>
+    <div class="container mt-5">
+        <b-form @submit.prevent="onSubmit">
+            <b-form-group label="Title" label-for="title-input">
+                <b-form-input
+                    id="title-input"
+                    v-model="form.title"
+                    placeholder="Enter the title"
+                    required
+                ></b-form-input>
+            </b-form-group>
+
+            <b-form-group label="Description" label-for="description-input">
+                <b-form-textarea
+                    id="description-input"
+                    v-model="form.description"
+                    placeholder="Enter the description"
+                    rows="3"
+                    required
+                ></b-form-textarea>
+            </b-form-group>
+
+            <b-button type="submit" variant="primary">ADD</b-button>
+        </b-form>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            form: {
+                title: '',
+                description: ''
+            }
+        };
+    },
+    methods: {
+        onSubmit() {
+            axios.post('http://127.0.0.1:8000/api/categories', this.form)
+            .then(response => {
+                if(response.status == 201) {
+                    this.$router.push({name: 'CategoryList'})
+                }
+            })
+            .catch(error => {
+                alert(error.response.data.error)
+            });
+        },
+    },
+};
+</script>
+
+<style scoped>
+.container {
+    max-width: 600px;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/Category/CategoryEdit.vue b/src/pages/Category/CategoryEdit.vue
new file mode 100644
index 00000000..89e4c6bc
--- /dev/null
+++ b/src/pages/Category/CategoryEdit.vue
@@ -0,0 +1,74 @@
+<template>
+    <div class="container mt-5">
+        <b-form @submit.prevent="onSubmit">
+            <b-form-group label="Title" label-for="title-input">
+                <b-form-input
+                    id="title-input"
+                    v-model="form.title"
+                    placeholder="Enter the title"
+                    required
+                ></b-form-input>
+            </b-form-group>
+
+            <b-form-group label="Description" label-for="description-input">
+                <b-form-textarea
+                    id="description-input"
+                    v-model="form.description"
+                    placeholder="Enter the description"
+                    rows="3"
+                    required
+                ></b-form-textarea>
+            </b-form-group>
+
+            <b-button type="submit" variant="primary">UPDATE</b-button>
+        </b-form>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            form: {
+                title: '',
+                description: ''
+            }
+        };
+    },
+    methods: {
+        onSubmit() {
+            const categoryId = this.$route.params.id;
+            axios.put(`http://127.0.0.1:8000/api/categories/${categoryId}`, this.form)
+                .then(response => {
+                    if(response.status == 201) {
+                        this.$router.push({name: 'CategoryList'})
+                    }
+                })
+                .catch(error => {
+                    alert(error.response.data.error)
+                });
+        },
+        fetchCategory() {
+            const categoryId = this.$route.params.id;
+            axios.get(`http://127.0.0.1:8000/api/categories/${categoryId}`)
+                .then(response => {
+                    const category = response.data;
+                    this.form.title = category.title;
+                    this.form.description = category.description;
+                })
+                .catch(error => {
+                    console.error('Failed to fetch category:', error);
+                });
+        },
+    },
+    mounted() {
+        this.fetchCategory()
+    }
+};
+</script>
+
+<style scoped>
+.container {
+    max-width: 600px;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/CategoryList.vue b/src/pages/CategoryList.vue
new file mode 100644
index 00000000..78dab9ec
--- /dev/null
+++ b/src/pages/CategoryList.vue
@@ -0,0 +1,89 @@
+<template>
+    <div class="content">
+      <div class="container-fluid">
+        <div class="row">
+          <div class="col-12">
+            <card class="strpied-tabled-with-hover" body-classes="table-full-width table-responsive">
+              <template slot="header">
+                <h4 class="card-title">List Category</h4>
+                <button type="button" @click="addCate()">Create Category</button>
+              </template>
+              <b-table :items="categories" :fields="fields" hover striped>
+                <template #cell(action)="data">
+                  <b-button size="sm" variant="primary" @click="editCate(data.item)">Edit</b-button>
+                  <b-button size="sm" variant="danger" @click="deleteCate(data.item.id)">Delete</b-button>
+                </template>
+              </b-table>
+            </card>
+          </div>
+        </div>
+      </div>
+    </div>
+  </template>
+  <script>
+  import LTable from 'src/components/Table.vue'
+  import Card from 'src/components/Cards/Card.vue'
+  export default {
+    components: {
+      LTable,
+      Card
+    },
+    data() {
+      return {
+        categories: [],
+        fields: [
+          { key: 'id', label: 'ID' },
+          { key: 'title', label: 'title' },
+          { key: 'description', label: 'description' },
+          { key: 'created', label: 'Created' },
+          { key: 'action', label: 'Action' }
+        ],
+      }
+    },
+    created() {
+      axios
+        .get('http://127.0.0.1:8000/api/categories')
+        .then((response) => {
+          const categories = response.data.map(category => {
+            return {
+              id: category.id,
+              title: category.title,
+              description: category.description,
+              created: category.created_at
+            }
+          })
+          this.categories = categories
+        })
+        .catch((error) => {
+          console.log(error, 'error')
+        })
+    },
+    methods: {
+      addCate() {
+        this.$router.push({ name: 'CategoryAdd' })
+      },
+      editCate(cate) {
+        this.$router.push({ name: 'CategoryEdit', params: { id: cate.id } });
+      },
+      deleteCate(cateId) {
+        if (confirm('Are you sure you want to delete this category?')) {
+          axios.delete(`http://127.0.0.1:8000/api/categories/${cateId}`)
+            .then(response => {
+              if(response.status == 200){
+                const index = this.categories.findIndex(category => category.id == cateId);
+                if (index !== -1) {
+                    this.categories.splice(index, 1);
+                }
+              }
+            })
+            .catch(error => {
+              console.error('Failed to delete category:', error);
+              alert('Failed to delete category.');
+            });
+        }
+      }
+    }
+  }
+  </script>
+  <style></style>
+  
\ No newline at end of file
diff --git a/src/pages/Icons.vue b/src/pages/Icons.vue
deleted file mode 100644
index d9f46073..00000000
--- a/src/pages/Icons.vue
+++ /dev/null
@@ -1,632 +0,0 @@
-<template>
-  <div class="content">
-    <div class="container-fluid">
-      <div class="row">
-        <div class="col-md-12">
-          <card>
-            <template slot="header">
-              <h4 class="card-title">100 Awesome Nucleo Icons</h4>
-              <p class="card-category">Handcrafted by our friends from <a target="_blank" href="https://nucleoapp.com/?ref=1712">NucleoApp</a></p>
-            </template>
-            <div class="all-icons">
-              <div class="row">
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-air-baloon"></i>
-                    <p>nc-air-baloon</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-album-2"></i>
-                    <p>nc-album-2</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-alien-33"></i>
-                    <p>nc-alien-33</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-align-center"></i>
-                    <p>nc-align-center</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-align-left-2"></i>
-                    <p>nc-align-left-2</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-ambulance"></i>
-                    <p>nc-ambulance</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-android"></i>
-                    <p>nc-android</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-app"></i>
-                    <p>nc-app</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-apple"></i>
-                    <p>nc-apple</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-atom"></i>
-                    <p>nc-atom</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-attach-87"></i>
-                    <p>nc-attach-87</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-audio-92"></i>
-                    <p>nc-audio-92</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-backpack"></i>
-                    <p>nc-backpack</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-badge"></i>
-                    <p>nc-badge</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-bag"></i>
-                    <p>nc-bag</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-bank"></i>
-                    <p>nc-bank</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-battery-81"></i>
-                    <p>nc-battery-81</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-bell-55"></i>
-                    <p>nc-bell-55</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-bold"></i>
-                    <p>nc-bold</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-bulb-63"></i>
-                    <p>nc-bulb-63</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-bullet-list-67"></i>
-                    <p>nc-bullet-list-67</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-bus-front-12"></i>
-                    <p>nc-bus-front-12</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-button-pause"></i>
-                    <p>nc-button-pause</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-button-play"></i>
-                    <p>nc-button-play</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-button-power"></i>
-                    <p>nc-button-power</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-camera-20"></i>
-                    <p>nc-camera-20</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-caps-small"></i>
-                    <p>nc-caps-small</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-cart-simple"></i>
-                    <p>nc-cart-simple</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-cctv"></i>
-                    <p>nc-cctv</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-chart-bar-32"></i>
-                    <p>nc-chart-bar-32</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-chart-pie-35"></i>
-                    <p>nc-chart-pie-35</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-chart-pie-36"></i>
-                    <p>nc-chart-pie-36</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-chart"></i>
-                    <p>nc-chart</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-chat-round"></i>
-                    <p>nc-chat-round</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-check-2"></i>
-                    <p>nc-check-2</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-circle-09"></i>
-                    <p>nc-circle-09</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-circle"></i>
-                    <p>nc-circle</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-cloud-download-93"></i>
-                    <p>nc-cloud-download-93</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-cloud-upload-94"></i>
-                    <p>nc-cloud-upload-94</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-compass-05"></i>
-                    <p>nc-compass-05</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-controller-modern"></i>
-                    <p>nc-controller-modern</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-credit-card"></i>
-                    <p>nc-credit-card</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-delivery-fast"></i>
-                    <p>nc-delivery-fast</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-email-83"></i>
-                    <p>nc-email-83</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-email-85"></i>
-                    <p>nc-email-85</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-explore-2"></i>
-                    <p>nc-explore-2</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-fav-remove"></i>
-                    <p>nc-fav-remove</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-favourite-28"></i>
-                    <p>nc-favourite-28</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-globe-2"></i>
-                    <p>nc-globe-2</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-grid-45"></i>
-                    <p>nc-grid-45</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-headphones-2"></i>
-                    <p>nc-headphones-2</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-html5"></i>
-                    <p>nc-html5</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-istanbul"></i>
-                    <p>nc-istanbul</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-key-25"></i>
-                    <p>nc-key-25</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-layers-3"></i>
-                    <p>nc-layers-3</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-light-3"></i>
-                    <p>nc-light-3</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-lock-circle-open"></i>
-                    <p>nc-lock-circle-open</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-map-big"></i>
-                    <p>nc-map-big</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-mobile"></i>
-                    <p>nc-mobile</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-money-coins"></i>
-                    <p>nc-money-coins</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-note-03"></i>
-                    <p>nc-note-03</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-notes"></i>
-                    <p>nc-notes</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-notification-70"></i>
-                    <p>nc-notification-70</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-palette"></i>
-                    <p>nc-palette</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-paper-2"></i>
-                    <p>nc-paper-2</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-pin-3"></i>
-                    <p>nc-pin-3</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-planet"></i>
-                    <p>nc-planet</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-preferences-circle-rotate"></i>
-                    <p>nc-preferences-circle-rotate</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-puzzle-10"></i>
-                    <p>nc-puzzle-10</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-quote"></i>
-                    <p>nc-quote</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-refresh-02"></i>
-                    <p>nc-refresh-02</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-ruler-pencil"></i>
-                    <p>nc-ruler-pencil</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-satisfied"></i>
-                    <p>nc-satisfied</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-scissors"></i>
-                    <p>nc-scissors</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-send"></i>
-                    <p>nc-send</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-settings-90"></i>
-                    <p>nc-settings-90</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-settings-gear-64"></i>
-                    <p>nc-settings-gear-64</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-settings-tool-66"></i>
-                    <p>nc-settings-tool-66</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-simple-add"></i>
-                    <p>nc-simple-add</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-simple-delete"></i>
-                    <p>nc-simple-delete</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-simple-remove"></i>
-                    <p>nc-simple-remove</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-single-02"></i>
-                    <p>nc-single-02</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-single-copy-04"></i>
-                    <p>nc-single-copy-04</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-spaceship"></i>
-                    <p>nc-spaceship</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-square-pin"></i>
-                    <p>nc-square-pin</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-stre-down"></i>
-                    <p>nc-stre-down</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-stre-left"></i>
-                    <p>nc-stre-left</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-stre-right"></i>
-                    <p>nc-stre-right</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-stre-up"></i>
-                    <p>nc-stre-up</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-sun-fog-29"></i>
-                    <p>nc-sun-fog-29</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-support-17"></i>
-                    <p>nc-support-17</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-tablet-2"></i>
-                    <p>nc-tablet-2</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-tag-content"></i>
-                    <p>nc-tag-content</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-tap-01"></i>
-                    <p>nc-tap-01</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-time-alarm"></i>
-                    <p>nc-time-alarm</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-tv-2"></i>
-                    <p>nc-tv-2</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-umbrella-13"></i>
-                    <p>nc-umbrella-13</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-vector"></i>
-                    <p>nc-vector</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-watch-time"></i>
-                    <p>nc-watch-time</p>
-                  </div>
-                </div>
-                <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-6">
-                  <div class="font-icon-detail">
-                    <i class="nc-icon nc-zoom-split"></i>
-                    <p>nc-zoom-split</p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </card>
-        </div>
-
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-  import Card from 'src/components/Cards/Card.vue'
-  export default {
-    components: {
-      Card
-    }
-  }
-</script>
-<style>
-
-</style>
diff --git a/src/pages/Login.vue b/src/pages/Login.vue
new file mode 100644
index 00000000..98b22a97
--- /dev/null
+++ b/src/pages/Login.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="d-flex vh-100 bg-light flex-column align-items-center justify-content-center">
+    <b-card class="w-100" style="max-width: 500px;">
+      <h2 class="text-primary text-center">Personal Blog</h2>
+      <p class="text-center font-weight-bold text-secondary">Login</p>
+
+      <b-alert variant="danger" v-if="validationErrors" dismissible>
+        {{ validationErrors }}
+      </b-alert>
+
+      <b-form @submit.prevent="login">
+        <b-form-group label="Username" label-for="username">
+          <b-form-input id="username" v-model="data.username" type="text" placeholder="Enter username"
+            required></b-form-input>
+        </b-form-group>
+
+        <b-form-group label="Password" label-for="password" class="mt-2">
+          <b-form-input id="password" v-model="data.password" type="password" placeholder="Enter password"
+            required></b-form-input>
+        </b-form-group>
+
+        <b-button variant="primary" class="w-100 mt-3" :disabled="isLogging" @click="login">
+          {{ isLogging ? "Logging..." : "Login" }}
+        </b-button>
+      </b-form>
+    </b-card>
+  </div>
+</template>
+
+<script>
+import { mapActions } from 'vuex';
+
+export default {
+  data() {
+    return {
+      data: {
+        username: "",
+        password: "",
+      },
+      isLogging: false,
+      validationErrors: ''
+    };
+  },
+
+  methods: {
+    ...mapActions(['loginUser']),
+    login() {
+      this.isLogging = true;
+      const loginData = { ...this.data };
+      try {
+        this.loginUser(loginData);
+        this.$router.push({ path: '/admin/overview' });
+        console.log('router push')
+      } catch (error) {
+        this.validationErrors = error.response.data.message;
+      } finally {
+        this.isLogging = false;
+      }
+    },
+  },
+};
+</script>
diff --git a/src/pages/Maps.vue b/src/pages/Maps.vue
deleted file mode 100644
index 25bed76a..00000000
--- a/src/pages/Maps.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<template>
-  <gmap-map
-    id="map"
-    :center="center"
-    :zoom="13"
-    :options="options"
-    map-type-id="terrain"
-  >
-    <gmap-marker :position="center">
-    </gmap-marker>
-  </gmap-map>
-</template>
-<script>
-  import {API_KEY} from './Maps/API_KEY'
-  import Vue from 'vue'
-  import * as VueGoogleMaps from 'vue2-google-maps'
-  Vue.use(VueGoogleMaps, {
-    load: {
-      key: API_KEY
-    }
-  })
-  export default {
-    data () {
-      return {
-        center: {
-          lat: 40.748817,
-          lng: -73.985428
-        },
-        options: {
-          styles: [{
-            'featureType': 'water',
-            'stylers': [{'saturation': 43}, {'lightness': -11}, {'hue': '#0088ff'}]
-          }, {
-            'featureType': 'road',
-            'elementType': 'geometry.fill',
-            'stylers': [{'hue': '#ff0000'}, {'saturation': -100}, {'lightness': 99}]
-          }, {
-            'featureType': 'road',
-            'elementType': 'geometry.stroke',
-            'stylers': [{'color': '#808080'}, {'lightness': 54}]
-          }, {
-            'featureType': 'landscape.man_made',
-            'elementType': 'geometry.fill',
-            'stylers': [{'color': '#ece2d9'}]
-          }, {
-            'featureType': 'poi.park',
-            'elementType': 'geometry.fill',
-            'stylers': [{'color': '#ccdca1'}]
-          }, {
-            'featureType': 'road',
-            'elementType': 'labels.text.fill',
-            'stylers': [{'color': '#767676'}]
-          }, {
-            'featureType': 'road',
-            'elementType': 'labels.text.stroke',
-            'stylers': [{'color': '#ffffff'}]
-          }, {'featureType': 'poi', 'stylers': [{'visibility': 'off'}]}, {
-            'featureType': 'landscape.natural',
-            'elementType': 'geometry.fill',
-            'stylers': [{'visibility': 'on'}, {'color': '#b8cb93'}]
-          }, {'featureType': 'poi.park', 'stylers': [{'visibility': 'on'}]}, {
-            'featureType': 'poi.sports_complex',
-            'stylers': [{'visibility': 'on'}]
-          }, {'featureType': 'poi.medical', 'stylers': [{'visibility': 'on'}]}, {
-            'featureType': 'poi.business',
-            'stylers': [{'visibility': 'simplified'}]
-          }]
-        }
-      }
-    }
-  }
-</script>
-<style>
-  #map {
-    min-height: calc(100vh - 123px);
-  }
-</style>
diff --git a/src/pages/TableList.vue b/src/pages/TableList.vue
deleted file mode 100644
index ebcf86d5..00000000
--- a/src/pages/TableList.vue
+++ /dev/null
@@ -1,115 +0,0 @@
-<template>
-  <div class="content">
-    <div class="container-fluid">
-      <div class="row">
-        <div class="col-12">
-          <card class="strpied-tabled-with-hover"
-                body-classes="table-full-width table-responsive"
-          >
-            <template slot="header">
-              <h4 class="card-title">Striped Table with Hover</h4>
-              <p class="card-category">Here is a subtitle for this table</p>
-            </template>
-            <l-table class="table-hover table-striped"
-                     :columns="table1.columns"
-                     :data="table1.data">
-            </l-table>
-          </card>
-
-        </div>
-
-        <div class="col-12">
-          <card class="card-plain">
-            <template slot="header">
-              <h4 class="card-title">Table on Plain Background</h4>
-              <p class="card-category">Here is a subtitle for this table</p>
-            </template>
-            <div class="table-responsive">
-              <l-table class="table-hover"
-                       :columns="table2.columns"
-                       :data="table2.data">
-              </l-table>
-            </div>
-          </card>
-        </div>
-
-        <div class="col-12">
-          <card class="strpied-tabled-with-hover"
-                body-classes="table-full-width table-responsive"
-          >
-            <template slot="header">
-              <h4 class="card-title">Small table</h4>
-              <p class="card-category">Here is a subtitle for this table</p>
-            </template>
-            <l-table class="table-hover table-striped table-sm"
-                     :columns="table1.columns"
-                     :data="table1.data">
-            </l-table>
-          </card>
-
-        </div>
-
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-  import LTable from 'src/components/Table.vue'
-  import Card from 'src/components/Cards/Card.vue'
-  const tableColumns = ['Id', 'Name', 'Salary', 'Country', 'City']
-  const tableData = [{
-    id: 1,
-    name: 'Dakota Rice',
-    salary: '$36.738',
-    country: 'Niger',
-    city: 'Oud-Turnhout'
-  },
-  {
-    id: 2,
-    name: 'Minerva Hooper',
-    salary: '$23,789',
-    country: 'Curaçao',
-    city: 'Sinaai-Waas'
-  },
-  {
-    id: 3,
-    name: 'Sage Rodriguez',
-    salary: '$56,142',
-    country: 'Netherlands',
-    city: 'Baileux'
-  },
-  {
-    id: 4,
-    name: 'Philip Chaney',
-    salary: '$38,735',
-    country: 'Korea, South',
-    city: 'Overland Park'
-  },
-  {
-    id: 5,
-    name: 'Doris Greene',
-    salary: '$63,542',
-    country: 'Malawi',
-    city: 'Feldkirchen in Kärnten'
-  }]
-  export default {
-    components: {
-      LTable,
-      Card
-    },
-    data () {
-      return {
-        table1: {
-          columns: [...tableColumns],
-          data: [...tableData]
-        },
-        table2: {
-          columns: [...tableColumns],
-          data: [...tableData]
-        }
-      }
-    }
-  }
-</script>
-<style>
-</style>
diff --git a/src/pages/Typography.vue b/src/pages/Typography.vue
deleted file mode 100644
index 442a57c2..00000000
--- a/src/pages/Typography.vue
+++ /dev/null
@@ -1,98 +0,0 @@
-<template>
-  <div class="content">
-    <div class="container-fluid">
-      <div class="row">
-        <div class="col-12">
-          <card>
-            <template slot="header">
-              <h4 class="card-title">Light Bootstrap Table Heading</h4>
-              <p class="card-category">Created using Roboto Font Family</p>
-            </template>
-            <div class="typo-line">
-              <h1><p class="category">Header 1</p>Light Bootstrap Table Heading </h1>
-            </div>
-
-            <div class="typo-line">
-              <h2><p class="category">Header 2</p>Light Bootstrap Table Heading</h2>
-            </div>
-            <div class="typo-line">
-              <h3><p class="category">Header 3</p>Light Bootstrap Table Heading</h3>
-            </div>
-            <div class="typo-line">
-              <h4><p class="category">Header 4</p>Light Bootstrap Table Heading</h4>
-            </div>
-            <div class="typo-line">
-              <h5><p class="category">Header 5</p>Light Bootstrap Table Heading</h5>
-            </div>
-            <div class="typo-line">
-              <h6><p class="category">Header 6</p>Light Bootstrap Table Heading</h6>
-            </div>
-            <div class="typo-line">
-              <p><span class="category">Paragraph</span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.
-              </p>
-            </div>
-            <div class="typo-line">
-              <p class="category">Quote</p>
-              <blockquote>
-                <p>
-                  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.
-                </p>
-                <small>
-                  Steve Jobs, CEO Apple
-                </small>
-              </blockquote>
-            </div>
-
-            <div class="typo-line">
-              <p class="category">Muted Text</p>
-              <p class="text-muted">
-                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.
-              </p>
-            </div>
-            <div class="typo-line">
-              <!--
-               there are also "text-info", "text-success", "text-warning", "text-danger" clases for the text
-               -->
-              <p class="category">Coloured Text</p>
-              <p class="text-primary">
-                Text Primary - Light Bootstrap Table Heading and complex bootstrap dashboard you've ever seen on the internet.
-              </p>
-              <p class="text-info">
-                Text Info - Light Bootstrap Table Heading and complex bootstrap dashboard you've ever seen on the internet.
-              </p>
-              <p class="text-success">
-                Text Success - Light Bootstrap Table Heading and complex bootstrap dashboard you've ever seen on the internet.
-              </p>
-              <p class="text-warning">
-                Text Warning - Light Bootstrap Table Heading and complex bootstrap dashboard you've ever seen on the internet.
-              </p>
-              <p class="text-danger">
-                Text Danger - Light Bootstrap Table Heading and complex bootstrap dashboard you've ever seen on the internet.
-              </p>
-            </div>
-
-            <div class="typo-line">
-              <h2><p class="category">Small Tag</p>Header with small subtitle <br>
-                <small>".small" is a tag for the headers</small>
-              </h2>
-            </div>
-          </card>
-        </div>
-
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-  import Card from 'src/components/Cards/Card.vue'
-
-  export default {
-    components: {
-      Card
-    }
-  }
-
-</script>
-<style>
-
-</style>
diff --git a/src/pages/Upgrade.vue b/src/pages/Upgrade.vue
deleted file mode 100644
index cfc8b71b..00000000
--- a/src/pages/Upgrade.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<template>
-  <div class="content">
-    <div class="container-fluid">
-      <div class="row">
-        <div class="col-md-8 ml-auto mr-auto">
-          <div class="card">
-            <div class="header text-center">
-              <h4 class="title">Light Bootstrap Dashboard PRO</h4>
-              <p class="category">Are you looking for more components? Please check our Premium Version of Light Bootstrap Dashboard.</p>
-              <br>
-            </div>
-            <div class="content table-responsive table-upgrade">
-              <table class="table">
-                <thead>
-                <tr><th></th>
-                  <th class="text-center">Free</th>
-                  <th class="text-center">PRO</th>
-                </tr></thead>
-                <tbody>
-                <tr>
-                  <td>Components</td>
-                  <td>16</td>
-                  <td>160+</td>
-                </tr>
-                <tr>
-                  <td>Plugins</td>
-                  <td>4</td>
-                  <td>17+</td>
-                </tr>
-                <tr>
-                  <td>Example Pages</td>
-                  <td>4</td>
-                  <td>25+</td>
-                </tr>
-                <tr>
-                  <td>Documentation</td>
-                  <td><i class="fa fa-check text-success"></i></td>
-                  <td><i class="fa fa-check text-success"></i></td>
-                </tr>
-                <tr>
-                  <td>SASS Files</td>
-                  <td><i class="fa fa-check text-success"></i></td>
-                  <td><i class="fa fa-check text-success"></i></td>
-                </tr>
-                <tr>
-                  <td>Login/Register/Lock Pages</td>
-                  <td><i class="fa fa-times text-danger"></i></td>
-                  <td><i class="fa fa-check text-success"></i></td>
-                </tr>
-                <tr>
-                  <td>Premium Support</td>
-                  <td><i class="fa fa-times text-danger"></i></td>
-                  <td><i class="fa fa-check text-success"></i></td>
-                </tr>
-                <tr>
-                  <td></td>
-                  <td>Free</td>
-                  <td>Just $49</td>
-                </tr>
-                <tr class="last-row">
-                  <td></td>
-                  <td>
-                    <a href="#" class="upgrade-table-btn btn btn-b btn-round btn-fill btn-default disabled">Current Version</a>
-                  </td>
-                  <td>
-                    <a target="_blank" href="http://www.creative-tim.com/product/vue-light-bootstrap-dashboard-pro/?ref=vue-lbdupgrade" class="upgrade-table-btn btn btn-round btn-fill btn-info">Upgrade to PRO</a>
-                  </td>
-                </tr>
-                </tbody>
-              </table>
-
-            </div>
-          </div>
-        </div>
-      </div>
-
-    </div>
-  </div>
-</template>
-<script>
-  export default {}
-</script>
-<style lang="scss">
-  .upgrade-table-btn {
-    width: 160px;
-    &:first-child {
-      margin-right: 10px;
-    }
-  }
-</style>
diff --git a/src/pages/User/UserAdd.vue b/src/pages/User/UserAdd.vue
new file mode 100644
index 00000000..96453407
--- /dev/null
+++ b/src/pages/User/UserAdd.vue
@@ -0,0 +1,74 @@
+<template>
+    <div class="container mt-5">
+        <b-form @submit.prevent="onSubmit">
+            <b-form-group label="Role" label-for="role-select">
+                <b-form-select id="role-select" v-model="form.role" :options="roles" required></b-form-select>
+            </b-form-group>
+
+            <b-form-group label="Email" label-for="email-input">
+                <b-form-input id="email-input" v-model="form.email" type="email" placeholder="Enter your email"
+                    required></b-form-input>
+            </b-form-group>
+
+            <b-form-group label="Name" label-for="name-input">
+                <b-form-input id="name-input" v-model="form.name" placeholder="Enter your name" required></b-form-input>
+            </b-form-group>
+
+            <b-form-group label="Password" label-for="password-input">
+                <b-form-input id="password-input" v-model="form.password" type="password"
+                    placeholder="Enter your password" required></b-form-input>
+            </b-form-group>
+
+            <b-button type="submit" variant="primary">ADD</b-button>
+        </b-form>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            form: {
+                role: null,
+                email: '',
+                name: '',
+                password: '',
+            },
+            roles: []
+        };
+    },
+    created() {
+        axios
+            .get('http://127.0.0.1:8000/api/roles')
+            .then((response) => {
+                const roles = response.data.map(role => ({
+                    value: role.id,
+                    text: role.name
+                }));
+                this.roles = roles
+            })
+            .catch((error) => {
+                console.log(error, 'error')
+            })
+    },
+    methods: {
+        onSubmit() {
+            axios.post('http://127.0.0.1:8000/api/user-add', this.form)
+            .then(response => {
+                if(response.status == 201) {
+                    this.$router.push({name: 'UserList'})
+                }
+            })
+            .catch(error => {
+                alert(error.response.data.error)
+            });
+        },
+    },
+};
+</script>
+
+<style scoped>
+.container {
+    max-width: 600px;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/User/UserEdit.vue b/src/pages/User/UserEdit.vue
new file mode 100644
index 00000000..e1e8fd60
--- /dev/null
+++ b/src/pages/User/UserEdit.vue
@@ -0,0 +1,93 @@
+<template>
+    <div class="container mt-5">
+        <b-form @submit.prevent="onSubmit">
+            <b-form-group label="Role" label-for="role-select">
+                <b-form-select id="role-select" v-model="form.role" :options="roles" required></b-form-select>
+            </b-form-group>
+
+            <b-form-group label="Email" label-for="email-input">
+                <b-form-input id="email-input" v-model="form.email" type="email" placeholder="Enter your email"
+                    required></b-form-input>
+            </b-form-group>
+
+            <b-form-group label="Name" label-for="name-input">
+                <b-form-input id="name-input" v-model="form.name" placeholder="Enter your name" required></b-form-input>
+            </b-form-group>
+
+            <b-form-group label="Password" label-for="password-input">
+                <b-form-input id="password-input" v-model="form.password" type="password"
+                    placeholder="Enter your password" required></b-form-input>
+            </b-form-group>
+
+            <b-button type="submit" variant="primary">ADD</b-button>
+        </b-form>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            form: {
+                role: null,
+                email: '',
+                name: '',
+                password: '',
+            },
+            roles: []
+        };
+    },
+    methods: {
+        onSubmit() {
+            const userId = this.$route.params.id;
+            axios.put(`http://127.0.0.1:8000/api/users/${userId}`, this.form)
+                .then(() => {
+                    alert('User updated successfully');
+                    this.$router.push({ name: 'UserList' });
+                })
+                .catch(error => {
+                    console.error('Failed to update user:', error);
+                });
+        },
+
+        fetchRoles() {
+            axios
+                .get('http://127.0.0.1:8000/api/roles')
+                .then((response) => {
+                    const roles = response.data.map(role => ({
+                        value: role.id,
+                        text: role.name
+                    }));
+                    this.roles = roles
+                })
+                .catch((error) => {
+                    console.log(error, 'error')
+                })
+        },
+
+        fetchUser() {
+            const userId = this.$route.params.id;
+            axios.get(`http://127.0.0.1:8000/api/users/${userId}`)
+                .then(response => {
+                    const user = response.data;
+                    this.form.role = user.roles[0].id;
+                    this.form.email = user.email;
+                    this.form.name = user.name;
+                })
+                .catch(error => {
+                    console.error('Failed to fetch user:', error);
+                });
+        },
+    },
+    mounted() {
+        this.fetchRoles();
+        this.fetchUser();
+    },
+};
+</script>
+
+<style scoped>
+.container {
+    max-width: 600px;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/UserList.vue b/src/pages/UserList.vue
new file mode 100644
index 00000000..e0442398
--- /dev/null
+++ b/src/pages/UserList.vue
@@ -0,0 +1,88 @@
+<template>
+  <div class="content">
+    <div class="container-fluid">
+      <div class="row">
+        <div class="col-12">
+          <card class="strpied-tabled-with-hover" body-classes="table-full-width table-responsive">
+            <template slot="header">
+              <h4 class="card-title">List User</h4>
+              <button type="button" @click="addUser()">Create User</button>
+            </template>
+            <b-table :items="users" :fields="fields" hover striped>
+              <template #cell(action)="data">
+                <b-button size="sm" variant="primary" @click="editUser(data.item)">Edit</b-button>
+                <b-button size="sm" variant="danger" @click="deleteUser(data.item.id)">Delete</b-button>
+              </template>
+            </b-table>
+          </card>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import LTable from 'src/components/Table.vue'
+import Card from 'src/components/Cards/Card.vue'
+export default {
+  components: {
+    LTable,
+    Card
+  },
+  data() {
+    return {
+      users: [],
+      fields: [
+        { key: 'id', label: 'ID' },
+        { key: 'email', label: 'Email' },
+        { key: 'role', label: 'Role' },
+        { key: 'created', label: 'Created' },
+        { key: 'action', label: 'Action' }
+      ],
+    }
+  },
+  created() {
+    axios
+      .get('http://127.0.0.1:8000/api/users')
+      .then((response) => {
+        const users = response.data.map(user => {
+          return {
+            id: user.id,
+            email: user.email,
+            role: user.roles[0].name,
+            created: user.created_at
+          }
+        })
+        this.users = users
+      })
+      .catch((error) => {
+        console.log(error, 'error')
+      })
+  },
+  methods: {
+    addUser() {
+      this.$router.push({ name: 'UsersAdd' })
+    },
+    editUser(user) {
+      this.$router.push({ name: 'UsersEdit', params: { id: user.id } });
+    },
+    deleteUser(userId) {
+      if (confirm('Are you sure you want to delete this user?')) {
+        axios.delete(`http://127.0.0.1:8000/api/users/${userId}`)
+          .then(response => {
+            if(response.status == 200){
+              const index = this.users.findIndex(user => user.id == userId);
+              if (index !== -1) {
+                  this.users.splice(index, 1);
+              }
+            }
+          })
+          .catch(error => {
+            console.error('Failed to delete user:', error);
+            alert('Failed to delete user.');
+          });
+      }
+    }
+  }
+}
+</script>
+<style></style>
diff --git a/src/routes/routes.js b/src/routes/routes.js
index e17c4054..b706641a 100644
--- a/src/routes/routes.js
+++ b/src/routes/routes.js
@@ -1,18 +1,42 @@
+import store from '../store/index';
+
 import DashboardLayout from '../layout/DashboardLayout.vue'
 // GeneralViews
 import NotFound from '../pages/NotFoundPage.vue'
+import Login from '../pages/Login.vue'
 
 // Admin pages
 import Overview from 'src/pages/Overview.vue'
 import UserProfile from 'src/pages/UserProfile.vue'
-import TableList from 'src/pages/TableList.vue'
-import Typography from 'src/pages/Typography.vue'
-import Icons from 'src/pages/Icons.vue'
-import Maps from 'src/pages/Maps.vue'
-import Notifications from 'src/pages/Notifications.vue'
-import Upgrade from 'src/pages/Upgrade.vue'
+import UserList from 'src/pages/UserList.vue'
+import CategoryList from 'src/pages/CategoryList.vue'
+import ArticleList from 'src/pages/ArticleList.vue'
+
+import UserAdd from '../pages/User/UserAdd.vue'
+import UserEdit from '../pages/User/UserEdit.vue'
+
+import CategoryAdd from '../pages/Category/CategoryAdd.vue'
+import CategoryEdit from '../pages/Category/CategoryEdit.vue'
+
+import ArticleEdit from '../pages/Article/ArticleEdit.vue'
+import ArticleAdd from '../pages/Article/ArticleAdd.vue'
+
+// User
+import UserLayout from '../layout/UserLayout.vue';
 
 const routes = [
+  {
+    path: '/',
+    component: UserLayout,
+    name: 'UserLayout',
+    meta: { guest: true }
+  },
+  {
+    path: '/',
+    component: UserLayout,
+    name: 'UserArticle',
+    meta: { guest: true }
+  },
   {
     path: '/',
     component: DashboardLayout,
@@ -22,59 +46,83 @@ const routes = [
     path: '/admin',
     component: DashboardLayout,
     redirect: '/admin/overview',
+    name: 'dashboard',
     children: [
+      {
+        path: 'login',
+        name: 'Login',
+        component: Login,
+        meta: { guest: true }
+      },
       {
         path: 'overview',
         name: 'Overview',
-        component: Overview
+        component: Overview,
+        meta: { requiresAuth: true },
       },
       {
         path: 'user',
         name: 'User',
-        component: UserProfile
+        component: UserProfile,
+        meta: { requiresAuth: true },
+      },
+      {
+        path: 'users',
+        name: 'UserList',
+        component: UserList,
+        meta: { requiresAuth: true },
       },
       {
-        path: 'table-list',
-        name: 'Table List',
-        component: TableList
+        path: 'users/edit/:id',
+        name: 'UsersEdit',
+        component: UserEdit,
+        meta: { requiresAuth: true },
       },
       {
-        path: 'typography',
-        name: 'Typography',
-        component: Typography
+        path: 'users/add',
+        name: 'UsersAdd',
+        component: UserAdd,
+        meta: { requiresAuth: true },
       },
       {
-        path: 'icons',
-        name: 'Icons',
-        component: Icons
+        path: 'articles',
+        name: 'ArticleList',
+        component: ArticleList,
+        meta: { requiresAuth: true },
       },
       {
-        path: 'maps',
-        name: 'Maps',
-        component: Maps
+        path: 'articles/edit/:id',
+        name: 'ArticleEdit',
+        component: ArticleEdit,
+        meta: { requiresAuth: true },
       },
       {
-        path: 'notifications',
-        name: 'Notifications',
-        component: Notifications
+        path: 'articles/add',
+        name: 'ArticleAdd',
+        component: ArticleAdd,
+        meta: { requiresAuth: true },
       },
       {
-        path: 'upgrade',
-        name: 'Upgrade to PRO',
-        component: Upgrade
+        path: 'categories',
+        name: 'CategoryList',
+        component: CategoryList,
+        meta: { requiresAuth: true },
+      },
+      {
+        path: 'categories/edit/:id',
+        name: 'CategoryEdit',
+        component: CategoryEdit,
+        meta: { requiresAuth: true },
+      },
+      {
+        path: 'categories/add',
+        name: 'CategoryAdd',
+        component: CategoryAdd,
+        meta: { requiresAuth: true },
       }
     ]
   },
   { path: '*', component: NotFound }
 ]
 
-/**
- * Asynchronously load view (Webpack Lazy loading compatible)
- * The specified component must be inside the Views folder
- * @param  {string} name  the filename (basename) of the view to load.
-function view(name) {
-   var res= require('../components/Dashboard/Views/' + name + '.vue');
-   return res;
-};**/
-
 export default routes
diff --git a/src/store/index.js b/src/store/index.js
new file mode 100644
index 00000000..233c842e
--- /dev/null
+++ b/src/store/index.js
@@ -0,0 +1,72 @@
+import Vue from "vue";
+import Vuex from "vuex";
+import axios from "axios";
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+  state: {
+    user: null,
+    errors: {},
+  },
+  mutations: {
+    setUser(state, user) {
+      state.user = user;
+    },
+    setErrors(state, errors) {
+      state.errors = errors;
+    },
+    clearUser(state) {
+      state.user = null;
+    },
+    clearErrors(state) {
+      state.errors = {};
+    },
+  },
+  getters: {
+    isAuthenticated: (state) => state.user,
+  },
+  actions: {
+    async getUser({ commit }) {
+      const token = localStorage.getItem("token");
+      if (token) {
+        try {
+          const res = await axios.get("/api/user", {
+            headers: { Authorization: `Bearer ${token}` },
+          });
+          commit("setUser", res.data);
+        } catch (error) {
+          console.error("Error fetching user:", error);
+        }
+      }
+    },
+
+    async loginUser({ commit }, formData ) {
+      try {
+        const res = await axios.post(`http://127.0.0.1:8000/api/login`, formData);
+        if (res.status == 200) {
+          localStorage.setItem("token", res.data.token);
+          commit("setUser", res.data.user);
+        }
+      } catch (error) {
+        console.log("Error during authentication:", error);
+      }
+    },
+
+    async logout({ commit }) {
+      const token = localStorage.getItem("token");
+      if (token) {
+        try {
+          await axios.post("http://127.0.0.1:8000/api/logout", null, {
+            headers: { Authorization: `Bearer ${token}` },
+          });
+          commit("clearUser");
+          localStorage.removeItem("token");
+          this.$router.push({ name: "Login" });
+        } catch (error) {
+          console.error("Error during logout:", error);
+        }
+      }
+    },
+  },
+});