diff --git a/renderer/index.html b/renderer/index.html
index 1a747f6..3af3cbf 100644
--- a/renderer/index.html
+++ b/renderer/index.html
@@ -32,7 +32,6 @@
             Run Modded
           </button>
         </div>
-        <div
 
         <div class="nav-section">
           <span class="nav-title">Mods</span>
@@ -50,12 +49,43 @@
     <!-- Main content -->
     <main class="content">
       <h1 id="title">Home</h1>
-      <img src="assets/hornetUITop.png" class="separator_image"/>
-      <div id="view" class="view">
-        <p>Welcome to the Silk Fly Launcher.</p>
+        <div class="view" id="viewDiv">
+          <p>Welcome to the Silk Fly Launcher.</p>
+          <p>Welcome to the Silk Fly Launcher.</p>
+          <p>Welcome to the Silk Fly Launcher.</p>
+          <p>Welcome to the Silk Fly Launcher.</p>
+          <p>Welcome to the Silk Fly Launcher.</p>
+          <p>Welcome to the Silk Fly Launcher.</p>
+          <p>Welcome to the Silk Fly Launcher.</p>
+          <p>Welcome to the Silk Fly Launcher.</p>
+          <p>Welcome to the Silk Fly Launcher.</p>
+          <p>Welcome to the Silk Fly Launcher.</p>
+          <p>Welcome to the Silk Fly Launcher.</p>
+          <p>Welcome to the Silk Fly Launcher.</p>
+          <p>Welcome to the Silk Fly Launcher.</p>
+          <p>Welcome to the Silk Fly Launcher.</p>
+          <p>Welcome to the Silk Fly Launcher.</p>
+          <p>Welcome to the Silk Fly Launcher.</p>
+          <p>Welcome to the Silk Fly Launcher.</p>
+          <p>Welcome to the Silk Fly Launcher.</p>
+          <p>Welcome to the Silk Fly Launcher.</p>
+          <p>Welcome to the Silk Fly Launcher.</p>
+          <p>Welcome to the Silk Fly Launcher.</p>
+          <p>Welcome to the Silk Fly Launcher.</p>
+          <p>Welcome to the Silk Fly Launcher.</p>
+          <p>Welcome to the Silk Fly Launcher.</p>
+          <p>Welcome to the Silk Fly Launcher.</p>
+          <p>Welcome to the Silk Fly Launcher.</p>
+          <p>Welcome to the Silk Fly Launcher.</p>
+          <p>Welcome to the Silk Fly Launcher.</p>
+        </div>
+      </div>
+
+      <div class="slider-container">
+        <label for="heightSlider">Hauteur :</label>
+        <input type="range" id="heightSlider" min="200" max="1000" value="420">
+        <span id="heightValue">420px</span>
       </div>
-      <img src="assets/needleUIBottom.png" class="separator_image"/>
-    </main>
 
   </div>
 
diff --git a/renderer/renderer.js b/renderer/renderer.js
index d8ada45..5019785 100644
--- a/renderer/renderer.js
+++ b/renderer/renderer.js
@@ -1,5 +1,14 @@
 const title = document.getElementById("title");
 const view = document.getElementById("view");
+const slider = document.getElementById("heightSlider");
+const viewDiv = document.getElementById("viewDiv");
+const heightValue = document.getElementById("heightValue");
+
+slider.addEventListener("input", () => {
+  const height = slider.value + "px";
+  viewDiv.style.height = height;
+  heightValue.textContent = height;
+});
 
 function navigate(page) {
   switch (page) {
diff --git a/renderer/style.css b/renderer/style.css
index 2da565c..92662dc 100644
--- a/renderer/style.css
+++ b/renderer/style.css
@@ -26,7 +26,7 @@ body {
   height: 100%;
   object-fit: cover;
   z-index: -1;
-  filter: brightness(0.8);
+  filter: brightness(1);
 }
 
 .sidebar {
@@ -107,22 +107,22 @@ body {
 }
 
 .view {
-  background: rgba(0, 0, 0, 0.4);
-  border: 0px;
-  border-radius: 8px;
+  width: clamp(600px, 70vw, 900px);
+  background: rgba(0, 0, 0, 0.6);
+  border-radius: 12px;
   padding: 40px;
-  min-height: 450px;
-
-  margin-top: -5.5%;
-  margin-bottom: -6.5%;
-  z-index: -1; 
   position: relative;
-
-  box-shadow: 0 0 50px rgba(0, 0, 0, 0.1);
+  z-index: -1;
+  box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);
+  overflow: auto;
+  height: 420px; 
 }
 
-.separator_image {
-  width: 50%;
-  margin: 20px auto;
-  display: block;
+.slider-container {
+  margin-top: 20px;
+  width: clamp(600px, 70vw, 900px);
+}
+
+input[type="range"] {
+  width: 100%;
 }
\ No newline at end of file