diff --git a/src/components/DivContentTable.vue b/src/components/DivContentTable.vue
new file mode 100644
index 0000000..835f5fe
--- /dev/null
+++ b/src/components/DivContentTable.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="row justify-content-md-center">
+    <div :class="class">
+      <table class="table table-striped table-bordered table-hover">
+        <slot name="default"></slot>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  class: {
+    type: String,
+    default: "col-xxl-9 col-xs-12",
+  },
+});
+</script>
diff --git a/src/components/DivError.vue b/src/components/DivError.vue
index ff38056..4407662 100644
--- a/src/components/DivError.vue
+++ b/src/components/DivError.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="serverErrors">
+  <div v-if="serverErrors && serverErrors.length > 0">
     <div
       class="alert alert-danger text-center"
       v-for="(error, index) in serverErrors"
diff --git a/src/components/DivFilter.vue b/src/components/DivFilter.vue
new file mode 100644
index 0000000..480cf49
--- /dev/null
+++ b/src/components/DivFilter.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="row justify-content-md-center">
+    <div class="col-md-auto mb-3">
+      <div class="row">
+        <div class="col-md-auto mb-3">
+          <button
+            type="button"
+            class="btn btn-primary"
+            @click="$emit('createClicked')"
+          >
+            {{ $t("General.new") }}
+          </button>
+        </div>
+        <div class="col">
+          <div class="input-group">
+            <button
+              type="button"
+              class="btn btn-primary"
+              @click="emit('update:modelValue', '')"
+            >
+              {{ $t("General.all") }}
+            </button>
+            <input
+              class="form-control"
+              type="text"
+              :placeholder="placeholder"
+              :value="props.modelValue"
+              @input="emit('update:modelValue', $event.target.value)"
+            />
+            <div
+              class="form-check form-switch align-self-center ms-2"
+              v-if="showValidToggle"
+            >
+              <input
+                class="form-check-input"
+                type="checkbox"
+                id="validInput"
+                v-model="validNow"
+                @change="emit('validNowToggled', validNow)"
+              />
+              <label class="form-check-label" for="validInput">{{
+                $t("General.validNow")
+              }}</label>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+const searchString = ref("");
+const validNow = ref(true);
+
+const emit = defineEmits([
+  "update:modelValue",
+  "validNowToggled",
+  "createClicked",
+]);
+
+const props = defineProps({
+  placeholder: {
+    type: String,
+    default: "",
+  },
+  modelValue: {
+    type: String,
+    required: true,
+  },
+  showValidToggle: {
+    type: Boolean,
+    default: true,
+  },
+});
+</script>
diff --git a/src/views/capitalsource/ListCapitalsources.vue b/src/views/capitalsource/ListCapitalsources.vue
index 8235237..567e5ca 100644
--- a/src/views/capitalsource/ListCapitalsources.vue
+++ b/src/views/capitalsource/ListCapitalsources.vue
@@ -17,82 +17,39 @@
       </div>
     </div>
 
-    <div class="row justify-content-md-center">
-      <div class="col-md-auto mb-3">
-        <div class="row">
-          <div class="col-md-auto mb-3">
-            <button
-              type="button"
-              class="btn btn-primary"
-              @click="showCreateCapitalsourceModal"
-            >
-              {{ $t("General.new") }}
-            </button>
-          </div>
-          <div class="col">
-            <div class="input-group">
-              <button
-                type="button"
-                class="btn btn-primary"
-                @click="searchAllContent"
-              >
-                {{ $t("General.all") }}
-              </button>
-              <input
-                class="form-control"
-                type="text"
-                :placeholder="$t('Capitalsource.searchBy')"
-                v-model="searchString"
-                @input="searchContent"
-              />
-              <div class="form-check form-switch align-self-center ms-2">
-                <input
-                  class="form-check-input"
-                  type="checkbox"
-                  id="capitalsourcesValid"
-                  v-model="validNow"
-                  @change="searchContent"
-                />
-                <label class="form-check-label" for="capitalsourcesValid">{{
-                  $t("General.validNow")
-                }}</label>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="row justify-content-md-center">
-      <div class="col-xxl-9 col-xs-12">
-        <table class="table table-striped table-bordered table-hover">
-          <thead>
-            <tr>
-              <th>{{ $t("General.name") }}</th>
-              <th>{{ $t("Capitalsource.type") }}</th>
-              <th>{{ $t("Capitalsource.state") }}</th>
-              <th>{{ $t("General.iban") }}</th>
-              <th>{{ $t("General.bic") }}</th>
-              <th>{{ $t("General.validFrom") }}</th>
-              <th>{{ $t("General.validTil") }}</th>
-              <th>{{ $t("Capitalsource.groupUse") }}</th>
-              <th>{{ $t("Capitalsource.importAllowed") }}</th>
-              <th colspan="2"></th>
-            </tr>
-          </thead>
-          <tbody>
-            <ListCapitalsourceRowVue
-              v-for="mcs in capitalsources"
-              :key="mcs.id"
-              :mcs="mcs"
-              :owner="mcs.userId === userId"
-              @delete-capitalsource="deleteCapitalsource"
-              @edit-capitalsource="editCapitalsource"
-            />
-          </tbody>
-        </table>
-      </div>
-    </div>
+    <DivFilter
+      v-model="searchString"
+      :placeholder="$t('Capitalsource.searchBy')"
+      @validNowToggled="validNowToggled"
+      @createClicked="showCreateCapitalsourceModal"
+    />
+
+    <DivContentTable>
+      <thead>
+        <tr>
+          <th>{{ $t("General.name") }}</th>
+          <th>{{ $t("Capitalsource.type") }}</th>
+          <th>{{ $t("Capitalsource.state") }}</th>
+          <th>{{ $t("General.iban") }}</th>
+          <th>{{ $t("General.bic") }}</th>
+          <th>{{ $t("General.validFrom") }}</th>
+          <th>{{ $t("General.validTil") }}</th>
+          <th>{{ $t("Capitalsource.groupUse") }}</th>
+          <th>{{ $t("Capitalsource.importAllowed") }}</th>
+          <th colspan="2"></th>
+        </tr>
+      </thead>
+      <tbody>
+        <ListCapitalsourceRowVue
+          v-for="mcs in capitalsources"
+          :key="mcs.id"
+          :mcs="mcs"
+          :owner="mcs.userId === userId"
+          @delete-capitalsource="deleteCapitalsource"
+          @edit-capitalsource="editCapitalsource"
+        />
+      </tbody>
+    </DivContentTable>
   </div>
 </template>
 
@@ -102,6 +59,8 @@ import { onMounted, ref, useTemplateRef, watch } from "vue";
 import { useCapitalsourceStore } from "@/stores/CapitalsourceStore";
 import { useUserSessionStore } from "@/stores/UserSessionStore";
 
+import DivContentTable from "@/components/DivContentTable.vue";
+import DivFilter from "@/components/DivFilter.vue";
 import CreateCapitalsourceModalVue from "@/components/capitalsource/CreateCapitalsourceModal.vue";
 import DeleteCapitalsourceModalVue from "@/components/capitalsource/DeleteCapitalsourceModal.vue";
 import ListCapitalsourceRowVue from "@/components/capitalsource/ListCapitalsourceRow.vue";
@@ -113,8 +72,11 @@ const validNow = ref(true);
 const capitalsources = ref(new Array<Capitalsource>());
 const searchString = ref("");
 
-const createCapitalsourceModalList = useTemplateRef<typeof CreateCapitalsourceModalVue>('createCapitalsourceModalList');
-const deleteModal = useTemplateRef<typeof DeleteCapitalsourceModalVue>('deleteModal');
+const createCapitalsourceModalList = useTemplateRef<
+  typeof CreateCapitalsourceModalVue
+>("createCapitalsourceModalList");
+const deleteModal =
+  useTemplateRef<typeof DeleteCapitalsourceModalVue>("deleteModal");
 
 const userId = useUserSessionStore().getUserId;
 
@@ -122,10 +84,6 @@ const capitalsourceStore = useCapitalsourceStore();
 const searchCapitalsources = capitalsourceStore.searchCapitalsources;
 const { capitalsource } = storeToRefs(capitalsourceStore);
 
-watch(capitalsource, () => {
-  searchAllContent();
-});
-
 const showCreateCapitalsourceModal = () => {
   createCapitalsourceModalList.value?._show();
 };
@@ -138,6 +96,19 @@ const editCapitalsource = (mcs: Capitalsource) => {
   createCapitalsourceModalList.value?._show(mcs);
 };
 
+watch(capitalsource, () => {
+  searchAllContent();
+});
+
+watch(searchString, () => {
+  searchContent();
+});
+
+const validNowToggled = (myValidNow: boolean) => {
+  validNow.value = myValidNow;
+  searchContent();
+};
+
 const searchAllContent = () => {
   searchString.value = "";
   searchContent();
diff --git a/src/views/contractpartner/ListContractpartners.vue b/src/views/contractpartner/ListContractpartners.vue
index 72603df..6c90dfd 100644
--- a/src/views/contractpartner/ListContractpartners.vue
+++ b/src/views/contractpartner/ListContractpartners.vue
@@ -19,78 +19,35 @@
       </div>
     </div>
 
-    <div class="row justify-content-md-center">
-      <div class="col-md-auto mb-3">
-        <div class="row">
-          <div class="col-md-auto mb-3">
-            <button
-              type="button"
-              class="btn btn-primary"
-              @click="showCreateContractpartnerModal"
-            >
-              {{ $t("General.new") }}
-            </button>
-          </div>
-          <div class="col">
-            <div class="input-group">
-              <button
-                type="button"
-                class="btn btn-primary"
-                @click="searchAllContent"
-              >
-                {{ $t("General.all") }}
-              </button>
-              <input
-                class="form-control"
-                type="text"
-                :placeholder="$t('Contractpartner.searchBy')"
-                v-model="searchString"
-                @input="searchContent"
-              />
-              <div class="form-check form-switch align-self-center ms-2">
-                <input
-                  class="form-check-input"
-                  type="checkbox"
-                  id="contractpartnersValid"
-                  v-model="validNow"
-                  @change="searchContent"
-                />
-                <label class="form-check-label" for="contractpartnersValid">{{
-                  $t("General.validNow")
-                }}</label>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="row justify-content-md-center">
-      <div class="col-xxl-9 col-xs-12">
-        <table class="table table-striped table-bordered table-hover">
-          <thead>
-            <tr>
-              <th>{{ $t("General.name") }}</th>
-              <th>{{ $t("General.validFrom") }}</th>
-              <th>{{ $t("General.validTil") }}</th>
-              <th>{{ $t("Contractpartner.moneyflowComment") }}</th>
-              <th>{{ $t("General.postingAccount") }}</th>
-              <th colspan="3"></th>
-            </tr>
-          </thead>
-          <tbody>
-            <ListContractpartnerRowVue
-              v-for="mcp in contractpartners"
-              :key="mcp.id"
-              :mcp="mcp"
-              @delete-contractpartner="deleteContractpartner"
-              @edit-contractpartner="editContractpartner"
-              @list-contractpartner-accounts="listContractpartnerAccounts"
-            />
-          </tbody>
-        </table>
-      </div>
-    </div>
+    <DivFilter
+      v-model="searchString"
+      :placeholder="$t('Contractpartner.searchBy')"
+      @validNowToggled="validNowToggled"
+      @createClicked="showCreateContractpartnerModal"
+    />
+
+    <DivContentTable>
+      <thead>
+        <tr>
+          <th>{{ $t("General.name") }}</th>
+          <th>{{ $t("General.validFrom") }}</th>
+          <th>{{ $t("General.validTil") }}</th>
+          <th>{{ $t("Contractpartner.moneyflowComment") }}</th>
+          <th>{{ $t("General.postingAccount") }}</th>
+          <th colspan="3"></th>
+        </tr>
+      </thead>
+      <tbody>
+        <ListContractpartnerRowVue
+          v-for="mcp in contractpartners"
+          :key="mcp.id"
+          :mcp="mcp"
+          @delete-contractpartner="deleteContractpartner"
+          @edit-contractpartner="editContractpartner"
+          @list-contractpartner-accounts="listContractpartnerAccounts"
+        />
+      </tbody>
+    </DivContentTable>
   </div>
 </template>
 
@@ -99,6 +56,8 @@ import { onMounted, ref, watch } from "vue";
 
 import { useContractpartnerStore } from "@/stores/ContractpartnerStore";
 
+import DivContentTable from "@/components/DivContentTable.vue";
+import DivFilter from "@/components/DivFilter.vue";
 import CreateContractpartnerModalVue from "@/components/contractpartner/CreateContractpartnerModal.vue";
 import DeleteContractpartnerModalVue from "@/components/contractpartner/DeleteContractpartnerModal.vue";
 import ListContractpartnerAccountsModal from "@/components/contractpartneraccount/ListContractpartnerAccountsModal.vue";
@@ -112,18 +71,18 @@ const validNow = ref(true);
 const contractpartners = ref(new Array<Contractpartner>());
 const searchString = ref("");
 
-const createContractpartnerModalList = useTemplateRef<typeof CreateContractpartnerModalVue>('createContractpartnerModalList');
-const deleteModal = useTemplateRef<typeof DeleteContractpartnerModalVue>('deleteModal');
-const accountsModal = useTemplateRef<typeof ListContractpartnerAccountsModal>('accountsModal');
+const createContractpartnerModalList = useTemplateRef<
+  typeof CreateContractpartnerModalVue
+>("createContractpartnerModalList");
+const deleteModal =
+  useTemplateRef<typeof DeleteContractpartnerModalVue>("deleteModal");
+const accountsModal =
+  useTemplateRef<typeof ListContractpartnerAccountsModal>("accountsModal");
 
 const contractpartnerStore = useContractpartnerStore();
 const searchContractpartners = contractpartnerStore.searchContractpartners;
 const { contractpartner } = storeToRefs(contractpartnerStore);
 
-watch(contractpartner, () => {
-  searchAllContent();
-});
-
 const showCreateContractpartnerModal = () => {
   createContractpartnerModalList.value?._show();
 };
@@ -136,6 +95,19 @@ const editContractpartner = (mcs: Contractpartner) => {
   createContractpartnerModalList.value?._show(mcs);
 };
 
+watch(contractpartner, () => {
+  searchAllContent();
+});
+
+watch(searchString, () => {
+  searchContent();
+});
+
+const validNowToggled = (myValidNow: boolean) => {
+  validNow.value = myValidNow;
+  searchContent();
+};
+
 const searchAllContent = () => {
   searchString.value = "";
   searchContent();
diff --git a/src/views/etf/ListEtfs.vue b/src/views/etf/ListEtfs.vue
index 18c4825..4f39453 100644
--- a/src/views/etf/ListEtfs.vue
+++ b/src/views/etf/ListEtfs.vue
@@ -18,86 +18,58 @@
       </div>
     </div>
 
-    <div class="row justify-content-md-center">
-      <div class="col-md-auto mb-3">
-        <div class="row">
-          <div class="col-md-auto mb-3">
-            <button
-              type="button"
-              class="btn btn-primary"
-              @click="showCreateEtfModal"
-            >
-              {{ $t("General.new") }}
-            </button>
-          </div>
-          <div class="col">
-            <div class="input-group">
-              <button
-                type="button"
-                class="btn btn-primary"
-                @click="searchAllContent"
-              >
-                {{ $t("General.all") }}
-              </button>
-              <input
-                class="form-control"
-                type="text"
-                :placeholder="$t('ETF.searchBy')"
-                v-model="searchString"
-                @input="searchContent"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+    <DivFilter
+      v-model="searchString"
+      :showValidToggle="false"
+      :placeholder="$t('ETF.searchBy')"
+      @createClicked="showCreateEtfModal"
+    />
 
     <DivError :server-errors="serverErrors" />
-    <div class="row justify-content-md-center">
-      <div class="col-xxl-8 col-xs-12">
-        <table class="table table-striped table-bordered table-hover">
-          <thead>
-            <tr>
-              <th rowspan="2" id="name">{{ $t("General.name") }}</th>
-              <th rowspan="2" id="isin">{{ $t("ETF.isin") }}</th>
-              <th rowspan="2" id="wkn">{{ $t("ETF.wkn") }}</th>
-              <th rowspan="2" id="ticker">{{ $t("ETF.ticker") }}</th>
-              <th colspan="3" id="transactionCosts">
-                {{ $t("ETFFlow.transactionCosts") }}
-              </th>
-              <th rowspan="2" id="partialTaxExemption">
-                {{ $t("ETF.partialTaxExemptionSmall") }}
-              </th>
-              <th rowspan="2" id="favorite">
-                <i class="bi bi-star-fill text-warning"></i>
-              </th>
-              <th rowspan="2" colspan="2" id="editDelete"></th>
-            </tr>
-            <tr>
-              <th id="abs">{{ $t("ETFFlow.transactionCostsAbsolute") }}</th>
-              <th id="rel">{{ $t("ETFFlow.transactionCostsRelative") }}</th>
-              <th id="max">{{ $t("ETFFlow.transactionCostsMaximum") }}</th>
-            </tr>
-          </thead>
-
-          <tbody>
-            <ListEtfRowVue
-              v-for="met in etfs"
-              :key="met.id"
-              :etf="met"
-              @edit-etf="editEtf"
-              @delete-etf="deleteEtf"
-            />
-          </tbody>
-        </table>
-      </div>
-    </div>
+
+    <DivContentTable class="col-xxl-8 col-xs-12">
+      <thead>
+        <tr>
+          <th rowspan="2" id="name">{{ $t("General.name") }}</th>
+          <th rowspan="2" id="isin">{{ $t("ETF.isin") }}</th>
+          <th rowspan="2" id="wkn">{{ $t("ETF.wkn") }}</th>
+          <th rowspan="2" id="ticker">{{ $t("ETF.ticker") }}</th>
+          <th colspan="3" id="transactionCosts">
+            {{ $t("ETFFlow.transactionCosts") }}
+          </th>
+          <th rowspan="2" id="partialTaxExemption">
+            {{ $t("ETF.partialTaxExemptionSmall") }}
+          </th>
+          <th rowspan="2" id="favorite">
+            <i class="bi bi-star-fill text-warning"></i>
+          </th>
+          <th rowspan="2" colspan="2" id="editDelete"></th>
+        </tr>
+        <tr>
+          <th id="abs">{{ $t("ETFFlow.transactionCostsAbsolute") }}</th>
+          <th id="rel">{{ $t("ETFFlow.transactionCostsRelative") }}</th>
+          <th id="max">{{ $t("ETFFlow.transactionCostsMaximum") }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <ListEtfRowVue
+          v-for="met in etfs"
+          :key="met.id"
+          :etf="met"
+          @edit-etf="editEtf"
+          @delete-etf="deleteEtf"
+        />
+      </tbody>
+    </DivContentTable>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref, useTemplateRef } from "vue";
+import { onMounted, ref, watch, useTemplateRef } from "vue";
 
+import DivContentTable from "@/components/DivContentTable.vue";
+import DivError from "@/components/DivError.vue";
+import DivFilter from "@/components/DivFilter.vue";
 import CreateEtfModalVue from "@/components/etf/CreateEtfModal.vue";
 import DeleteEtfModalVue from "@/components/etf/DeleteEtfModal.vue";
 import ListEtfRowVue from "@/components/etf/ListEtfRow.vue";
@@ -106,7 +78,6 @@ import type { Etf } from "@/model/etf/Etf";
 
 import CrudEtfService from "@/service/CrudEtfService";
 import { handleBackendError } from "@/tools/views/HandleBackendError";
-import DivError from "@/components/DivError.vue";
 
 const serverErrors = ref(new Array<string>());
 
@@ -114,7 +85,8 @@ const etfs = ref(new Array<Etf>());
 const allEtfs = ref(new Array<Etf>());
 const searchString = ref("");
 
-const createEtfModalList = useTemplateRef<typeof CreateEtfModalVue>("createEtfModalList");
+const createEtfModalList =
+  useTemplateRef<typeof CreateEtfModalVue>("createEtfModalList");
 const deleteModal = useTemplateRef<typeof DeleteEtfModalVue>("deleteModal");
 
 const showCreateEtfModal = () => {
@@ -129,10 +101,9 @@ const editEtf = (mcs: Etf) => {
   createEtfModalList.value?._show(mcs);
 };
 
-const searchAllContent = () => {
-  searchString.value = "";
+watch(searchString, () => {
   searchContent();
-};
+});
 
 const searchContent = () => {
   if (searchString.value === "") {
diff --git a/src/views/group/ListGroups.vue b/src/views/group/ListGroups.vue
index debab14..dbaf9d4 100644
--- a/src/views/group/ListGroups.vue
+++ b/src/views/group/ListGroups.vue
@@ -10,7 +10,6 @@
     id-suffix="List"
     @group-deleted="reloadView"
   />
-
   <div class="container-fluid text-center">
     <div class="row justify-content-md-center">
       <div class="col-xs-12 mb-4">
@@ -18,73 +17,45 @@
       </div>
     </div>
 
-    <div class="row justify-content-md-center">
-      <div class="col-md-auto mb-3">
-        <div class="row">
-          <div class="col-md-auto mb-3">
-            <button
-              type="button"
-              class="btn btn-primary"
-              @click="showCreateGroupModal"
-            >
-              {{ $t("General.new") }}
-            </button>
-          </div>
-          <div class="col">
-            <div class="input-group">
-              <button
-                type="button"
-                class="btn btn-primary"
-                @click="searchAllContent"
-              >
-                {{ $t("General.all") }}
-              </button>
-              <input
-                class="form-control"
-                type="text"
-                :placeholder="$t('Group.searchBy')"
-                v-model="searchString"
-                @input="searchContent"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+    <DivFilter
+      v-model="searchString"
+      :showValidToggle="false"
+      :placeholder="$t('Group.searchBy')"
+      @createClicked="showCreateGroupModal"
+    />
 
     <DivError :server-errors="serverErrors" />
-    <div class="row justify-content-md-center">
-      <div class="col-md-2 col-xs-12">
-        <table class="table table-striped table-bordered table-hover">
-          <thead>
-            <tr>
-              <th>{{ $t("General.name") }}</th>
-              <th colspan="2"></th>
-            </tr>
-          </thead>
-          <tbody>
-            <ListGroupRowVue
-              v-for="group in groups"
-              :key="group.id"
-              :group="group"
-              @edit-group="editGroup"
-              @delete-group="deleteGroup"
-            />
-          </tbody>
-        </table>
-      </div>
-    </div>
+
+    <DivContentTable class="col-md-2 col-xs-12">
+      <thead>
+        <tr>
+          <th>{{ $t("General.name") }}</th>
+          <th colspan="2"></th>
+        </tr>
+      </thead>
+      <tbody>
+        <ListGroupRowVue
+          v-for="group in groups"
+          :key="group.id"
+          :group="group"
+          @edit-group="editGroup"
+          @delete-group="deleteGroup"
+        />
+      </tbody>
+    </DivContentTable>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref, useTemplateRef } from "vue";
+import { onMounted, ref, watch, useTemplateRef } from "vue";
 
 import { handleBackendError } from "@/tools/views/HandleBackendError";
 
+import DivContentTable from "@/components/DivContentTable.vue";
+import DivError from "@/components/DivError.vue";
+import DivFilter from "@/components/DivFilter.vue";
 import CreateGroupModalVue from "@/components/group/CreateGroupModal.vue";
 import DeleteGroupModalVue from "@/components/group/DeleteGroupModal.vue";
-import DivError from "@/components/DivError.vue";
 import ListGroupRowVue from "@/components/group/ListGroupRow.vue";
 
 import type { Group } from "@/model/group/Group";
@@ -97,7 +68,9 @@ const groups = ref(new Array<Group>());
 const allGroups = ref(new Array<Group>());
 const searchString = ref("");
 
-const createGroupModalList = useTemplateRef<typeof CreateGroupModalVue>("createGroupModalList");
+const createGroupModalList = useTemplateRef<typeof CreateGroupModalVue>(
+  "createGroupModalList",
+);
 const deleteModal = useTemplateRef<typeof DeleteGroupModalVue>("deleteModal");
 
 const showCreateGroupModal = () => {
@@ -112,10 +85,9 @@ const editGroup = (mcs: Group) => {
   createGroupModalList.value?._show(mcs);
 };
 
-const searchAllContent = () => {
-  searchString.value = "";
+watch(searchString, () => {
   searchContent();
-};
+});
 
 const searchContent = () => {
   if (searchString.value === "") {
diff --git a/src/views/moneyflow/CreateMoneyflow.vue b/src/views/moneyflow/CreateMoneyflow.vue
index 46342a0..f69d41e 100644
--- a/src/views/moneyflow/CreateMoneyflow.vue
+++ b/src/views/moneyflow/CreateMoneyflow.vue
@@ -30,25 +30,23 @@
         <div class="card w-100 bg-light">
           <div class="card-body">
             <form @submit.prevent="createMoneyflow" id="createMoneyflowForm">
-              <div class="container-fluid">
-                <EditMoneyflowBase
-                  :selected-pre-def-moneyflow="selectedPreDefMoneyflow"
-                  ref="editMoneyflowVue"
-                />
-                <div class="row no-gutters flex-lg-nowrap">
-                  <div class="col-12">
-                    <button
-                      type="button"
-                      class="btn btn-secondary mx-2"
-                      @click="resetForm"
-                    >
-                      {{ $t("General.reset") }}
-                    </button>
-                    <ButtonSubmit
-                      :button-label="$t('General.save')"
-                      form-id="createMoneyflowForm"
-                    />
-                  </div>
+              <EditMoneyflowBase
+                :selected-pre-def-moneyflow="selectedPreDefMoneyflow"
+                ref="editMoneyflowVue"
+              />
+              <div class="row no-gutters flex-lg-nowrap">
+                <div class="col-12">
+                  <button
+                    type="button"
+                    class="btn btn-secondary mx-2"
+                    @click="resetForm"
+                  >
+                    {{ $t("General.reset") }}
+                  </button>
+                  <ButtonSubmit
+                    :button-label="$t('General.save')"
+                    form-id="createMoneyflowForm"
+                  />
                 </div>
               </div>
             </form>
@@ -77,7 +75,8 @@ const serverErrors = ref(new Array<string>());
 const preDefMoneyflows = ref(new Array<PreDefMoneyflow>());
 const preDefMoneyflowId = ref(0);
 const selectedPreDefMoneyflow = ref(undefined as PreDefMoneyflow | undefined);
-const editMoneyflowVue = useTemplateRef<typeof EditMoneyflowBase>("editMoneyflowVue");
+const editMoneyflowVue =
+  useTemplateRef<typeof EditMoneyflowBase>("editMoneyflowVue");
 
 const { handleSubmit, values, setFieldTouched } = useForm();
 
diff --git a/src/views/postingaccount/ListPostingAccounts.vue b/src/views/postingaccount/ListPostingAccounts.vue
index 0677b58..74028f9 100644
--- a/src/views/postingaccount/ListPostingAccounts.vue
+++ b/src/views/postingaccount/ListPostingAccounts.vue
@@ -17,61 +17,30 @@
       </div>
     </div>
 
-    <div class="row justify-content-md-center">
-      <div class="col-md-auto mb-3">
-        <div class="row">
-          <div class="col-md-auto mb-3">
-            <button
-              type="button"
-              class="btn btn-primary"
-              @click="showCreatePostingAccountModal"
-            >
-              {{ $t("General.new") }}
-            </button>
-          </div>
-          <div class="col">
-            <div class="input-group">
-              <button
-                type="button"
-                class="btn btn-primary"
-                @click="searchAllContent"
-              >
-                {{ $t("General.all") }}
-              </button>
-              <input
-                class="form-control"
-                type="text"
-                :placeholder="$t('PostingAccount.searchBy')"
-                v-model="searchString"
-                @input="searchContent"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="row justify-content-md-center">
-      <div class="col-md-3 col-xs-12">
-        <table class="table table-striped table-bordered table-hover">
-          <thead>
-            <tr>
-              <th>{{ $t("General.name") }}</th>
-              <th colspan="2"></th>
-            </tr>
-          </thead>
-          <tbody>
-            <ListPostingAccountRowVue
-              v-for="mpa in postingAccounts"
-              :key="mpa.id"
-              :mpa="mpa"
-              @delete-postingAccount="deletePostingAccount"
-              @edit-postingAccount="editPostingAccount"
-            />
-          </tbody>
-        </table>
-      </div>
-    </div>
+    <DivFilter
+      v-model="searchString"
+      :showValidToggle="false"
+      :placeholder="$t('PostingAccount.searchBy')"
+      @createClicked="showCreatePostingAccountModal"
+    />
+
+    <DivContentTable class="col-md-3 col-xs-12">
+      <thead>
+        <tr>
+          <th>{{ $t("General.name") }}</th>
+          <th colspan="2"></th>
+        </tr>
+      </thead>
+      <tbody>
+        <ListPostingAccountRowVue
+          v-for="mpa in postingAccounts"
+          :key="mpa.id"
+          :mpa="mpa"
+          @delete-postingAccount="deletePostingAccount"
+          @edit-postingAccount="editPostingAccount"
+        />
+      </tbody>
+    </DivContentTable>
   </div>
 </template>
 
@@ -80,6 +49,8 @@ import { onMounted, ref, useTemplateRef, watch } from "vue";
 
 import { usePostingAccountStore } from "@/stores/PostingAccountStore";
 
+import DivContentTable from "@/components/DivContentTable.vue";
+import DivFilter from "@/components/DivFilter.vue";
 import CreatePostingAccountModalVue from "@/components/postingaccount/CreatePostingAccountModal.vue";
 import DeletePostingAccountModalVue from "@/components/postingaccount/DeletePostingAccountModal.vue";
 import ListPostingAccountRowVue from "@/components/postingaccount/ListPostingAccountRow.vue";
@@ -90,17 +61,16 @@ import { storeToRefs } from "pinia";
 const postingAccounts = ref(new Array<PostingAccount>());
 const searchString = ref("");
 
-const createPostingAccountModalList = useTemplateRef<typeof CreatePostingAccountModalVue>("createPostingAccountModalList");
-const deleteModal = useTemplateRef<typeof DeletePostingAccountModalVue>("deleteModal");
+const createPostingAccountModalList = useTemplateRef<
+  typeof CreatePostingAccountModalVue
+>("createPostingAccountModalList");
+const deleteModal =
+  useTemplateRef<typeof DeletePostingAccountModalVue>("deleteModal");
 
 const postinAccountStore = usePostingAccountStore();
 const searchPostingAccounts = postinAccountStore.searchPostingAccounts;
 const { postingAccount } = storeToRefs(postinAccountStore);
 
-watch(postingAccount, () => {
-  searchAllContent();
-});
-
 const showCreatePostingAccountModal = () => {
   createPostingAccountModalList.value?._show();
 };
@@ -113,6 +83,14 @@ const editPostingAccount = (mcs: PostingAccount) => {
   createPostingAccountModalList.value?._show(mcs);
 };
 
+watch(postingAccount, () => {
+  searchAllContent();
+});
+
+watch(searchString, () => {
+  searchContent();
+});
+
 const searchAllContent = () => {
   searchString.value = "";
   searchContent();
diff --git a/src/views/predefmoneyflow/ListPreDefMoneyflows.vue b/src/views/predefmoneyflow/ListPreDefMoneyflows.vue
index 285d2b5..85cbdb3 100644
--- a/src/views/predefmoneyflow/ListPreDefMoneyflows.vue
+++ b/src/views/predefmoneyflow/ListPreDefMoneyflows.vue
@@ -18,76 +18,48 @@
       </div>
     </div>
 
-    <div class="row justify-content-md-center">
-      <div class="col-md-auto mb-3">
-        <div class="row">
-          <div class="col-md-auto mb-3">
-            <button
-              type="button"
-              class="btn btn-primary"
-              @click="showCreatePreDefMoneyflowModal"
-            >
-              {{ $t("General.new") }}
-            </button>
-          </div>
-          <div class="col">
-            <div class="input-group">
-              <button
-                type="button"
-                class="btn btn-primary"
-                @click="searchAllContent"
-              >
-                {{ $t("General.all") }}
-              </button>
-              <input
-                class="form-control"
-                type="text"
-                :placeholder="$t('PreDefMoneyflow.searchBy')"
-                v-model="searchString"
-                @input="searchContent"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+    <DivFilter
+      v-model="searchString"
+      :showValidToggle="false"
+      :placeholder="$t('PreDefMoneyflow.searchBy')"
+      @createClicked="showCreatePreDefMoneyflowModal"
+    />
 
     <DivError :server-errors="serverErrors" />
-    <div class="row justify-content-md-center">
-      <div class="col-xxl-9 col-xs-12">
-        <table class="table table-striped table-bordered table-hover">
-          <thead>
-            <tr>
-              <th>{{ $t("General.amount") }}</th>
-              <th>{{ $t("General.contractpartner") }}</th>
-              <th>{{ $t("General.comment") }}</th>
-              <th>{{ $t("General.postingAccount") }}</th>
-              <th>{{ $t("General.capitalsource") }}</th>
-              <th>{{ $t("PreDefMoneyflow.onceAMonthShort") }}</th>
-              <th>{{ $t("PreDefMoneyflow.createDate") }}</th>
-              <th>{{ $t("PreDefMoneyflow.lastUsed") }}</th>
-              <th colspan="2"></th>
-            </tr>
-          </thead>
-
-          <tbody>
-            <ListPreDefMoneyflowRowVue
-              v-for="mpm in preDefMoneyflows"
-              :key="mpm.id"
-              :mpm="mpm"
-              @edit-pre-def-moneyflow="editPreDefMoneyflow"
-              @delete-pre-def-moneyflow="deletePreDefMoneyflow"
-            />
-          </tbody>
-        </table>
-      </div>
-    </div>
+
+    <DivContentTable>
+      <thead>
+        <tr>
+          <th>{{ $t("General.amount") }}</th>
+          <th>{{ $t("General.contractpartner") }}</th>
+          <th>{{ $t("General.comment") }}</th>
+          <th>{{ $t("General.postingAccount") }}</th>
+          <th>{{ $t("General.capitalsource") }}</th>
+          <th>{{ $t("PreDefMoneyflow.onceAMonthShort") }}</th>
+          <th>{{ $t("PreDefMoneyflow.createDate") }}</th>
+          <th>{{ $t("PreDefMoneyflow.lastUsed") }}</th>
+          <th colspan="2"></th>
+        </tr>
+      </thead>
+      <tbody>
+        <ListPreDefMoneyflowRowVue
+          v-for="mpm in preDefMoneyflows"
+          :key="mpm.id"
+          :mpm="mpm"
+          @edit-pre-def-moneyflow="editPreDefMoneyflow"
+          @delete-pre-def-moneyflow="deletePreDefMoneyflow"
+        />
+      </tbody>
+    </DivContentTable>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref } from "vue";
+import { onMounted, ref, watch, useTemplateRef } from "vue";
 
+import DivContentTable from "@/components/DivContentTable.vue";
+import DivError from "@/components/DivError.vue";
+import DivFilter from "@/components/DivFilter.vue";
 import CreatePreDefMoneyflowModalVue from "@/components/predefmoneyflow/CreatePreDefMoneyflowModal.vue";
 import DeletePreDefMoneyflowModalVue from "@/components/predefmoneyflow/DeletePreDefMoneyflowModal.vue";
 import ListPreDefMoneyflowRowVue from "@/components/predefmoneyflow/ListPreDefMoneyflowRow.vue";
@@ -96,8 +68,6 @@ import type { PreDefMoneyflow } from "@/model/moneyflow/PreDefMoneyflow";
 
 import PreDefMoneyflowService from "@/service/PreDefMoneyflowService";
 import { handleBackendError } from "@/tools/views/HandleBackendError";
-import DivError from "@/components/DivError.vue";
-import { useTemplateRef } from "vue";
 
 const serverErrors = ref(new Array<string>());
 
@@ -105,8 +75,11 @@ const preDefMoneyflows = ref(new Array<PreDefMoneyflow>());
 const allPreDefMoneyflows = ref(new Array<PreDefMoneyflow>());
 const searchString = ref("");
 
-const createPreDefMoneyflowModalList = useTemplateRef<typeof CreatePreDefMoneyflowModalVue>("createPreDefMoneyflowModalList");
-const deleteModal = useTemplateRef<typeof DeletePreDefMoneyflowModalVue>("deleteModal");
+const createPreDefMoneyflowModalList = useTemplateRef<
+  typeof CreatePreDefMoneyflowModalVue
+>("createPreDefMoneyflowModalList");
+const deleteModal =
+  useTemplateRef<typeof DeletePreDefMoneyflowModalVue>("deleteModal");
 
 const showCreatePreDefMoneyflowModal = () => {
   createPreDefMoneyflowModalList.value?._show();
@@ -120,10 +93,9 @@ const editPreDefMoneyflow = (mcs: PreDefMoneyflow) => {
   createPreDefMoneyflowModalList.value?._show(mcs);
 };
 
-const searchAllContent = () => {
-  searchString.value = "";
+watch(searchString, () => {
   searchContent();
-};
+});
 
 const searchContent = () => {
   if (searchString.value === "") {
diff --git a/src/views/user/ListUsers.vue b/src/views/user/ListUsers.vue
index 590ef39..7c65fef 100644
--- a/src/views/user/ListUsers.vue
+++ b/src/views/user/ListUsers.vue
@@ -18,71 +18,44 @@
       </div>
     </div>
 
-    <div class="row justify-content-md-center">
-      <div class="col-md-auto mb-3">
-        <div class="row">
-          <div class="col-md-auto mb-3">
-            <button
-              type="button"
-              class="btn btn-primary"
-              @click="showCreateUserModal"
-            >
-              {{ $t("General.new") }}
-            </button>
-          </div>
-          <div class="col">
-            <div class="input-group">
-              <button
-                type="button"
-                class="btn btn-primary"
-                @click="searchAllContent"
-              >
-                {{ $t("General.all") }}
-              </button>
-              <input
-                class="form-control"
-                type="text"
-                :placeholder="$t('User.searchBy')"
-                v-model="searchString"
-                @input="searchContent"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+    <DivFilter
+      v-model="searchString"
+      :showValidToggle="false"
+      :placeholder="$t('User.searchBy')"
+      @createClicked="showCreateUserModal"
+    />
 
     <DivError :server-errors="serverErrors" />
-    <div class="row justify-content-md-center">
-      <div class="col-xxl-5 col-xs-12">
-        <table class="table table-striped table-bordered table-hover">
-          <thead>
-            <tr>
-              <th>{{ $t("General.name") }}</th>
-              <th>{{ $t("General.group") }}</th>
-              <th>{{ $t("User.role") }}</th>
-              <th>{{ $t("User.new") }}</th>
-              <th colspan="2"></th>
-            </tr>
-          </thead>
-          <tbody>
-            <ListUserRowVue
-              v-for="user in users"
-              :key="user.id"
-              :user="user"
-              @edit-user="editUser"
-              @delete-user="deleteUser"
-            />
-          </tbody>
-        </table>
-      </div>
-    </div>
+
+    <DivContentTable class="col-xxl-5 col-xs-12">
+      <thead>
+        <tr>
+          <th>{{ $t("General.name") }}</th>
+          <th>{{ $t("General.group") }}</th>
+          <th>{{ $t("User.role") }}</th>
+          <th>{{ $t("User.new") }}</th>
+          <th colspan="2"></th>
+        </tr>
+      </thead>
+      <tbody>
+        <ListUserRowVue
+          v-for="user in users"
+          :key="user.id"
+          :user="user"
+          @edit-user="editUser"
+          @delete-user="deleteUser"
+        />
+      </tbody>
+    </DivContentTable>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref, useTemplateRef } from "vue";
+import { onMounted, ref, watch, useTemplateRef } from "vue";
 
+import DivContentTable from "@/components/DivContentTable.vue";
+import DivError from "@/components/DivError.vue";
+import DivFilter from "@/components/DivFilter.vue";
 import CreateUserModalVue from "@/components/user/CreateUserModal.vue";
 import DeleteUserModalVue from "@/components/user/DeleteUserModal.vue";
 import ListUserRowVue from "@/components/user/ListUserRow.vue";
@@ -91,7 +64,6 @@ import type { User } from "@/model/user/User";
 
 import UserService from "@/service/UserService";
 import { handleBackendError } from "@/tools/views/HandleBackendError";
-import DivError from "@/components/DivError.vue";
 
 const serverErrors = ref(new Array<string>());
 
@@ -99,7 +71,9 @@ const users = ref(new Array<User>());
 const allUsers = ref(new Array<User>());
 const searchString = ref("");
 
-const createUserModalList = useTemplateRef<typeof CreateUserModalVue>("createUserModalList");
+const createUserModalList = useTemplateRef<typeof CreateUserModalVue>(
+  "createUserModalList",
+);
 const deleteModal = useTemplateRef<typeof DeleteUserModalVue>("deleteModal");
 
 const showCreateUserModal = () => {
@@ -114,10 +88,9 @@ const editUser = (mcs: User) => {
   createUserModalList.value?._show(mcs);
 };
 
-const searchAllContent = () => {
-  searchString.value = "";
+watch(searchString, () => {
   searchContent();
-};
+});
 
 const searchContent = () => {
   if (searchString.value === "") {