diff --git a/hooks/translations.json b/hooks/translations.json
index 8e9af09..4159db0 100644
--- a/hooks/translations.json
+++ b/hooks/translations.json
@@ -4,6 +4,7 @@
     "en": "Satakunta Nation",
     "sv": "Satakunta Nation"
   },
+  "nav:archive": { "fi": "Arkisto", "en": "Archive", "sv": "Arkiv" },
   "nav:calendar": { "fi": "Kalenteri", "en": "Calendar", "sv": "Kalender" },
   "nav:events": { "fi": "Tapahtumat", "en": "Events", "sv": "Evenemang" },
   "nav:forMembers": {
diff --git a/pages/archive.tsx b/pages/archive.tsx
new file mode 100644
index 0000000..29f8af7
--- /dev/null
+++ b/pages/archive.tsx
@@ -0,0 +1,81 @@
+import HorizontalCard from "@/components/HorizontalCard";
+import Navbar, { NavbarProps } from "@/components/Navbar";
+import createClient from "@/lib/cmsClient";
+import styles from "@/styles/archive.module.css";
+import { readItems } from "@directus/sdk";
+import { GetStaticProps } from "next";
+import Head from "next/head";
+
+export const getStaticProps: GetStaticProps<ArchivePageProps> = async () => {
+  const client = createClient();
+  const links = await client.request(readItems("NavigationLink"));
+  return {
+    props: {
+      navBar: {
+        links,
+      },
+    },
+  };
+};
+
+type ArchivePageProps = {
+  navBar: NavbarProps;
+};
+
+export default function Archive({ navBar }: ArchivePageProps) {
+  return (
+    <>
+      <Head>
+        <title>Satakuntalainen Osakunta</title>
+        <link rel="icon" href="/favicon.ico" type="image/x-icon" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      </Head>
+      <Navbar links={navBar.links} />
+      <header className="header">
+        <div className="headerContainer">
+          <h1>Arkisto</h1>
+          <p className="headerText">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem odit
+            distinctio, ullam doloremque provident voluptas illo quaerat ex
+            saepe voluptate reiciendis rerum fuga obcaecati esse sit cum maxime,
+            dolorem facilis?
+          </p>
+        </div>
+      </header>
+      <main className="main">
+        <div className={styles.cardContainer}>
+          <HorizontalCard
+            variant="pink"
+            image="/Placeholder_5.png"
+            altText="Placeholder image"
+            title="Maila Talvo's collected works"
+            description="Fusce lacinia nisl ac sapien condimentum faucibus. Suspendisse non metus iaculis, lobortis augue vel, placerat odio. Mauris fermentum laoreet aliquam. "
+            btnText="Lue lisää"
+            href=""
+          />
+
+          <HorizontalCard
+            variant="pink"
+            image="/Placeholder_5.png"
+            altText="Placeholder image"
+            title="Satakunta Series"
+            description="Fusce lacinia nisl ac sapien condimentum faucibus. Suspendisse non metus iaculis, lobortis augue vel, placerat odio. Mauris fermentum laoreet aliquam. "
+            btnText="Lue lisää"
+            href=""
+          />
+
+          <HorizontalCard
+            variant="pink"
+            image="/Placeholder_5.png"
+            altText="Placeholder image"
+            title="Proceedings"
+            description="Minutes of official SatO meetings. Organization login required"
+            btnText="Go to proceedings"
+            href=""
+          />
+        </div>
+      </main>
+      <footer className="footer" />
+    </>
+  );
+}
diff --git a/styles/archive.module.css b/styles/archive.module.css
new file mode 100644
index 0000000..67988c3
--- /dev/null
+++ b/styles/archive.module.css
@@ -0,0 +1,9 @@
+.cardContainer {
+  width: 70%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  margin: 5rem 0;
+  gap: 2rem;
+}
