diff --git a/src/EventHub.Web/Pages/Events/Components/ListArea/Default.cshtml b/src/EventHub.Web/Pages/Events/Components/ListArea/Default.cshtml
new file mode 100644
index 0000000..c5f0037
--- /dev/null
+++ b/src/EventHub.Web/Pages/Events/Components/ListArea/Default.cshtml
@@ -0,0 +1,45 @@
+@using System.Globalization
+@using EventHub.Web.Pages.Events
+@model EventHub.Web.Pages.Events.Components.ListArea.ListAreaViewComponent.ListAreaViewComponentModel
+
+@if (Model.Events != null && Model.Events.Count > 0)
+{
+    <div class="row">
+
+        @foreach (var eventDto in Model.Events)
+        {
+            <div class="col-lg-4 col-md-6">
+                <div class="card">
+                    @if (eventDto.CoverImageContent is null)
+                    {
+                        <img abp-card-image="Top" src="/assets/card-img.png" alt="@eventDto.Title"/>
+                    }
+                    else
+                    {
+                        <img abp-card-image="Top" style="max-height: 400px; min-height: 160px;" src="@($"data:image/png;base64,{Convert.ToBase64String(eventDto.CoverImageContent)}")" alt="@eventDto.Title"/>
+                    }
+                    <div class="card-body">
+                        <div class="event-container">
+                            <div class="form-row">
+                                <div class="col-3">
+                                    <div class="event-date text-center">
+                                        <small>@eventDto.StartTime.ToString("MMM")</small>
+                                        <span>@eventDto.StartTime.Day</span>
+                                    </div>
+                                </div>
+                                <div class="col-9">
+                                    <div class="event-info">
+                                        <h5>@eventDto.Title</h5>
+                                        <small>@eventDto.StartTime.ToString("hh tt", CultureInfo.InvariantCulture) - @eventDto.EndTime.ToString("hh tt", CultureInfo.InvariantCulture) | @EventDateHelper.GetLocationInfo(@eventDto)</small>
+                                        <p>@eventDto.Description</p>
+                                    </div>
+                                    <a href="@Url.Page("/Events/Detail", new {url = @eventDto.Url})" class="btn btn-link p-0">Learn More <img src="/assets/more-btn.svg"></a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        }
+    </div>
+}
\ No newline at end of file
diff --git a/src/EventHub.Web/Pages/Events/Components/ListArea/ListAreaViewComponent.cs b/src/EventHub.Web/Pages/Events/Components/ListArea/ListAreaViewComponent.cs
new file mode 100644
index 0000000..170caee
--- /dev/null
+++ b/src/EventHub.Web/Pages/Events/Components/ListArea/ListAreaViewComponent.cs
@@ -0,0 +1,58 @@
+using System;
+using System.Collections.Generic;
+using System.Threading.Tasks;
+using EventHub.Events;
+using Microsoft.AspNetCore.Mvc;
+using Volo.Abp.AspNetCore.Mvc;
+using Volo.Abp.AspNetCore.Mvc.UI.Widgets;
+
+namespace EventHub.Web.Pages.Events.Components.ListArea
+{
+    [Widget(AutoInitialize = true)]
+    public class ListAreaViewComponent : AbpViewComponent
+    {
+        private readonly IEventAppService _eventAppService;
+
+        public ListAreaViewComponent(IEventAppService eventAppService)
+        {
+            _eventAppService = eventAppService;
+        }
+
+        public async Task<IViewComponentResult> InvokeAsync(
+            Guid? organizationId,
+            DateTime? minDate, 
+            DateTime? maxDate, 
+            bool? isOnline, 
+            int? skipCount, 
+            int maxResultCount = 15)
+        {
+            var result = await _eventAppService.GetListAsync(
+                new EventListFilterDto
+                {
+                    OrganizationId = organizationId,
+                    MinDate = minDate,
+                    MaxDate = maxDate,
+                    IsOnline = isOnline,
+                    SkipCount = skipCount.GetValueOrDefault(),
+                    MaxResultCount = maxResultCount
+                }
+            );
+
+            return View(
+                "~/Pages/Events/Components/ListArea/Default.cshtml",
+                new ListAreaViewComponentModel
+                {
+                   Events = result.Items,
+                   TotalCount = result.TotalCount
+                }
+            );
+        }
+        
+        public class ListAreaViewComponentModel
+        {
+            public IReadOnlyList<EventInListDto> Events { get; set; }
+            
+            public long TotalCount { get; set; }
+        }
+    }
+}
\ No newline at end of file