diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index 3b81bf7e..1da6251f 100644
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@@ -21,7 +21,7 @@
     "i18n:sort": "tsx ./src/i18n/check.ts --sort"
   },
   "dependencies": {
-    "@altinn/altinn-components": "^0.1.0",
+    "@altinn/altinn-components": "^0.6.8",
     "@digdir/designsystemet-css": "0.11.0-next.10",
     "@digdir/designsystemet-react": "1.0.0-next.15",
     "@digdir/designsystemet-theme": "1.0.0-next.14",
diff --git a/packages/frontend/src/App.tsx b/packages/frontend/src/App.tsx
index 6b85beec..75cb5625 100644
--- a/packages/frontend/src/App.tsx
+++ b/packages/frontend/src/App.tsx
@@ -1,5 +1,5 @@
 import { Navigate, Route, Routes } from 'react-router-dom';
-import { ProtectedPageLayout } from './components/PageLayout/PageLayout.tsx';
+import { ProtectedPageLayout } from './components/PageLayout/PageLayoutArbeidsFlate.tsx';
 import { Inbox } from './pages/Inbox';
 import { Routes as AppRoutes } from './pages/Inbox/Inbox.tsx';
 import { InboxItemPage } from './pages/InboxItemPage';
diff --git a/packages/frontend/src/api/useDialogs.tsx b/packages/frontend/src/api/useDialogs.tsx
index 0840fdd3..69f7fb62 100644
--- a/packages/frontend/src/api/useDialogs.tsx
+++ b/packages/frontend/src/api/useDialogs.tsx
@@ -20,11 +20,10 @@ import { getOrganization } from './organizations.ts';
 import { graphQLSDK } from './queries.ts';
 
 export type InboxViewType = 'inbox' | 'drafts' | 'sent' | 'archive' | 'bin';
+export type DialogsByView = { [key in InboxViewType]: InboxItemInput[] };
 interface UseDialogsOutput {
   dialogs: InboxItemInput[];
-  dialogsByView: {
-    [key in InboxViewType]: InboxItemInput[];
-  };
+  dialogsByView: DialogsByView;
   isSuccess: boolean;
   isLoading: boolean;
 }
diff --git a/packages/frontend/src/components/PageLayout/PageLayout.tsx b/packages/frontend/src/components/PageLayout/PageLayout.tsx
deleted file mode 100644
index d8fdec5d..00000000
--- a/packages/frontend/src/components/PageLayout/PageLayout.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import type { AvatarType } from '@altinn/altinn-components';
-import { useQueryClient } from '@tanstack/react-query';
-import cx from 'classnames';
-import type React from 'react';
-import { memo, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Outlet, useLocation, useSearchParams } from 'react-router-dom';
-import { Footer, Header, type ItemPerViewCount, Sidebar } from '..';
-import { useWindowSize } from '../../../utils/useWindowSize.tsx';
-import { useDialogs } from '../../api/useDialogs.tsx';
-import { useParties } from '../../api/useParties.ts';
-import { getSearchStringFromQueryParams } from '../../pages/Inbox/queryParams.ts';
-import { useSavedSearches } from '../../pages/SavedSearches/useSavedSearches.ts';
-import { useProfile } from '../../profile';
-import { BetaBanner } from '../BetaBanner/BetaBanner.tsx';
-import { BottomDrawerContainer } from '../BottomDrawer';
-import { useAuth } from '../Login/AuthContext.tsx';
-import { Snackbar } from '../Snackbar';
-import { SelectedDialogsContainer, useSelectedDialogs } from './SelectedDialogs.tsx';
-import styles from './pageLayout.module.css';
-
-export const useUpdateOnLocationChange = (fn: () => void) => {
-  const location = useLocation();
-  // biome-ignore lint/correctness/useExhaustiveDependencies: Full control of what triggers this code is needed
-  useEffect(() => {
-    fn();
-  }, [location, fn]);
-};
-
-interface PageLayoutContentProps {
-  name: string;
-  profile: AvatarType;
-  notificationCount?: number;
-}
-
-const PageLayoutContent: React.FC<PageLayoutContentProps> = memo(
-  ({ name, profile }: { name: string; profile: AvatarType }) => {
-    const { inSelectionMode } = useSelectedDialogs();
-    const { isTabletOrSmaller } = useWindowSize();
-    const showSidebar = !isTabletOrSmaller && !inSelectionMode;
-    const { selectedPartyIds, selectedParties } = useParties();
-    const { currentPartySavedSearches } = useSavedSearches(selectedPartyIds);
-    const { dialogsByView } = useDialogs(selectedParties);
-    const itemsPerViewCount = {
-      inbox: dialogsByView.inbox.filter((item) => !item.isSeenByEndUser).length,
-      drafts: dialogsByView.drafts.length,
-      sent: dialogsByView.sent.length,
-      'saved-searches': currentPartySavedSearches?.length ?? 0,
-      archive: dialogsByView.archive.length,
-      bin: dialogsByView.bin.length,
-    } as ItemPerViewCount;
-
-    return (
-      <>
-        <Header name={name} profile={profile} notificationCount={itemsPerViewCount.inbox} />
-        <div className={styles.pageLayout}>
-          {showSidebar && <Sidebar itemsPerViewCount={itemsPerViewCount} />}
-          <Outlet />
-        </div>
-        <Footer />
-      </>
-    );
-  },
-);
-
-const Background: React.FC<{ children: React.ReactNode; isCompany: boolean }> = ({ children, isCompany }) => {
-  const { inSelectionMode } = useSelectedDialogs();
-  return (
-    <div
-      data-testid="pageLayout-background"
-      className={cx(styles.background, {
-        isCompany: isCompany,
-        [styles.inSelectionMode]: inSelectionMode,
-      })}
-    >
-      {children}
-    </div>
-  );
-};
-
-export const ProtectedPageLayout = () => {
-  const { isAuthenticated } = useAuth();
-  if (!isAuthenticated) {
-    return null;
-  }
-  return <PageLayout />;
-};
-
-export const PageLayout: React.FC = () => {
-  const queryClient = useQueryClient();
-  const { t } = useTranslation();
-  const { selectedParties, allOrganizationsSelected, selectedProfile } = useParties();
-  const [searchParams] = useSearchParams();
-
-  useProfile();
-
-  const name = allOrganizationsSelected ? t('parties.labels.all_organizations') : selectedParties?.[0]?.name || '';
-
-  useUpdateOnLocationChange(() => {
-    const searchString = getSearchStringFromQueryParams(searchParams);
-    queryClient.setQueryData(['search'], () => searchString || '');
-  });
-
-  return (
-    <SelectedDialogsContainer>
-      <Background isCompany={selectedProfile === 'company'}>
-        <BottomDrawerContainer>
-          <BetaBanner />
-          <PageLayoutContent name={name} profile={selectedProfile} />
-          <Snackbar />
-        </BottomDrawerContainer>
-      </Background>
-    </SelectedDialogsContainer>
-  );
-};
diff --git a/packages/frontend/src/components/PageLayout/PageLayoutArbeidsFlate.tsx b/packages/frontend/src/components/PageLayout/PageLayoutArbeidsFlate.tsx
new file mode 100644
index 00000000..91796b6e
--- /dev/null
+++ b/packages/frontend/src/components/PageLayout/PageLayoutArbeidsFlate.tsx
@@ -0,0 +1,169 @@
+import { type FooterProps, type HeaderProps, Layout, type LayoutProps, RootProvider } from '@altinn/altinn-components';
+import { useQueryClient } from '@tanstack/react-query';
+import cx from 'classnames';
+import { type ChangeEvent, useEffect, useState } from 'react';
+import { Outlet, useLocation, useSearchParams } from 'react-router-dom';
+import { useDialogs } from '../../api/useDialogs.tsx';
+import { useParties } from '../../api/useParties.ts';
+import { getSearchStringFromQueryParams } from '../../pages/Inbox/queryParams.ts';
+import { useSavedSearches } from '../../pages/SavedSearches/useSavedSearches.ts';
+import { useProfile } from '../../profile';
+import { BetaBanner } from '../BetaBanner/BetaBanner';
+import { useSearchString } from '../Header';
+import { useAuth } from '../Login/AuthContext.tsx';
+import { useSidebarMenu } from '../Sidebar/useSidebarMenu.tsx';
+import { useSelectedDialogs } from './SelectedDialogs';
+import styles from './pageLayout.module.css';
+
+export const useUpdateOnLocationChange = (fn: () => void) => {
+  const location = useLocation();
+  // biome-ignore lint/correctness/useExhaustiveDependencies: Full control of what triggers this code is needed
+  useEffect(() => {
+    fn();
+  }, [location, fn]);
+};
+
+const Background: React.FC<{ children: React.ReactNode; isCompany: boolean }> = ({ children, isCompany }) => {
+  const { inSelectionMode } = useSelectedDialogs();
+  return (
+    <div
+      data-testid="pageLayout-background"
+      className={cx(styles.background, {
+        isCompany: isCompany,
+        [styles.inSelectionMode]: inSelectionMode,
+      })}
+    >
+      {children}
+    </div>
+  );
+};
+
+export const ProtectedPageLayout = () => {
+  const { isAuthenticated } = useAuth();
+  if (!isAuthenticated) {
+    return null;
+  }
+  return <PageLayoutArbeidsFlate />;
+};
+
+const footerLinks = [
+  {
+    href: 'https://info.altinn.no/om-altinn/',
+    resourceId: 'footer.nav.about_altinn',
+  },
+  {
+    href: 'https://info.altinn.no/om-altinn/driftsmeldinger/',
+    resourceId: 'footer.nav.service_messages',
+  },
+  {
+    href: 'https://info.altinn.no/om-altinn/personvern/',
+    resourceId: 'footer.nav.privacy_policy',
+  },
+  {
+    href: 'https://info.altinn.no/om-altinn/tilgjengelighet/',
+    resourceId: 'footer.nav.accessibility',
+  },
+];
+
+export const PageLayoutArbeidsFlate: React.FC = () => {
+  const [searchParams] = useSearchParams();
+  const [searchValue, setSearchValue] = useState<string>('');
+  const queryClient = useQueryClient();
+  const { setSearchString } = useSearchString();
+  const { selectedProfile, selectedParties, parties, selectedPartyIds } = useParties();
+  const { currentPartySavedSearches } = useSavedSearches(selectedPartyIds);
+  const { dialogsByView } = useDialogs(selectedParties);
+  const itemsPerViewCount = {
+    inbox: dialogsByView.inbox.filter((item) => !item.isSeenByEndUser).length,
+    drafts: dialogsByView.drafts.length,
+    sent: dialogsByView.sent.length,
+    'saved-searches': currentPartySavedSearches?.length ?? 0,
+    archive: dialogsByView.archive.length,
+    bin: dialogsByView.bin.length,
+  };
+
+  const sidebarMenu = useSidebarMenu({ itemsPerViewCount });
+
+  useProfile();
+
+  useUpdateOnLocationChange(() => {
+    const searchString = getSearchStringFromQueryParams(searchParams);
+    queryClient.setQueryData(['search'], () => searchString || '');
+  });
+
+  interface AccountMenuItem {
+    type: 'person' | 'company';
+    name: string;
+    id: string;
+    groupId?: string;
+    selected?: boolean;
+  }
+
+  const currentEndUser = selectedParties.find((party) => party.isCurrentEndUser);
+  const accounts: AccountMenuItem[] = parties.map((party) => ({
+    id: party.party,
+    name: party.name,
+    type: party.partyType.toLowerCase() as AccountMenuItem['type'],
+  }));
+
+  const endUserAccount = currentEndUser
+    ? { id: currentEndUser.party, name: currentEndUser.name, type: 'person' }
+    : {
+        id: '',
+        name: '',
+        type: 'person',
+      };
+
+  const headerProps: HeaderProps = {
+    currentAccount: endUserAccount as HeaderProps['currentAccount'],
+    menu: {
+      menuLabel: 'Meny',
+      items: [],
+      accounts,
+      changeLabel: 'Endre konto',
+      backLabel: 'Tilbake',
+    },
+    search: {
+      expanded: false,
+      name: 'search',
+      placeholder: 'Søk',
+      value: searchValue,
+      onClear: () => setSearchValue(''),
+      onChange: (event: ChangeEvent<HTMLInputElement>) => setSearchValue(event.target.value),
+      onEnter: () => setSearchString(searchValue),
+    },
+  };
+
+  const footerProps: FooterProps = {
+    address: 'Altinn AS, Postboks 6783 St. Olavs plass, 0130 Oslo',
+    menu: {
+      items: footerLinks.map((link) => ({
+        id: link.resourceId,
+        href: link.href,
+        text: link.resourceId,
+      })),
+    },
+  };
+
+  const layoutProps: LayoutProps = {
+    theme: selectedProfile,
+    header: headerProps,
+    footer: footerProps,
+    sidebar: {
+      theme: selectedProfile,
+      menu: sidebarMenu,
+    },
+    children: undefined,
+  };
+
+  return (
+    <Background isCompany={selectedProfile === 'company'}>
+      <BetaBanner />
+      <RootProvider>
+        <Layout theme={selectedProfile} {...layoutProps}>
+          <Outlet />
+        </Layout>
+      </RootProvider>
+    </Background>
+  );
+};
diff --git a/packages/frontend/src/components/PageLayout/index.ts b/packages/frontend/src/components/PageLayout/index.ts
index 99a793be..aebc2bdf 100644
--- a/packages/frontend/src/components/PageLayout/index.ts
+++ b/packages/frontend/src/components/PageLayout/index.ts
@@ -1,2 +1,2 @@
-export { PageLayout } from './PageLayout';
+export { PageLayoutArbeidsFlate } from './PageLayoutArbeidsFlate.tsx';
 export * from './SelectedDialogs';
diff --git a/packages/frontend/src/components/PageLayout/pageLayout.module.css b/packages/frontend/src/components/PageLayout/pageLayout.module.css
index 5432b732..e7925e77 100644
--- a/packages/frontend/src/components/PageLayout/pageLayout.module.css
+++ b/packages/frontend/src/components/PageLayout/pageLayout.module.css
@@ -1,45 +1,5 @@
-.pageLayout {
-  display: grid;
-  grid-template-areas: "sidebar main";
-  grid-template-columns: 226px 3fr;
-  grid-template-rows: auto 1fr auto;
-  grid-gap: 2rem;
-  max-width: calc(1280px - 2rem);
-  margin: 0 auto;
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-
 .background {
   min-height: 100vh;
   background: var(--background-color);
   overflow: auto;
 }
-
-.inSelectionMode.background {
-  background: var(--grey);
-}
-
-.pageLayout > header {
-  grid-area: header;
-}
-
-.pageLayout > main {
-  grid-area: main;
-  padding: 0;
-  width: 100%;
-  margin-right: auto;
-}
-
-.pageLayout > footer {
-  grid-area: footer;
-}
-
-@media (max-width: 1024px) {
-  .pageLayout {
-    grid-template-areas: "main main";
-    grid-template-columns: 1fr 3fr;
-    padding-left: 0;
-    padding-right: 0;
-  }
-}
diff --git a/packages/frontend/src/components/PartyDropdown/PartyDropdown.tsx b/packages/frontend/src/components/PartyDropdown/PartyDropdown.tsx
index ff5cdc7d..c6847fd5 100644
--- a/packages/frontend/src/components/PartyDropdown/PartyDropdown.tsx
+++ b/packages/frontend/src/components/PartyDropdown/PartyDropdown.tsx
@@ -1,12 +1,12 @@
 import { ChevronUpDownIcon } from '@navikt/aksel-icons';
 import { type Ref, forwardRef, useImperativeHandle, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useParties } from '../../api/useParties.ts';
+import { useParties } from '../../api/useParties';
 import { Backdrop } from '../Backdrop';
 import { DropdownList, DropdownMobileHeader } from '../DropdownMenu';
 import { ProfileButton } from '../ProfileButton';
-import type { SideBarView } from '../Sidebar';
-import { PartyListContainer } from './PartyListContainer.tsx';
+import type { SideBarView } from '../Sidebar/useSidebarMenu';
+import { PartyListContainer } from './PartyListContainer';
 
 interface PartyDropdownRef {
   openPartyDropdown: () => void;
diff --git a/packages/frontend/src/components/PartyDropdown/PartyListContainer.tsx b/packages/frontend/src/components/PartyDropdown/PartyListContainer.tsx
index b93b2f0c..a92d1092 100644
--- a/packages/frontend/src/components/PartyDropdown/PartyListContainer.tsx
+++ b/packages/frontend/src/components/PartyDropdown/PartyListContainer.tsx
@@ -3,10 +3,10 @@ import { useMemo } from 'react';
 import { useDialogs } from '../../api/useDialogs.tsx';
 import { useParties } from '../../api/useParties.ts';
 import { QUERY_KEYS } from '../../constants/queryKeys.ts';
-import { useSavedSearches } from '../../pages/SavedSearches/useSavedSearches.ts';
-import type { SideBarView } from '../Sidebar';
+import { useSavedSearches } from '../../pages/SavedSearches/useSavedSearches';
+import type { SideBarView } from '../Sidebar/useSidebarMenu';
 import { PartyList } from './PartyList.tsx';
-import { type PartyOptionGroup, getOptionsGroups } from './mapToPartyOption.ts';
+import { type PartyOptionGroup, getOptionsGroups } from './mapToPartyOption';
 
 interface PartyListAdapterProps {
   counterContext?: SideBarView;
diff --git a/packages/frontend/src/components/PartyDropdown/mapToPartyOption.ts b/packages/frontend/src/components/PartyDropdown/mapToPartyOption.ts
index 303a7657..d974eabf 100644
--- a/packages/frontend/src/components/PartyDropdown/mapToPartyOption.ts
+++ b/packages/frontend/src/components/PartyDropdown/mapToPartyOption.ts
@@ -2,7 +2,7 @@ import type { PartyFieldsFragment, SavedSearchesFieldsFragment } from 'bff-types
 import { t } from 'i18next';
 import type { InboxItemInput } from '../../pages/Inbox/Inbox.tsx';
 import { filterSavedSearches } from '../../pages/SavedSearches/useSavedSearches.ts';
-import type { SideBarView } from '../Sidebar';
+import type { SideBarView } from '../Sidebar/useSidebarMenu.tsx';
 
 type Dialog = {
   party: string;
diff --git a/packages/frontend/src/components/Sidebar/Sidebar.tsx b/packages/frontend/src/components/Sidebar/Sidebar.tsx
deleted file mode 100644
index 1431f808..00000000
--- a/packages/frontend/src/components/Sidebar/Sidebar.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import {
-  ArchiveIcon,
-  BookmarkIcon,
-  DocPencilIcon,
-  FileCheckmarkIcon,
-  InboxFillIcon,
-  TrashIcon,
-} from '@navikt/aksel-icons';
-import type React from 'react';
-import { useTranslation } from 'react-i18next';
-import { useLocation } from 'react-router-dom';
-import type { InboxViewType } from '../../api/useDialogs.tsx';
-import { Routes } from '../../pages/Inbox/Inbox';
-import { HorizontalLine } from '../HorizontalLine/';
-import { MenuItem } from '../MenuBar';
-import styles from './sidebar.module.css';
-
-export type SideBarView = InboxViewType | 'saved-searches' | 'archive' | 'bin';
-
-export type ItemPerViewCount = {
-  [key in SideBarView]: number;
-};
-export interface SidebarProps {
-  itemsPerViewCount: ItemPerViewCount;
-}
-
-/**
- * Sidebar component for displaying a navigational menu with various inbox-related views.
- *
- * @component
- *
- * @param {SidebarProps} props - The props for the Sidebar component.
- * @param {ItemPerViewCount} props.itemsPerViewCount - An object containing the count of items for each view.
- *
- * @returns {React.ReactElement} The rendered Sidebar component.
- *
- * @example
- * const itemsPerViewCount = {
- *   inbox: 10,
- *   drafts: 5,
- *   sent: 7,
- *   "saved-searches": 2,
- *   archive: 3,
- *   deleted: 1
- * };
- *
- * <Sidebar itemsPerViewCount={itemsPerViewCount} />
- */
-export const Sidebar: React.FC<SidebarProps> = ({ itemsPerViewCount }: SidebarProps): React.ReactElement => {
-  const { t } = useTranslation();
-  const { pathname } = useLocation();
-
-  return (
-    <aside className={styles.sidebar} data-testid="sidebar">
-      <ul className={styles.sidebarUl}>
-        <MenuItem
-          displayText={t('sidebar.inbox')}
-          toolTipText={t('sidebar.inbox.label')}
-          leftIcon={<InboxFillIcon />}
-          count={itemsPerViewCount.inbox}
-          path={Routes.inbox}
-          isActive={pathname === Routes.inbox}
-          isWhiteBackground
-          isInbox
-          largeText
-          useProfiledHover
-        />
-        <HorizontalLine />
-        <MenuItem
-          displayText={t('sidebar.drafts')}
-          toolTipText={t('sidebar.drafts.label')}
-          isWhiteBackground
-          leftIcon={<DocPencilIcon />}
-          count={itemsPerViewCount.drafts}
-          path={Routes.drafts}
-          isActive={pathname === Routes.drafts}
-          useProfiledHover
-        />
-        <MenuItem
-          displayText={t('sidebar.sent')}
-          toolTipText={t('sidebar.sent.label')}
-          leftIcon={<FileCheckmarkIcon />}
-          isWhiteBackground
-          count={itemsPerViewCount.sent}
-          path={Routes.sent}
-          isActive={pathname === Routes.sent}
-          useProfiledHover
-        />
-        <HorizontalLine />
-        <MenuItem
-          displayText={t('sidebar.saved_searches')}
-          toolTipText={t('sidebar.saved_searches.label')}
-          leftIcon={<BookmarkIcon />}
-          isWhiteBackground
-          count={itemsPerViewCount['saved-searches']}
-          path={Routes.savedSearches}
-          isActive={pathname === Routes.savedSearches}
-          useProfiledHover
-        />
-        <HorizontalLine />
-        <MenuItem
-          displayText={t('sidebar.archived')}
-          toolTipText={t('sidebar.archived.label')}
-          leftIcon={<ArchiveIcon />}
-          isWhiteBackground
-          count={itemsPerViewCount.archive}
-          path={Routes.archive}
-          isActive={pathname === Routes.archive}
-          useProfiledHover
-        />
-        <MenuItem
-          displayText={t('sidebar.deleted')}
-          toolTipText={t('sidebar.deleted.label')}
-          isWhiteBackground
-          leftIcon={<TrashIcon />}
-          count={itemsPerViewCount.bin}
-          isActive={pathname === Routes.bin}
-          path={Routes.bin}
-          className={styles.lastItem}
-          useProfiledHover
-        />
-      </ul>
-    </aside>
-  );
-};
diff --git a/packages/frontend/src/components/Sidebar/index.ts b/packages/frontend/src/components/Sidebar/index.ts
deleted file mode 100644
index 80476400..00000000
--- a/packages/frontend/src/components/Sidebar/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Sidebar.tsx';
diff --git a/packages/frontend/src/components/Sidebar/sidebar.module.css b/packages/frontend/src/components/Sidebar/sidebar.module.css
deleted file mode 100644
index ac404dfd..00000000
--- a/packages/frontend/src/components/Sidebar/sidebar.module.css
+++ /dev/null
@@ -1,21 +0,0 @@
-.sidebar {
-  display: flex;
-  flex-direction: column;
-  grid-area: sidebar;
-  min-width: 14rem;
-  max-width: 14rem;
-  padding-top: 0.6rem;
-}
-
-.sidebarUl {
-  overflow: visible;
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
-  width: 100%;
-}
-
-.lastItem {
-  margin-top: 0;
-  margin-bottom: 1rem;
-}
diff --git a/packages/frontend/src/components/Sidebar/useSidebarMenu.tsx b/packages/frontend/src/components/Sidebar/useSidebarMenu.tsx
new file mode 100644
index 00000000..026be809
--- /dev/null
+++ b/packages/frontend/src/components/Sidebar/useSidebarMenu.tsx
@@ -0,0 +1,86 @@
+import type { BadgeColor, BadgeProps, MenuProps } from '@altinn/altinn-components';
+import { useTranslation } from 'react-i18next';
+import { useLocation } from 'react-router-dom';
+import type { InboxViewType } from '../../api/useDialogs.tsx';
+import { Routes } from '../../pages/Inbox/Inbox';
+export type SideBarView = InboxViewType | 'saved-searches' | 'archive' | 'bin';
+
+export type ItemPerViewCount = {
+  [key in SideBarView]: number;
+};
+
+interface UseSidebarProps {
+  itemsPerViewCount: ItemPerViewCount;
+}
+
+const getBadgeProps = (count: number, color?: BadgeColor): BadgeProps | undefined => {
+  if (count > 0) {
+    return {
+      label: count.toString(),
+      size: 'sm',
+      color,
+    };
+  }
+};
+
+export const useSidebarMenu = ({ itemsPerViewCount }: UseSidebarProps): MenuProps => {
+  const { t } = useTranslation();
+  const { pathname } = useLocation();
+
+  return {
+    groups: {},
+    items: [
+      {
+        id: '1',
+        groupId: '1',
+        size: 'lg',
+        icon: 'inbox',
+        title: t('sidebar.inbox'),
+        color: 'strong',
+        badge: getBadgeProps(itemsPerViewCount.inbox, 'alert'),
+        selected: pathname === Routes.inbox,
+      },
+      {
+        id: '2',
+        groupId: '2',
+        icon: 'doc-pencil',
+        title: t('sidebar.drafts'),
+        badge: getBadgeProps(itemsPerViewCount.drafts),
+        selected: pathname === Routes.drafts,
+      },
+      {
+        id: '3',
+        groupId: '2',
+        icon: 'file-checkmark',
+        title: t('sidebar.sent'),
+        badge: getBadgeProps(itemsPerViewCount.sent),
+        selected: pathname === Routes.sent,
+      },
+      {
+        id: '4',
+        groupId: '3',
+        icon: 'bookmark',
+        title: t('sidebar.saved_searches'),
+        badge: getBadgeProps(itemsPerViewCount['saved-searches']),
+        selected: pathname === Routes.savedSearches,
+      },
+      {
+        id: '5',
+        groupId: '4',
+        icon: 'archive',
+        title: t('sidebar.archived'),
+        badge: getBadgeProps(itemsPerViewCount.archive),
+        selected: pathname === Routes.archive,
+      },
+      {
+        id: '6',
+        groupId: '4',
+        disabled: true,
+        icon: 'trash',
+        title: t('sidebar.deleted'),
+        badge: getBadgeProps(itemsPerViewCount.bin),
+        selected: pathname === Routes.bin,
+      },
+    ],
+  };
+};
diff --git a/packages/frontend/src/components/index.ts b/packages/frontend/src/components/index.ts
index 3ede01d4..02468f6c 100644
--- a/packages/frontend/src/components/index.ts
+++ b/packages/frontend/src/components/index.ts
@@ -1,7 +1,6 @@
 export * from './Header';
 export * from './BackButton';
 export * from './InboxItem';
-export * from './Sidebar';
 export * from './Footer';
 export * from './ActionPanel';
 export * from './FilterBar';
diff --git a/packages/frontend/src/globals.css b/packages/frontend/src/globals.css
index a0c59b66..e6dfd94b 100644
--- a/packages/frontend/src/globals.css
+++ b/packages/frontend/src/globals.css
@@ -1,4 +1,5 @@
 /* GLOBAL VARIABLES */
+@import "@altinn/altinn-components/dist/global.css";
 
 :root {
   /* Layer 0 - Raw colors */
diff --git a/packages/storybook/src/stories/Sidebar/Sidebar.stories.tsx b/packages/storybook/src/stories/Sidebar/Sidebar.stories.tsx
deleted file mode 100644
index 63a47da0..00000000
--- a/packages/storybook/src/stories/Sidebar/Sidebar.stories.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { type ItemPerViewCount, Sidebar } from 'frontend';
-import { withRouter } from 'storybook-addon-react-router-v6';
-
-const meta = {
-  title: 'Components/Sidebar',
-  component: Sidebar,
-  decorators: [withRouter],
-  tags: ['autodocs'],
-  argTypes: {
-    isCompany: {
-      control: 'boolean',
-      description: 'Optional flag to indicate if the sidebar is being used in a company context.',
-      defaultValue: false,
-    },
-    itemsPerViewCount: {
-      control: 'object',
-      description: 'An object containing the count of items for each view.',
-    },
-  },
-} satisfies Meta<typeof Sidebar>;
-
-export default meta;
-
-type Story = StoryObj<typeof Sidebar>;
-
-const defaultItemsPerViewCount: ItemPerViewCount = {
-  inbox: 5,
-  drafts: 3,
-  sent: 2,
-  'saved-searches': 1,
-  archive: 0,
-  deleted: 0,
-};
-
-export const simpleDesktopExampleCompany: Story = (args) => (
-  <div className={args.isCompany ? 'isCompany' : ''}>
-    <Sidebar {...args} />
-  </div>
-);
-
-simpleDesktopExampleCompany.args = {
-  isCompany: true,
-  itemsPerViewCount: defaultItemsPerViewCount,
-};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index dcc0bc48..28daa0be 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -398,8 +398,8 @@ importers:
   packages/frontend:
     dependencies:
       '@altinn/altinn-components':
-        specifier: ^0.1.0
-        version: 0.1.0(react@18.3.1)
+        specifier: ^0.6.8
+        version: 0.6.8(react-dom@18.3.1)(react@18.3.1)
       '@digdir/designsystemet-css':
         specifier: 0.11.0-next.10
         version: 0.11.0-next.10
@@ -843,14 +843,16 @@ packages:
       '@algolia/requester-common': 4.24.0
     dev: false
 
-  /@altinn/altinn-components@0.1.0(react@18.3.1):
-    resolution: {integrity: sha512-Wuarl5vPJLpw4DzM4ursKst9Y8VFT4XVrzaDD17shanfTNtIGNXaXmyMvKMZXFQLR6hXiRl7WYMG3gj/FlNydw==}
+  /@altinn/altinn-components@0.6.8(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-KkES3Whb1LMlAGYBz52xfwX33XBnO9omIN+4mn3/sX/3Hu0kOTo50L+WPvDEsoBlcGRgqLd5y7zkpWEj3QYM/w==}
     peerDependencies:
-      react: '>=18'
+      react: '>=18.3.1'
+      react-dom: '>=18.3.1'
     dependencies:
-      '@navikt/aksel-icons': 7.4.2
+      '@navikt/aksel-icons': 7.5.3
       classnames: 2.5.1
       react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     dev: false
 
   /@ampproject/remapping@2.3.0:
@@ -5927,8 +5929,8 @@ packages:
     resolution: {integrity: sha512-n+1AsE9kRFh3C7BcD0fAJhIA6/65PsLGrpNKnLQUjW8hwESzo1LYHfZgZXi2Shaw2hCzQ1wx/hBBdwtQfUiBNg==}
     dev: false
 
-  /@navikt/aksel-icons@7.4.2:
-    resolution: {integrity: sha512-Oltbsmh7QUmqAtRaQp+EOP0J//DCZ1WZT+5N7Fgnu6xzbOcI+bSzc7xDm4kuBVcxQjBTCbSSR1Z9gWQJ+4Mmdg==}
+  /@navikt/aksel-icons@7.5.3:
+    resolution: {integrity: sha512-N4uaddfmZMp4Xm6h/WprY+8O7io9KwDX167h+o2/97ySN0zbcPxDyskWKjwplOlZg/SjoVuY45M/xqlkUa6byg==}
     dev: false
 
   /@nevware21/ts-async@0.5.2: