diff --git a/interface/app/$libraryId/overview/LibraryStats.tsx b/interface/app/$libraryId/overview/LibraryStats.tsx
index 38b4ec2ed..e573ee289 100644
--- a/interface/app/$libraryId/overview/LibraryStats.tsx
+++ b/interface/app/$libraryId/overview/LibraryStats.tsx
@@ -115,7 +115,7 @@ const LibraryStats = () => {
 	}
 
 	const { statistics } = stats.data;
-	const totalSpace = Number(statistics.total_local_bytes_capacity);
+	const totalSpace = Number(statistics.total_library_bytes);
 	const totalUsedSpace = Number(statistics.total_local_bytes_used);
 
 	// Define the major categories and aggregate the "Other" category
@@ -146,11 +146,11 @@ const LibraryStats = () => {
 
 	const sections: Section[] = Object.entries(aggregatedData).map(([name, data], index) => {
 		const colors = [
+			'#6D90B9', // Gray
 			'#3A7ECC', // Slightly Darker Blue 400
-			'#AAAAAA', // Gray
 			'#004C99', // Tailwind Blue 700
 			'#2563EB', // Tailwind Blue 500
-			'#00274D' // Dark Navy Blue,
+			'#004C99' // Dark Navy Blue,
 		];
 
 		const color = colors[index % colors.length] || '#8F8F8F'; // Use a default color if colors array is empty
@@ -162,14 +162,6 @@ const LibraryStats = () => {
 		};
 	});
 
-	// Add System Data section
-	sections.push({
-		name: 'System Data',
-		value: systemDataBytes,
-		color: '#2F3038', // Gray for System Data
-		tooltip: 'System data that exists outside of your Spacedrive library'
-	});
-
 	return (
 		<Card className="flex h-[220px] w-[750px] shrink-0 flex-col bg-app-box/50">
 			<div className="flex overflow-hidden p-4">
diff --git a/interface/app/$libraryId/overview/StorageBar.tsx b/interface/app/$libraryId/overview/StorageBar.tsx
index 955f54237..230b59d93 100644
--- a/interface/app/$libraryId/overview/StorageBar.tsx
+++ b/interface/app/$libraryId/overview/StorageBar.tsx
@@ -44,27 +44,24 @@ const StorageBar: React.FC<StorageBarProps> = ({ sections, totalSpace }) => {
 		return `${pixvalue.toFixed(2)}px`;
 	};
 
-	const usedSpace = sections.reduce((acc, section) => acc + section.value, 0);
-	const unusedSpace = totalSpace - usedSpace;
-
-	const nonSystemSections = sections.filter((section) => section.name !== 'System Data');
-	const systemSection = sections.find((section) => section.name === 'System Data');
+	// Sort sections by value from smallest to largest
+	const sortedSections = sections.sort((a, b) => a.value - b.value);
 
 	return (
 		<div className="w-auto p-3">
 			<div className="relative mt-1 flex h-6 overflow-hidden rounded">
-				{nonSystemSections.map((section, index) => {
+				{sortedSections.map((section, index) => {
 					const humanizedValue = humanizeSize(section.value);
 					const isHovered = hoveredSectionIndex === index;
 
 					return (
 						<Tooltip
 							key={index}
-							label={`${humanizedValue.value} ${humanizedValue.unit}`}
+							label={section.tooltip} // Swapped with the tooltip from the second Tooltip component
 							position="top"
 						>
 							<div
-								className={`relative h-full`}
+								className="relative h-full"
 								style={{
 									width: getPercentage(section.value),
 									minWidth: '2px', // Ensure very small sections are visible
@@ -79,35 +76,14 @@ const StorageBar: React.FC<StorageBarProps> = ({ sections, totalSpace }) => {
 						</Tooltip>
 					);
 				})}
-				{unusedSpace > 0 && (
-					<div
-						className="relative h-full"
-						style={{
-							width: getPercentage(unusedSpace),
-							backgroundColor: isDark ? '#1C1D25' : '#D3D3D3'
-						}}
-					/>
-				)}
-				{systemSection && (
-					<Tooltip
-						label={`${humanizeSize(systemSection.value).value} ${humanizeSize(systemSection.value).unit}`}
-						position="top"
-					>
-						<div
-							className="relative h-full rounded-r"
-							style={{
-								width: getPercentage(systemSection.value),
-								minWidth: '2px',
-								backgroundColor: systemSection.color,
-								transition: 'background-color 0.3s ease-in-out'
-							}}
-						/>
-					</Tooltip>
-				)}
 			</div>
 			<div className={`mt-6 flex flex-wrap ${isDark ? 'text-ink-dull' : 'text-gray-800'}`}>
-				{sections.map((section, index) => (
-					<Tooltip key={index} label={section.tooltip} position="top">
+				{sortedSections.map((section, index) => (
+					<Tooltip
+						key={index}
+						label={`${humanizeSize(section.value).value} ${humanizeSize(section.value).unit}`}
+						position="top"
+					>
 						<div
 							className="mb-2 mr-8 flex items-center"
 							onMouseEnter={() => setHoveredSectionIndex(index)}