diff --git a/src/components/Sidebar/SubscriptionCard/contentOverlay/family/index.tsx b/src/components/Sidebar/SubscriptionCard/contentOverlay/family/index.tsx
new file mode 100644
index 000000000..59d900545
--- /dev/null
+++ b/src/components/Sidebar/SubscriptionCard/contentOverlay/family/index.tsx
@@ -0,0 +1,36 @@
+import React, { useMemo } from 'react';
+import { UserDetails } from 'types/user';
+import { isPartOfFamily } from 'utils/billing';
+import StorageSection from '../storageSection';
+import { FamilyUsageSection } from './usageSection';
+
+interface Iprops {
+    userDetails: UserDetails;
+}
+export function FamilySubscriptionCardContent({ userDetails }: Iprops) {
+    const totalUsage = useMemo(() => {
+        if (isPartOfFamily(userDetails.familyData)) {
+            return userDetails.familyData.members.reduce(
+                (sum, currentMember) => sum + currentMember.usage,
+                0
+            );
+        } else {
+            return userDetails.usage;
+        }
+    }, [userDetails]);
+
+    return (
+        <>
+            <StorageSection
+                storage={userDetails.familyData.storage}
+                usage={totalUsage}
+            />
+            <FamilyUsageSection
+                userUsage={userDetails.usage}
+                fileCount={userDetails.fileCount}
+                totalUsage={totalUsage}
+                totalStorage={userDetails.familyData.storage}
+            />
+        </>
+    );
+}
diff --git a/src/components/Sidebar/SubscriptionCard/contentOverlay/usageSection/familyUsageSection/index.tsx b/src/components/Sidebar/SubscriptionCard/contentOverlay/family/usageSection/index.tsx
similarity index 59%
rename from src/components/Sidebar/SubscriptionCard/contentOverlay/usageSection/familyUsageSection/index.tsx
rename to src/components/Sidebar/SubscriptionCard/contentOverlay/family/usageSection/index.tsx
index 0138a9efd..d7648dfc8 100644
--- a/src/components/Sidebar/SubscriptionCard/contentOverlay/usageSection/familyUsageSection/index.tsx
+++ b/src/components/Sidebar/SubscriptionCard/contentOverlay/family/usageSection/index.tsx
@@ -1,30 +1,29 @@
 import { Legend } from './legend';
 import { FamilyUsageProgressBar } from './progressBar';
-import { Stack, Typography } from '@mui/material';
+import { Box, Stack, Typography } from '@mui/material';
 import { SpaceBetweenFlex } from 'components/Container';
-import React, { useMemo } from 'react';
-import { UserDetails } from 'types/user';
+import React from 'react';
 import constants from 'utils/strings/constants';
 
-export function FamilyUsageSection({
-    userDetails,
-}: {
-    userDetails: UserDetails;
-}) {
-    const totalUsage = useMemo(
-        () =>
-            userDetails.familyData.members.reduce(
-                (sum, currentMember) => sum + currentMember.usage,
-                0
-            ),
-        [userDetails]
-    );
+interface Iprops {
+    userUsage: number;
+    totalUsage: number;
+    fileCount: number;
+    totalStorage: number;
+}
 
+export function FamilyUsageSection({
+    userUsage,
+    totalUsage,
+    fileCount,
+    totalStorage,
+}: Iprops) {
     return (
-        <>
+        <Box width="100%">
             <FamilyUsageProgressBar
                 totalUsage={totalUsage}
-                userDetails={userDetails}
+                userUsage={userUsage}
+                totalStorage={totalStorage}
             />
             <SpaceBetweenFlex
                 sx={{
@@ -35,9 +34,9 @@ export function FamilyUsageSection({
                     <Legend label={constants.FAMILY} color="text.secondary" />
                 </Stack>
                 <Typography variant="caption" fontWeight={'bold'}>
-                    {constants.PHOTO_COUNT(userDetails.fileCount ?? 0)}
+                    {constants.PHOTO_COUNT(fileCount ?? 0)}
                 </Typography>
             </SpaceBetweenFlex>
-        </>
+        </Box>
     );
 }
diff --git a/src/components/Sidebar/SubscriptionCard/contentOverlay/usageSection/familyUsageSection/legend.tsx b/src/components/Sidebar/SubscriptionCard/contentOverlay/family/usageSection/legend.tsx
similarity index 100%
rename from src/components/Sidebar/SubscriptionCard/contentOverlay/usageSection/familyUsageSection/legend.tsx
rename to src/components/Sidebar/SubscriptionCard/contentOverlay/family/usageSection/legend.tsx
diff --git a/src/components/Sidebar/SubscriptionCard/contentOverlay/usageSection/familyUsageSection/progressBar.tsx b/src/components/Sidebar/SubscriptionCard/contentOverlay/family/usageSection/progressBar.tsx
similarity index 67%
rename from src/components/Sidebar/SubscriptionCard/contentOverlay/usageSection/familyUsageSection/progressBar.tsx
rename to src/components/Sidebar/SubscriptionCard/contentOverlay/family/usageSection/progressBar.tsx
index e31ab7854..3dfbd5e50 100644
--- a/src/components/Sidebar/SubscriptionCard/contentOverlay/usageSection/familyUsageSection/progressBar.tsx
+++ b/src/components/Sidebar/SubscriptionCard/contentOverlay/family/usageSection/progressBar.tsx
@@ -1,14 +1,22 @@
 import { Box } from '@mui/material';
 import React from 'react';
 import { Progressbar } from '../../../styledComponents';
-export function FamilyUsageProgressBar({ totalUsage, userDetails }) {
+interface Iprops {
+    userUsage: number;
+    totalUsage: number;
+    totalStorage: number;
+}
+
+export function FamilyUsageProgressBar({
+    userUsage,
+    totalUsage,
+    totalStorage,
+}: Iprops) {
     return (
         <Box position={'relative'} width="100%">
             <Progressbar
                 sx={{ backgroundColor: 'transparent' }}
-                value={
-                    (userDetails.usage * 100) / userDetails.familyData.storage
-                }
+                value={(userUsage * 100) / totalStorage}
             />
             <Progressbar
                 sx={{
@@ -20,7 +28,7 @@ export function FamilyUsageProgressBar({ totalUsage, userDetails }) {
                     },
                     width: '100%',
                 }}
-                value={(totalUsage * 100) / userDetails.familyData.storage}
+                value={(totalUsage * 100) / totalStorage}
             />
         </Box>
     );
diff --git a/src/components/Sidebar/SubscriptionCard/contentOverlay/index.tsx b/src/components/Sidebar/SubscriptionCard/contentOverlay/index.tsx
index 2eccc575e..72b7c8d48 100644
--- a/src/components/Sidebar/SubscriptionCard/contentOverlay/index.tsx
+++ b/src/components/Sidebar/SubscriptionCard/contentOverlay/index.tsx
@@ -1,39 +1,25 @@
-import React, { useMemo } from 'react';
-import StorageSection from './storageSection';
-import { isPartOfFamily } from 'utils/billing';
+import { IndividualSubscriptionCardContent } from './individual';
+import { FamilySubscriptionCardContent } from './family';
+import React from 'react';
+import { hasNonAdminFamilyMembers } from 'utils/billing';
 import { SpaceBetweenFlex } from 'components/Container';
-import { UsageSection } from './usageSection';
+import { UserDetails } from 'types/user';
 
-export function SubscriptionCardContent({ userDetails }) {
-    const totalUsage = useMemo(() => {
-        if (isPartOfFamily(userDetails.familyData)) {
-            return userDetails.familyData.members.reduce(
-                (sum, currentMember) => sum + currentMember.usage,
-                0
-            );
-        } else {
-            return userDetails.usage;
-        }
-    }, [userDetails]);
-
-    const totalStorage = useMemo(() => {
-        if (isPartOfFamily(userDetails.familyData)) {
-            return userDetails.familyData.storage;
-        } else {
-            return userDetails.subscription.storage;
-        }
-    }, [userDetails]);
+interface Iprops {
+    userDetails: UserDetails;
+}
 
+export function SubscriptionCardContent({ userDetails }: Iprops) {
     return (
         <SpaceBetweenFlex
             height={'100%'}
             flexDirection={'column'}
             padding={'20px 16px'}>
-            <StorageSection
-                totalStorage={totalStorage}
-                totalUsage={totalUsage}
-            />
-            <UsageSection userDetails={userDetails} />
+            {hasNonAdminFamilyMembers(userDetails.familyData) ? (
+                <FamilySubscriptionCardContent userDetails={userDetails} />
+            ) : (
+                <IndividualSubscriptionCardContent userDetails={userDetails} />
+            )}
         </SpaceBetweenFlex>
     );
 }
diff --git a/src/components/Sidebar/SubscriptionCard/contentOverlay/individual/index.tsx b/src/components/Sidebar/SubscriptionCard/contentOverlay/individual/index.tsx
new file mode 100644
index 000000000..286f22735
--- /dev/null
+++ b/src/components/Sidebar/SubscriptionCard/contentOverlay/individual/index.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { UserDetails } from 'types/user';
+import StorageSection from '../storageSection';
+import { IndividualUsageSection } from './usageSection';
+
+interface Iprops {
+    userDetails: UserDetails;
+}
+
+export function IndividualSubscriptionCardContent({ userDetails }: Iprops) {
+    return (
+        <>
+            <StorageSection
+                storage={userDetails.subscription.storage}
+                usage={userDetails.usage}
+            />
+            <IndividualUsageSection
+                usage={userDetails.usage}
+                fileCount={userDetails.fileCount}
+                storage={userDetails.subscription.storage}
+            />
+        </>
+    );
+}
diff --git a/src/components/Sidebar/SubscriptionCard/contentOverlay/usageSection/individualUsageSection.tsx b/src/components/Sidebar/SubscriptionCard/contentOverlay/individual/usageSection.tsx
similarity index 62%
rename from src/components/Sidebar/SubscriptionCard/contentOverlay/usageSection/individualUsageSection.tsx
rename to src/components/Sidebar/SubscriptionCard/contentOverlay/individual/usageSection.tsx
index db5d96904..9197b33c9 100644
--- a/src/components/Sidebar/SubscriptionCard/contentOverlay/usageSection/individualUsageSection.tsx
+++ b/src/components/Sidebar/SubscriptionCard/contentOverlay/individual/usageSection.tsx
@@ -1,30 +1,31 @@
-import { Typography } from '@mui/material';
+import { Box, Typography } from '@mui/material';
 import { SpaceBetweenFlex } from 'components/Container';
 import React from 'react';
 import { makeHumanReadableStorage } from 'utils/billing';
 import constants from 'utils/strings/constants';
 import { Progressbar } from '../../styledComponents';
 
-export function IndividualUsageSection({ userDetails }) {
+interface Iprops {
+    usage: number;
+    fileCount: number;
+    storage: number;
+}
+export function IndividualUsageSection({ usage, storage, fileCount }: Iprops) {
     return (
-        <>
-            <Progressbar
-                value={
-                    (userDetails.usage * 100) / userDetails.subscription.storage
-                }
-            />
+        <Box width="100%">
+            <Progressbar value={(usage * 100) / storage} />
             <SpaceBetweenFlex
                 sx={{
                     marginTop: 1.5,
                 }}>
                 <Typography variant="caption">{`${makeHumanReadableStorage(
-                    userDetails.usage,
+                    usage,
                     'round-up'
                 )} ${constants.USED}`}</Typography>
                 <Typography variant="caption" fontWeight={'bold'}>
-                    {constants.PHOTO_COUNT(userDetails.fileCount ?? 0)}
+                    {constants.PHOTO_COUNT(fileCount ?? 0)}
                 </Typography>
             </SpaceBetweenFlex>
-        </>
+        </Box>
     );
 }
diff --git a/src/components/Sidebar/SubscriptionCard/contentOverlay/storageSection.tsx b/src/components/Sidebar/SubscriptionCard/contentOverlay/storageSection.tsx
index 48c4b9843..05c9480f4 100644
--- a/src/components/Sidebar/SubscriptionCard/contentOverlay/storageSection.tsx
+++ b/src/components/Sidebar/SubscriptionCard/contentOverlay/storageSection.tsx
@@ -4,10 +4,10 @@ import { makeHumanReadableStorage } from 'utils/billing';
 import constants from 'utils/strings/constants';
 
 interface Iprops {
-    totalUsage: number;
-    totalStorage: number;
+    usage: number;
+    storage: number;
 }
-export default function StorageSection({ totalUsage, totalStorage }: Iprops) {
+export default function StorageSection({ usage, storage }: Iprops) {
     return (
         <Box width="100%">
             <Typography variant="body2" color={'text.secondary'}>
@@ -17,9 +17,9 @@ export default function StorageSection({ totalUsage, totalStorage }: Iprops) {
             <Typography
                 fontWeight={'bold'}
                 sx={{ fontSize: '24px', lineHeight: '30px' }}>
-                {`${makeHumanReadableStorage(totalStorage - totalUsage)} ${
+                {`${makeHumanReadableStorage(storage - usage)} ${
                     constants.OF
-                } ${makeHumanReadableStorage(totalStorage)} ${constants.FREE}`}
+                } ${makeHumanReadableStorage(storage)} ${constants.FREE}`}
             </Typography>
         </Box>
     );
diff --git a/src/components/Sidebar/SubscriptionCard/contentOverlay/usageSection/index.tsx b/src/components/Sidebar/SubscriptionCard/contentOverlay/usageSection/index.tsx
deleted file mode 100644
index b04e7fb38..000000000
--- a/src/components/Sidebar/SubscriptionCard/contentOverlay/usageSection/index.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { IndividualUsageSection } from './individualUsageSection';
-import React from 'react';
-import { Box } from '@mui/material';
-import { FamilyUsageSection } from './familyUsageSection';
-import { hasNonAdminFamilyMembers } from 'utils/billing';
-
-export function UsageSection({ userDetails }) {
-    return (
-        <Box width="100%" flexDirection="column" justifyContent={'center'}>
-            {hasNonAdminFamilyMembers(userDetails.familyData) ? (
-                <FamilyUsageSection userDetails={userDetails} />
-            ) : (
-                <IndividualUsageSection userDetails={userDetails} />
-            )}
-        </Box>
-    );
-}