diff --git a/src/files-and-uploads/table-components/GalleryCard.jsx b/src/files-and-uploads/table-components/GalleryCard.jsx
index 5728f2b3d..19d62ab58 100644
--- a/src/files-and-uploads/table-components/GalleryCard.jsx
+++ b/src/files-and-uploads/table-components/GalleryCard.jsx
@@ -32,8 +32,9 @@ const GalleryCard = ({
   });
 
   return (
-    <Card className={className} data-testid={`grid-card-${original.id}`}>
+    <Card className={`${className} w-100 gallery-card`} data-testid={`grid-card-${original.id}`}>
       <Card.Header
+        className="pr-0 pt-2 pb-2"
         actions={(
           <ActionRow>
             <FileMenu
@@ -52,23 +53,25 @@ const GalleryCard = ({
           </ActionRow>
         )}
       />
-      <Card.Section>
-        <div className="row align-items-center justify-content-center m-0">
+      <Card.Section className="pr-3 pl-3 pt-0 pb-0">
+        <div
+          className="row align-items-center justify-content-center m-0 thumbnail-container border rounded p-1"
+        >
           {original.thumbnail ? (
-            <Image src={src} style={{ height: '76px', width: '135.71px' }} className="border rounded p-1" />
+            <Image src={src} className="w-auto mw-100 mh-100 thumbnail-image" />
           ) : (
-            <div className="row border justify-content-center align-items-center rounded m-0" style={{ height: '76px', width: '135.71px' }}>
+            <div className="row justify-content-center align-items-center m-0">
               <Icon src={src} style={{ height: '48px', width: '48px' }} />
             </div>
           )}
         </div>
         <div style={{ wordBreak: 'break-word' }}>
-          <Truncate lines={1} className="font-weight-bold small mt-3">
+          <Truncate lines={1} className="font-weight-bold mt-2 picture-title">
             {original.displayName}
           </Truncate>
         </div>
       </Card.Section>
-      <Card.Footer>
+      <Card.Footer className="p-3 pt-4">
         <Chip>
           {original.wrapperType}
         </Chip>
diff --git a/src/files-and-uploads/table-components/GalleryCard.scss b/src/files-and-uploads/table-components/GalleryCard.scss
new file mode 100644
index 000000000..318659b79
--- /dev/null
+++ b/src/files-and-uploads/table-components/GalleryCard.scss
@@ -0,0 +1,23 @@
+.gallery-card {
+  .thumbnail-container {
+    aspect-ratio: 16 / 9;
+
+    .thumbnail-image {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+
+  &.pgn__card {
+    .pgn__card-header {
+      .pgn__card-header-actions {
+        margin-top: 0;
+      }
+    }
+  }
+
+  .picture-title {
+    font-size: 12px;
+  }
+}
diff --git a/src/index.scss b/src/index.scss
index bc0a403f1..f35f14087 100755
--- a/src/index.scss
+++ b/src/index.scss
@@ -19,3 +19,4 @@
 @import "course-updates/CourseUpdates";
 @import "export-page/CourseExportPage";
 @import "import-page/CourseImportPage";
+@import "files-and-uploads/table-components/GalleryCard";