diff --git a/Iceshrimp.Frontend/Components/RecursiveNote.razor b/Iceshrimp.Frontend/Components/RecursiveNote.razor
index 215239be..e5406b11 100644
--- a/Iceshrimp.Frontend/Components/RecursiveNote.razor
+++ b/Iceshrimp.Frontend/Components/RecursiveNote.razor
@@ -1,5 +1,17 @@
-<h3>RecursiveNote</h3>
+@using Iceshrimp.Shared.Schemas
 
+<div class="root-note">
+    <NoteComponent Note="Note" />
+</div>
+<div class="indent">
+    @if(Note.Descendants != null)
+    @foreach (var note in Note.Descendants)
+    {
+        <div class="descendant">
+            <RecursiveNote Note="note"/>
+        </div>
+    }
+</div>
 @code {
-    
+    [Parameter][EditorRequired] public required NoteResponse Note { get; set; }
 }
\ No newline at end of file
diff --git a/Iceshrimp.Frontend/Components/RecursiveNote.razor.css b/Iceshrimp.Frontend/Components/RecursiveNote.razor.css
index e69de29b..c764bb3c 100644
--- a/Iceshrimp.Frontend/Components/RecursiveNote.razor.css
+++ b/Iceshrimp.Frontend/Components/RecursiveNote.razor.css
@@ -0,0 +1,26 @@
+.indent {
+    padding-left: 0rem;
+}
+.root-note {
+    max-width: 40rem;
+    min-width: 15rem;
+    background-color: var(--foreground-color);
+    padding: 1.5rem 1.5rem 1rem; /* top, left-right, bottom*/
+    border-radius: 0.75rem;
+    margin-top: 1rem;
+    margin-right: 1.5rem;
+    margin-left: 1.5rem;
+    width: 100%;
+}
+
+.descendant {
+    max-width: 40rem;
+    min-width: 15rem;
+    background-color: var(--foreground-color);
+    padding: 1.5rem 1.5rem 1rem; /* top, left-right, bottom*/
+    border-radius: 0.75rem;
+    margin-top: 1rem;
+    margin-right: 1.5rem;
+    margin-left: 1.5rem;
+    width: 100%;
+}
\ No newline at end of file
diff --git a/Iceshrimp.Frontend/Components/TimelineNote.razor b/Iceshrimp.Frontend/Components/TimelineNote.razor
index 91b5ed0a..06c23634 100644
--- a/Iceshrimp.Frontend/Components/TimelineNote.razor
+++ b/Iceshrimp.Frontend/Components/TimelineNote.razor
@@ -1,7 +1,13 @@
 @using Iceshrimp.Shared.Schemas
-<div class="note-container" id="@Note.Id">
+@inject NavigationManager Navigation
+<div class="note-container" @onclick="OpenNote" id="@Note.Id">
     <NoteComponent Note="Note"></NoteComponent>
 </div>
 @code {
     [Parameter][EditorRequired] public required NoteResponse Note { get; set; }
+
+    private void OpenNote()
+    {
+        Navigation.NavigateTo($"/notes/{Note.Id}");
+    }
 }
\ No newline at end of file
diff --git a/Iceshrimp.Frontend/Pages/Note.razor b/Iceshrimp.Frontend/Pages/Note.razor
index f9d5b39b..2bb528c5 100644
--- a/Iceshrimp.Frontend/Pages/Note.razor
+++ b/Iceshrimp.Frontend/Pages/Note.razor
@@ -1,4 +1,4 @@
-@page "/notes/{id}"
+@page "/Note/{id}"
 @using Iceshrimp.Frontend.Core.Miscellaneous
 @using Iceshrimp.Frontend.Core.Services
 @using Iceshrimp.Shared.Schemas
diff --git a/Iceshrimp.Frontend/Pages/SingleNote.razor b/Iceshrimp.Frontend/Pages/SingleNote.razor
index 68fd0160..9bb9f537 100644
--- a/Iceshrimp.Frontend/Pages/SingleNote.razor
+++ b/Iceshrimp.Frontend/Pages/SingleNote.razor
@@ -1,6 +1,32 @@
-@page "/SingleNote"
-<h3>SingleNote</h3>
+@page "/notes/{NoteId}"
+@using Iceshrimp.Shared.Schemas
+@using Iceshrimp.Frontend.Components
+@using Iceshrimp.Frontend.Core.Services
+@inject ApiService ApiService
 
+@if (_init)
+{
+    <div class="root-note">
+        <NoteComponent Note="RootNote"></NoteComponent>
+    </div>
+    <div class="descendants">
+        @foreach (var element in Descendants)
+        {
+            <RecursiveNote Note="element"/>
+        }
+    </div>
+}
 @code {
-    
+    [Parameter] public string?             NoteId      { get; set; }
+    public             NoteResponse        RootNote    { get; set; }
+    public             IList<NoteResponse> Descendants { get; set; }
+    private            bool                _init = false;
+
+    protected override async Task OnInitializedAsync()
+    {
+        RootNote    = await ApiService.Notes.GetNote(NoteId);
+        Descendants = await ApiService.Notes.GetNoteDescendants(NoteId, default);
+        _init       = true;
+    }
+
 }
\ No newline at end of file
diff --git a/Iceshrimp.Frontend/Pages/SingleNote.razor.css b/Iceshrimp.Frontend/Pages/SingleNote.razor.css
index e69de29b..60cc4116 100644
--- a/Iceshrimp.Frontend/Pages/SingleNote.razor.css
+++ b/Iceshrimp.Frontend/Pages/SingleNote.razor.css
@@ -0,0 +1,11 @@
+.root-note {
+    max-width: 40rem;
+    min-width: 15rem;
+    background-color: var(--foreground-color);
+    padding: 1.5rem 1.5rem 1rem; /* top, left-right, bottom*/
+    border-radius: 0.75rem;
+    margin-top: 1rem;
+    margin-right: 1.5rem;
+    margin-left: 1.5rem;
+    width: 100%;
+}
\ No newline at end of file