diff --git a/src/components/Sidebar/SubscriptionCard/contentOverlay/individual/usageSection.tsx b/src/components/Sidebar/SubscriptionCard/contentOverlay/individual/usageSection.tsx
index 9197b33c9..22ef34b5c 100644
--- a/src/components/Sidebar/SubscriptionCard/contentOverlay/individual/usageSection.tsx
+++ b/src/components/Sidebar/SubscriptionCard/contentOverlay/individual/usageSection.tsx
@@ -19,9 +19,8 @@ export function IndividualUsageSection({ usage, storage, fileCount }: Iprops) {
marginTop: 1.5,
}}>
{`${makeHumanReadableStorage(
- usage,
- 'round-up'
- )} ${constants.USED}`}
+ storage - usage
+ )} ${constants.FREE}`}
{constants.PHOTO_COUNT(fileCount ?? 0)}
diff --git a/src/components/Sidebar/SubscriptionCard/contentOverlay/storageSection.tsx b/src/components/Sidebar/SubscriptionCard/contentOverlay/storageSection.tsx
index 05c9480f4..e0762ea5e 100644
--- a/src/components/Sidebar/SubscriptionCard/contentOverlay/storageSection.tsx
+++ b/src/components/Sidebar/SubscriptionCard/contentOverlay/storageSection.tsx
@@ -1,8 +1,21 @@
-import { Box, Typography } from '@mui/material';
+import { Box, styled, Typography } from '@mui/material';
import React from 'react';
-import { makeHumanReadableStorage } from 'utils/billing';
+import { convertBytesToGBs, makeHumanReadableStorage } from 'utils/billing';
import constants from 'utils/strings/constants';
+const MobileSmallBox = styled(Box)`
+ display: none;
+ @media (max-width: 359px) {
+ display: block;
+ }
+`;
+
+const DefaultBox = styled(Box)`
+ display: none;
+ @media (min-width: 360px) {
+ display: block;
+ }
+`;
interface Iprops {
usage: number;
storage: number;
@@ -17,9 +30,16 @@ export default function StorageSection({ usage, storage }: Iprops) {
- {`${makeHumanReadableStorage(storage - usage)} ${
- constants.OF
- } ${makeHumanReadableStorage(storage)} ${constants.FREE}`}
+
+ {`${makeHumanReadableStorage(usage, 'round-up')} ${
+ constants.OF
+ } ${makeHumanReadableStorage(storage)} ${constants.USED}`}
+
+
+ {`${convertBytesToGBs(usage)} / ${convertBytesToGBs(
+ storage
+ )} ${constants.GB} ${constants.USED}`}
+
);
diff --git a/src/components/pages/gallery/PlanSelector/card.tsx b/src/components/pages/gallery/PlanSelector/card.tsx
index 93640d0de..2cfa7aa86 100644
--- a/src/components/pages/gallery/PlanSelector/card.tsx
+++ b/src/components/pages/gallery/PlanSelector/card.tsx
@@ -168,7 +168,7 @@ function PlanSelectorCard(props: Props) {
- {convertBytesToGBs(subscription.storage)}{' '}
+ {convertBytesToGBs(subscription.storage, 2)}{' '}
{constants.GB}
diff --git a/src/utils/billing/index.ts b/src/utils/billing/index.ts
index 102f5a03a..2e7b8c609 100644
--- a/src/utils/billing/index.ts
+++ b/src/utils/billing/index.ts
@@ -33,8 +33,8 @@ const StorageUnits = ['B', 'KB', 'MB', 'GB', 'TB'];
const ONE_GB = 1024 * 1024 * 1024;
-export function convertBytesToGBs(bytes: number): string {
- return (bytes / (1024 * 1024 * 1024)).toFixed(0);
+export function convertBytesToGBs(bytes: number, precision = 0): string {
+ return (bytes / (1024 * 1024 * 1024)).toFixed(precision);
}
export function convertBytesToHumanReadable(