diff --git a/frontend/src/app/[organisation]/bemanning/page.tsx b/frontend/src/app/[organisation]/bemanning/page.tsx
index 6563ced0..14d6f458 100644
--- a/frontend/src/app/[organisation]/bemanning/page.tsx
+++ b/frontend/src/app/[organisation]/bemanning/page.tsx
@@ -36,7 +36,7 @@ export default async function Bemanning({
     >
       <StaffingSidebar />
 
-      <div className="main pl-12 p-6 w-full">
+      <div className="main pl-12 p-6 w-full flex flex-col gap-8">
         <h1>Bemanning</h1>
         <FilteredConsultantsList />
         <InfoPillDescriptions />
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index d9b1f564..b9fac6a4 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -115,6 +115,12 @@
     line-height: 0.875rem;
   }
 
+  .interaction-button {
+    font-size: 0.9rem;
+    font-family: "Graphik-SemiBold";
+    line-height: 1rem;
+  }
+
   .detail-pill-text {
     font-size: 0.652rem;
     font-family: "Graphik-Regular";
diff --git a/frontend/src/components/ActiveFilters.tsx b/frontend/src/components/ActiveFilters.tsx
index f98b4524..6332cb38 100644
--- a/frontend/src/components/ActiveFilters.tsx
+++ b/frontend/src/components/ActiveFilters.tsx
@@ -23,13 +23,13 @@ export default function ActiveFilters() {
   const filterSummaryText = filterTextComponents.join(", ");
 
   return (
-    <>
+    <div className="h-4">
       {filterSummaryText != "" && (
         <div className="flex flex-row gap-[5px] text-primary_default items-center">
           <Filter size="12" />{" "}
           <p className="body-small-bold"> {filterSummaryText} </p>
         </div>
       )}
-    </>
+    </div>
   );
 }
diff --git a/frontend/src/components/AvailabilityFilter.tsx b/frontend/src/components/AvailabilityFilter.tsx
index ecfddf76..bc2c89b4 100644
--- a/frontend/src/components/AvailabilityFilter.tsx
+++ b/frontend/src/components/AvailabilityFilter.tsx
@@ -9,13 +9,11 @@ export default function AvailabilityFilter() {
   return (
     <div className="flex flex-col gap-2">
       <p className="body-small">Status</p>
-      <div className="flex flex-col gap-2 w-52">
-        <FilterButton
-          label={"Ledig tid"}
-          onClick={() => toggleAvailabilityFilter(!availabilityFilterOn)}
-          checked={availabilityFilterOn}
-        />
-      </div>
+      <FilterButton
+        label={"Ledig tid"}
+        onClick={() => toggleAvailabilityFilter(!availabilityFilterOn)}
+        checked={availabilityFilterOn}
+      />
     </div>
   );
 }
diff --git a/frontend/src/components/DepartmentFilter.tsx b/frontend/src/components/DepartmentFilter.tsx
index 76eb3b48..a0be17d6 100644
--- a/frontend/src/components/DepartmentFilter.tsx
+++ b/frontend/src/components/DepartmentFilter.tsx
@@ -18,21 +18,19 @@ export default function DepartmentFilter() {
     });
 
     return (
-      <div>
-        <div className="flex flex-col gap-2">
-          <p className="body-small">Avdeling</p>
-          <div className="flex flex-col gap-2 w-52">
-            {departments?.map((department, index) => (
-              <FilterButton
-                key={department.id}
-                label={department.name}
-                onClick={() => toggleDepartmentFilter(department)}
-                checked={filteredDepartments
-                  .map((d) => d.id)
-                  .includes(department.id)}
-              />
-            ))}
-          </div>
+      <div className="flex flex-col gap-2">
+        <p className="body-small">Avdeling</p>
+        <div className="flex flex-col gap-2 w-52">
+          {departments?.map((department, index) => (
+            <FilterButton
+              key={department.id}
+              label={department.name}
+              onClick={() => toggleDepartmentFilter(department)}
+              checked={filteredDepartments
+                .map((d) => d.id)
+                .includes(department.id)}
+            />
+          ))}
         </div>
       </div>
     );
diff --git a/frontend/src/components/ExperienceFilter.tsx b/frontend/src/components/ExperienceFilter.tsx
index 3a9b63bf..0637fcbb 100644
--- a/frontend/src/components/ExperienceFilter.tsx
+++ b/frontend/src/components/ExperienceFilter.tsx
@@ -16,21 +16,19 @@ export default function ExperienceFilter() {
 
   if (yearRanges.length > 0) {
     return (
-      <div>
-        <div className="flex flex-col gap-2">
-          <p className="body-small">Erfaring</p>
-          <div className="flex flex-col gap-2 w-52">
-            {yearRanges?.map((range, index) => (
-              <FilterButton
-                key={range.label}
-                label={range.label}
-                onClick={() => toggleYearFilter(range)}
-                checked={filteredYears
-                  .map((y) => y.urlString)
-                  .includes(range.urlString)}
-              />
-            ))}
-          </div>
+      <div className="flex flex-col gap-2">
+        <p className="body-small">Erfaring</p>
+        <div className="flex flex-col gap-2 w-52">
+          {yearRanges?.map((range, index) => (
+            <FilterButton
+              key={range.label}
+              label={range.label}
+              onClick={() => toggleYearFilter(range)}
+              checked={filteredYears
+                .map((y) => y.urlString)
+                .includes(range.urlString)}
+            />
+          ))}
         </div>
       </div>
     );
diff --git a/frontend/src/components/FilteredConsultantsList.tsx b/frontend/src/components/FilteredConsultantsList.tsx
index ce9d4dc1..e9b61874 100644
--- a/frontend/src/components/FilteredConsultantsList.tsx
+++ b/frontend/src/components/FilteredConsultantsList.tsx
@@ -14,8 +14,8 @@ export default function FilteredConsultantList() {
   }
 
   return (
-    <div>
-      <div>
+    <div className="flex flex-col gap-8">
+      <div className="flex flex-col gap-4">
         <ActiveFilters />
         <WeekSelection />
       </div>
@@ -32,12 +32,9 @@ export default function FilteredConsultantList() {
             <th colSpan={2}>
               <div className="flex flex-row gap-3 pb-4 items-center">
                 <p className="body-large-bold ">Konsulenter</p>
-
-                <div className="rounded-full bg-primary_l3 px-2 py-1">
-                  <p className="text-primary_default body-small-bold">
-                    {consultants?.length}
-                  </p>
-                </div>
+                <p className="text-primary_default body-small-bold rounded-full bg-primary_l3 px-2 py-1">
+                  {consultants?.length}
+                </p>
               </div>
             </th>
             {consultants.at(0)?.bookings?.map((booking) => (
diff --git a/frontend/src/components/IconSecondaryButton.tsx b/frontend/src/components/IconSecondaryButton.tsx
new file mode 100644
index 00000000..b5612829
--- /dev/null
+++ b/frontend/src/components/IconSecondaryButton.tsx
@@ -0,0 +1,18 @@
+import { ReactElement } from "react";
+
+export default function IconSecondaryButton({
+  icon,
+  onClick,
+}: {
+  icon: ReactElement;
+  onClick?: () => void;
+}) {
+  return (
+    <button
+      className="p-2 text-primary_default rounded-lg border border-primary_l1 hover:bg-primary_default hover:border-primary_default hover:bg-opacity-10"
+      onClick={onClick}
+    >
+      {icon}
+    </button>
+  );
+}
diff --git a/frontend/src/components/InfoPillDescriptions.tsx b/frontend/src/components/InfoPillDescriptions.tsx
index 30792ff4..dfb3e0b6 100644
--- a/frontend/src/components/InfoPillDescriptions.tsx
+++ b/frontend/src/components/InfoPillDescriptions.tsx
@@ -3,7 +3,7 @@ import { AlertTriangle, Calendar, Coffee, FileText, Sun } from "react-feather";
 
 export default function InfoPillDescriptions() {
   return (
-    <div className="mt-8 flex flex-row gap-2">
+    <div className="flex flex-row gap-2">
       <InfoPill
         text={"Ledig tid"}
         colors="bg-free_light text-free_dark"
diff --git a/frontend/src/components/PrimaryButton.tsx b/frontend/src/components/PrimaryButton.tsx
index 6cff6b98..bf79cd20 100644
--- a/frontend/src/components/PrimaryButton.tsx
+++ b/frontend/src/components/PrimaryButton.tsx
@@ -7,10 +7,10 @@ export default function PrimaryButton({
 }) {
   return (
     <button
-      className="h-10 p-3 bg-primary_default rounded-lg justify-center items-center gap-2 inline-flex"
+      className="interaction-button px-2 py-3 bg-primary_default rounded-lg text-white "
       onClick={onClick}
     >
-      <div className="text-white text-sm leading-none">{label}</div>
+      {label}
     </button>
   );
 }
diff --git a/frontend/src/components/SearchBarComponent.tsx b/frontend/src/components/SearchBarComponent.tsx
index c7cd1a99..c033f39f 100644
--- a/frontend/src/components/SearchBarComponent.tsx
+++ b/frontend/src/components/SearchBarComponent.tsx
@@ -49,10 +49,10 @@ export default function SearchBarComponent({
           onFocus={() => console.log("F")}
         />
       ) : (
-        <div className={`flex flex-col gap-2 rounded-lg`}>
+        <div className={`flex flex-col gap-2`}>
           <p className="body-small">Søk</p>
           <div
-            className={`flex flex-row gap-2 border
+            className={`flex flex-row gap-2 border rounded-lg
             px-3 py-2 w-full hover:bg-primary_l4 hover:border-primary_default ${
               searchIsActive ? "border-primary_default" : "border-primary_l1"
             } `}
@@ -68,7 +68,7 @@ export default function SearchBarComponent({
               value={currentNameSearch}
               onFocus={() => setIsSearchActive(true)}
               onBlur={() => setIsSearchActive(false)}
-            ></input>
+            />
           </div>
         </div>
       )}
diff --git a/frontend/src/components/SecondaryButton.tsx b/frontend/src/components/SecondaryButton.tsx
index aff6093f..395bfa91 100644
--- a/frontend/src/components/SecondaryButton.tsx
+++ b/frontend/src/components/SecondaryButton.tsx
@@ -7,12 +7,10 @@ export default function SecondaryButton({
 }) {
   return (
     <button
-      className="h-10 p-3 rounded-lg border border-primary_l1 justify-center items-center gap-2 inline-flex hover:bg-primary_default hover:border-primary_default hover:bg-opacity-10"
+      className="interaction-button py-3 px-2 rounded-lg border border-primary_l1  hover:bg-primary_default hover:border-primary_default hover:bg-opacity-10 text-primary_default"
       onClick={onClick}
     >
-      <div className=" text-primary_default text-sm font-semibold leading-none">
-        {label}
-      </div>
+      {label}
     </button>
   );
 }
diff --git a/frontend/src/components/StaffingSidebar.tsx b/frontend/src/components/StaffingSidebar.tsx
index 6e0c294c..9b747a28 100644
--- a/frontend/src/components/StaffingSidebar.tsx
+++ b/frontend/src/components/StaffingSidebar.tsx
@@ -13,7 +13,7 @@ export default function StaffingSidebar() {
     <div className="sidebar z-10">
       {!isSidebarHidden ? (
         <div className=" bg-primary_l4 h-full flex flex-col gap-6 p-8 w-[300px]">
-          <div className="flex flex-row justify-between">
+          <div className="flex flex-row justify-between items-center">
             <h3 className="">Filter</h3>
             <button
               onClick={() => setIsSidebarHidden(true)}
diff --git a/frontend/src/components/WeekSelection.tsx b/frontend/src/components/WeekSelection.tsx
index f4f74cd1..4e89b2e9 100644
--- a/frontend/src/components/WeekSelection.tsx
+++ b/frontend/src/components/WeekSelection.tsx
@@ -1,6 +1,8 @@
 "use client";
 import { useFilteredConsultants } from "@/hooks/useFilteredConsultants";
 import SecondaryButton from "@/components/SecondaryButton";
+import { ArrowLeft, ArrowRight } from "react-feather";
+import IconSecondaryButton from "./IconSecondaryButton";
 
 export default function WeekSelection() {
   const { incrementSelectedWeek, resetSelectedWeek, decrementSelectedWeek } =
@@ -8,9 +10,15 @@ export default function WeekSelection() {
 
   return (
     <div className="flex flex-row gap-1">
-      <SecondaryButton label={"<"} onClick={decrementSelectedWeek} />
       <SecondaryButton label={"Denne uka"} onClick={resetSelectedWeek} />
-      <SecondaryButton label={">"} onClick={incrementSelectedWeek} />
+      <IconSecondaryButton
+        icon={<ArrowLeft size={24} />}
+        onClick={decrementSelectedWeek}
+      />
+      <IconSecondaryButton
+        icon={<ArrowRight size={24} />}
+        onClick={incrementSelectedWeek}
+      />
     </div>
   );
 }
diff --git a/frontend/src/hooks/useFilteredConsultants.ts b/frontend/src/hooks/useFilteredConsultants.ts
index 8130c505..a424ee07 100644
--- a/frontend/src/hooks/useFilteredConsultants.ts
+++ b/frontend/src/hooks/useFilteredConsultants.ts
@@ -69,7 +69,7 @@ export function useFilteredConsultants() {
         })
       : DateTime.now();
 
-    let newDate = date.plus({ week: 1 });
+    let newDate = date.plus({ week: 7 }); //TODO: change to shownWeeks when week filter is added
     updateRoute({
       week: { year: newDate.year, weekNumber: newDate.weekNumber },
     });
@@ -83,7 +83,7 @@ export function useFilteredConsultants() {
         })
       : DateTime.now();
 
-    let newDate = date.plus({ week: -1 });
+    let newDate = date.plus({ week: -7 });
     updateRoute({
       week: { year: newDate.year, weekNumber: newDate.weekNumber },
     });