diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 71e2024..14fb17f 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -2,6 +2,7 @@ import {HttpClientModule} from '@angular/common/http';
 import {BrowserModule} from '@angular/platform-browser';
 import {NgModule} from '@angular/core';
 import {ContactFormComponent} from './components/contact-form/contact-form.component';
+import {ProjectsComponent} from './components/projects/projects.component';
 import {HomeComponent} from './views/home/home.component';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {MaterialModule} from './material.module';
@@ -18,6 +19,7 @@ import {ConsoleComponent} from './components/console/console.component';
         ConsoleComponent,
 		ContactFormComponent,
         HomeComponent,
+		ProjectsComponent,
         SlideShowComponent,
         TypewriterComponent
     ],
diff --git a/src/app/components/projects/projects.component.html b/src/app/components/projects/projects.component.html
new file mode 100644
index 0000000..9c1346b
--- /dev/null
+++ b/src/app/components/projects/projects.component.html
@@ -0,0 +1,11 @@
+<mat-list dense>
+	<ng-container *ngFor="let p of projectsService.all; let first = first">
+		<mat-divider *ngIf="!first"></mat-divider>
+		<mat-list-item>
+			<img *ngIf="p.avatar_url" mat-list-avatar [src]="p.avatar_url">
+			<img *ngIf="!p.avatar_url" mat-list-avatar src="/assets/img/git.png">
+			<a mat-line [href]="p.web_url" target="_blank">{{p.name}}</a>
+			<div mat-line>{{p.description}}</div>
+		</mat-list-item>
+	</ng-container>
+</mat-list>
diff --git a/src/app/components/projects/projects.component.ts b/src/app/components/projects/projects.component.ts
new file mode 100644
index 0000000..6bb8490
--- /dev/null
+++ b/src/app/components/projects/projects.component.ts
@@ -0,0 +1,10 @@
+import {Component} from '@angular/core';
+import {ProjectsService} from '../../services/projects.service';
+
+@Component({
+	selector: 'projects',
+	templateUrl: './projects.component.html'
+})
+export class ProjectsComponent {
+	constructor(public projectsService: ProjectsService) { }
+}
diff --git a/src/app/views/home/home.component.html b/src/app/views/home/home.component.html
index d8a6d87..5f810c7 100644
--- a/src/app/views/home/home.component.html
+++ b/src/app/views/home/home.component.html
@@ -64,17 +64,7 @@
 		</div>
 		<div class="p-4">
 			<h3>Projects & Repositories</h3>
-			<mat-list dense>
-				<ng-container *ngFor="let p of projectsService.all; let first = first">
-					<mat-divider *ngIf="!first"></mat-divider>
-					<mat-list-item>
-						<img *ngIf="p.avatar_url" mat-list-avatar [src]="p.avatar_url">
-						<img *ngIf="!p.avatar_url" mat-list-avatar src="/assets/img/git.png">
-						<a mat-line [href]="p.web_url" target="_blank">{{p.name}}</a>
-						<div mat-line>{{p.description}}</div>
-					</mat-list-item>
-				</ng-container>
-			</mat-list>
+			<projects></projects>
 		</div>
 		<div class="p-4 overflow-hidden">
 			<h3>Contact</h3>
diff --git a/src/app/views/home/home.component.ts b/src/app/views/home/home.component.ts
index 6217cbc..3afd7f1 100644
--- a/src/app/views/home/home.component.ts
+++ b/src/app/views/home/home.component.ts
@@ -1,6 +1,5 @@
 import {AfterViewInit, Component, ViewChild} from '@angular/core';
 import {ConsoleComponent} from '../../components/console/console.component';
-import {ProjectsService} from '../../services/projects.service';
 import {QuoteService} from '../../services/quote.service';
 import {sleep} from '../../misc/utils';
 
@@ -11,7 +10,7 @@ import {sleep} from '../../misc/utils';
 export class HomeComponent implements AfterViewInit {
 	@ViewChild(ConsoleComponent) console!: ConsoleComponent;
 
-	constructor(public projectsService: ProjectsService, private quotes: QuoteService) { }
+	constructor(private quotes: QuoteService) { }
 
 	ngAfterViewInit() { this.animateConsole(); }