diff --git a/examples-standalone/coffee-warehouse/src/app/app.module.ts b/examples-standalone/coffee-warehouse/src/app/app.module.ts
index aba68323..97458050 100644
--- a/examples-standalone/coffee-warehouse/src/app/app.module.ts
+++ b/examples-standalone/coffee-warehouse/src/app/app.module.ts
@@ -46,6 +46,7 @@ import 'hammerjs';
 import '@progress/kendo-angular-intl/locales/en/all';
 import '@progress/kendo-angular-intl/locales/es/all';
 import '@progress/kendo-angular-intl/locales/fr/all';
+import { SettingsListComponent } from './components/accessibility-menu/settings-list/settings-list.component';
 
 @NgModule({
     declarations: [
@@ -58,7 +59,8 @@ import '@progress/kendo-angular-intl/locales/fr/all';
         HeaderComponent,
         InfoComponent,
         TeamComponent,
-        NumericTextboxButtonsComponent
+        NumericTextboxButtonsComponent,
+        SettingsListComponent
     ],
     imports: [
         BrowserModule,
diff --git a/examples-standalone/coffee-warehouse/src/app/components/accessibility-menu/settings-list/settings-list.component.html b/examples-standalone/coffee-warehouse/src/app/components/accessibility-menu/settings-list/settings-list.component.html
new file mode 100644
index 00000000..e06edc47
--- /dev/null
+++ b/examples-standalone/coffee-warehouse/src/app/components/accessibility-menu/settings-list/settings-list.component.html
@@ -0,0 +1,30 @@
+<form class="k-form k-form-md">
+    <fieldset>
+        <legend>Accessibility Settings</legend>
+
+        <kendo-label text="Text size:"></kendo-label>
+        <kendo-numerictextbox></kendo-numerictextbox>
+
+        <kendo-label text="Color theme:"></kendo-label>
+        <kendo-buttongroup>
+            <kendo-button [toggleable]="true">Contrast</kendo-button>
+            <kendo-button [toggleable]="true">Dark</kendo-button>
+        </kendo-buttongroup>
+
+        <kendo-label text="Font:"></kendo-label>
+        <kendo-buttongroup>
+            <kendo-button [toggleable]="true" (click)="changeFont('legible')">Legible Font</kendo-button>
+            <kendo-button [toggleable]="true" (click)="changeFont('dyslexia')">Dyslexia Font</kendo-button>
+        </kendo-buttongroup>
+
+        <kendo-button [toggleable]="true">Underiline Links</kendo-button>
+        <kendo-button [toggleable]="true">Pause Animation</kendo-button>
+        <kendo-button [toggleable]="true">Large Size Widgets</kendo-button>
+
+        <kendo-label text="Line Height:"></kendo-label>
+        <kendo-numerictextbox></kendo-numerictextbox>
+
+        <kendo-label text="Letter Spacing:"></kendo-label>
+        <kendo-numerictextbox></kendo-numerictextbox>
+    </fieldset>
+</form>
diff --git a/examples-standalone/coffee-warehouse/src/app/components/accessibility-menu/settings-list/settings-list.component.ts b/examples-standalone/coffee-warehouse/src/app/components/accessibility-menu/settings-list/settings-list.component.ts
new file mode 100644
index 00000000..8f430a5b
--- /dev/null
+++ b/examples-standalone/coffee-warehouse/src/app/components/accessibility-menu/settings-list/settings-list.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'app-settings-list-component',
+    templateUrl: './settings-list.component.html'
+})
+export class SettingsListComponent {
+    public changeFont(fontType: string): void {
+
+    }
+}