diff --git a/src/contexts/arbeidssokerperioder.tsx b/src/contexts/arbeidssokerperioder.tsx
new file mode 100644
index 00000000..9a824d9f
--- /dev/null
+++ b/src/contexts/arbeidssokerperioder.tsx
@@ -0,0 +1,78 @@
+import { createContext, ReactNode, useContext, useEffect, useState } from 'react';
+
+import { useFeatureToggleData, FeatureToggles } from './feature-toggles';
+
+import { fetchToJson } from '../ducks/api-utils';
+import { ARBEIDSOKERPERIODER_URL, requestConfig } from '../ducks/api';
+
+export type ArbeidssokerperiodeUtfoertAv = {
+    type: string;
+};
+
+export type ArbeidssokerperiodeMetadata = {
+    tidspunkt: string;
+    utfoertAv: ArbeidssokerperiodeUtfoertAv;
+    kilde: string;
+    aarsak: string;
+};
+
+export type ArbeidssokerPeriode = {
+    perioderId: string;
+    startet: ArbeidssokerperiodeMetadata;
+    avsluttet: ArbeidssokerperiodeMetadata;
+};
+
+export type ArbeidssokerperioderResponse = ArbeidssokerPeriode[] | [];
+
+interface ArbeidssokerperioderProviderType {
+    arbeidssokerperioder: ArbeidssokerperioderResponse;
+}
+
+export const ArbeidssokerperioderContext = createContext<ArbeidssokerperioderProviderType>({
+    arbeidssokerperioder: [],
+});
+
+function ArbeidssokerperioderProvider(props: { children: ReactNode }) {
+    const featureToggles = useFeatureToggleData();
+    const [arbeidssokerperioder, settArbeidssokerperioder] = useState<ArbeidssokerperioderResponse>([]);
+
+    const erToggletPa = featureToggles[FeatureToggles.BRUK_OPPLYSNINGER_API];
+
+    const hentArbeidssokerperioder = async () => {
+        try {
+            const oppdaterteArbeidssokerperioder = await fetchToJson(ARBEIDSOKERPERIODER_URL, requestConfig());
+            if (oppdaterteArbeidssokerperioder) {
+                settArbeidssokerperioder(oppdaterteArbeidssokerperioder as ArbeidssokerperioderResponse);
+            }
+        } catch (error) {
+            console.error(error);
+        }
+    };
+
+    useEffect(() => {
+        if (erToggletPa) {
+            hentArbeidssokerperioder();
+        }
+    }, [erToggletPa]);
+
+    const contextValue = {
+        arbeidssokerperioder,
+    };
+
+    return (
+        <ArbeidssokerperioderContext.Provider value={contextValue}>
+            {props.children}
+        </ArbeidssokerperioderContext.Provider>
+    );
+}
+
+function useArbeidssokerperioder() {
+    const context = useContext(ArbeidssokerperioderContext);
+
+    if (context === undefined) {
+        throw new Error('useArbeidssokerperioder må brukes under en ArbeidssokerperioderProvider');
+    }
+    return context;
+}
+
+export { ArbeidssokerperioderProvider, useArbeidssokerperioder };
diff --git a/src/demo/setup-demo-mock.ts b/src/demo/setup-demo-mock.ts
index 3ff98adb..7fe94b30 100644
--- a/src/demo/setup-demo-mock.ts
+++ b/src/demo/setup-demo-mock.ts
@@ -22,6 +22,7 @@ import {
     PROFIL_URL,
     REAKTIVERING_URL,
     ULESTEDIALOGER_URL,
+    ARBEIDSOKERPERIODER_URL,
 } from '../ducks/api';
 
 import {
@@ -55,6 +56,7 @@ import {
 } from './demo-state-behov-for-veiledning';
 import levertMeldekortMock from '../mocks/meldeplikt-hendelser.mock';
 import arbeidssokerInnholdMock from '../mocks/arbeidssoker-innhold-mock';
+import arbeidssokerperioderMock from '../mocks/arbeidssokerperioder-mock';
 
 export const demo_handlers = [
     msw_get(ULESTEDIALOGER_URL, {
@@ -113,6 +115,7 @@ export const demo_handlers = [
     }),
 
     msw_get(ER_STANDARD_INNSATSGRUPPE_URL, hentStandardInnsatsgruppe().standardInnsatsgruppe),
+    msw_get(ARBEIDSOKERPERIODER_URL, arbeidssokerperioderMock),
     http.get(`${MELDEPLIKT_URL}/siste`, () => {
         // eslint-disable-next-line no-restricted-globals
         const valg = hentDemoState(DemoData.ARBEIDSSOKER_NESTE_PERIODE);
diff --git a/src/main-standard.tsx b/src/main-standard.tsx
index f55356d7..de31edcc 100644
--- a/src/main-standard.tsx
+++ b/src/main-standard.tsx
@@ -19,6 +19,7 @@ import { MeldepliktProvider } from './contexts/meldeplikt';
 import StandardWrapper from './standard-wrapper';
 import { WindowInnerWidthProvider } from './contexts/window-inner-width';
 import { StandardBundleProvider } from './contexts/standard-bundle';
+import { ArbeidssokerperioderProvider } from './contexts/arbeidssokerperioder';
 
 const Mikrofrontend = () => {
     const [state, setState] = React.useState<Autentisering.State>(Autentisering.initialState);
@@ -67,15 +68,17 @@ const Mikrofrontend = () => {
                         <SprakValg.SprakContext.Provider value={valgtSprak}>
                             <StandardBundleProvider erStandardBundle={true}>
                                 <ArbeidssokerDataProvider erStandard>
-                                    <MeldepliktProvider>
-                                        <ReaktiveringProvider>
-                                            <BesvarelseProvider>
-                                                <WindowInnerWidthProvider>
-                                                    <StandardWrapper />
-                                                </WindowInnerWidthProvider>
-                                            </BesvarelseProvider>
-                                        </ReaktiveringProvider>
-                                    </MeldepliktProvider>
+                                    <ArbeidssokerperioderProvider>
+                                        <MeldepliktProvider>
+                                            <ReaktiveringProvider>
+                                                <BesvarelseProvider>
+                                                    <WindowInnerWidthProvider>
+                                                        <StandardWrapper />
+                                                    </WindowInnerWidthProvider>
+                                                </BesvarelseProvider>
+                                            </ReaktiveringProvider>
+                                        </MeldepliktProvider>
+                                    </ArbeidssokerperioderProvider>
                                 </ArbeidssokerDataProvider>
                             </StandardBundleProvider>
                         </SprakValg.SprakContext.Provider>
diff --git a/src/main.tsx b/src/main.tsx
index cac17e8a..691bd3e3 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -13,6 +13,7 @@ import './index.css';
 import * as Arbeidssoker from './contexts/arbeidssoker';
 import * as FeatureToggle from './contexts/feature-toggles';
 import * as SprakValg from './contexts/sprak';
+import { ArbeidssokerperioderProvider } from './contexts/arbeidssokerperioder';
 
 const Mikrofrontend = () => {
     const [state, setState] = React.useState<Autentisering.State>(Autentisering.initialState);
@@ -58,7 +59,9 @@ const Mikrofrontend = () => {
                 <Arbeidssoker.ArbeidssokerContext.Provider value={arbeidssokerState}>
                     <FeatureToggle.FeaturetoggleContext.Provider value={featureToggleState}>
                         <SprakValg.SprakContext.Provider value={valgtSprak}>
-                            <Innhold />
+                            <ArbeidssokerperioderProvider>
+                                <Innhold />
+                            </ArbeidssokerperioderProvider>
                         </SprakValg.SprakContext.Provider>
                     </FeatureToggle.FeaturetoggleContext.Provider>
                 </Arbeidssoker.ArbeidssokerContext.Provider>
diff --git a/src/mocks/arbeidssokerperioder-mock.ts b/src/mocks/arbeidssokerperioder-mock.ts
new file mode 100644
index 00000000..46089235
--- /dev/null
+++ b/src/mocks/arbeidssokerperioder-mock.ts
@@ -0,0 +1,23 @@
+const arbeidssokerperioderMock = [
+    {
+        periodeId: '3fa85f64-5717-4562-b3fc-2c963f66afa6',
+        startet: {
+            tidspunkt: {},
+            utfoertAv: {
+                type: 'UKJENT_VERDI',
+            },
+            kilde: 'string',
+            aarsak: 'string',
+        },
+        avsluttet: {
+            tidspunkt: {},
+            utfoertAv: {
+                type: 'UKJENT_VERDI',
+            },
+            kilde: 'string',
+            aarsak: 'string',
+        },
+    },
+];
+
+export default arbeidssokerperioderMock;
diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts
index c0e0e736..abbdd75b 100644
--- a/src/mocks/handlers.ts
+++ b/src/mocks/handlers.ts
@@ -27,10 +27,12 @@ import {
     PROFIL_URL,
     REAKTIVERING_URL,
     ULESTEDIALOGER_URL,
+    ARBEIDSOKERPERIODER_URL,
 } from '../ducks/api';
 import arbeidssokerNiva3Response from './arbeidssoker-niva3-mock';
 import levertMeldekortMock from './meldeplikt-hendelser.mock';
 import arbeidssokerInnholdMock from './arbeidssoker-innhold-mock';
+import arbeidssokerperioderMock from './arbeidssokerperioder-mock';
 
 export const handlers = [
     msw_get(AUTH_API, AuthResponse),
@@ -52,4 +54,5 @@ export const handlers = [
     msw_get(PROFIL_URL, null, 204),
     msw_get(REAKTIVERING_URL, null, 204),
     msw_get(ARBEIDSOKER_INNHOLD, arbeidssokerInnholdMock, 200),
+    msw_get(ARBEIDSOKERPERIODER_URL, arbeidssokerperioderMock, 200),
 ];