diff --git a/apps/web/src/components/ui/metric/MetricCard.tsx b/apps/web/src/components/ui/metric/MetricCard.tsx
index 46e0b2db2..1ba4656b3 100644
--- a/apps/web/src/components/ui/metric/MetricCard.tsx
+++ b/apps/web/src/components/ui/metric/MetricCard.tsx
@@ -9,105 +9,101 @@ import type { DropdownItems } from '../dropdown';
 import Link from 'next/link';
 import { PreparingYourRequestLoader } from '../charts/LoadingComponents';
 
-export const MetricCard = React.memo(
-  React.forwardRef<
-    HTMLDivElement,
+export const MetricCard = React.forwardRef<
+  HTMLDivElement,
+  {
+    className?: string;
+    metricId: string;
+    metricLink: string;
+    isDragOverlay: boolean;
+    readOnly: boolean;
+    metricData: BusterMetricData | undefined;
+    metric: Pick<BusterMetric, 'name' | 'time_frame' | 'chart_config' | 'description'> | undefined;
+    renderChart: boolean;
+    loading: boolean;
+    error: string | undefined;
+    animate: boolean;
+    onInitialAnimationEnd?: () => void;
+    attributes?: DraggableAttributes;
+    listeners?: DraggableSyntheticListeners;
+    threeDotMenuItems: DropdownItems;
+  }
+>(
+  (
     {
-      className?: string;
-      metricId: string;
-      metricLink: string;
-      isDragOverlay: boolean;
-      readOnly: boolean;
-      metricData: BusterMetricData | undefined;
-      metric:
-        | Pick<BusterMetric, 'name' | 'time_frame' | 'chart_config' | 'description'>
-        | undefined;
-      renderChart: boolean;
-      loading: boolean;
-      error: string | undefined;
-      animate: boolean;
-      onInitialAnimationEnd?: () => void;
-      attributes?: DraggableAttributes;
-      listeners?: DraggableSyntheticListeners;
-      threeDotMenuItems: DropdownItems;
-    }
-  >(
-    (
-      {
-        className = '',
-        metricId,
-        metricLink,
-        readOnly,
-        metricData,
-        metric,
-        isDragOverlay,
-        renderChart = true,
-        loading = false,
-        animate = true,
-        error,
-        attributes,
-        listeners,
-        threeDotMenuItems,
-        onInitialAnimationEnd
-      },
-      ref
-    ) => {
-      const isTable = metric?.chart_config?.selectedChartType === 'table';
-      const chartOptions = metric?.chart_config;
-      const data = metricData?.data || null;
-      const hideChart = isDragOverlay && data && data.length > 50;
+      className = '',
+      metricId,
+      metricLink,
+      readOnly,
+      metricData,
+      metric,
+      isDragOverlay,
+      renderChart = true,
+      loading = false,
+      animate = true,
+      error,
+      attributes,
+      listeners,
+      threeDotMenuItems,
+      onInitialAnimationEnd
+    },
+    ref
+  ) => {
+    const isTable = metric?.chart_config?.selectedChartType === 'table';
+    const chartOptions = metric?.chart_config;
+    const data = metricData?.data || null;
+    const hideChart = isDragOverlay && data && data.length > 50;
 
-      const content = () => {
-        if (renderChart && chartOptions && !hideChart) {
-          return (
-            <BusterChartDynamic
-              data={data}
-              loading={loading}
-              error={error}
-              onInitialAnimationEnd={onInitialAnimationEnd}
-              animate={!isDragOverlay && animate}
-              animateLegend={false}
-              columnMetadata={metricData?.data_metadata?.column_metadata}
-              readOnly={true}
-              {...chartOptions}
+    const content = () => {
+      if (renderChart && chartOptions && !hideChart) {
+        return (
+          <BusterChartDynamic
+            data={data}
+            loading={loading}
+            error={error}
+            onInitialAnimationEnd={onInitialAnimationEnd}
+            animate={!isDragOverlay && animate}
+            animateLegend={false}
+            columnMetadata={metricData?.data_metadata?.column_metadata}
+            readOnly={true}
+            {...chartOptions}
+          />
+        );
+      }
+
+      return <PreparingYourRequestLoader />;
+    };
+
+    return (
+      <Card
+        ref={ref}
+        className={cn('metric-item flex h-full w-full flex-col overflow-auto', className)}>
+        <Link className="swag flex" href={metricLink} prefetch {...attributes} {...listeners}>
+          <CardHeader
+            size="small"
+            data-testid={`metric-item-${metricId}`}
+            className="hover:bg-item-hover group relative min-h-13! w-full justify-center overflow-hidden border-b px-4 py-2">
+            <MetricTitle
+              name={metric?.name || ''}
+              timeFrame={metric?.time_frame}
+              metricLink={metricLink}
+              isDragOverlay={false}
+              readOnly={readOnly}
+              description={metric?.description}
+              threeDotMenuItems={threeDotMenuItems}
             />
-          );
-        }
+          </CardHeader>
+        </Link>
 
-        return <PreparingYourRequestLoader />;
-      };
-
-      return (
-        <Card
-          ref={ref}
-          className={cn('metric-item flex h-full w-full flex-col overflow-auto', className)}>
-          <Link className="swag flex" href={metricLink} prefetch {...attributes} {...listeners}>
-            <CardHeader
-              size="small"
-              data-testid={`metric-item-${metricId}`}
-              className="hover:bg-item-hover group relative min-h-13! w-full justify-center overflow-hidden border-b px-4 py-2">
-              <MetricTitle
-                name={metric?.name || ''}
-                timeFrame={metric?.time_frame}
-                metricLink={metricLink}
-                isDragOverlay={false}
-                readOnly={readOnly}
-                description={metric?.description}
-                threeDotMenuItems={threeDotMenuItems}
-              />
-            </CardHeader>
-          </Link>
-
-          <div
-            className={cn(
-              'h-full w-full overflow-hidden bg-transparent',
-              isTable ? '' : 'p-3',
-              isDragOverlay ? 'pointer-events-none' : 'pointer-events-auto'
-            )}>
-            {content()}
-          </div>
-        </Card>
-      );
-    }
-  )
+        <div
+          className={cn(
+            'h-full w-full overflow-hidden bg-transparent',
+            isTable ? '' : 'p-3',
+            isDragOverlay ? 'pointer-events-none' : 'pointer-events-auto'
+          )}>
+          {content()}
+        </div>
+      </Card>
+    );
+  }
 );
diff --git a/apps/web/src/components/ui/metric/MetricCardThreeMenuContainer.tsx b/apps/web/src/components/ui/metric/MetricCardThreeMenuContainer.tsx
index 9da5a72d5..8947e7f6a 100644
--- a/apps/web/src/components/ui/metric/MetricCardThreeMenuContainer.tsx
+++ b/apps/web/src/components/ui/metric/MetricCardThreeMenuContainer.tsx
@@ -2,39 +2,35 @@ import { cn } from '@/lib/classMerge';
 import React, { useState } from 'react';
 import { Dropdown, type DropdownItems } from '../dropdown';
 
-export const MetricCardThreeMenuContainer = React.memo(
-  ({
-    children,
-    dropdownItems,
-    className
-  }: {
-    className?: string;
-    children: React.ReactNode;
-    dropdownItems: DropdownItems;
-  }) => {
-    const [isOpen, setIsOpen] = useState(false);
+export const MetricCardThreeMenuContainer = ({
+  children,
+  dropdownItems,
+  className
+}: {
+  className?: string;
+  children: React.ReactNode;
+  dropdownItems: DropdownItems;
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
 
-    return (
-      <div
-        onClick={(e) => {
-          e.stopPropagation();
-          e.preventDefault();
-        }}
-        className={cn(
-          // Use opacity and pointer-events instead of display:none to maintain positioning context
-          'w-8.5 rounded transition-opacity duration-75',
-          'pointer-events-none opacity-0 group-hover:pointer-events-auto group-hover:opacity-100',
-          className,
-          isOpen && 'pointer-events-auto opacity-100'
-        )}>
-        <div className="absolute top-3 right-1.5">
-          <Dropdown items={dropdownItems} side="top" align="end" onOpenChange={setIsOpen}>
-            {children}
-          </Dropdown>
-        </div>
-      </div>
-    );
-  }
-);
+  return (
+    <div
+      onClick={(e) => {
+        e.stopPropagation();
+        e.preventDefault();
+      }}
+      className={cn(
+        // Use opacity and pointer-events instead of display:none to maintain positioning context
+        '-mr-2 hidden group-hover:block',
+        'group-hover:pointer-events-auto',
+        isOpen && 'pointer-events-auto block',
+        className
+      )}>
+      <Dropdown items={dropdownItems} side="top" align="end" onOpenChange={setIsOpen}>
+        {children}
+      </Dropdown>
+    </div>
+  );
+};
 
 MetricCardThreeMenuContainer.displayName = 'MetricCardThreeMenuContainer';
diff --git a/apps/web/src/components/ui/metric/MetricTitle.tsx b/apps/web/src/components/ui/metric/MetricTitle.tsx
index 4ea387f90..ff8bec638 100644
--- a/apps/web/src/components/ui/metric/MetricTitle.tsx
+++ b/apps/web/src/components/ui/metric/MetricTitle.tsx
@@ -20,57 +20,55 @@ export const MetricTitle: React.FC<{
   isDragOverlay: boolean;
   readOnly?: boolean;
   threeDotMenuItems: DropdownItems;
-}> = React.memo(
-  ({
-    readOnly = true,
-    name,
-    description,
-    isDragOverlay,
-    metricLink,
-    timeFrame,
-    threeDotMenuItems
-  }) => {
-    const router = useRouter();
+}> = ({
+  readOnly = true,
+  name,
+  description,
+  isDragOverlay,
+  metricLink,
+  timeFrame,
+  threeDotMenuItems
+}) => {
+  const router = useRouter();
 
-    useMount(() => {
-      if (metricLink) router.prefetch(metricLink);
-    });
+  useMount(() => {
+    if (metricLink) router.prefetch(metricLink);
+  });
 
-    return (
-      <>
-        <div className={'flex h-full cursor-pointer flex-col space-y-0.5 overflow-hidden'}>
-          <div className="flex w-full justify-between space-x-0.5 overflow-hidden">
-            <Title
-              as="h4"
-              truncate
-              className="text-md! whitespace-nowrap"
-              style={{ fontSize: '14px' }}>
-              {`${name}`}
-            </Title>
-          </div>
-
-          <div className="flex w-full items-center overflow-hidden">
-            <Text
-              className={`w-full ${timeFrame || description ? 'visible' : 'hidden'}`}
-              size="sm"
-              variant="secondary"
-              truncate={true}>
-              {timeFrame || '_'}
-
-              {description && timeFrame && ' • '}
-
-              {description}
-            </Text>
-          </div>
+  return (
+    <div className="group flex h-full min-h-0 w-full flex-1 flex-nowrap space-x-0.5">
+      <div className={'flex h-full flex-1 cursor-pointer flex-col space-y-0.5 overflow-hidden'}>
+        <div className="flex w-full justify-between space-x-0.5 overflow-hidden">
+          <Title
+            as="h4"
+            truncate
+            className="text-md! whitespace-nowrap"
+            style={{ fontSize: '14px' }}>
+            {`${name}`}
+          </Title>
         </div>
 
-        {isDragOverlay || readOnly ? null : (
-          <MetricCardThreeMenuContainer dropdownItems={threeDotMenuItems}>
-            <Button variant="ghost" className="bg-item-hover!" prefix={<DotsVertical />} />
-          </MetricCardThreeMenuContainer>
-        )}
-      </>
-    );
-  }
-);
+        <div className="flex w-full items-center overflow-hidden">
+          <Text
+            className={`w-full ${timeFrame || description ? 'visible' : 'hidden'}`}
+            size="sm"
+            variant="secondary"
+            truncate={true}>
+            {timeFrame || '_'}
+
+            {description && timeFrame && ' • '}
+
+            {description}
+          </Text>
+        </div>
+      </div>
+
+      {isDragOverlay || readOnly ? null : (
+        <MetricCardThreeMenuContainer dropdownItems={threeDotMenuItems}>
+          <Button variant="ghost" className="hover:bg-item-active" prefix={<DotsVertical />} />
+        </MetricCardThreeMenuContainer>
+      )}
+    </div>
+  );
+};
 MetricTitle.displayName = 'MetricTitle';
diff --git a/apps/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardMetricItem/DashboardMetricItem.tsx b/apps/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardMetricItem/DashboardMetricItem.tsx
index 4b6556ce4..6e9bf78cf 100644
--- a/apps/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardMetricItem/DashboardMetricItem.tsx
+++ b/apps/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardMetricItem/DashboardMetricItem.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useMemo,useContext } from 'react';
+import React, { useMemo, useContext } from 'react';
 import { useMemoizedFn } from '@/hooks';
 import { useDashboardMetric } from './useDashboardMetric';
 import { assetParamsToRoute } from '@/lib/assets';
@@ -47,10 +47,8 @@ const DashboardMetricItemBase: React.FC<{
   const animate =
     !initialAnimationEnded && !isDragOverlay && dataLength < 125 && numberOfMetrics <= 30;
 
-  const error: string | undefined = useMemo(
-    () => metric?.error || metricDataError?.message || metricError?.message || undefined,
-    [metric?.error, metricDataError, metricError]
-  );
+  const error: string | undefined =
+    metric?.error || metricDataError?.message || metricError?.message || undefined;
 
   const metricLink = useMemo(() => {
     return assetParamsToRoute({
@@ -92,4 +90,4 @@ const DashboardMetricItemBase: React.FC<{
   );
 };
 
-export const DashboardMetricItem = React.memo(DashboardMetricItemBase);
+export const DashboardMetricItem = DashboardMetricItemBase;