diff --git a/Iceshrimp.Frontend/Components/AscendedNote.razor b/Iceshrimp.Frontend/Components/AscendedNote.razor
new file mode 100644
index 00000000..376fa025
--- /dev/null
+++ b/Iceshrimp.Frontend/Components/AscendedNote.razor
@@ -0,0 +1,26 @@
+@using Iceshrimp.Shared.Schemas
+@using Iceshrimp.Frontend.Components.Note
+@inject NavigationManager NavigationManager
+<div class="note">
+    <div class="note-container">
+        <div class="note-indent">
+            <img class="user-avatar" src="@Note.User.AvatarUrl"/>
+            <Line></Line>
+        </div>
+        <div class="note" @onclick="OpenNote">
+            <Note Indented="true" NoteResponse="Note"/>
+            <div class="pad"></div>
+        </div>
+    </div>
+</div>
+
+
+@code {
+    [Parameter] [EditorRequired] public required NoteResponse Note { get; set; }
+
+    private void OpenNote()
+    {
+        NavigationManager.NavigateTo($"/notes/{Note.Id}");
+    }
+
+}
\ No newline at end of file
diff --git a/Iceshrimp.Frontend/Components/AscendedNote.razor.css b/Iceshrimp.Frontend/Components/AscendedNote.razor.css
new file mode 100644
index 00000000..cd0d1ee3
--- /dev/null
+++ b/Iceshrimp.Frontend/Components/AscendedNote.razor.css
@@ -0,0 +1,24 @@
+.note {
+    width: 100%;
+}
+.note-indent {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.user-avatar {
+    border-radius: 8px;
+    object-fit: cover;
+    width: 3em;
+    height: 3em;
+}
+.note-container {
+    display: flex;
+    max-width: 45rem;
+    min-width: 25rem;
+    width: 100%;
+}
+.pad {
+    height: 1rem;
+    width: 1px;
+}
\ No newline at end of file
diff --git a/Iceshrimp.Frontend/Components/RecursiveNote.razor b/Iceshrimp.Frontend/Components/RecursiveNote.razor
index f67eca51..6d849119 100644
--- a/Iceshrimp.Frontend/Components/RecursiveNote.razor
+++ b/Iceshrimp.Frontend/Components/RecursiveNote.razor
@@ -22,7 +22,7 @@
     {
         <div class="@(Note.Descendants?.Count > 1 ? "replies" : "reply")">
            
-            @* @foreach (var note in Note.Descendants!) // We are checking for null 3 lines up. *@
+             @* We are checking for null 3 lines up. *@
             @for (int i = 0; i < Note.Descendants!.Count; i++)
             {
                 var note = Note.Descendants[i];
diff --git a/Iceshrimp.Frontend/Components/RecursiveNote.razor.css b/Iceshrimp.Frontend/Components/RecursiveNote.razor.css
index b8b7adc5..d03080e9 100644
--- a/Iceshrimp.Frontend/Components/RecursiveNote.razor.css
+++ b/Iceshrimp.Frontend/Components/RecursiveNote.razor.css
@@ -19,23 +19,22 @@
     width: 100%;
 }
 .root-note {
-    max-width: 40rem;
-    min-width: 15rem;
+    max-width: 45rem;
+    min-width: 25rem;
     background-color: var(--foreground-color);
-    padding: 1.5rem 1.5rem 1rem 1.5rem; /* top, left-right, bottom*/
-    border-radius: 0.75rem;
-    margin-top: 1rem;
-    margin-right: 1rem;
-    margin-left: 1rem;
+    padding: 1.25rem 1.5rem 1rem; /* top, left-right, bottom*/
+    @media (max-width: 1000px) {
+        padding: 1.25rem 1rem 1rem;
+    }
+    border-top: solid var(--highlight-color) 0.1rem;
     width: 100%;
 }
 
 .descendant {
-    max-width: 40rem;
+    max-width: 45rem;
     min-width: 15rem;
     background-color: var(--foreground-color);
     padding: 0; /* top, right, bottom, left*/
-    border-radius: 0.75rem;
     margin: 0;
     width: 100%;
 }
diff --git a/Iceshrimp.Frontend/Core/Services/ComposeService.cs b/Iceshrimp.Frontend/Core/Services/ComposeService.cs
new file mode 100644
index 00000000..63e4a700
--- /dev/null
+++ b/Iceshrimp.Frontend/Core/Services/ComposeService.cs
@@ -0,0 +1,6 @@
+namespace Iceshrimp.Frontend.Core.Services;
+
+public class ComposeService
+{
+    
+}
\ No newline at end of file
diff --git a/Iceshrimp.Frontend/Pages/SingleNote.razor b/Iceshrimp.Frontend/Pages/SingleNote.razor
index e08f953e..92549e00 100644
--- a/Iceshrimp.Frontend/Pages/SingleNote.razor
+++ b/Iceshrimp.Frontend/Pages/SingleNote.razor
@@ -8,6 +8,16 @@
 @if (_init)
 {
     <div class="scroller">
+        <div class="wrapper">
+        @if (Ascendants != null)
+        {
+            <div class="ascendants">
+                @foreach (var note in Ascendants)
+                {
+                    <AscendedNote Note="note"/>
+                }
+            </div>
+        }
         <div class="root-note">
             <Note NoteResponse="RootNote"></Note>
         </div>
@@ -20,6 +30,7 @@
                 }
             </div>
         }
+        </div>
     </div>
 }
 else
@@ -30,17 +41,16 @@ else
 {
     <div>This note does not exist!</div>
 }
+
 @code {
     [Parameter] public string?              NoteId      { get; set; }
     public             NoteResponse?        RootNote    { get; set; }
     private            IList<NoteResponse>? Descendants { get; set; }
+    private            IList<NoteResponse>? Ascendants  { get; set; }
     private            bool                 _init  = false;
     private            bool                 _error = false;
 
-    protected override async Task OnInitializedAsync()
-    {
-       
-    }
+    protected override async Task OnInitializedAsync() { }
 
     protected override async Task OnParametersSetAsync()
     {
@@ -49,15 +59,18 @@ else
             _error = true;
             return;
         }
-        RootNote    = await ApiService.Notes.GetNote(NoteId);
+
+        RootNote = await ApiService.Notes.GetNote(NoteId);
         if (RootNote == null)
         {
             _error = true;
             return;
         }
+
         Descendants = await ApiService.Notes.GetNoteDescendants(NoteId, default);
+        Ascendants  = await ApiService.Notes.GetNoteAscendants(NoteId, default);
         _init       = true;
-        
+
         StateHasChanged();
     }
 
diff --git a/Iceshrimp.Frontend/Pages/SingleNote.razor.css b/Iceshrimp.Frontend/Pages/SingleNote.razor.css
index 888b7892..0a242e7c 100644
--- a/Iceshrimp.Frontend/Pages/SingleNote.razor.css
+++ b/Iceshrimp.Frontend/Pages/SingleNote.razor.css
@@ -1,13 +1,12 @@
 .root-note {
-    max-width: 40rem;
-    min-width: 15rem;
+    max-width: 45rem;
+    min-width: 25rem;
     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%;
+    padding-bottom: 1rem;
+    border-bottom: solid var(--highlight-color) 0.1rem;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
 }
 .scroller {
     height: 100vh;
@@ -21,4 +20,17 @@
     flex-direction: column;
     width: 100%;
     align-items: center;
+}
+
+.wrapper {
+    background-color: var(--foreground-color);
+    border-radius: 0.75rem;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    padding-top: 1.5rem;
+    padding-bottom: 1rem;
+}
+.ascendants {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
 }
\ No newline at end of file