diff --git a/packages/modules/web_themes/koala/config.py b/packages/modules/web_themes/koala/config.py
index dfe89a07b6..31dceec4c6 100644
--- a/packages/modules/web_themes/koala/config.py
+++ b/packages/modules/web_themes/koala/config.py
@@ -6,8 +6,12 @@
 @auto_str
 class KoalaWebThemeConfiguration:
     def __init__(self,
-                 history_chart_range: int = 3600) -> None:
+                 history_chart_range: int = 3600,
+                 card_view_breakpoint: int = 4,
+                 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
 
 
 @auto_str
diff --git a/packages/modules/web_themes/koala/source/src/components/BaseTable.vue b/packages/modules/web_themes/koala/source/src/components/BaseTable.vue
new file mode 100644
index 0000000000..5de3eaeff7
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/components/BaseTable.vue
@@ -0,0 +1,106 @@
+<template>
+  <div class="q-pa-md">
+    <q-table
+      class="sticky-header-table"
+      :rows="rows"
+      :columns="columns"
+      row-key="id"
+      :filter="filter"
+      :filter-method="customFilterMethod"
+      virtual-scroll
+      :virtual-scroll-item-size="48"
+      :virtual-scroll-sticky-size-start="48"
+      :style="{ height: tableHeight }"
+      @row-click="onRowClick"
+      binary-state-sort
+      :pagination="{ rowsPerPage: 0 }"
+      hide-bottom
+    >
+      <template v-slot: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 v-slot:append>
+                <q-icon name="search" color="white" />
+              </template>
+            </q-input>
+          </div>
+        </div>
+      </template>
+
+      <!-- Dynamic slot for custom cell rendering -->
+      <template
+        v-for="(_, name) in $slots"
+        :key="name"
+        v-slot:[name]="slotData"
+      >
+        <slot :name="name" v-bind="slotData"></slot>
+      </template>
+    </q-table>
+  </div>
+</template>
+
+<style scoped>
+.search-field {
+  width: 100%;
+  max-width: 18em;
+}
+</style>
+
+<script setup lang="ts">
+import { computed } 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[];
+  searchInputVisible?: boolean;
+  tableHeight?: string;
+  filter?: string;
+  columnsToSearch?: string[];
+}>();
+
+const emit = defineEmits<{
+  (e: 'row-click', row: BaseRow): void;
+  (e: 'update:filter', value: string): void;
+}>();
+
+const filterModel = computed({
+  get: () => props.filter || '',
+  set: (value) => {
+    emit('update:filter', value);
+  },
+});
+
+const customFilterMethod: FilterFunction = (rows, terms, cols) => {
+  if (!terms || terms.trim() === '') {
+    return rows;
+  }
+  const lowerTerms = terms.toLowerCase();
+  const columnsToSearch = 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);
+    });
+  });
+};
+
+const onRowClick = (evt: Event, row: BaseRow) => {
+  emit('row-click', row);
+};
+</script>
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 4cf0d9ecdb..1d5e12b6e1 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
@@ -44,6 +44,7 @@
         :current-value="currentValue"
         :target-time="targetTime"
       />
+      <slot name="card-footer"></slot>
     </q-card-section>
   </q-card>
   <!-- //////////////////////  Settings popup dialog   //////////////////// -->
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 8c2fac320a..287f890b92 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
@@ -1,19 +1,232 @@
 <template>
-  <BaseCarousel :items="chargePointIds">
-    <template #item="{ item }">
-      <ChargePointCard :charge-point-id="item" />
-    </template>
-  </BaseCarousel>
+  <div>
+    <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>
+
+    <!-- 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>
 </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 } from 'vue';
+import { computed, ref } from 'vue';
+import { useQuasar, Platform, QTableColumn } from 'quasar';
 import { useMqttStore } from 'src/stores/mqtt-store';
-
 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/chargepoint-information-models';
 
+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 chargePointIds = computed(() => mqttStore.chargePointIds);
+const cardViewBreakpoint = computed(
+  () => mqttStore.themeConfiguration?.card_view_breakpoint || 4,
+);
+const searchInputVisible = computed(
+  () => mqttStore.themeConfiguration?.table_search_input_field,
+);
+const { chargeModes } = useChargeModes();
+
+const rows = computed<ChargePointRow[]>(() => {
+  return chargePointIds.value.map((id) => {
+    const chargePointName = mqttStore.chargePointName(id);
+    const vehicleName =
+      mqttStore.chargePointConnectedVehicleInfo(id).value?.name ||
+      'Kein Fahrzeug';
+    const plugState = 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 power = mqttStore.chargePointPower(id, 'textValue');
+    const energyCharged = mqttStore.chargePointEnergyChargedPlugged(
+      id,
+      'textValue',
+    );
+    return {
+      id: id,
+      name: chargePointName,
+      vehicle: vehicleName,
+      plugged: plugState,
+      mode: chargeMode,
+      soc: socDisplay,
+      power: power,
+      charged: energyCharged,
+    };
+  });
+});
+
+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: 'Mode',
+    field: 'mode',
+    sortable: true,
+    align: 'left',
+    headerStyle: 'font-weight: bold',
+  },
+  {
+    name: 'soc',
+    label: 'Ladestand',
+    field: 'soc',
+    sortable: true,
+    align: 'left',
+    headerStyle: 'font-weight: bold',
+  },
+  {
+    name: 'power',
+    label: 'Leistung',
+    field: 'power',
+    sortable: true,
+    align: 'left',
+    headerStyle: 'font-weight: bold',
+  },
+  {
+    name: 'charged',
+    label: 'Geladen',
+    field: 'charged',
+    sortable: true,
+    align: 'left',
+    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 onRowClick = (row: ChargePointRow) => {
+  selectedChargePointId.value = row.id;
+  modalChargePointCardVisible.value = true;
+};
 </script>
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 539b811af6..e9c3824041 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointModeButtons.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointModeButtons.vue
@@ -47,23 +47,16 @@
 import { useMqttStore } from 'src/stores/mqtt-store';
 import { computed } from 'vue';
 import { Platform } from 'quasar';
+import { useChargeModes } from 'src/composables/useChargeModes';
 
 const props = defineProps<{
   chargePointId: number;
 }>();
 
 const isMobile = computed(() => Platform.is.mobile);
-
+const { chargeModes } = useChargeModes();
 const mqttStore = useMqttStore();
 
-const chargeModes = [
-  { value: 'instant_charging', label: 'Sofort', color: 'negative' },
-  { value: 'pv_charging', label: 'PV', color: 'positive' },
-  { value: 'scheduled_charging', label: 'Ziel', color: 'primary' },
-  { value: 'eco_charging', label: 'Eco', color: 'secondary' },
-  { value: 'stop', label: 'Stop', color: 'light' },
-];
-
 const chargeMode = computed(() =>
   mqttStore.chargePointConnectedVehicleChargeMode(props.chargePointId),
 );
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointStateMessage.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointStateMessage.vue
index cb70e4146b..e76583c532 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointStateMessage.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointStateMessage.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="row q-mt-sm q-pa-sm bg-primary text-white no-wrap"
+    class="row q-mt-sm q-pa-sm bg-primary text-white no-wrap message-text"
     color="primary"
     style="border-radius: 10px"
   >
@@ -23,3 +23,10 @@ const message = computed(() =>
   mqttStore.chargePointStateMessage(props.chargePointId),
 );
 </script>
+
+<style scoped>
+.message-text {
+  overflow-x: auto;
+  overflow-y: auto;
+}
+</style>
diff --git a/packages/modules/web_themes/koala/source/src/components/SliderDouble.vue b/packages/modules/web_themes/koala/source/src/components/SliderDouble.vue
index 8852b2bef4..cfb2a555b8 100644
--- a/packages/modules/web_themes/koala/source/src/components/SliderDouble.vue
+++ b/packages/modules/web_themes/koala/source/src/components/SliderDouble.vue
@@ -46,10 +46,7 @@
         <div>Zielzeit</div>
         <div>{{ props.targetTime }}</div>
       </div>
-      <div
-        v-if="targetSet"
-        class="col text-right"
-      >
+      <div v-if="targetSet" class="col text-right">
         <div>
           {{ props.limitMode == 'soc' ? 'Ladeziel' : 'Energieziel' }}
         </div>
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
new file mode 100644
index 0000000000..cdb984c8d5
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/components/models/base-table-models.ts
@@ -0,0 +1,4 @@
+export interface BaseRow {
+  id: string | number;
+  [key: string]: unknown;
+}
diff --git a/packages/modules/web_themes/koala/source/src/components/models/chargepoint-information-models.ts b/packages/modules/web_themes/koala/source/src/components/models/chargepoint-information-models.ts
new file mode 100644
index 0000000000..2677220552
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/components/models/chargepoint-information-models.ts
@@ -0,0 +1,12 @@
+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/composables/useChargeModes.ts b/packages/modules/web_themes/koala/source/src/composables/useChargeModes.ts
new file mode 100644
index 0000000000..340cd59a79
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/composables/useChargeModes.ts
@@ -0,0 +1,12 @@
+export const useChargeModes = () => {
+  const chargeModes = [
+    { value: 'instant_charging', label: 'Sofort', color: 'negative' },
+    { value: 'pv_charging', label: 'PV', color: 'positive' },
+    { value: 'scheduled_charging', label: 'Ziel', color: 'primary' },
+    { value: 'eco_charging', label: 'Eco', color: 'secondary' },
+    { value: 'stop', label: 'Stop', color: 'light' },
+  ];
+  return {
+    chargeModes,
+  };
+};
diff --git a/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss b/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss
index 42a1018f06..001ade7642 100644
--- a/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss
+++ b/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss
@@ -131,6 +131,66 @@ $battery: #ba7128;
   .q-toggle__inner--truthy .q-toggle__thumb:after {
     background-color: currentColor;
   }
+  // Search input border color for table view
+  .white-outline-input.q-field--outlined .q-field__control:before {
+    border-color: var(--q-white) !important;
+  }
+  // Table styling
+  .sticky-header-table {
+    /* height or max-height is important */
+    height: 310px;
+
+    .q-table__top,
+    .q-table__bottom,
+    thead tr:first-child th {
+      background-color: var(--q-primary);
+      color: var(--q-white);
+      font-size: 0.9rem;
+    }
+
+    thead tr th {
+      position: sticky;
+      z-index: 1;
+    }
+
+    thead tr:first-child th {
+      top: 0;
+    }
+
+    /* this is when the loading indicator appears */
+    &.q-table--loading thead tr:last-child th {
+      /* height of all previous header rows */
+      top: 48px;
+    }
+
+    /* prevent scrolling behind sticky top row on focus */
+    tbody {
+      /* height of all previous header rows */
+      scroll-margin-top: 48px;
+      background-color: var(--q-secondary);
+      color: var(--q-brown-text);
+    }
+
+    tbody tr,
+    .q-table__middle,
+    .q-table__grid-content
+      .q-virtual-scroll
+      .q-virtual-scroll--vertical
+      scroll {
+      background-color: var(--q-secondary);
+    }
+
+    tbody tr:hover {
+      background-color: rgba(0, 0, 0, 0.05);
+    }
+
+    // Scrollbar styling for tables - Light Theme
+    .q-table__middle.q-virtual-scroll {
+      // Firefox
+      scrollbar-width: thin;
+      scrollbar-color: var(--q-primary) var(--q-secondary);
+    }
+  }
 }
 // Dark Theme Base Colors
 $dark-page: #000000; // This overrides Quasar's default dark page color
@@ -262,4 +322,58 @@ $dark-tab-icon: #d7d9e0;
   .q-toggle__inner--truthy .q-toggle__thumb:after {
     background-color: currentColor;
   }
+
+  // Table styling - Dark Theme
+  .sticky-header-table {
+    /* height or max-height is important */
+    height: 310px;
+
+    .q-table__top,
+    .q-table__bottom,
+    thead tr:first-child th {
+      background-color: var(--q-primary);
+      color: var(--q-white);
+      font-size: 0.9rem;
+    }
+
+    thead tr th {
+      position: sticky;
+      z-index: 1;
+    }
+
+    thead tr:first-child th {
+      top: 0;
+    }
+
+    /* this is when the loading indicator appears */
+    &.q-table--loading thead tr:last-child th {
+      /* height of all previous header rows */
+      top: 48px;
+    }
+
+    /* prevent scrolling behind sticky top row on focus */
+    tbody {
+      /* height of all previous header rows */
+      scroll-margin-top: 48px;
+      background-color: var(--q-secondary);
+      color: var(--q-white);
+    }
+
+    tbody tr,
+    .q-table__middle,
+    .q-table__grid-content {
+      background-color: var(--q-secondary);
+    }
+
+    tbody tr:hover {
+      background-color: rgba(255, 255, 255, 0.07);
+    }
+
+    // Scrollbar styling for tables - Dark Theme
+    .q-table__middle.q-virtual-scroll {
+      // Firefox
+      scrollbar-width: thin;
+      scrollbar-color: var(--q-primary) var(--q-secondary);
+    }
+  }
 }
diff --git a/packages/modules/web_themes/koala/source/src/layouts/MainLayout.vue b/packages/modules/web_themes/koala/source/src/layouts/MainLayout.vue
index 38a52b867a..fee95d6b71 100644
--- a/packages/modules/web_themes/koala/source/src/layouts/MainLayout.vue
+++ b/packages/modules/web_themes/koala/source/src/layouts/MainLayout.vue
@@ -4,13 +4,6 @@
       <q-toolbar>
         <q-btn dense flat round icon="menu" @click="drawer = !drawer" />
         <q-toolbar-title>openWB</q-toolbar-title>
-        <q-btn
-          flat
-          round
-          :icon="colorModeIcon"
-          @click="toggleColorMode()"
-          aria-label="Color-Mode"
-        />
       </q-toolbar>
     </q-header>
 
@@ -63,6 +56,61 @@
 
             <q-item-section> Einstellungen </q-item-section>
           </q-item>
+
+          <q-separator />
+
+          <q-item-label header>Anzeigeeinstellungen</q-item-label>
+
+          <q-item>
+            <q-item-section avatar>
+              <q-icon name="light_mode" />
+            </q-item-section>
+
+            <q-item-section>
+              <q-item-label>Darstellungsmodus</q-item-label>
+            </q-item-section>
+
+            <q-item-section side>
+              <q-btn-group flat>
+                <q-btn
+                  flat
+                  round
+                  :color="themeMode === 'light' ? 'primary' : ''"
+                  icon="light_mode"
+                  @click="setTheme('light')"
+                  size="sm"
+                  :disable="themeMode === 'light'"
+                  aria-label="Light Mode"
+                >
+                  <q-tooltip>Hell</q-tooltip>
+                </q-btn>
+                <q-btn
+                  flat
+                  round
+                  :color="themeMode === 'dark' ? 'primary' : ''"
+                  icon="dark_mode"
+                  @click="setTheme('dark')"
+                  size="sm"
+                  :disable="themeMode === 'dark'"
+                  aria-label="Dark Mode"
+                >
+                  <q-tooltip>Dunkel</q-tooltip>
+                </q-btn>
+                <q-btn
+                  flat
+                  round
+                  :color="themeMode === 'auto' ? 'primary' : ''"
+                  icon="devices"
+                  @click="setTheme('auto')"
+                  size="sm"
+                  :disable="themeMode === 'auto'"
+                  aria-label="System Mode"
+                >
+                  <q-tooltip>Systemeinstellung</q-tooltip>
+                </q-btn>
+              </q-btn-group>
+            </q-item-section>
+          </q-item>
         </q-list>
       </q-scroll-area>
     </q-drawer>
@@ -75,7 +123,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue';
+import { ref, onMounted } from 'vue';
 import { useQuasar } from 'quasar';
 const $q = useQuasar();
 
@@ -84,25 +132,28 @@ defineOptions({
 });
 
 const drawer = ref(false);
-
-/**
- * Computed property that returns the icon name for the color mode button.
- */
-const colorModeIcon = computed(() => {
-  return $q.dark.isActive ? 'dark_mode' : 'light_mode';
-});
-
-/**
- * Toggles the color mode of the application.
- */
-function toggleColorMode() {
-  $q.dark.toggle();
-  localStorage.setItem('theme', $q.dark.isActive ? 'dark' : 'light');
-}
+const themeMode = ref('auto');
+
+const setTheme = (mode: 'light' | 'dark' | 'auto') => {
+  themeMode.value = mode;
+  if (mode === 'auto') {
+    localStorage.removeItem('theme');
+    $q.dark.set('auto');
+  } else {
+    $q.dark.set(mode === 'dark');
+    localStorage.setItem('theme', mode);
+  }
+};
 
 onMounted(() => {
-  const savedTheme = localStorage.getItem('theme') || 'light'; // Set light as default theme
-  $q.dark.set(savedTheme === 'dark');
+  const savedTheme = localStorage.getItem('theme');
+  if (savedTheme) {
+    themeMode.value = savedTheme as 'light' | 'dark';
+    $q.dark.set(savedTheme === 'dark');
+  } else {
+    themeMode.value = 'auto';
+    $q.dark.set('auto');
+  }
 });
 </script>
 
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 b92fc357d3..f4fdddabaf 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,5 +1,7 @@
 export interface ThemeConfiguration {
   history_chart_range: number;
+  card_view_breakpoint: number;
+  table_search_input_field: boolean;
 }
 
 export interface ConnectionOptions {