diff --git a/package-lock.json b/package-lock.json
index 775868d..3378097 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,6 @@
         "@angular/common": "^15.0.4",
         "@angular/compiler": "^15.0.4",
         "@angular/core": "^15.0.4",
-        "@angular/flex-layout": "^14.0.0-beta.41",
         "@angular/forms": "^15.0.4",
         "@angular/material": "^15.0.3",
         "@angular/platform-browser": "^15.0.4",
@@ -1274,22 +1273,6 @@
         "zone.js": "~0.11.4 || ~0.12.0"
       }
     },
-    "node_modules/@angular/flex-layout": {
-      "version": "14.0.0-beta.41",
-      "resolved": "https://registry.npmjs.org/@angular/flex-layout/-/flex-layout-14.0.0-beta.41.tgz",
-      "integrity": "sha512-x1YcxqkdFlcbVXEy9ebCgW/F+7n/MXkEkwEcVEIPf5v5qn7HZsjQxgIj35Lf0amvMyF7h35prpoxO1uX5+ntFg==",
-      "deprecated": "This package has been deprecated. Please see https://blog.angular.io/modern-css-in-angular-layouts-4a259dca9127",
-      "dependencies": {
-        "tslib": "^2.3.0"
-      },
-      "peerDependencies": {
-        "@angular/cdk": "^14.0.0",
-        "@angular/common": "^14.0.0",
-        "@angular/core": "^14.0.0",
-        "@angular/platform-browser": "^14.0.0",
-        "rxjs": "^6.5.3 || ^7.4.0"
-      }
-    },
     "node_modules/@angular/forms": {
       "version": "15.0.4",
       "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-15.0.4.tgz",
@@ -30177,14 +30160,6 @@
         "tslib": "^2.3.0"
       }
     },
-    "@angular/flex-layout": {
-      "version": "14.0.0-beta.41",
-      "resolved": "https://registry.npmjs.org/@angular/flex-layout/-/flex-layout-14.0.0-beta.41.tgz",
-      "integrity": "sha512-x1YcxqkdFlcbVXEy9ebCgW/F+7n/MXkEkwEcVEIPf5v5qn7HZsjQxgIj35Lf0amvMyF7h35prpoxO1uX5+ntFg==",
-      "requires": {
-        "tslib": "^2.3.0"
-      }
-    },
     "@angular/forms": {
       "version": "15.0.4",
       "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-15.0.4.tgz",
diff --git a/package.json b/package.json
index 7825657..3486b24 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,6 @@
     "@angular/common": "^15.0.4",
     "@angular/compiler": "^15.0.4",
     "@angular/core": "^15.0.4",
-    "@angular/flex-layout": "^14.0.0-beta.41",
     "@angular/forms": "^15.0.4",
     "@angular/material": "^15.0.3",
     "@angular/platform-browser": "^15.0.4",
diff --git a/projects/angular-material-extensions/fab-menu/src/lib/mat-fab-menu.component.html b/projects/angular-material-extensions/fab-menu/src/lib/mat-fab-menu.component.html
index 1887e79..77dadc6 100644
--- a/projects/angular-material-extensions/fab-menu/src/lib/mat-fab-menu.component.html
+++ b/projects/angular-material-extensions/fab-menu/src/lib/mat-fab-menu.component.html
@@ -1,18 +1,16 @@
-<div [fxLayout]="layout" class="container" fxLayoutAlign="center center" fxLayoutGap="16px">
-  <div fxLayoutAlign="center">
-    <button (click)="isActive = !isActive"
-            [color]="color" [disabled]="disabled"
-            type="button"
-            [ngClass]="{
-    'mat-fab' : !isActive,
-    'mat-mini-fab' : isActive
-  }"
-            mat-fab>
-      <mat-icon [@fabToggler]="{value: isActive}">{{icon}}</mat-icon> <!-- Animation here -->
-    </button>
-  </div>
-  <div *ngIf="isActive" [@fabsStagger]="fabButtons.length"
-       [fxLayout]="layout2" fxLayoutAlign="center center" fxLayoutGap="16px">
+<div class="container flexLayoutCenter" [style.flex-direction]="layout">
+  <button (click)="isActive = !isActive"
+          [color]="color" [disabled]="disabled"
+          type="button"
+          [ngClass]="{
+  'mat-fab' : !isActive,
+  'mat-mini-fab' : isActive
+}"
+          mat-fab>
+    <mat-icon [@fabToggler]="{value: isActive}">{{icon}}</mat-icon> <!-- Animation here -->
+  </button>
+  <div *ngIf="isActive" class="flexLayoutCenter" [@fabsStagger]="fabButtons.length"
+       [style.flex-direction]="layout2">
     <button (click)="selectFabMenu(fab)"
             *ngFor="let fab of fabButtons"
             [color]="fab?.color"
@@ -22,7 +20,7 @@
             type="button"
             mat-fab>
       <mat-icon *ngIf="fab?.icon" [color]="fab?.iconColor">{{fab?.icon}}</mat-icon>
-      <img *ngIf="fab?.imgUrl" [src]="fab?.imgUrl" alt="icon">
+      <img *ngIf="fab?.imgUrl" [src]="fab?.imgUrl" alt="icon" />
     </button>
   </div>
 </div>
diff --git a/projects/angular-material-extensions/fab-menu/src/lib/mat-fab-menu.component.scss b/projects/angular-material-extensions/fab-menu/src/lib/mat-fab-menu.component.scss
index c244b96..fb161cb 100644
--- a/projects/angular-material-extensions/fab-menu/src/lib/mat-fab-menu.component.scss
+++ b/projects/angular-material-extensions/fab-menu/src/lib/mat-fab-menu.component.scss
@@ -22,10 +22,20 @@
     //display: flex;
     //flex-direction: column-reverse;
     //align-items: center;
-    margin-bottom: 5px;
 
-    button {
-      margin-bottom: 16px;
-    }
+    // Do not force the library user to define negative margin to align the button
+    //margin-bottom: 5px;
+
+    // Do not add additional padding which results in different gap sizes depending upon the direction.
+    //button {
+    //  margin-bottom: 16px;
+    //}
   }
 }
+
+.flexLayoutCenter {
+  display: flex;
+  place-content: center;
+  align-items: center;
+  gap: 16px;
+}
diff --git a/projects/angular-material-extensions/fab-menu/src/lib/mat-fab-menu.module.ts b/projects/angular-material-extensions/fab-menu/src/lib/mat-fab-menu.module.ts
index 200ab77..65648f5 100644
--- a/projects/angular-material-extensions/fab-menu/src/lib/mat-fab-menu.module.ts
+++ b/projects/angular-material-extensions/fab-menu/src/lib/mat-fab-menu.module.ts
@@ -1,22 +1,14 @@
-import {NgModule} from '@angular/core';
-import {MatFabMenuComponent} from './mat-fab-menu.component';
-import {CommonModule} from '@angular/common';
-import {MatIconModule} from '@angular/material/icon';
-import {FlexLayoutModule} from '@angular/flex-layout';
-import {MatTooltipModule} from '@angular/material/tooltip';
-import {MatButtonModule} from '@angular/material/button';
-import {MatMiniFabMenuComponent} from './mat-mini-fab-menu/mat-mini-fab-menu.component';
+import { NgModule } from '@angular/core';
+import { MatFabMenuComponent } from './mat-fab-menu.component';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatButtonModule } from '@angular/material/button';
+import { MatMiniFabMenuComponent } from './mat-mini-fab-menu/mat-mini-fab-menu.component';
 
 @NgModule({
   declarations: [MatFabMenuComponent, MatMiniFabMenuComponent],
-  imports: [
-    CommonModule,
-    MatButtonModule,
-    MatIconModule,
-    MatTooltipModule,
-    FlexLayoutModule
-  ],
-  exports: [MatFabMenuComponent, MatMiniFabMenuComponent]
+  imports: [CommonModule, MatButtonModule, MatIconModule, MatTooltipModule],
+  exports: [MatFabMenuComponent, MatMiniFabMenuComponent],
 })
-export class MatFabMenuModule {
-}
+export class MatFabMenuModule {}
diff --git a/projects/angular-material-extensions/fab-menu/src/lib/mat-mini-fab-menu/mat-mini-fab-menu.component.html b/projects/angular-material-extensions/fab-menu/src/lib/mat-mini-fab-menu/mat-mini-fab-menu.component.html
index 59fafcd..234d506 100644
--- a/projects/angular-material-extensions/fab-menu/src/lib/mat-mini-fab-menu/mat-mini-fab-menu.component.html
+++ b/projects/angular-material-extensions/fab-menu/src/lib/mat-mini-fab-menu/mat-mini-fab-menu.component.html
@@ -1,18 +1,16 @@
-<div [fxLayout]="layout" class="container" fxLayoutAlign="center center" fxLayoutGap="16px">
-  <div fxLayoutAlign="center">
-    <button (click)="isActive = !isActive"
-            [color]="color" [disabled]="disabled"
-            type="button"
-            [ngClass]="{
-    'mat-fab' : !isActive,
-    'mat-mini-fab' : isActive
-  }"
-            mat-mini-fab>
-      <mat-icon [@fabToggler]="{value: isActive}">{{icon}}</mat-icon> <!-- Animation here -->
-    </button>
-  </div>
-  <div *ngIf="isActive" [@fabsStagger]="fabButtons.length"
-       [fxLayout]="layout2" fxLayoutAlign="center center" fxLayoutGap="16px">
+<div class="container flexLayoutCenter" [style.flex-direction]="layout">
+  <button (click)="isActive = !isActive"
+          [color]="color" [disabled]="disabled"
+          type="button"
+          [ngClass]="{
+  'mat-fab' : !isActive,
+  'mat-mini-fab' : isActive
+}"
+          mat-mini-fab>
+    <mat-icon [@fabToggler]="{value: isActive}">{{icon}}</mat-icon> <!-- Animation here -->
+  </button>
+  <div *ngIf="isActive" class="flexLayoutCenter" [@fabsStagger]="fabButtons.length"
+       [style.flex-direction]="layout2">
     <button (click)="selectFabMenu(fab)"
             *ngFor="let fab of fabButtons"
             [color]="fab?.color"
@@ -22,7 +20,7 @@
             type="button"
             mat-fab>
       <mat-icon *ngIf="fab?.icon" [color]="fab?.iconColor">{{fab?.icon}}</mat-icon>
-      <img *ngIf="fab?.imgUrl" [src]="fab?.imgUrl" alt="icon">
+      <img *ngIf="fab?.imgUrl" [src]="fab?.imgUrl" alt="icon" />
     </button>
   </div>
 </div>
diff --git a/projects/angular-material-extensions/fab-menu/src/lib/mat-mini-fab-menu/mat-mini-fab-menu.component.scss b/projects/angular-material-extensions/fab-menu/src/lib/mat-mini-fab-menu/mat-mini-fab-menu.component.scss
index c244b96..fb161cb 100644
--- a/projects/angular-material-extensions/fab-menu/src/lib/mat-mini-fab-menu/mat-mini-fab-menu.component.scss
+++ b/projects/angular-material-extensions/fab-menu/src/lib/mat-mini-fab-menu/mat-mini-fab-menu.component.scss
@@ -22,10 +22,20 @@
     //display: flex;
     //flex-direction: column-reverse;
     //align-items: center;
-    margin-bottom: 5px;
 
-    button {
-      margin-bottom: 16px;
-    }
+    // Do not force the library user to define negative margin to align the button
+    //margin-bottom: 5px;
+
+    // Do not add additional padding which results in different gap sizes depending upon the direction.
+    //button {
+    //  margin-bottom: 16px;
+    //}
   }
 }
+
+.flexLayoutCenter {
+  display: flex;
+  place-content: center;
+  align-items: center;
+  gap: 16px;
+}
diff --git a/src/app/app.component.html b/src/app/app.component.html
index ed575f8..0a050f1 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -435,7 +435,7 @@ <h2>Install</h2>
   <h2>Usage</h2>
 
   <mat-card class="card-container-example">
-    <mat-card-content>
+    <mat-card-content style="display: flex; flex-direction: column">
       <p>
         Color:
         <mat-radio-group aria-label="Select an example option"
@@ -458,35 +458,41 @@ <h2>Usage</h2>
       </p>
 
       <p>
-        Direction
+        Direction:
         <mat-radio-group aria-label="Select a direction"
-                         [(ngModel)]="direction"
-                         (ngModelChange)="logDirection()">
+                         [(ngModel)]="direction">
           <mat-radio-button value="top">Top</mat-radio-button>
           <mat-radio-button value="bottom">Bottom</mat-radio-button>
           <mat-radio-button value="left">Left</mat-radio-button>
           <mat-radio-button value="right">Right</mat-radio-button>
         </mat-radio-group>
       </p>
+      <p>
+        Button size:
+        <mat-radio-group aria-label="Select the button size"
+                         [(ngModel)]="buttonSize">
+          <mat-radio-button [value]="1">Normal</mat-radio-button>
+          <mat-radio-button [value]="2">Mini</mat-radio-button>
+        </mat-radio-group>
+      </p>
+
       <p>
         <mat-slide-toggle #isActive>isActive</mat-slide-toggle>
       </p>
       <p>
         <mat-slide-toggle #disabled>disabled</mat-slide-toggle>
       </p>
-      <div fxLayout="column"
-           [fxLayoutAlign]="layout"
-           [ngStyle.xs]="{'height':'60%'}"
-           [ngStyle.sm]="{'height':'70%'}"
-           style="height: 80%">
-        <mat-fab-menu [color]="color"
+      <div style="flex: 1 1 0px">
+        <mat-fab-menu *ngIf="buttonSize === 1"
+                      [color]="color"
                       [direction]="direction"
                       [fabButtons]="exampleFabButtons"
                       [isActive]="isActive.checked"
                       [disabled]="disabled.checked">
         </mat-fab-menu>
 
-        <mat-mini-fab-menu [color]="color"
+        <mat-mini-fab-menu *ngIf="buttonSize === 2"
+                      [color]="color"
                       [direction]="direction"
                       [fabButtons]="exampleFabButtons"
                       [isActive]="isActive.checked"
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index cfc722a..16e9263 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -14,10 +14,6 @@ mat-fab-menu.fix-bottom-right {
 mat-card-content {
   height: 100%;
 
-  mat-fab-menu {
-    margin-bottom: 16px;
-  }
-
   .mat-radio-button ~ .mat-radio-button {
     margin-left: 16px;
   }
@@ -31,4 +27,3 @@ markdown {
   max-width: 100%;
   margin: 4px;
 }
-
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index ce1f572..be5712e 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -11,11 +11,11 @@ export class AppComponent implements OnInit {
   title = 'fab-menu';
 
   direction: MatFabMenuDirection = 'top';
+  buttonSize = 1;
 
   color: ThemePalette = 'primary';
   exampleIndex = 1;
   exampleFabButtons: MatFabMenu[];
-  layout = 'end end';
 
   fabButtonsRandom: MatFabMenu[] = [
     {
@@ -109,23 +109,12 @@ export class AppComponent implements OnInit {
     this.exampleFabButtons = this.fabProfessions;
   }
 
-  logDirection() {
-    if (this.direction === 'bottom') {
-      this.layout = 'start end';
-    } else if (this.direction === 'right') {
-      this.layout = 'start start';
-    } else {
-      this.layout = 'end end';
-    }
-  }
-
   onExampleChanged($event: number) {
     console.log('on example changed', $event);
     switch ($event) {
       case 1:
         this.exampleFabButtons = this.fabProfessions;
         return;
-
       case 2:
         this.exampleFabButtons = this.fabCountries;
         return;
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 72c3779..1c27061 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,37 +1,32 @@
-import {BrowserModule} from '@angular/platform-browser';
-import {NgModule} from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
 
-import {AppComponent} from './app.component';
-import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {Angulartics2Module} from 'angulartics2';
-import {MarkdownModule} from 'ngx-markdown';
-import {FlexLayoutModule} from '@angular/flex-layout';
-import {HttpClientModule} from '@angular/common/http';
-import {MatFabMenuModule} from '@angular-material-extensions/fab-menu';
-import {FormsModule} from '@angular/forms';
-import {MatRadioModule} from '@angular/material/radio';
-import {MatSlideToggleModule} from '@angular/material/slide-toggle';
-import {MatCardModule} from '@angular/material/card';
+import { AppComponent } from './app.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { Angulartics2Module } from 'angulartics2';
+import { MarkdownModule } from 'ngx-markdown';
+import { HttpClientModule } from '@angular/common/http';
+import { MatFabMenuModule } from '@angular-material-extensions/fab-menu';
+import { FormsModule } from '@angular/forms';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatCardModule } from '@angular/material/card';
 
 @NgModule({
-  declarations: [
-    AppComponent
-  ],
+  declarations: [AppComponent],
   imports: [
-    BrowserModule.withServerTransition({appId: 'serverApp'}),
+    BrowserModule.withServerTransition({ appId: 'serverApp' }),
     BrowserAnimationsModule,
     HttpClientModule,
     FormsModule,
-    FlexLayoutModule,
     Angulartics2Module.forRoot(),
     MarkdownModule.forRoot(),
     MatFabMenuModule,
     MatCardModule,
     MatRadioModule,
-    MatSlideToggleModule
+    MatSlideToggleModule,
   ],
   providers: [],
-  bootstrap: [AppComponent]
+  bootstrap: [AppComponent],
 })
-export class AppModule {
-}
+export class AppModule {}