diff --git a/packages/decap-cms-core/src/components/MediaLibrary/MediaLibraryButtons.js b/packages/decap-cms-core/src/components/MediaLibrary/MediaLibraryButtons.js
index fa3eb19b057e..9baacd7dbc10 100644
--- a/packages/decap-cms-core/src/components/MediaLibrary/MediaLibraryButtons.js
+++ b/packages/decap-cms-core/src/components/MediaLibrary/MediaLibraryButtons.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { isAbsolutePath } from 'decap-cms-lib-util';
-import { buttons, shadows, zIndex } from 'decap-cms-ui-default';
+import { buttons, Icon, shadows, zIndex } from 'decap-cms-ui-default';
 
 import { FileUploadButton } from '../UI';
 
@@ -11,15 +11,25 @@ const styles = {
   button: css`
     ${buttons.button};
     ${buttons.default};
-    display: inline-block;
-    margin-left: 15px;
-    margin-right: 2px;
+    display: inline-flex;
+    align-items: center;
 
     &[disabled] {
       ${buttons.disabled};
       cursor: default;
     }
   `,
+  // Hides an element without removing it from the accessibility tree.
+  visuallyHidden: css`
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+  `,
 };
 
 export const UploadButton = styled(FileUploadButton)`
@@ -68,7 +78,27 @@ const ActionButton = styled.button`
     `}
 `;
 
-export const DownloadButton = ActionButton;
+function ResponsiveActionButton({ children, icon, ...props }) {
+  return (
+    <ActionButton {...props}>
+      <Icon
+        type={icon}
+        size="small"
+        aria-hidden="true"
+        css={{ '@media (min-width: 600px)': styles.visuallyHidden }}
+      />
+      <span css={{ '@media (max-width: 599px)': styles.visuallyHidden }}>{children}</span>
+    </ActionButton>
+  );
+}
+
+export function DownloadButton({ children, ...props }) {
+  return (
+    <ResponsiveActionButton {...props} icon="download">
+      {children}
+    </ResponsiveActionButton>
+  );
+}
 
 export class CopyToClipBoardButton extends React.Component {
   mounted = false;
@@ -115,13 +145,15 @@ export class CopyToClipBoardButton extends React.Component {
     return t('mediaLibrary.mediaLibraryCard.copyPath');
   };
 
+  getIcon = () => (this.state.copied ? 'check' : 'copy');
+
   render() {
     const { disabled } = this.props;
 
     return (
-      <ActionButton disabled={disabled} onClick={this.handleCopy}>
+      <ResponsiveActionButton disabled={disabled} onClick={this.handleCopy} icon={this.getIcon()}>
         {this.getTitle()}
-      </ActionButton>
+      </ResponsiveActionButton>
     );
   }
 }
diff --git a/packages/decap-cms-core/src/components/MediaLibrary/MediaLibraryCard.js b/packages/decap-cms-core/src/components/MediaLibrary/MediaLibraryCard.js
index fa954f3bb792..af279a19f040 100644
--- a/packages/decap-cms-core/src/components/MediaLibrary/MediaLibraryCard.js
+++ b/packages/decap-cms-core/src/components/MediaLibrary/MediaLibraryCard.js
@@ -70,7 +70,6 @@ class MediaLibraryCard extends React.Component {
       text,
       onClick,
       draftText,
-      width,
       height,
       margin,
       isPrivate,
@@ -83,7 +82,7 @@ class MediaLibraryCard extends React.Component {
       <Card
         isSelected={isSelected}
         onClick={onClick}
-        width={width}
+        width="100%"
         height={height}
         margin={margin}
         tabIndex="-1"
@@ -115,7 +114,6 @@ MediaLibraryCard.propTypes = {
   text: PropTypes.string.isRequired,
   onClick: PropTypes.func.isRequired,
   draftText: PropTypes.string.isRequired,
-  width: PropTypes.string.isRequired,
   height: PropTypes.string.isRequired,
   margin: PropTypes.string.isRequired,
   isPrivate: PropTypes.bool,
diff --git a/packages/decap-cms-core/src/components/MediaLibrary/MediaLibraryCardGrid.js b/packages/decap-cms-core/src/components/MediaLibrary/MediaLibraryCardGrid.js
index 1fa7cb176c0c..f8d7b04d4d40 100644
--- a/packages/decap-cms-core/src/components/MediaLibrary/MediaLibraryCardGrid.js
+++ b/packages/decap-cms-core/src/components/MediaLibrary/MediaLibraryCardGrid.js
@@ -75,9 +75,9 @@ function VirtualizedGrid(props) {
           const cardWidth = parseInt(props.cardWidth, 10);
           const cardHeight = parseInt(props.cardHeight, 10);
           const gutter = parseInt(props.cardMargin, 10);
-          const columnWidth = cardWidth + gutter;
+          const columnWidth = Math.min(width, cardWidth + gutter);
           const rowHeight = cardHeight + gutter;
-          const columnCount = Math.floor(width / columnWidth);
+          const columnCount = Math.max(1, Math.floor(width / columnWidth));
           const rowCount = Math.ceil(mediaItems.length / columnCount);
           return (
             <Grid
diff --git a/packages/decap-cms-core/src/components/MediaLibrary/MediaLibraryHeader.js b/packages/decap-cms-core/src/components/MediaLibrary/MediaLibraryHeader.js
index 54c44cf54d1f..9239fc0464e3 100644
--- a/packages/decap-cms-core/src/components/MediaLibrary/MediaLibraryHeader.js
+++ b/packages/decap-cms-core/src/components/MediaLibrary/MediaLibraryHeader.js
@@ -3,39 +3,54 @@ import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { Icon, shadows, colors, buttons } from 'decap-cms-ui-default';
 
+const HeaderContainer = styled.div`
+  @media (max-width: 499px) {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row-reverse;
+  }
+`;
+
 const CloseButton = styled.button`
   ${buttons.button};
-  ${shadows.dropMiddle};
-  position: absolute;
-  margin-right: -40px;
-  left: -40px;
-  top: -40px;
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
   background-color: white;
-  padding: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  @media (min-width: 500px) {
+    ${shadows.dropMiddle};
+    position: absolute;
+    margin-right: -40px;
+    left: -40px;
+    top: -40px;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 `;
 
 const LibraryTitle = styled.h1`
-  line-height: 36px;
-  font-size: 22px;
+  font-size: 18px;
+  line-height: 28px;
   text-align: left;
-  margin-bottom: 25px;
+  @media (min-width: 500px) {
+    font-size: 22px;
+    line-height: 36px;
+  }
+  margin-bottom: 0;
   color: ${props => props.isPrivate && colors.textFieldBorder};
 `;
 
 function MediaLibraryHeader({ onClose, title, isPrivate, t }) {
   return (
-    <div>
+    <HeaderContainer>
       <CloseButton aria-label={t('mediaLibrary.mediaLibraryModal.close')} onClick={onClose}>
         <Icon type="close" />
       </CloseButton>
       <LibraryTitle isPrivate={isPrivate}>{title}</LibraryTitle>
-    </div>
+    </HeaderContainer>
   );
 }
 
diff --git a/packages/decap-cms-core/src/components/MediaLibrary/MediaLibraryModal.js b/packages/decap-cms-core/src/components/MediaLibrary/MediaLibraryModal.js
index ba89b25517c0..6648d5b5abdf 100644
--- a/packages/decap-cms-core/src/components/MediaLibrary/MediaLibraryModal.js
+++ b/packages/decap-cms-core/src/components/MediaLibrary/MediaLibraryModal.js
@@ -25,14 +25,18 @@ const cardMargin = `10px`;
  */
 const cardOutsideWidth = `300px`;
 
+/** Calculated to be as wide as possible without cutting off the 40px-wide close button. */
+const minimumCardWidth = `calc(100% - 40px)`;
+
 const StyledModal = styled(Modal)`
   display: grid;
-  grid-template-rows: 120px auto;
-  width: calc(${cardOutsideWidth} + 20px);
+  width: 100%;
+  grid-template-rows: auto 1fr;
+  gap: 20px;
   background-color: ${props => props.isPrivate && colors.grayDark};
 
-  @media (min-width: 800px) {
-    width: calc(${cardOutsideWidth} * 2 + 20px);
+  @media (min-width: 500px) {
+    width: min(${minimumCardWidth}, calc(${cardOutsideWidth} * 2 + 20px));
   }
 
   @media (min-width: 1120px) {
diff --git a/packages/decap-cms-core/src/components/MediaLibrary/MediaLibrarySearch.js b/packages/decap-cms-core/src/components/MediaLibrary/MediaLibrarySearch.js
index 54629f373387..ec49a871a2c0 100644
--- a/packages/decap-cms-core/src/components/MediaLibrary/MediaLibrarySearch.js
+++ b/packages/decap-cms-core/src/components/MediaLibrary/MediaLibrarySearch.js
@@ -8,7 +8,8 @@ const SearchContainer = styled.div`
   display: flex;
   align-items: center;
   position: relative;
-  width: 400px;
+  flex: 1 1 150px;
+  max-width: 460px;
 `;
 
 const SearchInput = styled.input`
@@ -33,6 +34,7 @@ const SearchIcon = styled(Icon)`
   left: 6px;
   z-index: ${zIndex.zIndex2};
   transform: translate(0, -50%);
+  pointer-events: none;
 `;
 
 function MediaLibrarySearch({ value, onChange, onKeyDown, placeholder, disabled }) {
diff --git a/packages/decap-cms-core/src/components/MediaLibrary/MediaLibraryTop.js b/packages/decap-cms-core/src/components/MediaLibrary/MediaLibraryTop.js
index 524b779a4008..88491dbee906 100644
--- a/packages/decap-cms-core/src/components/MediaLibrary/MediaLibraryTop.js
+++ b/packages/decap-cms-core/src/components/MediaLibrary/MediaLibraryTop.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import MediaLibrarySearch from './MediaLibrarySearch';
@@ -12,19 +13,36 @@ import {
   InsertButton,
 } from './MediaLibraryButtons';
 
+const styles = {
+  flexSpacing: css`
+    gap: 8px;
+    @media (min-width: 500px) {
+      gap: 15px;
+    }
+  `,
+};
+
 const LibraryTop = styled.div`
   position: relative;
   display: flex;
   flex-direction: column;
+  ${styles.flexSpacing};
 `;
 
 const RowContainer = styled.div`
   display: flex;
+  align-items: center;
   justify-content: space-between;
+  flex-wrap: wrap;
+  ${styles.flexSpacing};
 `;
 
 const ButtonsContainer = styled.div`
-  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: stretch;
+  flex-wrap: wrap;
+  ${styles.flexSpacing};
 `;
 
 function MediaLibraryTop({
diff --git a/packages/decap-cms-core/src/components/MediaLibrary/__tests__/__snapshots__/MediaLibraryCard.spec.js.snap b/packages/decap-cms-core/src/components/MediaLibrary/__tests__/__snapshots__/MediaLibraryCard.spec.js.snap
index 24bbf107412d..4cf26b9d09ce 100644
--- a/packages/decap-cms-core/src/components/MediaLibrary/__tests__/__snapshots__/MediaLibraryCard.spec.js.snap
+++ b/packages/decap-cms-core/src/components/MediaLibrary/__tests__/__snapshots__/MediaLibraryCard.spec.js.snap
@@ -3,7 +3,7 @@
 exports[`MediaLibraryCard should match snapshot for draft image 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  width: 100px;
+  width: 100%;
   height: 240px;
   margin: 10px;
   border: solid 2px #dfdfe3;
@@ -70,7 +70,7 @@ exports[`MediaLibraryCard should match snapshot for draft image 1`] = `
     class="emotion-0 emotion-1"
     height="240px"
     tabindex="-1"
-    width="100px"
+    width="100%"
   >
     <div
       class="emotion-2 emotion-3"
@@ -99,7 +99,7 @@ exports[`MediaLibraryCard should match snapshot for draft image 1`] = `
 exports[`MediaLibraryCard should match snapshot for non draft image 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  width: 100px;
+  width: 100%;
   height: 240px;
   margin: 10px;
   border: solid 2px #dfdfe3;
@@ -158,7 +158,7 @@ exports[`MediaLibraryCard should match snapshot for non draft image 1`] = `
     class="emotion-0 emotion-1"
     height="240px"
     tabindex="-1"
-    width="100px"
+    width="100%"
   >
     <div
       class="emotion-2 emotion-3"
@@ -181,7 +181,7 @@ exports[`MediaLibraryCard should match snapshot for non draft image 1`] = `
 exports[`MediaLibraryCard should match snapshot for non viewable image 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  width: 100px;
+  width: 100%;
   height: 240px;
   margin: 10px;
   border: solid 2px #dfdfe3;
@@ -242,7 +242,7 @@ exports[`MediaLibraryCard should match snapshot for non viewable image 1`] = `
     class="emotion-0 emotion-1"
     height="240px"
     tabindex="-1"
-    width="100px"
+    width="100%"
   >
     <div
       class="emotion-2 emotion-3"
diff --git a/packages/decap-cms-core/src/components/UI/Modal.js b/packages/decap-cms-core/src/components/UI/Modal.js
index 0388e21755ed..cc1ff0d1d596 100644
--- a/packages/decap-cms-core/src/components/UI/Modal.js
+++ b/packages/decap-cms-core/src/components/UI/Modal.js
@@ -20,8 +20,12 @@ const styleStrings = {
   modalBody: `
     ${shadows.dropDeep};
     background-color: #fff;
-    border-radius: ${lengths.borderRadius};
-    height: 80%;
+    border-radius: ${lengths.borderRadius} ${lengths.borderRadius} 0 0;
+    height: 90%;
+    @media (min-width: 500px) {
+      border-radius: ${lengths.borderRadius};
+      height: 80%;
+    }
     text-align: center;
     max-width: 2200px;
     padding: 20px;
@@ -39,7 +43,10 @@ const styleStrings = {
     bottom: 0;
     display: flex;
     justify-content: center;
-    align-items: center;
+    align-items: flex-end;
+    @media (min-width: 500px) {
+      align-items: center;
+    }
     opacity: 0;
     background-color: rgba(0, 0, 0, 0);
     transition: background-color ${transitions.main}, opacity ${transitions.main};
diff --git a/packages/decap-cms-ui-default/src/Icon/images/_index.js b/packages/decap-cms-ui-default/src/Icon/images/_index.js
index 80408dfeeb02..6407adca15b9 100644
--- a/packages/decap-cms-ui-default/src/Icon/images/_index.js
+++ b/packages/decap-cms-ui-default/src/Icon/images/_index.js
@@ -11,6 +11,8 @@ import iconCircle from './circle.svg';
 import iconClose from './close.svg';
 import iconCode from './code.svg';
 import iconCodeBlock from './code-block.svg';
+import iconCopy from './copy.svg';
+import iconDownload from './download.svg';
 import iconDragHandle from './drag-handle.svg';
 import iconEye from './eye.svg';
 import iconFolder from './folder.svg';
@@ -63,6 +65,8 @@ const images = {
   close: iconClose,
   code: iconCode,
   'code-block': iconCodeBlock,
+  copy: iconCopy,
+  download: iconDownload,
   'drag-handle': iconDragHandle,
   eye: iconEye,
   folder: iconFolder,
diff --git a/packages/decap-cms-ui-default/src/Icon/images/copy.svg b/packages/decap-cms-ui-default/src/Icon/images/copy.svg
new file mode 100644
index 000000000000..9080ae6e2611
--- /dev/null
+++ b/packages/decap-cms-ui-default/src/Icon/images/copy.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 21H8V7h11m0-2H8a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2m-3-4H4a2 2 0 0 0-2 2v14h2V3h12z"/></svg>
diff --git a/packages/decap-cms-ui-default/src/Icon/images/download.svg b/packages/decap-cms-ui-default/src/Icon/images/download.svg
new file mode 100644
index 000000000000..bbf8d94ba1bb
--- /dev/null
+++ b/packages/decap-cms-ui-default/src/Icon/images/download.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5 20h14v-2H5m14-9h-4V3H9v6H5l7 7z"/></svg>