diff --git a/components/MonthCalendar.tsx b/components/MonthCalendar.tsx
new file mode 100644
index 0000000..9ef0a01
--- /dev/null
+++ b/components/MonthCalendar.tsx
@@ -0,0 +1,34 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+// remove this later^
+import FullCalendar from "@fullcalendar/react";
+import dayGridPlugin from "@fullcalendar/daygrid";
+import resourceTimelinePlugin from "@fullcalendar/resource-timeline";
+import resourceTimeGridPlugin from "@fullcalendar/resource-timegrid";
+import interactionPlugin from "@fullcalendar/interaction";
+import { useLanguage } from "@/lib/LanguageContext";
+import fiLocale from "@fullcalendar/core/locales/fi";
+import svLocale from "@fullcalendar/core/locales/sv";
+import enLocale from "@fullcalendar/core/locales/en-gb";
+
+const MonthCalendar = () => {
+  const { language } = useLanguage();
+  const localeMap = {
+    fi: fiLocale,
+    sv: svLocale,
+    en: enLocale,
+  };
+  const currentLocale = localeMap[language] || enLocale;
+  return (
+    <>
+      <FullCalendar
+        schedulerLicenseKey={process.env.FULL_CALENDAR_KEY}
+        plugins={[dayGridPlugin]}
+        initialView="dayGridMonth"
+        locale={currentLocale}
+      />
+      <div />
+    </>
+  );
+};
+
+export default MonthCalendar;
diff --git a/components/WeekCalendar.tsx b/components/WeekCalendar.tsx
new file mode 100644
index 0000000..dc4abc5
--- /dev/null
+++ b/components/WeekCalendar.tsx
@@ -0,0 +1,31 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+// remove this later^
+import { useLanguage } from "@/lib/LanguageContext";
+import enLocale from "@fullcalendar/core/locales/en-gb";
+import fiLocale from "@fullcalendar/core/locales/fi";
+import svLocale from "@fullcalendar/core/locales/sv";
+import FullCalendar from "@fullcalendar/react";
+import dayGridPlugin from "@fullcalendar/timegrid";
+
+const WeekCalendar = () => {
+  const { language } = useLanguage();
+  const localeMap = {
+    fi: fiLocale,
+    sv: svLocale,
+    en: enLocale,
+  };
+  const currentLocale = localeMap[language] || enLocale;
+  return (
+    <>
+      <FullCalendar
+        schedulerLicenseKey={process.env.FULL_CALENDAR_KEY}
+        plugins={[dayGridPlugin]}
+        initialView="timeGridWeek"
+        locale={currentLocale}
+      />
+      <div />
+    </>
+  );
+};
+
+export default WeekCalendar;
diff --git a/hooks/translations.json b/hooks/translations.json
index 383c14d..8e9af09 100644
--- a/hooks/translations.json
+++ b/hooks/translations.json
@@ -4,6 +4,8 @@
     "en": "Satakunta Nation",
     "sv": "Satakunta Nation"
   },
+  "nav:calendar": { "fi": "Kalenteri", "en": "Calendar", "sv": "Kalender" },
+  "nav:events": { "fi": "Tapahtumat", "en": "Events", "sv": "Evenemang" },
   "nav:forMembers": {
     "fi": "Jäsenille",
     "en": "For Members",
@@ -21,6 +23,7 @@
     "en": "Nation Info",
     "sv": "Samma på svenska"
   },
+  "nav:news": { "fi": "Uutiset", "en": "News", "sv": "Nyheter" },
   "nav:officialDocuments": {
     "fi": "Viralliset Dokumentit",
     "en": "Official Documents",
diff --git a/package-lock.json b/package-lock.json
index 1a0ea6c..8c68408 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,14 @@
         "@directus/sdk": "^17.0.0",
         "@emotion/react": "^11.11.4",
         "@emotion/styled": "^11.11.5",
+        "@fullcalendar/core": "^6.1.15",
+        "@fullcalendar/daygrid": "^6.1.15",
+        "@fullcalendar/interaction": "^6.1.15",
+        "@fullcalendar/react": "^6.1.15",
+        "@fullcalendar/resource": "^6.1.15",
+        "@fullcalendar/resource-timegrid": "^6.1.15",
+        "@fullcalendar/resource-timeline": "^6.1.15",
+        "@fullcalendar/timegrid": "^6.1.15",
         "@mui/material": "^5.15.20",
         "dotenv": "^16.4.5",
         "embla-carousel": "^8.1.6",
@@ -1156,6 +1164,146 @@
       "integrity": "sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw==",
       "license": "MIT"
     },
+    "node_modules/@fullcalendar/core": {
+      "version": "6.1.15",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/core/-/core-6.1.15.tgz",
+      "integrity": "sha512-BuX7o6ALpLb84cMw1FCB9/cSgF4JbVO894cjJZ6kP74jzbUZNjtwffwRdA+Id8rrLjT30d/7TrkW90k4zbXB5Q==",
+      "license": "MIT",
+      "dependencies": {
+        "preact": "~10.12.1"
+      }
+    },
+    "node_modules/@fullcalendar/daygrid": {
+      "version": "6.1.15",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/daygrid/-/daygrid-6.1.15.tgz",
+      "integrity": "sha512-j8tL0HhfiVsdtOCLfzK2J0RtSkiad3BYYemwQKq512cx6btz6ZZ2RNc/hVnIxluuWFyvx5sXZwoeTJsFSFTEFA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@fullcalendar/core": "~6.1.15"
+      }
+    },
+    "node_modules/@fullcalendar/interaction": {
+      "version": "6.1.15",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/interaction/-/interaction-6.1.15.tgz",
+      "integrity": "sha512-DOTSkofizM7QItjgu7W68TvKKvN9PSEEvDJceyMbQDvlXHa7pm/WAVtAc6xSDZ9xmB1QramYoWGLHkCYbTW1rQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@fullcalendar/core": "~6.1.15"
+      }
+    },
+    "node_modules/@fullcalendar/premium-common": {
+      "version": "6.1.15",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/premium-common/-/premium-common-6.1.15.tgz",
+      "integrity": "sha512-IwUHptHNzWDOgAsXLoBntGxmbfCKvUy6iYFMCP3F3ahbG58E0PJMYsXvgw+NaA7Cz4gcQoVHioGjIFgQqs3Keg==",
+      "license": "SEE LICENSE IN LICENSE.md",
+      "peerDependencies": {
+        "@fullcalendar/core": "~6.1.15"
+      }
+    },
+    "node_modules/@fullcalendar/react": {
+      "version": "6.1.15",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/react/-/react-6.1.15.tgz",
+      "integrity": "sha512-L0b9hybS2J4e7lq6G2CD4nqriyLEqOH1tE8iI6JQjAMTVh5JicOo5Mqw+fhU5bJ7hLfMw2K3fksxX3Ul1ssw5w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@fullcalendar/core": "~6.1.15",
+        "react": "^16.7.0 || ^17 || ^18 || ^19",
+        "react-dom": "^16.7.0 || ^17 || ^18 || ^19"
+      }
+    },
+    "node_modules/@fullcalendar/resource": {
+      "version": "6.1.15",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/resource/-/resource-6.1.15.tgz",
+      "integrity": "sha512-s9Rz3HNDQWBYCG+V4wqg8x5+UTD5kC3S2poq+5zwbPeyWT8+FEILikQZIgfESX70Z4fn8bBlLJ04Jd/LijfqWw==",
+      "license": "SEE LICENSE IN LICENSE.md",
+      "dependencies": {
+        "@fullcalendar/premium-common": "~6.1.15"
+      },
+      "peerDependencies": {
+        "@fullcalendar/core": "~6.1.15"
+      }
+    },
+    "node_modules/@fullcalendar/resource-daygrid": {
+      "version": "6.1.15",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/resource-daygrid/-/resource-daygrid-6.1.15.tgz",
+      "integrity": "sha512-4SVfr2Gf0KtLkW56U9gCXf8Jrug8CDJ81g0KMCTbTsaqrIdQ0DKWc0O5+4UVvibwUeh2jWQNIVXXOoPQ5lDHhQ==",
+      "license": "SEE LICENSE IN LICENSE.md",
+      "dependencies": {
+        "@fullcalendar/daygrid": "~6.1.15",
+        "@fullcalendar/premium-common": "~6.1.15"
+      },
+      "peerDependencies": {
+        "@fullcalendar/core": "~6.1.15",
+        "@fullcalendar/resource": "~6.1.15"
+      }
+    },
+    "node_modules/@fullcalendar/resource-timegrid": {
+      "version": "6.1.15",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/resource-timegrid/-/resource-timegrid-6.1.15.tgz",
+      "integrity": "sha512-nT3aT8WGm4zSek1zcGCm4NRmuBdAhl+Tpod/NH8N5ZcN3A490GdT7J3uDK1KzPb+5kQ/RlW0Pzj0hF4B5BkBwg==",
+      "license": "SEE LICENSE IN LICENSE.md",
+      "dependencies": {
+        "@fullcalendar/premium-common": "~6.1.15",
+        "@fullcalendar/resource-daygrid": "~6.1.15",
+        "@fullcalendar/timegrid": "~6.1.15"
+      },
+      "peerDependencies": {
+        "@fullcalendar/core": "~6.1.15",
+        "@fullcalendar/resource": "~6.1.15"
+      }
+    },
+    "node_modules/@fullcalendar/resource-timeline": {
+      "version": "6.1.15",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/resource-timeline/-/resource-timeline-6.1.15.tgz",
+      "integrity": "sha512-3bvGNDE84ZEV6RLZcYWvMWaViLm22Uw182PMXmFjvq2Vh/bPrrzeLkmyocPsyiT2Bbv5THxwLyzMd7X3Qi/v3Q==",
+      "license": "SEE LICENSE IN LICENSE.md",
+      "dependencies": {
+        "@fullcalendar/premium-common": "~6.1.15",
+        "@fullcalendar/scrollgrid": "~6.1.15",
+        "@fullcalendar/timeline": "~6.1.15"
+      },
+      "peerDependencies": {
+        "@fullcalendar/core": "~6.1.15",
+        "@fullcalendar/resource": "~6.1.15"
+      }
+    },
+    "node_modules/@fullcalendar/scrollgrid": {
+      "version": "6.1.15",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/scrollgrid/-/scrollgrid-6.1.15.tgz",
+      "integrity": "sha512-z7q6eh9bUSQ60YwgztPlJzQAMr6XQgky6bxNQR9cMqfzcwyo/ww11G7OZUp840VIXyqT3g8XPziEDbS5zB4VVQ==",
+      "license": "SEE LICENSE IN LICENSE.md",
+      "dependencies": {
+        "@fullcalendar/premium-common": "~6.1.15"
+      },
+      "peerDependencies": {
+        "@fullcalendar/core": "~6.1.15"
+      }
+    },
+    "node_modules/@fullcalendar/timegrid": {
+      "version": "6.1.15",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/timegrid/-/timegrid-6.1.15.tgz",
+      "integrity": "sha512-61ORr3A148RtxQ2FNG7JKvacyA/TEVZ7z6I+3E9Oeu3dqTf6M928bFcpehRTIK6zIA6Yifs7BeWHgOE9dFnpbw==",
+      "license": "MIT",
+      "dependencies": {
+        "@fullcalendar/daygrid": "~6.1.15"
+      },
+      "peerDependencies": {
+        "@fullcalendar/core": "~6.1.15"
+      }
+    },
+    "node_modules/@fullcalendar/timeline": {
+      "version": "6.1.15",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/timeline/-/timeline-6.1.15.tgz",
+      "integrity": "sha512-VWylStpFFS8lZVUqu0c1b0MF5gkuVH2lzyCK/gopMsbrppqr97sHDTfWEYDHaQXCeO7cd4gKXSliQ0dc9GMlUw==",
+      "license": "SEE LICENSE IN LICENSE.md",
+      "dependencies": {
+        "@fullcalendar/premium-common": "~6.1.15",
+        "@fullcalendar/scrollgrid": "~6.1.15"
+      },
+      "peerDependencies": {
+        "@fullcalendar/core": "~6.1.15"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.14",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -6414,6 +6562,16 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/preact": {
+      "version": "10.12.1",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.12.1.tgz",
+      "integrity": "sha512-l8386ixSsBdbreOAkqtrwqHwdvR35ID8c3rKPa8lCWuO86dBi32QWHV4vfsZK1utLLFMvw+Z5Ad4XLkZzchscg==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/preact"
+      }
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
diff --git a/package.json b/package.json
index dabe2e1..90a8c3a 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,14 @@
     "@directus/sdk": "^17.0.0",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
+    "@fullcalendar/core": "^6.1.15",
+    "@fullcalendar/daygrid": "^6.1.15",
+    "@fullcalendar/interaction": "^6.1.15",
+    "@fullcalendar/react": "^6.1.15",
+    "@fullcalendar/resource": "^6.1.15",
+    "@fullcalendar/resource-timegrid": "^6.1.15",
+    "@fullcalendar/resource-timeline": "^6.1.15",
+    "@fullcalendar/timegrid": "^6.1.15",
     "@mui/material": "^5.15.20",
     "dotenv": "^16.4.5",
     "embla-carousel": "^8.1.6",
diff --git a/pages/calendar.tsx b/pages/calendar.tsx
new file mode 100644
index 0000000..0af5838
--- /dev/null
+++ b/pages/calendar.tsx
@@ -0,0 +1,51 @@
+import Navbar, { NavbarProps } from "@/components/Navbar";
+import createClient from "@/lib/cmsClient";
+import styles from "@/styles/calendar.module.css";
+import { readItems } from "@directus/sdk";
+import { GetStaticProps } from "next";
+import Head from "next/head";
+import MonthCalendar from "@/components/MonthCalendar";
+
+export const getStaticProps: GetStaticProps<CalendarPageProps> = async () => {
+  const client = createClient();
+  const links = await client.request(readItems("NavigationLink"));
+  return {
+    props: {
+      navBar: {
+        links,
+      },
+    },
+  };
+};
+
+type CalendarPageProps = {
+  navBar: NavbarProps;
+};
+
+export default function News({ navBar }: CalendarPageProps) {
+  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={styles.header}>
+        <div className={styles.headerContainer}>
+          <h1 className={styles.h1}>Kalenteri</h1>
+          <p className={styles.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={styles.main}>
+        <MonthCalendar />
+      </main>
+      <footer className={styles.footer} />
+    </>
+  );
+}
diff --git a/pages/events.tsx b/pages/events.tsx
new file mode 100644
index 0000000..9a1030c
--- /dev/null
+++ b/pages/events.tsx
@@ -0,0 +1,170 @@
+/* eslint-disable jsx-a11y/anchor-is-valid -- Disabled because of a lot of placeholder hrefs */
+import Navbar, { NavbarProps } from "@/components/Navbar";
+import createClient from "@/lib/cmsClient";
+import styles from "@/styles/events.module.css";
+import { readItems } from "@directus/sdk";
+import {
+  Button,
+  Card,
+  CardContent,
+  CardMedia,
+  Typography,
+} from "@mui/material";
+import { GetStaticProps } from "next";
+import Head from "next/head";
+
+export const getStaticProps: GetStaticProps<EventsPageProps> = async () => {
+  const client = createClient();
+  const links = await client.request(readItems("NavigationLink"));
+  return {
+    props: {
+      navBar: {
+        links,
+      },
+    },
+  };
+};
+
+type EventsPageProps = {
+  navBar: NavbarProps;
+};
+
+export default function Events({ navBar }: EventsPageProps) {
+  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={styles.header}>
+        <div className={styles.headerContainer}>
+          <h1>Tapahtumat</h1>
+          <p className={styles.headerText}>
+            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor
+            doloribus impedit sapiente ipsum rerum neque consequatur tempore,
+            sit repellat unde, enim veniam accusantium minima molestias?
+            Obcaecati quis doloribus quae nesciunt?
+          </p>
+        </div>
+      </header>
+      <main className={styles.main}>
+        <section className={styles.eventsSection}>
+          <div className={styles.eventsContainer}>
+            <Card className={styles.hCard}>
+              <CardContent className={styles.cardContent}>
+                <span className={styles.cardContentText}>
+                  <Typography className={styles.cardTitle}>
+                    Rapujuhlat
+                  </Typography>
+                  <Typography className={styles.cardDescription}>
+                    <p>
+                      <b>Aika:</b> Lauantaina 11.1.2024
+                    </p>
+                    <p>
+                      <b>Paika:</b> Osakuntahuoneisto viisi
+                    </p>
+                  </Typography>
+                </span>
+                <Button variant="contained" className={styles.buttonPink}>
+                  Lisätiedot
+                </Button>
+              </CardContent>
+              <CardMedia
+                component="img"
+                image="/Placeholder_5.png"
+                alt="A placeholder image"
+                className={styles.cardMedia}
+              />
+            </Card>
+            <Card className={styles.hCard}>
+              <CardContent className={styles.cardContent}>
+                <span className={styles.cardContentText}>
+                  <Typography className={styles.cardTitle}>
+                    Rapujuhlat
+                  </Typography>
+                  <Typography className={styles.cardDescription}>
+                    <p>
+                      <b>Aika:</b> Lauantaina 11.1.2024
+                    </p>
+                    <p>
+                      <b>Paika:</b> Osakuntahuoneisto viisi
+                    </p>
+                  </Typography>
+                </span>
+                <Button variant="contained" className={styles.buttonPink}>
+                  Lisätiedot
+                </Button>
+              </CardContent>
+              <CardMedia
+                component="img"
+                image="/Placeholder_1.png"
+                alt="A placeholder image"
+                className={styles.cardMedia}
+              />
+            </Card>
+          </div>
+        </section>
+        <section className={styles.meetingsSection}>
+          <div className={styles.eventsContainer}>
+            <h2>Kerhojen Kokoontumiset</h2>
+            <Card className={styles.hCard}>
+              <CardContent className={styles.cardContent}>
+                <span className={styles.cardContentText}>
+                  <Typography className={styles.cardTitle}>
+                    Rapujuhlat
+                  </Typography>
+                  <Typography className={styles.cardDescription}>
+                    <p>
+                      <b>Aika:</b> Lauantaina 11.1.2024
+                    </p>
+                    <p>
+                      <b>Paika:</b> Osakuntahuoneisto viisi
+                    </p>
+                  </Typography>
+                </span>
+                <Button variant="contained" className={styles.buttonPink}>
+                  Lisätiedot
+                </Button>
+              </CardContent>
+              <CardMedia
+                component="img"
+                image="/Placeholder_5.png"
+                alt="A placeholder image"
+                className={styles.cardMedia}
+              />
+            </Card>
+            <Card className={styles.hCard}>
+              <CardContent className={styles.cardContent}>
+                <span className={styles.cardContentText}>
+                  <Typography className={styles.cardTitle}>
+                    Rapujuhlat
+                  </Typography>
+                  <Typography className={styles.cardDescription}>
+                    <p>
+                      <b>Aika:</b> Lauantaina 11.1.2024
+                    </p>
+                    <p>
+                      <b>Paika:</b> Osakuntahuoneisto viisi
+                    </p>
+                  </Typography>
+                </span>
+                <Button variant="contained" className={styles.buttonPink}>
+                  Lisätiedot
+                </Button>
+              </CardContent>
+              <CardMedia
+                component="img"
+                image="/Placeholder_1.png"
+                alt="A placeholder image"
+                className={styles.cardMedia}
+              />
+            </Card>
+          </div>
+        </section>
+      </main>
+      <footer className={styles.footer}>blah</footer>
+    </>
+  );
+}
diff --git a/pages/index.tsx b/pages/index.tsx
index 76da80f..437555e 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,7 +1,10 @@
 /* eslint-disable jsx-a11y/anchor-is-valid -- Disabled because of a lot of placeholder hrefs */
 import Carousel from "@/components/Carousel";
 import Navbar, { NavbarProps } from "@/components/Navbar";
+import WeekCalendar from "@/components/WeekCalendar";
+import createClient from "@/lib/cmsClient";
 import styles from "@/styles/Home.module.css";
+import { readItems } from "@directus/sdk";
 import {
   Button,
   Card,
@@ -16,8 +19,6 @@ import { GetStaticProps } from "next";
 import Head from "next/head";
 import Image from "next/image";
 import Link from "next/link";
-import createClient from "@/lib/cmsClient";
-import { readItems } from "@directus/sdk";
 import aino from "../public/aino.png";
 import arrowBlue from "../public/arrow_forward_blue.svg";
 import arrowWhite from "../public/arrow_forward_white.svg";
@@ -48,22 +49,19 @@ export default function Home({ navBar }: HomePageProps) {
     <>
       <Head>
         <title>Satakuntalainen Osakunta</title>
-        <link
-          rel="icon"
-          href="/new-sato-website/public/favicon.ico"
-          type="image/x-icon"
-        />
+        <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={styles.hero}>
+        <h2 className={styles.h2}>Ystäviä, tapahtumia ja koti Kampissa</h2>
+        <Button variant="contained" className={styles.heroBtn}>
+          Liity osakuntaan
+        </Button>
+      </header>
       <main className={styles.main}>
-        <Navbar links={navBar.links} />
         {/* Hero */}
-        <section className={styles.hero}>
-          <h2 className={styles.h2}>Ystäviä, tapahtumia ja koti Kampissa</h2>
-          <Button variant="contained" className={styles.heroBtn}>
-            Liity osakuntaan
-          </Button>
-        </section>
+
         {/* Cards */}
         <section className={styles.cards}>
           <Card className={styles.colorCard}>
@@ -251,13 +249,13 @@ export default function Home({ navBar }: HomePageProps) {
         <section className={styles.calendarSection}>
           <span className={styles.sectionContainer}>
             <h2>Kalenteri</h2>
+            <WeekCalendar />
           </span>
         </section>
         {/* Carousel */}
         <section className={styles.karhunkierros}>
-          <h2>Osakuntalehti Karhunkierros</h2>
-
           <span className={styles.carouselContainer}>
+            <h2>Osakuntalehti Karhunkierros</h2>
             <Carousel slides={SLIDES} options={OPTIONS} />
           </span>
         </section>
diff --git a/pages/karhunkierros.tsx b/pages/karhunkierros.tsx
index 2453ddf..da1cb39 100644
--- a/pages/karhunkierros.tsx
+++ b/pages/karhunkierros.tsx
@@ -40,26 +40,22 @@ export default function Karhunkierros({ navBar }: KarhunkierrosPageProps) {
     <>
       <Head>
         <title>Satakuntalainen Osakunta</title>
-        <link
-          rel="icon"
-          href="/new-sato-website/public/favicon.ico"
-          type="image/x-icon"
-        />
+        <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={styles.header}>
+        <div className={styles.headerContainer}>
+          <h1>Karhunkierros lehti</h1>
+          <p className={styles.headerText}>
+            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor
+            doloribus impedit sapiente ipsum rerum neque consequatur tempore,
+            sit repellat unde, enim veniam accusantium minima molestias?
+            Obcaecati quis doloribus quae nesciunt?
+          </p>
+        </div>
+      </header>
       <main className={styles.main}>
-        <Navbar links={navBar.links} />
-        <header className={styles.header}>
-          <div className={styles.headerContainer}>
-            <h1>Karhunkierros lehti</h1>
-            <p className={styles.headerText}>
-              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor
-              doloribus impedit sapiente ipsum rerum neque consequatur tempore,
-              sit repellat unde, enim veniam accusantium minima molestias?
-              Obcaecati quis doloribus quae nesciunt?
-            </p>
-          </div>
-        </header>
         <section className={styles.magazines}>
           <Card className={styles.magazineCard}>
             <CardActionArea>
diff --git a/pages/nation-info.tsx b/pages/nation-info.tsx
index 7da1e23..7824b9d 100644
--- a/pages/nation-info.tsx
+++ b/pages/nation-info.tsx
@@ -29,34 +29,30 @@ export default function NationInfo({ navBar }: NationInfoPageProps) {
     <>
       <Head>
         <title>Satakuntalainen Osakunta</title>
-        <link
-          rel="icon"
-          href="/new-sato-website/public/favicon.ico"
-          type="image/x-icon"
-        />
+        <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} />
+      {/* Image Header */}
+      <header className={styles.infoHeader}>
+        <div className={styles.headerContainer}>
+          <h1 className={styles.h1}>Tietoa Osakunnosta</h1>
+          <p className={styles.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>
+          <Image
+            src="https://scontent-hel3-1.xx.fbcdn.net/v/t39.30808-6/327171926_575978767373053_5152094067402815471_n.jpg?_nc_cat=103&ccb=1-7&_nc_sid=cc71e4&_nc_ohc=eAMfu1-_YcgQ7kNvgH3C_nE&_nc_ht=scontent-hel3-1.xx&oh=00_AYDTfxBnpbvvmIng2wEwR6CLu35S7gjGnoujSlYQQmp5nw&oe=66B9427E"
+            alt="Nation members holding a flag"
+            width={800}
+            height={300}
+            className={styles.headerImage}
+          />
+        </div>
+      </header>
       <main className={styles.main}>
-        <Navbar links={navBar.links} />
-        {/* Image Header */}
-        <header className={styles.infoHeader}>
-          <div className={styles.headerContainer}>
-            <h1 className={styles.h1}>Tietoa Osakunnosta</h1>
-            <p className={styles.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>
-            <Image
-              src="https://scontent-hel3-1.xx.fbcdn.net/v/t39.30808-6/327171926_575978767373053_5152094067402815471_n.jpg?_nc_cat=103&ccb=1-7&_nc_sid=cc71e4&_nc_ohc=eAMfu1-_YcgQ7kNvgH3C_nE&_nc_ht=scontent-hel3-1.xx&oh=00_AYDTfxBnpbvvmIng2wEwR6CLu35S7gjGnoujSlYQQmp5nw&oe=66B9427E"
-              alt="Nation members holding a flag"
-              width={800}
-              height={300}
-              className={styles.headerImage}
-            />
-          </div>
-        </header>
         <section className={styles.infoSection}>
           <aside className={styles.infoContainer}>
             <h2 className={styles.h2}>Mikä on Satakuntalainen osakunta?</h2>
diff --git a/pages/news.tsx b/pages/news.tsx
new file mode 100644
index 0000000..d849fad
--- /dev/null
+++ b/pages/news.tsx
@@ -0,0 +1,173 @@
+import Navbar, { NavbarProps } from "@/components/Navbar";
+import createClient from "@/lib/cmsClient";
+import styles from "@/styles/news.module.css";
+import { readItems } from "@directus/sdk";
+import {
+  List,
+  ListItemButton,
+  Pagination,
+  Paper,
+  Tooltip,
+} from "@mui/material";
+import { GetStaticProps } from "next";
+import Head from "next/head";
+
+export const getStaticProps: GetStaticProps<NewsPageProps> = async () => {
+  const client = createClient();
+  const links = await client.request(readItems("NavigationLink"));
+  return {
+    props: {
+      navBar: {
+        links,
+      },
+    },
+  };
+};
+
+type NewsPageProps = {
+  navBar: NavbarProps;
+};
+
+export default function News({ navBar }: NewsPageProps) {
+  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={styles.header}>
+        <div className={styles.headerContainer}>
+          <h1 className={styles.h1}>Uutiset</h1>
+          <p className={styles.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={styles.main}>
+        <Paper elevation={0} className={styles.newsContainer}>
+          <div className={styles.listContainer}>
+            <List className={styles.articleList}>
+              <Tooltip
+                title="Osakunnan viikko 34&35 / Nations week 34&45"
+                arrow
+              >
+                <ListItemButton className={styles.articleListItem}>
+                  Osakunnan viikko 34&35 / Nations week 34&45
+                </ListItemButton>
+              </Tooltip>
+              <ListItemButton className={styles.articleListItem}>
+                SatOn viikko 15 / week 15
+              </ListItemButton>
+              <ListItemButton className={styles.articleListItem}>
+                SatOn viikko 14 / week 14
+              </ListItemButton>
+              <ListItemButton className={styles.articleListItem}>
+                SatOn viikko 13 / week 13
+              </ListItemButton>
+              <ListItemButton className={styles.articleListItem}>
+                Kutsu Satakuntalaisen Osakunnan maaliskuun juhlakokoukseen
+                20.3.2024 klo 19:15
+              </ListItemButton>
+              <ListItemButton className={styles.articleListItem}>
+                Kutsu Satakuntalaisen Osakunnan maaliskuun juhlakokoukseen
+                20.3.2024 klo 19:15
+              </ListItemButton>
+              <ListItemButton className={styles.articleListItem}>
+                SatOn viikko 12 / week 12
+              </ListItemButton>
+              <ListItemButton className={styles.articleListItem}>
+                SatOn viikko 11 / week 11
+              </ListItemButton>
+              <ListItemButton className={styles.articleListItem}>
+                SatOn viikko 10 / week 10
+              </ListItemButton>
+              <ListItemButton className={styles.articleListItem}>
+                SatOn viikko 9 / week 9
+              </ListItemButton>
+              <ListItemButton className={styles.articleListItem}>
+                Kutsu Satakuntalaisen Osakunnan helmikuun kokoukseen ke
+                21.2.2024 klo 19.15
+              </ListItemButton>
+            </List>
+            <Pagination count={3} />
+          </div>
+          <Paper elevation={0} className={styles.articleWindow}>
+            <h2>Title</h2>
+            <p>
+              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi
+              dolore hic minus quaerat, fugit, veniam inventore recusandae esse
+              impedit ratione unde eius ipsa necessitatibus odit beatae, modi
+              aut blanditiis exercitationem?
+            </p>
+            <p>
+              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi
+              dolore hic minus quaerat, fugit, veniam inventore recusandae esse
+              impedit ratione unde eius ipsa necessitatibus odit beatae, modi
+              aut blanditiis exercitationem?
+            </p>
+            <p>
+              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi
+              dolore hic minus quaerat, fugit, veniam inventore recusandae esse
+              impedit ratione unde eius ipsa necessitatibus odit beatae, modi
+              aut blanditiis exercitationem?
+            </p>
+            <p>
+              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi
+              dolore hic minus quaerat, fugit, veniam inventore recusandae esse
+              impedit ratione unde eius ipsa necessitatibus odit beatae, modi
+              aut blanditiis exercitationem?
+            </p>
+            <p>
+              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi
+              dolore hic minus quaerat, fugit, veniam inventore recusandae esse
+              impedit ratione unde eius ipsa necessitatibus odit beatae, modi
+              aut blanditiis exercitationem?
+            </p>
+            <p>
+              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi
+              dolore hic minus quaerat, fugit, veniam inventore recusandae esse
+              impedit ratione unde eius ipsa necessitatibus odit beatae, modi
+              aut blanditiis exercitationem?
+            </p>
+            <p>
+              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi
+              dolore hic minus quaerat, fugit, veniam inventore recusandae esse
+              impedit ratione unde eius ipsa necessitatibus odit beatae, modi
+              aut blanditiis exercitationem?
+            </p>
+            <p>
+              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi
+              dolore hic minus quaerat, fugit, veniam inventore recusandae esse
+              impedit ratione unde eius ipsa necessitatibus odit beatae, modi
+              aut blanditiis exercitationem?
+            </p>
+            <p>
+              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi
+              dolore hic minus quaerat, fugit, veniam inventore recusandae esse
+              impedit ratione unde eius ipsa necessitatibus odit beatae, modi
+              aut blanditiis exercitationem?
+            </p>
+            <p>
+              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi
+              dolore hic minus quaerat, fugit, veniam inventore recusandae esse
+              impedit ratione unde eius ipsa necessitatibus odit beatae, modi
+              aut blanditiis exercitationem?
+            </p>
+            <p>
+              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi
+              dolore hic minus quaerat, fugit, veniam inventore recusandae esse
+              impedit ratione unde eius ipsa necessitatibus odit beatae, modi
+              aut blanditiis exercitationem?
+            </p>
+          </Paper>
+        </Paper>
+      </main>
+      <footer className={styles.footer} />
+    </>
+  );
+}
diff --git a/pages/official-documents.tsx b/pages/official-documents.tsx
index b1f4620..2b7db63 100644
--- a/pages/official-documents.tsx
+++ b/pages/official-documents.tsx
@@ -35,26 +35,22 @@ export default function OfficialDocuments({
     <>
       <Head>
         <title>Satakuntalainen Osakunta</title>
-        <link
-          rel="icon"
-          href="/new-sato-website/public/favicon.ico"
-          type="image/x-icon"
-        />
+        <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={styles.header}>
+        <div className={styles.headerContainer}>
+          <h1>Viralliset Documentit</h1>
+          <p className={styles.headerText}>
+            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor
+            doloribus impedit sapiente ipsum rerum neque consequatur tempore,
+            sit repellat unde, enim veniam accusantium minima molestias?
+            Obcaecati quis doloribus quae nesciunt?
+          </p>
+        </div>
+      </header>
       <main className={styles.main}>
-        <Navbar links={navBar.links} />
-        <header className={styles.header}>
-          <div className={styles.headerContainer}>
-            <h1>Viralliset Documentit</h1>
-            <p className={styles.headerText}>
-              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor
-              doloribus impedit sapiente ipsum rerum neque consequatur tempore,
-              sit repellat unde, enim veniam accusantium minima molestias?
-              Obcaecati quis doloribus quae nesciunt?
-            </p>
-          </div>
-        </header>
         <section className={styles.documentSection}>
           <List className={styles.documentList}>
             <ListSubheader className={styles.h3}>Rules</ListSubheader>
diff --git a/public/Placeholder_1.png b/public/Placeholder_1.png
new file mode 100644
index 0000000..4cc2996
Binary files /dev/null and b/public/Placeholder_1.png differ
diff --git a/public/Placeholder_5.png b/public/Placeholder_5.png
new file mode 100644
index 0000000..407d68a
Binary files /dev/null and b/public/Placeholder_5.png differ
diff --git a/public/favicon.ico b/public/favicon.ico
index c2e083d..aa11dd1 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/styles/Home.module.css b/styles/Home.module.css
index 8b88e55..c7c7983 100644
--- a/styles/Home.module.css
+++ b/styles/Home.module.css
@@ -146,7 +146,6 @@
 .calendarSection {
   background-color: var(--pink);
   width: 100%;
-  height: 50rem;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -160,16 +159,21 @@
 
 /* Carousel */
 .karhunkierros {
-  width: 70%;
+  width: 100%;
   display: flex;
-  flex-direction: column;
   justify-content: center;
-  align-items: flex-start;
-  margin: 5rem 0 5rem 0;
+  align-items: center;
+  margin: 5rem 0;
 }
 
 .carouselContainer {
+  width: 70%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
   margin: 1rem 0 1rem 0;
+  gap: 1rem;
 }
 
 /* Contact */
diff --git a/styles/calendar.module.css b/styles/calendar.module.css
new file mode 100644
index 0000000..2460abe
--- /dev/null
+++ b/styles/calendar.module.css
@@ -0,0 +1,43 @@
+.main {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.h3 {
+  font-size: 2rem;
+  font-weight: 600;
+  margin: 0.5rem 0;
+  color: var(--blue300);
+  font-family: "Raleway", sans-serif;
+}
+
+.header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 5rem 0;
+  width: 100%;
+  background-color: var(--blue100);
+  margin-bottom: 5rem;
+}
+
+.headerContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 70%;
+}
+
+.headerText {
+  width: 70%;
+}
+
+.footer {
+  width: 100%;
+  height: 20rem;
+  background-color: var(--blue300);
+  margin-top: 5rem;
+}
diff --git a/styles/events.module.css b/styles/events.module.css
new file mode 100644
index 0000000..9c716be
--- /dev/null
+++ b/styles/events.module.css
@@ -0,0 +1,100 @@
+.main {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.h3 {
+  font-size: 2rem;
+  font-weight: 600;
+  margin: 0.5rem 0;
+}
+
+.header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 5rem 0;
+  width: 100%;
+  background-color: var(--blue100);
+}
+
+.headerContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  width: 70%;
+}
+
+.headerText {
+  width: 55%;
+}
+
+.eventsSection {
+  background-color: var(--blue100);
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding-bottom: 2.5rem;
+}
+
+.eventsContainer {
+  width: 70%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 2rem;
+}
+
+.hCard {
+  display: flex;
+  border-radius: 1rem;
+  background-color: var(--blue300);
+}
+
+.cardContent {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+  width: 50%;
+  color: var(--white);
+}
+
+.cardTitle {
+  font-size: 2rem;
+  font-weight: 500;
+}
+
+.buttonPink {
+  border-radius: 5rem;
+  padding: 0.5rem 1.5rem;
+  background-color: var(--pink);
+  color: var(--blue300);
+}
+
+.cardMedia {
+  border-radius: 1rem;
+  width: 50%;
+}
+
+.meetingsSection {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding-top: 2.5rem;
+  margin-bottom: 5rem;
+}
+
+.footer {
+  width: 100%;
+  height: 20rem;
+  background-color: var(--blue300);
+}
diff --git a/styles/globals.css b/styles/globals.css
index b29744f..8636cad 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -14,6 +14,40 @@
 
   scroll-behavior: smooth;
   transition: 0.3s ease;
+
+  /* Full Calendar */
+  --fc-small-font-size: 0.85em;
+  --fc-page-bg-color: #fff;
+  --fc-neutral-bg-color: rgba(208, 208, 208, 0.3);
+  --fc-neutral-text-color: #808080;
+  --fc-border-color: #ddd;
+
+  --fc-button-text-color: #fff;
+  --fc-button-bg-color: #2c3e50;
+  --fc-button-border-color: #2c3e50;
+  --fc-button-hover-bg-color: #1e2b37;
+  --fc-button-hover-border-color: #1a252f;
+  --fc-button-active-bg-color: #1a252f;
+  --fc-button-active-border-color: #151e27;
+
+  --fc-event-bg-color: #3788d8;
+  --fc-event-border-color: #3788d8;
+  --fc-event-text-color: #fff;
+  --fc-event-selected-overlay-color: rgba(0, 0, 0, 0.25);
+
+  --fc-more-link-bg-color: #d0d0d0;
+  --fc-more-link-text-color: inherit;
+
+  --fc-event-resizer-thickness: 8px;
+  --fc-event-resizer-dot-total-width: 8px;
+  --fc-event-resizer-dot-border-width: 1px;
+
+  --fc-non-business-color: rgba(215, 215, 215, 0.3);
+  --fc-bg-event-color: rgb(143, 223, 130);
+  --fc-bg-event-opacity: 0.3;
+  --fc-highlight-color: rgba(188, 232, 241, 0.3);
+  --fc-today-bg-color: var(--blue100);
+  --fc-now-indicator-color: red;
 }
 
 List,
@@ -116,6 +150,12 @@ dd {
   font-weight: 700;
 }
 
+/* Month calendar */
+.fc {
+  width: 100%;
+  height: auto;
+}
+
 @media (max-width: 1050px) {
   .embla {
     --slide-size: 40%;
diff --git a/styles/news.module.css b/styles/news.module.css
new file mode 100644
index 0000000..f4e9d74
--- /dev/null
+++ b/styles/news.module.css
@@ -0,0 +1,84 @@
+.main {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.h3 {
+  font-size: 2rem;
+  font-weight: 600;
+  margin: 0.5rem 0;
+  color: var(--blue300);
+  font-family: "Raleway", sans-serif;
+}
+
+.header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 5rem 0;
+  width: 100%;
+  background-color: var(--blue100);
+  margin-bottom: 5rem;
+}
+
+.headerContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 70%;
+}
+
+.headerText {
+  width: 70%;
+}
+
+.newsContainer {
+  background-color: var(--blue100);
+  width: 70%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem;
+  border-radius: 1.5rem;
+}
+
+.listContainer {
+  width: 26%;
+}
+
+.articleList {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+}
+
+.articleListItem {
+  display: block;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 1.2rem;
+  font-weight: 500;
+}
+
+.articleWindow {
+  width: 70%;
+  max-height: 60vh;
+  overflow-y: scroll;
+  padding: 1rem;
+  border-radius: 1rem;
+}
+
+.footer {
+  width: 100%;
+  height: 20rem;
+  background-color: var(--blue300);
+  margin-top: 5rem;
+}