diff --git a/src/App.vue b/src/App.vue
index 7c1fd08..b3e60e0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,63 +1,56 @@
 <template>
   <ion-app>
-    <ion-router-outlet />
+    <ion-split-pane content-id="main-content">
+      <RouteMenu v-if="!isOnBrokeringRunPage"/>
+      <ion-router-outlet id="main-content" />
+    </ion-split-pane>
   </ion-app>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { IonApp, IonRouterOutlet, loadingController } from '@ionic/vue';
-import { useStore } from "./store";
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { IonApp, IonRouterOutlet, IonSplitPane, loadingController, onIonViewWillEnter } from '@ionic/vue';
 import emitter from "@/event-bus"
-export default defineComponent({
-  name: 'App',
-  components: {
-    IonApp,
-    IonRouterOutlet
-  },
-  data() {
-    return {
-      loader: null as any
-    }
-  },
-  methods: {
-    async presentLoader() {
-      if (!this.loader) {
-        this.loader = await loadingController
-          .create({
-            message: this.$t("Click the backdrop to dismiss."),
-            translucent: true,
-            backdropDismiss: true
-          });
-      }
-      this.loader.present();
-    },
-    dismissLoader() {
-      if (this.loader) {
-        this.loader.dismiss();
-        this.loader = null as any;
-      }
-    }
-  },
-  async mounted() {
-    this.loader = await loadingController
+import RouteMenu from "@/components/RouteMenu.vue"
+import { useRouter } from 'vue-router';
+
+const loader = ref(null) as any
+const router = useRouter();
+
+async function presentLoader(message = "Click the backdrop to dismiss.") {
+  if (!loader.value) {
+    loader.value = await loadingController
       .create({
-        message: this.$t("Click the backdrop to dismiss."),
+        message,
         translucent: true,
         backdropDismiss: true
       });
-    emitter.on('presentLoader', this.presentLoader);
-    emitter.on('dismissLoader', this.dismissLoader);
-  },
-  unmounted() {
-    emitter.off('presentLoader', this.presentLoader);
-    emitter.off('dismissLoader', this.dismissLoader);
-  },
-  setup(){
-    const store = useStore();
-    return {
-      store,
-    }
-  },
-});
+  }
+  loader.value.present();
+}
+
+function dismissLoader() {
+  if (loader.value) {
+    loader.value.dismiss();
+    loader.value = null as any;
+  }
+}
+
+const isOnBrokeringRunPage = computed(() => router.currentRoute.value.fullPath === '/tabs/brokering')
+
+onMounted(async () => {
+  loader.value = await loadingController
+    .create({
+      message: "Click the backdrop to dismiss.",
+      translucent: true,
+      backdropDismiss: true
+    });
+  emitter.on('presentLoader', presentLoader);
+  emitter.on('dismissLoader', dismissLoader);
+})
+
+onUnmounted(() => {
+  emitter.off('presentLoader', presentLoader);
+  emitter.off('dismissLoader', dismissLoader);
+})
 </script>
\ No newline at end of file
diff --git a/src/components/RouteMenu.vue b/src/components/RouteMenu.vue
new file mode 100644
index 0000000..ee3ad61
--- /dev/null
+++ b/src/components/RouteMenu.vue
@@ -0,0 +1,181 @@
+<template>
+  <div class="route-menu">
+    <div>
+      <ion-list>
+        <ion-list-header ref="listHeader">
+          <ion-label>{{ "Order batches" }}</ion-label>
+          <ion-button color="primary" fill="clear">
+            {{ "New" }}
+            <ion-icon :icon="addCircleOutline" />
+          </ion-button>
+        </ion-list-header>
+        <ion-card v-for="card in [1, 2, 3, 4]" ref="cards" :key="card" @click.prevent="animate">
+          <ion-item lines="full">
+            <ion-label>
+              <h1>{{ 'Order lookup name' }}</h1>
+            </ion-label>
+            <ion-chip>{{ `${card}/4` }}</ion-chip>
+          </ion-item>
+          <ion-item v-show="isOnBrokeringRulePage" ref="item">
+            <ion-badge>{{ 'BADGE' }}</ion-badge>
+            <ion-button fill="clear" color="medium" slot="end">
+              {{ 'Archive' }}
+            </ion-button>
+          </ion-item>
+        </ion-card>
+      </ion-list>
+      <ion-footer v-show="isOnBrokeringRulePage">
+        <ion-toolbar>
+          <ion-item lines="none">
+            <ion-buttons>
+              <ion-button>
+                <ion-icon :icon="archiveOutline"/>
+                {{ "Archive" }}
+              </ion-button>
+            </ion-buttons>
+            <ion-badge slot="end">
+              {{ "4 rules" }}
+            </ion-badge>
+          </ion-item>
+        </ion-toolbar>
+      </ion-footer>
+      <ion-list v-show="!isOnBrokeringRulePage">
+        <ion-item-group>
+          <ion-item-divider color="medium">
+            <ion-label>{{ 'Filters' }}</ion-label>
+          </ion-item-divider>
+          <ion-item>
+            <ion-select label="Queue" value="Brokering Queue">
+              <ion-select-option value="Brokering Queue">{{ 'Brokering Queue' }}</ion-select-option>
+            </ion-select>
+          </ion-item>
+          <ion-item>
+            <ion-select label="Shipping method" value="Next Day">
+              <ion-select-option value="Next Day">{{ 'Next Day' }}</ion-select-option>
+            </ion-select>
+          </ion-item>
+          <ion-item>
+            <ion-select label="Order priority" value="High">
+              <ion-select-option value="High">{{ 'High' }}</ion-select-option>
+            </ion-select>
+          </ion-item>
+          <ion-item>
+            <ion-label>{{ 'Promise date' }}</ion-label>
+            <ion-chip>{{ 'select date' }}</ion-chip>
+          </ion-item>
+          <ion-item>
+            <ion-select label="Queue" value="Brokering Queue">
+              <ion-select-option value="Brokering Queue">{{ 'Brokering Queue' }}</ion-select-option>
+            </ion-select>
+          </ion-item>
+        </ion-item-group>
+      </ion-list>
+      <ion-list v-show="!isOnBrokeringRulePage">
+        <ion-item-group>
+          <ion-item-divider color="medium">
+            <ion-label>{{ 'Sort' }}</ion-label>
+          </ion-item-divider>
+          <ion-reorder-group :disabled="false">
+            <ion-item>
+              <ion-label>{{ 'Ship by' }}</ion-label>
+              <ion-reorder />
+            </ion-item>
+            <ion-item>
+              <ion-label>{{ 'Ship after' }}</ion-label>
+              <ion-reorder />
+            </ion-item>
+            <ion-item>
+              <ion-label>{{ 'Order date' }}</ion-label>
+              <ion-reorder />
+            </ion-item>
+            <ion-item>
+              <ion-label>{{ 'Shipping method' }}</ion-label>
+              <ion-reorder />
+            </ion-item>
+          </ion-reorder-group>
+        </ion-item-group>
+      </ion-list>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { IonBadge, IonButtons, IonButton, IonCard, IonChip, IonFooter, IonIcon, IonItem, IonItemDivider, IonItemGroup, IonLabel, IonList, IonListHeader, IonReorder, IonReorderGroup, IonSelect, IonSelectOption, IonToolbar, createAnimation } from '@ionic/vue';
+import { addCircleOutline, archiveOutline } from "ionicons/icons";
+import { computed, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+const cards = ref([])
+const listHeader = ref(null) as any
+const item = ref(null) as any
+const moveTop = ref(0)
+
+const isOnBrokeringRulePage = computed(() => router.currentRoute.value.fullPath.includes('/route'))
+
+function animate(e: Event) {
+  if(isOnBrokeringRulePage.value) {
+    routeForward(e)
+  } else {
+    routeBackward(e)
+  }
+}
+
+function routeForward(e: Event) {
+  const element = e.currentTarget as HTMLElement
+  const hideCards = cards.value.map((card: any) => {
+    if(element != card.$el) {
+      return card.$el
+    }
+  }).filter(card => card)
+
+  
+  createAnimation()
+    .addElement(listHeader.value.$el)
+    .addElement(item.value.$el)
+    .addElement(hideCards)
+    .duration(1000)
+    .fromTo('opacity', '1', '0')
+    .to('display', 'none').play()
+  
+  moveTop.value = element.getBoundingClientRect().top
+
+  createAnimation()
+    .addElement(element)
+    .duration(1000)
+    .fromTo('transform', 'translateY(0px)', `translateY(-${moveTop.value}px)`).play()
+
+  router.push('query')
+}
+
+function routeBackward(e: Event) {
+  const showCards = cards.value.map((card: any) => {
+    if(e.currentTarget != card.$el) {
+      return card.$el
+    }
+  }).filter(card => card)
+  const element = e.currentTarget as HTMLElement
+  
+  createAnimation()
+  .addElement(listHeader.value.$el)
+  .addElement(item.value.$el)
+  .addElement(showCards)
+  .duration(1000)
+  .fromTo('opacity', '0', '1')
+  .to('display', 'block').play()
+  
+  createAnimation()
+    .addElement(element)
+    .duration(1000)
+    .fromTo('transform', `translateY(-${moveTop.value}px)`, 'translateY(0px)').play();
+
+  router.go(-1)
+}
+
+</script>
+
+<style scoped>
+.route-menu > div {
+  width: 100%;
+}
+</style>
diff --git a/src/router/index.ts b/src/router/index.ts
index e6da0f7..2005626 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,8 +1,6 @@
 import { createRouter, createWebHistory } from '@ionic/vue-router';
 import { RouteRecordRaw } from 'vue-router';
-import Home from '@/views/Home.vue'
 import Login from '@/views/Login.vue'
-import Settings from "@/views/Settings.vue"
 import store from '@/store'
 import Tabs from '@/views/Tabs.vue'
 
@@ -25,7 +23,7 @@ const loginGuard = (to: any, from: any, next: any) => {
 const routes: Array<RouteRecordRaw> = [
   {
     path: '/',
-    redirect: '/tabs/home'
+    redirect: '/tabs/brokering'
   },
   {
     path: '/tabs',
@@ -33,41 +31,33 @@ const routes: Array<RouteRecordRaw> = [
     children: [
       {
         path: '',
-        redirect: '/home'
+        redirect: '/brokering'
       },
       {
-        path: 'home',
-        component: () => import('@/views/Home.vue')
+        path: 'brokering',
+        component: () => import('@/views/BrokeringRuns.vue')
+      },
+      {
+        path: 'brokering/route',
+        component: () => import('@/views/BrokeringRoute.vue')
+      },
+      {
+        path: 'brokering/query',
+        component: () => import('@/views/BrokeringQuery.vue')
       },
       {
         path: 'settings',
         component: () => import('@/views/Settings.vue')
-      },
+      }
     ],
     beforeEnter: authGuard
   },
-  {
-    path: '/',
-    redirect: '/settings'
-  },
-  {
-    path: '/home',
-    name: 'Home',
-    component: Home,
-    beforeEnter: authGuard
-  },
   {
     path: '/login',
     name: 'Login',
     component: Login,
     beforeEnter: loginGuard
   },
-  {
-    path: "/settings",
-    name: "Settings",
-    component: Settings,
-    beforeEnter: authGuard
-  }
 ]
 
 const router = createRouter({
diff --git a/src/views/BrokeringQuery.vue b/src/views/BrokeringQuery.vue
new file mode 100644
index 0000000..2d2ce52
--- /dev/null
+++ b/src/views/BrokeringQuery.vue
@@ -0,0 +1,132 @@
+<template>
+  <ion-page>
+    <ion-split-pane content-id="query-content">
+      <ion-list>
+        <ion-reorder-group :disabled="false">
+          <ion-item>
+            <ion-label>{{ "Warehouse only" }}</ion-label>
+            <ion-reorder />
+          </ion-item>
+          <ion-item>
+            <ion-label>{{ "Warehouse and stores" }}</ion-label>
+            <ion-reorder />
+          </ion-item>
+          <ion-item>
+            <ion-label>{{ "Any Location" }}</ion-label>
+            <ion-reorder />
+          </ion-item>
+        </ion-reorder-group>
+      </ion-list>
+      <ion-content id="query-content">
+        <section class="filters">
+          <ion-card>
+            <ion-item>
+              <ion-icon slot="start" :icon="filterOutline"/>
+              <ion-label>{{ "Filters" }}</ion-label>
+              <ion-icon :icon="optionsOutline"/>
+            </ion-item>
+            <ion-item>
+              <ion-select label="Group" value="East coast stores">
+                <ion-select-option value="East coast stores">{{ 'East coast stores' }}</ion-select-option>
+              </ion-select>
+            </ion-item>
+            <ion-item>
+              <ion-select label="Proximity" value="Zone 1">
+                <ion-select-option value="Zone 1">{{ 'Zone 1' }}</ion-select-option>
+              </ion-select>
+            </ion-item>
+            <ion-item>
+              <ion-label>{{ "Brokering safety stock" }}</ion-label>
+              <ion-chip>{{ "3" }}</ion-chip>
+            </ion-item>
+          </ion-card>
+          <ion-card>
+            <ion-item>
+              <ion-icon slot="start" :icon="swapVerticalOutline"/>
+              <ion-label>{{ "Sort" }}</ion-label>
+              <ion-icon :icon="optionsOutline"/>
+            </ion-item>
+            <ion-reorder-group :disabled="false">
+              <ion-item>
+                <ion-label>{{ "Proximity" }}</ion-label>
+                <ion-reorder />
+              </ion-item>
+              <ion-item>
+                <ion-label>{{ "Order limit" }}</ion-label>
+                <ion-reorder />
+              </ion-item>
+              <ion-item>
+                <ion-label>{{ "Inventory balance" }}</ion-label>
+                <ion-reorder />
+              </ion-item>
+              <ion-item>
+                <ion-label>{{ "Custom Sequence" }}</ion-label>
+                <ion-reorder />
+              </ion-item>
+            </ion-reorder-group>
+          </ion-card>
+        </section>
+        <section>
+          <h2 class="ion-padding-start">{{ "Actions" }}</h2>
+          <div class="actions">
+            <ion-card>
+              <ion-item lines="none">
+                <ion-label>{{ "Fully available" }}</ion-label>
+              </ion-item>
+              <ion-item lines="none">
+                <ion-chip>{{ "Next rule" }}</ion-chip>
+                <ion-chip>{{ "Move to queue" }}</ion-chip>
+                <ion-chip>
+                  <ion-icon slot="start" :icon="checkmarkOutline" />
+                  {{ "Auto cancel days: 10" }}
+                </ion-chip>
+              </ion-item>
+            </ion-card>
+            <ion-card>
+              <ion-item lines="none">
+                <ion-label>{{ "Partially available" }}</ion-label>
+              </ion-item>
+              <ion-item lines="none">
+                <ion-chip>
+                  <ion-icon :icon="checkmarkOutline" />
+                  <ion-label>{{ "Allocate partial" }}</ion-label>
+                </ion-chip>
+                <ion-chip>{{ "Next rule" }}</ion-chip>
+                <ion-chip>{{ "Move to queue" }}</ion-chip>
+                <ion-chip>
+                  <ion-icon :icon="checkmarkOutline" />
+                  <ion-label>{{ "Auto cancel days: 10" }}</ion-label>
+                </ion-chip>
+              </ion-item>
+            </ion-card>
+            <ion-card>
+              <ion-item lines="none">
+                <ion-label>{{ "Not available" }}</ion-label>
+              </ion-item>
+              <ion-item lines="none">
+                <ion-chip>{{ "Move to queue" }}</ion-chip>
+                <ion-chip>{{ "Next rule" }}</ion-chip>
+                <ion-chip>
+                  <ion-icon :icon="checkmarkOutline"/>
+                  <ion-label>{{ "Auto cancel days: 10" }}</ion-label>
+                </ion-chip>
+              </ion-item>
+            </ion-card>
+          </div>
+        </section>
+      </ion-content>
+    </ion-split-pane>
+  </ion-page>
+</template>
+
+<script setup lang="ts">
+import { IonCard, IonChip, IonContent, IonIcon, IonItem, IonLabel, IonList, IonPage, IonReorder, IonReorderGroup, IonSelect, IonSelectOption, IonSplitPane } from "@ionic/vue";
+import { checkmarkOutline, filterOutline, optionsOutline, swapVerticalOutline } from "ionicons/icons"
+</script>
+
+<style scoped>
+.actions, .filters {
+  display: grid;
+  grid-template-columns: repeat(2, auto);
+}
+</style>
diff --git a/src/views/BrokeringRoute.vue b/src/views/BrokeringRoute.vue
new file mode 100644
index 0000000..f8bc40f
--- /dev/null
+++ b/src/views/BrokeringRoute.vue
@@ -0,0 +1,68 @@
+<template>
+  <ion-page>
+    <ion-header :translucent="true">
+      <ion-toolbar>
+        <ion-title>{{ "Brokering run name" }}</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content>
+      <section class="ion-padding">
+        <main>
+          <ion-item lines="none">
+            {{ "Description" }}
+            <ion-button fill="clear" slot="end">
+              {{ "Edit" }}
+            </ion-button>
+          </ion-item>
+          <ion-item lines="none">
+            <ion-label>
+              {{ "This is what a long description of the routing rule that the user has created looks like. This also includes an edit button where the user can edit their description inline" }}
+            </ion-label>
+          </ion-item>
+        </main>
+        <aside>
+          <ion-card>
+            <ion-card-header>
+              <ion-card-title>
+                {{ "Scheduler" }}
+              </ion-card-title>
+            </ion-card-header>
+            <ion-item>
+              <ion-icon slot="start" :icon="timeOutline"/>
+              <ion-label>{{ 'Run time' }}</ion-label>
+              <ion-label slot="end">{{ '3:00 PM EST' }}</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-icon slot="start" :icon="timerOutline"/>
+              <ion-label>{{ 'Schedule' }}</ion-label>
+              <ion-label slot="end">{{ 'Every 5 minutes' }}</ion-label>
+            </ion-item>
+          </ion-card>
+          <ion-item>
+            {{ 'Created at <time>' }}
+          </ion-item>
+          <ion-item>
+            {{ 'Updated at <time>' }}
+          </ion-item>
+        </aside>
+      </section>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script setup lang="ts">
+import { IonButton, IonCard, IonCardHeader, IonCardTitle, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonPage, IonTitle, IonToolbar } from "@ionic/vue";
+import { timeOutline, timerOutline } from "ionicons/icons"
+</script>
+
+<style scoped>
+section {
+  display: flex;
+  justify-content: space-between;
+}
+
+section > * {
+  min-width: 40ch;
+}
+</style>
diff --git a/src/views/BrokeringRuns.vue b/src/views/BrokeringRuns.vue
new file mode 100644
index 0000000..471b41c
--- /dev/null
+++ b/src/views/BrokeringRuns.vue
@@ -0,0 +1,128 @@
+<template>
+  <ion-page>
+    <ion-header :translucent="true">
+      <ion-toolbar>
+        <ion-title>{{ "Brokering Runs" }}</ion-title>
+        
+        <ion-buttons slot="end">
+          <ion-button color="primary">
+            {{ "New Run" }}
+            <ion-icon :icon="addOutline" />
+          </ion-button>
+        </ion-buttons>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content>
+      <main>
+        <section>
+          <ion-card @click="router.push('brokering/route')">
+            <ion-card-header>
+              <ion-card-title>
+                {{ "Brokering run name" }}
+              </ion-card-title>
+            </ion-card-header>
+            <ion-item>
+              {{ "Description" }}
+            </ion-item>
+            <ion-item>
+              {{ "<Frequency>" }}
+              {{ "<Runtime>" }}
+            </ion-item>
+            <ion-item>
+              {{ "Created at <time>" }}
+            </ion-item>
+            <ion-item>
+              {{ "Updated at <time>" }}
+            </ion-item>
+          </ion-card>
+          <ion-card @click="router.push('brokering/route')">
+            <ion-card-header>
+              <ion-card-title>
+                {{ "Brokering run name" }}
+              </ion-card-title>
+            </ion-card-header>
+            <ion-item>
+              {{ "Description" }}
+            </ion-item>
+            <ion-item>
+              {{ "<Frequency>" }}
+              {{ "<Runtime>" }}
+            </ion-item>
+            <ion-item>
+              {{ "Created at <time>" }}
+            </ion-item>
+            <ion-item>
+              {{ "Updated at <time>" }}
+            </ion-item>
+          </ion-card>
+          <ion-card @click="router.push('brokering/route')">
+            <ion-card-header>
+              <ion-card-title>
+                {{ "Brokering run name" }}
+              </ion-card-title>
+            </ion-card-header>
+            <ion-item>
+              {{ "Description" }}
+            </ion-item>
+            <ion-item>
+              {{ "<Frequency>" }}
+              {{ "<Runtime>" }}
+            </ion-item>
+            <ion-item>
+              {{ "Created at <time>" }}
+            </ion-item>
+            <ion-item>
+              {{ "Updated at <time>" }}
+            </ion-item>
+          </ion-card>
+          <ion-card @click="router.push('brokering/route')">
+            <ion-card-header>
+              <ion-card-title>
+                {{ "Brokering run name" }}
+              </ion-card-title>
+            </ion-card-header>
+            <ion-item>
+              {{ "Description" }}
+            </ion-item>
+            <ion-item>
+              {{ "<Frequency>" }}
+              {{ "<Runtime>" }}
+            </ion-item>
+            <ion-item>
+              {{ "Created at <time>" }}
+            </ion-item>
+            <ion-item>
+              {{ "Updated at <time>" }}
+            </ion-item>
+          </ion-card>
+        </section>
+      </main>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script setup lang="ts">
+import { IonButton, IonButtons, IonCard, IonCardHeader, IonCardTitle, IonContent, IonHeader, IonIcon, IonItem, IonPage, IonTitle, IonToolbar } from "@ionic/vue";
+import { addOutline } from "ionicons/icons"
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+</script>
+
+<style scoped>
+@media (min-width: 991px) {
+  main {
+    display: flex;
+    justify-content: center;
+    align-items: start;
+    gap: var(--spacer-2xl);
+    max-width: 990px;
+    margin: var(--spacer-base) auto 0;
+  }
+
+  main > section {
+    min-width: 50ch;
+  }
+}
+</style>
diff --git a/src/views/Home.vue b/src/views/Home.vue
deleted file mode 100644
index fcd2d9f..0000000
--- a/src/views/Home.vue
+++ /dev/null
@@ -1,171 +0,0 @@
-<template>
-  <ion-page> 
-    <ion-content>
-      <main>
-        <section>
-          <ion-list>
-            <ion-list-header lines="full">
-              <ion-label color="medium">{{ $t("FLOWS") }}</ion-label>
-              <ion-button>
-                {{ $t("Add") }}
-                <ion-icon :icon="addCircleOutline" />
-              </ion-button>
-            </ion-list-header>
-
-            <ion-card @click="viewRule">
-              <ion-item lines="none">
-                <h2>Release Pre-orders</h2>
-                <ion-toggle color="secondary" slot="end" :checked="true" />
-              </ion-item>
-              <ion-card-content>
-                {{ $t("Scheduled") }}: 7:30am <br>
-                {{ $t("Frequency") }}: Every Day
-                <ion-icon slot="end" :icon="ellipsisVerticalOutline" />
-              </ion-card-content>
-            </ion-card>
-      
-            <ion-card @click="viewRule">
-              <ion-item lines="none">
-                <h2>Morning brokering</h2>
-                <ion-toggle color="secondary" slot="end" :checked="true" />
-              </ion-item>
-              <ion-card-content>
-                {{ $t("Scheduled") }}: 8:00am <br>
-                {{ $t("Frequency") }}: Every Day
-                <ion-icon slot="end" :icon="ellipsisVerticalOutline" />
-              </ion-card-content>
-            </ion-card>
-          </ion-list>
-        </section>
-        <aside class="desktop-only" v-if="isDesktop" >
-          <RuleConfiguration />
-        </aside>
-      </main>
-    </ion-content>
-  </ion-page>
-</template>
-
-<script lang="ts">
-import { IonPage, IonButton, IonCard, IonCardContent, IonContent, IonIcon, IonItem, IonLabel, IonList, IonListHeader, isPlatform, IonToggle, createAnimation } from '@ionic/vue';
-import { defineComponent } from 'vue';
-import { addCircleOutline, ellipsisVerticalOutline } from "ionicons/icons";
-import RuleConfiguration from '@/components/RuleConfiguration.vue'
-import { useRouter } from 'vue-router';
-import { useStore } from 'vuex';
-
-export default defineComponent({
-  name: 'Home',
-  components: {
-    IonPage,
-    IonButton,
-    IonCard,
-    IonCardContent,
-    IonContent,
-    IonIcon,
-    IonItem,
-    IonLabel,
-    IonList,
-    IonListHeader,
-    IonToggle,
-    RuleConfiguration,
-  },
-  data() {
-    return {
-      isDesktop: isPlatform('desktop'),
-      isRuleAnimationCompleted: false,
-    }
-  },
-  methods: {
-    viewRule() {
-      if (!this.isRuleAnimationCompleted) {
-        this.playAnimation();
-        this.isRuleAnimationCompleted = true;
-      }
-    },
-    playAnimation() {
-      const aside = document.querySelector('aside') as Element
-      const main = document.querySelector('main') as Element
-      const revealAnimation = createAnimation()
-        .addElement(aside)
-        .duration(1500)
-        .easing('ease')
-        .keyframes([
-          { offset: 0, flex: '0', opacity: '0' },
-          { offset: 0.5, flex: '1', opacity: '0' },
-          { offset: 1, flex: '1', opacity: '1' }
-        ])
-      const gapAnimation = createAnimation()
-        .addElement(main)
-        .duration(500)
-        .fromTo('gap', '0', 'var(--spacer-2xl)');
-      createAnimation()
-        .addAnimation([gapAnimation, revealAnimation])
-        .play();
-    }
-  },
-  
-  setup() {
-    const router = useRouter();
-    const store = useStore();
-    return {
-      store,
-      router,
-      addCircleOutline,
-      ellipsisVerticalOutline
-    };
-  }
-});
-</script>
-
-<style scoped>
-  ion-card h2 {
-    font-size: 22px;
-  }
-
-  ion-card {
-    margin: var(--spacer-base) 0;
-  }
-
-  ion-card ion-icon {
-    position: absolute;
-    right: 10px;
-    bottom: var(--spacer-base);
-    font-size: var(--spacer-base);
-  }
-
-  aside {
-    position: sticky;
-    top: var(--spacer-lg);
-  }
-
-  .desktop-only {
-    display: none;
-  }
-
-  @media (min-width: 991px) {
-    main {
-      display: flex;
-      justify-content: center;
-      align-items: start;
-      max-width: 990px;
-      margin: var(--spacer-base) auto 0;
-    }
-
-    main > section {
-      flex-basis: 370px;
-    }
-
-    .desktop-only {
-      display: unset;
-    }
-
-    .mobile-only {
-      display: none;
-    }
-
-    aside {
-      width: 0px;
-      opacity: 0;
-    }
-  }
-</style>
\ No newline at end of file
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index 72b2b07..b897a74 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -2,7 +2,7 @@
   <ion-page>
     <ion-header :translucent="true">
       <ion-toolbar>
-        <ion-back-button slot="start" default-href="/home" />
+        <ion-back-button slot="start" default-href="/" />
         <ion-title>{{ $t("Settings") }}</ion-title>
       </ion-toolbar>
     </ion-header>
diff --git a/src/views/Tabs.vue b/src/views/Tabs.vue
index 824b4f7..02132ee 100644
--- a/src/views/Tabs.vue
+++ b/src/views/Tabs.vue
@@ -3,13 +3,13 @@
     <ion-tabs>
       <ion-router-outlet></ion-router-outlet>
       <ion-tab-bar slot="bottom">
-        <ion-tab-button tab="home" href="/tabs/home">
-          <ion-icon :icon="cogOutline" />
-          <ion-label>{{ $t("Flows") }}</ion-label>
+        <ion-tab-button tab="brokering" href="/tabs/brokering">
+          <ion-icon :icon="shuffleOutline" />
+          <ion-label>{{ $t("Brokering") }}</ion-label>
         </ion-tab-button>
 
         <ion-tab-button tab="more" href="/tabs/settings">
-          <ion-icon :icon="menuOutline" />
+          <ion-icon :icon="settingsOutline" />
           <ion-label>{{ $t("Settings") }}</ion-label>
         </ion-tab-button>
       </ion-tab-bar>
@@ -17,23 +17,9 @@
   </ion-page>
 </template>
 
-<script lang="ts">
-import { IonIcon, IonLabel, IonPage, IonTabBar, IonTabButton, IonTabs, IonRouterOutlet } from "@ionic/vue";
-import {
-  cogOutline,
-  menuOutline,
-} from "ionicons/icons";
-
-export default {
-  name: "Tabs",
-  components: { IonIcon, IonLabel, IonPage, IonTabBar, IonTabButton, IonTabs, IonRouterOutlet },
-  setup () {
-    return {
-      cogOutline,
-      menuOutline,
-    };
-  }
-};
+<script setup lang="ts">
+import { IonIcon, IonLabel, IonPage, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs,  } from "@ionic/vue";
+import { cogOutline, settingsOutline, shuffleOutline } from "ionicons/icons";
 </script>
 
 <style scoped>