diff --git a/frontend/src/component/personalDashboard/PersonalDashboard.tsx b/frontend/src/component/personalDashboard/PersonalDashboard.tsx
index e1979dfe78..74295e52e7 100644
--- a/frontend/src/component/personalDashboard/PersonalDashboard.tsx
+++ b/frontend/src/component/personalDashboard/PersonalDashboard.tsx
@@ -111,6 +111,158 @@ const AccordionSummarySubtitle = styled(Typography)(({ theme }) => ({
     fontWeight: theme.typography.body2.fontWeight,
 }));
 
+const EventTimelinePanel = () => {
+    const { toggleSectionState, expandTimeline } = useDashboardState();
+    const { trackEvent } = usePlausibleTracker();
+
+    const signalsLink = '/integrations/signals';
+    return (
+        <SectionAccordion
+            disableGutters
+            expanded={expandTimeline ?? false}
+            onChange={() => toggleSectionState('timeline')}
+        >
+            <StyledAccordionSummary
+                expandIcon={
+                    <ExpandMore titleAccess='Toggle timeline section' />
+                }
+                id='timeline-panel-header'
+                aria-controls='timeline-panel-content'
+            >
+                <AccordionSummaryText>
+                    <AccordionSummaryHeader>
+                        Event timeline
+                    </AccordionSummaryHeader>
+                    <AccordionSummarySubtitle>
+                        Overview of recent activities across all projects in
+                        Unleash. Make debugging easier and{' '}
+                        <Link
+                            to={signalsLink}
+                            onClick={() => {
+                                trackEvent('event-timeline', {
+                                    props: {
+                                        eventType: 'signals clicked',
+                                    },
+                                });
+                            }}
+                        >
+                            include external signals
+                        </Link>{' '}
+                        to get a fuller overview.
+                    </AccordionSummarySubtitle>
+                </AccordionSummaryText>
+            </StyledAccordionSummary>
+            <StyledAccordionDetails>
+                <AccordionContent>
+                    <EventTimeline />
+                </AccordionContent>
+            </StyledAccordionDetails>
+        </SectionAccordion>
+    );
+};
+
+const FlagPanel = () => {
+    const { personalDashboard, refetch: refetchDashboard } =
+        usePersonalDashboard();
+
+    const projects = personalDashboard?.projects || [];
+
+    const { activeFlag, setActiveFlag, toggleSectionState, expandFlags } =
+        useDashboardState({ flags: personalDashboard?.flags ?? [] });
+
+    return (
+        <SectionAccordion
+            expanded={expandFlags ?? true}
+            onChange={() => toggleSectionState('flags')}
+        >
+            <StyledAccordionSummaryWithBorder
+                expandIcon={<ExpandMore titleAccess='Toggle flags section' />}
+                id='flags-panel-header'
+                aria-controls='flags-panel-content'
+            >
+                <AccordionSummaryText>
+                    <AccordionSummaryHeader>
+                        My feature flags
+                    </AccordionSummaryHeader>
+                    <AccordionSummarySubtitle>
+                        Feature flags you have created or favorited
+                    </AccordionSummarySubtitle>
+                </AccordionSummaryText>
+            </StyledAccordionSummaryWithBorder>
+            <StyledAccordionDetails>
+                <MyFlags
+                    hasProjects={projects?.length > 0}
+                    flagData={
+                        personalDashboard?.flags.length
+                            ? {
+                                  state: 'flags' as const,
+                                  activeFlag,
+                                  flags: personalDashboard.flags,
+                              }
+                            : { state: 'no flags' as const }
+                    }
+                    setActiveFlag={setActiveFlag}
+                    refetchDashboard={refetchDashboard}
+                />
+            </StyledAccordionDetails>
+        </SectionAccordion>
+    );
+};
+
+const ProjectPanel = () => {
+    const { personalDashboard } = usePersonalDashboard();
+
+    const projects = personalDashboard?.projects || [];
+
+    const {
+        activeProject,
+        setActiveProject,
+        toggleSectionState,
+        expandProjects,
+    } = useDashboardState({ projects });
+
+    const personalDashboardProjectDetails =
+        fromPersonalDashboardProjectDetailsOutput(
+            usePersonalDashboardProjectDetails(activeProject),
+        );
+
+    return (
+        <SectionAccordion
+            disableGutters
+            expanded={expandProjects ?? true}
+            onChange={() => toggleSectionState('projects')}
+        >
+            <StyledAccordionSummaryWithBorder
+                expandIcon={
+                    <ExpandMore titleAccess='Toggle projects section' />
+                }
+                id='projects-panel-header'
+                aria-controls='projects-panel-content'
+            >
+                <AccordionSummaryText>
+                    <AccordionSummaryHeader>My projects</AccordionSummaryHeader>
+                    <AccordionSummarySubtitle>
+                        Favorite projects, projects you own, and projects you
+                        are a member of
+                    </AccordionSummarySubtitle>
+                </AccordionSummaryText>
+            </StyledAccordionSummaryWithBorder>
+            <StyledAccordionDetails>
+                <MyProjects
+                    owners={personalDashboard?.projectOwners ?? []}
+                    admins={personalDashboard?.admins ?? []}
+                    projects={projects}
+                    activeProject={activeProject || ''}
+                    setActiveProject={setActiveProject}
+                    personalDashboardProjectDetails={
+                        personalDashboardProjectDetails
+                    }
+                />
+            </StyledAccordionDetails>
+        </SectionAccordion>
+    );
+};
+
 export const PersonalDashboard = () => {
     const { user } = useAuthUser();
     const { trackEvent } = usePlausibleTracker();
@@ -122,24 +274,6 @@ export const PersonalDashboard = () => {
 
     usePageTitle(name ? `Dashboard: ${name}` : 'Dashboard');
 
-    const { personalDashboard, refetch: refetchDashboard } =
-        usePersonalDashboard();
-
-    const projects = personalDashboard?.projects || [];
-
-    const {
-        activeProject,
-        setActiveProject,
-        activeFlag,
-        setActiveFlag,
-        toggleSectionState,
-        expandFlags,
-        expandProjects,
-        expandTimeline,
-    } = useDashboardState(projects, personalDashboard?.flags ?? []);
-
-    const signalsLink = '/integrations/signals';
-
     const [welcomeDialog, setWelcomeDialog] = useLocalStorageState<
         'open' | 'closed'
     >(
@@ -147,11 +281,6 @@ export const PersonalDashboard = () => {
         splash?.personalDashboardKeyConcepts ? 'closed' : 'open',
     );
 
-    const personalDashboardProjectDetails =
-        fromPersonalDashboardProjectDetailsOutput(
-            usePersonalDashboardProjectDetails(activeProject),
-        );
-
     useEffect(() => {
         trackEvent('personal-dashboard', {
             props: {
@@ -188,122 +317,12 @@ export const PersonalDashboard = () => {
                 </ViewKeyConceptsButton>
             </WelcomeSection>
 
-            {showTimelinePanel && (
-                <SectionAccordion
-                    disableGutters
-                    expanded={expandTimeline ?? false}
-                    onChange={() => toggleSectionState('timeline')}
-                >
-                    <StyledAccordionSummary
-                        expandIcon={
-                            <ExpandMore titleAccess='Toggle timeline section' />
-                        }
-                        id='timeline-panel-header'
-                        aria-controls='timeline-panel-content'
-                    >
-                        <AccordionSummaryText>
-                            <AccordionSummaryHeader>
-                                Event timeline
-                            </AccordionSummaryHeader>
-                            <AccordionSummarySubtitle>
-                                Overview of recent activities across all
-                                projects in Unleash. Make debugging easier and{' '}
-                                <Link
-                                    to={signalsLink}
-                                    onClick={() => {
-                                        trackEvent('event-timeline', {
-                                            props: {
-                                                eventType: 'signals clicked',
-                                            },
-                                        });
-                                    }}
-                                >
-                                    include external signals
-                                </Link>{' '}
-                                to get a fuller overview.
-                            </AccordionSummarySubtitle>
-                        </AccordionSummaryText>
-                    </StyledAccordionSummary>
-                    <StyledAccordionDetails>
-                        <AccordionContent>
-                            <EventTimeline />
-                        </AccordionContent>
-                    </StyledAccordionDetails>
-                </SectionAccordion>
-            )}
-            <SectionAccordion
-                disableGutters
-                expanded={expandProjects ?? true}
-                onChange={() => toggleSectionState('projects')}
-            >
-                <StyledAccordionSummaryWithBorder
-                    expandIcon={
-                        <ExpandMore titleAccess='Toggle projects section' />
-                    }
-                    id='projects-panel-header'
-                    aria-controls='projects-panel-content'
-                >
-                    <AccordionSummaryText>
-                        <AccordionSummaryHeader>
-                            My projects
-                        </AccordionSummaryHeader>
-                        <AccordionSummarySubtitle>
-                            Favorite projects, projects you own, and projects
-                            you are a member of
-                        </AccordionSummarySubtitle>
-                    </AccordionSummaryText>
-                </StyledAccordionSummaryWithBorder>
-                <StyledAccordionDetails>
-                    <MyProjects
-                        owners={personalDashboard?.projectOwners ?? []}
-                        admins={personalDashboard?.admins ?? []}
-                        projects={projects}
-                        activeProject={activeProject || ''}
-                        setActiveProject={setActiveProject}
-                        personalDashboardProjectDetails={
-                            personalDashboardProjectDetails
-                        }
-                    />
-                </StyledAccordionDetails>
-            </SectionAccordion>
+            {showTimelinePanel && <EventTimelinePanel />}
+
+            <ProjectPanel />
+
+            <FlagPanel />
 
-            <SectionAccordion
-                expanded={expandFlags ?? true}
-                onChange={() => toggleSectionState('flags')}
-            >
-                <StyledAccordionSummaryWithBorder
-                    expandIcon={
-                        <ExpandMore titleAccess='Toggle flags section' />
-                    }
-                    id='flags-panel-header'
-                    aria-controls='flags-panel-content'
-                >
-                    <AccordionSummaryText>
-                        <AccordionSummaryHeader>
-                            My feature flags
-                        </AccordionSummaryHeader>
-                        <AccordionSummarySubtitle>
-                            Feature flags you have created or favorited
-                        </AccordionSummarySubtitle>
-                    </AccordionSummaryText>
-                </StyledAccordionSummaryWithBorder>
-                <StyledAccordionDetails>
-                    <MyFlags
-                        hasProjects={projects?.length > 0}
-                        flagData={
-                            personalDashboard?.flags.length
-                                ? {
-                                      state: 'flags' as const,
-                                      activeFlag,
-                                      flags: personalDashboard.flags,
-                                  }
-                                : { state: 'no flags' as const }
-                        }
-                        setActiveFlag={setActiveFlag}
-                        refetchDashboard={refetchDashboard}
-                    />
-                </StyledAccordionDetails>
-            </SectionAccordion>
             <WelcomeDialog
                 open={welcomeDialog === 'open'}
                 onClose={() => {
diff --git a/frontend/src/component/personalDashboard/useDashboardState.ts b/frontend/src/component/personalDashboard/useDashboardState.ts
index c9652063e3..7d89cb43d2 100644
--- a/frontend/src/component/personalDashboard/useDashboardState.ts
+++ b/frontend/src/component/personalDashboard/useDashboardState.ts
@@ -5,10 +5,11 @@ import type {
 } from 'openapi';
 import { useEffect } from 'react';
 
-export const useDashboardState = (
-    projects: PersonalDashboardSchemaProjectsItem[],
-    flags: PersonalDashboardSchemaFlagsItem[],
-) => {
+type StateProps = {
+    projects?: PersonalDashboardSchemaProjectsItem[];
+    flags?: PersonalDashboardSchemaFlagsItem[];
+};
+export const useDashboardState = (props?: StateProps) => {
     type State = {
         activeProject: string | undefined;
         activeFlag: PersonalDashboardSchemaFlagsItem | undefined;
@@ -35,34 +36,31 @@ export const useDashboardState = (
 
     useEffect(() => {
         const updates: Partial<State> = {};
-        const setDefaultFlag =
-            flags.length &&
-            (!state.activeFlag ||
-                !flags.some((flag) => flag.name === state.activeFlag?.name));
 
-        if (setDefaultFlag) {
-            updates.activeFlag = flags[0];
+        if (
+            props?.flags?.length &&
+            (!state.activeFlag ||
+                !props.flags.some(
+                    (flag) => flag.name === state.activeFlag?.name,
+                ))
+        ) {
+            updates.activeFlag = props.flags[0];
         }
 
-        const setDefaultProject =
-            projects.length &&
+        if (
+            props?.projects?.length &&
             (!state.activeProject ||
-                !projects.some(
+                !props.projects.some(
                     (project) => project.id === state.activeProject,
-                ));
-
-        if (setDefaultProject) {
-            updates.activeProject = projects[0].id;
+                ))
+        ) {
+            updates.activeProject = props.projects[0].id;
         }
 
         if (Object.keys(updates).length) {
             updateState(updates);
         }
-    }, [
-        JSON.stringify(projects),
-        JSON.stringify(flags),
-        JSON.stringify(state),
-    ]);
+    }, [JSON.stringify(props), JSON.stringify(state)]);
 
     const { activeFlag, activeProject } = state;