diff --git a/src/components/ProposalApplication.tsx b/src/components/ProposalApplication.tsx
index bf43619..8de4026 100644
--- a/src/components/ProposalApplication.tsx
+++ b/src/components/ProposalApplication.tsx
@@ -1,11 +1,8 @@
-import {
-  IconDefinition,
-  faFilePdf,
-  faMessage,
-} from '@fortawesome/free-regular-svg-icons'
+import { IconDefinition, faFilePdf } from '@fortawesome/free-regular-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { H2, Table } from '@uzh-bf/design-system'
+import { Button, H2, Modal, Table } from '@uzh-bf/design-system'
 import { add, format, parseISO } from 'date-fns'
+import { useState } from 'react'
 import { ProposalDetails } from 'src/types/app'
 import { IterableElement } from 'type-fest'
 import ApplicationForm from './ApplicationForm'
@@ -24,6 +21,8 @@ export default function ProposalApplication({
   const FileTypeIconMap: Record<string, IconDefinition> = {
     'application/pdf': faFilePdf,
   }
+  const [isOpen, setIsOpen] = useState(false)
+  const [updatedRow, setUpdatedRow] = useState<null | any>(null)
   if (proposalDetails?.typeKey === 'SUPERVISOR') {
     return (
       <div className="p-4">
@@ -49,75 +48,182 @@ export default function ProposalApplication({
                   {
                     label: 'Date',
                     accessor: 'createdAt',
-                    transformer: ({ row }) =>
-                      format(parseISO(row.createdAt), 'dd.MM.Y'),
-                  },
-                  {
-                    label: 'Status',
-                    accessor: 'status',
-                    sortable: true,
-                    transformer: ({ row }) => <div>{row.statusKey}</div>,
-                  },
-                  {
-                    label: 'Working Period',
-                    accessor: 'plannedStartAt',
                     sortable: true,
                     transformer: ({ row }) =>
-                      `${format(
-                        parseISO(row.plannedStartAt),
-                        'd.M.Y'
-                      )} - ${format(
-                        add(parseISO(row.plannedStartAt), { months: 6 }),
-                        'd.M.Y'
-                      )}`,
+                      format(parseISO(row.createdAt), 'dd.MM.yyyy'),
                   },
+                  // {
+                  //   label: 'Status',
+                  //   accessor: 'status',
+                  //   sortable: true,
+                  //   transformer: ({ row }) => <div>{row.statusKey}</div>,
+                  // },
                   {
-                    label: 'Name',
-                    accessor: 'fullName',
+                    label: 'Email',
+                    accessor: 'email',
                     sortable: true,
-                    transformer: ({ row }) => (
-                      <a
-                        href={`mailto:${row.email}`}
-                        target="_blank"
-                        className="flex flex-row items-center gap-2 hover:text-orange-700"
-                        rel="noreferrer"
-                      >
-                        <FontAwesomeIcon icon={faMessage} />
-                        {row.fullName}
-                      </a>
-                    ),
-                  },
-                  {
-                    label: 'Motivation',
-                    accessor: 'motivation',
-                    transformer: ({ row }) => (
-                      <div className="text-xs break-all">{row.motivation}</div>
-                    ),
                   },
                   {
-                    label: 'Attachments',
-                    accessor: 'attachments',
+                    label: 'Details',
+                    accessor: 'fullName',
                     transformer: ({ row }) => (
                       <div>
-                        {row.attachments?.map((attachment: any) => (
-                          <a
-                            href={attachment.href}
-                            target="_blank"
-                            key={attachment.id}
-                            className="hover:text-orange-700"
-                            rel="noreferrer"
-                          >
-                            <div className="flex flex-row items-center gap-2">
-                              <FontAwesomeIcon
-                                icon={FileTypeIconMap[attachment.type]}
-                              />
-                              {attachment.name}
+                        <Modal
+                          open={isOpen}
+                          trigger={
+                            <Button
+                              onClick={() => (
+                                setUpdatedRow(row), setIsOpen(true)
+                              )}
+                            >
+                              More
+                            </Button>
+                          }
+                          onClose={() => setIsOpen(false)}
+                        >
+                          <div className="p-4">
+                            <div className="md:grid md:grid-cols-2">
+                              <div>
+                                <h1 className="text-base font-bold">
+                                  Full Name:
+                                </h1>
+                                <p className="pb-2 text-base">
+                                  {updatedRow?.fullName}
+                                </p>
+                                <h1 className="text-base font-bold">Email:</h1>
+                                <p className="pb-2 text-base">
+                                  {updatedRow?.email}
+                                </p>
+                                <h1 className="text-base font-bold">
+                                  Matriculation Number:
+                                </h1>
+                                <p className="pb-2 text-base">
+                                  {updatedRow?.matriculationNumber}
+                                </p>
+                              </div>
+                              <div>
+                                <h1 className="text-base font-bold">Status:</h1>
+                                <p className="pb-2 text-base">
+                                  {updatedRow?.statusKey}
+                                </p>
+                                <h1 className="text-base font-bold">
+                                  Working Period:
+                                </h1>
+                                <p className="pb-2 text-base">
+                                  {format(
+                                    parseISO(row.plannedStartAt),
+                                    'dd.MM.Y'
+                                  )}{' '}
+                                  -{' '}
+                                  {format(
+                                    add(parseISO(row.plannedStartAt), {
+                                      months: 6,
+                                    }),
+                                    'dd.MM.Y'
+                                  )}
+                                </p>
+
+                                <h1 className="text-base font-bold">
+                                  Attachments:
+                                </h1>
+                                <div className="grid grid-cols-1 pb-2 text-base">
+                                  {updatedRow?.attachments?.map(
+                                    (attachment: any) => (
+                                      <div key={attachment.id}>
+                                        <a
+                                          href={attachment.href}
+                                          target="_blank"
+                                          className="hover:text-orange-700"
+                                          rel="noreferrer"
+                                        >
+                                          <div className="flex flex-row items-center gap-2">
+                                            <FontAwesomeIcon
+                                              icon={
+                                                FileTypeIconMap[attachment.type]
+                                              }
+                                            />
+                                            {attachment.name}
+                                          </div>
+                                        </a>
+                                      </div>
+                                    )
+                                  )}
+                                </div>
+                              </div>
+                            </div>
+                            <div>
+                              <h1 className="text-base font-bold">
+                                Motivation:
+                              </h1>
+                              <p className="pb-2 text-base">
+                                {updatedRow?.motivation}
+                              </p>
                             </div>
-                          </a>
-                        ))}
+                          </div>
+                        </Modal>
                       </div>
                     ),
                   },
+                  // {
+                  //   label: 'Working Period',
+                  //   accessor: 'plannedStartAt',
+                  //   sortable: true,
+                  //   transformer: ({ row }) =>
+                  //     `${format(
+                  //       parseISO(row.plannedStartAt),
+                  //       'd.M.Y'
+                  //     )} - ${format(
+                  //       add(parseISO(row.plannedStartAt), { months: 6 }),
+                  //       'd.M.Y'
+                  //     )}`,
+                  // },
+                  // {
+                  //   label: 'Name',
+                  //   accessor: 'fullName',
+                  //   sortable: true,
+                  //   transformer: ({ row }) => (
+                  //     <a
+                  //       href={`mailto:${row.email}`}
+                  //       target="_blank"
+                  //       className="flex flex-row items-center gap-2 hover:text-orange-700"
+                  //       rel="noreferrer"
+                  //     >
+                  //       <FontAwesomeIcon icon={faMessage} />
+                  //       {row.email}
+                  //     </a>
+                  //   ),
+                  // },
+                  // {
+                  //   label: 'Motivation',
+                  //   accessor: 'motivation',
+                  //   transformer: ({ row }) => (
+                  //     <div className="text-xs break-all">{row.motivation}</div>
+                  //   ),
+                  // },
+                  // {
+                  //   label: 'Attachments',
+                  //   accessor: 'attachments',
+                  //   transformer: ({ row }) => (
+                  //     <div>
+                  //       {row.attachments?.map((attachment: any) => (
+                  //         <a
+                  //           href={attachment.href}
+                  //           target="_blank"
+                  //           key={attachment.id}
+                  //           className="hover:text-orange-700"
+                  //           rel="noreferrer"
+                  //         >
+                  //           <div className="flex flex-row items-center gap-2">
+                  //             <FontAwesomeIcon
+                  //               icon={FileTypeIconMap[attachment.type]}
+                  //             />
+                  //             {attachment.name}
+                  //           </div>
+                  //         </a>
+                  //       ))}
+                  //     </div>
+                  //   ),
+                  // },
                 ]}
                 data={proposalDetails.applications}
               />