diff --git a/web/src/components/ui/card/CardBase.tsx b/web/src/components/ui/card/CardBase.tsx
index 569c38d8d..56f27ec83 100644
--- a/web/src/components/ui/card/CardBase.tsx
+++ b/web/src/components/ui/card/CardBase.tsx
@@ -5,6 +5,7 @@ import { cn } from '@/lib/utils';
 const sizeVariants = cva('', {
   variants: {
     size: {
+      xsmall: 'h-[32px] min-h-[32px] px-2.5',
       small: 'p-2.5',
       default: 'p-4'
     }
diff --git a/web/src/components/ui/card/CodeCard.tsx b/web/src/components/ui/card/CodeCard.tsx
index c96876632..62db18684 100644
--- a/web/src/components/ui/card/CodeCard.tsx
+++ b/web/src/components/ui/card/CodeCard.tsx
@@ -1,11 +1,12 @@
 import { createStyles } from 'antd-style';
 import React from 'react';
-import { Text } from '@/components/ui';
 import { AppCodeEditor } from '../inputs/AppCodeEditor';
-import { Button } from 'antd';
-import { AppMaterialIcons } from '../icons';
 import { useMemoizedFn } from 'ahooks';
 import { useBusterNotifications } from '@/context/BusterNotifications';
+import { cn } from '@/lib/classMerge';
+import { Button } from '../buttons/Button';
+import { Card, CardHeader, CardContent, CardDescription, CardFooter, CardTitle } from './CardBase';
+import { Download, Copy } from '../icons';
 
 export const CodeCard: React.FC<{
   code: string;
@@ -33,27 +34,26 @@ export const CodeCard: React.FC<{
   const ShownButtons = buttons === true ? <CardButtons fileName={fileName} code={code} /> : buttons;
 
   return (
-    <div className={cx(styles.container, className)}>
-      <div
-        className={cx(
-          styles.containerHeader,
-          'flex items-center justify-between space-x-1 px-2.5'
-        )}>
-        <Text className="truncate">{fileName}</Text>
-
-        {ShownButtons}
-      </div>
-      <div className={cx(styles.containerBody, bodyClassName)}>
-        <AppCodeEditor
-          language={language}
-          value={code}
-          onChange={onChange}
-          readOnly={readOnly}
-          height="100%"
-          onMetaEnter={onMetaEnter}
-        />
-      </div>
-    </div>
+    <Card className={cn('h-full', className)}>
+      <CardHeader variant={'gray'} size={'xsmall'} className="justify-center">
+        <div className="flex items-center justify-between gap-x-1">
+          <span className="truncate text-base">{fileName}</span>
+          {ShownButtons}
+        </div>
+      </CardHeader>
+      <CardContent className={cn('bg-background overflow-hidden p-0', bodyClassName)}>
+        <div className={cx(styles.containerBody, bodyClassName)}>
+          <AppCodeEditor
+            language={language}
+            value={code}
+            onChange={onChange}
+            readOnly={readOnly}
+            height="100%"
+            onMetaEnter={onMetaEnter}
+          />
+        </div>
+      </CardContent>
+    </Card>
   );
 };
 
@@ -90,15 +90,10 @@ const CardButtons: React.FC<{
 
   return (
     <div className="flex items-center gap-1">
+      <Button variant="ghost" prefix={<Copy />} onClick={handleCopyCode} title="Copy code" />
       <Button
-        type="text"
-        icon={<AppMaterialIcons icon="content_copy" />}
-        onClick={handleCopyCode}
-        title="Copy code"
-      />
-      <Button
-        type="text"
-        icon={<AppMaterialIcons icon="download" />}
+        variant="ghost"
+        prefix={<Download />}
         onClick={handleDownload}
         title="Download file"
       />
diff --git a/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardMetricItem/DashboardMetricItem.tsx b/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardMetricItem/DashboardMetricItem.tsx
index ded2f144a..cf65b78c4 100644
--- a/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardMetricItem/DashboardMetricItem.tsx
+++ b/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardMetricItem/DashboardMetricItem.tsx
@@ -102,7 +102,6 @@ const _DashboardMetricItem: React.FC<{
             data={data}
             loading={loading}
             error={error}
-            bordered={false}
             onInitialAnimationEnd={onInitialAnimationEndPreflight}
             animate={!isDragOverlay && animate}
             animateLegend={false}
diff --git a/web/src/lib/imageGeneration.tsx b/web/src/lib/imageGeneration.tsx
index 5dfdab06c..99adc02cc 100644
--- a/web/src/lib/imageGeneration.tsx
+++ b/web/src/lib/imageGeneration.tsx
@@ -32,7 +32,6 @@ export const generateChartDownloadImage = async (
       <div className={`h-[655px] w-[880px]`}>
         <div className="relative flex h-full w-full items-center justify-center p-0">
           <BusterChart
-            bordered={false}
             data={messageData}
             animate={false}
             onChartMounted={async (chart) => {