diff --git a/src/components/ObjectEditor.tsx b/src/components/ObjectEditor.tsx
index 17f61df64b375227cc7a5e862fda6c67e19d13db..89b9b60de66bd9025914d918658499afa591f7c0 100644
--- a/src/components/ObjectEditor.tsx
+++ b/src/components/ObjectEditor.tsx
@@ -186,7 +186,7 @@ export default function ObjectEditor<ItemT>({
             </Button>
           </ButtonGroup>
         </Stack>
-        <Stack spacing={2}>
+        <Stack spacing={1}>
           {fieldConfigs.map((fconf) => {
             const value = getNestedValue(item, fconf.name) || "";
             const error = fieldErrors.get(fconf.name);
diff --git a/src/pages/CombinedList.tsx b/src/pages/CombinedList.tsx
index 64199d80b52278fef2b56ddc8596cfed004a3f52..f8c30cf3810370bec8a30af39a1be65852d471b0 100644
--- a/src/pages/CombinedList.tsx
+++ b/src/pages/CombinedList.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { useLoaderData } from "react-router-dom";
 import {
   combinedReadCombinedPayments,
@@ -10,14 +10,14 @@ import { BasicUser, Kst, Ledger } from "../client/types.gen";
 import GenericDataTable from "../components/GenericDataTable";
 import {
   Button,
-  Checkbox,
-  FormControl,
-  InputLabel,
-  ListItemText,
-  MenuItem,
-  Select,
+  Dialog,
+  DialogContent,
+  DialogTitle,
 } from "@mui/material";
-import Index from ".";
+import EditReimbursement from "./EditReimbursement";
+import EditBills from "./EditBills";
+import EditCreditPayment from "./EditCreditPayment";
+import EditInternalTransfer from "./EditInternalTransfer";
 
 export async function addLoader() {
   const kstList = await kstsReadKsts({});
@@ -29,13 +29,93 @@ export async function addLoader() {
   return { kst, ledger, user };
 }
 
+const withWrapper =
+  (EditFunction: (id: string) => JSX.Element) =>
+  ({ propIdString, onClose }: { propIdString: string; onClose: () => void }) => {
+    const content = EditFunction(propIdString);
+
+    return (
+      <div>
+        {content}
+        <Button onClick={onClose}>Close</Button>
+      </div>
+    );
+  };
+const EditReimbursementWrapper = withWrapper(EditReimbursement);
+const EditBillsWrapper = withWrapper(EditBills);
+const EditCreditPaymentWrapper = withWrapper(EditCreditPayment);
+const EditInternalTransferWrapper = withWrapper(EditInternalTransfer);
+
 const CombinedList: React.FC = () => {
   const { kst, ledger, user } = useLoaderData() as {
     kst: Kst[];
     ledger: Ledger[];
     user: BasicUser;
   };
+
+  // State for overlay
+  const [open, setOpen] = useState(false);
+  const [editContent, setEditContent] = useState<React.ReactNode | null>(null);
+
+  const handleClose = () => {
+    setOpen(false);
+    setEditContent(null);
+  };
+
+  const handleEdit = (type: string, itemId: string) => {
+    let content;
+    console.log(itemId);
+    switch (type) {
+      case "Reimbursement":
+        content = (
+          <EditReimbursementWrapper
+            propIdString={itemId}
+            onClose={handleClose}
+          />
+        );
+        break;
+      case "Bill":
+        content = (
+          <EditBillsWrapper
+            propIdString={itemId}
+            onClose={handleClose}
+          />
+        );
+        break;
+      case "CreditPayment":
+        content = (
+          <EditCreditPaymentWrapper
+            propIdString={itemId}
+            onClose={handleClose}
+          />
+        );
+        break;
+      case "InternalTransfer":
+        content = (
+          <EditInternalTransferWrapper
+            propIdString={itemId}
+            onClose={handleClose}
+          />
+        );
+        break;
+      default:
+        content = <div>Unknown Type</div>;
+        break;
+    }
+    setEditContent(content);
+    setOpen(true);
+  };
+
   const columns = [
+    {
+      name: "type",
+      label: "Type",
+      options: {
+        filterType: "checkbox",
+        filterOptions: ["Reimbursement", "Bill", "CreditPayment", "InternalTransfer"],
+      },
+    },
+    { name: "id", label: "ID" },
     { name: "name", label: "Name" },
     { name: "creditor__amount", label: "Amount" },
     {
@@ -52,23 +132,34 @@ const CombinedList: React.FC = () => {
     { name: "creditor__currency", label: "Currency" },
     { name: "reciept", label: "Receipt" },
     { name: "creator", label: "Creator" },
-    {
-      name: "type",
-      label: "Type",
-      options: {
-        filterType: "checkbox",
-        filterOptions: ["Reimbursement", "Bill", "CreditPayment"],
-      },
-    },
-    { name: "id", label: "ID" },
+    
     { name: "reference", label: "Reference" },
     { name: "iban", label: "IBAN" },
     { name: "comment", label: "Comment" },
     { name: "reimbursement__recipient", label: "Recipient" },
-    { name: "edit", label: "edit", options: { filter: false, sort: false } },
+    {
+      name: "edit",
+      label: "Edit",
+      options: {
+        filter: false,
+        sort: false,
+        customBodyRender: (value: any, tableMeta: any) => {
+          const itemType = tableMeta.rowData[0]; // Assuming "type" is column 9
+          const itemId = tableMeta.rowData[1]; // Assuming "id" is column 10
+          return (
+            <Button
+              variant="contained"
+              color="primary"
+              onClick={() => handleEdit(itemType, itemId)}
+            >
+              Edit
+            </Button>
+          );
+        },
+      },
+    },
   ];
 
-  // Define the data fetching function for Credit Payments
   const fetchCombinedPayments = async ({
     search,
     sort,
@@ -84,13 +175,10 @@ const CombinedList: React.FC = () => {
       ...filters,
     };
 
-    console.log("Fetching Credit Payments with:", body);
-
     try {
       const response = await combinedReadCombinedPayments({ query: body });
       const results = response.data?.items || [];
 
-      // Transform the fetched data to match the table's columns
       const transformedData = results.map((item: any) => ({
         name: item.name,
         creditor__amount: item.creditor?.amount,
@@ -111,16 +199,7 @@ const CombinedList: React.FC = () => {
         reference: item.reference,
         iban: item.iban,
         comment: item.comment,
-        recipient: item.reimbursement__recipient,
-        edit: (
-          <Button
-            variant="contained"
-            color="primary"
-            href={`/${item.type}/${item.id}`}
-          >
-            Edit
-          </Button>
-        ),
+        reimbursement__recipient: item.reimbursement__recipient,
       }));
 
       return transformedData;
@@ -131,11 +210,17 @@ const CombinedList: React.FC = () => {
   };
 
   return (
-    <GenericDataTable
-      title="Combined Payments List"
-      columns={columns}
-      fetchData={fetchCombinedPayments}
-    />
+    <>
+      <GenericDataTable
+        title="Combined Payments List"
+        columns={columns}
+        fetchData={fetchCombinedPayments}
+      />
+      <Dialog open={open} onClose={handleClose} maxWidth="md" fullWidth>
+        <DialogTitle>Edit Item</DialogTitle>
+        <DialogContent>{editContent}</DialogContent>
+      </Dialog>
+    </>
   );
 };
 
diff --git a/src/pages/EditBills.tsx b/src/pages/EditBills.tsx
index 171b8254d07f4cd780dcc60c1630735264ab2599..9a30e2a00c7ff3cb3b0cebe7c2772584b7bfb654 100644
--- a/src/pages/EditBills.tsx
+++ b/src/pages/EditBills.tsx
@@ -75,8 +75,9 @@ function generateFieldConfigs(
   ];
 }
 
-export default function EditBills() {
-  const { idstring } = useParams<{ idstring: string }>(); // Get ID from URL params
+export default function EditBills(propIdString: string ) {
+  const { idstring: urlidstring } = useParams<{ idstring: string }>(); 
+  const idstring = urlidstring || propIdString;
   const { kst, ledger, user } = useLoaderData() as {
     kst: Kst[];
     ledger: Ledger[];
diff --git a/src/pages/EditCreditPayment.tsx b/src/pages/EditCreditPayment.tsx
index 77ffec048644058f6b8af913c41255bde6ffbc33..3e1cb61bc8d62bfd3ce9212402cca9ca38738412 100644
--- a/src/pages/EditCreditPayment.tsx
+++ b/src/pages/EditCreditPayment.tsx
@@ -60,8 +60,9 @@ function generateFieldConfigs(
   ];
 }
 
-export default function EditCreditPayment() {
-  const { idstring } = useParams<{ idstring: string }>(); // Get ID from URL params
+export default function EditCreditPayment(propIdString: string = "") {
+  const { idstring: urlidstring } = useParams<{ idstring: string }>(); 
+  const idstring = urlidstring || propIdString;
   const { kst, ledger, user } = useLoaderData() as {
     kst: Kst[];
     ledger: Ledger[];
diff --git a/src/pages/EditInternalTransfer.tsx b/src/pages/EditInternalTransfer.tsx
index acf570f5d58d02c07fb0fbcd258b2615e8415af9..8c9fbbb169452cce8c6ee1a368dae2012fc97a5b 100644
--- a/src/pages/EditInternalTransfer.tsx
+++ b/src/pages/EditInternalTransfer.tsx
@@ -46,8 +46,9 @@ function generateFieldConfigs(
   ];
 }
 
-export default function EditInternalTransfers() {
-  const { idstring } = useParams<{ idstring: string }>(); // Get ID from URL params
+export default function EditInternalTransfers(propIdString: string = "") {
+  const { idstring: urlidstring } = useParams<{ idstring: string }>(); 
+  const idstring = urlidstring || propIdString;
   const { kst, ledger, user } = useLoaderData() as {
     kst: Kst[];
     ledger: Ledger[];
diff --git a/src/pages/EditReimbursement.tsx b/src/pages/EditReimbursement.tsx
index 2306467f5f38bf598a5f63511066a8705b96dbed..3229887a98d993c24ded0fea47c3942cc3be9b51 100644
--- a/src/pages/EditReimbursement.tsx
+++ b/src/pages/EditReimbursement.tsx
@@ -48,8 +48,9 @@ function generateFieldConfigs(
   ];
 }
 
-export default function EditReimbursement() {
-  const { idstring } = useParams<{ idstring: string }>(); // Get ID from URL params
+export default function EditReimbursement(propIdString: string ) {
+  const { idstring: urlidstring } = useParams<{ idstring: string }>(); 
+  const idstring = urlidstring || propIdString;
   const { kst, ledger, user } = useLoaderData() as {
     kst: Kst[];
     ledger: Ledger[];
@@ -86,7 +87,7 @@ export default function EditReimbursement() {
           recipient: data?.recipient || "",
         });
       } catch (error) {
-        console.error("Failed to load credit payment data:", error);
+        console.error("Failed to load Reimbursement data:", error);
       } finally {
         setLoading(false);
       }
diff --git a/src/pages/UncheckedPayments.tsx b/src/pages/UncheckedPayments.tsx
index ae7e5cb07450cd2de37659dcd1e0247389e5647b..ef9798b7d24dfbc99282f4441948b100cac74514 100644
--- a/src/pages/UncheckedPayments.tsx
+++ b/src/pages/UncheckedPayments.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { useLoaderData } from "react-router-dom";
 import {
   combinedReadCombinedPayments,
@@ -19,15 +19,15 @@ import { BasicUser, CombinedCreditor, Kst, Ledger } from "../client/types.gen";
 import GenericDataTable from "../components/GenericDataTable";
 import {
   Button,
-  Checkbox,
-  FormControl,
-  InputLabel,
-  ListItemText,
-  MenuItem,
-  Select,
+  Dialog,
+  DialogContent,
+  DialogTitle,
 } from "@mui/material";
-import Index from ".";
-import { BillPublic_InputSchema } from "../client";
+import EditReimbursement from "./EditReimbursement";
+import EditBills from "./EditBills";
+import EditCreditPayment from "./EditCreditPayment";
+import EditInternalTransfer from "./EditInternalTransfer";
+
 
 export async function addLoader() {
   const kstList = await kstsReadKsts({});
@@ -39,13 +39,98 @@ export async function addLoader() {
   return { kst, ledger, user };
 }
 
+const withWrapper =
+  (EditFunction: (id: string) => JSX.Element) =>
+  ({ propIdString, onClose }: { propIdString: string; onClose: () => void }) => {
+    const content = EditFunction(propIdString);
+
+    return (
+      <div>
+        {content}
+        <Button onClick={onClose}>Close</Button>
+      </div>
+    );
+  };
+const EditReimbursementWrapper = withWrapper(EditReimbursement);
+const EditBillsWrapper = withWrapper(EditBills);
+const EditCreditPaymentWrapper = withWrapper(EditCreditPayment);
+const EditInternalTransferWrapper = withWrapper(EditInternalTransfer);
+
 const CombinedList: React.FC = () => {
   const { kst, ledger, user } = useLoaderData() as {
     kst: Kst[];
     ledger: Ledger[];
     user: BasicUser;
   };
+
+    // State for overlay
+    const [open, setOpen] = useState(false);
+    const [editContent, setEditContent] = useState<React.ReactNode | null>(null);
+  
+    const handleClose = () => {
+      setOpen(false);
+      setEditContent(null);
+    };
+  
+    const handleEdit = (type: string, itemId: string) => {
+      let content;
+      console.log(itemId);
+      switch (type) {
+        case "Reimbursement":
+          content = (
+            <EditReimbursementWrapper
+              propIdString={itemId}
+              onClose={handleClose}
+            />
+          );
+          break;
+        case "Bill":
+          content = (
+            <EditBillsWrapper
+              propIdString={itemId}
+              onClose={handleClose}
+            />
+          );
+          break;
+        case "CreditPayment":
+          content = (
+            <EditCreditPaymentWrapper
+              propIdString={itemId}
+              onClose={handleClose}
+            />
+          );
+          break;
+        case "InternalTransfer":
+          content = (
+            <EditInternalTransferWrapper
+              propIdString={itemId}
+              onClose={handleClose}
+            />
+          );
+          break;
+        default:
+          content = <div>Unknown Type</div>;
+          break;
+      }
+      setEditContent(content);
+      setOpen(true);
+    };
+
   const columns = [
+    {
+      name: "type",
+      label: "Type",
+      options: {
+        filterType: "checkbox",
+        filterOptions: [
+          "Reimbursement",
+          "Bill",
+          "CreditPayment",
+          "InternalTransfer",
+        ],
+      },
+    },
+    { name: "id", label: "ID" },
     { name: "name", label: "Name" },
     { name: "creditor__amount", label: "Amount" },
     {
@@ -62,26 +147,33 @@ const CombinedList: React.FC = () => {
     { name: "creditor__currency", label: "Currency" },
     { name: "reciept", label: "Receipt" },
     { name: "creator", label: "Creator" },
-    {
-      name: "type",
-      label: "Type",
-      options: {
-        filterType: "checkbox",
-        filterOptions: [
-          "Reimbursement",
-          "Bill",
-          "CreditPayment",
-          "InternalTransfer",
-        ],
-      },
-    },
-    { name: "id", label: "ID" },
+
     { name: "reference", label: "Reference" },
     { name: "iban", label: "IBAN" },
     { name: "comment", label: "Comment" },
     { name: "reimbursement__recipient", label: "Recipient" },
     { name: "check", label: "Check" },
-    { name: "edit", label: "edit", options: { filter: false, sort: false } },
+        {
+          name: "edit",
+          label: "Edit",
+          options: {
+            filter: false,
+            sort: false,
+            customBodyRender: (value: any, tableMeta: any) => {
+              const itemType = tableMeta.rowData[0]; // Assuming "type" is column 9
+              const itemId = tableMeta.rowData[1]; // Assuming "id" is column 10
+              return (
+                <Button
+                  variant="contained"
+                  color="primary"
+                  onClick={() => handleEdit(itemType, itemId)}
+                >
+                  Edit
+                </Button>
+              );
+            },
+          },
+      },
   ];
 
   // Define the data fetching function for Credit Payments
@@ -257,11 +349,17 @@ const CombinedList: React.FC = () => {
   };
 
   return (
-    <GenericDataTable
-      title="Combined Payments List"
-      columns={columns}
-      fetchData={fetchCombinedPayments}
-    />
+    <>
+      <GenericDataTable
+        title="Combined Payments List"
+        columns={columns}
+        fetchData={fetchCombinedPayments}
+      />
+      <Dialog open={open} onClose={handleClose} maxWidth="md" fullWidth>
+        <DialogTitle>Edit Item</DialogTitle>
+        <DialogContent>{editContent}</DialogContent>
+      </Dialog>
+    </>
   );
 };