diff --git a/Wave/Components/ArticleCardList.razor b/Wave/Components/ArticleCardList.razor
index 60beffb..c443424 100644
--- a/Wave/Components/ArticleCardList.razor
+++ b/Wave/Components/ArticleCardList.razor
@@ -1,7 +1,15 @@
 @using Wave.Data
 
 @if (Articles.Count < 1) {
-	<p>No Articles</p>
+	<div class="flex space-x-3 bg-base-200 text-base-content p-2 rounded">
+		<div class="skeleton h-32 w-32 max-lg:hidden"></div>
+		<div class="flex flex-col space-y-1 p-2">
+			<h2 class="card-title line-clamp-1">No Articles</h2>
+			<div class="skeleton h-4 w-28"></div>
+			<div class="skeleton h-4 w-28"></div>
+			<div class="skeleton h-4 w-20"></div>
+		</div>
+	</div>
 } else {
 	<div class="flex flex-col gap-4">
 		@foreach (var article in Articles.OrderByDescending(a => a.PublishDate)) {
diff --git a/Wave/Components/ArticleComponent.razor b/Wave/Components/ArticleComponent.razor
index 9dd338f..663f2c4 100644
--- a/Wave/Components/ArticleComponent.razor
+++ b/Wave/Components/ArticleComponent.razor
@@ -47,37 +47,52 @@
 	</header>
 </SectionContent>
 
-@if (Article.Headings.Count > 0) {
-	<section class="mb-3 p-2 bg-base-200 rounded-box w-80 float-start mr-2 mb-2" data-nosnippet>
-		<h2 class="text-xl font-bold mb-3">@Localizer["TableOfContents"]</h2>
-		<ul class="menu p-0 [&_li>*]:rounded-none">
-			@{
-				int level = 1;
-				foreach (var heading in Article.Headings.OrderBy(h => h.Order)) {
-					int headingLevel = heading.Order % 10;
+@if (Article.Headings.Count > 1) {
+	<section class="p-2 bg-base-200 max-w-[28rem] rounded-box" data-nosnippet>
+		<details class="group" open>
+			<summary class="list-none">
+				<div class="flex gap-2 mb-2">
+					<div class="cursor-pointer grid place-content-center">
+						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4 block group-open:hidden">
+							<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
+						</svg>
+						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4 hidden group-open:block">
+							<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
+						</svg>
+					</div>
+					<h2 class="cursor-pointer text-xl font-bold select-none">@Localizer["TableOfContents"]</h2>
+				</div>
+			</summary>
+			<ul class="menu p-0 pl-4 [&_li>*]:rounded-none">
+				@{
+					int level = 1;
+					foreach (var heading in Article.Headings.OrderBy(h => h.Order)) {
+						int headingLevel = heading.Order % 10;
 
-					while (headingLevel < level) {
-						level--;
-						@(new MarkupString("</ul></li>"))
+						while (headingLevel < level) {
+							level--;
+							@(new MarkupString("</ul></li>"))
+						}
+
+						while (headingLevel > level) {
+							level++;
+							@(new MarkupString("<li><ul>"))
+						}
+
+						<li>
+							<a href="/@Navigation.ToBaseRelativePath(Navigation.Uri)#@heading.Anchor">@((MarkupString)heading.Label)</a>
+						</li>
 					}
 
-					while (headingLevel > level) {
-						level++;
+					while (level > 1) {
+						level--;
 						@(new MarkupString("<li><ul>"))
 					}
-
-					<li>
-						<a href="/@Navigation.ToBaseRelativePath(Navigation.Uri)#@heading.Anchor">@((MarkupString)heading.Label)</a>
-					</li>
 				}
-
-				while (level > 1) {
-					level--;
-					@(new MarkupString("<li><ul>"))
-				}
-			}
-		</ul>
+			</ul>
+		</details>
 	</section>
+	<hr class="my-6" />
 }
 
 <article class="mb-6">
diff --git a/Wave/Components/Pages/ArticleEditor.razor b/Wave/Components/Pages/ArticleEditor.razor
index 37ef23f..3988b79 100644
--- a/Wave/Components/Pages/ArticleEditor.razor
+++ b/Wave/Components/Pages/ArticleEditor.razor
@@ -1,7 +1,6 @@
 @page "/article/new"
 @page "/article/{id:guid}/edit"
 
-@using System.ComponentModel.DataAnnotations
 @using Vite.AspNetCore
 @using Wave.Data
 @using Wave.Utilities
@@ -22,8 +21,10 @@
 <h1 class="text-3xl lg:text-5xl font-light mb-6 text-primary">@Localizer["EditorTitle"]</h1>
 <div id="editor">
 	<div class="flex place-content-center">
-		<p>Loading Interactive Editor </p>
-		<span class="loading loading-spinner loading-lg"></span>
+		<div class="flex flex-col gap-2 items-center">
+			<span class="loading loading-spinner loading-lg"></span>
+			<p>Loading Interactive Editor </p>
+		</div>
 	</div>
 </div>