diff --git a/src/components/FooterTabs.vue b/src/components/FooterTabs.vue
new file mode 100644
index 0000000..76b341c
--- /dev/null
+++ b/src/components/FooterTabs.vue
@@ -0,0 +1,30 @@
+<template>
+  <q-footer elevated>
+    <q-tabs>
+      <q-route-tab :icon="icon" :to="to" :label="label"/>
+    </q-tabs>
+  </q-footer>
+</template>
+
+<script>
+export default {
+  name: 'FooterTabs',
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    label: {
+      type: String,
+      default: ''
+    },
+    to: {
+      type: String,
+      default: '#'
+    }
+  }
+}
+</script>
+
+<style>
+</style>
diff --git a/src/layouts/Layout.vue b/src/layouts/Layout.vue
new file mode 100644
index 0000000..21701c2
--- /dev/null
+++ b/src/layouts/Layout.vue
@@ -0,0 +1,62 @@
+<template>
+  <q-layout view="lHh Lpr lFf">
+    <q-header elevated>
+      <q-toolbar>
+        <q-btn
+          flat
+          dense
+          round
+          icon="menu"
+          aria-label="Menu"
+          @click="leftDrawerOpen = !leftDrawerOpen"
+        />
+
+        <q-toolbar-title>Quasar Todo List App</q-toolbar-title>
+
+        <div>Quasar v{{ $q.version }}</div>
+      </q-toolbar>
+    </q-header>
+    <FooterTabs v-for="link in essentialLinks" :key="link.label" v-bind="link"/>
+    <q-drawer v-model="leftDrawerOpen" show-if-above bordered content-class="bg-grey-1">
+      <q-list>
+        <q-item-label header class="text-grey-8">Navigation</q-item-label>
+        <EssentialLink v-for="link in essentialLinks" :key="link.label" v-bind="link"/>
+      </q-list>
+    </q-drawer>
+    <q-page-container>
+      <router-view/>
+    </q-page-container>
+  </q-layout>
+</template>
+
+<script>
+import EssentialLink from 'components/EssentialLink'
+import FooterTabs from 'components/FooterTabs'
+
+export default {
+  name: 'Layout',
+
+  components: {
+    EssentialLink,
+    FooterTabs
+  },
+
+  data() {
+    return {
+      leftDrawerOpen: false,
+      essentialLinks: [
+        {
+          label: 'To Do',
+          icon: 'list',
+          to: '/'
+        },
+        {
+          label: 'Settings',
+          icon: 'settings',
+          to: '/settings'
+        }
+      ]
+    }
+  }
+}
+</script>
diff --git a/src/pages/PageSettings.vue b/src/pages/PageSettings.vue
new file mode 100644
index 0000000..54f461a
--- /dev/null
+++ b/src/pages/PageSettings.vue
@@ -0,0 +1,11 @@
+<template>
+  <q-page padding>
+    <p>Settings Page</p>
+  </q-page>
+</template>
+
+<script>
+export default {}
+</script>
+<style>
+</style>
diff --git a/src/pages/PageTodo.vue b/src/pages/PageTodo.vue
new file mode 100644
index 0000000..c4f6f95
--- /dev/null
+++ b/src/pages/PageTodo.vue
@@ -0,0 +1,13 @@
+<template>
+  <q-page padding>
+    <p>Todo Page</p>
+  </q-page>
+</template>
+
+<script>
+export default {
+}
+</script>
+
+<style>
+</style>
diff --git a/src/store/store-flag.d.ts b/src/store/store-flag.d.ts
new file mode 100644
index 0000000..ec274bd
--- /dev/null
+++ b/src/store/store-flag.d.ts
@@ -0,0 +1,9 @@
+// THIS FEATURE-FLAG FILE IS AUTOGENERATED,
+//  REMOVAL OR CHANGES WILL CAUSE RELATED TYPES TO STOP WORKING
+import "quasar/dist/types/feature-flag";
+
+declare module "quasar/dist/types/feature-flag" {
+  interface QuasarFeatureFlags {
+    store: true;
+  }
+}