diff --git a/api/collections/fields/_article.yml b/api/collections/fields/_article.yml
index f0e36ed..b6acdba 100644
--- a/api/collections/fields/_article.yml
+++ b/api/collections/fields/_article.yml
@@ -5,7 +5,7 @@ meta:
     label:
         de: Einstellungen zum Artikel
         en: Article Setings
-    activeTab: 1
+    activeTab: 0
 subFields:
     - name: general
       type: object
@@ -31,7 +31,6 @@ subFields:
                 label:
                     de: Datum der Veröffentlichung
                     en: Release Date
-                css: "grid grid-50"
             subFields:
                 - name: from
                   type: string
@@ -51,6 +50,19 @@ subFields:
                       label:
                           de: Datum (bis)
                           en: Date (until)
+                - name: interval
+                  type: string
+                  meta:
+                      inputProps:
+                          placeholder: 60000
+                      label:
+                          {
+                              de: "Zeit-Interval für Live-Check der Veröffentlichung.",
+                              en: "Time interval for publication live check",
+                          }
+                      helperText:
+                          de: "Der Zeit-Interval wird in ms (Millisekunden) angebeben. Standard ist 60000 (60sec)"
+                          en: "The time interval is specified in ms (milliseconds). Default is 60000 (60sec)"
           - name: tags
             type: string[]
             meta:
@@ -190,34 +202,12 @@ subFields:
                 label:
                     de: Erscheinungsbild
                     en: Appearance
-                defaultValue: top-left
+                defaultValue: default
                 choices:
-                    - {
-                          id: "top",
-                          name: { de: "Artikelbild oben (volle Breite)", en: "Article picture top (full width)" },
-                      }
-                    - {
-                          id: "right",
-                          name: { de: "Artikelbild rechts (volle Höhe)", en: "Article picture right (full height)" },
-                      }
-                    - {
-                          id: "bottom",
-                          name: { de: "Artikelbild unten (volle Breite)", en: "Article picture left (full width)" },
-                      }
-                    - {
-                          id: "left",
-                          name: { de: "Artikelbild links (volle Höhe)", en: "Article picture left (full height)" },
-                      }
-                    - {
-                          id: "after-teaser",
-                          name:
-                              {
-                                  de: "Artikelbild unter Teaser (volle Breite)",
-                                  en: "Article picture under teaser (full width)",
-                              },
-                      }
-                    - { id: "default", name: { de: "Artikelbild oben links", en: "Article picture above left" } }
-                    - { id: "top-right", name: { de: "Artikelbild oben rechts", en: "Article picture above right" } }
+                    - { id: "top", name: { de: "Artikelbild oben", en: "Article picture top" } }
+                    - { id: "right", name: { de: "Artikelbild rechts", en: "Article picture right" } }
+                    - { id: "bottom", name: { de: "Artikelbild unten", en: "Article picture left" } }
+                    - { id: "default", name: { de: "Artikelbild links", en: "Article picture left" } }
           - name: properties
             type: object
             meta:
diff --git a/src/components/widgets/Article.svelte b/src/components/widgets/Article.svelte
index 7206628..d549d7d 100644
--- a/src/components/widgets/Article.svelte
+++ b/src/components/widgets/Article.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
+    import { fade } from "svelte/transition"
     // import { navigate } from "svelte-routing"
 
-    import { apiBaseURL } from "../../config"
     import TibiArticleMediaFile from "./TibiArticleMediaFile.svelte"
 
     export let entry: CollectionEntry
@@ -11,16 +11,58 @@
     let article = entry.article
     let marginClasses: string = ""
     let paddingClasses: string = ""
+    let published: boolean = true
+
+    const updatePublishedState = () => {
+        let currentDate = new Date().getTime()
+        let from = new Date(article?.general?.publish_date?.from).getTime()
+        let until = new Date(article?.general?.publish_date?.until).getTime()
+        let publish = true
+
+        if (from && until) {
+            if (currentDate > from && currentDate < until) {
+                publish = true
+            } else {
+                publish = false
+            }
+        } else {
+            if (from) {
+                if (currentDate > from) {
+                    publish = true
+                } else {
+                    publish = false
+                }
+            }
+
+            if (until && publish) {
+                if (currentDate < until) {
+                    publish = true
+                } else {
+                    publish = false
+                }
+            }
+        }
+
+        published = publish
+    }
 
     $: if (article) {
         marginClasses = Object.values(article?.layout?.properties?.margin).join(" ").replace("  ", " ")
         paddingClasses = Object.values(article?.layout?.properties?.padding).join(" ").replace("  ", " ")
     }
+
+    $: if (article?.general?.publish_date?.from || article?.general?.publish_date?.until) updatePublishedState()
+
+    // Update publish state every interval time (default 60sec)
+    setInterval(
+        updatePublishedState,
+        article?.general?.publish_date?.interval ? article?.general?.publish_date?.interval : 60000
+    )
 </script>
 
-{#if article}
-    <article class="{cssClass} {article?.layout?.variant} {marginClasses} {paddingClasses}">
-        {#if article?.layout?.variant === "default"}
+{#if article && published}
+    <article class="{cssClass} {article?.layout?.variant} {marginClasses} {paddingClasses}" transition:fade>
+        {#if article?.layout?.variant === "top"}
             {#if article?.content?.types?.media?.files?.length}
                 <TibiArticleMediaFile
                     collectionName="articles"
@@ -43,7 +85,59 @@
             {#if article?.content?.types?.details && showDetails}
                 <div class="article-details">{@html article?.content?.types?.details}</div>
             {/if}
-        {:else if article?.layout?.variant === "left"}
+        {:else if article?.layout?.variant === "right"}
+            <div class="row">
+                <div class="col-md-8">
+                    {#if article?.content?.title}
+                        <div class="article-title">{@html article?.content?.title}</div>
+                    {/if}
+
+                    {#if article?.content?.subtitle}
+                        <div class="article-subtitle">{@html article?.content?.subtitle}</div>
+                    {/if}
+
+                    {#if article?.content?.types?.teaser}
+                        <div class="article-teaser">{@html article?.content?.types?.teaser}</div>
+                    {/if}
+
+                    {#if article?.content?.types?.details && showDetails}
+                        <div class="article-details">{@html article?.content?.types?.details}</div>
+                    {/if}
+                </div>
+                <div class="col-md-4">
+                    {#if article?.content?.types?.media?.files?.length}
+                        <TibiArticleMediaFile
+                            collectionName="articles"
+                            entryId="{entry.id}"
+                            mediaFile="{article?.content?.types?.media?.files[0]}"
+                        />
+                    {/if}
+                </div>
+            </div>
+        {:else if article?.layout?.variant === "bottom"}
+            {#if article?.content?.title}
+                <div class="article-title">{@html article?.content?.title}</div>
+            {/if}
+
+            {#if article?.content?.subtitle}
+                <div class="article-subtitle">{@html article?.content?.subtitle}</div>
+            {/if}
+
+            {#if article?.content?.types?.teaser}
+                <div class="article-teaser">{@html article?.content?.types?.teaser}</div>
+            {/if}
+
+            {#if article?.content?.types?.details && showDetails}
+                <div class="article-details">{@html article?.content?.types?.details}</div>
+            {/if}
+            {#if article?.content?.types?.media?.files?.length}
+                <TibiArticleMediaFile
+                    collectionName="articles"
+                    entryId="{entry.id}"
+                    mediaFile="{article?.content?.types?.media?.files[0]}"
+                />
+            {/if}
+        {:else if article?.layout?.variant === "left" || article?.layout?.variant === "default"}
             <div class="row">
                 <div class="col-md-4">
                     {#if article?.content?.types?.media?.files?.length}
diff --git a/src/css/theme-2022/components/article.less b/src/css/theme-2022/components/article.less
index 06d9c7b..f9ce54b 100644
--- a/src/css/theme-2022/components/article.less
+++ b/src/css/theme-2022/components/article.less
@@ -1,8 +1,7 @@
 article,
 .article {
     overflow-wrap: anywhere;
-    background: rgba(0, 0, 0, 0.03);
-    padding: @space-md;
+    border: 1px dashed @on-background;
 
     & ~ article,
     & ~ .article {