diff --git a/web/modals/modal.css b/web/modals/modal.css
--- a/web/modals/modal.css
+++ b/web/modals/modal.css
@@ -7,6 +7,14 @@
   overflow: hidden;
 }
 
+div.transparentModalContainer {
+  display: flex;
+  border-radius: 8px;
+  flex-direction: column;
+  margin: 20px;
+  overflow: hidden;
+}
+
 div.modalContainerSmall {
   width: 330px;
 }
diff --git a/web/modals/modal.react.js b/web/modals/modal.react.js
--- a/web/modals/modal.react.js
+++ b/web/modals/modal.react.js
@@ -18,6 +18,7 @@
   +icon?: Icon,
   +onClose: () => void,
   +withCloseButton?: boolean,
+  +transparent?: boolean,
   +size?: ModalSize,
   +modalHeaderCentered?: boolean,
 };
@@ -34,11 +35,14 @@
     onClose,
     name,
     icon,
+    transparent = false,
     withCloseButton = true,
     modalHeaderCentered = false,
   } = props;
 
-  const modalContainerClasses = classNames(css.modalContainer, {
+  const modalContainerClasses = classNames({
+    [css.modalContainer]: transparent === false,
+    [css.modalContainerTransparent]: transparent === true,
     [css.modalContainerLarge]: size === 'large',
     [css.modalContainerSmall]: size === 'small',
   });
diff --git a/web/modals/threads/gallery/thread-settings-media-gallery-item.css b/web/modals/threads/gallery/thread-settings-media-gallery-item.css
new file mode 100644
--- /dev/null
+++ b/web/modals/threads/gallery/thread-settings-media-gallery-item.css
@@ -0,0 +1,28 @@
+.backContainer {
+  position: absolute;
+  top: 10%;
+  left: 15%;
+}
+
+.backButton {
+  color: white;
+  font-size: 16px;
+  font-weight: 500;
+  position: relative;
+  margin-bottom: 16px;
+  cursor: pointer;
+}
+
+.mediaContainer {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 70%;
+  height: 70%;
+}
+
+.mediaItem {
+  width: 100%;
+  height: 100%;
+}
diff --git a/web/modals/threads/gallery/thread-settings-media-gallery-item.react.js b/web/modals/threads/gallery/thread-settings-media-gallery-item.react.js
new file mode 100644
--- /dev/null
+++ b/web/modals/threads/gallery/thread-settings-media-gallery-item.react.js
@@ -0,0 +1,59 @@
+// @flow
+
+import * as React from 'react';
+
+import type { Media } from 'lib/types/media-types';
+
+import css from './thread-settings-media-gallery-item.css';
+import Modal from '../../modal.react.js';
+
+type ThreadSettingsMediaGalleryItemModalProps = {
+  +onClose: () => void,
+  +media: Media,
+};
+
+function ThreadSettingsMediaGalleryItemModal(
+  props: ThreadSettingsMediaGalleryItemModalProps,
+): React.Node {
+  const { onClose, media } = props;
+  const modalName = '';
+
+  const mediaSource = React.useMemo(() => media.uri, [media]);
+
+  const renderedMedia = React.useMemo(() => {
+    if (media.type === 'photo') {
+      return <img src={mediaSource} className={css.mediaItem} />;
+    }
+    return (
+      <video
+        src={mediaSource}
+        className={css.mediaItem}
+        controls
+        autoPlay
+        loop
+        muted
+      />
+    );
+  }, [media, mediaSource]);
+
+  return (
+    <div>
+      <Modal
+        name={modalName}
+        transparent={true}
+        withCloseButton={false}
+        onClose={onClose}
+        size="large"
+      >
+        <div className={css.backContainer}>
+          <p className={css.backButton} onClick={onClose}>
+            {'< Back'}
+          </p>
+        </div>
+        <div className={css.mediaContainer}>{renderedMedia}</div>
+      </Modal>
+    </div>
+  );
+}
+
+export default ThreadSettingsMediaGalleryItemModal;
diff --git a/web/modals/threads/gallery/thread-settings-media-gallery.react.js b/web/modals/threads/gallery/thread-settings-media-gallery.react.js
--- a/web/modals/threads/gallery/thread-settings-media-gallery.react.js
+++ b/web/modals/threads/gallery/thread-settings-media-gallery.react.js
@@ -3,9 +3,12 @@
 import * as React from 'react';
 
 import { fetchThreadMedia } from 'lib/actions/thread-actions.js';
+import { useModalContext } from 'lib/components/modal-provider.react.js';
+import type { Media } from 'lib/types/media-types.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
 import { useServerCall } from 'lib/utils/action-utils.js';
 
+import ThreadSettingsMediaGaleryItem from './thread-settings-media-gallery-item.react.js';
 import css from './thread-settings-media-gallery.css';
 import Tabs from '../../../components/tabs.react.js';
 import Modal from '../../modal.react.js';
@@ -22,6 +25,7 @@
 function ThreadSettingsMediaGalleryModal(
   props: ThreadSettingsMediaGalleryModalProps,
 ): React.Node {
+  const { pushModal, popModal } = useModalContext();
   const { onClose, parentThreadInfo, limit, activeTab } = props;
   const { id: threadID } = parentThreadInfo;
   const modalName = 'Media';
@@ -45,6 +49,15 @@
     fetchData();
   }, [callFetchThreadMedia, threadID, limit]);
 
+  const onClick = React.useCallback(
+    (media: Media) => {
+      pushModal(
+        <ThreadSettingsMediaGaleryItem media={media} onClose={popModal} />,
+      );
+    },
+    [pushModal, popModal],
+  );
+
   const filteredMediaInfos = React.useMemo(() => {
     if (tab === 'All') {
       return mediaInfos;
@@ -65,12 +78,16 @@
   const mediaGalleryItems = React.useMemo(() => {
     return filteredMediaInfos.map((media, i) => {
       return (
-        <div key={i} className={css.mediaContainer}>
+        <div
+          key={i}
+          onClick={() => onClick(media)}
+          className={css.mediaContainer}
+        >
           <img src={mediaCoverPhotos[i]} className={css.media} />
         </div>
       );
     });
-  }, [filteredMediaInfos, mediaCoverPhotos]);
+  }, [filteredMediaInfos, onClick, mediaCoverPhotos]);
 
   const handleScroll = React.useCallback(
     async event => {