diff --git a/services/frontend/.eslintrc.json b/services/frontend/.eslintrc.json
index 1d982d9de3..ec8f94caf5 100644
--- a/services/frontend/.eslintrc.json
+++ b/services/frontend/.eslintrc.json
@@ -29,9 +29,10 @@
         "project": ["./services/frontend/tsconfig.json", "./services/frontend/tsconfig.node.json"]
       },
       "rules": {
-        "import/prefer-default-export": "off",
         "@typescript-eslint/no-explicit-any": "off",
-        "@typescript-eslint/no-unnecessary-type-assertion": "error"
+        "@typescript-eslint/no-unnecessary-type-assertion": "error",
+        "import/prefer-default-export": "off",
+        "react/require-default-props": "off"
       }
     }
   ],
diff --git a/services/frontend/src/components/InfoBox/InfoBoxButton.jsx b/services/frontend/src/components/InfoBox/InfoBoxButton.tsx
similarity index 56%
rename from services/frontend/src/components/InfoBox/InfoBoxButton.jsx
rename to services/frontend/src/components/InfoBox/InfoBoxButton.tsx
index b2aff2e95c..7540dea3ad 100644
--- a/services/frontend/src/components/InfoBox/InfoBoxButton.jsx
+++ b/services/frontend/src/components/InfoBox/InfoBoxButton.tsx
@@ -1,12 +1,17 @@
 import { Button, Icon } from 'semantic-ui-react'
 
-export const InfoBoxButton = ({ cypress, toggleOpen }) => {
+interface InfoBoxButtonProps {
+  cypress?: string
+  toggleOpen?: () => void
+}
+
+export const InfoBoxButton = ({ cypress, toggleOpen }: InfoBoxButtonProps) => {
   return (
     <Button
       basic
       className="ok-infobox-collapsed"
       color="green"
-      data-cy={`${cypress}-open-info`}
+      data-cy={cypress ? `${cypress}-open-info` : undefined}
       icon
       labelPosition="left"
       onClick={toggleOpen}
diff --git a/services/frontend/src/components/InfoBox/index.jsx b/services/frontend/src/components/InfoBox/index.tsx
similarity index 57%
rename from services/frontend/src/components/InfoBox/index.jsx
rename to services/frontend/src/components/InfoBox/index.tsx
index b7748dc588..d203326f50 100644
--- a/services/frontend/src/components/InfoBox/index.jsx
+++ b/services/frontend/src/components/InfoBox/index.tsx
@@ -4,23 +4,15 @@ import { Button, Icon, Message, Popup } from 'semantic-ui-react'
 import { InfoBoxButton } from './InfoBoxButton'
 import './infoBox.css'
 
-/**
- * Removes leading spaces so that the content can be properly formatted with Markdown.
- *
- * @param {string} content - The content to display in the InfoBox.
- * @returns {string} The content with leading spaces removed.
- */
-const formatContent = content => content.replace(/\n +/g, '\n')
+const formatContent = (content: string) => content.replace(/\n +/g, '\n')
 
-/**
- * A toggleable component for displaying information on how to use a feature or how to interpret data.
- * The InfoBox can be displayed as a popup or as a message box. The default is a message box.
- *
- * @param {string} content - The content to display in the InfoBox. Supports Markdown for formatting.
- * @param {string} [cypress] - A unique, descriptive tag to use for end-to-end testing with Cypress.
- * @param {boolean} [popup] - If true, the InfoBox will be displayed as a popup. False by default.
- */
-export const InfoBox = ({ content, cypress, popup = false }) => {
+interface InfoBoxProps {
+  content: string
+  cypress?: string
+  popup?: boolean
+}
+
+export const InfoBox = ({ content, cypress = '', popup = false }: InfoBoxProps) => {
   const [open, setOpen] = useState(false)
   const toggleOpen = () => setOpen(prev => !prev)
 
diff --git a/services/frontend/src/components/PopulationSearch/PopulationSearchForm.jsx b/services/frontend/src/components/PopulationSearch/PopulationSearchForm.jsx
index 9ea8126845..c08c9097f5 100644
--- a/services/frontend/src/components/PopulationSearch/PopulationSearchForm.jsx
+++ b/services/frontend/src/components/PopulationSearch/PopulationSearchForm.jsx
@@ -327,15 +327,18 @@ export const PopulationSearchForm = ({ onProgress }) => {
   const renderStudyTrackSelector = () => {
     const studyTracksAvailable = Object.values(studyTracks).length > 1 && !studyTracksAreLoading
     const studyTracksToRender = studyTracksAvailable
-      ? Object.keys(studyTracks)
-          .filter(studyTrack => studyTrack !== query.studyRights.programme)
-          .map(studyTrack => ({
-            code: studyTrack,
-            description: studyTrack,
-            icon: null,
-            text: getTextIn(studyTracks[studyTrack]),
-            value: studyTrack,
-          }))
+      ? sortBy(
+          Object.keys(studyTracks)
+            .filter(studyTrack => studyTrack !== query.studyRights.programme)
+            .map(studyTrack => ({
+              code: studyTrack,
+              description: studyTrack,
+              icon: null,
+              text: getTextIn(studyTracks[studyTrack]),
+              value: studyTrack,
+            })),
+          'text'
+        )
       : []
 
     return (