diff --git a/src/EventHub.Web.Theme/Themes/EventHub/Layouts/Account.cshtml b/src/EventHub.Web.Theme/Themes/EventHub/Layouts/Account.cshtml
index 58f8d23..e335d64 100644
--- a/src/EventHub.Web.Theme/Themes/EventHub/Layouts/Account.cshtml
+++ b/src/EventHub.Web.Theme/Themes/EventHub/Layouts/Account.cshtml
@@ -55,7 +55,7 @@
 
     <div class="@containerClass my-5">
         <abp-row>
-            <abp-column class="col mx-auto" style="max-width: 440px">
+            <abp-column class="col mx-auto">
                 @if (MultiTenancyOptions.Value.IsEnabled &&
                   (TenantResolveResultAccessor.Result?.AppliedResolvers?.Contains(CookieTenantResolveContributor.ContributorName) == true))
                 {
diff --git a/src/EventHub.Web.Theme/wwwroot/themes/eventhub/owl-edit.css b/src/EventHub.Web.Theme/wwwroot/themes/eventhub/owl-edit.css
index fc35f1c..00d706f 100644
--- a/src/EventHub.Web.Theme/wwwroot/themes/eventhub/owl-edit.css
+++ b/src/EventHub.Web.Theme/wwwroot/themes/eventhub/owl-edit.css
@@ -10,7 +10,7 @@
 .main-slider .owl-carousel .owl-nav button.owl-next {
     width: 40px;
     height: 40px;
-    background: rgb(255 255 255 / 22%);
+    background: rgb(0 4 74 / 20%);
     transition: background-color .3s ease;
     position: absolute;
     display: inline-block;
diff --git a/src/EventHub.Web.Theme/wwwroot/themes/eventhub/style.css b/src/EventHub.Web.Theme/wwwroot/themes/eventhub/style.css
index cd97dcb..a459354 100644
--- a/src/EventHub.Web.Theme/wwwroot/themes/eventhub/style.css
+++ b/src/EventHub.Web.Theme/wwwroot/themes/eventhub/style.css
@@ -264,19 +264,43 @@ p {
 
 
 .slider-container  { 
-    height: 530px;
+    height: 540px;
     background-size: cover;
+    background-position: center center;
     padding: 0 20px;
+
 }
 .slider-container h1 {
-    font-size: 60px;
-    color: white;
+    font-size: 54px; 
     font-weight: 700;
 }
+@media screen and (max-width: 991px) {
+    .slider-container {
+        height: 480px; 
+    }
+    .slider-container h1 {
+        font-size: 48px;
+    }
+}
+@media screen and (max-width: 480px) {
+    .slider-container {
+        height: 360px;
+    }
+    .slider-container h1 {
+        font-size: 36px;
+    }
+}
+
 .slider-container p.lead {
-    font-size: 20px; 
-    color: white;
+    font-size: 16px;  
+    opacity: .75;
 }
+    .slider-container.text-light h1, .slider-container.text-light p.lead {
+        color: white;
+    }
+    .slider-container.text-dark h1, .slider-container.text-dark p.lead {
+        color: #00044A;
+    } 
 .search-event {
     position: relative;
     top:-59px;
@@ -286,11 +310,14 @@ p {
 .profile-content .card-body{
     padding: 32px;
 }
- 
-.profile-content .form-control ,
+.event-thumbnail {
+    width: 100%;
+    height: 200px;
+}
+.profile-content .form-control,
 .profile-content .form-select {
     border: 1px solid rgba(107, 126, 146, 0.20);
-    background-color: white; 
+    background-color: white;
     color: #6B7E92;
 }
 
diff --git a/src/EventHub.Web/Pages/Events/Components/EventsArea/_eventListSection.cshtml b/src/EventHub.Web/Pages/Events/Components/EventsArea/_eventListSection.cshtml
index e5edbf3..9c0e99a 100644
--- a/src/EventHub.Web/Pages/Events/Components/EventsArea/_eventListSection.cshtml
+++ b/src/EventHub.Web/Pages/Events/Components/EventsArea/_eventListSection.cshtml
@@ -9,11 +9,11 @@
         <div class="card">
             @if (eventDto.CoverImageContent is null)
             {
-                <img abp-card-image="Top" style="max-height: 310px; min-height: 170px;" src="/assets/eh-event.png" alt="@eventDto.Title"/>
+                <img abp-card-image="Top" class="event-thumbnail" src="/assets/eh-event.png" alt="@eventDto.Title"/>
             }
             else
             {
-                <img abp-card-image="Top" style="max-height: 310px; min-height: 170px;" src="@($"data:image/png;base64,{Convert.ToBase64String(eventDto.CoverImageContent)}")" alt="@eventDto.Title"/>
+                <img abp-card-image="Top" class="event-thumbnail" src="@($"data:image/png;base64,{Convert.ToBase64String(eventDto.CoverImageContent)}")" alt="@eventDto.Title"/>
             }
             <div class="card-body">
                 <div class="event-container">
diff --git a/src/EventHub.Web/Pages/Index.cshtml b/src/EventHub.Web/Pages/Index.cshtml
index 94ef206..8e1189b 100644
--- a/src/EventHub.Web/Pages/Index.cshtml
+++ b/src/EventHub.Web/Pages/Index.cshtml
@@ -14,16 +14,16 @@
 
 @section styles {
     <abp-style-bundle>
-        <abp-style src="/Pages/Index.css"/>
-        <abp-style src="/libs/date-range-picker/daterangepicker.css"/>
+        <abp-style src="/Pages/Index.css" />
+        <abp-style src="/libs/date-range-picker/daterangepicker.css" />
     </abp-style-bundle>
 }
 
 @section scripts {
     <abp-script-bundle>
-        <abp-script src="/libs/date-range-picker/moment.min.js"/>
-        <abp-script src="/libs/date-range-picker/daterangepicker.js"/>
-        <abp-script src="/Pages/Index.js"/>
+        <abp-script src="/libs/date-range-picker/moment.min.js" />
+        <abp-script src="/libs/date-range-picker/daterangepicker.js" />
+        <abp-script src="/Pages/Index.js" />
     </abp-script-bundle>
 }
 
@@ -33,17 +33,49 @@
         <div class="owl-carousel owl-theme">
             <div class="item">
                 <div class="slider-container d-flex align-items-center text-center text-light" style="background-image: url('/assets/slide.jpg')">
-                    <div class="mx-auto">
-                        <h1>Let's Share Together</h1>
-                        <p>Try something new, or do more of what you love.</p>
+                    <div class="container">
+                        <div class="row">
+                            <div class="col-lg-9 col-md-11 mx-auto">
+                                <h1>Let's Share Together</h1>
+                                <p class="lead">Try something new, or do more of what you love.</p>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
             <div class="item">
-                <div class="slider-container d-flex align-items-center text-center text-light" style="background-image: url('/assets/slide.jpg')">
-                    <div class="mx-auto">
-                        <h1>Let's Share Together</h1>
-                        <p class="lead">Try something new, or do more of what you love.</p>
+                <div class="slider-container d-flex align-items-center text-center text-dark" style="background-image: url('/assets/eh-banner-4.png')">
+                    <div class="container">
+                        <div class="row">
+                            <div class="col-lg-9 col-md-11 mx-auto">
+                                <h1>.Net Foundation Week</h1>
+                                <p class="lead">
+                                    Lorem ipsum is placeholder text commonly used in the graphic.
+                                </p>
+                                <div>
+                                    <a href="#" class="btn btn-primary">Join Now</a>
+                                    <a href="#" class="btn btn-link">More Details</a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="item">
+                <div class="slider-container d-flex align-items-center text-center text-dark" style="background-image: url('/assets/eh-banner-5.png')">
+                    <div class="container">
+                        <div class="row">
+                            <div class="col-lg-9 col-md-11 mx-auto">
+                                <h1>.Net Foundation Week</h1>
+                                <p class="lead">
+                                    Lorem ipsum is placeholder text commonly used in the graphic.
+                                </p>
+                                <div>
+                                    <a href="#" class="btn btn-primary">Join Now</a>
+                                    <a href="#" class="btn btn-link">More Details</a>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -99,9 +131,9 @@
         </div>
     </div>
 
-    @await Component.InvokeAsync(typeof(EventsAreaViewComponent), new 
+    @await Component.InvokeAsync(typeof(EventsAreaViewComponent), new
     {
-        minDate = Clock.Now, 
+        minDate = Clock.Now,
         maxResultCount = 15
     })
 </div>
@@ -113,7 +145,7 @@
 
             <h2 class="mb-4">Online Events</h2>
             <div class="owl-carousel owl-theme">
-                @for (var i = 0; i < Model.OnlineEvents.Count; i+=2)
+                @for (var i = 0; i < Model.OnlineEvents.Count; i += 2)
                 {
                     <div class="item">
                         <div class="card mb-3">
@@ -125,7 +157,7 @@
                                     }
                                     else
                                     {
-                                        <img class="card-img-left" src="@($"data:image/png;base64,{Convert.ToBase64String(Model.OnlineEvents[i].CoverImageContent)}")" alt="@Model.OnlineEvents[i].Title"/>
+                                        <img class="card-img-left" src="@($"data:image/png;base64,{Convert.ToBase64String(Model.OnlineEvents[i].CoverImageContent)}")" alt="@Model.OnlineEvents[i].Title" />
                                     }
                                 </div>
                                 <div class="col-md-7">
@@ -142,36 +174,36 @@
                                 </div>
                             </div>
                         </div>
-                         @if (i + 1 <= Model.OnlineEvents.Count - 1)
-                         {
-                             <div class="card mb-3">
-                                 <div class="row no-gutters">
-                                     <div class="col-md-5">
-                                         @if (Model.OnlineEvents[i + 1].CoverImageContent is null)
-                                         {
-                                             <img src="/assets/eh-event.png" width="187" height="218" class="card-img-left">
-                                         }
-                                         else
-                                         {
-                                             <img class="card-img-left" src="@($"data:image/png;base64,{Convert.ToBase64String(Model.OnlineEvents[i + 1].CoverImageContent)}")" alt="@Model.OnlineEvents[i + 1].Title"/>
-                                         }
-                                     </div>
-                                     <div class="col-md-7">
-                                         <div class="card-body">
-                                             <div class="event-container online-event">
-                                                 <div class="event-info">
-                                                     <h5>@Model.OnlineEvents[i + 1].Title</h5>
-                                                     <small>@Model.OnlineEvents[i + 1].StartTime.ToString("MMMM dd, yyyy dddd") | @Model.OnlineEvents[i + 1].StartTime.ToString("hh tt", CultureInfo.InvariantCulture) - @Model.OnlineEvents[i + 1].EndTime.ToString("hh tt", CultureInfo.InvariantCulture) | Online</small>
-                                                     <p>@Model.OnlineEvents[i + 1].Description</p>
-                                                 </div>
-                                                 <a href="@Url.Page("/Events/Detail", new {url = @Model.OnlineEvents[i + 1].Url})" class="btn btn-link p-0">Learn More <img src="/assets/more-btn.svg"></a>
-                                             </div>
-                                         </div>
-                                     </div>
+                        @if (i + 1 <= Model.OnlineEvents.Count - 1)
+                        {
+                            <div class="card mb-3">
+                                <div class="row no-gutters">
+                                    <div class="col-md-5">
+                                        @if (Model.OnlineEvents[i + 1].CoverImageContent is null)
+                                        {
+                                            <img src="/assets/eh-event.png" width="187" height="218" class="card-img-left">
+                                        }
+                                        else
+                                        {
+                                            <img class="card-img-left" src="@($"data:image/png;base64,{Convert.ToBase64String(Model.OnlineEvents[i + 1].CoverImageContent)}")" alt="@Model.OnlineEvents[i + 1].Title" />
+                                        }
+                                    </div>
+                                    <div class="col-md-7">
+                                        <div class="card-body">
+                                            <div class="event-container online-event">
+                                                <div class="event-info">
+                                                    <h5>@Model.OnlineEvents[i + 1].Title</h5>
+                                                    <small>@Model.OnlineEvents[i + 1].StartTime.ToString("MMMM dd, yyyy dddd") | @Model.OnlineEvents[i + 1].StartTime.ToString("hh tt", CultureInfo.InvariantCulture) - @Model.OnlineEvents[i + 1].EndTime.ToString("hh tt", CultureInfo.InvariantCulture) | Online</small>
+                                                    <p>@Model.OnlineEvents[i + 1].Description</p>
+                                                </div>
+                                                <a href="@Url.Page("/Events/Detail", new {url = @Model.OnlineEvents[i + 1].Url})" class="btn btn-link p-0">Learn More <img src="/assets/more-btn.svg"></a>
+                                            </div>
+                                        </div>
+                                    </div>
 
-                                 </div>
-                             </div>
-                         }
+                                </div>
+                            </div>
+                        }
                     </div>
                 }
             </div>
diff --git a/src/EventHub.Web/wwwroot/assets/eh-banner-2.png b/src/EventHub.Web/wwwroot/assets/eh-banner-2.png
new file mode 100644
index 0000000..c2d77a2
Binary files /dev/null and b/src/EventHub.Web/wwwroot/assets/eh-banner-2.png differ
diff --git a/src/EventHub.Web/wwwroot/assets/eh-banner-3.png b/src/EventHub.Web/wwwroot/assets/eh-banner-3.png
new file mode 100644
index 0000000..5acb2db
Binary files /dev/null and b/src/EventHub.Web/wwwroot/assets/eh-banner-3.png differ
diff --git a/src/EventHub.Web/wwwroot/assets/eh-banner-4.png b/src/EventHub.Web/wwwroot/assets/eh-banner-4.png
new file mode 100644
index 0000000..8cdf088
Binary files /dev/null and b/src/EventHub.Web/wwwroot/assets/eh-banner-4.png differ
diff --git a/src/EventHub.Web/wwwroot/assets/eh-banner-5.png b/src/EventHub.Web/wwwroot/assets/eh-banner-5.png
new file mode 100644
index 0000000..c5e0faa
Binary files /dev/null and b/src/EventHub.Web/wwwroot/assets/eh-banner-5.png differ