diff --git a/frontend/src/component/personalDashboard/ConnectSDK.tsx b/frontend/src/component/personalDashboard/ConnectSDK.tsx
index 9c27555994..4860dfd63b 100644
--- a/frontend/src/component/personalDashboard/ConnectSDK.tsx
+++ b/frontend/src/component/personalDashboard/ConnectSDK.tsx
@@ -103,7 +103,6 @@ export const ExistingFlag: FC<{ project: string }> = ({ project }) => {
 export const ConnectSDK: FC<{ project: string }> = ({ project }) => {
     return (
         <ActionBox data-loading>
-            {' '}
             <TitleContainer>
                 <NeutralCircleContainer>2</NeutralCircleContainer>
                 Connect an SDK
@@ -116,7 +115,7 @@ export const ConnectSDK: FC<{ project: string }> = ({ project }) => {
                 </p>
             </div>
             <div>
-                <Button href={`projects/${project}`} variant='contained'>
+                <Button href={`/projects/${project}`} variant='contained'>
                     Go to project
                 </Button>
             </div>
diff --git a/frontend/src/component/personalDashboard/FlagMetricsChart.tsx b/frontend/src/component/personalDashboard/FlagMetricsChart.tsx
index 4921aa5747..47a5da0d87 100644
--- a/frontend/src/component/personalDashboard/FlagMetricsChart.tsx
+++ b/frontend/src/component/personalDashboard/FlagMetricsChart.tsx
@@ -69,6 +69,31 @@ export const PlaceholderFlagMetricsChart: React.FC<{ label?: string }> = ({
     );
 };
 
+export const EmptyFlagMetricsChart = () => {
+    const theme = useTheme();
+
+    const options = useMemo(() => {
+        return createPlaceholderBarChartOptions(theme);
+    }, [theme]);
+
+    const data = useMemo(() => {
+        return {
+            labels: [],
+            datasets: [],
+        };
+    }, [theme]);
+
+    return (
+        <ChartWrapper>
+            <Bar
+                data={data}
+                options={options}
+                aria-label='A placeholder bar chart with a single feature flag exposure metrics'
+            />
+        </ChartWrapper>
+    );
+};
+
 const useMetricsEnvironments = (project: string, flagName: string) => {
     const [environment, setEnvironment] = useState<string | null>(null);
     const { feature } = useFeature(project, flagName);
@@ -96,7 +121,7 @@ const useFlagMetrics = (
     environment: string | null,
     hoursBack: number,
 ) => {
-    const { featureMetrics: metrics = [] } = useFeatureMetricsRaw(
+    const { featureMetrics: metrics = [], loading } = useFeatureMetricsRaw(
         flagName,
         hoursBack,
     );
@@ -126,7 +151,7 @@ const useFlagMetrics = (
         return createBarChartOptions(theme, hoursBack, locationSettings);
     }, [theme, hoursBack, locationSettings]);
 
-    return { data, options };
+    return { data, options, loading };
 };
 
 const EnvironmentSelect: FC<{
@@ -183,7 +208,11 @@ export const FlagMetricsChart: FC<{
     const { environment, setEnvironment, activeEnvironments } =
         useMetricsEnvironments(flag.project, flag.name);
 
-    const { data, options } = useFlagMetrics(flag.name, environment, hoursBack);
+    const { data, options, loading } = useFlagMetrics(
+        flag.name,
+        environment,
+        hoursBack,
+    );
 
     const noData = data.datasets[0].data.length === 0;
 
@@ -210,7 +239,9 @@ export const FlagMetricsChart: FC<{
                 </MetricsSelectors>
             </ExposureAndMetricsRow>
 
-            {noData ? (
+            {loading ? (
+                <EmptyFlagMetricsChart />
+            ) : noData ? (
                 <PlaceholderFlagMetricsChart />
             ) : (
                 <ChartWrapper>