diff --git a/apps/kvarteret/components/HappeningToday.tsx b/apps/kvarteret/components/HappeningToday.tsx
new file mode 100644
index 0000000..489e82a
--- /dev/null
+++ b/apps/kvarteret/components/HappeningToday.tsx
@@ -0,0 +1,70 @@
+import { TodayItem } from "../components/TodayItem";
+import { Title } from "dak-components";
+import TranslatedField, {
+  useTranslation,
+} from "dak-components/lib/components/TranslatedField";
+
+const HappeningToday = ({ events }: { events: { time: String; room: String; title: String; }[] }) => {
+  return (
+
+    /* Creates the element wrapper */
+    <div className="happening-today">
+      <Title underlined>
+        <TranslatedField tKey="index-happening-today" />
+      </Title>
+
+      {/* Creates the event elements */}
+      <div className="happening-today-content">
+        <TodayItem
+          bold
+          event={{
+            time: useTranslation("time"),
+            room: useTranslation("room"),
+            title: useTranslation("event"),
+          }}
+        />
+
+        {/* Maps a unique key to the event properties */}
+        {events.map((x, i) => (
+          <TodayItem key={i} event={x} />
+        ))}
+      </div>
+
+      {/* Creates different elements if there is no events */}
+      {events.length <= 0 && (
+        <div className="nothing-happening">
+          <TranslatedField tKey="index-nothing-happening-today" />
+        </div>
+      )}
+
+      {/* CSS for the elements above */}
+      <style jsx>
+        {`
+
+        .happening-today-content {
+          gap: 10px;
+          display: grid;
+          margin-top: 5px;
+          grid-template-columns: fit-content(200px) fit-content(200px) 1fr;
+        }
+
+        @media (max-width: 768px) {
+          .happening-today-content {
+            gap: 0;
+            display: grid;
+            grid-template-rows: repeat(auto-fit, 1fr);
+          }
+        }
+
+        .nothing-happening {
+          margin-top: 10px;
+        }
+      
+      `}
+      </style>
+    </div>
+
+  );
+};
+
+export default HappeningToday;
diff --git a/apps/kvarteret/components/TodayItem.js b/apps/kvarteret/components/TodayItem.tsx
similarity index 56%
rename from apps/kvarteret/components/TodayItem.js
rename to apps/kvarteret/components/TodayItem.tsx
index bae3cd3..068ecdc 100644
--- a/apps/kvarteret/components/TodayItem.js
+++ b/apps/kvarteret/components/TodayItem.tsx
@@ -1,4 +1,4 @@
-const TodayItem = ({ event, bold }) => {
+const TodayItem = ({ event, bold = false }: { event: { time: String; room: String; title: String; }; bold?: boolean }) => {
   return (
     <>
       <div className="time">{event.time}</div>
@@ -7,15 +7,18 @@ const TodayItem = ({ event, bold }) => {
 
       <style jsx>
         {`
-          .time, .room, .title {
-          font-weight: ${bold ? "700" : "300"};
-
+          .time,
+          .room,
+          .title {
+            font-weight: ${bold ? "700" : "300"};
+            margin: 5px;
           }
 
           @media (max-width: 768px) {
             .title {
               margin-bottom: 10px;
             }
+            
           }
         `}
       </style>
diff --git a/apps/kvarteret/pages/index.js b/apps/kvarteret/pages/index.js
index ed053a8..da120e8 100644
--- a/apps/kvarteret/pages/index.js
+++ b/apps/kvarteret/pages/index.js
@@ -4,11 +4,10 @@ import fetchLayoutData from "dak-components/lib/cms/layout";
 import { Title } from "dak-components";
 import { Carousel } from "../components/Carousel";
 import { EventList } from "../components/EventList";
-import { TodayItem } from "../components/TodayItem";
+import HappeningToday from "../components/HappeningToday";
 import { NextSeo } from "next-seo";
 import TranslatedField, {
   getTranslationsData,
-  useTranslation,
 } from "dak-components/lib/components/TranslatedField";
 
 export async function getStaticProps(context) {
@@ -47,43 +46,27 @@ export default function Index({ data }) {
         <div className="today">
           <ExternalContent html={data.todayText} />
         </div>
-        <div className="happening-today">
-          <Title underlined><TranslatedField tKey="index-happening-today" /></Title>
-          <div className="happening-today-content">
-            <TodayItem
-              bold
-              event={{
-                time: useTranslation("time"),
-                room: useTranslation("room"),
-                title: useTranslation("event"),
-              }}
-            />
-            {data.eventsToday.map((x, i) => (
-              <TodayItem key={i} event={x} />
-            ))}
-          </div>
-          {data.eventsToday.length <= 0 && (
-            <div className="nothing-happening">
-              <TranslatedField tKey="index-nothing-happening-today" />
-            </div>
-          )}
-        </div>
+        <HappeningToday events={data.eventsToday} />
         <div className="opening-hours">
           <Title underlined>
             <TranslatedField tKey="footer-opening-hours" />
           </Title>
           <OpeningHours openingHours={data.openingHours} />
           <Link href="vare-barer">
-            <a className="vare-barer"><TranslatedField tKey="footer-opening-hours-description" /></a>
+            <a className="vare-barer">
+              <TranslatedField tKey="footer-opening-hours-description" />
+            </a>
           </Link>
         </div>
         <div className="events">
           <Title underlined big>
-          <TranslatedField tKey="index-coming-events" />
+            <TranslatedField tKey="index-coming-events" />
           </Title>
           <EventList events={data.events} />
           <Link href="events">
-            <a className="more-events"><TranslatedField tKey="index-see-more-events" /></a>
+            <a className="more-events">
+              <TranslatedField tKey="index-see-more-events" />
+            </a>
           </Link>
         </div>
       </div>
@@ -102,7 +85,6 @@ export default function Index({ data }) {
             .happening-today-content {
               gap: 0;
               display: grid;
-              grid-template-columns: 1fr;
               grid-template-rows: repeat(auto-fit, 1fr);
             }
           }
diff --git a/packages/dak-components/lib/cms/index.js b/packages/dak-components/lib/cms/index.js
index 8f384aa..890ea2e 100644
--- a/packages/dak-components/lib/cms/index.js
+++ b/packages/dak-components/lib/cms/index.js
@@ -41,6 +41,7 @@ const getRelativeDate = (date, lang) => {
 };
 
 const getTimeText = (start, end, lang) => {
+  
   // Not yet happened
   if (start >= new Date()) {
     if (lang == "no") return `Starter ${format(start, "HH:mm")}`;
@@ -48,17 +49,23 @@ const getTimeText = (start, end, lang) => {
   }
 
   //Happening now
-  if (new Date() < end) {
-    if (isSameDay(new Date(), end)) {
-      if (lang == "no") return `Varer til ${format(end, "HH:mm")}`;
-      if (lang == "en") return `Lasts until ${format(end, "HH:mm")}`;
+  if(new Date() < end) {
+
+    if(isSameDay(new Date(), end)) {
+      return `${format(start, "HH:mm")} - ${format(end, "HH:mm")}`;
+    } else {
+      return getRelativeDate(end, lang);
+
     }
-    if (lang == "no") return `Varer til ${getRelativeDate(end, lang)}`;
-    if (lang == "en") return `Lasts until ${getRelativeDate(end, lang)}`;
   }
 
-  return `${format(start, "HH:mm")} - ${format(end, "HH:mm")}`;
-};
+  //Finished event
+  if(new Date() >= end) {
+    if(lang == "no") return `FERDIG`;
+    if(lang == "no") return `FINISHED`;
+  }
+
+}
 
 const fetchIndexData = async (lang) => {
   const eventsAfter = await getEventsAfter(lang, new Date());
diff --git a/packages/dak-components/lib/crescat.js b/packages/dak-components/lib/crescat.js
deleted file mode 100644
index 8646c9e..0000000
--- a/packages/dak-components/lib/crescat.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import axios from 'axios'
-
-import cache from 'memory-cache';
-
-const cachedGet = async (url, headers) => {
-    const cachedResponse = cache.get(url);
-    if(cachedResponse) {
-        return cachedResponse;
-    }
-
-    const cacheTime = 1000 * 60 * 30; //Cached for 1 minutes
-    const response = await axios.get(url, {
-        headers
-    });
-    const data = response.data;
-    cache.put(url, data, cacheTime);
-    return data;
-}
-
-const getEvents = async () => {
-    // TODO: Place as env variable
-    const crescatData = await cachedGet("https://app.crescat.io/external/v1/calendar", {
-        Authorization: `Bearer ${process.env.CRESCAT_TOKEN}`
-    });
-
-    return crescatData.filter(x=>x.fields.some(x=>x.id === 70879));
-}
-
-export {getEvents};
\ No newline at end of file
diff --git a/packages/dak-components/lib/crescat.ts b/packages/dak-components/lib/crescat.ts
new file mode 100644
index 0000000..c4b41bf
--- /dev/null
+++ b/packages/dak-components/lib/crescat.ts
@@ -0,0 +1,78 @@
+import axios, { AxiosRequestHeaders } from 'axios'
+
+import cache from 'memory-cache';
+
+// Fetches the data from a given URL
+const cachedGet = async (url: string, headers: AxiosRequestHeaders) => {
+    const cachedResponse = cache.get(url);
+    if (cachedResponse) {
+        return cachedResponse;
+    }
+
+    const cacheTime = 1000 * 60 * 30; //Cached for 1 minutes
+    const response = await axios.get(url, {
+        headers
+    });
+
+    // Establishes the data from the URL-response
+    const data = response.data;
+    cache.put(url, data, cacheTime);
+    return data;
+}
+
+
+const getEvents = async () => {
+  // Fetches json payload from the Crescat booking site
+  const crescatData = (await cachedGet(
+    "https://app.crescat.io/external/v1/calendar",
+    {
+      Authorization: `Bearer ${process.env.CRESCAT_TOKEN}`,
+    }
+  )) as CrescatEvent[];
+
+  const showTimes = crescatData.flatMap(event => event.show_times);
+  return showTimes;
+  
+    //return crescatData.filter(x => x.fields.some(x => x.id === 70879));
+}
+
+
+
+export { getEvents };
+
+// Type definition for the crescatData
+export interface CrescatEvent {
+    id: number;
+    name: string;
+    start: Date;
+    end: Date;
+    event_type_id: number;
+    rooms: Room[];
+    show_times: Show_Times[];
+    fields: Field[];
+}
+
+export interface Field {
+    value: null | string;
+    show_time_id: null;
+    id: number;
+}
+
+export interface Room {
+    name: string;
+    id: number;
+    title: null | string;
+    start: Date;
+    end: Date;
+}
+
+
+export interface Show_Times {
+    id: number;
+    title: string;
+    description: string | null;
+    confirmed: boolean;
+    start: string;
+    end: string;
+    room_id: number;
+}
\ No newline at end of file