diff --git a/lib/outlook_web.ex b/lib/outlook_web.ex
index 07db6ce..a545a18 100644
--- a/lib/outlook_web.ex
+++ b/lib/outlook_web.ex
@@ -89,6 +89,7 @@ defmodule OutlookWeb do
       import OutlookWeb.HtmlTreeComponent
       import OutlookWeb.HtmlDocComponent
       import OutlookWeb.TunitEditorComponent
+      import OutlookWeb.PublicComponents
       import OutlookWeb.Gettext
 
       # Shortcut for generating JS commands
diff --git a/lib/outlook_web/components/public_components.ex b/lib/outlook_web/components/public_components.ex
new file mode 100644
index 0000000..186b567
--- /dev/null
+++ b/lib/outlook_web/components/public_components.ex
@@ -0,0 +1,38 @@
+defmodule OutlookWeb.PublicComponents do
+  @moduledoc """
+    Provides components for showing and listing artikel and autoren.
+  """
+  use Phoenix.Component
+  import Phoenix.HTML
+
+  alias Phoenix.LiveView.JS
+
+  attr :autor, :any, required: true
+
+  def autor(assigns) do
+    ~H"""
+    <a href={"/autoren/#{@autor.id}"}>
+      <div class="p-4 my-2 border rounded-lg border-slate-400 text-slate-800">
+        <div class="font-bold"><%= @autor.name %></div>
+        <div class=""><%= @autor.description %></div>
+      </div>
+    </a>
+    """
+  end
+
+  attr :artikel, :any, required: true
+  attr :show_author, :boolean, default: true
+
+  def artikel(assigns) do
+    ~H"""
+    <.link navigate={"/artikel/#{@artikel.id}"}>
+      <div class="my-2 px-2 rounded border-2 border-solid border-gray-300">
+        <h4 class="font-bold py-2"><%= @artikel.title %></h4>
+        <div :if={@show_author}><small><%= @artikel.article.author.name %></small></div>
+        <div><small><%= @artikel.date |> Calendar.strftime("%d.%m.%Y") %></small></div>
+        <div><%= @artikel.teaser |> raw %></div>
+      </div>
+    </.link>
+    """
+  end
+end
diff --git a/lib/outlook_web/controllers/artikel_html/index.html.heex b/lib/outlook_web/controllers/artikel_html/index.html.heex
index 611af4a..a7c3326 100644
--- a/lib/outlook_web/controllers/artikel_html/index.html.heex
+++ b/lib/outlook_web/controllers/artikel_html/index.html.heex
@@ -1,19 +1,2 @@
-<.header>
-  Listing Artikel
-  <:actions>
-  </:actions>
-</.header>
 
-<.table id="artikel" rows={@artikel} row_click={&JS.navigate(~p"/artikel/#{&1}")}>
-  <:col :let={artikel} label="Title"><%= artikel.title %></:col>
-  <:col :let={artikel} label="Teaser"><%= artikel.teaser %></:col>
-  <%!-- <:col :let={artikel} label="Translator"><%= artikel.translator %></:col> --%>
-  <:col :let={artikel} label="Unauthorized"><%= artikel.unauthorized %></:col>
-  <:col :let={artikel} label="Public content"><%= artikel.public_content %></:col>
-  <:col :let={artikel} label="Date"><%= Calendar.strftime(artikel.date, "%d.%m.%Y") %></:col>
-  <:action :let={artikel}>
-    <div class="sr-only">
-      <.link navigate={~p"/artikel/#{artikel}"}>Show</.link>
-    </div>
-  </:action>
-</.table>
+<.artikel :for={artikel <- @artikel} artikel={artikel} />
diff --git a/lib/outlook_web/controllers/artikel_html/show.html.heex b/lib/outlook_web/controllers/artikel_html/show.html.heex
index ff50bfc..ddcd02d 100644
--- a/lib/outlook_web/controllers/artikel_html/show.html.heex
+++ b/lib/outlook_web/controllers/artikel_html/show.html.heex
@@ -1,19 +1,17 @@
-<.header>
-  <%= @artikel.title %>
-  <:subtitle><%= @artikel.article.author.name %></:subtitle>
-  <:actions>
+<header class="mb-20">
+  <h1 class="text-lg font-semibold leading-8 text-zinc-800"><%= @artikel.title %></h1>
+  <p class="my-2"><.link href={"/autoren/#{@artikel.article.author.id}"}><%= @artikel.article.author.name %></.link>
+     &nbsp;&nbsp;&nbsp; — &nbsp;&nbsp;&nbsp;<%= Calendar.strftime(@artikel.article.date, "%d.%m.%Y") %></p>
+  <div>Original
     <.link href={@artikel.article.url} >
       <%= @artikel.article.title %>
-    </.link> <%= Calendar.strftime(@artikel.article.date, "%d.%m.%Y") %>
-  </:actions>
-</.header>
+    </.link><br>
+  </div>
+  <div class="my-2">
+    Übersetzung <%= Calendar.strftime(@artikel.date, "%d.%m.%Y") %>
+  </div>
+</header>
 
-<.list>
-  <:item title="Title"><%= @artikel.title %></:item>
-  <%!-- <:item title="Translator"><%= @artikel.translator %></:item> --%>
-  <:item title="Unauthorized"><%= @artikel.unauthorized %></:item>
-  <:item title="Date"><%= Calendar.strftime(@artikel.date, "%d.%m.%Y") %></:item>
-</.list>
-<div class="article"><%= @artikel.public_content |> raw %></div>
+<div class="article w-full"><%= @artikel.public_content |> raw %></div>
 
 <.back navigate={~p"/autoren/#{@artikel.article.author}"}>Back to Autor</.back>
diff --git a/lib/outlook_web/controllers/autor_html/index.html.heex b/lib/outlook_web/controllers/autor_html/index.html.heex
index 2cabc63..12049bb 100644
--- a/lib/outlook_web/controllers/autor_html/index.html.heex
+++ b/lib/outlook_web/controllers/autor_html/index.html.heex
@@ -1,20 +1,5 @@
 <.header>
-  Listing Autoren
-  <:actions>
-    <.link href={~p"/autoren/new"}>
-      <.button>New Autor</.button>
-    </.link>
-  </:actions>
+  Autoren
 </.header>
 
-<.table id="autoren" rows={@autoren} row_click={&JS.navigate(~p"/autoren/#{&1}")}>
-  <:col :let={autor} label="Name"><%= autor.name %></:col>
-  <:col :let={autor} label="Description"><%= autor.description %></:col>
-  <:col :let={autor} label="Homepage name"><%= autor.homepage_name %></:col>
-  <:col :let={autor} label="Homepage url"><%= autor.homepage_url %></:col>
-  <:action :let={autor}>
-    <div class="sr-only">
-      <.link navigate={~p"/autoren/#{autor}"}>Show</.link>
-    </div>
-  </:action>
-</.table>
+<.autor :for={autor <- @autoren} autor={autor} />
diff --git a/lib/outlook_web/controllers/autor_html/show.html.heex b/lib/outlook_web/controllers/autor_html/show.html.heex
index ee6f30d..81df610 100644
--- a/lib/outlook_web/controllers/autor_html/show.html.heex
+++ b/lib/outlook_web/controllers/autor_html/show.html.heex
@@ -7,10 +7,7 @@
 
 
 <%= for article <- @autor.articles do %>
-  <div :for={translation <- article.translations} class="my-2 px-2 rounded border-2 border-solid border-gray-300">
-    <.link navigate={~p"/artikel/#{translation}"}><h4 class="font-bold py-2"><%= translation.title %></h4></.link>
-    <div><%= translation.teaser %></div>
-  </div>
+  <.artikel :for={translation <- article.translations} artikel={translation} show_author={false} />
 <% end %>
 
 <.back navigate={~p"/autoren"}>Back to autoren</.back>