diff --git a/README.md b/README.md
index 7c0add5..333dd28 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,36 @@
-# GUI Maker
+
+
+![Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/th5xamgrr6se0x5ro4g6.png)
+
+
+# Pack GUI Maker
+
+Pack GUI Maker is a web-based tool designed to simplify the creation of custom GUI's for pack release videos. With no installation required, both mobile and desktop users can quickly and effortlessly create GUIs, streamlining the workflow for thumbnail creators.
+
+### Usage
+
+To use this tool, follow these steps:
+
+1. **Visit the Website**: Navigate to our website where the tool is hosted.
+2. **Select Version**: Choose the version of Minecraft you're working with—either **Bedrock** or **Java**.
+3. **Set Upscale Factor**: Use the **Upscale Factor Slider** to adjust the upscale factor according to your preference.
+4. **Choose XP Position**: Adjust the **XP Position Slider** to set the desired position for the XP.
+5. **Upload Your Pack**: Click the **Upload** button to upload the resource pack you want to process.
+6. **Download Results**: Once the processing is complete, download the processed pack with your desired settings.
+
+
+
+## Acknowledgements
+
+ - [ewye's Manual Tutorial](https://www.youtube.com/watch?v=6xhJ5hPxSE8)
+ - [Jezler's Original Python Software](https://github.com/oJezler-git/gui_maker)
+
+
+## Authors
+
+- [@notcacti](https://github.com/notcacti)
+
+## Contributers
+
+- [@oJezler-Git](https://github.com/oJezler-git)
+
diff --git a/wwwroot/index.html b/wwwroot/index.html
index a7999e3..b0c6261 100644
--- a/wwwroot/index.html
+++ b/wwwroot/index.html
@@ -28,25 +28,25 @@ <h1 id="title">Create GUI</h1>
     <div class="slider-container">
         <label for="upscale-slider">Upscale Multiplier</label>
         <div class="inputs">
-            <input
-                    type="range"
-                    id="upscale-slider"
-                    min="1"
-                    max="10"
-                    value="1"
-                    step="1"
-                    oninput="updateUpscaleValue(this.value)"
-            />
+            <div class="slider-wrapper">
+                <input
+                        type="range"
+                        id="upscale-slider"
+                        min="1"
+                        max="10"
+                        value="1"
+                        step="0.1"
+                />
+            </div>
             <input
                     type="number"
                     id="upscale-input"
                     min="1"
                     max="10"
                     value="1"
-                    step="1"
-                    oninput="updateSliderValue(this.value)"
+                    step="0.1"
             />
-            <span>x</span>
+            <span class="unit">x</span>
         </div>
 
         <label for="xp-slider">XP Bar Filled %</label>
diff --git a/wwwroot/script.js b/wwwroot/script.js
index 40295f0..29b5765 100644
--- a/wwwroot/script.js
+++ b/wwwroot/script.js
@@ -60,3 +60,38 @@ document.getElementById('file-upload-button').addEventListener('click', function
     document.getElementById('file-upload').click();
 });
 
+
+
+// UPSCALE MULTIPLIER SMOOTH
+const upscaleSlider = document.getElementById('upscale-slider');
+const upscaleInput = document.getElementById('upscale-input');
+
+// slider bg
+function updateSliderBackground(value) {
+    const percentage = ((value - upscaleSlider.min) / (upscaleSlider.max - upscaleSlider.min)) * 100;
+    upscaleSlider.style.background = `linear-gradient(to right, #ffffff ${percentage}%, rgba(255, 255, 255, 0.2) ${percentage}%)`;
+}
+
+// slider event listeners
+upscaleSlider.addEventListener('input', () => {
+    let value = Math.round(upscaleSlider.value);
+    upscaleInput.value = value;
+    updateSliderBackground(value);
+});
+
+// input event listeners
+upscaleInput.addEventListener('input', () => {
+    let value = Math.round(upscaleInput.value);
+
+    // keep value within range
+    if (isNaN(value)) value = upscaleSlider.min;
+    if (value < upscaleSlider.min) value = upscaleSlider.min;
+    if (value > upscaleSlider.max) value = upscaleSlider.max;
+
+    upscaleInput.value = value;
+    upscaleSlider.value = value;
+    updateSliderBackground(value);
+});
+
+updateSliderBackground(upscaleSlider.value);
+
diff --git a/wwwroot/styles.css b/wwwroot/styles.css
index c3cbb36..856db9c 100644
--- a/wwwroot/styles.css
+++ b/wwwroot/styles.css
@@ -262,11 +262,20 @@ body {
     -webkit-appearance: none;
     appearance: none;
     width: 100%;
-    background: linear-gradient(to right, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);
-    border-radius: 10px;
     height: 12px;
+    border-radius: 10px;
+    background: linear-gradient(to right, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);
     outline: none;
     margin: 0;
+    transition: background 0.3s ease;
+}
+
+#upscale-slider::-webkit-slider-runnable-track,
+#xp-slider::-webkit-slider-runnable-track {
+    height: 12px;
+    border-radius: 10px;
+    background: linear-gradient(to right, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);
+    position: relative;
 }
 
 #upscale-slider::-webkit-slider-thumb,
@@ -280,6 +289,8 @@ body {
     cursor: pointer;
     box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
     transition: background 0.3s ease, transform 0.2s ease;
+    position: relative;
+    z-index: 2;
 }
 
 #upscale-slider::-webkit-slider-thumb:hover,
@@ -297,6 +308,8 @@ body {
     cursor: pointer;
     box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
     transition: background 0.3s ease, transform 0.2s ease;
+    position: relative;
+    z-index: 2;
 }
 
 #upscale-slider::-moz-range-track,
@@ -306,6 +319,18 @@ body {
     background: linear-gradient(to right, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);
 }
 
+#upscale-slider::-webkit-slider-runnable-track,
+#xp-slider::-webkit-slider-runnable-track {
+    background: linear-gradient(to right, #ffffff 0%, #ffffff 0%, rgba(255, 255, 255, 0.1) 0%);
+}
+
+#upscale-slider::-moz-range-progress,
+#xp-slider::-moz-range-progress {
+    background: linear-gradient(to right, #ffffff 0%, #ffffff 100%);
+    border-radius: 10px;
+    height: 12px;
+}
+
 #upscale-input,
 #xp-input {
     width: 80px;