diff --git a/src/components/blog/feed/index.tsx b/src/components/blog/feed/index.tsx
index 58d0088..9dfc31b 100644
--- a/src/components/blog/feed/index.tsx
+++ b/src/components/blog/feed/index.tsx
@@ -1,16 +1,37 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 
 import { useFeed, FeedItemData } from "../wp";
 import { Post } from "./post";
 import { FilterControl } from "./filter-control";
 import { Spinner } from "../../spinner";
 import { SortMethodSelection, defaultSortMethod, SortMethod } from "./sorting";
+import { favoritPosts } from "../../../users_api/UserAPI";
 
 function PostList({ sortMethod }: { sortMethod: SortMethod<FeedItemData> }) {
+  const [favoritposts, setFavoritPosts] = useState([]);
+  const [loaded, setLoaded] = useState<boolean>(false);
   const { loading, error, data } = useFeed();
-  const [firstRenderDone, setFirstRenderDone] = React.useState(false);
+  const [firstRenderDone, setFirstRenderDone] = useState(false);
 
-  React.useEffect(() => {
+  const fetchFavorits = async () => {
+    let response;
+    try {
+      response = await favoritPosts();
+    } catch (error) {
+      setFavoritPosts([]);
+    }
+    // @ts-ignore
+    let slugs = response.slugs;
+    setFavoritPosts(JSON.parse(JSON.stringify(slugs)));
+    setLoaded(true);
+  };
+
+  useEffect(() => {
+    const loggedInUser = localStorage.getItem("user");
+
+    if (loggedInUser) {
+      fetchFavorits();
+    }
     if (data) setFirstRenderDone(true);
   }, [data]);
 
@@ -26,15 +47,19 @@ function PostList({ sortMethod }: { sortMethod: SortMethod<FeedItemData> }) {
 
   if (loading && firstRenderDone) return <Spinner />;
 
-  return (
-    <div className="grid grid-cols-1 gap-x-8 gap-y-12 sm:grid-cols-2 md:gap-x-10 xl:gap-16 2xl:grid-cols-3">
-      {(items[0] ? (items as FeedItemData[]).sort(sortMethod.fn) : items).map(
-        (data, i) => (
-          <Post data={data} key={i} />
-        )
-      )}
-    </div>
-  );
+  if (loaded) {
+    return (
+      <div className="grid grid-cols-1 gap-x-8 gap-y-12 sm:grid-cols-2 md:gap-x-10 xl:gap-16 2xl:grid-cols-3">
+        {(items[0] ? (items as FeedItemData[]).sort(sortMethod.fn) : items).map(
+          (data, i) => (
+            <Post data={data} key={i} favorits={favoritposts} />
+          )
+        )}
+      </div>
+    );
+  }
+
+  return <Spinner />
 }
 
 export const Feed: React.FC = () => {
diff --git a/src/components/blog/feed/post/index.tsx b/src/components/blog/feed/post/index.tsx
index c958d0c..633dc93 100644
--- a/src/components/blog/feed/post/index.tsx
+++ b/src/components/blog/feed/post/index.tsx
@@ -9,8 +9,10 @@ import { BookmarkButton } from "../../single/bookmark-button";
 import { DetailBar } from "./detail-bar";
 
 import styles from "./post.module.css";
+import { LatestPostData } from "../../wp/latest_post";
 
 export type ParsedPostData = {
+  slug: string;
   path: string;
   title: string;
   excerpt: string;
@@ -22,10 +24,11 @@ export type ParsedPostData = {
   tags?: TagData[];
 };
 
-export const Post: React.FC<{ data?: FeedItemData }> = ({ data }) => {
+export const Post: React.FC<{ data?: FeedItemData | LatestPostData, favorits: string[]}> = ({ data, favorits }) => {
   const parsedData = React.useMemo<ParsedPostData | undefined>(
     () =>
       data && {
+        slug: data.slug,
         path: `/blog/${data.slug}`,
         title: data.title,
         excerpt: data.excerpt,
@@ -84,7 +87,7 @@ export const Post: React.FC<{ data?: FeedItemData }> = ({ data }) => {
         </div>
       )}
       <div className="absolute right-1 -top-5">
-        <BookmarkButton disabled={!parsedData} />
+        <BookmarkButton slug={parsedData ? parsedData.slug : ""} disabled={!parsedData} posts={favorits} />
       </div>
     </div>
   );
diff --git a/src/components/blog/post-list/index.tsx b/src/components/blog/post-list/index.tsx
deleted file mode 100644
index af5613b..0000000
--- a/src/components/blog/post-list/index.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { favoritPosts } from "../../../users_api/UserAPI";
-
-import { usePosts } from "../wp";
-import { Post } from "./post";
-
-export const PostList: React.FC = () => {
-  const [favoritposts, setFavoritPosts] = useState([]);
-  const { isLoading, error, data } = usePosts();
-
-  useEffect(() => {
-    const loggedInUser = localStorage.getItem('user');
-    if (loggedInUser) {
-      const fetchFavorits = async () => {
-        let response;
-        try {
-          response = await favoritPosts()
-        } catch(error) {
-          console.log(error)
-        }
-        // @ts-ignore
-        let slugs = response.slugs
-        setFavoritPosts(JSON.parse(JSON.stringify(slugs)))
-      }
-      fetchFavorits();
-    }
-  }, [])
-
-  if (isLoading) return <div>Loading...</div>;
-  if (error || !data) return <div>Es ist ein Fehler aufgetreten.</div>;
-
-  return (
-    <div className="grid grid-cols-1 gap-x-8 gap-y-12 sm:grid-cols-2 md:gap-x-10 xl:gap-16 2xl:grid-cols-3">
-      {data.map((postData, i) => (
-        <Post data={postData} key={i} favorit={favoritposts.some((e) => e === postData.slug) ? true : false}/>
-      ))}
-    </div>
-  );
-};
diff --git a/src/components/blog/post-list/post/bookmark-button/index.tsx b/src/components/blog/post-list/post/bookmark-button/index.tsx
deleted file mode 100644
index 6f5c9aa..0000000
--- a/src/components/blog/post-list/post/bookmark-button/index.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import React from "react";
-import cn from "classnames";
-
-import { BookmarkIcon } from "./icon";
-
-import styles from "./bookmark.module.css";
-import { deFavorisePost, favorisePost } from "../../../../../users_api/UserAPI";
-
-export const BookmarkButton: React.FC <{ slug: string, favorit: boolean }> = ({ slug, favorit }) => {
-  const [active, setActive] = React.useState(favorit);
-
-  const updateFavorise = async (slug: string) => {
-    let favorite_blogpost = {
-        slug
-    }
-    if (active) {
-      try {
-        await deFavorisePost(favorite_blogpost)
-      } catch(error) {
-        console.log(error)
-      }
-    } else {
-      try {
-        await favorisePost(favorite_blogpost)
-      } catch(error) {
-        console.log(error)
-      }
-    }
-  }
-
-  return (
-    <button
-      className={cn(
-        styles.button,
-        "cursor-pointer group",
-        active && styles.active
-      )}
-      onClick={() => {
-        setActive(!active);
-        updateFavorise(slug);
-      }}
-    >
-      <div className="pointer-events-none">
-        <BookmarkIcon />
-      </div>
-    </button>
-  );
-};
diff --git a/src/components/blog/post-list/post/index.tsx b/src/components/blog/post-list/post/index.tsx
deleted file mode 100644
index 848e0b6..0000000
--- a/src/components/blog/post-list/post/index.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import React from "react";
-import { Link } from "react-router-dom";
-
-import { Media } from "../media";
-import { PostData } from "../../wp";
-
-import { BookmarkButton } from "./bookmark-button";
-import { DetailBar } from "./detail-bar";
-
-// const Link: React.FC<{ slug: string; className: string; }> = ({ slug, className }) => (
-//   <BaseLink
-//     to={`/blog/${slug}`}
-//   ></BaseLink>
-// );
-
-export const Post: React.FC<{ data: PostData, favorit: boolean }> = ({
-  data: { title, slug, excerpt, featured_media, date, _embedded },
-  favorit
-}) => {
-  const path = `/blog/${slug}`;
-
-  return (
-    <div className="flex flex-col relative">
-      <Link to={path} className="block">
-        <div className="relative pt-2/3 xs:pt-1/2 bg-gray-400 rounded-t-3xl">
-          {featured_media ? (
-            <Media
-              id={featured_media}
-              className="responsive-inset object-cover rounded-t-3xl select-none"
-              alt={title.rendered}
-            />
-          ) : null}
-        </div>
-      </Link>
-      <div className="flex-1 py-3 px-4 bg-bg-alt md:py-4 md:px-5">
-        <div className="uppercase font-semibold leading-snug text-lg">
-          <Link
-            to={path}
-            dangerouslySetInnerHTML={{ __html: title.rendered }}
-          />
-        </div>
-        {excerpt && (
-          <>
-            <div
-              dangerouslySetInnerHTML={{ __html: excerpt.rendered }}
-              className="text-sm mt-2 line-clamp-3 max-w-prose"
-            />
-            <Link
-              to={path}
-              className="inline-block mt-2 text-em3 text-sm font-semibold hover:underline"
-            >
-              mehr lesen
-            </Link>
-          </>
-        )}
-      </div>
-      <div className="pt-3">
-        <DetailBar date={date} term={_embedded && _embedded["wp:term"][0][0]} />
-      </div>
-      <div className="absolute right-1 -top-5">
-        <BookmarkButton slug={slug} favorit={favorit} />
-      </div>
-    </div>
-  );
-};
diff --git a/src/components/blog/single/bookmark-button/index.tsx b/src/components/blog/single/bookmark-button/index.tsx
index 8ec0884..e666e9b 100644
--- a/src/components/blog/single/bookmark-button/index.tsx
+++ b/src/components/blog/single/bookmark-button/index.tsx
@@ -1,20 +1,52 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import cn from "classnames";
 
 import { BookmarkIcon } from "./icon";
 
 import styles from "./bookmark.module.css";
+import { deFavorisePost, favorisePost } from "../../../../users_api/UserAPI";
 
 export const BookmarkButton: React.FC<{
   disabled?: boolean;
   onSolidBackground?: boolean;
-}> = ({ disabled, onSolidBackground }) => {
-  const [active, setActive] = React.useState(false);
+  slug: string;
+  posts: string[];
+}> = ({ disabled, onSolidBackground, slug, posts }) => {
+  const [active, setActive] = useState(false);
+
+  const updateFavorise = async (slug: string) => {
+    let favorite_blogpost = {
+      slug,
+    };
+    if (active) {
+      try {
+        await deFavorisePost(favorite_blogpost);
+      } catch (error) {
+      }
+    } else {
+      try {
+        await favorisePost(favorite_blogpost);
+      } catch (error) {
+      }
+    }
+  };
+
+
+  useEffect(() => {
+    if (posts.includes(slug)) {
+      setActive(true);
+    }
+  }, [posts, slug]);
+
+
 
   return (
     <button
       className={cn(styles.button, "group", active && styles.active)}
-      onClick={() => setActive(!active)}
+      onClick={() => {
+        setActive(!active);
+        updateFavorise(slug);
+      }}
       disabled={disabled}
     >
       <div className="pointer-events-none">
diff --git a/src/components/blog/single/heading.tsx b/src/components/blog/single/heading.tsx
index bad3568..d6a951a 100644
--- a/src/components/blog/single/heading.tsx
+++ b/src/components/blog/single/heading.tsx
@@ -4,19 +4,19 @@ import type { PostData } from "../wp";
 import { PostDate } from "./date";
 import { BookmarkButton } from "./bookmark-button";
 
-export const PostHeading: React.FC<PostData> = ({ post }) => (
+export const PostHeading: React.FC<{ post: PostData, favorits: string[]}> = ({ post, favorits }) => (
   <div className="flex max-w-full">
     <div className="flex-1 mr-4">
       <div className="mb-2">
-        <PostDate date={new Date(post.date)} />
+        <PostDate date={new Date(post.post.date)} />
       </div>
       <h1
         className="text-xl font-bold sm:font-normal sm:text-3xl uppercase text-em3 leading-snug md:leading-snug mb-16"
-        dangerouslySetInnerHTML={{ __html: post.title }}
+        dangerouslySetInnerHTML={{ __html: post.post.title }}
       />
     </div>
     <div className="flex-shrink-0">
-      <BookmarkButton onSolidBackground={true} />
+      <BookmarkButton onSolidBackground={true} slug={post.post.slug} posts={favorits} />
     </div>
   </div>
 );
diff --git a/src/components/blog/single/index.tsx b/src/components/blog/single/index.tsx
index 135d549..c51708d 100644
--- a/src/components/blog/single/index.tsx
+++ b/src/components/blog/single/index.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 
 import { SEO } from "../../seo";
@@ -6,11 +6,31 @@ import { usePost } from "../wp";
 import { PostHeading } from "./heading";
 import { PostContent } from "./content";
 import { Spinner } from "../../spinner";
+import { favoritPosts } from "../../../users_api/UserAPI";
 
 export const SinglePost: React.FC = () => {
+  const [favoritposts, setFavoritPosts] = useState([]);
   const { slug } = useParams<{ slug: string }>();
   const { loading, error, data } = usePost(slug);
 
+  useEffect(() => {
+    const loggedInUser = localStorage.getItem('user');
+    if (loggedInUser) {
+      const fetchFavorits = async () => {
+        let response;
+        try {
+          response = await favoritPosts()
+        } catch(error) {
+          setFavoritPosts([])
+        }
+        // @ts-ignore
+        let slugs = response.slugs
+        setFavoritPosts(JSON.parse(JSON.stringify(slugs)))
+      }
+      fetchFavorits();
+    }
+  }, [])
+
   return (
     <div className="center-box max-w-2xl">
       {loading ? (
@@ -20,7 +40,7 @@ export const SinglePost: React.FC = () => {
       ) : (
         <>
           <SEO title={data.post.title} />
-          <PostHeading post={data.post} />
+          <PostHeading post={data} favorits={favoritposts} />
           <PostContent post={data.post} />
         </>
       )}
diff --git a/src/components/blog/wp/favorit_posts.ts b/src/components/blog/wp/favorit_posts.ts
deleted file mode 100644
index d6a6656..0000000
--- a/src/components/blog/wp/favorit_posts.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { useQuery } from "react-query";
-
-import { WP_REST_URL } from "./config";
-
-type StringData = { rendered: string; protected?: boolean };
-
-export type PostData = {
-  id: number;
-  slug: string;
-  status: string;
-  type: string;
-  title: StringData;
-  date: string;
-  content?: StringData;
-  excerpt?: StringData;
-  featured_media?: number;
-  _embedded?: {
-    "wp:term": {
-      name: string;
-      slug: string;
-    }[][];
-  };
-};
-
-export const useFavoritPost = (slugs?: Array<string>) =>
-  useQuery<PostData[]>(["getPost", slugs], () =>
-    fetch(`${WP_REST_URL}/posts/?slug=${slugs}&_embed=1`).then((res) => res.json())
-  );
\ No newline at end of file
diff --git a/src/components/blog/wp/latest_post.ts b/src/components/blog/wp/latest_post.ts
new file mode 100644
index 0000000..33d302d
--- /dev/null
+++ b/src/components/blog/wp/latest_post.ts
@@ -0,0 +1,67 @@
+import { gql, useQuery } from "@apollo/client";
+
+const LatestPost = gql`
+  query GetFeed($param: String, $tags: [String], $categories: [ID]) {
+    posts(
+      first: 1
+      where: { search: $param, tagSlugAnd: $tags, categoryIn: $categories }
+    ) {
+      edges {
+        node {
+          id
+          date
+          title
+          slug
+          excerpt
+          featuredImage {
+            node {
+              id
+              sourceUrl(size: LARGE)
+            }
+          }
+          tags {
+            edges {
+              node {
+                id
+                slug
+                name
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+
+export type TagData = {
+  id: string;
+  slug: string;
+  name: string;
+};
+
+export type LatestPostData = {
+  id: string;
+  slug: string;
+  date: string;
+  title: string;
+  excerpt: string;
+  featuredImage?: {
+    node: {
+      id: string;
+      sourceUrl: string;
+    };
+  };
+  tags: {
+    edges: { node: TagData }[];
+  };
+};
+
+type FeedData = {
+  posts: {
+    edges: { node: LatestPostData };
+  };
+};
+
+export const useLatestPost = () =>
+  useQuery<FeedData>(LatestPost);
\ No newline at end of file
diff --git a/src/components/layout/header.tsx b/src/components/layout/header.tsx
deleted file mode 100644
index e4ef6cd..0000000
--- a/src/components/layout/header.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import React, { useEffect, useState } from "react";
-import cn from "classnames";
-import { Link, useHistory, useLocation } from "react-router-dom";
-import { Button } from "./button";
-
-import searchIcon from "./search.svg";
-import searchIconDark from "./searchDark.svg";
-import { logout } from "../../users_api/UserAPI";
-
-export const Header: React.FC<{ onDark?: boolean }> = ({ onDark }) => {
-  const [user, setUser] = useState()
-  const { pathname } = useLocation();
-  let history = useHistory();
-
-
-  useEffect(() => {
-    const loggedInUser = localStorage.getItem('user');
-    if (loggedInUser) {
-      const foundUser = JSON.parse(loggedInUser);
-      setUser(foundUser);
-    } else {
-      setUser(undefined)
-    }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [localStorage.getItem('user')]);
-
-  const handleLogout = async () => {
-    try {
-      await logout()
-    } catch(error) {
-      console.log(error)
-    }
-    localStorage.removeItem('user')
-    history.push('/')
-  }
-
-  return (
-    <div className="absolute w-full top-0 pt-6 pb-6 mb-3 z-10">
-      <div className="center-box">
-        <div className="uppercase tracking-wider flex items-center justify-between">
-          <div className="flex items-center">
-            <div
-              className={cn(
-                "text-3xl pb-1 mr-6",
-                onDark ? "text-em1-light" : "text-em1"
-              )}
-            >
-              <Link to="/" className="inline-block pr-10 relative font-semibold">
-                <div
-                  className={cn(
-                    "absolute top-1 bottom-0 right-0 w-1",
-                    onDark ? "bg-em1-light" : "bg-em1"
-                  )}
-                />
-                Klimabox
-              </Link>
-            </div>
-            <div
-              className={cn(
-                "pb-1.5 text-xl sm:text-2xl text-right sm:flex items-end sm:-mx-3",
-                onDark && "text-white"
-              )}
-            >
-              {[
-                ["Story", "/"],
-                ["Archiv", "/blog"]
-              ].map(([label, path], i) => (
-                <div key={i} className="sm:mx-3">
-                  <Link
-                    to={path}
-                    className={cn(
-                      "inline-block pt-1 border-b-2 border-transparent transition",
-                      onDark ? "hover:border-white" : "hover:border-black",
-                      pathname === path && "font-extrabold"
-                    )}
-                  >
-                    {label}
-                  </Link>
-                </div>
-              ))}
-            </div>
-          </div>
-          <div className="flex items-center text-white">
-            {
-              onDark ? <img
-                src={searchIcon}
-                alt="Suche Icon"
-                className="w-full h-full pr-4"
-              /> : <img
-                src={searchIconDark}
-                alt="Suche Icon"
-                className="w-full h-full pr-4"
-              />
-            }
-            { user ? (
-              <>
-                <Link to="dashboard">
-                  <Button onDark={onDark}>Mein Bereich</Button>
-                </Link>
-                <Button buttonOutline={true} onDark={onDark} onClick={() => handleLogout()}>Logout</Button>
-              </>
-            ) : (
-              <>
-                <Link to="signin">
-                  <Button onDark={onDark}>Einloggen</Button>
-                </Link>
-                <Link to="signup">
-                  <Button buttonOutline={true} onDark={onDark}>Registrieren</Button>
-                </Link>
-              </>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/src/components/layout/header/desktop-nav/index.tsx b/src/components/layout/header/desktop-nav/index.tsx
index 4edd4fa..9bcadb2 100644
--- a/src/components/layout/header/desktop-nav/index.tsx
+++ b/src/components/layout/header/desktop-nav/index.tsx
@@ -7,10 +7,12 @@ import type { NavItem } from "..";
 import { Button } from "../button";
 import { SearchButton } from "../search-button";
 
-export const DesktopNav: React.FC<{ items: NavItem[]; onDark?: boolean }> = ({
-  items,
-  onDark,
-}) => {
+export const DesktopNav: React.FC<{
+  items: NavItem[];
+  onDark?: boolean;
+  user?: any;
+  handleLogOut: () => void;
+}> = ({ items, onDark, user, handleLogOut }) => {
   const { pathname } = useLocation();
 
   return (
@@ -37,10 +39,27 @@ export const DesktopNav: React.FC<{ items: NavItem[]; onDark?: boolean }> = ({
       </div>
       <div className="flex items-center">
         <SearchButton />
-        <Button onDark={onDark}>Einloggen</Button>
-        <Button buttonOutline={true} onDark={onDark}>
-          Registrieren
-        </Button>
+        {user ? (
+          <>
+            <Link to="/dashboard">
+              <Button onDark={onDark}>Mein Bereich</Button>
+            </Link>
+            <Button buttonOutline={true} onDark={onDark} onClick={handleLogOut}>
+                Logout
+            </Button>
+          </>
+        ) : (
+          <>
+            <Link to="/signin">
+              <Button onDark={onDark}>Einloggen</Button>
+            </Link>
+            <Link to="/signup">
+              <Button buttonOutline={true} onDark={onDark}>
+                Registrieren
+              </Button>
+            </Link>
+          </>
+        )}
       </div>
     </div>
   );
diff --git a/src/components/layout/header/index.tsx b/src/components/layout/header/index.tsx
index f244da6..95b85d5 100644
--- a/src/components/layout/header/index.tsx
+++ b/src/components/layout/header/index.tsx
@@ -1,9 +1,10 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import cn from "classnames";
-import { Link } from "react-router-dom";
+import { Link, useHistory } from "react-router-dom";
 import { DesktopNav } from "./desktop-nav";
 
 import { MobileNav } from "./mobile-nav";
+import { logout } from "../../../users_api/UserAPI";
 
 export type NavItem = {
   path: string;
@@ -15,37 +16,63 @@ const items: NavItem[] = [
   { path: "/blog", label: "Archiv" },
 ];
 
-export const Header: React.FC<{ onDark?: boolean }> = ({ onDark }) => (
-  <div className="absolute w-full top-0 pt-6 pb-6 mb-3 z-10">
-    <div className="center-box">
-      <div className={cn("uppercase tracking-wider", onDark && "text-white")}>
-        <div className="flex items-center">
-          <div
-            className={cn(
-              "text-3xl pb-1 mr-6",
-              onDark ? "text-em1-light" : "text-em1"
-            )}
-          >
-            <Link to="/" className="inline-block pr-6 relative font-semibold">
-              <div
-                className={cn(
-                  "absolute top-1 bottom-0 right-0 w-1",
-                  onDark ? "bg-em1-light" : "bg-em1"
-                )}
-              />
-              Klimabox
-            </Link>
-          </div>
-          <div className="flex-1">
-            <div className="hidden lg:block">
-              <DesktopNav items={items} onDark={onDark} />
+export const Header: React.FC<{ onDark?: boolean }> = ({ onDark }) => {
+  const [user, setUser] = useState(undefined);
+  let history = useHistory();
+
+  useEffect(() => {
+    const loggedInUser = localStorage.getItem('user');
+    if (loggedInUser) {
+      const foundUser = JSON.parse(loggedInUser);
+      setUser(foundUser);
+    } else {
+      setUser(undefined)
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [localStorage.getItem('user')]);
+
+  const handleLogout = async () => {
+    try {
+      await logout()
+    } catch(error) {
+      console.log(error)
+    }
+    localStorage.removeItem('user')
+    history.push('/')
+  }
+
+  return (
+    <div className="absolute w-full top-0 pt-6 pb-6 mb-3 z-10">
+      <div className="center-box">
+        <div className={cn("uppercase tracking-wider", onDark && "text-white")}>
+          <div className="flex items-center">
+            <div
+              className={cn(
+                "text-3xl pb-1 mr-6",
+                onDark ? "text-em1-light" : "text-em1"
+              )}
+            >
+              <Link to="/" className="inline-block pr-6 relative font-semibold">
+                <div
+                  className={cn(
+                    "absolute top-1 bottom-0 right-0 w-1",
+                    onDark ? "bg-em1-light" : "bg-em1"
+                  )}
+                />
+                Klimabox
+              </Link>
             </div>
-            <div className="lg:hidden">
-              <MobileNav items={items} onDark={onDark} />
+            <div className="flex-1">
+              <div className="hidden lg:block">
+                <DesktopNav items={items} onDark={onDark} user={user} handleLogOut={ () => handleLogout()}/>
+              </div>
+              <div className="lg:hidden">
+                <MobileNav items={items} onDark={onDark} user={user} handleLogOut={ () => handleLogout()} />
+              </div>
             </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-);
+  );
+};
diff --git a/src/components/layout/header/mobile-nav/index.tsx b/src/components/layout/header/mobile-nav/index.tsx
index d251843..c6b31ae 100644
--- a/src/components/layout/header/mobile-nav/index.tsx
+++ b/src/components/layout/header/mobile-nav/index.tsx
@@ -10,9 +10,13 @@ import { SearchButton } from "../search-button";
 export function MobileNav({
   items,
   onDark,
+  user,
+  handleLogOut,
 }: {
   items: NavItem[];
   onDark?: boolean;
+  user?: any;
+  handleLogOut: () => void;
 }) {
   const { pathname } = useLocation();
   const [open, setOpen] = React.useState(false);
@@ -48,12 +52,31 @@ export function MobileNav({
           <SearchButton />
         </div>
         <div>
-          <div>
-            <button>Einloggen</button>
-          </div>
-          <div>
-            <button>Registrieren</button>
-          </div>
+          {user ? (
+            <>
+              <div>
+                <Link to="/dashboard">
+                  <button>Einloggen</button>
+                </Link>
+              </div>
+              <div>
+                  <button onClick={handleLogOut}>Registrieren</button>
+              </div>
+            </>
+          ) : (
+            <>
+              <div>
+                <Link to="/signin">
+                  <button>Einloggen</button>
+                </Link>
+              </div>
+              <div>
+                <Link to="signup">
+                  <button>Registrieren</button>
+                </Link>
+              </div>
+            </>
+          )}
         </div>
       </div>
       <div className="absolute top-0 right-0 pointer-events-auto">
diff --git a/src/components/layout/index.tsx b/src/components/layout/index.tsx
index 243e49d..5d5a6e9 100644
--- a/src/components/layout/index.tsx
+++ b/src/components/layout/index.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
-import { Header } from "./header";
 import { Footer } from "./footer";
+import { Header } from "./header";
 import { SideNav } from "./side-nav";
 
 type LayoutProps = {
diff --git a/src/components/user-dashboard/favorite-posts/index.tsx b/src/components/user-dashboard/favorite-posts/index.tsx
index e25bb62..f77a20c 100644
--- a/src/components/user-dashboard/favorite-posts/index.tsx
+++ b/src/components/user-dashboard/favorite-posts/index.tsx
@@ -1,10 +1,20 @@
 import React from "react";
+import { Post } from "../../blog/feed/post";
+import { FeedItemData, useFeed } from "../../blog/wp";
 
-import { Post } from "../../blog/post-list/post";
-import { useFavoritPost } from "../../blog/wp/favorit_posts";
+import { Spinner } from "../../spinner";
+
+export const FavoritePosts: React.FC <{ posts: Array<string>, loaded: boolean }> = ({ posts, loaded })  => {
+  const { loading, error, data } = useFeed();
+
+  const items = React.useMemo<Array<FeedItemData | undefined>>(
+    () =>
+      data
+        ? data.posts.edges.map((edge) => edge.node)
+        : new Array(9).fill(undefined),
+    [data]
+  );
 
-export const FavoritePosts: React.FC <{ posts: Array<string> }> = ({ posts })  => {
-  const { isLoading, error, data } = useFavoritPost(posts);
   if (posts.length === 0) {
     return (
       <div>
@@ -17,7 +27,7 @@ export const FavoritePosts: React.FC <{ posts: Array<string> }> = ({ posts })  =
     </div>
     )
   } else {
-    if (isLoading) return <div>Loading...</div>;
+    if (loading || !loaded) return <Spinner />;
     if (error || !data) return <div>Es ist ein Fehler aufgetreten.</div>;
 
     return (
@@ -26,10 +36,18 @@ export const FavoritePosts: React.FC <{ posts: Array<string> }> = ({ posts })  =
           Meine lieblings Posts
         </h2>
         <div className="grid grid-cols-1 gap-x-8 gap-y-12 sm:grid-cols-2 md:gap-x-10 xl:gap-16 2xl:grid-cols-3">
-          {data.map((postData, i) => (
-            <Post data={postData} key={i} favorit={true}/>
-          ))}
-        </div>
+        {(items.map(
+          (data, i) => {
+            if (posts.some((e) => e === data?.slug)) {
+              return (
+                <Post data={data} key={i} favorits={posts} />
+              )
+            }
+            return null;
+          }
+
+        ))}
+      </div>
       </div>
     );
   }
diff --git a/src/components/user-dashboard/index.tsx b/src/components/user-dashboard/index.tsx
index 2f03f04..aec6866 100644
--- a/src/components/user-dashboard/index.tsx
+++ b/src/components/user-dashboard/index.tsx
@@ -15,9 +15,11 @@ export default interface TopicInterface {
 
 export const UserDashboard: React.FC = () => {
   const [favoritposts, setFavoritPosts] = useState([]);
+  const [favoritsLoaded, setFavortitsLoaded] = useState(false);
   const [topics, setTopics] = useState<TopicInterface[]>([]);
   const [tickets, setTickets] = useState<TicketInterface[]>([]);
 
+
   const fetchFavorits = async () => {
     let response;
     try {
@@ -30,6 +32,7 @@ export const UserDashboard: React.FC = () => {
       let slugs = response.slugs
       setFavoritPosts(JSON.parse(JSON.stringify(slugs)))
     }
+    setFavortitsLoaded(true);
   }
 
   const fetchTopics = async () => {
@@ -103,7 +106,6 @@ export const UserDashboard: React.FC = () => {
     fetchTickets();
   }
 
-
   return (
     <div>
       <div className="center-box mt-40">
@@ -116,11 +118,11 @@ export const UserDashboard: React.FC = () => {
             <Ticket tickets={tickets} handleSend={handleSendTicket}/>
           </div>
           <div>
-            <LatestBlogPost posts={favoritposts}/>
+            <LatestBlogPost posts={favoritposts} loaded={favoritsLoaded}/>
             <Topics topics={topics} handleClick={handleTopicClick}/>
           </div>
         </div>
-        <FavoritePosts posts={favoritposts}/>
+        <FavoritePosts posts={favoritposts} loaded={favoritsLoaded}/>
         </div>
     </div>
   );
diff --git a/src/components/user-dashboard/latest-blog-post/index.tsx b/src/components/user-dashboard/latest-blog-post/index.tsx
index 8ab727a..248bdf4 100644
--- a/src/components/user-dashboard/latest-blog-post/index.tsx
+++ b/src/components/user-dashboard/latest-blog-post/index.tsx
@@ -1,21 +1,23 @@
 import React from "react";
+import { Post } from "../../blog/feed/post";
 
-import { Post } from "../../blog/post-list/post";
-import { usePost } from "../../blog/wp";
+import { LatestPostData, useLatestPost } from "../../blog/wp/latest_post";
+import { Spinner } from "../../spinner";
 
 
-export const LatestBlogPost: React.FC <{ posts: Array<string> }> = ({ posts })   => {
-  const { isLoading, error, data } = usePost("dauerbrenner-braunkohleausstieg-klimaschuetzerinnen-sitzen-auf-heissen-kohlen");
+export const LatestBlogPost: React.FC <{ posts: Array<string>, loaded: boolean }> = ({ posts, loaded })   => {
+  const { loading, error, data } = useLatestPost();
+  const item = React.useMemo<LatestPostData | undefined>(
+    () =>
+      data
+        ? data.posts.edges[0].node
+        : undefined,
+    [data]
+  );
 
-  if (isLoading) return <div>Loading...</div>;
+  if (loading || !loaded) return <div><Spinner /></div>;
   if (error || !data) return <div>Es ist ein Fehler aufgetreten.</div>;
 
-  let favorit = false;
-  posts.forEach((post) => {
-    if (post === data.slug) {
-      favorit = true
-    }
-  })
 
   return (
     <div>
@@ -23,7 +25,7 @@ export const LatestBlogPost: React.FC <{ posts: Array<string> }> = ({ posts })
         Latest Post
       </h2>
       <div>
-        <Post data={data} favorit={favorit}/>
+        <Post data={item} favorits={posts}/>
       </div>
     </div>
   );