diff --git a/src/components/forms/radioButtonGroup/RadioButtonGroup.tsx b/src/components/forms/radioButtonGroup/RadioButtonGroup.tsx
index 980bc59e2..98bb57490 100644
--- a/src/components/forms/radioButtonGroup/RadioButtonGroup.tsx
+++ b/src/components/forms/radioButtonGroup/RadioButtonGroup.tsx
@@ -3,7 +3,7 @@ import styles from "src/components/forms/radioButtonGroup/radioButtonGroup.modul
 import { RadioButton } from "./components/RadioButton";
 import textStyles from "src/components/text/text.module.css";
 
-interface IOption {
+export interface IOption {
   id: string;
   label: string;
   disabled?: boolean;
diff --git a/src/salaryAndBenefits/SalaryAndBenefits.tsx b/src/salaryAndBenefits/SalaryAndBenefits.tsx
index 7faf2ebb6..3eb1c3d6c 100644
--- a/src/salaryAndBenefits/SalaryAndBenefits.tsx
+++ b/src/salaryAndBenefits/SalaryAndBenefits.tsx
@@ -1,10 +1,16 @@
-"use client"
+"use client";
 
 import styles from "./salaryAndBenefits.module.css";
 import Text from "src/components/text/Text";
-import SalaryCalculator from "./components/salaryCalculator/SalaryCalculator";
+import SalaryCalculator, {
+  Degree,
+} from "./components/salaryCalculator/SalaryCalculator";
 import { useState } from "react";
-import { calculatePension } from "./utils/calculateSalary";
+import {
+  calculatePension,
+  calculateSalary,
+  maxExperience,
+} from "./utils/calculateSalary";
 import { SalaryAndBenefitsPage } from "studio/lib/payloads/salaryAndBenefits";
 import { RichText } from "src/components/richText/RichText";
 
@@ -12,24 +18,69 @@ interface SalaryAndBenefitsProps {
   salaryAndBenefits: SalaryAndBenefitsPage;
 }
 
-const SalaryAndBenefits = ({salaryAndBenefits}: SalaryAndBenefitsProps) => {
+interface SalaryCalculatorFormState {
+  examinationYear: number;
+  selectedDegree: Degree;
+}
+
+const SalaryAndBenefits = ({ salaryAndBenefits }: SalaryAndBenefitsProps) => {
+  const currentYear = new Date().getFullYear();
+  const minExaminationYear = maxExperience(currentYear);
+  const maxExaminationYear = currentYear - 1;
+
+  const [formState, setFormState] = useState<SalaryCalculatorFormState>({
+    examinationYear: currentYear,
+    selectedDegree: "bachelor",
+  });
   const [salary, setSalary] = useState<number | null>(null);
 
-  const handleSalaryUpdate = (newSalary: number) => {
-    setSalary(newSalary);
+  const updateSelectedDegree = (newDegree: Degree) => {
+    setFormState((prevState) => ({
+      ...prevState,
+      selectedDegree: newDegree,
+    }));
+  };
+
+  const updateExaminationYear = (newYear: number) => {
+    setFormState((prevState) => ({
+      ...prevState,
+      examinationYear: newYear,
+    }));
+  };
+
+  const handleSubmit = (event: React.FormEvent) => {
+    event.preventDefault();
+    setSalary(
+      calculateSalary(
+        currentYear,
+        formState.examinationYear,
+        formState.selectedDegree,
+      ),
+    );
   };
-  
+
   return (
     <div className={styles.wrapper}>
       <Text type="h1">{salaryAndBenefits.basicTitle}</Text>
-      {salaryAndBenefits.showSalaryCalculator && 
-      <SalaryCalculator onSalaryUpdate={handleSalaryUpdate} /> }
-      {salary !== null ?  
-      <div aria-live="polite"> 
-      <Text> Du vil få en årlig lønn på {salary}</Text>
-      <Text>
-        Du vil få en årlig pensjon på omtrent {calculatePension(salary)}
-      </Text></div> : null }
+      {salaryAndBenefits.showSalaryCalculator && (
+        <SalaryCalculator
+          // TODO: should also take in degree state (this requires changes to IOption of RadioButtonGroup)
+          examinationYear={formState.examinationYear}
+          minExaminationYear={minExaminationYear}
+          maxExaminationYear={maxExaminationYear}
+          onDegreeChanged={updateSelectedDegree}
+          onExaminationYearChanged={updateExaminationYear}
+          onSubmit={handleSubmit}
+        />
+      )}
+      {salary !== null ? (
+        <div aria-live="polite">
+          <Text> Du vil få en årlig lønn på {salary}</Text>
+          <Text>
+            Du vil få en årlig pensjon på omtrent {calculatePension(salary)}
+          </Text>
+        </div>
+      ) : null}
       <div className={styles.benefits}>
         {salaryAndBenefits.benefits.map((benefit) => (
           <div key={benefit._key} className={styles.benefitWrapper}>
diff --git a/src/salaryAndBenefits/components/salaryCalculator/SalaryCalculator.tsx b/src/salaryAndBenefits/components/salaryCalculator/SalaryCalculator.tsx
index 838055d9a..f6fb28f9d 100644
--- a/src/salaryAndBenefits/components/salaryCalculator/SalaryCalculator.tsx
+++ b/src/salaryAndBenefits/components/salaryCalculator/SalaryCalculator.tsx
@@ -1,77 +1,63 @@
-"use client";
-
-import { useState } from "react";
 import styles from "./salaryCalculator.module.css";
 import InputField from "src/components/forms/inputField/InputField";
-import { RadioButtonGroup } from "src/components/forms/radioButtonGroup/RadioButtonGroup";
-import { calculateSalary, maxExperience } from "src/salaryAndBenefits/utils/calculateSalary";
+import {
+  IOption,
+  RadioButtonGroup,
+} from "src/components/forms/radioButtonGroup/RadioButtonGroup";
 import Button from "src/components/buttons/Button";
 
-  interface FormState {
-    examinationYear: number
-    selectedDegree: "bachelor" | "master",
-  }
-
-interface IOption {
-  id: string;
-  label: string;
-  disabled?: boolean;
-  currentSelected: boolean;
-}
+export type Degree = "bachelor" | "master";
 
-const options: IOption[] = [
-  { id: "bachelor", label: "Bachelor", currentSelected: false, disabled: false },
-  { id: "master", label: "Master", currentSelected: true, disabled: false },
+const degreeOptions: IOption[] = [
+  {
+    id: "bachelor",
+    label: "Bachelor",
+    currentSelected: true,
+    disabled: false,
+  },
+  { id: "master", label: "Master", currentSelected: false, disabled: false },
 ];
 
 interface SalaryCalculatorProps {
-    onSalaryUpdate: (salary: number) => void;
-  }
-
-export default function SalaryCalculator({ onSalaryUpdate }: SalaryCalculatorProps) {
-  const thisYear = new Date().getFullYear();
-  
-  const [formState, setFormState] = useState<FormState>({
-    examinationYear: thisYear,
-    selectedDegree: "master",
-  });
-
-  const updateSelectedDegree = (newDegree: string) => {
-    setFormState((prevState) => ({
-      ...prevState,
-      selectedDegree: newDegree as "bachelor" | "master",
-    }));
-  };
-
-  const updateExaminationYear = (newYear: number) => {
-    setFormState((prevState) => ({
-      ...prevState,
-      examinationYear: newYear,
-    }));
-  };
-    
- const handleSubmit = (event: React.FormEvent) => {
-    event.preventDefault();
-    const salary = calculateSalary(thisYear, formState.examinationYear, formState.selectedDegree);
-    onSalaryUpdate(salary);
-  };
+  examinationYear: number;
+  minExaminationYear: number;
+  maxExaminationYear: number;
+  onDegreeChanged: (degree: Degree) => void;
+  onExaminationYearChanged: (examinationYear: number) => void;
+  onSubmit: (event: React.FormEvent) => void;
+}
 
+export default function SalaryCalculator({
+  examinationYear,
+  minExaminationYear,
+  maxExaminationYear,
+  onDegreeChanged,
+  onExaminationYearChanged,
+  onSubmit,
+}: SalaryCalculatorProps) {
   return (
-    <form aria-label="salary calculator" className={styles.calculator} onSubmit={handleSubmit}>
+    <form
+      aria-label="salary calculator"
+      className={styles.calculator}
+      onSubmit={onSubmit}
+    >
       <RadioButtonGroup
         id="degree-group"
         label="Choose your degree"
-        options={options}
-        onValueChange={(value) => updateSelectedDegree(value.id)}
+        options={degreeOptions}
+        onValueChange={(value) =>
+          (value.id === "bachelor" || value.id === "master") &&
+          onDegreeChanged(value.id)
+        }
       />
       <InputField
         label="year"
         name="examinationYear"
         type="number"
-        max={thisYear-1}
-        min={maxExperience(thisYear)} 
-        value={formState.examinationYear}
-        onChange={(_name, value) => updateExaminationYear(typeof value === "string" ? parseInt(value) : value)}
+        max={maxExaminationYear}
+        min={minExaminationYear}
+        value={examinationYear}
+        onChange={(_name, value) => onExaminationYearChanged(parseInt(value))}
         required
       />
       <Button type="secondary" size="small">