diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/SessionsBy.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/SessionsBy.tsx
index e1afe2265..2ce690680 100644
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/SessionsBy.tsx
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/SessionsBy.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import { Button, Space } from 'antd';
 import { filtersMap } from 'Types/filter/newFilter';
-import { Icon } from 'UI';
+// import { Icon } from 'UI';
 import { Empty } from 'antd';
+import { Info } from 'lucide-react'
 import { ArrowRight } from 'lucide-react';
 import CardSessionsByList from 'Components/Dashboard/Widgets/CardSessionsByList';
 import { useModal } from 'Components/ModalContext';
@@ -57,10 +58,10 @@ function SessionsBy(props: Props) {
           image={null}
           style={{ minHeight: 220 }}
           className="flex flex-col items-center justify-center"
-          imageStyle={{ height: 60 }}
+          imageStyle={{ height: 0}}
           description={
-            <div className="flex items-center justify-center text-lg">
-              <Icon name="info-circle" className="mr-2" size="18" />
+            <div className="flex items-center gap-2 justify-center text-lg font-medium text-black">
+              <Info size={16} />
               No data available for the selected period.
             </div>
           }
diff --git a/frontend/app/components/Dashboard/components/AddCardSelectionModal.tsx b/frontend/app/components/Dashboard/components/AddCardSelectionModal.tsx
index a59e7aaea..ca1a800b1 100644
--- a/frontend/app/components/Dashboard/components/AddCardSelectionModal.tsx
+++ b/frontend/app/components/Dashboard/components/AddCardSelectionModal.tsx
@@ -29,13 +29,13 @@ function AddCardSelectionModal(props: Props) {
     return (
         <>
             <Modal
-                title="Add card to dashboard"
+                title="Add a card to dashboard"
                 open={props.open}
                 footer={null}
                 onCancel={props.onClose}
                 className='addCard'
             >
-                <Row gutter={16} justify="center">
+                <Row gutter={16} justify="center" className='py-5'>
                     <Col span={12}>
                         <div className="flex flex-col items-center justify-center hover:bg-indigo-50 border rounded-lg shadow-sm cursor-pointer gap-3" style={{height: '80px'}} onClick={() => onClick(true)}>
                             <GalleryVertical style={{fontSize: '24px', color: '#394EFF'}}/>
diff --git a/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx b/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx
index 56c73b692..6be30c7b5 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx
@@ -30,7 +30,7 @@ function DashboardList({ siteId }: { siteId: string }) {
             title: 'Title',
             dataIndex: 'name',
             width: '25%',
-            render: (t) => <div className="link capitalize-first">{t}</div>,
+            render: (t) => <div className="link cap-first">{t}</div>,
         },
         {
             title: 'Last Modified',
@@ -46,6 +46,7 @@ function DashboardList({ siteId }: { siteId: string }) {
             width: '16.67%',
             sorter: (a, b) => a.owner?.localeCompare(b.owner),
             sortDirections: ['ascend', 'descend'],
+            render: (owner) => <div className="cap-first">{owner}</div>,
         },
         {
             title: (
@@ -63,7 +64,7 @@ function DashboardList({ siteId }: { siteId: string }) {
             width: '16.67%',
             dataIndex: 'isPublic',
             render: (isPublic: boolean) => (
-                <Tag icon={isPublic ? <TeamOutlined /> : <LockOutlined />}>
+                <Tag icon={isPublic ? <TeamOutlined /> : <LockOutlined />} bordered={false} className='rounded-lg'>
                     {isPublic ? 'Team' : 'Private'}
                 </Tag>
             ),
@@ -103,16 +104,16 @@ function DashboardList({ siteId }: { siteId: string }) {
     return (
         list.length === 0 && !dashboardStore.filter.showMine ? (
             <div className='flex justify-center text-center'>
-            <Empty
-                image={<AnimatedSVG name={emptyImage} size={imageDimensions.width} />}
-                imageStyle={{
-                    width: imageDimensions.width,
-                    height: imageDimensions.height,
-                    margin: 'auto',
-                    padding: '2rem 0'
-                }}
-                description={emptyDescription}
-            />
+                <Empty
+                    image={<AnimatedSVG name={emptyImage} size={imageDimensions.width} />}
+                    imageStyle={{
+                        width: imageDimensions.width,
+                        height: imageDimensions.height,
+                        margin: 'auto',
+                        padding: '2rem 0'
+                    }}
+                    description={emptyDescription}
+                />
             </div>
         ) : (
             <Table
@@ -136,7 +137,6 @@ function DashboardList({ siteId }: { siteId: string }) {
             />
         )
     );
-
 }
 
 export default connect((state: any) => ({
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/SelectCard.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/SelectCard.tsx
index c200c4a82..bdc5dd0e6 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/SelectCard.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/SelectCard.tsx
@@ -1,5 +1,6 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState, useEffect } from 'react';
 import { Button, Input, Segmented, Space } from 'antd';
+import { Info } from 'lucide-react';
 import { CARD_LIST, CARD_CATEGORIES, CardType } from './ExampleCards';
 import { useStore } from 'App/mstore';
 import Option from './Option';
@@ -21,6 +22,15 @@ const SelectCard: React.FC<SelectCardProps> = (props: SelectCardProps) => {
   const { metricStore, dashboardStore } = useStore();
   const dashboardId = window.location.pathname.split('/')[3];
   const [libraryQuery, setLibraryQuery] = React.useState<string>('');
+  const [headerText, setHeaderText] = useState<string>('');
+
+  useEffect(() => {
+    if (dashboardId) {
+      setHeaderText(isLibrary ? 'Your Library' : 'Create Card');
+    } else {
+      setHeaderText('Select a card template to start your dashboard');
+    }
+  }, [dashboardId, isLibrary]);
 
   const handleCardSelection = (card: string) => {
     metricStore.init();
@@ -29,7 +39,7 @@ const SelectCard: React.FC<SelectCardProps> = (props: SelectCardProps) => {
     const cardData: any = {
       metricType: selectedCard.cardType,
       name: selectedCard.title,
-      metricOf: selectedCard.metricOf
+      metricOf: selectedCard.metricOf,
     };
 
     if (selectedCard.cardType === FUNNEL) {
@@ -43,14 +53,16 @@ const SelectCard: React.FC<SelectCardProps> = (props: SelectCardProps) => {
   };
 
   const cardItems = useMemo(() => {
-    return CARD_LIST.filter((card) => card.category === selected && (!card.isEnterprise || card.isEnterprise && isEnterprise))
+    return CARD_LIST.filter((card) => card.category === selected && (!card.isEnterprise || (card.isEnterprise && isEnterprise)))
       .map((card) => (
         <div key={card.key} className={card.width ? `col-span-${card.width}` : 'col-span-2'}>
-          <card.example onCard={handleCardSelection}
-                        type={card.key}
-                        title={card.title}
-                        data={card.data}
-                        height={card.height} />
+          <card.example
+            onCard={handleCardSelection}
+            type={card.key}
+            title={card.title}
+            data={card.data}
+            height={card.height}
+          />
         </div>
       ));
   }, [selected]);
@@ -73,18 +85,22 @@ const SelectCard: React.FC<SelectCardProps> = (props: SelectCardProps) => {
 
   return (
     <>
-      <Space className="items-center justify-between">
+      <Space className="items-center justify-between px-2">
         <div className="text-xl leading-4 font-medium">
-          {dashboardId ? (isLibrary ? 'Your Library' : 'Create Card') : 'Select a template to create a card'}
+          {headerText}
+          {headerText === 'Select a card template to start your dashboard' && (
+            <div className='text-sm font-normal mt-3 text-gray-500 flex gap-2 items-center'>
+              <Info size={14} /> Following card previews are based on mock data for illustrative purposes only.
+            </div>
+          )}
         </div>
         {isLibrary && (
           <Space>
-            {selectedCards.length > 0 ? (
+            {selectedCards.length > 0 && (
               <Button type="primary" onClick={onAddSelected}>
                 Add {selectedCards.length} Selected
               </Button>
-            ) : ''}
-
+            )}
             <Input.Search
               placeholder="Find by card title"
               onChange={(value) => setLibraryQuery(value.target.value)}
@@ -93,15 +109,17 @@ const SelectCard: React.FC<SelectCardProps> = (props: SelectCardProps) => {
           </Space>
         )}
       </Space>
-
       {!isLibrary && <CategorySelector setSelected={setSelectedCategory} selected={selected} />}
-
-      {isLibrary ?
-        <CardsLibrary query={libraryQuery}
-                      selectedList={selectedCards}
-                      category={selected}
-                      onCard={onCardClick} /> :
-        <ExampleCardsGrid items={cardItems} />}
+      {isLibrary ? (
+        <CardsLibrary
+          query={libraryQuery}
+          selectedList={selectedCards}
+          category={selected}
+          onCard={onCardClick}
+        />
+      ) : (
+        <ExampleCardsGrid items={cardItems} />
+      )}
     </>
   );
 };
@@ -115,11 +133,11 @@ const CategorySelector: React.FC<CategorySelectorProps> = ({ setSelected, select
   <Segmented
     options={CARD_CATEGORIES.map(({ key, label, icon }) => ({
       label: <Option key={key} label={label} Icon={icon} />,
-      value: key
+      value: key,
     }))}
     value={selected}
     onChange={setSelected}
-    className="w-fit"
+    className="w-fit shadow-sm"
   />
 );
 
diff --git a/frontend/app/components/Dashboard/components/WidgetView/CardViewMenu.tsx b/frontend/app/components/Dashboard/components/WidgetView/CardViewMenu.tsx
index ff422216a..bea20faf6 100644
--- a/frontend/app/components/Dashboard/components/WidgetView/CardViewMenu.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetView/CardViewMenu.tsx
@@ -40,9 +40,9 @@ const CardViewMenu = () => {
             icon: <TrashIcon size={16}/>,
             onClick: () => {
                 Modal.confirm({
-                    title: 'Are you sure you want to remove this card?',
+                    title: 'Confirm Card Deletion',
                     icon: null,
-                    // content: 'Bla bla ...',
+                    content:'Are you sure you want to remove this card? This action is permanent and cannot be undone.',
                     footer: (_, {OkBtn, CancelBtn}) => (
                         <>
                             <CancelBtn/>
diff --git a/frontend/app/components/Dashboard/components/WidgetWrapper/CardMenu.tsx b/frontend/app/components/Dashboard/components/WidgetWrapper/CardMenu.tsx
index 90426a56c..39e22ad6e 100644
--- a/frontend/app/components/Dashboard/components/WidgetWrapper/CardMenu.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetWrapper/CardMenu.tsx
@@ -21,7 +21,7 @@ function CardMenu({card}: any) {
         },
         {
             key: 'hide',
-            label: 'Remove',
+            label: 'Remove from Dashboard',
             icon: <EyeOffIcon size={16}/>,
         },
     ];
diff --git a/frontend/app/components/shared/FetchDetailsModal/components/FetchBasicDetails/FetchBasicDetails.tsx b/frontend/app/components/shared/FetchDetailsModal/components/FetchBasicDetails/FetchBasicDetails.tsx
index 479379b8e..601aa5520 100644
--- a/frontend/app/components/shared/FetchDetailsModal/components/FetchBasicDetails/FetchBasicDetails.tsx
+++ b/frontend/app/components/shared/FetchDetailsModal/components/FetchBasicDetails/FetchBasicDetails.tsx
@@ -21,17 +21,17 @@ function FetchBasicDetails({ resource, timestamp }: Props) {
   return (
     <div>
       <div className="flex items-start py-1">
-        <div className="font-medium">Name</div>
-        <div className="rounded-lg bg-active-blue px-2 py-1 ml-2 cursor-pointer word-break">
+        <div className="font-medium w-36">Name</div>
+        <Tag className='text-base max-w-96 rounded-lg text-clip bg-indigo-50 whitespace-nowrap overflow-hidden text-clip cursor-pointer word-break' bordered={false}>
           <CopyText content={resource.url}>{resource.url}</CopyText>
-        </div>
+        </Tag>
       </div>
 
       <div className="flex items-center py-1">
-        <div className="font-medium">Type</div>
-        <div className="rounded bg-active-blue px-2 py-1 ml-2 whitespace-nowrap overflow-hidden text-clip">
+        <div className="font-medium w-36">Type</div>
+        <Tag className='text-base rounded-lg bg-indigo-50 whitespace-nowrap overflow-hidden text-clip' bordered={false}>
           {resource.type}
-        </div>
+        </Tag>
       </div>
 
       {resource.method && (
diff --git a/frontend/app/components/shared/FetchDetailsModal/components/Headers/Headers.tsx b/frontend/app/components/shared/FetchDetailsModal/components/Headers/Headers.tsx
index 2a3d4e830..2351a4435 100644
--- a/frontend/app/components/shared/FetchDetailsModal/components/Headers/Headers.tsx
+++ b/frontend/app/components/shared/FetchDetailsModal/components/Headers/Headers.tsx
@@ -13,8 +13,8 @@ function Headers(props: Props) {
       <NoContent
         title={
           <div className="flex flex-col items-center justify-center">
-            <AnimatedSVG name={ICONS.NO_RESULTS} size="60" />
-            <div className="mt-6 text-2xl">No data available</div>
+            <AnimatedSVG name={ICONS.NO_RESULTS} size={30} />
+            <div className="mt-6 text-base">No data available</div>
           </div>
         }
         size="small"
diff --git a/frontend/app/components/ui/ItemMenu/ItemMenu.tsx b/frontend/app/components/ui/ItemMenu/ItemMenu.tsx
index 910984614..6a1e23179 100644
--- a/frontend/app/components/ui/ItemMenu/ItemMenu.tsx
+++ b/frontend/app/components/ui/ItemMenu/ItemMenu.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { Icon, Popover, Tooltip } from "UI";
-import { Dropdown, Menu, Button } from "antd";
+import { Dropdown, Menu, Button} from "antd";
 import {EllipsisVertical} from 'lucide-react';
 import styles from "./itemMenu.module.css";
 import cn from "classnames";
@@ -96,28 +96,30 @@ export default class ItemMenu extends React.PureComponent<Props> {
           </div>
         )}
       >
-        <Button
-          className={cn("select-none", !this.props.flat ? parentStyles : "", {
-            "": !this.props.flat && displayed && label,
-          }, 'border-0 shadow-one')}
-        >
-          {label && (
-            <span className={cn("font-medium")}>
-              {label}
-            </span>
-          )}
-          {!this.props.flat && (
-            <div
-              ref={(ref) => {
-                this.menuBtnRef = ref;
-              }}
-              className={cn("rounded-full flex items-center justify-center")}
-              role="button"
+        
+            <Button
+              className={cn("select-none", !this.props.flat ? parentStyles : "", {
+                "": !this.props.flat && displayed && label,
+              }, ' shadow-sm')}
             >
-              <EllipsisVertical size={16} />
-            </div>
-          )}
-        </Button>
+              {label && (
+                <span className={cn("font-medium")}>
+                  {label}
+                </span>
+              )}
+              {!this.props.flat && (
+                <div
+                  ref={(ref) => {
+                    this.menuBtnRef = ref;
+                  }}
+                  className={cn("rounded-full flex items-center justify-center")}
+                  role="button"
+                >
+                  <EllipsisVertical size={16} />
+                </div>
+              )}
+            </Button>
+        
       </Popover>
     );
   }