diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index c5312d0b..a612eaa9 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -3,6 +3,7 @@
     "esbenp.prettier-vscode",
     "bradlc.vscode-tailwindcss",
     "lokalise.i18n-ally",
-    "vivaxy.vscode-conventional-commits"
+    "vivaxy.vscode-conventional-commits",
+    "oven.bun-vscode"
   ]
 }
diff --git a/bun.lockb b/bun.lockb
index b563b58b..e9eb93c3 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/messages/en.json b/messages/en.json
index b62c935d..4c2e8499 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -2,6 +2,14 @@
   "meta": {
     "description": "Hackerspace NTNU, a student-led project open to all students, offers access to new technology like 3D printers and VR equipment. Our members provide varied expertise to help with your projects, from making an LED light blink to creating a 3D model. Visit our workshop or join our Slack channel for assistance or a friendly chat."
   },
+  "ui": {
+    "close": "Close",
+    "previous": "Previous",
+    "goToPreviousPage": "Go to previous page",
+    "next": "Next",
+    "goToNextPage": "Go to next page",
+    "morePages": "More pages"
+  },
   "layout": {
     "hackerspaceHome": "Hackerspace homepage",
     "news": "News",
diff --git a/messages/no.json b/messages/no.json
index 776a021a..b9cf4604 100644
--- a/messages/no.json
+++ b/messages/no.json
@@ -2,6 +2,14 @@
   "meta": {
     "description": "Hackerspace NTNU, et studentledet prosjekt åpent for alle studenter, tilbyr tilgang til ny teknologi som 3D-printere og VR-utstyr. Våre medlemmer gir variert ekspertise for å hjelpe med prosjektene dine, fra å få en LED-lys til å blinke til å lage en 3D-modell. Besøk vårt verksted eller bli med i vår Slack-kanal for assistanse eller en vennlig prat."
   },
+  "ui": {
+    "close": "Lukk",
+    "previous": "Forrige",
+    "goToPreviousPage": "Gå til forrige side",
+    "next": "Neste",
+    "goToNextPage": "Gå til neste side",
+    "morePages": "Flere sider"
+  },
   "layout": {
     "hackerspaceHome": "Hackerspace hjemmeside",
     "news": "Nyheter",
diff --git a/package.json b/package.json
index 285fed28..a4ec271c 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "next-intl": "^3.4.4",
     "next-sitemap": "^4.2.3",
     "next-themes": "^0.2.1",
+    "nuqs": "^1.15.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "tailwind-merge": "^2.2.0",
diff --git a/src/app/[locale]/(dashboard)/news/page.tsx b/src/app/[locale]/(dashboard)/news/page.tsx
index 4e8ed3b5..877171e7 100644
--- a/src/app/[locale]/(dashboard)/news/page.tsx
+++ b/src/app/[locale]/(dashboard)/news/page.tsx
@@ -4,6 +4,7 @@ import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
 import { cx } from '@/lib/utils';
 
 import { NewsCard } from '@/components/news/NewsCard';
+import { NewsItemGrid } from '@/components/news/NewsItemGrid';
 import { Separator } from '@/components/ui/Separator';
 
 export async function generateMetadata({
@@ -68,7 +69,7 @@ export default function News({
     },
     {
       id: 8,
-      title: 'Hvorfor er jeg her?',
+      title: 'Dette er en veeeeldig lang overskrift som skal testes',
       date: '22. oktober 2023',
       photoUrl: 'mock.jpg',
     },
@@ -90,52 +91,45 @@ export default function News({
       date: '22. oktober 2023',
       photoUrl: 'mock.jpg',
     },
-
     {
       id: 12,
       title: 'Hvorfor er jeg her?',
       date: '22. oktober 2023',
       photoUrl: 'mock.jpg',
     },
-
     {
       id: 13,
       title: 'Hvorfor er jeg her?',
       date: '22. oktober 2023',
       photoUrl: 'mock.jpg',
     },
-
     {
       id: 14,
       title: 'Hvorfor er jeg her?',
       date: '22. oktober 2023',
       photoUrl: 'mock.jpg',
     },
-
     {
       id: 15,
       title: 'Hvorfor er jeg her?',
       date: '22. oktober 2023',
       photoUrl: 'mock.jpg',
     },
-
     {
       id: 16,
       title: 'Hvorfor er jeg her?',
       date: '22. oktober 2023',
       photoUrl: 'mock.jpg',
     },
-
     {
       id: 17,
       title: 'Hvorfor er jeg her?',
       date: '22. oktober 2023',
       photoUrl: 'mock.jpg',
     },
-
     {
       id: 18,
-      title: 'Hvorfor er jeg her?',
+      title: '18',
       date: '22. oktober 2023',
       photoUrl: 'mock.jpg',
     },
@@ -146,27 +140,30 @@ export default function News({
       date: '22. oktober 2023',
       photoUrl: 'mock.jpg',
     },
-
     {
       id: 20,
       title: 'Hvorfor er jeg her?',
       date: '22. oktober 2023',
       photoUrl: 'mock.jpg',
     },
-
     {
       id: 21,
       title: 'Hvorfor er jeg her?',
       date: '22. oktober 2023',
       photoUrl: 'mock.jpg',
     },
-
     {
       id: 22,
       title: 'Hvorfor er jeg her?',
       date: '22. oktober 2023',
       photoUrl: 'mock.jpg',
     },
+    {
+      id: 23,
+      title: '23',
+      date: '22. oktober 2023',
+      photoUrl: 'mock.jpg',
+    },
   ];
   unstable_setRequestLocale(locale);
   const t = useTranslations('news');
@@ -190,6 +187,17 @@ export default function News({
         ))}
       </div>
       <Separator className='my-6' />
+      <NewsItemGrid
+        pageQueryName={locale === 'en' ? 'page' : 'side'}
+        newsData={mockData}
+        t={{
+          morePages: useTranslations('ui')('morePages'),
+          goToPreviousPage: useTranslations('ui')('goToPreviousPage'),
+          goToNextPage: useTranslations('ui')('goToNextPage'),
+          previous: useTranslations('ui')('previous'),
+          next: useTranslations('ui')('next'),
+        }}
+      />
     </>
   );
 }
diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
index 134cb6b2..4d4c7c2c 100644
--- a/src/components/layout/Footer.tsx
+++ b/src/components/layout/Footer.tsx
@@ -115,9 +115,11 @@ function Footer() {
             <h4>{t('links')}</h4>
             <Nav
               className='ml-2 mt-2 space-y-1.5'
-              news={t('news')}
-              events={t('events')}
-              about={t('about')}
+              t={{
+                news: t('news'),
+                events: t('events'),
+                about: t('about'),
+              }}
             />
           </div>
           <div>
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 190294ed..1788f1fd 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -14,27 +14,43 @@ function Header() {
       <div className='flex h-14 w-full max-w-screen-2xl items-center justify-between'>
         <MobileSheet
           className='flex md:hidden'
-          news={t('news')}
-          events={t('events')}
-          about={t('about')}
+          t={{
+            news: t('news'),
+            events: t('events'),
+            about: t('about'),
+            close: useTranslations('ui')('close'),
+          }}
         />
         <LogoLink />
         <div className='flex gap-10'>
           <Nav
             className='hidden items-center gap-6 text-sm md:flex'
-            news={t('news')}
-            events={t('events')}
-            about={t('about')}
+            t={{
+              news: t('news'),
+              events: t('events'),
+              about: t('about'),
+            }}
           />
           <div className='flex'>
-            <LocaleMenu changeLocale={t('changeLocale')} />
+            <LocaleMenu
+              t={{
+                changeLocale: t('changeLocale'),
+              }}
+            />
             <DarkModeMenu
-              toggleTheme={t('toggleTheme')}
-              light={t('light')}
-              dark={t('dark')}
-              system={t('system')}
+              t={{
+                toggleTheme: t('toggleTheme'),
+                light: t('light'),
+                dark: t('dark'),
+                system: t('system'),
+              }}
+            />
+            <ProfileMenu
+              t={{
+                profile: t('profile'),
+                signIn: t('signIn'),
+              }}
             />
-            <ProfileMenu profile={t('profile')} signIn={t('signIn')} />
           </div>
         </div>
       </div>
diff --git a/src/components/layout/MobileSheet.tsx b/src/components/layout/MobileSheet.tsx
index 360a54da..301ca5c3 100644
--- a/src/components/layout/MobileSheet.tsx
+++ b/src/components/layout/MobileSheet.tsx
@@ -16,12 +16,15 @@ import {
 
 type MobileSheetProps = {
   className?: string;
-  news: string;
-  events: string;
-  about: string;
+  t: {
+    news: string;
+    events: string;
+    about: string;
+    close: string;
+  };
 };
 
-function MobileSheet({ className, news, events, about }: MobileSheetProps) {
+function MobileSheet({ className, t }: MobileSheetProps) {
   const [open, setOpen] = React.useState(false);
   return (
     <Sheet open={open} onOpenChange={setOpen}>
@@ -30,7 +33,7 @@ function MobileSheet({ className, news, events, about }: MobileSheetProps) {
           <Menu className='h-5 w-5' />
         </Button>
       </SheetTrigger>
-      <SheetContent side='left'>
+      <SheetContent side='left' close={t.close}>
         <SheetHeader>
           <SheetTitle className='flex'>
             <LogoLink onClick={() => setOpen(false)} />
@@ -39,9 +42,11 @@ function MobileSheet({ className, news, events, about }: MobileSheetProps) {
         <Nav
           className='flex flex-col space-y-3 pt-6'
           onClick={() => setOpen(false)}
-          news={news}
-          events={events}
-          about={about}
+          t={{
+            news: t.news,
+            events: t.events,
+            about: t.about,
+          }}
         />
       </SheetContent>
     </Sheet>
diff --git a/src/components/layout/Nav.tsx b/src/components/layout/Nav.tsx
index 07ab04b7..4654c964 100644
--- a/src/components/layout/Nav.tsx
+++ b/src/components/layout/Nav.tsx
@@ -5,33 +5,35 @@ import { Button } from '@/components/ui/Button';
 type NavProps = {
   className?: string;
   onClick?: () => void;
-  news: string;
-  events: string;
-  about: string;
+  t: {
+    news: string;
+    events: string;
+    about: string;
+  };
 };
 
-function Nav({ className, onClick, news, events, about }: NavProps) {
+function Nav({ className, onClick, t }: NavProps) {
   return (
     <nav className='flex items-center'>
       <ul className={className}>
         <li>
           <Button asChild variant='nav' size='none'>
             <Link href='/news' onClick={onClick}>
-              {news}
+              {t.news}
             </Link>
           </Button>
         </li>
         <li>
           <Button asChild variant='nav' size='none'>
             <Link href='/events' onClick={onClick}>
-              {events}
+              {t.events}
             </Link>
           </Button>
         </li>
         <li>
           <Button asChild variant='nav' size='none'>
             <Link href='/about' onClick={onClick}>
-              {about}
+              {t.about}
             </Link>
           </Button>
         </li>
diff --git a/src/components/news/NewsCard.tsx b/src/components/news/NewsCard.tsx
index 7c0942fd..800060d0 100644
--- a/src/components/news/NewsCard.tsx
+++ b/src/components/news/NewsCard.tsx
@@ -27,20 +27,20 @@ function NewsCard({ className, id, title, date, photoUrl }: NewsCardProps) {
       variant='none'
       size='none'
     >
-      <Link href={`/news/${id}`}>
-        <Card
-          className={cx(
-            'relative flex h-full min-h-32 w-full overflow-hidden bg-cover bg-center',
-            className,
-          )}
-        >
+      <Link
+        href={{
+          pathname: '/news/[articleId]',
+          params: { articleId: id },
+        }}
+      >
+        <Card className='relative flex h-full min-h-32 w-full overflow-hidden'>
           <Image
             className='rounded-lg object-cover object-center transition-transform duration-300 group-hover:scale-105'
             src={`/${photoUrl}`}
             alt={title}
             fill
           />
-          <CardHeader className='mt-auto w-full bg-background/95 p-4 backdrop-blur supports-[backdrop-filter]:bg-background/80 dark:supports-[backdrop-filter]:bg-background/60 lg:p-6'>
+          <CardHeader className='mt-auto w-full bg-background/95 p-4 backdrop-blur supports-[backdrop-filter]:bg-background/60 lg:p-6'>
             <CardTitle className='line-clamp-1 text-lg transition-colors group-hover:text-primary sm:text-xl lg:text-2xl'>
               {title}
             </CardTitle>
diff --git a/src/components/news/NewsItem.tsx b/src/components/news/NewsItem.tsx
new file mode 100644
index 00000000..aaa110bb
--- /dev/null
+++ b/src/components/news/NewsItem.tsx
@@ -0,0 +1,53 @@
+import Image from 'next/image';
+
+import { Link } from '@/lib/navigation';
+import { cx } from '@/lib/utils';
+
+import { Button } from '@/components/ui/Button';
+
+type NewsCardProps = {
+  className?: string;
+  id: number;
+  title: string;
+  date: string;
+  photoUrl: string;
+};
+
+function NewsItem({ className, id, title, date, photoUrl }: NewsCardProps) {
+  return (
+    <Button
+      className={cx('group block whitespace-normal font-normal', className)}
+      asChild
+      variant='none'
+      size='none'
+    >
+      <Link
+        href={{
+          pathname: '/news/[articleId]',
+          params: { articleId: id },
+        }}
+      >
+        <div className='flex gap-4 overflow-hidden rounded-lg transition-colors group-hover:bg-muted group-hover:dark:bg-card'>
+          <div className='relative h-28 w-28 flex-shrink-0'>
+            <Image
+              className='rounded-lg object-cover object-center'
+              src={`/${photoUrl}`}
+              alt={title}
+              fill
+            />
+          </div>
+          <div className='py-2 pr-1'>
+            <h3 className='line-clamp-2 text-lg transition-colors group-hover:text-primary'>
+              {title}
+            </h3>
+            <p className='line-clamp-2 text-xs sm:text-sm [&:not(:first-child)]:mt-2'>
+              {date}
+            </p>
+          </div>
+        </div>
+      </Link>
+    </Button>
+  );
+}
+
+export { NewsItem };
diff --git a/src/components/news/NewsItemGrid.tsx b/src/components/news/NewsItemGrid.tsx
new file mode 100644
index 00000000..bede1aff
--- /dev/null
+++ b/src/components/news/NewsItemGrid.tsx
@@ -0,0 +1,159 @@
+'use client';
+
+import { parseAsInteger, useQueryState } from 'nuqs';
+
+import { cx } from '@/lib/utils';
+
+import { NewsItem } from '@/components/news/NewsItem';
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from '@/components/ui/Pagination';
+
+type NewsItemGridProps = {
+  pageQueryName: string;
+  newsData: {
+    id: number;
+    title: string;
+    date: string;
+    photoUrl: string;
+  }[];
+  t: {
+    morePages: string;
+    goToPreviousPage: string;
+    goToNextPage: string;
+    previous: string;
+    next: string;
+  };
+};
+
+function NewsItemGrid({ pageQueryName, newsData, t }: NewsItemGridProps) {
+  const itemsDisplayedAsCards = 4;
+  const itemsPerPage = 6;
+  const [page, setPage] = useQueryState(
+    pageQueryName,
+    parseAsInteger.withDefault(1),
+  );
+
+  const start = (page - 1) * itemsPerPage + itemsDisplayedAsCards;
+  const end = start + itemsPerPage;
+  const currentData = newsData.slice(start, end);
+
+  const totalPages = Math.ceil(
+    (newsData.length - itemsDisplayedAsCards) / itemsPerPage,
+  );
+
+  async function handlePrevious(e: React.MouseEvent<HTMLAnchorElement>) {
+    e.preventDefault();
+    if (page > 1) {
+      await setPage(page - 1);
+    }
+  }
+
+  async function handleNext(e: React.MouseEvent<HTMLAnchorElement>) {
+    e.preventDefault();
+    if (page < totalPages) {
+      await setPage(page + 1);
+    }
+  }
+
+  async function handlePageClick(
+    e: React.MouseEvent<HTMLAnchorElement>,
+    pageNum: number,
+  ) {
+    e.preventDefault();
+    await setPage(pageNum);
+  }
+
+  let pagesToDisplay = [];
+  if (page === 1) {
+    pagesToDisplay = [1, 2, 3].filter((pageNum) => pageNum <= totalPages);
+  } else if (page === totalPages) {
+    pagesToDisplay = [totalPages - 2, totalPages - 1, totalPages].filter(
+      (pageNum) => pageNum >= 1,
+    );
+  } else {
+    pagesToDisplay = [page - 1, page, page + 1];
+  }
+
+  return (
+    <>
+      <div className='grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3'>
+        {currentData.map((data) => (
+          <NewsItem
+            key={data.id}
+            id={data.id}
+            title={data.title}
+            date={data.date}
+            photoUrl={data.photoUrl}
+          />
+        ))}
+      </div>
+      <Pagination className='my-6'>
+        <PaginationContent>
+          <PaginationItem>
+            <PaginationPrevious
+              className={cx(
+                page === 1 &&
+                  'cursor-not-allowed opacity-50 hover:bg-transparent',
+              )}
+              href='#'
+              onClick={handlePrevious}
+              goToPreviousPage={t.goToPreviousPage}
+              previous={t.previous}
+              aria-disabled={page === 1}
+              tabIndex={page === 1 ? -1 : 0}
+            />
+          </PaginationItem>
+          {pagesToDisplay[0] !== undefined && pagesToDisplay[0] > 1 && (
+            <PaginationItem>
+              <PaginationEllipsis morePages={t.morePages} />
+            </PaginationItem>
+          )}
+          {pagesToDisplay.map(
+            (pageNum) =>
+              pageNum > 0 &&
+              pageNum <= totalPages && (
+                <PaginationItem key={pageNum}>
+                  <PaginationLink
+                    href='#'
+                    onClick={(e) => handlePageClick(e, pageNum)}
+                    isActive={pageNum === page}
+                  >
+                    {pageNum}
+                  </PaginationLink>
+                </PaginationItem>
+              ),
+          )}
+          {pagesToDisplay[pagesToDisplay.length - 1] !== undefined &&
+            pagesToDisplay[pagesToDisplay.length - 1]! < totalPages && (
+              <PaginationItem>
+                <PaginationEllipsis morePages={t.morePages} />
+              </PaginationItem>
+            )}
+          <PaginationItem>
+            <PaginationNext
+              className={cx(
+                page === totalPages &&
+                  'cursor-not-allowed opacity-50 hover:bg-transparent',
+              )}
+              href='#'
+              onClick={handleNext}
+              goToNextPage={t.goToNextPage}
+              next={t.next}
+              aria-disabled={page === totalPages}
+              tabIndex={page === totalPages ? -1 : 0}
+            />
+          </PaginationItem>
+        </PaginationContent>
+      </Pagination>
+    </>
+  );
+}
+
+export { NewsItemGrid };
diff --git a/src/components/settings/DarkModeMenu.tsx b/src/components/settings/DarkModeMenu.tsx
index 7a6a40e0..b9da2a78 100644
--- a/src/components/settings/DarkModeMenu.tsx
+++ b/src/components/settings/DarkModeMenu.tsx
@@ -13,13 +13,15 @@ import {
 } from '@/components/ui/DropdownMenu';
 
 type DarkModeMenuProps = {
-  toggleTheme: string;
-  light: string;
-  dark: string;
-  system: string;
+  t: {
+    toggleTheme: string;
+    light: string;
+    dark: string;
+    system: string;
+  };
 };
 
-function DarkModeMenu({ toggleTheme, light, dark, system }: DarkModeMenuProps) {
+function DarkModeMenu({ t }: DarkModeMenuProps) {
   const { setTheme } = useTheme();
 
   return (
@@ -28,18 +30,18 @@ function DarkModeMenu({ toggleTheme, light, dark, system }: DarkModeMenuProps) {
         <Button variant='ghost' size='icon'>
           <Sun className='h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0' />
           <Moon className='absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100' />
-          <span className='sr-only'>{toggleTheme}</span>
+          <span className='sr-only'>{t.toggleTheme}</span>
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className='min-w-[6rem]' align='end'>
         <DropdownMenuItem onClick={() => setTheme('light')}>
-          {light}
+          {t.light}
         </DropdownMenuItem>
         <DropdownMenuItem onClick={() => setTheme('dark')}>
-          {dark}
+          {t.dark}
         </DropdownMenuItem>
         <DropdownMenuItem onClick={() => setTheme('system')}>
-          {system}
+          {t.system}
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
diff --git a/src/components/settings/LocaleMenu.tsx b/src/components/settings/LocaleMenu.tsx
index 76625acb..5ff377e9 100644
--- a/src/components/settings/LocaleMenu.tsx
+++ b/src/components/settings/LocaleMenu.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { Globe2 } from 'lucide-react';
+import { useParams } from 'next/navigation';
 import * as React from 'react';
 
 import { flagIcons, locales } from '@/lib/config';
@@ -14,15 +15,16 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/DropdownMenu';
 
-function LocaleMenu({ changeLocale }: { changeLocale: string }) {
+function LocaleMenu({ t }: { t: { changeLocale: string } }) {
   const router = useRouter();
   const pathname = usePathname();
+  const params = useParams();
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button variant='ghost' size='icon'>
           <Globe2 className='h-[1.2rem] w-[1.2rem]' />
-          <span className='sr-only'>{changeLocale}</span>
+          <span className='sr-only'>{t.changeLocale}</span>
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className='min-w-[6rem]' align='end'>
@@ -31,7 +33,15 @@ function LocaleMenu({ changeLocale }: { changeLocale: string }) {
           return (
             <DropdownMenuItem
               key={locale}
-              onClick={() => router.push(pathname, { locale: locale })}
+              onClick={() =>
+                router.push(
+                  {
+                    pathname,
+                    params: params as never,
+                  },
+                  { locale: locale },
+                )
+              }
               className='flex items-center'
             >
               <FlagIcon
diff --git a/src/components/settings/ProfileMenu.tsx b/src/components/settings/ProfileMenu.tsx
index b7a634c0..90ae661b 100644
--- a/src/components/settings/ProfileMenu.tsx
+++ b/src/components/settings/ProfileMenu.tsx
@@ -11,17 +11,17 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/DropdownMenu';
 
-function ProfileMenu({ profile, signIn }: { profile: string; signIn: string }) {
+function ProfileMenu({ t }: { t: { profile: string; signIn: string } }) {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button variant='ghost' size='icon'>
           <User className='h-[1.2rem] w-[1.2rem] text-primary' />
-          <span className='sr-only'>{profile}</span>
+          <span className='sr-only'>{t.profile}</span>
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className='min-w-[6rem]' align='end'>
-        <DropdownMenuItem>{signIn}</DropdownMenuItem>
+        <DropdownMenuItem>{t.signIn}</DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
   );
diff --git a/src/components/ui/Pagination.tsx b/src/components/ui/Pagination.tsx
new file mode 100644
index 00000000..ffbcc6f4
--- /dev/null
+++ b/src/components/ui/Pagination.tsx
@@ -0,0 +1,131 @@
+import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';
+import * as React from 'react';
+
+import { cx } from '@/lib/utils';
+
+import { type ButtonProps, buttonVariants } from '@/components/ui/Button';
+
+const Pagination = ({ className, ...props }: React.ComponentProps<'nav'>) => (
+  <nav
+    role='navigation'
+    aria-label='pagination'
+    className={cx('mx-auto flex w-full justify-center', className)}
+    {...props}
+  />
+);
+Pagination.displayName = 'Pagination';
+
+const PaginationContent = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<'ul'>
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    className={cx('flex flex-row items-center gap-1', className)}
+    {...props}
+  />
+));
+PaginationContent.displayName = 'PaginationContent';
+
+const PaginationItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<'li'>
+>(({ className, ...props }, ref) => (
+  <li ref={ref} className={cx('', className)} {...props} />
+));
+PaginationItem.displayName = 'PaginationItem';
+
+type PaginationLinkProps = {
+  isActive?: boolean;
+} & Pick<ButtonProps, 'size'> &
+  React.ComponentProps<'a'>;
+
+const PaginationLink = ({
+  className,
+  isActive,
+  size = 'icon',
+  ...props
+}: PaginationLinkProps) => (
+  <a
+    aria-current={isActive ? 'page' : undefined}
+    className={cx(
+      buttonVariants({
+        variant: isActive ? 'outline' : 'ghost',
+        size,
+      }),
+      className,
+    )}
+    {...props}
+  />
+);
+PaginationLink.displayName = 'PaginationLink';
+
+const PaginationPrevious = ({
+  className,
+  goToPreviousPage,
+  previous,
+  ...props
+}: React.ComponentProps<typeof PaginationLink> & {
+  goToPreviousPage: string;
+  previous: string;
+}) => (
+  <PaginationLink
+    aria-label={goToPreviousPage}
+    size='default'
+    className={cx('gap-1 pl-2.5', className)}
+    {...props}
+  >
+    <ChevronLeft className='h-4 w-4' />
+    <span>{previous}</span>
+  </PaginationLink>
+);
+PaginationPrevious.displayName = 'PaginationPrevious';
+
+const PaginationNext = ({
+  className,
+  goToNextPage,
+  next,
+  ...props
+}: React.ComponentProps<typeof PaginationLink> & {
+  goToNextPage: string;
+  next: string;
+}) => (
+  <PaginationLink
+    aria-label={goToNextPage}
+    size='default'
+    className={cx('gap-1 pr-2.5', className)}
+    {...props}
+  >
+    <span>{next}</span>
+    <ChevronRight className='h-4 w-4' />
+  </PaginationLink>
+);
+PaginationNext.displayName = 'PaginationNext';
+
+const PaginationEllipsis = ({
+  className,
+  morePages,
+  ...props
+}: React.ComponentProps<'span'> & {
+  morePages: string;
+}) => (
+  <span
+    aria-hidden
+    className={cx('flex h-9 w-9 items-center justify-center', className)}
+    {...props}
+  >
+    <MoreHorizontal className='h-4 w-4' />
+    <span className='sr-only'>{morePages}</span>
+  </span>
+);
+PaginationEllipsis.displayName = 'PaginationEllipsis';
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+};
diff --git a/src/components/ui/Sheet.tsx b/src/components/ui/Sheet.tsx
index 9fcd51d8..6db2ae55 100644
--- a/src/components/ui/Sheet.tsx
+++ b/src/components/ui/Sheet.tsx
@@ -48,12 +48,14 @@ const sheetVariants = cva({
 
 interface SheetContentProps
   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
-    VariantProps<typeof sheetVariants> {}
+    VariantProps<typeof sheetVariants> {
+  close: string;
+}
 
 const SheetContent = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Content>,
   SheetContentProps
->(({ side = 'right', className, children, ...props }, ref) => (
+>(({ side = 'right', className, children, close, ...props }, ref) => (
   <SheetPortal>
     <SheetOverlay />
     <SheetPrimitive.Content
@@ -64,7 +66,7 @@ const SheetContent = React.forwardRef<
       {children}
       <SheetPrimitive.Close className='absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity data-[state=open]:bg-secondary hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none'>
         <X className='h-4 w-4' />
-        <span className='sr-only'>Close</span>
+        <span className='sr-only'>{close}</span>
       </SheetPrimitive.Close>
     </SheetPrimitive.Content>
   </SheetPortal>
diff --git a/src/lib/config.ts b/src/lib/config.ts
index a01b822d..e2890565 100644
--- a/src/lib/config.ts
+++ b/src/lib/config.ts
@@ -18,6 +18,10 @@ const pathnames = {
     en: '/news',
     no: '/nyheter',
   },
+  '/news/[articleId]': {
+    en: '/news/[articleId]',
+    no: '/nyheter/[articleId]',
+  },
   '/about': {
     en: '/about',
     no: '/om-oss',