diff --git a/WatchIt.Website/WatchIt.Website/Components/MediaPage/ActorRolesPanelComponent.razor b/WatchIt.Website/WatchIt.Website/Components/MediaPage/ActorRolesPanelComponent.razor
index c83bd6e..875dc3c 100644
--- a/WatchIt.Website/WatchIt.Website/Components/MediaPage/ActorRolesPanelComponent.razor
+++ b/WatchIt.Website/WatchIt.Website/Components/MediaPage/ActorRolesPanelComponent.razor
@@ -1,5 +1,5 @@
 <div class="panel panel-padding-regular panel-radius-regular panel-background-regular @(Class)">
-    <div class="vstack">
+    <div class="vstack gap-3">
         <span class="panel-text-title">Actors</span>
         <RoleListComponent Id="@(Id)" 
                            TRole="WatchIt.Common.Model.Roles.ActorRoleResponse"
diff --git a/WatchIt.Website/WatchIt.Website/Components/MediaPage/RoleComponent.razor b/WatchIt.Website/WatchIt.Website/Components/MediaPage/RoleComponent.razor
index e69de29..b132811 100644
--- a/WatchIt.Website/WatchIt.Website/Components/MediaPage/RoleComponent.razor
+++ b/WatchIt.Website/WatchIt.Website/Components/MediaPage/RoleComponent.razor
@@ -0,0 +1,36 @@
+@using WatchIt.Common.Model.Roles
+@typeparam TRole where TRole : WatchIt.Common.Model.Roles.IRoleResponse
+
+<div class="container-grid">
+    <div class="row">
+        <div class="col-auto">
+            <img id="picture" class="rounded-2 shadow object-fit-cover picture-aspect-ratio" src="@(_picture is not null ? _picture.ToString() : "assets/person_picture.png")" alt="picture" height="100"/>
+        </div>
+        <div class="col">
+            <div class="d-flex align-items-start flex-column h-100">
+                <div class="mb-auto">
+                    <span id="nameText">
+                        @if (_person is null)
+                        {
+                            <span>Loading...</span>
+                        }
+                        else
+                        {
+                            <strong>@(_person.Name)</strong>@(Role is ActorRoleResponse actor ? $" as {actor.Name}" : string.Empty)
+                        }
+                    </span>
+                </div><!--
+                <div class="d-inline-flex gap-2">
+                    <span id="ratingStar">★</span>
+                    <div class="d-inline-flex flex-column justify-content-center">
+                        <span id="ratingValue">@(Rating.Count > 0 ? Rating.Average : "--")/10</span>
+                        @if (Rating.Count > 0)
+                        {
+                            <span id="ratingCount">@(Rating.Count)</span>
+                        }
+                    </div>
+                </div>-->
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Components/MediaPage/RoleComponent.razor.cs b/WatchIt.Website/WatchIt.Website/Components/MediaPage/RoleComponent.razor.cs
index 993df6f..6e060fa 100644
--- a/WatchIt.Website/WatchIt.Website/Components/MediaPage/RoleComponent.razor.cs
+++ b/WatchIt.Website/WatchIt.Website/Components/MediaPage/RoleComponent.razor.cs
@@ -1,14 +1,65 @@
 using Microsoft.AspNetCore.Components;
+using WatchIt.Common.Model;
+using WatchIt.Common.Model.Persons;
+using WatchIt.Common.Model.Roles;
+using WatchIt.Website.Services.WebAPI.Persons;
 
 namespace WatchIt.Website.Components.MediaPage;
 
-public partial class RoleComponent : ComponentBase
+public partial class RoleComponent<TRole> : ComponentBase where TRole : IRoleResponse
 {
-    #region PARAMETERS
-    
-    [Parameter] public string? AdditionalName { get; set; }
+    #region SERVICES
+
+    [Inject] private IPersonsWebAPIService PersonsWebAPIService { get; set; } = default!;
     
     #endregion
     
     
+    
+    #region PARAMETERS
+    
+    [Parameter] public required TRole Role { get; set; }
+    
+    #endregion
+
+
+
+    #region FIELDS
+
+    private PersonResponse? _person;
+    private Picture? _picture; 
+
+    #endregion
+
+
+
+    #region PRIVATE METHODS
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            List<Task> endTasks = new List<Task>();
+            
+            // STEP 0
+            endTasks.AddRange(
+            [
+                PersonsWebAPIService.GetPersonPhoto(Role.PersonId, data =>
+                {
+                    _picture = data;
+                    StateHasChanged();
+                }),
+                PersonsWebAPIService.GetPerson(Role.PersonId, data =>
+                {
+                    _person = data;
+                    StateHasChanged();
+                })
+            ]);
+            
+            // END
+            await Task.WhenAll(endTasks);
+        }
+    }
+
+    #endregion
 }
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Components/MediaPage/RoleListComponent.razor b/WatchIt.Website/WatchIt.Website/Components/MediaPage/RoleListComponent.razor
index 604aee1..ad41b4c 100644
--- a/WatchIt.Website/WatchIt.Website/Components/MediaPage/RoleListComponent.razor
+++ b/WatchIt.Website/WatchIt.Website/Components/MediaPage/RoleListComponent.razor
@@ -10,15 +10,21 @@
             {
                 <hr/>
             }
-            <RoleComponent AdditionalName="@(AdditionalTextSource is not null ? AdditionalTextSource(_roles[i]) : null)"/>
+            <a class="text-reset text-decoration-none" href="/person/@(_roles[i].PersonId)">
+                <RoleComponent TRole="TRole"
+                               Role="@(_roles[i])"/>
+            </a>
+        }
+        @if (!_allItemsLoaded)
+        {
+            <div class="d-flex justify-content-center">
+                <button class="btn btn-secondary" @onclick="@(async () => await GetRoles())">
+                    <LoadingButtonContentComponent Content="Load more"
+                                                   LoadingContent="Loading..."
+                                                   IsLoading="@(_rolesFetching)"/>
+                </button>
+            </div>
         }
-        <div class="d-flex justify-content-center">
-            <button class="btn btn-secondary" @onclick="@(async () => await GetRoles())">
-                <LoadingButtonContentComponent Content="Load more"
-                                               LoadingContent="Loading..."
-                                               IsLoading="@(_rolesFetching)"/>
-            </button>
-        </div>
     </div>
 }
 else
diff --git a/WatchIt.Website/WatchIt.Website/Components/MediaPage/RoleListComponent.razor.cs b/WatchIt.Website/WatchIt.Website/Components/MediaPage/RoleListComponent.razor.cs
index 92d0736..a9809de 100644
--- a/WatchIt.Website/WatchIt.Website/Components/MediaPage/RoleListComponent.razor.cs
+++ b/WatchIt.Website/WatchIt.Website/Components/MediaPage/RoleListComponent.razor.cs
@@ -72,8 +72,8 @@ public partial class RoleListComponent<TRole, TQuery> : ComponentBase where TRol
                 {
                     Query.After = 0;
                 }
-                Query.After += _pageSize;
             }
+            Query.After += data.Count();
             _rolesFetching = false;
         });
     }