diff --git a/web-common/src/components/vega/VegaLiteRenderer.svelte b/web-common/src/components/vega/VegaLiteRenderer.svelte
index f15d68a9039..1249bd92ba8 100644
--- a/web-common/src/components/vega/VegaLiteRenderer.svelte
+++ b/web-common/src/components/vega/VegaLiteRenderer.svelte
@@ -88,7 +88,6 @@
 <div
   bind:contentRect
   role="presentation"
-  class:px-2={canvasDashboard}
   class="rill-vega-container overflow-y-auto overflow-x-hidden size-full flex flex-col items-center"
   on:mouseleave={handleMouseLeave}
 >
diff --git a/web-common/src/components/vega/vega-config.ts b/web-common/src/components/vega/vega-config.ts
index 5a2bb743e4c..b6c46983036 100644
--- a/web-common/src/components/vega/vega-config.ts
+++ b/web-common/src/components/vega/vega-config.ts
@@ -76,6 +76,9 @@ export const getRillTheme: (
     autosize: {
       type: "fit-x",
     },
+    ...(isCanvasDashboard && {
+      padding: 0,
+    }),
     background: "transparent",
     mark: {
       tooltip: isCanvasDashboard,
diff --git a/web-common/src/features/canvas/CanvasComponent.svelte b/web-common/src/features/canvas/CanvasComponent.svelte
index ae9624649b6..03a384b46b9 100644
--- a/web-common/src/features/canvas/CanvasComponent.svelte
+++ b/web-common/src/features/canvas/CanvasComponent.svelte
@@ -68,9 +68,8 @@
   class:editable
   class:opacity-20={ghost}
   style:pointer-events={!allowPointerEvents ? "none" : "auto"}
-  class:outline={allowBorder || open}
-  class:shadow-sm={allowBorder || open}
-  class="group component-card size-full flex flex-col cursor-pointer z-10 p-0 relative outline-[1px] outline-border bg-surface-card overflow-hidden rounded-sm"
+  class:shadow={allowBorder || open}
+  class="group component-card size-full flex flex-col cursor-pointer z-10 p-0 relative bg-surface-card overflow-hidden rounded-sm border border-border"
 >
   <Toolbar
     {component}
@@ -84,6 +83,7 @@
   <div
     role="presentation"
     class="size-full grow flex flex-col"
+    class:p-4={allowBorder}
     on:mousedown={onMouseDown}
   >
     {#if component}
diff --git a/web-common/src/features/canvas/ComponentHeader.svelte b/web-common/src/features/canvas/ComponentHeader.svelte
index c3eb7478dab..02d543a5d29 100644
--- a/web-common/src/features/canvas/ComponentHeader.svelte
+++ b/web-common/src/features/canvas/ComponentHeader.svelte
@@ -39,7 +39,7 @@
 {#if title || description}
   <div
     bind:this={container}
-    class="component-header-container w-full h-fit flex flex-col bg-surface-card px-4 pt-2 pb-1 items-start {wide
+    class="component-header-container w-full h-fit flex flex-col bg-surface-card items-start {wide
       ? 'wide'
       : ''}"
   >
@@ -85,7 +85,7 @@
     {/if}
   </div>
 {:else if atleastOneFilter}
-  <div class="w-full px-2 py-1">
+  <div class="w-full">
     <LocalFiltersHeader {component} />
   </div>
 {/if}
@@ -104,10 +104,9 @@
   }
 
   .title {
-    font-size: 15px;
-    line-height: 26px;
-    @apply flex-shrink-0;
-    @apply font-medium text-fg-primary truncate;
+    font-size: 16px;
+    @apply flex-shrink-0 leading-none;
+    @apply font-semibold text-fg-primary truncate;
   }
 
   .title.faint {
diff --git a/web-common/src/features/canvas/components/charts/CanvasChart.svelte b/web-common/src/features/canvas/components/charts/CanvasChart.svelte
index bc249413f93..531a7dbc853 100644
--- a/web-common/src/features/canvas/components/charts/CanvasChart.svelte
+++ b/web-common/src/features/canvas/components/charts/CanvasChart.svelte
@@ -80,7 +80,7 @@
   };
 </script>
 
-<div class="size-full flex flex-col overflow-hidden">
+<div class="size-full flex flex-col overflow-hidden gap-y-4">
   {#if schema.isValid}
     {#if isFetching}
       <div class="flex items-center justify-center h-full w-full">
@@ -97,15 +97,17 @@
         {filters}
         {component}
       />
-      <Chart
-        {chartType}
-        {chartSpec}
-        {chartData}
-        measures={$measures}
-        isCanvas
-        themeMode={$isThemeModeDark ? "dark" : "light"}
-        theme={currentTheme}
-      />
+      <div class="grow overflow-hidden">
+        <Chart
+          {chartType}
+          {chartSpec}
+          {chartData}
+          measures={$measures}
+          isCanvas
+          themeMode={$isThemeModeDark ? "dark" : "light"}
+          theme={currentTheme}
+        />
+      </div>
     {/if}
   {:else}
     <ComponentError error={schema.error} />
diff --git a/web-common/src/features/canvas/components/leaderboard/LeaderboardDisplay.svelte b/web-common/src/features/canvas/components/leaderboard/LeaderboardDisplay.svelte
index ab1e63242c6..9770596433c 100644
--- a/web-common/src/features/canvas/components/leaderboard/LeaderboardDisplay.svelte
+++ b/web-common/src/features/canvas/components/leaderboard/LeaderboardDisplay.svelte
@@ -147,93 +147,92 @@
   $: ({ parsed } = mvFilters);
 </script>
 
-{#if schema.isValid}
-  <ComponentHeader
-    {component}
-    {title}
-    {description}
-    showDescriptionAsTooltip={show_description_as_tooltip}
-    {filters}
-  />
+<div class="size-full flex flex-col overflow-hidden gap-y-4">
+  {#if schema.isValid}
+    <ComponentHeader
+      {component}
+      {title}
+      {description}
+      showDescriptionAsTooltip={show_description_as_tooltip}
+      {filters}
+    />
 
-  <div
-    class="h-fit p-0 grow relative"
-    class:!p-0={visibleDimensions.length === 1}
-  >
-    <span class="border-overlay" />
-    <div
-      class="grid-wrapper gap-px overflow-x-auto"
-      style:grid-template-columns="repeat(auto-fit, minmax({estimatedTableWidth +
-        LEADERBOARD_WRAPPER_PADDING}px, 1fr))"
-    >
-      {#each visibleDimensions as dimension (dimension.name)}
-        {#if dimension.name}
-          <div
-            class="leaderboard-wrapper"
-            bind:clientWidth={leaderboardWrapperWidth}
-          >
-            <Leaderboard
-              leaderboardShowContextForAllMeasures
-              timeControlsReady
-              slice={numRows}
-              visible={$visible}
-              {isValidPercentOfTotal}
-              {metricsViewName}
-              leaderboardSortByMeasureName={leaderboardSortByMeasureName ??
-                leaderboardMeasureNames?.[0]}
-              leaderboardMeasures={visibleMeasures}
-              {whereFilter}
-              {dimensionThresholdFilters}
-              tableWidth={dimensionColumnWidth + totalContextWidth}
-              {dimensionColumnWidth}
-              sortedAscending={sortDirection === SortDirection.ASCENDING}
-              {sortType}
-              filterExcludeMode={$parsed?.dimensionFilters.get(dimension.name)
-                ?.isInclude === false}
-              {timeRange}
-              comparisonTimeRange={showTimeComparison
-                ? comparisonTimeRange
-                : undefined}
-              {dimension}
-              allowExpandTable={false}
-              allowDimensionComparison={false}
-              selectedValues={selectedDimensionValues(
-                runtimeClient,
-                [metricsViewName],
-                whereFilter,
-                dimension.name,
-                timeRange.start,
-                timeRange.end,
-              )}
-              isBeingCompared={false}
-              formatters={measureFormatters}
-              {toggleSort}
-              toggleDimensionValueSelection={async (
-                name,
-                value,
-                keepPillVisible,
-                isExclusiveFilter,
-              ) => {
-                await toggleDimensionValueSelections(
-                  name,
-                  [value],
+    <div class="p-0 grow relative">
+      <span class="border-overlay" />
+      <div
+        class="grid-wrapper gap-px overflow-x-auto"
+        style:grid-template-columns="repeat(auto-fit, minmax({estimatedTableWidth +
+          LEADERBOARD_WRAPPER_PADDING}px, 1fr))"
+      >
+        {#each visibleDimensions as dimension (dimension.name)}
+          {#if dimension.name}
+            <div
+              class="leaderboard-wrapper"
+              bind:clientWidth={leaderboardWrapperWidth}
+            >
+              <Leaderboard
+                leaderboardShowContextForAllMeasures
+                timeControlsReady
+                slice={numRows}
+                visible={$visible}
+                {isValidPercentOfTotal}
+                {metricsViewName}
+                leaderboardSortByMeasureName={leaderboardSortByMeasureName ??
+                  leaderboardMeasureNames?.[0]}
+                leaderboardMeasures={visibleMeasures}
+                {whereFilter}
+                {dimensionThresholdFilters}
+                tableWidth={dimensionColumnWidth + totalContextWidth}
+                {dimensionColumnWidth}
+                sortedAscending={sortDirection === SortDirection.ASCENDING}
+                {sortType}
+                filterExcludeMode={$parsed?.dimensionFilters.get(dimension.name)
+                  ?.isInclude === false}
+                {timeRange}
+                comparisonTimeRange={showTimeComparison
+                  ? comparisonTimeRange
+                  : undefined}
+                {dimension}
+                allowExpandTable={false}
+                allowDimensionComparison={false}
+                selectedValues={selectedDimensionValues(
+                  runtimeClient,
                   [metricsViewName],
+                  whereFilter,
+                  dimension.name,
+                  timeRange.start,
+                  timeRange.end,
+                )}
+                isBeingCompared={false}
+                formatters={measureFormatters}
+                {toggleSort}
+                toggleDimensionValueSelection={async (
+                  name,
+                  value,
                   keepPillVisible,
                   isExclusiveFilter,
-                );
-              }}
-              measureLabel={(measureName) =>
-                visibleMeasures.find((m) => m.name === measureName)
-                  ?.displayName || measureName}
-            />
-          </div>
-        {/if}
-      {/each}
+                ) => {
+                  await toggleDimensionValueSelections(
+                    name,
+                    [value],
+                    [metricsViewName],
+                    keepPillVisible,
+                    isExclusiveFilter,
+                  );
+                }}
+                measureLabel={(measureName) =>
+                  visibleMeasures.find((m) => m.name === measureName)
+                    ?.displayName || measureName}
+              />
+            </div>
+          {/if}
+        {/each}
+      </div>
     </div>
-  </div>
-{:else}
-  <ComponentError error={schema.error} />
-{/if}
+  {:else}
+    <ComponentError error={schema.error} />
+  {/if}
+</div>
 
 <style lang="postcss">
   .grid-wrapper {
@@ -242,7 +241,7 @@
   }
 
   .leaderboard-wrapper {
-    @apply relative p-4 pr-6 grid outline outline-1 outline-gray-200;
+    @apply relative grid outline outline-1 outline-border;
   }
 
   .border-overlay {
diff --git a/web-common/src/features/canvas/components/pivot/CanvasPivotDisplay.svelte b/web-common/src/features/canvas/components/pivot/CanvasPivotDisplay.svelte
index 4bc857e4472..0e327e8de92 100644
--- a/web-common/src/features/canvas/components/pivot/CanvasPivotDisplay.svelte
+++ b/web-common/src/features/canvas/components/pivot/CanvasPivotDisplay.svelte
@@ -64,18 +64,20 @@
   }
 </script>
 
-<ComponentHeader
-  {component}
-  {title}
-  {description}
-  showDescriptionAsTooltip={show_description_as_tooltip}
-  {filters}
-/>
+<div class="size-full flex flex-col overflow-hidden gap-y-4">
+  <ComponentHeader
+    {component}
+    {title}
+    {description}
+    showDescriptionAsTooltip={show_description_as_tooltip}
+    {filters}
+  />
 
-<CanvasPivotRenderer
-  {hasHeader}
-  {schema}
-  {pivotDataStore}
-  pivotConfig={config}
-  {pivotState}
-/>
+  <CanvasPivotRenderer
+    {hasHeader}
+    {schema}
+    {pivotDataStore}
+    pivotConfig={config}
+    {pivotState}
+  />
+</div>
diff --git a/web-common/src/features/canvas/components/pivot/CanvasPivotRenderer.svelte b/web-common/src/features/canvas/components/pivot/CanvasPivotRenderer.svelte
index 1e183177beb..0fc1264f591 100644
--- a/web-common/src/features/canvas/components/pivot/CanvasPivotRenderer.svelte
+++ b/web-common/src/features/canvas/components/pivot/CanvasPivotRenderer.svelte
@@ -27,12 +27,7 @@
     pivotColumns.dimension.length > 0 && pivotColumns.measure.length === 0;
 </script>
 
-<div
-  class="size-full overflow-hidden"
-  style:max-height="inherit"
-  class:p-4={hasHeader}
-  class:pt-1={hasHeader}
->
+<div class="size-full overflow-hidden" style:max-height="inherit">
   {#if !schema.isValid}
     <ComponentError error={schema.error} />
   {:else if pivotDataStore && $pivotDataStore && pivotConfig && $pivotConfig}