diff --git a/css/main.css b/css/main.css
index 2d19b5c8..a7069f33 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1814,3 +1814,86 @@ tr + tr th { border-top: 1px solid; }
 
 thead + tbody tr:first-child td,
 thead + tbody tr:first-child th { border-top: 1px solid; }
+
+/* ------------------------------------------------
+   Tools CheckboxGroup - vertical DragDrop-like style
+   ------------------------------------------------ */
+
+/* "Refresh list" link in the Tools label */
+.tools-refresh-link {
+    cursor: pointer;
+}
+
+/* Checkbox list container */
+#tools-group {
+    padding: 0 !important;
+    border-width: 0 !important;
+    background: transparent !important;
+    min-height: 0 !important;
+}
+
+#tools-group .wrap {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    gap: 4px;
+    padding: 0;
+    margin-top: var(--spacing-lg);
+    max-height: 350px;
+    overflow-y: auto;
+}
+
+/* Pretty scrollbar for the tools list */
+#tools-group .wrap::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+#tools-group .wrap::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+#tools-group .wrap::-webkit-scrollbar-thumb,
+#tools-group .wrap::-webkit-scrollbar-thumb:hover {
+    background: var(--neutral-300);
+    border-radius: 30px;
+}
+
+.dark #tools-group .wrap::-webkit-scrollbar-thumb,
+.dark #tools-group .wrap::-webkit-scrollbar-thumb:hover {
+    background: rgb(255 255 255 / 6.25%);
+    border-radius: 10px;
+}
+
+#tools-group .wrap::-webkit-scrollbar-corner {
+    background: transparent;
+}
+
+/* Each checkbox item */
+#tools-group label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 5px 8px;
+    border-radius: var(--radius-sm, 4px);
+    background: var(--block-background-fill);
+    border: 1px solid var(--border-color-primary);
+    color: var(--body-text-color);
+    font-size: var(--input-text-size);
+    font-weight: var(--input-text-weight);
+    cursor: pointer;
+    user-select: none;
+    transition: border-color 0.15s ease, background 0.15s ease;
+    box-shadow: none;
+}
+
+#tools-group label:hover {
+    border-color: var(--input-border-color-focus);
+}
+
+#tools-group label span {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
diff --git a/js/main.js b/js/main.js
index a7dc77bb..0bc76b2a 100644
--- a/js/main.js
+++ b/js/main.js
@@ -303,6 +303,23 @@ for(i = 0; i < scrollbarElements.length; i++) {
   scrollbarElements[i].style.resize = "none";
 }
 
+
+//------------------------------------------------
+// Tools: inject "Refresh list" link into the label
+//------------------------------------------------
+const toolsTitle = document.querySelector("#tools-group > [data-testid='block-info']");
+const toolsInfo = toolsTitle ? toolsTitle.nextElementSibling : null;
+if (toolsInfo) {
+  const refreshLink = document.createElement("span");
+  refreshLink.textContent = " [Refresh list]";
+  refreshLink.className = "tools-refresh-link";
+  refreshLink.addEventListener("click", function(e) {
+    e.preventDefault();
+    document.querySelector("#tools-refresh-btn").click();
+  });
+  toolsInfo.appendChild(refreshLink);
+}
+
 //------------------------------------------------
 // Remove some backgrounds
 //------------------------------------------------
diff --git a/modules/ui_chat.py b/modules/ui_chat.py
index d5b13094..8112d956 100644
--- a/modules/ui_chat.py
+++ b/modules/ui_chat.py
@@ -92,8 +92,9 @@ def create_ui():
                 gr.HTML("<div class='sidebar-vertical-separator'></div>")
 
                 from modules.tool_use import get_available_tools
-                shared.gradio['selected_tools'] = gr.CheckboxGroup(choices=get_available_tools(), value=[], label='Tools', info='Functions the model can call during generation.')
-                ui.create_refresh_button(shared.gradio['selected_tools'], lambda: None, lambda: {'choices': get_available_tools()}, 'refresh-button')
+                shared.gradio['selected_tools'] = gr.CheckboxGroup(choices=get_available_tools(), value=[], label='Tools', info='Functions the model can call during generation.', elem_id='tools-group')
+                shared.gradio['tools_refresh'] = gr.Button('Refresh list', elem_id='tools-refresh-btn', visible=False)
+                shared.gradio['tools_refresh'].click(fn=lambda: gr.update(choices=get_available_tools()), inputs=[], outputs=[shared.gradio['selected_tools']])
 
                 gr.HTML("<div class='sidebar-vertical-separator'></div>")