diff --git a/app/Http/Requests/CityOpinionRequest.php b/app/Http/Requests/CityOpinionRequest.php
index 8a86f86a..83b2c476 100644
--- a/app/Http/Requests/CityOpinionRequest.php
+++ b/app/Http/Requests/CityOpinionRequest.php
@@ -11,7 +11,7 @@ class CityOpinionRequest extends FormRequest
     public function rules(): array
     {
         return [
-            "rating" => ["required", "numeric", "max:5"],
+            "rating" => ["required", "numeric", "min:1", "max:5"],
             "content" => ["required", "string", "max:250"],
             "city_id" => ["required", "numeric", "exists:cities,id"],
         ];
diff --git a/app/Importers/BirdDataImporter.php b/app/Importers/BirdDataImporter.php
index 2ce46055..d09442d2 100644
--- a/app/Importers/BirdDataImporter.php
+++ b/app/Importers/BirdDataImporter.php
@@ -102,7 +102,6 @@ protected function load(string $cityName, string $countryName, string $lat = "",
             return strval($city->id);
         }
         $this->countryNotFound($cityName, $countryName);
-        $this->createImportInfoDetails("420", self::getProviderName());
 
         return "";
     }
diff --git a/app/Importers/DataImporter.php b/app/Importers/DataImporter.php
index f425e920..0d33a03a 100644
--- a/app/Importers/DataImporter.php
+++ b/app/Importers/DataImporter.php
@@ -59,18 +59,19 @@ public function translate(string $word, string $language): string
 
     protected function countryNotFound(string $cityName, string $countryName): void
     {
-        CityWithoutAssignedCountry::query()
-            ->withTrashed()
-            ->updateOrCreate(
-                [
-                    "city_name" => $cityName,
-                    "country_name" => $countryName,
-                ],
-                [
-                    "city_name" => $cityName,
-                    "country_name" => $countryName,
-                ],
-            );
+        $cityAttributes = [
+            "city_name" => $cityName,
+            "country_name" => $countryName,
+        ];
+
+        $city = CityWithoutAssignedCountry::query()->withTrashed()->updateOrCreate(
+            $cityAttributes,
+            $cityAttributes,
+        );
+
+        if ($city->wasRecentlyCreated) {
+            $this->createImportInfoDetails("420", self::getProviderName());
+        }
     }
 
     protected function createProvider(int $cityId, string $providerName): void
@@ -149,7 +150,6 @@ protected function load(string $cityName, string $countryName, string $lat = "",
             return strval($city->id);
         }
         $this->countryNotFound($cityName, $countryName);
-        $this->createImportInfoDetails("420", self::getProviderName());
 
         return "";
     }
diff --git a/app/Importers/LimeDataImporter.php b/app/Importers/LimeDataImporter.php
index 6cdbc1eb..ba884fbd 100644
--- a/app/Importers/LimeDataImporter.php
+++ b/app/Importers/LimeDataImporter.php
@@ -103,7 +103,6 @@ protected function load(string $cityName, string $countryName, string $lat = "",
             return strval($city->id);
         }
         $this->countryNotFound($cityName, $countryName);
-        $this->createImportInfoDetails("420", self::getProviderName());
 
         return "";
     }
diff --git a/app/Importers/SpinDataImporter.php b/app/Importers/SpinDataImporter.php
index 283bcc65..74d1c619 100644
--- a/app/Importers/SpinDataImporter.php
+++ b/app/Importers/SpinDataImporter.php
@@ -120,7 +120,6 @@ protected function load(string $cityName, string $countryName, string $lat = "",
             return strval($city->id);
         }
         $this->countryNotFound($cityName, $countryName);
-        $this->createImportInfoDetails("420", self::getProviderName());
 
         return "";
     }
diff --git a/lang/pl.json b/lang/pl.json
index 214f3d73..9542b5bb 100644
--- a/lang/pl.json
+++ b/lang/pl.json
@@ -20,7 +20,7 @@
     "Don`t have an account?": "Nie masz konta?",
     "Already have an account?": "Masz już konto?",
     "Looking for an e‑scooter?": "Szukasz hulajnogi elektrycznej?",
-    "Try it out": "Wypróbuj teraz!",
+    "Try it out": "Wypróbuj teraz",
     "Create account": "Stwórz konto",
     "Log in to add to favorites.": "Zaloguj się, aby dodać do ulubionych.",
     "Sorry we couldn't find any cities.": "Przepraszamy, ale nie mogliśmy znaleźć żadnych miast.",
@@ -29,6 +29,7 @@
     "advert2": "Ta aplikacja pomoże Ci z planowaniem Twoich wakacji, lub podróży biznesowych.",
     "Edit": "Edytuj",
     "Delete": "Usuń",
+    "Cancel": "Anuluj",
     "Add": "Dodaj",
     "Create city": "Utwórz miasto",
     "Create country": "Utwórz kraj",
@@ -82,11 +83,11 @@
     "Country created successfully.": "Kraj utworzony pomyślnie.",
     "City deleted successfully.": "Miasto usunięte pomyślnie.",
     "Cities deleted successfully.": "Miasta usunięte pomyślnie.",
-    "Country deleted successfully": "Kraj usunięty pomyślnie.",
-    "There was an error!": "Wystąpił błąd!",
-    "There was an error creating the city!": "Wystąpił błąd podczas tworzenia miasta!",
-    "There was an error deleting the city!": "Wystąpił błąd podczas usuwania miasta!",
-    "There was an error deleting cities!": "Wystąpił błąd podczas usuwania miast!",
+    "Country deleted successfully.": "Kraj usunięty pomyślnie.",
+    "There was an error.": "Wystąpił błąd.",
+    "There was an error creating the city.": "Wystąpił błąd podczas tworzenia miasta.",
+    "There was an error deleting the city.": "Wystąpił błąd podczas usuwania miasta.",
+    "There was an error deleting cities.": "Wystąpił błąd podczas usuwania miast.",
 
     "There was an error creating the country.": "Wystąpił błąd podczas tworzenia kraju.",
     "There was an error adding alternative city name.": "Wystąpił błąd podczas dodawania alternatywnej nazwy miasta.",
@@ -94,7 +95,7 @@
     "Alternative city name deleted successfully.": "Alternatywna nazwa miasta usunięta pomyślnie.",
     "City providers updated successfully.": "Dostawcy dostępni w mieście zaktualizowani pomyślnie.",
     "Use `.` instead of `,`": "Użyj `.` zamiast `,`",
-    "Importers started!": "Importerzy uruchomieni!",
+    "Importers started.": "Importerzy uruchomieni.",
     "running": "Uruchomiony",
     "stopped": "Zatrzymany",
     "finished": "Zakończony",
@@ -126,12 +127,22 @@
     "Cities with no country assigned": "Miasta bez przypisanego kraju",
     "Cities with no coordinates assigned": "Miasta bez przypisanych współrzędnych",
     "Delete all cities with no country assigned": "Usuń wszystkie miasta bez przypisanego kraju",
-
-    "Opinion added successfully!": "Opinia dodana pomyślnie!",
-    "There was an error adding your opinion!": "Wystąpił błąd podczas dodawania opinii!",
+    "Opinion added successfully.": "Opinia dodana pomyślnie.",
+    "There was an error adding your opinion.": "Wystąpił błąd podczas dodawania opinii.",
+    "Opinion edited successfully.": "Opinia zaktualizowana pomyślnie.",
+    "There was an error editing your opinion.": "Wystąpił błąd podczas edytowania opinii.",
+    "There was an error removing your opinion.": "Wystąpił błąd podczas usuwania opinii.",
     "Add opinion": "Dodaj opinię",
+    "Edit opinion": "Edytuj opinię",
     "Send": "Wyślij",
     "Users' opinions": "Opinie użytkowników",
+    "Delete that opinion?": "Usunąć tę opinię?",
+    "Opinion removed successfully!": "Opinia usunięta pomyślnie.",
+    "Delete city": "Usunąć miasto",
+    "Delete country": "Usunąć kraj",
+    "Delete that opinion": "Usunąć opinię",
+    "That opinion": "Ta opinia",
+    "This operation cannot be undone.": "Ta operacja nie może zostać cofnięta.",
 
     "You have logged in successfully.": "Zalogowano pomyślnie.",
     "You have logged out successfully.": "Wylogowano pomyślnie.",
diff --git a/lang/pl/validation.php b/lang/pl/validation.php
index 043ad6dc..3e000fdf 100644
--- a/lang/pl/validation.php
+++ b/lang/pl/validation.php
@@ -124,5 +124,6 @@
         "password" => "hasło",
         "latitude" => "szerokość geograficzna",
         "longitude" => "długość geograficzna",
+        "content" => "treść",
     ],
 ];
diff --git a/resources/js/Pages/Cities/Index.vue b/resources/js/Pages/Cities/Index.vue
index d51ecbb4..35908a84 100644
--- a/resources/js/Pages/Cities/Index.vue
+++ b/resources/js/Pages/Cities/Index.vue
@@ -1,5 +1,5 @@
 <script setup>
-import City from '../../Shared/Components/City.vue'
+import City from '@/Shared/Components/City.vue'
 import { useForm, usePage, router } from '@inertiajs/vue3'
 import { computed, ref, watch } from 'vue'
 import AdminNavigation from '@/Shared/Layout/AdminNavigation.vue'
@@ -40,7 +40,7 @@ function storeCity() {
     },
     onError: (errors) => {
       storeErrors.value = errors
-      toast.error(__('There was an error creating the city!'))
+      toast.error(__('There was an error creating the city.'))
     },
   })
 }
@@ -111,7 +111,7 @@ function deleteCityWithoutAssignedCountry(city) {
       toast.success(__('City deleted successfully.'))
     },
     onError: () => {
-      toast.error(__('There was an error deleting the city!'))
+      toast.error(__('There was an error deleting the city.'))
     },
   })
 }
@@ -122,7 +122,7 @@ function deleteAllCitiesWithoutCountry() {
       toast.success(__('Cities deleted successfully.'))
     },
     onError: () => {
-      toast.error(__('There was an error deleting cities!'))
+      toast.error(__('There was an error deleting cities.'))
     },
   })
 }
diff --git a/resources/js/Pages/City/Index.vue b/resources/js/Pages/City/Index.vue
index 47bc1467..785fa0b5 100644
--- a/resources/js/Pages/City/Index.vue
+++ b/resources/js/Pages/City/Index.vue
@@ -11,8 +11,9 @@ import { __ } from '@/translate'
 import { useForm, usePage } from '@inertiajs/vue3'
 import ErrorMessage from '@/Shared/Components/ErrorMessage.vue'
 import { useToast } from 'vue-toastification'
-import Pagination from '../../Shared/Components/Pagination.vue'
-import InfoPopup from '../../Shared/Components/InfoPopup.vue'
+import Pagination from '@/Shared/Components/Pagination.vue'
+import InfoPopup from '@/Shared/Components/InfoPopup.vue'
+import Opinion from '@/Shared/Components/Opinion.vue'
 
 const toast = useToast()
 
@@ -66,25 +67,17 @@ function createOpinion() {
     opinionForm.post('/opinions', {
       onSuccess: () => {
         opinionForm.reset()
-        toast.success(__('Opinion added successfully!'))
+        toast.success(__('Opinion added successfully.'))
         emptyRatingError.value = ''
       },
       onError: () => {
-        toast.error(__('There was an error adding your opinion!'))
+        toast.error(__('There was an error adding your opinion.'))
         emptyRatingError.value = ''
       },
     })
   }
 }
 
-const dateOptions = {
-  year: 'numeric',
-  month: 'numeric',
-  day: 'numeric',
-  hour: '2-digit',
-  minute: '2-digit',
-}
-
 </script>
 
 <template>
@@ -128,7 +121,7 @@ const dateOptions = {
                 @click="setRating(index)"
               />
             </div>
-            <textarea v-model.trim="opinionForm.content" required class="h-32 w-full rounded-lg border border-gray-300" />
+            <textarea v-model.trim="opinionForm.content" required class="h-32 w-full rounded-lg border border-gray-300" @keydown.enter.prevent="createOpinion" />
 
             <div class="mt-1 flex flex-col">
               <ErrorMessage :message="emptyRatingError" />
@@ -149,22 +142,7 @@ const dateOptions = {
               {{ __(`Users' opinions`) }}
             </p>
             <div v-for="opinion in props.cityOpinions.data" :key="opinion.id" class="mb-3 flex flex-col rounded-lg border border-gray-300 p-2">
-              <div class="flex items-center">
-                <p class="mr-1 text-xs font-medium text-blumilk-500">
-                  {{ opinion.user.name }}
-                </p>
-                <StarIcon v-for="index in maxRating"
-                          :key="index"
-                          :class="{ 'fill-yellow-400': index <= opinion.rating }" class="h-4 w-4 text-yellow-400"
-                />
-              </div>
-              <p class="mr-1 text-xs font-light text-blumilk-500">
-                {{ new Date(opinion.updated_at).toLocaleString("pl-PL", dateOptions) }}
-              </p>
-
-              <div class="mt-1 text-sm text-gray-700">
-                {{ opinion.content }}
-              </div>
+              <Opinion :opinion="opinion" :city-id="props.city.id" />
             </div>
           </div>
 
diff --git a/resources/js/Pages/Countries/Index.vue b/resources/js/Pages/Countries/Index.vue
index c9dd6d96..1a05c904 100644
--- a/resources/js/Pages/Countries/Index.vue
+++ b/resources/js/Pages/Countries/Index.vue
@@ -25,7 +25,7 @@ function storeCountry() {
       toast.success(__('Country created successfully.'))
     },
     onError: () => {
-      toast.error(__('There was an error creating the country!'))
+      toast.error(__('There was an error creating the country.'))
     },
   })
 }
diff --git a/resources/js/Pages/Dashboard/Index.vue b/resources/js/Pages/Dashboard/Index.vue
index d055431b..80c92b34 100644
--- a/resources/js/Pages/Dashboard/Index.vue
+++ b/resources/js/Pages/Dashboard/Index.vue
@@ -120,7 +120,7 @@ const chartOptions = {
         <div class="mt-8 flex w-full flex-col lg:mt-6 lg:flex-row lg:justify-end">
           <div class="w-full px-3 lg:w-1/2">
             <h1 class="mx-2 mb-2 text-2xl font-bold text-gray-700">
-              {{ __('Cities by provider') }}
+              {{ __('Number of cities where the provider is available') }}
             </h1>
 
             <div class="flex flex-wrap">
diff --git a/resources/js/Pages/Importers/Index.vue b/resources/js/Pages/Importers/Index.vue
index ac691361..2da7b0eb 100644
--- a/resources/js/Pages/Importers/Index.vue
+++ b/resources/js/Pages/Importers/Index.vue
@@ -18,7 +18,7 @@ defineProps({
 
 function runImporters() {
   router.post('/run-importers', [])
-  toast.success(__('Importers started!'))
+  toast.success(__('Importers started.'))
 }
 </script>
 
diff --git a/resources/js/Shared/Components/City.vue b/resources/js/Shared/Components/City.vue
index 869eb0b7..ce651112 100644
--- a/resources/js/Shared/Components/City.vue
+++ b/resources/js/Shared/Components/City.vue
@@ -198,19 +198,19 @@ function toggleProvidersForm() {
     </div>
     <div class="hidden items-center lg:flex">
       <div class="items-top flex h-1/2 flex-wrap items-center">
-        <div v-for="provider in filteredSelectedCityProviders.slice(0, 4)" :key="provider.name"
+        <div v-for="provider in filteredSelectedCityProviders.slice(0, 3)" :key="provider.name"
              :style="{ 'background-color': selectedCityProviders.includes(provider.name) ? provider.color : '' }"
              :class="selectedCityProviders.includes(provider.name) ? 'border-zinc-600 drop-shadow-lg' : 'hidden'"
-             class="m-1 flex h-5 w-fit items-center justify-center rounded border border-zinc-300 bg-zinc-300 p-1 "
+             class="m-1 mr-5 flex h-5 w-fit scale-[1.75] items-center justify-center rounded  bg-zinc-300 p-1"
         >
-          <img class="w-5" :src="'/providers/' + provider.name.toLowerCase() + '.png'" alt="">
+          <img class="w-5" :src="'/providers/' + provider.name.toLowerCase() + '.png'" :title="provider.name" alt="">
         </div>
 
-        <div v-if="selectedCityProviders.length > 4"
+        <div v-if="selectedCityProviders.length > 3"
              class="m-1 flex h-5 w-fit items-center justify-center rounded border border-zinc-300 bg-zinc-300 p-1"
         >
           <div class="flex h-5 w-5 items-center justify-center text-xs text-gray-500">
-            +{{ selectedCityProviders.length - 4 }}
+            +{{ selectedCityProviders.length - 3 }}
           </div>
         </div>
         <div v-else-if="selectedCityProviders.length === 0" class="m-1 flex h-5 w-fit items-center justify-center p-1">
diff --git a/resources/js/Shared/Components/DeleteModal.vue b/resources/js/Shared/Components/DeleteModal.vue
index de13b41d..2f708de5 100644
--- a/resources/js/Shared/Components/DeleteModal.vue
+++ b/resources/js/Shared/Components/DeleteModal.vue
@@ -3,6 +3,7 @@ import { ref, computed } from 'vue'
 import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'
 import { ExclamationTriangleIcon, XMarkIcon } from '@heroicons/vue/24/outline'
 import { __ } from '@/translate'
+import { onClickOutside } from '@vueuse/core'
 
 const emits = defineEmits(['close', 'delete'])
 
@@ -13,7 +14,7 @@ const open = ref(true)
 const props = defineProps({
   name: {
     type: String,
-    required: true,
+    required: false,
   },
   type: {
     type: String,
@@ -27,26 +28,31 @@ const formattedType = computed(() => {
 
 const renderHeader = () => {
   let translationKey = ''
-  translationKey = 'Delete ' + formattedType.value + '?'
+  translationKey = __('Delete ' + formattedType.value) + ' :name'
 
-  return __(translationKey)
+  return (__(translationKey, { name: props.name })).trim() + '?'
 }
 
 const renderText = () => {
   let translationKey = ''
-  translationKey = ':type :name will be permanently deleted.'
+  translationKey = 'This operation cannot be undone.'
 
-  return __(translationKey, { type: __(props.type), name: props.name })
+
+  return __(translationKey)
 }
+
+const dialogRef = ref(null)
+onClickOutside(dialogRef, () => closeModal())
+
 </script>
 
 <template>
   <TransitionRoot as="template" :show="open">
-    <Dialog as="div" class="relative z-10">
+    <Dialog ref="dialog" as="div" class="relative z-10">
       <TransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0" enter-to="opacity-100"
                        leave="ease-in duration-200" leave-from="opacity-100" leave-to="opacity-0"
       >
-        <div class="fixed inset-0 bg-gray-500/75 transition-opacity" />
+        <div class="fixed inset-0 bg-black/50 transition-opacity" />
       </TransitionChild>
       <div class="fixed inset-0 z-10 overflow-y-auto">
         <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
@@ -62,38 +68,38 @@ const renderText = () => {
               <button class="absolute right-2 top-2 text-gray-400 hover:text-gray-600" @click="closeModal">
                 <XMarkIcon class="h-5 w-5" aria-hidden="true" />
               </button>
-              <div class="bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
-                <div class="sm:flex sm:items-start">
-                  <div
-                    class="mx-auto flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10"
-                  >
-                    <ExclamationTriangleIcon class="h-6 w-6 text-red-600" aria-hidden="true" />
-                  </div>
-                  <div class="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
-                    <DialogTitle as="h3" class="text-base font-semibold leading-6 text-gray-900">
-                      {{ renderHeader() }}
-                    </DialogTitle>
-                    <div class="mt-2">
-                      <p class="text-sm text-gray-500">
-                        {{ renderText() }}
-                      </p>
+              <div ref="dialogRef">
+                <div class="bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
+                  <div class="sm:flex sm:items-start">
+                    <div class="mx-auto flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
+                      <ExclamationTriangleIcon class="h-6 w-6 text-red-600" aria-hidden="true" />
+                    </div>
+                    <div class="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
+                      <DialogTitle as="h3" class="text-base font-semibold leading-6 text-gray-900">
+                        {{ renderHeader() }}
+                      </DialogTitle>
+                      <div class="mt-2">
+                        <p class="text-sm text-gray-500">
+                          {{ renderText() }}
+                        </p>
+                      </div>
                     </div>
                   </div>
                 </div>
-              </div>
-              <div class="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
-                <button type="button"
-                        class="inline-flex w-full justify-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 sm:ml-3 sm:w-auto"
-                        @click="confirmDelete"
-                >
-                  {{ __('Delete') }}
-                </button>
-                <button ref="cancelButtonRef" type="button"
-                        class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
-                        @click="closeModal"
-                >
-                  {{ __('Cancel') }}
-                </button>
+                <div class="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
+                  <button type="button"
+                          class="inline-flex w-full justify-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 sm:ml-3 sm:w-auto"
+                          @click.stop="confirmDelete"
+                  >
+                    {{ __('Delete') }}
+                  </button>
+                  <button ref="cancelButtonRef" type="button"
+                          class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
+                          @click="closeModal"
+                  >
+                    {{ __('Cancel') }}
+                  </button>
+                </div>
               </div>
             </DialogPanel>
           </TransitionChild>
diff --git a/resources/js/Shared/Components/FavoriteButton.vue b/resources/js/Shared/Components/FavoriteButton.vue
index 83185344..27288ba7 100644
--- a/resources/js/Shared/Components/FavoriteButton.vue
+++ b/resources/js/Shared/Components/FavoriteButton.vue
@@ -49,7 +49,7 @@ const toggleFavorite = async () => {
       toast.success(__('City added to favorites.'))
     }
   } catch (error) {
-    toast.error('There was an error!')
+    toast.error(__('There was an error'))
   }
 }
 
diff --git a/resources/js/Shared/Components/Opinion.vue b/resources/js/Shared/Components/Opinion.vue
new file mode 100644
index 00000000..f65ba8d0
--- /dev/null
+++ b/resources/js/Shared/Components/Opinion.vue
@@ -0,0 +1,157 @@
+<script setup>
+import { PaperAirplaneIcon, PencilIcon, StarIcon, TrashIcon, XMarkIcon } from '@heroicons/vue/24/outline'
+import { router, useForm, usePage } from '@inertiajs/vue3'
+import { computed, ref } from 'vue'
+import { onClickOutside } from '@vueuse/core'
+import { __ } from '@/translate'
+import DeleteModal from './DeleteModal.vue'
+import { useToast } from 'vue-toastification'
+import ErrorMessage from './ErrorMessage.vue'
+
+const toast = useToast()
+const page = usePage()
+const user = computed(() => page.props.auth.user)
+
+const props = defineProps({
+  opinion: Object,
+  cityId: Number,
+})
+
+const updateOpinionForm = useForm({
+  rating: props.opinion.rating,
+  content: props.opinion.content,
+  city_id: props.cityId,
+})
+
+function updateOpinion(opinionId) {
+  if (updateOpinionForm.rating === 0) {
+    emptyRatingError.value = __('Please, rate that city')
+  } else {
+    updateOpinionForm.patch(`/opinions/${opinionId}`, {
+      onSuccess: () => {
+        toast.success(__('Opinion edited successfully.'))
+        toggleUpdateOpinionDialog()
+      },
+      onError: () => {
+        toast.error(__('There was an error editing your opinion.'))
+      },
+    })
+  }
+}
+
+const isUpdateOpinionDialogOpened = ref(false)
+
+const updateOpinionDialog = ref(null)
+onClickOutside(updateOpinionDialog, () => (isUpdateOpinionDialogOpened.value = false))
+
+function toggleUpdateOpinionDialog() {
+  isUpdateOpinionDialogOpened.value = !isUpdateOpinionDialogOpened.value
+}
+
+function deleteOpinion(opinionId) {
+  router.delete(`/opinions/${opinionId}`, {
+    onSuccess: () => {
+      toast.success(__('Opinion removed successfully!'))
+    },
+    onError: () => {
+      toast.error(__('There was an error removing your opinion.'))
+    },
+    preserveScroll: true,
+  })
+}
+
+const isDeleteOpinionDialogOpened = ref(false)
+
+function toggleDeleteOpinionDialog() {
+  isDeleteOpinionDialogOpened.value = !isDeleteOpinionDialogOpened.value
+}
+
+const dateOptions = {
+  year: 'numeric',
+  month: 'numeric',
+  day: 'numeric',
+  hour: '2-digit',
+  minute: '2-digit',
+}
+
+
+const maxRating = 5
+
+function setRating(starIndex) {
+  updateOpinionForm.rating = starIndex
+}
+
+const emptyRatingError = ref('')
+
+</script>
+
+<template>
+  <div class="flex items-center">
+    <p class="mr-1 text-xs font-medium text-blumilk-500">
+      {{ opinion.user.name }}
+    </p>
+    <StarIcon v-for="index in maxRating"
+              :key="index"
+              :class="{ 'fill-yellow-400': index <= props.opinion.rating }" class="h-4 w-4 text-yellow-400"
+    />
+  </div>
+  <p class="mr-1 text-xs font-light text-blumilk-500">
+    {{ new Date(opinion.updated_at).toLocaleString("pl-PL", dateOptions) }}
+  </p>
+
+  <div class="mt-1 text-sm text-gray-700">
+    {{ opinion.content }}
+  </div>
+
+  <div v-if="user.id === props.opinion.user.id" class="mt-1 flex justify-end">
+    <button class="flex px-1 hover:drop-shadow" @click="toggleUpdateOpinionDialog">
+      <PencilIcon class="h-5 w-5 text-blumilk-500 hover:drop-shadow sm:h-4 sm:w-4" />
+    </button>
+    <button class="flex px-1 hover:drop-shadow" @click="toggleDeleteOpinionDialog">
+      <TrashIcon class="ml-1 h-5 w-5 text-blumilk-500 hover:drop-shadow sm:h-4 sm:w-4" />
+    </button>
+  </div>
+
+  <div v-if="isUpdateOpinionDialogOpened" class="fixed inset-0 z-50 flex items-center bg-black/50">
+    <div ref="updateOpinionDialog" class="mx-auto w-11/12 rounded-lg bg-white shadow-lg sm:w-3/4 md:w-2/3 lg:w-1/2 xl:w-1/3">
+      <div class="flex flex-col">
+        <div class="flex justify-end">
+          <button class="w-fit px-4 pt-4" @click.stop="toggleUpdateOpinionDialog">
+            <XMarkIcon class="h-6 w-6" />
+          </button>
+        </div>
+
+
+        <form class="flex flex-col px-5 pb-4" @submit.prevent="updateOpinion(opinion.id)">
+          <p class="mb-2 text-xs font-medium text-gray-700">
+            {{ __('Edit opinion') }}
+          </p>
+          <div class="mb-2 flex items-center space-x-1">
+            <StarIcon
+              v-for="index in maxRating"
+              :key="index"
+              class="h-6 w-6 cursor-pointer text-yellow-400"
+              :class="{ 'fill-yellow-400': index <= updateOpinionForm.rating }"
+              @click="setRating(index)"
+            />
+          </div>
+          <textarea v-model.trim="updateOpinionForm.content" required class="h-32 w-full rounded-lg border border-gray-300" @keydown.enter.prevent="updateOpinion(opinion.id)" />
+
+          <div class="mt-1 flex flex-col">
+            <ErrorMessage :message="emptyRatingError" />
+            <ErrorMessage :message="updateOpinionForm.errors.rating" />
+            <ErrorMessage :message="updateOpinionForm.errors.content" />
+            <ErrorMessage :message="updateOpinionForm.errors.city_id" />
+          </div>
+
+          <button :disabled="!updateOpinionForm.isDirty" :class="updateOpinionForm.isDirty ? 'bg-emerald-500 hover:bg-emerald-600 ' : 'bg-gray-400 hover:bg-gray-500'" class="mt-2 flex w-full items-center justify-center rounded-lg p-3 text-xs font-medium text-white sm:w-fit sm:px-4 sm:py-2">
+            {{ __('Send') }}
+            <PaperAirplaneIcon class="ml-2 h-4 w-4" />
+          </button>
+        </form>
+      </div>
+    </div>
+  </div>
+
+  <DeleteModal v-if="isDeleteOpinionDialogOpened" :name="''" :type="'That opinion'" @close="toggleDeleteOpinionDialog" @delete="deleteOpinion(opinion.id)" />
+</template>
diff --git a/resources/js/Shared/Components/ProviderIcons.vue b/resources/js/Shared/Components/ProviderIcons.vue
index 4c3b6135..eef49127 100644
--- a/resources/js/Shared/Components/ProviderIcons.vue
+++ b/resources/js/Shared/Components/ProviderIcons.vue
@@ -13,10 +13,10 @@ function getProviderColor(providerName) {
 </script>
 
 <template>
-  <div class="mb-2 mr-1 mt-4 flex w-fit flex-row-reverse flex-wrap items-center justify-end sm:mt-0 sm:justify-start">
-    <div v-for="cityProvider in item.cityProviders" :key="cityProvider.provider_name">
+  <div class="mb-2 mr-3 mt-4 flex w-fit flex-row-reverse flex-wrap items-center justify-end sm:mt-0 sm:justify-start">
+    <div v-for="cityProvider in item.cityProviders" :key="cityProvider.provider_name" class="w-[72px]">
       <div :style="{ 'background-color': getProviderColor(cityProvider.provider_name) }"
-           class="m-1 flex h-7 w-fit shrink-0 items-center justify-center rounded-md border border-zinc-300 p-1 lg:h-8"
+           class="m-3 mr-5 flex h-7 w-fit scale-150 items-center justify-center rounded-md p-1 lg:h-8"
       >
         <img loading="lazy" class="w-7 lg:w-8" :src="'/providers/' + cityProvider.provider_name.toLowerCase() + '.png'" alt="">
       </div>
diff --git a/routes/web.php b/routes/web.php
index 1de774b1..99da75d2 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -29,6 +29,8 @@
     Route::get("/favorite-cities", [FavoritesController::class, "index"]);
 
     Route::post("/opinions", [CityOpinionController::class, "store"]);
+    Route::patch("/opinions/{cityOpinion}", [CityOpinionController::class, "update"]);
+    Route::delete("/opinions/{cityOpinion}", [CityOpinionController::class, "destroy"]);
 
     Route::middleware(["role:admin"])->group(function (): void {
         Route::get("/admin/importers", [ImportInfoController::class, "index"]);