diff --git a/app/assets/css/launcher.css b/app/assets/css/launcher.css
index 56a06360..29a12b11 100644
--- a/app/assets/css/launcher.css
+++ b/app/assets/css/launcher.css
@@ -1578,6 +1578,39 @@ input:checked + .toggleSwitchSlider:before {
     text-shadow: 0px 0px 20px #9b1f1f, 0px 0px 20px #9b1f1f, 0px 0px 20px #9b1f1f;
 }
 
+/* Shaderpack settings description. */
+#settingsShaderpackDesc {
+    font-size: 10px;
+    margin: 10px 0px;
+    color: lightgrey;
+    font-weight: bold;
+    width: 89%;
+}
+
+/* Wrapper container. */
+#settingsShaderpackWrapper {
+    display: flex;
+}
+
+/* Button to add shaderpacks. */
+#settingsShaderpackButton {
+    background: rgba(0, 0, 0, 0.25);
+    border: 1px solid rgba(126, 126, 126, 0.57);
+    border-radius: 3px;
+    cursor: pointer;
+    outline: none;
+    transition: 0.25s ease;
+    font-size: 14px;
+    padding: 6px 11px;
+    margin-right: 5px;
+}
+#settingsShaderpackButton:hover,
+#settingsShaderpackButton:focus,
+#settingsShaderpackButton[drag] {
+    background: rgba(54, 54, 54, 0.25);
+    text-shadow: 0px 0px 20px white;
+}
+
 /* Main select container. */
 .settingsSelectContainer {
     position: relative;
@@ -1620,11 +1653,26 @@ input:checked + .toggleSwitchSlider:before {
     left: 0;
     right: 0;
     z-index: 99;
+    max-height: 300%;
+    overflow-y: scroll;
+    border: 1px solid rgba(126, 126, 126, 0.57);
+    border-top: none;
+    border-radius: 0px 0px 3px 3px;
 }
 /* Hide the items when the select box is closed. */
 .settingsSelectOptions[hidden] {
     display: none;
 }
+.settingsSelectOptions::-webkit-scrollbar {
+    width: 2px;
+}
+.settingsSelectOptions::-webkit-scrollbar-track {
+    display: none;
+}
+.settingsSelectOptions::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.50);
+}
 
 /* Shared styles between options and selection div. */
 .settingsSelectOptions div,
@@ -1636,12 +1684,12 @@ input:checked + .toggleSwitchSlider:before {
     cursor: pointer;
 }
 .settingsSelectOptions div {
-    border-width: 0px 1px 1px 1px;
+    border-width: 0px 0px 1px 0px;
     font-size: 12px;
     padding: 4px 16px;
 }
-.settingsSelectOptions .settingsSelectOption:last-child {
-    border-radius: 0px 0px 3px 3px;
+.settingsSelectOptions div:last-child {
+    border-bottom: none;
 }
 
 /* Hover + selected styles. */
diff --git a/app/assets/js/dropinmodutil.js b/app/assets/js/dropinmodutil.js
index 9d4cbaf5..ebc8e88b 100644
--- a/app/assets/js/dropinmodutil.js
+++ b/app/assets/js/dropinmodutil.js
@@ -208,3 +208,23 @@ exports.setEnabledShaderpack = function(instanceDir, pack){
     }
     fs.writeFileSync(optionsShaders, buf, {encoding: 'utf-8'})
 }
+
+/**
+ * Add shaderpacks.
+ * 
+ * @param {FileList} files The files to add.
+ * @param {string} instanceDir The path to the server instance directory.
+ */
+exports.addShaderpacks = function(files, instanceDir) {
+
+    const p = path.join(instanceDir, 'shaderpacks')
+
+    exports.validateDir(p)
+
+    for(let f of files) {
+        if(SHADER_REGEX.exec(f.name) != null) {
+            fs.moveSync(f.path, path.join(p, f.name))
+        }
+    }
+
+}
\ No newline at end of file
diff --git a/app/assets/js/scripts/settings.js b/app/assets/js/scripts/settings.js
index f3694e6a..db9f28a7 100644
--- a/app/assets/js/scripts/settings.js
+++ b/app/assets/js/scripts/settings.js
@@ -267,6 +267,7 @@ settingsNavDone.onclick = () => {
     saveModConfiguration()
     ConfigManager.save()
     saveDropinModConfiguration()
+    saveShaderpackSettings()
     switchView(getCurrentView(), VIEWS.landing)
 }
 
@@ -728,6 +729,8 @@ document.addEventListener('keydown', (e) => {
     if(getCurrentView() === VIEWS.settings && selectedSettingsTab === 'settingsTabMods'){
         if(e.key === 'F5'){
             reloadDropinMods()
+            saveShaderpackSettings()
+            resolveShaderpacksForUI()
         }
     }
 })
@@ -780,6 +783,44 @@ function setShadersOptions(arr, selected){
     }
 }
 
+function saveShaderpackSettings(){
+    let sel = 'OFF'
+    for(let opt of document.getElementById('settingsShadersOptions').childNodes){
+        if(opt.hasAttribute('selected')){
+            sel = opt.getAttribute('value')
+        }
+    }
+    DropinModUtil.setEnabledShaderpack(CACHE_SETTINGS_INSTANCE_DIR, sel)
+}
+
+function bindShaderpackButton() {
+    const spBtn = document.getElementById('settingsShaderpackButton')
+    spBtn.onclick = () => {
+        const p = path.join(CACHE_SETTINGS_INSTANCE_DIR, 'shaderpacks')
+        DropinModUtil.validateDir(p)
+        shell.openItem(p)
+    }
+    spBtn.ondragenter = e => {
+        e.dataTransfer.dropEffect = 'move'
+        spBtn.setAttribute('drag', '')
+        e.preventDefault()
+    }
+    spBtn.ondragover = e => {
+        e.preventDefault()
+    }
+    spBtn.ondragleave = e => {
+        spBtn.removeAttribute('drag')
+    }
+
+    spBtn.ondrop = e => {
+        spBtn.removeAttribute('drag')
+        e.preventDefault()
+
+        DropinModUtil.addShaderpacks(e.dataTransfer.files, CACHE_SETTINGS_INSTANCE_DIR)
+        resolveShaderpacksForUI()
+    }
+}
+
 // Server status bar functions.
 
 /**
@@ -846,6 +887,7 @@ function prepareModsTab(first){
     resolveShaderpacksForUI()
     bindDropinModsRemoveButton()
     bindDropinModFileSystemButton()
+    bindShaderpackButton()
     bindModsToggleSwitch()
     loadSelectedServerOnModsTab()
 }
diff --git a/app/settings.ejs b/app/settings.ejs
index e5fd6d19..b1ed183b 100644
--- a/app/settings.ejs
+++ b/app/settings.ejs
@@ -128,10 +128,14 @@
                 </div>
                 <div id="settingsShadersContainer">
                     <div class="settingsModsHeader">Shaderpacks</div>
-                    <div class="settingsSelectContainer">
-                        <div class="settingsSelectSelected" id="settingsShadersSelected">Select Shaderpack</div>
-                        <div class="settingsSelectOptions" id="settingsShadersOptions" hidden>
+                    <div id="settingsShaderpackDesc">Enable or disable shaders. Please note, shaders will only run smoothly on powerful setups. You may add custom packs here.</div>
+                    <div id="settingsShaderpackWrapper">
+                        <button id="settingsShaderpackButton"> + </button>
+                        <div class="settingsSelectContainer">
+                            <div class="settingsSelectSelected" id="settingsShadersSelected">Select Shaderpack</div>
+                            <div class="settingsSelectOptions" id="settingsShadersOptions" hidden>
 
+                            </div>
                         </div>
                     </div>
                 </div>