diff --git a/src/doc/_applications.html b/src/doc/_applications.html
new file mode 100644
index 0000000000000000000000000000000000000000..6721f45365decbc4443d177f5e35b4faf00e9acc
--- /dev/null
+++ b/src/doc/_applications.html
@@ -0,0 +1,8 @@
+<h1 id="title">Some Applications</h1>
+<div id="images">
+  <img src="img/applications-medical-imaging.png" alt="">
+  <img src="img/applications-augmented-reality.png" alt="">
+  <img src="img/applications-object-annotation.png" alt="">
+  <img src="img/applications-object-recognition.png" alt="">
+</div>
+
diff --git a/src/doc/img/applications-augmented-reality.png b/src/doc/img/applications-augmented-reality.png
new file mode 100644
index 0000000000000000000000000000000000000000..18d909762b4cdd90f7d3e4e2b867e92d144e47e7
Binary files /dev/null and b/src/doc/img/applications-augmented-reality.png differ
diff --git a/src/doc/img/applications-medical-imaging.png b/src/doc/img/applications-medical-imaging.png
new file mode 100644
index 0000000000000000000000000000000000000000..7823332d9e7e65f2302ac247b1a117d484cee69c
Binary files /dev/null and b/src/doc/img/applications-medical-imaging.png differ
diff --git a/src/doc/img/applications-object-annotation.png b/src/doc/img/applications-object-annotation.png
new file mode 100644
index 0000000000000000000000000000000000000000..a2655498c40a99e97388416dafd53e725543a706
Binary files /dev/null and b/src/doc/img/applications-object-annotation.png differ
diff --git a/src/doc/img/applications-object-recognition.png b/src/doc/img/applications-object-recognition.png
new file mode 100644
index 0000000000000000000000000000000000000000..0103e145c68cba6da84104b7f6bcae66935115f0
Binary files /dev/null and b/src/doc/img/applications-object-recognition.png differ
diff --git a/src/doc/index.html b/src/doc/index.html
index 62f389f5706c11e887c591e45bf376d92eb5a722..2a4d6d914f04fd32959967c507b6f0279d4debef 100644
--- a/src/doc/index.html
+++ b/src/doc/index.html
@@ -12,6 +12,7 @@
     <div id="canvas">
       %cover%
       %image-segmentation%
+      %applications%
     </div>
   </div>
   <div id="scrubber">
diff --git a/src/doc/scss/ift.scss b/src/doc/scss/ift.scss
index 99997ebe4144086fe701d2784cf12db575eede70..76393a8261bacb59194874f2de1d67a89e5a6299 100644
--- a/src/doc/scss/ift.scss
+++ b/src/doc/scss/ift.scss
@@ -7,3 +7,4 @@
 @import "module/scrubber";
 @import "module/cover";
 @import "module/image-segmentation";
+@import "module/applications";
diff --git a/src/doc/scss/module/_applications.scss b/src/doc/scss/module/_applications.scss
new file mode 100644
index 0000000000000000000000000000000000000000..3ef9f6c68d9163331204a91f99ffa1f6b8f015c9
--- /dev/null
+++ b/src/doc/scss/module/_applications.scss
@@ -0,0 +1,15 @@
+#applications {
+  transform: translate(20vw, -25vh);
+  display: flex;
+  flex-direction: column;
+  width: 70vw;
+}
+#applications-images {
+  display: flex;
+  img {
+    flex: 1;
+  }
+}
+#applications-title {
+  text-align: right;
+}
\ No newline at end of file
diff --git a/src/doc/scss/module/_image-segmentation.scss b/src/doc/scss/module/_image-segmentation.scss
index 29e75523b03fedbbf35b137af87d0183fde0bc1f..36ac171054fe159e18bb0449a875399babda001b 100644
--- a/src/doc/scss/module/_image-segmentation.scss
+++ b/src/doc/scss/module/_image-segmentation.scss
@@ -1,11 +1,3 @@
-<<<<<<< HEAD
-#image-segmentation-image {
-
-}
-
-#image-segmentation-result {
-  
-=======
 #image-segmentation {
   transform: translate(0vw, -20vh);
   padding: 2vmin;
@@ -15,5 +7,4 @@
 }
 #image-segmentation-images {
   display: flex;
->>>>>>> Cover, Deck, Scrubber, Transitions, Animations
 }
\ No newline at end of file
diff --git a/src/doc/ts/ift.ts b/src/doc/ts/ift.ts
index 54de97e99cec31fc486558b43e464be7083a4240..c11ca9963c52dc0f0771c37a91c107567fd61823 100644
--- a/src/doc/ts/ift.ts
+++ b/src/doc/ts/ift.ts
@@ -16,6 +16,8 @@ document.addEventListener("DOMContentLoaded", () => {
   const imageSegmentationImage = $("image-segmentation-image");
   const imageSegmentationMask = $("image-segmentation-mask");
   const imageSegmentationResult = $("image-segmentation-result");
+  const applicationsTitle = $("applications-title");
+  const applicationsImages = $("applications-images");
 
   let deck: Deck;
 
@@ -38,10 +40,14 @@ document.addEventListener("DOMContentLoaded", () => {
 
   deck.addElementAnimation(coverTitle, [0, 1000], fx.fxFadeInLeft);
   deck.addElementAnimation(coverDetails, [0, 1000], fx.fxFadeInLeft);
+  deck.addElementAnimation(cover, [1000, 1500], fx.fxFadeOutSemi);
   deck.addElementAnimation(imageSegmentationTitle, [1500, 2000], fx.fxFadeIn);
   deck.addElementAnimation(imageSegmentationImage, [2000, 2500], fx.fxFadeIn);
   deck.addElementAnimation(imageSegmentationMask, [2500, 3000], fx.fxFadeIn);
   deck.addElementAnimation(imageSegmentationResult, [3000, 3500], fx.fxFadeIn);
+  deck.addElementAnimation(imageSegmentation, [3500, 4000], fx.fxFadeOutSemi);
+  deck.addElementAnimation(applicationsTitle, [3500, 4000], fx.fxFadeInLeft);
+  deck.addElementAnimation(applicationsImages, [3800, 4300], fx.fxFadeIn);
 
   // deck.add(coverTitle.animate(fx.fxFadeInLeft, { easing: "ease-in-out", duration: 1000 }));
   // deck.add(coverDetails.animate(fx.fxFadeInLeft, {duration: 1000, delay: 0, easing: "ease-in-out"}));