diff --git a/src/LinkDotNet.Blog.Web/Features/AboutMe/AboutMePage.razor b/src/LinkDotNet.Blog.Web/Features/AboutMe/AboutMePage.razor
index 25bc392c..a757b3ee 100644
--- a/src/LinkDotNet.Blog.Web/Features/AboutMe/AboutMePage.razor
+++ b/src/LinkDotNet.Blog.Web/Features/AboutMe/AboutMePage.razor
@@ -1,4 +1,4 @@
-@page "/AboutMe"
+@page "/AboutMe"
 @using LinkDotNet.Blog.Web.Features.AboutMe.Components
 @using LinkDotNet.Blog.Domain
 @inject IOptions<ApplicationConfiguration> AppConfiguration
@@ -16,12 +16,14 @@
             AbsolutePreviewImageUrl="@ImageUrl"></OgData>
 
     <div class="container">
-        <div class="row">
-            <div class="col-lg-3 col-md-4">
-                <Profile ShowAdminActions="@isAuthenticated" ProfileInformation="ProfileInformation.Value"/>
-            </div>
-            <TabbedNavigation IsAuthenticated="isAuthenticated"></TabbedNavigation>
-        </div>
+	    <div class="row gy-4">
+		    <div class="col-lg-3 col-md-4">
+			    <Profile ShowAdminActions="@isAuthenticated" ProfileInformation="ProfileInformation.Value" />
+		    </div>
+		    <div class="col-lg-9 col-md-8">
+			    <TabbedNavigation IsAuthenticated="isAuthenticated" />
+		    </div>
+	    </div>
     </div>
 }
 
diff --git a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/AddProfileShortItem.razor b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/AddProfileShortItem.razor
index 3a31449d..803c1b58 100644
--- a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/AddProfileShortItem.razor
+++ b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/AddProfileShortItem.razor
@@ -1,13 +1,14 @@
-<li><input type="text" @bind-value="@content" placeholder="supports markdown" class="w-100"/>
-    <button type="button" class="btn btn-default" aria-label="Add Item" @onclick="@AddItemAsync">
-        <i class="plus" aria-hidden="true"></i>
-    </button>
+<li>
+	<input type="text" @bind-value="@content" placeholder="supports markdown" class="w-100"/>
+	<button type="button" class="btn btn-default" aria-label="Add Item" @onclick="@AddItemAsync">
+		<i class="plus" aria-hidden="true"></i>
+	</button>
 </li>
 
 @code {
-    [Parameter] 
+    [Parameter]
     public EventCallback<string> ValueAdded { get; set; }
-    
+
     private string content = string.Empty;
 
     private async Task AddItemAsync()
@@ -20,4 +21,4 @@
         await ValueAdded.InvokeAsync(content);
         content = string.Empty;
     }
-}
\ No newline at end of file
+}
diff --git a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Profile.razor b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Profile.razor
index ce2d52d1..eac7c185 100644
--- a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Profile.razor
+++ b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Profile.razor
@@ -5,46 +5,46 @@
 @inject IRepository<ProfileInformationEntry> Repository
 @inject ISortOrderCalculator SortOrderCalculator
 <div class="profile-card">
-    <div class="profile-name">
-        <span>@ProfileInformation.Name</span>
-        <br/>
-        <span>@ProfileInformation.Heading</span>
-    </div>
-    <div class="profile-image">
-        <img src="@ProfileInformation.ProfilePictureUrl" alt="Profile Picture" />
-    </div>
-    <ul class="profile-keypoints"
-        ondragover="event.preventDefault();">
-        @foreach (var entry in profileInformationEntries)
-        {
-            @if (ShowAdminActions)
-            {
-                <li
-                    class="item-draggable"
-                    draggable="true"
-                    @ondrag="@(() => currentDragItem = entry)"
-                    @ondrop="@(() => HandleDrop(entry))">
+	<div class="profile-name">
+		<span>@ProfileInformation.Name</span>
+		<br/>
+		<span>@ProfileInformation.Heading</span>
+	</div>
+	<div class="profile-image">
+		<img src="@ProfileInformation.ProfilePictureUrl" alt="Profile Picture" />
+	</div>
+	<ul class="profile-keypoints"
+	    ondragover="event.preventDefault();">
+		@foreach (var entry in profileInformationEntries)
+		{
+			@if (ShowAdminActions)
+			{
+				<li
+					class="item-draggable"
+					draggable="true"
+					@ondrag="@(() => currentDragItem = entry)"
+					@ondrop="@(() => HandleDrop(entry))">
 
-                    <button type="button" class="btn btn-default" aria-label="Delete Item" @onclick="() => ShowDeleteDialog(entry.Content)">
-                        <i class="bin2" aria-hidden="true"></i>
-                    </button>
-                    @MarkdownConverter.ToMarkupString(entry.Content)
-                </li>
-            }
-            else
-            {
-                <li>@MarkdownConverter.ToMarkupString(entry.Content)</li>
-            }
-        }
-        @if (ShowAdminActions)
-        {
-            <AddProfileShortItem ValueAdded="@AddValue"></AddProfileShortItem>
-        }
-    </ul>
+					<button type="button" class="btn btn-default" aria-label="Delete Item" @onclick="() => ShowDeleteDialog(entry.Content)">
+						<i class="bin2" aria-hidden="true"></i>
+					</button>
+					@MarkdownConverter.ToMarkupString(entry.Content)
+				</li>
+			}
+			else
+			{
+				<li>@MarkdownConverter.ToMarkupString(entry.Content)</li>
+			}
+		}
+		@if (ShowAdminActions)
+		{
+			<AddProfileShortItem ValueAdded="@AddValue"></AddProfileShortItem>
+		}
+	</ul>
 </div>
 
 <ConfirmDialog @ref="Dialog" Content="Do you really want to delete this entry?" Title="Delete"
-OnYesPressed="DeleteItem"></ConfirmDialog>
+               OnYesPressed="DeleteItem"></ConfirmDialog>
 
 @code {
     [Parameter]
diff --git a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Profile.razor.css b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Profile.razor.css
deleted file mode 100644
index 845d4876..00000000
--- a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Profile.razor.css
+++ /dev/null
@@ -1,51 +0,0 @@
-.profile-card {
-    display: inline-block;
-    box-shadow: 0 3px 7px -1px rgba(0, 0, 0, 0.1);
-    width: 100%;
-    border-radius: 8px;
-}
-
-.profile-name {
-    padding: 20px;
-    font-size: 1.25em;
-    line-height: 1.5em;
-}
-
-.profile-name:first-child {
-    background: var(--tag-background);
-}
-
-.profile-image {
-    padding: 30px;
-    background: var(--tag-background);
-}
-
-.profile-image img {
-    width: 100%;
-    margin: auto;
-    border-radius: 50vw;
-    display: block;
-}
-
-.profile-keypoints {
-    background-color: var(--tag-background);
-    padding-top: 10px;
-    padding-left: 2.5em;
-    padding-right: 1.5em;
-    list-style: none;
-    margin-bottom: 0;
-}
-
-.profile-keypoints li {
-    padding-bottom: 0.6em;
-    letter-spacing: 0.05em;
-}
-
-/* As the MarkupComponent is a base class we have to use deep */
-::deep .profile-keypoints li p {
-    display: inline;
-}
-
-.item-draggable {
-    cursor: grab;
-}
\ No newline at end of file
diff --git a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/AddSkillDialog.razor b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/AddSkillDialog.razor
index fba32587..8db05cc0 100644
--- a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/AddSkillDialog.razor
+++ b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/AddSkillDialog.razor
@@ -5,28 +5,30 @@
         <DataAnnotationsValidator />
         <ValidationSummary />
         <div class="mb-3">
-            <label for="title">Skill name</label>
-            <InputText class="form-control" id="title" @bind-Value="model.Skill" />
+	        <label for="title" class="form-label">Skill name</label>
+	        <InputText class="form-control" id="title" @bind-Value="model.Skill" />
         </div>
         <div class="mb-3">
-            <label for="image">Image Url</label>
-            <InputText class="form-control" id="image" @bind-Value="model.ImageUrl"/>
-            <small for="image" class="form-text text-body-secondary">If set is used before the skill (optional). 24x24 pixel
-            optimal size</small>
+	        <label for="image" class="form-label">Image Url</label>
+	        <InputText class="form-control" id="image" @bind-Value="model.ImageUrl" />
+	        <small class="form-text text-secondary">
+		        If set, it's used before the skill (optional). 24x24 pixel optimal size.
+	        </small>
         </div>
         <div class="mb-3">
-            <label for="capability">Capability</label>
-            <InputText class="form-control" id="capability" @bind-Value="model.Capability" />
+	        <label for="capability" class="form-label">Capability</label>
+	        <InputText class="form-control" id="capability" @bind-Value="model.Capability" />
         </div>
         <div class="mb-3">
-            <label for="proficiency">Proficiency</label>
-            <select class="form-select" id="proficiency" @bind="model.Proficiency">
-                @foreach (var level in ProficiencyLevel.All.Select(l => l.Key))
-                {
-                    <option value="@level">@level</option>
-                }
-            </select>
+	        <label for="proficiency" class="form-label">Proficiency</label>
+	        <select class="form-select" id="proficiency" @bind="model.Proficiency">
+		        @foreach (var level in ProficiencyLevel.All.Select(l => l.Key))
+		        {
+			        <option value="@level">@level</option>
+		        }
+	        </select>
         </div>
+
         <button class="btn btn-primary" type="submit">Submit</button>
     </EditForm>
 </ModalDialog>
diff --git a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTable.razor b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTable.razor
index 2c88801e..047a0254 100644
--- a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTable.razor
+++ b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTable.razor
@@ -5,7 +5,7 @@
         @if (ShowAdminActions)
         {
             <button type="button" class="btn btn-primary" @onclick="() => AddSkillDialog.Open()">
-                <i class="plus"></i>Add skill</button>
+                <i class="plus"></i> Add skill</button>
             <AddSkillDialog @ref="AddSkillDialog" SkillAdded="@AddSkill"></AddSkillDialog>
         }
     </div>
@@ -29,8 +29,8 @@
                         {
                             @if (ShowAdminActions)
                             {
-                                <div draggable="true" @ondrag="@(() => currentDragItem = skill)" style="cursor: grab"
-                                 class="skill-tag">
+                                <div draggable="true" @ondrag="@(() => currentDragItem = skill)"
+                                 class="skill-tag cursor-grab">
                                     <SkillTag Skill="@skill"
                                               ShowAdminActions="@true"
                                               DeleteSkill="@(() => DeleteSkill(skill))"/>
diff --git a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTable.razor.css b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTable.razor.css
deleted file mode 100644
index 554cf5cc..00000000
--- a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTable.razor.css
+++ /dev/null
@@ -1,26 +0,0 @@
-.table-container {
-    overflow-x: auto;
-}
-
-.skill-table {
-    margin-top: 20px;
-    width: 100%;
-}
-
-.skill-table td:first-of-type {
-    width:10%
-}
-
-.skill-table td {
-    width: 30%;
-    border-top: 1px var(--bs-light) solid;
-    vertical-align: top;
-    min-width: 100px;
-}
-
-.skill-table td div {
-    display: inline-block;
-    margin-right: 8px;
-    margin-top: 12px;
-    margin-bottom: 12px;
-}
\ No newline at end of file
diff --git a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTag.razor b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTag.razor
index f5acf2ec..dec8e4c6 100644
--- a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTag.razor
+++ b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTag.razor
@@ -1,26 +1,26 @@
 @using LinkDotNet.Blog.Domain
 <span class="skill-tag">
-    @if (!string.IsNullOrEmpty(Skill.IconUrl))
-    {
-        <img src="@Skill.IconUrl" alt="icon" max-width="48px"/>
-    }
-    @Skill.Name
+	@if (!string.IsNullOrEmpty(Skill.IconUrl))
+	{
+		<img src="@Skill.IconUrl" alt="icon" max-width="48px"/>
+	}
+	@Skill.Name
 
-    @if (ShowAdminActions)
-    {
-        <button type="button" class="btn btn-default" aria-label="Delete Skill" @onclick="() => DeleteSkill.InvokeAsync()">
-            <i class="bin2" aria-hidden="true"></i>
-        </button>
-    }
+	@if (ShowAdminActions)
+	{
+		<button type="button" class="btn btn-default" aria-label="Delete Skill" @onclick="() => DeleteSkill.InvokeAsync()">
+			<i class="bin2" aria-hidden="true"></i>
+		</button>
+	}
 </span>
 
 @code {
-    [Parameter, EditorRequired]
-    public required Skill Skill { get; set; }
+	[Parameter, EditorRequired]
+	public required Skill Skill { get; set; }
 
-    [Parameter]
-    public bool ShowAdminActions { get; set; }
+	[Parameter]
+	public bool ShowAdminActions { get; set; }
 
-    [Parameter]
-    public EventCallback DeleteSkill { get; set; }
+	[Parameter]
+	public EventCallback DeleteSkill { get; set; }
 }
diff --git a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTag.razor.css b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTag.razor.css
index e833e689..f036596e 100644
--- a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTag.razor.css
+++ b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTag.razor.css
@@ -1,14 +1,14 @@
-.skill-tag {
-    padding: 8px;
-    border-radius: 5px;
-    background-color: var(--tag-background);
-    display: inline-block;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+.skill-tag {
+	padding: 8px;
+	border-radius: 5px;
+	background-color: var(--tag-background);
+	display: inline-block;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
 .skill-tag img {
-    padding-right: 12px;
-    width: 36px;
-}
\ No newline at end of file
+	padding-right: 12px;
+	width: 36px;
+}
diff --git a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/TabbedNavigation.razor b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/TabbedNavigation.razor
index a98a1eac..fcac75b1 100644
--- a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/TabbedNavigation.razor
+++ b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/TabbedNavigation.razor
@@ -1,23 +1,34 @@
 @using LinkDotNet.Blog.Web.Features.AboutMe.Components.Skill
 @using LinkDotNet.Blog.Web.Features.AboutMe.Components.Talk
 
-<div class="col-lg-9 col-md-8 tab-container">
-    <ul class="nav nav-pills nav-underline border-bottom justify-content-around" id="aboutMe" role="tablist">
-        <li class="nav-item" role="presentation">
-            <button class="nav-link active btn-primary btn-light" id="pills-skills-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Skills</button>
-        </li>
-        <li class="nav-item" role="presentation">
-            <button class="nav-link btn-primary btn-light" id="pills-talks-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Talks</button>
-        </li>
-    </ul>
-    <div class="tab-content" id="myTabContent">
-        <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-skills-tab" tabindex="0">
-            <SkillTable ShowAdminActions="@IsAuthenticated"></SkillTable>
-        </div>
-        <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-talks-tab" tabindex="0">
-            <Talks ShowAdminActions="@IsAuthenticated"></Talks>
-        </div>
-    </div>
+<div class="col-lg-9 col-md-8">
+	<ul class="nav nav-pills nav-underline border-bottom justify-content-around" id="aboutMe" role="tablist">
+		<li class="nav-item" role="presentation">
+			<button class="nav-link active" id="pills-skills-tab"
+			        data-bs-toggle="pill" data-bs-target="#pills-home"
+			        type="button" role="tab" aria-controls="pills-home" aria-selected="true">
+				Skills
+			</button>
+		</li>
+		<li class="nav-item" role="presentation">
+			<button class="nav-link" id="pills-talks-tab"
+			        data-bs-toggle="pill" data-bs-target="#pills-profile"
+			        type="button" role="tab" aria-controls="pills-profile" aria-selected="false">
+				Talks
+			</button>
+		</li>
+	</ul>
+
+	<div class="tab-content pt-3" id="myTabContent">
+		<div class="tab-pane fade show active" id="pills-home"
+		     role="tabpanel" aria-labelledby="pills-skills-tab" tabindex="0">
+			<SkillTable ShowAdminActions="@IsAuthenticated"></SkillTable>
+		</div>
+		<div class="tab-pane fade" id="pills-profile"
+		     role="tabpanel" aria-labelledby="pills-talks-tab" tabindex="0">
+			<Talks ShowAdminActions="@IsAuthenticated"></Talks>
+		</div>
+	</div>
 </div>
 
 @code {
diff --git a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/TabbedNavigation.razor.css b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/TabbedNavigation.razor.css
deleted file mode 100644
index cdd5c517..00000000
--- a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/TabbedNavigation.razor.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.nav>.nav-item>button {
-    border: 0;
-    background: transparent !important;
-    color: var(--bs-body-color) !important;
-}
\ No newline at end of file
diff --git a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Talk/AddTalkEntryDialog.razor b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Talk/AddTalkEntryDialog.razor
index 32d3f049..3d9fd63d 100644
--- a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Talk/AddTalkEntryDialog.razor
+++ b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Talk/AddTalkEntryDialog.razor
@@ -5,23 +5,26 @@
         <ValidationSummary />
 
         <div class="mb-3">
-            <label for="talk-title">Presentation title</label>
-            <InputText class="form-control" id="talk-title" @bind-Value="model.PresentationTitle" />
+	        <label for="talk-title" class="form-label">Presentation title</label>
+	        <InputText class="form-control" id="talk-title" @bind-Value="model.PresentationTitle" />
         </div>
         <div class="mb-3">
-            <label for="talk-place">Presentation place</label>
-            <InputText class="form-control" id="talk-place" @bind-Value="model.Place" />
-            <small for="talk-place" class="form-text text-body-secondary">The place / event where you hold the presentation / talk.</small>
+	        <label for="talk-place" class="form-label">Presentation place</label>
+	        <InputText class="form-control" id="talk-place" @bind-Value="model.Place" />
+	        <small class="form-text text-secondary">
+		        The place / event where you held the presentation / talk.
+	        </small>
         </div>
         <div class="mb-3">
-            <label for="talk-date">Date</label>
-            <InputDate class="form-control" id="talk-date" @bind-Value="model.PublishedDate" />
+	        <label for="talk-date" class="form-label">Date</label>
+	        <InputDate class="form-control" id="talk-date" @bind-Value="model.PublishedDate" />
         </div>
         <div class="mb-3">
-            <label for="talk-content">Description</label>
-            <MarkdownTextArea id="talk-content" Class="form-control" Rows="10"
-                           @bind-Value="@model.Description"></MarkdownTextArea>
+	        <label for="talk-content" class="form-label">Description</label>
+	        <MarkdownTextArea id="talk-content" class="form-control" rows="10"
+	                          @bind-Value="@model.Description"></MarkdownTextArea>
         </div>
+
         <button id="talk-submit" class="btn btn-primary" type="submit">Submit</button>
     </EditForm>
 </ModalDialog>
diff --git a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Talk/TalkEntry.razor b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Talk/TalkEntry.razor
index 12378a36..fb53dd54 100644
--- a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Talk/TalkEntry.razor
+++ b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Talk/TalkEntry.razor
@@ -1,24 +1,24 @@
 @using LinkDotNet.Blog.Domain
 
 <li class="pb-1">
-    <div class="row">
-        <div class="col-10" id="talk-display-content">
-            <p class="text-body-secondary mb-0 small">@Talk.PublishedDate.ToShortDateString()</p>
-            <strong class="fs-5">@Talk.PresentationTitle</strong>
-            <p id="talk-place" class="text-body-secondary">@Talk.Place</p>
-            <div id="talk-description">
-                @MarkdownConverter.ToMarkupString(Talk.Description)
-            </div>
-        </div>
-        <div class="col-2">
-            @if (ShowAdminActions)
-            {
-                <button id="talk-delete" type="button" class="btn btn-default" aria-label="Delete Skill" @onclick="() => TalkDeleted.InvokeAsync()">
-                    <i class="bin2" aria-hidden="true"></i>
-                </button>
-            }
-        </div>
-    </div>
+	<div class="row">
+		<div class="col-10" id="talk-display-content">
+			<p class="text-body-secondary mb-0 small">@Talk.PublishedDate.ToShortDateString()</p>
+			<strong class="fs-5">@Talk.PresentationTitle</strong>
+			<p id="talk-place" class="text-body-secondary">@Talk.Place</p>
+			<div id="talk-description">
+				@MarkdownConverter.ToMarkupString(Talk.Description)
+			</div>
+		</div>
+		<div class="col-2">
+			@if (ShowAdminActions)
+			{
+				<button id="talk-delete" type="button" class="btn btn-outline-secondary" aria-label="Delete Talk" @onclick="() => TalkDeleted.InvokeAsync()">
+					<i class="bin2" aria-hidden="true"></i>
+				</button>
+			}
+		</div>
+	</div>
 </li>
 <hr class="m-0" />
 
diff --git a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Talk/Talks.razor b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Talk/Talks.razor
index 102cb9ac..4090f9da 100644
--- a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Talk/Talks.razor
+++ b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Talk/Talks.razor
@@ -7,7 +7,7 @@
     @if (ShowAdminActions)
     {
         <button id="add-talk" type="button" class="btn btn-primary" @onclick="() => AddTalkEntryDialog.Open()">
-            <i class="plus"></i>Add talk</button>
+            <i class="plus"></i> Add talk</button>
         <AddTalkEntryDialog @ref="AddTalkEntryDialog" TalkCreated="StoreTalk"></AddTalkEntryDialog>
     }
     <ul class="list-unstyled">
diff --git a/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/CreateNewBlogPost.razor b/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/CreateNewBlogPost.razor
index ecea7d1c..5f0bf83d 100644
--- a/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/CreateNewBlogPost.razor
+++ b/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/CreateNewBlogPost.razor
@@ -35,7 +35,7 @@
 
     <EditForm Model="@model" OnValidSubmit="OnValidBlogPostCreatedAsync">
         <DataAnnotationsValidator />
-        
+
         <div class="row g-4">
             <div class="col-lg-8">
                 <div class="card shadow-sm border-0 hover-shadow-lg transition">
@@ -45,11 +45,10 @@
                     <div class="card-body p-0">
                                 <div class="p-4 border-bottom">
                                     <div class="form-floating">
-                                        <input type="text" class="form-control form-control-lg border-0 shadow-none" 
+                                        <input type="text" class="form-control form-control-lg border-0 shadow-none fs-3 fw-semibold"
                                                id="title" placeholder="Enter your post title..."
-                                               @oninput="args => model.Title = args.Value!.ToString()!" 
-                                               value="@model.Title" 
-                                               style="font-size: 1.5rem; font-weight: 600;" />
+                                               @oninput="args => model.Title = args.Value!.ToString()!"
+                                               value="@model.Title"/>
                                         <label for="title" class="fw-bold">Post Title</label>
                                     </div>
                                     <ValidationMessage For="() => model.Title" class="text-danger small mt-1"></ValidationMessage>
@@ -57,7 +56,7 @@
 
                                 <div class="p-4 border-bottom">
                                     <label class="form-label fw-bold text-dark mb-3">Short Description</label>
-                                    <MarkdownTextArea Id="short" Class="form-control border-0 shadow-none" 
+                                    <MarkdownTextArea Id="short" Class="form-control border-0 shadow-none"
                                                       Rows="4" Placeholder="Write a compelling summary..."
                                                       @bind-Value="@model.ShortDescription"
                                                       PreviewFunction="ReplaceShortCodes"></MarkdownTextArea>
@@ -69,7 +68,7 @@
                                         Content                        <span class="badge bg-secondary ms-2 fw-medium">@ReadingTimeCalculator.GetWordCount(model.Content) words</span>
                         <span class="badge bg-info ms-1 fw-medium">~@GetEstimatedReadTime() min read</span>
                                     </label>
-                                    <MarkdownTextArea Id="content" Class="form-control border-0 shadow-none" 
+                                    <MarkdownTextArea Id="content" Class="form-control border-0 shadow-none"
                                                       Rows="25" Placeholder="Start writing your amazing content..."
                                                       PreviewFunction="ReplaceShortCodes"
                                                       @bind-Value="@model.Content"></MarkdownTextArea>
@@ -77,7 +76,7 @@
 
                                     <div class="position-absolute top-0 end-0 m-3">
                                         <div class="btn-group">
-                                            <button class="btn btn-outline-primary btn-sm dropdown-toggle" type="button" 
+                                            <button class="btn btn-outline-primary btn-sm dropdown-toggle" type="button"
                                                     data-bs-toggle="dropdown" aria-expanded="false">
                                                 Tools
                                             </button>
@@ -129,8 +128,8 @@
                             </div>
                             <div class="card-body">
                                 <div class="form-floating">
-                                    <InputText type="text" class="form-control" id="tags" 
-                                               placeholder="technology, programming, tutorial" 
+                                    <InputText type="text" class="form-control" id="tags"
+                                               placeholder="technology, programming, tutorial"
                                                @bind-Value="model.Tags" />
                                     <label for="tags">Tags (comma separated)</label>
                                 </div>
@@ -181,7 +180,7 @@
                                     }
                                     <ValidationMessage For="() => model.ScheduledPublishDate" class="text-danger small mt-1"></ValidationMessage>
                                 </div>
-                                
+
                                 @if (BlogPost is not null && !IsScheduled)
                                 {
                                     <div class="form-check form-switch">
@@ -202,8 +201,8 @@
                             <div class="card-body">
                                 <div class="mb-3">
                                     <div class="form-floating">
-                                        <InputText type="url" class="form-control" id="preview" 
-                                                   placeholder="https://example.com/image.jpg" 
+                                        <InputText type="url" class="form-control" id="preview"
+                                                   placeholder="https://example.com/image.jpg"
                                                    @bind-Value="model.PreviewImageUrl" />
                                         <label for="preview">Primary Image URL</label>
                                     </div>
@@ -211,8 +210,8 @@
                                 </div>
                                 <div class="mb-3">
                                     <div class="form-floating">
-                                        <InputText type="url" class="form-control" id="fallback-preview" 
-                                                   placeholder="https://example.com/fallback.jpg" 
+                                        <InputText type="url" class="form-control" id="fallback-preview"
+                                                   placeholder="https://example.com/fallback.jpg"
                                                    @bind-Value="model.PreviewImageUrlFallback" />
                                         <label for="fallback-preview">Fallback Image URL</label>
                                     </div>
@@ -306,17 +305,17 @@
         {
             return "Editing";
         }
-        
+
         if (model.IsPublished)
         {
             return "Ready to Publish";
         }
-        
+
         if (IsScheduled)
         {
             return "Scheduled";
         }
-        
+
         return "Draft";
     }
 
@@ -324,7 +323,7 @@
     {
         if (string.IsNullOrWhiteSpace(model.Content))
             return 1;
-            
+
         return ReadingTimeCalculator.CalculateReadingTime(model.Content);
     }
 
diff --git a/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/FeatureInfoDialog.razor b/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/FeatureInfoDialog.razor
index 299668f0..892a1543 100644
--- a/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/FeatureInfoDialog.razor
+++ b/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/FeatureInfoDialog.razor
@@ -4,7 +4,7 @@
     changes.</p>
     <p>Use with caution and check the changelog</p>
     <hr/>
-    <h3 style="display:inline-block">Slide-Show</h3><i class="lab"></i>
+    <h3 class="d-inline-block">Slide-Show</h3><i class="lab"></i>
     <p>Will create a slide-show with images specified by the tag.</p>
     <strong>Usage:</strong>
     <code><pre>&lt;slide-show&gt;
@@ -13,7 +13,7 @@
     &lt;slide-show-image src="https://picsum.photos/550/200" title="Title 3"&gt;&lt;/slide-show-image&gt;
 &lt;/slide-show&gt;</pre></code>
     <hr />
-    <h3 style="display:inline-block">Convert To Markdown</h3><i class="lab"></i>
+    <h3 class="d-inline-block">Convert To Markdown</h3><i class="lab"></i>
     <p>By clicking the button in the editor "Convert to Markdown", you will be able to transform HTML content into Markdown content. You will be also able to restore the original content</p>
 </ModalDialog>
 
diff --git a/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/ShortCodeDialog.razor b/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/ShortCodeDialog.razor
index 257bbc76..e4b04d3b 100644
--- a/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/ShortCodeDialog.razor
+++ b/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/ShortCodeDialog.razor
@@ -23,7 +23,7 @@
 					<tr @onclick="() => AddShortCode(shortCode)" style="cursor: pointer;">
 						<td>@shortCode.Name</td>
 						<td>
-							<div style="max-height: 100px; overflow-y: auto;">
+							<div class="markdown-scrollable">
 								@MarkdownConverter.ToMarkupString(shortCode.MarkdownContent)
 							</div>
 						</td>
diff --git a/src/LinkDotNet.Blog.Web/Features/Admin/Dashboard/Components/VisitCountPerPage.razor b/src/LinkDotNet.Blog.Web/Features/Admin/Dashboard/Components/VisitCountPerPage.razor
index edd3d344..a2325bdc 100644
--- a/src/LinkDotNet.Blog.Web/Features/Admin/Dashboard/Components/VisitCountPerPage.razor
+++ b/src/LinkDotNet.Blog.Web/Features/Admin/Dashboard/Components/VisitCountPerPage.razor
@@ -22,7 +22,7 @@
             {
                 <p id="total-clicks">Loading...</p>
             }
-            <table class="table table-striped table-hover table-active" style="table-layout: fixed">
+            <table class="table table-striped table-hover">
                 <tbody>
                 <tr>
                     <th>Title</th>
diff --git a/src/LinkDotNet.Blog.Web/Features/Components/ConfirmDialog.razor b/src/LinkDotNet.Blog.Web/Features/Components/ConfirmDialog.razor
index a88bc106..47506a94 100644
--- a/src/LinkDotNet.Blog.Web/Features/Components/ConfirmDialog.razor
+++ b/src/LinkDotNet.Blog.Web/Features/Components/ConfirmDialog.razor
@@ -1,8 +1,8 @@
 <ModalDialog @ref="ModalDialog" Title="@Title">
     <h3>@Content</h3>
-    <div class="actions">
-        <button id="ok" @onclick="OnYesButtonPressed" type="button" class="btn btn-primary">Ok</button>
-        <button id="cancel" @onclick="OnNoButtonPressed" type="button" class="btn btn-secondary">Cancel</button>
+    <div class="d-flex justify-content-end gap-2 mt-4">
+	    <button id="ok" @onclick="OnYesButtonPressed" type="button" class="btn btn-primary w-100">Ok</button>
+	    <button id="cancel" @onclick="OnNoButtonPressed" type="button" class="btn btn-secondary w-100" >Cancel</button>
     </div>
 </ModalDialog>
 
diff --git a/src/LinkDotNet.Blog.Web/Features/Components/ConfirmDialog.razor.css b/src/LinkDotNet.Blog.Web/Features/Components/ConfirmDialog.razor.css
deleted file mode 100644
index dad4bcd1..00000000
--- a/src/LinkDotNet.Blog.Web/Features/Components/ConfirmDialog.razor.css
+++ /dev/null
@@ -1,9 +0,0 @@
-.actions {
-    float:right;
-}
-
-.actions * {
-    margin-left: 5px;
-    margin-top: 25px;
-    width: 125px;
-}
\ No newline at end of file
diff --git a/src/LinkDotNet.Blog.Web/Features/Components/ModalDialog.razor b/src/LinkDotNet.Blog.Web/Features/Components/ModalDialog.razor
index 74d6019c..a51fc28c 100644
--- a/src/LinkDotNet.Blog.Web/Features/Components/ModalDialog.razor
+++ b/src/LinkDotNet.Blog.Web/Features/Components/ModalDialog.razor
@@ -1,4 +1,4 @@
-<div class="modal @modalClass" tabindex="-1" role="dialog" style="display:@modalDisplay; overflow-y: auto;">
+<div class="modal @modalClass overflow-auto" tabindex="-1" role="dialog" style="display:@modalDisplay;">
     <div class="modal-dialog modal-lg" role="document">
         <div class="modal-content">
             <div class="modal-header">
diff --git a/src/LinkDotNet.Blog.Web/Features/Components/PreviewImage.razor b/src/LinkDotNet.Blog.Web/Features/Components/PreviewImage.razor
index 19b53ec4..40a97d8b 100644
--- a/src/LinkDotNet.Blog.Web/Features/Components/PreviewImage.razor
+++ b/src/LinkDotNet.Blog.Web/Features/Components/PreviewImage.razor
@@ -1,14 +1,22 @@
 @using Microsoft.AspNetCore.StaticFiles
 @if (string.IsNullOrEmpty(PreviewImageUrlFallback))
 {
-    <img src="@PreviewImageUrl" alt="Preview image blogpost" loading="@LazyLoadTag" decoding="@DecodingTag" />
+	<img src="@PreviewImageUrl"
+	     alt="Preview image blogpost"
+	     loading="@LazyLoadTag"
+	     decoding="@DecodingTag"
+	     class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover" />
 }
 else
 {
-    <picture>
-        <source srcset="@PreviewImageUrl" type="@GetMimeType()"/>
-        <img src="@PreviewImageUrlFallback" alt="Preview image blogpost" loading="@LazyLoadTag" decoding="@DecodingTag" />
-    </picture>
+	<picture class="position-absolute top-0 start-0 w-100 h-100">
+		<source srcset="@PreviewImageUrl" type="@GetMimeType()" />
+		<img src="@PreviewImageUrlFallback"
+		     alt="Preview image blogpost"
+		     loading="@LazyLoadTag"
+		     decoding="@DecodingTag"
+		     class="w-100 h-100 object-fit-cover" />
+	</picture>
 }
 
 @code {
diff --git a/src/LinkDotNet.Blog.Web/Features/Components/PreviewImage.razor.css b/src/LinkDotNet.Blog.Web/Features/Components/PreviewImage.razor.css
deleted file mode 100644
index 02d3ce74..00000000
--- a/src/LinkDotNet.Blog.Web/Features/Components/PreviewImage.razor.css
+++ /dev/null
@@ -1,8 +0,0 @@
-img {
-    position: absolute;
-    top: 0;
-    left: 0;
-    object-fit: cover;
-    height: 100%;
-    width: 100%;
-}
\ No newline at end of file
diff --git a/src/LinkDotNet.Blog.Web/Features/Components/ShortBlogPost.razor.css b/src/LinkDotNet.Blog.Web/Features/Components/ShortBlogPost.razor.css
deleted file mode 100644
index 23158dea..00000000
--- a/src/LinkDotNet.Blog.Web/Features/Components/ShortBlogPost.razor.css
+++ /dev/null
@@ -1,197 +0,0 @@
-.blog-card {
-    display: flex;
-    flex-direction: column;
-    box-shadow: 0 3px 7px -1px rgba(0, 0, 0, 0.1);
-    margin: 1rem auto 1.6%;
-    line-height: 1.4;
-    border-radius: 5px;
-    overflow: hidden;
-    z-index: 0;
-    transform: scale(1.0);
-    transition: transform 0.35s;
-    content-visibility: auto;
-    contain-intrinsic-size: 300px;
-}
-
-.blog-card:hover {
-    transform: scale(1.05);
-    transition: 1s ease;
-    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
-}
-
-.blog-card a {
-    color: inherit;
-}
-
-.blog-card .meta {
-    position: relative;
-    z-index: 0;
-    height: 200px;
-}
-.blog-card .details,
-.blog-card .details ul {
-    margin: auto;
-    padding: 0;
-    list-style: none;
-}
-.blog-card .details {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: -100%;
-    margin: auto;
-    transition: left 0.5s;
-    background: rgba(0, 0, 0, 0.6);
-    color: var(--bs-white);
-    padding: 10px;
-    width: 100%;
-    font-size: 0.9rem;
-}
-.blog-card .details a {
-    -webkit-text-decoration: dotted underline;
-    text-decoration: dotted underline;
-}
-.blog-card .details ul li {
-    display: inline-block;
-}
-
-.blog-card .details li:before {
-    margin-right: 10px;
-}
-
-.blog-card .details li ul:before {
-    margin-right: 10px;
-}
-
-.blog-card .details .tags li {
-    margin-right: 2px;
-}
-
-.blog-card .details .tags ul:before {
-    font-family: 'icons';
-    font-weight: 900;
-    content: "\e936";
-}
-
-.blog-card .description {
-    padding: 1rem;
-    background: var(--background);
-    position: relative;
-    z-index: 1;
-}
-
-.blog-card .description .header {
-	display: flex;
-	justify-content: space-between;
-}
-
-.blog-card .description .read-more {
-    text-align: right;
-}
-.blog-card .description .read-more a {
-    display: inline-block;
-    position: relative;
-}
-.blog-card .description .read-more a:before {
-    font-family: 'icons';
-    content: '\ea42';
-		display: inline-block;
-    font-weight: 900;
-    text-decoration: none;
-    margin-right: -5px;
-    opacity: 0;
-    transition: margin 0.3s, opacity 0.3s;
-		vertical-align: bottom;
-}
-.blog-card .description .read-more a:hover:before {
-    margin-right: 8px;
-    opacity: 1;
-		display: inline-block;
-}
-
-.blog-card .read-time:before {
-    font-family: 'icons';
-    font-weight: 900;
-    content: "\e94f";
-}
-
-.blog-card p {
-    position: relative;
-    margin: 1rem 0 0;
-}
-.blog-card p:first-of-type {
-    margin-top: 1.25rem;
-}
-.blog-card p:first-of-type:before {
-    content: "";
-    position: absolute;
-    height: 5px;
-    width: 35px;
-    top: -0.75rem;
-    border-radius: 3px;
-}
-.blog-card:hover .details {
-    left: 0;
-}
-
-.goto-tag {
-	color: white !important;
-}
-
-.goto-tag:hover {
-	color: #D7D7D7 !important;
-}
-
-.schedule {
-	background-color: #28a745;
-}
-
-.draft {
-	background-color: #ff8700;
-}
-
-.card-title {
-    font-weight: 600;
-    line-height: 1.3;
-    margin-right: 1rem;
-}
-
-.card-content {
-    font-weight: 300;
-}
-
-@media (min-width: 640px) {
-    .blog-card {
-        flex-direction: row;
-        max-width: 1200px;
-    }
-    .blog-card .meta {
-        flex-basis: 30%;
-        height: auto;
-    }
-    .blog-card .description {
-        flex-basis: 70%;
-    }
-    .blog-card .description:before {
-        transform: skewX(-3deg);
-        content: "";
-		background: var(--background);
-        width: 30px;
-        position: absolute;
-        left: -10px;
-        top: 0;
-        bottom: 0;
-        z-index: -1;
-    }
-    .blog-card.alt {
-        flex-direction: row-reverse;
-    }
-    .blog-card.alt .description:before {
-        left: inherit;
-        right: -10px;
-        transform: skew(3deg);
-    }
-    .blog-card.alt .details {
-        padding-left: 25px;
-    }
-}
diff --git a/src/LinkDotNet.Blog.Web/Features/Home/Components/Footer.razor b/src/LinkDotNet.Blog.Web/Features/Home/Components/Footer.razor
index 549dd9c3..ca38619e 100644
--- a/src/LinkDotNet.Blog.Web/Features/Home/Components/Footer.razor
+++ b/src/LinkDotNet.Blog.Web/Features/Home/Components/Footer.razor
@@ -4,15 +4,16 @@
 @inject IOptions<ProfileInformation> ProfileInformation
 @inject IOptions<SupportMeConfiguration> SupportConfiguration
 
-<footer id="footer" class="text-center">
-    <span class="py-2 mb-0 text-body-secondary">© @DateTime.Now.Year @CopyrightName</span>
-    @if (SupportConfiguration.Value.ShowInFooter)
-    {
-        <div class="pb-2" style="display:flex;justify-content:center">
-            <DonationSection />
-        </div>
-    }
+<footer class="position-absolute bottom-0 w-100 text-center" style="height: 2.5rem;">
+	<span class="py-2 mb-0 text-body-secondary">© @DateTime.Now.Year @CopyrightName</span>
+	@if (SupportConfiguration.Value.ShowInFooter)
+	{
+		<div class="pb-2 d-flex justify-content-center">
+			<DonationSection />
+		</div>
+	}
 </footer>
+
 @code {
     private string CopyrightName => AppConfiguration.Value.IsAboutMeEnabled
         ? ProfileInformation.Value.Name
diff --git a/src/LinkDotNet.Blog.Web/Features/Home/Components/Footer.razor.css b/src/LinkDotNet.Blog.Web/Features/Home/Components/Footer.razor.css
deleted file mode 100644
index b04fd83e..00000000
--- a/src/LinkDotNet.Blog.Web/Features/Home/Components/Footer.razor.css
+++ /dev/null
@@ -1,6 +0,0 @@
-#footer {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    height: 2.5rem;
-}
\ No newline at end of file
diff --git a/src/LinkDotNet.Blog.Web/Features/Home/Components/IntroductionCard.razor b/src/LinkDotNet.Blog.Web/Features/Home/Components/IntroductionCard.razor
index 60ab04cb..f41bda66 100644
--- a/src/LinkDotNet.Blog.Web/Features/Home/Components/IntroductionCard.razor
+++ b/src/LinkDotNet.Blog.Web/Features/Home/Components/IntroductionCard.razor
@@ -5,18 +5,18 @@
 @inject IOptions<SupportMeConfiguration> SupportConfiguration
 
 <div style="@IntroductionStyle" class="@IntroductionClass">
-    <div class="introduction-container">
-        <div class="profile-picture" style="--profile-image: url(@Introduction.Value.ProfilePictureUrl)">
-        </div>
-        <div class="profile-text d-flex flex-column">
-            <div>@MarkdownConverter.ToMarkupString(Introduction.Value.Description)</div>
-            <SocialAccounts Social="@Social.Value"></SocialAccounts>
-            @if (SupportConfiguration.Value.ShowUnderIntroduction)
-            {
-                <DonationSection />
-            }
-        </div>
-    </div>
+	<div class="introduction-container">
+		<div class="profile-picture" style="background-image: url('@Introduction.Value.ProfilePictureUrl');">
+		</div>
+		<div class="profile-text d-flex flex-column">
+			<div>@MarkdownConverter.ToMarkupString(Introduction.Value.Description)</div>
+			<SocialAccounts Social="@Social.Value"></SocialAccounts>
+			@if (SupportConfiguration.Value.ShowUnderIntroduction)
+			{
+				<DonationSection />
+			}
+		</div>
+	</div>
 </div>
 @code {
     private string IntroductionClass => !string.IsNullOrEmpty(Introduction.Value.BackgroundUrl)
@@ -24,6 +24,6 @@
         : string.Empty;
 
     private string IntroductionStyle => !string.IsNullOrEmpty(Introduction.Value.BackgroundUrl)
-        ? $"--profile-background: url({Introduction.Value.BackgroundUrl})"
-        : string.Empty;
+	    ? $"background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url({Introduction.Value.BackgroundUrl})"
+	    : string.Empty;
 }
diff --git a/src/LinkDotNet.Blog.Web/Features/Home/Components/IntroductionCard.razor.css b/src/LinkDotNet.Blog.Web/Features/Home/Components/IntroductionCard.razor.css
deleted file mode 100644
index 74028d33..00000000
--- a/src/LinkDotNet.Blog.Web/Features/Home/Components/IntroductionCard.razor.css
+++ /dev/null
@@ -1,40 +0,0 @@
-.introduction-background {
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), var(--profile-background);
-}
-
-.introduction-container {
-    height: 438px;
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
-    grid-template-rows: 0.5fr 1fr 1fr 1fr;
-    gap: 10px;
-    grid-template-areas:
-    ". . . . ."
-    ". . profile-picture . ."
-    ". profile-text profile-text profile-text ."
-    ". profile-text profile-text profile-text .";
-}
-
-.profile-picture {
-    grid-area: profile-picture;
-    width: 175px;
-    height: 175px;
-    border-radius: 50%;
-    border: white;
-    margin: auto;
-    box-shadow: 0 0 0 4px white;
-    background-image: var(--profile-image);
-    background-repeat: no-repeat;
-    background-position: center center;
-    background-size: cover;
-}
-
-.profile-text {
-    margin: auto;
-    grid-area: profile-text;
-    font-size: clamp(1.0rem, 0.6479rem + 1vw, 1.4rem);
-    line-height: clamp(1.5em, 0.6479rem + 1.1268vw, 2.25em);
-    text-align: center;
-}
\ No newline at end of file
diff --git a/src/LinkDotNet.Blog.Web/Features/Home/Components/NavMenu.razor b/src/LinkDotNet.Blog.Web/Features/Home/Components/NavMenu.razor
index c2ca1329..9c95d2d2 100644
--- a/src/LinkDotNet.Blog.Web/Features/Home/Components/NavMenu.razor
+++ b/src/LinkDotNet.Blog.Web/Features/Home/Components/NavMenu.razor
@@ -64,6 +64,7 @@
         </div>
     </div>
 </nav>
+
 @code {
     private string currentUri = string.Empty;
 
diff --git a/src/LinkDotNet.Blog.Web/Features/Home/Components/NavMenu.razor.css b/src/LinkDotNet.Blog.Web/Features/Home/Components/NavMenu.razor.css
deleted file mode 100644
index 29921cf9..00000000
--- a/src/LinkDotNet.Blog.Web/Features/Home/Components/NavMenu.razor.css
+++ /dev/null
@@ -1,10 +0,0 @@
-.barcode {
-    text-decoration: none;
-    font-weight: 400;
-    font-size: 2.5rem;
-}
-
-::deep .navbar-nav li {
-    padding-left: 1rem;
-    white-space: nowrap;
-}
diff --git a/src/LinkDotNet.Blog.Web/Features/Home/Components/SearchInput.razor b/src/LinkDotNet.Blog.Web/Features/Home/Components/SearchInput.razor
index 4b5df8ee..06157e6d 100644
--- a/src/LinkDotNet.Blog.Web/Features/Home/Components/SearchInput.razor
+++ b/src/LinkDotNet.Blog.Web/Features/Home/Components/SearchInput.razor
@@ -1,9 +1,10 @@
 <div class="search-bar">
-    <input type="text" class="search-bar-input" placeholder="search" aria-label="search" @bind-value="searchTerm"
-    @onkeyup="@CheckForEnter" title="Search for blog post via title or tags"/>
-    <button class="search-bar-button" aria-label="search submit" @onclick="CallSearchEntered"><i class="search"></i></button>
+	<input type="text" class="search-bar-input" placeholder="search" aria-label="search" @bind-value="searchTerm"
+	       @onkeyup="@CheckForEnter" title="Search for blog post via title or tags"/>
+	<button class="search-bar-button" aria-label="search submit" @onclick="CallSearchEntered"><i class="search"></i></button>
 </div>
 
+
 @code {
     private string searchTerm = string.Empty;
 
diff --git a/src/LinkDotNet.Blog.Web/Features/Home/Components/SearchInput.razor.css b/src/LinkDotNet.Blog.Web/Features/Home/Components/SearchInput.razor.css
deleted file mode 100644
index 1b83e371..00000000
--- a/src/LinkDotNet.Blog.Web/Features/Home/Components/SearchInput.razor.css
+++ /dev/null
@@ -1,56 +0,0 @@
-.search-bar {
-    border: 2px solid;
-    display: flex;
-    border-radius: 100vh;
-    overflow: hidden;
-    height: 40px;
-    padding: 3px;
-    width: 40px;
-    position: relative;
-    transition: width 300ms ease-in-out;
-}
-
-.search-bar-input {
-    flex-grow: 1;
-    padding: 0 .5em;
-    border: 0;
-    opacity: 0;
-    background: transparent;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 2;
-    cursor: pointer;
-    font-weight: 400;
-    color: var(--bs-navbar-color);
-}
-
-.search-bar-input:focus {
-    outline: 0;
-}
-.search-bar-button {
-    border: 0;
-    border-radius: 100vh;
-    margin-left: auto;
-    width: 30px;
-    height: 30px;
-    cursor: pointer;
-    background: transparent;
-	/*
-		TODO: That is really ugly
-		The problem is that every other button is behind nav-
-	 */
-	color: var(--bs-navbar-color);
-}
-
-.search-bar:focus-within {
-    width: 170px;
-}
-
-.search-bar:focus-within .search-bar-input {
-    cursor: initial;
-    opacity: 1;
-    z-index: initial;
-    max-width: 130px;
-}
diff --git a/src/LinkDotNet.Blog.Web/Features/ShowBlogPost/Components/ReadingIndicator.razor b/src/LinkDotNet.Blog.Web/Features/ShowBlogPost/Components/ReadingIndicator.razor
index 6441191d..70085a7f 100644
--- a/src/LinkDotNet.Blog.Web/Features/ShowBlogPost/Components/ReadingIndicator.razor
+++ b/src/LinkDotNet.Blog.Web/Features/ShowBlogPost/Components/ReadingIndicator.razor
@@ -1,12 +1,13 @@
 @inject IJSRuntime JSRuntime
 
 <div class="progress-container" @ref="progressContainer">
-    <svg class="progress-circle" viewBox="0 0 36 36">
-        <circle class="progress-bg" cx="18" cy="18" r="15.91549431" />
-        <circle class="progress-bar" id="progressBar" cx="18" cy="18" r="15.91549431" />
-    </svg>
+	<svg class="progress-circle" viewBox="0 0 36 36">
+		<circle class="progress-bg" cx="18" cy="18" r="15.91549431" />
+		<circle class="progress-bar" id="progressBar" cx="18" cy="18" r="15.91549431" />
+	</svg>
 </div>
 
+
 @code {
 	[Parameter, EditorRequired]
 	public required string ContainerCssSelector { get; set; }
diff --git a/src/LinkDotNet.Blog.Web/Features/ShowBlogPost/Components/ReadingIndicator.razor.css b/src/LinkDotNet.Blog.Web/Features/ShowBlogPost/Components/ReadingIndicator.razor.css
deleted file mode 100644
index dbb9cfa0..00000000
--- a/src/LinkDotNet.Blog.Web/Features/ShowBlogPost/Components/ReadingIndicator.razor.css
+++ /dev/null
@@ -1,44 +0,0 @@
-.progress-container {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    z-index: 1000;
-    opacity: 0;
-    transition: opacity 1.5s;
-}
-
-.progress-container.visible {
-    opacity: 1;
-}
-
-@keyframes fadeOut {
-     to {
-         opacity: 0;
-     }
- }
-
-.progress-circle {
-    width: 50px;
-    height: 50px;
-}
-
-.progress-bg {
-    fill: none;
-    stroke: #f3f3f3;
-    stroke-width: 4;
-}
-
-.progress-bar {
-    fill: none;
-    stroke: #4caf50;
-    stroke-width: 4;
-    stroke-linecap: round;
-    transform-origin: center;
-    transform: rotate(-90deg);
-    stroke-dasharray: 100, 100;
-    stroke-dashoffset: 100;
-}
-
-[data-bs-theme='light'] .progress-bg {
-    stroke: #444444;
-}
\ No newline at end of file
diff --git a/src/LinkDotNet.Blog.Web/Features/ShowBlogPost/ShowBlogPostPage.razor.css b/src/LinkDotNet.Blog.Web/Features/ShowBlogPost/ShowBlogPostPage.razor.css
deleted file mode 100644
index a52a0558..00000000
--- a/src/LinkDotNet.Blog.Web/Features/ShowBlogPost/ShowBlogPostPage.razor.css
+++ /dev/null
@@ -1,36 +0,0 @@
-.blog-container {
-    background: var(--background);
-    width: clamp(60%, 2vw, 90%);
-    box-shadow: 0 3px 7px -1px rgba(0, 0, 0, 0.1);
-    border-radius: 5px;
-    padding: 20px;
-}
-
-.blogpost-tag:before {
-    font-family: 'icons';
-    font-weight: 900;
-    content: "\e936";
-}
-
-.blogpost-content {
-    padding-top: 20px;
-    overflow-x: hidden;
-}
-
-.blogpost-content img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-}
-
-@media only screen and (max-width: 700px) {
-    .blog-outer-box .blog-container {
-        width: 90%;
-    }
-}
-
-@media only screen and (min-width: 700px) and (max-width: 1024px) {
-    .blog-outer-box .blog-container {
-        width: 80%;
-    }
-}
diff --git a/src/LinkDotNet.Blog.Web/Features/SupportMe/Components/Patreon.razor b/src/LinkDotNet.Blog.Web/Features/SupportMe/Components/Patreon.razor
index 9b965ab7..94fc5b24 100644
--- a/src/LinkDotNet.Blog.Web/Features/SupportMe/Components/Patreon.razor
+++ b/src/LinkDotNet.Blog.Web/Features/SupportMe/Components/Patreon.razor
@@ -1,7 +1,6 @@
 <a href="https://www.patreon.com/@PatreonName" target="_blank" bind
-   class="text-decoration-none border border-dark rounded p-2 link"
-   style="background: #fb6856">
-	<i class="me-2" style="color: white">
+   class="text-decoration-none border border-dark rounded p-2 link bg-danger">
+	<i class="me-2 text-white">
 		<svg style="height: 1em; width: 1em;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
 			<path d="M512 194.8c0 101.3-82.4 183.8-183.8 183.8-101.7 0-184.4-82.4-184.4-183.8 0-101.6 82.7-184.3 184.4-184.3C429.6 10.5 512 93.2 512 194.8zM0 501.5h90v-491H0v491z" fill="white"></path>
 		</svg>
diff --git a/src/LinkDotNet.Blog.Web/wwwroot/css/basic.css b/src/LinkDotNet.Blog.Web/wwwroot/css/basic.css
index 50085337..6a1033d3 100644
--- a/src/LinkDotNet.Blog.Web/wwwroot/css/basic.css
+++ b/src/LinkDotNet.Blog.Web/wwwroot/css/basic.css
@@ -172,3 +172,495 @@ code {
     right: 0.75rem;
     top: 0.5rem;
 }
+
+/*region Skilltable.razor */
+.table-container {
+	overflow-x: auto;
+}
+
+.skill-table {
+	margin-top: 20px;
+	width: 100%;
+}
+
+.skill-table td:first-of-type {
+	width:10%;
+}
+
+.skill-table td {
+	width: 30%;
+	border-top: 1px var(--bs-light) solid;
+	vertical-align: top;
+	min-width: 100px;
+}
+
+.skill-table td div {
+	display: inline-block;
+	margin-right: 8px;
+	margin-top: 12px;
+	margin-bottom: 12px;
+}
+/*endregion */
+
+/*#region IntroductionCard.razor */
+.introduction-background {
+	background-repeat: no-repeat;
+	background-size: cover;
+}
+
+.introduction-container {
+	height: 438px;
+	display: grid;
+	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+	grid-template-rows: 0.5fr 1fr 1fr 1fr;
+	gap: 10px;
+	grid-template-areas:
+    ". . . . ."
+    ". . profile-picture . ."
+    ". profile-text profile-text profile-text ."
+    ". profile-text profile-text profile-text .";
+}
+
+.profile-picture {
+	grid-area: profile-picture;
+	width: 175px;
+	height: 175px;
+	border-radius: 50%;
+	border: white;
+	margin: auto;
+	box-shadow: 0 0 0 4px white;
+	background-repeat: no-repeat;
+	background-position: center center;
+	background-size: cover;
+}
+
+.profile-text {
+	margin: auto;
+	grid-area: profile-text;
+	font-size: clamp(1.0rem, 0.6479rem + 1vw, 1.4rem);
+	line-height: clamp(1.5em, 0.6479rem + 1.1268vw, 2.25em);
+	text-align: center;
+}
+/*#endregion */
+
+/*region NavMenu.razor */
+.barcode {
+	text-decoration: none;
+	font-weight: 400;
+	font-size: 2.5rem;
+}
+
+::deep .navbar-nav li {
+	padding-left: 1rem;
+	white-space: nowrap;
+}
+/*endregion */
+
+/*region Profile.razor */
+.profile-card {
+	display: inline-block;
+	box-shadow: 0 3px 7px -1px rgba(0, 0, 0, 0.1);
+	width: 100%;
+	border-radius: 8px;
+}
+
+.profile-name {
+	padding: 20px;
+	font-size: 1.25em;
+	line-height: 1.5em;
+}
+
+.profile-name:first-child {
+	background: var(--tag-background);
+}
+
+.profile-image {
+	padding: 30px;
+	background: var(--tag-background);
+}
+
+.profile-image img {
+	width: 100%;
+	margin: auto;
+	border-radius: 50vw;
+	display: block;
+}
+
+.profile-keypoints {
+	background-color: var(--tag-background);
+	padding-top: 10px;
+	padding-left: 2.5em;
+	padding-right: 1.5em;
+	list-style: none;
+	margin-bottom: 0;
+}
+
+.profile-keypoints li {
+	padding-bottom: 0.6em;
+	letter-spacing: 0.05em;
+	display: flex;
+}
+
+/* As the MarkupComponent is a base class we have to use deep */
+::deep .profile-keypoints li p {
+	display: inline;
+}
+
+.item-draggable {
+	cursor: grab;
+}
+/*#endregion */
+
+/*region TabbedNavigation.razor */
+.nav>.nav-item>button {
+	border: 0;
+	background: transparent !important;
+	color: var(--bs-body-color) !important;
+}
+/*#endregion */
+
+/*#region ShortBlogPost.razor */
+.blog-card {
+	display: flex;
+	flex-direction: column;
+	box-shadow: 0 3px 7px -1px rgba(0, 0, 0, 0.1);
+	margin: 1rem auto 1.6%;
+	line-height: 1.4;
+	border-radius: 5px;
+	overflow: hidden;
+	z-index: 0;
+	transform: scale(1.0);
+	transition: transform 0.35s;
+	content-visibility: auto;
+	contain-intrinsic-size: 300px;
+}
+
+.blog-card:hover {
+	transform: scale(1.05);
+	transition: 1s ease;
+	box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+}
+
+.blog-card a {
+	color: inherit;
+}
+
+.blog-card .meta {
+	position: relative;
+	z-index: 0;
+	height: 200px;
+}
+
+.blog-card .details,
+.blog-card .details ul {
+	margin: auto;
+	padding: 0;
+	list-style: none;
+}
+
+.blog-card .details {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: -100%;
+	margin: auto;
+	transition: left 0.5s;
+	background: rgba(0, 0, 0, 0.6);
+	color: var(--bs-white);
+	padding: 10px;
+	width: 100%;
+	font-size: 0.9rem;
+}
+
+.blog-card .details a {
+	-webkit-text-decoration: dotted underline;
+	text-decoration: dotted underline;
+}
+
+.blog-card .details ul li {
+	display: inline-block;
+}
+
+.blog-card .details li:before {
+	margin-right: 10px;
+}
+
+.blog-card .details li ul:before {
+	margin-right: 10px;
+}
+
+.blog-card .details .tags li {
+	margin-right: 2px;
+}
+
+.blog-card .details .tags ul:before {
+	font-family: 'icons';
+	font-weight: 900;
+	content: "\e936";
+}
+
+.blog-card .description {
+	padding: 1rem;
+	background: var(--background);
+	position: relative;
+	z-index: 1;
+}
+
+.blog-card .description .header {
+	display: flex;
+	justify-content: space-between;
+}
+
+.blog-card .description .read-more {
+	text-align: right;
+}
+
+.blog-card .description .read-more a {
+	display: inline-block;
+	position: relative;
+}
+
+.blog-card .description .read-more a:before {
+	font-family: 'icons';
+	content: '\ea42';
+	display: inline-block;
+	font-weight: 900;
+	text-decoration: none;
+	margin-right: -5px;
+	opacity: 0;
+	transition: margin 0.3s, opacity 0.3s;
+	vertical-align: bottom;
+}
+
+.blog-card .description .read-more a:hover:before {
+	margin-right: 8px;
+	opacity: 1;
+	display: inline-block;
+}
+
+.blog-card p {
+	position: relative;
+	margin: 1rem 0 0;
+}
+
+.blog-card p:first-of-type {
+	margin-top: 1.25rem;
+}
+
+.blog-card p:first-of-type:before {
+	content: "";
+	position: absolute;
+	height: 5px;
+	width: 35px;
+	top: -0.75rem;
+	border-radius: 3px;
+}
+
+.blog-card:hover .details {
+	left: 0;
+}
+
+.goto-tag {
+	color: white !important;
+}
+
+.goto-tag:hover {
+	color: #D7D7D7 !important;
+}
+
+@media (min-width: 640px) {
+	.blog-card {
+		flex-direction: row;
+		max-width: 1200px;
+	}
+	.blog-card .meta {
+		flex-basis: 30%;
+		height: auto;
+	}
+	.blog-card .description {
+		flex-basis: 70%;
+	}
+	.blog-card .description:before {
+		transform: skewX(-3deg);
+		content: "";
+		background: var(--background);
+		width: 30px;
+		position: absolute;
+		left: -10px;
+		top: 0;
+		bottom: 0;
+		z-index: -1;
+	}
+	.blog-card.alt {
+		flex-direction: row-reverse;
+	}
+	.blog-card.alt .description:before {
+		left: inherit;
+		right: -10px;
+		transform: skew(3deg);
+	}
+	.blog-card.alt .details {
+		padding-left: 25px;
+	}
+}
+
+.schedule {
+	background-color: #28a745;
+}
+
+.draft {
+	background-color: #ff8700;
+}
+/*#endregion */
+
+/*region SearchInput.razor */
+.search-bar {
+	border: 2px solid;
+	display: flex;
+	border-radius: 100vh;
+	overflow: hidden;
+	height: 40px;
+	padding: 3px;
+	width: 40px;
+	position: relative;
+	transition: width 300ms ease-in-out;
+}
+
+.search-bar-input {
+	flex-grow: 1;
+	padding: 0 .5em;
+	border: 0;
+	opacity: 0;
+	background: transparent;
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	z-index: 2;
+	cursor: pointer;
+	font-weight: 400;
+	color: var(--bs-navbar-color);
+}
+
+.search-bar-input:focus {
+	outline: 0;
+}
+.search-bar-button {
+	border: 0;
+	border-radius: 100vh;
+	margin-left: auto;
+	width: 30px;
+	height: 30px;
+	cursor: pointer;
+	background: transparent;
+	/*
+		TODO: That is really ugly
+		The problem is that every other button is behind nav-
+	 */
+	color: var(--bs-navbar-color);
+}
+
+.search-bar:focus-within {
+	width: 170px;
+}
+
+.search-bar:focus-within .search-bar-input {
+	cursor: initial;
+	opacity: 1;
+	z-index: initial;
+	max-width: 130px;
+}
+/*#endregion */
+
+/*#region ReadingIndicator.razor */
+.progress-container {
+	position: fixed;
+	bottom: 20px;
+	right: 20px;
+	z-index: 1000;
+	opacity: 0;
+	transition: opacity 1.5s;
+}
+
+.progress-container.visible {
+	opacity: 1;
+}
+
+@keyframes fadeOut {
+	to {
+		opacity: 0;
+	}
+}
+
+.progress-circle {
+	width: 50px;
+	height: 50px;
+}
+
+.progress-bg {
+	fill: none;
+	stroke: #f3f3f3;
+	stroke-width: 4;
+}
+
+.progress-bar {
+	fill: none;
+	stroke: #4caf50;
+	stroke-width: 4;
+	stroke-linecap: round;
+	transform-origin: center;
+	transform: rotate(-90deg);
+	stroke-dasharray: 100, 100;
+	stroke-dashoffset: 100;
+}
+
+[data-bs-theme='light'] .progress-bg {
+	stroke: #444444;
+}
+/*#endregion */
+
+/*region ShowBlogPostPage.razor */
+.blog-container {
+	background: var(--background);
+	width: clamp(60%, 2vw, 90%);
+	box-shadow: 0 3px 7px -1px rgba(0, 0, 0, 0.1);
+	border-radius: 5px;
+	padding: 20px;
+}
+
+.blogpost-tag:before {
+	font-family: 'icons';
+	font-weight: 900;
+	content: "\e936";
+}
+
+.blogpost-content {
+	padding-top: 20px;
+	overflow-x: hidden;
+}
+
+.blogpost-content img {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+
+@media only screen and (max-width: 700px) {
+	.blog-outer-box .blog-container {
+		width: 90%;
+	}
+}
+
+@media only screen and (min-width: 700px) and (max-width: 1024px) {
+	.blog-outer-box .blog-container {
+		width: 80%;
+	}
+}
+/*#endregion */
+
+/*region ShortCodeDialog.razor */
+.markdown-scrollable {
+	overflow: auto;
+	max-height: 100%;
+}
+/*#endregion */