diff --git a/components/converter/MainConverter.tsx b/components/converter/MainConverter.tsx
index 46ba3fa..5f02efc 100644
--- a/components/converter/MainConverter.tsx
+++ b/components/converter/MainConverter.tsx
@@ -125,9 +125,11 @@ export default function MainConverter() {
 
   // Handle value change from draggable bars
   const handleValueChange = useCallback((value: number, unit: string) => {
-    setInputValue(value.toString());
-    setSelectedUnit(unit);
-  }, []);
+    // Convert the dragged unit's value back to the currently selected unit
+    const convertedValue = convertUnit(value, unit, selectedUnit);
+    setInputValue(convertedValue.toString());
+    // Keep selectedUnit the same - user is still inputting in that unit
+  }, [selectedUnit]);
 
   return (
     <div className="w-full max-w-6xl mx-auto space-y-6">
diff --git a/components/converter/VisualComparison.tsx b/components/converter/VisualComparison.tsx
index e1d6c9f..6869be9 100644
--- a/components/converter/VisualComparison.tsx
+++ b/components/converter/VisualComparison.tsx
@@ -227,7 +227,7 @@ export default function VisualComparison({
               <div
                 className={cn(
                   "absolute inset-y-0 left-0",
-                  isDragging ? "transition-none" : "transition-all duration-500 ease-out"
+                  draggingUnit ? "transition-none" : "transition-all duration-500 ease-out"
                 )}
                 style={{
                   width: `${item.percentage}%`,
@@ -235,18 +235,10 @@ export default function VisualComparison({
                 }}
               />
               {/* Percentage label overlay */}
-              <div className="absolute inset-0 flex items-center justify-between px-3 text-xs font-bold pointer-events-none">
+              <div className="absolute inset-0 flex items-center px-3 text-xs font-bold pointer-events-none">
                 <span className="text-foreground drop-shadow-sm">
                   {Math.round(item.percentage)}%
                 </span>
-                <span
-                  className="tabular-nums drop-shadow-sm"
-                  style={{
-                    color: item.percentage > 30 ? 'white' : 'var(--foreground)',
-                  }}
-                >
-                  {item.percentage > 30 && formatNumber(item.value)}
-                </span>
               </div>
 
               {/* Drag hint on hover */}