diff --git a/starter-project-web-vue2/components/amanz/AddBlog.vue b/starter-project-web-vue2/components/amanz/AddBlog.vue
new file mode 100644
index 00000000..24f28e13
--- /dev/null
+++ b/starter-project-web-vue2/components/amanz/AddBlog.vue
@@ -0,0 +1,119 @@
+<template>
+  <v-row>
+    <v-dialog v-model="dialog" persistent max-width="600px">
+      <template #activator="{ on, attrs }">
+        <!-- <v-btn color="primary" dark v-bind="attrs" v-on="on">
+          Open Dialog
+        </v-btn> -->
+        <v-btn
+          color="success"
+          class="mt-10 ml-5 py-5 px-7"
+          v-bind="attrs"
+          v-on="on"
+          >add blog</v-btn
+        >
+      </template>
+      <v-card>
+        <v-card-title>
+          <span class="text-h5">Add Blog</span>
+        </v-card-title>
+        <v-card-text>
+          <v-container>
+            <v-row>
+              <!-- <v-col cols="12" sm="6" md="4">
+                <v-text-field label="Legal first name*" required></v-text-field>
+              </v-col> -->
+              <!-- <v-col cols="12" sm="6" md="4">
+                <v-text-field
+                  label="Legal middle name"
+                  hint="example of helper text only on focus"
+                ></v-text-field>
+              </v-col> -->
+              <!-- <v-col cols="12" sm="6" md="4">
+                <v-text-field
+                  label="Legal last name*"
+                  hint="example of persistent helper text"
+                  persistent-hint
+                  required
+                ></v-text-field>
+              </v-col> -->
+              <v-col cols="12">
+                <v-text-field
+                  v-model="title"
+                  label="Title*"
+                  required
+                ></v-text-field>
+              </v-col>
+              <v-col cols="12">
+                <v-text-field
+                  v-model="content"
+                  label="Content*"
+                  required
+                ></v-text-field>
+              </v-col>
+              <!-- <v-col cols="12" sm="6">
+                <v-select
+                  :items="['0-17', '18-29', '30-54', '54+']"
+                  label="Age*"
+                  required
+                ></v-select>
+              </v-col> -->
+              <!-- <v-col cols="12" sm="6">
+                <v-autocomplete
+                  :items="[
+                    'Skiing',
+                    'Ice hockey',
+                    'Soccer',
+                    'Basketball',
+                    'Hockey',
+                    'Reading',
+                    'Writing',
+                    'Coding',
+                    'Basejump',
+                  ]"
+                  label="Interests"
+                  multiple
+                ></v-autocomplete>
+              </v-col> -->
+            </v-row>
+          </v-container>
+          <v-text class="ml-3 text-subtitle-1 font-weight-medium"
+            ><v-text color="red">*</v-text>indicates required field</v-text
+          >
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn color="blue darken-1" text @click="dialog = false">
+            Cancel
+          </v-btn>
+          <v-btn color="blue darken-1" text @click="onSubmit"> Add </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </v-row>
+</template>
+
+<script>
+import { mapActions } from 'vuex'
+export default {
+  data: () => ({
+    dialog: false,
+    newBlog: {},
+    title: '',
+    content: '',
+  }),
+  methods: {
+    ...mapActions('amanz', ['addBlog']),
+    onSubmit(e) {
+      e.preventDefault()
+      this.newBlog = {
+        title: this.title,
+        content: this.content,
+        description: 'description 101',
+      }
+      this.addBlog(this.newBlog)
+      this.dialog = false
+    },
+  },
+}
+</script>
diff --git a/starter-project-web-vue2/components/amanz/AmanzBlog.vue b/starter-project-web-vue2/components/amanz/AmanzBlog.vue
new file mode 100644
index 00000000..051020c2
--- /dev/null
+++ b/starter-project-web-vue2/components/amanz/AmanzBlog.vue
@@ -0,0 +1,70 @@
+<template>
+  <v-container>
+    <v-hover v-slot:="{ hover }">
+      <v-card
+        :elevation="hover ? 7 : 1.5"
+        class="mx-auto mt-2 pa-6 transition-swing"
+        outlined
+      >
+        <v-list-item two-line>
+          <v-list-item-content>
+            <Nuxt-link
+              style="text-decoration: none; color: inherit"
+              :to="`/amanz/${blog._id} `"
+            >
+              <v-list-item-title class="text-h5 mb-3">
+                <v-text> {{ blog.title }} </v-text>
+              </v-list-item-title>
+              <v-list-item-subtitle class="text-h6">{{
+                blog.content
+              }}</v-list-item-subtitle>
+            </Nuxt-link>
+          </v-list-item-content>
+
+          <v-list-item-action tile class="mt-7 ml-15">
+            <EditBlog :blogger="blog" />
+          </v-list-item-action>
+          <v-list-item-action tile class="mt-7">
+            <v-btn icon :disabled="!isAuthor" @click="deleteBlog(blog._id)">
+              <v-icon size="30" color="red">mdi-delete</v-icon>
+            </v-btn>
+          </v-list-item-action>
+        </v-list-item>
+
+        <!-- <v-card-actions>
+        <v-btn outlined rounded text> Button </v-btn>
+      </v-card-actions> -->
+      </v-card>
+    </v-hover>
+  </v-container>
+</template>
+
+<script>
+import { mapActions } from 'vuex'
+import EditBlog from './EditBlog.vue'
+export default {
+  name: 'AmanzBlog',
+
+  components: { EditBlog },
+
+  props: {
+    blog: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      isAuthor: true,
+    }
+  },
+  created() {
+    // console.log(this.$auth.$state)
+    this.isAuthor = this.blog.authorUserId._id === this.$auth.$state.user._id
+  },
+  methods: {
+    ...mapActions('amanz', ['deleteBlog']),
+  },
+}
+</script>
diff --git a/starter-project-web-vue2/components/amanz/EditBlog.vue b/starter-project-web-vue2/components/amanz/EditBlog.vue
new file mode 100644
index 00000000..3a7663e9
--- /dev/null
+++ b/starter-project-web-vue2/components/amanz/EditBlog.vue
@@ -0,0 +1,75 @@
+<template>
+  <v-row>
+    <v-dialog v-model="dialog" persistent max-width="600px">
+      <template #activator="{ on, attrs }">
+        <!-- <v-btn color="primary" dark v-bind="attrs" v-on="on">
+          Open Dialog
+        </v-btn> -->
+        <!-- <v-btn
+          color="success"
+          class="mt-10 ml-5 py-5 px-7"
+          v-bind="attrs"
+          v-on="on"
+          >add blog</v-btn
+        > -->
+        <v-btn icon v-bind="attrs" disabled="!isAuthor" v-on="on">
+          <v-icon size="30" color="green">mdi-pencil</v-icon>
+        </v-btn>
+      </template>
+      <v-card>
+        <v-card-title>
+          <span class="text-h5">Edit Blog</span>
+        </v-card-title>
+        <v-card-text>
+          <v-container>
+            <v-row>
+              <v-col cols="12">
+                <v-text-field
+                  v-model="title"
+                  label="Title*"
+                  required
+                ></v-text-field>
+              </v-col>
+              <v-col cols="12">
+                <v-text-field
+                  v-model="content"
+                  label="Content*"
+                  required
+                ></v-text-field>
+              </v-col>
+            </v-row>
+          </v-container>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn color="blue darken-1" text @click="dialog = false">
+            Cancel
+          </v-btn>
+          <v-btn color="blue darken-1" text @click="dialog = false">
+            Save
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </v-row>
+</template>
+
+<script>
+export default {
+  props: {
+    blogger: {
+      type: Object,
+      required: true,
+    },
+  },
+  data: () => ({
+    dialog: false,
+    title: '',
+    content: '',
+  }),
+  mounted() {
+    this.title = this.blogger.title
+    this.content = this.blogger.content
+  },
+}
+</script>
diff --git a/starter-project-web-vue2/pages/amanz/_id.vue b/starter-project-web-vue2/pages/amanz/_id.vue
new file mode 100644
index 00000000..fe9e14d7
--- /dev/null
+++ b/starter-project-web-vue2/pages/amanz/_id.vue
@@ -0,0 +1,51 @@
+<template>
+  <v-container>
+    <div v-if="blog === null">loading...</div>
+    <div v-else>
+      <nuxt-link style="text-decoration: none; color: inherit" :to="'/amanz/'">
+        <v-btn fab outlined x-small class="pa-2 mb-2 ml-3 mt-3"
+          ><v-icon> mdi-chevron-left </v-icon></v-btn
+        ></nuxt-link
+      >
+      <v-card
+        :elevation="3"
+        class="mx-auto mt-2 pa-8 transition-swing"
+        outlined
+      >
+        <v-list-item three-line>
+          <v-list-item-content>
+            <v-list-item-title class="text-h4 mb-5">
+              <v-text> {{ blog.title }} </v-text>
+            </v-list-item-title>
+            <v-text class="text-h5 text-wrap font-weight-regular">{{
+              blog.content
+            }}</v-text>
+          </v-list-item-content>
+        </v-list-item>
+        <v-card-actions>
+          <v-text class="text-h5 mt-5 ml-2 font-italic"
+            >By Amanuel Alemayehu</v-text
+          >
+        </v-card-actions>
+      </v-card>
+    </div>
+  </v-container>
+</template>
+
+<script>
+import { mapActions, mapState } from 'vuex'
+export default {
+  computed: {
+    ...mapState('amanz', ['blog']),
+  },
+  created() {
+    this.fetchBlogsById(this.$route.params.id)
+  },
+  methods: {
+    ...mapActions('amanz', ['fetchBlogsById']),
+  },
+  // created() {
+  //   console.log(this.$route.params.id)
+  // },
+}
+</script>
diff --git a/starter-project-web-vue2/pages/amanz/index.vue b/starter-project-web-vue2/pages/amanz/index.vue
new file mode 100644
index 00000000..75e414fb
--- /dev/null
+++ b/starter-project-web-vue2/pages/amanz/index.vue
@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <!-- <v-btn color="success" class="my-3 ml-5 py-5 px-7">add blog</v-btn> -->
+    <AddBlog />
+    <div v-if="blogs.length > 0">
+      <v-row v-for="blog in blogs" :key="blog._id">
+        <AmanzBlog :blog="blog" />
+      </v-row>
+    </div>
+    <div v-else>loading...</div>
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex'
+import AmanzBlog from '~/components/amanz/AmanzBlog.vue'
+import AddBlog from '~/components/amanz/AddBlog.vue'
+
+export default {
+  name: 'App',
+  components: { AmanzBlog, AddBlog },
+  computed: { ...mapState('amanz', ['blogs']) },
+  mounted() {
+    this.fetchBlogs()
+  },
+  methods: {
+    ...mapActions('amanz', ['fetchBlogs']),
+  },
+}
+</script>
diff --git a/starter-project-web-vue2/pages/index.vue b/starter-project-web-vue2/pages/index.vue
index 95c1f831..b766fc44 100644
--- a/starter-project-web-vue2/pages/index.vue
+++ b/starter-project-web-vue2/pages/index.vue
@@ -41,7 +41,6 @@ export default {
           name: 'Amsale Gebrehana',
           description: 'A2SV G31',
           link: '/amsale',
-         
         },
         {
           name: 'Ruth Getachew',
@@ -49,10 +48,14 @@ export default {
           link: '/ruth',
         },
         {
-          name: "Keiredin Aman",
+          name: 'Keiredin Aman',
           description: 'Summer Intern',
-          link:
-            '/keiredin',
+          link: '/keiredin',
+        },
+        {
+          name: 'Amanuel Alemayehu',
+          description: 'Web Team Member',
+          link: '/amanz',
         },
       ],
     }
diff --git a/starter-project-web-vue2/store/amanz.js b/starter-project-web-vue2/store/amanz.js
new file mode 100644
index 00000000..73f42ac7
--- /dev/null
+++ b/starter-project-web-vue2/store/amanz.js
@@ -0,0 +1,72 @@
+// eslint-disable-next-line no-unused-vars
+import axios from 'axios'
+
+const state = {
+  blogs: [],
+  blog: {},
+}
+
+const getters = {
+  allBlogs: (state) => state.blogs,
+}
+
+const actions = {
+  // eslint-disable-next-line no-unused-vars
+  async fetchBlogs({ commit }) {
+    const response = await axios.get(
+      'https://blog-app-backend.onrender.com/api/articles/all'
+    )
+    commit('setBlogs', response.data)
+  },
+
+  async fetchBlogsById({ commit }, id) {
+    const response = await axios.get(
+      `https://blog-app-backend.onrender.com/api/articles/${id}`
+    )
+    commit('setBlog', response.data)
+  },
+
+  async addBlog({ commit }, newBlog) {
+    const response = await this.$axios.post(
+      'https://blog-app-backend.onrender.com/api/articles',
+      newBlog
+    )
+    commit('newBlog', response.data)
+  },
+
+  async deleteBlog({ commit }, id) {
+    await this.$axios.delete(
+      `https://blog-app-backend.onrender.com/api/articles/${id}`
+    )
+
+    commit('removeBlog', id)
+  },
+
+  async updateBlog({ commit }, updated) {
+    const response = await this.$axios.put(
+      `https://blog-app-backend.onrender.com/api/articles/${updated.id}`,
+      updated
+    )
+    commit('updateBlog', response.data)
+  },
+}
+
+const mutations = {
+  setBlogs: (state, blogs) => (state.blogs = blogs),
+  newBlog: (state, blog) => state.blogs.unshift(blog),
+  setBlog: (state, blog) => (state.blog = blog),
+  // newBlog: (state, blog) => state.blogs.unshift(blog),
+  removeBlog: (state, id) =>
+    (state.blogs = state.blogs.filter((blogg) => blogg._id !== id)),
+  // updateBlog: (state, blog) => {
+  //   const index = state.blogs.findIndex((blogg) => blogg._id === blog._id)
+
+  // }
+}
+
+export default {
+  state,
+  getters,
+  actions,
+  mutations,
+}