diff --git a/WatchIt.Website/WatchIt.Website/Components/LoadingButtonContentComponent.razor b/WatchIt.Website/WatchIt.Website/Components/LoadingButtonContentComponent.razor
new file mode 100644
index 0000000..dcf57c2
--- /dev/null
+++ b/WatchIt.Website/WatchIt.Website/Components/LoadingButtonContentComponent.razor
@@ -0,0 +1,16 @@
+@if (IsLoading)
+{
+    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+    <span>@LoadingContent</span>
+}
+else
+{
+    if (ChildContent is null)
+    {
+        <span>@Content</span>
+    }
+    else
+    {
+        @(ChildContent)
+    }
+}
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Components/LoadingButtonContentComponent.razor.cs b/WatchIt.Website/WatchIt.Website/Components/LoadingButtonContentComponent.razor.cs
new file mode 100644
index 0000000..bb99d79
--- /dev/null
+++ b/WatchIt.Website/WatchIt.Website/Components/LoadingButtonContentComponent.razor.cs
@@ -0,0 +1,15 @@
+using Microsoft.AspNetCore.Components;
+
+namespace WatchIt.Website.Components;
+
+public partial class LoadingButtonContentComponent : ComponentBase
+{
+    #region PARAMETERS
+    
+    [Parameter] public bool IsLoading { get; set; }
+    [Parameter] public string? LoadingContent { get; set; }
+    [Parameter] public string Content { get; set; }
+    [Parameter] public RenderFragment ChildContent { get; set; }
+    
+    #endregion
+}
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Components/MediaPage/ActorRolesPanelComponent.razor b/WatchIt.Website/WatchIt.Website/Components/MediaPage/ActorRolesPanelComponent.razor
index be9ddba..c83bd6e 100644
--- a/WatchIt.Website/WatchIt.Website/Components/MediaPage/ActorRolesPanelComponent.razor
+++ b/WatchIt.Website/WatchIt.Website/Components/MediaPage/ActorRolesPanelComponent.razor
@@ -1,14 +1,10 @@
-@using WatchIt.Common.Model.Roles
 <div class="panel panel-padding-regular panel-radius-regular panel-background-regular @(Class)">
     <div class="vstack">
         <span class="panel-text-title">Actors</span>
-        @if (_loaded)
-        {
-            <RoleListComponent TRole="ActorRoleResponse"/>
-        }
-        else
-        {
-            <LoadingComponent/>
-        }
+        <RoleListComponent Id="@(Id)" 
+                           TRole="WatchIt.Common.Model.Roles.ActorRoleResponse"
+                           TQuery="WatchIt.Common.Model.Roles.ActorRoleMediaQueryParameters"
+                           GetRolesAction="MediaWebAPIService.GetMediaAllActorRoles"
+                           AdditionalTextSource="@(data => data.Name)"/>
     </div>
 </div>
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Components/MediaPage/ActorRolesPanelComponent.razor.cs b/WatchIt.Website/WatchIt.Website/Components/MediaPage/ActorRolesPanelComponent.razor.cs
index ab64709..4a98650 100644
--- a/WatchIt.Website/WatchIt.Website/Components/MediaPage/ActorRolesPanelComponent.razor.cs
+++ b/WatchIt.Website/WatchIt.Website/Components/MediaPage/ActorRolesPanelComponent.razor.cs
@@ -1,6 +1,4 @@
 using Microsoft.AspNetCore.Components;
-using WatchIt.Common.Model.Roles;
-using WatchIt.Website.Services.Utility.Configuration;
 using WatchIt.Website.Services.WebAPI.Media;
 
 namespace WatchIt.Website.Components.MediaPage;
@@ -21,37 +19,4 @@ public partial class ActorRolesPanelComponent : ComponentBase
     [Parameter] public required long Id { get; set; }
     
     #endregion
-    
-    
-    
-    #region FIELDS
-
-    private bool _loaded;
-
-    private IEnumerable<ActorRoleResponse> _roles = [];
-
-    #endregion
-
-    
-    
-    #region PUBLIC METHODS
-
-    protected override async Task OnAfterRenderAsync(bool firstRender)
-    {
-        List<Task> endTasks = new List<Task>();
-        
-        // STEP 0
-        endTasks.AddRange(
-        [
-            MediaWebAPIService.GetMediaAllActorRoles(Id, successAction: data => _roles = data)
-        ]);
-        
-        // END
-        await Task.WhenAll(endTasks);
-        
-        _loaded = true;
-        StateHasChanged();
-    }
-
-    #endregion
 }
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Components/MediaPage/RoleComponent.razor b/WatchIt.Website/WatchIt.Website/Components/MediaPage/RoleComponent.razor
new file mode 100644
index 0000000..e69de29
diff --git a/WatchIt.Website/WatchIt.Website/Components/MediaPage/RoleComponent.razor.cs b/WatchIt.Website/WatchIt.Website/Components/MediaPage/RoleComponent.razor.cs
new file mode 100644
index 0000000..993df6f
--- /dev/null
+++ b/WatchIt.Website/WatchIt.Website/Components/MediaPage/RoleComponent.razor.cs
@@ -0,0 +1,14 @@
+using Microsoft.AspNetCore.Components;
+
+namespace WatchIt.Website.Components.MediaPage;
+
+public partial class RoleComponent : ComponentBase
+{
+    #region PARAMETERS
+    
+    [Parameter] public string? AdditionalName { get; set; }
+    
+    #endregion
+    
+    
+}
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Components/MediaPage/RoleComponent.razor.css b/WatchIt.Website/WatchIt.Website/Components/MediaPage/RoleComponent.razor.css
new file mode 100644
index 0000000..e69de29
diff --git a/WatchIt.Website/WatchIt.Website/Components/MediaPage/RoleListComponent.razor b/WatchIt.Website/WatchIt.Website/Components/MediaPage/RoleListComponent.razor
index 09cba8c..604aee1 100644
--- a/WatchIt.Website/WatchIt.Website/Components/MediaPage/RoleListComponent.razor
+++ b/WatchIt.Website/WatchIt.Website/Components/MediaPage/RoleListComponent.razor
@@ -1,5 +1,27 @@
-@typeparam TRole where TRole : WatchIt.Common.Model.Roles.IRoleResponse
+@typeparam TRole where TRole : WatchIt.Common.Model.Roles.IRoleResponse, WatchIt.Common.Query.IQueryOrderable<TRole>
+@typeparam TQuery where TQuery : WatchIt.Common.Query.QueryParameters<TRole>
 
-<div class="">
-    
-</div>
\ No newline at end of file
+@if (_loaded)
+{
+    <div class="vstack">
+        @for (int i = 0; i < _roles.Count; i++)
+        {
+            if (i > 0)
+            {
+                <hr/>
+            }
+            <RoleComponent AdditionalName="@(AdditionalTextSource is not null ? AdditionalTextSource(_roles[i]) : null)"/>
+        }
+        <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
+{
+    <LoadingComponent/>
+}
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Components/MediaPage/RoleListComponent.razor.cs b/WatchIt.Website/WatchIt.Website/Components/MediaPage/RoleListComponent.razor.cs
index d0ea30a..92d0736 100644
--- a/WatchIt.Website/WatchIt.Website/Components/MediaPage/RoleListComponent.razor.cs
+++ b/WatchIt.Website/WatchIt.Website/Components/MediaPage/RoleListComponent.razor.cs
@@ -1,13 +1,82 @@
 using Microsoft.AspNetCore.Components;
 using WatchIt.Common.Model.Roles;
+using WatchIt.Common.Query;
 
 namespace WatchIt.Website.Components.MediaPage;
 
-public partial class RoleListComponent<TRole> : ComponentBase where TRole : IRoleResponse
+public partial class RoleListComponent<TRole, TQuery> : ComponentBase where TRole : IRoleResponse, IQueryOrderable<TRole> where TQuery : QueryParameters<TRole>
 {
     #region PROPERTIES
     
-    [Parameter] public required IEnumerable<TRole> Role { get; set; }
+    [Parameter] public required long Id { get; set; }
+    [Parameter] public required Func<long, TQuery, Action<IEnumerable<TRole>>, Task> GetRolesAction { get; set; }
+    [Parameter] public TQuery Query { get; set; } = Activator.CreateInstance<TQuery>();
+    [Parameter] public Func<TRole, string>? AdditionalTextSource { get; set; } 
+
+    #endregion
     
+    
+    
+    #region FIELDS
+    
+    private readonly int _pageSize = 20;
+
+    private bool _loaded;
+    private bool _allItemsLoaded;
+    
+    private List<TRole> _roles = new List<TRole>();
+    private bool _rolesFetching;
+
+    #endregion
+    
+    
+    
+    #region PRIVATE METHODS
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            List<Task> endTasks = new List<Task>();
+            
+            // INIT
+            Query.First = _pageSize;
+            
+            // STEP 0
+            endTasks.AddRange(
+            [
+                GetRoles(true)
+            ]);
+            
+            // END
+            await Task.WhenAll(endTasks);
+            
+            _loaded = true;
+            StateHasChanged();
+        }
+    }
+
+    private async Task GetRoles(bool firstFetch = false)
+    {
+        _rolesFetching = true;
+        await GetRolesAction(Id, Query, data =>
+        {
+            _roles.AddRange(data);
+            if (data.Count() < _pageSize)
+            {
+                _allItemsLoaded = true;
+            }
+            else
+            {
+                if (firstFetch)
+                {
+                    Query.After = 0;
+                }
+                Query.After += _pageSize;
+            }
+            _rolesFetching = false;
+        });
+    }
+
     #endregion
 }
\ No newline at end of file