diff --git a/app.vue b/app.vue
index 55c9462..637ef4e 100644
--- a/app.vue
+++ b/app.vue
@@ -1,8 +1,18 @@
+<script setup lang="ts">
+import Framework7 from 'framework7/lite-bundle'
+import Framework7Vue from 'framework7-vue/bundle'
+import { f7App, f7View } from 'framework7-vue'
+
+Framework7.use(Framework7Vue)
+</script>
+
 <template>
-  <div>
+  <f7App>
     <NuxtLoadingIndicator />
-    <NuxtLayout>
-      <NuxtPage />
-    </NuxtLayout>
-  </div>
+    <f7View>
+      <NuxtLayout>
+        <NuxtPage />
+      </NuxtLayout>
+    </f7View>
+  </f7App>
 </template>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 78d0a9b..33c849e 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -10,7 +10,9 @@ export default defineNuxtConfig({
   ],
 
   css: [
-    'framework7/framework7-bundle.min.css',
+    'framework7/css/bundle',
+    'framework7-icons/css/framework7-icons.css',
+    'material-icons/iconfont/material-icons.css',
   ],
 
   vuefire: {
diff --git a/package.json b/package.json
index 3bfae59..ce3f368 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,9 @@
     "eslint": "^8.49.0",
     "firebase": "^10.4.0",
     "framework7": "^8.3.0",
+    "framework7-icons": "^5.0.5",
     "framework7-vue": "^8.3.0",
+    "material-icons": "^1.13.11",
     "nuxt": "^3.7.3",
     "nuxt-vuefire": "^0.3.0",
     "vuefire": "^3.1.17",
diff --git a/pages/index.vue b/pages/index.vue
index 0ba3697..a0a6d32 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,7 +1,196 @@
-<script setup lang="ts">
-const user = useCurrentUser()
+<script>
+import {
+  f7Block,
+  f7Link,
+  f7NavRight,
+  f7Navbar,
+  f7Page,
+  f7Tab,
+  f7Tabs,
+  f7Toolbar,
+} from 'framework7-vue'
+
+export default {
+  components: {
+    F7Navbar: f7Navbar,
+    F7Page: f7Page,
+    F7Block: f7Block,
+    F7Tabs: f7Tabs,
+    F7Tab: f7Tab,
+    F7Link: f7Link,
+    F7Toolbar: f7Toolbar,
+    F7NavRight: f7NavRight,
+  },
+  data() {
+    return {
+      toolbarPosition: 'bottom',
+    }
+  },
+  methods: {
+    toggleToolbarPosition() {
+      this.toolbarPosition = this.toolbarPosition === 'top' ? 'bottom' : 'top'
+    },
+  },
+}
 </script>
 
 <template>
-  <div>{{ user }}</div>
+  <F7Page :page-content="false">
+    <F7Navbar title="Tabbar Icons">
+      <F7NavRight>
+        <F7Link
+          icon-md="material:compare_arrows"
+          icon-ios="f7:arrow_up_arrow_down_circle_fill"
+          @click="toggleToolbarPosition"
+        />
+      </F7NavRight>
+    </F7Navbar>
+    <F7Toolbar position="bottom" tabbar icons>
+      <F7Link
+        tab-link="#tab-1"
+        tab-link-active
+        text="Tab 1"
+        icon-ios="f7:envelope_fill"
+        icon-md="material:email"
+      />
+      <F7Link
+        tab-link="#tab-2"
+        text="Tab 2"
+        icon-ios="f7:calendar_fill"
+        icon-md="material:today"
+      />
+      <F7Link
+        tab-link="#tab-3"
+        text="Tab 3"
+        icon-ios="f7:cloud_upload_fill"
+        icon-md="material:file_upload"
+      />
+    </F7Toolbar>
+
+    <F7Tabs>
+      <F7Tab id="tab-1" class="page-content" tab-active>
+        <F7Block>
+          <p>Tab 1 content</p>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae
+            facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo
+            suscipit temporibus sequi iure ad laboriosam accusamus?
+          </p>
+          <p>
+            Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit
+            blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus sed,
+            sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur
+            deleniti.
+          </p>
+          <p>
+            Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque,
+            est animi culpa modi consequatur reiciendis corporis libero laudantium sed eveniet unde
+            delectus a maiores nihil dolores? Natus, perferendis.
+          </p>
+          <p>
+            Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur
+            perspiciatis quae provident consequatur minima doloremque blanditiis nihil maxime
+            ducimus earum autem. Magni animi blanditiis similique iusto, repellat sed quisquam!
+          </p>
+          <p>
+            Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus
+            ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia
+            explicabo, unde aliquid impedit! Adipisci!
+          </p>
+          <p>
+            Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste
+            fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro
+            accusantium, officiis veniam nostrum cum cumque impedit.
+          </p>
+          <p>
+            Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad
+            praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque
+            provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.
+          </p>
+        </F7Block>
+      </F7Tab>
+      <F7Tab id="tab-2" class="page-content">
+        <F7Block>
+          <p>Tab 2 content</p>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae
+            facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo
+            suscipit temporibus sequi iure ad laboriosam accusamus?
+          </p>
+          <p>
+            Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit
+            blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus sed,
+            sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur
+            deleniti.
+          </p>
+          <p>
+            Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque,
+            est animi culpa modi consequatur reiciendis corporis libero laudantium sed eveniet unde
+            delectus a maiores nihil dolores? Natus, perferendis.
+          </p>
+          <p>
+            Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur
+            perspiciatis quae provident consequatur minima doloremque blanditiis nihil maxime
+            ducimus earum autem. Magni animi blanditiis similique iusto, repellat sed quisquam!
+          </p>
+          <p>
+            Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus
+            ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia
+            explicabo, unde aliquid impedit! Adipisci!
+          </p>
+          <p>
+            Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste
+            fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro
+            accusantium, officiis veniam nostrum cum cumque impedit.
+          </p>
+          <p>
+            Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad
+            praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque
+            provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.
+          </p>
+        </F7Block>
+      </F7Tab>
+      <F7Tab id="tab-3" class="page-content">
+        <F7Block>
+          <p>Tab 3 content</p>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae
+            facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo
+            suscipit temporibus sequi iure ad laboriosam accusamus?
+          </p>
+          <p>
+            Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit
+            blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus sed,
+            sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur
+            deleniti.
+          </p>
+          <p>
+            Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque,
+            est animi culpa modi consequatur reiciendis corporis libero laudantium sed eveniet unde
+            delectus a maiores nihil dolores? Natus, perferendis.
+          </p>
+          <p>
+            Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur
+            perspiciatis quae provident consequatur minima doloremque blanditiis nihil maxime
+            ducimus earum autem. Magni animi blanditiis similique iusto, repellat sed quisquam!
+          </p>
+          <p>
+            Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus
+            ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia
+            explicabo, unde aliquid impedit! Adipisci!
+          </p>
+          <p>
+            Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste
+            fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro
+            accusantium, officiis veniam nostrum cum cumque impedit.
+          </p>
+          <p>
+            Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad
+            praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque
+            provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.
+          </p>
+        </F7Block>
+      </F7Tab>
+    </F7Tabs>
+  </F7Page>
 </template>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4e413c9..9321f68 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -38,9 +38,15 @@ devDependencies:
   framework7:
     specifier: ^8.3.0
     version: 8.3.0
+  framework7-icons:
+    specifier: ^5.0.5
+    version: 5.0.5
   framework7-vue:
     specifier: ^8.3.0
     version: 8.3.0
+  material-icons:
+    specifier: ^1.13.11
+    version: 1.13.11
   nuxt:
     specifier: ^3.7.3
     version: 3.7.3(eslint@8.49.0)(typescript@5.2.2)
@@ -4935,6 +4941,11 @@ packages:
     resolution: {integrity: sha512-n2aZ9tNfYDwaHhvFTkhFErqOMIb8uyzSQ+vGJBjZyanAKZVbGUQ1sngfk9FdkBw7G26O7AgNjLcecLffD1c7eg==}
     dev: true
 
+  /framework7-icons@5.0.5:
+    resolution: {integrity: sha512-bvHMLyujV9TFuudehd3ORZ/EvNp19Ir3ckVzYAOf3MkLymHba/9oHLsgopCh0x5UsrYZUpkrE+fd7ggj5y4wRw==}
+    engines: {node: '>= 0.10.0'}
+    dev: true
+
   /framework7-vue@8.3.0:
     resolution: {integrity: sha512-bCDA2r0IISb1pT43HmdCCzuatIyRTSLLsvyDZR57x/+0ND2eURExv2utbpApK+1Qdg8BvF8rgyBXCphE6C9FnQ==}
     dev: true
@@ -6084,6 +6095,10 @@ packages:
       - supports-color
     dev: true
 
+  /material-icons@1.13.11:
+    resolution: {integrity: sha512-kp2oAdaqo/Zp6hpTZW01rOgDPWmxBUszSdDzkRm1idCjjNvdUMnqu8qu58cll6CObo+o0cydOiPLdoSugLm+mQ==}
+    dev: true
+
   /mdast-util-from-markdown@0.8.5:
     resolution: {integrity: sha512-2hkTXtYYnr+NubD/g6KGBS/0mFmBcifAsI0yIWRiRo0PjVs6SSOSOdtzbp6kSGnShDN6G5aWZpKQ2lWRy27mWQ==}
     dependencies: