diff --git a/WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/RoleListComponent.razor.cs b/WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/RoleListComponent.razor.cs
index a44624f..8e5f918 100644
--- a/WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/RoleListComponent.razor.cs
+++ b/WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/RoleListComponent.razor.cs
@@ -84,9 +84,6 @@ public partial class RoleListComponent<TRole, TQuery, TRoleParent> : ComponentBa
             
             // END
             await Task.WhenAll(endTasks);
-            
-            _loaded = true;
-            StateHasChanged();
         }
     }
 
@@ -95,12 +92,9 @@ public partial class RoleListComponent<TRole, TQuery, TRoleParent> : ComponentBa
         _rolesFetching = true;
         await GetRolesAction(Id, Query, async data =>
         {
-            List<TRole> newRolesArray = data.ToList();
-            Dictionary<TRole, TRoleParent> newRoles = new Dictionary<TRole, TRoleParent>();
-            await Parallel.ForEachAsync(data, new ParallelOptions { MaxDegreeOfParallelism = 4 }, async (item, _) => await GetRoleParentMethod(ParentItemIdSource(item), parent => newRoles[item] = parent));
-            foreach (KeyValuePair<TRole, TRoleParent> kvp in newRoles.OrderBy(x => newRolesArray.IndexOf(x.Key)))
+            foreach (TRole item in data)
             {
-                _roles[kvp.Key] = kvp.Value;
+                await GetRoleParentMethod(ParentItemIdSource(item), parent => _roles[item] = parent);
             }
             if (data.Count() < _pageSize)
             {
@@ -115,6 +109,8 @@ public partial class RoleListComponent<TRole, TQuery, TRoleParent> : ComponentBa
             }
             Query.After += data.Count();
             _rolesFetching = false;
+            
+            _loaded = true;
             StateHasChanged();
         });
     }
diff --git a/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/ActorRolesPanelComponent.razor b/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/MediaActorRolesPanelComponent.razor
similarity index 94%
rename from WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/ActorRolesPanelComponent.razor
rename to WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/MediaActorRolesPanelComponent.razor
index 9f1a1df..80804ab 100644
--- a/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/ActorRolesPanelComponent.razor
+++ b/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/MediaActorRolesPanelComponent.razor
@@ -3,7 +3,7 @@
 
 
 
-<div class="panel panel-padding-regular panel-radius-regular panel-background-regular @(Class)">
+<div class="panel @(Class)">
     <div class="vstack gap-3">
         <span class="panel-text-title">Actors</span>
         <RoleListComponent TRole="ActorRoleResponse"
diff --git a/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/ActorRolesPanelComponent.razor.cs b/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/MediaActorRolesPanelComponent.razor.cs
similarity index 92%
rename from WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/ActorRolesPanelComponent.razor.cs
rename to WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/MediaActorRolesPanelComponent.razor.cs
index 023869c..54e7287 100644
--- a/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/ActorRolesPanelComponent.razor.cs
+++ b/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/MediaActorRolesPanelComponent.razor.cs
@@ -6,7 +6,7 @@ using WatchIt.Website.Services.WebAPI.Roles;
 
 namespace WatchIt.Website.Components.Pages.MediaPage.Panels;
 
-public partial class ActorRolesPanelComponent : ComponentBase
+public partial class MediaActorRolesPanelComponent : ComponentBase
 {
     #region SERVICES
     
diff --git a/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/CreatorRolesPanelComponent.razor b/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/MediaCreatorRolesPanelComponent.razor
similarity index 100%
rename from WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/CreatorRolesPanelComponent.razor
rename to WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/MediaCreatorRolesPanelComponent.razor
diff --git a/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/CreatorRolesPanelComponent.razor.cs b/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/MediaCreatorRolesPanelComponent.razor.cs
similarity index 96%
rename from WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/CreatorRolesPanelComponent.razor.cs
rename to WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/MediaCreatorRolesPanelComponent.razor.cs
index 8c84b65..c1bb1b4 100644
--- a/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/CreatorRolesPanelComponent.razor.cs
+++ b/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/MediaCreatorRolesPanelComponent.razor.cs
@@ -9,7 +9,7 @@ using WatchIt.Website.Services.WebAPI.Roles;
 
 namespace WatchIt.Website.Components.Pages.MediaPage.Panels;
 
-public partial class CreatorRolesPanelComponent : ComponentBase
+public partial class MediaCreatorRolesPanelComponent : ComponentBase
 {
     #region SERVICES
 
diff --git a/WatchIt.Website/WatchIt.Website/Components/Pages/PersonPage/Panels/PersonActorRolesPanelComponent.razor b/WatchIt.Website/WatchIt.Website/Components/Pages/PersonPage/Panels/PersonActorRolesPanelComponent.razor
new file mode 100644
index 0000000..88a40e8
--- /dev/null
+++ b/WatchIt.Website/WatchIt.Website/Components/Pages/PersonPage/Panels/PersonActorRolesPanelComponent.razor
@@ -0,0 +1,27 @@
+@using WatchIt.Common.Model.Persons
+@using WatchIt.Common.Model.Roles
+
+
+
+<div class="panel @(Class)">
+    <div class="vstack gap-3">
+        <span class="panel-text-title">Actor</span>
+        <RoleListComponent TRole="ActorRoleResponse"
+                           TQuery="ActorRolePersonQueryParameters"
+                           TRoleParent="MediaResponse"
+                           Id="@(Id)"
+                           GetRolesAction="@(PersonsWebAPIService.GetPersonAllActorRoles)"
+                           NameSource="@((_, parent) => parent.Title)"
+                           AdditionalInfoSource="@((item, _) => $" as {item.Name}")"
+                           GetRoleParentMethod="@((id, action) => MediaWebAPIService.GetMedia(id, action))"
+                           ParentItemIdSource="@(item => item.MediaId)"
+                           ParentUrlTemplate="/media/{0}"
+                           PosterPlaceholder="/assets/media_poster.png"
+                           PosterDownloadingTask="@((id, action) => MediaWebAPIService.GetMediaPoster(id, action))"
+                           GetGlobalRatingMethod="@((id, action) => RolesWebAPIService.GetActorRoleRating(id, action))"
+                           GetUserRatingMethod="@((id, userId, actionSuccess, actionNotFound) => RolesWebAPIService.GetActorRoleRatingByUser(id, userId, actionSuccess, actionNotFound))"
+                           PutRatingMethod="@((id, request) => RolesWebAPIService.PutActorRoleRating(id, request))"
+                           DeleteRatingMethod="@(id => RolesWebAPIService.DeleteActorRoleRating(id))"
+                           OnRatingChanged="@(OnRatingChanged)"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Components/Pages/PersonPage/Panels/PersonActorRolesPanelComponent.razor.cs b/WatchIt.Website/WatchIt.Website/Components/Pages/PersonPage/Panels/PersonActorRolesPanelComponent.razor.cs
new file mode 100644
index 0000000..4b87639
--- /dev/null
+++ b/WatchIt.Website/WatchIt.Website/Components/Pages/PersonPage/Panels/PersonActorRolesPanelComponent.razor.cs
@@ -0,0 +1,27 @@
+using Microsoft.AspNetCore.Components;
+using WatchIt.Website.Services.WebAPI.Media;
+using WatchIt.Website.Services.WebAPI.Persons;
+using WatchIt.Website.Services.WebAPI.Roles;
+
+namespace WatchIt.Website.Components.Pages.PersonPage.Panels;
+
+public partial class PersonActorRolesPanelComponent : ComponentBase
+{
+    #region SERVICES
+    
+    [Inject] private IMediaWebAPIService MediaWebAPIService { get; set; } = default!;
+    [Inject] private IPersonsWebAPIService PersonsWebAPIService { get; set; } = default!;
+    [Inject] private IRolesWebAPIService RolesWebAPIService { get; set; } = default!;
+    
+    #endregion
+    
+    
+    
+    #region PARAMETERS
+    
+    [Parameter] public string Class { get; set; } = string.Empty;
+    [Parameter] public required long Id { get; set; }
+    [Parameter] public Action? OnRatingChanged { get; set; }
+    
+    #endregion
+}
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Components/Pages/PersonPage/Panels/PersonCreatorRolesPanelComponent.razor b/WatchIt.Website/WatchIt.Website/Components/Pages/PersonPage/Panels/PersonCreatorRolesPanelComponent.razor
new file mode 100644
index 0000000..609b18a
--- /dev/null
+++ b/WatchIt.Website/WatchIt.Website/Components/Pages/PersonPage/Panels/PersonCreatorRolesPanelComponent.razor
@@ -0,0 +1,43 @@
+@using WatchIt.Common.Model.Persons
+@using WatchIt.Common.Model.Roles
+
+
+
+<div class="panel panel-padding-regular panel-radius-regular panel-background-regular @(Class)">
+    @if (_loaded)
+    {
+        <div class="vstack gap-3">
+            <span class="panel-text-title">Creators</span>
+            <div class="d-flex justify-content-center">
+                <RadioGroup TValue="short" Color="Color.Default" Buttons Size="Size.Small" CheckedValue="@(_query.TypeId!.Value)" CheckedValueChanged="CheckedTypeChanged">
+                    @foreach (RoleTypeResponse roleType in _roleTypes)
+                    {
+                        <Radio Value="@(roleType.Id)">@roleType.Name</Radio>
+                    }
+                </RadioGroup>
+            </div>
+            <RoleListComponent @ref=@(_roleListComponent)
+                               TRole="CreatorRoleResponse"
+                               TQuery="CreatorRolePersonQueryParameters"
+                               TRoleParent="MediaResponse"
+                               Id="@(Id)"
+                               Query="@(_query)"
+                               GetRolesAction="@(PersonsWebAPIService.GetPersonAllCreatorRoles)"
+                               NameSource="@((_, parent) => parent.Title)"
+                               GetRoleParentMethod="@((id, action) => MediaWebAPIService.GetMedia(id, action))"
+                               ParentItemIdSource="@(item => item.MediaId)"
+                               ParentUrlTemplate="/media/{0}"
+                               PosterPlaceholder="/assets/media_poster.png"
+                               PosterDownloadingTask="@((id, action) => MediaWebAPIService.GetMediaPoster(id, action))"
+                               GetGlobalRatingMethod="@((id, action) => RolesWebAPIService.GetCreatorRoleRating(id, action))"
+                               GetUserRatingMethod="@((id, userId, actionSuccess, actionNotFound) => RolesWebAPIService.GetCreatorRoleRatingByUser(id, userId, actionSuccess, actionNotFound))"
+                               PutRatingMethod="@((id, request) => RolesWebAPIService.PutCreatorRoleRating(id, request))"
+                               DeleteRatingMethod="@((id) => RolesWebAPIService.DeleteCreatorRoleRating(id))"
+                               OnRatingChanged="@(OnRatingChanged)"/>
+        </div>
+    }
+    else
+    {
+        <LoadingComponent Color="@(LoadingComponent.LoadingComponentColors.Light)"/>
+    }
+</div>
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Components/Pages/PersonPage/Panels/PersonCreatorRolesPanelComponent.razor.cs b/WatchIt.Website/WatchIt.Website/Components/Pages/PersonPage/Panels/PersonCreatorRolesPanelComponent.razor.cs
new file mode 100644
index 0000000..ac6f353
--- /dev/null
+++ b/WatchIt.Website/WatchIt.Website/Components/Pages/PersonPage/Panels/PersonCreatorRolesPanelComponent.razor.cs
@@ -0,0 +1,76 @@
+using Microsoft.AspNetCore.Components;
+using WatchIt.Common.Model.Media;
+using WatchIt.Common.Model.Roles;
+using WatchIt.Website.Components.Common.Subcomponents;
+using WatchIt.Website.Services.WebAPI.Media;
+using WatchIt.Website.Services.WebAPI.Persons;
+using WatchIt.Website.Services.WebAPI.Roles;
+
+namespace WatchIt.Website.Components.Pages.PersonPage.Panels;
+
+public partial class PersonCreatorRolesPanelComponent : ComponentBase
+{
+    #region SERVICES
+
+    [Inject] private IPersonsWebAPIService PersonsWebAPIService { get; set; } = default!;
+    [Inject] private IMediaWebAPIService MediaWebAPIService { get; set; } = default!;
+    [Inject] private IRolesWebAPIService RolesWebAPIService { get; set; } = default!;
+    
+    #endregion
+    
+    
+    
+    #region PARAMETERS
+    
+    [Parameter] public string Class { get; set; } = string.Empty;
+    [Parameter] public required long Id { get; set; }
+    [Parameter] public Action? OnRatingChanged { get; set; }
+    
+    #endregion
+
+
+
+    #region FIELDS
+
+    private RoleListComponent<CreatorRoleResponse, CreatorRolePersonQueryParameters, MediaResponse> _roleListComponent;
+
+    private bool _loaded;
+
+    private IEnumerable<RoleTypeResponse> _roleTypes;
+    private CreatorRolePersonQueryParameters _query;
+
+    #endregion
+
+
+
+    #region PRIVATE METHODS
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            List<Task> endTasks = new List<Task>();
+            
+            // STEP 0
+            endTasks.AddRange(
+            [
+                RolesWebAPIService.GetAllCreatorRoleTypes(successAction: data => _roleTypes = data)
+            ]);
+            
+            // END
+            await Task.WhenAll(endTasks);
+            _query = new CreatorRolePersonQueryParameters { TypeId = _roleTypes.First().Id };
+            
+            _loaded = true;
+            StateHasChanged();
+        }
+    }
+
+    private async Task CheckedTypeChanged(short value)
+    {
+        _query.TypeId = value;
+        await _roleListComponent.Refresh();
+    }
+
+    #endregion
+}
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Components/Pages/PersonPage/Panels/PersonRatingPanel.razor.cs b/WatchIt.Website/WatchIt.Website/Components/Pages/PersonPage/Panels/PersonRatingPanel.razor.cs
index 2393a2c..4e57c54 100644
--- a/WatchIt.Website/WatchIt.Website/Components/Pages/PersonPage/Panels/PersonRatingPanel.razor.cs
+++ b/WatchIt.Website/WatchIt.Website/Components/Pages/PersonPage/Panels/PersonRatingPanel.razor.cs
@@ -37,7 +37,11 @@ public partial class PersonRatingPanel : ComponentBase
 
     #region PUBLIC METHODS
 
-    public async Task UpdateRating() => await Task.WhenAll(UpdateGlobalRating(), UpdateUserRating());
+    public async Task UpdateRating()
+    {
+        await Task.WhenAll(UpdateGlobalRating(), UpdateUserRating());
+        StateHasChanged();
+    }
 
     #endregion
     
diff --git a/WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor b/WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor
index a295da4..2dde4a8 100644
--- a/WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor
+++ b/WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor
@@ -177,12 +177,12 @@ else
                         <Content>
                             <TabPanel Name="actors">
                                 <div class="mt-default">
-                                    <ActorRolesPanelComponent Id="@(Id)"/>
+                                    <MediaActorRolesPanelComponent Id="@(Id)"/>
                                 </div>
                             </TabPanel>
                             <TabPanel Name="creators">
                                 <div class="mt-default">
-                                    <CreatorRolesPanelComponent Id="@(Id)"/>
+                                    <MediaCreatorRolesPanelComponent Id="@(Id)"/>
                                 </div>
                             </TabPanel>
                         </Content>
diff --git a/WatchIt.Website/WatchIt.Website/Pages/PersonPage.razor b/WatchIt.Website/WatchIt.Website/Pages/PersonPage.razor
index 7e6d327..d88eb16 100644
--- a/WatchIt.Website/WatchIt.Website/Pages/PersonPage.razor
+++ b/WatchIt.Website/WatchIt.Website/Pages/PersonPage.razor
@@ -52,12 +52,14 @@
                         <Content>
                             <TabPanel Name="actor">
                                 <div class="mt-default">
-                                    <!--ActorRolesPanelComponent Id="@(Id)"/-->
+                                    <PersonActorRolesPanelComponent Id="@(Id)"
+                                                                    OnRatingChanged="@(async () => await _ratingPanel.UpdateRating())"/>
                                 </div>
                             </TabPanel>
                             <TabPanel Name="creator">
                                 <div class="mt-default">
-                                    <!--CreatorRolesPanelComponent Id="@(Id)"/-->
+                                    <PersonCreatorRolesPanelComponent Id="@(Id)"
+                                                                      OnRatingChanged="@(async () => await _ratingPanel.UpdateRating())"/>
                                 </div>
                             </TabPanel>
                         </Content>