diff --git a/package-lock.json b/package-lock.json
index 67afb0f..e365ad3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@angular/animations": "^14.0.0",
+        "@angular/cdk": "^14.2.7",
         "@angular/common": "^14.0.0",
         "@angular/compiler": "^14.0.0",
         "@angular/core": "^14.0.0",
@@ -847,6 +848,28 @@
         "@angular/core": "14.3.0"
       }
     },
+    "node_modules/@angular/cdk": {
+      "version": "14.2.7",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-14.2.7.tgz",
+      "integrity": "sha512-/tEsYaUbDSnfEmKVvAMramIptmhI67O+9STjOV0i+74XR2NospeK0fkbywIANu1n3w6AHGMotvRWJrjmbCElFg==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "optionalDependencies": {
+        "parse5": "^5.0.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "^14.0.0 || ^15.0.0",
+        "@angular/core": "^14.0.0 || ^15.0.0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
+    "node_modules/@angular/cdk/node_modules/parse5": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
+      "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
+      "optional": true
+    },
     "node_modules/@angular/cli": {
       "version": "14.2.13",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-14.2.13.tgz",
@@ -9846,13 +9869,6 @@
         "node-gyp-build": "^4.2.2"
       }
     },
-    "node_modules/node-addon-api": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-3.2.1.tgz",
-      "integrity": "sha512-mmcei9JghVNDYydghQmeDX8KoAm0FAiYyIcUt/N4nhyAipB17pllZQDOJD2fotxABnt4Mdz+dKTO7eftLg4d0A==",
-      "dev": true,
-      "optional": true
-    },
     "node_modules/node-forge": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
@@ -9887,18 +9903,6 @@
         "node": "^12.13 || ^14.13 || >=16"
       }
     },
-    "node_modules/node-gyp-build": {
-      "version": "4.7.1",
-      "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.7.1.tgz",
-      "integrity": "sha512-wTSrZ+8lsRRa3I3H8Xr65dLWSgCvY2l4AOnaeKdPA9TB/WYMPaTcrzf3rXvFoVvjKNVnu0CcWSx54qq9GKRUYg==",
-      "dev": true,
-      "optional": true,
-      "bin": {
-        "node-gyp-build": "bin.js",
-        "node-gyp-build-optional": "optional.js",
-        "node-gyp-build-test": "build-test.js"
-      }
-    },
     "node_modules/node-gyp/node_modules/glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
diff --git a/package.json b/package.json
index 7a0f1c8..2220f30 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^14.0.0",
+    "@angular/cdk": "^14.2.7",
     "@angular/common": "^14.0.0",
     "@angular/compiler": "^14.0.0",
     "@angular/core": "^14.0.0",
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 75cae7e..aa42259 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,18 +1,16 @@
-<div class="flex main-container">
-  <div class="flex column left-menu">
+<div class="main-container" [ngClass]="{'flex': !isMobileDisplay}">
+  <div class="flex column left-menu" *ngIf="!isMobileDisplay">
     <div class="header"> DRUMS<br> PATTERN<br> LIBRARY</div>
     <div class="flex menu">
-      <a class="button" routerLink="/techno">Techno</a>
-      <a class="button" routerLink="/drum-n-bass">Drum & Bass</a>
-      <a class="button" routerLink="/garage">Garage - 2 step</a>
-      <a class="button" routerLink="/psytrance">Psytrance</a>
-      <a class="button" routerLink="/metal">Metal</a>
-      <a class="button" routerLink="/rock">Rock</a>
-      <a class="button" routerLink="/rock-variation">Rock variation</a>
-      <a class="button" routerLink="/half-time-groove">Half time groove</a>
+      <a class="button" [routerLink]="link.link" *ngFor="let link of links">{{ link.label }}</a>
+    </div>
+  </div>
+  <div *ngIf="isMobileDisplay">
+    <div class="header-mobile">DRUMS PATTERN LIBRARY</div>
+    <div class="flex mobile-menu">
+      <a class="item" [routerLink]="link.link" *ngFor="let link of links">{{ link.label }}</a>
     </div>
   </div>
-
   <div class="content">
     <router-outlet></router-outlet>
   </div>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 8a62bc6..a479374 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -26,3 +26,31 @@
 .left-menu {
   border-right: solid 1px black;
 }
+
+.nowrap{
+  white-space: nowrap;
+}
+
+.mobile-menu {
+  width: 100%;
+  overflow-x: auto;
+  gap: 5px;
+
+  a {
+    all: unset;
+  }
+
+  .item{
+    white-space: nowrap;
+    background-color: darkgrey;
+    color: white;
+    border-radius: 15px;
+    padding: 10px;
+  }
+}
+
+.header-mobile{
+  font-size: 30px;
+  width: 100%;
+  text-align: center;
+}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 302aa5c..afa2b97 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,10 +1,34 @@
-import { Component } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
+import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';
+import {Link} from "./models/link";
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent {
-  title = 'DrumsPatternLibrary';
+export class AppComponent implements OnInit {
+  isMobileDisplay: boolean = true;
+  links: Link[] = [
+    new Link("Techno", "/techno"),
+    new Link("Drum & Bass", "/drum-n-bass"),
+    new Link("Garage - 2 step", "/garage"),
+    new Link("Psytrance", "/psytrance"),
+    new Link("Metal", "/metal"),
+    new Link("Rock", "/rock"),
+    new Link("Rock variation", "/rock-variation"),
+    new Link("Half time groove", "/half-time-groove")
+  ]
+
+  constructor(private responsive: BreakpointObserver) {
+  }
+
+  ngOnInit(): void {
+    this.responsive.observe([
+      Breakpoints.Web,
+    ])
+      .subscribe(result => {
+        this.isMobileDisplay = !result.matches;
+      });
+  }
 }
diff --git a/src/app/models/link.ts b/src/app/models/link.ts
new file mode 100644
index 0000000..5db52f6
--- /dev/null
+++ b/src/app/models/link.ts
@@ -0,0 +1,9 @@
+export class Link {
+  label: string;
+  link: string;
+
+  constructor(label: string, link: string) {
+    this.label = label;
+    this.link = link;
+  }
+}