diff --git a/src/shared/components/SubmissionManagement/Icons/IconZoom.svg b/src/shared/components/SubmissionManagement/Icons/IconZoom.svg
new file mode 100644
index 0000000000..30f678532e
--- /dev/null
+++ b/src/shared/components/SubmissionManagement/Icons/IconZoom.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2ZM0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8C16 9.84871 15.3729 11.551 14.3199 12.9056L19.7071 18.2929C20.0976 18.6834 20.0976 19.3166 19.7071 19.7071C19.3166 20.0976 18.6834 20.0976 18.2929 19.7071L12.9056 14.3199C11.551 15.3729 9.84871 16 8 16C3.58172 16 0 12.4183 0 8ZM8 4C8.55228 4 9 4.44772 9 5V7H11C11.5523 7 12 7.44772 12 8C12 8.55228 11.5523 9 11 9H9V11C9 11.5523 8.55228 12 8 12C7.44772 12 7 11.5523 7 11V9H5C4.44772 9 4 8.55228 4 8C4 7.44772 4.44772 7 5 7H7V5C7 4.44772 7.44772 4 8 4Z" fill="#137D60"/>
+</svg>
diff --git a/src/shared/components/Tooltip/style.scss b/src/shared/components/Tooltip/style.scss
index 651af0c2ae..3849c4b600 100644
--- a/src/shared/components/Tooltip/style.scss
+++ b/src/shared/components/Tooltip/style.scss
@@ -13,6 +13,12 @@
     padding: 0;
   }
 
+  .toolTipPadding {
+    .rc-tooltip-inner {
+      padding: 8px 10px;
+    }
+  }
+
   .rc-tooltip-arrow {
     background: url(assets/images/tooltip-arrow.svg);
     width: 30px;
diff --git a/src/shared/components/challenge-detail/MySubmissions/SubmissionsDetail/index.jsx b/src/shared/components/challenge-detail/MySubmissions/SubmissionsDetail/index.jsx
index cc5afe0578..71ca8c6fea 100644
--- a/src/shared/components/challenge-detail/MySubmissions/SubmissionsDetail/index.jsx
+++ b/src/shared/components/challenge-detail/MySubmissions/SubmissionsDetail/index.jsx
@@ -7,10 +7,10 @@ import PT from 'prop-types';
 import _ from 'lodash';
 import cn from 'classnames';
 import sortList from 'utils/challenge-detail/sort';
+import Tooltip from 'components/Tooltip';
+import IconClose from 'assets/images/icon-close-green.svg';
 
 import ArrowDown from '../../../../../assets/images/arrow-down.svg';
-import IconComplete from '../../icons/completed.svg';
-import IconQueued from '../../icons/queued.svg';
 import IconFail from '../../icons/failed.svg';
 import './styles.scss';
 
@@ -85,7 +85,7 @@ class SubmissionsDetailView extends React.Component {
    */
   updateSortedSubmissions() {
     const { submission: { review } } = this.props;
-    const sortedSubmissions = _.cloneDeep(review);
+    const sortedSubmissions = _.cloneDeep(review || []);
     this.sortSubmissions(sortedSubmissions);
     this.setState({ sortedSubmissions });
   }
@@ -158,220 +158,225 @@ class SubmissionsDetailView extends React.Component {
     }
     return (
       <div styleName="wrapper">
-        <div styleName="table-header table-row">
-          <button onClick={onCancel} type="button" styleName="btn-back">
-            <ArrowDown styleName="back-icon" />
-            <span> My Submissions</span>
-          </button>
-          <div styleName="table-title">
-            <span>Submission Details: </span>
-            <span styleName="title-detail">{submission.id} ({submission.submissionId})</span>
+        <div styleName="header">
+          <h2 styleName="title">Submission Details</h2>
+          <div styleName="icon" role="presentation" onClick={() => onCancel()}>
+            <IconClose />
           </div>
         </div>
-        <div styleName="table-tabs table-row">
-          <div styleName="tab-item tab-item-selected">
-            <span>Review Summary</span>
-          </div>
-          <div styleName="tab-item">
-            <span>Artifacts</span>
+        <hr styleName="hr" />
+        <div styleName="inner-content">
+          <div styleName="sub-header">
+            <span>Submission: </span>
+            <span styleName="title-detail">{submission.id} ({submission.submissionId})</span>
           </div>
-        </div>
-        <div styleName="table-row table-content-header">
-          <div
-            styleName={cn(
-              'table-column column-1',
-              {
-                'is-highlight': field === 'Review Type',
-              },
-            )}
-          >
-            <button
-              type="button"
-              styleName="header-sort"
-              onClick={() => {
-                onSortChange({
-                  field: 'Review Type',
-                  sort: (field === 'Review Type') ? revertSort : 'desc',
-                });
-              }}
+          <div styleName="table-row table-content-header">
+            <div
+              styleName={cn(
+                'table-column column-1',
+              )}
             >
-              <span>Review Type</span>
-              <div
-                styleName={cn(
-                  'col-arrow',
-                  {
-                    'col-arrow-sort-asc': (field === 'Review Type') && (sort === 'asc'),
-                    'col-arrow-is-sorting': field === 'Review Type',
-                  },
-                )}
-              ><ArrowDown />
-              </div>
-            </button>
-          </div>
-          <div
-            styleName={cn(
-              'table-column',
-              {
-                'is-highlight': field === 'Reviewer',
-              },
-            )}
-          >
-            <button
-              type="button"
-              styleName="header-sort"
-              onClick={() => {
-                onSortChange({
-                  field: 'Reviewer',
-                  sort: (field === 'Reviewer') ? revertSort : 'desc',
-                });
-              }}
+              <button
+                type="button"
+                styleName="header-sort"
+                onClick={() => {
+                  onSortChange({
+                    field: 'Review Type',
+                    sort: (field === 'Review Type') ? revertSort : 'desc',
+                  });
+                }}
+              >
+                <span>Review Type</span>
+                {
+                  field === 'Review Type' && (
+                    <div
+                      styleName={cn(
+                        'col-arrow',
+                        'col-arrow-is-sorting',
+                        {
+                          'col-arrow-sort-asc': (sort === 'asc'),
+                        },
+                      )}
+                    ><ArrowDown />
+                    </div>
+                  )
+                }
+              </button>
+            </div>
+            <div
+              styleName={cn(
+                'table-column',
+              )}
             >
-              <span>Reviewer</span>
-              <div
-                styleName={cn(
-                  'col-arrow',
-                  {
-                    'col-arrow-sort-asc': (field === 'Reviewer') && (sort === 'asc'),
-                    'col-arrow-is-sorting': field === 'Reviewer',
-                  },
-                )}
-              ><ArrowDown />
-              </div>
-            </button>
-          </div>
-          <div
-            styleName={cn(
-              'table-column',
-              {
-                'is-highlight': field === 'Score',
-              },
-            )}
-          >
-            <button
-              type="button"
-              styleName="header-sort"
-              onClick={() => {
-                onSortChange({
-                  field: 'Score',
-                  sort: (field === 'Score') ? revertSort : 'desc',
-                });
-              }}
+              <button
+                type="button"
+                styleName="header-sort"
+                onClick={() => {
+                  onSortChange({
+                    field: 'Reviewer',
+                    sort: (field === 'Reviewer') ? revertSort : 'desc',
+                  });
+                }}
+              >
+                <span>Reviewer</span>
+                {
+                  field === 'Reviewer' && (
+                    <div
+                      styleName={cn(
+                        'col-arrow',
+                        'col-arrow-is-sorting',
+                        {
+                          'col-arrow-sort-asc': (sort === 'asc'),
+                        },
+                      )}
+                    ><ArrowDown />
+                    </div>
+                  )
+                }
+              </button>
+            </div>
+            <div
+              styleName={cn(
+                'table-column',
+              )}
             >
-              <span>Score</span>
-              <div
-                styleName={cn(
-                  'col-arrow',
-                  {
-                    'col-arrow-sort-asc': (field === 'Score') && (sort === 'asc'),
-                    'col-arrow-is-sorting': field === 'Score',
-                  },
-                )}
-              ><ArrowDown />
-              </div>
-            </button>
-          </div>
-          <div
-            styleName={cn(
-              'table-column',
-              {
-                'is-highlight': field === 'Status',
-              },
-            )}
-          >
-            <button
-              type="button"
-              styleName="header-sort"
-              onClick={() => {
-                onSortChange({
-                  field: 'Status',
-                  sort: (field === 'Status') ? revertSort : 'desc',
-                });
-              }}
+              <button
+                type="button"
+                styleName="header-sort"
+                onClick={() => {
+                  onSortChange({
+                    field: 'Score',
+                    sort: (field === 'Score') ? revertSort : 'desc',
+                  });
+                }}
+              >
+                <span>Score</span>
+                {
+                  field === 'Score' && (
+                    <div
+                      styleName={cn(
+                        'col-arrow',
+                        'col-arrow-is-sorting',
+                        {
+                          'col-arrow-sort-asc': (sort === 'asc'),
+                        },
+                      )}
+                    ><ArrowDown />
+                    </div>
+                  )
+                }
+              </button>
+            </div>
+            <div
+              styleName={cn(
+                'table-column',
+              )}
             >
-              <span>Status</span>
-              <div
-                styleName={cn(
-                  'col-arrow',
-                  {
-                    'col-arrow-sort-asc': (field === 'Status') && (sort === 'asc'),
-                    'col-arrow-is-sorting': field === 'Status',
-                  },
-                )}
-              ><ArrowDown />
-              </div>
-            </button>
+              <button
+                type="button"
+                styleName="header-sort"
+                onClick={() => {
+                  onSortChange({
+                    field: 'Status',
+                    sort: (field === 'Status') ? revertSort : 'desc',
+                  });
+                }}
+              >
+                <span>Status</span>
+                {
+                  field === 'Status' && (
+                    <div
+                      styleName={cn(
+                        'col-arrow',
+                        'col-arrow-is-sorting',
+                        {
+                          'col-arrow-sort-asc': (sort === 'asc'),
+                        },
+                      )}
+                    ><ArrowDown />
+                    </div>
+                  )
+                }
+              </button>
+            </div>
           </div>
-        </div>
-        {
-          sortedSubmissions.map((review) => {
-            let { score } = review;
-            if (_.isNumber(score)) {
-              if (score > 0) {
-                score = score.toFixed(2);
+          {
+            sortedSubmissions.map((review) => {
+              let { score } = review;
+              if (_.isNumber(score)) {
+                if (score > 0) {
+                  score = score.toFixed(2);
+                }
+              } else {
+                score = '-';
               }
-            } else {
-              score = '-';
-            }
-            return (
-              <div key={review.id} styleName="table-row">
-                <div
-                  styleName={cn(
-                    'table-column column-1',
-                    {
-                      'is-highlight': field === 'Review Type',
-                    },
-                  )}
-                >
-                  <span>{this.getReviewName(review)}</span>
-                </div>
-                <div
-                  styleName={cn(
-                    'table-column',
-                    {
-                      'is-highlight': field === 'Reviewer',
-                    },
-                  )}
-                >
-                  <span>TC System</span>
-                </div>
-                <div
-                  styleName={cn(
-                    'table-column',
-                    {
-                      'is-highlight': field === 'Score',
-                    },
-                  )}
-                >
-                  {(score < 0) ? (<IconFail />) : (<span>{score}</span>)}
-                </div>
-                <div
-                  styleName={cn(
-                    'table-column',
-                    {
-                      'is-highlight': field === 'Status',
-                    },
-                  )}
-                >
-                  {(review.status === 'completed') ? (
-                    <IconComplete />
-                  ) : (<IconFail />)}
+              return (
+                <div key={review.id} styleName="table-row">
+                  <div
+                    styleName={cn(
+                      'table-column column-1',
+                    )}
+                  >
+                    <div styleName="mobile-header">Review Type</div>
+                    <span>{this.getReviewName(review)}</span>
+                  </div>
+                  <div
+                    styleName={cn(
+                      'table-column',
+                    )}
+                  >
+                    <div styleName="mobile-header">Reviewer</div>
+                    <span>TC System</span>
+                  </div>
+                  <div
+                    styleName={cn(
+                      'table-column',
+                    )}
+                  >
+                    <div styleName="mobile-header">Score</div>
+
+                    {(score < 0) ? (
+                      <Tooltip content="Failed Submission" className="toolTipPadding">
+                        <IconFail />
+                      </Tooltip>
+                    ) : (<span>{score}</span>)}
+                  </div>
+                  <div
+                    styleName={cn(
+                      'table-column',
+                    )}
+                  >
+                    <div styleName="mobile-header">Status</div>
+
+                    {(review.status === 'completed') ? (
+                      <span styleName="status-complete">Complete</span>
+                    ) : (
+                      <span styleName="status-failed">Failed</span>
+                    )}
+                  </div>
                 </div>
-              </div>
-            );
-          })
-        }
-        <div styleName="table-row table-content-footer">
-          <div styleName="table-column column-1">
-            <span>Final Score</span>
-          </div>
-          <div styleName="table-column" />
-          <div styleName="table-column">
-            <span>{finalScore}</span>
-          </div>
-          <div styleName="table-column">
-            {submission.provisionalScoringIsCompleted ? (
-              <IconComplete />
-            ) : (<IconQueued />)}
+              );
+            })
+          }
+          <div styleName="table-row table-content-footer">
+            <div styleName="table-column column-1">
+              <div styleName="mobile-header">Review Type</div>
+              <span>Final Score</span>
+            </div>
+            <div styleName="table-column">
+              <div styleName="mobile-header">Reviewer</div>
+              <span>N/A</span>
+            </div>
+            <div styleName="table-column">
+              <div styleName="mobile-header">Score</div>
+              <span>{finalScore || 'N/A'}</span>
+            </div>
+            <div styleName="table-column">
+              <div styleName="mobile-header">Status</div>
+              {submission.provisionalScoringIsCompleted ? (
+                <span styleName="status-complete">Complete</span>
+              ) : (<span styleName="status-in-queue">In Queue</span>)}
+            </div>
           </div>
         </div>
       </div>
diff --git a/src/shared/components/challenge-detail/MySubmissions/SubmissionsDetail/styles.scss b/src/shared/components/challenge-detail/MySubmissions/SubmissionsDetail/styles.scss
index 4f6b6befb0..5ca7735253 100644
--- a/src/shared/components/challenge-detail/MySubmissions/SubmissionsDetail/styles.scss
+++ b/src/shared/components/challenge-detail/MySubmissions/SubmissionsDetail/styles.scss
@@ -1,4 +1,4 @@
-@import '~styles/mixins';
+@import "~styles/mixins";
 
 .wrapper {
   @include roboto-medium;
@@ -22,6 +22,27 @@
   }
 }
 
+.header {
+  display: flex;
+  justify-content: space-between;
+  padding-bottom: 25px;
+
+  .title {
+    @include barlow-medium;
+
+    font-weight: 600;
+    color: #2a2a2a;
+    font-size: 18px;
+    line-height: 22px;
+    text-transform: uppercase;
+  }
+
+  .icon {
+    cursor: pointer;
+    margin-top: 5px;
+  }
+}
+
 .table-header {
   background: #fafafb;
   justify-content: center;
@@ -36,11 +57,19 @@
   display: flex;
   height: 40px;
   align-items: center;
-  border: 1px solid #ededf2;
-  border-bottom: none;
+  border-bottom: 1px solid #ededf2;
 
-  &:last-child {
-    border-bottom: 1px solid #ededf2;
+  @include xs-to-sm {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 20px;
+    height: inherit;
+    padding-top: 18px;
+    padding-bottom: 18px;
+
+    &:first-child {
+      border-top: 1px solid #ededf2;
+    }
   }
 }
 
@@ -70,7 +99,6 @@
 }
 
 .title-detail {
-  color: $tc-dark-blue;
   margin-left: 2px;
 }
 
@@ -96,13 +124,22 @@
 }
 
 .column-1 {
-  color: $tc-dark-blue;
+  color: black;
   padding-left: 22px;
+  font-size: 14px;
+
+  @include xs-to-sm {
+    padding-left: 0;
+  }
 }
 
 .table-content-header {
   color: $tc-black;
 
+  @include xs-to-sm {
+    display: none;
+  }
+
   .column-1 {
     color: $tc-black;
   }
@@ -118,6 +155,12 @@
   &.column-1 {
     justify-content: flex-start;
   }
+
+  @include xs-to-sm {
+    flex-direction: column;
+    align-items: flex-start;
+    font-size: 14px;
+  }
 }
 
 .table-content-footer {
@@ -127,7 +170,7 @@
 }
 
 .col-arrow {
-  display: flex;
+  display: none;
   padding-left: 5px;
   margin-right: -19px;
 
@@ -139,7 +182,24 @@
   }
 }
 
+.hr {
+  width: 100%;
+  margin: 0;
+}
+
+.sub-header {
+  font-size: 16px;
+  margin-top: 24px;
+  margin-bottom: 24px;
+
+  .title-detail {
+    font-weight: bold;
+  }
+}
+
 .col-arrow-is-sorting {
+  display: block;
+
   :global {
     g {
       fill: $tc-dark-blue;
@@ -158,10 +218,15 @@
   }
 }
 
-.header-sort {
+button.header-sort {
   display: flex;
   justify-content: center;
   align-items: center;
+  font-size: 11px;
+  color: #767676;
+  text-transform: uppercase;
+  font-weight: 600;
+  font-family: "Barlow", Helvetica, Arial, sans-serif;
 
   &:hover {
     color: $tc-dark-blue;
@@ -174,7 +239,38 @@
   }
 }
 
-button.is-highlight,
-.is-highlight {
-  background: rgba(26, 133, 255, 0.05);
+.status-complete {
+  font-size: 14px;
+  color: #0ab88a;
+  font-weight: 500;
+}
+
+.status-failed {
+  font-size: 14px;
+  color: #ef476f;
+  font-weight: 500;
+}
+
+.status-in-queue {
+  font-size: 14px;
+  color: #f46500;
+  font-weight: 500;
+}
+
+.mobile-header {
+  display: none;
+  font-weight: 600;
+  color: #767676;
+  padding-bottom: 3px;
+
+  @include xs-to-sm {
+    display: block;
+  }
+}
+
+.inner-content {
+  @include xs-to-sm {
+    max-height: calc(100vh - 150px);
+    overflow: auto;
+  }
 }
diff --git a/src/shared/components/challenge-detail/MySubmissions/SubmissionsList/index.jsx b/src/shared/components/challenge-detail/MySubmissions/SubmissionsList/index.jsx
index 93e5f862f5..621cf81fad 100644
--- a/src/shared/components/challenge-detail/MySubmissions/SubmissionsList/index.jsx
+++ b/src/shared/components/challenge-detail/MySubmissions/SubmissionsList/index.jsx
@@ -14,10 +14,12 @@ import sortList from 'utils/challenge-detail/sort';
 import IconClose from 'assets/images/icon-close-green.svg';
 import DateSortIcon from 'assets/images/icon-date-sort.svg';
 import SortIcon from 'assets/images/icon-sort.svg';
+import Tooltip from 'components/Tooltip';
 import IconFail from '../../icons/failed.svg';
 import DownloadIcon from '../../../SubmissionManagement/Icons/IconSquareDownload.svg';
-// import SearchIcon from '../../../SubmissionManagement/Icons/IconSearch.svg';
+import ZoomIcon from '../../../SubmissionManagement/Icons/IconZoom.svg';
 
+// import SearchIcon from '../../../SubmissionManagement/Icons/IconSearch.svg';
 import style from './styles.scss';
 
 const { getService } = services.submissions;
@@ -379,18 +381,14 @@ class SubmissionsListView extends React.Component {
                       'submission-table-column column-1',
                     )}
                   >
-                    <button
-                      onClick={() => {
-                        selectSubmission(mySubmission);
-                      }}
-                      type="button"
+                    <div
                       styleName={cn(
                         'submission-table-column column-1-1',
                       )}
                     >
                       <div styleName="mobile-header">Submission Id</div>
                       <span>{mySubmission.id}</span>
-                    </button>
+                    </div>
                     <div
                       styleName={cn(
                         'submission-table-column column-1-2 status-row',
@@ -417,7 +415,11 @@ class SubmissionsListView extends React.Component {
                       )}
                     >
                       <div styleName="mobile-header">Provisional Score</div>
-                      {(provisionalScore < 0) ? (<IconFail />) : (<span>{provisionalScore}</span>)}
+                      {(provisionalScore < 0) ? (
+                        <Tooltip content="Failed Submission" className="toolTipPadding">
+                          <IconFail />
+                        </Tooltip>
+                      ) : (<span>{provisionalScore}</span>)}
                     </div>
                     <div
                       styleName={cn(
@@ -448,6 +450,10 @@ class SubmissionsListView extends React.Component {
                         <DownloadIcon />
                       </button>
 
+                      <button onClick={() => selectSubmission(mySubmission)} type="button">
+                        <ZoomIcon styleName="icon-zoom" />
+                      </button>
+
                       {/* <button onClick={() => this.toggleModal(mySubmission)} type="button">
                         <SearchIcon styleName="icon-search" />
                       </button> */}
diff --git a/src/shared/components/challenge-detail/MySubmissions/SubmissionsList/styles.scss b/src/shared/components/challenge-detail/MySubmissions/SubmissionsList/styles.scss
index de9640e3ef..04ba214a53 100644
--- a/src/shared/components/challenge-detail/MySubmissions/SubmissionsList/styles.scss
+++ b/src/shared/components/challenge-detail/MySubmissions/SubmissionsList/styles.scss
@@ -96,8 +96,7 @@
   flex-direction: column;
   font-size: 13px;
   line-height: 20px;
-  padding-top: 30px;
-  padding-bottom: 50px;
+  padding-top: 10px;
   margin: 0 41px;
 
   @include xs-to-sm {
@@ -147,12 +146,13 @@ button.column-1-1,
   display: flex;
   justify-content: flex-start;
   align-items: center;
-  height: 40px;
+  height: 56px;
 
   @include xs-to-sm {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
+    align-items: flex-start;
     height: auto;
   }
 }
@@ -306,6 +306,10 @@ button.column-1-1,
   margin-left: 17px;
 }
 
+.icon-zoom {
+  margin-left: 17px;
+}
+
 .col-arrow {
   display: flex;
   padding-left: 5px;
@@ -336,11 +340,6 @@ button.column-1-1,
   }
 }
 
-button.is-highlight,
-.is-highlight {
-  display: inherit;
-}
-
 .mobile-header {
   display: none;
 
@@ -464,3 +463,14 @@ hr {
     margin-bottom: 16px;
   }
 }
+
+.is-highlight,
+button.is-highlight {
+  display: inherit;
+
+  .header-sort {
+    span {
+      color: black;
+    }
+  }
+}
diff --git a/src/shared/components/challenge-detail/MySubmissions/index.jsx b/src/shared/components/challenge-detail/MySubmissions/index.jsx
index a3232f8c56..d0d80eb630 100644
--- a/src/shared/components/challenge-detail/MySubmissions/index.jsx
+++ b/src/shared/components/challenge-detail/MySubmissions/index.jsx
@@ -7,12 +7,19 @@ import PT from 'prop-types';
 import _ from 'lodash';
 import { goToLogin } from 'utils/tc';
 import LoadingIndicator from 'components/LoadingIndicator';
+import tc from 'components/buttons/themed/tc.scss';
+
 import { isTokenExpired } from '@topcoder-platform/tc-auth-lib';
+import { Modal, PrimaryButton } from 'topcoder-react-ui-kit';
 
 import SubmissionsList from './SubmissionsList';
 import SubmissionsDetail from './SubmissionsDetail';
 
-import './styles.scss';
+import style from './styles.scss';
+
+const buttonThemes = {
+  tc,
+};
 
 class MySubmissionsView extends React.Component {
   constructor(props) {
@@ -64,13 +71,14 @@ class MySubmissionsView extends React.Component {
     const { selectedSubmission, submissionsSortDetail } = this.state;
 
     if (!_.isEmpty(loadingMMSubmissionsForChallengeId)) {
-      return <div styleName="loading"><LoadingIndicator /></div>;
+      return <div className={style.loading}><LoadingIndicator /></div>;
     }
 
     return (
-      <div styleName="wrapper">
-        <div styleName="content">
-          {selectedSubmission ? (
+      <div className={style.wrapper}>
+        <div className={style.content}>
+          { selectedSubmission && (
+          <Modal onCancel={() => this.setState({ selectedSubmission: null })} theme={style}>
             <SubmissionsDetail
               onCancel={() => this.setState({ selectedSubmission: null })}
               submission={selectedSubmission}
@@ -78,22 +86,33 @@ class MySubmissionsView extends React.Component {
               submissionsSort={submissionsSortDetail}
               onSortChange={sort => this.setState({ submissionsSortDetail: sort })}
             />
-          ) : (
-            <SubmissionsList
-              selectSubmission={submission => this.setState({ selectedSubmission: submission })}
-              challengesUrl={challengesUrl}
-              challenge={challenge}
-              hasRegistered={hasRegistered}
-              unregistering={unregistering}
-              submissionEnded={submissionEnded}
-              isMM={isMM}
-              isLegacyMM={isLegacyMM}
-              mySubmissions={mySubmissions}
-              auth={auth}
-              submissionsSort={submissionsSort}
-              onSortChange={onSortChange}
-            />
+
+            <div className={style.buttons}>
+              <PrimaryButton
+                onClick={() => this.setState({ selectedSubmission: null })}
+                theme={{
+                  button: buttonThemes.tc['primary-green-md'],
+                }}
+              >
+                Close
+              </PrimaryButton>
+            </div>
+          </Modal>
           )}
+          <SubmissionsList
+            selectSubmission={submission => this.setState({ selectedSubmission: submission })}
+            challengesUrl={challengesUrl}
+            challenge={challenge}
+            hasRegistered={hasRegistered}
+            unregistering={unregistering}
+            submissionEnded={submissionEnded}
+            isMM={isMM}
+            isLegacyMM={isLegacyMM}
+            mySubmissions={mySubmissions}
+            auth={auth}
+            submissionsSort={submissionsSort}
+            onSortChange={onSortChange}
+          />
         </div>
       </div>
     );
diff --git a/src/shared/components/challenge-detail/MySubmissions/styles.scss b/src/shared/components/challenge-detail/MySubmissions/styles.scss
index e3d3cfb71c..d8e8b0fc4d 100644
--- a/src/shared/components/challenge-detail/MySubmissions/styles.scss
+++ b/src/shared/components/challenge-detail/MySubmissions/styles.scss
@@ -1,4 +1,4 @@
-@import '~styles/mixins';
+@import "~styles/mixins";
 
 .wrapper {
   @include roboto-regular;
@@ -17,3 +17,62 @@
 .loading {
   margin-top: 30px;
 }
+
+.close-btn {
+  cursor: pointer;
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 24px;
+  margin-bottom: 32px;
+  background-color: #137d60;
+  padding: 8px 24px;
+  border-radius: 24px;
+  float: right;
+
+  span {
+    @include roboto-bold;
+
+    font-weight: 700;
+    font-size: 14px;
+    line-height: 24px;
+    color: #fff;
+  }
+
+  @include xs-to-sm {
+    border-top: 1px solid #e9e9e9;
+    position: sticky;
+    margin-bottom: 16px;
+  }
+}
+
+.buttons {
+  margin-top: 24px;
+  float: right;
+
+  @include xs-to-sm {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+    padding: 24px 16px;
+    background-color: white;
+  }
+}
+
+.container {
+  padding: 25px;
+  width: 750px;
+  border-radius: 8px;
+
+  @include xs-to-sm {
+    width: 100%;
+    margin: 0;
+    max-width: 100vw;
+    height: 100%;
+    max-height: 100vh;
+    padding: 24px 16px;
+    z-index: 999999;
+  }
+}
diff --git a/src/shared/components/challenge-detail/icons/failed.svg b/src/shared/components/challenge-detail/icons/failed.svg
index 0c407d0d54..0ac7360987 100644
--- a/src/shared/components/challenge-detail/icons/failed.svg
+++ b/src/shared/components/challenge-detail/icons/failed.svg
@@ -1,19 +1,3 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>Submission Failed</title>
-    <g id="Challenge-Details---Desktop" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="04_1_Review_Status" transform="translate(-588.000000, -799.000000)">
-            <g id="icon-failed" transform="translate(588.000000, 799.000000)">
-                <g>
-                    <g id="ban">
-                        <path d="M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z" id="Path" fill="#FFFFFF"></path>
-                        <path d="M8,1 C4.15228475,1 1,4.15228475 1,8 C1,11.8477153 4.15228475,15 8,15 C11.8477153,15 15,11.8477153 15,8 C15,4.15228475 11.8477153,1 8,1 Z" id="Shape" stroke="#F52C14" stroke-width="2" fill-rule="nonzero"></path>
-                    </g>
-                    <g id="e-remove" transform="translate(5.000000, 5.000000)" fill="#F52C14" stroke="#F52C14" stroke-width="0.5">
-                        <path d="M5.82454042,0.175459576 C5.59052366,-0.0584865253 5.21118246,-0.0584865253 4.9771657,0.175459576 L3.00375342,2.14887186 L1.03034114,0.175459576 C0.795198318,-0.0516489611 0.421427026,-0.0484009896 0.190266439,0.182759598 C-0.0408941487,0.413920185 -0.0441421202,0.787691477 0.182966417,1.0228343 L2.1563787,2.99624658 L0.182966417,4.96965886 C0.0271809579,5.12012149 -0.0352970548,5.34293395 0.0195458527,5.5524581 C0.0743887601,5.76198225 0.238017754,5.92561124 0.447541901,5.98045415 C0.657066047,6.03529705 0.87987851,5.97281904 1.03034114,5.81703358 L3.00375342,3.8436213 L4.9771657,5.81703358 C5.21230852,6.04414212 5.58607981,6.04089415 5.8172404,5.80973356 C6.04840099,5.57857297 6.05164896,5.20480168 5.82454042,4.96965886 L3.85112814,2.99624658 L5.82454042,1.0228343 C6.05848653,0.788817536 6.05848653,0.409476339 5.82454042,0.175459576 Z" id="Path"></path>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0004 19.6C15.3023 19.6 19.6004 15.302 19.6004 10C19.6004 4.69809 15.3023 0.400024 10.0004 0.400024C4.69846 0.400024 0.400391 4.69809 0.400391 10C0.400391 15.302 4.69846 19.6 10.0004 19.6ZM8.44892 6.7515C7.98029 6.28287 7.22049 6.28287 6.75186 6.7515C6.28323 7.22012 6.28323 7.97992 6.75186 8.44855L8.30333 10L6.75186 11.5515C6.28323 12.0201 6.28323 12.7799 6.75186 13.2486C7.22049 13.7172 7.98029 13.7172 8.44892 13.2486L10.0004 11.6971L11.5519 13.2486C12.0205 13.7172 12.7803 13.7172 13.2489 13.2486C13.7175 12.7799 13.7175 12.0201 13.2489 11.5515L11.6974 10L13.2489 8.44855C13.7175 7.97992 13.7175 7.22012 13.2489 6.7515C12.7803 6.28287 12.0205 6.28287 11.5519 6.7515L10.0004 8.30297L8.44892 6.7515Z" fill="#EF476F"/>
+</svg>