diff --git a/src/widgets/ImportantInformation.tsx b/src/widgets/ImportantInformation.tsx
index 83c0339b6..9d47f9210 100644
--- a/src/widgets/ImportantInformation.tsx
+++ b/src/widgets/ImportantInformation.tsx
@@ -5,12 +5,13 @@ import { gql } from '../gql';
 import { useNavigate } from 'react-router-dom';
 import { DateTime } from 'luxon';
 import HSection from './HSection';
-import { GAMIFICATION_ACTIVE } from '../config';
+import { BACKEND_URL, GAMIFICATION_ACTIVE } from '../config';
 import { useEffect, useMemo, useState } from 'react';
 import useModal from '../hooks/useModal';
 import { SuccessModal } from '../modals/SuccessModal';
 import NextStepsCard from '../components/achievements/nextStepsCard/NextStepsCard';
-import { Achievement, Achievement_Action_Type_Enum } from '../gql/graphql';
+import { Achievement, Achievement_Action_Type_Enum, Achievement_State, Achievement_Type_Enum } from '../gql/graphql';
+import { PuzzlePieceType, getPuzzleEmptyState } from '../helper/achievement-helper';
 import AchievementModal from '../components/achievements/modals/AchievementModal';
 import NextStepModal from '../components/achievements/modals/NextStepModal';
 import { NextStepLabelType } from '../helper/important-information-helper';
@@ -116,6 +117,30 @@ query GetOnboardingInfos {
          status
       }
     }
+    nextStepAchievements {
+        id
+        name
+        title
+        tagline
+        footer
+        subtitle
+        description
+        image
+        alternativeText
+        actionType
+        achievementType
+        achievementState
+        steps {
+            name
+            isActive
+        }
+        maxSteps
+        currentStep
+        isNewAchievement
+        progressDescription
+        actionName
+        actionRedirectLink
+    }
   }
   myRoles
 }
@@ -135,6 +160,7 @@ const ImportantInformation: React.FC<Props> = ({ variant }) => {
     const pupil = data?.me?.pupil;
     const student = data?.me?.student;
     const email = data?.me?.email;
+    const nextStepAchievements: Achievement[] = !GAMIFICATION_ACTIVE ? [] : data?.me.nextStepAchievements ?? [];
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const roles = data?.myRoles ?? [];
@@ -176,6 +202,8 @@ const ImportantInformation: React.FC<Props> = ({ variant }) => {
         let infos: Information[] = [];
 
         // -------- Verification -----------
+        // TODO - remove if achievements are included
+
         if (student && !student?.verifiedAt)
             infos.push({
                 label: NextStepLabelType.VERIFY,
@@ -190,6 +218,7 @@ const ImportantInformation: React.FC<Props> = ({ variant }) => {
             });
 
         // -------- Screening -----------
+        // TODO - remove if achievements are included
         if (
             student?.canRequestMatch?.reason === 'not-screened' ||
             student?.canCreateCourse?.reason === 'not-screened' ||
@@ -268,6 +297,8 @@ const ImportantInformation: React.FC<Props> = ({ variant }) => {
             infos.push({ label: NextStepLabelType.PASSWORD, btnfn: [() => navigate('/new-password')], lang: {} });
 
         // -------- New Match -----------
+        // TODO - remove if achievements are included
+
         pupil?.matches?.forEach((match) => {
             if (!match.dissolved && match.createdAt > new Date(Date.now() - 14 * 24 * 60 * 60 * 1000))
                 infos.push({
@@ -289,6 +320,8 @@ const ImportantInformation: React.FC<Props> = ({ variant }) => {
         });
 
         // -------- Certificate of Conduct -----------
+        // TODO - remove if achievements are included [ONBOARDING]?
+
         if (student && student?.certificateOfConductDeactivationDate)
             infos.push({
                 label: NextStepLabelType.CERTIFICATE_OF_CONDUCT,
@@ -339,7 +372,7 @@ const ImportantInformation: React.FC<Props> = ({ variant }) => {
         return configurableInfos;
     }, [importantInformations, pupil, student]);
 
-    if (!infos.length && !configurableInfos.length) return null;
+    if (!infos.length && !configurableInfos.length && !nextStepAchievements.length) return null;
 
     return (
         <Box>
@@ -422,6 +455,24 @@ const ImportantInformation: React.FC<Props> = ({ variant }) => {
                         />
                     );
                 })}
+                {nextStepAchievements.map((achievement) => {
+                    return (
+                        <NextStepsCard
+                            key={achievement.id}
+                            image={achievement.image}
+                            title={achievement.subtitle || undefined}
+                            name={achievement.name}
+                            actionDescription={achievement.actionName || ''}
+                            description={achievement.description}
+                            actionType={achievement.actionType || Achievement_Action_Type_Enum.Action}
+                            maxSteps={achievement.maxSteps}
+                            currentStep={achievement.currentStep}
+                            onClick={() => {
+                                setSelectedAchievement(achievement);
+                            }}
+                        />
+                    );
+                })}
             </HSection>
         </Box>
     );