diff --git a/src/api/Areas/Dashboard/Controllers/FileSystemItemController.cs b/src/api/Areas/Dashboard/Controllers/FileSystemItemController.cs
index 16c5c6ac..31ad415d 100644
--- a/src/api/Areas/Dashboard/Controllers/FileSystemItemController.cs
+++ b/src/api/Areas/Dashboard/Controllers/FileSystemItemController.cs
@@ -147,8 +147,7 @@ public IActionResult FindHistory()
             var user = _authorization.GetUser();
             if (user == null) return Forbid();
 
-            var result = _fileSystemHistoryItemService.FindHistoryByMonth(filter.StartDate ?? DateTime.UtcNow.AddYears(-1), filter.EndDate, filter.TenantId, filter.OrganizationId, filter.OperatingSystemItemId, filter.ServerItemServiceNowKey);
-            // var result = _fileSystemHistoryItemService.FindForUser(user.Id, filter);
+            var result = _fileSystemHistoryItemService.FindHistoryByMonthForUser(user.Id, filter.StartDate ?? DateTime.UtcNow.AddYears(-1), filter.EndDate, filter.TenantId, filter.OrganizationId, filter.OperatingSystemItemId, filter.ServerItemServiceNowKey);
             return new JsonResult(result.Select(fsi => new FileSystemHistoryItemModel(fsi)));
         }
     }
diff --git a/src/dashboard/src/app/client/dashboard/page.tsx b/src/dashboard/src/app/client/dashboard/page.tsx
index 7c217f1d..c28c7201 100644
--- a/src/dashboard/src/app/client/dashboard/page.tsx
+++ b/src/dashboard/src/app/client/dashboard/page.tsx
@@ -3,6 +3,7 @@ import {
   AllocationByOS,
   AllocationByStorageVolume,
   AllocationTable,
+  SegmentedBarChart,
   StorageTrendsChart,
   TotalStorage,
 } from '@/components/charts';
@@ -17,6 +18,7 @@ export default function Page() {
       <TotalStorage />
       <AllocationByOS />
       <AllocationTable operatingSystem={OperatingSystems.Windows} />
+      <SegmentedBarChart />
     </>
   );
 }
diff --git a/src/dashboard/src/components/charts/bar/segmentedBarChart/IVolumeData.ts b/src/dashboard/src/components/charts/bar/segmentedBarChart/IVolumeData.ts
new file mode 100644
index 00000000..14d1e515
--- /dev/null
+++ b/src/dashboard/src/components/charts/bar/segmentedBarChart/IVolumeData.ts
@@ -0,0 +1,7 @@
+export interface IVolumeData {
+  serviceNowKey: string;
+  name: string;
+  capacity: number;
+  availableSpace: number;
+  createdOn: string;
+}
diff --git a/src/dashboard/src/components/charts/bar/segmentedBarChart/SegmentedBarChart.module.scss b/src/dashboard/src/components/charts/bar/segmentedBarChart/SegmentedBarChart.module.scss
index de386a31..625b1765 100644
--- a/src/dashboard/src/components/charts/bar/segmentedBarChart/SegmentedBarChart.module.scss
+++ b/src/dashboard/src/components/charts/bar/segmentedBarChart/SegmentedBarChart.module.scss
@@ -1,49 +1,54 @@
 @import '@/styles/utils.scss';
 
 .panel {
-    @include panel-style(250px, unset, unset, 1310px);
+  @include panel-style(250px, unset, unset, 1310px);
 
-    button {
-        @include export-btn;
-    }
+  button {
+    @include export-btn;
+  }
 }
 
 .customLegend {
-    margin: 20px 0;
-    display: flex;
-    justify-content: space-evenly;
+  margin: 20px 0;
+  display: flex;
+  justify-content: space-evenly;
+}
+
+.legend {
+  display: flex;
+  flex-direction: row;
 }
 
 .legendColors {
+  display: inline-block;
+
+  span {
     display: inline-block;
+    height: 20px;
+    width: 55px;
+    position: relative;
 
-    span {
-        display: inline-block;
-        height: 20px;
-        width: 55px;
-        position: relative;
-
-        &::after {
-            position: absolute;
-            top: 23px;
-            font-size: $font-size-small;
-            color: $info-gray;
-        }
-
-        &:first-of-type::after {
-            content: 'Used';
-        }
-
-        &:last-of-type::after {
-            content: 'Unused';
-        }
+    &::after {
+      position: absolute;
+      top: 23px;
+      font-size: $font-size-small;
+      color: $info-gray;
     }
+
+    &:first-of-type::after {
+      content: 'Used';
+    }
+
+    &:last-of-type::after {
+      content: 'Unused';
+    }
+  }
 }
 
 .legendLabel {
-    display: inline;
-    margin-left: 10px;
-    font-weight: bold;
-    position: relative;
-    bottom: 4px;
+  display: inline;
+  margin-left: 10px;
+  font-weight: bold;
+  position: relative;
+  bottom: 4px;
 }
\ No newline at end of file
diff --git a/src/dashboard/src/components/charts/bar/segmentedBarChart/SegmentedBarChart.tsx b/src/dashboard/src/components/charts/bar/segmentedBarChart/SegmentedBarChart.tsx
index 6b0324aa..b68a6281 100644
--- a/src/dashboard/src/components/charts/bar/segmentedBarChart/SegmentedBarChart.tsx
+++ b/src/dashboard/src/components/charts/bar/segmentedBarChart/SegmentedBarChart.tsx
@@ -1,76 +1,73 @@
 'use client';
 
 import { Button } from '@/components/buttons';
-import styles from './SegmentedBarChart.module.scss';
 import { Bar } from 'react-chartjs-2';
-import { defaultData } from './defaultData';
+import styles from './SegmentedBarChart.module.scss';
 
-import {
-  CategoryScale,
-  Chart as ChartJS,
-  BarElement,
-  Title,
-  Tooltip,
-  Legend,
-} from 'chart.js';
+import { useDashboardFileSystemHistoryItems } from '@/hooks/dashboard';
+import { useFiltered } from '@/store';
+import { BarElement, CategoryScale, Chart as ChartJS, Legend, Title, Tooltip } from 'chart.js';
+import React from 'react';
+import { defaultOptions } from './defaultOptions';
+import { useStorageTrends } from './useStorageTrends';
+import { extractVolumeName } from './utils';
 
 ChartJS.register(CategoryScale, BarElement, Title, Tooltip, Legend);
 
-const options = {
-  scales: {
-    x: {
-      stacked: true,
-    },
-    y: {
-      stacked: true,
-    },
-  },
-  plugins: {
-    legend: {
-      display: false
-    }
-  },
-};
+export interface ISegmentedBarChart {
+  maxVolumes?: number;
+}
 
-export const SegmentedBarChart: React.FC = () => {
-  const numDrives = 3;
-  const labelsArray = [
-    'January',
-    'February',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December',
-  ];
+export const SegmentedBarChart = ({ maxVolumes = 4 }: ISegmentedBarChart) => {
+  const serverItem = useFiltered((state) => state.serverItem);
+  const { findFileSystemHistoryItems } = useDashboardFileSystemHistoryItems();
 
-  const data = defaultData(numDrives, labelsArray);
+  const data = useStorageTrends(1, maxVolumes);
 
-  const CustomLegend = () => (
-    <div className={styles.customLegend}>
-      {data.datasets.filter((_, i) => i % 2 === 0).map((dataset, index) => (
-        <div key={index}>
-          <div className={styles.legendColors}>
-            <span style={{ backgroundColor: dataset.backgroundColor }} />
-            <span style={{ backgroundColor: data.datasets[index * 2 + 1].backgroundColor }} />
+  React.useEffect(() => {
+    if (serverItem) {
+      // A single server was selected, fetch the history for this server.
+      findFileSystemHistoryItems({ serverItemServiceNowKey: serverItem.serviceNowKey }).catch(
+        () => {},
+      );
+    }
+  }, [findFileSystemHistoryItems, serverItem]);
+
+  const CustomLegend = React.useMemo(
+    () => (
+      <div className={styles.customLegend}>
+        {data.datasets
+          .filter((_, i) => i % 2 === 0)
+          .map((dataset, index) => (
+            <div key={index} className={styles.legend}>
+              <div className={styles.legendColors}>
+                <span style={{ backgroundColor: `${dataset.backgroundColor}` }} />
+                <span
+                  style={{ backgroundColor: `${data.datasets[index * 2 + 1].backgroundColor}` }}
+                />
+              </div>
+              <div className={styles.legendLabel}>
+                <p>{extractVolumeName((dataset as any).name)}</p>
+                <p>{(dataset as any).capacity}</p>
+              </div>
+            </div>
+          ))}
+        {data.volumes.length * 2 > data.datasets.length && (
+          <div>
+            <div className={styles.legendColors}>{data.volumes.length} volumes</div>
           </div>
-          <p className={styles.legendLabel}>{`Drive ${index + 1}`}</p>
-        </div>
-      ))}
-    </div>
+        )}
+      </div>
+    ),
+    [data.datasets, data.volumes.length],
   );
 
   return (
     <div className={styles.panel}>
-      <h1>Storage Trends - Drive Storage</h1>
-      <CustomLegend />
+      <h1>Storage Trends - {serverItem?.name ?? 'Drive'} Storage</h1>
+      {CustomLegend}
       <div className={styles.chartContainer}>
-        <Bar data={data} options={options} />
+        <Bar data={data} options={defaultOptions} />
       </div>
       <Button variant="secondary" iconPath="/images/download-icon.png" disabled>
         Export to Excel
diff --git a/src/dashboard/src/components/charts/bar/segmentedBarChart/defaultData.ts b/src/dashboard/src/components/charts/bar/segmentedBarChart/defaultData.ts
index dd87a765..5064306c 100644
--- a/src/dashboard/src/components/charts/bar/segmentedBarChart/defaultData.ts
+++ b/src/dashboard/src/components/charts/bar/segmentedBarChart/defaultData.ts
@@ -1,11 +1,29 @@
-export const defaultData = (numDrives: number, labelsArray: string[]) => {
+import { ChartData } from 'chart.js';
+
+// Define color pairs for used and unused space
+const colorPairs = [
+  ['#4D7194', '#86BAEF'],
+  ['#E9B84E', '#FFD57B'],
+  ['#A9A9A9', '#D7D7D7'],
+];
+
+const labelsArray = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+];
+
+export const defaultData = (numDrives: number): ChartData<'bar', number[], string> => {
   const datasets = [];
-  // Define color pairs for used and unused space
-  const colorPairs = [
-    ['#4D7194', '#86BAEF'],
-    ['#E9B84E', '#FFD57B'],
-    ['#A9A9A9', '#D7D7D7'],
-  ];
 
   for (let drive = 1; drive <= numDrives; drive++) {
     // Generate random data for the example
diff --git a/src/dashboard/src/components/charts/bar/segmentedBarChart/defaultOptions.ts b/src/dashboard/src/components/charts/bar/segmentedBarChart/defaultOptions.ts
new file mode 100644
index 00000000..301aa364
--- /dev/null
+++ b/src/dashboard/src/components/charts/bar/segmentedBarChart/defaultOptions.ts
@@ -0,0 +1,15 @@
+export const defaultOptions = {
+  scales: {
+    x: {
+      stacked: true,
+    },
+    y: {
+      stacked: true,
+    },
+  },
+  plugins: {
+    legend: {
+      display: false,
+    },
+  },
+};
diff --git a/src/dashboard/src/components/charts/bar/segmentedBarChart/useStorageTrends.ts b/src/dashboard/src/components/charts/bar/segmentedBarChart/useStorageTrends.ts
new file mode 100644
index 00000000..9f1f8320
--- /dev/null
+++ b/src/dashboard/src/components/charts/bar/segmentedBarChart/useStorageTrends.ts
@@ -0,0 +1,167 @@
+import { useStorageHistoryDateRange } from '@/components/charts/hooks';
+import { IFileSystemHistoryItemModel } from '@/hooks';
+import { useDashboard } from '@/store';
+import { groupBy } from '@/utils';
+import { ChartData } from 'chart.js';
+import moment from 'moment';
+import React from 'react';
+import { convertToStorageSize } from './../../../../utils/convertToStorageSize';
+import { IVolumeData } from './IVolumeData';
+
+const colorPairs = [
+  ['#4D7194', '#86BAEF'],
+  ['#E9B84E', '#FFD57B'],
+  ['#A9A9A9', '#D7D7D7'],
+];
+
+interface IStorageTrendsData extends ChartData<'bar', number[], string> {
+  volumes: IVolumeData[];
+}
+
+/**
+ * Generates line chart data based on the current filtered server history items.
+ * @param minColumns Minimum number of columns in the line chard (default = 1).
+ * @param maxVolumes Maximum number of mapped volumes that can be displayed (default = 5).
+ * @returns Line chart data.
+ */
+export const useStorageTrends = (
+  minColumns: number = 1,
+  maxVolumes: number = 4,
+): IStorageTrendsData => {
+  const groups = useStorageHistoryDateRange<IFileSystemHistoryItemModel>(minColumns);
+  const fileSystemHistoryItems = useDashboard((state) => state.fileSystemHistoryItems);
+
+  return React.useMemo(() => {
+    const history = fileSystemHistoryItems.filter((item) => item.mediaType === 'fixed');
+
+    // server history is returned for each server, however some servers may lack history.
+    // This process needs to group each month.
+    const items = history
+      .map((item) => {
+        const createdOn = moment(item.createdOn);
+        const month = '0' + (createdOn.month() + 1);
+        return {
+          ...item,
+          key: `${createdOn.year()}-${month.substring(month.length - 2)}`,
+          year: createdOn.year(),
+          month: createdOn.month() + 1,
+        };
+      })
+      .reduce((result, item) => {
+        const { key } = item;
+        (result as any)[key] = (result as any)[key] ?? [];
+        (result as any)[key].push(item);
+        return result;
+      }, {});
+
+    groups.forEach((group) => {
+      const values: IFileSystemHistoryItemModel[] = (items as any)[group.key] ?? [];
+      group.items = values;
+    });
+
+    // Extract the history for each mapped volume / drive.
+    const volumeHistory = groupBy<IFileSystemHistoryItemModel, IVolumeData>(
+      history,
+      (item) => item.serviceNowKey,
+      (item) => ({
+        serviceNowKey: item.serviceNowKey,
+        name: item.name,
+        capacity: item.capacity,
+        availableSpace: item.availableSpace,
+        createdOn: item.createdOn,
+      }),
+    );
+    // Take the last item in each sub-array, it should be the most recent entry.
+    const volumes = Object.values(volumeHistory)
+      .map((item) => item[item.length - 1])
+      .sort((a, b) => (a.capacity < b.capacity ? 1 : a.capacity > b.capacity ? -1 : 0));
+
+    // If there is more than the max, we actually only show one less than the max.
+    // We do this because we need space to provide a placeholder informing the user of additional volumes.
+    const actualMaxVolumes = maxVolumes < volumes.length ? maxVolumes - 1 : maxVolumes;
+
+    return {
+      labels: groups.map((i) => i.label),
+      volumes: volumes,
+      datasets: volumes
+        .slice(0, actualMaxVolumes)
+        .map((volume, index) => {
+          // Get color pair based on the current drive
+          const cIndex =
+            index === 0
+              ? 0
+              : index === 1
+              ? 1
+              : index === 2
+              ? 2
+              : index % 3 === 0
+              ? 0
+              : index % 2 === 0
+              ? 1
+              : 2;
+          const colors = colorPairs[cIndex];
+
+          // Merge the data for each volume into each group.
+          // There should only ever be one record per volume for each month.
+          // We use the last record in the array for each month.
+          const groupData = groups.map((group) => {
+            const items = group.items.filter((i) => i.serviceNowKey === volume.serviceNowKey);
+            const capacity = convertToStorageSize<number>(
+              items[items.length - 1].capacity,
+              'MB',
+              'GB',
+              { type: 'number' },
+            );
+            const available = convertToStorageSize<number>(
+              items[items.length - 1].availableSpace,
+              'MB',
+              'GB',
+              { type: 'number' },
+            );
+            const used = capacity - available;
+            return {
+              capacity,
+              available,
+              used,
+            };
+          });
+
+          // This results in an array of mapped volumes, which contains an array of two datasets.
+          // One dataset is an array of used space grouped by month.
+          // The second dataset is an array of unused space grouped by month.
+          return [
+            {
+              label: `Used ${volume.name} (${convertToStorageSize(volume.capacity, 'MB', 'GB', {
+                formula: (value) => Number(value.toFixed(1)),
+              })})`,
+              name: volume.name,
+              capacity: convertToStorageSize(volume.capacity, 'MB', 'GB', {
+                formula: (value) => Number(value.toFixed(1)),
+              }),
+              data: groupData.map((group) => group.used), // Record of the volume data for each group (month).
+              backgroundColor: colors[0],
+              stack: `Stack ${index - 1}`,
+            },
+            {
+              label: `Unused ${volume.name} (${convertToStorageSize(volume.capacity, 'MB', 'GB', {
+                formula: (value) => Number(value.toFixed(1)),
+              })})`,
+              name: volume.name,
+              capacity: convertToStorageSize(volume.capacity, 'MB', 'GB', {
+                formula: (value) => Number(value.toFixed(1)),
+              }),
+              data: groupData.map((group) => group.available), // Record of the volume data for each group (month).
+              backgroundColor: colors[1],
+              stack: `Stack ${index - 1}`,
+            },
+          ];
+        })
+        .reduce((result, volume) => {
+          // Pull the datasets out of each volume and flatten the array.
+          // Now there will be a dataset containing two records for each volume.
+          result.push(volume[0], volume[1]);
+          return result;
+        }, []),
+    };
+  }, [fileSystemHistoryItems, groups, maxVolumes]);
+};
diff --git a/src/dashboard/src/components/charts/bar/segmentedBarChart/utils/extractVolumeName.ts b/src/dashboard/src/components/charts/bar/segmentedBarChart/utils/extractVolumeName.ts
new file mode 100644
index 00000000..24515794
--- /dev/null
+++ b/src/dashboard/src/components/charts/bar/segmentedBarChart/utils/extractVolumeName.ts
@@ -0,0 +1,5 @@
+export const extractVolumeName = (name?: string) => {
+  // Only the last part of a mapped volume.
+  let i = name?.lastIndexOf('/') ?? -1;
+  return (i < 0 ? name : name?.substring(i + 1)) ?? '';
+};
diff --git a/src/dashboard/src/components/charts/bar/segmentedBarChart/utils/index.ts b/src/dashboard/src/components/charts/bar/segmentedBarChart/utils/index.ts
new file mode 100644
index 00000000..cf2edda2
--- /dev/null
+++ b/src/dashboard/src/components/charts/bar/segmentedBarChart/utils/index.ts
@@ -0,0 +1 @@
+export * from './extractVolumeName';
diff --git a/src/dashboard/src/components/charts/hooks/index.ts b/src/dashboard/src/components/charts/hooks/index.ts
new file mode 100644
index 00000000..f44fe626
--- /dev/null
+++ b/src/dashboard/src/components/charts/hooks/index.ts
@@ -0,0 +1 @@
+export * from './useStorageHistoryDateRange';
diff --git a/src/dashboard/src/components/charts/hooks/useStorageHistoryDateRange.ts b/src/dashboard/src/components/charts/hooks/useStorageHistoryDateRange.ts
new file mode 100644
index 00000000..d39ac4a1
--- /dev/null
+++ b/src/dashboard/src/components/charts/hooks/useStorageHistoryDateRange.ts
@@ -0,0 +1,52 @@
+import { useDashboard } from '@/store';
+import { calcMonthsBetween } from '@/utils';
+import moment from 'moment';
+
+export interface IDateRangeStorageHistoryData<T> {
+  key: string;
+  label: string;
+  items: T[];
+  capacity: number;
+  availableSpace: number;
+  usedSpace: number;
+}
+
+/**
+ * Generate a column for each month, with a minimum number of columns.
+ * @param minColumns Minimum number of columns
+ * @returns An array of months to contain history for each month.
+ */
+export const useStorageHistoryDateRange = <T>(minColumns: number = 1) => {
+  const dateRange = useDashboard((state) => state.dateRange);
+
+  const now = moment();
+  const start = dateRange[0]
+    ? moment(dateRange[0])
+    : moment(new Date(now.year(), now.month(), 1)).add(-1 * minColumns, 'months');
+  const end = dateRange[1] ? moment(dateRange[1]) : moment(Date.now());
+
+  const numberOfMonths = calcMonthsBetween(start.toDate(), end.toDate());
+  const minPoints = numberOfMonths > minColumns ? numberOfMonths : minColumns;
+
+  const endSafeDate = moment(new Date(end.year(), end.month(), 1));
+  return Array.from(new Array(minPoints), (_, index) => {
+    const date = endSafeDate.clone().add(-1 * (minPoints - 1 - index), 'months');
+    const month = '0' + (date.month() + 1);
+    const result: {
+      key: string;
+      label: string;
+      items: T[];
+      capacity: number;
+      availableSpace: number;
+      usedSpace: number;
+    } = {
+      key: `${date.year()}-${month.substring(month.length - 2)}`,
+      label: `${date.format('MMM')} ${date.format('YYYY')}`,
+      items: [],
+      capacity: 0,
+      availableSpace: 0,
+      usedSpace: 0,
+    };
+    return result;
+  });
+};
diff --git a/src/dashboard/src/components/charts/storageTrends/useStorageTrends.ts b/src/dashboard/src/components/charts/storageTrends/useStorageTrends.ts
index 51df7bf7..0c98db9b 100644
--- a/src/dashboard/src/components/charts/storageTrends/useStorageTrends.ts
+++ b/src/dashboard/src/components/charts/storageTrends/useStorageTrends.ts
@@ -1,106 +1,80 @@
 import { IServerHistoryItemModel } from '@/hooks';
 import { useDashboard } from '@/store';
-import { calcMonthsBetween, convertToStorageSize } from '@/utils';
+import { convertToStorageSize } from '@/utils';
 import { ChartData } from 'chart.js';
 import moment from 'moment';
+import React from 'react';
+import { useStorageHistoryDateRange } from '../hooks';
 
 /**
  * Generates line chart data based on the current filtered server history items.
- * @param minColumns Minimum number of columns in the line chard (default = 12).
+ * @param minColumns Minimum number of columns in the line chard (default = 1).
  * @returns Line chart data.
  */
 export const useStorageTrends = (minColumns: number = 1): ChartData<'line', number[], string> => {
-  const dateRange = useDashboard((state) => state.dateRange);
+  const groups = useStorageHistoryDateRange(minColumns);
   const serverHistoryItems = useDashboard((state) => state.serverHistoryItems);
 
-  const now = moment();
-  const start = dateRange[0]
-    ? moment(dateRange[0])
-    : moment(new Date(now.year(), now.month(), 1)).add(-1 * minColumns, 'months');
-  const end = dateRange[1] ? moment(dateRange[1]) : moment(Date.now());
+  return React.useMemo(() => {
+    // server history is returned for each server, however some servers may lack history.
+    // This process needs to group each month.
+    const items = serverHistoryItems
+      .map((item) => {
+        const createdOn = moment(item.createdOn);
+        const month = '0' + (createdOn.month() + 1);
+        return {
+          ...item,
+          key: `${createdOn.year()}-${month.substring(month.length - 2)}`,
+          year: createdOn.year(),
+          month: createdOn.month() + 1,
+        };
+      })
+      .reduce((result, item) => {
+        const { key } = item;
+        (result as any)[key] = (result as any)[key] ?? [];
+        (result as any)[key].push(item);
+        return result;
+      }, {});
 
-  const numberOfMonths = calcMonthsBetween(start.toDate(), end.toDate());
-  const minPoints = numberOfMonths > minColumns ? numberOfMonths : minColumns;
+    groups.forEach((group) => {
+      const values: IServerHistoryItemModel[] = (items as any)[group.key] ?? [];
+      group.items = values;
+      group.capacity = convertToStorageSize<number>(
+        values.map((i) => i.capacity).reduce((result, value) => (result ?? 0) + (value ?? 0), 0) ??
+          0,
+        'MB',
+        'TB',
+        { type: 'number' },
+      );
+      group.availableSpace = convertToStorageSize<number>(
+        values
+          .map((i) => i.availableSpace)
+          .reduce((result, value) => (result ?? 0) + (value ?? 0), 0) ?? 0,
+        'MB',
+        'TB',
+        { type: 'number' },
+      );
+      group.usedSpace = group.capacity - group.availableSpace;
+    });
 
-  const endSafeDate = moment(new Date(end.year(), end.month(), 1));
-  const groups = Array.from(new Array(minPoints), (_, index) => {
-    const date = endSafeDate.clone().add(-1 * (minPoints - 1 - index), 'months');
-    const month = '0' + (date.month() + 1);
-    const result: {
-      key: string;
-      label: string;
-      items: IServerHistoryItemModel[];
-      capacity: number;
-      availableSpace: number;
-      usedSpace: number;
-    } = {
-      key: `${date.year()}-${month.substring(month.length - 2)}`,
-      label: `${date.format('MMM')} ${date.format('YYYY')}`,
-      items: [],
-      capacity: 0,
-      availableSpace: 0,
-      usedSpace: 0,
+    return {
+      labels: groups.map((i) => i.label),
+      datasets: [
+        {
+          label: 'Total Used in TB',
+          data: groups.map((i) => i.usedSpace),
+          borderColor: '#313132',
+          backgroundColor: '#313132',
+          fill: false,
+        },
+        {
+          label: 'Total Allocated in TB',
+          data: groups.map((i) => i.capacity),
+          borderColor: '#476E94',
+          backgroundColor: '#476E94',
+          fill: false,
+        },
+      ],
     };
-    return result;
-  });
-
-  // server history is returned for each server, however some servers may lack history.
-  // This process needs to group each month.
-  const items = serverHistoryItems
-    .map((item) => {
-      const createdOn = moment(item.createdOn);
-      const month = '0' + (createdOn.month() + 1);
-      return {
-        ...item,
-        key: `${createdOn.year()}-${month.substring(month.length - 2)}`,
-        year: createdOn.year(),
-        month: createdOn.month() + 1,
-      };
-    })
-    .reduce((result, item) => {
-      const { key } = item;
-      (result as any)[key] = (result as any)[key] ?? [];
-      (result as any)[key].push(item);
-      return result;
-    }, {});
-
-  groups.forEach((group) => {
-    const values: IServerHistoryItemModel[] = (items as any)[group.key] ?? [];
-    group.items = values;
-    group.capacity = convertToStorageSize<number>(
-      values.map((i) => i.capacity).reduce((result, value) => (result ?? 0) + (value ?? 0), 0) ?? 0,
-      'MB',
-      'TB',
-      { type: 'number' },
-    );
-    group.availableSpace = convertToStorageSize<number>(
-      values
-        .map((i) => i.availableSpace)
-        .reduce((result, value) => (result ?? 0) + (value ?? 0), 0) ?? 0,
-      'MB',
-      'TB',
-      { type: 'number' },
-    );
-    group.usedSpace = group.capacity - group.availableSpace;
-  });
-
-  return {
-    labels: groups.map((i) => i.label),
-    datasets: [
-      {
-        label: 'Total Used in TB',
-        data: groups.map((i) => i.usedSpace),
-        borderColor: '#313132',
-        backgroundColor: '#313132',
-        fill: false,
-      },
-      {
-        label: 'Total Allocated in TB',
-        data: groups.map((i) => i.capacity),
-        borderColor: '#476E94',
-        backgroundColor: '#476E94',
-        fill: false,
-      },
-    ],
-  };
+  }, [groups, serverHistoryItems]);
 };
diff --git a/src/dashboard/src/hooks/dashboard/useDashboardFileSystemHistoryItems.ts b/src/dashboard/src/hooks/dashboard/useDashboardFileSystemHistoryItems.ts
index c0250b2d..146496e6 100644
--- a/src/dashboard/src/hooks/dashboard/useDashboardFileSystemHistoryItems.ts
+++ b/src/dashboard/src/hooks/dashboard/useDashboardFileSystemHistoryItems.ts
@@ -9,7 +9,9 @@ import {
 export const useDashboardFileSystemHistoryItems = () => {
   const { history } = useApiFileSystemItems();
   const fileSystemHistoryItemsReady = useDashboard((state) => state.fileSystemHistoryItemsReady);
-  const setServerHistoryItemsReady = useDashboard((state) => state.setServerHistoryItemsReady);
+  const setFileSystemHistoryItemsReady = useDashboard(
+    (state) => state.setFileSystemHistoryItemsReady,
+  );
   const fileSystemHistoryItems = useDashboard((state) => state.fileSystemHistoryItems);
   const setFilteredFileSystemHistoryItems = useDashboard(
     (state) => state.setFileSystemHistoryItems,
@@ -18,7 +20,7 @@ export const useDashboardFileSystemHistoryItems = () => {
   const fetch = React.useCallback(
     async (filter: IFileSystemHistoryItemFilter) => {
       try {
-        setServerHistoryItemsReady(false);
+        setFileSystemHistoryItemsReady(false);
         const res = await history(filter);
         const fileSystemHistoryItems: IFileSystemHistoryItemModel[] = await res.json();
         setFilteredFileSystemHistoryItems(fileSystemHistoryItems);
@@ -26,10 +28,10 @@ export const useDashboardFileSystemHistoryItems = () => {
       } catch (error) {
         throw error;
       } finally {
-        setServerHistoryItemsReady(true);
+        setFileSystemHistoryItemsReady(true);
       }
     },
-    [history, setFilteredFileSystemHistoryItems, setServerHistoryItemsReady],
+    [history, setFilteredFileSystemHistoryItems, setFileSystemHistoryItemsReady],
   );
 
   return React.useMemo(
diff --git a/src/libs/dal/Migrations/0.0.0/Up/PostUp/04-FindFileSystemHistoryItemsByMonth.sql b/src/libs/dal/Migrations/0.0.0/Up/PostUp/04-FindFileSystemHistoryItemsByMonth.sql
index fc665504..70876026 100644
--- a/src/libs/dal/Migrations/0.0.0/Up/PostUp/04-FindFileSystemHistoryItemsByMonth.sql
+++ b/src/libs/dal/Migrations/0.0.0/Up/PostUp/04-FindFileSystemHistoryItemsByMonth.sql
@@ -56,3 +56,4 @@ END;$$
 
 -- Use by calling
 -- select * from public."FindFileSystemHistoryItemsByMonth"('2023-12-01');
+-- select * from public."FindFileSystemHistoryItemsByMonth"('2023-12-01', null, null, null, null, '194b0f6edb3adf405d8e90f9db961953');