diff --git a/frontend/src/components/dogs/AddDog.vue b/frontend/src/components/dogs/AddDog.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0147adf2123aee2ab99bb88a6039c976e805aa2c
--- /dev/null
+++ b/frontend/src/components/dogs/AddDog.vue
@@ -0,0 +1,67 @@
+<template>
+  <div class="edit-dog-container">
+    <h1>Kutya hozzáadása</h1>
+    <form @submit.prevent="addDog">
+      <div class="input-group">
+        <label for="name">Neve</label>
+        <input id="name" v-model="dog.name" type="text" required>
+      </div>
+      <div class="input-group">
+        <label for="breed">Faja</label>
+        <input id="breed" v-model="dog.breed" type="text" required>
+      </div>
+      <div class="input-group">
+        <label for="age">Kora</label>
+        <input id="age" v-model="dog.age" type="number" required>
+      </div>
+      <button type="submit">Mentés</button>
+    </form>
+  </div>
+</template>
+
+<script>
+import axios from 'axios';
+import { mapState } from 'vuex';
+
+export default {
+  data() {
+    return {
+      dog: {},
+    };
+  },
+  computed: {
+    ...mapState(['token']),
+  },
+  methods: {
+    async addDog() {
+      const config = {
+        headers: { Authorization: `Bearer ${this.token}` },
+      };
+      await axios.post(`/api/newdog`, this.dog, config);
+      this.$router.push(`/dogs`);
+    },
+  },
+};
+</script>
+
+<style lang="postcss">
+.edit-dog-container {
+  @apply flex flex-col items-center justify-center min-h-screen bg-blue-200;
+}
+
+.input-group {
+  @apply mb-4;
+}
+
+label {
+  @apply block mb-2 text-sm font-bold text-gray-700;
+}
+
+input {
+  @apply w-full px-3 py-2 text-sm leading-tight text-gray-700 border rounded shadow appearance-none;
+}
+
+button {
+  @apply px-4 py-2 mt-4 text-sm font-medium text-white bg-blue-500 rounded hover:bg-blue-700 focus:outline-none;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/dogs/AllDogs.vue b/frontend/src/components/dogs/AllDogs.vue
index ec955ecf27679f00c6deec78f329b41c0b14aa2d..3e7d3f1672ff40353d1254e92fa23905ae1a4f5a 100644
--- a/frontend/src/components/dogs/AllDogs.vue
+++ b/frontend/src/components/dogs/AllDogs.vue
@@ -1,14 +1,17 @@
 <template>
   <div class="dog-list-container">
+    <router-link to="/add-dog" class="add-button">Új kutya hozzáadása</router-link>
     <div v-if="!loaded">
-      Loading...
+      Betöltés...
     </div>
-    <div v-else-if="errorMessage || fetchError || !hasDogs" class="error-message">
+    <div v-else-if="errorMessage || fetchError || !hasDogs" class="alert alert-error">
       {{ errorMessage || (fetchError ? 'Could not fetch dogs.' : 'No dogs found.') }}
     </div>
     <div v-else class="dog-item-container">
       <div v-for="dog in dogs" :key="dog.id" class="dog-item" @click="viewDog(dog.id)">
-        <img v-if="dog" :src="dog.picture ? 'data:image/jpeg;base64,' + dog.picture : 'data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 50 50\'%3E%3Ctext y=\'.9em\' font-size=\'20\'%3E' + dog.id + '%3C/text%3E%3C/svg%3E'" :alt="`Image of ${dog.name}`" class="dog-image"/>
+        <img v-if="dog"
+             :src="dog.picture ? 'data:image/jpeg;base64,' + dog.picture : 'data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 50 50\'%3E%3Ctext y=\'.9em\' font-size=\'20\'%3E' + dog.id + '%3C/text%3E%3C/svg%3E'"
+             :alt="`Image of ${dog.name}`" class="dog-image"/>
         <h2 v-if="dog" class="dog-name">{{ dog.name }}</h2>
       </div>
     </div>
@@ -38,24 +41,24 @@ export default {
   },
   async created() {
     try {
-      const response = await axios.get('/api/dogs', { timeout: 5000 }); // 5 seconds timeout
+      const response = await axios.get('/api/dogs', {timeout: 5000}); // 5 seconds timeout
       if (response.status === 200) {
         if (response.data && response.data.length > 0) {
           this.dogs = response.data;
         } else {
-          this.errorMessage = 'No dogs found.';
+          this.errorMessage = 'Nem találhatóak kutyák.';
         }
       } else {
         this.fetchError = true;
-        this.errorMessage = 'Could not fetch dogs.';
+        this.errorMessage = 'Nem sikerült lekérni a kutyákat.';
       }
     } catch (error) {
       console.error(error);
       this.fetchError = true;
       if (error.message.includes('timeout')) {
-        this.errorMessage = 'API request timed out.';
+        this.errorMessage = 'A kutyák lekérdezése túllépte az időkorlátot. Próbáld újra később.';
       } else {
-        this.errorMessage = 'Could not fetch dogs.';
+        this.errorMessage = 'Nem sikerült lekérni a kutyákat.';
       }
     } finally {
       this.loaded = true;
@@ -63,7 +66,7 @@ export default {
   },
   methods: {
     viewDog(id) {
-      this.$router.push({ name: 'SingleDog', params: { id } });
+      this.$router.push({name: 'SingleDog', params: {id}});
     },
   },
 };
@@ -90,7 +93,11 @@ export default {
   @apply text-lg font-bold;
 }
 
-.error-message {
-  @apply p-4 bg-red-200 text-red-800 rounded;
+.alert-error {
+  @apply bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4;
+}
+
+.add-button {
+  @apply px-4 py-2 mt-4 text-sm font-medium text-white bg-blue-500 rounded hover:bg-blue-700 focus:outline-none;
 }
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/dogs/EditDog.vue b/frontend/src/components/dogs/EditDog.vue
index c845fdcbc0efd00524765219caebe14ff4dff34c..7771e5f297e71ebe77c6f9a8f7b5511ebfaf08f9 100644
--- a/frontend/src/components/dogs/EditDog.vue
+++ b/frontend/src/components/dogs/EditDog.vue
@@ -1,63 +1,52 @@
 <template>
   <div class="edit-dog-container">
+    <h1>Kutya szerkesztése</h1>
     <form @submit.prevent="editDog">
       <div class="input-group">
-        <label for="name">Dog Name</label>
+        <label for="name">Neve</label>
         <input id="name" v-model="dog.name" type="text" required>
       </div>
       <div class="input-group">
-        <label for="breed">Breed</label>
+        <label for="breed">Faja</label>
         <input id="breed" v-model="dog.breed" type="text" required>
       </div>
       <div class="input-group">
-        <label for="age">Age</label>
+        <label for="age">Kora</label>
         <input id="age" v-model="dog.age" type="number" required>
       </div>
-      <button type="submit">Save</button>
+      <button type="submit">Mentés</button>
     </form>
   </div>
 </template>
 
 <script>
 import axios from 'axios';
-
-axios.defaults.baseURL = 'http://localhost:8080';
+import { mapState } from 'vuex';
 
 export default {
-  name: 'EditDog',
   data() {
     return {
-      dog: {
-        name: '',
-        breed: '',
-        age: '',
-      },
+      dog: {},
     };
   },
+  computed: {
+    ...mapState(['token']),
+  },
   methods: {
-    async editDog() {
-      try {
-        const response = await axios.post('/dogs/' + this.dog.id + '/edit', this.dog);
-
-        // Handle response
-        console.log(response);
-      } catch (error) {
-        // Handle error
-        console.log(error);
-      }
+    async fetchDog() {
+      const response = await axios.get(`/api/dogs/${this.$route.params.id}`);
+      this.dog = response.data;
     },
-    async fetchDogData() {
-      try {
-        const response = await axios.get('/dogs/' + this.$route.params.id);
-        this.dog = response.data;
-      } catch (error) {
-        console.error(error);
-      }
+    async editDog() {
+      const config = {
+        headers: { Authorization: `Bearer ${this.token}` },
+      };
+      await axios.post(`/api/dogs/${this.$route.params.id}/edit`, this.dog, config);
+      this.$router.push(`/dog/${this.$route.params.id}`);
     },
   },
   created() {
-    // Fetch the dog data when the component is created
-    this.fetchDogData();
+    this.fetchDog();
   },
 };
 </script>
diff --git a/frontend/src/components/dogs/SingleDog.vue b/frontend/src/components/dogs/SingleDog.vue
index 10d35d1bc502b09284ff51547d97ab5fa57394ac..f6261c9a51cc94739ce4cd475d419d6487ce578d 100644
--- a/frontend/src/components/dogs/SingleDog.vue
+++ b/frontend/src/components/dogs/SingleDog.vue
@@ -4,9 +4,10 @@
     <img :src="dog.picture" :alt="`Image of ${dog.name}`" class="w-64 h-64 object-cover mb-4 rounded shadow"/>
     <p class="text-lg mb-2"><strong>Age:</strong> {{ dog.age }}</p>
     <p class="text-lg"><strong>Breed:</strong> {{ dog.breed }}</p>
-    <router-link :to="`/edit-dog/${dog.id}`" tag="button" class="edit-button">Edit</router-link>
+    <router-link :to="`/edit-dog/${dog.id}`" tag="button" class="edit-button">Szerkesztés</router-link>
+    <button @click="deleteDog" class="delete-button">Törlés</button>
   </div>
-  <div v-else>Loading...</div>
+  <div v-else>Betöltés...</div>
 </template>
 
 <script>
@@ -31,6 +32,17 @@ export default {
       // Handle error
     }
   },
+  methods: {
+    async deleteDog() {
+      if (window.confirm('Biztosan törölni akarod ezt a kutyát?')) {
+        const config = {
+          headers: { Authorization: `Bearer ${this.token}` },
+        };
+        await axios.delete(`/api/dogs/${this.$route.params.id}`, config);
+        this.$router.push(`/dogs`);
+      }
+    },
+  },
 };
 </script>
 
@@ -54,4 +66,8 @@ p {
 .edit-button {
   @apply px-4 py-2 mt-4 text-sm font-medium text-white bg-blue-500 rounded hover:bg-blue-700 focus:outline-none;
 }
+
+.delete-button {
+  @apply px-4 py-2 mt-4 text-sm font-medium text-white bg-red-500 rounded hover:bg-red-700 focus:outline-none;
+}
 </style>
\ No newline at end of file