diff --git a/src/components/ModalActions/index.jsx b/src/components/ModalActions/index.jsx
new file mode 100644
index 00000000..edb348e6
--- /dev/null
+++ b/src/components/ModalActions/index.jsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Button, StatefulButton } from '@edx/paragon';
+
+import { MutationStatus } from 'data/services/lms/constants';
+import { useCloseModal } from 'hooks';
+
+const ModalActions = (props) => {
+  // const { secondary } = props;
+  const closeModal = useCloseModal();
+  const { primary } = props;
+  const secondary = props.secondary && {
+    ...props.secondary,
+    onClick: closeModal,
+  };
+  const className = 'w-100';
+  const disabledStates = [MutationStatus.loading];
+  console.log(props);
+  const genButton = (variant, btnProps) => (btnProps.state
+    ? <StatefulButton {...btnProps} {...{ className, disabledStates, variant }} />
+    : <Button {...btnProps} {...{ className, variant }} />);
+
+  return (
+    <div>
+      {secondary && genButton('outline-primary', secondary)}
+      {primary && genButton('primary', primary)}
+    </div>
+  );
+};
+const actionProps = PropTypes.shape({
+  onClick: PropTypes.func,
+  state: PropTypes.string,
+  disabledStates: PropTypes.arrayOf(PropTypes.string),
+  labels: PropTypes.objectOf(PropTypes.node),
+});
+ModalActions.defaultProps = {
+  secondary: null,
+  primary: null,
+};
+ModalActions.propTypes = {
+  secondary: actionProps,
+  primary: actionProps,
+};
+export default ModalActions;
diff --git a/src/hooks.js b/src/hooks.js
index 344de7a0..2e1c0f2d 100644
--- a/src/hooks.js
+++ b/src/hooks.js
@@ -6,6 +6,11 @@ export const nullMethod = () => ({});
 export const useActiveView = () => useLocation().pathname.split('/')[1];
 export const useIsEmbedded = () => useLocation().pathname.split('/')[2] === 'embedded';
 
+export const useCloseModal = () => {
+  const postMessage = (data) => window.parent.postMessage(data, document.referrer);
+  return () => postMessage({ type: 'plugin.modal-close' });
+};
+
 export const useOpenModal = () => {
   const postMessage = (data) => window.parent.postMessage(data, document.referrer);
   const viewUrl = useViewUrl();
diff --git a/src/views/SubmissionView/Actions.jsx b/src/views/SubmissionView/Actions.jsx
deleted file mode 100644
index e778951f..00000000
--- a/src/views/SubmissionView/Actions.jsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { ActionRow, StatefulButton } from '@edx/paragon';
-import { MutationStatus } from 'data/services/lms/constants';
-import messages from './messages';
-
-const SubmissionActions = ({
-  submitResponse,
-  saveResponse,
-}) => {
-  const { formatMessage } = useIntl();
-
-  return (
-    <ActionRow>
-      <StatefulButton
-        variant="secondary"
-        onClick={saveResponse.handler}
-        state={saveResponse.status}
-        disabledStates={[MutationStatus.loading]}
-        labels={{
-          default: formatMessage(messages.saveActionSave),
-          [MutationStatus.loading]: formatMessage(
-            messages.saveActionSaving,
-          ),
-        }}
-      />
-      <StatefulButton
-        onClick={submitResponse.handler}
-        state={submitResponse.status}
-        disabledStates={[MutationStatus.loading, MutationStatus.success]}
-        labels={{
-          [MutationStatus.idle]: formatMessage(messages.submissionActionSubmit),
-          [MutationStatus.loading]: formatMessage(
-            messages.submissionActionSubmitting,
-          ),
-          [MutationStatus.success]: formatMessage(
-            messages.submissionActionSubmitted,
-          ),
-        }}
-      />
-    </ActionRow>
-  );
-};
-
-SubmissionActions.propTypes = {
-  saveResponse: PropTypes.shape({
-    status: PropTypes.oneOf(Object.values(MutationStatus)).isRequired,
-    handler: PropTypes.func.isRequired,
-  }).isRequired,
-  submitResponse: PropTypes.shape({
-    status: PropTypes.oneOf(Object.values(MutationStatus)).isRequired,
-    handler: PropTypes.func.isRequired,
-  }).isRequired,
-};
-
-export default SubmissionActions;
diff --git a/src/views/SubmissionView/hooks.js b/src/views/SubmissionView/hooks.js
index 1c5a5ced..6da3ee39 100644
--- a/src/views/SubmissionView/hooks.js
+++ b/src/views/SubmissionView/hooks.js
@@ -1,6 +1,7 @@
 import { useCallback, useEffect } from 'react';
 
 import { StrictDict, useKeyedState } from '@edx/react-unit-test-utils';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import {
   usePageData,
   usePrompts,
@@ -12,6 +13,7 @@ import {
   useSubmitResponse, useSaveResponse, useUploadFiles, useDeleteFile,
 } from 'data/services/lms/hooks/actions';
 import { MutationStatus } from 'data/services/lms/constants';
+import messages from './messages';
 
 export const stateKeys = StrictDict({
   textResponses: 'textResponses',
@@ -87,6 +89,7 @@ const useSubmissionViewData = () => {
   const textResponses = useTextResponses();
   const uploadedFiles = useUploadedFiles();
   const { showDuringResponse } = useRubricConfig();
+  const { formatMessage } = useIntl();
 
   const submitResponseHandler = useCallback(() => {
     submitResponseMutation.mutate({
@@ -97,11 +100,25 @@ const useSubmissionViewData = () => {
 
   return {
     actionsProps: {
-      submitResponse: {
-        handler: submitResponseHandler,
-        status: submitResponseMutation.status,
+      primary: {
+        onClick: submitResponseHandler,
+        state: submitResponseMutation.status,
+        disabledStates: [MutationStatus.loading],
+        labels: {
+          [MutationStatus.idle]: formatMessage(messages.submissionActionSubmit),
+          [MutationStatus.loading]: formatMessage(messages.submissionActionSubmitting),
+          [MutationStatus.success]: formatMessage(messages.submissionActionSubmitted),
+        },
+      },
+      secondary: {
+        onClick: textResponses.saveResponse.handler,
+        state: textResponses.saveResponse.status,
+        disabledStates: [MutationStatus.loading],
+        labels: {
+          [MutationStatus.idle]: formatMessage(messages.saveActionSave),
+          [MutationStatus.loading]: formatMessage(messages.saveActionSaving),
+        },
       },
-      saveResponse: textResponses.saveResponse,
     },
     formProps: {
       textResponses: textResponses.formProps,
diff --git a/src/views/SubmissionView/index.jsx b/src/views/SubmissionView/index.jsx
index c7077fe2..95cdd123 100644
--- a/src/views/SubmissionView/index.jsx
+++ b/src/views/SubmissionView/index.jsx
@@ -1,14 +1,11 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import { Col, Row } from '@edx/paragon';
 
 import Rubric from 'components/Rubric';
-import ProgressBar from 'components/ProgressBar';
-import { useIsPageDataLoaded } from 'data/services/lms/hooks/selectors';
+import Actions from 'components/ModalActions';
 
 import Content from './Content';
-import Actions from './Actions';
 import useSubmissionViewData from './hooks';
 
 import './index.scss';
@@ -16,19 +13,17 @@ import './index.scss';
 export const SubmissionView = () => {
   const { actionsProps, formProps, showRubric } = useSubmissionViewData();
   return (
-    <>
-      <div className="assessment-content-layout mr-auto ml-auto">
-        <div className="content-wrapper">
-          <Row className="flex-nowrap m-0">
-            <Col className="p-0">
-              <Content {...formProps} />
-            </Col>
-            {showRubric && <Rubric />}
-          </Row>
-        </div>
+    <div className="assessment-content-layout mr-auto ml-auto">
+      <div className="content-wrapper">
+        <Row className="flex-nowrap m-0">
+          <Col className="p-0">
+            <Content {...formProps} />
+            <Actions {...actionsProps} />
+          </Col>
+          {showRubric && <Rubric />}
+        </Row>
       </div>
-      <Actions {...actionsProps} />
-    </>
+    </div>
   );
 };