diff --git a/public/locales/gsa-de.json b/public/locales/gsa-de.json
index 24abf6a859..5daaf66f28 100644
--- a/public/locales/gsa-de.json
+++ b/public/locales/gsa-de.json
@@ -134,6 +134,8 @@
   "Apps": "Apps",
   "Are you sure you want to delete all rows in the page of the table? This action cannot be undone.": "Möchten Sie wirklich alle Zeilen auf der Seite der Tabelle löschen? Diese Aktion kann nicht rückgängig gemacht werden.",
   "Are you sure you want to move all rows in the page of the table to the trashcan?": "Möchten Sie wirklich alle Zeilen auf der Seite der Tabelle in den Papierkorb verschieben?",
+  "Are you sure you want to empty the trash?": "Sind Sie sicher, dass Sie den Pap,ierkorb leeren möchten?",
+  "An error occurred while emptying the trash, please try again.": "Beim Leeren des Papierkorbs ist ein Fehler aufgetreten, bitte versuchen Sie es erneut.",
   "As a short-cut the following steps will be done for you:": "Als Abkürzung wird folgendes durchgeführt:",
   "As soon as the scan progress is beyond 1%, you can already jump to the scan report by clicking on the progress bar in the \"Status\" column and review the results collected so far.": "Sobald der Scanfortschritt 1 % überschritten hat, können Sie über die Statusanzeige in der Spalte \"Status\" auf der Seite \"Aufgaben\" die bereits gesammelten Ergebnisse einsehen.",
   "Ascending": "Aufsteigend",
diff --git a/src/web/components/dialog/confirmationdialog.jsx b/src/web/components/dialog/confirmationdialog.jsx
index 0dffc77cb6..72df7b0424 100644
--- a/src/web/components/dialog/confirmationdialog.jsx
+++ b/src/web/components/dialog/confirmationdialog.jsx
@@ -20,6 +20,7 @@ const ConfirmationDialogContent = ({
   close,
   rightButtonTitle,
   onResumeClick,
+  loading,
 }) => {
   const handleResume = useCallback(() => {
     if (onResumeClick) {
@@ -34,6 +35,7 @@ const ConfirmationDialogContent = ({
         rightButtonTitle={rightButtonTitle}
         onLeftButtonClick={close}
         onRightButtonClick={handleResume}
+        loading={loading}
       />
     </DialogContent>
   );
@@ -44,6 +46,7 @@ ConfirmationDialogContent.propTypes = {
   content: PropTypes.elementOrString,
   rightButtonTitle: PropTypes.string,
   onResumeClick: PropTypes.func.isRequired,
+  loading: PropTypes.bool,
 };
 
 const ConfirmationDialog = ({
@@ -53,6 +56,7 @@ const ConfirmationDialog = ({
   rightButtonTitle,
   onClose,
   onResumeClick,
+  loading,
 }) => {
   const [_] = useTranslation();
 
@@ -65,6 +69,7 @@ const ConfirmationDialog = ({
           content={content}
           rightButtonTitle={rightButtonTitle}
           onResumeClick={onResumeClick}
+          loading={loading}
         />
       )}
     </Dialog>
@@ -78,6 +83,7 @@ ConfirmationDialog.propTypes = {
   width: PropTypes.string,
   onClose: PropTypes.func.isRequired,
   onResumeClick: PropTypes.func.isRequired,
+  loading: PropTypes.bool,
 };
 
 export default ConfirmationDialog;
diff --git a/src/web/components/dialog/twobuttonfooter.jsx b/src/web/components/dialog/twobuttonfooter.jsx
index 54ce7ccac5..1c2228c23a 100644
--- a/src/web/components/dialog/twobuttonfooter.jsx
+++ b/src/web/components/dialog/twobuttonfooter.jsx
@@ -3,7 +3,6 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-
 import React from 'react';
 
 import PropTypes from 'web/utils/proptypes';
@@ -25,7 +24,7 @@ const DialogTwoButtonFooter = ({
   const [_] = useTranslation();
   leftButtonTitle = leftButtonTitle || _('Cancel');
   return (
-    <DialogFooterLayout align={['end', 'center']} shrink="0">
+    <DialogFooterLayout align={['space-between', 'center']} shrink="0">
       <Button
         data-testid="dialog-close-button"
         disabled={isLoading}
diff --git a/src/web/components/label/__tests__/__snapshots__/severityclass.jsx.snap b/src/web/components/label/__tests__/__snapshots__/severityclass.jsx.snap
deleted file mode 100644
index f1a93a458b..0000000000
--- a/src/web/components/label/__tests__/__snapshots__/severityclass.jsx.snap
+++ /dev/null
@@ -1,23 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`SeverityClassLabel tests > should render 1`] = `
-.c0 {
-  text-align: center;
-  font-weight: normal;
-  font-style: normal;
-  color: white;
-  padding: 1px;
-  display: inline-block;
-  width: 70px;
-  height: 1.5em;
-  font-size: 0.8em;
-  background-color: #C83814;
-  border-color: #C83814;
-}
-
-<div
-  class="c0"
->
-  High
-</div>
-`;
diff --git a/src/web/pages/extras/__tests__/trashcanpage.jsx b/src/web/pages/extras/__tests__/trashcanpage.jsx
new file mode 100644
index 0000000000..d4cdce5e56
--- /dev/null
+++ b/src/web/pages/extras/__tests__/trashcanpage.jsx
@@ -0,0 +1,156 @@
+/* SPDX-FileCopyrightText: 2024 Greenbone AG
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import {describe, test, expect, testing} from '@gsa/testing';
+
+import {userEvent, rendererWith, waitFor} from 'web/utils/testing';
+
+import TrashcanPage from 'web/pages/extras/trashcanpage';
+import Capabilities from 'gmp/capabilities/capabilities';
+
+/*
+ * The following is a workaround for userEvent v14 and fake timers https://github.com/testing-library/react-testing-library/issues/1197
+ */
+
+testing.useFakeTimers({
+  shouldAdvanceTime: true,
+});
+
+const gmp = {
+  trashcan: {
+    empty: testing.fn().mockResolvedValueOnce(),
+    get: testing.fn().mockReturnValue(
+      Promise.resolve({
+        data: [],
+      }),
+    ),
+  },
+  settings: {
+    manualUrl: 'http://docs.greenbone.net/GSM-Manual/gos-5/',
+  },
+  user: {
+    renewSession: testing.fn().mockReturnValue(
+      Promise.resolve({
+        data: 'foo',
+      }),
+    ),
+  },
+};
+
+const capabilities = new Capabilities(['everything']);
+
+describe('Trashcan page tests', () => {
+  test('Should render with empty trashcan button and empty out trash', async () => {
+    const {render} = rendererWith({
+      gmp,
+      capabilities,
+      store: true,
+    });
+
+    const {getByText, queryByTestId, getByRole} = render(<TrashcanPage />);
+    expect(queryByTestId('loading')).toBeVisible();
+    await waitFor(() => {
+      expect(queryByTestId('loading')).not.toBeInTheDocument();
+    });
+    const emptyTrashcanButton = getByRole('button', {
+      name: /Empty Trash/i,
+    });
+
+    userEvent.click(emptyTrashcanButton);
+    await waitFor(() => {
+      expect(
+        getByText('Are you sure you want to empty the trash?'),
+      ).toBeVisible();
+    });
+
+    const confirmButton = getByRole('button', {name: /Confirm/i});
+
+    await userEvent.click(confirmButton);
+
+    await waitFor(() => {
+      expect(gmp.trashcan.empty).toHaveBeenCalled();
+    });
+
+    testing.advanceTimersByTime(1000);
+
+    await waitFor(() => {
+      expect(confirmButton).not.toBeVisible();
+    });
+  });
+
+  test('Should render with empty trashcan button and handle error case', async () => {
+    const errorGmp = {
+      ...gmp,
+      trashcan: {
+        ...gmp.trashcan,
+        empty: testing
+          .fn()
+          .mockRejectedValue(new Error('Failed to empty trash')),
+      },
+    };
+    const {render} = rendererWith({
+      gmp: errorGmp,
+      capabilities,
+      store: true,
+    });
+
+    const {getByText, queryByTestId, getByRole} = render(<TrashcanPage />);
+    expect(queryByTestId('loading')).toBeVisible();
+    await waitFor(() => {
+      expect(queryByTestId('loading')).not.toBeInTheDocument();
+    });
+    const emptyTrashcanButton = getByRole('button', {
+      name: /Empty Trash/i,
+    });
+
+    userEvent.click(emptyTrashcanButton);
+    await waitFor(() => {
+      expect(
+        getByText('Are you sure you want to empty the trash?'),
+      ).toBeVisible();
+    });
+
+    const confirmButton = getByRole('button', {name: /Confirm/i});
+
+    await userEvent.click(confirmButton);
+
+    expect(errorGmp.trashcan.empty).toHaveBeenCalled();
+
+    expect(
+      getByText(
+        'An error occurred while emptying the trash, please try again.',
+      ),
+    ).toBeVisible();
+  });
+
+  test('Should render open and close dialog', async () => {
+    const {render} = rendererWith({
+      gmp,
+      capabilities,
+      store: true,
+    });
+
+    const {getByText, queryByTestId, getByRole} = render(<TrashcanPage />);
+    expect(queryByTestId('loading')).toBeVisible();
+    await waitFor(() => {
+      expect(queryByTestId('loading')).not.toBeInTheDocument();
+    });
+    const emptyTrashcanButton = getByRole('button', {
+      name: /Empty Trash/i,
+    });
+
+    await userEvent.click(emptyTrashcanButton);
+
+    expect(
+      getByText('Are you sure you want to empty the trash?'),
+    ).toBeVisible();
+
+    const cancelButton = getByRole('button', {name: /Cancel/i});
+
+    await userEvent.click(cancelButton);
+
+    expect(cancelButton).not.toBeVisible();
+  });
+});
diff --git a/src/web/pages/extras/trashcanpage.jsx b/src/web/pages/extras/trashcanpage.jsx
index dfe0ae1e31..1bdc141409 100644
--- a/src/web/pages/extras/trashcanpage.jsx
+++ b/src/web/pages/extras/trashcanpage.jsx
@@ -61,6 +61,7 @@ import useGmp from 'web/hooks/useGmp';
 import useUserSessionTimeout from 'web/hooks/useUserSessionTimeout';
 import useDialogNotification from 'web/components/notification/useDialogNotification';
 import DialogNotification from 'web/components/notification/dialognotification';
+import ConfirmationDialog from 'web/components/dialog/confirmationdialog';
 
 const Col = styled.col`
   width: 50%;
@@ -77,7 +78,7 @@ const ToolBarIcons = () => {
   );
 };
 
-const EmptyTrashButton = ({onClick, isLoading}) => {
+const EmptyTrashButton = ({onClick}) => {
   const [_] = useTranslation();
   const capabilities = useCapabilities();
   if (!capabilities.mayOp('empty_trashcan')) {
@@ -91,7 +92,6 @@ const EmptyTrashButton = ({onClick, isLoading}) => {
 };
 
 EmptyTrashButton.propTypes = {
-  isLoading: PropTypes.bool.isRequired,
   onClick: PropTypes.func.isRequired,
 };
 
@@ -307,7 +307,11 @@ TrashCanContentsTable.propTypes = {
 
 const TrashCan = () => {
   const gmp = useGmp();
-  const [isLoading, setLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isEmptyTrashDialogVisible, setIsEmptyTrashDialogVisible] =
+    useState(false);
+  const [isErrorEmptyingTrash, setIsErrorEmptyingTrash] = useState(false);
+  const [isEmptyingTrash, setIsEmptyingTrash] = useState(false);
   let [trash, setTrash] = useState();
   const [_] = useTranslation();
   const [, renewSession] = useUserSessionTimeout();
@@ -320,16 +324,16 @@ const TrashCan = () => {
   const handleInteraction = renewSession;
 
   const loadTrash = useCallback(() => {
-    setLoading(true);
+    setIsLoading(true);
     gmp.trashcan.get().then(
       response => {
         setTrash(response.data);
-        setLoading(false);
+        setIsLoading(false);
       },
       // eslint-disable-next-line no-shadow
       error => {
         showError(error);
-        setLoading(false);
+        setIsLoading(false);
       },
     );
   }, [gmp, showError]);
@@ -346,15 +350,38 @@ const TrashCan = () => {
     return gmp.trashcan.delete(entity).then(loadTrash).catch(showError);
   };
 
-  const handleEmpty = () => {
+  const handleEmpty = async () => {
     handleInteraction();
 
-    gmp.trashcan
-      .empty()
-      .then(() => {
-        loadTrash();
-      })
-      .catch(showError);
+    setIsEmptyingTrash(true);
+    let localIsErrorEmptyingTrash = false;
+
+    try {
+      await gmp.trashcan.empty();
+      loadTrash();
+    } catch (error) {
+      setIsErrorEmptyingTrash(true);
+      localIsErrorEmptyingTrash = true;
+    } finally {
+      setIsEmptyingTrash(false);
+
+      if (!localIsErrorEmptyingTrash) {
+        setTimeout(() => {
+          if (!isLoading && !isErrorEmptyingTrash) {
+            closeEmptyTrashDialog();
+          }
+        }, 1000);
+      }
+    }
+  };
+
+  const closeEmptyTrashDialog = () => {
+    setIsEmptyTrashDialogVisible(false);
+    setIsErrorEmptyingTrash(false);
+  };
+
+  const openEmptyTrashDialog = () => {
+    setIsEmptyTrashDialogVisible(true);
   };
 
   // load the data on initial render
@@ -385,7 +412,7 @@ const TrashCan = () => {
   );
 
   return (
-    <React.Fragment>
+    <>
       <PageTitle title={_('Trashcan')} />
       <Layout flex="column">
         <span>
@@ -398,7 +425,24 @@ const TrashCan = () => {
           onCloseClick={closeNotificationDialog}
         />
         <Section img={<TrashcanIcon size="large" />} title={_('Trashcan')} />
-        <EmptyTrashButton onClick={handleEmpty} isLoading={isLoading} />
+        <EmptyTrashButton onClick={openEmptyTrashDialog} />
+        {isEmptyTrashDialogVisible && (
+          <ConfirmationDialog
+            onClose={closeEmptyTrashDialog}
+            onResumeClick={handleEmpty}
+            content={
+              !isErrorEmptyingTrash
+                ? _('Are you sure you want to empty the trash?')
+                : _(
+                    'An error occurred while emptying the trash, please try again.',
+                  )
+            }
+            title={_('Empty Trash')}
+            rightButtonTitle={_('Confirm')}
+            loading={isEmptyingTrash || isLoading}
+            width="500px"
+          />
+        )}
         <LinkTarget id="Contents" />
         <h1>{_('Contents')}</h1>
         <Table>
@@ -568,7 +612,7 @@ const TrashCan = () => {
           </span>
         )}
       </Layout>
-    </React.Fragment>
+    </>
   );
 };