diff --git a/octoprint_SpoolManager/static/css/SpoolManager.css b/octoprint_SpoolManager/static/css/SpoolManager.css
index b894f37..8ede284 100644
--- a/octoprint_SpoolManager/static/css/SpoolManager.css
+++ b/octoprint_SpoolManager/static/css/SpoolManager.css
@@ -1,4 +1,3 @@
-
 /* Small line on top of a div-box */
 .custom-divider {
     border-top: solid 1px;
@@ -184,3 +183,34 @@
 /*#checkboxes label:hover {*/
 /*  background-color: #1e90ff;*/
 /*}*/
+
+/* Spool remaining bar styles */
+.spool-remaining-container {
+    margin-top: 5px;
+    width: 100%;
+}
+
+.spool-remaining-text {
+    font-size: 12px;
+    color: #666;
+    margin-bottom: 2px;
+}
+
+.spool-remaining-bar-container {
+    width: 100%;
+    height: 4px;
+    background-color: #eee;
+    border-radius: 2px;
+    overflow: hidden;
+}
+
+.spool-remaining-bar {
+    height: 100%;
+    background-color: #2196F3;
+    transition: width 0.3s ease;
+}
+
+/* Düşük miktar için kırmızı renk */
+.spool-remaining-bar.low-amount {
+    background-color: #f44336;
+}
diff --git a/octoprint_SpoolManager/static/js/SpoolManager.js b/octoprint_SpoolManager/static/js/SpoolManager.js
index f337954..298e381 100644
--- a/octoprint_SpoolManager/static/js/SpoolManager.js
+++ b/octoprint_SpoolManager/static/js/SpoolManager.js
@@ -586,17 +586,26 @@ $(function() {
         }
 
         self.remainingText = function(spoolItem){
-            var remainingInfo = "("+_buildRemainingText(spoolItem) + ")";
+            var remainingWeight = _buildRemainingText(spoolItem);
+            var remainingLength = (Number(self.buildTooltipForSpoolItem(spoolItem, '', 'remainingLength'))/1000).toFixed(2);
+            var remainingInfo = "(" + remainingWeight + ", " + remainingLength + "m)";
             return remainingInfo;
         }
 
-        self.buildTooltipForSpoolItem = function(spoolItem, textPrefix, attribute){
-            var value = "";
+        self.buildTooltipForSpoolItem = function(spoolItem, textPrefix, attribute, unit, textPrefix2, attribute2, unit2){
+            var tooltip = "";
+            
+            // İlk özellik için tooltip
             if (spoolItem[attribute]() != null){
-                value = spoolItem[attribute]();
+                tooltip = textPrefix + spoolItem[attribute]() + (unit || "");
             }
-            var toolTip = textPrefix + value;
-            return toolTip;
+            
+            // İkinci özellik varsa ekle
+            if (attribute2 && spoolItem[attribute2]() != null){
+                tooltip += (tooltip ? ", " : "") + textPrefix2 + spoolItem[attribute2]() + (unit2 || "");
+            }
+            
+            return tooltip;
         }
 
         self.getSpoolItemSelectedTool = function(databaseId) {
@@ -1218,6 +1227,21 @@ $(function() {
             //}
         }
 
+        self.calculateRemainingPercentage = function(spoolItem) {
+            if (!spoolItem.remainingLength() || !spoolItem.totalLength()) {
+                return {
+                    width: 0,
+                    isLow: true
+                };
+            }
+            var percentage = (Number(spoolItem.remainingLength()) / Number(spoolItem.totalLength())) * 100;
+            percentage = Math.min(Math.max(percentage, 0), 100);
+            return {
+                width: percentage,
+                isLow: percentage < 20
+            };
+        };
+
     }
 
     /* view model class, parameters for constructor, container to bind to
diff --git a/octoprint_SpoolManager/templates/SpoolManager_dialog_selectSpool.jinja2 b/octoprint_SpoolManager/templates/SpoolManager_dialog_selectSpool.jinja2
index 23adc04..fad78ea 100644
--- a/octoprint_SpoolManager/templates/SpoolManager_dialog_selectSpool.jinja2
+++ b/octoprint_SpoolManager/templates/SpoolManager_dialog_selectSpool.jinja2
@@ -20,9 +20,7 @@
                         <!-- ko if: sidebarSelectSpoolModalSpoolItem().vendor -->
                         (<span data-bind="text: sidebarSelectSpoolModalSpoolItem().vendor"></span>)
                         <!-- /ko -->
-                        <span data-bind="text: $root.remainingText(sidebarSelectSpoolModalSpoolItem()),
-                                         attr: {title: $root.buildTooltipForSpoolItem(sidebarSelectSpoolModalSpoolItem(), 'Remaining weight: ', 'remainingWeight')}"
-                              class="spool-remaining" title="Remaining weight"></span>
+                        <span data-bind="text: $root.remainingText(sidebarSelectSpoolModalSpoolItem()), attr: {title: $root.buildTooltipForSpoolItem(sidebarSelectSpoolModalSpoolItem(), 'Remaining weight: ', 'remainingWeight', 'g', ' Remaining length: ', 'remainingLength', 'mm')}" class="spool-remaining" title="Remaining weight and length"></span>
                     </span>
                 <!-- /ko -->
                 <!-- ko ifnot: sidebarSelectSpoolModalSpoolItem() -->
diff --git a/octoprint_SpoolManager/templates/SpoolManager_sidebar.jinja2 b/octoprint_SpoolManager/templates/SpoolManager_sidebar.jinja2
index b068d01..57ba555 100644
--- a/octoprint_SpoolManager/templates/SpoolManager_sidebar.jinja2
+++ b/octoprint_SpoolManager/templates/SpoolManager_sidebar.jinja2
@@ -32,8 +32,12 @@
                 <!-- ko if: vendor -->
                 (<span data-bind="text: vendor"></span>)
                 <!-- /ko -->
-                <span data-bind="text: $root.remainingText($data), attr: {title: $root.buildTooltipForSpoolItem($data, 'Remaining weight: ', 'remainingWeight')}"
-                      class="spool-remaining" title="Remaining weight"></span>
+                <div class="spool-remaining-container">
+                    <div class="spool-remaining-text" data-bind="text: $root.remainingText($data), attr: {title: $root.buildTooltipForSpoolItem($data, 'Remaining weight: ', 'remainingWeight', 'g', ' Remaining length: ', 'remainingLength', 'mm')}"></div>
+                    <div class="spool-remaining-bar-container">
+                        <div class="spool-remaining-bar" data-bind="style: { width: $root.calculateRemainingPercentage($data).width + '%' }, css: { 'low-amount': $root.calculateRemainingPercentage($data).isLow }"></div>
+                    </div>
+                </div>
             </div>
             <div>
                 <div class="btn-group">
diff --git a/octoprint_SpoolManager/templates/SpoolManager_tab.jinja2 b/octoprint_SpoolManager/templates/SpoolManager_tab.jinja2
index 70ab313..e7e66cd 100644
--- a/octoprint_SpoolManager/templates/SpoolManager_tab.jinja2
+++ b/octoprint_SpoolManager/templates/SpoolManager_tab.jinja2
@@ -139,7 +139,7 @@
         Name
         Material
         Last/First Ise
-        Weight
+        Remaining
         Used
         Note
         -->
@@ -200,7 +200,7 @@
                             <div class="control-group">
                                 <div class="controls">
                                     <label class="checkbox" style="margin-left:10px">
-                                        <input type="checkbox" data-bind="checked: tableAttributeVisibility.weight"> Weight
+                                        <input type="checkbox" data-bind="checked: tableAttributeVisibility.weight"> Remaining
                                     </label>
                                 </div>
                             </div>
@@ -243,7 +243,7 @@
                     <th style="width: 23%" data-bind="visible: tableAttributeVisibility.displayName">Name</th>
                     <th style="width: 15%" data-bind="visible: tableAttributeVisibility.material">Material</th>
                     <th style="width: 12%;" data-bind="visible: tableAttributeVisibility.lastFirstUse">Last / First use</th>
-                    <th style="text-align: center; width: 15%;" data-bind="visible: tableAttributeVisibility.weight">Weight</th>
+                    <th style="text-align: center; width: 15%;" data-bind="visible: tableAttributeVisibility.weight">Remaining</th>
                     <th style="text-align: center; width: 15%;" data-bind="visible: tableAttributeVisibility.used">Used</th>
                     <th style="width: 15%;" data-bind="visible: tableAttributeVisibility.note">Note</th>
     <!-- TODO remove action column                <th style="width: 9%"></th>
@@ -259,14 +259,16 @@
                         <span style="vertical-align:super" data-bind="text: material"></span>
                     </div></td>
                 <td data-bind="visible: $root.tableAttributeVisibility.lastFirstUse"><span data-bind="text: formatOnlyDate($data, 'lastUse')"></span><br><span data-bind="text: formatOnlyDate($data, 'firstUse')"></span></td>
-                <td data-bind="visible: $root.tableAttributeVisibility.weight" style="text-align: right;"><span data-bind="text: totalWeight, attr: {title: $root.buildTooltipForSpoolItem($data, 'Total weight: ', 'totalWeight')}"></span>g<br/>
-{#                                                                                           <span data-bind="text: usedWeight, attr: {title: $root.buildTooltipForSpoolItem($data, 'Used weight: ', 'usedWeight')}"></span>g<br/>#}
-                                                                                           <span data-bind="text: remainingWeight, attr: {title: $root.buildTooltipForSpoolItem($data, 'Remaining weight: ', 'remainingWeight')}"></span>g<br>
+                <td data-bind="visible: $root.tableAttributeVisibility.weight" style="text-align: right;">
+                    <span data-bind="text: totalWeight, attr: {title: $root.buildTooltipForSpoolItem($data, 'Total weight: ', 'totalWeight')}"></span>g<br/>
+                    <span data-bind="text: remainingWeight, attr: {title: $root.buildTooltipForSpoolItem($data, 'Remaining weight: ', 'remainingWeight')}"></span>g<br>
+                    <span data-bind="text: (Number($root.buildTooltipForSpoolItem($data, '', 'remainingLength'))/1000).toFixed(2), attr: {title: $root.buildTooltipForSpoolItem($data, 'Remaining length: ', 'remainingLength')}"></span>m<br>
                 </td>
                 <td data-bind="visible: $root.tableAttributeVisibility.used" style="text-align: right;">
-                
-                <span data-bind="text: usedPercentage, attr: {title: $root.buildTooltipForSpoolItem($data, 'Used weight: ', 'usedPercentage')}"></span>%<br>
-                                                                                                        <span data-bind="text: usedLength, attr: {title: $root.buildTooltipForSpoolItem($data, 'Used length: ', 'usedLength')}"></span>mm</td>
+                    <span data-bind="text: usedPercentage, attr: {title: $root.buildTooltipForSpoolItem($data, 'Used: ', 'usedPercentage')}"></span>%<br>
+                    <span data-bind="text: usedWeight, attr: {title: $root.buildTooltipForSpoolItem($data, 'Used weight: ', 'usedWeight')}"></span>g<br/>
+                    <span data-bind="text: (Number($root.buildTooltipForSpoolItem($data, '', 'usedLength'))/1000).toFixed(2), attr: {title: $root.buildTooltipForSpoolItem($data, 'Used length: ', 'usedLength')}"></span>m
+                </td>
                 <td data-bind="visible: $root.tableAttributeVisibility.note"><span data-bind="html: noteHtml, attr: { title: noteText }"></span></td>
               </tr>
             </tbody>
diff --git a/octoprint_SpoolManager/templates/SpoolManager_tab_spoolSelection_comp.jinja2 b/octoprint_SpoolManager/templates/SpoolManager_tab_spoolSelection_comp.jinja2
index 075e141..d4d6c4d 100644
--- a/octoprint_SpoolManager/templates/SpoolManager_tab_spoolSelection_comp.jinja2
+++ b/octoprint_SpoolManager/templates/SpoolManager_tab_spoolSelection_comp.jinja2
@@ -153,8 +153,7 @@ File includes all Templates that are needed for custom Knockout.js components, s
                             <!-- ko if: vendor -->
                             (<span data-bind="text: vendor"></span>)
                             <!-- /ko -->
-                            <span data-bind="text: $root.remainingText($data), attr: {title: $root.buildTooltipForSpoolItem($data, 'Remaining weight: ', 'remainingWeight')}"
-                                  class="spool-remaining" title="Remaining weight"></span>
+                            <span data-bind="text: $root.remainingText($data), attr: {title: $root.buildTooltipForSpoolItem($data, 'Remaining weight: ', 'remainingWeight', 'g', ' Remaining length: ', 'remainingLength', 'mm')}"  class="spool-remaining" title="Remaining weight and length"></span>
                             <!-- ko if: lastUse || firstUse-->
                             (Last/First-Use <span data-bind="text: lastUse"></span> / <span data-bind="text: firstUse"></span>)
                             <!-- /ko -->