diff --git a/web/frontend/src/Job.root.svelte b/web/frontend/src/Job.root.svelte
index ebfdeae..09d3fac 100644
--- a/web/frontend/src/Job.root.svelte
+++ b/web/frontend/src/Job.root.svelte
@@ -120,7 +120,6 @@
         jobTags,
         fullWidth,
         statsTable;
-    $: polarPlotSize = Math.min(fullWidth / 3 - 10, 300);
     $: document.title = $initq.fetching
         ? "Loading..."
         : $initq.error
@@ -233,8 +232,7 @@
         {/if}
         <Col>
             <Polar
-                width={polarPlotSize}
-                height={polarPlotSize}
+                size={fullWidth / 4.1}
                 metrics={ccconfig[
                     `job_view_polarPlotMetrics:${$initq.data.job.cluster}`
                 ] || ccconfig[`job_view_polarPlotMetrics`]}
@@ -245,7 +243,7 @@
         <Col>
             <Roofline
                 width={fullWidth / 3 - 10}
-                height={polarPlotSize + 20}
+                height={fullWidth / 5}
                 cluster={clusters
                     .find((c) => c.name == $initq.data.job.cluster)
                     .subClusters.find(
diff --git a/web/frontend/src/plots/Polar.svelte b/web/frontend/src/plots/Polar.svelte
index cb99ba7..bf4385f 100644
--- a/web/frontend/src/plots/Polar.svelte
+++ b/web/frontend/src/plots/Polar.svelte
@@ -22,8 +22,7 @@
         LineElement
     );
 
-    export let width
-    export let height
+    export let size
     export let metrics
     export let cluster
     export let jobMetrics
@@ -88,8 +87,19 @@
     }
 
     // No custom defined options but keep for clarity 
-    const options = {}
+    const options = {
+        maintainAspectRatio: false,
+    }
 
 </script>
 
-<Radar {data} {options} {width} {height}/>
+<div class="chart-container">
+    <Radar {data} {options} width={size} height={size}/>
+</div>
+
+<style>
+    .chart-container {
+        margin: auto;
+        position: relative;
+    }
+</style>
\ No newline at end of file