diff --git a/WatchIt.Website/WatchIt.Website.Services/WatchIt.Website.Services.WebAPI/WatchIt.Website.Services.WebAPI.Movies/IMoviesWebAPIService.cs b/WatchIt.Website/WatchIt.Website.Services/WatchIt.Website.Services.WebAPI/WatchIt.Website.Services.WebAPI.Movies/IMoviesWebAPIService.cs
index 1a856c7..1bbe0e7 100644
--- a/WatchIt.Website/WatchIt.Website.Services/WatchIt.Website.Services.WebAPI/WatchIt.Website.Services.WebAPI.Movies/IMoviesWebAPIService.cs
+++ b/WatchIt.Website/WatchIt.Website.Services/WatchIt.Website.Services.WebAPI/WatchIt.Website.Services.WebAPI.Movies/IMoviesWebAPIService.cs
@@ -9,4 +9,6 @@ public interface IMoviesWebAPIService
     Task GetMovie(long id, Action<MovieResponse>? successAction = null, Action? notFoundAction = null);
     Task PutMovie(long id, MovieRequest data, Action? successAction = null, Action<IDictionary<string, string[]>>? badRequestAction = null, Action? unauthorizedAction = null, Action? forbiddenAction = null);
     Task DeleteMovie(long id, Action? successAction = null, Action? unauthorizedAction = null, Action? forbiddenAction = null);
+
+    Task GetMoviesViewRank(int? first = null, int? days = null, Action<IEnumerable<MovieResponse>>? successAction = null, Action<IDictionary<string, string[]>>? badRequestAction = null);
 }
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/App.razor b/WatchIt.Website/WatchIt.Website/App.razor
index 51bd262..0e62374 100644
--- a/WatchIt.Website/WatchIt.Website/App.razor
+++ b/WatchIt.Website/WatchIt.Website/App.razor
@@ -10,7 +10,7 @@
     
     <!-- CSS -->
     <link rel="stylesheet" href="app.css?version=0.1.0.16"/>
-    <link rel="stylesheet" href="WatchIt.Website.styles.css?version=0.1.0.29"/>
+    <link rel="stylesheet" href="WatchIt.Website.styles.css?version=0.1.0.26"/>
     
     <!-- BOOTSTRAP -->
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
diff --git a/WatchIt.Website/WatchIt.Website/Pages/HomePage.razor b/WatchIt.Website/WatchIt.Website/Pages/HomePage.razor
index ee87f9b..2d99b94 100644
--- a/WatchIt.Website/WatchIt.Website/Pages/HomePage.razor
+++ b/WatchIt.Website/WatchIt.Website/Pages/HomePage.razor
@@ -1,54 +1,97 @@
 @page "/"
+@using WatchIt.Common.Model.Movies
 
 <PageTitle>WatchIt</PageTitle>
 
 <div class="container-fluid">
-    <div class="row">
-        <div class="col-sm-12">
-            <h2>Hello, world!</h2>
-            <p>Welcome to your new app.</p>
-            <h2>Hello, world!</h2>
-            <p>Welcome to your new app.</p>
-            <h2>Hello, world!</h2>
-            <p>Welcome to your new app.</p>
-            <h2>Hello, world!</h2>
-            <p>Welcome to your new app.</p>
-            <h2>Hello, world!</h2>
-            <p>Welcome to your new app.</p>
-            <h2>Hello, world!</h2>
-            <p>Welcome to your new app.</p>
-            <h2>Hello, world!</h2>
-            <p>Welcome to your new app.</p>
-            <h2>Hello, world!</h2>
-            <p>Welcome to your new app.</p>
-            <h2>Hello, world!</h2>
-            <p>Welcome to your new app.</p>
-            <h2>Hello, world!</h2>
-            <p>Welcome to your new app.</p>
-            <h2>Hello, world!</h2>
-            <p>Welcome to your new app.</p>
-            <h2>Hello, world!</h2>
-            <p>Welcome to your new app.</p>
-            <h2>Hello, world!</h2>
-            <p>Welcome to your new app.</p>
-            <h2>Hello, world!</h2>
-            <p>Welcome to your new app.</p>
-            <h2>Hello, world!</h2>
-            <p>Welcome to your new app.</p>
-            <h2>Hello, world!</h2>
-            <p>Welcome to your new app.</p>
-            <h2>Hello, world!</h2>
-            <p>Welcome to your new app.</p>
-            <h2>Hello, world!</h2>
-            <p>Welcome to your new app.</p>
-            <h2>Hello, world!</h2>
-            <p>Welcome to your new app.</p>
-            <h2>Hello, world!</h2>
-            <p>Welcome to your new app.</p>
-            <h2>Hello, world!</h2>
-            <p>Welcome to your new app.</p>
-            <h2>Hello, world!</h2>
-            <p>Welcome to your new app.</p>
-        </div>
-    </div>
+    @if (_loaded)
+    {
+        if (string.IsNullOrWhiteSpace(_error))
+        {
+            <div class="row">
+                <div class="col">
+                    <div class="rounded-3 panel panel-regular p-4">
+                        <div class="container-fluid p-0">
+                            <div class="row">
+                                <div class="col">
+                                    <h4><strong>Top 5 movies this week by popularity</strong></h4>
+                                </div>
+                            </div>
+                            <div class="row mt-3">
+                                @for (int i = 0; i < 5; i++)
+                                {
+                                    <div class="col">
+                                        @if (_topMovies.Count > i)
+                                        {
+                                            <a class="text-reset text-decoration-none" href="/media/@_topMovies.ToArray()[i].Key.Id">
+                                                <div class="d-flex flex-column align-items-center gap-2 h-100">
+                                                    <img class="rounded-2 shadow object-fit-cover poster-aspect-ratio" src="@(_topMovies.ToArray()[i].Value is not null ? _topMovies.ToArray()[i].Value.ToString() : "assets/poster.png")" alt="poster" width="100%"/>
+                                                    <div class="container-fluid p-0">
+                                                        <div class="row">
+                                                            <div class="col-auto">
+                                                                <div class="text-center border border-2 border-light rounded-circle place-circle"><strong>@(i + 1)</strong></div>
+                                                            </div>
+                                                            <div class="col">
+                                                                <div class="text-end ms-auto">@_topMovies.ToArray()[i].Key.Title@(_topMovies.ToArray()[i].Key.ReleaseDate.HasValue ? $" ({_topMovies.ToArray()[i].Key.ReleaseDate.Value.Year})" : string.Empty)</div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </a>
+                                        }
+                                    </div>
+                                }
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row mt-3">
+                <div class="col">
+                    <div class="rounded-3 panel panel-regular p-4">
+                        <div class="container-fluid p-0">
+                            <div class="row">
+                                <div class="col">
+                                    <h4><strong>Top 5 TV series this week by popularity</strong></h4>
+                                </div>
+                            </div>
+                            <div class="row mt-3">
+                                @for (int i = 0; i < 5; i++)
+                                {
+                                    <div class="col">
+                                        @if (_topSeries.Count > i)
+                                        {
+                                            <a class="text-reset text-decoration-none" href="/media/@_topSeries.ToArray()[i].Key.Id">
+                                                <div class="d-flex flex-column align-items-center gap-2 h-100">
+                                                    <img class="rounded-2 shadow object-fit-cover poster-aspect-ratio" src="@(_topSeries.ToArray()[i].Value is not null ? _topSeries.ToArray()[i].Value.ToString() : "assets/poster.png")" alt="poster" width="100%"/>
+                                                    <div class="container-fluid p-0">
+                                                        <div class="row">
+                                                            <div class="col-auto">
+                                                                <div class="text-center border border-2 border-light rounded-circle place-circle"><strong>@(i + 1)</strong></div>
+                                                            </div>
+                                                            <div class="col">
+                                                                <div class="text-end ms-auto">@_topSeries.ToArray()[i].Key.Title@(_topSeries.ToArray()[i].Key.ReleaseDate.HasValue ? $" ({_topSeries.ToArray()[i].Key.ReleaseDate.Value.Year})" : string.Empty)</div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </a>
+                                        }
+                                    </div>
+                                }
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        }
+        else
+        {
+            <ErrorComponent ErrorMessage="@_error"/>
+        }
+    }
+    else
+    {
+        <LoadingComponent/>
+    }
 </div>
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Pages/HomePage.razor.cs b/WatchIt.Website/WatchIt.Website/Pages/HomePage.razor.cs
index 3383e8e..170b8a6 100644
--- a/WatchIt.Website/WatchIt.Website/Pages/HomePage.razor.cs
+++ b/WatchIt.Website/WatchIt.Website/Pages/HomePage.razor.cs
@@ -1,6 +1,69 @@
-namespace WatchIt.Website.Pages;
+using Microsoft.AspNetCore.Components;
+using WatchIt.Common.Model.Media;
+using WatchIt.Common.Model.Movies;
+using WatchIt.Common.Model.Series;
+using WatchIt.Website.Services.WebAPI.Media;
+using WatchIt.Website.Services.WebAPI.Movies;
+using WatchIt.Website.Services.WebAPI.Series;
+
+namespace WatchIt.Website.Pages;
 
 public partial class HomePage
 {
+    #region SERVICES
+
+    [Inject] public NavigationManager NavigationManager { get; set; } = default!;
+    [Inject] public IMediaWebAPIService MediaWebAPIService { get; set; } = default!;
+    [Inject] public IMoviesWebAPIService MoviesWebAPIService { get; set; } = default!;
+    [Inject] public ISeriesWebAPIService SeriesWebAPIService { get; set; } = default!;
     
+    #endregion
+    
+    
+    
+    #region FIELDS
+    
+    private bool _loaded;
+    private string? _error;
+    
+    private IDictionary<MovieResponse, MediaPosterResponse?> _topMovies = new Dictionary<MovieResponse, MediaPosterResponse?>();
+    private IDictionary<SeriesResponse, MediaPosterResponse?> _topSeries = new Dictionary<SeriesResponse, MediaPosterResponse?>();
+    
+    #endregion
+    
+    
+    
+    #region PRIVATE METHODS
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            List<Task> step1Tasks = new List<Task>();
+            List<Task> endTasks = new List<Task>();
+            
+            // STEP 0
+            step1Tasks.AddRange(
+            [
+                MoviesWebAPIService.GetMoviesViewRank(successAction: data => _topMovies = data.ToDictionary(x => x, _ => default(MediaPosterResponse?))),
+                SeriesWebAPIService.GetSeriesViewRank(successAction: data => _topSeries = data.ToDictionary(x => x, _ => default(MediaPosterResponse?))),
+            ]);
+            
+            // STEP 1
+            await Task.WhenAll(step1Tasks);
+            endTasks.AddRange(
+            [
+                Parallel.ForEachAsync(_topMovies, async (x, _) => await MediaWebAPIService.GetPoster(x.Key.Id, y => _topMovies[x.Key] = y)),
+                Parallel.ForEachAsync(_topSeries, async (x, _) => await MediaWebAPIService.GetPoster(x.Key.Id, y => _topSeries[x.Key] = y))
+            ]);
+            
+            // END
+            await Task.WhenAll(endTasks);
+                
+            _loaded = true;
+            StateHasChanged();
+        }
+    }
+
+    #endregion
 }
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Pages/HomePage.razor.css b/WatchIt.Website/WatchIt.Website/Pages/HomePage.razor.css
new file mode 100644
index 0000000..2b6a9bf
--- /dev/null
+++ b/WatchIt.Website/WatchIt.Website/Pages/HomePage.razor.css
@@ -0,0 +1,16 @@
+/* CLASSES */
+
+.poster-aspect-ratio {
+    aspect-ratio: 3/5;
+}
+
+.border-2 {
+    border-width: 2px;
+}
+
+.place-circle {
+    width: 30px;
+    height: 30px;
+    vertical-align: middle;
+    line-height: 25px;
+}
\ No newline at end of file