diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/StartPageView.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/StartPageView.tsx
index 9ac80b02b7..fd78b382af 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/StartPageView.tsx
+++ b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/StartPageView.tsx
@@ -1,6 +1,7 @@
-import { useMemo } from 'react'
+import { useMemo, useState } from 'react'
+import { Flex, Skeleton } from '@chakra-ui/react'
 
-import { FormAuthType, FormLogoState } from '~shared/types'
+import { FormAuthType, FormLogoState, FormStartPage } from '~shared/types'
 
 import { useEnv } from '~features/env/queries'
 import { FormBannerLogo } from '~features/public-form/components/FormStartPage/FormBannerLogo'
@@ -9,34 +10,87 @@ import { useFormBannerLogo } from '~features/public-form/components/FormStartPag
 import { useFormHeader } from '~features/public-form/components/FormStartPage/useFormHeader'
 
 import { useCreateTabForm } from '../useCreateTabForm'
-import { startPageDataSelector, useDesignStore } from '../useDesignStore'
+import {
+  customLogoMetaSelector,
+  startPageDataSelector,
+  useDesignStore,
+} from '../useDesignStore'
 
 export const StartPageView = () => {
   const { data: form } = useCreateTabForm()
-  const startPageFromStore = useDesignStore(startPageDataSelector)
+  const { startPageData, customLogoMeta } = useDesignStore((state) => ({
+    startPageData: startPageDataSelector(state),
+    customLogoMeta: customLogoMetaSelector(state),
+  }))
   const { data: { logoBucketUrl } = {} } = useEnv(
     form?.startPage.logo.state === FormLogoState.Custom,
   )
 
+  const [customLogoPending, setCustomLogoPending] = useState<boolean>(false)
+
+  // Transform the FormStartPageInput into a FormStartPage
+  const startPageFromStore: FormStartPage | null = useMemo(() => {
+    if (!startPageData) return null
+    const { logo, estTimeTaken, ...rest } = startPageData
+    const estTimeTakenTransformed =
+      estTimeTaken === '' ? undefined : estTimeTaken
+    if (logo.state !== FormLogoState.Custom) {
+      setCustomLogoPending(false)
+      return {
+        logo: { state: logo.state },
+        estTimeTaken: estTimeTakenTransformed,
+        ...rest,
+      }
+    }
+    setCustomLogoPending(!startPageData?.attachment.srcUrl)
+    return {
+      logo: {
+        state: FormLogoState.Custom,
+        // Placeholder values
+        fileId: customLogoMeta?.fileId ?? '',
+        fileName: customLogoMeta?.fileName ?? '',
+        fileSizeInBytes: customLogoMeta?.fileSizeInBytes ?? 0,
+      },
+      estTimeTaken: estTimeTakenTransformed,
+      ...rest,
+    }
+  }, [startPageData, customLogoMeta])
+
   // When drawer is opened, store is populated. We always want the drawer settings
   // to be previewed, so when the store is populated, prioritize that setting.
-  const startPage = useMemo(
-    () => (startPageFromStore ? startPageFromStore : form?.startPage),
-    [startPageFromStore, form?.startPage],
-  )
+  const startPage = useMemo(() => {
+    if (startPageFromStore) return startPageFromStore
+    setCustomLogoPending(false)
+    return form?.startPage
+  }, [form?.startPage, startPageFromStore])
 
   // Color theme options and other design stuff, identical to public form
   const { titleColor, titleBg, estTimeString } = useFormHeader(startPage)
 
-  const formBannerLogoProps = useFormBannerLogo({
-    logoBucketUrl, // This will be conditional once the logo field is added.
+  const { hasLogo, logoImgSrc, logoImgAlt } = useFormBannerLogo({
+    logoBucketUrl,
     logo: startPage?.logo,
     agency: form?.admin.agency,
   })
 
   return (
     <>
-      <FormBannerLogo {...formBannerLogoProps} />
+      {customLogoPending ? (
+        // Show skeleton if user has chosen custom logo but not yet uploaded
+        <Flex justify="center" p="1rem" bg="white">
+          <Skeleton w="4rem" h="4rem" />
+        </Flex>
+      ) : (
+        <FormBannerLogo
+          hasLogo={hasLogo}
+          logoImgSrc={
+            startPageData?.logo.state === FormLogoState.Custom
+              ? startPageData.attachment.srcUrl // manual override to preview custom logo
+              : logoImgSrc
+          }
+          logoImgAlt={logoImgAlt}
+        />
+      )}
       <FormHeader
         title={form?.title}
         estTimeString={estTimeString}
diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/DesignDrawer/DesignDrawer.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/DesignDrawer/DesignDrawer.tsx
index ea5a9782a9..dff7ee7223 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/DesignDrawer/DesignDrawer.tsx
+++ b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/DesignDrawer/DesignDrawer.tsx
@@ -1,101 +1,219 @@
-import { useCallback, useEffect, useMemo } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import {
   Controller,
   UnpackNestedValue,
   useForm,
   useWatch,
 } from 'react-hook-form'
+import { useMutation } from 'react-query'
+import { useParams } from 'react-router-dom'
 import { useDebounce } from 'react-use'
 import {
   Box,
-  Button,
   Divider,
   Flex,
   FormControl,
   FormLabel,
+  Skeleton,
   Stack,
   Tabs,
   Text,
   Textarea,
 } from '@chakra-ui/react'
-import { cloneDeep } from 'lodash'
+import { cloneDeep, get, isEmpty } from 'lodash'
 
-import { FormStartPage } from '~shared/types'
+import { CustomFormLogo, FormColorTheme, FormLogoState } from '~shared/types'
 
-import { useIsMobile } from '~hooks/useIsMobile'
+import { useToast } from '~hooks/useToast'
+import { uploadLogo } from '~services/FileHandlerService'
 import FormErrorMessage from '~components/FormControl/FormErrorMessage'
 import NumberInput from '~components/NumberInput'
+import Radio from '~components/Radio'
 
 import { useMutateFormPage } from '~features/admin-form/common/mutations'
+import { useCreatePageSidebar } from '~features/admin-form/create/common/CreatePageSidebarContext'
+import { useEnv } from '~features/env/queries'
+import { getTitleBg } from '~features/public-form/components/FormStartPage/useFormHeader'
 
-import {
-  setToInactiveSelector,
-  useBuilderAndDesignStore,
-} from '../../useBuilderAndDesignStore'
 import { useCreateTabForm } from '../../useCreateTabForm'
 import {
-  resetStartPageDataSelector,
+  CustomLogoMeta,
+  customLogoMetaSelector,
+  FormStartPageInput,
+  resetDesignStoreSelector,
+  setAttachmentSelector,
+  setCustomLogoMetaSelector,
   setStartPageDataSelector,
+  startPageDataSelector,
   useDesignStore,
 } from '../../useDesignStore'
 import { validateNumberInput } from '../../utils/validateNumberInput'
 import { CreatePageDrawerCloseButton } from '../CreatePageDrawerCloseButton'
 import { DrawerContentContainer } from '../EditFieldDrawer/edit-fieldtype/common/DrawerContentContainer'
+import { FormFieldDrawerActions } from '../EditFieldDrawer/edit-fieldtype/common/FormFieldDrawerActions'
+import {
+  UploadedImage,
+  UploadImageInput,
+} from '../EditFieldDrawer/edit-fieldtype/EditImage/UploadImageInput'
 
 export const DesignDrawer = (): JSX.Element | null => {
+  const toast = useToast({ status: 'danger' })
   const { data: form } = useCreateTabForm()
+  const { formId } = useParams()
+  if (!formId) throw new Error('No formId provided')
 
-  const isMobile = useIsMobile()
   const { startPageMutation } = useMutateFormPage()
+  const { data: { logoBucketUrl } = {} } = useEnv()
+  const { handleClose } = useCreatePageSidebar()
 
-  const closeBuilderDrawer = useBuilderAndDesignStore(setToInactiveSelector)
-  const { setDesignState, resetDesignState } = useDesignStore((state) => ({
-    setDesignState: setStartPageDataSelector(state),
-    resetDesignState: resetStartPageDataSelector(state),
-  }))
+  const [existingCustomLogoFetched, setExistingCustomLogoFetched] =
+    useState<boolean>(form?.startPage.logo.state !== FormLogoState.Custom)
 
-  // Load the start page into the store when use opens the drawer
-  useEffect(() => {
-    if (form) setDesignState(form.startPage)
-    return () => resetDesignState()
-  }, [form, setDesignState, resetDesignState])
+  const isLoading = useMemo(
+    () => startPageMutation.isLoading || !existingCustomLogoFetched,
+    [startPageMutation.isLoading, existingCustomLogoFetched],
+  )
+
+  const {
+    startPageData,
+    customLogoMeta,
+    setStartPageData,
+    setAttachment,
+    setCustomLogoMeta,
+    resetDesignStore,
+  } = useDesignStore((state) => ({
+    startPageData: startPageDataSelector(state),
+    customLogoMeta: customLogoMetaSelector(state),
+    setStartPageData: setStartPageDataSelector(state),
+    setAttachment: setAttachmentSelector(state),
+    setCustomLogoMeta: setCustomLogoMetaSelector(state),
+    resetDesignStore: resetDesignStoreSelector(state),
+  }))
 
   const {
     register,
-    formState: { errors },
+    formState: { errors, isDirty },
     control,
     handleSubmit,
-  } = useForm<FormStartPage>({
+    resetField,
+    clearErrors,
+    setError,
+  } = useForm<FormStartPageInput>({
     mode: 'onBlur',
-    defaultValues: form?.startPage,
+    defaultValues: { ...form?.startPage, attachment: {} },
   })
 
-  // Save design functions
-  const handleDesignChanges = useCallback(
-    (startPageInputs) => {
-      setDesignState({ ...(startPageInputs as FormStartPage) })
+  // On mount, fetch custom logo file to display as part of attachment field.
+  const setAttachmentOnMount = useCallback(
+    async (logo: CustomFormLogo) => {
+      const srcUrl = `${logoBucketUrl}/${logo.fileId}`
+      const customLogoBlob = await fetch(srcUrl).then((res) => res.blob())
+      setAttachment({
+        file: new File([customLogoBlob], logo.fileName),
+        srcUrl,
+      })
+      setExistingCustomLogoFetched(true)
     },
-    [setDesignState],
+    [logoBucketUrl, setAttachment],
+  )
+
+  // Load existing start page and custom logo into form when user opens drawer
+  useEffect(() => {
+    setStartPageData({
+      ...form?.startPage,
+      attachment: {},
+    } as FormStartPageInput)
+    if (form?.startPage.logo.state === FormLogoState.Custom) {
+      setAttachmentOnMount(form?.startPage.logo)
+      setCustomLogoMeta(form?.startPage.logo)
+    }
+    return () => resetDesignStore()
+  }, [])
+
+  useEffect(
+    () =>
+      resetField('attachment', {
+        defaultValue: startPageData?.attachment,
+      }),
+    [existingCustomLogoFetched],
   )
 
   const watchedInputs = useWatch({
     control: control,
-  }) as UnpackNestedValue<FormStartPage>
+  }) as UnpackNestedValue<FormStartPageInput>
 
   const clonedWatchedInputs = useMemo(
     () => cloneDeep(watchedInputs),
     [watchedInputs],
   )
 
-  useDebounce(() => handleDesignChanges(clonedWatchedInputs), 300, [
-    Object.values(clonedWatchedInputs),
+  useDebounce(() => setStartPageData(clonedWatchedInputs), 300, [
+    clonedWatchedInputs,
   ])
 
-  const handleUpdateDesign = handleSubmit((startPage) =>
-    startPageMutation.mutate(startPage),
+  // Save design handlers
+  const uploadLogoMutation = useMutation((image: File) =>
+    uploadLogo({ formId, image }),
+  )
+
+  const handleUploadLogo = useCallback(
+    (attachment: UploadedImage): Promise<CustomLogoMeta> | CustomLogoMeta => {
+      if (!attachment.file || !attachment.srcUrl)
+        throw new Error('Design pre-submit validation failed')
+      if (!attachment.srcUrl.startsWith('blob:')) {
+        // Logo was not changed
+        if (!customLogoMeta)
+          throw new Error('Design: customLogoMeta is undefined')
+        return customLogoMeta
+      }
+      return uploadLogoMutation
+        .mutateAsync(attachment.file)
+        .then((uploadedFileData) => {
+          return {
+            fileName: uploadedFileData.name,
+            fileId: uploadedFileData.fileId,
+            fileSizeInBytes: uploadedFileData.size,
+          }
+        })
+    },
+    [uploadLogoMutation, customLogoMeta],
   )
 
-  if (!form) return null
+  const handleUpdateDesign = handleSubmit(
+    async (startPageData: FormStartPageInput) => {
+      const { logo, attachment, estTimeTaken, ...rest } = startPageData
+      const estTimeTakenTransformed =
+        estTimeTaken === '' ? undefined : estTimeTaken
+      if (logo.state !== FormLogoState.Custom)
+        startPageMutation.mutate(
+          {
+            logo: { state: logo.state },
+            estTimeTaken: estTimeTakenTransformed,
+            ...rest,
+          },
+          { onSuccess: handleClose },
+        )
+      else {
+        const customLogoMeta = await handleUploadLogo(attachment)
+        startPageMutation.mutate(
+          {
+            logo: { state: FormLogoState.Custom, ...customLogoMeta },
+            estTimeTaken: estTimeTakenTransformed,
+            ...rest,
+          },
+          { onSuccess: handleClose },
+        )
+      }
+    },
+  )
+
+  const handleClick = useCallback(async () => {
+    handleUpdateDesign().catch((error) => {
+      toast({ description: error.message })
+    })
+  }, [handleUpdateDesign, toast])
+
+  if (!startPageData) return null
 
   return (
     <Tabs pos="relative" h="100%" display="flex" flexDir="column">
@@ -108,16 +226,110 @@ export const DesignDrawer = (): JSX.Element | null => {
         </Flex>
         <Divider w="auto" mx="-1.5rem" />
       </Box>
+
       <DrawerContentContainer>
         <FormControl
-          isReadOnly={startPageMutation.isLoading}
-          isInvalid={!!errors.estTimeTaken}
+          isReadOnly={isLoading}
+          isInvalid={!isEmpty(errors.attachment)}
+        >
+          <FormLabel>Logo</FormLabel>
+          <Radio.RadioGroup
+            value={startPageData.logo.state}
+            isDisabled={isLoading}
+          >
+            <Radio value={FormLogoState.Default} {...register('logo.state')}>
+              Default
+            </Radio>
+            <Radio value={FormLogoState.None} {...register('logo.state')}>
+              None
+            </Radio>
+            <Radio value={FormLogoState.Custom} {...register('logo.state')}>
+              Upload custom logo (jpg, png, or gif)
+            </Radio>
+          </Radio.RadioGroup>
+          <Box ml="45px" mt="0.5rem">
+            <Box
+              hidden={
+                startPageData.logo.state !== FormLogoState.Custom ||
+                !existingCustomLogoFetched
+              }
+            >
+              <Controller
+                name="attachment"
+                control={control}
+                rules={{
+                  validate: (val) => {
+                    if (startPageData.logo.state !== FormLogoState.Custom)
+                      return true
+                    if (val?.file && val.srcUrl) return true
+                    return 'Please upload a logo'
+                  },
+                }}
+                render={({ field: { onChange, ...rest } }) => (
+                  <UploadImageInput
+                    {...rest}
+                    onChange={(event) => {
+                      clearErrors('attachment')
+                      onChange(event)
+                    }}
+                    onError={(message) => setError('attachment', { message })}
+                  />
+                )}
+              />
+              <FormErrorMessage>
+                {get(errors, 'attachment.message')}
+              </FormErrorMessage>
+            </Box>
+            <Skeleton w="100%" h="4.5rem" hidden={existingCustomLogoFetched} />
+          </Box>
+        </FormControl>
+
+        <FormControl
+          isReadOnly={isLoading}
+          isInvalid={!isEmpty(errors.colorTheme)}
         >
+          <FormLabel>Theme colour</FormLabel>
+          <Radio.RadioGroup
+            value={startPageData.colorTheme}
+            isDisabled={isLoading}
+          >
+            <Stack spacing="0" direction="row" display="inline">
+              {Object.values(FormColorTheme).map((color) => (
+                <Radio
+                  display="inline"
+                  width="1rem"
+                  value={color}
+                  {...register('colorTheme')}
+                  // CSS for inverted radio button
+                  // TODO: anti-aliasing at interface of border and ::before?
+                  border="2px solid"
+                  borderRadius="50%"
+                  borderColor="white"
+                  background={getTitleBg(color)}
+                  _checked={{ borderColor: getTitleBg(color) }}
+                  _before={{
+                    content: '""',
+                    display: 'inline-block',
+                    width: '20px',
+                    height: '20px',
+                    border: '2px solid',
+                    borderColor: 'white',
+                    borderRadius: '50%',
+                  }}
+                />
+              ))}
+            </Stack>
+          </Radio.RadioGroup>
+          <FormErrorMessage>{errors.colorTheme?.message}</FormErrorMessage>
+        </FormControl>
+
+        <FormControl isReadOnly={isLoading} isInvalid={!!errors.estTimeTaken}>
           <FormLabel>Time taken to complete form (minutes)</FormLabel>
           <Controller
             name="estTimeTaken"
             control={control}
             rules={{
+              required: 'This field is required', //TODO: why is this field required? Seems a bit strange esp if we don't provide an initial value?
               min: { value: 1, message: 'Cannot be less than 1' },
               max: { value: 1000, message: 'Cannot be more than 1000' },
             }}
@@ -134,32 +346,19 @@ export const DesignDrawer = (): JSX.Element | null => {
           <FormErrorMessage>{errors.estTimeTaken?.message}</FormErrorMessage>
         </FormControl>
 
-        <FormControl
-          isReadOnly={startPageMutation.isLoading}
-          isInvalid={!!errors.paragraph}
-        >
+        <FormControl isReadOnly={isLoading} isInvalid={!!errors.paragraph}>
           <FormLabel>Instructions for your form</FormLabel>
           <Textarea {...register('paragraph')} />
           <FormErrorMessage>{errors.paragraph?.message}</FormErrorMessage>
         </FormControl>
 
-        <Stack
-          direction={{ base: 'column', md: 'row-reverse' }}
-          justifyContent="end"
-          spacing="1rem"
-        >
-          <Button isFullWidth={isMobile} onClick={handleUpdateDesign}>
-            Save design
-          </Button>
-          <Button
-            isFullWidth={isMobile}
-            variant="clear"
-            colorScheme="secondary"
-            onClick={closeBuilderDrawer}
-          >
-            Cancel
-          </Button>
-        </Stack>
+        <FormFieldDrawerActions
+          isLoading={isLoading}
+          isSaveEnabled={isDirty}
+          handleClick={handleClick}
+          handleCancel={handleClose}
+          buttonText="Save design"
+        />
       </DrawerContentContainer>
     </Tabs>
   )
diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditImage/EditImage.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditImage/EditImage.tsx
index 85faea51ce..2a4822a1bd 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditImage/EditImage.tsx
+++ b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditImage/EditImage.tsx
@@ -5,6 +5,7 @@ import { useParams } from 'react-router-dom'
 import { FormControl } from '@chakra-ui/react'
 import { extend, get, isEmpty, pick } from 'lodash'
 
+import { MB } from '~shared/constants/file'
 import { ImageFieldBase } from '~shared/types/field'
 
 import { useToast } from '~hooks/useToast'
@@ -23,7 +24,7 @@ import { FormFieldDrawerActions } from '../common/FormFieldDrawerActions'
 import { EditFieldProps } from '../common/types'
 import { useEditFieldForm } from '../common/useEditFieldForm'
 
-import { UploadImageInput } from './UploadImageInput'
+import { UploadedImage, UploadImageInput } from './UploadImageInput'
 
 type EditImageProps = EditFieldProps<ImageFieldBase>
 
@@ -33,10 +34,7 @@ export type EditImageInputs = Pick<
   ImageFieldBase,
   typeof EDIT_IMAGE_KEYS[number]
 > & {
-  attachment?: Partial<{
-    file: File
-    srcUrl: ImageFieldBase['url']
-  }>
+  attachment?: UploadedImage
 }
 
 const transformImageFieldToEditForm = (
@@ -114,6 +112,7 @@ export const EditImage = ({ field }: EditImageProps): JSX.Element => {
           return {
             ...output,
             ...uploadedFileData,
+            size: `${(uploadedFileData.size / MB).toFixed(2)} MB`,
           }
         })
     },
diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditImage/UploadImageInput.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditImage/UploadImageInput.tsx
index 490068e86b..48dfd0b850 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditImage/UploadImageInput.tsx
+++ b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditImage/UploadImageInput.tsx
@@ -13,6 +13,11 @@ import Attachment from '~components/Field/Attachment'
 
 import { EditImageInputs } from './EditImage'
 
+export type UploadedImage = {
+  file?: File
+  srcUrl?: string
+}
+
 type UploadImageInputProps = Pick<
   ControllerRenderProps<EditImageInputs, 'attachment'>,
   'name' | 'onChange' | 'value'
diff --git a/frontend/src/features/admin-form/create/builder-and-design/useDesignStore.tsx b/frontend/src/features/admin-form/create/builder-and-design/useDesignStore.tsx
index b22e2fd373..ae6c7614f6 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/useDesignStore.tsx
+++ b/frontend/src/features/admin-form/create/builder-and-design/useDesignStore.tsx
@@ -2,26 +2,66 @@ import { isEqual } from 'lodash'
 import create from 'zustand'
 import { devtools } from 'zustand/middleware'
 
-import { FormStartPage } from '~shared/types'
+import { CustomFormLogo, FormLogoBase, FormStartPage } from '~shared/types'
+
+import { UploadedImage } from './BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditImage/UploadImageInput'
+
+export type CustomLogoMeta = Omit<CustomFormLogo, keyof FormLogoBase>
+
+/** Design drawer form input fields. DesignStore keeps track of the data in the
+ * drawer input as a single unit. Other data (specifically the logo metadata) is
+ * kept separately with its own getters and setters.
+ */
+export type FormStartPageInput = Omit<
+  FormStartPage,
+  'logo' | 'estTimeTaken'
+> & {
+  estTimeTaken: number | ''
+  logo: FormLogoBase
+  attachment: UploadedImage // Custom logo image
+}
 
 export type DesignStore = {
-  startPageData: FormStartPage | null
-  setStartPageData: (startPage: FormStartPage) => void
-  resetStartPageData: () => void
+  startPageData?: FormStartPageInput
+  customLogoMeta?: CustomLogoMeta
+  setStartPageData: (startPageInput: FormStartPageInput) => void
+  setAttachment: (attachment: UploadedImage) => void
+  setCustomLogoMeta: (customLogoMetaData: CustomLogoMeta) => void
+  resetCustomLogoMeta: () => void
+  resetDesignStore: () => void
 }
 
 export const useDesignStore = create<DesignStore>(
   devtools((set, get) => ({
-    startPageData: null,
-    setStartPageData: (startPage) => {
+    setStartPageData: (startPageData: FormStartPageInput) => {
+      const current = get()
+      if (isEqual(current.startPageData, startPageData)) return
+      set({ startPageData })
+    },
+    setAttachment: (attachment: UploadedImage) => {
       const current = get()
-      if (isEqual(current.startPageData, startPage)) return
+      if (!current.startPageData) return
+      if (isEqual(current.startPageData.attachment, attachment)) return
       set({
-        startPageData: startPage,
+        startPageData: {
+          ...current.startPageData,
+          attachment,
+        },
       })
     },
-    resetStartPageData: () => {
-      set({ startPageData: null })
+    setCustomLogoMeta: (customLogoMeta: CustomLogoMeta) => {
+      const current = get()
+      if (isEqual(current.customLogoMeta, customLogoMeta)) return
+      set({ customLogoMeta })
+    },
+    resetCustomLogoMeta: () => {
+      set({ customLogoMeta: undefined })
+    },
+    resetDesignStore: () => {
+      set({
+        startPageData: undefined,
+        customLogoMeta: undefined,
+      })
     },
   })),
 )
@@ -30,10 +70,26 @@ export const startPageDataSelector = (
   state: DesignStore,
 ): DesignStore['startPageData'] => state.startPageData
 
+export const customLogoMetaSelector = (
+  state: DesignStore,
+): DesignStore['customLogoMeta'] => state.customLogoMeta
+
 export const setStartPageDataSelector = (
   state: DesignStore,
 ): DesignStore['setStartPageData'] => state.setStartPageData
 
-export const resetStartPageDataSelector = (
+export const setAttachmentSelector = (
+  state: DesignStore,
+): DesignStore['setAttachment'] => state.setAttachment
+
+export const setCustomLogoMetaSelector = (
+  state: DesignStore,
+): DesignStore['setCustomLogoMeta'] => state.setCustomLogoMeta
+
+export const resetCustomLogoMetaSelector = (
+  state: DesignStore,
+): DesignStore['resetCustomLogoMeta'] => state.resetCustomLogoMeta
+
+export const resetDesignStoreSelector = (
   state: DesignStore,
-): DesignStore['resetStartPageData'] => state.resetStartPageData
+): DesignStore['resetDesignStore'] => state.resetDesignStore
diff --git a/frontend/src/features/public-form/components/FormStartPage/useFormHeader.tsx b/frontend/src/features/public-form/components/FormStartPage/useFormHeader.tsx
index 414b8af12f..ffb46f8826 100644
--- a/frontend/src/features/public-form/components/FormStartPage/useFormHeader.tsx
+++ b/frontend/src/features/public-form/components/FormStartPage/useFormHeader.tsx
@@ -3,7 +3,10 @@ import simplur from 'simplur'
 
 import { FormColorTheme, FormStartPage } from '~shared/types'
 
-export const useFormHeader = (startPage: FormStartPage | undefined) => {
+export const getTitleBg = (colorTheme?: FormColorTheme) =>
+  colorTheme ? `theme-${colorTheme}.500` : `neutral.200`
+
+export const useFormHeader = (startPage?: FormStartPage) => {
   const titleColor = useMemo(() => {
     if (startPage?.colorTheme === FormColorTheme.Orange) {
       return 'secondary.700'
@@ -12,10 +15,7 @@ export const useFormHeader = (startPage: FormStartPage | undefined) => {
   }, [startPage?.colorTheme])
 
   const titleBg = useMemo(
-    () =>
-      startPage?.colorTheme
-        ? `theme-${startPage.colorTheme}.500`
-        : `neutral.200`,
+    () => getTitleBg(startPage?.colorTheme),
     [startPage?.colorTheme],
   )
 
diff --git a/frontend/src/services/FileHandlerService.ts b/frontend/src/services/FileHandlerService.ts
index 1cd498ef48..5864752400 100644
--- a/frontend/src/services/FileHandlerService.ts
+++ b/frontend/src/services/FileHandlerService.ts
@@ -1,8 +1,6 @@
 import { AxiosResponse } from 'axios'
 import SparkMD5 from 'spark-md5'
 
-import { MB } from '~shared/constants/file'
-
 import { ApiService } from './ApiService'
 
 export type UploadedFileData = {
@@ -10,7 +8,7 @@ export type UploadedFileData = {
   fileId: string
   fileMd5Hash: string
   name: string
-  size: string
+  size: number
 }
 
 type PresignUrlEndpoint =
@@ -126,7 +124,7 @@ const uploadFile = async ({
     fileId: encodedFileId,
     fileMd5Hash,
     name: file.name,
-    size: `${(file.size / MB).toFixed(2)} MB`,
+    size: file.size,
   }
 
   return uploadedFileData