diff --git a/eventhub/src/EventHub.Web/Pages/Events/Components/AttendeesArea/Default.cshtml b/eventhub/src/EventHub.Web/Pages/Events/Components/AttendeesArea/Default.cshtml
new file mode 100644
index 0000000..f092a88
--- /dev/null
+++ b/eventhub/src/EventHub.Web/Pages/Events/Components/AttendeesArea/Default.cshtml
@@ -0,0 +1,8 @@
+<abp-card class="mb-3">
+    <abp-card-body>
+        <abp-card-title>Attendees</abp-card-title>
+        <abp-card-text>
+            TODO
+        </abp-card-text>
+    </abp-card-body>
+</abp-card>
diff --git a/eventhub/src/EventHub.Web/Pages/Events/Components/AttendeesArea/RegistrationAreaViewComponent.cs b/eventhub/src/EventHub.Web/Pages/Events/Components/AttendeesArea/RegistrationAreaViewComponent.cs
new file mode 100644
index 0000000..569c114
--- /dev/null
+++ b/eventhub/src/EventHub.Web/Pages/Events/Components/AttendeesArea/RegistrationAreaViewComponent.cs
@@ -0,0 +1,21 @@
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Mvc;
+using Volo.Abp.AspNetCore.Mvc;
+using Volo.Abp.AspNetCore.Mvc.UI.Widgets;
+
+namespace EventHub.Web.Pages.Events.Components.AttendeesArea
+{
+    [Widget]
+    public class AttendeesAreaViewComponent : AbpViewComponent
+    {
+        public AttendeesAreaViewComponent()
+        {
+
+        }
+
+        public async Task<IViewComponentResult> InvokeAsync()
+        {
+            return View();
+        }
+    }
+}
diff --git a/eventhub/src/EventHub.Web/Pages/Events/Components/RegistrationArea/Default.cshtml b/eventhub/src/EventHub.Web/Pages/Events/Components/RegistrationArea/Default.cshtml
new file mode 100644
index 0000000..5f94acb
--- /dev/null
+++ b/eventhub/src/EventHub.Web/Pages/Events/Components/RegistrationArea/Default.cshtml
@@ -0,0 +1,8 @@
+@using EventHub.Localization
+@using Microsoft.AspNetCore.Mvc.Localization
+@inject IHtmlLocalizer<EventHubResource> L
+<abp-card class="mb-3">
+    <abp-card-body>
+        <a abp-button="Primary" href="#"> @L["RegisterNow"]</a>
+    </abp-card-body>
+</abp-card>
diff --git a/eventhub/src/EventHub.Web/Pages/Events/Components/RegistrationArea/RegistrationAreaViewComponent.cs b/eventhub/src/EventHub.Web/Pages/Events/Components/RegistrationArea/RegistrationAreaViewComponent.cs
index 7460d5d..9ea2854 100644
--- a/eventhub/src/EventHub.Web/Pages/Events/Components/RegistrationArea/RegistrationAreaViewComponent.cs
+++ b/eventhub/src/EventHub.Web/Pages/Events/Components/RegistrationArea/RegistrationAreaViewComponent.cs
@@ -1,9 +1,21 @@
-using Volo.Abp.AspNetCore.Mvc;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Mvc;
+using Volo.Abp.AspNetCore.Mvc;
+using Volo.Abp.AspNetCore.Mvc.UI.Widgets;
 
 namespace EventHub.Web.Pages.Events.Components.RegistrationArea
 {
+    [Widget]
     public class RegistrationAreaViewComponent : AbpViewComponent
     {
-        
+        public RegistrationAreaViewComponent()
+        {
+
+        }
+
+        public async Task<IViewComponentResult> InvokeAsync()
+        {
+            return View();
+        }
     }
 }
diff --git a/eventhub/src/EventHub.Web/Pages/Events/Detail.cshtml b/eventhub/src/EventHub.Web/Pages/Events/Detail.cshtml
index 9b95047..ef549e5 100644
--- a/eventhub/src/EventHub.Web/Pages/Events/Detail.cshtml
+++ b/eventhub/src/EventHub.Web/Pages/Events/Detail.cshtml
@@ -1,6 +1,8 @@
 @page "/events/{url}"
 @inject IHtmlLocalizer<EventHubResource> L
 @using EventHub.Localization
+@using EventHub.Web.Pages.Events.Components.AttendeesArea
+@using EventHub.Web.Pages.Events.Components.RegistrationArea
 @using Microsoft.AspNetCore.Mvc.Localization
 @model EventHub.Web.Pages.Events.Detail
 <abp-row>
@@ -17,18 +19,7 @@
         </abp-card>
     </abp-column>
     <abp-column size-lg="_4" size-md="_6">
-        <abp-card class="mb-3">
-            <abp-card-body>
-                <a abp-button="Primary" href="#"> @L["RegisterNow"]</a>
-            </abp-card-body>
-        </abp-card>
-        <abp-card class="mb-3">
-            <abp-card-body>
-                <abp-card-title>Attendees</abp-card-title>
-                <abp-card-text>
-                    TODO
-                </abp-card-text>
-            </abp-card-body>
-        </abp-card>
+        @await Component.InvokeAsync(typeof(RegistrationAreaViewComponent))
+        @await Component.InvokeAsync(typeof(AttendeesAreaViewComponent))
     </abp-column>
 </abp-row>