diff --git a/frontend/app/components/Dashboard/components/DashboardHeader/DashboardHeader.tsx b/frontend/app/components/Dashboard/components/DashboardHeader/DashboardHeader.tsx
index 90ecd4761..5f312d124 100644
--- a/frontend/app/components/Dashboard/components/DashboardHeader/DashboardHeader.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardHeader/DashboardHeader.tsx
@@ -1,9 +1,8 @@
 import React from 'react';
-import { Tooltip } from 'react-tippy';
 import Breadcrumb from 'Shared/Breadcrumb';
 import { withSiteId } from 'App/routes';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
-import { Button, PageTitle, confirm } from 'UI';
+import { Button, PageTitle, confirm, Tooltip } from 'UI';
 import SelectDateRange from 'Shared/SelectDateRange';
 import { useStore } from 'App/mstore';
 import { useModal } from 'App/components/Modal';
@@ -20,7 +19,7 @@ interface IProps {
 }
 
 type Props = IProps & RouteComponentProps;
-
+const MAX_CARDS = 30
 function DashboardHeader(props: Props) {
   const { siteId, dashboardId } = props;
   const { dashboardStore } = useStore();
@@ -30,6 +29,7 @@ function DashboardHeader(props: Props) {
   const period = dashboardStore.period;
 
   const dashboard: any = dashboardStore.selectedDashboard;
+  const canAddMore: boolean = dashboard?.widgets?.length <= MAX_CARDS;
 
   const onEdit = (isTitle: boolean) => {
     dashboardStore.initDashboard(dashboard);
@@ -80,16 +80,19 @@ function DashboardHeader(props: Props) {
           />
         </div>
         <div className="flex items-center" style={{ flex: 1, justifyContent: 'end' }}>
-          <Button
-            variant="primary"
-            onClick={() =>
-              showModal(<AddCardModal dashboardId={dashboardId} siteId={siteId} />, { right: true })
-            }
-            icon="plus"
-            iconSize={24}
-          >
-            Add Card
-          </Button>
+          <Tooltip delay={0} disabled={canAddMore} title="The number of cards in one dashboard is limited to 30.">
+            <Button
+              disabled={!canAddMore}
+              variant="primary"
+              onClick={() =>
+                showModal(<AddCardModal dashboardId={dashboardId} siteId={siteId} />, { right: true })
+              }
+              icon="plus"
+              iconSize={24}
+            >
+              Add Card
+            </Button>
+          </Tooltip>
           <div className="mx-4"></div>
           <div
             className="flex items-center flex-shrink-0 justify-end"
diff --git a/frontend/app/components/Dashboard/components/MetricsLibraryModal/FooterContent.tsx b/frontend/app/components/Dashboard/components/MetricsLibraryModal/FooterContent.tsx
new file mode 100644
index 000000000..61a6f0b7c
--- /dev/null
+++ b/frontend/app/components/Dashboard/components/MetricsLibraryModal/FooterContent.tsx
@@ -0,0 +1,42 @@
+import { useModal } from 'App/components/Modal';
+import { useStore } from 'App/mstore';
+import { observer } from 'mobx-react-lite';
+import React, { useMemo } from 'react';
+import { Button } from 'UI';
+
+function FooterContent({ dashboardId, selected }: any) {
+    const { hideModal } = useModal();
+    const { metricStore, dashboardStore } = useStore();
+    const dashboard = useMemo(() => dashboardStore.getDashboard(dashboardId), [dashboardId]);
+  
+    const existingCardIds = useMemo(() => dashboard?.widgets?.map(i => parseInt(i.metricId)), [dashboard]);
+    const total = useMemo(() => metricStore.filteredCards.filter(i => !existingCardIds?.includes(parseInt(i.metricId))).length, [metricStore.filteredCards]);
+  
+    const addSelectedToDashboard = () => {
+      if (!dashboard || !dashboard.dashboardId) return;
+      dashboardStore.addWidgetToDashboard(dashboard, selected).then(() => {
+        hideModal();
+        dashboardStore.fetch(dashboard.dashboardId!);
+      });
+    };
+  
+    return (
+      <div className="flex items-center rounded border bg-gray-light-shade justify-between p-3">
+        <div>
+          Selected <span className="font-medium">{selected.length}</span> of{' '}
+          <span className="font-medium">{total}</span>
+        </div>
+        <div className="flex items-center">
+          <Button variant="text-primary" className="mr-2" onClick={hideModal}>
+            Cancel
+          </Button>
+          <Button disabled={selected.length === 0} variant="primary" onClick={addSelectedToDashboard}>
+            Add Selected to Dashboard
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  export default observer(FooterContent);
+  
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/components/MetricsLibraryModal/MetricsLibraryModal.tsx b/frontend/app/components/Dashboard/components/MetricsLibraryModal/MetricsLibraryModal.tsx
index 6a998e0c8..0683dce60 100644
--- a/frontend/app/components/Dashboard/components/MetricsLibraryModal/MetricsLibraryModal.tsx
+++ b/frontend/app/components/Dashboard/components/MetricsLibraryModal/MetricsLibraryModal.tsx
@@ -1,10 +1,10 @@
 import Modal from 'App/components/Modal/Modal';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import MetricsList from '../MetricsList';
-import { Button, Icon } from 'UI';
-import { useModal } from 'App/components/Modal';
+import { Icon } from 'UI';
 import { useStore } from 'App/mstore';
-import { observer, useObserver } from 'mobx-react-lite';
+import { observer } from 'mobx-react-lite';
+import FooterContent from './FooterContent';
 
 interface Props {
   dashboardId: number;
@@ -50,7 +50,7 @@ function MetricsLibraryModal(props: Props) {
         </div>
       </Modal.Content>
       <Modal.Footer>
-        <SelectedContent dashboardId={dashboardId} selected={selectedList} />
+        <FooterContent dashboardId={dashboardId} selected={selectedList} />
       </Modal.Footer>
     </>
   );
@@ -71,35 +71,3 @@ function MetricSearch({ onChange }: any) {
     </div>
   );
 }
-
-function SelectedContent({ dashboardId, selected }: any) {
-  const { hideModal } = useModal();
-  const { metricStore, dashboardStore } = useStore();
-  const total = useObserver(() => metricStore.metrics.length);
-  const dashboard = useMemo(() => dashboardStore.getDashboard(dashboardId), [dashboardId]);
-
-  const addSelectedToDashboard = () => {
-    if (!dashboard || !dashboard.dashboardId) return;
-    dashboardStore.addWidgetToDashboard(dashboard, selected).then(() => {
-      hideModal();
-      dashboardStore.fetch(dashboard.dashboardId);
-    });
-  };
-
-  return (
-    <div className="flex items-center rounded border bg-gray-light-shade justify-between p-3">
-      <div>
-        Selected <span className="font-medium">{selected.length}</span> of{' '}
-        <span className="font-medium">{total}</span>
-      </div>
-      <div className="flex items-center">
-        <Button variant="text-primary" className="mr-2" onClick={hideModal}>
-          Cancel
-        </Button>
-        <Button disabled={selected.length === 0} variant="primary" onClick={addSelectedToDashboard}>
-          Add Selected to Dashboard
-        </Button>
-      </div>
-    </div>
-  );
-}
diff --git a/frontend/app/components/Dashboard/components/MetricsList/ListView.tsx b/frontend/app/components/Dashboard/components/MetricsList/ListView.tsx
index 1236487cc..446ffa431 100644
--- a/frontend/app/components/Dashboard/components/MetricsList/ListView.tsx
+++ b/frontend/app/components/Dashboard/components/MetricsList/ListView.tsx
@@ -10,6 +10,7 @@ interface Props {
   toggleAll?: (e: any) => void;
   disableSelection?: boolean;
   allSelected?: boolean
+  existingCardIds?: number[];
 }
 function ListView(props: Props) {
   const { siteId, list, selectedList, toggleSelection, disableSelection = false, allSelected = false } = props;
diff --git a/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx b/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx
index d815d901d..f2639d37f 100644
--- a/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx
+++ b/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx
@@ -1,5 +1,5 @@
 import { observer, useObserver } from 'mobx-react-lite';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { NoContent, Pagination } from 'UI';
 import { useStore } from 'App/mstore';
 import { sliceListPerPage } from 'App/utils';
@@ -14,11 +14,14 @@ function MetricsList({
   siteId: string;
   onSelectionChange?: (selected: any[]) => void;
 }) {
-  const { metricStore } = useStore();
-  const cards = metricStore.filteredCards;
+  const { metricStore, dashboardStore } = useStore();
   const metricsSearch = metricStore.metricsSearch;
   const listView = useObserver(() => metricStore.listView);
   const [selectedMetrics, setSelectedMetrics] = useState<any>([]);
+  
+  const dashboard = dashboardStore.selectedDashboard;
+  const existingCardIds = useMemo(() => dashboard?.widgets?.map(i => parseInt(i.metricId)), [dashboard]);
+  const cards = useMemo(() => metricStore.filteredCards.filter(i => !existingCardIds?.includes(parseInt(i.metricId))), [metricStore.filteredCards]);
 
   useEffect(() => {
     metricStore.fetchList();
@@ -63,6 +66,7 @@ function MetricsList({
           siteId={siteId}
           list={sliceListPerPage(cards, metricStore.page - 1, metricStore.pageSize)}
           selectedList={selectedMetrics}
+          existingCardIds={existingCardIds}
           toggleSelection={toggleMetricSelection}
           allSelected={cards.length === selectedMetrics.length}
           toggleAll={({ target: { checked, name } }) =>