diff --git a/src/components/ImageViewer/ImageViewer.tsx b/src/components/ImageViewer/ImageViewer.tsx
new file mode 100644
index 0000000..c6e4a47
--- /dev/null
+++ b/src/components/ImageViewer/ImageViewer.tsx
@@ -0,0 +1,82 @@
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonModal,
+  IonSlide,
+  IonSlides,
+  IonToolbar,
+} from '@ionic/react';
+import { close } from 'ionicons/icons';
+import React, {
+  cloneElement,
+  ReactElement,
+  SyntheticEvent,
+  useState,
+} from 'react';
+import './imageViewer.css';
+
+type ContainerProps = {
+  alt: string;
+  class?: string;
+  children?: ReactElement;
+  className?: string;
+  onError?:
+    | ((event: SyntheticEvent<HTMLImageElement, Event>) => void)
+    | undefined;
+  src: string;
+  open?: boolean;
+};
+
+export const ImageViewer: React.FC<ContainerProps> = (props) => {
+  const { alt, children, onError = () => {}, open = false, src } = props;
+
+  const [isOpen, setIsOpen] = useState(open);
+
+  const slideOpts = {
+    passiveListeners: false,
+    zoom: {
+      maxRatio: 5,
+    },
+  };
+
+  return (
+    <>
+      <IonModal
+        cssClass="image-viewer"
+        isOpen={isOpen}
+        onDidDismiss={() => setIsOpen(false)}
+        swipeToClose
+      >
+        <IonHeader translucent>
+          <IonToolbar>
+            <IonButtons slot="end">
+              <IonButton onClick={() => setIsOpen(false)}>
+                <IonIcon icon={close}></IonIcon>
+              </IonButton>
+            </IonButtons>
+          </IonToolbar>
+        </IonHeader>
+        <IonContent fullscreen>
+          <IonSlides
+            options={slideOpts}
+            // Current workaround for strangely behavior of slides
+            // see: https://github.com/ionic-team/ionic-framework/issues/19638#issuecomment-593412711
+            onIonSlidesDidLoad={function (this: any) {
+              this.update();
+            }}
+          >
+            <IonSlide>
+              <img alt={alt} onError={onError} src={src} />
+            </IonSlide>
+          </IonSlides>
+        </IonContent>
+      </IonModal>
+      {cloneElement(children as ReactElement, {
+        onClick: () => setIsOpen(true),
+      })}
+    </>
+  );
+};
diff --git a/src/components/ImageViewer/imageViewer.css b/src/components/ImageViewer/imageViewer.css
new file mode 100644
index 0000000..4025cc2
--- /dev/null
+++ b/src/components/ImageViewer/imageViewer.css
@@ -0,0 +1,31 @@
+.image-viewer {
+  --border-radius: 0;
+  --background: transparent;
+}
+
+.image-viewer ion-slides {
+  height: 100vh;
+}
+
+.image-viewer ion-slides img {
+  height: 100vh;
+}
+
+.image-viewer ion-toolbar {
+  --background: transparent;
+  --border-width: 0 !important;
+  position: absolute;
+}
+
+.image-viewer ion-toolbar::after {
+  display: none;
+}
+
+.image-viewer .modal-wrapper {
+  display: block;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
diff --git a/src/components/ImageViewer/index.tsx b/src/components/ImageViewer/index.tsx
new file mode 100644
index 0000000..9d28e7f
--- /dev/null
+++ b/src/components/ImageViewer/index.tsx
@@ -0,0 +1 @@
+export { ImageViewer } from './ImageViewer';
diff --git a/src/data/chapter/chapter01.tsx b/src/data/chapter/chapter01.tsx
index d5d180c..eba74bd 100644
--- a/src/data/chapter/chapter01.tsx
+++ b/src/data/chapter/chapter01.tsx
@@ -1,8 +1,10 @@
 import { IonImg, IonText } from '@ionic/react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { ImageViewer } from '../../components/ImageViewer';
+import { ChapterId } from '../../utils/chapters';
 
-const CHAPTER_ID = '01';
+const CHAPTER_ID: ChapterId = '01';
 
 export const Section01 = () => {
   const sectionId = '01';
@@ -30,10 +32,15 @@ export const Section01 = () => {
         <li>{t(`CHAPTER.${CHAPTER_ID}.${sectionId}.TEXT.LIST.01.070000`)}</li>
         <li>{t(`CHAPTER.${CHAPTER_ID}.${sectionId}.TEXT.LIST.01.080000`)}</li>
       </ul>
-      <IonImg
-        class="ion-padding-vertical"
+      <ImageViewer
+        alt={t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.FILENAME`)}
         src={t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.FILENAME`)}
-      />
+      >
+        <IonImg
+          class="ion-padding-vertical"
+          src={t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.THUMBNAIL.LARGE`)}
+        />
+      </ImageViewer>
       <IonText class="ion-padding-bottom" className="image-text">
         {t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.TITLE`)}
       </IonText>
@@ -56,10 +63,15 @@ export const Section02 = () => {
         <li>{t(`CHAPTER.${CHAPTER_ID}.${sectionId}.TEXT.LIST.01.050000`)}</li>
         <li>{t(`CHAPTER.${CHAPTER_ID}.${sectionId}.TEXT.LIST.01.060000`)}</li>
       </ul>
-      <IonImg
-        class="ion-padding-vertical"
+      <ImageViewer
+        alt={t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.FILENAME`)}
         src={t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.FILENAME`)}
-      />
+      >
+        <IonImg
+          class="ion-padding-vertical"
+          src={t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.THUMBNAIL.LARGE`)}
+        />
+      </ImageViewer>
       <IonText class="ion-padding-bottom" className="image-text">
         {t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.TITLE`)}
       </IonText>
@@ -81,10 +93,15 @@ export const Section03 = () => {
         <li>{t(`CHAPTER.${CHAPTER_ID}.${sectionId}.TEXT.LIST.01.050000`)}</li>
         <li>{t(`CHAPTER.${CHAPTER_ID}.${sectionId}.TEXT.LIST.01.060000`)}</li>
       </ul>
-      <IonImg
-        class="ion-padding-vertical"
+      <ImageViewer
+        alt={t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.FILENAME`)}
         src={t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.FILENAME`)}
-      />
+      >
+        <IonImg
+          class="ion-padding-vertical"
+          src={t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.THUMBNAIL.LARGE`)}
+        />
+      </ImageViewer>
       <IonText class="ion-padding-bottom" className="image-text">
         {t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.TITLE`)}
       </IonText>
@@ -115,10 +132,15 @@ export const Section04 = () => {
         </ul>
         <li>{t(`CHAPTER.${CHAPTER_ID}.${sectionId}.TEXT.LIST.01.040000`)}</li>
       </ul>
-      <IonImg
-        class="ion-padding-vertical"
+      <ImageViewer
+        alt={t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.FILENAME`)}
         src={t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.FILENAME`)}
-      />
+      >
+        <IonImg
+          class="ion-padding-vertical"
+          src={t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.THUMBNAIL.LARGE`)}
+        />
+      </ImageViewer>
       <IonText class="ion-padding-bottom" className="image-text">
         {t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.TITLE`)}
       </IonText>
diff --git a/src/data/chapter/chapter02.tsx b/src/data/chapter/chapter02.tsx
index f2e4d9f..3051021 100644
--- a/src/data/chapter/chapter02.tsx
+++ b/src/data/chapter/chapter02.tsx
@@ -1,8 +1,10 @@
 import { IonImg, IonText } from '@ionic/react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { ImageViewer } from '../../components/ImageViewer';
+import { ChapterId } from '../../utils/chapters';
 
-const CHAPTER_ID = '02';
+const CHAPTER_ID: ChapterId = '02';
 
 export const Section01 = () => {
   const sectionId = '01';
@@ -16,15 +18,20 @@ export const Section01 = () => {
         <li>{t(`CHAPTER.${CHAPTER_ID}.${sectionId}.TEXT.LIST.01.020000`)}</li>
         <li>{t(`CHAPTER.${CHAPTER_ID}.${sectionId}.TEXT.LIST.01.030000`)}</li>
         <li>{t(`CHAPTER.${CHAPTER_ID}.${sectionId}.TEXT.LIST.01.040000`)}</li>
-        <div>
+        <ImageViewer
+          alt={t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.FILENAME`)}
+          src={t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.FILENAME`)}
+        >
           <IonImg
             class="ion-padding-vertical"
-            src={t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.FILENAME`)}
+            src={t(
+              `CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.THUMBNAIL.LARGE`,
+            )}
           />
-          <IonText class="ion-padding-bottom" className="image-text">
-            {t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.TITLE`)}
-          </IonText>
-        </div>
+        </ImageViewer>
+        <IonText class="ion-padding-bottom" className="image-text">
+          {t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.TITLE`)}
+        </IonText>
         <li>{t(`CHAPTER.${CHAPTER_ID}.${sectionId}.TEXT.LIST.01.050000`)}</li>
         <ul>
           <li>{t(`CHAPTER.${CHAPTER_ID}.${sectionId}.TEXT.LIST.01.050100`)}</li>
@@ -33,15 +40,20 @@ export const Section01 = () => {
         <li>{t(`CHAPTER.${CHAPTER_ID}.${sectionId}.TEXT.LIST.01.070000`)}</li>
         <li>{t(`CHAPTER.${CHAPTER_ID}.${sectionId}.TEXT.LIST.01.080000`)}</li>
         <li>{t(`CHAPTER.${CHAPTER_ID}.${sectionId}.TEXT.LIST.01.090000`)}</li>
-        <div>
+        <ImageViewer
+          alt={t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.02.FILENAME`)}
+          src={t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.02.FILENAME`)}
+        >
           <IonImg
             class="ion-padding-vertical"
-            src={t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.02.FILENAME`)}
+            src={t(
+              `CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.02.THUMBNAIL.LARGE`,
+            )}
           />
-          <IonText class="ion-padding-bottom" className="image-text">
-            {t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.02.TITLE`)}
-          </IonText>
-        </div>
+        </ImageViewer>
+        <IonText class="ion-padding-bottom" className="image-text">
+          {t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.02.TITLE`)}
+        </IonText>
       </ul>
     </IonText>
   );
@@ -63,10 +75,15 @@ export const Section02 = () => {
         <li>{t(`CHAPTER.${CHAPTER_ID}.${sectionId}.TEXT.LIST.01.060000`)}</li>
         <li>{t(`CHAPTER.${CHAPTER_ID}.${sectionId}.TEXT.LIST.01.070000`)}</li>
       </ul>
-      <IonImg
-        class="ion-padding-vertical"
+      <ImageViewer
+        alt={t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.FILENAME`)}
         src={t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.FILENAME`)}
-      />
+      >
+        <IonImg
+          class="ion-padding-vertical"
+          src={t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.THUMBNAIL.LARGE`)}
+        />
+      </ImageViewer>
       <IonText class="ion-padding-bottom" className="image-text">
         {t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.TITLE`)}
       </IonText>
@@ -91,10 +108,15 @@ export const Section03 = () => {
         <li>{t(`CHAPTER.${CHAPTER_ID}.${sectionId}.TEXT.LIST.01.080000`)}</li>
         <li>{t(`CHAPTER.${CHAPTER_ID}.${sectionId}.TEXT.LIST.01.090000`)}</li>
       </ul>
-      <IonImg
-        class="ion-padding-vertical"
+      <ImageViewer
+        alt={t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.FILENAME`)}
         src={t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.FILENAME`)}
-      />
+      >
+        <IonImg
+          class="ion-padding-vertical"
+          src={t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.THUMBNAIL.LARGE`)}
+        />
+      </ImageViewer>
       <IonText class="ion-padding-bottom" className="image-text">
         {t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.TITLE`)}
       </IonText>
@@ -112,16 +134,19 @@ export const Section04 = () => {
       <ul>
         <li>{t(`CHAPTER.${CHAPTER_ID}.${sectionId}.TEXT.LIST.01.010000`)}</li>
         <li>{t(`CHAPTER.${CHAPTER_ID}.${sectionId}.TEXT.LIST.01.020000`)}</li>
-        <div className="chapter-image-title">
-          <IonImg
-            class="ion-padding-vertical"
-            src={t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.FILENAME`)}
-          />
-          <IonText class="ion-padding-bottom" className="image-text">
-            {t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.TITLE`)}
-          </IonText>
-        </div>
       </ul>
+      <ImageViewer
+        alt={t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.FILENAME`)}
+        src={t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.FILENAME`)}
+      >
+        <IonImg
+          class="ion-padding-vertical"
+          src={t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.THUMBNAIL.LARGE`)}
+        />
+      </ImageViewer>
+      <IonText class="ion-padding-bottom" className="image-text">
+        {t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.TITLE`)}
+      </IonText>
       <p>{t(`CHAPTER.${CHAPTER_ID}.${sectionId}.TEXT.PARAGRAPH.02`)}</p>
       <ul>
         <li>{t(`CHAPTER.${CHAPTER_ID}.${sectionId}.TEXT.LIST.02.010000`)}</li>
@@ -129,15 +154,18 @@ export const Section04 = () => {
         <li>{t(`CHAPTER.${CHAPTER_ID}.${sectionId}.TEXT.LIST.02.030000`)}</li>
       </ul>
       <p>{t(`CHAPTER.${CHAPTER_ID}.${sectionId}.TEXT.PARAGRAPH.03`)}</p>
-      <div className="chapter-image-title">
+      <ImageViewer
+        alt={t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.02.FILENAME`)}
+        src={t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.02.FILENAME`)}
+      >
         <IonImg
           class="ion-padding-vertical"
-          src={t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.02.FILENAME`)}
+          src={t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.02.THUMBNAIL.LARGE`)}
         />
-        <IonText class="ion-padding-bottom" className="image-text">
-          {t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.02.TITLE`)}
-        </IonText>
-      </div>
+      </ImageViewer>
+      <IonText class="ion-padding-bottom" className="image-text">
+        {t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.02.TITLE`)}
+      </IonText>
     </IonText>
   );
 };
@@ -156,15 +184,18 @@ export const Section05 = () => {
         <li>{t(`CHAPTER.${CHAPTER_ID}.${sectionId}.TEXT.LIST.01.040000`)}</li>
         <li>{t(`CHAPTER.${CHAPTER_ID}.${sectionId}.TEXT.LIST.01.050000`)}</li>
       </ul>
-      <div className="chapter-image-title">
+      <ImageViewer
+        alt={t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.FILENAME`)}
+        src={t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.FILENAME`)}
+      >
         <IonImg
           class="ion-padding-vertical"
-          src={t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.FILENAME`)}
+          src={t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.THUMBNAIL.LARGE`)}
         />
-        <IonText class="ion-padding-bottom" className="image-text">
-          {t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.TITLE`)}
-        </IonText>
-      </div>
+      </ImageViewer>
+      <IonText class="ion-padding-bottom" className="image-text">
+        {t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.TITLE`)}
+      </IonText>
     </IonText>
   );
 };
@@ -189,15 +220,18 @@ export const Section06 = () => {
           <li>{t(`CHAPTER.${CHAPTER_ID}.${sectionId}.TEXT.LIST.01.020300`)}</li>
         </ul>
       </ul>
-      <div className="chapter-image-title">
+      <ImageViewer
+        alt={t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.FILENAME`)}
+        src={t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.FILENAME`)}
+      >
         <IonImg
           class="ion-padding-vertical"
-          src={t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.FILENAME`)}
+          src={t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.THUMBNAIL.LARGE`)}
         />
-        <IonText class="ion-padding-bottom" className="image-text">
-          {t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.TITLE`)}
-        </IonText>
-      </div>
+      </ImageViewer>
+      <IonText class="ion-padding-bottom" className="image-text">
+        {t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.TITLE`)}
+      </IonText>
     </IonText>
   );
 };