diff --git a/starter-project-web-vue2/.eslintrc.js b/starter-project-web-vue2/.eslintrc.js
index b7166f48..63024360 100644
--- a/starter-project-web-vue2/.eslintrc.js
+++ b/starter-project-web-vue2/.eslintrc.js
@@ -2,19 +2,14 @@ module.exports = {
   root: true,
   env: {
     browser: true,
-    node: true
+    node: true,
   },
   parserOptions: {
     parser: '@babel/eslint-parser',
-    requireConfigFile: false
+    requireConfigFile: false,
   },
-  extends: [
-    '@nuxtjs',
-    'plugin:nuxt/recommended',
-    'prettier'
-  ],
-  plugins: [
-  ],
+  extends: ['@nuxtjs', 'plugin:nuxt/recommended', 'prettier'],
+  plugins: [],
   rules: {
     'vue/multi-word-component-names': 'off',
   },
diff --git a/starter-project-web-vue2/README.md b/starter-project-web-vue2/README.md
index f7e1208a..92c2d3a4 100644
--- a/starter-project-web-vue2/README.md
+++ b/starter-project-web-vue2/README.md
@@ -16,7 +16,7 @@
 
 6. Add a file called index.vue in your pages folder. This page will be used to display a list of blogs.
 
-7. Add a file called _id.vue in your pages folder. This page will be used to display a single blog.
+7. Add a file called \_id.vue in your pages folder. This page will be used to display a single blog.
 
 8. Add any components you want to use in your pages to your components folder. (ex. the component used to display a single blog on the list page.)
 
@@ -45,7 +45,7 @@
 
 ### End to End Testing
 
-. . . 
+. . .
 
 ## Build Setup
 
diff --git a/starter-project-web-vue2/assets/variables.css b/starter-project-web-vue2/assets/variables.css
index f3e2dc35..9e3adf33 100644
--- a/starter-project-web-vue2/assets/variables.css
+++ b/starter-project-web-vue2/assets/variables.css
@@ -1 +1 @@
-/* No CSS *//*# sourceMappingURL=variables.css.map */
\ No newline at end of file
+/* No CSS */ /*# sourceMappingURL=variables.css.map */
diff --git a/starter-project-web-vue2/commitlint.config.js b/starter-project-web-vue2/commitlint.config.js
index 69b4242c..98ee7dfc 100644
--- a/starter-project-web-vue2/commitlint.config.js
+++ b/starter-project-web-vue2/commitlint.config.js
@@ -1,3 +1,3 @@
 module.exports = {
-  extends: ["@commitlint/config-conventional"],
-};
+  extends: ['@commitlint/config-conventional'],
+}
diff --git a/starter-project-web-vue2/components/abraham/AbrahamAddBlog.vue b/starter-project-web-vue2/components/abraham/AbrahamAddBlog.vue
index 605fb891..cd560b82 100644
--- a/starter-project-web-vue2/components/abraham/AbrahamAddBlog.vue
+++ b/starter-project-web-vue2/components/abraham/AbrahamAddBlog.vue
@@ -1,6 +1,6 @@
 <template>
   <v-dialog max-width="600px">
-    <template v-slot:activator="{ on }">
+    <template #activator="{ on }">
       <v-btn color="primary" dark v-on="on">
         <v-icon left> mdi-plus </v-icon>
         Add Blog</v-btn
@@ -15,7 +15,7 @@
           <v-text-field v-model="blogTitle" label="Title" />
           <v-textarea v-model="blogContent" label="Content" />
           <v-spacer></v-spacer>
-          <v-btn @click="onSubmit" class="success mx-0 mt-3">Add Blog</v-btn>
+          <v-btn class="success mx-0 mt-3" @click="onSubmit">Add Blog</v-btn>
         </v-form>
       </v-card-text>
     </v-card>
diff --git a/starter-project-web-vue2/components/abraham/AbrahamBlogPost.vue b/starter-project-web-vue2/components/abraham/AbrahamBlogPost.vue
index 821cf566..bd6176a6 100644
--- a/starter-project-web-vue2/components/abraham/AbrahamBlogPost.vue
+++ b/starter-project-web-vue2/components/abraham/AbrahamBlogPost.vue
@@ -6,20 +6,20 @@
     <v-container v-if="edit_area" class="px-0 black--text">
       <p class="edit-post">Edit Post</p>
       <v-text-field
+        v-model="blog_title"
         outlined
         class="text-black"
         :value="current.title"
         label="Title"
-        v-model="blog_title"
       />
       <v-text-field
+        v-model="blog_content"
         outlined
         class="text-black"
         :value="current.body"
         label="Content"
-        v-model="blog_content"
       />
-      <v-btn @click="update" class="pa-2 mb-2 mx-7 mt-3" dark>Save</v-btn>
+      <v-btn class="pa-2 mb-2 mx-7 mt-3" dark @click="update">Save</v-btn>
     </v-container>
 
     <v-row
@@ -49,12 +49,12 @@
               </v-card-text>
             </v-col>
             <v-col cols="1">
-              <v-btn left text @click="editArea(blog)" class="grey--text">
+              <v-btn left text class="grey--text" @click="editArea(blog)">
                 <v-icon> mdi-pencil </v-icon>
               </v-btn>
             </v-col>
             <v-col cols="1">
-              <v-btn @click="deleteBlog(blog.id)" left text class="grey--text">
+              <v-btn left text class="grey--text" @click="deleteBlog(blog.id)">
                 <v-icon> mdi-delete </v-icon>
               </v-btn>
             </v-col>
diff --git a/starter-project-web-vue2/components/abraham/UserAuthForm.vue b/starter-project-web-vue2/components/abraham/UserAuthForm.vue
index be92bd31..233acfdc 100644
--- a/starter-project-web-vue2/components/abraham/UserAuthForm.vue
+++ b/starter-project-web-vue2/components/abraham/UserAuthForm.vue
@@ -1,10 +1,10 @@
 <template>
   <v-form v-model="valid" class="pa-5 py-0 mx-auto grey lighten-5 mb-6">
     <v-text-field
+      v-if="hasNamee"
       v-model="userInfo.name"
       label="Name"
       :rules="[required('name')]"
-      v-if="hasNamee"
     />
 
     <v-text-field
@@ -18,9 +18,9 @@
       label="Password"
       :type="showPassword ? 'text' : 'password'"
       :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
-      @click:append="showPassword = !showPassword"
       counter="true"
       :rules="[required('password'), minLength('password', 3)]"
+      @click:append="showPassword = !showPassword"
     />
 
     <v-btn @click="submitForm(userInfo)">{{ buttonText }}</v-btn>
@@ -30,6 +30,7 @@
 <script>
 import validations from '@/utils/validations'
 export default {
+  props: ['submitForm', 'buttonText', 'hasNamee'],
   data() {
     return {
       valid: false,
@@ -42,7 +43,6 @@ export default {
       ...validations,
     }
   },
-  props: ['submitForm', 'buttonText', 'hasNamee'],
 }
 </script>
 
diff --git a/starter-project-web-vue2/components/dagmawit/BlogPost.vue b/starter-project-web-vue2/components/dagmawit/BlogPost.vue
new file mode 100644
index 00000000..75b27e85
--- /dev/null
+++ b/starter-project-web-vue2/components/dagmawit/BlogPost.vue
@@ -0,0 +1,54 @@
+<template>
+  <v-card max-width="900" class="mx-auto">
+    <v-container>
+      <h1 align="center">Blog Posts</h1>
+      <v-row v-for="blogPost in allBlogPosts" :key="blogPost.id" dense>
+        <v-col cols="12">
+          <v-card color="#1F7087" dark>
+            <div class="d-flex flex-no-wrap justify-space-between">
+              <div>
+                <v-card-title class="text-h5">
+                  {{ blogPost.title }}
+                </v-card-title>
+
+                <v-card-subtitle>{{ blogPost.content }}</v-card-subtitle>
+                <nuxt-link :to="'/dagmawit/' + blogPost._id">
+                  <v-card-actions>
+                    <v-btn text class="grey--text"> Read More </v-btn>
+                  </v-card-actions>
+                </nuxt-link>
+              </div>
+              <div>
+                <v-btn text class="grey--text">
+                  <v-icon> mdi-pencil </v-icon>
+                </v-btn>
+
+                <v-btn text class="grey--text">
+                  <v-icon> mdi-delete </v-icon>
+                </v-btn>
+              </div>
+            </div>
+
+            <!-- <v-card-actions>
+              <v-btn text :to="'/dagmawit/' + blog._id"> Read More </v-btn>
+            </v-card-actions> -->
+          </v-card>
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-card>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex'
+export default {
+  name: 'BlogPost',
+  methods: {
+    ...mapActions('dagmawit', ['fetchBlogPosts']),
+  },
+  computed: mapGetters('dagmawit', ['allBlogPosts']),
+  created() {
+    this.fetchBlogPosts()
+  },
+}
+</script>
diff --git a/starter-project-web-vue2/jest.config.js b/starter-project-web-vue2/jest.config.js
index 87065302..5fa973b2 100644
--- a/starter-project-web-vue2/jest.config.js
+++ b/starter-project-web-vue2/jest.config.js
@@ -2,21 +2,17 @@ module.exports = {
   moduleNameMapper: {
     '^@/(.*)$': '<rootDir>/$1',
     '^~/(.*)$': '<rootDir>/$1',
-    '^vue$': 'vue/dist/vue.common.js'
+    '^vue$': 'vue/dist/vue.common.js',
   },
-  moduleFileExtensions: [
-    'js',
-    'vue',
-    'json'
-  ],
+  moduleFileExtensions: ['js', 'vue', 'json'],
   transform: {
     '^.+\\.js$': 'babel-jest',
-    '.*\\.(vue)$': 'vue-jest'
+    '.*\\.(vue)$': 'vue-jest',
   },
   collectCoverage: true,
   collectCoverageFrom: [
     '<rootDir>/components/**/*.vue',
-    '<rootDir>/pages/**/*.vue'
+    '<rootDir>/pages/**/*.vue',
   ],
-  testEnvironment: 'jsdom'
+  testEnvironment: 'jsdom',
 }
diff --git a/starter-project-web-vue2/layouts/default.vue b/starter-project-web-vue2/layouts/default.vue
index 2bf5acda..df451b4b 100644
--- a/starter-project-web-vue2/layouts/default.vue
+++ b/starter-project-web-vue2/layouts/default.vue
@@ -24,36 +24,20 @@
         </v-list-item>
       </v-list>
     </v-navigation-drawer>
-    <v-app-bar
-      :clipped-left="clipped"
-      fixed
-      app
-    >
+    <v-app-bar :clipped-left="clipped" fixed app>
       <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
-      <v-btn
-        icon
-        @click.stop="miniVariant = !miniVariant"
-      >
+      <v-btn icon @click.stop="miniVariant = !miniVariant">
         <v-icon>mdi-{{ `chevron-${miniVariant ? 'right' : 'left'}` }}</v-icon>
       </v-btn>
-      <v-btn
-        icon
-        @click.stop="clipped = !clipped"
-      >
+      <v-btn icon @click.stop="clipped = !clipped">
         <v-icon>mdi-application</v-icon>
       </v-btn>
-      <v-btn
-        icon
-        @click.stop="fixed = !fixed"
-      >
+      <v-btn icon @click.stop="fixed = !fixed">
         <v-icon>mdi-minus</v-icon>
       </v-btn>
       <v-toolbar-title v-text="title" />
       <v-spacer />
-      <v-btn
-        icon
-        @click.stop="rightDrawer = !rightDrawer"
-      >
+      <v-btn icon @click.stop="rightDrawer = !rightDrawer">
         <v-icon>mdi-menu</v-icon>
       </v-btn>
     </v-app-bar>
@@ -62,27 +46,17 @@
         <Nuxt />
       </v-container>
     </v-main>
-    <v-navigation-drawer
-      v-model="rightDrawer"
-      :right="right"
-      temporary
-      fixed
-    >
+    <v-navigation-drawer v-model="rightDrawer" :right="right" temporary fixed>
       <v-list>
         <v-list-item @click.native="right = !right">
           <v-list-item-action>
-            <v-icon light>
-              mdi-repeat
-            </v-icon>
+            <v-icon light> mdi-repeat </v-icon>
           </v-list-item-action>
           <v-list-item-title>Switch drawer (click me)</v-list-item-title>
         </v-list-item>
       </v-list>
     </v-navigation-drawer>
-    <v-footer
-      :absolute="!fixed"
-      app
-    >
+    <v-footer :absolute="!fixed" app>
       <span>&copy; {{ new Date().getFullYear() }}</span>
     </v-footer>
   </v-app>
@@ -91,7 +65,7 @@
 <script>
 export default {
   name: 'DefaultLayout',
-  data () {
+  data() {
     return {
       clipped: false,
       drawer: false,
@@ -100,14 +74,14 @@ export default {
         {
           icon: 'mdi-apps',
           title: 'Welcome',
-          to: '/'
+          to: '/',
         },
       ],
       miniVariant: false,
       right: true,
       rightDrawer: false,
-      title: 'Practice'
+      title: 'Practice',
     }
-  }
+  },
 }
 </script>
diff --git a/starter-project-web-vue2/nuxt.config.js b/starter-project-web-vue2/nuxt.config.js
index e302d366..e2473a25 100644
--- a/starter-project-web-vue2/nuxt.config.js
+++ b/starter-project-web-vue2/nuxt.config.js
@@ -6,26 +6,22 @@ export default {
     titleTemplate: '%s - starter-project-web-vue2',
     title: 'starter-project-web-vue2',
     htmlAttrs: {
-      lang: 'en'
+      lang: 'en',
     },
     meta: [
       { charset: 'utf-8' },
       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
       { hid: 'description', name: 'description', content: '' },
-      { name: 'format-detection', content: 'telephone=no' }
+      { name: 'format-detection', content: 'telephone=no' },
     ],
-    link: [
-      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
-    ]
+    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
   },
 
   // Global CSS: https://go.nuxtjs.dev/config-css
-  css: [
-  ],
+  css: [],
 
   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
-  plugins: [
-  ],
+  plugins: [],
 
   // Auto import components: https://go.nuxtjs.dev/config-components
   components: true,
@@ -41,10 +37,11 @@ export default {
   ],
 
   // Modules: https://go.nuxtjs.dev/config-modules
-  modules: [
-    '@nuxtjs/axios',
-    '@nuxtjs/auth-next',
-  ],
+  modules: ['@nuxtjs/axios', '@nuxtjs/auth-next'],
+
+  axios: {
+    baseURL: 'https://blog-app-backend.onrender.com/api/',
+  },
 
   // Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify
   vuetify: {
@@ -59,15 +56,14 @@ export default {
           info: colors.teal.lighten1,
           warning: colors.amber.base,
           error: colors.deepOrange.accent4,
-          success: colors.green.accent3
-        }
-      }
-    }
+          success: colors.green.accent3,
+        },
+      },
+    },
   },
 
   // Build Configuration: https://go.nuxtjs.dev/config-build
-  build: {
-  },
+  build: {},
 
   auth: {
     strategies: {
diff --git a/starter-project-web-vue2/pages/abraham/login.vue b/starter-project-web-vue2/pages/abraham/login.vue
index d4fb4d77..4dc4f0fc 100644
--- a/starter-project-web-vue2/pages/abraham/login.vue
+++ b/starter-project-web-vue2/pages/abraham/login.vue
@@ -1,7 +1,7 @@
 <template>
   <v-container>
     <h1>LogIn</h1>
-    <UserAuthForm buttonText="Login" :submitForm="loginUser" />
+    <UserAuthForm button-text="Login" :submit-form="loginUser" />
   </v-container>
 </template>
 
diff --git a/starter-project-web-vue2/pages/abraham/register.vue b/starter-project-web-vue2/pages/abraham/register.vue
index b5f87301..ef8a5d8e 100644
--- a/starter-project-web-vue2/pages/abraham/register.vue
+++ b/starter-project-web-vue2/pages/abraham/register.vue
@@ -2,9 +2,9 @@
   <v-contair>
     <h1>Register</h1>
     <UserAuthForm
-      buttonText="Register"
-      :submitForm="registerUser"
-      hasNamee="true"
+      button-text="Register"
+      :submit-form="registerUser"
+      has-namee="true"
     />
   </v-contair>
 </template>
diff --git a/starter-project-web-vue2/pages/dagmawit/_id.vue b/starter-project-web-vue2/pages/dagmawit/_id.vue
new file mode 100644
index 00000000..44148a89
--- /dev/null
+++ b/starter-project-web-vue2/pages/dagmawit/_id.vue
@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <nuxt-link to="/dagmawit/">
+      <v-btn class="ma-2" color="#1F7087" dark>
+        <v-icon dark left> mdi-arrow-left </v-icon>Back
+      </v-btn>
+    </nuxt-link>
+    <br />
+    <p></p>
+    <h1 align="center">Blog: {{ blog.title }}</h1>
+
+    <v-container
+      ><h4>{{ blog.content }}</h4></v-container
+    >
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  data() {
+    return {
+      blog: {
+        title: '',
+        content: '',
+      },
+    }
+  },
+
+  async created() {
+    try {
+      const response = await axios.get(
+        `https://blog-app-backend.onrender.com/api/articles/${this.$route.params.id}`
+      )
+      this.blog = this.response.data
+    } catch (err) {
+      this.$nuxt.error({
+        statusCode: err.statusCode,
+        message: err.message,
+      })
+    }
+  },
+}
+</script>
diff --git a/starter-project-web-vue2/pages/dagmawit/index.vue b/starter-project-web-vue2/pages/dagmawit/index.vue
new file mode 100644
index 00000000..1c8d41a0
--- /dev/null
+++ b/starter-project-web-vue2/pages/dagmawit/index.vue
@@ -0,0 +1,17 @@
+<template>
+  <v-app>
+    <v-main class="white">
+      <BlogPost />
+    </v-main>
+  </v-app>
+</template>
+
+<script>
+import BlogPost from '../../components/dagmawit/BlogPost.vue'
+export default {
+  name: 'Index',
+  components: {
+    BlogPost,
+  },
+}
+</script>
diff --git a/starter-project-web-vue2/pages/index.vue b/starter-project-web-vue2/pages/index.vue
index d55af3a6..49080295 100644
--- a/starter-project-web-vue2/pages/index.vue
+++ b/starter-project-web-vue2/pages/index.vue
@@ -33,10 +33,14 @@ export default {
     return {
       members: [
         {
-          name: "Abraham Tadesse",
+          name: 'Abraham Tadesse',
           description: 'Summer Intern',
-          link:
-            '/abraham',
+          link: '/abraham',
+        },
+        {
+          name: 'Dagmawit Getachew',
+          description: 'Summer Intern',
+          link: '/dagmawit',
         },
       ],
     }
diff --git a/starter-project-web-vue2/store/dagmawit.js b/starter-project-web-vue2/store/dagmawit.js
new file mode 100644
index 00000000..9a09afbe
--- /dev/null
+++ b/starter-project-web-vue2/store/dagmawit.js
@@ -0,0 +1,22 @@
+const state = {
+  blogPosts: [],
+}
+const getters = {
+  allBlogPosts: (state) => state.blogPosts,
+}
+const actions = {
+  async fetchBlogPosts({ commit }) {
+    const response = await this.$axios.get('articles/all')
+    commit('setBlogPosts', response.data)
+  },
+}
+const mutations = {
+  setBlogPosts: (state, blogPosts) => (state.blogPosts = blogPosts),
+}
+
+export default {
+  state,
+  getters,
+  actions,
+  mutations,
+}
diff --git a/starter-project-web-vue2/stylelint.config.js b/starter-project-web-vue2/stylelint.config.js
index c497a20a..e57a2fad 100644
--- a/starter-project-web-vue2/stylelint.config.js
+++ b/starter-project-web-vue2/stylelint.config.js
@@ -3,9 +3,9 @@ module.exports = {
   extends: [
     'stylelint-config-standard',
     'stylelint-config-recommended-vue',
-    'stylelint-config-prettier'
+    'stylelint-config-prettier',
   ],
   // add your custom config here
   // https://stylelint.io/user-guide/configuration
-  rules: {}
+  rules: {},
 }
diff --git a/starter-project-web-vue2/utils/validations.js b/starter-project-web-vue2/utils/validations.js
index 64b9e6e0..e01f1137 100644
--- a/starter-project-web-vue2/utils/validations.js
+++ b/starter-project-web-vue2/utils/validations.js
@@ -1,25 +1,35 @@
-let required = (propertyType, customErrorMessage) => { 
-  return v => v && v.length > 0 || customErrorMessage || `You must input a ${propertyType}`
+const required = (propertyType, customErrorMessage) => {
+  return (v) =>
+    (v && v.length > 0) ||
+    customErrorMessage ||
+    `You must input a ${propertyType}`
 }
-let minLength = (propertyType, minLength) => {
-  return v => {
-    if(!v){ return true; }
+const minLength = (propertyType, minLength) => {
+  return (v) => {
+    if (!v) {
+      return true
+    }
 
-    return v.length >= minLength || `${propertyType} must be at least ${minLength} characters`;
+    return (
+      v.length >= minLength ||
+      `${propertyType} must be at least ${minLength} characters`
+    )
   }
 }
-let maxLength = (propertyType, maxLength) => {
-  return v => v && v.length <= maxLength || `${propertyType} must be less than ${maxLength} characters`
+const maxLength = (propertyType, maxLength) => {
+  return (v) =>
+    (v && v.length <= maxLength) ||
+    `${propertyType} must be less than ${maxLength} characters`
 }
 
-let emailFormat = () => {
-  let regex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,24})+$/
-  return v => v && regex.test(v) || "Must be a valid email"
+const emailFormat = () => {
+  const regex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,24})+$/
+  return (v) => (v && regex.test(v)) || 'Must be a valid email'
 }
 
 export default {
   required,
   minLength,
   maxLength,
-  emailFormat
-}
\ No newline at end of file
+  emailFormat,
+}