diff --git a/frontend/src/features/admin-form/preview/PreviewFormPage.tsx b/frontend/src/features/admin-form/preview/PreviewFormPage.tsx
index e4347e0656..ff24ce584a 100644
--- a/frontend/src/features/admin-form/preview/PreviewFormPage.tsx
+++ b/frontend/src/features/admin-form/preview/PreviewFormPage.tsx
@@ -1,4 +1,3 @@
-import { useEffect, useState } from 'react'
 import { useParams } from 'react-router-dom'
 import { Flex } from '@chakra-ui/react'
 
@@ -14,38 +13,14 @@ import { FormFooter } from '~features/public-form/components/FormFooter'
 import FormInstructions from '~features/public-form/components/FormInstructions'
 import { PublicFormLogo } from '~features/public-form/components/FormLogo'
 import FormStartPage from '~features/public-form/components/FormStartPage'
+import LanguageControl from '~features/public-form/components/LanguageControl'
 import { PublicFormWrapper } from '~features/public-form/components/PublicFormWrapper'
-import ZoomControl from '~features/public-form/components/ZoomControl'
 
 import { PreviewFormBannerContainer } from '../common/components/PreviewFormBanner'
 
 import { PreviewFormProvider } from './PreviewFormProvider'
 
 export const PreviewFormPage = (): JSX.Element => {
-  const [rootFontSize, setRootFontSize] = useState('16px')
-
-  const setDefaultSize = () => {
-    setRootFontSize('16px')
-  }
-
-  const setLargeSize = () => {
-    setRootFontSize('18px')
-  }
-
-  const setLargestSize = () => {
-    setRootFontSize('24px')
-  }
-
-  useEffect(() => {
-    const root = document.documentElement
-    root.style.setProperty('font-size', rootFontSize)
-
-    // need to reset on unmount
-    return () => {
-      root.style.removeProperty('font-size')
-    }
-  }, [rootFontSize])
-
   const { formId } = useParams()
   if (!formId) throw new Error('No formId provided')
 
@@ -57,11 +32,7 @@ export const PreviewFormPage = (): JSX.Element => {
         <FormSectionsProvider>
           <PublicFormLogo />
           <FormStartPage />
-          <ZoomControl
-            setDefaultSize={setDefaultSize}
-            setLargeSize={setLargeSize}
-            setLargestSize={setLargestSize}
-          />
+          <LanguageControl />
           <PublicFormWrapper>
             <FormInstructions />
             <FormFields />
diff --git a/frontend/src/features/public-form/PublicFormPage.tsx b/frontend/src/features/public-form/PublicFormPage.tsx
index 7c31cf4447..e55b16e793 100644
--- a/frontend/src/features/public-form/PublicFormPage.tsx
+++ b/frontend/src/features/public-form/PublicFormPage.tsx
@@ -1,4 +1,3 @@
-import { useEffect, useState } from 'react'
 import { useParams } from 'react-router-dom'
 import { Flex } from '@chakra-ui/react'
 
@@ -13,35 +12,12 @@ import FormInstructions from './components/FormInstructions'
 import FormIssueFeedback from './components/FormIssueFeedback'
 import { PublicFormLogo } from './components/FormLogo'
 import FormStartPage from './components/FormStartPage'
+import LanguageControl from './components/LanguageControl'
 import { PublicFormWrapper } from './components/PublicFormWrapper'
-import ZoomControl from './components/ZoomControl'
 import { PublicFormProvider } from './PublicFormProvider'
 
 export const PublicFormPage = (): JSX.Element => {
   const { formId, submissionId } = useParams()
-  const [rootFontSize, setRootFontSize] = useState('16px')
-
-  const setDefaultSize = () => {
-    setRootFontSize('16px')
-  }
-
-  const setLargeSize = () => {
-    setRootFontSize('18px')
-  }
-
-  const setLargestSize = () => {
-    setRootFontSize('24px')
-  }
-
-  useEffect(() => {
-    const root = document.documentElement
-    root.style.setProperty('font-size', rootFontSize)
-
-    // need to reset on unmount
-    return () => {
-      root.style.removeProperty('font-size')
-    }
-  }, [rootFontSize])
 
   if (!formId) throw new Error('No formId provided')
 
@@ -59,11 +35,7 @@ export const PublicFormPage = (): JSX.Element => {
           <FormBanner />
           <PublicFormLogo />
           <FormStartPage />
-          <ZoomControl
-            setDefaultSize={setDefaultSize}
-            setLargeSize={setLargeSize}
-            setLargestSize={setLargestSize}
-          />
+          <LanguageControl />
           <PublicFormWrapper>
             <FormInstructions />
             <FormFields />
diff --git a/frontend/src/features/public-form/components/ZoomControl/FontDefaultSvgr.tsx b/frontend/src/features/public-form/components/LanguageControl/FontDefaultSvgr.tsx
similarity index 100%
rename from frontend/src/features/public-form/components/ZoomControl/FontDefaultSvgr.tsx
rename to frontend/src/features/public-form/components/LanguageControl/FontDefaultSvgr.tsx
diff --git a/frontend/src/features/public-form/components/ZoomControl/FontLargeSvgr.tsx b/frontend/src/features/public-form/components/LanguageControl/FontLargeSvgr.tsx
similarity index 100%
rename from frontend/src/features/public-form/components/ZoomControl/FontLargeSvgr.tsx
rename to frontend/src/features/public-form/components/LanguageControl/FontLargeSvgr.tsx
diff --git a/frontend/src/features/public-form/components/ZoomControl/FontLargestSvgr.tsx b/frontend/src/features/public-form/components/LanguageControl/FontLargestSvgr.tsx
similarity index 100%
rename from frontend/src/features/public-form/components/ZoomControl/FontLargestSvgr.tsx
rename to frontend/src/features/public-form/components/LanguageControl/FontLargestSvgr.tsx
diff --git a/frontend/src/features/public-form/components/LanguageControl/LanguageControl.tsx b/frontend/src/features/public-form/components/LanguageControl/LanguageControl.tsx
new file mode 100644
index 0000000000..93c4c43de7
--- /dev/null
+++ b/frontend/src/features/public-form/components/LanguageControl/LanguageControl.tsx
@@ -0,0 +1,101 @@
+import { BiChevronDown } from 'react-icons/bi'
+import {
+  Box,
+  Button,
+  Flex,
+  HStack,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Text,
+} from '@chakra-ui/react'
+
+import { Language } from '~shared/types'
+
+import { usePublicFormContext } from '~features/public-form/PublicFormContext'
+
+import { useBgColor } from '../PublicFormWrapper'
+
+type LanguageListType = {
+  language: Language
+  title: string
+}
+
+const LANGUAGES: LanguageListType[] = [
+  { language: Language.ENGLISH, title: 'English' },
+  { language: Language.CHINESE, title: '中文' },
+  { language: Language.MALAY, title: 'Melayu' },
+  { language: Language.TAMIL, title: 'தமிழ்' },
+]
+
+export const LanguageControl = (): JSX.Element => {
+  const { form, publicFormLanguage, setPublicFormLanguage } =
+    usePublicFormContext()
+
+  const availableLanguages = new Set(form?.supportedLanguages ?? [])
+
+  const languagesList = LANGUAGES.filter((language) =>
+    availableLanguages.has(language.language),
+  )
+
+  // English language is always supported. Hence if form supports multi-lang
+  // and there is more than one supported language available, show the
+  // language dropdown.
+  const shouldShowLanguageDropdown =
+    form?.hasMultiLang && availableLanguages.size > 1
+
+  const bgColour = useBgColor({
+    colorTheme: form?.startPage.colorTheme,
+  })
+
+  const handleLanguageChange = (language: string) => {
+    if (setPublicFormLanguage) {
+      setPublicFormLanguage(language as Language)
+    }
+  }
+
+  const selectedLanguage = LANGUAGES.find(
+    (language) => language.language === publicFormLanguage,
+  )?.title
+
+  return (
+    <Flex
+      background={bgColour}
+      zIndex={10}
+      px={{ base: '1.5rem', md: 0 }}
+      justifyContent={{ base: 'start', md: 'center' }}
+    >
+      <HStack mt="-32px" bg="white" borderRadius="4px" shadow="md">
+        {shouldShowLanguageDropdown && (
+          <Menu variant="clear">
+            <MenuButton
+              as={Button}
+              rightIcon={<BiChevronDown />}
+              variant="clear"
+              color="secondary.500"
+            >
+              {selectedLanguage}
+            </MenuButton>
+            <MenuList>
+              {languagesList.map((language) => {
+                return (
+                  <MenuItem
+                    onClick={() => {
+                      handleLanguageChange(language.language)
+                    }}
+                    px={4}
+                    h={12}
+                    w="140px"
+                  >
+                    {language.title}
+                  </MenuItem>
+                )
+              })}
+            </MenuList>
+          </Menu>
+        )}
+      </HStack>
+    </Flex>
+  )
+}
diff --git a/frontend/src/features/public-form/components/LanguageControl/index.ts b/frontend/src/features/public-form/components/LanguageControl/index.ts
new file mode 100644
index 0000000000..5fc11afd5c
--- /dev/null
+++ b/frontend/src/features/public-form/components/LanguageControl/index.ts
@@ -0,0 +1 @@
+export { LanguageControl as default } from './LanguageControl'
diff --git a/frontend/src/features/public-form/components/ZoomControl/ZoomControl.tsx b/frontend/src/features/public-form/components/ZoomControl/ZoomControl.tsx
deleted file mode 100644
index 7cf0742fcd..0000000000
--- a/frontend/src/features/public-form/components/ZoomControl/ZoomControl.tsx
+++ /dev/null
@@ -1,145 +0,0 @@
-import { BiChevronDown } from 'react-icons/bi'
-import {
-  Box,
-  Button,
-  Divider,
-  Flex,
-  HStack,
-  IconButton,
-  Menu,
-  MenuButton,
-  MenuItem,
-  MenuList,
-  Text,
-} from '@chakra-ui/react'
-
-import { Language } from '~shared/types'
-
-import { usePublicFormContext } from '~features/public-form/PublicFormContext'
-
-import { useBgColor } from '../PublicFormWrapper'
-
-import { FontDefaultSvgr } from './FontDefaultSvgr'
-import { FontLargestSvgr } from './FontLargestSvgr'
-import { FontLargeSvgr } from './FontLargeSvgr'
-
-type LanguageListType = {
-  language: Language
-  title: string
-}
-
-const LANGUAGES: LanguageListType[] = [
-  { language: Language.ENGLISH, title: 'English' },
-  { language: Language.CHINESE, title: '中文' },
-  { language: Language.MALAY, title: 'Melayu' },
-  { language: Language.TAMIL, title: 'தமிழ்' },
-]
-
-export const ZoomControl = ({
-  setDefaultSize,
-  setLargeSize,
-  setLargestSize,
-}: {
-  setDefaultSize: () => void
-  setLargeSize: () => void
-  setLargestSize: () => void
-}): JSX.Element => {
-  const { form, publicFormLanguage, setPublicFormLanguage } =
-    usePublicFormContext()
-
-  const availableLanguages = new Set(form?.supportedLanguages ?? [])
-
-  const languagesList = LANGUAGES.filter((language) =>
-    availableLanguages.has(language.language),
-  )
-
-  // English language is always supported. Hence if form supports multi-lang
-  // and there is more than one supported language available, show the
-  // language dropdown.
-  const shouldShowLanguageDropdown =
-    form?.hasMultiLang && availableLanguages.size > 1
-
-  const bgColour = useBgColor({
-    colorTheme: form?.startPage.colorTheme,
-  })
-
-  const handleLanguageChange = (language: string) => {
-    if (setPublicFormLanguage) {
-      setPublicFormLanguage(language as Language)
-    }
-  }
-
-  const selectedLanguage = LANGUAGES.find(
-    (language) => language.language === publicFormLanguage,
-  )?.title
-
-  return (
-    <Flex
-      background={bgColour}
-      zIndex={10}
-      px={{ base: '1.5rem', md: 0 }}
-      justifyContent={{ base: 'start', md: 'center' }}
-    >
-      <HStack
-        mt="-32px"
-        bg="white"
-        borderRadius="4px"
-        height="52px"
-        shadow="md"
-        py="14px"
-        pl="16px"
-        pr="16px"
-      >
-        {shouldShowLanguageDropdown && (
-          <Box mr="48px">
-            <Menu variant="clear">
-              <MenuButton
-                as={Button}
-                rightIcon={<BiChevronDown />}
-                variant="clear"
-                color="secondary.500"
-                size="16px"
-              >
-                <Text fontSize="16px">{selectedLanguage}</Text>
-              </MenuButton>
-              <MenuList>
-                {languagesList.map((language) => {
-                  return (
-                    <MenuItem
-                      onClick={() => {
-                        handleLanguageChange(language.language)
-                      }}
-                    >
-                      <Text fontSize="16px">{language.title}</Text>
-                    </MenuItem>
-                  )
-                })}
-              </MenuList>
-            </Menu>
-          </Box>
-        )}
-
-        <IconButton
-          variant="clear"
-          aria-label="Default font size"
-          icon={<FontDefaultSvgr />}
-          onClick={setDefaultSize}
-        />
-        <Divider orientation="vertical" height="1.5rem" />
-        <IconButton
-          variant="clear"
-          aria-label="Larger font size"
-          icon={<FontLargeSvgr />}
-          onClick={setLargeSize}
-        />
-        <Divider orientation="vertical" height="1.5rem" />
-        <IconButton
-          variant="clear"
-          aria-label="Largest font size"
-          icon={<FontLargestSvgr />}
-          onClick={setLargestSize}
-        />
-      </HStack>
-    </Flex>
-  )
-}
diff --git a/frontend/src/features/public-form/components/ZoomControl/index.ts b/frontend/src/features/public-form/components/ZoomControl/index.ts
deleted file mode 100644
index 163e8b5c94..0000000000
--- a/frontend/src/features/public-form/components/ZoomControl/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { ZoomControl as default } from './ZoomControl'