diff --git a/client/package-lock.json b/client/package-lock.json
index d5cfe40a..070a6e83 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -50,6 +50,7 @@
         "postcss-import": "^14.1.0",
         "prettier": "^2.7.1",
         "prettier-plugin-organize-imports": "^3.1.1",
+        "prettier-plugin-tailwindcss": "^0.2.1",
         "replace-in-file": "^6.3.5",
         "sass": "^1.54.6",
         "sass-loader": "^12.6.0",
@@ -9515,6 +9516,18 @@
         }
       }
     },
+    "node_modules/prettier-plugin-tailwindcss": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.2.1.tgz",
+      "integrity": "sha512-aIO8IguumORyRsmT+E7JfJ3A9FEoyhqZR7Au7TBOege3VZkgMvHJMkufeYp4zjnDK2iq4ktkvGMNOQR9T8lisQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.17.0"
+      },
+      "peerDependencies": {
+        "prettier": ">=2.2.0"
+      }
+    },
     "node_modules/pretty-format": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
@@ -18823,6 +18836,13 @@
       "dev": true,
       "requires": {}
     },
+    "prettier-plugin-tailwindcss": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.2.1.tgz",
+      "integrity": "sha512-aIO8IguumORyRsmT+E7JfJ3A9FEoyhqZR7Au7TBOege3VZkgMvHJMkufeYp4zjnDK2iq4ktkvGMNOQR9T8lisQ==",
+      "dev": true,
+      "requires": {}
+    },
     "pretty-format": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
diff --git a/client/package.json b/client/package.json
index a28c1afd..23e695e8 100644
--- a/client/package.json
+++ b/client/package.json
@@ -57,6 +57,7 @@
     "postcss-import": "^14.1.0",
     "prettier": "^2.7.1",
     "prettier-plugin-organize-imports": "^3.1.1",
+    "prettier-plugin-tailwindcss": "^0.2.1",
     "replace-in-file": "^6.3.5",
     "sass": "^1.54.6",
     "sass-loader": "^12.6.0",
diff --git a/client/src/components/ui/HorizontalBarChart.vue b/client/src/components/ui/HorizontalBarChart.vue
index 3ed091e2..a3a30d9d 100644
--- a/client/src/components/ui/HorizontalBarChart.vue
+++ b/client/src/components/ui/HorizontalBarChart.vue
@@ -1,8 +1,8 @@
 <template>
   <div
-    class="grid overflow-hidden mb-10 pt-[10px] grid-areas-horizontal-bar-chart grid-rows-horizontal-bar-chart grid-cols-horizontal-bar-chart"
+    class="mb-10 grid grid-cols-horizontal-bar-chart grid-rows-horizontal-bar-chart overflow-hidden pt-[10px] grid-areas-horizontal-bar-chart"
   >
-    <div class="grid-in-y-axis flex flex-col justify-between -mt-[10px] pb-[30px]">
+    <div class="-mt-[10px] flex flex-col justify-between pb-[30px] grid-in-y-axis">
       <span
         v-for="percentage in [100, 75, 50, 25, 0]"
         :key="percentage"
@@ -12,21 +12,21 @@
       </span>
     </div>
     <div
-      class="background border-y border-y-gray-400 w-full h-1/2 col-start-2 col-span-5 relative self-center row-start-1"
+      class="background relative col-span-5 col-start-2 row-start-1 h-1/2 w-full self-center border-y border-y-gray-400"
     ></div>
     <div
-      class="relative border-y border-gray-400 flex justify-around content-center items-end border-y-gray-400 w-full col-start-2 col-span-5 h-[200px] row-start-1"
+      class="relative col-span-5 col-start-2 row-start-1 flex h-[200px] w-full content-center items-end justify-around border-y border-gray-400 border-y-gray-400"
     ></div>
     <div
-      class="bg-red-500 grid-in-left-chart relative self-end"
+      class="relative self-end bg-red-500 grid-in-left-chart"
       :style="redStyle"
     ></div>
     <div
-      class="bg-green-500 grid-in-right-chart relative self-end"
+      class="relative self-end bg-green-500 grid-in-right-chart"
       :style="greenStyle"
     ></div>
-    <div class="grid-in-left-label justify-self-center self-center font-bold">Nein</div>
-    <div class="grid-in-right-label justify-self-center self-center font-bold">Ja</div>
+    <div class="self-center justify-self-center font-bold grid-in-left-label">Nein</div>
+    <div class="self-center justify-self-center font-bold grid-in-right-label">Ja</div>
   </div>
 </template>
 
diff --git a/client/src/components/ui/RatingScale.vue b/client/src/components/ui/RatingScale.vue
index caee9d29..7aaed69f 100644
--- a/client/src/components/ui/RatingScale.vue
+++ b/client/src/components/ui/RatingScale.vue
@@ -1,23 +1,23 @@
 <template>
-  <div class="p-8 mb-8">
+  <div class="mb-8 p-8">
     <h3 class="text-xl font-normal">{{ props.title }}</h3>
-    <h2 class="text-xl font-bold mb-6">
+    <h2 class="mb-6 text-xl font-bold">
       {{ props.text }}
     </h2>
-    <div class="grid-rows-2 inline-grid grid-cols-[140px_auto] gap-x-2">
+    <div class="inline-grid grid-cols-[140px_auto] grid-rows-2 gap-x-2">
       <h4 class="text-xl">Durchschnitt:</h4>
       <span
-        class="w-11 h-9 inline-flex justify-center rounded items-center text-xl col-start-2 row-span-2"
+        class="col-start-2 row-span-2 inline-flex h-9 w-11 items-center justify-center rounded text-xl"
         :style="ratingValueStyle"
       >
         {{ props.rating }}
       </span>
       <h5 class="text-base">{{ props.answers }} Antworten</h5>
     </div>
-    <div class="gradient-with-circle pt-3 relative grid grid-cols-8">
-      <div class="h-2 gradient relative z-10" :style="gradientStyle"></div>
-      <div class="h-2 bg-gray-300 absolute empty-bar w-full"></div>
-      <div class="relative circle-wrapper">
+    <div class="gradient-with-circle relative grid grid-cols-8 pt-3">
+      <div class="gradient relative z-10 h-2" :style="gradientStyle"></div>
+      <div class="empty-bar absolute h-2 w-full bg-gray-300"></div>
+      <div class="circle-wrapper relative">
         <div class="circle z-20" :style="circleStyle"></div>
       </div>
       <div