diff --git a/src/app.tsx b/src/app.tsx
index 8973b0c..0b716df 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -10,9 +10,17 @@ import { NotFound } from "./pages/not-found";
 import { Stories } from "./pages/stories";
 import { Blog } from "./pages/blog";
 import { Post } from "./pages/post";
+import { SignUp } from "./pages/sign_up";
+import { SignIn } from "./pages/sign_in";
+import { Dashboard } from "./pages/Dashboard";
+import { Edit } from "./pages/Edit";
 
 import { Chapter1 } from "./pages/chapter1";
 import { Chapter2 } from "./pages/chapter2";
+import { Ticket } from "./pages/Ticket";
+import { PwResetRequest } from "./pages/PwResetRequest";
+import { PwReset } from "./pages/PwReset";
+import { EmailConfirm } from "./pages/EmailConfirm";
 import { Chapter3 } from "./pages/chapter3";
 
 export const App: React.FC = () => (
@@ -27,6 +35,15 @@ export const App: React.FC = () => (
 
           <Route path="/blog/:slug" component={Post} />
           <Route path="/blog" component={Blog} />
+          <Route path="/signup" component={SignUp} />
+          <Route path="/signin" component={SignIn} />
+          <Route path="/dashboard" component={Dashboard} />
+          <Route path="/ticket/:id" render={(props) => <Ticket {...props} />} />
+          <Route path="/edit" component={Edit} />
+          <Route path="/request_reset" component={PwResetRequest} />
+          <Route path="/reset_password" component={PwReset} />
+          <Route path="/email_confirm" component={EmailConfirm} />
+
           <Route exact path="/" component={Stories} />
           <Route component={NotFound} />
         </Switch>
diff --git a/src/components/blog/feed/filter-control/categories.tsx b/src/components/blog/feed/filter-control/categories.tsx
index 9bf82db..a3304e7 100644
--- a/src/components/blog/feed/filter-control/categories.tsx
+++ b/src/components/blog/feed/filter-control/categories.tsx
@@ -1,4 +1,7 @@
 import cn from "classnames";
+import React, { useEffect, useState } from "react";
+import { getTopics } from "../../../../users_api/UserAPI";
+import TopicInterface from "../../../user-dashboard";
 import { useCategories } from "../../wp/categories";
 import { useFilteredCategories } from "../fitering";
 
@@ -23,7 +26,53 @@ const Button: React.FC<{ onClick(): void; active: boolean }> = ({
 };
 
 export function CategoriesFilterControl() {
+  const [user, setUser] = useState(undefined);
+  const [userTopicsSelected, setUserTopicsSelected] = useState<boolean>(false);
+  const [topics, setTopics] = useState<TopicInterface[]>([]);
+
+
+  useEffect(() => {
+    const loggedInUser = localStorage.getItem('user');
+    if (loggedInUser) {
+      const foundUser = JSON.parse(loggedInUser);
+      setUser(foundUser);
+      fetchTopics();
+    } else {
+      setUser(undefined);
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [localStorage.getItem('user')]);
+
   const { loading, error, data } = useCategories();
+
+  const selectUserAll = () => {
+    if (data) {
+      topics.forEach((topic) => {
+        const foundCategory = data.categories.nodes.find((category) => category.name === topic.name);
+        if (foundCategory) {
+          select(foundCategory);
+        }
+      })
+    }
+  }
+
+  const fetchTopics = async () => {
+    let response;
+    try {
+      response = await getTopics()
+    } catch(error) {
+      setTopics([])
+    }
+    let responseTopics: Array<TopicInterface> = []
+    if (response) {
+      // @ts-ignore
+      response.forEach(element => {
+        responseTopics.push(element)
+      });
+      setTopics(responseTopics)
+    }
+  }
+
   const {
     items: selectedCategories,
     add: select,
@@ -38,6 +87,19 @@ export function CategoriesFilterControl() {
       <Button active={!selectedCategories.length} onClick={unselectAll}>
         Alle Kategorien
       </Button>
+      { user && (
+        <Button active={userTopicsSelected} onClick={() => {
+          if (!userTopicsSelected) {
+            selectUserAll();
+            setUserTopicsSelected(true);
+          } else {
+            unselectAll();
+            setUserTopicsSelected(false);
+          }
+        }}>
+          Meine Kategorien
+        </Button>
+      )}
       {data.categories.nodes.map((category, i) => {
         const isSelected = selectedCategories.indexOf(category) >= 0;
 
diff --git a/src/components/blog/feed/index.tsx b/src/components/blog/feed/index.tsx
index 58d0088..1c17c15 100644
--- a/src/components/blog/feed/index.tsx
+++ b/src/components/blog/feed/index.tsx
@@ -1,16 +1,39 @@
-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();
+    } else {
+      setLoaded(true);
+    }
     if (data) setFirstRenderDone(true);
   }, [data]);
 
@@ -26,15 +49,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/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/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/edit-user/index.tsx b/src/components/edit-user/index.tsx
new file mode 100644
index 0000000..d913ecd
--- /dev/null
+++ b/src/components/edit-user/index.tsx
@@ -0,0 +1,91 @@
+import React, { useEffect, useState } from "react";
+import {  deleteUser, updateUser } from "../../users_api/UserAPI";
+import { useHistory } from "react-router-dom";
+import UserInterface from "../user-dashboard/profile";
+
+export const EditUser: React.FC  <{ user: UserInterface}> = ({ user }) => {
+  let history = useHistory();
+  const [email, setEmail] = useState<string>('')
+
+
+  const displayError = (errors: any) => {
+    if (errors) {
+      Object.keys(errors).forEach( (error) => {
+        let field = document.querySelector(`#${error}`)
+        let errorMessage = document.createElement("div");
+        errorMessage.id = 'error';
+        errorMessage.className += "flex font-medium tracking-wide text-red-500 text-xs mt-1 mb-2";
+        errorMessage.innerHTML += errors[error]
+        if (field) {
+          field.parentElement?.append(errorMessage)
+        }
+      })
+    }
+  }
+
+  const removeErrors = () => {
+    document.querySelectorAll("#error").forEach((e) => e.remove());
+  }
+
+  useEffect(() => {
+    setEmail(user.email);
+  }, [user.email]);
+
+  const handleChangeEmail = async (email: string) => {
+    removeErrors()
+    let data = {
+      email: email
+    }
+    let response;
+    try {
+      response = await updateUser(data ,parseInt(user.id, 10))
+    } catch(error) {
+      // @ts-ignore
+      displayError(error.body.errors);
+      return;
+    }
+    localStorage.setItem('user', JSON.stringify(response))
+    history.push('/dashboard')
+  }
+
+
+  const handleDeleteProfile = async (id: string) => {
+    try {
+      await deleteUser(parseInt(id, 10))
+    } catch(error) {
+      return;
+    }
+    history.push('/')
+    localStorage.removeItem('user')
+  }
+
+  return (
+    <div>
+      <div className="center-box mt-40">
+        <h1 className="text-3xl mb-10 border-b-2">
+            Mein Profil
+        </h1>
+        <div className="center-box mt-10 w-full max-w-lg">
+          <form className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
+            <div className="mb-4">
+              <label className="block text-gray-700 text-sm font-bold mb-2">
+                E-Mail
+              </label>
+              <input value={email} onChange={ (e) => setEmail(e.target.value)} className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="email" type="text" placeholder="E-Mail" />
+            </div>
+            <div className="flex items-center justify-between">
+              <button onClick={ () => handleChangeEmail(email) }className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">
+                Speichern
+              </button>
+            </div>
+          </form>
+        </div>
+        <div>
+          <button onClick={ () => handleDeleteProfile(user.id)} className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
+            Profil Löschen
+          </button>
+        </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 3476fc5..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-50">
-    <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..46ca996 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>Mein Bereich</button>
+                </Link>
+              </div>
+              <div>
+                  <button onClick={handleLogOut}>Logout</button>
+              </div>
+            </>
+          ) : (
+            <>
+              <div>
+                <Link to="/signin">
+                  <button>Login</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/pw_reset/index.tsx b/src/components/pw_reset/index.tsx
new file mode 100644
index 0000000..bc01433
--- /dev/null
+++ b/src/components/pw_reset/index.tsx
@@ -0,0 +1,114 @@
+import React, { useEffect, useState } from "react";
+import { useHistory } from "react-router";
+import { updatePw } from "../../users_api/UserAPI";
+
+export const PwResetForm: React.FC = () => {
+  let history = useHistory();
+  const [token, setToken] = useState<string>("");
+  const [password, setPassword] = useState<string>("");
+  const [password_confirmation, setPasswordConfirmation] = useState<string>("");
+
+  const displayError = (errors: any) => {
+    if (errors) {
+      Object.keys(errors).forEach((error) => {
+        if (error === 'other') {
+          let field = document.querySelector(`#form`);
+          let errorMessage = document.createElement("div");
+          errorMessage.id = "error";
+          errorMessage.className +=
+            "flex font-medium tracking-wide text-red-500 text-xs mt-1 mb-2";
+          errorMessage.innerHTML += errors[error];
+          console.log(field)
+          if (field) {
+            field.prepend(errorMessage);
+          }
+          return;
+        }
+        let field = document.querySelector(`#${error}`);
+        let errorMessage = document.createElement("div");
+        errorMessage.id = "error";
+        errorMessage.className +=
+          "flex font-medium tracking-wide text-red-500 text-xs mt-1 mb-2";
+        errorMessage.innerHTML += errors[error];
+        if (field) {
+          field.parentElement?.append(errorMessage);
+        }
+      });
+    }
+  };
+
+  const removeErrors = () => {
+    document.querySelectorAll("#error").forEach((e) => e.remove());
+  };
+
+  useEffect(() => {
+    const token = history.location.search;
+    if (token) {
+      setToken(token.substring(7, token.length));
+    } else {
+      setToken("");
+    }
+  }, [history.location.search]);
+
+  const handleUpdatePw = async () => {
+    removeErrors();
+    let data = {
+      token: token,
+      password: password,
+      password_confirmation: password_confirmation,
+    };
+    try {
+      await updatePw(data);
+    } catch (error) {
+      // @ts-ignore
+      displayError(error.body.errors);
+      return;
+    }
+    history.push("/signin");
+  };
+
+  return (
+    <div className="center-box mt-40 w-full max-w-lg">
+      <form id="form" className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
+        <div className="mb-4">
+          <input value={token} id="token" type="hidden" />
+        </div>
+        <div className="mb-4">
+          <label className="block text-gray-700 text-sm font-bold mb-2">
+            Passwort
+          </label>
+          <input
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+            id="password"
+            type="password"
+            placeholder="Passwort"
+          />
+        </div>
+        <div className="mb-6">
+          <label className="block text-gray-700 text-sm font-bold mb-2">
+            Passwort bestätigen
+          </label>
+          <input
+            value={password_confirmation}
+            onChange={(e) => setPasswordConfirmation(e.target.value)}
+            className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline"
+            id="password_confirmation"
+            type="password"
+            placeholder="Passwort bestätigen"
+          />
+        </div>
+        <div className="flex items-center justify-between">
+          <button
+            onClick={() => handleUpdatePw()}
+            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
+            type="button"
+          >
+            Passwort ändern
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+};
diff --git a/src/components/pw_reset_request/index.tsx b/src/components/pw_reset_request/index.tsx
new file mode 100644
index 0000000..055f8bb
--- /dev/null
+++ b/src/components/pw_reset_request/index.tsx
@@ -0,0 +1,58 @@
+import React, { useState } from "react";
+import { useHistory } from "react-router";
+import { requestPwReset } from "../../users_api/UserAPI";
+
+export const PwResetRequestForm: React.FC = () => {
+  let history = useHistory();
+  const [hasError, setHasError] = useState<boolean>(false);
+  const [email, setEmail] = useState<string>("");
+
+  const handleResetRequest = async () => {
+    let data = {
+      email: email,
+    };
+    setHasError(false);
+    try {
+      await requestPwReset(data);
+    } catch (error) {
+      setHasError(true);
+      return;
+    }
+    history.push("/email_confirm");
+  };
+
+  return (
+    <div className="center-box mt-40 w-full max-w-lg">
+      <form className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
+      {hasError && (
+          <span className="flex font-medium tracking-wide text-red-500 text-xs mt-2 mb-2">
+            Es konnte kein Account gefunden werden. Bitte überprüfe die Angaben
+            zur E-Mail Adresse.
+          </span>
+        )}
+        <div className="mb-4">
+          <label className="block text-gray-700 text-sm font-bold mb-2">
+            E-Mail
+          </label>
+          <input
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+            id="username"
+            type="text"
+            placeholder="E-Mail"
+          />
+        </div>
+        <div className="flex items-center justify-between">
+          <button
+            onClick={() => handleResetRequest()}
+            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
+            type="button"
+          >
+            Passwort zurücksetzen
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+};
diff --git a/src/components/signin/index.tsx b/src/components/signin/index.tsx
new file mode 100644
index 0000000..4b904dd
--- /dev/null
+++ b/src/components/signin/index.tsx
@@ -0,0 +1,82 @@
+import React, { useState } from "react";
+import { Link, useHistory } from "react-router-dom";
+import {  login } from "../../users_api/UserAPI";
+
+export const SignInForm: React.FC = () => {
+  let history = useHistory();
+  const [hasError, setHasError] = useState<boolean>(false);
+  const [email, setEmail] = useState<string>("");
+  const [password, setPassword] = useState<string>("");
+
+  const handleSignIn = async () => {
+    let data = {
+      email: email,
+      password: password,
+    };
+    let response;
+    setHasError(false);
+    try {
+      response = await login(data);
+    } catch (error) {
+      setHasError(true);
+      return;
+    }
+
+    localStorage.setItem("user", JSON.stringify(response));
+    history.push("/dashboard");
+  };
+
+  return (
+    <div className="center-box mt-40 w-full max-w-lg">
+      <form className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
+        {hasError && (
+          <span className="flex font-medium tracking-wide text-red-500 text-xs mt-2 mb-2">
+            Es konnte kein Account gefunden werden. Bitte überprüfe die Angaben
+            zur E-Mail Adresse und Passwort.
+          </span>
+        )}
+        <div className="mb-4">
+          <label className="block text-gray-700 text-sm font-bold mb-2">
+            E-Mail
+          </label>
+          <input
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+            id="username"
+            type="text"
+            placeholder="E-Mail"
+          />
+        </div>
+        <div className="mb-6">
+          <label className="block text-gray-700 text-sm font-bold mb-2">
+            Passwort
+          </label>
+          <input
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline"
+            id="password"
+            type="password"
+            placeholder="Passwort"
+          />
+        </div>
+        <div className="flex items-center justify-between">
+          <button
+            onClick={() => handleSignIn()}
+            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
+            type="button"
+          >
+            Einloggen
+          </button>
+        </div>
+        <div className="text-grey-dark mt-6">
+          Passwort vergessen?
+          <Link to="request_reset">
+            <p className="text-sm text-em1">Jetzt Passwort zurücksetzen</p>
+          </Link>
+        </div>
+      </form>
+    </div>
+  );
+};
diff --git a/src/components/signup/index.tsx b/src/components/signup/index.tsx
new file mode 100644
index 0000000..e5b3012
--- /dev/null
+++ b/src/components/signup/index.tsx
@@ -0,0 +1,106 @@
+import React, { useState } from "react";
+import { useHistory } from "react-router";
+import { createUser } from "../../users_api/UserAPI";
+
+export const SignUpForm: React.FC = () => {
+  let history = useHistory();
+  const [email, setEmail] = useState<string>("");
+  const [password, setPassword] = useState<string>("");
+  const [password_confirmation, setPasswordConfirmation] = useState<string>("");
+
+  const displayError = (errors: any) => {
+    if (errors) {
+      Object.keys(errors).forEach( (error) => {
+        let field = document.querySelector(`#${error}`)
+        let errorMessage = document.createElement("div");
+        errorMessage.id = 'error';
+        errorMessage.className += "flex font-medium tracking-wide text-red-500 text-xs mt-1 mb-2";
+        errorMessage.innerHTML += errors[error]
+        if (field) {
+          field.parentElement?.append(errorMessage)
+        }
+      })
+    }
+  }
+
+  const removeErrors = () => {
+    document.querySelectorAll("#error").forEach((e) => e.remove());
+  }
+
+  const handleSignUp = async () => {
+    removeErrors();
+    let data = {
+      email: email,
+      password: password,
+      password_confirmation: password_confirmation,
+    };
+    let hasError = false;
+    try {
+      await createUser(data);
+    } catch (error) {
+      hasError = true;
+      // @ts-ignore
+      displayError(error.body.errors);
+      return;
+    }
+    if (!hasError) {
+      history.push("/email_confirm");
+    }
+  };
+
+  return (
+    <div className="center-box mt-40 w-full max-w-lg">
+      <form className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
+        <div className="mb-4">
+          <label className="block text-gray-700 text-sm font-bold mb-2">
+            E-Mail
+          </label>
+          <input
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+            id="email"
+            type="text"
+            placeholder="E-Mail"
+          />
+        </div>
+        <div className="mb-4">
+          <label className="block text-gray-700 text-sm font-bold mb-2">
+            Passwort
+          </label>
+          <input
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+            id="password"
+            type="password"
+            placeholder="Passwort"
+          />
+        </div>
+        <div className="mb-6">
+          <label className="block text-gray-700 text-sm font-bold mb-2">
+            Passwort bestätigen
+          </label>
+          <input
+            value={password_confirmation}
+            onChange={(e) => setPasswordConfirmation(e.target.value)}
+            className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline"
+            id="password_confirmation"
+            type="password"
+            placeholder="Passwort bestätigen"
+          />
+        </div>
+        <div className="flex items-center justify-between">
+          <button
+            onClick={() => handleSignUp()}
+            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
+            type="button"
+          >
+            Registieren
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+};
+
diff --git a/src/components/ticket/comment/index.tsx b/src/components/ticket/comment/index.tsx
new file mode 100644
index 0000000..c9bb34d
--- /dev/null
+++ b/src/components/ticket/comment/index.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+import { CommentInterface } from "../../user-dashboard/tickets";
+
+export const Comment: React.FC <{ comment: CommentInterface, handleDeleteComment: (id: string) => void}> = ({ comment, handleDeleteComment }) => {
+  const date = new Date(comment.created_at)
+  const loggedInUser = localStorage.getItem('user')
+  let foundUser;
+  if (loggedInUser) {
+     foundUser = JSON.parse(loggedInUser);
+  }
+  return (
+    <>
+      <div  className="mt-4 mb-2 border-t-2 border-solid border-black pt-4 pl-2 pr-2 pb-4">
+        <div className="flex justify-between">
+          <div className="flex text-sm">
+            <p>
+              Von: {comment.user_email}
+            </p>
+            <p className="ml-4">
+              Am: {date.toUTCString()}
+            </p>
+          </div>
+          <div>
+            { comment.user_email === foundUser.email && (
+              <button onClick={ () => handleDeleteComment(comment.id)} className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
+                Kommentar Löschen
+              </button>
+            )}
+          </div>
+        </div>
+        <div className="mt-2 bg-white p-2">
+          {comment.message}
+        </div>
+      </div>
+    </>
+  )
+};
diff --git a/src/components/ticket/index.tsx b/src/components/ticket/index.tsx
new file mode 100644
index 0000000..c8444b9
--- /dev/null
+++ b/src/components/ticket/index.tsx
@@ -0,0 +1,183 @@
+import React, { useEffect, useState } from "react";
+import {
+  createComment,
+  deleteComment,
+  deleteTicket,
+  getTicket,
+} from "../../users_api/UserAPI";
+import { Comment } from "./comment";
+
+import { TicketInterface } from "../user-dashboard/tickets";
+import { Link, useHistory } from "react-router-dom";
+
+export const TicketShow: React.FC<{ id: string }> = ({ id }) => {
+  let history = useHistory();
+  const [hasError, setHasError] = useState<boolean>(false);
+  const [ticket, setTicket] = useState<TicketInterface>();
+  const [comment, setComment] = useState<string>("");
+
+  const displayError = (errors: any) => {
+    if (errors) {
+      Object.keys(errors).forEach( (error) => {
+        let field = document.querySelector(`#${error}`)
+        let errorMessage = document.createElement("div");
+        errorMessage.id = 'error';
+        errorMessage.className += "flex font-medium tracking-wide text-red-500 text-xs mt-1 mb-2";
+        errorMessage.innerHTML += errors[error]
+        if (field) {
+          field.parentElement?.append(errorMessage)
+        }
+      })
+    }
+  }
+
+  const removeErrors = () => {
+    document.querySelectorAll("#error").forEach((e) => e.remove());
+  }
+
+  const fetchTicket = async () => {
+    let response;
+    setHasError(false);
+    try {
+      response = await getTicket(parseInt(id, 10));
+    } catch (error) {
+      setHasError(true);
+      return;
+    }
+    if (response) {
+      // @ts-ignore
+      setTicket(response);
+    }
+  };
+
+  useEffect(() => {
+    fetchTicket();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const handleSendComment = async (comment: string) => {
+    removeErrors();
+    let data = {
+      message: comment,
+    };
+    try {
+      await createComment(data, parseInt(id, 10));
+    } catch (error) {
+      // @ts-ignore
+      displayError(error.body.errors);
+    }
+    setComment("");
+    fetchTicket();
+  };
+
+  const handleDeleteTicket = async () => {
+    setHasError(false);
+    try {
+      await deleteTicket(parseInt(id, 10));
+    } catch (error) {
+      setHasError(true);
+      return;
+    }
+    history.push("/dashboard");
+  };
+
+  const handleDeleteComment = async (id: string) => {
+    setHasError(false);
+    try {
+      await deleteComment(parseInt(id, 10));
+    } catch (error) {
+      setHasError(true);
+      return;
+    }
+    fetchTicket();
+  };
+
+  if (ticket) {
+    return (
+      <div>
+        <div className="center-box mt-40">
+          <Link to="/dashboard" className="block mt-8 mb-8 text-em1">
+            Zurück
+          </Link>
+          <h1 className="text-3xl mb-10 border-b-2">Ticket Übersicht</h1>
+          {hasError && (
+            <div className="center-box mt-40 w-full max-w-lg">
+              <div className="flex font-medium tracking-wide text-red-500 text-xs mt-2 mb-2">
+                Es ist etwas schief gelaufen.
+              </div>
+              <div className="text-grey-dark mt-6">
+                <Link to="/dashboard">
+                  <p className="text-sm text-em1">Zu deinem Bereich</p>
+                </Link>
+              </div>
+            </div>
+          )}
+          <div className="mr-4 mb-4 rounded-t-3xl bg-bg-alt flex-1 h-full py-3 px-4">
+            <div className="flex justify-between">
+              <h4 className="text-lg font-semibold mb-4">{ticket.message}</h4>
+              <button
+                onClick={() => handleDeleteTicket()}
+                className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
+              >
+                Ticket Löschen
+              </button>
+            </div>
+            <h5 className="font-semibold mb-2">Kommentare</h5>
+            {ticket.comments.length === 0 ? (
+              <p className="text-sm">Noch keine Kommentare vorhaden</p>
+            ) : (
+              <div>
+                <p className="text-sm mb-4">
+                  {ticket.comments.length} Kommentare
+                </p>
+
+                {ticket.comments.map((comment) => {
+                  return (
+                    <Comment
+                      comment={comment}
+                      handleDeleteComment={handleDeleteComment}
+                    />
+                  );
+                })}
+              </div>
+            )}
+            <div>
+              <form className="pt-6 pb-8 mb-4">
+                <div className="mb-4">
+                  <label className="block text-gray-700 text-sm font-bold mb-2">
+                    Kommentar
+                  </label>
+                  <textarea
+                    value={comment}
+                    onChange={(e) => setComment(e.target.value)}
+                    className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline resize-y"
+                    id="message"
+                    placeholder="Nachricht"
+                  />
+                </div>
+                <div className="flex items-center justify-between">
+                  <button
+                    onClick={() => handleSendComment(comment)}
+                    className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
+                    type="button"
+                  >
+                    Senden
+                  </button>
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  } else {
+    return (
+      <div>
+        <div className="center-box mt-40">
+          <h1 className="text-3xl mb-6">Ticket Übersicht</h1>
+          <p>Warte auf Daten</p>
+        </div>
+      </div>
+    );
+  }
+};
diff --git a/src/components/user-dashboard/favorite-posts/index.tsx b/src/components/user-dashboard/favorite-posts/index.tsx
new file mode 100644
index 0000000..f77a20c
--- /dev/null
+++ b/src/components/user-dashboard/favorite-posts/index.tsx
@@ -0,0 +1,54 @@
+import React from "react";
+import { Post } from "../../blog/feed/post";
+import { FeedItemData, useFeed } from "../../blog/wp";
+
+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]
+  );
+
+  if (posts.length === 0) {
+    return (
+      <div>
+      <h2 className="text-xl">
+        Meine lieblings Posts
+      </h2>
+      <div className="text-sm text-red-300">
+        Du hast noch keine Lieblinsposts. Merke dir Posts und sie werden dir hier angezeigt.
+      </div>
+    </div>
+    )
+  } else {
+    if (loading || !loaded) return <Spinner />;
+    if (error || !data) return <div>Es ist ein Fehler aufgetreten.</div>;
+
+    return (
+      <div>
+        <h2 className="text-xl mb-4">
+          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">
+        {(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
new file mode 100644
index 0000000..aec6866
--- /dev/null
+++ b/src/components/user-dashboard/index.tsx
@@ -0,0 +1,129 @@
+import React, { useEffect, useState } from "react";
+import { addTopic, favoritPosts, getTopics, removeTopic, getTickets, createTicket } from "../../users_api/UserAPI";
+import { FavoritePosts } from "./favorite-posts";
+import { LatestBlogPost } from "./latest-blog-post";
+import { Profile } from "./profile";
+import { Ticket, TicketInterface } from "./tickets";
+import { Topics } from "./topics";
+
+export default interface TopicInterface {
+  id: string,
+  name: string,
+  description: string,
+  liked: boolean
+}
+
+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 {
+      response = await favoritPosts()
+    } catch(error) {
+      setFavoritPosts([])
+    }
+    if (response) {
+      // @ts-ignore
+      let slugs = response.slugs
+      setFavoritPosts(JSON.parse(JSON.stringify(slugs)))
+    }
+    setFavortitsLoaded(true);
+  }
+
+  const fetchTopics = async () => {
+    let response;
+    try {
+      response = await getTopics()
+    } catch(error) {
+      setTopics([])
+    }
+    let responseTopics: Array<TopicInterface> = []
+    if (response) {
+      // @ts-ignore
+      response.forEach(element => {
+        responseTopics.push(element)
+      });
+      setTopics(responseTopics)
+    }
+  }
+
+
+  const fetchTickets = async () => {
+    let response;
+    try {
+      response = await getTickets()
+    } catch(error) {
+      setTickets([]);
+    }
+    let responseTickets: Array<TicketInterface> = []
+    if (response) {
+      // @ts-ignore
+      response.forEach(element => {
+        responseTickets.push(element)
+      });
+      setTickets(responseTickets)
+    }
+  }
+
+  useEffect(() => {
+    fetchFavorits();
+    fetchTopics();
+    fetchTickets();
+  }, []);
+
+  const handleTopicClick = async (topic: TopicInterface) => {
+    if (topic.liked) {
+      try {
+        await removeTopic(topic)
+      } catch(error) {
+        console.log(error)
+      }
+      fetchTopics()
+    } else {
+      try {
+        await addTopic(topic)
+      } catch(error) {
+        console.log(error)
+      }
+      fetchTopics()
+    }
+  }
+
+  const handleSendTicket = async (message: string) => {
+    let data = {
+      message: message
+    }
+    try {
+      await createTicket(data)
+    } catch(error) {
+      console.log(error)
+    }
+    fetchTickets();
+  }
+
+  return (
+    <div>
+      <div className="center-box mt-40">
+        <h1 className="text-3xl mb-10 border-b-2">
+            Mein Bereich
+        </h1>
+        <div className="grid grid-cols-1 gap-x-8 gap-y-12 sm:grid-cols-2 md:gap-x-10 xl:gap-16 mb-6">
+          <div>
+            <Profile />
+            <Ticket tickets={tickets} handleSend={handleSendTicket}/>
+          </div>
+          <div>
+            <LatestBlogPost posts={favoritposts} loaded={favoritsLoaded}/>
+            <Topics topics={topics} handleClick={handleTopicClick}/>
+          </div>
+        </div>
+        <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
new file mode 100644
index 0000000..248bdf4
--- /dev/null
+++ b/src/components/user-dashboard/latest-blog-post/index.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+import { Post } from "../../blog/feed/post";
+
+import { LatestPostData, useLatestPost } from "../../blog/wp/latest_post";
+import { Spinner } from "../../spinner";
+
+
+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 (loading || !loaded) return <div><Spinner /></div>;
+  if (error || !data) return <div>Es ist ein Fehler aufgetreten.</div>;
+
+
+  return (
+    <div>
+      <h2 className="text-xl mb-4">
+        Latest Post
+      </h2>
+      <div>
+        <Post data={item} favorits={posts}/>
+      </div>
+    </div>
+  );
+
+};
diff --git a/src/components/user-dashboard/profile/index.tsx b/src/components/user-dashboard/profile/index.tsx
new file mode 100644
index 0000000..ed5ab20
--- /dev/null
+++ b/src/components/user-dashboard/profile/index.tsx
@@ -0,0 +1,49 @@
+import React, { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+
+export default interface UserInterface {
+  id: string,
+  email: string,
+  admin: boolean
+}
+
+export const Profile: React.FC = ()  => {
+  const [user, setUser] = useState<UserInterface>()
+
+  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')]);
+
+  if (user !== undefined) {
+    return (
+      <div className="mb-4">
+        <h2 className="text-xl">
+          Meine Daten
+        </h2>
+        <p className="text-sm">
+          Email:
+          {user.email}
+        </p>
+        <Link to="/edit">
+          <p className="text-sm text-em1">
+            Bearbeiten
+          </p>
+        </Link>
+      </div>
+    )
+  } else {
+    return (
+      <div>
+        Da ist etwas schief gegangen
+      </div>
+    )
+  }
+
+};
diff --git a/src/components/user-dashboard/tickets/index.tsx b/src/components/user-dashboard/tickets/index.tsx
new file mode 100644
index 0000000..87dc2ef
--- /dev/null
+++ b/src/components/user-dashboard/tickets/index.tsx
@@ -0,0 +1,73 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+
+
+export interface CommentInterface {
+  id: string,
+  message: string,
+  user_email: string,
+  created_at: Date
+}
+
+export interface TicketInterface {
+  id: string,
+  message: string,
+  user_id: string,
+  comments: Array<CommentInterface>
+}
+
+export const Ticket: React.FC  <{ tickets: Array<TicketInterface>, handleSend: (message: string) => void }> = ({ tickets, handleSend  })  =>  {
+  const [message, setMessage] = useState<string>("");
+
+  return (
+    <div>
+      <h2 className="text-xl mb-4">
+        Deine Anfragen/Fragen/Vorschläge
+      </h2>
+
+      <div className="grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2 md:gap-x-6 xl:gap-12 2xl:grid-cols-3">
+        { tickets && tickets.map( (ticket) => {
+          return (
+            <Link to={`/ticket/${ticket.id}`}>
+              <div className="mr-4 mb-4 rounded-t-3xl bg-bg-alt flex-1 h-full py-3 px-4">
+                <h4 className="text-lg font-semibold mb-2">
+                  {ticket.message}
+                </h4>
+                {ticket.comments.length === 0 ? (
+                  <p className="text-sm">
+                    Noch keine Kommentare vorhaden
+                  </p>
+                ) : (
+                  <p className="text-sm">
+                    {ticket.comments.length} Kommentare
+                  </p>
+                )}
+              </div>
+            </Link>
+          )
+        })}
+
+        {tickets.length === 0 && (
+          <p className="text-sm text-red-300">
+            Du hast bisher keine Deine Anfragen/Fragen/Vorschläge erstellt.
+          </p>
+        )}
+      </div>
+
+      <form className="pt-6 pb-8 mb-4">
+        <div className="mb-4">
+          <label className="block text-gray-700 text-sm font-bold mb-2">
+            Anfrage/Frage/Vorschlag senden
+          </label>
+          <textarea value={message} onChange={ (e) => setMessage(e.target.value)} className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline resize-y" id="username" placeholder="Nachricht" />
+        </div>
+        <div className="flex items-center justify-between">
+          <button onClick={ () => {handleSend(message); setMessage('') }}className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">
+            Senden
+          </button>
+        </div>
+      </form>
+    </div>
+  )
+
+};
diff --git a/src/components/user-dashboard/topics/index.tsx b/src/components/user-dashboard/topics/index.tsx
new file mode 100644
index 0000000..0d24831
--- /dev/null
+++ b/src/components/user-dashboard/topics/index.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+export default interface TopicInterface {
+  id: string,
+  name: string,
+  description: string,
+  liked: boolean
+}
+
+export const Topics: React.FC  <{ topics: Array<TopicInterface>, handleClick: (topic: TopicInterface) => void }> = ({ topics, handleClick })  =>  {
+
+  return (
+    <div>
+      <h2 className="text-xl mb-4 mt-4">
+        Themen die dich Interessieren
+      </h2>
+
+      { topics && topics.map( (topic) => {
+        return (
+          <button className={ topic.liked ? "outline-em1 text-em1 font-bold py-2 px-4 rounded mr-4 mb-4 focus:outline-em1" : "outline-black text-muted font-bold py-2 px-4 rounded mr-4 mb-4 focus:outline-black"} onClick={() => handleClick(topic)}>
+            <div>
+              {topic.name}
+            </div>
+          </button>
+        )
+      })}
+    </div>
+  )
+
+};
diff --git a/src/config/index.ts b/src/config/index.ts
new file mode 100644
index 0000000..12623a9
--- /dev/null
+++ b/src/config/index.ts
@@ -0,0 +1,5 @@
+const config = {
+  apiUrl: 'http://localhost:3000/api/v1'
+}
+
+export default config;
\ No newline at end of file
diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
new file mode 100644
index 0000000..ae79cbf
--- /dev/null
+++ b/src/pages/Dashboard.tsx
@@ -0,0 +1,38 @@
+import React, { useEffect, useState } from "react";
+import { Layout } from "../components/layout";
+import { SEO } from "../components/seo";
+import { UserDashboard } from "../components/user-dashboard";
+
+
+export const Dashboard: React.FC = () => {
+  const [user, setUser] = useState();
+
+  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')]);
+
+  if (user) {
+    return (
+      <Layout>
+        <SEO title="Dashboard" />
+        <UserDashboard />
+      </Layout>
+    )
+  } else {
+    return (
+      <Layout>
+        <SEO title="Dashboard" />
+        <div className="center-box mt-40">
+          Kein Zugriff
+        </div>
+      </Layout>
+    )
+  }
+};
diff --git a/src/pages/Edit.tsx b/src/pages/Edit.tsx
new file mode 100644
index 0000000..cf98340
--- /dev/null
+++ b/src/pages/Edit.tsx
@@ -0,0 +1,39 @@
+import React, { useEffect, useState } from "react";
+import { EditUser } from "../components/edit-user";
+import { Layout } from "../components/layout";
+import { SEO } from "../components/seo";
+import UserInterface from "../components/user-dashboard/profile";
+
+
+export const Edit: React.FC = () => {
+  const [user, setUser] = useState<UserInterface>();
+
+  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')]);
+
+  if (user) {
+    return (
+      <Layout>
+        <SEO title="Edit User" />
+        <EditUser user={user}/>
+      </Layout>
+    )
+  } else {
+    return (
+      <Layout>
+        <SEO title="Edit User" />
+        <div className="center-box mt-40">
+          Kein Zugriff
+        </div>
+      </Layout>
+    )
+  }
+};
diff --git a/src/pages/EmailConfirm.tsx b/src/pages/EmailConfirm.tsx
new file mode 100644
index 0000000..3473d88
--- /dev/null
+++ b/src/pages/EmailConfirm.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { Layout } from "../components/layout";
+import { SEO } from "../components/seo";
+
+export const EmailConfirm: React.FC = () => {
+  return (
+    <Layout>
+      <SEO title="Pw Reset " />
+      <div className="center-box mt-40 w-full max-w-lg">
+        <div className="flex font-medium tracking-wide text-xs mt-2 mb-2">
+          Es wurde eine E-Mail an die Angebene Adresse gesendet.
+        </div>
+        <div className="text-grey-dark mt-6">
+          <Link to="/">
+            <p className="text-sm text-em1">Zur Startseite</p>
+          </Link>
+        </div>
+      </div>
+    </Layout>
+  );
+};
diff --git a/src/pages/PwReset.tsx b/src/pages/PwReset.tsx
new file mode 100644
index 0000000..a48b810
--- /dev/null
+++ b/src/pages/PwReset.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+import { Layout } from "../components/layout";
+import { PwResetForm } from "../components/pw_reset";
+import { SEO } from "../components/seo";
+
+export const PwReset: React.FC = () => {
+
+  return (
+    <Layout>
+      <SEO title="Pw Reset " />
+      <PwResetForm />
+    </Layout>
+  );
+};
diff --git a/src/pages/PwResetRequest.tsx b/src/pages/PwResetRequest.tsx
new file mode 100644
index 0000000..730a630
--- /dev/null
+++ b/src/pages/PwResetRequest.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+import { Layout } from "../components/layout";
+import { PwResetRequestForm } from "../components/pw_reset_request";
+import { SEO } from "../components/seo";
+
+export const PwResetRequest: React.FC = () => {
+
+  return (
+    <Layout>
+      <SEO title="Pw Reset Request" />
+      <PwResetRequestForm />
+    </Layout>
+  );
+};
diff --git a/src/pages/Ticket.tsx b/src/pages/Ticket.tsx
new file mode 100644
index 0000000..2c7d175
--- /dev/null
+++ b/src/pages/Ticket.tsx
@@ -0,0 +1,39 @@
+import React, { useEffect, useState } from "react";
+import { match } from "react-router-dom";
+import { Layout } from "../components/layout";
+import { SEO } from "../components/seo";
+import { TicketShow } from "../components/ticket";
+
+export const Ticket: React.FC <{ match: match<{ id: string; }> }> = ({ match })=> {
+  const [user, setUser] = useState();
+
+  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')]);
+
+
+  if (user) {
+    return (
+      <Layout>
+        <SEO title="Ticket" />
+        <TicketShow id={match.params.id} />
+      </Layout>
+    )
+  } else {
+    return (
+      <Layout>
+        <SEO title="Ticket" />
+        <div className="center-box mt-40">
+          Kein Zugriff
+        </div>
+      </Layout>
+    )
+  }
+};
diff --git a/src/pages/sign_in.tsx b/src/pages/sign_in.tsx
new file mode 100644
index 0000000..9dc63c7
--- /dev/null
+++ b/src/pages/sign_in.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+import { Layout } from "../components/layout";
+import { SEO } from "../components/seo";
+
+import { SignInForm } from "../components/signin/index";
+
+
+export const SignIn: React.FC = () => (
+  <Layout>
+    <SEO title="Login - Klimabox" />
+    <SignInForm />
+  </Layout>
+);
\ No newline at end of file
diff --git a/src/pages/sign_up.tsx b/src/pages/sign_up.tsx
new file mode 100644
index 0000000..ab6a89c
--- /dev/null
+++ b/src/pages/sign_up.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+import { Layout } from "../components/layout";
+import { SEO } from "../components/seo";
+
+import { SignUpForm } from "../components/signup/index";
+
+
+export const SignUp: React.FC = () => (
+  <Layout>
+    <SEO title="Registrierung - Klimabox" />
+    <SignUpForm />
+  </Layout>
+);
\ No newline at end of file
diff --git a/src/users_api/BaseAPI.ts b/src/users_api/BaseAPI.ts
new file mode 100644
index 0000000..43582cf
--- /dev/null
+++ b/src/users_api/BaseAPI.ts
@@ -0,0 +1,142 @@
+import Config from '../config/index';
+
+export interface RequestOptions {
+  config: { apiUrl: string };
+  fetchFunc: typeof window.fetch;
+}
+
+class ResponseError extends Error {
+  public response?: Response;
+  public body: any;
+}
+
+export const corsFetchOptions: {
+  mode: RequestMode;
+  credentials: RequestCredentials;
+} = {
+  mode: 'cors',
+  credentials: 'include'
+};
+
+export const acceptJsonHeaders = {
+  Accept: 'application/json'
+};
+
+export const contentTypeJsonHeaders = {
+  'Content-Type': 'application/json; charset=utf-8'
+};
+
+export const contentTypeFormUrlEncodedHeaders = {
+  'Content-Type': 'application/x-www-form-urlencoded'
+};
+
+const checkStatus = async (response: Response) => {
+  if (!response.ok) {
+    const error = new ResponseError(
+      `${response.status} ${response.statusText}`
+    );
+    error.response = response;
+    // Try to parse the response body as JSON.
+    let body;
+    try {
+      body = await response.json();
+    } catch (e) {
+      // parsing the error response to json failed
+      // Reject the new promise
+      throw error;
+    }
+    // parsing the error response was succuess
+    // Add body property to error
+    error.body = body;
+    // Reject the new promise
+    throw error;
+  }
+  return response;
+};
+
+const parseJson = <T>(response: Response): T | Promise<T> =>
+  response.status === 204 ? ({} as T) : response.json();
+
+export const get = async <T>(url: string, options?: RequestOptions) => {
+  const mergedOptions: RequestOptions = {
+    config: Config,
+    fetchFunc: fetch,
+    ...options
+  };
+  const { config, fetchFunc } = mergedOptions;
+
+  const headers = {
+    ...acceptJsonHeaders
+  };
+
+  const fetchOptions = {
+    ...corsFetchOptions,
+    method: 'GET',
+    headers
+  };
+  const finalUrl = `${config.apiUrl}${url}`;
+
+  const response = await fetchFunc(finalUrl, fetchOptions);
+  const checkedResponse = await checkStatus(response);
+  return parseJson<T>(checkedResponse);
+};
+
+const requestWithBody = async <T>(
+  method: string,
+  url: string,
+  data: any,
+  options?: RequestOptions
+) => {
+  const mergedOptions: RequestOptions = {
+    config: Config,
+    fetchFunc: fetch,
+    ...options
+  };
+  const { config, fetchFunc } = mergedOptions;
+
+  // process different data types
+  let body: string;
+  let headers: { [key: string]: string };
+  if (typeof data === 'string') {
+    headers = {
+      ...acceptJsonHeaders,
+      ...contentTypeFormUrlEncodedHeaders
+    };
+    body = data;
+  } else {
+    headers = {
+      ...acceptJsonHeaders,
+      ...contentTypeJsonHeaders
+    };
+    body = JSON.stringify(data);
+  }
+
+  const fetchOptions = {
+    ...corsFetchOptions,
+    method,
+    headers,
+    body
+  };
+
+  const finalUrl = `${config.apiUrl}${url}`;
+
+  // this is the browser actually doing the fetch
+  const response = await fetchFunc(finalUrl, fetchOptions);
+  const checkedResponse = await checkStatus(response);
+  return parseJson<T>(checkedResponse);
+};
+
+export const post = <T>(url: string, data: any, options?: RequestOptions) =>
+  requestWithBody<T>('POST', url, data, options);
+
+export const put = <T>(url: string, data: any, options?: RequestOptions) =>
+  requestWithBody<T>('PUT', url, data, options);
+
+export const patch = <T>(url: string, data: any, options?: RequestOptions) =>
+  requestWithBody<T>('PATCH', url, data, options);
+
+/**
+ * Makes a DELETE request. Is called destroy because delete is a JavaScript keyword.
+ */
+export const destroy = <T>(url: string, data?: any, options?: RequestOptions) =>
+  requestWithBody<T>('DELETE', url, data, options);
diff --git a/src/users_api/UserAPI.ts b/src/users_api/UserAPI.ts
new file mode 100644
index 0000000..4715cf2
--- /dev/null
+++ b/src/users_api/UserAPI.ts
@@ -0,0 +1,114 @@
+import { get, patch, post, destroy } from './BaseAPI';
+
+const uri = encodeURIComponent;
+
+export const getUser = (id: number) => {
+  return get('/users/' + uri(id))
+}
+
+export const updateUser = (data: any, id: number) => {
+  return patch('/users/' + uri(id), {
+    user: data
+  })
+}
+
+export const createUser = (data: any) => {
+  return post('/users/', {
+    user: data
+  })
+}
+
+export const login = (data: any) => {
+  return post('/authenticate/', {
+    user: data
+  })
+}
+
+export const currentUser = () => {
+  return get('/sessions/')
+}
+
+export const logout = () => {
+  return get('/logout/')
+}
+
+export const favorisePost = (favorite_blogpost: any) => {
+  return post('/favorise/', {
+    favorite_blogpost
+  })
+}
+
+export const deFavorisePost = (favorite_blogpost: any) => {
+  return post('/defavorise/', {
+    favorite_blogpost
+  })
+}
+
+export const favoritPosts = () => {
+  return get('/favorits/')
+}
+
+export const getTopics = () => {
+  return get('/topics/')
+}
+
+
+export const removeTopic = (topic: any) => {
+  return post('/remove_topic/', {
+    topic
+  })
+}
+
+export const addTopic = (topic: any) => {
+  return post('/add_topic/', {
+    topic
+  })
+}
+
+export const getTickets = () => {
+  return get('/tickets/')
+}
+
+export const getTicket = (id: number) => {
+  return get('/tickets/' + uri(id))
+}
+
+export const deleteTicket = (id: number) => {
+  return destroy('/tickets/' + uri(id))
+}
+
+export const createTicket = (data: any) => {
+  return post('/tickets/', {
+    ticket: data
+  })
+}
+
+export const createComment = (data: any, id: number) => {
+  return post('/comments/', {
+    comment: data,
+    id: id
+  })
+}
+
+export const deleteComment = (id: number) => {
+  return destroy('/comments/' + uri(id))
+}
+
+export const deleteUser = (id: number) => {
+  return destroy('/users/' + uri(id))
+}
+
+export const updatePw = (data: any) => {
+  return patch('/resets_pw/', {
+    pw_reset: data
+  })
+}
+
+export const requestPwReset = (data: any) => {
+  return post('/password_resets/', {
+    pw_reset: data
+  })
+}
+
+
+
diff --git a/tailwind.config.js b/tailwind.config.js
index 901979b..72ccc1f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -62,6 +62,10 @@ module.exports = {
         "95%": "95%",
         "100%": "100%",
       },
+      outline: {
+        em1: '2px solid #3D99CE',
+        black: '2px solid #6f6f6f'
+      },
       borderRadius: {
         'round': '1.2rem',
         ...defaultTheme.borderRadius,