diff --git a/index.html b/index.html
index 7f47e7c..bb96dc7 100644
--- a/index.html
+++ b/index.html
@@ -145,7 +145,7 @@ <h1 class="title is-1 publication-title">
             <source src="./static/videos/DAVI_framework.mp4" type="video/mp4" />
           </video>
           <h2 class="subtitle has-text-centered">
-            <span class="dnerf">DAVI</span>'s the alternative optimization
+            <span class="dnerf">DAVI</span>'s alternative optimization
             procedure.
           </h2>
         </div>
@@ -370,17 +370,17 @@ <h4 class="chart-title">NFEs for Inference</h2>
                 <p id="caption" class="chart-caption">DAVI performs a single-step inference (x20~100 faster).</p>
                 <p>This graph shows the Number of Function Evaluations (NFEs) required for inference, <br>plotted on a logarithmic scale to highlight differences across varying magnitudes.</p>
               </div>
-            <h2></h2>
-            <!-- On/Off Switch -->
-            <div class="switch-container">
-              <label class="switch">
-                <input type="checkbox" id="modeToggle" onchange="toggleMode()">
-                <span class="slider-switch">
-                  <span class="slider-labels">
-                    <span class="on-label">FFHQ</span>
-                    <span class="off-label">ImageNet</span>
-                  </span>
-                </span>
+            <!-- Radio boxes -->
+            <div class="radio-container">
+              <label class="custom-radio">
+                <input type="radio" name="dataset" id="FFHQ" value="FFHQ" checked onclick="toggleMode('FFHQ')">
+                <span class="radio-checkmark"></span>
+                FFHQ
+              </label>
+              <label class="custom-radio">
+                <input type="radio" name="dataset" id="ImageNet" value="ImageNet" onclick="toggleMode('ImageNet')">
+                <span class="radio-checkmark"></span>
+                ImageNet
               </label>
             </div>
             <!--Task Buttons-->
@@ -429,6 +429,54 @@ <h2></h2>
       </div>
     </section>
 
+    <section class="section">
+      <div class="container is-max-desktop">
+        <div class="columns is-centered">
+          <div class="column">
+            <div class="content">
+              <h2 class="title is-3-titleInline">Extensive results of Out-of-distribution</h2>
+            <!-- Radio boxes -->
+            <div class="radio-container">
+              <label class="custom-radio ood">
+                <input type="radio" name="dataset" id="CelebA" value="CelebA" checked onclick="toggleMode_ood('CelebA')">
+                <span class="radio-checkmark"></span>
+                CelebA-HQ
+              </label>
+              <label class="custom-radio ood">
+                <input type="radio" name="dataset" id="GoPro" value="GoPro" onclick="toggleMode_ood('GoPro')">
+                <span class="radio-checkmark"></span>
+                GoPro
+              </label>
+            </div>
+            <!-- Image Pair Container -->
+            <div class="image-comparison-container">
+              <button
+                class="slider-comparison leftside-comparison"
+                onclick="prevImage_ood()"
+              >
+                &#10094;
+              </button>
+              <div class="fixed-comparison" id="fixedImage_ood"></div>
+              <button
+                class="slider-comparison rightside-comparison"
+                onclick="nextImage_ood()"
+              >
+                &#10095;
+              </button>
+            </div>
+            <!-- Dots for navigation -->
+            <div class="dots-navigation">
+              <span class="dotood" onclick="selectImage_ood(0)"></span>
+              <span class="dotood" onclick="selectImage_ood(1)"></span>
+              <span class="dotood" onclick="selectImage_ood(2)"></span>
+            </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+
     <section class="section" id="BibTeX">
       <div class="container is-max-desktop content">
         <h2 class="title">BibTeX</h2>
diff --git a/static/css/index.css b/static/css/index.css
index 84dc616..fa415d0 100644
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -12,10 +12,12 @@ body {
   margin-bottom: 20px;
   flex-wrap: nowrap;
   overflow-x: auto;
-  justify-content: space-between; 
+  justify-content: space-between;
 }
 
-.task-button, .task-button_imgnet, .task-button_onoff {
+.task-button,
+.task-button_imgnet,
+.task-button_onoff {
   flex: 1 1 auto;
   background-color: hwb(217 26% 15% / 0.968);
   border: none;
@@ -33,8 +35,8 @@ body {
   transition: color 0.1s ease;
 }
 
-.task-button.active, 
-.task-button_imgnet.active, 
+.task-button.active,
+.task-button_imgnet.active,
 .task-button_onoff.active {
   color: black;
 }
@@ -59,7 +61,7 @@ body {
 
 .image-comparison-container {
   display: flex;
-  justify-content: space-between; 
+  justify-content: space-between;
   align-items: center;
   width: 100%;
   height: auto;
@@ -68,7 +70,7 @@ body {
 }
 
 .fixed-comparison {
-  flex-grow: 1; 
+  flex-grow: 1;
   max-width: 100%;
   height: auto;
   background-size: contain;
@@ -127,31 +129,31 @@ body {
   font-weight: bold;
   padding: 0 15px;
   box-sizing: border-box;
-  font-size: calc(1.2rem + 0.5vw); 
+  font-size: calc(1.2rem + 0.5vw);
 }
 
 .on-label {
   color: white;
   flex: 0 0 50%;
-  text-align: left; 
-  z-index: 1; 
+  text-align: left;
+  z-index: 1;
   transition: color 0.1s ease;
 }
 
 .off-label {
   color: #ee6c97;
-  flex: 0 0 50%; 
-  text-align: left; 
-  z-index: 1; 
+  flex: 0 0 50%;
+  text-align: left;
+  z-index: 1;
   transition: color 0.1s ease;
 }
 
 .slider-switch:before {
-  display:none;
+  display: none;
 }
 
 input:checked + .slider-switch {
-  background-color: #5cacf8; 
+  background-color: #5cacf8;
 }
 
 input:checked ~ .slider-switch .on-label {
@@ -159,7 +161,80 @@ input:checked ~ .slider-switch .on-label {
 }
 
 input:checked ~ .slider-switch .off-label {
-  color: white; 
+  color: white;
+}
+
+.radio-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 20px;
+  margin-top: 20px;
+}
+
+.custom-radio {
+  position: relative;
+  padding-left: 50px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  padding-right: 15px;
+  margin-right: 10px;
+  cursor: pointer;
+  font-size: 25px;
+  font-weight: bold;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  border-radius: 15px;
+  background-color: rgb(255, 216, 97);
+}
+
+.custom-radio.ood {
+  background-color: rgb(255, 146, 127);
+}
+
+.custom-radio input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.radio-checkmark {
+  position: absolute;
+  top: 50%;
+  left: 10%;
+  transform: translateY(-50%);
+  height: 25px;
+  width: 25px;
+  background-color: white;
+  border: 2px solid #ccc;
+  border-radius: 50%;
+}
+
+.custom-radio input:checked ~ .radio-checkmark:after {
+  content: '';
+  position: absolute;
+  display: block;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background-color: #5cacf8;
+}
+
+.custom-radio input:checked ~ .radio-checkmark {
+  border-color: #5cacf8;
+}
+
+.custom-radio:hover input ~ .radio-checkmark {
+  background-color: #f1f1f1;
+}
+
+.custom-radio:hover input:checked ~ .radio-checkmark {
+  background-color: white;
 }
 
 .fixed-image,
@@ -223,7 +298,7 @@ input:checked ~ .slider-switch .off-label {
 
 .slider-comparison {
   position: absolute;
-  top: 50%; 
+  top: 50%;
   transform: translateY(-50%);
   background-color: rgba(0, 0, 0, 0.5);
   color: white;
@@ -240,8 +315,7 @@ input:checked ~ .slider-switch .off-label {
   align-items: center;
   border-radius: 50%;
   z-index: 10;
-} 
-
+}
 
 .slider-arrow {
   font-size: 15px;
@@ -302,7 +376,8 @@ input:checked ~ .slider-switch .off-label {
 
 .dot,
 .dotimgnet,
-.dotonoff {
+.dotonoff,
+.dotood {
   height: 15px;
   width: 15px;
   margin: 0 5px;
@@ -313,9 +388,10 @@ input:checked ~ .slider-switch .off-label {
   transition: background-color 0.3s;
 }
 
-.dot.active, 
+.dot.active,
 .dotimgnet.active,
-.dotonoff.active{
+.dotonoff.active,
+.dotood.active {
   background-color: hwb(217 26% 15% / 0.968);
 }
 
@@ -346,7 +422,7 @@ input:checked ~ .slider-switch .off-label {
 
 .chart-caption {
   font-size: 2vw;
-  white-space: nowrap; 
+  white-space: nowrap;
 }
 
 #caption {
@@ -354,7 +430,7 @@ input:checked ~ .slider-switch .off-label {
   font-size: 18px;
   color: #333;
   font-weight: bold;
-  white-space: normal; 
+  white-space: normal;
   overflow: visible;
 }
 
@@ -368,8 +444,8 @@ input:checked ~ .slider-switch .off-label {
   display: flex;
   justify-content: space-around;
   align-items: flex-end;
-  height: 50vw; 
-  max-height: 300px; 
+  height: 50vw;
+  max-height: 300px;
   width: 100%;
   border-left: 3px solid #333;
   border-bottom: 3px solid #333;
@@ -387,7 +463,6 @@ input:checked ~ .slider-switch .off-label {
 
 .bar.ourbar {
   background-color: #e74c3c;
-
 }
 
 .bar:hover {
@@ -435,18 +510,18 @@ input:checked ~ .slider-switch .off-label {
   height: 50px;
   background-color: #e74c3c;
   clip-path: polygon(
-      50% 0%,
-      61% 35%,
-      98% 35%,
-      68% 57%,
-      79% 91%,
-      50% 70%,
-      21% 91%,
-      32% 57%,
-      2% 35%,
-      39% 35%
+    50% 0%,
+    61% 35%,
+    98% 35%,
+    68% 57%,
+    79% 91%,
+    50% 70%,
+    21% 91%,
+    32% 57%,
+    2% 35%,
+    39% 35%
   );
-  z-index: 5
+  z-index: 5;
 }
 
 .x-axis {
@@ -459,11 +534,11 @@ input:checked ~ .slider-switch .off-label {
   flex-direction: column;
   justify-content: space-between;
   margin-right: 10px;
-  font-size: 1.5vw; 
+  font-size: 1.5vw;
   margin-bottom: 20px;
   position: relative;
-  height: 50vw; 
-  max-height: 300px; 
+  height: 50vw;
+  max-height: 300px;
 }
 
 .y-label {
@@ -478,7 +553,6 @@ input:checked ~ .slider-switch .off-label {
   top: -7%;
   left: -20%;
   font-size: 18px;
-
 }
 
 .y-label:nth-child(2) {
@@ -487,17 +561,17 @@ input:checked ~ .slider-switch .off-label {
 }
 
 .y-label:nth-child(3) {
-  top: 33%; 
+  top: 33%;
   right: -20%;
 }
 
 .y-label:nth-child(4) {
-  top: 67%; 
+  top: 67%;
   right: -20%;
 }
 
 .y-label:nth-child(5) {
-  bottom: 0; 
+  bottom: 0;
   right: -20%;
 }
 
@@ -505,28 +579,28 @@ input:checked ~ .slider-switch .off-label {
   .task-buttons {
     flex: 1 1 100%;
   }
-  
+
   .chart {
-      height: 60vw;
+    height: 60vw;
   }
 
   .bar::before {
-      font-size: 3vw;
+    font-size: 3vw;
   }
 
   .bar::after {
-      font-size: 2vw;
-      transform: translateX(-50%) rotate(-45deg); 
-      text-align: left;
+    font-size: 2vw;
+    transform: translateX(-50%) rotate(-45deg);
+    text-align: left;
   }
 
   .chart-caption {
-      font-size: 3vw; 
+    font-size: 3vw;
   }
 
   .y-axis {
-      font-size: 2vw;
-      width: 50px;
+    font-size: 2vw;
+    width: 50px;
   }
 }
 
diff --git a/static/js/quality_ours.js b/static/js/quality_ours.js
index 882891c..7a791e6 100644
--- a/static/js/quality_ours.js
+++ b/static/js/quality_ours.js
@@ -9,6 +9,9 @@ $(document).ready(function () {
   let currentImageIndex_onoff = 0;
   let mode = 'FFHQ';
 
+  let currentImageIndex_ood = 0;
+  let mode_ood = 'CelebA';
+
   const buttons = document.querySelectorAll('.task-button');
   buttons[0].classList.add('active');
 
@@ -296,39 +299,76 @@ $(document).ready(function () {
 
   const tasks_onoff = {
     FFHQ: {
-      0: ['static/images/quality_comparison/ffhq/gauss_deblur/0.png',
-          'static/images/quality_comparison/ffhq/gauss_deblur/1.png',
-          'static/images/quality_comparison/ffhq/gauss_deblur/2.png'],
-      1: ['static/images/quality_comparison/ffhq/sr4/0.png',
+      0: [
+        'static/images/quality_comparison/ffhq/gauss_deblur/0.png',
+        'static/images/quality_comparison/ffhq/gauss_deblur/1.png',
+        'static/images/quality_comparison/ffhq/gauss_deblur/2.png',
+      ],
+      1: [
+        'static/images/quality_comparison/ffhq/sr4/0.png',
         'static/images/quality_comparison/ffhq/sr4/1.png',
-        'static/images/quality_comparison/ffhq/sr4/2.png'],
-      2: ['static/images/quality_comparison/ffhq/boxinpaint/0.png',
+        'static/images/quality_comparison/ffhq/sr4/2.png',
+      ],
+      2: [
+        'static/images/quality_comparison/ffhq/boxinpaint/0.png',
         'static/images/quality_comparison/ffhq/boxinpaint/1.png',
-        'static/images/quality_comparison/ffhq/boxinpaint/2.png'],
-      3: ['static/images/quality_comparison/ffhq/deno/0.png',
+        'static/images/quality_comparison/ffhq/boxinpaint/2.png',
+      ],
+      3: [
+        'static/images/quality_comparison/ffhq/deno/0.png',
         'static/images/quality_comparison/ffhq/deno/1.png',
-        'static/images/quality_comparison/ffhq/deno/2.png'],
-      4: ['static/images/quality_comparison/ffhq/color/0.png',
+        'static/images/quality_comparison/ffhq/deno/2.png',
+      ],
+      4: [
+        'static/images/quality_comparison/ffhq/color/0.png',
         'static/images/quality_comparison/ffhq/color/1.png',
-        'static/images/quality_comparison/ffhq/color/2.png'],    
-      },
+        'static/images/quality_comparison/ffhq/color/2.png',
+      ],
+    },
     ImageNet: {
-      0: ['static/images/quality_comparison/imagenet/gauss_deblur/0.png',
-          'static/images/quality_comparison/imagenet/gauss_deblur/1.png',
-          'static/images/quality_comparison/imagenet/gauss_deblur/2.png'],
-      1: ['static/images/quality_comparison/imagenet/sr4/0.png',
+      0: [
+        'static/images/quality_comparison/imagenet/gauss_deblur/0.png',
+        'static/images/quality_comparison/imagenet/gauss_deblur/1.png',
+        'static/images/quality_comparison/imagenet/gauss_deblur/2.png',
+      ],
+      1: [
+        'static/images/quality_comparison/imagenet/sr4/0.png',
         'static/images/quality_comparison/imagenet/sr4/1.png',
-        'static/images/quality_comparison/imagenet/sr4/2.png'],
-      2: ['static/images/quality_comparison/imagenet/boxinpaint/0.png',
+        'static/images/quality_comparison/imagenet/sr4/2.png',
+      ],
+      2: [
+        'static/images/quality_comparison/imagenet/boxinpaint/0.png',
         'static/images/quality_comparison/imagenet/boxinpaint/1.png',
-        'static/images/quality_comparison/imagenet/boxinpaint/2.png'],
-      3: ['static/images/quality_comparison/imagenet/deno/0.png',
+        'static/images/quality_comparison/imagenet/boxinpaint/2.png',
+      ],
+      3: [
+        'static/images/quality_comparison/imagenet/deno/0.png',
         'static/images/quality_comparison/imagenet/deno/1.png',
-        'static/images/quality_comparison/imagenet/deno/2.png'],
-      4: ['static/images/quality_comparison/imagenet/color/0.png',
+        'static/images/quality_comparison/imagenet/deno/2.png',
+      ],
+      4: [
+        'static/images/quality_comparison/imagenet/color/0.png',
         'static/images/quality_comparison/imagenet/color/1.png',
-        'static/images/quality_comparison/imagenet/color/2.png'],    
-      },
+        'static/images/quality_comparison/imagenet/color/2.png',
+      ],
+    },
+  };
+
+  const tasks_ood = {
+    CelebA: {
+      0: [
+        'static/images/quality_comparison/ood_celeba/0.png',
+        'static/images/quality_comparison/ood_celeba/1.png',
+        'static/images/quality_comparison/ood_celeba/2.png',
+      ],
+    },
+    GoPro: {
+      0: [
+        'static/images/quality_comparison/ood_gopro/0.png',
+        'static/images/quality_comparison/ood_gopro/1.png',
+        'static/images/quality_comparison/ood_gopro/2.png',
+      ],
+    },
   };
 
   function updateImages() {
@@ -391,13 +431,25 @@ $(document).ready(function () {
     $(`.dotonoff:eq(${currentImageIndex_onoff})`).addClass('active');
   }
 
+  function updateImages_ood() {
+    const fixedImage = $('#fixedImage_ood');
+    const currentImages = tasks_ood[mode_ood][0];
+    const currentImage = currentImages[currentImageIndex_ood];
+
+    fixedImage.css('background-image', `url(${currentImage})`);
+
+    // Update dot selection
+    $('.dotood').removeClass('active');
+    $(`.dotood:eq(${currentImageIndex_ood})`).addClass('active');
+  }
+
   function selectTask(taskNumber) {
     currentTask = taskNumber;
     currentImageIndex = 0;
     updateImages();
 
     const buttons = document.querySelectorAll('.task-button');
-    buttons.forEach(button => button.classList.remove('active'));
+    buttons.forEach((button) => button.classList.remove('active'));
     buttons[taskNumber].classList.add('active');
   }
 
@@ -407,7 +459,7 @@ $(document).ready(function () {
     updateImages_imgnet();
 
     const buttons_imgnet = document.querySelectorAll('.task-button_imgnet');
-    buttons_imgnet.forEach(button => button.classList.remove('active'));
+    buttons_imgnet.forEach((button) => button.classList.remove('active'));
     buttons_imgnet[taskNumber].classList.add('active');
   }
 
@@ -417,7 +469,7 @@ $(document).ready(function () {
     updateImages_onoff();
 
     const buttons_onoff = document.querySelectorAll('.task-button_onoff');
-    buttons_onoff.forEach(button => button.classList.remove('active'));
+    buttons_onoff.forEach((button) => button.classList.remove('active'));
     buttons_onoff[taskNumber].classList.add('active');
   }
 
@@ -436,6 +488,11 @@ $(document).ready(function () {
     updateImages_onoff();
   }
 
+  function selectImage_ood(index) {
+    currentImageIndex_ood = index;
+    updateImages_ood();
+  }
+
   function prevImage() {
     currentImageIndex =
       currentImageIndex === 0
@@ -460,6 +517,14 @@ $(document).ready(function () {
     updateImages_onoff();
   }
 
+  function prevImage_ood() {
+    currentImageIndex_ood =
+      currentImageIndex_ood === 0
+        ? tasks_ood[mode_ood][0].length - 1
+        : currentImageIndex_ood - 1;
+    updateImages_ood();
+  }
+
   function nextImage() {
     currentImageIndex =
       currentImageIndex === tasks[currentTask].length - 1
@@ -478,20 +543,33 @@ $(document).ready(function () {
 
   function nextImage_onoff() {
     currentImageIndex_onoff =
-      currentImageIndex_onoff === tasks_onoff[mode][currentTask_onoff].length - 1
+      currentImageIndex_onoff ===
+      tasks_onoff[mode][currentTask_onoff].length - 1
         ? 0
         : currentImageIndex_onoff + 1;
     updateImages_onoff();
   }
 
-  function toggleMode() {
-    mode = mode === 'ImageNet' ? 'FFHQ' : 'ImageNet';
-    $('#modeToggle').text(mode.charAt(0).toUpperCase() + mode.slice(1));
+  function nextImage_ood() {
+    currentImageIndex_ood =
+      currentImageIndex_ood === tasks_ood[mode_ood][0].length - 1
+        ? 0
+        : currentImageIndex_ood + 1;
+    updateImages_ood();
+  }
 
+  function toggleMode(selectedDataset) {
+    mode = selectedDataset;
     currentImageIndex_onoff = 0;
     updateImages_onoff();
   }
 
+  function toggleMode_ood(selectedDataset) {
+    mode_ood = selectedDataset;
+    currentImageIndex_ood = 0;
+    updateImages_ood();
+  }
+
   $('input.slider').on('input change', function (event) {
     var element = $(this).parents('div.slide-container');
     var pos = event.target.value;
@@ -530,6 +608,7 @@ $(document).ready(function () {
   updateImages();
   updateImages_imgnet();
   updateImages_onoff();
+  updateImages_ood();
 
   // Slider control with jQuery
   $('input.slider').on('input change', function (event) {
@@ -541,6 +620,12 @@ $(document).ready(function () {
       .css({ 'clip-path': 'inset(0 ' + (100 - pos) + '% 0 0)' });
     element.find('div.slider-handle').css({ left: 'calc(' + pos + '%)' });
   });
+  window.onload = function () {
+    toggleMode('FFHQ');
+  };
+  window.onload = function () {
+    toggleMode_ood('CelebA');
+  };
 
   window.selectTask = selectTask;
   window.prevImage = prevImage;
@@ -557,4 +642,9 @@ $(document).ready(function () {
   window.nextImage_onoff = nextImage_onoff;
   window.selectImage_onoff = selectImage_onoff;
   window.toggleMode = toggleMode;
+
+  window.prevImage_ood = prevImage_ood;
+  window.nextImage_ood = nextImage_ood;
+  window.selectImage_ood = selectImage_ood;
+  window.toggleMode_ood = toggleMode_ood;
 });