diff --git a/app/constants/index.js b/app/constants/index.js
index da64995..771517f 100644
--- a/app/constants/index.js
+++ b/app/constants/index.js
@@ -3,201 +3,38 @@ export const COMPANY = 'Telecom Infra Project';
 export const IS_RADIO_TYPE_5GHZ = 'is5GHz';
 export const IS_RADIO_TYPE_2DOT4GHZ = 'is2dot4GHz';
 
-export const CLIENT_DEVICES_TABLE_DATA = [
+export const METRICS_DATA = [
   {
-    key: 0,
-    name: 'Laptop',
-    mac: 'DO:C6:37:69:3E:FD',
-    osModelMfr: 'Linux',
-    ip: '100.115.92.2',
-    hostName: 'LAPTOP-714LRTP6',
-    accessPoint: 'AP100',
-    ssid: 'TestUs',
-    band: '5Ghz',
-    signal: '-43 dBm',
-    status: '39h 41m 25s Connected',
-    locationId: 3,
+    model_type: 'ServiceMetric',
+    customerId: 2,
+    equipmentId: 51,
+    clientMac: 211771154934121,
+    dataType: 'Client',
+    createdTimestamp: 1591891071746,
+    txBytes: 485035578,
+    rxBytes: 33484840,
+    rssi: -45,
   },
   {
-    key: 1,
-    name: 'Laptop',
-    mac: 'DO:C6:37:69:3E:FD',
-    osModelMfr: 'Linux',
-    ip: '100.115.92.2',
-    hostName: 'LAPTOP-714LRTP6',
-    accessPoint: 'AP100',
-    ssid: 'TestUs',
-    band: '5Ghz',
-    signal: '-43 dBm',
-    status: '39h 41m 25s Connected',
-    locationId: 7,
+    model_type: 'ServiceMetric',
+    customerId: 2,
+    equipmentId: 51,
+    clientMac: 9786249446603,
+    dataType: 'Client',
+    createdTimestamp: 1591893111581,
+    rssi: -50,
+    rxBytes: 226475,
+    txBytes: 3736481,
   },
   {
-    key: 2,
-    name: 'Laptop',
-    mac: 'DO:C6:37:69:3E:FD',
-    osModelMfr: 'Linux',
-    ip: '100.115.92.2',
-    hostName: 'LAPTOP-714LRTP6',
-    accessPoint: 'AP100',
-    ssid: 'TestUs',
-    band: '5Ghz',
-    signal: '-43 dBm',
-    status: '39h 41m 25s Connected',
-    locationId: 2,
-  },
-  {
-    key: 3,
-    name: 'Laptop',
-    mac: 'DO:C6:37:69:3E:FD',
-    osModelMfr: 'Linux',
-    ip: '100.115.92.2',
-    hostName: 'LAPTOP-714LRTP6',
-    accessPoint: 'AP100',
-    ssid: 'TestUs',
-    band: '5Ghz',
-    signal: '-43 dBm',
-    status: '39h 41m 25s Connected',
-    locationId: 2,
-  },
-  {
-    key: 4,
-    name: 'Laptop',
-    mac: 'DO:C6:37:69:3E:FD',
-    osModelMfr: 'Linux',
-    ip: '100.115.92.2',
-    hostName: 'LAPTOP-714LRTP6',
-    accessPoint: 'AP100',
-    ssid: 'TestUs',
-    band: '5Ghz',
-    signal: '-43 dBm',
-    status: '39h 41m 25s Connected',
-    locationId: 2,
-  },
-  {
-    key: 5,
-    name: 'Laptop',
-    mac: 'DO:C6:37:69:3E:FD',
-    osModelMfr: 'Linux',
-    ip: '100.115.92.2',
-    hostName: 'LAPTOP-714LRTP6',
-    accessPoint: 'AP100',
-    ssid: 'TestUs',
-    band: '5Ghz',
-    signal: '-43 dBm',
-    status: '39h 41m 25s Connected',
-    locationId: 2,
-  },
-  {
-    key: 6,
-    name: 'Laptop',
-    mac: 'DO:C6:37:69:3E:FD',
-    osModelMfr: 'Linux',
-    ip: '100.115.92.2',
-    hostName: 'LAPTOP-714LRTP6',
-    accessPoint: 'AP100',
-    ssid: 'TestUs',
-    band: '5Ghz',
-    signal: '-43 dBm',
-    status: '39h 41m 25s Connected',
-    locationId: 8,
-  },
-  {
-    key: 7,
-    name: 'Laptop',
-    mac: 'DO:C6:37:69:3E:FD',
-    osModelMfr: 'Linux',
-    ip: '100.115.92.2',
-    hostName: 'LAPTOP-714LRTP6',
-    accessPoint: 'AP100',
-    ssid: 'TestUs',
-    band: '5Ghz',
-    signal: '-43 dBm',
-    status: '39h 41m 25s Connected',
-    locationId: 8,
-  },
-  {
-    key: 8,
-    name: 'Laptop',
-    mac: 'DO:C6:37:69:3E:FD',
-    osModelMfr: 'Linux',
-    ip: '100.115.92.2',
-    hostName: 'LAPTOP-714LRTP6',
-    accessPoint: 'AP100',
-    ssid: 'TestUs',
-    band: '5Ghz',
-    signal: '-43 dBm',
-    status: '39h 41m 25s Connected',
-    locationId: 8,
-  },
-  {
-    key: 9,
-    name: 'Laptop',
-    mac: 'DO:C6:37:69:3E:FD',
-    osModelMfr: 'Linux',
-    ip: '100.115.92.2',
-    hostName: 'LAPTOP-714LRTP6',
-    accessPoint: 'AP100',
-    ssid: 'TestUs',
-    band: '5Ghz',
-    signal: '-43 dBm',
-    status: '39h 41m 25s Connected',
-    locationId: 8,
-  },
-  {
-    key: 10,
-    name: 'Laptop',
-    mac: 'DO:C6:37:69:3E:FD',
-    osModelMfr: 'Linux',
-    ip: '100.115.92.2',
-    hostName: 'LAPTOP-714LRTP6',
-    accessPoint: 'AP100',
-    ssid: 'TestUs',
-    band: '5Ghz',
-    signal: '-43 dBm',
-    status: '39h 41m 25s Connected',
-    locationId: 8,
-  },
-  {
-    key: 11,
-    name: 'Laptop',
-    mac: 'DO:C6:37:69:3E:FD',
-    osModelMfr: 'Linux',
-    ip: '100.115.92.2',
-    hostName: 'LAPTOP-714LRTP6',
-    accessPoint: 'AP100',
-    ssid: 'TestUs',
-    band: '5Ghz',
-    signal: '-43 dBm',
-    status: '39h 41m 25s Connected',
-    locationId: 8,
-  },
-  {
-    key: 12,
-    name: 'Laptop',
-    mac: 'DO:C6:37:69:3E:FD',
-    osModelMfr: 'Linux',
-    ip: '100.115.92.2',
-    hostName: 'LAPTOP-714LRTP6',
-    accessPoint: 'AP100',
-    ssid: 'TestUs',
-    band: '5Ghz',
-    signal: '-43 dBm',
-    status: '39h 41m 25s Connected',
-    locationId: 8,
-  },
-  {
-    key: 13,
-    name: 'Laptop',
-    mac: 'DO:C6:37:69:3E:FD',
-    osModelMfr: 'Linux',
-    ip: '100.115.92.2',
-    hostName: 'LAPTOP-714LRTP6',
-    accessPoint: 'AP100',
-    ssid: 'TestUs',
-    band: '5Ghz',
-    signal: '-43 dBm',
-    status: '39h 41m 25s Connected',
-    locationId: 8,
+    model_type: 'ServiceMetric',
+    customerId: 2,
+    equipmentId: 51,
+    clientMac: 9786249446603,
+    dataType: 'Client',
+    createdTimestamp: 1591893171581,
+    rssi: -47,
+    rxBytes: 334224030,
+    txBytes: 1489212837,
   },
 ];
diff --git a/app/containers/Network/containers/ClientDeviceDetails/index.js b/app/containers/Network/containers/ClientDeviceDetails/index.js
index 2b3dec4..909a6d3 100644
--- a/app/containers/Network/containers/ClientDeviceDetails/index.js
+++ b/app/containers/Network/containers/ClientDeviceDetails/index.js
@@ -2,18 +2,33 @@ import React, { useContext } from 'react';
 import { useParams } from 'react-router-dom';
 import { useQuery } from '@apollo/react-hooks';
 import { Alert } from 'antd';
-import { Loading } from '@tip-wlan/wlan-cloud-ui-library';
+import moment from 'moment';
+import { Loading, DeviceHistory } from '@tip-wlan/wlan-cloud-ui-library';
 
+import { METRICS_DATA } from 'constants/index';
 import UserContext from 'contexts/UserContext';
-import { GET_CLIENT_SESSION } from 'graphql/queries';
+import { GET_CLIENT_SESSION, FILTER_SERVICE_METRICS } from 'graphql/queries';
 
 const ClientDeviceDetails = () => {
+  const toTime = moment();
+  const fromTime = toTime.subtract(4, 'hours');
+
   const { id } = useParams();
   const { customerId } = useContext(UserContext);
   const { loading, error, data } = useQuery(GET_CLIENT_SESSION, {
     variables: { customerId, macAddress: id },
   });
 
+  const { loading: metricsLoading, error: metricsError } = useQuery(FILTER_SERVICE_METRICS, {
+    variables: {
+      customerId,
+      fromTime: fromTime.unix(),
+      toTime: toTime.unix(),
+      clientMacs: [id],
+      dataTypes: ['Client'],
+    },
+  });
+
   if (loading) {
     return <Loading />;
   }
@@ -24,8 +39,6 @@ const ClientDeviceDetails = () => {
     );
   }
 
-  const { macAddress } = data.getClientSession[0];
-
   /*
   const {
     macAddress,
@@ -62,7 +75,15 @@ const ClientDeviceDetails = () => {
 
   */
 
-  return <h1>Client Device Details: {macAddress}</h1>;
+  return (
+    <>
+      <h1>Client Device Details: {data.getClientSession[0].macAddress}</h1>
+      {metricsError && (
+        <Alert message="Error" description="Failed to load History˝." type="error" showIcon />
+      )}
+      <DeviceHistory loading={metricsLoading} historyDate={toTime} data={METRICS_DATA} />
+    </>
+  );
 };
 
 export default ClientDeviceDetails;
diff --git a/app/graphql/queries.js b/app/graphql/queries.js
index 309a4fd..02155a7 100644
--- a/app/graphql/queries.js
+++ b/app/graphql/queries.js
@@ -102,3 +102,35 @@ export const GET_CLIENT_SESSION = gql`
     }
   }
 `;
+
+export const FILTER_SERVICE_METRICS = gql`
+  query FilterServiceMetrics(
+    $customerId: Int!
+    $cursor: String
+    $fromTime: Int!
+    $toTime: Int!
+    $clientMacs: [String]
+    $dataTypes: [String]
+  ) {
+    filterServiceMetrics(
+      customerId: $customerId
+      cursor: $cursor
+      fromTime: $fromTime
+      toTime: $toTime
+      clientMacs: $clientMacs
+      dataTypes: $dataTypes
+    ) {
+      items {
+        dataType
+        createdTimestamp
+        rssi
+        rxBytes
+        txBytes
+      }
+      context {
+        lastPage
+        cursor
+      }
+    }
+  }
+`;