diff --git a/Plugin.php b/Plugin.php
index e773f98..858604e 100644
--- a/Plugin.php
+++ b/Plugin.php
@@ -3,6 +3,7 @@
 namespace Silva\Adrema;
 
 use Backend;
+use Silva\Adrema\Components\EventOverview;
 use Silva\Adrema\Models\Settings;
 use System\Classes\PluginBase;
 
@@ -47,10 +48,8 @@ class Plugin extends PluginBase
      */
     public function registerComponents()
     {
-        return []; // Remove this line to activate
-
         return [
-            'Silva\Adrema\Components\MyComponent' => 'myComponent',
+            EventOverview::class => 'adrema_event_overview',
         ];
     }
 
diff --git a/assets/vendor/adrema-form b/assets/vendor/adrema-form
index f76b46b..93df5ba 160000
--- a/assets/vendor/adrema-form
+++ b/assets/vendor/adrema-form
@@ -1 +1 @@
-Subproject commit f76b46bc9fe159324e58783ff945595b5ba5e488
+Subproject commit 93df5bac1d1a7ed971a5d98477b25514a75a59e0
diff --git a/components/EventOverview.php b/components/EventOverview.php
new file mode 100644
index 0000000..42ce204
--- /dev/null
+++ b/components/EventOverview.php
@@ -0,0 +1,41 @@
+<?php
+
+namespace Silva\Adrema\Components;
+
+use Cms\Classes\ComponentBase;
+use Silva\Adrema\Models\Settings;
+
+/**
+ * EventOverview Component
+ *
+ * @link https://docs.octobercms.com/3.x/extend/cms-components.html
+ */
+class EventOverview extends ComponentBase
+{
+
+    public $settings;
+
+    public function componentDetails()
+    {
+        return [
+            'name' => 'EventOverview Component',
+            'description' => 'No description provided yet...'
+        ];
+    }
+
+    public function onRun(): void
+    {
+        $this->addJs('assets/vendor/adrema-form/dist/main.js');
+        $this->settings = [
+            'primary_color' => Settings::get('primary_color'),
+        ];
+    }
+
+    /**
+     * @link https://docs.octobercms.com/3.x/element/inspector-types.html
+     */
+    public function defineProperties()
+    {
+        return [];
+    }
+}
diff --git a/components/eventoverview/default.htm b/components/eventoverview/default.htm
new file mode 100644
index 0000000..1b3bc95
--- /dev/null
+++ b/components/eventoverview/default.htm
@@ -0,0 +1,40 @@
+{% set iconClass="w-3 h-3 flex-none text-dpsgred-700 mr-2" %}
+
+<div class="md:-mt-12" x-data="{
+    ...eventoverview,
+    state: '{{__SELF__.state}}',
+    reloadRequestHandler: '{{__SELF__.alias}}::onReload',
+    popupRequestHandler: '{{__SELF__.alias}}::onShowPopup'
+}">
+
+    <!-- ************************** heading and buttons ************************** -->
+<!--
+    <div class="flex justify-center md:justify-end">
+        <a href="#" class="block btn btn-primary btn-shine px-8 flex" @click.prevent="showPast">
+            <span class="absolute hidden items-center ml-2 top-0 left-0 h-full " :class="{'hidden': !loading, 'flex': loading}">
+                <span class="w-5 h-5 border-primaryfg spinner-ring">
+                  <span class="bounce1"></span>
+                  <span class="bounce2"></span>
+                  <span class="bounce3"></span>
+                </span>
+            </span>
+            <span x-text="past ? 'Nur aktuelle anzeigen' : 'Vergangene anzeigen'">Vergangene anzeigen</span>
+        </a>
+    </div>
+
+-->
+    <!-- ****************************** event grid ******************************* -->
+    <div class="mt-4 md:mt-6 grid gap-4 grid-cols-[repeat(auto-fill,minmax(250px,1fr))]" id="eventoverview-wrapper">
+        {% partial __SELF__.alias ~ '::events.htm' events=__SELF__.events %}
+    </div>
+
+<div class="pt-12"></div>
+        <event-overview
+            style="--primary: {{__SELF__.settings.primary_color}}; --primaryfg: #d1f8ff; --secondary: #800a19; --font: hsl(181, 84%, 78%); --circle: hsl(181, 86%, 16%)"
+            url-pattern="/anmeldung/{slug}"
+            overview-url="/anmeldung"
+            url="/api/silva_adrema_event_overview"
+        ></event-overview>
+
+    <!-- ********************************* popup ********************************* -->
+</div>
diff --git a/components/eventoverview/events.htm b/components/eventoverview/events.htm
new file mode 100644
index 0000000..c3f52ac
--- /dev/null
+++ b/components/eventoverview/events.htm
@@ -0,0 +1,29 @@
+{% set iconClass="w-3 h-3 flex-none text-dpsgred-700 mr-2" %}
+
+{% for i, event in events %}
+
+    {% partial 'site/components/box'
+        image=event.header_image
+        image_size='calc(50vw - 2rem)|845:calc(33vw - 1.666rem)|1112:calc(25vw - 1.5rem)|1375:calc(20vw - 1.4rem)|1568:282px'
+        header=event.name
+        image_rounded=0
+        link={'link': '#', 'title': 'Zur Veranstaltung'}
+        buttonring=1
+        body
+    %}
+        {% put tagextend %} href="#" @click.prevent="showDetail({{event.id}})" data-backstop-event-box {% endput %}
+        <span>
+            <span class="flex items-baseline text-sm">
+                {{'calendar'|sprite(iconClass)}}
+                <span class="text-sm font-semibold text-gray-800"> {{ event.formattedDates }} </span>
+            </span>
+            {% if event.formattedTimes %}
+            <span class="flex items-baseline text-sm">
+                {{'clock'|sprite(iconClass)}}
+                <span class="text-sm font-semibold text-gray-800"> {{ event.formattedTimes }} </span>
+            </span>
+            {% endif %}
+        </span>
+        <span class="flex-grow c text-sm mt-3">{{event.excerpt}}</span>
+    {% endpartial %}
+{% endfor %}
diff --git a/components/eventoverview/popup.htm b/components/eventoverview/popup.htm
new file mode 100644
index 0000000..5c505f0
--- /dev/null
+++ b/components/eventoverview/popup.htm
@@ -0,0 +1,16 @@
+{% set iconClass="w-3 h-3 flex-none text-dpsgred-700 mr-2" %}
+
+<h3 class="text-primary-700 font-arvo">{{event.name}}</h3>
+<div class="time flex items-baseline text-sm">
+    {{'calendar' | sprite(iconClass)}}
+    <div class="text-sm font-semibold text-gray-800">{{event.formattedDates}}</div>
+    <span>{{'clock'|sprite(iconClass ~ ' ml-2')}}</span>
+    <div class="text-sm font-semibold text-gray-800">{{event.formattedTimes}}</div>
+</div>
+<div class="c text-sm mt-3">{{event.content | raw }}</div>
+{% if event.can_register %}
+<a href="{{event.registration_url}}" {% if event.is_foreign_url %} target="_BLANK"  {% endif %} class="mt-2 md:mt-4 btn btn-primary inline-block btn-shine btn-sm">Zur Anmeldung</a>
+{% endif %}
+<a class="absolute block mt-3 mr-3 right-0 top-0" href="#" @click.prevent="hideDetail">
+    {{'close'|sprite('w-4 h-4 text-gray-700')}}
+</a>
diff --git a/models/Setting.php b/models/Setting.php
new file mode 100644
index 0000000..075ab36
--- /dev/null
+++ b/models/Setting.php
@@ -0,0 +1,23 @@
+<?php namespace Silva\Adrema\Models;
+
+use Model;
+
+/**
+ * Setting Model
+ *
+ * @link https://docs.octobercms.com/3.x/extend/system/models.html
+ */
+class Setting extends Model
+{
+    use \October\Rain\Database\Traits\Validation;
+
+    /**
+     * @var string table name
+     */
+    public $table = 'silva_adrema_settings';
+
+    /**
+     * @var array rules for validation
+     */
+    public $rules = [];
+}
diff --git a/models/setting/columns.yaml b/models/setting/columns.yaml
new file mode 100644
index 0000000..b11160b
--- /dev/null
+++ b/models/setting/columns.yaml
@@ -0,0 +1,8 @@
+# ===================================
+#  List Column Definitions
+# ===================================
+
+columns:
+    id:
+        label: ID
+        searchable: true
diff --git a/models/setting/fields.yaml b/models/setting/fields.yaml
new file mode 100644
index 0000000..c611f31
--- /dev/null
+++ b/models/setting/fields.yaml
@@ -0,0 +1,8 @@
+# ===================================
+#  Form Field Definitions
+# ===================================
+
+fields:
+    id:
+        label: ID
+        disabled: true
diff --git a/routes.php b/routes.php
new file mode 100644
index 0000000..67e0fbf
--- /dev/null
+++ b/routes.php
@@ -0,0 +1,14 @@
+<?php
+
+use Silva\Adrema\Models\Settings;
+
+Route::get('/api/silva_adrema_event_overview', function () {
+    $baseUrl = Settings::get('base_url');
+    $response = Http::get($baseUrl . '/api/form');
+
+    if (!$response->ok()) {
+        return Response::json(['message' => 'Fehler beim Laden der Veranstaltungen'], 422);
+    }
+
+    return Response::json($response->json());
+})->middleware('api');