diff --git a/packages/modules/web_themes/koala/config.py b/packages/modules/web_themes/koala/config.py
index 49d26a47f7..8e38d4b5bd 100644
--- a/packages/modules/web_themes/koala/config.py
+++ b/packages/modules/web_themes/koala/config.py
@@ -7,11 +7,15 @@
 class KoalaWebThemeConfiguration:
     def __init__(self,
                  history_chart_range: int = 3600,
-                 card_view_breakpoint: int = 4,
-                 table_search_input_field: bool = False) -> None:
+                 chargePoint_card_view_breakpoint: int = 4,
+                 vehicle_card_view_breakpoint: int = 4,
+                 chargePoint_table_search_input_field: bool = False,
+                 vehicle_table_search_input_field: bool = False) -> None:
         self.history_chart_range = history_chart_range
-        self.card_view_breakpoint = card_view_breakpoint
-        self.table_search_input_field = table_search_input_field
+        self.chargePoint_card_view_breakpoint = chargePoint_card_view_breakpoint
+        self.vehicle_card_view_breakpoint = vehicle_card_view_breakpoint
+        self.chargePoint_table_search_input_field = chargePoint_table_search_input_field
+        self.vehicle_table_search_input_field = vehicle_table_search_input_field
 
 
 @auto_str
diff --git a/packages/modules/web_themes/koala/source/public/favicon.ico b/packages/modules/web_themes/koala/source/public/favicon.ico
old mode 100644
new mode 100755
index ae7bbdb712..56157fb682
Binary files a/packages/modules/web_themes/koala/source/public/favicon.ico and b/packages/modules/web_themes/koala/source/public/favicon.ico differ
diff --git a/packages/modules/web_themes/koala/source/public/icons/favicon-128x128.png b/packages/modules/web_themes/koala/source/public/icons/favicon-128x128.png
deleted file mode 100644
index 1401176192..0000000000
Binary files a/packages/modules/web_themes/koala/source/public/icons/favicon-128x128.png and /dev/null differ
diff --git a/packages/modules/web_themes/koala/source/public/icons/favicon-16x16.png b/packages/modules/web_themes/koala/source/public/icons/favicon-16x16.png
deleted file mode 100644
index 679063a314..0000000000
Binary files a/packages/modules/web_themes/koala/source/public/icons/favicon-16x16.png and /dev/null differ
diff --git a/packages/modules/web_themes/koala/source/public/icons/favicon-32x32.png b/packages/modules/web_themes/koala/source/public/icons/favicon-32x32.png
deleted file mode 100644
index fd1fbc6f1b..0000000000
Binary files a/packages/modules/web_themes/koala/source/public/icons/favicon-32x32.png and /dev/null differ
diff --git a/packages/modules/web_themes/koala/source/public/icons/favicon-96x96.png b/packages/modules/web_themes/koala/source/public/icons/favicon-96x96.png
deleted file mode 100644
index e93b80a09c..0000000000
Binary files a/packages/modules/web_themes/koala/source/public/icons/favicon-96x96.png and /dev/null differ
diff --git a/packages/modules/web_themes/koala/source/public/icons/icon-128x128.png b/packages/modules/web_themes/koala/source/public/icons/icon-128x128.png
deleted file mode 100644
index 1401176192..0000000000
Binary files a/packages/modules/web_themes/koala/source/public/icons/icon-128x128.png and /dev/null differ
diff --git a/packages/modules/web_themes/koala/source/public/icons/icon-192x192.png b/packages/modules/web_themes/koala/source/public/icons/icon-192x192.png
deleted file mode 100644
index 57cbac8fcd..0000000000
Binary files a/packages/modules/web_themes/koala/source/public/icons/icon-192x192.png and /dev/null differ
diff --git a/packages/modules/web_themes/koala/source/public/icons/icon-256x256.png b/packages/modules/web_themes/koala/source/public/icons/icon-256x256.png
deleted file mode 100644
index 12f043e79d..0000000000
Binary files a/packages/modules/web_themes/koala/source/public/icons/icon-256x256.png and /dev/null differ
diff --git a/packages/modules/web_themes/koala/source/public/icons/icon-384x384.png b/packages/modules/web_themes/koala/source/public/icons/icon-384x384.png
deleted file mode 100644
index df8e257d88..0000000000
Binary files a/packages/modules/web_themes/koala/source/public/icons/icon-384x384.png and /dev/null differ
diff --git a/packages/modules/web_themes/koala/source/public/icons/icon-512x512.png b/packages/modules/web_themes/koala/source/public/icons/icon-512x512.png
deleted file mode 100644
index 9ca1391736..0000000000
Binary files a/packages/modules/web_themes/koala/source/public/icons/icon-512x512.png and /dev/null differ
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 91d56c5baf..8d4391321c 100644
--- a/packages/modules/web_themes/koala/source/src/components/BaseTable.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BaseTable.vue
@@ -2,10 +2,10 @@
   <div class="q-pa-md">
     <q-table
       class="sticky-header-table"
-      :rows="rows"
-      :columns="columns"
+      :rows="mappedRows"
+      :columns="mappedColumns"
       row-key="id"
-      :filter="filter"
+      :filter="filterModel"
       :filter-method="customFilterMethod"
       virtual-scroll
       :virtual-scroll-item-size="48"
@@ -48,23 +48,20 @@
   </div>
 </template>
 
-<style scoped>
-.search-field {
-  width: 100%;
-  max-width: 18em;
-}
-</style>
-
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, ComputedRef } from 'vue';
 import { QTableColumn, QTableProps } from 'quasar';
-import { BaseRow } from 'src/components/models/base-table-models';
-
-type FilterFunction = NonNullable<QTableProps['filterMethod']>;
 
 const props = defineProps<{
-  rows: BaseRow[];
-  columns: QTableColumn[];
+  items: number[];
+  rowData:
+    | ((item: number) => Record<string, unknown>)
+    | ComputedRef<(item: number) => Record<string, unknown>>;
+  columnConfig: {
+    fields: string[];
+    labels?: Record<string, string>;
+  };
+  rowKey?: string;
   searchInputVisible?: boolean;
   tableHeight?: string;
   filter?: string;
@@ -72,38 +69,58 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-  (e: 'row-click', row: BaseRow): void;
+  (e: 'row-click', row: Record<string, unknown>): void;
   (e: 'update:filter', value: string): void;
 }>();
 
 const filterModel = computed({
   get: () => props.filter || '',
-  set: (value) => {
-    emit('update:filter', value);
-  },
+  set: (value) => emit('update:filter', value),
+});
+
+// Data can be passed to basetable as a normal function or computed property
+const rowMapperFn = computed(() =>
+  typeof props.rowData === 'function' ? props.rowData : props.rowData.value,
+);
+
+const mappedRows = computed(() => props.items.map(rowMapperFn.value));
+
+const mappedColumns = computed<QTableColumn[]>(() => {
+  return props.columnConfig.fields.map((field) => ({
+    name: field,
+    label: props.columnConfig.labels?.[field] || field,
+    field,
+    align: 'left',
+    sortable: true,
+    headerStyle: 'font-weight: bold',
+  }));
 });
 
-const customFilterMethod: FilterFunction = (rows, terms, cols) => {
-  if (!terms || terms.trim() === '') {
-    return rows;
-  }
+const customFilterMethod: NonNullable<QTableProps['filterMethod']> = (
+  rows,
+  terms,
+  cols,
+) => {
+  if (!terms || terms.trim() === '') return rows;
   const lowerTerms = terms.toLowerCase();
-  const columnsToSearch =
+  const fields =
     props.columnsToSearch ||
     cols.map((col) => (typeof col.field === 'string' ? col.field : ''));
-  return rows.filter((row) => {
-    return columnsToSearch.some((field) => {
-      const val = row[field as keyof typeof row];
-      return (
-        val !== null &&
-        val !== undefined &&
-        String(val).toLowerCase().includes(lowerTerms)
-      );
-    });
-  });
+  return rows.filter((row) =>
+    fields.some((field) => {
+      const val = row[field];
+      return val && String(val).toLowerCase().includes(lowerTerms);
+    }),
+  );
 };
 
-const onRowClick = (evt: Event, row: BaseRow) => {
+const onRowClick = (evt: Event, row: Record<string, unknown>) =>
   emit('row-click', row);
-};
 </script>
+
+<style scoped>
+.search-field {
+  width: 100%;
+  max-width: 18em;
+}
+</style>
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 521674767d..0ac9fa33cd 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
@@ -8,6 +8,12 @@
           <ChargePointStateIcon
             :charge-point-id="Number(props.chargePointId)"
           />
+          <ChargePointTimeCharging
+            :charge-point-id="Number(props.chargePointId)"
+            :readonly="true"
+            :iconSize="'xs'"
+            :toolTip="true"
+          />
         </div>
         <q-icon name="settings" size="sm" @click="settingsVisible = true" />
       </div>
@@ -91,6 +97,7 @@ import ChargePointFaultMessage from './ChargePointFaultMessage.vue';
 import ChargePointVehicleSelect from './ChargePointVehicleSelect.vue';
 import ChargePointSettings from './ChargePointSettings.vue';
 import ChargePointManualSocDialog from './ChargePointManualSocDialog.vue';
+import ChargePointTimeCharging from './ChargePointTimeCharging.vue';
 import { useQuasar } from 'quasar';
 
 const mqttStore = useMqttStore();
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 73a0bef361..40128124b8 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
@@ -1,232 +1,182 @@
 <template>
-  <div>
-    <BaseCarousel
-      v-if="chargePointIds.length <= cardViewBreakpoint"
-      :items="chargePointIds"
-    >
-      <template #item="{ item }">
-        <ChargePointCard :charge-point-id="item" />
-      </template>
-    </BaseCarousel>
+  <BaseCarousel
+    v-if="chargePointIds.length <= cardViewBreakpoint"
+    :items="chargePointIds"
+  >
+    <template #item="{ item }">
+      <ChargePointCard :charge-point-id="item" />
+    </template>
+  </BaseCarousel>
 
-    <BaseTable
-      v-else
-      :rows="rows"
-      :columns="mobile ? columnsMobile : columns"
-      :search-input-visible="searchInputVisible"
-      :table-height="mobile ? '35vh' : '40vh'"
-      v-model:filter="filter"
-      :columns-to-search="['vehicle', 'name']"
-      @row-click="onRowClick($event as ChargePointRow)"
-    >
-      <template v-slot:body-cell-plugged="props">
-        <q-td :props="props">
-          <ChargePointStateIcon :charge-point-id="props.row.id" />
-        </q-td>
-      </template>
-    </BaseTable>
+  <BaseTable
+    v-else
+    :items="chargePointIds"
+    :row-data="tableRowData"
+    :column-config="mobile ? columnConfigMobile : columnConfig"
+    :search-input-visible="searchInputVisible"
+    :table-height="mobile ? '35vh' : '40vh'"
+    v-model:filter="filter"
+    :columns-to-search="['vehicle', 'name']"
+    @row-click="onRowClick"
+  >
+    <template #body-cell-plugged="{ row }">
+      <q-td>
+        <ChargePointStateIcon :charge-point-id="row.id" />
+      </q-td>
+    </template>
+    <template #body-cell-timeCharging="{ row }">
+      <q-td>
+        <ChargePointTimeCharging
+          :charge-point-id="row.id"
+          :readonly="true"
+          :toolTip="true"
+          :icon-size="'xs'"
+        />
+      </q-td>
+    </template>
+  </BaseTable>
 
-    <!-- ChargePointCard Dialog -->
-    <q-dialog
-      v-model="modalChargePointCardVisible"
-      transition-show="fade"
-      transition-hide="fade"
-      :backdrop-filter="$q.screen.width < 385 ? '' : 'blur(4px)'"
-    >
-      <div class="dialog-content">
-        <ChargePointCard
-          v-if="selectedChargePointId !== null"
-          :charge-point-id="selectedChargePointId"
-        >
-          <template #card-footer>
-            <div class="card-footer">
-              <q-btn
-                color="primary"
-                flat
-                no-caps
-                v-close-popup
-                class="close-button"
-                size="md"
-                >Schließen</q-btn
-              >
-            </div>
-          </template>
-        </ChargePointCard>
-      </div>
-    </q-dialog>
-  </div>
+  <!-- ChargePointCard Dialog -->
+  <q-dialog
+    v-model="modalChargePointCardVisible"
+    transition-show="fade"
+    transition-hide="fade"
+    :backdrop-filter="$q.screen.width < 385 ? '' : 'blur(4px)'"
+  >
+    <div class="dialog-content">
+      <ChargePointCard
+        v-if="selectedChargePointId !== null"
+        :charge-point-id="selectedChargePointId"
+      >
+        <template #card-footer>
+          <div class="card-footer">
+            <q-btn
+              color="primary"
+              flat
+              no-caps
+              v-close-popup
+              class="close-button"
+              size="md"
+              >Schließen</q-btn
+            >
+          </div>
+        </template>
+      </ChargePointCard>
+    </div>
+  </q-dialog>
 </template>
 
-<style scoped>
-.dialog-content {
-  width: auto;
-  max-width: 24em;
-}
-
-.close-button {
-  position: absolute;
-  bottom: 0.4em;
-  right: 0.4em;
-  z-index: 1;
-  background: transparent;
-}
-
-.card-footer {
-  height: 1.9em;
-}
-</style>
-
 <script setup lang="ts">
 import { computed, ref } from 'vue';
-import { useQuasar, Platform, QTableColumn } from 'quasar';
+import { Platform } from 'quasar';
 import { useMqttStore } from 'src/stores/mqtt-store';
+import { useChargeModes } from 'src/composables/useChargeModes';
 import BaseCarousel from 'src/components/BaseCarousel.vue';
 import BaseTable from 'src/components/BaseTable.vue';
 import ChargePointCard from 'src/components/ChargePointCard.vue';
 import ChargePointStateIcon from 'src/components/ChargePointStateIcon.vue';
-import { useChargeModes } from 'src/composables/useChargeModes';
-import { ChargePointRow } from 'src/components/models/charge-point-information-models';
+import ChargePointTimeCharging from './ChargePointTimeCharging.vue';
 
-const $q = useQuasar();
-const mobile = computed(() => Platform.is.mobile);
 const mqttStore = useMqttStore();
-const selectedChargePointId = ref<number | null>(null);
-const modalChargePointCardVisible = ref(false);
-const filter = ref('');
+const { chargeModes } = useChargeModes();
 const chargePointIds = computed(() => mqttStore.chargePointIds);
 const cardViewBreakpoint = computed(
-  () => mqttStore.themeConfiguration?.card_view_breakpoint || 4,
+  () => mqttStore.themeConfiguration?.chargePoint_card_view_breakpoint || 4,
 );
 const searchInputVisible = computed(
-  () => mqttStore.themeConfiguration?.table_search_input_field,
+  () => mqttStore.themeConfiguration?.chargePoint_table_search_input_field,
 );
-const { chargeModes } = useChargeModes();
-
-const rows = computed<ChargePointRow[]>(() => {
-  return chargePointIds.value.map((id) => {
-    const chargePointName = mqttStore.chargePointName(id);
-    const vehicleName =
+const mobile = computed(() => Platform.is.mobile);
+const selectedChargePointId = ref<number | null>(null);
+const modalChargePointCardVisible = ref(false);
+const filter = ref('');
+const tableRowData = computed(() => {
+  return (id: number) => {
+    const name = mqttStore.chargePointName(id);
+    const vehicle =
       mqttStore.chargePointConnectedVehicleInfo(id).value?.name ||
       'Kein Fahrzeug';
-    const plugState = mqttStore.chargePointPlugState(id) ? 'Ja' : 'Nein';
+    const plugged = mqttStore.chargePointPlugState(id) ? 'Ja' : 'Nein';
     const chargeModeValue =
       mqttStore.chargePointConnectedVehicleChargeMode(id).value;
     const chargeModeObj = chargeModes.find(
       (mode) => mode.value === chargeModeValue,
     );
     const chargeMode = chargeModeObj ? chargeModeObj.label : chargeModeValue;
-    const soc = Math.round(
-      mqttStore.chargePointConnectedVehicleSoc(id).value?.soc || 0,
-    );
-    const socDisplay = `${soc}%`;
+    const chargePointSoc =
+      mqttStore.chargePointConnectedVehicleSoc(id).value?.soc;
+    const soc =
+      chargePointSoc !== undefined ? `${Math.round(chargePointSoc)}%` : '0%';
     const power = mqttStore.chargePointPower(id, 'textValue');
-    const energyCharged = mqttStore.chargePointEnergyChargedPlugged(
-      id,
-      'textValue',
-    );
+    const charged = mqttStore.chargePointEnergyChargedPlugged(id, 'textValue');
+    const timeCharging = mqttStore.chargePointConnectedVehicleTimeCharging(id);
     return {
-      id: id,
-      name: chargePointName,
-      vehicle: vehicleName,
-      plugged: plugState,
-      mode: chargeMode,
-      soc: socDisplay,
-      power: power,
-      charged: energyCharged,
+      id,
+      name,
+      vehicle,
+      plugged,
+      chargeMode,
+      timeCharging,
+      soc,
+      power,
+      charged,
     };
-  });
+  };
 });
 
-const columns: QTableColumn[] = [
-  {
-    name: 'name',
-    label: 'Ladepunkt',
-    field: 'name',
-    sortable: true,
-    align: 'left',
-    headerStyle: 'font-weight: bold',
-  },
-  {
-    name: 'vehicle',
-    label: 'Fahrzeug',
-    field: 'vehicle',
-    sortable: true,
-    align: 'left',
-    headerStyle: 'font-weight: bold',
-  },
-  {
-    name: 'plugged',
-    label: 'Status',
-    field: 'plugged',
-    sortable: true,
-    align: 'center',
-    headerStyle: 'font-weight: bold',
-  },
-  {
-    name: 'mode',
-    label: 'Lademodus',
-    field: 'mode',
-    sortable: true,
-    align: 'left',
-    headerStyle: 'font-weight: bold',
-  },
-  {
-    name: 'soc',
-    label: 'Ladestand',
-    field: 'soc',
-    sortable: true,
-    align: 'right',
-    headerStyle: 'font-weight: bold',
-  },
-  {
-    name: 'power',
-    label: 'Leistung',
-    field: 'power',
-    sortable: true,
-    align: 'right',
-    headerStyle: 'font-weight: bold',
+const columnConfig = {
+  fields: [
+    'name',
+    'vehicle',
+    'plugged',
+    'chargeMode',
+    'timeCharging',
+    'soc',
+    'power',
+    'charged',
+  ],
+  labels: {
+    name: 'Ladepunkt',
+    vehicle: 'Fahrzeug',
+    plugged: 'Status',
+    chargeMode: 'Lademodus',
+    timeCharging: 'Zeitladen',
+    soc: 'Ladestand',
+    power: 'Leistung',
+    charged: 'Geladen',
   },
-  {
-    name: 'charged',
-    label: 'Geladen',
-    field: 'charged',
-    sortable: true,
-    align: 'right',
-    headerStyle: 'font-weight: bold',
-  },
-];
+};
 
-const columnsMobile = computed((): QTableColumn[] => {
-  return [
-    {
-      name: 'name',
-      label: 'Ladepunkt',
-      field: 'name',
-      sortable: true,
-      align: 'left',
-      headerStyle: 'font-weight: bold',
-    },
-    {
-      name: 'vehicle',
-      label: 'Fahrzeug',
-      field: 'vehicle',
-      sortable: true,
-      align: 'left',
-      headerStyle: 'font-weight: bold',
-    },
-    {
-      name: 'plugged',
-      label: 'Status',
-      field: 'plugged',
-      sortable: true,
-      align: 'center',
-      headerStyle: 'font-weight: bold',
-    },
-  ];
-});
+const columnConfigMobile = {
+  fields: ['name', 'vehicle', 'plugged'],
+  labels: {
+    name: 'Ladepunkt',
+    vehicle: 'Fahrzeug',
+    plugged: 'Status',
+  },
+};
 
-const onRowClick = (row: ChargePointRow) => {
-  selectedChargePointId.value = row.id;
+const onRowClick = (row: Record<string, unknown>) => {
+  selectedChargePointId.value = row.id as number;
   modalChargePointCardVisible.value = true;
 };
 </script>
+
+<style scoped>
+.dialog-content {
+  width: auto;
+  max-width: 24em;
+}
+
+.close-button {
+  position: absolute;
+  bottom: 0.4em;
+  right: 0.4em;
+  z-index: 1;
+  background: transparent;
+}
+
+.card-footer {
+  height: 1.9em;
+}
+</style>
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointTimeCharging.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointTimeCharging.vue
index 33a7caf909..269b359350 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointTimeCharging.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointTimeCharging.vue
@@ -3,8 +3,12 @@
     v-if="props.readonly"
     :name="timeChargingEnabled ? icon.on : icon.off"
     :color="timeChargingEnabled ? 'primary' : ''"
-    size="sm"
-  />
+    :size="props.iconSize ? props.iconSize : 'sm'"
+  >
+    <q-tooltip v-if="props.toolTip">{{
+      timeChargingEnabled ? 'Zeitladen aktiviert' : 'Zeitladen deaktiviert'
+    }}</q-tooltip>
+  </q-icon>
   <q-toggle
     v-else
     v-model="timeChargingEnabled"
@@ -32,6 +36,14 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  iconSize: {
+    type: String,
+    default: 'sm',
+  },
+  toolTip: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const icon = {
diff --git a/packages/modules/web_themes/koala/source/src/components/ChartCarousel.vue b/packages/modules/web_themes/koala/source/src/components/ChartCarousel.vue
index 2613a0bd9d..3a38d1ebea 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChartCarousel.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChartCarousel.vue
@@ -12,8 +12,8 @@
     class="full-width full-height bg-transparent carousel-height"
   >
     <q-carousel-slide
-      v-for="(chartComponent, index) in chartCarouselItems"
-      :key="index"
+      v-for="chartComponent in chartCarouselItems"
+      :key="`${chartComponent.name}-${chartComponent.name === 'HistoryChart' ? renderKey : 0}`"
       :name="chartComponent.name"
     >
       <component :is="chartComponent.component" :show-legend="legendVisible" />
@@ -42,7 +42,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue';
+import { ref, computed, watch } from 'vue';
 import { useQuasar } from 'quasar';
 import EnergyFlowChart from './charts/energyFlowChart/EnergyFlowChart.vue';
 import HistoryChart from './charts/historyChart/HistoryChart.vue';
@@ -53,7 +53,7 @@ defineOptions({
 });
 const $q = useQuasar();
 const localDataStore = useLocalDataStore();
-
+const renderKey = ref(0);
 const toggleLegend = () => {
   localDataStore.toggleLegendVisibility();
 };
@@ -70,6 +70,21 @@ const chartCarouselItems = [
   },
 ];
 const currentSlide = ref<string>(chartCarouselItems[0].name);
+
+watch(
+  () => fullscreen.value,
+  (isFullscreen, wasFullscreen) => {
+    // Only trigger when exiting fullscreen and current slide is HistoryChart
+    if (
+      !isFullscreen &&
+      wasFullscreen &&
+      currentSlide.value === 'HistoryChart'
+    ) {
+      // Force the chart to be recreated by changing its key
+      renderKey.value++;
+    }
+  },
+);
 </script>
 
 <style scoped>
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 95fc693676..faa3ac80f0 100644
--- a/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue
@@ -71,6 +71,7 @@
         </div>
         <div>Ladestand: {{ vehicleSocValue }}%</div>
       </div>
+      <slot name="card-footer"></slot>
     </q-card-section>
   </q-card>
 </template>
diff --git a/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue b/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
index 10ec40f6f7..1118ba5090 100644
--- a/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
@@ -1,21 +1,177 @@
 <template>
-  <BaseCarousel :items="vehicleIds">
+  <BaseCarousel
+    v-if="vehicleIds.length <= cardViewBreakpoint"
+    :items="vehicleIds"
+  >
     <template #item="{ item }">
       <VehicleCard :vehicle-id="item" />
     </template>
   </BaseCarousel>
+
+  <BaseTable
+    v-else
+    :items="vehicleIds"
+    :row-data="tableRowData"
+    :column-config="mobile ? columnConfigMobile : columnConfig"
+    :search-input-visible="searchInputVisible"
+    :table-height="mobile ? '35vh' : '40vh'"
+    v-model:filter="filter"
+    :columns-to-search="['name', 'manufacturer', 'model']"
+    @row-click="onRowClick"
+  >
+    <template #body-cell-plugged="{ row }">
+      <q-td>
+        <q-icon
+          :name="row.plugState ? 'power' : 'power_off'"
+          size="sm"
+          :color="
+            row.plugState
+              ? row.chargeState
+                ? 'positive'
+                : 'warning'
+              : 'negative'
+          "
+        >
+          <q-tooltip>
+            {{
+              row.plugState
+                ? row.chargeState
+                  ? 'Lädt'
+                  : 'Angesteckt, lädt nicht'
+                : 'Nicht angesteckt'
+            }}
+          </q-tooltip>
+        </q-icon>
+      </q-td>
+    </template>
+  </BaseTable>
+
+  <!-- VehicleCard Dialog -->
+  <q-dialog
+    v-model="modalChargeVehicleCardVisible"
+    transition-show="fade"
+    transition-hide="fade"
+    :backdrop-filter="$q.screen.width < 385 ? '' : 'blur(4px)'"
+  >
+    <div class="dialog-content">
+      <VehicleCard
+        v-if="selectedVehicleId !== null"
+        :vehicle-id="selectedVehicleId"
+      >
+        <template #card-footer>
+          <div class="card-footer">
+            <q-btn
+              color="primary"
+              flat
+              no-caps
+              v-close-popup
+              class="close-button"
+              size="md"
+              >Schließen</q-btn
+            >
+          </div>
+        </template>
+      </VehicleCard>
+    </div>
+  </q-dialog>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { useMqttStore } from 'src/stores/mqtt-store';
-
+import { Platform } from 'quasar';
 import BaseCarousel from 'src/components/BaseCarousel.vue';
+import BaseTable from 'src/components/BaseTable.vue';
 import VehicleCard from 'src/components/VehicleCard.vue';
 
 const mqttStore = useMqttStore();
-
+const mobile = computed(() => Platform.is.mobile);
+const modalChargeVehicleCardVisible = ref(false);
+const selectedVehicleId = ref<number | null>(null);
+const filter = ref('');
+const searchInputVisible = computed(
+  () => mqttStore.themeConfiguration?.vehicle_table_search_input_field,
+);
+const cardViewBreakpoint = computed(
+  () => mqttStore.themeConfiguration?.vehicle_card_view_breakpoint || 4,
+);
 const vehicles = computed(() => mqttStore.vehicleList);
-
 const vehicleIds = computed(() => vehicles.value.map((vehicle) => vehicle.id));
+const tableRowData = computed(() => {
+  return (id: number) => {
+    const vehicle = mqttStore.vehicleList.find((v) => v.id === id);
+    const name = vehicle?.name || 'keine Angabe';
+    const vehicleState = mqttStore.vehicleConnectionState(id);
+    const plugState = vehicleState.some((v) => v.plugged);
+    const chargeState = vehicleState.some((v) => v.charging);
+    const info = mqttStore.vehicleInfo(id);
+    const manufacturer = info?.manufacturer || 'keine Angabe';
+    const model = info?.model || 'keine Angabe';
+    const soc = mqttStore.vehicleSocValue(id);
+    const vehicleSocValue = soc !== undefined ? `${Math.round(soc)}%` : '–';
+    const vehicleSocModule = mqttStore.vehicleSocModuleName(id) || 'keine';
+    return {
+      id,
+      name,
+      manufacturer,
+      model,
+      plugState,
+      chargeState,
+      vehicleSocValue,
+      vehicleSocModule,
+    };
+  };
+});
+
+const columnConfig = {
+  fields: [
+    'name',
+    'manufacturer',
+    'model',
+    'plugged',
+    'vehicleSocValue',
+    'vehicleSocModule',
+  ],
+  labels: {
+    name: 'Fahrzeug',
+    manufacturer: 'Hersteller',
+    model: 'Modell',
+    plugged: 'Status',
+    vehicleSocValue: 'Ladestand',
+    vehicleSocModule: 'SoC Modul',
+  },
+};
+
+const columnConfigMobile = {
+  fields: ['name', 'plugged', 'vehicleSocValue'],
+  labels: {
+    name: 'Fahrzeug',
+    plugged: 'Status',
+    vehicleSocValue: 'Ladestand',
+  },
+};
+
+const onRowClick = (row: Record<string, unknown>) => {
+  selectedVehicleId.value = row.id as number;
+  modalChargeVehicleCardVisible.value = true;
+};
 </script>
+
+<style scoped>
+.dialog-content {
+  width: auto;
+  max-width: 24em;
+}
+
+.close-button {
+  position: absolute;
+  bottom: 0.4em;
+  right: 0.4em;
+  z-index: 1;
+  background: transparent;
+}
+
+.card-footer {
+  height: 1.9em;
+}
+</style>
diff --git a/packages/modules/web_themes/koala/source/src/components/models/base-table-models.ts b/packages/modules/web_themes/koala/source/src/components/models/base-table-models.ts
deleted file mode 100644
index cdb984c8d5..0000000000
--- a/packages/modules/web_themes/koala/source/src/components/models/base-table-models.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export interface BaseRow {
-  id: string | number;
-  [key: string]: unknown;
-}
diff --git a/packages/modules/web_themes/koala/source/src/components/models/charge-point-information-models.ts b/packages/modules/web_themes/koala/source/src/components/models/charge-point-information-models.ts
deleted file mode 100644
index 2677220552..0000000000
--- a/packages/modules/web_themes/koala/source/src/components/models/charge-point-information-models.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { BaseRow } from './base-table-models';
-
-export interface ChargePointRow extends BaseRow {
-  id: number;
-  name: string | undefined;
-  vehicle: string;
-  plugged: string;
-  mode: string | undefined;
-  soc: string;
-  power: string | number | object | undefined;
-  charged: string | number | object | undefined;
-}
diff --git a/packages/modules/web_themes/koala/source/src/stores/mqtt-store-model.ts b/packages/modules/web_themes/koala/source/src/stores/mqtt-store-model.ts
index dad34d5b95..906c80e817 100644
--- a/packages/modules/web_themes/koala/source/src/stores/mqtt-store-model.ts
+++ b/packages/modules/web_themes/koala/source/src/stores/mqtt-store-model.ts
@@ -1,7 +1,9 @@
 export interface ThemeConfiguration {
   history_chart_range: number;
-  card_view_breakpoint: number;
-  table_search_input_field: boolean;
+  chargePoint_card_view_breakpoint: number;
+  vehicle_card_view_breakpoint: number;
+  chargePoint_table_search_input_field: boolean;
+  vehicle_table_search_input_field: boolean;
 }
 
 export interface ConnectionOptions {