diff --git a/frontend/app/components/Dashboard/components/MetricsList/ListView.tsx b/frontend/app/components/Dashboard/components/MetricsList/ListView.tsx
index 30dff5d47..b1b520b8d 100644
--- a/frontend/app/components/Dashboard/components/MetricsList/ListView.tsx
+++ b/frontend/app/components/Dashboard/components/MetricsList/ListView.tsx
@@ -1,8 +1,10 @@
 import React, { useState, useMemo } from 'react';
-import { Checkbox, Table } from 'antd';
+import { Checkbox, Table, Typography } from 'antd';
 import MetricListItem from '../MetricListItem';
 import { TablePaginationConfig, SorterResult } from 'antd/lib/table/interface';
 
+const { Text } = Typography;
+
 interface Metric {
   metricId: number;
   name: string;
@@ -23,12 +25,27 @@ interface Props {
 }
 
 const ListView: React.FC<Props> = (props: Props) => {
-  const { siteId, list, selectedList, toggleSelection, disableSelection = false, allSelected = false, toggleAll } = props;
+  const {
+    siteId,
+    list,
+    selectedList,
+    toggleSelection,
+    disableSelection = false,
+    allSelected = false,
+    toggleAll
+  } = props;
   const [sorter, setSorter] = useState<{ field: string; order: 'ascend' | 'descend' }>({
     field: 'lastModified',
     order: 'descend'
   });
   const [pagination, setPagination] = useState<TablePaginationConfig>({ current: 1, pageSize: 10 });
+  const totalMessage = (
+    <>
+      Showing <Text strong>{pagination.pageSize * (pagination.current - 1) + 1}</Text> to <Text
+      strong>{Math.min(pagination.pageSize * pagination.current, list.length)}</Text> of <Text
+      strong>{list.length}</Text> cards
+    </>
+  );
 
   const sortedData = useMemo(() => {
     return [...list].sort((a, b) => {
@@ -37,9 +54,9 @@ const ListView: React.FC<Props> = (props: Props) => {
           ? new Date(a.lastModified).getTime() - new Date(b.lastModified).getTime()
           : new Date(b.lastModified).getTime() - new Date(a.lastModified).getTime();
       } else if (sorter.field === 'name') {
-        return sorter.order === 'ascend' ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name);
+        return sorter.order === 'ascend' ? a.name?.localeCompare(b.name) : b.name?.localeCompare(a.name);
       } else if (sorter.field === 'owner') {
-        return sorter.order === 'ascend' ? a.owner.localeCompare(b.owner) : b.owner.localeCompare(a.owner);
+        return sorter.order === 'ascend' ? a.owner?.localeCompare(b.owner) : b.owner?.localeCompare(a.owner);
       }
       return 0;
     });
@@ -82,7 +99,7 @@ const ListView: React.FC<Props> = (props: Props) => {
       dataIndex: 'name',
       key: 'title',
       className: 'cap-first',
-      width:'35%',
+      width: '35%',
       sorter: true,
       render: (text: string, metric: Metric) => (
         <MetricListItem
@@ -97,14 +114,14 @@ const ListView: React.FC<Props> = (props: Props) => {
           }}
           renderColumn="title"
         />
-      ),
+      )
     },
     {
       title: 'Owner',
       dataIndex: 'owner',
       key: 'owner',
       className: 'capitalize',
-      width:'25%',
+      width: '25%',
       sorter: true,
       render: (text: string, metric: Metric) => (
         <MetricListItem
@@ -113,7 +130,7 @@ const ListView: React.FC<Props> = (props: Props) => {
           siteId={siteId}
           renderColumn="owner"
         />
-      ),
+      )
     },
     {
       title: 'Last Modified',
@@ -127,7 +144,7 @@ const ListView: React.FC<Props> = (props: Props) => {
           siteId={siteId}
           renderColumn="lastModified"
         />
-      ),
+      )
     },
     {
       title: 'Visibility',
@@ -141,7 +158,7 @@ const ListView: React.FC<Props> = (props: Props) => {
           siteId={siteId}
           renderColumn="visibility"
         />
-      ),
+      )
     },
     {
       title: '',
@@ -154,8 +171,8 @@ const ListView: React.FC<Props> = (props: Props) => {
           siteId={siteId}
           renderColumn="options"
         />
-      ),
-    },
+      )
+    }
   ];
 
   return (
@@ -167,19 +184,31 @@ const ListView: React.FC<Props> = (props: Props) => {
       rowSelection={
         !disableSelection
           ? {
-              selectedRowKeys: selectedList.map((id: number) => id.toString()),
-              onChange: (selectedRowKeys) => {
-                selectedRowKeys.forEach((key) => {
-                  toggleSelection && toggleSelection(parseInt(key));
-                });
-              },
+            selectedRowKeys: selectedList.map((id: number) => id.toString()),
+            onChange: (selectedRowKeys) => {
+              selectedRowKeys.forEach((key: any) => {
+                toggleSelection && toggleSelection(parseInt(key));
+              });
             }
+          }
           : undefined
       }
+      // footer={() => (
+      //   <div className="flex justify-end">
+      //     <Checkbox name="slack" checked={allSelected} onClick={toggleAll}>
+      //       Select All
+      //     </Checkbox>
+      //   </div>
+      // )}
       pagination={{
         current: pagination.current,
         pageSize: pagination.pageSize,
         total: sortedData.length,
+        showSizeChanger: false,
+        className: 'px-4',
+        showLessItems: true,
+        showTotal: () => totalMessage,
+        showQuickJumper: true
       }}
     />
   );
diff --git a/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx b/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx
index 392db6c98..cfdb3d714 100644
--- a/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx
+++ b/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx
@@ -54,20 +54,20 @@ function MetricsList({
       <NoContent
         show={lenth === 0}
         title={
-          <div className='flex flex-col items-center justify-center'>
+          <div className="flex flex-col items-center justify-center">
             <AnimatedSVG name={ICONS.NO_CARDS} size={60} />
-            <div className='text-center mt-4'>
+            <div className="text-center mt-4">
               {metricsSearch !== '' ? 'No matching results' : 'You haven\'t created any cards yet'}
             </div>
           </div>
         }
-        subtext='Utilize cards to visualize key user interactions or product performance metrics.'
+        subtext="Utilize cards to visualize key user interactions or product performance metrics."
       >
         {listView ? (
           <ListView
             disableSelection={!onSelectionChange}
             siteId={siteId}
-            list={sliceListPerPage(cards, metricStore.page - 1, metricStore.pageSize)}
+            list={cards}
             selectedList={selectedMetrics}
             existingCardIds={existingCardIds}
             toggleSelection={toggleMetricSelection}
@@ -77,28 +77,29 @@ function MetricsList({
             }
           />
         ) : (
-          <GridView
-            siteId={siteId}
-            list={sliceListPerPage(cards, metricStore.page - 1, metricStore.pageSize)}
-            selectedList={selectedMetrics}
-            toggleSelection={toggleMetricSelection}
-          />
+          <>
+            <GridView
+              siteId={siteId}
+              list={sliceListPerPage(cards, metricStore.page - 1, metricStore.pageSize)}
+              selectedList={selectedMetrics}
+              toggleSelection={toggleMetricSelection}
+            />
+            <div className="w-full flex items-center justify-between py-4 px-6 border-t">
+              <div className="">
+                Showing{' '}
+                <span className="font-semibold">{Math.min(cards.length, metricStore.pageSize)}</span> out
+                of <span className="font-semibold">{cards.length}</span> cards
+              </div>
+              <Pagination
+                page={metricStore.page}
+                total={lenth}
+                onPageChange={(page) => metricStore.updateKey('page', page)}
+                limit={metricStore.pageSize}
+                debounceRequest={100}
+              />
+            </div>
+          </>
         )}
-
-        <div className='w-full flex items-center justify-between py-4 px-6 border-t'>
-          <div className=''>
-            Showing{' '}
-            <span className='font-semibold'>{Math.min(cards.length, metricStore.pageSize)}</span> out
-            of <span className='font-semibold'>{cards.length}</span> cards
-          </div>
-          <Pagination
-            page={metricStore.page}
-            total={lenth}
-            onPageChange={(page) => metricStore.updateKey('page', page)}
-            limit={metricStore.pageSize}
-            debounceRequest={100}
-          />
-        </div>
       </NoContent>
     </Loader>
   );