diff --git a/fabcal/routers/frontend.py b/fabcal/routers/frontend.py
index 68950a5..bd5cf42 100644
--- a/fabcal/routers/frontend.py
+++ b/fabcal/routers/frontend.py
@@ -41,3 +41,8 @@ async def generate_response(request: Request, template_name: str, **additional_c
 @router.get("/sidebar/embed.html", response_class=HTMLResponse)
 async def embed_sidebar(request: Request, max_days: int = None):
     return await generate_response(request, "sidebar/embed.html", max_days=int(max_days))
+
+
+@router.get("/sidebar/demo.html", response_class=HTMLResponse)
+async def sidebar_demo(request: Request, max_days: int = None):
+    return await generate_response(request, "sidebar/demo.html", max_days=int(max_days))
diff --git a/templates/sidebar/demo.html b/templates/sidebar/demo.html
new file mode 100644
index 0000000..0e8ae48
--- /dev/null
+++ b/templates/sidebar/demo.html
@@ -0,0 +1,64 @@
+{% extends "sidebar/base.html" %}
+
+{% block header %}
+{{ super() }}
+<style>
+html {
+    display: flex;
+}
+body {
+    max-width: 1200px;
+    display: flex;
+    flex-direction: row;
+    margin: 0 auto;
+
+}
+.fake-content {
+    margin: 50px 30px 0 30px;
+    padding: 0;
+    background-color: white;
+    font-size: 18px;
+}
+.calendar {
+    min-width: 250px;
+    margin: 50px 30px 0 30px;
+    border: 1px solid red;
+}
+
+@media only screen and (max-width: 600px) {
+    body {
+        flex-wrap: wrap-reverse;
+    }
+}
+</style>
+{% endblock %}
+
+{% block body %}
+<div class="fake-content">
+    <h2>Fake content</h2>
+
+    <p>
+        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+        dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
+        consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
+        sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
+        takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
+        diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
+        accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
+        dolor sit amet.
+    </p>
+
+    <p>
+        Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
+        feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
+        delenit augue duis dolore te feugait nulla facilisi.
+    </p>
+</div>
+
+<div class="calendar">
+    {% include "sidebar/includes/header.html" %}
+    {% include "sidebar/includes/events-list.html" %}
+    {% include "sidebar/includes/footer.html" %}
+</div>
+{% endblock %}