diff --git a/packages/modules/web_themes/koala/source/src/components/BaseCarousel.vue b/packages/modules/web_themes/koala/source/src/components/BaseCarousel.vue
index 5a5d0ac250..cd87da0203 100644
--- a/packages/modules/web_themes/koala/source/src/components/BaseCarousel.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BaseCarousel.vue
@@ -9,7 +9,7 @@
     @update:model-value="handleSlideChange"
     padding
     :navigation="groupedItems.length > 1"
-    :arrows="groupedItems.length > 1 && $q.screen.gt.xs"
+    :arrows="showArrows"
     class="carousel-height"
     transition-next="slide-left"
     transition-prev="slide-right"
@@ -35,23 +35,64 @@
 
 <script setup lang="ts">
 import { ref, computed, watch, nextTick, onMounted } from 'vue';
-import { useQuasar } from 'quasar';
+import { Screen } from 'quasar';
 
 const props = defineProps<{
   items: number[];
 }>();
 
-const $q = useQuasar();
-const currentSlide = ref<number>(0);
+const slideItemWidth = ref<number | null>(null);
+const currentSlideItem = ref<number | null>(null);
 const animated = ref<boolean>(true);
 const carouselRef = ref<{ $el: HTMLElement } | null>(null);
 const itemRef = ref<(HTMLElement | null)[]>([]);
 
+const showArrows = computed(() => {
+  return groupedItems.value.length > 1 && Screen.gt.xs;
+});
+
+const storeSlideItemWidth = (width: number) => {
+  console.log('Storing slide item width:', width);
+  slideItemWidth.value = width;
+};
+
+const currentSlide = computed({
+  get: () => {
+    if (currentSlideItem.value == null) {
+      return 0; // Always show the first slide if a specific item is not set
+    }
+    // Find the index of the slide containing the current item
+    let currentSlide = groupedItems.value.findIndex((group) =>
+      group.includes(currentSlideItem.value),
+    );
+    if (currentSlide === -1) {
+      return 0; // Default to first slide if item not found
+    }
+    // Ensure the index is within bounds
+    return Math.min(currentSlide, groupedItems.value.length - 1);
+  },
+  set: (value: number) => {
+    // Update currentSlideItem to the first item of the new slide
+    currentSlideItem.value = groupedItems.value[value][0];
+  },
+});
+
 const groupSize = computed(() => {
-  if (!itemRef.value[0]) {
-    return; // Fallback if no item is present
+  let itemWidth = 300; // Default width
+  console.debug('Calculating group size...', itemRef.value);
+  if (slideItemWidth.value == null) {
+    if (
+      itemRef.value[0]?.clientWidth &&
+      itemRef.value[0].clientWidth != slideItemWidth.value
+    ) {
+      storeSlideItemWidth(itemRef.value[0].clientWidth);
+    } else {
+      console.warn('Item width is not set, using default:', itemWidth);
+    }
+  } else {
+    itemWidth = slideItemWidth.value;
   }
-  const itemWidth = itemRef.value[0]?.clientWidth ?? 300; // Fallback
+  console.debug('Item width:', itemWidth);
   let carouselSlideWidth = 0;
   let padding = 0;
   const slideEl = carouselRef.value?.$el.querySelector('.q-carousel__slide');
@@ -61,7 +102,7 @@ const groupSize = computed(() => {
     padding =
       parseFloat(style.paddingLeft || '0') +
       parseFloat(style.paddingRight || '0');
-    }
+  }
   const maxGroupSize = Math.max(
     1,
     Math.floor((carouselSlideWidth - padding) / itemWidth),
@@ -74,7 +115,7 @@ const groupSize = computed(() => {
     props.items.length <= maxGroupSize * 2 &&
     props.items.length - maxGroupSize === 1
   ) {
-   // Check if all items would fit side by side
+    // Check if all items would fit side by side
     if (props.items.length * itemWidth <= carouselSlideWidth) {
       return props.items.length;
     }
@@ -83,9 +124,10 @@ const groupSize = computed(() => {
 });
 
 const groupedItems = computed(() => {
-  const groupSizeValue = groupSize.value ? groupSize.value : props.items.length;
   return props.items.reduce((resultArray, item, index) => {
-    const chunkIndex = Math.floor(index / groupSizeValue);
+    const chunkIndex = Math.floor(
+      index / (groupSize.value ? groupSize.value : props.items.length),
+    );
     if (!resultArray[chunkIndex]) {
       resultArray[chunkIndex] = [];
     }
diff --git a/packages/modules/web_themes/koala/source/src/components/BaseTable.vue b/packages/modules/web_themes/koala/source/src/components/BaseTable.vue
index e82b4365d9..bc2ec5edd8 100644
--- a/packages/modules/web_themes/koala/source/src/components/BaseTable.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BaseTable.vue
@@ -1,132 +1,130 @@
 <template>
-  <div class="q-pa-md">
-    <q-table
-      class="sticky-header-table"
-      :class="{ 'custom-table-height': tableHeight }"
-      :rows="mappedRows"
-      :columns="mappedColumns"
-      row-key="id"
-      v-model:expanded="expanded"
-      :filter="filterModel"
-      :filter-method="customFilterMethod"
-      virtual-scroll
-      :virtual-scroll-item-size="48"
-      :virtual-scroll-sticky-size-start="30"
-      @row-click="onRowClick"
-      binary-state-sort
-      :pagination="{ rowsPerPage: 0 }"
-      hide-bottom
-    >
-      <!-- search field ------------------------------------------------------->
-      <template #top v-if="searchInputVisible">
-        <div class="row full-width items-center q-mb-sm">
-          <div class="col">
-            <q-input
-              v-model="filterModel"
-              dense
-              outlined
-              color="white"
-              placeholder="Suchen..."
-              class="search-field white-outline-input"
-              input-class="text-white"
-            >
-              <template #append>
-                <q-icon name="search" color="white" />
-              </template>
-            </q-input>
-          </div>
-        </div>
-      </template>
-
-      <!-- header ----------------------------------------------------------->
-      <template v-if="props.rowExpandable" #header="header">
-        <q-tr :props="header">
-          <!-- space for arrow column -->
-          <q-th auto-width :props="{ ...header, col: {} }" />
-          <!-- the other columns -->
-          <q-th
-            v-for="column in header.cols"
-            :key="column.name"
-            :props="{ ...header, col: column }"
+  <q-table
+    class="sticky-header-table"
+    :class="{ 'custom-table-height': tableHeight }"
+    :rows="mappedRows"
+    :columns="mappedColumns"
+    row-key="id"
+    v-model:expanded="expanded"
+    :filter="filterModel"
+    :filter-method="customFilterMethod"
+    virtual-scroll
+    :virtual-scroll-item-size="48"
+    :virtual-scroll-sticky-size-start="30"
+    @row-click="onRowClick"
+    binary-state-sort
+    :pagination="{ rowsPerPage: 0 }"
+    hide-bottom
+  >
+    <!-- search field ------------------------------------------------------->
+    <template #top v-if="searchInputVisible">
+      <div class="row full-width items-center q-mb-sm">
+        <div class="col">
+          <q-input
+            v-model="filterModel"
+            dense
+            outlined
+            color="white"
+            placeholder="Suchen..."
+            class="search-field white-outline-input"
+            input-class="text-white"
           >
-            {{ column.label }}
-          </q-th>
-        </q-tr>
-      </template>
-
-      <!-- body ------------------------------------------------------------->
-      <template v-if="props.rowExpandable" #body="rowProps: BodySlotProps<T>">
-        <q-tr
-          :key="`main-${rowProps.key}`"
-          :props="rowProps"
-          @click="onRowClick($event, rowProps.row)"
-          class="clickable"
-        >
-          <q-td auto-width>
-            <q-btn
-              dense
-              flat
-              round
-              size="sm"
-              :icon="
-                rowProps.expand ? 'keyboard_arrow_up' : 'keyboard_arrow_down'
-              "
-              @click.stop="rowProps.expand = !rowProps.expand"
-            />
-          </q-td>
-
-          <template v-for="column in rowProps.cols" :key="column.name">
-            <!-- custom body-cell slot -->
-            <template v-if="$slots[`body-cell-${column.name}`]">
-              <slot
-                :name="`body-cell-${column.name}`"
-                v-bind="{
-                  ...rowProps,
-                  col: column,
-                }"
-              >
-              </slot>
+            <template #append>
+              <q-icon name="search" color="white" />
             </template>
-
-            <!-- all other column data -->
-            <q-td
-              v-else
-              :props="{
+          </q-input>
+        </div>
+      </div>
+    </template>
+
+    <!-- header ----------------------------------------------------------->
+    <template v-if="props.rowExpandable" #header="header">
+      <q-tr :props="header">
+        <!-- space for arrow column -->
+        <q-th auto-width :props="{ ...header, col: {} }" />
+        <!-- the other columns -->
+        <q-th
+          v-for="column in header.cols"
+          :key="column.name"
+          :props="{ ...header, col: column }"
+        >
+          {{ column.label }}
+        </q-th>
+      </q-tr>
+    </template>
+
+    <!-- body ------------------------------------------------------------->
+    <template v-if="props.rowExpandable" #body="rowProps: BodySlotProps<T>">
+      <q-tr
+        :key="`main-${rowProps.key}`"
+        :props="rowProps"
+        @click="onRowClick($event, rowProps.row)"
+        class="clickable"
+      >
+        <q-td auto-width>
+          <q-btn
+            dense
+            flat
+            round
+            size="sm"
+            :icon="
+              rowProps.expand ? 'keyboard_arrow_up' : 'keyboard_arrow_down'
+            "
+            @click.stop="rowProps.expand = !rowProps.expand"
+          />
+        </q-td>
+
+        <template v-for="column in rowProps.cols" :key="column.name">
+          <!-- custom body-cell slot -->
+          <template v-if="$slots[`body-cell-${column.name}`]">
+            <slot
+              :name="`body-cell-${column.name}`"
+              v-bind="{
                 ...rowProps,
                 col: column,
-                // cast necessary as field comes from q-table and is defined: field: string | ((row: any) => any);
-                value: rowProps.row[column.field as string],
               }"
             >
-              <!-- cast necessary as field comes from q-table and is defined: field: string | ((row: any) => any); -->
-              {{ rowProps.row[column.field as string] }}
-            </q-td>
+            </slot>
           </template>
-        </q-tr>
-
-        <!-- expansion row -->
-        <q-tr
-          v-show="rowProps.expand"
-          :key="`xp-${rowProps.key}`"
-          :props="rowProps"
-          class="q-virtual-scroll--with-prev"
-        >
-          <q-td :colspan="rowProps.cols.length + 1">
-            <slot name="row-expand" v-bind="rowProps"> </slot>
+
+          <!-- all other column data -->
+          <q-td
+            v-else
+            :props="{
+              ...rowProps,
+              col: column,
+              // cast necessary as field comes from q-table and is defined: field: string | ((row: any) => any);
+              value: rowProps.row[column.field as string],
+            }"
+          >
+            <!-- cast necessary as field comes from q-table and is defined: field: string | ((row: any) => any); -->
+            {{ rowProps.row[column.field as string] }}
           </q-td>
-        </q-tr>
-      </template>
-
-      <!-- forward any other slots not related to table  e.g top search field -------------------->
-      <template
-        v-for="slotName in forwardedSlotNames"
-        :key="slotName"
-        v-slot:[slotName]="slotProps"
+        </template>
+      </q-tr>
+
+      <!-- expansion row -->
+      <q-tr
+        v-show="rowProps.expand"
+        :key="`xp-${rowProps.key}`"
+        :props="rowProps"
+        class="q-virtual-scroll--with-prev"
       >
-        <slot :name="slotName" v-bind="slotProps"></slot>
-      </template>
-    </q-table>
-  </div>
+        <q-td :colspan="rowProps.cols.length + 1">
+          <slot name="row-expand" v-bind="rowProps"> </slot>
+        </q-td>
+      </q-tr>
+    </template>
+
+    <!-- forward any other slots not related to table  e.g top search field -------------------->
+    <template
+      v-for="slotName in forwardedSlotNames"
+      :key="slotName"
+      v-slot:[slotName]="slotProps"
+    >
+      <slot :name="slotName" v-bind="slotProps"></slot>
+    </template>
+  </q-table>
 </template>
 
 <script setup lang="ts" generic="T extends Record<string, unknown>">
diff --git a/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue b/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue
index dd5500fa0d..92f214f914 100644
--- a/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue
@@ -1,7 +1,7 @@
 <template>
   <q-card
     ref="cardRef"
-    class="full-height card-width"
+    class="card-width"
     :class="{ 'battery-sum': props.batteryId === -1 }"
   >
     <q-card-section class="row items-center justify-between">
@@ -147,26 +147,26 @@ const dailyExportedEnergy = computed(() => {
 });
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .card-width {
-  width: 22em;
+  max-width: 22em;
 }
 
 .q-card__section {
-  padding-left: 16px;
-  padding-right: 16px;
+  padding-left: $space-base;
+  padding-right: $space-base;
   padding-top: 0;
   padding-bottom: 0;
 }
 
 .q-card__section:first-of-type {
-  padding-top: 16px;
+  padding-top: $space-base;
   padding-bottom: 0;
 }
 
 .q-card__section:last-of-type {
   padding-top: 0;
-  padding-bottom: 16px;
+  padding-bottom: $space-base;
 }
 
 .q-card__section:not(:first-of-type):not(:last-of-type) {
diff --git a/packages/modules/web_themes/koala/source/src/components/BatterySettingsDialog.vue b/packages/modules/web_themes/koala/source/src/components/BatterySettingsDialog.vue
index 0e1dbe62c6..f096f6514e 100644
--- a/packages/modules/web_themes/koala/source/src/components/BatterySettingsDialog.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BatterySettingsDialog.vue
@@ -1,14 +1,16 @@
 <template>
   <q-dialog
     v-model="isOpen"
-    :maximized="$q.screen.width < 385"
-    :backdrop-filter="$q.screen.width < 385 ? '' : 'blur(4px)'"
+    :maximized="isSmallScreen"
+    :backdrop-filter="isSmallScreen ? '' : 'blur(4px)'"
   >
     <q-card>
       <q-card-section>
-        <div class="row">
+        <div class="row no-wrap">
           <div class="text-h6 q-pr-sm">Einstellungen:</div>
           <div class="text-h6 ellipsis" :title="name">{{ name }}</div>
+          <q-space />
+          <q-btn icon="close" flat round dense v-close-popup />
         </div>
       </q-card-section>
       <q-separator />
@@ -16,20 +18,16 @@
         <div class="text-subtitle2">Laden mit Überschuss Modus:</div>
         <BatteryModeButtons />
       </q-card-section>
-      <q-card-actions align="right">
-        <q-btn flat label="OK" color="primary" v-close-popup />
-      </q-card-actions>
     </q-card>
   </q-dialog>
 </template>
 
 <script setup lang="ts">
 import { computed, ref } from 'vue';
-import { useQuasar } from 'quasar';
+import { Screen } from 'quasar';
 import BatteryModeButtons from './BatteryModeButtons.vue';
 import { useMqttStore } from 'src/stores/mqtt-store';
 
-const $q = useQuasar();
 const isOpen = ref(false);
 
 const props = defineProps<{
@@ -38,6 +36,8 @@ const props = defineProps<{
 
 const mqttStore = useMqttStore();
 
+const isSmallScreen = computed(() => Screen.lt.sm);
+
 const name = computed(() => {
   if (props.batteryId === undefined || props.batteryId === -1) {
     return 'Übergreifend';
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
index c90e223ceb..fd7de40941 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
@@ -1,9 +1,18 @@
 <template>
-  <q-card ref="cardRef" class="full-height card-width">
-    <q-card-section class="row">
+  <q-card ref="cardRef" class="card-width">
+    <q-card-section class="row no-wrap">
       <div class="text-h6 text-bold ellipsis" :title="name">
         {{ name }}
       </div>
+      <q-space />
+      <q-btn
+        v-if="props.closeButton"
+        icon="close"
+        flat
+        round
+        dense
+        v-close-popup
+      />
     </q-card-section>
     <q-separator class="q-mt-sm" />
     <q-card-section class="row flex items-center justify-between">
@@ -117,6 +126,7 @@ const $q = useQuasar();
 
 const props = defineProps<{
   chargePointId: number;
+  closeButton?: boolean;
 }>();
 
 const vehicleId = computed(() => {
@@ -287,24 +297,24 @@ const refreshSoc = () => {
 </script>
 <style lang="scss" scoped>
 .card-width {
-  width: 22em;
+  max-width: 22em;
 }
 
 .q-card__section {
-  padding-left: 16px;
-  padding-right: 16px;
+  padding-left: $space-base;
+  padding-right: $space-base;
   padding-top: 0;
   padding-bottom: 0;
 }
 
 .q-card__section:first-of-type {
-  padding-top: 16px;
+  padding-top: $space-base;
   padding-bottom: 0;
 }
 
 .q-card__section:last-of-type {
   padding-top: 0;
-  padding-bottom: 16px;
+  padding-bottom: $space-base;
 }
 
 .q-card__section:not(:first-of-type):not(:last-of-type) {
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
index 211402add5..991ddacc30 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
@@ -12,12 +12,12 @@
     v-else
     :items="chargePointIds"
     :row-data="tableRowData"
-    :column-config="isMobile ? tableColumnsMobile : columnConfigDesktop"
+    :column-config="compactTable ? tableColumnsMobile : columnConfigDesktop"
     :search-input-visible="searchInputVisible"
-    :table-height="isMobile ? '35vh' : '45vh'"
+    :table-height="compactTable ? '35vh' : '45vh'"
     v-model:filter="filter"
     :columns-to-search="['vehicle', 'name']"
-    :row-expandable="isMobile"
+    :row-expandable="compactTable"
     @row-click="onRowClick"
   >
     <!-- desktop view table body slots -->
@@ -50,7 +50,7 @@
           :power="slotProps.row.power"
           :phase-number="slotProps.row.phaseNumber"
           :current="slotProps.row.current"
-          :column-display-format="isMobile"
+          :column-display-format="isSmallScreen"
         />
       </q-td>
     </template>
@@ -103,26 +103,22 @@
     v-model="modalChargePointCardVisible"
     transition-show="fade"
     transition-hide="fade"
+    :maximized="isSmallScreen"
+    :full-height="isSmallScreen"
+    :full-width="isSmallScreen"
     :backdrop-filter="$q.screen.width < 385 ? '' : 'blur(4px)'"
   >
-    <div class="dialog-content">
-      <ChargePointCard
-        v-if="selectedChargePointId !== null"
-        :charge-point-id="selectedChargePointId"
-      >
-        <template #card-actions>
-          <q-btn color="primary" flat no-caps v-close-popup size="md">
-            Schließen
-          </q-btn>
-        </template>
-      </ChargePointCard>
-    </div>
+    <ChargePointCard
+      v-if="selectedChargePointId !== null"
+      :charge-point-id="selectedChargePointId"
+      :close-button="true"
+    />
   </q-dialog>
 </template>
 
 <script setup lang="ts">
 import { computed, ref } from 'vue';
-import { Platform } from 'quasar';
+import { Screen } from 'quasar';
 import { useMqttStore } from 'src/stores/mqtt-store';
 import { useChargeModes } from 'src/composables/useChargeModes';
 import BaseCarousel from 'src/components/BaseCarousel.vue';
@@ -146,7 +142,8 @@ const cardViewBreakpoint = computed(
 const searchInputVisible = computed(
   () => mqttStore.themeConfiguration?.chargePoint_table_search_input_field,
 );
-const isMobile = computed(() => Platform.is.mobile);
+const isSmallScreen = computed(() => Screen.lt.sm);
+const compactTable = computed(() => Screen.lt.md);
 const selectedChargePointId = ref<number | null>(null);
 const modalChargePointCardVisible = ref(false);
 const filter = ref('');
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointModeButtons.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointModeButtons.vue
index e9c3824041..f3e7000a54 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointModeButtons.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointModeButtons.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="q-pt-md full-width" v-if="isMobile">
+  <div v-if="isMobile" class="row q-pt-md full-width">
     <q-btn-dropdown
+      class="col"
       transition-show="scale"
       transition-hide="scale"
       transition-duration="500"
-      class="full-width"
       color="primary"
       :label="currentModeLabel"
       size="lg"
@@ -30,14 +30,13 @@
       </q-list>
     </q-btn-dropdown>
   </div>
-  <q-btn-group class="full-width q-mt-sm" v-else>
+  <q-btn-group v-else class="row col q-mt-sm" spread>
     <q-btn
       v-for="mode in chargeModes"
       :key="mode.value"
       :color="chargeMode.value === mode.value ? 'primary' : 'grey'"
       :label="mode.label"
       size="sm"
-      class="flex-grow"
       @click="chargeMode.value = mode.value"
     />
   </q-btn-group>
@@ -72,8 +71,4 @@ const currentModeLabel = computed(
   width: 0;
   padding: 0;
 }
-
-.flex-grow {
-  flex-grow: 1;
-}
 </style>
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointPowerData.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointPowerData.vue
index 51d2014227..c2eee22a49 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointPowerData.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointPowerData.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     :class="[
-      'cp-power items-center q-gutter-xs',
+      'text-no-wrap items-center q-gutter-xs',
       columnDisplayFormat ? 'column' : 'row inline',
     ]"
   >
@@ -21,9 +21,3 @@ defineProps<{
   columnDisplayFormat?: boolean;
 }>();
 </script>
-
-<style scoped>
-.cp-power {
-  white-space: nowrap;
-}
-</style>
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointSettings.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointSettings.vue
index 6b4b23a89e..8c4a856f22 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointSettings.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointSettings.vue
@@ -1,14 +1,16 @@
 <template>
   <q-dialog
     v-model="visible"
-    :maximized="$q.platform.is.mobile"
-    :backdrop-filter="$q.screen.width < 385 ? '' : 'blur(4px)'"
+    :maximized="isSmallScreen"
+    :backdrop-filter="isSmallScreen ? '' : 'blur(4px)'"
   >
     <q-card>
       <q-card-section>
-        <div class="row">
+        <div class="row no-wrap">
           <div class="text-h6 q-pr-sm">Einstellungen:</div>
           <div class="text-h6 ellipsis" :title="name">{{ name }}</div>
+          <q-space />
+          <q-btn icon="close" flat round dense v-close-popup />
         </div>
       </q-card-section>
       <q-separator />
@@ -66,15 +68,12 @@
           />
         </div>
       </q-card-section>
-      <q-card-actions align="right">
-        <q-btn flat label="OK" color="primary" v-close-popup />
-      </q-card-actions>
     </q-card>
   </q-dialog>
 </template>
 
 <script setup lang="ts">
-import { useQuasar, QDialog } from 'quasar';
+import { Screen, QDialog } from 'quasar';
 import { useMqttStore } from 'src/stores/mqtt-store';
 import { computed, ref, watch } from 'vue';
 import ChargePointInstantSettings from './ChargePointInstantSettings.vue';
@@ -87,7 +86,6 @@ import ChargePointLock from './ChargePointLock.vue';
 import ChargePointModeButtons from './ChargePointModeButtons.vue';
 import ChargePointVehicleSelect from './ChargePointVehicleSelect.vue';
 
-const $q = useQuasar();
 const mqttStore = useMqttStore();
 
 const props = defineProps<{
@@ -99,6 +97,8 @@ const emit = defineEmits<{
   'update:model-value': [value: boolean];
 }>();
 
+const isSmallScreen = computed(() => Screen.lt.sm);
+
 const tempValue = ref<boolean>(props.modelValue);
 
 watch(
diff --git a/packages/modules/web_themes/koala/source/src/components/SystemInformation.vue b/packages/modules/web_themes/koala/source/src/components/SystemInformation.vue
deleted file mode 100644
index 80116c131c..0000000000
--- a/packages/modules/web_themes/koala/source/src/components/SystemInformation.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-  <div>
-    <p>{{ title }}</p>
-    <p>IP: {{ mqttStore.systemIp }}</p>
-    <p>Version: {{ mqttStore.systemVersion }}</p>
-    <p>Time: {{ mqttStore.systemDateTime('locale-string') }}</p>
-    <p>Theme Configuration: {{ mqttStore.themeConfiguration }}</p>
-    <p>
-      General getter:
-      {{ mqttStore.getValue('openWB/general/web_theme', 'configuration') }}
-    </p>
-    <p>
-      Vehicle List:
-      {{ mqttStore.vehicleList }}
-    </p>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useMqttStore } from 'src/stores/mqtt-store';
-
-const mqttStore = useMqttStore();
-
-interface Props {
-  title: string;
-}
-
-defineProps<Props>();
-</script>
diff --git a/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue b/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue
index c266bac2ea..cf5717594f 100644
--- a/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-card ref="cardRef" class="full-height card-width">
+  <q-card ref="cardRef" class="card-width">
     <q-card-section class="row">
       <div class="text-h6 text-bold ellipsis" :title="vehicle?.name">
         {{ vehicle?.name }}
@@ -93,24 +93,24 @@ const refreshSoc = () => {
 
 <style lang="scss" scoped>
 .card-width {
-  width: 22em;
+  max-width: 22em;
 }
 
 .q-card__section {
-  padding-left: 16px;
-  padding-right: 16px;
+  padding-left: $space-base;
+  padding-right: $space-base;
   padding-top: 0;
   padding-bottom: 0;
 }
 
 .q-card__section:first-of-type {
-  padding-top: 16px;
+  padding-top: $space-base;
   padding-bottom: 0;
 }
 
 .q-card__section:last-of-type {
   padding-top: 0;
-  padding-bottom: 16px;
+  padding-bottom: $space-base;
 }
 
 .q-card__section:not(:first-of-type):not(:last-of-type) {
diff --git a/packages/modules/web_themes/koala/source/src/pages/IndexPage.vue b/packages/modules/web_themes/koala/source/src/pages/IndexPage.vue
index fff1191a11..8fc13cc05c 100644
--- a/packages/modules/web_themes/koala/source/src/pages/IndexPage.vue
+++ b/packages/modules/web_themes/koala/source/src/pages/IndexPage.vue
@@ -65,12 +65,18 @@ const batteryConfigured = computed(() => {
 });
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .chart-section {
   height: 40vh;
 }
 
-.tab-section :deep(.q-tab-panel) {
+.tab-section .q-tab-panel {
   max-width: 100vw;
 }
+
+@media screen and (max-width: $breakpoint-xs-max) {
+  .tab-section .q-tab-panel {
+    padding: 0;
+  }
+}
 </style>