diff --git a/frontend/src/metadata/views/gallery/content.js b/frontend/src/metadata/views/gallery/content.js
index f82ed6bd0e..0d055249cd 100644
--- a/frontend/src/metadata/views/gallery/content.js
+++ b/frontend/src/metadata/views/gallery/content.js
@@ -51,7 +51,7 @@ const Content = ({
       const selected = [];
 
       groups.forEach(group => {
-        group.displayChildren.forEach((row) => {
+        group.children.forEach((row) => {
           row.children.forEach((img) => {
             const imgElement = document.getElementById(img.id);
             if (imgElement) {
@@ -83,7 +83,7 @@ const Content = ({
 
   const renderDisplayGroup = useCallback((group) => {
     const { top: overScanTop, bottom: overScanBottom } = overScan;
-    const { name, displayChildren: children, height, top, paddingTop } = group;
+    const { name, children, height, top, paddingTop } = group;
 
     // group not in rendering area, return empty div
     if (top >= overScanBottom || top + height <= overScanTop) {
@@ -117,9 +117,7 @@ const Content = ({
     if ([GALLERY_DATE_MODE.YEAR, GALLERY_DATE_MODE.MONTH].includes(mode)) {
       newChildren = children.flatMap(row => row.children);
       listStyle['gap'] = GALLERY_YEAR_MODE_GRID_GAP;
-      if (newChildren.length === 1) {
-        listStyle['gridTemplateColumns'] = '1fr';
-      }
+      if (newChildren.length === 1) listStyle['gridTemplateColumns'] = '1fr';
     } else if (mode === GALLERY_DATE_MODE.DAY) {
       newChildren = children.flatMap(row => row.children);
       if (newChildren.length === 1) {
@@ -127,8 +125,8 @@ const Content = ({
       } else if (newChildren.length < 7) {
         listStyle['gridTemplateColumns'] = '1fr 1fr';
       } else {
-        delete listStyle['gridTemplateColumns'];
-        listStyle['display'] = 'flex';
+        listStyle['gridTemplateColumns'] = `repeat(${columns}, ${size.small}px)`;
+        listStyle['gridTemplateRows'] = `repeat(3, ${size.small}px)`;
       }
     }
     const imgEvents = {
@@ -169,7 +167,7 @@ const Content = ({
               })}
             </>
           ) : (
-            <DayImages size={size} images={newChildren} imgEvents={imgEvents} />
+            <DayImages size={size} selectedImageIds={selectedImageIds} images={newChildren} imgEvents={imgEvents} />
           )}
         </div>
       </div>
@@ -199,7 +197,6 @@ Content.propTypes = {
     height: PropTypes.number.isRequired,
     top: PropTypes.number.isRequired,
     paddingTop: PropTypes.number.isRequired,
-    displayChildren: PropTypes.array,
     children: PropTypes.arrayOf(PropTypes.shape({
       top: PropTypes.number.isRequired,
       children: PropTypes.arrayOf(PropTypes.shape({
diff --git a/frontend/src/metadata/views/gallery/day-images/images-grid.js b/frontend/src/metadata/views/gallery/day-images/images-grid.js
index f5bc8055a1..edf3a7c859 100644
--- a/frontend/src/metadata/views/gallery/day-images/images-grid.js
+++ b/frontend/src/metadata/views/gallery/day-images/images-grid.js
@@ -1,68 +1,212 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import Image from '../image';
-import { GALLERY_DEFAULT_GRID_GAP } from '../../../constants';
 
-const ImagesGrid = ({ images, size, imgEvents }) => {
-  const allStyles = [
+/*
+  small size: *
+  middle size: - -
+               - -
+  large size: . . .
+              . . .
+              . . .
+*/
+const ImagesGrid = ({ images, selectedImageIds, size, imgEvents }) => {
+  const imagesCount = useMemo(() => images.length, [images.length]);
+  const [firstImg, secondImg, ...others] = images;
+  const day = firstImg.day ? Number(firstImg.day) : 0;
+
+  // One large image, one medium image, five small images
+  if (imagesCount < 12) {
+    const i = imagesCount % 2;
+    const firstImgOffset = i === 0 ? 0 : 3;
+    const columnsOffset = i === 0 ? 3 : 0;
+    const styles = [
+      [
+        { gridRow: '1 / 2', gridColumn: `${1 + columnsOffset} / ${2 + columnsOffset}` },
+        { gridRow: 1, gridColumn: 3 + columnsOffset },
+        { gridRow: 2, gridColumn: 3 + columnsOffset },
+        { gridRow: 3, gridColumn: 1 + columnsOffset },
+        { gridRow: 3, gridColumn: 2 + columnsOffset },
+        { gridRow: 3, gridColumn: 3 + columnsOffset },
+      ], [
+        { gridRow: '1 / 2', gridColumn: `${2 + columnsOffset} / ${3 + columnsOffset}` },
+        { gridRow: 1, gridColumn: 1 + columnsOffset },
+        { gridRow: 2, gridColumn: 1 + columnsOffset },
+        { gridRow: 3, gridColumn: 1 + columnsOffset },
+        { gridRow: 3, gridColumn: 2 + columnsOffset },
+        { gridRow: 3, gridColumn: 3 + columnsOffset },
+      ], [
+        { gridRow: '2 / 3', gridColumn: `${1 + columnsOffset} / ${2 + columnsOffset}` },
+        { gridRow: 1, gridColumn: 1 + columnsOffset },
+        { gridRow: 1, gridColumn: 2 + columnsOffset },
+        { gridRow: 1, gridColumn: 3 + columnsOffset },
+        { gridRow: 2, gridColumn: 3 + columnsOffset },
+        { gridRow: 3, gridColumn: 3 + columnsOffset },
+      ], [
+        { gridRow: '2 / 3', gridColumn: `${2 + columnsOffset} / ${3 + columnsOffset}` },
+        { gridRow: 1, gridColumn: 1 + columnsOffset },
+        { gridRow: 1, gridColumn: 2 + columnsOffset },
+        { gridRow: 1, gridColumn: 3 + columnsOffset },
+        { gridRow: 2, gridColumn: 1 + columnsOffset },
+        { gridRow: 3, gridColumn: 1 + columnsOffset },
+      ]
+    ];
+    const style = styles[day % styles.length];
+
+    return (
+      <>
+        <Image key={firstImg.id} isSelected={selectedImageIds.includes(firstImg.id)} img={firstImg} size={size.large} style={{ gridRow: 1 / 3, gridColumn: `${1 + firstImgOffset} / ${3 + firstImgOffset}` }} {...imgEvents} />
+        <Image key={secondImg.id} isSelected={selectedImageIds.includes(secondImg.id)} img={secondImg} size={size.middle} style={style[0]} {...imgEvents} />
+        {others.slice(0, 5).map((image, index) => {
+          return (<Image key={image.id} isSelected={selectedImageIds.includes(image.id)} img={image} size={size.small} style={style[index + 1] || {}} {...imgEvents} />);
+        })}
+      </>
+    );
+  }
+
+  // Three medium image, six small images
+  // if (imagesCount < 12) {
+  //   const styles = [
+  //     [
+  //       /*
+  //         - - * * - -
+  //         - - - - - -
+  //         * * - - * *
+  //       */
+  //       { gridRow: '1 / 2', gridColumn: '1 / 2' },
+  //       { gridRow: '1 / 2', gridColumn: '5 / 6' },
+  //       { gridRow: '2 / 3', gridColumn: '3 / 4' },
+  //       { gridRow: 1, gridColumn: 3 },
+  //       { gridRow: 1, gridColumn: 4 },
+  //       { gridRow: 3, gridColumn: 1 },
+  //       { gridRow: 3, gridColumn: 2 },
+  //       { gridRow: 3, gridColumn: 5 },
+  //       { gridRow: 3, gridColumn: 6 },
+  //     ], [
+  //       /*
+  //         * * - - * *
+  //         - - - - - -
+  //         - - * * - -
+  //       */
+  //       { gridRow: '1 / 2', gridColumn: '3 / 4' },
+  //       { gridRow: '2 / 3', gridColumn: '1 / 2' },
+  //       { gridRow: '2 / 3', gridColumn: '5 / 6' },
+  //       { gridRow: 1, gridColumn: 1 },
+  //       { gridRow: 1, gridColumn: 2 },
+  //       { gridRow: 1, gridColumn: 5 },
+  //       { gridRow: 1, gridColumn: 6 },
+  //       { gridRow: 3, gridColumn: 3 },
+  //       { gridRow: 3, gridColumn: 4 },
+  //     ]
+  //   ];
+
+  //   const style = styles[day % styles.length];
+
+  //   return (
+  //     <>
+  //       <Image key={firstImg.id} isSelected={selectedImageIds.includes(firstImg.id)} img={firstImg} size={size.middle} style={style[0]} {...imgEvents} />
+  //       <Image key={secondImg.id} isSelected={selectedImageIds.includes(secondImg.id)} img={secondImg} size={size.middle} style={style[1]} {...imgEvents} />
+  //       <Image key={others[0].id} isSelected={selectedImageIds.includes(others[0].id)} img={others[0]} size={size.middle} style={style[2]} {...imgEvents} />
+  //       {others.slice(1, 7).map((image, index) => {
+  //         return (<Image key={image.id} isSelected={selectedImageIds.includes(image.id)} img={image} size={size.small} style={style[index + 3] || {}} {...imgEvents} />);
+  //       })}
+  //     </>
+  //   );
+  // }
+
+  // Two medium images, ten small images
+  const styles = [
     [
-      { position: 'absolute', top: 0, left: 0 },
+      /*
+        - - * * * *
+        - - * * - -
+        * * * * - -
+      */
+      { gridRow: '1 / 2', gridColumn: '1 / 2' },
+      { gridRow: '2 / 3', gridColumn: '5 / 6' },
       { gridRow: 1, gridColumn: 3 },
+      { gridRow: 1, gridColumn: 4 },
+      { gridRow: 1, gridColumn: 5 },
+      { gridRow: 1, gridColumn: 6 },
       { gridRow: 2, gridColumn: 3 },
+      { gridRow: 2, gridColumn: 4 },
       { gridRow: 3, gridColumn: 1 },
       { gridRow: 3, gridColumn: 2 },
       { gridRow: 3, gridColumn: 3 },
+      { gridRow: 3, gridColumn: 4 },
     ], [
-      { position: 'absolute', top: 0, left: size.small + GALLERY_DEFAULT_GRID_GAP },
+      /*
+        * * * * - -
+        - - * * - -
+        - - * * * *
+      */
+      { gridRow: '1 / 2', gridColumn: '5 / 6' },
+      { gridRow: '2 / 3', gridColumn: '1 / 2' },
       { gridRow: 1, gridColumn: 1 },
-      { gridRow: 2, gridColumn: 1 },
+      { gridRow: 1, gridColumn: 2 },
+      { gridRow: 1, gridColumn: 3 },
+      { gridRow: 1, gridColumn: 4 },
+      { gridRow: 2, gridColumn: 3 },
+      { gridRow: 2, gridColumn: 4 },
+      { gridRow: 3, gridColumn: 3 },
+      { gridRow: 3, gridColumn: 4 },
+      { gridRow: 3, gridColumn: 5 },
+      { gridRow: 3, gridColumn: 6 },
+    ], [
+      /*
+        - - * - - *
+        - - * - - *
+        * * * * * *
+      */
+      { gridRow: '1 / 2', gridColumn: '1 / 2' },
+      { gridRow: '1 / 2', gridColumn: '4 / 5' },
+      { gridRow: 1, gridColumn: 3 },
+      { gridRow: 1, gridColumn: 6 },
+      { gridRow: 2, gridColumn: 3 },
+      { gridRow: 2, gridColumn: 6 },
       { gridRow: 3, gridColumn: 1 },
       { gridRow: 3, gridColumn: 2 },
       { gridRow: 3, gridColumn: 3 },
+      { gridRow: 3, gridColumn: 4 },
+      { gridRow: 3, gridColumn: 5 },
+      { gridRow: 3, gridColumn: 6 },
     ], [
-      { position: 'absolute', top: size.small + GALLERY_DEFAULT_GRID_GAP, left: 0 },
-      { gridRow: 1, gridColumn: 1 },
-      { gridRow: 1, gridColumn: 2 },
+      /*
+        - - * * * *
+        - - * - - *
+        * * * - - *
+      */
+      { gridRow: '1 / 2', gridColumn: '1 / 2' },
+      { gridRow: '2 / 3', gridColumn: '4 / 5' },
       { gridRow: 1, gridColumn: 3 },
+      { gridRow: 1, gridColumn: 4 },
+      { gridRow: 1, gridColumn: 5 },
+      { gridRow: 1, gridColumn: 6 },
       { gridRow: 2, gridColumn: 3 },
-      { gridRow: 3, gridColumn: 3 },
-    ], [
-      { position: 'absolute', top: size.small + GALLERY_DEFAULT_GRID_GAP, left: size.small + GALLERY_DEFAULT_GRID_GAP },
-      { gridRow: 1, gridColumn: 1 },
-      { gridRow: 1, gridColumn: 2 },
-      { gridRow: 1, gridColumn: 3 },
-      { gridRow: 2, gridColumn: 1 },
+      { gridRow: 2, gridColumn: 6 },
       { gridRow: 3, gridColumn: 1 },
+      { gridRow: 3, gridColumn: 2 },
+      { gridRow: 3, gridColumn: 3 },
+      { gridRow: 3, gridColumn: 6 },
     ]
   ];
-
-  let day = images[0].day;
-  day = day ? Number(day) : 0;
-  const styles = allStyles[day % 4];
+  const style = styles[day % styles.length];
 
   return (
-    <div
-      className="position-relative"
-      style={{
-        display: 'grid',
-        gridTemplateColumns: `repeat(3, ${size.small}px)`,
-        gridTemplateRows: `repeat(3, ${size.small}px)`,
-        width: size.large,
-        height: size.large,
-        gap: GALLERY_DEFAULT_GRID_GAP,
-      }}
-    >
-      <Image key={images[0].id} img={images[0]} size={size.middle} {...imgEvents} style={styles[0]} />
-      {images.slice(1, 6).map((image, index) => {
-        const style = styles[index + 1] || {};
-        return (<Image key={image.id} img={image} size={size.small} style={style} {...imgEvents} />);
+    <>
+      <Image key={firstImg.id} isSelected={selectedImageIds.includes(firstImg.id)} img={firstImg} size={size.middle} style={style[0]} {...imgEvents} />
+      <Image key={secondImg.id} isSelected={selectedImageIds.includes(secondImg.id)} img={secondImg} size={size.middle} style={style[1]} {...imgEvents} />
+      {others.slice(0, 10).map((image, index) => {
+        return (<Image key={image.id} isSelected={selectedImageIds.includes(image.id)} img={image} size={size.small} style={style[index + 2] || {}} {...imgEvents} />);
       })}
-    </div>
+    </>
   );
+
 };
 
 ImagesGrid.propTypes = {
   images: PropTypes.array.isRequired,
+  selectedImageIds: PropTypes.array,
   size: PropTypes.object.isRequired,
   imgEvents: PropTypes.object,
 };
diff --git a/frontend/src/metadata/views/gallery/day-images/index.js b/frontend/src/metadata/views/gallery/day-images/index.js
index 0e5db8eda7..dcf9b27786 100644
--- a/frontend/src/metadata/views/gallery/day-images/index.js
+++ b/frontend/src/metadata/views/gallery/day-images/index.js
@@ -3,43 +3,26 @@ import PropTypes from 'prop-types';
 import Image from '../image';
 import ImagesGrid from './images-grid';
 
-const DayImages = ({ size, images, imgEvents }) => {
+const DayImages = ({ size, selectedImageIds, images, imgEvents }) => {
   const imagesCount = Array.isArray(images) ? images.length : 0;
   if (imagesCount === 0) return null;
   if (imagesCount === 1) {
     const img = images[0];
-    return (<Image img={img} size={size.large} style={{ width: '100%' }} {...imgEvents} />);
+    return (<Image isSelected={selectedImageIds.includes(img.id)} img={img} size={size.large} style={{ width: '100%' }} {...imgEvents} />);
   }
 
   if (imagesCount < 7) {
     const imgs = images.slice(0, 2);
-    return imgs.map(img => (<Image key={img.id} img={img} size={size.large} {...imgEvents} />));
-  }
-  if (imagesCount < 12) {
-    const i = imagesCount % 2;
-    const firstImg = images[0];
-    const renderContent = [
-      (<Image key={firstImg.id} img={firstImg} size={size.large} {...imgEvents} />),
-      (<ImagesGrid key={firstImg.id + '_'} images={images.slice(1)} size={size} imgEvents={imgEvents} />)
-    ];
-    return (
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
-        {i === 0 ? renderContent : [renderContent[1], renderContent[0]]}
-      </div>
-    );
+    return imgs.map(img => (<Image key={img.id} isSelected={selectedImageIds.includes(img.id)} img={img} size={size.large} {...imgEvents} />));
   }
 
-  return (
-    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
-      <ImagesGrid key="1" images={images.slice(0, 6)} size={size} imgEvents={imgEvents} />
-      <ImagesGrid key="2" images={images.slice(6, 12)} size={size} imgEvents={imgEvents} />
-    </div>
-  );
+  return (<ImagesGrid selectedImageIds={selectedImageIds} images={images} size={size} imgEvents={imgEvents} />);
 };
 
 DayImages.propTypes = {
   size: PropTypes.object,
   images: PropTypes.array,
+  selectedImageIds: PropTypes.array,
   imgEvents: PropTypes.object,
 };
 
diff --git a/frontend/src/metadata/views/gallery/main.js b/frontend/src/metadata/views/gallery/main.js
index 2130009451..788d7e7bae 100644
--- a/frontend/src/metadata/views/gallery/main.js
+++ b/frontend/src/metadata/views/gallery/main.js
@@ -93,7 +93,6 @@ const Main = ({ isLoadingMore, metadata, onDelete, onLoadMore, duplicateRecord,
       const { children, ...__init } = _init;
       let top = 0;
       let rows = [];
-      let displayChildren = [];
       if (index > 0) {
         const lastGroup = _groups[index - 1];
         const { top: lastGroupTop, height: lastGroupHeight } = lastGroup;
@@ -107,16 +106,14 @@ const Main = ({ isLoadingMore, metadata, onDelete, onLoadMore, duplicateRecord,
         rows[rowIndex].children.push(child);
       });
 
-      if (mode === GALLERY_DATE_MODE.YEAR) displayChildren = rows.slice(0, 1);
-      if (mode === GALLERY_DATE_MODE.MONTH) displayChildren = rows.slice(0, 1);
-      if (mode === GALLERY_DATE_MODE.DAY) displayChildren = [{ top: rows[0].top, children: rows.flatMap(r => r.children) }];
-      if (mode === GALLERY_DATE_MODE.ALL) displayChildren = rows;
+      if (mode === GALLERY_DATE_MODE.YEAR) rows = rows.slice(0, 1);
+      if (mode === GALLERY_DATE_MODE.MONTH) rows = rows.slice(0, 1);
+      if (mode === GALLERY_DATE_MODE.DAY) rows = [{ top: rows[0].top, children: rows.slice(0, 2).flatMap(r => r.children) }];
       _groups.push({
         ...__init,
         top,
-        height: displayChildren.length * rowHeight + paddingTop,
+        height: rows.length * rowHeight + paddingTop,
         paddingTop,
-        displayChildren,
         children: rows
       });
     });