diff --git a/resources/js/Pages/City/Index.vue b/resources/js/Pages/City/Index.vue
index 539b3160..11e34bf7 100644
--- a/resources/js/Pages/City/Index.vue
+++ b/resources/js/Pages/City/Index.vue
@@ -21,7 +21,7 @@ const toast = useToast()
 const page = usePage()
 const isAuth = computed(() => page.props.auth.isAuth)
 const regulationsOpen = ref(false)
-const rules = reactive({ pl: '<i class="text-gray-400">ładowanie informacji o zasadach, proszę czekać...</i>', en: '<i class="text-gray-400">loading info about rules, please wait...</i>' })
+const rules = reactive({ pl: 'ładowanie informacji o zasadach, proszę czekać...', en: 'loading info about rules, please wait...' })
 
 fetchRegulations()
 const props = defineProps({
@@ -135,7 +135,9 @@ function createOpinion() {
             <div class="my-3 flex cursor-pointer items-center text-2xl font-bold text-gray-700" @click="toggleRegulations()">
               {{ __('Rules') }} <ArrowDownIcon :class="regulationsOpen ? 'rotated' : ''" class="absolute right-3 inline-block h-6 w-6 transition-all" />
             </div>
-            <div :class="regulationsOpen?'show':''" class="overflow-scroll transition" v-html="currentRules" />
+            <div :class="regulationsOpen?'show':''" class="overflow-scroll transition text-grey-400">
+                <pre class="text-gray-400" v-text="currentRules"/>
+            </div>
           </div>
           <form v-if="isAuth" class="mt-8 flex flex-col" @submit.prevent="createOpinion">
             <p class="mb-2 text-xs font-medium text-gray-700">