diff --git a/dsynth/src/app/about/about.component.css b/dsynth/src/app/about/about.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/dsynth/src/app/about/about.component.html b/dsynth/src/app/about/about.component.html
new file mode 100644
index 0000000..f036ff4
--- /dev/null
+++ b/dsynth/src/app/about/about.component.html
@@ -0,0 +1,17 @@
+<mat-card style="width: 400px">
+    <mat-card-title>{{ "nav.test" | translate }}</mat-card-title>
+    <mat-card-subtitle>Dog Breed</mat-card-subtitle>
+
+<!--    <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">-->
+    <mat-card-content>
+        <p>
+            The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
+            A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
+            bred for hunting.
+        </p>
+    </mat-card-content>
+    <mat-card-actions>
+        <button mat-button>LIKE</button>
+        <button mat-button>SHARE</button>
+    </mat-card-actions>
+</mat-card>
diff --git a/dsynth/src/app/about/about.component.ts b/dsynth/src/app/about/about.component.ts
new file mode 100644
index 0000000..e4ae6d9
--- /dev/null
+++ b/dsynth/src/app/about/about.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-about',
+  templateUrl: './about.component.html',
+  styleUrls: ['./about.component.css']
+})
+export class AboutComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/dsynth/src/app/app-routing.module.ts b/dsynth/src/app/app-routing.module.ts
index 157a14e..c20b1e5 100644
--- a/dsynth/src/app/app-routing.module.ts
+++ b/dsynth/src/app/app-routing.module.ts
@@ -1,10 +1,11 @@
 import {NgModule} from "@angular/core";
 import {RouterModule, Routes} from "@angular/router";
 import {ContactComponent} from "./contact/contact.component";
+import {AboutComponent} from "./about/about.component";
 
 
 const routes: Routes = [
-    {path: "", component: ContactComponent},
+    {path: "", component: AboutComponent},
     {path: "contact", component: ContactComponent},
 ];
 
diff --git a/dsynth/src/app/app.module.ts b/dsynth/src/app/app.module.ts
index 0de4372..b630dbc 100644
--- a/dsynth/src/app/app.module.ts
+++ b/dsynth/src/app/app.module.ts
@@ -13,6 +13,7 @@ import {TranslateLoader, TranslateModule} from "@ngx-translate/core";
 import {HttpClient, HttpClientModule} from "@angular/common/http";
 import { ContactComponent } from './contact/contact.component';
 import {MatCardModule} from "@angular/material/card";
+import { AboutComponent } from './about/about.component';
 
 export function createTranslateLoader(http: HttpClient) {
     return new TranslateHttpLoader(http, './assets/i18n/', '.json');
@@ -21,7 +22,8 @@ export function createTranslateLoader(http: HttpClient) {
 @NgModule({
     declarations: [
         AppComponent,
-        ContactComponent
+        ContactComponent,
+        AboutComponent
     ],
     imports: [
         BrowserModule,
diff --git a/dsynth/src/favicon.ico b/dsynth/src/favicon.ico
index 997406a..facbeeb 100644
Binary files a/dsynth/src/favicon.ico and b/dsynth/src/favicon.ico differ