diff --git a/src/app/api/client.service.ts b/src/app/api/client.service.ts
index b160464..703d990 100644
--- a/src/app/api/client.service.ts
+++ b/src/app/api/client.service.ts
@@ -14,6 +14,7 @@ import {Params} from "@angular/router";
 import {ApiImplementation} from "./api-implementation";
 import {Contest} from "./types/contests/contest";
 import {Score} from "./types/levels/score";
+import { LevelRelations } from './types/levels/level-relations';
 
 export const defaultPageSize: number = 40;
 
@@ -108,4 +109,28 @@ export class ClientService extends ApiImplementation {
   getPhotoById(id: number) {
     return this.http.get<Photo>(`/photos/id/${id}`);
   }
+
+  getLevelRelations(id: number) {
+    return this.http.get<LevelRelations>(`/levels/id/${id}/relations`);
+  }
+
+  setLevelAsHearted(id: number) {
+    return this.http.post<Response>(`/levels/id/${id}/heart`, null);
+  }
+
+  setLevelAsUnhearted(id: number) {
+    return this.http.post<Response>(`/levels/id/${id}/unheart`, null);
+  }
+
+  setLevelAsQueued(id: number) {
+    return this.http.post<Response>(`/levels/id/${id}/queue`, null);
+  }
+
+  setLevelAsDequeued(id: number) {
+    return this.http.post<Response>(`/levels/id/${id}/dequeue`, null);
+  }
+
+  setLevelAsOverride(id: number) {
+    return this.http.post<Response>(`/levels/id/${id}/setAsOverride`, null);
+  }
 }
diff --git a/src/app/api/types/levels/level-relations.ts b/src/app/api/types/levels/level-relations.ts
new file mode 100644
index 0000000..f13db7f
--- /dev/null
+++ b/src/app/api/types/levels/level-relations.ts
@@ -0,0 +1,5 @@
+export interface LevelRelations {
+    isHearted: boolean;
+    isQueued: boolean;
+    myPlaysCount: number;
+}
\ No newline at end of file
diff --git a/src/app/api/types/levels/level.ts b/src/app/api/types/levels/level.ts
index 8f9e512..22b2c3e 100644
--- a/src/app/api/types/levels/level.ts
+++ b/src/app/api/types/levels/level.ts
@@ -16,4 +16,5 @@ export interface Level {
     teamPicked: boolean;
     gameVersion: number;
     score: number;
+    slotType: number;
 }
diff --git a/src/app/components/ui/form/button-or-navitem.component.ts b/src/app/components/ui/form/button-or-navitem.component.ts
new file mode 100644
index 0000000..6139eed
--- /dev/null
+++ b/src/app/components/ui/form/button-or-navitem.component.ts
@@ -0,0 +1,105 @@
+import { Component, Input } from "@angular/core";
+import { IconProp } from "@fortawesome/fontawesome-svg-core";
+import { NavbarItemComponent } from "../header/navbar-item.component";
+import { NavbarItemTwoStateComponent } from "../header/navbar-item-two-state.component";
+import { ButtonComponent } from "./button.component";
+import { ButtonTwoStateComponent } from "./button-two-state.component";
+
+@Component({
+    selector: 'app-button-or-navitem',
+    standalone: true,
+    imports: [
+        NavbarItemComponent,
+        NavbarItemTwoStateComponent,
+        ButtonComponent,
+        ButtonTwoStateComponent
+    ],
+    template: `
+    <!--          NavItem          -->
+        @if (isNavItem) {
+            @if (state != undefined) {
+                <app-navbar-item-two-state
+                    [state]="state"
+                    [title]="finalText"
+                    [icon]="icon"
+
+                    [titleAlternative]="finalTextAlt"
+                    [iconAlternative]="iconAlt"
+                    
+                    [labelClass]="labelClass"
+                    [iconClass]="iconClass"> 
+                </app-navbar-item-two-state>
+            }
+            @else {
+                <app-navbar-item
+                    [title]="finalText"
+                    [icon]="icon"
+                    [href]="route"
+                    
+                    [labelClass]="labelClass"
+                    [iconClass]="iconClass">
+                </app-navbar-item>
+            }
+        }
+    <!--          Button          -->
+        @else {
+            @if (state != undefined) {
+                <app-button-two-state
+                    [state]="state"
+                    [text]="finalText"
+                    [icon]="icon"
+                    [color]="color"
+
+                    [textAlternative]="finalTextAlt"
+                    [iconAlternative]="iconAlt"
+                    [colorAlternative]="colorAlt">
+                </app-button-two-state>
+            }
+            @else {
+                <app-button
+                    [text]="finalText"
+                    [icon]="icon"
+                    [color]="color"
+                    [routerLink]="route">
+                </app-button>
+            }    
+        }
+    `,
+    styles: ``
+})
+
+export class ButtonOrNavItemComponent {
+    @Input() text: string = ""
+    @Input() textAlt: string = ""
+
+    @Input() icon: IconProp | undefined;
+    @Input() iconAlt: IconProp | undefined;
+
+    @Input() color: string = ""
+    @Input() colorAlt: string = ""
+
+    @Input() state: boolean | undefined;
+    @Input() route: string | undefined;
+    @Input() hasText: boolean = true;
+    @Input() isNavItem: boolean = false;
+
+    @Input() labelClass: string = "text-lg";
+    @Input() iconClass: string = "w-4 text-[1.1rem]";
+
+    finalText: string = "";
+    finalTextAlt: string = "";
+
+
+    ngOnInit() {
+        this.initText();
+    }
+
+    initText() {
+        if (this.hasText) {
+            this.finalText = this.text;
+            if (this.state != undefined) {
+                this.finalTextAlt = this.textAlt;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/app/components/ui/form/button-two-state.component.ts b/src/app/components/ui/form/button-two-state.component.ts
new file mode 100644
index 0000000..2666ef1
--- /dev/null
+++ b/src/app/components/ui/form/button-two-state.component.ts
@@ -0,0 +1,34 @@
+import {Component, Input} from '@angular/core';
+import {ButtonComponent} from "./button.component";
+import {IconProp} from "@fortawesome/fontawesome-svg-core";
+
+@Component({
+    selector: 'app-button-two-state',
+    standalone: true,
+    imports: [
+        ButtonComponent
+    ],
+    template: `
+        @if (state) {
+            <app-button [text]="textAlternative" [icon]="iconAlternative" [color]="colorAlternative" [enabled]="enabled"></app-button>
+        }
+        @else {
+            <app-button [text]="text" [icon]="icon" [color]="color" [enabled]="enabled"></app-button>
+        }
+    `,
+    styles: ``
+})
+export class ButtonTwoStateComponent {
+    @Input({required: true}) state: boolean = false;
+
+    @Input({required: true}) text: string = "Activate";
+    @Input({required: true}) textAlternative: string = "Deactivate";
+
+    @Input() icon: IconProp | undefined;
+    @Input() iconAlternative: IconProp | undefined;
+
+    @Input() color: string = "bg-primary";
+    @Input() colorAlternative: string = "bg-secondary";
+
+    @Input() enabled: boolean = true;
+}
\ No newline at end of file
diff --git a/src/app/components/ui/form/button.component.ts b/src/app/components/ui/form/button.component.ts
index 7211ae3..5ff9d8f 100644
--- a/src/app/components/ui/form/button.component.ts
+++ b/src/app/components/ui/form/button.component.ts
@@ -11,7 +11,8 @@ import { NgClass } from "@angular/common";
     NgClass
 ],
   template: `
-    <button class="rounded px-4 py-1.5 hover:brightness-110 active:brightness-95 transition-[filter] disabled:grayscale" [ngClass]="color" [type]=type [disabled]="!enabled">
+    <button class="rounded px-4 py-1.5 hover:brightness-110 active:brightness-95 transition-[filter] disabled:grayscale" 
+      [ngClass]="color" [type]=type [disabled]="!enabled">
       @if (icon) {
         <fa-icon [icon]="icon" class="mr-1"></fa-icon>
       }
diff --git a/src/app/components/ui/header/navbar-item-two-state.component.ts b/src/app/components/ui/header/navbar-item-two-state.component.ts
new file mode 100644
index 0000000..1ebe01c
--- /dev/null
+++ b/src/app/components/ui/header/navbar-item-two-state.component.ts
@@ -0,0 +1,32 @@
+import {Component, Input} from '@angular/core';
+import {IconProp} from "@fortawesome/fontawesome-svg-core";
+import {faExclamationTriangle} from "@fortawesome/free-solid-svg-icons";
+import { NavbarItemComponent } from "./navbar-item.component";
+
+@Component({
+  selector: 'app-navbar-item-two-state',
+  standalone: true,
+  imports: [
+    NavbarItemComponent
+],
+  template: `
+    @if (state) {
+      <app-navbar-item [title]="titleAlternative" [icon]="iconAlternative" [labelClass]="labelClass" [iconClass]="iconClass"></app-navbar-item>
+    }
+    @else {
+      <app-navbar-item [title]="title" [icon]="icon" [labelClass]="labelClass" [iconClass]="iconClass"></app-navbar-item>
+    }
+  `
+})
+export class NavbarItemTwoStateComponent {
+  @Input({required: true}) state: boolean = false;
+
+  @Input() public title: string = "Activate";
+  @Input() public titleAlternative: string = "Deactivate";
+
+  @Input() public icon: IconProp | undefined = faExclamationTriangle;
+  @Input() public iconAlternative: IconProp | undefined = faExclamationTriangle;
+
+  @Input() public labelClass: string = "text-xl";
+  @Input() public iconClass: string = "w-5 text-xl";
+}
diff --git a/src/app/components/ui/header/navbar-item.component.ts b/src/app/components/ui/header/navbar-item.component.ts
index d680b77..af0a5ea 100644
--- a/src/app/components/ui/header/navbar-item.component.ts
+++ b/src/app/components/ui/header/navbar-item.component.ts
@@ -15,17 +15,17 @@ import { NgClass } from "@angular/common";
 ],
   template: `
     <a [routerLink]=href class="flex gap-x-2 font-normal hover:underline" [ngClass]="labelClass" [title]="title">
-      <fa-icon [icon]=icon class="text-center" [ngClass]="iconClass"></fa-icon>
+      <fa-icon [icon]=icon! class="text-center" [ngClass]="iconClass"></fa-icon>
       @if (title.length > 0) {
         <span>{{ title }}</span>
       }
     </a>
-    `
+  `
 })
 export class NavbarItemComponent {
   @Input() public title: string = "";
-  @Input({required: true}) public href: string = "";
-  @Input({required: true}) public icon: IconProp = faExclamationTriangle;
+  @Input() public icon: IconProp | undefined = faExclamationTriangle;
+  @Input() public href: string | undefined;
 
   @Input() public labelClass: string = "text-xl";
   @Input() public iconClass: string = "w-5 text-xl";
diff --git a/src/app/components/ui/layouts/fancy-header-buttons.component.ts b/src/app/components/ui/layouts/fancy-header-buttons.component.ts
new file mode 100644
index 0000000..b7568fe
--- /dev/null
+++ b/src/app/components/ui/layouts/fancy-header-buttons.component.ts
@@ -0,0 +1,74 @@
+import { Component, Input, TemplateRef, ViewChild, ViewContainerRef } from "@angular/core";
+import { ButtonComponent } from "../form/button.component";
+import { NgClass } from "@angular/common";
+import {faEllipsisV} from "@fortawesome/free-solid-svg-icons";
+
+@Component({
+    selector: 'app-fancy-header-buttons',
+    standalone: true,
+    imports: [
+        ButtonComponent,
+        NgClass
+    ],
+    template: `
+        <ng-template #moreButtonTemplate>
+            <app-button
+                text=""
+                [icon]="faEllipsisV"
+                color="bg-secondary"
+                (click)="moreButtonClick()"> 
+            </app-button>
+        </ng-template>
+        
+        <div class="flex flex-row justify-end content-center space-x-1 min-w-56 group relative">
+            <div #firstButtonContainer></div>
+            <div #secondButtonContainer></div>
+            <div class="absolute z-[1] flex flex-col gap-y-1.5 w-48 px-5 py-2.5 rounded bg-header-background
+                border-4 border-backdrop border-solid top-10 cursor-pointer"
+                [ngClass]="showMenu ? '' : 'hidden'">
+                <div #navItemsContainer>
+            </div>
+        </div>
+    `,
+    styles: ``
+})
+
+export class FancyHeaderButtonsComponent {
+    @Input({required: true}) public buttonTemplateRefs: TemplateRef<any>[] = undefined!;
+    @ViewChild('moreButtonTemplate') moreButtonTemplateRef!: TemplateRef<any>;
+
+    @ViewChild('firstButtonContainer', { read: ViewContainerRef }) firstButtonContainerRef!: ViewContainerRef;
+    @ViewChild('secondButtonContainer', { read: ViewContainerRef }) secondButtonContainerRef!: ViewContainerRef;
+    @ViewChild('navItemsContainer', { read: ViewContainerRef }) navItemsContainerRef!: ViewContainerRef;
+
+    showMenu: boolean = false;
+
+    ngAfterViewInit() {
+        // place buttons (or navitems) depending on how many there are in the array
+        if (this.buttonTemplateRefs.length > 0) {
+            this.firstButtonContainerRef.createEmbeddedView(this.buttonTemplateRefs[0], {hasText: true, isNavItem: false});
+
+            if (this.buttonTemplateRefs.length == 2) {
+                this.secondButtonContainerRef.createEmbeddedView(this.buttonTemplateRefs[1], {hasText: false, isNavItem: false});
+            }
+
+            else if (this.buttonTemplateRefs.length > 2) {
+                this.secondButtonContainerRef.createEmbeddedView(this.moreButtonTemplateRef);
+
+                let index: number = 0;
+                for (let containerRef of this.buttonTemplateRefs) {
+                    if (index > 0) {
+                        this.navItemsContainerRef.createEmbeddedView(containerRef, {hasText: true, isNavItem: true});
+                    }
+                    index++;
+                }
+            }
+        }
+    }
+
+    async moreButtonClick() {
+        this.showMenu = !this.showMenu;
+    }
+
+    protected readonly faEllipsisV = faEllipsisV;
+}
\ No newline at end of file
diff --git a/src/app/components/ui/layouts/fancy-header-level-buttons.component.ts b/src/app/components/ui/layouts/fancy-header-level-buttons.component.ts
new file mode 100644
index 0000000..4f0f847
--- /dev/null
+++ b/src/app/components/ui/layouts/fancy-header-level-buttons.component.ts
@@ -0,0 +1,167 @@
+import { Component, Input, TemplateRef, ViewChild } from "@angular/core";
+import { BannerService } from "../../../banners/banner.service";
+import { Level } from "../../../api/types/levels/level";
+import { ExtendedUser } from "../../../api/types/users/extended-user";
+import { ClientService } from "../../../api/client.service";
+import { Room } from "../../../api/types/rooms/room";
+import { LevelRelations } from "../../../api/types/levels/level-relations";
+import { ButtonOrNavItemComponent } from "../form/button-or-navitem.component";
+import {
+    faBell, 
+    faBellSlash, 
+    faHeart, 
+    faHeartCrack, 
+    faPlay
+} from "@fortawesome/free-solid-svg-icons";
+import { FancyHeaderButtonsComponent } from "./fancy-header-buttons.component";
+
+@Component({
+    selector: 'app-fancy-header-level-buttons',
+    standalone: true,
+    imports: [
+        ButtonOrNavItemComponent,
+        FancyHeaderButtonsComponent
+    ],
+    template: `
+        <ng-template #playNowButtonTemplate let-templateHasText="hasText" let-templateIsNavItem="isNavItem">
+            <app-button-or-navitem
+                text="Play Now!"
+                [icon]="faPlay"
+                color="bg-primary"
+                (click)="playNowButtonClick()"
+            
+                [hasText]="templateHasText"
+                [isNavItem]="templateIsNavItem">
+            </app-button-or-navitem>
+        </ng-template>
+
+        <ng-template #queueButtonTemplate let-templateHasText="hasText" let-templateIsNavItem="isNavItem">
+            <app-button-or-navitem
+                text="Queue"
+                [icon]="faBell"
+                color="bg-yellow"
+
+                textAlt="Dequeue"
+                [iconAlt]="faBellSlash"
+                colorAlt="bg-secondary"
+
+                [state]="relations.isQueued"
+                (click)="queueButtonClick()"
+
+                [hasText]="templateHasText"
+                [isNavItem]="templateIsNavItem"> 
+            </app-button-or-navitem>
+        </ng-template>
+
+        <ng-template #heartButtonTemplate let-templateHasText="hasText" let-templateIsNavItem="isNavItem">
+            <app-button-or-navitem
+                text="Heart"
+                [icon]="faHeart"
+                color="bg-pink"
+            
+                textAlt="Unheart"
+                [iconAlt]="faHeartCrack"
+                colorAlt="bg-secondary"
+
+                [state]="relations.isHearted"
+                (click)="heartButtonClick()"
+
+                [hasText]="templateHasText"
+                [isNavItem]="templateIsNavItem"> 
+            </app-button-or-navitem>
+        </ng-template>
+
+        @if (buttonsInitialized) {
+            <app-fancy-header-buttons 
+                [buttonTemplateRefs]="buttonTemplateRefs">
+            </app-fancy-header-buttons>
+        }
+    `,
+    styles: ``
+})
+
+export class FancyHeaderLevelButtonsComponent {
+    @Input({required: true}) public level: Level = undefined!;
+    @Input({required: true}) public ownUser: ExtendedUser = undefined!;
+    @Input({required: true}) public relations: LevelRelations = undefined!;
+
+    @ViewChild('playNowButtonTemplate') playNowButtonTemplateRef!: TemplateRef<any>;
+    @ViewChild('queueButtonTemplate') queueButtonTemplateRef!: TemplateRef<any>;
+    @ViewChild('heartButtonTemplate') heartButtonTemplateRef!: TemplateRef<any>;
+    
+    buttonTemplateRefs: TemplateRef<any>[] = [];
+    ownUserRoom: Room | undefined;
+    buttonsInitialized: boolean = false;
+
+    constructor(private client: ClientService, private bannerService: BannerService) {}
+
+    ngAfterViewInit() {
+        // Play Now button, if level is compatible with the game currently played by the player
+        this.ownUserRoom = this.ownUser.activeRoom;
+        if (this.ownUserRoom != undefined && this.areGameVersionsCompatible(this.level.gameVersion, this.ownUserRoom.game)) {
+            this.buttonTemplateRefs.push(this.playNowButtonTemplateRef);
+        }
+
+        // Queue button, if level is user generated and not from LBP PSP
+        if (this.level.slotType == 0 && this.level.gameVersion != 4) { 
+            this.buttonTemplateRefs.push(this.queueButtonTemplateRef);
+        } 
+
+        // Heart Button
+        this.buttonTemplateRefs.push(this.heartButtonTemplateRef);
+
+        this.buttonsInitialized = true;
+    }
+
+    areGameVersionsCompatible(levelGameVersion: number, userGameVersion: number) {
+        // if level is from lbp1 and user is on lbp2 or 3
+        if (levelGameVersion == 0 && userGameVersion == (1 || 2)) return true;
+
+        // if level is from lbp2 and user is on lbp3
+        if (levelGameVersion == 1 && userGameVersion == 2) return true;
+
+        // if level game version is the same as users game version
+        if (levelGameVersion == userGameVersion) return true;
+
+        // else
+        return false;
+    }
+
+    async playNowButtonClick() {
+        this.client.setLevelAsOverride(this.level.levelId).subscribe(_ => {
+            this.bannerService.success("Check your game!", "In LBP, head to 'Lucky Dip' (or any category) and '" + this.level.title + "' will show up!");
+        });
+    }
+    
+    async queueButtonClick() {
+        if (this.relations.isQueued) {
+            this.client.setLevelAsDequeued(this.level.levelId).subscribe(_ => {
+                this.relations.isQueued = false;
+            });
+        }
+        else {
+            this.client.setLevelAsQueued(this.level.levelId).subscribe(_ => {
+                this.relations.isQueued = true;
+            });
+        }
+    }
+
+    async heartButtonClick() {
+        if (this.relations.isHearted) {
+            this.client.setLevelAsUnhearted(this.level.levelId).subscribe(_ => {
+                this.relations.isHearted = false;
+            });
+        }
+        else {
+            this.client.setLevelAsHearted(this.level.levelId).subscribe(_ => {
+                this.relations.isHearted = true;
+            });
+        }
+    }
+
+    protected readonly faPlay = faPlay;
+    protected readonly faBell = faBell; 
+    protected readonly faBellSlash = faBellSlash; 
+    protected readonly faHeart = faHeart; 
+    protected readonly faHeartCrack = faHeartCrack;
+}
\ No newline at end of file
diff --git a/src/app/components/ui/layouts/fancy-header.component.ts b/src/app/components/ui/layouts/fancy-header.component.ts
index 7f84208..7c7f36a 100644
--- a/src/app/components/ui/layouts/fancy-header.component.ts
+++ b/src/app/components/ui/layouts/fancy-header.component.ts
@@ -1,12 +1,8 @@
 import {Component, Input} from '@angular/core';
 import {ContainerHeaderComponent} from "../container-header.component";
 import {DarkContainerComponent} from "../dark-container.component";
-import {DateComponent} from "../info/date.component";
-import {DefaultPipe} from "../../../pipes/default.pipe";
 import {PageTitleComponent} from "../text/page-title.component";
-import {LevelStatisticsComponent} from "../../items/level-statistics.component";
-import { AsyncPipe, NgTemplateOutlet } from "@angular/common";
-import {LayoutService} from "../../../services/layout.service";
+import { NgTemplateOutlet } from "@angular/common";
 
 @Component({
   selector: 'app-fancy-header',
@@ -14,48 +10,44 @@ import {LayoutService} from "../../../services/layout.service";
   imports: [
     ContainerHeaderComponent,
     DarkContainerComponent,
-    DateComponent,
-    DefaultPipe,
     PageTitleComponent,
-    LevelStatisticsComponent,
-    NgTemplateOutlet,
-    AsyncPipe
-],
+    NgTemplateOutlet
+  ],
   template: `
     <ng-template #descriptionTemplate>
       <app-dark-container>
         <p>{{ description }}</p>
       </app-dark-container>
     </ng-template>
-    
+
     <app-container-header>
-      <div class="flex gap-x-5 sm:gap-x-2.5">
+      <div class="flex gap-x-2 sm:gap-x-2.5">
         <ng-content select="[avatar]"></ng-content>
-        <div class="grow">
-          <div class="flex flex-row sm:flex-col gap-x-1.5">
-            <app-page-title [title]="title" class="text-nowrap"></app-page-title>
-            <span class="align-bottom text-gentle self-center sm:self-auto text-nowrap">
-              <ng-content select="[titleSubtext]"></ng-content>
-            </span>
+        <div class="grow content-evenly">
+          <div class="flex flex-row place-content-between sm:flex-col gap-x-1.5 relative">
+            <app-page-title [title]="title" class="text-wrap [word-break:break-word]">
+              <ng-container titleSubtext>
+                <span class="align-bottom text-gentle text-base text-wrap font-normal self-center sm:self-auto">
+                  <ng-content select="[titleSubtext]"></ng-content>
+                </span>
+              </ng-container>
+            </app-page-title>
+            <ng-content select="[buttonArea]"></ng-content>
+          </div>
+          <div>
+            <ng-content select="[belowTitle]"></ng-content>
+            <ng-content select="[statistics]"></ng-content>
           </div>
-          <ng-content select="[belowTitle]"></ng-content>
-          <ng-content select="[statistics]"></ng-content>
-          @if (!(layout.isMobile | async)) {
-            <ng-container *ngTemplateOutlet="descriptionTemplate"></ng-container>
-          }
         </div>
       </div>
-      @if (layout.isMobile | async) {
-        <div class="mt-2.5">
-          <ng-container *ngTemplateOutlet="descriptionTemplate"></ng-container>
-        </div>
-      }
+      <ng-content select="[buttonAreaMobile]"></ng-content>
+      <div class="mt-2.5">
+        <ng-container *ngTemplateOutlet="descriptionTemplate"></ng-container>
+      </div>
     </app-container-header>
     `
 })
 export class FancyHeaderComponent {
   @Input({required: true}) title: string = "";
   @Input({required: true}) description: string = "";
-
-  constructor(protected layout: LayoutService) {}
 }
diff --git a/src/app/components/ui/text/links/user-link.component.ts b/src/app/components/ui/text/links/user-link.component.ts
index 56ee630..df61392 100644
--- a/src/app/components/ui/text/links/user-link.component.ts
+++ b/src/app/components/ui/text/links/user-link.component.ts
@@ -13,7 +13,7 @@ import {ClientService} from "../../../../api/client.service";
     ],
     template: `
         @if(user) {
-            <app-user-router-link class="ml-1 inline" [user]=user>
+            <app-user-router-link class="ml-1 inline text-nowrap" [user]=user>
                 <app-user-avatar [user]=user class="inline mr-1" borderRule="rounded-[3px]"></app-user-avatar>
                 <span>{{ user.username }}</span>
             </app-user-router-link>
diff --git a/src/app/components/ui/text/page-title.component.ts b/src/app/components/ui/text/page-title.component.ts
index edbeb33..9d22773 100644
--- a/src/app/components/ui/text/page-title.component.ts
+++ b/src/app/components/ui/text/page-title.component.ts
@@ -18,6 +18,8 @@ import {FaIconComponent} from "@fortawesome/angular-fontawesome";
         }
 
         {{title}}
+        
+        <ng-content select="[titleSubtext]"></ng-content>
       </h1>
     }
   `
diff --git a/src/app/pages/level/level.component.html b/src/app/pages/level/level.component.html
index 45454f0..47e8098 100644
--- a/src/app/pages/level/level.component.html
+++ b/src/app/pages/level/level.component.html
@@ -2,7 +2,9 @@
   <app-fancy-header [title]="level.title | default: 'Unnamed Level'" [description]="level.description | default: 'This level doesn\'t have a description.'">
     <app-level-avatar [level]="level" [size]="(layout.isMobile | async) ? 90 : 176" avatar></app-level-avatar>
     <ng-container titleSubtext>
-      by <app-user-link [user]="level.publisher"></app-user-link>
+      <span class="text-nowrap">
+        by <app-user-link [user]="level.publisher"></app-user-link>
+      </span>
     </ng-container>
     <div class="text-gentle sm:text-sm md:text-sm text-md" belowTitle>
       Published for {{level.gameVersion | game: isMobile}}
@@ -13,8 +15,14 @@
       }
     </div>
     <app-level-statistics [level]="level" class="mb-1.5 block" statistics></app-level-statistics>
+    @if(relations && !isMobile) {
+      <app-fancy-header-level-buttons [level]="level" [ownUser]="ownUser!" [relations]="relations" buttonArea></app-fancy-header-level-buttons>
+    }
+    @if(relations && isMobile) {
+      <app-fancy-header-level-buttons [level]="level" [ownUser]="ownUser!" [relations]="relations" buttonAreaMobile></app-fancy-header-level-buttons>
+    }
   </app-fancy-header>
-    
+
   <app-two-pane-layout>
       <app-container class="w-full">
           <app-pane-title>
diff --git a/src/app/pages/level/level.component.ts b/src/app/pages/level/level.component.ts
index 72cdc97..a74db37 100644
--- a/src/app/pages/level/level.component.ts
+++ b/src/app/pages/level/level.component.ts
@@ -3,8 +3,7 @@ import {Level} from "../../api/types/levels/level";
 import {ClientService} from "../../api/client.service";
 import {ActivatedRoute, RouterLink} from "@angular/router";
 import {SlugPipe} from "../../pipes/slug.pipe";
-import {PageTitleComponent} from "../../components/ui/text/page-title.component";
-import { AsyncPipe, isPlatformBrowser } from "@angular/common";
+import { AsyncPipe, isPlatformBrowser, } from "@angular/common";
 import {LevelStatisticsComponent} from "../../components/items/level-statistics.component";
 import {DefaultPipe} from "../../pipes/default.pipe";
 import {LevelAvatarComponent} from "../../components/ui/photos/level-avatar.component";
@@ -23,30 +22,36 @@ import {PaneTitleComponent} from "../../components/ui/text/pane-title.component"
 import {EventPageComponent} from "../../components/items/event-page.component";
 import {ActivityPage} from "../../api/types/activity/activity-page";
 import {ButtonComponent} from "../../components/ui/form/button.component";
+import {AuthenticationService} from "../../api/authentication.service";
+import { ExtendedUser } from '../../api/types/users/extended-user';
+import { FancyHeaderLevelButtonsComponent } from '../../components/ui/layouts/fancy-header-level-buttons.component';
+import { LevelRelations } from '../../api/types/levels/level-relations';
+
 
 @Component({
   selector: 'app-level',
   standalone: true,
-    imports: [
-        LevelStatisticsComponent,
-        DefaultPipe,
-        LevelAvatarComponent,
-        UserLinkComponent,
-        FancyHeaderComponent,
-        GamePipe,
-        AsyncPipe,
-        DateComponent,
-        TwoPaneLayoutComponent,
-        ContainerComponent,
-        ContainerTitleComponent,
-        LevelLeaderboardComponent,
-        DividerComponent,
-        PaneTitleComponent,
-        EventPageComponent,
-        ButtonComponent,
-        RouterLink,
-        SlugPipe
-    ],
+  imports: [
+      LevelStatisticsComponent,
+      DefaultPipe,
+      LevelAvatarComponent,
+      UserLinkComponent,
+      FancyHeaderComponent,
+      FancyHeaderLevelButtonsComponent,
+      GamePipe,
+      AsyncPipe,
+      DateComponent,
+      TwoPaneLayoutComponent,
+      ContainerComponent,
+      ContainerTitleComponent,
+      LevelLeaderboardComponent,
+      DividerComponent,
+      PaneTitleComponent,
+      EventPageComponent,
+      ButtonComponent,
+      RouterLink,
+      SlugPipe
+  ],
   providers: [
       SlugPipe
   ],
@@ -58,25 +63,31 @@ export class LevelComponent {
   
   protected readonly isBrowser: boolean;
   protected isMobile: boolean = false;
+  protected ownUser: ExtendedUser | undefined;
+  protected relations: LevelRelations | undefined;
 
   constructor(private embed: EmbedService, private client: ClientService, private slug: SlugPipe,
-              route: ActivatedRoute, protected layout: LayoutService, @Inject(PLATFORM_ID) platformId: Object)
+              route: ActivatedRoute, protected layout: LayoutService, private auth: AuthenticationService,
+              @Inject(PLATFORM_ID) platformId: Object)
   {
     this.isBrowser = isPlatformBrowser(platformId);
     route.params.subscribe(params => {
       const id: number = +params['id'];
       this.client.getLevelById(id).subscribe(data => this.setDataFromLevel(data));
       this.client.getActivityPageForLevel(id, 0, 20).subscribe(page => this.activityPage = page);
+      this.auth.user.subscribe(user => {
+        if(user) {
+          this.ownUser = user;
+          this.client.getLevelRelations(id).subscribe(relations => this.relations = relations);
+        }
+      });
     });
-    
-    this.layout.isMobile.subscribe(v => {
-        this.isMobile = v;
-    })
+
+    this.layout.isMobile.subscribe(v => this.isMobile = v);
   }
 
   setDataFromLevel(data: Level) {
     this.level = data;
-
     if(this.isBrowser) {
       window.history.replaceState({}, '', `/level/${data.levelId}/${this.slug.transform(data.title)}`);
     }