diff --git a/WatchIt.Website/WatchIt.Website/App.razor b/WatchIt.Website/WatchIt.Website/App.razor
index de1a4c4..9d4f9db 100644
--- a/WatchIt.Website/WatchIt.Website/App.razor
+++ b/WatchIt.Website/WatchIt.Website/App.razor
@@ -9,11 +9,11 @@
     <link rel="icon" type="image/png" href="favicon.png"/>
     
     <!-- CSS -->
-    <link rel="stylesheet" href="css/general.css?version=0.3.0.2"/>
-    <link rel="stylesheet" href="css/panel.css?version=0.3.0.2"/>
+    <link rel="stylesheet" href="css/general.css?version=0.3.0.4"/>
+    <link rel="stylesheet" href="css/panel.css?version=0.3.0.3"/>
     <link rel="stylesheet" href="css/main_button.css?version=0.3.0.0"/>
-    <link rel="stylesheet" href="css/gaps.css?version=0.3.0.0"/>
-    <link rel="stylesheet" href="WatchIt.Website.styles.css?version=0.2.0.12"/>
+    <link rel="stylesheet" href="css/gaps.css?version=0.3.0.1"/>
+    <link rel="stylesheet" href="WatchIt.Website.styles.css?version=0.2.0.13"/>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     
     <!-- BOOTSTRAP -->
diff --git a/WatchIt.Website/WatchIt.Website/Components/Common/Panels/ErrorPanelComponent.razor b/WatchIt.Website/WatchIt.Website/Components/Common/Panels/ErrorPanelComponent.razor
new file mode 100644
index 0000000..b611147
--- /dev/null
+++ b/WatchIt.Website/WatchIt.Website/Components/Common/Panels/ErrorPanelComponent.razor
@@ -0,0 +1,16 @@
+<div class="panel">
+    <div class="vstack">
+        <div class="d-flex justify-content-center">
+            <div class="text-danger icon-size">⚠&#xFE0E;</div>
+        </div>
+        <div class="d-flex justify-content-center">
+            <h3 class="text-danger">An error occured while loading a page</h3>
+        </div>
+        @if (!string.IsNullOrWhiteSpace(ErrorMessage))
+        {
+            <div class="d-flex justify-content-center">
+                <p>@ErrorMessage</p>
+            </div>
+        }
+    </div>
+</div>
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Components/ErrorComponent.razor.cs b/WatchIt.Website/WatchIt.Website/Components/Common/Panels/ErrorPanelComponent.razor.cs
similarity index 57%
rename from WatchIt.Website/WatchIt.Website/Components/ErrorComponent.razor.cs
rename to WatchIt.Website/WatchIt.Website/Components/Common/Panels/ErrorPanelComponent.razor.cs
index 20cde5f..4a860db 100644
--- a/WatchIt.Website/WatchIt.Website/Components/ErrorComponent.razor.cs
+++ b/WatchIt.Website/WatchIt.Website/Components/Common/Panels/ErrorPanelComponent.razor.cs
@@ -1,8 +1,8 @@
 using Microsoft.AspNetCore.Components;
 
-namespace WatchIt.Website.Components;
+namespace WatchIt.Website.Components.Common.Panels;
 
-public partial class ErrorComponent : ComponentBase
+public partial class ErrorPanelComponent : ComponentBase
 {
     #region PARAMETERS
     
diff --git a/WatchIt.Website/WatchIt.Website/Components/ErrorComponent.razor.css b/WatchIt.Website/WatchIt.Website/Components/Common/Panels/ErrorPanelComponent.razor.css
similarity index 100%
rename from WatchIt.Website/WatchIt.Website/Components/ErrorComponent.razor.css
rename to WatchIt.Website/WatchIt.Website/Components/Common/Panels/ErrorPanelComponent.razor.css
diff --git a/WatchIt.Website/WatchIt.Website/Components/PictureEditorComponent.razor b/WatchIt.Website/WatchIt.Website/Components/Common/Panels/PictureEditorPanelComponent.razor
similarity index 96%
rename from WatchIt.Website/WatchIt.Website/Components/PictureEditorComponent.razor
rename to WatchIt.Website/WatchIt.Website/Components/Common/Panels/PictureEditorPanelComponent.razor
index bcd5be9..6249ece 100644
--- a/WatchIt.Website/WatchIt.Website/Components/PictureEditorComponent.razor
+++ b/WatchIt.Website/WatchIt.Website/Components/Common/Panels/PictureEditorPanelComponent.razor
@@ -1,4 +1,4 @@
-<div class="rounded-3 panel panel-regular p-3 @(Class)">
+<div class="panel @(Class)">
     @if (_loaded)
     {
         <div class="vstack gap-3">
@@ -51,7 +51,7 @@
     else
     {
         <div class="d-flex align-items-center justify-content-center h-100 content-width">
-            <LoadingComponent Color="white"/>
+            <LoadingComponent Color="@(LoadingComponent.LoadingComponentColors.Light)"/>
         </div>
     }
 </div>
diff --git a/WatchIt.Website/WatchIt.Website/Components/PictureEditorComponent.razor.cs b/WatchIt.Website/WatchIt.Website/Components/Common/Panels/PictureEditorPanelComponent.razor.cs
similarity index 94%
rename from WatchIt.Website/WatchIt.Website/Components/PictureEditorComponent.razor.cs
rename to WatchIt.Website/WatchIt.Website/Components/Common/Panels/PictureEditorPanelComponent.razor.cs
index 4f9fa02..3bd56b1 100644
--- a/WatchIt.Website/WatchIt.Website/Components/PictureEditorComponent.razor.cs
+++ b/WatchIt.Website/WatchIt.Website/Components/Common/Panels/PictureEditorPanelComponent.razor.cs
@@ -2,15 +2,15 @@ using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Forms;
 using WatchIt.Common.Model;
 
-namespace WatchIt.Website.Components;
+namespace WatchIt.Website.Components.Common.Panels;
 
-public partial class PictureEditorComponent : ComponentBase 
+public partial class PictureEditorPanelComponent : ComponentBase 
 {
     #region PARAMETERS
     
     [Parameter] public long? Id { get; set; }
     [Parameter] public int ContentWidth { get; set; } = 300;
-    [Parameter] public string PicturePlaceholder { get; set; } = "assets/poster.png";
+    [Parameter] public required string PicturePlaceholder { get; set; }
     [Parameter] public string Class { get; set; } = string.Empty;
     [Parameter] public required Func<long, Action<Picture>, Task> PictureGetTask { get; set; }
     [Parameter] public required Func<long, Picture, Action<Picture>, Task> PicturePutTask { get; set; }
diff --git a/WatchIt.Website/WatchIt.Website/Components/DatabasePage/DatabasePageComponent.razor.css b/WatchIt.Website/WatchIt.Website/Components/Common/Panels/PictureEditorPanelComponent.razor.css
similarity index 100%
rename from WatchIt.Website/WatchIt.Website/Components/DatabasePage/DatabasePageComponent.razor.css
rename to WatchIt.Website/WatchIt.Website/Components/Common/Panels/PictureEditorPanelComponent.razor.css
diff --git a/WatchIt.Website/WatchIt.Website/Components/ListItemComponent.razor b/WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/ListItemComponent.razor
similarity index 92%
rename from WatchIt.Website/WatchIt.Website/Components/ListItemComponent.razor
rename to WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/ListItemComponent.razor
index 566d09b..2169aa6 100644
--- a/WatchIt.Website/WatchIt.Website/Components/ListItemComponent.razor
+++ b/WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/ListItemComponent.razor
@@ -1,7 +1,7 @@
 <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/poster.png")" alt="picture" height="@(PictureHeight)"/>
+            <img id="picture" class="rounded-2 shadow object-fit-cover picture-aspect-ratio" src="@(_picture is not null ? _picture.ToString() : "assets/media_poster.png")" alt="picture" height="@(PictureHeight)"/>
         </div>
         <div class="col">
             <div class="d-flex align-items-start flex-column h-100">
diff --git a/WatchIt.Website/WatchIt.Website/Components/ListItemComponent.razor.cs b/WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/ListItemComponent.razor.cs
similarity index 95%
rename from WatchIt.Website/WatchIt.Website/Components/ListItemComponent.razor.cs
rename to WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/ListItemComponent.razor.cs
index bd6713f..f96cf4b 100644
--- a/WatchIt.Website/WatchIt.Website/Components/ListItemComponent.razor.cs
+++ b/WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/ListItemComponent.razor.cs
@@ -2,7 +2,7 @@ using Microsoft.AspNetCore.Components;
 using WatchIt.Common.Model;
 using WatchIt.Common.Model.Rating;
 
-namespace WatchIt.Website.Components;
+namespace WatchIt.Website.Components.Common.Subcomponents;
 
 public partial class ListItemComponent : ComponentBase
 {
diff --git a/WatchIt.Website/WatchIt.Website/Components/ListItemComponent.razor.css b/WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/ListItemComponent.razor.css
similarity index 100%
rename from WatchIt.Website/WatchIt.Website/Components/ListItemComponent.razor.css
rename to WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/ListItemComponent.razor.css
diff --git a/WatchIt.Website/WatchIt.Website/Components/LoadingButtonContentComponent.razor b/WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/LoadingButtonContentComponent.razor
similarity index 100%
rename from WatchIt.Website/WatchIt.Website/Components/LoadingButtonContentComponent.razor
rename to WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/LoadingButtonContentComponent.razor
diff --git a/WatchIt.Website/WatchIt.Website/Components/LoadingButtonContentComponent.razor.cs b/WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/LoadingButtonContentComponent.razor.cs
similarity index 86%
rename from WatchIt.Website/WatchIt.Website/Components/LoadingButtonContentComponent.razor.cs
rename to WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/LoadingButtonContentComponent.razor.cs
index bb99d79..716e615 100644
--- a/WatchIt.Website/WatchIt.Website/Components/LoadingButtonContentComponent.razor.cs
+++ b/WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/LoadingButtonContentComponent.razor.cs
@@ -1,6 +1,6 @@
 using Microsoft.AspNetCore.Components;
 
-namespace WatchIt.Website.Components;
+namespace WatchIt.Website.Components.Common.Subcomponents;
 
 public partial class LoadingButtonContentComponent : ComponentBase
 {
diff --git a/WatchIt.Website/WatchIt.Website/Components/LoadingComponent.razor b/WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/LoadingComponent.razor
similarity index 52%
rename from WatchIt.Website/WatchIt.Website/Components/LoadingComponent.razor
rename to WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/LoadingComponent.razor
index 4803ba5..4d8f738 100644
--- a/WatchIt.Website/WatchIt.Website/Components/LoadingComponent.razor
+++ b/WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/LoadingComponent.razor
@@ -1,8 +1,8 @@
 <div class="d-flex flex-column">
     <div class="d-flex justify-content-center">
-        <div id="spinner" class="spinner-border text-@(Color)"></div>
+        <div id="spinner" class="spinner-border text-@(GetColor())"></div>
     </div>
     <div class="d-flex justify-content-center">
-        <p id="text" class="text-@(Color)" m-0>Loading...</p>
+        <p id="text" class="text-@(GetColor())" m-0>Loading...</p>
     </div>
 </div>
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/LoadingComponent.razor.cs b/WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/LoadingComponent.razor.cs
new file mode 100644
index 0000000..de811d9
--- /dev/null
+++ b/WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/LoadingComponent.razor.cs
@@ -0,0 +1,47 @@
+using System.ComponentModel;
+using System.Reflection;
+using Microsoft.AspNetCore.Components;
+
+namespace WatchIt.Website.Components.Common.Subcomponents;
+
+public partial class LoadingComponent : ComponentBase
+{
+    #region PARAMETERS
+
+    [Parameter] public LoadingComponentColors Color { get; set; } = LoadingComponentColors.Dark;
+
+    #endregion
+    
+    
+    
+    #region PRIVATE METHODS
+
+    private string GetColor()
+    {
+        DescriptionAttribute? attribute = Color.GetType()
+                                               .GetTypeInfo()
+                                               .GetMember(Color.ToString())
+                                               .FirstOrDefault(member => member.MemberType == MemberTypes.Field)!
+                                               .GetCustomAttributes(typeof(DescriptionAttribute), false)
+                                               .SingleOrDefault()
+                                               as DescriptionAttribute;
+        return attribute!.Description;
+    }
+    
+    #endregion
+    
+    
+    
+    #region ENUMS
+
+    public enum LoadingComponentColors
+    {
+        [Description("dark")]
+        Dark,
+        
+        [Description("light")]
+        Light,
+    }
+    
+    #endregion
+}
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Components/LoadingComponent.razor.css b/WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/LoadingComponent.razor.css
similarity index 100%
rename from WatchIt.Website/WatchIt.Website/Components/LoadingComponent.razor.css
rename to WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/LoadingComponent.razor.css
diff --git a/WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/PictureComponent.razor b/WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/PictureComponent.razor
new file mode 100644
index 0000000..9ee69f7
--- /dev/null
+++ b/WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/PictureComponent.razor
@@ -0,0 +1,7 @@
+<img id="imgObject" class="rounded-2 shadow object-fit-cover @(Class)" src="@(Picture is not null ? Picture.ToString() : Placeholder)" alt="@(AlternativeText)"/>
+
+<style>
+    #imgObject {
+        aspect-ratio: @(AspectRatio.ToString());
+    }
+</style>
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/PictureComponent.razor.cs b/WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/PictureComponent.razor.cs
new file mode 100644
index 0000000..0884b5b
--- /dev/null
+++ b/WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/PictureComponent.razor.cs
@@ -0,0 +1,57 @@
+using Microsoft.AspNetCore.Components;
+using WatchIt.Common.Model;
+
+namespace WatchIt.Website.Components.Common.Subcomponents;
+
+public partial class PictureComponent : ComponentBase
+{
+    #region PARAMETERS
+    
+    [Parameter] public Picture? Picture { get; set; }
+    [Parameter] public required string Placeholder { get; set; }
+    [Parameter] public PictureComponentAspectRatio AspectRatio { get; set; } = PictureComponentAspectRatio.Default;
+    [Parameter] public string AlternativeText { get; set; } = "picture";
+    [Parameter] public string Class { get; set; } = string.Empty;
+
+    #endregion
+
+
+
+    #region STRUCTS
+
+    public struct PictureComponentAspectRatio
+    {
+        #region Properties
+        
+        public int Vertical { get; set; }
+        public int Horizontal { get; set; }
+        
+        #endregion
+        
+        
+        
+        #region Constructors
+
+        public PictureComponentAspectRatio() : this(3, 5) {}
+        
+        public PictureComponentAspectRatio(int horizontal, int vertical)
+        {
+            Horizontal = horizontal;
+            Vertical = vertical;
+        }
+        
+        public static PictureComponentAspectRatio Default = new PictureComponentAspectRatio();
+        
+        #endregion
+        
+        
+        
+        #region Public methods
+
+        public override string ToString() => $"{Horizontal}/{Vertical}";
+
+        #endregion
+    }
+    
+    #endregion
+}
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Components/ErrorComponent.razor b/WatchIt.Website/WatchIt.Website/Components/ErrorComponent.razor
deleted file mode 100644
index bc34f73..0000000
--- a/WatchIt.Website/WatchIt.Website/Components/ErrorComponent.razor
+++ /dev/null
@@ -1,28 +0,0 @@
-<div class="rounded-3 panel panel-regular p-4">
-    <div class="container-grid">
-        <div class="row">
-            <div class="col">
-                <div class="d-flex justify-content-center">
-                    <div class="text-danger icon-size">⚠&#xFE0E;</div>
-                </div>
-            </div>
-        </div>
-        <div class="row">
-            <div class="col">
-                <div class="d-flex justify-content-center">
-                    <h3 class="text-danger">An error occured while loading a page</h3>
-                </div>
-            </div>
-        </div>
-        @if (!string.IsNullOrWhiteSpace(ErrorMessage))
-        {
-        <div class="row">
-            <div class="col">
-                <div class="d-flex justify-content-center">
-                    <p>@ErrorMessage</p>
-                </div>
-            </div>
-        </div>
-        }
-    </div>
-</div>
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Components/LoadingComponent.razor.cs b/WatchIt.Website/WatchIt.Website/Components/LoadingComponent.razor.cs
deleted file mode 100644
index 2ab6e66..0000000
--- a/WatchIt.Website/WatchIt.Website/Components/LoadingComponent.razor.cs
+++ /dev/null
@@ -1,12 +0,0 @@
-using Microsoft.AspNetCore.Components;
-
-namespace WatchIt.Website.Components;
-
-public partial class LoadingComponent : ComponentBase
-{
-    #region PARAMETERS
-
-    [Parameter] public string Color { get; set; } = "dark";
-
-    #endregion
-}
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Components/MediaEditPage/MediaRolesEditActorComponent.razor.css b/WatchIt.Website/WatchIt.Website/Components/MediaEditPage/MediaRolesEditActorComponent.razor.css
deleted file mode 100644
index e69de29..0000000
diff --git a/WatchIt.Website/WatchIt.Website/Components/MediaEditPage/MediaRolesEditCreatorComponent.razor.css b/WatchIt.Website/WatchIt.Website/Components/MediaEditPage/MediaRolesEditCreatorComponent.razor.css
deleted file mode 100644
index e69de29..0000000
diff --git a/WatchIt.Website/WatchIt.Website/Components/MediaPage/ActorRolesPanelComponent.razor.css b/WatchIt.Website/WatchIt.Website/Components/MediaPage/ActorRolesPanelComponent.razor.css
deleted file mode 100644
index e69de29..0000000
diff --git a/WatchIt.Website/WatchIt.Website/Components/MediaPage/CreatorRolesPanelComponent.razor.css b/WatchIt.Website/WatchIt.Website/Components/MediaPage/CreatorRolesPanelComponent.razor.css
deleted file mode 100644
index e69de29..0000000
diff --git a/WatchIt.Website/WatchIt.Website/Components/MediaPage/RoleComponent.razor.css b/WatchIt.Website/WatchIt.Website/Components/MediaPage/RoleComponent.razor.css
deleted file mode 100644
index e69de29..0000000
diff --git a/WatchIt.Website/WatchIt.Website/Components/DatabasePage/DatabasePageComponent.razor b/WatchIt.Website/WatchIt.Website/Components/Pages/DatabasePage/DatabasePageComponent.razor
similarity index 98%
rename from WatchIt.Website/WatchIt.Website/Components/DatabasePage/DatabasePageComponent.razor
rename to WatchIt.Website/WatchIt.Website/Components/Pages/DatabasePage/DatabasePageComponent.razor
index 10b6ed6..576aa68 100644
--- a/WatchIt.Website/WatchIt.Website/Components/DatabasePage/DatabasePageComponent.razor
+++ b/WatchIt.Website/WatchIt.Website/Components/Pages/DatabasePage/DatabasePageComponent.razor
@@ -77,7 +77,7 @@
             }
             else
             {
-                <ErrorComponent ErrorMessage="@_error"/>
+                <ErrorPanelComponent ErrorMessage="@_error"/>
             }
         }
         else
diff --git a/WatchIt.Website/WatchIt.Website/Components/DatabasePage/DatabasePageComponent.razor.cs b/WatchIt.Website/WatchIt.Website/Components/Pages/DatabasePage/DatabasePageComponent.razor.cs
similarity index 98%
rename from WatchIt.Website/WatchIt.Website/Components/DatabasePage/DatabasePageComponent.razor.cs
rename to WatchIt.Website/WatchIt.Website/Components/Pages/DatabasePage/DatabasePageComponent.razor.cs
index 84ff2b8..2bb0928 100644
--- a/WatchIt.Website/WatchIt.Website/Components/DatabasePage/DatabasePageComponent.razor.cs
+++ b/WatchIt.Website/WatchIt.Website/Components/Pages/DatabasePage/DatabasePageComponent.razor.cs
@@ -4,7 +4,7 @@ using WatchIt.Common.Model.Movies;
 using WatchIt.Common.Model.Rating;
 using WatchIt.Common.Query;
 
-namespace WatchIt.Website.Components.DatabasePage;
+namespace WatchIt.Website.Components.Pages.DatabasePage;
 
 public partial class DatabasePageComponent<TItem, TQuery> : ComponentBase where TItem : IQueryOrderable<TItem> where TQuery : QueryParameters<TItem>
 {
diff --git a/WatchIt.Website/WatchIt.Website/Components/DatabasePage/FilterFormComponent.cs b/WatchIt.Website/WatchIt.Website/Components/Pages/DatabasePage/Subcomponents/FilterFormComponent.cs
similarity index 86%
rename from WatchIt.Website/WatchIt.Website/Components/DatabasePage/FilterFormComponent.cs
rename to WatchIt.Website/WatchIt.Website/Components/Pages/DatabasePage/Subcomponents/FilterFormComponent.cs
index 26fa16d..1df000c 100644
--- a/WatchIt.Website/WatchIt.Website/Components/DatabasePage/FilterFormComponent.cs
+++ b/WatchIt.Website/WatchIt.Website/Components/Pages/DatabasePage/Subcomponents/FilterFormComponent.cs
@@ -1,7 +1,7 @@
 using Microsoft.AspNetCore.Components;
 using WatchIt.Common.Query;
 
-namespace WatchIt.Website.Components.DatabasePage;
+namespace WatchIt.Website.Components.Pages.DatabasePage.Subcomponents;
 
 public abstract class FilterFormComponent<TItem, TQuery> : ComponentBase where TItem : IQueryOrderable<TItem> where TQuery : QueryParameters<TItem>
 {
diff --git a/WatchIt.Website/WatchIt.Website/Components/DatabasePage/MoviesFilterFormComponent.razor b/WatchIt.Website/WatchIt.Website/Components/Pages/DatabasePage/Subcomponents/MoviesFilterFormComponent.razor
similarity index 100%
rename from WatchIt.Website/WatchIt.Website/Components/DatabasePage/MoviesFilterFormComponent.razor
rename to WatchIt.Website/WatchIt.Website/Components/Pages/DatabasePage/Subcomponents/MoviesFilterFormComponent.razor
diff --git a/WatchIt.Website/WatchIt.Website/Components/DatabasePage/SeriesFilterFormComponent.razor b/WatchIt.Website/WatchIt.Website/Components/Pages/DatabasePage/Subcomponents/SeriesFilterFormComponent.razor
similarity index 100%
rename from WatchIt.Website/WatchIt.Website/Components/DatabasePage/SeriesFilterFormComponent.razor
rename to WatchIt.Website/WatchIt.Website/Components/Pages/DatabasePage/Subcomponents/SeriesFilterFormComponent.razor
diff --git a/WatchIt.Website/WatchIt.Website/Components/Pages/HomePage/Panels/ViewRankPanelComponent.razor b/WatchIt.Website/WatchIt.Website/Components/Pages/HomePage/Panels/ViewRankPanelComponent.razor
new file mode 100644
index 0000000..572eb03
--- /dev/null
+++ b/WatchIt.Website/WatchIt.Website/Components/Pages/HomePage/Panels/ViewRankPanelComponent.razor
@@ -0,0 +1,37 @@
+@using WatchIt.Website.Components.Pages.HomePage.Subcomponents
+
+@typeparam TItem
+
+
+
+<div class="panel">
+    <div class="vstack gap-3">
+        <span class="panel-text-title">Top @(Count) @(Name) this week by popularity</span>
+        @if (_loaded)
+        {
+            <div class="container-grid">
+                <div class="row">
+                    @for (int i = 0; i < Count; i++)
+                    {
+                        <div class="col">
+                            @if (_items.Count() > i)
+                            {
+                                <a class="text-reset text-decoration-none" href="@(string.Format(ItemUrlFormatString, IdSource(_items.ElementAt(i))))">
+                                    @{int iCopy = i;}
+                                    <ViewRankItemComponent Place="@(i + 1)"
+                                                           Name="@(NameSource(_items.ElementAt(iCopy)))"
+                                                           PosterPlaceholder="@(PosterPlaceholder)"
+                                                           GetPosterAction="@(action => GetPictureAction(IdSource(_items.ElementAt(iCopy)), action))"/>
+                                </a>
+                            }
+                        </div>
+                    }
+                </div>
+            </div>
+        }
+        else
+        {
+            <LoadingComponent Color="@(LoadingComponent.LoadingComponentColors.Light)"/>
+        }
+    </div>
+</div>
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Components/Pages/HomePage/Panels/ViewRankPanelComponent.razor.cs b/WatchIt.Website/WatchIt.Website/Components/Pages/HomePage/Panels/ViewRankPanelComponent.razor.cs
new file mode 100644
index 0000000..61d983d
--- /dev/null
+++ b/WatchIt.Website/WatchIt.Website/Components/Pages/HomePage/Panels/ViewRankPanelComponent.razor.cs
@@ -0,0 +1,58 @@
+using Blazorise.Components.Autocomplete;
+using Microsoft.AspNetCore.Components;
+using WatchIt.Common.Model;
+using WatchIt.Common.Query;
+
+namespace WatchIt.Website.Components.Pages.HomePage.Panels;
+
+public partial class ViewRankPanelComponent<TItem> : ComponentBase
+{
+    #region PARAMETERS
+
+    [Parameter] public int Count { get; set; } = 5;
+    [Parameter] public required string Name {get; set; }
+    [Parameter] public required Func<int, Action<IEnumerable<TItem>>, Task> GetViewRankAction { get; set; }
+    [Parameter] public required string ItemUrlFormatString { get; set; }
+    [Parameter] public required Func<TItem, long> IdSource { get; set; }
+    [Parameter] public required Func<TItem, string> NameSource { get; set; }
+    [Parameter] public required string PosterPlaceholder {get; set; }
+    [Parameter] public required Func<long, Action<Picture>, Task> GetPictureAction { get; set; }
+
+    #endregion
+    
+    
+    
+    #region FIELDS
+
+    private bool _loaded;
+    
+    private IEnumerable<TItem> _items = default!;
+    
+    #endregion
+    
+    
+    
+    #region PRIVATE METHODS
+    
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            List<Task> endTasks = new List<Task>();
+            
+            // STEP 0
+            endTasks.AddRange(
+            [
+                GetViewRankAction(Count, data => _items = data)
+            ]);
+            
+            // END
+            await Task.WhenAll(endTasks);
+            
+            _loaded = true;
+            StateHasChanged();
+        }
+    }
+    
+    #endregion
+}
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Components/Pages/HomePage/Subcomponents/ViewRankItemComponent.razor b/WatchIt.Website/WatchIt.Website/Components/Pages/HomePage/Subcomponents/ViewRankItemComponent.razor
new file mode 100644
index 0000000..89c1a89
--- /dev/null
+++ b/WatchIt.Website/WatchIt.Website/Components/Pages/HomePage/Subcomponents/ViewRankItemComponent.razor
@@ -0,0 +1,13 @@
+<div class="d-flex flex-column align-items-center gap-2 h-100">
+    <PictureComponent Class="w-100" Picture="@(_poster)" Placeholder="@(PosterPlaceholder)" AlternativeText="poster"/>
+    <div class="container-grid">
+        <div class="row">
+            <div class="col-auto">
+                <div class="text-center border border-2 border-light rounded-circle place-circle fw-bold">@(Place)</div>
+            </div>
+            <div class="col">
+                <div class="text-end ms-auto pt-05">@(Name)</div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Components/Pages/HomePage/Subcomponents/ViewRankItemComponent.razor.cs b/WatchIt.Website/WatchIt.Website/Components/Pages/HomePage/Subcomponents/ViewRankItemComponent.razor.cs
new file mode 100644
index 0000000..16ec507
--- /dev/null
+++ b/WatchIt.Website/WatchIt.Website/Components/Pages/HomePage/Subcomponents/ViewRankItemComponent.razor.cs
@@ -0,0 +1,49 @@
+using Microsoft.AspNetCore.Components;
+using WatchIt.Common.Model;
+
+namespace WatchIt.Website.Components.Pages.HomePage.Subcomponents;
+
+public partial class ViewRankItemComponent : ComponentBase
+{
+    #region PARAMETERS
+    
+    [Parameter] public required int Place { get; set; }
+    [Parameter] public required string Name { get; set; }
+    [Parameter] public required string PosterPlaceholder { get; set; }
+    [Parameter] public required Func<Action<Picture>, Task> GetPosterAction { get; set; }
+    
+    #endregion
+    
+    
+    
+    #region FIELDS
+
+    private Picture? _poster;
+    
+    #endregion
+    
+    
+    
+    #region PRIVATE METHODS
+    
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            List<Task> endTasks = new List<Task>();
+            
+            // STEP 0
+            endTasks.AddRange(
+            [
+                GetPosterAction(data => _poster = data),
+            ]);
+            
+            // END
+            await Task.WhenAll(endTasks);
+            
+            StateHasChanged();
+        }
+    }
+    
+    #endregion
+}
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Components/Pages/HomePage/Subcomponents/ViewRankItemComponent.razor.css b/WatchIt.Website/WatchIt.Website/Components/Pages/HomePage/Subcomponents/ViewRankItemComponent.razor.css
new file mode 100644
index 0000000..aa8b68f
--- /dev/null
+++ b/WatchIt.Website/WatchIt.Website/Components/Pages/HomePage/Subcomponents/ViewRankItemComponent.razor.css
@@ -0,0 +1,12 @@
+/* CLASSES */
+
+.border-2 {
+    border-width: 2px;
+}
+
+.place-circle {
+    width: 30px;
+    height: 30px;
+    vertical-align: middle;
+    line-height: 25px;
+}
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Components/MediaEditPage/MediaRolesEditActorComponent.razor b/WatchIt.Website/WatchIt.Website/Components/Pages/MediaEditPage/Panels/MediaActorRolesEditPanelComponent.razor
similarity index 98%
rename from WatchIt.Website/WatchIt.Website/Components/MediaEditPage/MediaRolesEditActorComponent.razor
rename to WatchIt.Website/WatchIt.Website/Components/Pages/MediaEditPage/Panels/MediaActorRolesEditPanelComponent.razor
index ff50f15..24575e5 100644
--- a/WatchIt.Website/WatchIt.Website/Components/MediaEditPage/MediaRolesEditActorComponent.razor
+++ b/WatchIt.Website/WatchIt.Website/Components/Pages/MediaEditPage/Panels/MediaActorRolesEditPanelComponent.razor
@@ -5,7 +5,7 @@
 
 
 
-<div class="rounded-3 panel panel-regular p-3 @(Class)">
+<div class="panel @(Class)">
     @if (_loaded)
     {
         <div class="vstack gap-3">
@@ -151,6 +151,6 @@
     }
     else
     {
-        <LoadingComponent Color="white"/>
+        <LoadingComponent Color="@(LoadingComponent.LoadingComponentColors.Light)"/>
     }
 </div>
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Components/MediaEditPage/MediaRolesEditActorComponent.razor.cs b/WatchIt.Website/WatchIt.Website/Components/Pages/MediaEditPage/Panels/MediaActorRolesEditPanelComponent.razor.cs
similarity index 96%
rename from WatchIt.Website/WatchIt.Website/Components/MediaEditPage/MediaRolesEditActorComponent.razor.cs
rename to WatchIt.Website/WatchIt.Website/Components/Pages/MediaEditPage/Panels/MediaActorRolesEditPanelComponent.razor.cs
index 8475468..f152025 100644
--- a/WatchIt.Website/WatchIt.Website/Components/MediaEditPage/MediaRolesEditActorComponent.razor.cs
+++ b/WatchIt.Website/WatchIt.Website/Components/Pages/MediaEditPage/Panels/MediaActorRolesEditPanelComponent.razor.cs
@@ -6,9 +6,9 @@ using WatchIt.Website.Services.WebAPI.Media;
 using WatchIt.Website.Services.WebAPI.Persons;
 using WatchIt.Website.Services.WebAPI.Roles;
 
-namespace WatchIt.Website.Components.MediaEditPage;
+namespace WatchIt.Website.Components.Pages.MediaEditPage.Panels;
 
-public partial class MediaRolesEditActorComponent : ComponentBase
+public partial class MediaActorRolesEditPanelComponent : ComponentBase
 {
     #region SERVICES
     
diff --git a/WatchIt.Website/WatchIt.Website/Components/MediaEditPage/MediaRolesEditCreatorComponent.razor b/WatchIt.Website/WatchIt.Website/Components/Pages/MediaEditPage/Panels/MediaCreatorRolesEditPanelComponent.razor
similarity index 98%
rename from WatchIt.Website/WatchIt.Website/Components/MediaEditPage/MediaRolesEditCreatorComponent.razor
rename to WatchIt.Website/WatchIt.Website/Components/Pages/MediaEditPage/Panels/MediaCreatorRolesEditPanelComponent.razor
index 0e240b0..199f2e2 100644
--- a/WatchIt.Website/WatchIt.Website/Components/MediaEditPage/MediaRolesEditCreatorComponent.razor
+++ b/WatchIt.Website/WatchIt.Website/Components/Pages/MediaEditPage/Panels/MediaCreatorRolesEditPanelComponent.razor
@@ -3,7 +3,7 @@
 @using WatchIt.Common.Model.Persons
 
 
-<div class="rounded-3 panel panel-regular p-3 @(Class)">
+<div class="panel @(Class)">
     @if (_loaded)
     {
         <div class="vstack gap-3">
@@ -137,6 +137,6 @@
     }
     else
     {
-        <LoadingComponent Color="white"/>
+        <LoadingComponent Color="@(LoadingComponent.LoadingComponentColors.Light)"/>
     }
 </div>
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Components/MediaEditPage/MediaRolesEditCreatorComponent.razor.cs b/WatchIt.Website/WatchIt.Website/Components/Pages/MediaEditPage/Panels/MediaCreatorRolesEditPanelComponent.razor.cs
similarity index 96%
rename from WatchIt.Website/WatchIt.Website/Components/MediaEditPage/MediaRolesEditCreatorComponent.razor.cs
rename to WatchIt.Website/WatchIt.Website/Components/Pages/MediaEditPage/Panels/MediaCreatorRolesEditPanelComponent.razor.cs
index 1d43395..46c61c7 100644
--- a/WatchIt.Website/WatchIt.Website/Components/MediaEditPage/MediaRolesEditCreatorComponent.razor.cs
+++ b/WatchIt.Website/WatchIt.Website/Components/Pages/MediaEditPage/Panels/MediaCreatorRolesEditPanelComponent.razor.cs
@@ -6,9 +6,9 @@ using WatchIt.Website.Services.WebAPI.Media;
 using WatchIt.Website.Services.WebAPI.Persons;
 using WatchIt.Website.Services.WebAPI.Roles;
 
-namespace WatchIt.Website.Components.MediaEditPage;
+namespace WatchIt.Website.Components.Pages.MediaEditPage.Panels;
 
-public partial class MediaRolesEditCreatorComponent : ComponentBase
+public partial class MediaCreatorRolesEditPanelComponent : ComponentBase
 {
     #region SERVICES
     
diff --git a/WatchIt.Website/WatchIt.Website/Components/MediaPage/ActorRolesPanelComponent.razor b/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/ActorRolesPanelComponent.razor
similarity index 89%
rename from WatchIt.Website/WatchIt.Website/Components/MediaPage/ActorRolesPanelComponent.razor
rename to WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/ActorRolesPanelComponent.razor
index 875dc3c..987e85b 100644
--- a/WatchIt.Website/WatchIt.Website/Components/MediaPage/ActorRolesPanelComponent.razor
+++ b/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/ActorRolesPanelComponent.razor
@@ -1,3 +1,7 @@
+@using WatchIt.Website.Components.Pages.MediaPage.Subcomponents
+
+
+
 <div class="panel panel-padding-regular panel-radius-regular panel-background-regular @(Class)">
     <div class="vstack gap-3">
         <span class="panel-text-title">Actors</span>
diff --git a/WatchIt.Website/WatchIt.Website/Components/MediaPage/ActorRolesPanelComponent.razor.cs b/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/ActorRolesPanelComponent.razor.cs
similarity index 88%
rename from WatchIt.Website/WatchIt.Website/Components/MediaPage/ActorRolesPanelComponent.razor.cs
rename to WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/ActorRolesPanelComponent.razor.cs
index 4a98650..2387e7c 100644
--- a/WatchIt.Website/WatchIt.Website/Components/MediaPage/ActorRolesPanelComponent.razor.cs
+++ b/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/ActorRolesPanelComponent.razor.cs
@@ -1,7 +1,7 @@
 using Microsoft.AspNetCore.Components;
 using WatchIt.Website.Services.WebAPI.Media;
 
-namespace WatchIt.Website.Components.MediaPage;
+namespace WatchIt.Website.Components.Pages.MediaPage.Panels;
 
 public partial class ActorRolesPanelComponent : ComponentBase
 {
diff --git a/WatchIt.Website/WatchIt.Website/Components/MediaPage/CreatorRolesPanelComponent.razor b/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/CreatorRolesPanelComponent.razor
similarity index 88%
rename from WatchIt.Website/WatchIt.Website/Components/MediaPage/CreatorRolesPanelComponent.razor
rename to WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/CreatorRolesPanelComponent.razor
index faade18..ca9d341 100644
--- a/WatchIt.Website/WatchIt.Website/Components/MediaPage/CreatorRolesPanelComponent.razor
+++ b/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/CreatorRolesPanelComponent.razor
@@ -1,4 +1,5 @@
 @using WatchIt.Common.Model.Roles
+@using WatchIt.Website.Components.Pages.MediaPage.Subcomponents
 
 
 
@@ -25,6 +26,6 @@
     }
     else
     {
-        <LoadingComponent Color="white"/>
+        <LoadingComponent Color="@(LoadingComponent.LoadingComponentColors.Light)"/>
     }
 </div>
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Components/MediaPage/CreatorRolesPanelComponent.razor.cs b/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/CreatorRolesPanelComponent.razor.cs
similarity index 93%
rename from WatchIt.Website/WatchIt.Website/Components/MediaPage/CreatorRolesPanelComponent.razor.cs
rename to WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/CreatorRolesPanelComponent.razor.cs
index a9fcc8d..bea6541 100644
--- a/WatchIt.Website/WatchIt.Website/Components/MediaPage/CreatorRolesPanelComponent.razor.cs
+++ b/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/CreatorRolesPanelComponent.razor.cs
@@ -1,9 +1,10 @@
 using Microsoft.AspNetCore.Components;
 using WatchIt.Common.Model.Roles;
+using WatchIt.Website.Components.Pages.MediaPage.Subcomponents;
 using WatchIt.Website.Services.WebAPI.Media;
 using WatchIt.Website.Services.WebAPI.Roles;
 
-namespace WatchIt.Website.Components.MediaPage;
+namespace WatchIt.Website.Components.Pages.MediaPage.Panels;
 
 public partial class CreatorRolesPanelComponent : ComponentBase
 {
diff --git a/WatchIt.Website/WatchIt.Website/Components/MediaPage/RoleComponent.razor b/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Subcomponents/RoleComponent.razor
similarity index 100%
rename from WatchIt.Website/WatchIt.Website/Components/MediaPage/RoleComponent.razor
rename to WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Subcomponents/RoleComponent.razor
diff --git a/WatchIt.Website/WatchIt.Website/Components/MediaPage/RoleComponent.razor.cs b/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Subcomponents/RoleComponent.razor.cs
similarity index 95%
rename from WatchIt.Website/WatchIt.Website/Components/MediaPage/RoleComponent.razor.cs
rename to WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Subcomponents/RoleComponent.razor.cs
index 6e060fa..2f60032 100644
--- a/WatchIt.Website/WatchIt.Website/Components/MediaPage/RoleComponent.razor.cs
+++ b/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Subcomponents/RoleComponent.razor.cs
@@ -4,7 +4,7 @@ using WatchIt.Common.Model.Persons;
 using WatchIt.Common.Model.Roles;
 using WatchIt.Website.Services.WebAPI.Persons;
 
-namespace WatchIt.Website.Components.MediaPage;
+namespace WatchIt.Website.Components.Pages.MediaPage.Subcomponents;
 
 public partial class RoleComponent<TRole> : ComponentBase where TRole : IRoleResponse
 {
diff --git a/WatchIt.Website/WatchIt.Website/Components/MediaPage/RoleListComponent.razor b/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Subcomponents/RoleListComponent.razor
similarity index 100%
rename from WatchIt.Website/WatchIt.Website/Components/MediaPage/RoleListComponent.razor
rename to WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Subcomponents/RoleListComponent.razor
diff --git a/WatchIt.Website/WatchIt.Website/Components/MediaPage/RoleListComponent.razor.cs b/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Subcomponents/RoleListComponent.razor.cs
similarity index 97%
rename from WatchIt.Website/WatchIt.Website/Components/MediaPage/RoleListComponent.razor.cs
rename to WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Subcomponents/RoleListComponent.razor.cs
index fcf3306..a671fb4 100644
--- a/WatchIt.Website/WatchIt.Website/Components/MediaPage/RoleListComponent.razor.cs
+++ b/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Subcomponents/RoleListComponent.razor.cs
@@ -3,7 +3,7 @@ using Microsoft.AspNetCore.Components;
 using WatchIt.Common.Model.Roles;
 using WatchIt.Common.Query;
 
-namespace WatchIt.Website.Components.MediaPage;
+namespace WatchIt.Website.Components.Pages.MediaPage.Subcomponents;
 
 public partial class RoleListComponent<TRole, TQuery> : ComponentBase where TRole : IRoleResponse, IQueryOrderable<TRole> where TQuery : QueryParameters<TRole>
 {
diff --git a/WatchIt.Website/WatchIt.Website/Components/MediaPage/RoleListComponent.razor.css b/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Subcomponents/RoleListComponent.razor.css
similarity index 100%
rename from WatchIt.Website/WatchIt.Website/Components/MediaPage/RoleListComponent.razor.css
rename to WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Subcomponents/RoleListComponent.razor.css
diff --git a/WatchIt.Website/WatchIt.Website/Components/PersonEditPage/PersonRolesEditActorComponent.razor b/WatchIt.Website/WatchIt.Website/Components/Pages/PersonEditPage/Panels/PersonActorRolesEditPanelComponent.razor
similarity index 98%
rename from WatchIt.Website/WatchIt.Website/Components/PersonEditPage/PersonRolesEditActorComponent.razor
rename to WatchIt.Website/WatchIt.Website/Components/Pages/PersonEditPage/Panels/PersonActorRolesEditPanelComponent.razor
index 6b95d1b..524fc31 100644
--- a/WatchIt.Website/WatchIt.Website/Components/PersonEditPage/PersonRolesEditActorComponent.razor
+++ b/WatchIt.Website/WatchIt.Website/Components/Pages/PersonEditPage/Panels/PersonActorRolesEditPanelComponent.razor
@@ -4,7 +4,7 @@
 
 
 
-<div class="rounded-3 panel panel-regular p-3 @(Class)">
+<div class="panel @(Class)">
     @if (_loaded)
     {
         <div class="vstack gap-3">
@@ -156,6 +156,6 @@
     }
     else
     {
-        <LoadingComponent Color="white"/>
+        <LoadingComponent Color="@(LoadingComponent.LoadingComponentColors.Light)"/>
     }
 </div>
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Components/PersonEditPage/PersonRolesEditActorComponent.razor.cs b/WatchIt.Website/WatchIt.Website/Components/Pages/PersonEditPage/Panels/PersonActorRolesEditPanelComponent.razor.cs
similarity index 97%
rename from WatchIt.Website/WatchIt.Website/Components/PersonEditPage/PersonRolesEditActorComponent.razor.cs
rename to WatchIt.Website/WatchIt.Website/Components/Pages/PersonEditPage/Panels/PersonActorRolesEditPanelComponent.razor.cs
index c04d8e1..b462c9e 100644
--- a/WatchIt.Website/WatchIt.Website/Components/PersonEditPage/PersonRolesEditActorComponent.razor.cs
+++ b/WatchIt.Website/WatchIt.Website/Components/Pages/PersonEditPage/Panels/PersonActorRolesEditPanelComponent.razor.cs
@@ -5,9 +5,9 @@ using WatchIt.Website.Services.WebAPI.Media;
 using WatchIt.Website.Services.WebAPI.Persons;
 using WatchIt.Website.Services.WebAPI.Roles;
 
-namespace WatchIt.Website.Components.PersonEditPage;
+namespace WatchIt.Website.Components.Pages.PersonEditPage.Panels;
 
-public partial class PersonRolesEditActorComponent : ComponentBase
+public partial class PersonActorRolesEditPanelComponent : ComponentBase
 {
     #region SERVICES
     
diff --git a/WatchIt.Website/WatchIt.Website/Components/PersonEditPage/PersonRolesEditCreatorComponent.razor b/WatchIt.Website/WatchIt.Website/Components/Pages/PersonEditPage/Panels/PersonCreatorRolesEditPanelComponent.razor
similarity index 98%
rename from WatchIt.Website/WatchIt.Website/Components/PersonEditPage/PersonRolesEditCreatorComponent.razor
rename to WatchIt.Website/WatchIt.Website/Components/Pages/PersonEditPage/Panels/PersonCreatorRolesEditPanelComponent.razor
index e9a3e42..b952aae 100644
--- a/WatchIt.Website/WatchIt.Website/Components/PersonEditPage/PersonRolesEditCreatorComponent.razor
+++ b/WatchIt.Website/WatchIt.Website/Components/Pages/PersonEditPage/Panels/PersonCreatorRolesEditPanelComponent.razor
@@ -3,7 +3,7 @@
 
 
 
-<div class="rounded-3 panel panel-regular p-3 @(Class)">
+<div class="panel @(Class)">
     @if (_loaded)
     {
         <div class="vstack gap-3">
@@ -143,6 +143,6 @@
     }
     else
     {
-        <LoadingComponent Color="white"/>
+        <LoadingComponent Color="@(LoadingComponent.LoadingComponentColors.Light)"/>
     }
 </div>
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Components/PersonEditPage/PersonRolesEditCreatorComponent.razor.cs b/WatchIt.Website/WatchIt.Website/Components/Pages/PersonEditPage/Panels/PersonCreatorRolesEditPanelComponent.razor.cs
similarity index 96%
rename from WatchIt.Website/WatchIt.Website/Components/PersonEditPage/PersonRolesEditCreatorComponent.razor.cs
rename to WatchIt.Website/WatchIt.Website/Components/Pages/PersonEditPage/Panels/PersonCreatorRolesEditPanelComponent.razor.cs
index 3e7701e..ca9b0c6 100644
--- a/WatchIt.Website/WatchIt.Website/Components/PersonEditPage/PersonRolesEditCreatorComponent.razor.cs
+++ b/WatchIt.Website/WatchIt.Website/Components/Pages/PersonEditPage/Panels/PersonCreatorRolesEditPanelComponent.razor.cs
@@ -5,9 +5,9 @@ using WatchIt.Website.Services.WebAPI.Media;
 using WatchIt.Website.Services.WebAPI.Persons;
 using WatchIt.Website.Services.WebAPI.Roles;
 
-namespace WatchIt.Website.Components.PersonEditPage;
+namespace WatchIt.Website.Components.Pages.PersonEditPage.Panels;
 
-public partial class PersonRolesEditCreatorComponent : ComponentBase
+public partial class PersonCreatorRolesEditPanelComponent : ComponentBase
 {
     #region SERVICES
     
diff --git a/WatchIt.Website/WatchIt.Website/Components/PersonEditPage/PersonEditFormComponent.razor b/WatchIt.Website/WatchIt.Website/Components/Pages/PersonEditPage/Panels/PersonEditFormPanelComponent.razor
similarity index 96%
rename from WatchIt.Website/WatchIt.Website/Components/PersonEditPage/PersonEditFormComponent.razor
rename to WatchIt.Website/WatchIt.Website/Components/Pages/PersonEditPage/Panels/PersonEditFormPanelComponent.razor
index 24d0157..949134c 100644
--- a/WatchIt.Website/WatchIt.Website/Components/PersonEditPage/PersonEditFormComponent.razor
+++ b/WatchIt.Website/WatchIt.Website/Components/Pages/PersonEditPage/Panels/PersonEditFormPanelComponent.razor
@@ -1,5 +1,8 @@
 @using WatchIt.Common.Model.Genders
-<div class="rounded-3 panel panel-regular p-3 @(Class)">
+
+
+
+<div class="panel @(Class)">
     @if (_loaded)
     {
         <EditForm Model="_person">
@@ -71,6 +74,6 @@
     }
     else
     {
-        <LoadingComponent Color="white"/>
+        <LoadingComponent Color="@(LoadingComponent.LoadingComponentColors.Light)"/>
     }
 </div>
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Components/PersonEditPage/PersonEditFormComponent.razor.cs b/WatchIt.Website/WatchIt.Website/Components/Pages/PersonEditPage/Panels/PersonEditFormPanelComponent.razor.cs
similarity index 95%
rename from WatchIt.Website/WatchIt.Website/Components/PersonEditPage/PersonEditFormComponent.razor.cs
rename to WatchIt.Website/WatchIt.Website/Components/Pages/PersonEditPage/Panels/PersonEditFormPanelComponent.razor.cs
index f9ffcd5..c76a9ff 100644
--- a/WatchIt.Website/WatchIt.Website/Components/PersonEditPage/PersonEditFormComponent.razor.cs
+++ b/WatchIt.Website/WatchIt.Website/Components/Pages/PersonEditPage/Panels/PersonEditFormPanelComponent.razor.cs
@@ -4,9 +4,9 @@ using WatchIt.Common.Model.Persons;
 using WatchIt.Website.Services.WebAPI.Genders;
 using WatchIt.Website.Services.WebAPI.Persons;
 
-namespace WatchIt.Website.Components.PersonEditPage;
+namespace WatchIt.Website.Components.Pages.PersonEditPage.Panels;
 
-public partial class PersonEditFormComponent : ComponentBase
+public partial class PersonEditFormPanelComponent : ComponentBase
 {
     #region SERVICES
 
diff --git a/WatchIt.Website/WatchIt.Website/Components/SearchPage/SearchResultComponent.razor b/WatchIt.Website/WatchIt.Website/Components/Pages/SearchPage/Panels/SearchResultPanelComponent.razor
similarity index 96%
rename from WatchIt.Website/WatchIt.Website/Components/SearchPage/SearchResultComponent.razor
rename to WatchIt.Website/WatchIt.Website/Components/Pages/SearchPage/Panels/SearchResultPanelComponent.razor
index a448ee8..e899426 100644
--- a/WatchIt.Website/WatchIt.Website/Components/SearchPage/SearchResultComponent.razor
+++ b/WatchIt.Website/WatchIt.Website/Components/Pages/SearchPage/Panels/SearchResultPanelComponent.razor
@@ -5,7 +5,7 @@
 
 
 
-<div class="rounded-3 panel panel-regular p-4">
+<div class="panel">
     <div class="container-grid">
         <div class="row mb-4">
             <div class="col">
@@ -74,7 +74,7 @@
         {
             <div class="row">
                 <div class="col">
-                    <LoadingComponent Color="light"/>
+                    <LoadingComponent Color="@(LoadingComponent.LoadingComponentColors.Light)"/>
                 </div>
             </div>
         }
diff --git a/WatchIt.Website/WatchIt.Website/Components/SearchPage/SearchResultComponent.razor.cs b/WatchIt.Website/WatchIt.Website/Components/Pages/SearchPage/Panels/SearchResultPanelComponent.razor.cs
similarity index 93%
rename from WatchIt.Website/WatchIt.Website/Components/SearchPage/SearchResultComponent.razor.cs
rename to WatchIt.Website/WatchIt.Website/Components/Pages/SearchPage/Panels/SearchResultPanelComponent.razor.cs
index 2e93844..428f4fe 100644
--- a/WatchIt.Website/WatchIt.Website/Components/SearchPage/SearchResultComponent.razor.cs
+++ b/WatchIt.Website/WatchIt.Website/Components/Pages/SearchPage/Panels/SearchResultPanelComponent.razor.cs
@@ -3,9 +3,9 @@ using WatchIt.Common.Model;
 using WatchIt.Common.Model.Rating;
 using WatchIt.Common.Query;
 
-namespace WatchIt.Website.Components.SearchPage;
+namespace WatchIt.Website.Components.Pages.SearchPage.Panels;
 
-public partial class SearchResultComponent<TItem, TQuery> : ComponentBase where TQuery : QueryParameters
+public partial class SearchResultPanelComponent<TItem, TQuery> : ComponentBase where TQuery : QueryParameters
 {
     #region PARAMETERS
 
diff --git a/WatchIt.Website/WatchIt.Website/Components/PersonEditPage/PersonEditFormComponent.razor.css b/WatchIt.Website/WatchIt.Website/Components/PersonEditPage/PersonEditFormComponent.razor.css
deleted file mode 100644
index e69de29..0000000
diff --git a/WatchIt.Website/WatchIt.Website/Components/PersonEditPage/PersonRolesEditActorComponent.razor.css b/WatchIt.Website/WatchIt.Website/Components/PersonEditPage/PersonRolesEditActorComponent.razor.css
deleted file mode 100644
index e69de29..0000000
diff --git a/WatchIt.Website/WatchIt.Website/Components/PersonEditPage/PersonRolesEditCreatorComponent.razor.css b/WatchIt.Website/WatchIt.Website/Components/PersonEditPage/PersonRolesEditCreatorComponent.razor.css
deleted file mode 100644
index e69de29..0000000
diff --git a/WatchIt.Website/WatchIt.Website/Components/PictureEditorComponent.razor.css b/WatchIt.Website/WatchIt.Website/Components/PictureEditorComponent.razor.css
deleted file mode 100644
index e69de29..0000000
diff --git a/WatchIt.Website/WatchIt.Website/Components/SearchPage/SearchResultComponent.razor.css b/WatchIt.Website/WatchIt.Website/Components/SearchPage/SearchResultComponent.razor.css
deleted file mode 100644
index e69de29..0000000
diff --git a/WatchIt.Website/WatchIt.Website/Pages/AdminPage.razor b/WatchIt.Website/WatchIt.Website/Pages/AdminPage.razor
index b3f992d..885be66 100644
--- a/WatchIt.Website/WatchIt.Website/Pages/AdminPage.razor
+++ b/WatchIt.Website/WatchIt.Website/Pages/AdminPage.razor
@@ -28,7 +28,7 @@
         {
             <div class="row">
                 <div class="col">
-                    <ErrorComponent ErrorMessage="You do not have permission to view this site"/>
+                    <ErrorPanelComponent ErrorMessage="You do not have permission to view this site"/>
                 </div>
             </div>
         }
diff --git a/WatchIt.Website/WatchIt.Website/Pages/DatabasePage.razor b/WatchIt.Website/WatchIt.Website/Pages/DatabasePage.razor
index 61a64d9..c553f1e 100644
--- a/WatchIt.Website/WatchIt.Website/Pages/DatabasePage.razor
+++ b/WatchIt.Website/WatchIt.Website/Pages/DatabasePage.razor
@@ -1,6 +1,7 @@
 @using WatchIt.Common.Model.Movies
 @using WatchIt.Common.Model.Series
-@using WatchIt.Website.Components.DatabasePage
+@using WatchIt.Website.Components.Pages.DatabasePage
+@using WatchIt.Website.Components.Pages.DatabasePage.Subcomponents
 
 @page "/database/{type?}"
 
diff --git a/WatchIt.Website/WatchIt.Website/Pages/DatabasePage.razor.cs b/WatchIt.Website/WatchIt.Website/Pages/DatabasePage.razor.cs
index 186a3b7..e9e4e9c 100644
--- a/WatchIt.Website/WatchIt.Website/Pages/DatabasePage.razor.cs
+++ b/WatchIt.Website/WatchIt.Website/Pages/DatabasePage.razor.cs
@@ -1,5 +1,4 @@
 using Microsoft.AspNetCore.Components;
-using WatchIt.Website.Components.DatabasePage;
 using WatchIt.Website.Services.WebAPI.Media;
 using WatchIt.Website.Services.WebAPI.Movies;
 using WatchIt.Website.Services.WebAPI.Series;
diff --git a/WatchIt.Website/WatchIt.Website/Pages/HomePage.razor b/WatchIt.Website/WatchIt.Website/Pages/HomePage.razor
index 1766091..f967910 100644
--- a/WatchIt.Website/WatchIt.Website/Pages/HomePage.razor
+++ b/WatchIt.Website/WatchIt.Website/Pages/HomePage.razor
@@ -1,106 +1,37 @@
-@page "/"
+@using WatchIt.Common.Model.Movies
+@using WatchIt.Common.Model.Persons
+@using WatchIt.Common.Model.Series
+@using WatchIt.Website.Components.Pages.HomePage.Panels
+
+@page "/"
 
 <PageTitle>WatchIt</PageTitle>
 
-<div class="container-grid">
-    @if (_loaded)
-    {
-        if (string.IsNullOrWhiteSpace(_error))
-        {
-            <div class="row">
-                <div class="col">
-                    <div class="rounded-3 panel panel-regular p-4">
-                        <div class="container-grid">
-                            <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-grid">
-                                                        <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-grid">
-                            <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-grid">
-                                                        <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
-        {
-            <div class="row">
-                <div class="col">
-                    <ErrorComponent ErrorMessage="@_error"/>
-                </div>
-            </div>
-        }
-    }
-    else
-    {
-        <div class="row">
-            <div class="col">
-                <div class="m-5">
-                    <LoadingComponent/>
-                </div>
-            </div>
-        </div>
-    }
+
+
+<div class="vstack gap-default">
+    <ViewRankPanelComponent TItem="MovieResponse"
+                            Name="movies"
+                            GetViewRankAction="@((count, action) => MoviesWebAPIService.GetMoviesViewRank(count, successAction: action))"
+                            ItemUrlFormatString="/media/{0}"
+                            IdSource="@(item => item.Id)"
+                            NameSource="@(item => item.ReleaseDate.HasValue ? $"{item.Title} ({item.ReleaseDate.Value.Year})" : item.Title)"
+                            PosterPlaceholder="/assets/media_poster.png"
+                            GetPictureAction="@((id, action) => MediaWebAPIService.GetMediaPoster(id, action))"/>
+    <ViewRankPanelComponent TItem="SeriesResponse"
+                            Name="TV series"
+                            GetViewRankAction="@((count, action) => SeriesWebAPIService.GetSeriesViewRank(count, successAction: action))"
+                            ItemUrlFormatString="/media/{0}"
+                            IdSource="@(item => item.Id)"
+                            NameSource="@(item => item.ReleaseDate.HasValue ? $"{item.Title} ({item.ReleaseDate.Value.Year})" : item.Title)"
+                            PosterPlaceholder="/assets/media_poster.png"
+                            GetPictureAction="@((id, action) => MediaWebAPIService.GetMediaPoster(id, action))"/>
+    <ViewRankPanelComponent TItem="PersonResponse"
+                            Name="people"
+                            GetViewRankAction="@((count, action) => PersonsWebAPIService.GetPersonsViewRank(count, successAction: action))"
+                            ItemUrlFormatString="/person/{0}"
+                            IdSource="@(item => item.Id)"
+                            NameSource="@(item => item.Name)"
+                            PosterPlaceholder="/assets/person_poster.png"
+                            GetPictureAction="@((id, action) => PersonsWebAPIService.GetPersonPhoto(id, action))"/>
 </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 5f528db..abed50c 100644
--- a/WatchIt.Website/WatchIt.Website/Pages/HomePage.razor.cs
+++ b/WatchIt.Website/WatchIt.Website/Pages/HomePage.razor.cs
@@ -5,6 +5,7 @@ using WatchIt.Common.Model.Series;
 using WatchIt.Website.Layout;
 using WatchIt.Website.Services.WebAPI.Media;
 using WatchIt.Website.Services.WebAPI.Movies;
+using WatchIt.Website.Services.WebAPI.Persons;
 using WatchIt.Website.Services.WebAPI.Series;
 
 namespace WatchIt.Website.Pages;
@@ -17,26 +18,15 @@ public partial class HomePage
     [Inject] public IMediaWebAPIService MediaWebAPIService { get; set; } = default!;
     [Inject] public IMoviesWebAPIService MoviesWebAPIService { get; set; } = default!;
     [Inject] public ISeriesWebAPIService SeriesWebAPIService { get; set; } = default!;
+    [Inject] public IPersonsWebAPIService PersonsWebAPIService { get; set; } = default!;
     
     #endregion
     
     
     
     #region PARAMETERS
-    
-    [CascadingParameter] public MainLayout Layout { get; set; }
-    
-    #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?>();
+
+    [CascadingParameter] public MainLayout Layout { get; set; } = default!;
     
     #endregion
     
@@ -44,34 +34,12 @@ public partial class HomePage
     
     #region PRIVATE METHODS
 
-    protected override async Task OnAfterRenderAsync(bool firstRender)
+    protected override void OnAfterRender(bool firstRender)
     {
         if (firstRender)
         {
             Layout.BackgroundPhoto = null;
             
-            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.GetMediaPoster(x.Key.Id, y => _topMovies[x.Key] = y)),
-                Parallel.ForEachAsync(_topSeries, async (x, _) => await MediaWebAPIService.GetMediaPoster(x.Key.Id, y => _topSeries[x.Key] = y))
-            ]);
-            
-            // END
-            await Task.WhenAll(endTasks);
-                
-            _loaded = true;
             StateHasChanged();
         }
     }
diff --git a/WatchIt.Website/WatchIt.Website/Pages/HomePage.razor.css b/WatchIt.Website/WatchIt.Website/Pages/HomePage.razor.css
index 2b6a9bf..e69de29 100644
--- a/WatchIt.Website/WatchIt.Website/Pages/HomePage.razor.css
+++ b/WatchIt.Website/WatchIt.Website/Pages/HomePage.razor.css
@@ -1,16 +0,0 @@
-/* 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
diff --git a/WatchIt.Website/WatchIt.Website/Pages/MediaEditPage.razor b/WatchIt.Website/WatchIt.Website/Pages/MediaEditPage.razor
index 9dd815c..f6b7a91 100644
--- a/WatchIt.Website/WatchIt.Website/Pages/MediaEditPage.razor
+++ b/WatchIt.Website/WatchIt.Website/Pages/MediaEditPage.razor
@@ -2,6 +2,7 @@
 @using WatchIt.Common.Model.Movies
 @using WatchIt.Common.Model.Photos
 @using WatchIt.Common.Model.Series
+@using WatchIt.Website.Components.Pages.MediaEditPage.Panels
 
 @page "/media/{id:long}/edit"
 @page "/media/new/{type?}"
@@ -60,7 +61,7 @@
                             <div class="container-grid">
                                 <div class="row">
                                     <div class="col">
-                                        <img class="rounded-2 shadow object-fit-cover" src="@(_mediaPosterRequest is not null ? _mediaPosterRequest.ToString() : "assets/poster.png")" alt="poster" width="300" height="500"/>
+                                        <img class="rounded-2 shadow object-fit-cover" src="@(_mediaPosterRequest is not null ? _mediaPosterRequest.ToString() : "assets/media_poster.png")" alt="poster" width="300" height="500"/>
                                     </div>
                                 </div>
                                 <div class="row mt-4">
@@ -201,14 +202,14 @@
                 </div>
                 <div class="row mt-3">
                     <div class="col">
-                        <MediaRolesEditActorComponent Id="@(Id)"
-                                                      Persons="@(_persons)"/>
+                        <MediaActorRolesEditPanelComponent Id="@(Id)"
+                                                           Persons="@(_persons)"/>
                     </div>
                 </div>
                 <div class="row mt-3">
                     <div class="col">
-                        <MediaRolesEditCreatorComponent Id="@(Id)"
-                                                        Persons="@(_persons)"/>
+                        <MediaCreatorRolesEditPanelComponent Id="@(Id)"
+                                                             Persons="@(_persons)"/>
                     </div>
                 </div>
                 <div class="row mt-3">
@@ -376,7 +377,7 @@
             {
                 <div class="row">
                     <div class="col">
-                        <ErrorComponent ErrorMessage="You do not have permission to view this site"/>
+                        <ErrorPanelComponent ErrorMessage="You do not have permission to view this site"/>
                     </div>
                 </div>
             }
@@ -385,7 +386,7 @@
         {
             <div class="row">
                 <div class="col">
-                    <ErrorComponent ErrorMessage="@_error"/>
+                    <ErrorPanelComponent ErrorMessage="@_error"/>
                 </div>
             </div>
         }
diff --git a/WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor b/WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor
index 4785305..0830b00 100644
--- a/WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor
+++ b/WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor
@@ -1,6 +1,7 @@
 @using System.Text
 @using Microsoft.IdentityModel.Tokens
 @using WatchIt.Common.Model.Genres
+@using WatchIt.Website.Components.Pages.MediaPage.Panels
 
 @page "/media/{id:long}"
 
@@ -31,7 +32,7 @@ else
         {
             <div class="row mt-9">
                 <div class="col-auto">
-                    <img class="rounded-2 shadow object-fit-cover" src="@(_poster is not null ? _poster.ToString() : "assets/poster.png")" alt="poster" width="200" height="333"/>
+                    <img class="rounded-2 shadow object-fit-cover" src="@(_poster is not null ? _poster.ToString() : "assets/media_poster.png")" alt="poster" width="200" height="333"/>
                 </div>
                 <div class="col">
                     <div class="d-flex h-100">
@@ -220,7 +221,7 @@ else
         {
             <div class="row">
                 <div class="col">
-                    <ErrorComponent ErrorMessage="@_error"/>
+                    <ErrorPanelComponent ErrorMessage="@_error"/>
                 </div>
             </div>
         }
diff --git a/WatchIt.Website/WatchIt.Website/Pages/PersonEditPage.razor b/WatchIt.Website/WatchIt.Website/Pages/PersonEditPage.razor
index 61ad6a8..80c6a6b 100644
--- a/WatchIt.Website/WatchIt.Website/Pages/PersonEditPage.razor
+++ b/WatchIt.Website/WatchIt.Website/Pages/PersonEditPage.razor
@@ -1,4 +1,5 @@
 @using WatchIt.Common.Model.Persons
+@using WatchIt.Website.Components.Pages.PersonEditPage.Panels
 
 @page "/person/{id:long}/edit"
 @page "/person/new"
@@ -47,35 +48,35 @@
             </div>
             <div class="row mt-3 gx-3">
                 <div class="col-auto">
-                    <PictureEditorComponent Id="@(Id)"
-                                            PictureGetTask="@(async (id, action) => await PersonsWebAPIService.GetPersonPhoto(id, action))"
-                                            PicturePutTask="@(async (id, data, action) => await PersonsWebAPIService.PutPersonPhoto(id, new PersonPhotoRequest(data), action))"
-                                            PictureDeleteTask="@(async (id, action) => await PersonsWebAPIService.DeletePersonPhoto(id, action))"
-                                            PicturePlaceholder="/assets/person_picture.png"
-                                            Class="h-100"/>
+                    <PictureEditorPanelComponent Id="@(Id)"
+                                                 PictureGetTask="@(async (id, action) => await PersonsWebAPIService.GetPersonPhoto(id, action))"
+                                                 PicturePutTask="@(async (id, data, action) => await PersonsWebAPIService.PutPersonPhoto(id, new PersonPhotoRequest(data), action))"
+                                                 PictureDeleteTask="@(async (id, action) => await PersonsWebAPIService.DeletePersonPhoto(id, action))"
+                                                 PicturePlaceholder="/assets/person_picture.png"
+                                                 Class="h-100"/>
                 </div>
                 <div class="col">
-                    <PersonEditFormComponent Id="@(Id)" 
-                                             Class="h-100"/>
+                    <PersonEditFormPanelComponent Id="@(Id)" 
+                                                  Class="h-100"/>
                 </div>
             </div>
             <div class="row mt-3">
                 <div class="col">
-                    <PersonRolesEditActorComponent Id="@(Id)"
-                                                   Media="@(_media)"/>
+                    <PersonActorRolesEditPanelComponent Id="@(Id)"
+                                                        Media="@(_media)"/>
                 </div>
             </div>
             <div class="row mt-3">
                 <div class="col">
-                    <PersonRolesEditCreatorComponent Id="@(Id)"
-                                                     Media="@(_media)"/>
+                    <PersonCreatorRolesEditPanelComponent Id="@(Id)"
+                                                          Media="@(_media)"/>
                 </div>
             </div>
         </div>
     }
     else
     {
-        <ErrorComponent ErrorMessage="You do not have permission to view this site"/>
+        <ErrorPanelComponent ErrorMessage="You do not have permission to view this site"/>
     }
 }
 else
diff --git a/WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor b/WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor
index c0bb6e3..eceb865 100644
--- a/WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor
+++ b/WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor
@@ -1,7 +1,7 @@
 @using WatchIt.Common.Model.Movies
 @using WatchIt.Common.Model.Series
 @using WatchIt.Common.Query
-@using WatchIt.Website.Components.SearchPage
+@using WatchIt.Website.Components.Pages.SearchPage.Panels
 @using WatchIt.Website.Services.WebAPI.Movies
 
 @layout MainLayout
@@ -30,32 +30,32 @@
             </div>
             <div class="row mt-3">
                 <div class="col">
-                    <SearchResultComponent TItem="MovieResponse"
-                                           TQuery="MovieQueryParameters"
-                                           Title="Movies"
-                                           UrlIdTemplate="/media/{0}"
-                                           IdSource="@(item => item.Id)"
-                                           NameSource="@(item => item.Title)"
-                                           AdditionalNameInfoSource="@(item => item.ReleaseDate.HasValue ? $" ({item.ReleaseDate.Value.Year})" : null)"
-                                           RatingSource="@(item => item.Rating)"
-                                           Query="@(new MovieQueryParameters { Title = DecodedQuery, OrderBy = "rating.count" })"
-                                           ItemDownloadingTask="@(MoviesWebAPIService.GetAllMovies)"
-                                           PictureDownloadingTask="@((id, action) => MediaWebAPIService.GetMediaPoster(id, action))"/>
+                    <SearchResultPanelComponent TItem="MovieResponse"
+                                                TQuery="MovieQueryParameters"
+                                                Title="Movies"
+                                                UrlIdTemplate="/media/{0}"
+                                                IdSource="@(item => item.Id)"
+                                                NameSource="@(item => item.Title)"
+                                                AdditionalNameInfoSource="@(item => item.ReleaseDate.HasValue ? $" ({item.ReleaseDate.Value.Year})" : null)"
+                                                RatingSource="@(item => item.Rating)"
+                                                Query="@(new MovieQueryParameters { Title = DecodedQuery, OrderBy = "rating.count" })"
+                                                ItemDownloadingTask="@(MoviesWebAPIService.GetAllMovies)"
+                                                PictureDownloadingTask="@((id, action) => MediaWebAPIService.GetMediaPoster(id, action))"/>
                 </div>
             </div>
             <div class="row mt-3">
                 <div class="col">
-                    <SearchResultComponent TItem="SeriesResponse" 
-                                           TQuery="SeriesQueryParameters"
-                                           Title="TV series"
-                                           UrlIdTemplate="/media/{0}"
-                                           IdSource="@(item => item.Id)"
-                                           NameSource="@(item => item.Title)"
-                                           AdditionalNameInfoSource="@(item => item.ReleaseDate.HasValue ? $" ({item.ReleaseDate.Value.Year})" : null)"
-                                           RatingSource="@(item => item.Rating)"
-                                           Query="@(new SeriesQueryParameters { Title = DecodedQuery, OrderBy = "rating.count" })"
-                                           ItemDownloadingTask="@(SeriesWebAPIService.GetAllSeries)"
-                                           PictureDownloadingTask="@((id, action) => MediaWebAPIService.GetMediaPoster(id, action))"/>
+                    <SearchResultPanelComponent TItem="SeriesResponse" 
+                                                TQuery="SeriesQueryParameters"
+                                                Title="TV series"
+                                                UrlIdTemplate="/media/{0}"
+                                                IdSource="@(item => item.Id)"
+                                                NameSource="@(item => item.Title)"
+                                                AdditionalNameInfoSource="@(item => item.ReleaseDate.HasValue ? $" ({item.ReleaseDate.Value.Year})" : null)"
+                                                RatingSource="@(item => item.Rating)"
+                                                Query="@(new SeriesQueryParameters { Title = DecodedQuery, OrderBy = "rating.count" })"
+                                                ItemDownloadingTask="@(SeriesWebAPIService.GetAllSeries)"
+                                                PictureDownloadingTask="@((id, action) => MediaWebAPIService.GetMediaPoster(id, action))"/>
                 </div>
             </div>
         }
@@ -63,7 +63,7 @@
         {
             <div class="row">
                 <div class="col">
-                    <ErrorComponent ErrorMessage="@(_error)"/>
+                    <ErrorPanelComponent ErrorMessage="@(_error)"/>
                 </div>
             </div>
         }
diff --git a/WatchIt.Website/WatchIt.Website/WatchIt.Website.csproj b/WatchIt.Website/WatchIt.Website/WatchIt.Website.csproj
index eb28837..f706c1f 100644
--- a/WatchIt.Website/WatchIt.Website/WatchIt.Website.csproj
+++ b/WatchIt.Website/WatchIt.Website/WatchIt.Website.csproj
@@ -51,4 +51,8 @@
       <PackageReference Include="Blazorise.Icons.FontAwesome" Version="1.6.1" />
     </ItemGroup>
 
+    <ItemGroup>
+      <Folder Include="Components\DatabasePage\" />
+    </ItemGroup>
+
 </Project>
diff --git a/WatchIt.Website/WatchIt.Website/_Imports.razor b/WatchIt.Website/WatchIt.Website/_Imports.razor
index 6a1890c..e95dbc3 100644
--- a/WatchIt.Website/WatchIt.Website/_Imports.razor
+++ b/WatchIt.Website/WatchIt.Website/_Imports.razor
@@ -8,10 +8,8 @@
 @using Microsoft.JSInterop
 @using WatchIt.Website
 @using WatchIt.Website.Layout
-@using WatchIt.Website.Components
-@using WatchIt.Website.Components.PersonEditPage
-@using WatchIt.Website.Components.MediaEditPage
-@using WatchIt.Website.Components.MediaPage
+@using WatchIt.Website.Components.Common.Subcomponents
+@using WatchIt.Website.Components.Common.Panels
 @using WatchIt.Common.Model.Accounts
 @using WatchIt.Common.Model.Media
 @using WatchIt.Website.Services.Utility.Tokens
diff --git a/WatchIt.Website/WatchIt.Website/wwwroot/assets/media_poster.png b/WatchIt.Website/WatchIt.Website/wwwroot/assets/media_poster.png
new file mode 100644
index 0000000..0d5167b
Binary files /dev/null and b/WatchIt.Website/WatchIt.Website/wwwroot/assets/media_poster.png differ
diff --git a/WatchIt.Website/WatchIt.Website/wwwroot/assets/person_poster.png b/WatchIt.Website/WatchIt.Website/wwwroot/assets/person_poster.png
new file mode 100644
index 0000000..d305bd2
Binary files /dev/null and b/WatchIt.Website/WatchIt.Website/wwwroot/assets/person_poster.png differ
diff --git a/WatchIt.Website/WatchIt.Website/wwwroot/css/gaps.css b/WatchIt.Website/WatchIt.Website/wwwroot/css/gaps.css
index 9f37147..3b45259 100644
--- a/WatchIt.Website/WatchIt.Website/wwwroot/css/gaps.css
+++ b/WatchIt.Website/WatchIt.Website/wwwroot/css/gaps.css
@@ -8,6 +8,10 @@
     --bs-gutter-x: 1rem !important;
 }
 
+.gap-default {
+    gap: 1rem;
+}
+
 
 
 /* OTHERS */
diff --git a/WatchIt.Website/WatchIt.Website/wwwroot/css/general.css b/WatchIt.Website/WatchIt.Website/wwwroot/css/general.css
index 3ac06ff..4223bee 100644
--- a/WatchIt.Website/WatchIt.Website/wwwroot/css/general.css
+++ b/WatchIt.Website/WatchIt.Website/wwwroot/css/general.css
@@ -82,7 +82,9 @@ body, html {
     background-color: rgba(255, 184, 58, 0.6) !important;
 }
 
-
+.pt-05 {
+    padding-top: 0.125rem !important;
+}