diff --git a/index.html b/index.html
index e99a0c8..1025a53 100644
--- a/index.html
+++ b/index.html
@@ -434,7 +434,7 @@ <h2 class="title is-3 has-text-centered">Method</h2>
                   // imageElement.alt = "Image 3";
               }
           }
-      </script>
+        </script>
 
       </div>
     </div>
@@ -443,6 +443,230 @@ <h2 class="title is-3 has-text-centered">Method</h2>
 
 <hr>
 
+<!-- More Visualization -->
+<section class="section">
+  <div class="container is-max-desktop">
+    <div class="columns is-centered has-text-centered">
+      <div class="column is-full-width">
+        
+        <h2 class="title is-3">More Visualizations</h2>
+        <center>
+          <button class="btn" id="black_9_button" onclick="switchSlider('black_9')">Black Bunny (9 Views)</button>
+          <button class="btn" id="black_5_button" onclick="switchSlider('black_5')">Black Bunny (5 Views)</button>
+          <br>
+          <br>
+        </center>
+
+        <div class="slider-block" id="black_9_block">
+          <div class="sliders-container">
+            <div class="slider-wrapper">
+              <h2>Novel View Synthesis (RGB) </h2>
+              <div id="black_9_rgb"></div>
+            </div>
+            <div class="slider-wrapper">
+              <h2>Ground Truth Comparison (RGB)</h2>
+              <div id="black_9_object"></div>
+            </div>
+          </div>
+          <br>
+          <!-- depth and normal sliders -->
+          <div class="sliders-container">
+            <div class="slider-wrapper">
+              <h2>Novel View Synthesis (Depth) </h2>
+              <div id="black_9_depth"></div>
+            </div>
+            <div class="slider-wrapper">
+              <h2>Novel View Synthesis (Normal)</h2>
+              <div id="black_9_normal"></div>
+            </div>
+          </div>
+        </div>
+
+        <div class="slider-block" id="black_5_block">
+          <div class="sliders-container">
+            <div class="slider-wrapper">
+              <h2>Novel View Synthesis (RGB) </h2>
+              <div id="black_5_rgb"></div>
+            </div>
+            <div class="slider-wrapper">
+              <h2>Ground Truth Comparison (RGB)</h2>
+              <div id="black_5_object"></div>
+            </div>
+          </div>
+          <br>
+          <!-- depth and normal sliders -->
+          <div class="sliders-container">
+            <div class="slider-wrapper">
+              <h2>Novel View Synthesis (Depth) </h2>
+              <div id="black_5_depth"></div>
+            </div>
+            <div class="slider-wrapper">
+              <h2>Novel View Synthesis (Normal)</h2>
+              <div id="black_5_normal"></div>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.knightlab.com/libs/juxtapose/latest/js/juxtapose.min.js"></script>
+        <link rel="stylesheet" href="https://cdn.knightlab.com/libs/juxtapose/latest/css/juxtapose.css">
+        <script src="./static/js/juxtapose-slider.js"></script> <!-- Include your slider.js file
+         
+        <!-- script for the sliders -->
+        <script>
+          // Slider configurations
+          let slider_dict = {
+            black_9: 
+            [
+              {
+                elementId: '#black_9_rgb',
+                images: [
+                  {
+                    src: './static/images/sliders/black_bunny/9_view/FS_black_RGB_13.jpg',
+                    label: 'FusionSense',
+                  },
+                  {
+                    src: './static/images/sliders/black_bunny/9_view/DN_black_RGB_13.jpg',
+                    label: 'DN-Splatter',
+                  }
+                ],
+                options: sliderOptions // You can reference the options defined in slider.js if needed
+              },
+              {
+                elementId: '#black_9_object',
+                images: [
+                  {
+                    src: './static/images/FS_trans_obj_7.jpg',
+                    label: 'FusionSense',
+                  },
+                  {
+                    src: './static/images/GO_trans_obj_7.png',
+                    label: 'GaussianObject',
+                  }
+                ],
+                options: sliderOptions // Reference the same or a different options object
+              },
+              {
+                elementId: '#black_9_depth',
+                images: [
+                  {
+                    src: './static/images/FS_trans_depth_0.png',
+                    label: 'FusionSense',
+                  },
+                  {
+                    src: './static/images/DN_trans_depth_0.png',
+                    label: 'DN-Splatter',
+                  }
+                ],
+                options: sliderOptions // You can reference the options defined in slider.js if needed
+              },
+              {
+                elementId: '#black_9_normal',
+                images: [
+                  {
+                    src: './static/images/FS_trans_normal_22.png',
+                    label: 'FusionSense',
+                  },
+                  {
+                    src: './static/images/DN_trans_normal_22.png',
+                    label: 'DN-Splatter',
+                  }
+                ],
+                options: sliderOptions // Reference the same or a different options object
+              }
+            ],
+            black_5:
+            [
+              {
+                elementId: '#black_5_rgb',
+                images: [
+                  {
+                    src: './static/images/FS_trans_RGB_22.png',
+                    label: 'FusionSense',
+                  },
+                  {
+                    src: './static/images/DN_trans_RGB_22.png',
+                    label: 'DN-Splatter',
+                  }
+                ],
+                options: sliderOptions // You can reference the options defined in slider.js if needed
+              },
+              {
+                elementId: '#black_5_object',
+                images: [
+                  {
+                    src: './static/images/FS_trans_obj_7.jpg',
+                    label: 'FusionSense',
+                  },
+                  {
+                    src: './static/images/GO_trans_obj_7.png',
+                    label: 'GaussianObject',
+                  }
+                ],
+                options: sliderOptions // Reference the same or a different options object
+              },
+              {
+                elementId: '#black_5_depth',
+                images: [
+                  {
+                    src: './static/images/FS_trans_depth_0.png',
+                    label: 'FusionSense',
+                  },
+                  {
+                    src: './static/images/DN_trans_depth_0.png',
+                    label: 'DN-Splatter',
+                  }
+                ],
+                options: sliderOptions // You can reference the options defined in slider.js if needed
+              },
+              {
+                elementId: '#black_5_normal',
+                images: [
+                  {
+                    src: './static/images/FS_trans_normal_22.png',
+                    label: 'FusionSense',
+                  },
+                  {
+                    src: './static/images/DN_trans_normal_22.png',
+                    label: 'DN-Splatter',
+                  }
+                ],
+                options: sliderOptions // Reference the same or a different options object
+              }
+            ]
+          };
+    
+          
+
+          // Function to show the specific div based on button click
+          function switchSlider(block_id) {
+              // Remove 'active' class from all buttons to reset color
+              // buttons.forEach(button => button.classList.remove('active'));
+  
+              // // Add 'active' class to the clicked button to change its color
+              // document.getElementById('button' + divNumber).classList.add('active');
+  
+              // Select all content divs and hide them
+              contentDivs = document.querySelectorAll('.slider-block');
+              contentDivs.forEach(div => {
+                  div.classList.remove('show'); // Hide all divs
+              });
+  
+              // Show the selected div with a fade effect
+              selectedDiv = document.getElementById(block_id+'_block');
+              selectedDiv.classList.add('show');
+
+              if (!selectedDiv.initialized) {
+                initializeSliders(slider_dict[block_id]);
+                selectedDiv.initialized = true;
+              }
+          }
+        </script>
+      </div>
+    </div>
+  </div>
+</section>
+
+
 <!-- BibTeX -->
 <section class="section" id="BibTeX"> 
   <div class="container is-max-desktop content">
diff --git a/static/css/index.css b/static/css/index.css
index 1f98631..24b35f0 100644
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -176,15 +176,14 @@ body {
   border-radius: 5px;
 }
 
-
-.iframe-container {
-  display: flex;
-  justify-content: space-around; /* Change to 'space-around' or 'space-evenly' for more space */
-  align-items: center;
+.slider-block{
+  display: none; /* Hide all divs initially */
+  opacity: 0;
 }
 
-.iframe-container iframe {
-  margin: 0 50px; /* Adds horizontal space between the two iframes */
+.slider-block.show{
+  display: block;
+  opacity: 1;
 }
 
 .sliders-container {
@@ -198,7 +197,8 @@ body {
   width: 48%; /* Make each slider 48% of the container width for side-by-side */
 }
 
-#trans_depth, #trans_normal, #trans_rgb, #trans_object {
+#trans_depth, #trans_normal, #trans_rgb, #trans_object, #black_9_depth, #black_9_normal, #black_9_rgb, #black_9_object,
+#black_5_depth, #black_5_normal, #black_5_rgb, #black_5_object {
   width: 100%; /* General width for all sliders */
 }
 
diff --git a/static/images/sliders/black_bunny/9_view/DN_black_RGB_13.jpg b/static/images/sliders/black_bunny/9_view/DN_black_RGB_13.jpg
new file mode 100644
index 0000000..ccca0b5
Binary files /dev/null and b/static/images/sliders/black_bunny/9_view/DN_black_RGB_13.jpg differ
diff --git a/static/images/sliders/black_bunny/9_view/FS_black_RGB_13.jpg b/static/images/sliders/black_bunny/9_view/FS_black_RGB_13.jpg
new file mode 100644
index 0000000..d742443
Binary files /dev/null and b/static/images/sliders/black_bunny/9_view/FS_black_RGB_13.jpg differ
diff --git a/static/js/juxtapose-slider.js b/static/js/juxtapose-slider.js
index 95df831..c49c556 100644
--- a/static/js/juxtapose-slider.js
+++ b/static/js/juxtapose-slider.js
@@ -3,7 +3,7 @@ function createSlider(elementId, images, options) {
   return new juxtapose.JXSlider(elementId, images, options);
 }
 
-const sliderOptions = {
+sliderOptions = {
   animate: true,
   showLabels: true,
   showCredits: false,