diff --git a/docs/app/app.js b/docs/app/app.js
index 6a7f6c35..c19e1657 100644
--- a/docs/app/app.js
+++ b/docs/app/app.js
@@ -2,6 +2,7 @@ import Application from '@ember/application';
 import Resolver from 'ember-resolver';
 import loadInitializers from 'ember-load-initializers';
 import config from 'docs/config/environment';
+import 'ember-mobile-menu/themes/android';
 
 export default class App extends Application {
   modulePrefix = config.modulePrefix;
diff --git a/ember-mobile-menu/package.json b/ember-mobile-menu/package.json
index 0a79c90f..d7648f10 100644
--- a/ember-mobile-menu/package.json
+++ b/ember-mobile-menu/package.json
@@ -19,7 +19,8 @@
   "exports": {
     ".": "./dist/index.js",
     "./*": "./dist/*.js",
-    "./addon-main.js": "./addon-main.cjs"
+    "./addon-main.js": "./addon-main.cjs",
+    "./themes/*": "./dist/themes/*.css"
   },
   "files": [
     "addon-main.cjs",
diff --git a/ember-mobile-menu/src/components/mobile-menu-toggle.css b/ember-mobile-menu/src/components/mobile-menu-toggle.css
new file mode 100644
index 00000000..c3d422ca
--- /dev/null
+++ b/ember-mobile-menu/src/components/mobile-menu-toggle.css
@@ -0,0 +1,3 @@
+.mobile-menu__toggle {
+  cursor: pointer;
+}
diff --git a/ember-mobile-menu/src/components/mobile-menu-toggle.js b/ember-mobile-menu/src/components/mobile-menu-toggle.js
index bec40f84..7ac87eeb 100644
--- a/ember-mobile-menu/src/components/mobile-menu-toggle.js
+++ b/ember-mobile-menu/src/components/mobile-menu-toggle.js
@@ -1,4 +1,5 @@
 import Component from '@glimmer/component';
+import './mobile-menu-toggle.css';
 
 const _fn = () => {};
 
diff --git a/ember-mobile-menu/src/components/mobile-menu-wrapper.css b/ember-mobile-menu/src/components/mobile-menu-wrapper.css
new file mode 100644
index 00000000..30e624a3
--- /dev/null
+++ b/ember-mobile-menu/src/components/mobile-menu-wrapper.css
@@ -0,0 +1,51 @@
+@layer ember-mobile-menu {
+  :root {
+    --mobile-menu-wrapper-width: 100%;
+    --mobile-menu-wrapper-min-height: 100vh;
+
+    --mobile-menu-height: 100vh;
+    --mobile-menu-z-index: 2000;
+  }
+}
+
+body.mobile-menu--prevent-scroll {
+  overflow: hidden;
+}
+
+.mobile-menu-wrapper {
+  overflow: hidden;
+  width: var(--mobile-menu-wrapper-width);
+  min-height: var(--mobile-menu-wrapper-min-height);
+  /* Avoid Chrome to see Safari hack */
+}
+@supports (-webkit-touch-callout: none) {
+  .mobile-menu-wrapper {
+    /* The hack for Safari */
+    min-height: -webkit-fill-available;
+  }
+}
+
+.mobile-menu-wrapper--embedded {
+  position: relative;
+  min-height: 100%;
+  min-width: 100%;
+  overflow: hidden;
+}
+.mobile-menu-wrapper--embedded .mobile-menu-wrapper__content {
+  min-height: 100%;
+}
+
+.mobile-menu-wrapper__content {
+  min-height: var(--mobile-menu-wrapper-min-height);
+  position: relative;
+  background: #FFF;
+  will-change: transform, margin-left, margin-right;
+  z-index: 1;
+  touch-action: pan-y;
+}
+.mobile-menu-wrapper__content--shadow {
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+}
+.mobile-menu-wrapper__content--ios, .mobile-menu-wrapper__content--reveal, .mobile-menu-wrapper__content--squeeze-reveal {
+  z-index: 2;
+}
diff --git a/ember-mobile-menu/src/components/mobile-menu-wrapper.js b/ember-mobile-menu/src/components/mobile-menu-wrapper.js
index 945875b3..7fd00048 100644
--- a/ember-mobile-menu/src/components/mobile-menu-wrapper.js
+++ b/ember-mobile-menu/src/components/mobile-menu-wrapper.js
@@ -12,6 +12,7 @@ import { assert } from '@ember/debug';
 import { waitFor } from '@ember/test-waiters';
 import { task } from 'ember-concurrency';
 import Spring from '../spring';
+import './mobile-menu-wrapper.css';
 
 const isIOSDevice =
   typeof window !== 'undefined' &&
diff --git a/ember-mobile-menu/src/components/mobile-menu.css b/ember-mobile-menu/src/components/mobile-menu.css
new file mode 100644
index 00000000..289e941e
--- /dev/null
+++ b/ember-mobile-menu/src/components/mobile-menu.css
@@ -0,0 +1,45 @@
+.mobile-menu {
+  position: fixed;
+  top: 0;
+  width: 0;
+}
+
+.mobile-menu.mobile-menu--left {
+  left: 0;
+}
+.mobile-menu.mobile-menu--right {
+  right: 0;
+}
+
+/* variants */
+.mobile-menu--default {
+  z-index: var(--mobile-menu-z-index);
+}
+.mobile-menu--squeeze, .mobile-menu--push {
+  z-index: 2;
+}
+.mobile-menu--ios, .mobile-menu--reveal, .mobile-menu--squeeze-reveal {
+  display: none;
+  z-index: -1;
+}
+.mobile-menu--ios.mobile-menu--dragging, .mobile-menu--ios.mobile-menu--transitioning, .mobile-menu--ios.mobile-menu--open, .mobile-menu--reveal.mobile-menu--dragging, .mobile-menu--reveal.mobile-menu--transitioning, .mobile-menu--reveal.mobile-menu--open, .mobile-menu--squeeze-reveal.mobile-menu--dragging, .mobile-menu--squeeze-reveal.mobile-menu--transitioning, .mobile-menu--squeeze-reveal.mobile-menu--open {
+  display: block;
+  z-index: unset;
+}
+.mobile-menu--ios .mobile-menu__mask, .mobile-menu--reveal .mobile-menu__mask, .mobile-menu--squeeze-reveal .mobile-menu__mask {
+  z-index: 1;
+}
+.mobile-menu--ios.mobile-menu--open .mobile-menu__mask, .mobile-menu--reveal.mobile-menu--open .mobile-menu__mask, .mobile-menu--squeeze-reveal.mobile-menu--open .mobile-menu__mask {
+  display: none;
+}
+
+.mobile-menu-wrapper--embedded .mobile-menu {
+  position: absolute;
+}
+.mobile-menu-wrapper--embedded .mobile-menu__mask, .mobile-menu-wrapper--embedded .mobile-menu.mobile-menu--open, .mobile-menu-wrapper--embedded .mobile-menu.mobile-menu--transitioning, .mobile-menu-wrapper--embedded .mobile-menu.mobile-menu--dragging {
+  width: 100%;
+}
+.mobile-menu-wrapper--embedded .mobile-menu, .mobile-menu-wrapper--embedded .mobile-menu__mask,
+.mobile-menu-wrapper--embedded .mobile-menu .mobile-menu__tray {
+  height: var(--mobile-menu-height);
+}
diff --git a/ember-mobile-menu/src/components/mobile-menu.js b/ember-mobile-menu/src/components/mobile-menu.js
index d4ca53e7..a1b2ac3d 100644
--- a/ember-mobile-menu/src/components/mobile-menu.js
+++ b/ember-mobile-menu/src/components/mobile-menu.js
@@ -4,6 +4,7 @@ import { assert } from '@ember/debug';
 import { htmlSafe } from '@ember/template';
 import { use, Resource } from 'ember-could-get-used-to-this';
 import { next } from '@ember/runloop';
+import './mobile-menu.css';
 
 const _fn = function () {};
 class StateResource extends Resource {
diff --git a/ember-mobile-menu/src/components/mobile-menu/mask.css b/ember-mobile-menu/src/components/mobile-menu/mask.css
new file mode 100644
index 00000000..8aef7e9a
--- /dev/null
+++ b/ember-mobile-menu/src/components/mobile-menu/mask.css
@@ -0,0 +1,26 @@
+.mobile-menu__mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  border: none;
+  border-radius: 0;
+  margin: 0;
+  padding: 0;
+  width: 100vw;
+  height: 100vh;
+  /* Avoid Chrome to see Safari hack */
+  background: rgba(0, 0, 0, 0.3);
+  opacity: 0;
+  transition: none;
+  touch-action: pan-y;
+  will-change: opacity;
+  visibility: hidden;
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+}
+@supports (-webkit-touch-callout: none) {
+  .mobile-menu__mask {
+    /* The hack for Safari */
+    height: -webkit-fill-available;
+  }
+}
diff --git a/ember-mobile-menu/src/components/mobile-menu/mask.js b/ember-mobile-menu/src/components/mobile-menu/mask.js
index 249b735e..1dc105e6 100644
--- a/ember-mobile-menu/src/components/mobile-menu/mask.js
+++ b/ember-mobile-menu/src/components/mobile-menu/mask.js
@@ -1,5 +1,6 @@
 import Component from '@glimmer/component';
 import { htmlSafe } from '@ember/template';
+import './mask.css';
 
 const _fn = () => {};
 
diff --git a/ember-mobile-menu/src/components/mobile-menu/tray.css b/ember-mobile-menu/src/components/mobile-menu/tray.css
new file mode 100644
index 00000000..fcddf54c
--- /dev/null
+++ b/ember-mobile-menu/src/components/mobile-menu/tray.css
@@ -0,0 +1,16 @@
+.mobile-menu__tray {
+  position: absolute;
+  top: 0;
+  height: var(--mobile-menu-height);
+  /* Avoid Chrome to see Safari hack */
+  overflow-y: auto;
+  touch-action: pan-y;
+  background: #FFF;
+  will-change: transform;
+}
+@supports (-webkit-touch-callout: none) {
+  .mobile-menu__tray {
+    /* The hack for Safari */
+    height: -webkit-fill-available;
+  }
+}
diff --git a/ember-mobile-menu/src/components/mobile-menu/tray.js b/ember-mobile-menu/src/components/mobile-menu/tray.js
index a28b59e1..4723f3c9 100644
--- a/ember-mobile-menu/src/components/mobile-menu/tray.js
+++ b/ember-mobile-menu/src/components/mobile-menu/tray.js
@@ -2,6 +2,7 @@ import Component from '@glimmer/component';
 import { htmlSafe } from '@ember/template';
 import { action } from '@ember/object';
 import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
+import './tray.css';
 
 /**
  * The tray that resides within the menu. Menu content is placed in here.
diff --git a/ember-mobile-menu/src/themes/android.css b/ember-mobile-menu/src/themes/android.css
new file mode 100644
index 00000000..489e45dc
--- /dev/null
+++ b/ember-mobile-menu/src/themes/android.css
@@ -0,0 +1,51 @@
+@layer ember-mobile-menu {
+  :root {
+    --mobile-menu-header-bg:                 #E04E39;
+
+    --mobile-menu-item-color:                #333;
+    --mobile-menu-item-active-bg:            #EEE;
+    --mobile-menu-item-link-disabled-color:  #6C757D;
+  }
+}
+
+.mobile-menu__tray .mobile-menu__header {
+  min-height: 150px;
+  background: var(--mobile-menu-header-bg);
+  color: #FFF;
+  margin-bottom: 8px;
+}
+.mobile-menu__tray .mobile-menu__header .header__text {
+  padding: 16px;
+}
+.mobile-menu__tray .mobile-menu__header .header__btn {
+  padding: 16px;
+  color: #FFF;
+  text-decoration: none;
+}
+
+.mobile-menu__tray .mobile-menu__nav {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.mobile-menu__tray .mobile-menu__nav .mobile-menu__nav-item a {
+  display: block;
+  font-size: 12px;
+  font-weight: bold;
+  color: var(--mobile-menu-item-color);
+  line-height: 1.5;
+  text-decoration: none !important;
+
+  padding: 12px;
+}
+.mobile-menu__tray .mobile-menu__nav .mobile-menu__nav-item a.mobile-menu__nav-link.disabled {
+  color: var(--mobile-menu-item-link-disabled-color);
+}
+.mobile-menu__tray .mobile-menu__nav .mobile-menu__nav-item a.active {
+  background: var(--mobile-menu-item-active-bg);
+}
+.mobile-menu__tray .mobile-menu__nav .mobile-menu__nav-divider {
+  margin: 8px 0;
+  height: 0;
+  border-bottom: 1px solid var(--mobile-menu-item-active-bg);
+}