diff --git a/src/components/Insights/BottleneckInsight/index.tsx b/src/components/Insights/BottleneckInsight/index.tsx
index 2bfaffac4..dd6951e95 100644
--- a/src/components/Insights/BottleneckInsight/index.tsx
+++ b/src/components/Insights/BottleneckInsight/index.tsx
@@ -26,6 +26,7 @@ export const BottleneckInsight = (props: BottleneckInsightProps) => {
 
   return (
     <InsightCard
+      title={props.insight.spanInfo?.displayName}
       data={props.insight}
       content={
         <>
diff --git a/src/components/Insights/DurationBreakdownInsight/index.tsx b/src/components/Insights/DurationBreakdownInsight/index.tsx
index 5ea672ebf..8b1f96232 100644
--- a/src/components/Insights/DurationBreakdownInsight/index.tsx
+++ b/src/components/Insights/DurationBreakdownInsight/index.tsx
@@ -80,6 +80,7 @@ export const DurationBreakdownInsight = (
   return (
     <InsightCard
       data={props.insight}
+      title={props.insight.spanInfo?.displayName}
       content={
         <s.EntryList>
           {pageItems.map((entry) => {
diff --git a/src/components/Insights/DurationInsight/index.tsx b/src/components/Insights/DurationInsight/index.tsx
index ff09a80e2..af18e413e 100644
--- a/src/components/Insights/DurationInsight/index.tsx
+++ b/src/components/Insights/DurationInsight/index.tsx
@@ -283,6 +283,7 @@ export const DurationInsight = (props: DurationInsightProps) => {
   return (
     <InsightCard
       data={props.insight}
+      title={props.insight.spanInfo?.displayName}
       isRecent={isLastCallRecent}
       content={
         <s.Container>
diff --git a/src/components/Insights/DurationSlowdownSourceInsight/index.tsx b/src/components/Insights/DurationSlowdownSourceInsight/index.tsx
index 195843612..18dc4a239 100644
--- a/src/components/Insights/DurationSlowdownSourceInsight/index.tsx
+++ b/src/components/Insights/DurationSlowdownSourceInsight/index.tsx
@@ -53,6 +53,7 @@ export const DurationSlowdownSourceInsight = (
   return (
     <InsightCard
       data={props.insight}
+      title={props.insight.spanInfo?.displayName}
       content={
         <s.Container>
           <Description>Found spans slowing the endpoint</Description>
diff --git a/src/components/Insights/EndpointNPlusOneInsight/index.tsx b/src/components/Insights/EndpointNPlusOneInsight/index.tsx
index a243b3fc0..9e243d458 100644
--- a/src/components/Insights/EndpointNPlusOneInsight/index.tsx
+++ b/src/components/Insights/EndpointNPlusOneInsight/index.tsx
@@ -58,6 +58,7 @@ export const EndpointNPlusOneInsight = (
   return (
     <InsightCard
       data={props.insight}
+      title={props.insight.spanInfo?.displayName}
       content={
         <s.ContentContainer>
           <Description>Check the following locations:</Description>
diff --git a/src/components/Insights/EndpointQueryOptimizationInsight/index.tsx b/src/components/Insights/EndpointQueryOptimizationInsight/index.tsx
index c136c2ff1..a168c4ca6 100644
--- a/src/components/Insights/EndpointQueryOptimizationInsight/index.tsx
+++ b/src/components/Insights/EndpointQueryOptimizationInsight/index.tsx
@@ -56,6 +56,7 @@ export const EndpointQueryOptimizationInsight = (
   return (
     <InsightCard
       data={props.insight}
+      title={props.insight.spanInfo?.displayName}
       content={
         <s.ContentContainer>
           <Description>Check the following locations:</Description>
diff --git a/src/components/Insights/ExcessiveAPICallsInsight/index.tsx b/src/components/Insights/ExcessiveAPICallsInsight/index.tsx
index f33e0ab3c..6d285824d 100644
--- a/src/components/Insights/ExcessiveAPICallsInsight/index.tsx
+++ b/src/components/Insights/ExcessiveAPICallsInsight/index.tsx
@@ -40,6 +40,7 @@ export const ExcessiveAPICallsInsight = (
   return (
     <InsightCard
       data={props.insight}
+      title={props.insight.spanInfo?.displayName}
       content={
         <s.ContentContainer>
           <Description>
diff --git a/src/components/Insights/HighNumberOfQueriesInsight/index.tsx b/src/components/Insights/HighNumberOfQueriesInsight/index.tsx
index 775ffa646..6337e92b5 100644
--- a/src/components/Insights/HighNumberOfQueriesInsight/index.tsx
+++ b/src/components/Insights/HighNumberOfQueriesInsight/index.tsx
@@ -39,6 +39,7 @@ export const HighNumberOfQueriesInsight = (
   return (
     <InsightCard
       data={insight}
+      title={props.insight.spanInfo?.displayName}
       content={
         <s.ContentContainer>
           <Description>
diff --git a/src/components/Insights/InsightCard/InsightCard.stories.tsx b/src/components/Insights/InsightCard/InsightCard.stories.tsx
index bf4fdfe88..b5c86fef6 100644
--- a/src/components/Insights/InsightCard/InsightCard.stories.tsx
+++ b/src/components/Insights/InsightCard/InsightCard.stories.tsx
@@ -20,6 +20,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
+    title: "asdasdasd",
     data: {
       firstDetected: "2023-12-05T17:25:47.010Z",
       lastDetected: "2024-01-05T13:14:47.010Z",
diff --git a/src/components/Insights/InsightCard/index.tsx b/src/components/Insights/InsightCard/index.tsx
index b6c49884b..30fe2bdaa 100644
--- a/src/components/Insights/InsightCard/index.tsx
+++ b/src/components/Insights/InsightCard/index.tsx
@@ -1,10 +1,11 @@
-import { useState } from "react";
+import { useContext, useState } from "react";
 import { useTheme } from "styled-components";
 import { PERCENTILES } from "../../../constants";
 import { isString } from "../../../typeGuards/isString";
 import { formatTimeDistance } from "../../../utils/formatTimeDistance";
 import { getInsightImportanceColor } from "../../../utils/getInsightImportanceColor";
 import { getInsightTypeInfo } from "../../../utils/getInsightTypeInfo";
+import { ConfigContext } from "../../common/App/ConfigContext";
 import { Badge } from "../../common/Badge";
 import { Card } from "../../common/Card";
 import { KebabMenuButton } from "../../common/KebabMenuButton";
@@ -18,6 +19,7 @@ import { ToggleValue } from "../../common/Toggle/types";
 import { Tooltip } from "../../common/Tooltip";
 import { ChevronIcon } from "../../common/icons/ChevronIcon";
 import { InfoCircleIcon } from "../../common/icons/InfoCircleIcon";
+import { OpenTelemetryLogoSmallIcon } from "../../common/icons/OpenTelemetryLogoSmallIcon";
 import { Direction } from "../../common/icons/types";
 import { Description, Link } from "../styles";
 import * as s from "./styles";
@@ -33,6 +35,7 @@ export const InsightCard = (props: InsightCardProps) => {
   const [percentileViewMode, setPercentileViewMode] =
     useState<number>(DEFAULT_PERCENTILE);
   const [isRecalculatingStarted, setIsRecalculatingStarted] = useState(false);
+  const { scope } = useContext(ConfigContext);
 
   const theme = useTheme();
   const insightTypeInfo = getInsightTypeInfo(props.data.type);
@@ -121,103 +124,114 @@ export const InsightCard = (props: InsightCardProps) => {
     : false;
 
   return (
-    <Card
-      header={
-        <>
+    <>
+      <Card
+        showTitle={!!(props.title && !scope?.span)}
+        title={
           <s.Title>
-            <s.InsightIconContainer>
-              {props.isRecent && (
-                <s.BadgeContainer>
-                  <Badge />
-                </s.BadgeContainer>
+            <s.TitleIcon>
+              <OpenTelemetryLogoSmallIcon color="#6063F6" size={16} />
+            </s.TitleIcon>
+            <s.TitleText>{props.title}</s.TitleText>
+          </s.Title>
+        }
+        header={
+          <>
+            <s.Header>
+              <s.InsightIconContainer>
+                {props.isRecent && (
+                  <s.BadgeContainer>
+                    <Badge />
+                  </s.BadgeContainer>
+                )}
+                {insightTypeInfo && (
+                  <insightTypeInfo.icon color={insightIconColor} size={16} />
+                )}
+              </s.InsightIconContainer>
+              {insightTypeInfo?.label || props.data.type}
+              {insightTypeInfo?.description && (
+                <Tooltip title={<insightTypeInfo.description />}>
+                  <s.InfoContainer>
+                    <InfoCircleIcon color={"currentColor"} size={16} />
+                  </s.InfoContainer>
+                </Tooltip>
               )}
-              {insightTypeInfo && (
-                <insightTypeInfo.icon color={insightIconColor} size={16} />
+            </s.Header>
+            <s.Toolbar>
+              {isNew && <Tag type={"success"} value={"New"} />}
+              {props.isAsync && <s.AsyncBadge>Async</s.AsyncBadge>}
+              {props.stats && <s.Stats>{props.stats}</s.Stats>}
+              {(props.menuItems || props.data.isRecalculateEnabled) && (
+                <Popover
+                  open={isKebabMenuOpen}
+                  onOpenChange={setIsKebabMenuOpen}
+                  placement={"bottom-start"}
+                >
+                  <PopoverTrigger onClick={handleKebabMenuButtonToggle}>
+                    <KebabMenuButton />
+                  </PopoverTrigger>
+                  <PopoverContent className={"Popover"} width={"max-content"}>
+                    <Menu
+                      items={[
+                        ...(props.data.isRecalculateEnabled
+                          ? [{ value: RECALCULATE, label: "Recalculate" }]
+                          : []),
+                        ...(props.menuItems
+                          ? props.menuItems.map((x) => ({ value: x, label: x }))
+                          : [])
+                      ]}
+                      onSelect={handleKebabMenuItemSelect}
+                    />
+                  </PopoverContent>
+                </Popover>
               )}
-            </s.InsightIconContainer>
-            {insightTypeInfo?.label || props.data.type}
-            {insightTypeInfo?.description && (
-              <Tooltip title={<insightTypeInfo.description />}>
-                <s.InfoContainer>
-                  <InfoCircleIcon color={"currentColor"} size={16} />
-                </s.InfoContainer>
-              </Tooltip>
-            )}
-          </s.Title>
-          <s.Toolbar>
-            {isNew && <Tag type={"success"} value={"New"} />}
-            {props.isAsync && <s.AsyncBadge>Async</s.AsyncBadge>}
-            {props.stats && <s.Stats>{props.stats}</s.Stats>}
-            {(props.menuItems || props.data.isRecalculateEnabled) && (
-              <Popover
-                open={isKebabMenuOpen}
-                onOpenChange={setIsKebabMenuOpen}
-                placement={"bottom-start"}
-              >
-                <PopoverTrigger onClick={handleKebabMenuButtonToggle}>
-                  <KebabMenuButton />
-                </PopoverTrigger>
-                <PopoverContent className={"Popover"} width={"max-content"}>
-                  <Menu
-                    items={[
-                      ...(props.data.isRecalculateEnabled
-                        ? [{ value: RECALCULATE, label: "Recalculate" }]
-                        : []),
-                      ...(props.menuItems
-                        ? props.menuItems.map((x) => ({ value: x, label: x }))
-                        : [])
-                    ]}
-                    onSelect={handleKebabMenuItemSelect}
+              {props.expandableContent && (
+                <s.ExpandButton onClick={handleExpandButtonClick}>
+                  <ChevronIcon
+                    color={theme.mode === "light" ? "#828797" : "#b9c2eb"}
+                    direction={isExpanded ? Direction.UP : Direction.DOWN}
+                    size={14}
                   />
-                </PopoverContent>
-              </Popover>
+                </s.ExpandButton>
+              )}
+            </s.Toolbar>
+          </>
+        }
+        content={
+          <>
+            {props.onPercentileViewModeChange && (
+              <Toggle
+                options={PERCENTILES.map((percentile) => ({
+                  value: percentile.percentile,
+                  label: percentile.label
+                }))}
+                value={percentileViewMode}
+                onValueChange={handlePercentileToggleValueChange}
+              />
+            )}
+            {props.data.actualStartTime &&
+              renderRecalculationBlock(
+                props.data.actualStartTime,
+                props.data.customStartTime,
+                isRecalculatingStarted
+              )}
+            {props.content && (
+              <s.ContentContainer>{props.content}</s.ContentContainer>
             )}
             {props.expandableContent && (
-              <s.ExpandButton onClick={handleExpandButtonClick}>
-                <ChevronIcon
-                  color={theme.mode === "light" ? "#828797" : "#b9c2eb"}
-                  direction={isExpanded ? Direction.UP : Direction.DOWN}
-                  size={14}
-                />
-              </s.ExpandButton>
+              <span>
+                <Link onClick={handleExpandButtonClick}>
+                  Show {isExpanded ? "less" : "more"}
+                </Link>
+              </span>
             )}
-          </s.Toolbar>
-        </>
-      }
-      content={
-        <>
-          {props.onPercentileViewModeChange && (
-            <Toggle
-              options={PERCENTILES.map((percentile) => ({
-                value: percentile.percentile,
-                label: percentile.label
-              }))}
-              value={percentileViewMode}
-              onValueChange={handlePercentileToggleValueChange}
-            />
-          )}
-          {props.data.actualStartTime &&
-            renderRecalculationBlock(
-              props.data.actualStartTime,
-              props.data.customStartTime,
-              isRecalculatingStarted
+            {isExpanded && props.expandableContent && (
+              <s.ContentContainer>{props.expandableContent}</s.ContentContainer>
             )}
-          {props.content && (
-            <s.ContentContainer>{props.content}</s.ContentContainer>
-          )}
-          {props.expandableContent && (
-            <span>
-              <Link onClick={handleExpandButtonClick}>
-                Show {isExpanded ? "less" : "more"}
-              </Link>
-            </span>
-          )}
-          {isExpanded && props.expandableContent && (
-            <s.ContentContainer>{props.expandableContent}</s.ContentContainer>
-          )}
-        </>
-      }
-      buttons={props.buttons}
-    />
+          </>
+        }
+        buttons={props.buttons}
+      />
+    </>
   );
 };
diff --git a/src/components/Insights/InsightCard/styles.ts b/src/components/Insights/InsightCard/styles.ts
index 357b1504e..33bfd3904 100644
--- a/src/components/Insights/InsightCard/styles.ts
+++ b/src/components/Insights/InsightCard/styles.ts
@@ -1,7 +1,48 @@
 import styled from "styled-components";
 import { Link } from "../styles";
 
+export const TitleIcon = styled.div`
+  display: flex;
+`;
+
+export const TitleText = styled.div`
+  fill: #a1b5ff;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  display: block;
+`;
+
 export const Title = styled.div`
+  border-radius: 4px 4px 0 0;
+  display: flex;
+  padding: 4px 12px;
+  align-items: center;
+  gap: 4px;
+  background: ${({ theme }) => {
+    switch (theme.mode) {
+      case "light":
+        return "#B9C0D4";
+      case "dark":
+      case "dark-jetbrains":
+        return "#28293E";
+    }
+  }};
+  color: ${({ theme }) => {
+    switch (theme.mode) {
+      case "light":
+        return "#002D61";
+      case "dark":
+      case "dark-jetbrains":
+        return "#a1b5ff;";
+    }
+  }};
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+`;
+
+export const Header = styled.div`
   display: flex;
   gap: 4px;
   align-items: center;
diff --git a/src/components/Insights/InsightCard/types.ts b/src/components/Insights/InsightCard/types.ts
index b5a5b44f3..762c13f5f 100644
--- a/src/components/Insights/InsightCard/types.ts
+++ b/src/components/Insights/InsightCard/types.ts
@@ -9,6 +9,7 @@ export interface InsightCardProps {
   menuItems?: string[];
   stats?: string;
   buttons?: ReactNode[];
+  title?: string;
   onRecalculate: (
     prefixedCodeObjectId: string,
     insightType: InsightType
diff --git a/src/components/Insights/NPlusOneInsight/index.tsx b/src/components/Insights/NPlusOneInsight/index.tsx
index 25eb489df..46c21bdf5 100644
--- a/src/components/Insights/NPlusOneInsight/index.tsx
+++ b/src/components/Insights/NPlusOneInsight/index.tsx
@@ -47,6 +47,7 @@ export const NPlusOneInsight = (props: NPlusOneInsightProps) => {
   return (
     <InsightCard
       data={props.insight}
+      title={props.insight.spanInfo?.displayName}
       content={
         <s.ContentContainer>
           <Description>Check the following SELECT statement:</Description>
diff --git a/src/components/Insights/NoScalingIssueInsight/index.tsx b/src/components/Insights/NoScalingIssueInsight/index.tsx
index 0dbe96cf8..a51e65def 100644
--- a/src/components/Insights/NoScalingIssueInsight/index.tsx
+++ b/src/components/Insights/NoScalingIssueInsight/index.tsx
@@ -17,6 +17,7 @@ export const NoScalingIssueInsight = (props: NoScalingIssueInsightProps) => {
   return (
     <InsightCard
       key={props.insight.type}
+      title={props.insight.spanInfo?.displayName}
       data={props.insight}
       content={<div>This code is scaling well at concurrent executions</div>}
       buttons={[
diff --git a/src/components/Insights/PerformanceAtScaleInsight/index.tsx b/src/components/Insights/PerformanceAtScaleInsight/index.tsx
index 3aa8f01cb..a48c11ece 100644
--- a/src/components/Insights/PerformanceAtScaleInsight/index.tsx
+++ b/src/components/Insights/PerformanceAtScaleInsight/index.tsx
@@ -67,6 +67,7 @@ export const PerformanceAtScaleInsight = (
     <InsightCard
       key={props.insight.type}
       data={props.insight}
+      title={props.insight.spanInfo?.displayName}
       content={
         <div>
           Run at{" "}
diff --git a/src/components/Insights/QueryOptimizationInsight/index.tsx b/src/components/Insights/QueryOptimizationInsight/index.tsx
index 155b0d4da..b6f9d2b36 100644
--- a/src/components/Insights/QueryOptimizationInsight/index.tsx
+++ b/src/components/Insights/QueryOptimizationInsight/index.tsx
@@ -53,6 +53,7 @@ export const QueryOptimizationInsight = (
   return (
     <InsightCard
       data={props.insight}
+      title={props.insight.spanInfo?.displayName}
       content={
         <s.ContentContainer>
           <Description>
diff --git a/src/components/Insights/RequestBreakdownInsight/index.tsx b/src/components/Insights/RequestBreakdownInsight/index.tsx
index c75accb8d..711c492f4 100644
--- a/src/components/Insights/RequestBreakdownInsight/index.tsx
+++ b/src/components/Insights/RequestBreakdownInsight/index.tsx
@@ -193,6 +193,7 @@ export const RequestBreakdownInsight = (
   return (
     <InsightCard
       data={props.insight}
+      title={props.insight.spanInfo?.displayName}
       content={props.insight.hasAsyncSpans ? renderTable() : renderPieChart()}
       onRecalculate={props.onRecalculate}
       onRefresh={props.onRefresh}
diff --git a/src/components/Insights/ScalingIssueInsight/index.tsx b/src/components/Insights/ScalingIssueInsight/index.tsx
index 42c48b680..acb838373 100644
--- a/src/components/Insights/ScalingIssueInsight/index.tsx
+++ b/src/components/Insights/ScalingIssueInsight/index.tsx
@@ -42,6 +42,7 @@ export const ScalingIssueInsight = (props: ScalingIssueInsightProps) => {
   return (
     <InsightCard
       data={props.insight}
+      title={props.insight.spanInfo?.displayName}
       content={
         <s.ContentContainer>
           <Description>
diff --git a/src/components/Insights/SessionInViewInsight/index.tsx b/src/components/Insights/SessionInViewInsight/index.tsx
index 7ec8ded00..be1b6874d 100644
--- a/src/components/Insights/SessionInViewInsight/index.tsx
+++ b/src/components/Insights/SessionInViewInsight/index.tsx
@@ -37,6 +37,7 @@ export const SessionInViewInsight = (props: SessionInViewInsightProps) => {
   return (
     <InsightCard
       data={props.insight}
+      title={props.insight.spanInfo?.displayName}
       content={
         <s.ContentContainer>
           <Description>
diff --git a/src/components/Insights/SlowEndpointInsight/index.tsx b/src/components/Insights/SlowEndpointInsight/index.tsx
index 5820c7962..fd5b4b854 100644
--- a/src/components/Insights/SlowEndpointInsight/index.tsx
+++ b/src/components/Insights/SlowEndpointInsight/index.tsx
@@ -13,6 +13,7 @@ export const SlowEndpointInsight = (props: SlowEndpointInsightProps) => {
   return (
     <InsightCard
       data={props.insight}
+      title={props.insight.spanInfo?.displayName}
       content={
         <Description>
           {`On average requests are slower than other endpoints by ${roundTo(
diff --git a/src/components/Insights/SpanBottleneckInsight/index.tsx b/src/components/Insights/SpanBottleneckInsight/index.tsx
index 957e9bba9..af55eddf3 100644
--- a/src/components/Insights/SpanBottleneckInsight/index.tsx
+++ b/src/components/Insights/SpanBottleneckInsight/index.tsx
@@ -29,6 +29,7 @@ export const SpanBottleneckInsight = (props: SpanBottleneckInsightProps) => {
   return (
     <InsightCard
       data={props.insight}
+      title={props.insight.spanInfo?.displayName}
       content={
         <>
           <Description>
diff --git a/src/components/Insights/SpanNexusInsight/index.tsx b/src/components/Insights/SpanNexusInsight/index.tsx
index e05c97887..5f90acce6 100644
--- a/src/components/Insights/SpanNexusInsight/index.tsx
+++ b/src/components/Insights/SpanNexusInsight/index.tsx
@@ -22,6 +22,7 @@ export const SpanNexusInsight = (props: SpanNexusInsightProps) => {
   return (
     <InsightCard
       data={insight}
+      title={props.insight.spanInfo?.displayName}
       content={
         <s.ContentContainer>
           <Description>Multiple code flows depend on this location</Description>
diff --git a/src/components/Insights/TopUsageInsight/index.tsx b/src/components/Insights/TopUsageInsight/index.tsx
index 487a7e6bf..2c179130f 100644
--- a/src/components/Insights/TopUsageInsight/index.tsx
+++ b/src/components/Insights/TopUsageInsight/index.tsx
@@ -38,6 +38,7 @@ export const TopUsageInsight = (props: TopUsageInsightProps) => {
   return (
     <InsightCard
       data={props.insight}
+      title={props.insight.spanInfo?.displayName}
       content={
         <s.FlowList>
           {pageItems.map((flow, i) => {
diff --git a/src/components/Insights/TrafficInsight/index.tsx b/src/components/Insights/TrafficInsight/index.tsx
index 70bbd0bd2..91346ed00 100644
--- a/src/components/Insights/TrafficInsight/index.tsx
+++ b/src/components/Insights/TrafficInsight/index.tsx
@@ -44,6 +44,7 @@ export const TrafficInsight = (props: TrafficInsightProps) => {
 
   return (
     <InsightCard
+      title={props.insight.spanInfo?.displayName}
       data={props.insight}
       content={<Description>{getDescription(props.insight.type)}</Description>}
       stats={`${valueString}/min`}
diff --git a/src/components/common/Card/index.tsx b/src/components/common/Card/index.tsx
index 2a0ccdc77..a0c224ec3 100644
--- a/src/components/common/Card/index.tsx
+++ b/src/components/common/Card/index.tsx
@@ -3,8 +3,13 @@ import { CardProps } from "./types";
 
 export const Card = (props: CardProps) => (
   <s.Container className={props.className}>
-    <s.Header>{props.header}</s.Header>
-    {props.content}
-    {props.buttons && <s.ButtonsContainer>{props.buttons}</s.ButtonsContainer>}
+    {props.showTitle && props.title}
+    <s.Content>
+      <s.Header>{props.header}</s.Header>
+      {props.content}
+      {props.buttons && (
+        <s.ButtonsContainer>{props.buttons}</s.ButtonsContainer>
+      )}
+    </s.Content>
   </s.Container>
 );
diff --git a/src/components/common/Card/styles.ts b/src/components/common/Card/styles.ts
index d21d2902e..f322e734c 100644
--- a/src/components/common/Card/styles.ts
+++ b/src/components/common/Card/styles.ts
@@ -1,10 +1,6 @@
 import styled from "styled-components";
 
 export const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  padding: 8px;
-  gap: 8px;
   border-radius: 4px;
   color: ${({ theme }) => {
     switch (theme.mode) {
@@ -26,6 +22,13 @@ export const Container = styled.div`
   }};
 `;
 
+export const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 8px;
+  gap: 8px;
+`;
+
 export const Header = styled.div`
   display: flex;
   align-items: center;
diff --git a/src/components/common/Card/types.ts b/src/components/common/Card/types.ts
index 1cc51c868..59d3f00aa 100644
--- a/src/components/common/Card/types.ts
+++ b/src/components/common/Card/types.ts
@@ -5,4 +5,6 @@ export interface CardProps {
   content: ReactNode;
   buttons?: ReactNode[];
   className?: string;
+  title?: ReactNode;
+  showTitle?: boolean;
 }