diff --git a/app/components/partials/data/DataNoDataBlock.vue b/app/components/partials/data/DataNoDataBlock.vue
index 5645c5f0f..f276d53ea 100644
--- a/app/components/partials/data/DataNoDataBlock.vue
+++ b/app/components/partials/data/DataNoDataBlock.vue
@@ -25,11 +25,11 @@ async function click() {
 
 <template>
     <UButton
-        variant="ghost"
+        variant="outline"
         :disabled="!focus"
         :icon="icon"
         block
-        class="block w-full rounded-lg border border-dashed border-base-800 text-center dark:border-base-400"
+        class="block w-full text-center"
         :class="padding"
         @click="click()"
     >
diff --git a/app/components/quickbuttons/penaltycalculator/PenaltyCalculator.vue b/app/components/quickbuttons/penaltycalculator/PenaltyCalculator.vue
index d7d136cb5..30e02ade4 100644
--- a/app/components/quickbuttons/penaltycalculator/PenaltyCalculator.vue
+++ b/app/components/quickbuttons/penaltycalculator/PenaltyCalculator.vue
@@ -70,6 +70,9 @@ const filteredLawBooks = computed(() =>
         }),
 );
 
+const reduction = ref<number>(0);
+const leeway = computed(() => reduction.value / 100);
+
 function getNameForLawBookId(id: string): string | undefined {
     return lawBooks.value?.filter((b) => b.id === id)[0]?.name;
 }
@@ -113,9 +116,20 @@ async function copyToClipboard(): Promise<void> {
         d(new Date(), 'long') +
         `)
 
-${t('common.fine')}: $${state.value.fine}
-${t('common.detention_time')}: ${state.value.detentionTime} ${t('common.time_ago.month', state.value.detentionTime.toString())}
-${t('common.traffic_infraction_points', 2)}: ${state.value.stvoPoints}
+${t('common.fine')}: $${state.value.fine}${
+            leeway.value > 0 && state.value.fine > 0 ? ` ($-${(state.value.fine * leeway.value).toFixed(0)})` : ''
+        }
+${t('common.detention_time')}: ${state.value.detentionTime} ${t('common.time_ago.month', state.value.detentionTime)}${
+            leeway.value > 0 && state.value.detentionTime > 0
+                ? ` (-${(state.value.detentionTime * leeway.value).toFixed(0)} ${t('common.time_ago.month', parseInt((state.value.detentionTime * leeway.value).toFixed(0)))})`
+                : ''
+        }
+${t('common.traffic_infraction_points', 2)}: ${state.value.stvoPoints}${
+            leeway.value > 0 && state.value.stvoPoints > 0
+                ? ` (-${(state.value.stvoPoints * leeway.value).toFixed(0)} ${t('common.points', parseInt((state.value.stvoPoints * leeway.value).toFixed(0)))})`
+                : ''
+        }
+${t('common.reduction')}: ${reduction.value}%
 ${t('common.total_count')}: ${state.value.count}
 `;
 
@@ -242,13 +256,19 @@ const columns = [
             <div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
                 <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
                     <div class="text-xl">
-                        <PenaltyStats :summary="state" />
+                        <PenaltyStats :summary="state" :reduction="reduction" />
+
+                        <div class="my-2 flex flex-row items-center gap-2 text-lg">
+                            <URange v-model="reduction" :min="0" :max="25" :step="1" />
+                            <p class="w-12">{{ reduction }}%</p>
+                        </div>
 
-                        <div class="mt-4">
+                        <div>
                             <PenaltySummaryTable
                                 v-if="lawBooks && lawBooks.length > 0"
                                 :law-books="lawBooks"
                                 :selected-laws="state.selectedPenalties"
+                                :reduction="reduction"
                             />
                         </div>
                     </div>
diff --git a/app/components/quickbuttons/penaltycalculator/PenaltyStats.vue b/app/components/quickbuttons/penaltycalculator/PenaltyStats.vue
index e6cb8e3de..0e68f040f 100644
--- a/app/components/quickbuttons/penaltycalculator/PenaltyStats.vue
+++ b/app/components/quickbuttons/penaltycalculator/PenaltyStats.vue
@@ -1,58 +1,146 @@
 <script lang="ts" setup>
 import type { PenaltiesSummary } from '~/components/quickbuttons/penaltycalculator/PenaltyCalculator.vue';
 
-defineProps<{
+const props = defineProps<{
     summary: PenaltiesSummary;
+    reduction: number;
 }>();
+
+const leeway = computed(() => props.reduction / 100);
 </script>
 
 <template>
     <div class="mx-auto max-w-7xl">
-        <div class="mt-2 grid grid-cols-1 gap-2 sm:grid-cols-4">
-            <div class="bg-primary-900 px-4 py-6 sm:px-6 lg:px-8">
-                <p class="text-sm font-medium leading-6 text-gray-500 dark:text-gray-400">
-                    {{ $t('common.fine') }}
-                </p>
-                <p class="mt-2 flex items-baseline gap-x-2">
-                    <span class="text-4xl font-semibold tracking-tight">
-                        {{ summary.fine.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ') }}
-                    </span>
-                    <span class="text-sm text-gray-500 dark:text-gray-400">$</span>
-                </p>
-            </div>
-            <div class="bg-primary-900 px-4 py-6 sm:px-6 lg:px-8">
-                <p class="text-sm font-medium leading-6 text-gray-500 dark:text-gray-400">
-                    {{ $t('common.detention_time') }}
-                </p>
-                <p class="mt-2 flex items-baseline gap-x-2">
-                    <span class="text-4xl font-semibold tracking-tight">
-                        {{ summary.detentionTime }}
-                    </span>
-                    <span class="text-sm text-gray-500 dark:text-gray-400">
-                        {{ $t('common.time_ago.month', summary.detentionTime.toString()) }}
-                    </span>
-                </p>
-            </div>
-            <div class="bg-primary-900 px-4 py-6 sm:px-6 lg:px-8">
-                <p class="text-sm font-medium leading-6 text-gray-500 dark:text-gray-400">
-                    {{ $t('common.traffic_infraction_points', 2) }}
-                </p>
-                <p class="mt-2 flex items-baseline gap-x-2">
-                    <span class="text-4xl font-semibold tracking-tight">
-                        {{ summary.stvoPoints }}
-                    </span>
-                </p>
-            </div>
-            <div class="bg-primary-900 px-4 py-6 sm:px-6 lg:px-8">
-                <p class="text-sm font-medium leading-6 text-gray-500 dark:text-gray-400">
-                    {{ $t('common.total_count') }}
-                </p>
-                <p class="mt-2 flex items-baseline gap-x-2">
-                    <span class="text-4xl font-semibold tracking-tight">
-                        {{ summary.count }}
-                    </span>
-                </p>
-            </div>
-        </div>
+        <UPageGrid :ui="{ wrapper: 'grid-cols-1 sm:grid-cols-4' }">
+            <UPageCard
+                :ui="{
+                    body: {
+                        padding: 'px-4 py-4 sm:p-4',
+                    },
+                    icon: { wrapper: 'mb-1' },
+                }"
+                icon="i-mdi-attach-money"
+            >
+                <template #icon>
+                    <div class="flex gap-1">
+                        <UIcon name="i-mdi-attach-money" class="text-primary h-10 w-10" />
+                        <div class="flex items-center gap-1.5 truncate text-base font-semibold text-gray-900 dark:text-white">
+                            {{ $t('common.fine') }}
+                        </div>
+                    </div>
+                </template>
+
+                <template #description>
+                    <div class="flex flex-col gap-1">
+                        <div class="flex gap-1">
+                            <span class="text-4xl font-semibold tracking-tight">
+                                {{ summary.fine.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ') }}
+                            </span>
+                            <span class="text-sm text-gray-500 dark:text-gray-400">$</span>
+                        </div>
+
+                        <span v-if="leeway > 0 && summary.fine > 0"> ($-{{ (summary.fine * leeway).toFixed(0) }}) </span>
+                    </div>
+                </template>
+            </UPageCard>
+
+            <UPageCard
+                :ui="{
+                    body: {
+                        padding: 'flex-1 px-4 py-4 sm:p-4',
+                    },
+                    icon: { wrapper: 'mb-1' },
+                }"
+            >
+                <template #icon>
+                    <div class="flex gap-1">
+                        <UIcon name="i-mdi-clock" class="text-primary h-10 w-10" />
+                        <div class="flex items-center gap-1.5 truncate text-base font-semibold text-gray-900 dark:text-white">
+                            {{ $t('common.detention_time') }}
+                        </div>
+                    </div>
+                </template>
+
+                <template #description>
+                    <div class="flex flex-col gap-1">
+                        <div class="inline-flex gap-1">
+                            <span class="text-4xl font-semibold tracking-tight">
+                                {{ summary.detentionTime }}
+                            </span>
+                            <span class="text-sm text-gray-500 dark:text-gray-400">
+                                {{ $t('common.time_ago.month', summary.detentionTime) }}
+                            </span>
+                        </div>
+
+                        <span v-if="leeway > 0 && summary.detentionTime > 0">
+                            (-{{ (summary.detentionTime * leeway).toFixed(0) }}
+                            {{ $t('common.time_ago.month', (summary.detentionTime * leeway).toFixed(0)) }})
+                        </span>
+                    </div>
+                </template>
+            </UPageCard>
+
+            <UPageCard
+                :ui="{
+                    body: {
+                        padding: 'flex-1 px-4 py-4 sm:p-4',
+                    },
+                    icon: { wrapper: 'mb-1' },
+                }"
+            >
+                <template #icon>
+                    <div class="flex gap-1">
+                        <UIcon name="i-mdi-car" class="text-primary h-10 w-10" />
+                        <div class="flex items-center gap-1.5 truncate text-base font-semibold text-gray-900 dark:text-white">
+                            {{ $t('common.traffic_infraction_points', 2) }}
+                        </div>
+                    </div>
+                </template>
+
+                <template #description>
+                    <div class="flex flex-col gap-1">
+                        <div class="inline-flex gap-1">
+                            <span class="text-4xl font-semibold tracking-tight">
+                                {{ summary.stvoPoints }}
+                            </span>
+                            <span class="text-sm text-gray-500 dark:text-gray-400">
+                                {{ $t('common.points', summary.stvoPoints) }}
+                            </span>
+                        </div>
+
+                        <span v-if="leeway > 0 && summary.stvoPoints > 0">
+                            (-{{ (summary.stvoPoints * leeway).toFixed(0) }}
+                            {{ $t('common.points', (summary.stvoPoints * leeway).toFixed(0)) }})
+                        </span>
+                    </div>
+                </template>
+            </UPageCard>
+
+            <UPageCard
+                :ui="{
+                    body: {
+                        padding: 'flex-1 px-4 py-4 sm:p-4',
+                    },
+                    icon: { wrapper: 'mb-1' },
+                }"
+            >
+                <template #icon>
+                    <div class="flex gap-1">
+                        <UIcon name="i-mdi-equal" class="text-primary h-10 w-10" />
+                        <div class="flex items-center gap-1.5 truncate text-base font-semibold text-gray-900 dark:text-white">
+                            {{ $t('common.total_count') }}
+                        </div>
+                    </div>
+                </template>
+
+                <template #description>
+                    <div class="inline-flex gap-1">
+                        <span class="text-4xl font-semibold tracking-tight">
+                            {{ summary.count }}
+                        </span>
+                    </div>
+                </template>
+            </UPageCard>
+        </UPageGrid>
     </div>
 </template>
diff --git a/app/components/quickbuttons/penaltycalculator/PenaltySummaryTable.vue b/app/components/quickbuttons/penaltycalculator/PenaltySummaryTable.vue
index 0f75488fc..e8ebc8650 100644
--- a/app/components/quickbuttons/penaltycalculator/PenaltySummaryTable.vue
+++ b/app/components/quickbuttons/penaltycalculator/PenaltySummaryTable.vue
@@ -5,6 +5,7 @@ import type { LawBook } from '~~/gen/ts/resources/laws/laws';
 const props = defineProps<{
     lawBooks: LawBook[];
     selectedLaws: SelectedPenalty[];
+    reduction: number;
 }>();
 
 const { t } = useI18n();
@@ -39,14 +40,12 @@ const columns = [
         label: t('common.count'),
     },
 ];
+
+const leeway = computed(() => props.reduction / 100);
 </script>
 
 <template>
-    <UButton
-        v-if="selectedLaws.length === 0"
-        disabled
-        class="relative block w-full rounded-lg border border-dashed p-4 text-center"
-    >
+    <UButton v-if="selectedLaws.length === 0" disabled variant="outline" class="relative block w-full p-4 text-center">
         <UIcon name="i-mdi-calculator" class="mx-auto size-12" />
         <span class="mt-2 block text-sm font-semibold">
             {{ $t('common.none_selected', [`${$t('common.crime')}`]) }}
@@ -59,18 +58,34 @@ const columns = [
                 {{ getNameForLawBookId(law.law.lawbookId) }} - {{ law.law.name }}
             </p>
         </template>
-        <template #fine-data="{ row: law }"> ${{ law.law.fine ? law.law.fine * law.count : 0 }} </template>
+
+        <template #fine-data="{ row: law }">
+            ${{ law.law.fine ? law.law.fine * law.count : 0 }}
+            <span v-if="leeway > 0 && law.law.fine * law.count > 0">
+                ($-{{ (law.law.fine * law.count * leeway).toFixed(0) }})
+            </span>
+        </template>
+
         <template #detentionTime-data="{ row: law }">
             {{ law.law.detentionTime ? law.law.detentionTime * law.count : 0 }}
+            <span v-if="leeway > 0 && law.law.detentionTime * law.count > 0">
+                (-{{ (law.law.detentionTime * law.count * leeway).toFixed(0) }})
+            </span>
         </template>
+
         <template #trafficInfractionPoints-data="{ row: law }">
             {{ law.law.stvoPoints ? law.law.stvoPoints * law.count : 0 }}
+            <span v-if="leeway > 0 && law.law.stvoPoints * law.count > 0">
+                (-{{ (law.law.stvoPoints * law.count * leeway).toFixed(0) }})
+            </span>
         </template>
+
         <template #description-data="{ row: law }">
             <p class="line-clamp-2 w-full max-w-sm whitespace-normal break-all hover:line-clamp-none">
                 {{ law.law.description }}
             </p>
         </template>
+
         <template #fine-count="{ row: law }">
             {{ law.count }}
         </template>
diff --git a/app/lang/de/de.json b/app/lang/de/de.json
index a9c6c2b9b..d12446c4e 100644
--- a/app/lang/de/de.json
+++ b/app/lang/de/de.json
@@ -478,7 +478,8 @@
         "unpin": "Lösen",
         "pinned_document": "Angeheftetes Dokument | Angeheftete Dokumente",
         "or": "ODER",
-        "retrying": "Erneuter Versuch..."
+        "retrying": "Erneuter Versuch...",
+        "reduction": "Minderung"
     },
     "components": {
         "partials": {
diff --git a/app/lang/en/en.json b/app/lang/en/en.json
index e5be12d44..1d5aa7a9b 100644
--- a/app/lang/en/en.json
+++ b/app/lang/en/en.json
@@ -478,7 +478,8 @@
         "unpin": "Unpin",
         "pinned_document": "Pinned document | Pinned documents",
         "or": "OR",
-        "retrying": "Retrying..."
+        "retrying": "Retrying...",
+        "reduction": "Reduction"
     },
     "components": {
         "partials": {