diff --git a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/ConfirmationModal/ConfirmationModal.jsx b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/ConfirmationModal/ConfirmationModal.jsx
new file mode 100644
index 00000000..784acc1f
--- /dev/null
+++ b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/ConfirmationModal/ConfirmationModal.jsx
@@ -0,0 +1,48 @@
+import React from "react";
+import { Modal, Icon, Message } from "semantic-ui-react";
+import PropTypes from "prop-types";
+
+export function ConfirmationModal({
+  header,
+  content,
+  trigger,
+  actions,
+  isOpen,
+  close,
+}) {
+  return (
+    <>
+      {trigger}
+      <Modal
+        open={isOpen}
+        onClose={close}
+        size="small"
+        closeIcon
+        closeOnDimmerClick={false}
+      >
+        <Modal.Header>{header}</Modal.Header>
+        {content && (
+          <Modal.Content>
+            <Message visible warning>
+              <p>
+                <Icon name="warning sign" /> {content}
+              </p>
+            </Message>
+          </Modal.Content>
+        )}
+        <Modal.Actions>{actions}</Modal.Actions>
+      </Modal>
+    </>
+  );
+}
+
+ConfirmationModal.propTypes = {
+  header: PropTypes.string,
+  content: PropTypes.string,
+  trigger: PropTypes.element,
+  actions: PropTypes.node,
+  isOpen: PropTypes.bool,
+  close: PropTypes.func,
+};
+
+export default ConfirmationModal;
diff --git a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/ConfirmationModal/index.js b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/ConfirmationModal/index.js
new file mode 100644
index 00000000..ccb94b1e
--- /dev/null
+++ b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/ConfirmationModal/index.js
@@ -0,0 +1,2 @@
+export * from './ConfirmationModal';
+export { default } from './ConfirmationModal';
diff --git a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/DeleteButton/DeleteButton.jsx b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/DeleteButton/DeleteButton.jsx
new file mode 100644
index 00000000..8f345779
--- /dev/null
+++ b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/DeleteButton/DeleteButton.jsx
@@ -0,0 +1,87 @@
+import React from "react";
+import { Button } from "semantic-ui-react";
+import { i18next } from "@translations/i18next";
+import {
+  useConfirmationModal,
+  useFormConfig,
+  useDepositApiClient,
+  ConfirmationModal,
+} from "@js/oarepo_ui";
+import PropTypes from "prop-types";
+
+export const DeleteButton = React.memo(
+  ({ modalMessage, modalHeader, redirectUrl }) => {
+    const {
+      isOpen: isModalOpen,
+      close: closeModal,
+      open: openModal,
+    } = useConfirmationModal();
+    const {
+      formConfig: { permissions },
+    } = useFormConfig();
+    const { values, isSubmitting, _delete, isDeleting } = useDepositApiClient();
+
+    return (
+      <>
+        {values.id && permissions?.can_delete_draft && (
+          <ConfirmationModal
+            header={modalHeader}
+            content={modalMessage}
+            isOpen={isModalOpen}
+            close={closeModal}
+            trigger={
+              <Button
+                name="delete"
+                color="red"
+                onClick={openModal}
+                icon="delete"
+                labelPosition="left"
+                content={i18next.t("Delete")}
+                type="button"
+                disabled={isSubmitting}
+                loading={isDeleting}
+                fluid
+              />
+            }
+            actions={
+              <>
+                <Button onClick={closeModal} floated="left">
+                  {i18next.t("Cancel")}
+                </Button>
+                <Button
+                  name="delete"
+                  disabled={isSubmitting}
+                  loading={isDeleting}
+                  color="red"
+                  onClick={() => {
+                    _delete(redirectUrl);
+                    closeModal();
+                  }}
+                  icon="delete"
+                  labelPosition="left"
+                  content={i18next.t("Delete")}
+                  type="button"
+                />
+              </>
+            }
+          />
+        )}
+      </>
+    );
+  }
+);
+
+DeleteButton.propTypes = {
+  modalMessage: PropTypes.string,
+  modalHeader: PropTypes.string,
+  redirectUrl: PropTypes.string,
+};
+
+DeleteButton.defaultProps = {
+  modalHeader: i18next.t("Are you sure you wish delete this draft?"),
+  modalMessage: i18next.t(
+    "If you delete the draft, the work you have done on it will be lost."
+  ),
+};
+
+export default DeleteButton;
diff --git a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/DeleteButton/index.js b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/DeleteButton/index.js
new file mode 100644
index 00000000..f0f0a3b4
--- /dev/null
+++ b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/DeleteButton/index.js
@@ -0,0 +1,2 @@
+export * from './DeleteButton';
+export { default } from './DeleteButton';
diff --git a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/FormikStateLogger/FormikStateLogger.jsx b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/FormikStateLogger/FormikStateLogger.jsx
index 574a0412..51329001 100644
--- a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/FormikStateLogger/FormikStateLogger.jsx
+++ b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/FormikStateLogger/FormikStateLogger.jsx
@@ -1,12 +1,30 @@
-import { useFormikContext } from "formik";
 import React from "react";
+import { useFormikContext } from "formik";
+import { Message } from "semantic-ui-react";
+import PropTypes from "prop-types";
 
 // component to visualize formik state on screen during development
-
-export const FormikStateLogger = () => {
+export const FormikStateLogger = ({ render = false }) => {
   const state = useFormikContext();
+  if (process.env.NODE_ENV !== "development") {
+    return;
+  }
+
+  if (render) {
+    return (
+      <Message>
+        <Message.Header>Current record state</Message.Header>
+        <pre>{JSON.stringify(state.values, null, 2)}</pre>
+      </Message>
+    );
+  }
 
   console.debug("[form state]: ", state, "\n[form values]:", state.values);
+  return <></>;
+};
 
-  return <></>
+FormikStateLogger.propTypes = {
+  render: PropTypes.bool,
 };
+
+export default FormikStateLogger;
diff --git a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/PreviewButton/PreviewButton.jsx b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/PreviewButton/PreviewButton.jsx
new file mode 100644
index 00000000..a4d23ad6
--- /dev/null
+++ b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/PreviewButton/PreviewButton.jsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { Button } from "semantic-ui-react";
+import { i18next } from "@translations/oarepo_ui/i18next";
+import { useFormikContext } from "formik";
+
+export const PreviewButton = React.memo(({ ...uiProps }) => {
+  const { handleSubmit, isSubmitting } = useFormikContext();
+  return (
+    <Button
+      name="preview"
+      disabled
+      loading={isSubmitting}
+      color="grey"
+      onClick={handleSubmit}
+      icon="eye"
+      labelPosition="left"
+      content={i18next.t("Preview")}
+      type="button"
+      {...uiProps}
+    />
+  );
+});
+
+export default PreviewButton;
diff --git a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/PreviewButton/index.js b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/PreviewButton/index.js
new file mode 100644
index 00000000..e41f0b9e
--- /dev/null
+++ b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/PreviewButton/index.js
@@ -0,0 +1,2 @@
+export * from "./PreviewButton";
+export { default } from './PreviewButton';
diff --git a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/PublishButton/PublishButton.jsx b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/PublishButton/PublishButton.jsx
new file mode 100644
index 00000000..8af82c85
--- /dev/null
+++ b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/PublishButton/PublishButton.jsx
@@ -0,0 +1,73 @@
+import React from "react";
+import { Button } from "semantic-ui-react";
+import { i18next } from "@translations/oarepo_ui/i18next";
+import {
+  useConfirmationModal,
+  useDepositApiClient,
+  ConfirmationModal,
+} from "@js/oarepo_ui";
+import PropTypes from "prop-types";
+
+export const PublishButton = React.memo(({ modalMessage, modalHeader }) => {
+  const {
+    isOpen: isModalOpen,
+    close: closeModal,
+    open: openModal,
+  } = useConfirmationModal();
+  const { isSubmitting, publish } = useDepositApiClient();
+
+  return (
+    <ConfirmationModal
+      header={modalHeader}
+      content={modalMessage}
+      isOpen={isModalOpen}
+      close={closeModal}
+      trigger={
+        <Button
+          name="publish"
+          color="green"
+          onClick={openModal}
+          icon="upload"
+          labelPosition="left"
+          content={i18next.t("Publish")}
+          type="button"
+          disabled={isSubmitting}
+          loading={isSubmitting}
+          fluid
+        />
+      }
+      actions={
+        <>
+          <Button onClick={closeModal} floated="left">
+            {i18next.t("Cancel")}
+          </Button>
+          <Button
+            name="publish"
+            disabled={isSubmitting}
+            loading={isSubmitting}
+            color="green"
+            onClick={() => {
+              publish();
+              closeModal();
+            }}
+            icon="upload"
+            labelPosition="left"
+            content={i18next.t("Publish")}
+            type="submit"
+          />
+        </>
+      }
+    />
+  );
+});
+
+PublishButton.propTypes = {
+  modalMessage: PropTypes.string,
+  modalHeader: PropTypes.string,
+};
+
+PublishButton.defaultProps = {
+  modalHeader: i18next.t("Are you sure you wish to publish this draft?"),
+};
+
+export default PublishButton;
diff --git a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/PublishButton/index.js b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/PublishButton/index.js
new file mode 100644
index 00000000..92401e08
--- /dev/null
+++ b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/PublishButton/index.js
@@ -0,0 +1,2 @@
+export * from './PublishButton';
+export { default } from './PublishButton';
diff --git a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/SaveButton/SaveButton.jsx b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/SaveButton/SaveButton.jsx
new file mode 100644
index 00000000..34f8e691
--- /dev/null
+++ b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/SaveButton/SaveButton.jsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { Button } from "semantic-ui-react";
+import { i18next } from "@translations/oarepo_ui/i18next";
+import { useDepositApiClient } from "@js/oarepo_ui";
+
+export const SaveButton = React.memo(({ ...uiProps }) => {
+  const { isSubmitting, save } = useDepositApiClient();
+  return (
+    <Button
+      name="save"
+      disabled={isSubmitting}
+      loading={isSubmitting}
+      color="grey"
+      onClick={() => save()}
+      icon="save"
+      labelPosition="left"
+      content={i18next.t("Save")}
+      type="submit"
+      {...uiProps}
+    />
+  );
+});
+
+export default SaveButton;
diff --git a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/SaveButton/index.js b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/SaveButton/index.js
new file mode 100644
index 00000000..627c1e14
--- /dev/null
+++ b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/SaveButton/index.js
@@ -0,0 +1,2 @@
+export * from './SaveButton';
+export { default } from './SaveButton';
diff --git a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/ValidateButton/ValidateButton.jsx b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/ValidateButton/ValidateButton.jsx
new file mode 100644
index 00000000..c267bfef
--- /dev/null
+++ b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/ValidateButton/ValidateButton.jsx
@@ -0,0 +1,23 @@
+import React from "react";
+import { useFormikContext } from "formik";
+import { Button } from "semantic-ui-react";
+import { i18next } from "@translations/oarepo_ui/i18next";
+
+export const ValidateButton = React.memo(() => {
+  const { isSubmitting, validateForm } = useFormikContext();
+  return (
+    <Button
+      fluid
+      disabled={isSubmitting}
+      loading={isSubmitting}
+      color="green"
+      onClick={() => validateForm()}
+      icon="check"
+      labelPosition="left"
+      content={i18next.t("Validate form")}
+      type="button"
+    />
+  );
+});
+
+export default ValidateButton;
diff --git a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/ValidateButton/index.js b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/ValidateButton/index.js
new file mode 100644
index 00000000..bd516500
--- /dev/null
+++ b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/ValidateButton/index.js
@@ -0,0 +1,2 @@
+export * from './ValidateButton';
+export { default } from './ValidateButton';
diff --git a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/index.js b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/index.js
index d4b7ad1e..1f0e0c28 100644
--- a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/index.js
+++ b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/index.js
@@ -9,3 +9,9 @@ export * from "./BaseForm";
 export * from "./FormFeedback";
 export * from "./ArrayFieldItem";
 export * from "./EDTFDatePickerField";
+export * from "./DeleteButton";
+export * from "./PreviewButton";
+export * from "./PublishButton";
+export * from "./SaveButton";
+export * from "./ValidateButton";
+export * from "./ConfirmationModal";
diff --git a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/hooks.js b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/hooks.js
index 11f6b530..9ad32a6b 100644
--- a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/hooks.js
+++ b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/hooks.js
@@ -62,12 +62,12 @@ export const useVocabularyOptions = (vocabularyType) => {
 };
 
 export const useConfirmationModal = () => {
-  const [isModalOpen, setIsModalOopen] = React.useState(false);
+  const [isOpen, setIsOpen] = React.useState(false);
 
-  const handleCloseModal = () => setIsModalOopen(false);
-  const handleOpenModal = () => setIsModalOopen(true);
+  const close = React.useCallback(() => setIsOpen(false));
+  const open = React.useCallback(() => setIsOpen(true));
 
-  return { isModalOpen, handleCloseModal, handleOpenModal };
+  return { isOpen, close, open };
 };
 
 export const useFormFieldValue = ({
@@ -166,7 +166,7 @@ export const useDepositApiClient = (
     ? new baseApiClient(createUrl, recordSerializer)
     : new OARepoDepositApiClient(createUrl, recordSerializer);
 
-  async function save(saveWithoutDisplayingValidationErrors = false) {
+  async function save (saveWithoutDisplayingValidationErrors = false) {
     let response;
 
     setSubmitting(true);
@@ -231,7 +231,7 @@ export const useDepositApiClient = (
     }
   }
 
-  async function publish() {
+  async function publish () {
     // call save and if save returns false, exit
     const saveResult = await save();
 
@@ -296,11 +296,11 @@ export const useDepositApiClient = (
     }
   }
 
-  async function read(recordUrl) {
+  async function read (recordUrl) {
     return await apiClient.readDraft({ self: recordUrl });
   }
 
-  async function _delete(redirectUrl) {
+  async function _delete (redirectUrl) {
     if (!redirectUrl)
       throw new Error(
         "You must provide url where to be redirected after deleting a draft"
@@ -358,10 +358,10 @@ export const useDepositFileApiClient = (baseApiClient) => {
     ? new baseApiClient()
     : new OARepoDepositFileApiClient();
 
-  async function read(draft) {
+  async function read (draft) {
     return await apiClient.readDraftFiles(draft);
   }
-  async function _delete(file) {
+  async function _delete (file) {
     setValues(
       _omit(values, [
         "errors",
diff --git a/oarepo_ui/theme/assets/semantic-ui/translations/oarepo_ui/messages/cs/LC_MESSAGES/translations.json b/oarepo_ui/theme/assets/semantic-ui/translations/oarepo_ui/messages/cs/LC_MESSAGES/translations.json
index d5edb164..14d5a2c2 100644
--- a/oarepo_ui/theme/assets/semantic-ui/translations/oarepo_ui/messages/cs/LC_MESSAGES/translations.json
+++ b/oarepo_ui/theme/assets/semantic-ui/translations/oarepo_ui/messages/cs/LC_MESSAGES/translations.json
@@ -62,5 +62,14 @@
     "Format: YYYY-MM-DD/YYYY-MM-DD, YYYYY-MM/YYYY/MM or YYYY/YYYY.": "Formát: RRRR-MM-DD/RRRR-MM-DD, RRRR-MM/RRRR/MM nebo RRRR/RRRR.",
     "Select date range": "Vyberte časové období",
     "Format: YYYY-MM-DD, YYYYY-MM or YYYY.": "Formát: RRRR-MM-DD, RRRR-MM nebo RRRR.",
-    "Select date": "Vyberte datum"
+    "Select date": "Vyberte datum",
+    "Save": "Uložit",
+    "Preview": "Náhled",
+    "Publish": "Publikovat",
+    "Are you sure you wish to publish this draft?": "Jste si jistý, že chcete tento koncept publikovat?",
+    "Validate form": "Zkontrolovat formulář",
+    "Delete": "Smazat",
+    "Are you sure you wish delete this draft?": "Jste si jistý, že chcete smazat tento koncept?",
+    "If you delete the draft, the work you have done on it will be lost.": "Pokud koncept smažete, práce, kterou jste na něm vykonali, bude ztracena.",
+    "Cancel": "Zrušit"
 }
\ No newline at end of file
diff --git a/setup.cfg b/setup.cfg
index bbafe5a7..e0842fe0 100644
--- a/setup.cfg
+++ b/setup.cfg
@@ -1,6 +1,6 @@
 [metadata]
 name = oarepo-ui
-version = 5.0.101
+version = 5.0.102
 description = UI module for invenio 3.5+
 long_description = file: README.md
 long_description_content_type = text/markdown