diff --git a/frontend/packages/shared/src/components/CookieBanner/CookieBanner.scss b/frontend/packages/shared/src/components/CookieBanner/CookieBanner.scss
index a92069e74..584ac4434 100644
--- a/frontend/packages/shared/src/components/CookieBanner/CookieBanner.scss
+++ b/frontend/packages/shared/src/components/CookieBanner/CookieBanner.scss
@@ -16,7 +16,7 @@
 
     & &__dialog-container {
       padding: 20px 24px;
-      padding-top: 0px;
+      padding-top: 0;
     }
 
     & &__dialog-content {
diff --git a/frontend/packages/shared/src/components/FileUpload/FileUpload.tsx b/frontend/packages/shared/src/components/FileUpload/FileUpload.tsx
new file mode 100644
index 000000000..086b6c91a
--- /dev/null
+++ b/frontend/packages/shared/src/components/FileUpload/FileUpload.tsx
@@ -0,0 +1,21 @@
+import { ChangeEvent, FC } from 'react';
+
+type FileUploadProps = {
+  onChange: (files: FileList) => void;
+};
+
+export const FileUpload: FC<FileUploadProps> = ({ onChange }) => {
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    if (event.target.files) {
+      onChange(event.target.files);
+    }
+  };
+
+  return (
+    <div className="custom-fileupload">
+      <div className="rows gapped">
+        <input type="file" onChange={handleChange} />
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/packages/shared/src/components/Notifier/DialogBox.tsx b/frontend/packages/shared/src/components/Notifier/DialogBox.tsx
index d2d2d335c..26d5c5b7e 100644
--- a/frontend/packages/shared/src/components/Notifier/DialogBox.tsx
+++ b/frontend/packages/shared/src/components/Notifier/DialogBox.tsx
@@ -4,8 +4,8 @@ import {
   DialogContent,
   DialogTitle,
 } from '@mui/material';
-
 import { useEffect, useRef } from 'react';
+
 import { Color } from '../../enums';
 import { useDialog } from '../../hooks/useDialog/useDialog';
 import { CustomButton } from '../CustomButton/CustomButton';
@@ -19,13 +19,13 @@ export const DialogBox = () => {
 
   useEffect(() => {
     if (activeDialog) {
-        const dialogContainer = dialogRef.current;
+      const dialogContainer = dialogRef.current;
 
-        if (dialogContainer) {
-          const dialog = dialogContainer.querySelector('[role="dialog"]');
-          if (dialog instanceof HTMLDivElement) {
-            dialog.focus();
-          }
+      if (dialogContainer) {
+        const dialog = dialogContainer.querySelector('[role="dialog"]');
+        if (dialog instanceof HTMLDivElement) {
+          dialog.focus();
+        }
       }
     }
   }, [activeDialog]);
diff --git a/frontend/packages/shared/src/components/ToggleFilterGroup/ToggleFilterGroup.tsx b/frontend/packages/shared/src/components/ToggleFilterGroup/ToggleFilterGroup.tsx
index 1e682c94f..5504628f5 100644
--- a/frontend/packages/shared/src/components/ToggleFilterGroup/ToggleFilterGroup.tsx
+++ b/frontend/packages/shared/src/components/ToggleFilterGroup/ToggleFilterGroup.tsx
@@ -33,7 +33,9 @@ export function ToggleFilterGroup<T>({
         >
           <div className="columns gapped">
             <div className="grow">{label}</div>
-            {typeof count === "number" && !isNaN(count) && <div>{`(${count})`}</div>}
+            {typeof count === 'number' && !isNaN(count) && (
+              <div>{`(${count})`}</div>
+            )}
           </div>
         </CustomButton>
       ))}
diff --git a/frontend/packages/shared/src/components/index.tsx b/frontend/packages/shared/src/components/index.tsx
index f14530aa0..4eb60be5f 100644
--- a/frontend/packages/shared/src/components/index.tsx
+++ b/frontend/packages/shared/src/components/index.tsx
@@ -40,6 +40,7 @@ export { ToggleFilterGroup } from './ToggleFilterGroup/ToggleFilterGroup';
 export { LangSelector } from './LangSelector/LangSelector';
 export { InfoText } from './InfoText/InfoText';
 export { OPHClerkLogo } from './OPHClerkLogo/OPHClerkLogo';
+export { FileUpload } from './FileUpload/FileUpload';
 export { Notifier } from './Notifier/Notifier';
 export { NotifierContextProvider } from './Notifier/NotifierContextProvider';
 export { CookieBanner } from './CookieBanner/CookieBanner';
diff --git a/frontend/packages/shared/src/hooks/useNavigationProtection/useNavigationProtection.ts b/frontend/packages/shared/src/hooks/useNavigationProtection/useNavigationProtection.ts
index cd7819b08..2dadfcdb3 100644
--- a/frontend/packages/shared/src/hooks/useNavigationProtection/useNavigationProtection.ts
+++ b/frontend/packages/shared/src/hooks/useNavigationProtection/useNavigationProtection.ts
@@ -16,7 +16,6 @@ export const useNavigationProtection = (
     currentLocation: Location;
     nextLocation: Location;
   }): boolean => {
-
     if (baseUrl) {
       return !!(
         when &&
@@ -25,12 +24,9 @@ export const useNavigationProtection = (
         currentLocation.pathname !== nextLocation.pathname
       );
     } else {
-      return !!(
-        when &&
-        currentLocation.pathname !== nextLocation.pathname
-      );
+      return !!(when && currentLocation.pathname !== nextLocation.pathname);
     }
-  }
+  };
 
   const blocker = useBlocker(shouldBlock);
 
diff --git a/frontend/packages/vkt/src/components/publicEnrollment/steps/EducationDetails.tsx b/frontend/packages/vkt/src/components/publicEnrollment/steps/EducationDetails.tsx
index 0fe63ddb2..580a78c9a 100644
--- a/frontend/packages/vkt/src/components/publicEnrollment/steps/EducationDetails.tsx
+++ b/frontend/packages/vkt/src/components/publicEnrollment/steps/EducationDetails.tsx
@@ -4,7 +4,7 @@ import {
   Radio,
   RadioGroup,
 } from '@mui/material';
-import { H2, Text } from 'shared/components';
+import { FileUpload, H2, Text } from 'shared/components';
 
 import { usePublicTranslation } from 'configs/i18n';
 
@@ -21,6 +21,8 @@ export const EducationDetails = ({
     handleChange(true);
   };
 
+  const handleFileUpload = (files: FileList) => {};
+
   return (
     <div className="margin-top-lg rows gapped">
       <H2>Koulutustiedot</H2>
@@ -59,6 +61,7 @@ export const EducationDetails = ({
           </RadioGroup>
         </FormControl>
       </fieldset>
+      <FileUpload onChange={handleFileUpload} />
     </div>
   );
 };
diff --git a/frontend/packages/vkt/src/interfaces/publicEducation.ts b/frontend/packages/vkt/src/interfaces/publicEducation.ts
index 8bbbe5b04..e58c73294 100644
--- a/frontend/packages/vkt/src/interfaces/publicEducation.ts
+++ b/frontend/packages/vkt/src/interfaces/publicEducation.ts
@@ -1,5 +1,4 @@
 interface Education {
-  allowsFreeEnrollment: boolean;
   name: string;
   ongoing: boolean;
 }
@@ -9,7 +8,7 @@ interface FreeEnrollments {
   oralSkill: 0 | 1 | 2 | 3;
 }
 
-export interface PublicEducationDetails {
-  educationHistory: Education[];
+export interface PublicFreeEnrollmentDetails {
+  freeEnrollmentBasis: Education;
   freeEnrollments: FreeEnrollments;
 }
diff --git a/frontend/packages/vkt/src/interfaces/publicEnrollment.ts b/frontend/packages/vkt/src/interfaces/publicEnrollment.ts
index 163733a7d..4eaa0e541 100644
--- a/frontend/packages/vkt/src/interfaces/publicEnrollment.ts
+++ b/frontend/packages/vkt/src/interfaces/publicEnrollment.ts
@@ -5,7 +5,7 @@ import {
   CertificateShippingData,
   PartialExamsAndSkills,
 } from 'interfaces/common/enrollment';
-import { PublicEducationDetails } from 'interfaces/publicEducation';
+import { PublicFreeEnrollmentDetails } from 'interfaces/publicEducation';
 import { PublicExamEventResponse } from 'interfaces/publicExamEvent';
 import { PublicPerson } from 'interfaces/publicPerson';
 import { WithId } from 'interfaces/with';
@@ -49,7 +49,7 @@ export interface PublicEnrollment
   examEventId?: number;
   hasPaymentLink?: boolean;
   isFree?: boolean;
-  education?: PublicEducationDetails;
+  freeEnrollmentDetails?: PublicFreeEnrollmentDetails;
 }
 
 export interface PublicEnrollmentResponse