diff --git a/frontend/app/components/Dashboard/components/AddCardSection/AddCardSection.tsx b/frontend/app/components/Dashboard/components/AddCardSection/AddCardSection.tsx
index 2d4517bf0..bcf214eac 100644
--- a/frontend/app/components/Dashboard/components/AddCardSection/AddCardSection.tsx
+++ b/frontend/app/components/Dashboard/components/AddCardSection/AddCardSection.tsx
@@ -235,11 +235,19 @@ const AddCardSection = observer(
       );
     };
     return (
-      <div className={'pt-4 pb-6 px-6 rounded-xl bg-white border border-gray-lighter flex flex-col gap-2'}>
+      <div
+        className={
+          'pt-4 pb-6 px-6 rounded-xl bg-white border border-gray-lighter flex flex-col gap-2'
+        }
+      >
         <div className={'flex justify-between p-2'}>
-          <div className={'text-xl font-medium mb-1'}>What do you want to visualize?</div>
+          <div className={'text-xl font-medium mb-1'}>
+            What do you want to visualize?
+          </div>
           {isSaas ? (
-            <div className={'font-medium flex items-center gap-2 cursor-pointer'}>
+            <div
+              className={'font-medium flex items-center gap-2 cursor-pointer'}
+            >
               <Sparkles color={'#3C00FFD8'} size={16} />
               <div className={'ai-gradient'}>Ask AI</div>
             </div>
@@ -253,14 +261,25 @@ const AddCardSection = observer(
           />
         </div>
 
-        <div className='py-2'>
-        <CategoryTab tab={tab} inCards={inCards} />
+        <div className="py-2">
+          <CategoryTab tab={tab} inCards={inCards} />
         </div>
-        <div className={'w-full flex items-center justify-center border-t mt-auto border-t-gray-lighter gap-2 pt-2 cursor-pointer'}>
-          <Button className='w-full mt-4 hover:bg-active-blue hover:text-teal' type='text' variant='text' onClick={onExistingClick}>
+        {inCards ? null :
+          <div
+            className={
+              'w-full flex items-center justify-center border-t mt-auto border-t-gray-lighter gap-2 pt-2 cursor-pointer'
+            }
+          >
+            <Button
+              className="w-full mt-4 hover:bg-active-blue hover:text-teal"
+              type="text"
+              variant="text"
+              onClick={onExistingClick}
+            >
               <FolderOutlined /> Add existing card
-          </Button>
-        </div>
+            </Button>
+          </div>
+        }
       </div>
     );
   }
diff --git a/frontend/app/components/Dashboard/components/WidgetDatatable/WidgetDatatable.tsx b/frontend/app/components/Dashboard/components/WidgetDatatable/WidgetDatatable.tsx
index 6eac6f656..354e8a6d6 100644
--- a/frontend/app/components/Dashboard/components/WidgetDatatable/WidgetDatatable.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetDatatable/WidgetDatatable.tsx
@@ -66,7 +66,7 @@ function WidgetDatatable(props: Props) {
       avg[s] = { itemsCount: 0, total: 0 };
     });
     const tableCols: {
-      title: string;
+      title: React.ReactNode;
       dataIndex: string;
       key: string;
       sorter: any;
@@ -74,7 +74,7 @@ function WidgetDatatable(props: Props) {
     const uniqueColArr = Array.from(columnNames);
     uniqueColArr.forEach((name: string, i) => {
       tableCols.push({
-        title: name,
+        title: <span className={'font-medium'}>{name}</span>,
         dataIndex: name,
         key: name,
         sorter: (a, b) => a[name] - b[name],
diff --git a/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx b/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx
index ab0e36109..3cb78e8e1 100644
--- a/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx
@@ -92,7 +92,8 @@ function WidgetWrapper(props: Props & RouteComponentProps) {
   };
 
   const ref: any = useRef(null);
-  const dragDropRef: any = dragRef(dropRef(ref));
+  const dragDropRef: any = isPreview ? null : dragRef(dropRef(ref));
+
   const addOverlay =
     isTemplate ||
     (!isPredefined &&
@@ -120,7 +121,7 @@ function WidgetWrapper(props: Props & RouteComponentProps) {
       }}
       ref={dragDropRef}
       onClick={props.onClick ? props.onClick : () => {}}
-      id={`widget-${widget.widgetId}`}
+      id={`widget-${widget.metricId}`}
     >
       {addOverlay && (
         <TemplateOverlay onClick={onChartClick} isTemplate={isTemplate} />
diff --git a/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapperNew.tsx b/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapperNew.tsx
index a2205a8bb..095bd1559 100644
--- a/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapperNew.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapperNew.tsx
@@ -109,7 +109,7 @@ function WidgetWrapperNew(props: Props & RouteComponentProps) {
       }}
       ref={dragDropRef}
       onClick={props.onClick ? props.onClick : () => null}
-      id={`widget-${widget.widgetId}`}
+      id={`widget-${widget.metricId}`}
       title={!props.hideName ? widget.name : null}
       extra={[
         <div className="flex items-center" id="no-print">