diff --git a/src/EventHub.Web.Theme/Themes/EventHub/Components/Footer/Default.cshtml b/src/EventHub.Web.Theme/Themes/EventHub/Components/Footer/Default.cshtml
index ff0b15b..6b3521c 100644
--- a/src/EventHub.Web.Theme/Themes/EventHub/Components/Footer/Default.cshtml
+++ b/src/EventHub.Web.Theme/Themes/EventHub/Components/Footer/Default.cshtml
@@ -11,16 +11,18 @@
                     EventHub
                 </a>
             </div>
+              
             <div class="col-md">
-                <h5>Account</h5>
-                <div class="footer-links">
-                    @if (!CurrentUser.IsAuthenticated)
-                    {
+                @if (!CurrentUser.IsAuthenticated)
+                {
+                    <h5>Account</h5>
+                    <div class="footer-links">
+
                         <a href="@EventHubExternalUrls.EhAccount/account/register?returnUrl=@EventHubExternalUrls.EhWww@(System.Net.WebUtility.UrlEncode(Context.Request.GetEncodedPathAndQuery()))" class="d-block">Sign Up</a>
                         <a href="/account/login?returnUrl=@(System.Net.WebUtility.UrlEncode(Context.Request.GetEncodedPathAndQuery()))" class="d-block">Log In</a>
-                    }
-                    <a href="@Url.Page("/help")" class="d-block">Help</a>
-                </div>
+
+                    </div>
+                }
             </div>
             <div class="col-md">
                 <h5>Follow Us</h5>
@@ -50,6 +52,12 @@
                 <span class="copyright">© 2021 EventHub</span>
             </div>
             <div class="col-md text-center text-md-right">
+                <a href="@Url.Page("/help")">
+                    Help
+                </a>
+                <span>
+                    <img src="/assets/seperator2.svg" class="mx-3">
+                </span>
                 <a href="@Url.Page("/TermsService")">
                     @* ToDo: The content of the page will be edited *@
                     Terms of Service
diff --git a/src/EventHub.Web.Theme/wwwroot/themes/eventhub/style.css b/src/EventHub.Web.Theme/wwwroot/themes/eventhub/style.css
index 1dabd4d..01cdd13 100644
--- a/src/EventHub.Web.Theme/wwwroot/themes/eventhub/style.css
+++ b/src/EventHub.Web.Theme/wwwroot/themes/eventhub/style.css
@@ -566,6 +566,45 @@ nav.breadcrumb-container .breadcrumb a,nav.breadcrumb-container .breadcrumb li{
     width: 40px;
     height: 40px;
 }
+
+.list-span {
+    line-height: 168px; }
+.list-span span {
+    font-size: 1em;
+    color: #fff;
+    opacity: 0.5;
+    line-height: 1;
+    font-weight: 100;
+    text-shadow: 0 0 35px rgba(0, 0, 0, 0.5); }
+@media screen and (max-width: 767px) {
+    .list-span {
+        width: 100%;
+        height: 150px;
+        line-height: 150px;
+        margin-bottom: 1em; }
+    .list-span span {
+        font-size: 1em;
+        line-height: 150px; } }
+
+.carousel-list-span {
+    line-height: 215px; }
+.carousel-list-span span {
+    font-size: 1em;
+    color: #fff;
+    opacity: 0.5;
+    line-height: 1;
+    font-weight: 100;
+    text-shadow: 0 0 35px rgba(0, 0, 0, 0.5); }
+@media screen and (max-width: 767px) {
+    .carousel-list-span {
+        width: 100%;
+        height: 150px;
+        line-height: 150px;
+        margin-bottom: 1em; }
+    .carousel-list-spann span {
+        font-size: 1em;
+        line-height: 150px; } }
+
 .detail-head {
     font-weight: normal;
     font-size: 18px;
diff --git a/src/EventHub.Web/Helpers/CoverImageHelper.cs b/src/EventHub.Web/Helpers/CoverImageHelper.cs
new file mode 100644
index 0000000..3de86c7
--- /dev/null
+++ b/src/EventHub.Web/Helpers/CoverImageHelper.cs
@@ -0,0 +1,30 @@
+using System;
+using System.Linq;
+using Volo.Abp;
+
+namespace EventHub.Web.Helpers
+{
+    public class CoverImageHelper
+    {
+        private static readonly string[] ImageColors =
+        {
+            "linear-gradient(135deg, #41003d 0%, #a10097 100%)",
+            "linear-gradient(135deg, #163e4b 0%, #297791 100%)",
+            "linear-gradient(135deg, #660040 0%, #aa006b 100%)",
+            "linear-gradient(135deg, #240d88 0%, #571fff 100%)",
+        };
+
+        public static string GetRandomColor(string articleTitle)
+        {
+            long total = articleTitle.Truncate(32).ToCharArray().Sum(c => c);
+            return ImageColors[total % ImageColors.Length];
+        }
+
+        public static string GetTitle(string title)
+        {
+            title = Check.NotNullOrWhiteSpace(title, nameof(title));
+
+            return title.ToUpper();
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/EventHub.Web/Pages/Events/Components/EventsArea/_eventListSection.cshtml b/src/EventHub.Web/Pages/Events/Components/EventsArea/_eventListSection.cshtml
index 7771422..1307ed5 100644
--- a/src/EventHub.Web/Pages/Events/Components/EventsArea/_eventListSection.cshtml
+++ b/src/EventHub.Web/Pages/Events/Components/EventsArea/_eventListSection.cshtml
@@ -1,4 +1,5 @@
 @using System.Globalization
+@using EventHub.Web.Helpers
 @using EventHub.Web.Pages.Events
 @model List<EventHub.Events.EventInListDto>
 
@@ -8,7 +9,9 @@
         <div class="card">
             @if (eventDto.CoverImageContent is null)
             {
-                <img abp-card-image="Top" src="/assets/card-img.png" alt="@eventDto.Title"/>
+                <div class="rounded list-span text-center" style="background: @(CoverImageHelper.GetRandomColor(eventDto.Title))">
+                    <span>@CoverImageHelper.GetTitle(eventDto.Title).TruncateWithPostfix(40)</span>
+                </div>
             }
             else
             {
diff --git a/src/EventHub.Web/Pages/Index.cshtml b/src/EventHub.Web/Pages/Index.cshtml
index 20e744e..a2a6c63 100644
--- a/src/EventHub.Web/Pages/Index.cshtml
+++ b/src/EventHub.Web/Pages/Index.cshtml
@@ -4,6 +4,7 @@
 @using Microsoft.AspNetCore.Mvc.Localization
 @using EventHub.Localization
 @using EventHub.Web
+@using EventHub.Web.Helpers
 @using EventHub.Web.Pages.Events.Components.EventsArea
 @using Volo.Abp.Timing
 @using Volo.Abp.Users
@@ -120,7 +121,9 @@
                                 <div class="col-md-5">
                                     @if (Model.OnlineEvents[i].CoverImageContent is null)
                                     {
-                                        <img src="/assets/card-left-image.png" class="card-img-left" alt="@Model.OnlineEvents[i].Title">
+                                        <div class="rounded carousel-list-span text-center" style="background: @(CoverImageHelper.GetRandomColor(@Model.OnlineEvents[i].Title))">
+                                            <small>@CoverImageHelper.GetTitle(Model.OnlineEvents[i].Title).TruncateWithPostfix(30)</small>
+                                        </div>
                                     }
                                     else
                                     {
@@ -148,7 +151,9 @@
                                      <div class="col-md-5">
                                          @if (Model.OnlineEvents[i + 1].CoverImageContent is null)
                                          {
-                                             <img src="/assets/card-left-image.png" class="card-img-left" alt="@Model.OnlineEvents[i + 1].Title">
+                                             <div class="rounded carousel-list-span text-center" style="background: @(CoverImageHelper.GetRandomColor(@Model.OnlineEvents[i + 1].Title))">
+                                                 <small>@CoverImageHelper.GetTitle(Model.OnlineEvents[i + 1].Title).TruncateWithPostfix(30)</small>
+                                             </div>
                                          }
                                          else
                                          {
diff --git a/src/EventHub.Web/Pages/Organizations/Components/OrganizationsArea/_organizationListSection.cshtml b/src/EventHub.Web/Pages/Organizations/Components/OrganizationsArea/_organizationListSection.cshtml
index eca2ff4..e8d4bbf 100644
--- a/src/EventHub.Web/Pages/Organizations/Components/OrganizationsArea/_organizationListSection.cshtml
+++ b/src/EventHub.Web/Pages/Organizations/Components/OrganizationsArea/_organizationListSection.cshtml
@@ -1,3 +1,4 @@
+@using EventHub.Web.Helpers
 @model List<EventHub.Organizations.OrganizationInListDto>
 
 @foreach (var organization in Model)
@@ -6,7 +7,9 @@
         <div class="card">
             @if (organization.ProfilePictureContent == null)
             {
-                <img src="assets/card-img.png" class="card-img-top" alt="@organization.Name">
+                <div class="rounded list-span text-center" style="background: @(CoverImageHelper.GetRandomColor(organization.Name))">
+                    <span>@CoverImageHelper.GetTitle(organization.Name).TruncateWithPostfix(40)</span>
+                </div>
             }
             else
             {
@@ -20,7 +23,7 @@
                             @organization.Description
                         </p>
                     </div>
-                    <a href="@Url.Page("/Organizations/Profile", new {name = organization.Name})" class="btn btn-link p-0">Details <img src="assets/more-btn.svg"></a>
+                    <a href="@Url.Page("/Organizations/Profile", new {name = organization.Name})" class="btn btn-link p-0">Details <img src="/assets/more-btn.svg"></a>
                 </div>
             </div>
         </div>