diff --git a/nise-frontend/src/app/app-routing.module.ts b/nise-frontend/src/app/app-routing.module.ts
index cd47f12..4266e83 100644
--- a/nise-frontend/src/app/app-routing.module.ts
+++ b/nise-frontend/src/app/app-routing.module.ts
@@ -7,6 +7,7 @@ import {ViewScoreComponent} from "./view-score/view-score.component";
 import {ViewUserComponent} from "./view-user/view-user.component";
 import {ViewReplayPairComponent} from "./view-replay-pair/view-replay-pair.component";
 import {SearchComponent} from "./search/search.component";
+import {ContributeComponent} from "./contribute/contribute.component";
 
 const routes: Routes = [
   {path: 'sus/:f', component: ViewSuspiciousScoresComponent,  title: '/sus/'},
@@ -22,6 +23,7 @@ const routes: Routes = [
 
   {path: 'p/:replay1Id/:replay2Id', component: ViewReplayPairComponent},
 
+  {path: 'contribute', component: ContributeComponent, title: '/contribute/ <3'},
   {path: '**', component: HomeComponent, title: '/nise.moe/'},
 ];
 
diff --git a/nise-frontend/src/app/app.component.html b/nise-frontend/src/app/app.component.html
index 78f891e..27afc8f 100644
--- a/nise-frontend/src/app/app.component.html
+++ b/nise-frontend/src/app/app.component.html
@@ -5,17 +5,18 @@
     </a>
   </div>
   <div>
-    <h2>/nise.moe/</h2>
+    <h2 style="margin-top: 6px">/nise.moe/</h2>
     <ul style="font-size: 15px; line-height: 19px;">
       <li><a [routerLink]="['/']">./home</a></li>
       <li><a [routerLink]="['/sus']">./suspicious-scores</a></li>
       <li><a [routerLink]="['/stolen']">./stolen-replays</a></li>
       <li><a [routerLink]="['/search']">./advanced-search</a></li>
+      <li><a  style="color: #dd8fdcf7" [routerLink]="['/contribute']">./contribute <3</a></li>
     </ul>
     <form (ngSubmit)="onSubmit()">
       <input style="width: 100%" type="text" [(ngModel)]="term" [ngModelOptions]="{standalone: true}" id="nise-osu-username" required minlength="2" maxlength="50" placeholder="Search for users...">
     </form>
-    <div style="margin-top: 6px">
+    <div style="margin-top: 3px">
       <ng-container *ngIf="this.userService.isUserLoggedIn()">
         hi, <span class="user-details" [title]="this.userService.currentUser?.username">{{this.userService.currentUser?.username}}</span> <a [href]="this.userService.getLogoutUrl()">Logout</a>
       </ng-container>
diff --git a/nise-frontend/src/app/contribute/contribute.component.css b/nise-frontend/src/app/contribute/contribute.component.css
new file mode 100644
index 0000000..6d93dab
--- /dev/null
+++ b/nise-frontend/src/app/contribute/contribute.component.css
@@ -0,0 +1,21 @@
+.img-container {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  column-gap: 5px;
+}
+
+img {
+  max-width: 100%;
+  max-height:100%;
+}
+
+.btn-patreon {
+  padding: 5px;
+  border: 2px solid rgba(185, 82, 48, 0.94);
+  color: #ff683bf0;
+}
+
+.btn-patreon:hover {
+  background-color: #ff683bf0;
+  color: white;
+}
diff --git a/nise-frontend/src/app/contribute/contribute.component.html b/nise-frontend/src/app/contribute/contribute.component.html
new file mode 100644
index 0000000..185f559
--- /dev/null
+++ b/nise-frontend/src/app/contribute/contribute.component.html
@@ -0,0 +1,33 @@
+<div class="main container">
+
+  <div class="subcontainer"  style="width: 100%">
+    <div class="term" style="width: 100%">
+
+      <div style="overflow: hidden;">
+        <img src="assets/contribute.png" width="184" style="float: left; margin-right: 20px;">
+        <h1># contributing to the project</h1>
+        <p>if you'd like to keep the project healthy and funded in the long term, you are invited to directly contribute.</p>
+        <p>the website does not run ads, paywall features, or collect your private data in any way.</p>
+        <div class="text-center mt-2 mb-2">
+          <a href="https://patreon.com/nise_moe" target="_blank" class="btn btn-patreon">Become a Patreon</a>
+        </div>
+        <p>the money will be used to pay for the server hosting and development time.</p>
+        <table style="display: block;">
+          <tbody>
+            <tr>
+              <td style="font-weight: bold">Server hosting</td>
+              <td style="padding-left: 40px">~204$/year</td>
+            </tr>
+            <tr>
+              <td style="font-weight: bold">Domain</td>
+              <td style="padding-left: 40px">~17$/year</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+    </div>
+  </div>
+
+
+</div>
diff --git a/nise-frontend/src/app/contribute/contribute.component.ts b/nise-frontend/src/app/contribute/contribute.component.ts
new file mode 100644
index 0000000..8ad5072
--- /dev/null
+++ b/nise-frontend/src/app/contribute/contribute.component.ts
@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+import {CuteLoadingComponent} from "../../corelib/components/cute-loading/cute-loading.component";
+import {DecimalPipe, NgForOf, NgIf} from "@angular/common";
+
+@Component({
+  selector: 'app-contribute',
+  standalone: true,
+    imports: [
+        CuteLoadingComponent,
+        DecimalPipe,
+        NgForOf,
+        NgIf
+    ],
+  templateUrl: './contribute.component.html',
+  styleUrl: './contribute.component.css'
+})
+export class ContributeComponent {
+
+}
diff --git a/nise-frontend/src/assets/contribute.png b/nise-frontend/src/assets/contribute.png
new file mode 100644
index 0000000..99fff2e
Binary files /dev/null and b/nise-frontend/src/assets/contribute.png differ