diff --git a/notes.md b/notes.md
index c3fcbb2..6cd28b3 100644
--- a/notes.md
+++ b/notes.md
@@ -46,3 +46,9 @@ const test = convertToImage(result);
 console.log(result);
 return test;
 }
+
+## Currents Api Token
+
+dRj7MBwlYafKn4RJFGHIM--anhE1w_bpXLYKo7hdZIKJW0eX
+
+https://api.currentsapi.services/v1/latest-news?language=de&apiKey=dRj7MBwlYafKn4RJFGHIM--anhE1w_bpXLYKo7hdZIKJW0eX
diff --git a/src/components/cat/cat.stories.ts b/src/components/cat/cat.stories.ts
index 8fe07ab..44ac5bb 100644
--- a/src/components/cat/cat.stories.ts
+++ b/src/components/cat/cat.stories.ts
@@ -4,7 +4,7 @@ import { createElement } from "../../utils/createElement";
 import { getRandomCat } from "../../utils/api";
 
 export default {
-  title: "Components/Hello Cat",
+  title: "Components/Cat",
   parameters: { layout: "centered" },
 };
 
diff --git a/src/components/headline/headline.css b/src/components/headline/headline.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/headline/headline.stories.ts b/src/components/headline/headline.stories.ts
new file mode 100644
index 0000000..c807736
--- /dev/null
+++ b/src/components/headline/headline.stories.ts
@@ -0,0 +1,19 @@
+import "./headline.css";
+import { displayGermanHeadline } from "./headline";
+import { createElement } from "../../utils/createElement";
+import { getRandomHeadlineGerman } from "../../utils/api";
+
+export default {
+  title: "Components/Headline",
+  parameters: { layout: "centered" },
+};
+
+export const HeadlineFromAPI = (args, { loaded: { headline } }) => {
+  return displayGermanHeadline(headline);
+};
+
+HeadlineFromAPI.loaders = [
+  async () => ({
+    headline: await getRandomHeadlineGerman(),
+  }),
+];
diff --git a/src/components/headline/headline.ts b/src/components/headline/headline.ts
new file mode 100644
index 0000000..b38ccdc
--- /dev/null
+++ b/src/components/headline/headline.ts
@@ -0,0 +1,17 @@
+import { createElement } from "../../utils/createElement";
+
+export function displayGermanHeadline({ headline, link }) {
+  return createElement("div", {
+    className: "headline__container",
+    childs: [
+      createElement("p", {
+        className: "headline",
+        innerText: headline,
+      }),
+      createElement("a", {
+        href: link,
+        innerText: "Artikel lesen",
+      }),
+    ],
+  });
+}
diff --git a/src/components/typography/typography.css b/src/components/typography/typography.css
deleted file mode 100644
index 891800d..0000000
--- a/src/components/typography/typography.css
+++ /dev/null
@@ -1,3 +0,0 @@
-h1 {
-  font-size: 2rem;
-}
diff --git a/src/components/typography/typography.html b/src/components/typography/typography.html
deleted file mode 100644
index ea650ea..0000000
--- a/src/components/typography/typography.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<h1>H1</h1>
-<h2>H2</h2>
-<h3>H3</h3>
-<h4>H4</h4>
-<h5>h5</h5>
-<h6>H6</h6>
diff --git a/src/components/typography/typography.stories.js b/src/components/typography/typography.stories.js
deleted file mode 100644
index 2a429a9..0000000
--- a/src/components/typography/typography.stories.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import "./typography.css";
-import typography from "./typography.html";
-
-export default {
-  title: "Components/Typography",
-  parameters: { layout: "centered" },
-};
-
-export const headers = () => typography;
diff --git a/src/utils/api.ts b/src/utils/api.ts
index 8057cd1..f17300f 100644
--- a/src/utils/api.ts
+++ b/src/utils/api.ts
@@ -1,5 +1,3 @@
-import { ClassificationType } from "typescript";
-
 //TheCatAPI
 // Schema von CatAPI
 export type Cat = {
@@ -36,3 +34,45 @@ export async function getRandomCat() {
 }
 
 // News API
+// Schema currentsAPI
+export type News = {
+  status: string;
+  news: [
+    {
+      id: string;
+      title: string;
+      description: string;
+      url: string;
+      author: string;
+      image: string;
+      language: string;
+      category: string[];
+      published: string;
+    }
+  ];
+  page: number;
+};
+
+// Was ich brauch von currentsAPI
+export type Headline = {
+  headline: string;
+  link: string;
+};
+
+const randomHeadline = Math.floor(Math.random() * 30);
+
+function convertToText(headline: News): Headline {
+  return {
+    headline: headline.news[randomHeadline].title,
+    link: headline.news[randomHeadline].url,
+  };
+}
+
+export async function getRandomHeadlineGerman() {
+  const response = await fetch(
+    `https://api.currentsapi.services/v1/latest-news?language=de&apiKey=dRj7MBwlYafKn4RJFGHIM--anhE1w_bpXLYKo7hdZIKJW0eX`
+  );
+  const result = (await response.json()) as News;
+  const headline = convertToText(result);
+  return headline;
+}