diff --git a/apps/smart-forms-app/cypress/e2e/viewer.cy.ts b/apps/smart-forms-app/cypress/e2e/viewer.cy.ts
index 74e09dbbc..27c976685 100644
--- a/apps/smart-forms-app/cypress/e2e/viewer.cy.ts
+++ b/apps/smart-forms-app/cypress/e2e/viewer.cy.ts
@@ -72,7 +72,6 @@ describe('response viewer', () => {
 
     it('edit response', () => {
       cy.clickOnViewerOperation('Edit Response');
-      cy.getByData('form-heading').should('be.visible');
 
       cy.goToPatientDetailsTab();
       cy.initAgeValue(60);
diff --git a/apps/smart-forms-app/cypress/support/commands.ts b/apps/smart-forms-app/cypress/support/commands.ts
index c5e87d9b7..727930ab5 100644
--- a/apps/smart-forms-app/cypress/support/commands.ts
+++ b/apps/smart-forms-app/cypress/support/commands.ts
@@ -95,7 +95,6 @@ Cypress.Commands.add('waitForPopulation', () => {
   cy.intercept(populateRegex).as('populating');
 
   cy.wait('@populating', { timeout: 10000 }).its('response.statusCode').should('eq', 200);
-  cy.getByData('form-heading').should('be.visible');
 });
 
 Cypress.Commands.add('launchFromSMARTHealthIT', () => {
diff --git a/apps/smart-forms-app/src/components/Button/ReauthenticateButton.tsx b/apps/smart-forms-app/src/components/Button/ReauthenticateButton.tsx
new file mode 100644
index 000000000..63b2ac57e
--- /dev/null
+++ b/apps/smart-forms-app/src/components/Button/ReauthenticateButton.tsx
@@ -0,0 +1,20 @@
+import { Button } from '@mui/material';
+import { useNavigate } from 'react-router-dom';
+
+function ReauthenticateButton() {
+  const navigate = useNavigate();
+
+  return (
+    <Button
+      variant="contained"
+      sx={{ mt: 4 }}
+      onClick={() => {
+        navigate('/');
+      }}
+      data-test="button-unlaunched-state">
+      Re-authenticate
+    </Button>
+  );
+}
+
+export default ReauthenticateButton;
diff --git a/apps/smart-forms-app/src/components/Button/UnlaunchedButton.tsx b/apps/smart-forms-app/src/components/Button/UnlaunchedButton.tsx
index 8768c139f..a465b21cd 100644
--- a/apps/smart-forms-app/src/components/Button/UnlaunchedButton.tsx
+++ b/apps/smart-forms-app/src/components/Button/UnlaunchedButton.tsx
@@ -8,7 +8,7 @@ function UnlaunchedButton() {
     <Button
       variant="contained"
       color="warning"
-      sx={{ mt: 6 }}
+      sx={{ mt: 4 }}
       onClick={() => {
         navigate('/dashboard/questionnaires');
       }}
diff --git a/apps/smart-forms-app/src/components/Header/GenericHeader.tsx b/apps/smart-forms-app/src/components/Header/GenericHeader.tsx
index e1a7ebfc5..747212b19 100644
--- a/apps/smart-forms-app/src/components/Header/GenericHeader.tsx
+++ b/apps/smart-forms-app/src/components/Header/GenericHeader.tsx
@@ -28,7 +28,7 @@ interface DashboardHeaderProps {
   onOpenNav: () => void;
 }
 
-const GenericHeader = memo(function DashboardHeader(props: DashboardHeaderProps) {
+const GenericHeader = memo(function GenericHeader(props: DashboardHeaderProps) {
   const { onOpenNav } = props;
 
   const isDesktop = useResponsive('up', 'lg');
diff --git a/apps/smart-forms-app/src/components/Header/HeaderIcons.tsx b/apps/smart-forms-app/src/components/Header/HeaderIcons.tsx
index 044369956..a3996c16a 100644
--- a/apps/smart-forms-app/src/components/Header/HeaderIcons.tsx
+++ b/apps/smart-forms-app/src/components/Header/HeaderIcons.tsx
@@ -21,13 +21,17 @@ import { Stack } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 import useResponsive from '../../hooks/useResponsive.ts';
 
-function HeaderIcons() {
+interface HeaderIconsProps {
+  isEmbeddedView?: boolean;
+}
+function HeaderIcons(props: HeaderIconsProps) {
+  const { isEmbeddedView } = props;
   const theme = useTheme();
   const isDesktop = useResponsive('up', 'lg');
 
   return (
     <Stack direction="row" alignItems="center" sx={{ color: theme.palette.grey['700'] }}>
-      {isDesktop ? <DesktopHeaderIcons /> : <MobileHeaderIcons />}
+      {isDesktop && !isEmbeddedView ? <DesktopHeaderIcons /> : <MobileHeaderIcons />}
     </Stack>
   );
 }
diff --git a/apps/smart-forms-app/src/components/Logos/Logo.tsx b/apps/smart-forms-app/src/components/Logos/Logo.tsx
index 36680a05b..827c93b90 100644
--- a/apps/smart-forms-app/src/components/Logos/Logo.tsx
+++ b/apps/smart-forms-app/src/components/Logos/Logo.tsx
@@ -22,17 +22,20 @@ import useResponsive from '../../hooks/useResponsive.ts';
 
 interface LogoProps {
   isNav?: boolean;
+  isEmbeddedView?: boolean;
 }
 
 const Logo = memo(function Logo(props: LogoProps) {
-  const { isNav } = props;
+  const { isNav, isEmbeddedView } = props;
 
   const isDesktop = useResponsive('up', 'lg');
 
   return (
     <Box display="flex" alignItems="center" columnGap={1.5}>
       <Box component="img" src={AppLogo} display="inline-flex" width={36} height={36} />
-      {isDesktop || isNav ? <Typography variant="h6">Smart Forms</Typography> : null}
+      {(isDesktop || isNav) && !isEmbeddedView ? (
+        <Typography variant="h6">Smart Forms</Typography>
+      ) : null}
     </Box>
   );
 });
diff --git a/apps/smart-forms-app/src/features/dashboard/components/DashboardPages/QuestionnairePage/Buttons/CreateNewResponseButton.tsx b/apps/smart-forms-app/src/features/dashboard/components/DashboardPages/QuestionnairePage/Buttons/CreateNewResponseButton.tsx
index 44fd5dedd..9b129e4c6 100644
--- a/apps/smart-forms-app/src/features/dashboard/components/DashboardPages/QuestionnairePage/Buttons/CreateNewResponseButton.tsx
+++ b/apps/smart-forms-app/src/features/dashboard/components/DashboardPages/QuestionnairePage/Buttons/CreateNewResponseButton.tsx
@@ -28,6 +28,7 @@ import EditNoteIcon from '@mui/icons-material/EditNote';
 
 function CreateNewResponseButton() {
   const smartClient = useConfigStore((state) => state.smartClient);
+  const setLaunchIntent = useConfigStore((state) => state.setLaunchIntent);
   const buildSourceQuestionnaire = useQuestionnaireStore((state) => state.buildSourceQuestionnaire);
   const buildSourceResponse = useQuestionnaireResponseStore((state) => state.buildSourceResponse);
 
@@ -57,6 +58,13 @@ function CreateNewResponseButton() {
     const questionnaireResponse = createQuestionnaireResponse(questionnaire);
     buildSourceResponse(questionnaireResponse);
 
+    // FIXME this is a hack to test tabs rendering in an embedded browser
+    if (questionnaire.id === 'TestIntentCollapsible') {
+      setLaunchIntent('embedded-browser');
+    } else {
+      setLaunchIntent(null);
+    }
+
     navigate('/renderer');
     setIsLoading(false);
   }
diff --git a/apps/smart-forms-app/src/features/notfound/NotFound.tsx b/apps/smart-forms-app/src/features/notfound/NotFound.tsx
new file mode 100644
index 000000000..23b3585d7
--- /dev/null
+++ b/apps/smart-forms-app/src/features/notfound/NotFound.tsx
@@ -0,0 +1,46 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import CenteredWrapper from '../../components/Wrapper/CenteredWrapper.tsx';
+import { Stack, Typography } from '@mui/material';
+import UnlaunchedButton from '../../components/Button/UnlaunchedButton.tsx';
+import useConfigStore from '../../stores/useConfigStore.ts';
+import ReauthenticateButton from '../../components/Button/ReauthenticateButton.tsx';
+
+function NotFound() {
+  const smartClient = useConfigStore((state) => state.smartClient);
+
+  const isNotLaunched = !smartClient;
+
+  const authSessionFound = isNotLaunched && sessionStorage.getItem('authorised') === 'true';
+
+  return (
+    <CenteredWrapper>
+      <Stack rowGap={2}>
+        <Typography variant="h3">Error 404</Typography>
+        <Typography fontSize={13}>
+          {authSessionFound
+            ? "We couldn't find the page you were looking for, but we detected a recent auth session. You would need to be re-authenticated. Do you want to try re-authenticating?"
+            : "We couldn't find the page you were looking for. Do you want to go back to the home page?"}
+        </Typography>
+      </Stack>
+      {authSessionFound ? <ReauthenticateButton /> : <UnlaunchedButton />}
+    </CenteredWrapper>
+  );
+}
+
+export default NotFound;
diff --git a/apps/smart-forms-app/src/features/playground/components/PlaygroundRenderer.tsx b/apps/smart-forms-app/src/features/playground/components/PlaygroundRenderer.tsx
index 031f55c58..56dd8de28 100644
--- a/apps/smart-forms-app/src/features/playground/components/PlaygroundRenderer.tsx
+++ b/apps/smart-forms-app/src/features/playground/components/PlaygroundRenderer.tsx
@@ -20,8 +20,6 @@ import { createQuestionnaireResponse } from '../../renderer/utils/qrItem.ts';
 import useQuestionnaireStore from '../../../stores/useQuestionnaireStore.ts';
 import useQuestionnaireResponseStore from '../../../stores/useQuestionnaireResponseStore.ts';
 
-// TODO this cant be used yet
-
 function PlaygroundRenderer() {
   const sourceQuestionnaire = useQuestionnaireStore((state) => state.sourceQuestionnaire);
 
diff --git a/apps/smart-forms-app/src/features/renderer/components/FormPage/Collapsible/FormBodySingleCollapsible.tsx b/apps/smart-forms-app/src/features/renderer/components/FormPage/Collapsible/FormBodySingleCollapsible.tsx
new file mode 100644
index 000000000..d9b5abc6d
--- /dev/null
+++ b/apps/smart-forms-app/src/features/renderer/components/FormPage/Collapsible/FormBodySingleCollapsible.tsx
@@ -0,0 +1,76 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { ReactNode } from 'react';
+import { memo } from 'react';
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Box,
+  Tooltip,
+  Typography
+} from '@mui/material';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { getContextDisplays } from '../../../utils/tabs.ts';
+import type { QuestionnaireItem } from 'fhir/r4';
+import { getShortText } from '../../../utils/itemControl.ts';
+import GroupHeadingIcon from '../QFormComponents/GroupItem/GroupHeadingIcon.tsx';
+
+interface FormBodySingleCollapsibleProps {
+  qItem: QuestionnaireItem;
+  index: number;
+  selectedIndex: number;
+  onToggleExpand: (index: number) => void;
+  children: ReactNode;
+}
+
+const FormBodySingleCollapsible = memo(function FormBodySingleCollapsible(
+  props: FormBodySingleCollapsibleProps
+) {
+  const { qItem, index, selectedIndex, onToggleExpand, children } = props;
+
+  const contextDisplayItems = getContextDisplays(qItem);
+
+  const collapsibleLabel = getShortText(qItem) ?? qItem.text ?? '';
+
+  return (
+    <Accordion
+      expanded={selectedIndex === index}
+      TransitionProps={{ unmountOnExit: true }}
+      onChange={() => onToggleExpand(index)}>
+      <AccordionSummary
+        expandIcon={
+          <Tooltip title={'Expand'}>
+            <ExpandMoreIcon />
+          </Tooltip>
+        }>
+        <Box display="flex" alignItems="center" justifyContent="space-between" width="100%" mr={3}>
+          <Typography variant="subtitle2">{collapsibleLabel}</Typography>
+          <Box display="flex" columnGap={0.5}>
+            {contextDisplayItems.map((item) => {
+              return <GroupHeadingIcon key={item.linkId} displayItem={item} />;
+            })}
+          </Box>
+        </Box>
+      </AccordionSummary>
+      <AccordionDetails>{children}</AccordionDetails>
+    </Accordion>
+  );
+});
+
+export default FormBodySingleCollapsible;
diff --git a/apps/smart-forms-app/src/features/renderer/components/FormPage/Collapsible/FormBodySingleCollapsibleWrapper.tsx b/apps/smart-forms-app/src/features/renderer/components/FormPage/Collapsible/FormBodySingleCollapsibleWrapper.tsx
new file mode 100644
index 000000000..54de1f892
--- /dev/null
+++ b/apps/smart-forms-app/src/features/renderer/components/FormPage/Collapsible/FormBodySingleCollapsibleWrapper.tsx
@@ -0,0 +1,59 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import GroupItem from '../QFormComponents/GroupItem/GroupItem.tsx';
+import FormBodySingleCollapsible from './FormBodySingleCollapsible.tsx';
+import type { PropsWithQrItemChangeHandler } from '../../../types/renderProps.interface.ts';
+import useHidden from '../../../hooks/useHidden.ts';
+
+interface FormBodySingleCollapsibleProps
+  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem> {
+  qItem: QuestionnaireItem;
+  qrItem: QuestionnaireResponseItem;
+  index: number;
+  selectedIndex: number;
+  onToggleExpand: (index: number) => void;
+}
+
+function FormBodySingleCollapsibleWrapper(props: FormBodySingleCollapsibleProps) {
+  const { qItem, qrItem, index, selectedIndex, onToggleExpand, onQrItemChange } = props;
+
+  const itemIsHidden = useHidden(qItem);
+  if (itemIsHidden) {
+    return null;
+  }
+
+  return (
+    <FormBodySingleCollapsible
+      key={qItem.linkId}
+      qItem={qItem}
+      index={index}
+      selectedIndex={selectedIndex}
+      onToggleExpand={onToggleExpand}>
+      <GroupItem
+        qItem={qItem}
+        qrItem={qrItem}
+        isRepeated={true}
+        groupCardElevation={1}
+        onQrItemChange={onQrItemChange}
+      />
+    </FormBodySingleCollapsible>
+  );
+}
+
+export default FormBodySingleCollapsibleWrapper;
diff --git a/apps/smart-forms-app/src/features/renderer/components/FormPage/FormBodyCollapsible.tsx b/apps/smart-forms-app/src/features/renderer/components/FormPage/FormBodyCollapsible.tsx
new file mode 100644
index 000000000..0ceb33180
--- /dev/null
+++ b/apps/smart-forms-app/src/features/renderer/components/FormPage/FormBodyCollapsible.tsx
@@ -0,0 +1,96 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useMemo } from 'react';
+import { Stack } from '@mui/material';
+import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import { getQrItemsIndex, mapQItemsIndex } from '../../utils';
+import { updateLinkedItem } from '../../utils/qrItem.ts';
+import type { PropsWithQrItemChangeHandler } from '../../types/renderProps.interface.ts';
+import useQuestionnaireStore from '../../../../stores/useQuestionnaireStore.ts';
+import FormBodySingleCollapsibleWrapper from './Collapsible/FormBodySingleCollapsibleWrapper.tsx';
+
+interface FormBodyCollapsibleProps extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem> {
+  topLevelQItem: QuestionnaireItem;
+  topLevelQRItem: QuestionnaireResponseItem;
+}
+
+function FormBodyCollapsibleWrapper(props: FormBodyCollapsibleProps) {
+  const { topLevelQItem, topLevelQRItem, onQrItemChange } = props;
+
+  const currentTab = useQuestionnaireStore((state) => state.currentTabIndex);
+  const tabs = useQuestionnaireStore((state) => state.tabs);
+
+  const switchTab = useQuestionnaireStore((state) => state.switchTab);
+
+  const indexMap: Record<string, number> = useMemo(
+    () => mapQItemsIndex(topLevelQItem),
+    [topLevelQItem]
+  );
+
+  const qItems = topLevelQItem.item;
+  const qrItems = topLevelQRItem.item;
+
+  function handleQrGroupChange(qrItem: QuestionnaireResponseItem) {
+    updateLinkedItem(qrItem, null, topLevelQRItem, indexMap);
+    onQrItemChange(topLevelQRItem);
+  }
+
+  if (!qItems || !qrItems) {
+    return <>Unable to load form</>;
+  }
+
+  function handleToggleExpand(index: number) {
+    switchTab(currentTab === index ? -1 : index);
+  }
+
+  if (!qItems || !qrItems) {
+    return <>Unable to load form</>;
+  }
+
+  const qrItemsByIndex = getQrItemsIndex(qItems, qrItems, indexMap);
+
+  return (
+    <Stack rowGap={1}>
+      {qItems.map((qItem, i) => {
+        const qrItem = qrItemsByIndex[i];
+
+        const isNotRepeatGroup = !Array.isArray(qrItem);
+        const isTab = !!tabs[qItem.linkId];
+
+        if (!isTab || !isNotRepeatGroup) {
+          // Something has gone horribly wrong
+          return null;
+        }
+
+        return (
+          <FormBodySingleCollapsibleWrapper
+            key={qItem.linkId}
+            qItem={qItem}
+            qrItem={qrItem}
+            index={i}
+            selectedIndex={currentTab}
+            onToggleExpand={handleToggleExpand}
+            onQrItemChange={handleQrGroupChange}
+          />
+        );
+      })}
+    </Stack>
+  );
+}
+
+export default FormBodyCollapsibleWrapper;
diff --git a/apps/smart-forms-app/src/features/renderer/components/FormPage/FormTopLevelItem.tsx b/apps/smart-forms-app/src/features/renderer/components/FormPage/FormTopLevelItem.tsx
index d110c7188..58757e3a6 100644
--- a/apps/smart-forms-app/src/features/renderer/components/FormPage/FormTopLevelItem.tsx
+++ b/apps/smart-forms-app/src/features/renderer/components/FormPage/FormTopLevelItem.tsx
@@ -21,6 +21,8 @@ import { containsTabs, isTabContainer } from '../../utils/tabs.ts';
 import GroupItem from './QFormComponents/GroupItem/GroupItem.tsx';
 import SingleItem from './QFormComponents/SingleItem/SingleItem.tsx';
 import type { PropsWithQrItemChangeHandler } from '../../types/renderProps.interface.ts';
+import useConfigStore from '../../../../stores/useConfigStore.ts';
+import FormBodyCollapsible from './FormBodyCollapsible.tsx';
 
 interface FormTopLevelItemProps extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem> {
   topLevelQItem: QuestionnaireItem;
@@ -30,6 +32,8 @@ interface FormTopLevelItemProps extends PropsWithQrItemChangeHandler<Questionnai
 function FormTopLevelItem(props: FormTopLevelItemProps) {
   const { topLevelQItem, topLevelQRItem, onQrItemChange } = props;
 
+  const launchIntent = useConfigStore((state) => state.launchIntent);
+
   const itemIsTabContainer = isTabContainer(topLevelQItem);
   const itemContainsTabs = containsTabs(topLevelQItem);
 
@@ -37,6 +41,17 @@ function FormTopLevelItem(props: FormTopLevelItemProps) {
 
   // If form is tabbed, it is rendered as a tabbed form
   if (itemContainsTabs || itemIsTabContainer) {
+    if (launchIntent === 'embedded-browser') {
+      return (
+        <FormBodyCollapsible
+          key={topLevelQItem.linkId}
+          topLevelQItem={topLevelQItem}
+          topLevelQRItem={topLevelQRItem}
+          onQrItemChange={onQrItemChange}
+        />
+      );
+    }
+
     return (
       <FormBodyTabbed
         key={topLevelQItem.linkId}
diff --git a/apps/smart-forms-app/src/features/renderer/components/RendererEmbeddedSpeedDial.tsx b/apps/smart-forms-app/src/features/renderer/components/RendererEmbeddedSpeedDial.tsx
new file mode 100644
index 000000000..1739a4020
--- /dev/null
+++ b/apps/smart-forms-app/src/features/renderer/components/RendererEmbeddedSpeedDial.tsx
@@ -0,0 +1,172 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { SpeedDial, SpeedDialAction } from '@mui/material';
+import BuildIcon from '@mui/icons-material/Build';
+import GradingIcon from '@mui/icons-material/Grading';
+import { useNavigate } from 'react-router-dom';
+import { useSnackbar } from 'notistack';
+import EditIcon from '@mui/icons-material/Edit';
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import useConfigStore from '../../../stores/useConfigStore.ts';
+import useQuestionnaireStore from '../../../stores/useQuestionnaireStore.ts';
+import cloneDeep from 'lodash.clonedeep';
+import { removeHiddenAnswers, saveQuestionnaireResponse } from '../../save/api/saveQr.ts';
+import useQuestionnaireResponseStore from '../../../stores/useQuestionnaireResponseStore.ts';
+import SaveIcon from '@mui/icons-material/Save';
+import TaskAltIcon from '@mui/icons-material/TaskAlt';
+import { useState } from 'react';
+import RendererSaveAsFinalDialog from './RendererNav/SaveAsFinal/RendererSaveAsFinalDialog.tsx';
+import HomeIcon from '@mui/icons-material/Home';
+
+interface RendererEmbeddedSpeedDialProps {
+  isPopulating: boolean;
+}
+function RendererEmbeddedSpeedDial(props: RendererEmbeddedSpeedDialProps) {
+  const { isPopulating } = props;
+
+  const smartClient = useConfigStore((state) => state.smartClient);
+  const patient = useConfigStore((state) => state.patient);
+  const user = useConfigStore((state) => state.user);
+
+  const sourceQuestionnaire = useQuestionnaireStore((state) => state.sourceQuestionnaire);
+  const enableWhenIsActivated = useQuestionnaireStore((state) => state.enableWhenIsActivated);
+  const enableWhenItems = useQuestionnaireStore((state) => state.enableWhenItems);
+  const enableWhenExpressions = useQuestionnaireStore((state) => state.enableWhenExpressions);
+
+  const updatableResponse = useQuestionnaireResponseStore((state) => state.updatableResponse);
+  const saveResponse = useQuestionnaireResponseStore((state) => state.saveResponse);
+
+  const [saveAsFinalDialogOpen, setSaveAsFinalDialogOpen] = useState(false);
+
+  const { enqueueSnackbar } = useSnackbar();
+
+  const navigate = useNavigate();
+  const { closeSnackbar } = useSnackbar();
+
+  function handleViewResponses() {
+    closeSnackbar();
+    navigate('/dashboard/responses');
+  }
+
+  function handlePreview() {
+    if (location.pathname === '/renderer/preview') {
+      navigate('/renderer');
+    } else {
+      navigate('/renderer/preview');
+    }
+  }
+
+  function handleSaveAsDraft() {
+    if (!(smartClient && patient && user)) {
+      return;
+    }
+
+    let responseToSave = cloneDeep(updatableResponse);
+    responseToSave = removeHiddenAnswers({
+      questionnaire: sourceQuestionnaire,
+      questionnaireResponse: responseToSave,
+      enableWhenIsActivated,
+      enableWhenItems,
+      enableWhenExpressions
+    });
+
+    responseToSave.status = 'in-progress';
+    saveQuestionnaireResponse(smartClient, patient, user, sourceQuestionnaire, responseToSave)
+      .then((savedResponse) => {
+        saveResponse(savedResponse);
+        enqueueSnackbar('Response saved as draft', { variant: 'success' });
+      })
+      .catch((error) => {
+        console.error(error);
+        enqueueSnackbar('An error occurred while saving. Try again later.', {
+          variant: 'error'
+        });
+      });
+  }
+
+  function handleSaveAsFinal() {
+    if (smartClient) {
+      setSaveAsFinalDialogOpen(true);
+    }
+  }
+
+  const showSaveButtons = smartClient && sourceQuestionnaire.item;
+
+  if (isPopulating) {
+    return null;
+  }
+
+  return (
+    <>
+      <SpeedDial
+        ariaLabel="Form operations"
+        sx={{
+          position: 'fixed',
+          bottom: 12,
+          right: 8,
+          '& .MuiFab-primary': { width: 46, height: 46 }
+        }}
+        icon={<BuildIcon />}>
+        <SpeedDialAction
+          icon={<HomeIcon />}
+          tooltipTitle="Back to Home (Debug)"
+          tooltipOpen
+          onClick={() => {
+            navigate('/dashboard/questionnaires');
+          }}
+        />
+        <SpeedDialAction
+          icon={<GradingIcon />}
+          tooltipTitle="View Responses"
+          tooltipOpen
+          onClick={handleViewResponses}
+        />
+        <SpeedDialAction
+          icon={location.pathname === '/renderer/preview' ? <EditIcon /> : <VisibilityIcon />}
+          tooltipTitle={location.pathname === '/renderer/preview' ? 'Editor' : 'Preview'}
+          tooltipOpen
+          onClick={handlePreview}
+        />
+
+        {showSaveButtons && (
+          <SpeedDialAction
+            icon={<SaveIcon />}
+            tooltipTitle={'Save as Draft'}
+            tooltipOpen
+            onClick={handleSaveAsDraft}
+          />
+        )}
+
+        {showSaveButtons && (
+          <SpeedDialAction
+            icon={<TaskAltIcon />}
+            tooltipTitle={'Save as Final'}
+            tooltipOpen
+            onClick={handleSaveAsFinal}
+          />
+        )}
+      </SpeedDial>
+      <RendererSaveAsFinalDialog
+        open={saveAsFinalDialogOpen}
+        closeDialog={() => setSaveAsFinalDialogOpen(false)}
+      />
+    </>
+  );
+}
+
+export default RendererEmbeddedSpeedDial;
diff --git a/apps/smart-forms-app/src/features/renderer/components/RendererHeader/RendererHeader.tsx b/apps/smart-forms-app/src/features/renderer/components/RendererHeader/RendererHeader.tsx
index 198e41259..1f315de3c 100644
--- a/apps/smart-forms-app/src/features/renderer/components/RendererHeader/RendererHeader.tsx
+++ b/apps/smart-forms-app/src/features/renderer/components/RendererHeader/RendererHeader.tsx
@@ -29,35 +29,40 @@ import HeaderIcons from '../../../../components/Header/HeaderIcons.tsx';
 
 interface RendererHeaderProps {
   navIsCollapsed: boolean;
+  isEmbeddedView: boolean;
   onOpenNav: () => void;
 }
 
 const RendererHeader = memo(function RendererHeader(props: RendererHeaderProps) {
-  const { navIsCollapsed, onOpenNav } = props;
+  const { navIsCollapsed, isEmbeddedView, onOpenNav } = props;
 
   const sourceQuestionnaire = useQuestionnaireStore((state) => state.sourceQuestionnaire);
 
   const theme = useTheme();
   const isDesktop = useResponsive('up', 'lg');
 
-  const navIsExpanded = !navIsCollapsed;
+  const navIsExpanded = !navIsCollapsed && !isEmbeddedView;
 
   return (
-    <StyledRoot sx={{ boxShadow: theme.customShadows.z4 }} navCollapsed={navIsCollapsed}>
+    <StyledRoot
+      sx={{ boxShadow: theme.customShadows.z4 }}
+      navCollapsed={navIsCollapsed || isEmbeddedView}>
       <StyledToolbar>
-        <IconButton
-          onClick={onOpenNav}
-          sx={{
-            color: 'text.primary',
-            ...(navIsExpanded && { display: { lg: 'none' } })
-          }}
-          data-test="button-expand-nav">
-          <Iconify icon="eva:menu-2-fill" />
-        </IconButton>
+        {isEmbeddedView ? null : (
+          <IconButton
+            onClick={onOpenNav}
+            sx={{
+              color: 'text.primary',
+              ...(navIsExpanded && { display: { lg: 'none' } })
+            }}
+            data-test="button-expand-nav">
+            <Iconify icon="eva:menu-2-fill" />
+          </IconButton>
+        )}
 
         {isDesktop && navIsExpanded ? null : (
           <LogoWrapper>
-            <Logo />
+            <Logo isEmbeddedView={isEmbeddedView} />
           </LogoWrapper>
         )}
 
@@ -70,7 +75,7 @@ const RendererHeader = memo(function RendererHeader(props: RendererHeaderProps)
 
         <UpdatingIndicator />
 
-        <HeaderIcons />
+        <HeaderIcons isEmbeddedView={isEmbeddedView} />
       </StyledToolbar>
     </StyledRoot>
   );
diff --git a/apps/smart-forms-app/src/features/renderer/components/RendererLayout.tsx b/apps/smart-forms-app/src/features/renderer/components/RendererLayout.tsx
index 7df4eed87..9289e188d 100644
--- a/apps/smart-forms-app/src/features/renderer/components/RendererLayout.tsx
+++ b/apps/smart-forms-app/src/features/renderer/components/RendererLayout.tsx
@@ -17,7 +17,7 @@
 
 import { useState } from 'react';
 import RendererHeader from './RendererHeader/RendererHeader.tsx';
-import RendererNav from './RendererNav/RendererNav.tsx';
+import RendererNavWrapper from './RendererNav/RendererNavWrapper.tsx';
 import { StyledRoot } from '../../../components/Layout/Layout.styles.ts';
 import { Main } from './RendererLayout.styles.ts';
 import { populateQuestionnaire } from '../../prepopulate/utils/populate.ts';
@@ -37,6 +37,7 @@ import useConfigStore from '../../../stores/useConfigStore.ts';
 import useQuestionnaireResponseStore from '../../../stores/useQuestionnaireResponseStore.ts';
 import useQuestionnaireStore from '../../../stores/useQuestionnaireStore.ts';
 import _isEqual from 'lodash/isEqual';
+import RendererEmbeddedSpeedDial from './RendererEmbeddedSpeedDial.tsx';
 
 function RendererLayout() {
   const sourceQuestionnaire = useQuestionnaireStore((state) => state.sourceQuestionnaire);
@@ -53,6 +54,7 @@ function RendererLayout() {
   const patient = useConfigStore((state) => state.patient);
   const user = useConfigStore((state) => state.user);
   const encounter = useConfigStore((state) => state.encounter);
+  const launchIntent = useConfigStore((state) => state.launchIntent);
 
   const [open, setOpen] = useState(false);
   const [navIsCollapsed, collapseNav] = useState(false);
@@ -128,15 +130,22 @@ function RendererLayout() {
       setSpinner({ ...spinner, isLoading: false });
     }
   }
+  const isEmbeddedView = launchIntent === 'embedded-browser';
 
   return (
     <StyledRoot>
-      <RendererHeader onOpenNav={() => setOpen(true)} navIsCollapsed={navIsCollapsed} />
-      <RendererNav
+      <RendererHeader
+        onOpenNav={() => setOpen(true)}
+        navIsCollapsed={navIsCollapsed}
+        isEmbeddedView={isEmbeddedView}
+      />
+
+      <RendererNavWrapper
         openNav={open}
         onCloseNav={() => setOpen(false)}
         navCollapsed={navIsCollapsed}
         setNavCollapsed={() => collapseNav(true)}
+        isEmbeddedView={isEmbeddedView}
       />
 
       <Main>
@@ -154,11 +163,15 @@ function RendererLayout() {
 
       <NavExpandButton navCollapsed={navIsCollapsed} expandNav={() => collapseNav(false)} />
 
-      <BackToTopButton>
-        <Fab size="medium" sx={{ backgroundColor: 'pale.primary' }}>
-          <KeyboardArrowUpIcon />
-        </Fab>
-      </BackToTopButton>
+      {isEmbeddedView ? (
+        <RendererEmbeddedSpeedDial isPopulating={spinner.isLoading} />
+      ) : (
+        <BackToTopButton>
+          <Fab size="medium" sx={{ backgroundColor: 'pale.primary' }}>
+            <KeyboardArrowUpIcon />
+          </Fab>
+        </BackToTopButton>
+      )}
     </StyledRoot>
   );
 }
diff --git a/apps/smart-forms-app/src/features/renderer/components/RendererNav/RendererNav.tsx b/apps/smart-forms-app/src/features/renderer/components/RendererNav/RendererNav.tsx
index d1279cc51..bef8da833 100644
--- a/apps/smart-forms-app/src/features/renderer/components/RendererNav/RendererNav.tsx
+++ b/apps/smart-forms-app/src/features/renderer/components/RendererNav/RendererNav.tsx
@@ -15,38 +15,28 @@
  * limitations under the License.
  */
 
-import { Box, Drawer, Grid, IconButton, Tooltip } from '@mui/material';
-import useResponsive from '../../../../hooks/useResponsive.ts';
+import { NavLogoWrapper } from '../../../../components/Logos/Logo.styles.ts';
 import Logo from '../../../../components/Logos/Logo.tsx';
-import Scrollbar from '../../../../components/Scrollbar/Scrollbar.tsx';
 import NavPatientDetails from '../../../../components/Nav/NavPatientDetails.tsx';
 import RendererNavSection from './RendererNavSection.tsx';
 import RendererOperationSection from './RendererOperationSection.tsx';
+import { Box, Grid, IconButton, Tooltip } from '@mui/material';
+import { NavErrorAlertWrapper } from '../../../../components/Nav/Nav.styles.ts';
 import NavErrorAlert from '../../../../components/Nav/NavErrorAlert.tsx';
-import KeyboardDoubleArrowLeftIcon from '@mui/icons-material/KeyboardDoubleArrowLeft';
 import CsiroLogo from '../../../../components/Logos/CsiroLogo.tsx';
-import { NavLogoWrapper } from '../../../../components/Logos/Logo.styles.ts';
-import { NavErrorAlertWrapper } from '../../../../components/Nav/Nav.styles.ts';
-import useConfigStore from '../../../../stores/useConfigStore.ts';
-import { NAV_WIDTH } from '../../../../components/Header/Header.styles.ts';
+import KeyboardDoubleArrowLeftIcon from '@mui/icons-material/KeyboardDoubleArrowLeft';
+import Scrollbar from '../../../../components/Scrollbar/Scrollbar.tsx';
 
-interface Props {
-  openNav: boolean;
-  navCollapsed: boolean;
-  onCloseNav: () => void;
-  setNavCollapsed: () => void;
+interface RendererNavProps {
+  isNotLaunched: boolean;
+  navIsShown: boolean;
+  onCollapseNav: () => void;
 }
 
-function RendererNav(props: Props) {
-  const { openNav, onCloseNav, navCollapsed, setNavCollapsed } = props;
+function RendererNav(props: RendererNavProps) {
+  const { isNotLaunched, navIsShown, onCollapseNav } = props;
 
-  const smartClient = useConfigStore((state) => state.smartClient);
-
-  const isDesktop = useResponsive('up', 'lg');
-
-  const isNotLaunched = !smartClient;
-
-  const renderContent = (
+  return (
     <Scrollbar
       sx={{
         height: 1,
@@ -76,60 +66,22 @@ function RendererNav(props: Props) {
             <CsiroLogo />
           </Grid>
           <Grid item xs={4}>
-            {navCollapsed || !isDesktop ? null : (
+            {navIsShown ? (
               <Box display="flex" justifyContent="end" alignItems="center">
                 <Tooltip title="Collapse Sidebar" placement="right">
                   <span>
-                    <IconButton onClick={setNavCollapsed}>
+                    <IconButton onClick={onCollapseNav}>
                       <KeyboardDoubleArrowLeftIcon fontSize="small" />
                     </IconButton>
                   </span>
                 </Tooltip>
               </Box>
-            )}
+            ) : null}
           </Grid>
         </Grid>
       </Box>
     </Scrollbar>
   );
-
-  return (
-    <>
-      <Box
-        component="nav"
-        sx={{
-          flexShrink: { lg: 0 },
-          width: { lg: navCollapsed ? 0 : NAV_WIDTH }
-        }}>
-        {isDesktop && !navCollapsed ? (
-          <Drawer
-            open
-            variant="permanent"
-            PaperProps={{
-              sx: {
-                width: NAV_WIDTH,
-                bgcolor: 'background.default',
-                borderRightStyle: 'dashed'
-              }
-            }}>
-            {renderContent}
-          </Drawer>
-        ) : (
-          <Drawer
-            open={openNav}
-            onClose={onCloseNav}
-            ModalProps={{
-              keepMounted: true
-            }}
-            PaperProps={{
-              sx: { width: NAV_WIDTH }
-            }}>
-            {renderContent}
-          </Drawer>
-        )}
-      </Box>
-    </>
-  );
 }
 
 export default RendererNav;
diff --git a/apps/smart-forms-app/src/features/renderer/components/RendererNav/RendererNavDrawer.tsx b/apps/smart-forms-app/src/features/renderer/components/RendererNav/RendererNavDrawer.tsx
new file mode 100644
index 000000000..2c220307e
--- /dev/null
+++ b/apps/smart-forms-app/src/features/renderer/components/RendererNav/RendererNavDrawer.tsx
@@ -0,0 +1,78 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Drawer } from '@mui/material';
+import useConfigStore from '../../../../stores/useConfigStore.ts';
+import { NAV_WIDTH } from '../../../../components/Header/Header.styles.ts';
+import RendererNav from './RendererNav.tsx';
+
+interface RendererNavShownProps {
+  openNav: boolean;
+  navCollapsed: boolean;
+  navIsShown: boolean;
+  onCloseNav: () => void;
+  setNavCollapsed: () => void;
+}
+
+function RendererNavDrawer(props: RendererNavShownProps) {
+  const { openNav, navIsShown, onCloseNav, setNavCollapsed } = props;
+
+  const smartClient = useConfigStore((state) => state.smartClient);
+
+  const isNotLaunched = !smartClient;
+
+  if (navIsShown) {
+    return (
+      <Drawer
+        open
+        variant="permanent"
+        PaperProps={{
+          sx: {
+            width: NAV_WIDTH,
+            bgcolor: 'background.default',
+            borderRightStyle: 'dashed'
+          }
+        }}>
+        <RendererNav
+          isNotLaunched={isNotLaunched}
+          navIsShown={navIsShown}
+          onCollapseNav={setNavCollapsed}
+        />
+      </Drawer>
+    );
+  }
+
+  return (
+    <Drawer
+      open={openNav}
+      onClose={onCloseNav}
+      ModalProps={{
+        keepMounted: true
+      }}
+      PaperProps={{
+        sx: { width: NAV_WIDTH }
+      }}>
+      <RendererNav
+        isNotLaunched={isNotLaunched}
+        navIsShown={navIsShown}
+        onCollapseNav={setNavCollapsed}
+      />
+    </Drawer>
+  );
+}
+
+export default RendererNavDrawer;
diff --git a/apps/smart-forms-app/src/features/renderer/components/RendererNav/RendererNavWrapper.tsx b/apps/smart-forms-app/src/features/renderer/components/RendererNav/RendererNavWrapper.tsx
new file mode 100644
index 000000000..63d13e28a
--- /dev/null
+++ b/apps/smart-forms-app/src/features/renderer/components/RendererNav/RendererNavWrapper.tsx
@@ -0,0 +1,58 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Box } from '@mui/material';
+import useResponsive from '../../../../hooks/useResponsive.ts';
+import { NAV_WIDTH } from '../../../../components/Header/Header.styles.ts';
+import RendererNavDrawer from './RendererNavDrawer.tsx';
+
+interface Props {
+  openNav: boolean;
+  navCollapsed: boolean;
+  isEmbeddedView: boolean;
+  onCloseNav: () => void;
+  setNavCollapsed: () => void;
+}
+
+function RendererNavWrapper(props: Props) {
+  const { openNav, navCollapsed, isEmbeddedView, onCloseNav, setNavCollapsed } = props;
+
+  const isDesktop = useResponsive('up', 'lg');
+
+  const navIsShown = isDesktop && !navCollapsed && !isEmbeddedView;
+
+  return (
+    <>
+      <Box
+        component="nav"
+        sx={{
+          flexShrink: { lg: 0 },
+          width: { lg: navCollapsed || isEmbeddedView ? 0 : NAV_WIDTH }
+        }}>
+        <RendererNavDrawer
+          openNav={openNav}
+          navCollapsed={navCollapsed}
+          navIsShown={navIsShown}
+          onCloseNav={onCloseNav}
+          setNavCollapsed={setNavCollapsed}
+        />
+      </Box>
+    </>
+  );
+}
+
+export default RendererNavWrapper;
diff --git a/apps/smart-forms-app/src/router/Router.tsx b/apps/smart-forms-app/src/router/Router.tsx
index 37f1b251b..908237360 100644
--- a/apps/smart-forms-app/src/router/Router.tsx
+++ b/apps/smart-forms-app/src/router/Router.tsx
@@ -28,6 +28,7 @@ import Authorisation from '../features/smartAppLaunch/components/Authorisation.t
 import PlaygroundLayout from '../features/playground/components/PlaygroundLayout.tsx';
 import Playground from '../features/playground/components/Playground.tsx';
 import ResponsesPage from '../features/dashboard/components/DashboardPages/ResponsesPage/ResponsesPage.tsx';
+import NotFound from '../features/notfound/NotFound.tsx';
 
 export default function Router() {
   const router = createBrowserRouter([
@@ -69,9 +70,13 @@ export default function Router() {
       path: '/launch.html',
       element: <Launch />
     },
+    {
+      path: '/notfound',
+      element: <NotFound />
+    },
     {
       path: '*',
-      element: <Navigate to="/" replace />
+      element: <Navigate to="/notfound" replace />
     }
   ]);
 
diff --git a/apps/smart-forms-app/src/stores/useConfigStore.ts b/apps/smart-forms-app/src/stores/useConfigStore.ts
index a7837b12f..c50c7e00e 100644
--- a/apps/smart-forms-app/src/stores/useConfigStore.ts
+++ b/apps/smart-forms-app/src/stores/useConfigStore.ts
@@ -7,11 +7,13 @@ export interface ConfigState {
   patient: Patient | null;
   user: Practitioner | null;
   encounter: Encounter | null;
+  launchIntent: string | null;
   debugMode: boolean;
   setSmartClient: (client: Client) => void;
   setPatient: (patient: Patient) => void;
   setUser: (user: Practitioner) => void;
   setEncounter: (encounter: Encounter) => void;
+  setLaunchIntent: (launchIntent: string | null) => void;
   activateDebugMode: () => void;
 }
 
@@ -20,11 +22,13 @@ const useConfigStore = create<ConfigState>()((set) => ({
   patient: null,
   user: null,
   encounter: null,
+  launchIntent: null,
   debugMode: false,
   setSmartClient: (client: Client) => set(() => ({ smartClient: client })),
   setPatient: (patient: Patient) => set(() => ({ patient: patient })),
   setUser: (user: Practitioner) => set(() => ({ user: user })),
   setEncounter: (encounter: Encounter) => set(() => ({ encounter: encounter })),
+  setLaunchIntent: (launchIntent: string | null) => set(() => ({ launchIntent: launchIntent })),
   activateDebugMode: () => set(() => ({ debugMode: true }))
 }));
 
diff --git a/apps/smart-forms-app/src/theme/overrides/Accordion.ts b/apps/smart-forms-app/src/theme/overrides/Accordion.ts
new file mode 100644
index 000000000..d040d4907
--- /dev/null
+++ b/apps/smart-forms-app/src/theme/overrides/Accordion.ts
@@ -0,0 +1,34 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { Theme } from '@mui/material';
+
+export default function Accordion(theme: Theme) {
+  return {
+    MuiAccordion: {
+      styleOverrides: {
+        root: {
+          boxShadow: theme.customShadows.z1,
+          borderRadius: Number(theme.shape.borderRadius) * 2,
+          '&:before': {
+            display: 'none'
+          }
+        }
+      }
+    }
+  };
+}
diff --git a/apps/smart-forms-app/src/theme/overrides/Overrides.ts b/apps/smart-forms-app/src/theme/overrides/Overrides.ts
index b480513ae..82954a7d8 100644
--- a/apps/smart-forms-app/src/theme/overrides/Overrides.ts
+++ b/apps/smart-forms-app/src/theme/overrides/Overrides.ts
@@ -23,10 +23,13 @@ import Button from './Button';
 import Backdrop from './Backdrop';
 import Typography from './Typography';
 import Autocomplete from './Autocomplete';
+import Accordion from './Accordion';
 import type { Theme } from '@mui/material';
+import SpeedDial from './SpeedDial.ts';
 
 function ComponentsOverrides(theme: Theme) {
   return Object.assign(
+    Accordion(theme),
     Card(theme),
     Table(theme),
     Input(theme),
@@ -34,7 +37,8 @@ function ComponentsOverrides(theme: Theme) {
     Button(theme),
     Backdrop(theme),
     Typography(theme),
-    Autocomplete(theme)
+    Autocomplete(theme),
+    SpeedDial(theme)
   );
 }
 
diff --git a/apps/smart-forms-app/src/theme/overrides/SpeedDial.ts b/apps/smart-forms-app/src/theme/overrides/SpeedDial.ts
new file mode 100644
index 000000000..1b568b53d
--- /dev/null
+++ b/apps/smart-forms-app/src/theme/overrides/SpeedDial.ts
@@ -0,0 +1,36 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { Theme } from '@mui/material';
+
+export default function SpeedDial(theme: Theme) {
+  return {
+    MuiSpeedDialAction: {
+      styleOverrides: {
+        staticTooltipLabel: {
+          backgroundColor: theme.palette.grey[600],
+          color: theme.palette.common.white,
+          fontSize: theme.typography.subtitle2.fontSize,
+          fontWeight: theme.typography.subtitle2.fontWeight,
+          boxShadow: theme.customShadows.z8,
+          maxWidth: 150,
+          whiteSpace: 'nowrap'
+        }
+      }
+    }
+  };
+}