diff --git a/WatchIt.Website/WatchIt.Website/App.razor b/WatchIt.Website/WatchIt.Website/App.razor
index b7ea5bd..4492067 100644
--- a/WatchIt.Website/WatchIt.Website/App.razor
+++ b/WatchIt.Website/WatchIt.Website/App.razor
@@ -9,12 +9,18 @@
     <link rel="icon" type="image/png" href="favicon.png"/>
     
     <!-- CSS -->
-    <link rel="stylesheet" href="app.css?version=0.2.0.2"/>
+    <link rel="stylesheet" href="css/general.css?version=0.2.0.3"/>
+    <link rel="stylesheet" href="css/main_button.css?version=0.2.0.0"/>
     <link rel="stylesheet" href="WatchIt.Website.styles.css?version=0.2.0.9"/>
     
     <!-- BOOTSTRAP -->
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+
+    <!-- BLAZORISE -->
+    <link href="_content/Blazorise.Icons.FontAwesome/v6/css/all.min.css" rel="stylesheet">
+    <link href="_content/Blazorise/blazorise.css" rel="stylesheet" />
+    <link href="_content/Blazorise.Bootstrap5/blazorise.bootstrap5.css" rel="stylesheet" />
     
     <!-- FONTS -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
diff --git a/WatchIt.Website/WatchIt.Website/Components/ErrorComponent.razor b/WatchIt.Website/WatchIt.Website/Components/ErrorComponent.razor
index 9624ad0..bc34f73 100644
--- a/WatchIt.Website/WatchIt.Website/Components/ErrorComponent.razor
+++ b/WatchIt.Website/WatchIt.Website/Components/ErrorComponent.razor
@@ -1,5 +1,5 @@
 <div class="rounded-3 panel panel-regular p-4">
-    <div class="container-fluid">
+    <div class="container-grid">
         <div class="row">
             <div class="col">
                 <div class="d-flex justify-content-center">
diff --git a/WatchIt.Website/WatchIt.Website/Components/ListItemComponent.razor b/WatchIt.Website/WatchIt.Website/Components/ListItemComponent.razor
index 562ce9b..cb879cc 100644
--- a/WatchIt.Website/WatchIt.Website/Components/ListItemComponent.razor
+++ b/WatchIt.Website/WatchIt.Website/Components/ListItemComponent.razor
@@ -1,4 +1,4 @@
-<div class="container-float m-0 p-0">
+<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)"/>
diff --git a/WatchIt.Website/WatchIt.Website/Components/SearchPage/SearchResultComponent.razor b/WatchIt.Website/WatchIt.Website/Components/SearchPage/SearchResultComponent.razor
index d25f4ec..4903e4d 100644
--- a/WatchIt.Website/WatchIt.Website/Components/SearchPage/SearchResultComponent.razor
+++ b/WatchIt.Website/WatchIt.Website/Components/SearchPage/SearchResultComponent.razor
@@ -6,7 +6,7 @@
 
 
 <div class="rounded-3 panel panel-regular p-4">
-    <div class="container-fluid p-0 m-0">
+    <div class="container-grid">
         <div class="row mb-4">
             <div class="col">
                 <h4 class="m-0"><strong>@(Title)</strong></h4>
@@ -46,12 +46,12 @@
                                 <button class="btn btn-secondary" @onclick="DownloadItems">
                                     @if (!_itemsLoading)
                                     {
-                                        <span class="sr-only">Load more</span>
+                                        <span>Load more</span>
                                     }
                                     else
                                     {
                                         <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
-                                        <span class="sr-only">Saving...</span>
+                                        <span>Saving...</span>
                                     }
                                 </button>
                             </div>
diff --git a/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor b/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor
index 24e27be..bacd53c 100644
--- a/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor
+++ b/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor
@@ -9,49 +9,60 @@
     @if (_loaded)
     {
         <div class="container-xl">
-            <div class="row align-items-center m-1 my-2 mb-3 rounded-3 header panel panel-header z-3">
-                <div class="col-2">
-                    <a class="logo" href="/">
-                        WatchIt
-                    </a>
-                </div>
+            <div class="row sticky-top top-3 mb-2rem">
                 <div class="col">
-                    <p>Menu</p>
-                </div>
-                <div class="col-auto">
-                    <div class="d-flex flex-row-reverse">
-                        @if (_user is null)
-                        {
-                            <a class="main-button" href="/auth">Sign in</a>
-                        }
-                        else
-                        {
-                            <div class="dropdown z-3">
-                                <a class="dropdown-toggle align-items-center text-decoration-none d-flex" id="dropdownUser" aria-expanded="false" @onclick="() => _menuUserIsActive = !_menuUserIsActive">
-                                    <img class="rounded-circle" alt="avatar" height="30" src="@(_userProfilePicture is null ? "assets/user_placeholder.png" : _userProfilePicture.ToString())"/>
-                                    <div class="text-decoration-none mx-2 text-white">@(_user.Username)</div>
-                                </a>
-                                <ul class="dropdown-menu dropdown-menu-right text-small z-3" id="user-menu" aria-labelledby="dropdownUser">
-                                    <li>
-                                        @if (_user.IsAdmin)
+                    <div class="panel panel-header rounded-3 px-3">
+                        <div class="container-grid">
+                            <div class="row align-items-center">
+                                <div class="col">
+                                    <a id="logo" class="logo" href="/">
+                                        WatchIt
+                                    </a>
+                                </div>
+                                <div class="col-auto">
+                                    menu
+                                </div>
+                                <div class="col">
+                                    <div class="float-end">
+                                        @if (_user is null)
                                         {
-                                            <a class="dropdown-item" href="/admin">Administrator panel</a>
+                                            <a id="signInButton" class="main-button" href="/auth">Sign in</a>
                                         }
-                                        <div class="dropdown-menu-separator"></div>
-                                        <a class="dropdown-item text-danger" @onclick="UserMenuLogOut">Log out</a>
-                                    </li>
-                                </ul>
+                                        else
+                                        {
+                                            <Dropdown RightAligned>
+                                                <Button Color="Color.Default">
+                                                    <div class="d-flex gap-2 align-items-center">
+                                                        <img class="rounded-circle" alt="avatar" height="30" src="@(_userProfilePicture is null ? "assets/user_placeholder.png" : _userProfilePicture.ToString())"/>
+                                                        <span>@(_user.Username)</span>
+                                                    </div>
+                                                </Button>
+                                                <DropdownToggle Color="Color.Default" Split />
+                                                <DropdownMenu >
+                                                    @if (_user.IsAdmin)
+                                                    {
+                                                        <DropdownItem Clicked="@(() => NavigationManager.NavigateTo("/admin"))">Administrator panel</DropdownItem>
+                                                    }
+                                                    <DropdownDivider/>
+                                                    <DropdownItem Clicked="UserMenuLogOut"><span class="text-danger">Log out</span></DropdownItem>
+                                                </DropdownMenu>
+                                            </Dropdown>
+                                        }
+                                    </div>
+                                </div>
                             </div>
-                        }
+                        </div>
                     </div>
                 </div>
             </div>
             <div class="row">
-                <div class="col z-0 p-1">
+                <div class="col">
                     @Body
                 </div>
             </div>
         </div>
+        
+        
 
         <style>
             /* TAGS */
@@ -62,14 +73,7 @@
 
             /* IDS */
 
-            #user-menu {
-                display: @(_menuUserIsActive ? "block" : "none");
-            }
-            
-            
-            /* CLASSES */
-            
-            .logo, .main-button {
+            #logo, #signInButton {
                 background-image: linear-gradient(45deg, @(GetBackgroundPhoto() is null ? "#c6721c, #85200c" : $"#{Convert.ToHexString(GetBackgroundPhoto().Background.FirstGradientColor)}, #{Convert.ToHexString(GetBackgroundPhoto().Background.SecondGradientColor)}"));
             }
         </style>
diff --git a/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor.cs b/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor.cs
index 9485fc0..941eb4f 100644
--- a/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor.cs
+++ b/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor.cs
@@ -27,15 +27,12 @@ public partial class MainLayout : LayoutComponentBase
     
     #region FIELDS
 
-    private bool _loaded = false;
-
+    private bool _loaded;
+    
+    private User? _user;
     private PhotoResponse? _defaultBackgroundPhoto;
-    
-    private User? _user = null;
     private AccountProfilePictureResponse? _userProfilePicture;
     
-    private bool _menuUserIsActive;
-    
     #endregion
     
     
diff --git a/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor.css b/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor.css
index 7538cab..443c860 100644
--- a/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor.css
+++ b/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor.css
@@ -8,24 +8,6 @@ h1 {
 
 /* IDS */
 
-#user-menu {
-    position: fixed;
-}
-
-
-
-/* CLASSES */
-
-.logo {
+#logo {
     font-size: 40px;
-}
-
-.header {
-    position: sticky;
-    top: 10px;
-    height: 60px;
-}
-
-.body-content {
-    padding-top: 100px;
 }
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Pages/AdminPage.razor b/WatchIt.Website/WatchIt.Website/Pages/AdminPage.razor
index 7be53a9..c13c42f 100644
--- a/WatchIt.Website/WatchIt.Website/Pages/AdminPage.razor
+++ b/WatchIt.Website/WatchIt.Website/Pages/AdminPage.razor
@@ -2,7 +2,7 @@
 
 <PageTitle>WatchIt administrator panel</PageTitle>
 
-<div class="container-fluid">
+<div class="container-grid">
     @if (_loaded)
     {
         if (_authenticated)
diff --git a/WatchIt.Website/WatchIt.Website/Pages/HomePage.razor b/WatchIt.Website/WatchIt.Website/Pages/HomePage.razor
index a804363..1766091 100644
--- a/WatchIt.Website/WatchIt.Website/Pages/HomePage.razor
+++ b/WatchIt.Website/WatchIt.Website/Pages/HomePage.razor
@@ -2,7 +2,7 @@
 
 <PageTitle>WatchIt</PageTitle>
 
-<div class="container-fluid">
+<div class="container-grid">
     @if (_loaded)
     {
         if (string.IsNullOrWhiteSpace(_error))
@@ -10,7 +10,7 @@
             <div class="row">
                 <div class="col">
                     <div class="rounded-3 panel panel-regular p-4">
-                        <div class="container-fluid p-0">
+                        <div class="container-grid">
                             <div class="row">
                                 <div class="col">
                                     <h4><strong>Top 5 movies this week by popularity</strong></h4>
@@ -25,7 +25,7 @@
                                             <a class="text-reset text-decoration-none" href="/media/@_topMovies.ToArray()[i].Key.Id">
                                                 <div class="d-flex flex-column align-items-center gap-2 h-100">
                                                     <img class="rounded-2 shadow object-fit-cover poster-aspect-ratio" src="@(_topMovies.ToArray()[i].Value is not null ? _topMovies.ToArray()[i].Value.ToString() : "assets/poster.png")" alt="poster" width="100%"/>
-                                                    <div class="container-fluid p-0">
+                                                    <div class="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>
@@ -48,7 +48,7 @@
             <div class="row mt-3">
                 <div class="col">
                     <div class="rounded-3 panel panel-regular p-4">
-                        <div class="container-fluid p-0">
+                        <div class="container-grid">
                             <div class="row">
                                 <div class="col">
                                     <h4><strong>Top 5 TV series this week by popularity</strong></h4>
@@ -63,7 +63,7 @@
                                             <a class="text-reset text-decoration-none" href="/media/@_topSeries.ToArray()[i].Key.Id">
                                                 <div class="d-flex flex-column align-items-center gap-2 h-100">
                                                     <img class="rounded-2 shadow object-fit-cover poster-aspect-ratio" src="@(_topSeries.ToArray()[i].Value is not null ? _topSeries.ToArray()[i].Value.ToString() : "assets/poster.png")" alt="poster" width="100%"/>
-                                                    <div class="container-fluid p-0">
+                                                    <div class="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>
diff --git a/WatchIt.Website/WatchIt.Website/Pages/MediaEditPage.razor b/WatchIt.Website/WatchIt.Website/Pages/MediaEditPage.razor
index 31550b0..461dfcc 100644
--- a/WatchIt.Website/WatchIt.Website/Pages/MediaEditPage.razor
+++ b/WatchIt.Website/WatchIt.Website/Pages/MediaEditPage.razor
@@ -40,7 +40,7 @@
     }
 </PageTitle>
 
-<div class="container-fluid">
+<div class="container-grid">
     @if (_loaded)
     {
         if (string.IsNullOrWhiteSpace(_error))
@@ -57,7 +57,7 @@
                 <div class="row mt-3 gx-3">
                     <div class="col-auto">
                         <div class="rounded-3 panel panel-regular p-4 h-100">
-                            <div class="container-fluid p-0">
+                            <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"/>
@@ -77,12 +77,12 @@
                                                 <button type="button" class="btn btn-secondary btn-block btn-stretch-x" @onclick="SavePoster" disabled=@(!Id.HasValue || _mediaPosterSaving || _mediaPosterDeleting) autocomplete="off">
                                                     @if (!_mediaPosterSaving)
                                                     {
-                                                        <span class="sr-only">Save poster</span>
+                                                        <span>Save poster</span>
                                                     }
                                                     else
                                                     {
                                                         <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
-                                                        <span class="sr-only">Saving...</span>
+                                                        <span>Saving...</span>
                                                     }
                                                 </button>
                                             </div>
@@ -96,12 +96,12 @@
                                                 <button type="button" class="btn btn-danger btn-block btn-stretch-x" @onclick="DeletePoster" disabled=@(!Id.HasValue || _mediaPosterSaving || _mediaPosterDeleting) autocomplete="off">
                                                     @if (!_mediaPosterSaving)
                                                     {
-                                                        <span class="sr-only">Delete poster</span>
+                                                        <span>Delete poster</span>
                                                     }
                                                     else
                                                     {
                                                         <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
-                                                        <span class="sr-only">Deleting...</span>
+                                                        <span>Deleting...</span>
                                                     }
                                                 </button>
                                             </div>
@@ -115,7 +115,7 @@
                         <div class="rounded-3 panel panel-regular p-4 h-100">
                             <EditForm Model="_mediaRequest">
                                 <AntiforgeryToken/>
-                                <div class="container-fluid p-0">
+                                <div class="container-grid">
                                     <div class="row form-group mb-1">
                                         <label for="title" class="col-2 col-form-label">Title*</label>
                                         <div class="col-10">
@@ -183,12 +183,12 @@
                                                 <button type="button" class="btn btn-secondary" @onclick="SaveBasicData">
                                                     @if (!_basicDataSaving)
                                                     {
-                                                        <span class="sr-only">Save</span>
+                                                        <span>Save</span>
                                                     }
                                                     else
                                                     {
                                                         <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
-                                                        <span class="sr-only">Saving...</span>
+                                                        <span>Saving...</span>
                                                     }
                                                 </button>
                                             </div>
@@ -202,7 +202,7 @@
                 <div class="row mt-3">
                     <div class="col">
                         <div class="rounded-3 panel panel-regular p-4">
-                            <div class="container-fluid p-0">
+                            <div class="container-grid">
                                 <div class="row mb-3">
                                     <div class="col">
                                         <div class="d-flex align-items-center h-100">
@@ -226,12 +226,12 @@
                                                 <button type="button" class="btn btn-secondary" disabled="@(_photoEditSaving)" @onclick="SaveEditPhoto">
                                                     @if (!_photoEditSaving)
                                                     {
-                                                        <span class="sr-only">Save</span>
+                                                        <span>Save</span>
                                                     }
                                                     else
                                                     {
                                                         <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
-                                                        <span class="sr-only">Saving...</span>
+                                                        <span>Saving...</span>
                                                     }
                                                 </button>
                                                 <button type="button" class="btn btn-secondary" disabled="@(_photoEditSaving)" @onclick="CancelEditPhoto">Cancel</button>
@@ -248,7 +248,7 @@
                                                 <div id="scrollPhotos" class="d-flex p-3 gap-3" data-bs-spy="scroll" tabindex="0">
                                                     @foreach (PhotoResponse photo in _photos)
                                                     {
-                                                        <div class="container-fluid p-0 m-0 photo-container">
+                                                        <div class="container-grid photo-container">
                                                             <div class="row">
                                                                 <div class="col">
                                                                     <img class="rounded-1 shadow object-fit-cover photo-default-aspect-ratio" src="@(photo.ToString())" alt="photo" width="350"/>
@@ -301,10 +301,10 @@
                                         }
                                         else
                                         {
-                                            <div class="container-fluid p-0 m-0">
+                                            <div class="container-grid">
                                                 <div class="row">
                                                     <div class="col-auto">
-                                                        <div class="container-fluid p-0 m-0">
+                                                        <div class="container-grid">
                                                             <div class="row">
                                                                 <div class="col">
                                                                     <img class="rounded-1 shadow object-fit-cover photo-default-aspect-ratio" src="@(_photoEditRequest is null ? "assets/photo.png" : _photoEditRequest.ToString())" alt="edit_photo" width="300px"/>
@@ -321,7 +321,7 @@
                                                         </div>
                                                     </div>
                                                     <div class="col">
-                                                        <div class="container-fluid p-0 m-0">
+                                                        <div class="container-grid">
                                                             <div class="row form-group">
                                                                 <div class="col">
                                                                     <div class="form-check">
diff --git a/WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor b/WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor
index 27b1c79..ef9ff93 100644
--- a/WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor
+++ b/WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor
@@ -24,7 +24,7 @@ else
 
 
 
-<div class="container-fluid">
+<div class="container-grid">
     @if (_loaded)
     {
         if (string.IsNullOrWhiteSpace(_error))
@@ -35,7 +35,7 @@ else
                 </div>
                 <div class="col">
                     <div class="d-flex h-100">
-                        <div class="container-fluid px-0 align-self-end">
+                        <div class="container-grid align-self-end">
                             <div class="row">
                                 <div class="col">
                                     <h1 class="align-self-end title-shadow">
@@ -60,7 +60,7 @@ else
             <div class="row mt-3 gx-3">
                 <div class="col">
                     <div class="rounded-3 panel panel-regular p-4 h-100">
-                        <div class="container-fluid px-0">
+                        <div class="container-grid">
                             <div class="row">
                                 <div class="col">
                                     <div class="d-flex flex-wrap gap-3">
@@ -133,7 +133,7 @@ else
                 </div>
                 <div class="col-auto">
                     <div class="rounded-3 panel panel-yellow p-4 h-100">
-                        <div class="container-fluid px-0">
+                        <div class="container-grid">
                             <div class="row">
                                 <div class="col">
                                     <h4 class="text-dark">
diff --git a/WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor b/WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor
index 61bac3b..48e98dc 100644
--- a/WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor
+++ b/WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor
@@ -12,7 +12,7 @@
 
 
 
-<div class="container-fluid">
+<div class="container-grid">
     @if (_loaded)
     {
         if (string.IsNullOrWhiteSpace(_error))
diff --git a/WatchIt.Website/WatchIt.Website/Program.cs b/WatchIt.Website/WatchIt.Website/Program.cs
index ee79676..283995a 100644
--- a/WatchIt.Website/WatchIt.Website/Program.cs
+++ b/WatchIt.Website/WatchIt.Website/Program.cs
@@ -1,5 +1,8 @@
 using System.Text.Json;
 using System.Text.Json.Serialization;
+using Blazorise;
+using Blazorise.Bootstrap5;
+using Blazorise.Icons.FontAwesome;
 using Microsoft.AspNetCore.Components.Authorization;
 using WatchIt.Common.Services.HttpClient;
 using WatchIt.Website.Services.Utility.Authentication;
@@ -53,6 +56,12 @@ public static class Program
     private static WebApplicationBuilder SetupServices(this WebApplicationBuilder builder)
     {
         builder.Services.AddSingleton<HttpClient>();
+        builder.Services.AddBlazorise(options =>
+                         {
+                             options.Immediate = true;
+                         })
+                         .AddBootstrap5Providers()
+                         .AddFontAwesomeIcons();
         
         // Utility
         builder.Services.AddSingleton<IHttpClientService, HttpClientService>();
diff --git a/WatchIt.Website/WatchIt.Website/WatchIt.Website.csproj b/WatchIt.Website/WatchIt.Website/WatchIt.Website.csproj
index 0722800..3ba0027 100644
--- a/WatchIt.Website/WatchIt.Website/WatchIt.Website.csproj
+++ b/WatchIt.Website/WatchIt.Website/WatchIt.Website.csproj
@@ -35,10 +35,16 @@
       <_ContentIncludedByDefault Remove="Components\Pages\Weather.razor" />
       <_ContentIncludedByDefault Remove="wwwroot\bootstrap\bootstrap.min.css" />
       <_ContentIncludedByDefault Remove="wwwroot\bootstrap\bootstrap.min.css.map" />
+      <_ContentIncludedByDefault Remove="wwwroot\scripts\popper.min.js" />
     </ItemGroup>
 
     <ItemGroup>
       <AdditionalFiles Include="Layout\MainLayout.razor" />
     </ItemGroup>
 
+    <ItemGroup>
+      <PackageReference Include="Blazorise.Bootstrap5" Version="1.6.1" />
+      <PackageReference Include="Blazorise.Icons.FontAwesome" Version="1.6.1" />
+    </ItemGroup>
+
 </Project>
diff --git a/WatchIt.Website/WatchIt.Website/_Imports.razor b/WatchIt.Website/WatchIt.Website/_Imports.razor
index 7376a6e..b8693f8 100644
--- a/WatchIt.Website/WatchIt.Website/_Imports.razor
+++ b/WatchIt.Website/WatchIt.Website/_Imports.razor
@@ -14,4 +14,5 @@
 @using WatchIt.Website.Services.Utility.Tokens
 @using WatchIt.Website.Services.Utility.Authentication
 @using WatchIt.Website.Services.WebAPI.Accounts
-@using WatchIt.Website.Services.WebAPI.Media
\ No newline at end of file
+@using WatchIt.Website.Services.WebAPI.Media
+@using Blazorise
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/wwwroot/css/general.css b/WatchIt.Website/WatchIt.Website/wwwroot/css/general.css
index eac2f26..443ec27 100644
--- a/WatchIt.Website/WatchIt.Website/wwwroot/css/general.css
+++ b/WatchIt.Website/WatchIt.Website/wwwroot/css/general.css
@@ -27,6 +27,14 @@ body, html {
 
 /* CLASSES */
 
+.container-grid {
+    padding: 0 !important;
+    margin: 0 !important;
+    --bs-gutter-x: 1.5rem;
+    --bs-gutter-y: 0;
+    width: 100%;
+}
+
 .logo {
     font-family: "Belanosima";
     text-decoration: none;
@@ -34,53 +42,16 @@ body, html {
     -webkit-text-fill-color: transparent;
 }
 
-.main-button {
-    --r:10px;
-    --b:2px;
 
-    -webkit-background-clip: text;
-    background-clip: text;
-    -webkit-text-fill-color: transparent;
-    color: transparent;
-    padding: 5px 10px;
 
-    border-radius: var(--r);
-    display: block;
-    align-items: self-end;
-    position: relative;
-    z-index:0;
-    text-decoration: none;
-    transition: 0.3s;
-    font-family: Belanosima;
+
+
+.top-3 {
+    top: 1rem !important;
 }
 
-.main-button::before {
-    content:"";
-    position:absolute;
-    z-index:-1;
-    inset: 0;
-    border: var(--b) solid transparent;
-    border-radius: var(--r);
-    background: inherit;
-    background-origin: border-box;
-    background-clip: border-box;
-    -webkit-mask:
-            linear-gradient(#fff 0 0) padding-box,
-            linear-gradient(#fff 0 0);
-    -webkit-mask-composite: xor;
-    mask-composite: exclude;
-    -webkit-mask-repeat: no-repeat;
-}
-
-.main-button:hover {
-    color: #fff;
-    -webkit-text-fill-color: #fff;
-    -webkit-background-clip: border-box;
-    background-clip: border-box;
-}
-
-.main-button:hover::before {
-    -webkit-mask:none;
+.mb-2rem {
+    margin-bottom: 2rem !important;
 }
 
 
diff --git a/WatchIt.Website/WatchIt.Website/wwwroot/css/main_button.css b/WatchIt.Website/WatchIt.Website/wwwroot/css/main_button.css
index e69de29..2bfc5c7 100644
--- a/WatchIt.Website/WatchIt.Website/wwwroot/css/main_button.css
+++ b/WatchIt.Website/WatchIt.Website/wwwroot/css/main_button.css
@@ -0,0 +1,50 @@
+/* CLASSES */
+
+.main-button {
+    --r:10px;
+    --b:2px;
+
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    color: transparent;
+    padding: 5px 10px;
+
+    border-radius: var(--r);
+    display: block;
+    align-items: self-end;
+    position: relative;
+    z-index:0;
+    text-decoration: none;
+    transition: 0.3s;
+    font-family: Belanosima;
+}
+
+.main-button::before {
+    content:"";
+    position:absolute;
+    z-index:-1;
+    inset: 0;
+    border: var(--b) solid transparent;
+    border-radius: var(--r);
+    background: inherit;
+    background-origin: border-box;
+    background-clip: border-box;
+    -webkit-mask:
+            linear-gradient(#fff 0 0) padding-box,
+            linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+    -webkit-mask-repeat: no-repeat;
+}
+
+.main-button:hover {
+    color: #fff;
+    -webkit-text-fill-color: #fff;
+    -webkit-background-clip: border-box;
+    background-clip: border-box;
+}
+
+.main-button:hover::before {
+    -webkit-mask:none;
+}
\ No newline at end of file