diff --git a/app/src/main/java/com/f1rq/lifemap/MainActivity.kt b/app/src/main/java/com/f1rq/lifemap/MainActivity.kt
index 24c1d7c..39066d7 100644
--- a/app/src/main/java/com/f1rq/lifemap/MainActivity.kt
+++ b/app/src/main/java/com/f1rq/lifemap/MainActivity.kt
@@ -3,18 +3,29 @@ package com.f1rq.lifemap
 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.shadow
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
 import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
 import androidx.navigation.compose.currentBackStackEntryAsState
 import androidx.navigation.compose.rememberNavController
 import com.f1rq.lifemap.navigationbar.NavigationBar
+import com.f1rq.lifemap.topappbar.TopAppBar
 import com.f1rq.lifemap.screens.ListView
 import com.f1rq.lifemap.screens.MapView
+import com.f1rq.lifemap.screens.SettingsScreen
+import com.f1rq.lifemap.screens.NotificationsScreen
 import com.f1rq.lifemap.ui.theme.LifeMapTheme
 import com.f1rq.lifemap.ui.theme.ActiveNavColor
 import com.f1rq.lifemap.ui.theme.InactiveNavColor
@@ -27,6 +38,12 @@ class MainActivity : ComponentActivity() {
                 val navController = rememberNavController()
 
                 Scaffold(
+                    topBar = {
+                          TopAppBar(
+                              onSettingsIconTapped = { navController.navigate("settings")},
+                              onNotificationsIconTapped = { navController.navigate("notifications")}
+                          )
+                    },
                     bottomBar = {
                         val navBackStackEntry = navController.currentBackStackEntryAsState()
                         val currentRoute = navBackStackEntry.value?.destination?.route
@@ -46,6 +63,8 @@ class MainActivity : ComponentActivity() {
                     ) {
                         composable("mapview") { MapView(Modifier) }
                         composable("listview") { ListView(Modifier) }
+                        composable("settings") { SettingsScreen(Modifier)}
+                        composable("notifications") { NotificationsScreen(Modifier)}
                     }
                 }
             }
diff --git a/app/src/main/java/com/f1rq/lifemap/screens/MapView.kt b/app/src/main/java/com/f1rq/lifemap/screens/MapView.kt
index 343bd02..3efd0b0 100644
--- a/app/src/main/java/com/f1rq/lifemap/screens/MapView.kt
+++ b/app/src/main/java/com/f1rq/lifemap/screens/MapView.kt
@@ -6,6 +6,7 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import com.f1rq.lifemap.addevent.AddEvent
 
 @Composable
 fun MapView(modifier: Modifier = Modifier) {
@@ -13,6 +14,7 @@ fun MapView(modifier: Modifier = Modifier) {
         modifier = Modifier.fillMaxSize(),
         contentAlignment = Alignment.Center
     ) {
+        AddEvent()
         Text("Map view")
     }
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/f1rq/lifemap/screens/NotificationsScreen.kt b/app/src/main/java/com/f1rq/lifemap/screens/NotificationsScreen.kt
new file mode 100644
index 0000000..e10557e
--- /dev/null
+++ b/app/src/main/java/com/f1rq/lifemap/screens/NotificationsScreen.kt
@@ -0,0 +1,18 @@
+package com.f1rq.lifemap.screens
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+
+@Composable
+fun NotificationsScreen(modifier: Modifier = Modifier) {
+    Box(
+        modifier = Modifier.fillMaxSize(),
+        contentAlignment = Alignment.Center
+    ) {
+        Text("Notifications")
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/f1rq/lifemap/screens/SettingsScreen.kt b/app/src/main/java/com/f1rq/lifemap/screens/SettingsScreen.kt
new file mode 100644
index 0000000..8c6b282
--- /dev/null
+++ b/app/src/main/java/com/f1rq/lifemap/screens/SettingsScreen.kt
@@ -0,0 +1,18 @@
+package com.f1rq.lifemap.screens
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+
+@Composable
+fun SettingsScreen(modifier: Modifier = Modifier) {
+    Box(
+        modifier = Modifier.fillMaxSize(),
+        contentAlignment = Alignment.Center
+    ) {
+        Text("Settings screen")
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/ui-packages/add_event/VERSION.txt b/app/src/main/ui-packages/add_event/VERSION.txt
new file mode 100644
index 0000000..a487dd1
--- /dev/null
+++ b/app/src/main/ui-packages/add_event/VERSION.txt
@@ -0,0 +1 @@
+0.3.12
\ No newline at end of file
diff --git a/app/src/main/ui-packages/add_event/add_event.json b/app/src/main/ui-packages/add_event/add_event.json
new file mode 100644
index 0000000..a23c724
--- /dev/null
+++ b/app/src/main/ui-packages/add_event/add_event.json
@@ -0,0 +1,360 @@
+{
+  "name": "add_event",
+  "version": 33,
+  "source-key": {
+    "type": "figma",
+    "file": "7RzB5mC9Qj82hGEbAM11GM",
+    "node": "76:4",
+    "version": "2205685389783780702",
+    "component-id": "7df95c19403de2b4b8280d6464fc1c747d4921a5"
+  },
+  "default": "Add event",
+  "design": {
+    "atoms": [
+      {
+        "type": "group",
+        "id": "top_level",
+        "root": "true"
+      },
+      {
+        "type": "group",
+        "id": "top_level_synth"
+      },
+      {
+        "type": "group",
+        "id": "Background"
+      },
+      {
+        "type": "group",
+        "id": "Content"
+      },
+      {
+        "type": "group",
+        "id": "Title"
+      },
+      {
+        "type": "group",
+        "id": "FAB"
+      },
+      {
+        "type": "text",
+        "id": "LifeMap title"
+      },
+      {
+        "type": "text",
+        "id": "subtitle"
+      },
+      {
+        "type": "group",
+        "id": "state-layer"
+      },
+      {
+        "type": "group",
+        "id": "icon"
+      },
+      {
+        "type": "vector",
+        "id": "icon1"
+      },
+      {
+        "type": "group",
+        "id": "layer"
+      }
+    ],
+    "modes": {
+      "Add event": {
+        "rules": [
+          {
+            "id": "top_level",
+            "is-structured": false,
+            "children": [
+              "top_level_synth",
+              "Background"
+            ],
+            "clip-content": false
+          },
+          {
+            "id": "top_level_synth",
+            "opacity": 100.0,
+            "size-constraints": {
+              "width-constraints": {
+                "sizing-mode": "shrink"
+              },
+              "height-constraints": {
+                "sizing-mode": "shrink"
+              }
+            },
+            "arrangement": "row",
+            "main-axis-align": "start",
+            "cross-axis-align": "start",
+            "children": [
+              "Content"
+            ],
+            "clip-content": false
+          },
+          {
+            "id": "Background",
+            "border-radius": 12.0,
+            "stroke-width": 1.0,
+            "stroke-color": {
+              "alpha": 1.0,
+              "hue": 269.99999999999994,
+              "saturation": 0.057692307692307626,
+              "value": 0.8156862745098039
+            },
+            "is-structured": false,
+            "children": [
+              "layer"
+            ],
+            "background-color": {
+              "alpha": 1.0,
+              "hue": 0.0,
+              "saturation": 0.0,
+              "value": 0.9215686274509803
+            }
+          },
+          {
+            "id": "Content",
+            "padding": 20.0,
+            "border-radius": 12.0,
+            "size-constraints": {
+              "width-constraints": {
+                "sizing-mode": "fixed",
+                "value": 375.0
+              },
+              "height-constraints": {
+                "sizing-mode": "fixed",
+                "value": 82.0
+              }
+            },
+            "arrangement": "row",
+            "main-axis-align": "space-between",
+            "children": [
+              "Title",
+              "FAB"
+            ]
+          },
+          {
+            "id": "Title",
+            "padding": {
+              "top": 5.0
+            },
+            "size-constraints": {
+              "width-constraints": {
+                "sizing-mode": "fixed",
+                "value": 156.0
+              },
+              "height-constraints": {
+                "sizing-mode": "fixed",
+                "value": 48.0
+              }
+            },
+            "cross-axis-align": "start",
+            "children": [
+              "LifeMap title",
+              "subtitle"
+            ],
+            "item-spacing": -1.0,
+            "clip-content": false
+          },
+          {
+            "id": "FAB",
+            "border-radius": 16.0,
+            "drop-shadow": {
+              "color": {
+                "alpha": 0.2980392156862745,
+                "hue": 0.0,
+                "saturation": 0.0,
+                "value": 0.0
+              },
+              "blur": 3.0,
+              "offset-x": 0.0,
+              "offset-y": 1.0,
+              "spread": 0.0,
+              "blend-mode": "normal"
+            },
+            "tap-handler": "$on add button tapped",
+            "size-constraints": {
+              "width-constraints": {
+                "sizing-mode": "shrink"
+              },
+              "height-constraints": {
+                "sizing-mode": "shrink"
+              }
+            },
+            "arrangement": "row",
+            "children": [
+              "state-layer"
+            ],
+            "background-color": {
+              "alpha": 1.0,
+              "hue": 0.0,
+              "saturation": 0.0,
+              "value": 0.9215686274509803
+            }
+          },
+          {
+            "id": "LifeMap title",
+            "font-weight": "^md.sys.typescale.title-large.weight",
+            "color": "^md.sys.color.on-surface",
+            "text-content": "Add event",
+            "overflow": "visible",
+            "text-align": "left",
+            "text-size": "^md.sys.typescale.title-large.size",
+            "letter-spacing": "^md.sys.typescale.title-large.tracking",
+            "line-height": "^md.sys.typescale.title-large.line-height",
+            "typeface": "^md.sys.typescale.title-large.font"
+          },
+          {
+            "id": "subtitle",
+            "font-weight": "^md.sys.typescale.label-medium.weight",
+            "color": "^md.sys.color.on-surface",
+            "text-content": "With localization, date etc.",
+            "overflow": "visible",
+            "text-align": "left",
+            "text-size": "^md.sys.typescale.label-medium.size",
+            "letter-spacing": "^md.sys.typescale.label-medium.tracking",
+            "line-height": "^md.sys.typescale.label-medium.line-height",
+            "typeface": "^md.sys.typescale.label-medium.font"
+          },
+          {
+            "id": "state-layer",
+            "padding": 16.0,
+            "size-constraints": {
+              "width-constraints": {
+                "sizing-mode": "shrink"
+              },
+              "height-constraints": {
+                "sizing-mode": "shrink"
+              }
+            },
+            "arrangement": "row",
+            "children": [
+              "icon"
+            ],
+            "clip-content": false
+          },
+          {
+            "id": "icon",
+            "size-constraints": {
+              "width-constraints": {
+                "sizing-mode": "fixed",
+                "value": 24.0
+              },
+              "height-constraints": {
+                "sizing-mode": "fixed",
+                "value": 24.0
+              }
+            },
+            "is-structured": false,
+            "children": [
+              "icon1"
+            ],
+            "clip-content": false
+          },
+          {
+            "id": "icon1",
+            "margin": 3.0,
+            "size-constraints": {
+              "width-constraints": {
+                "sizing-mode": "proportional",
+                "value": 1.0
+              },
+              "height-constraints": {
+                "sizing-mode": "proportional",
+                "value": 1.0
+              }
+            },
+            "vector-content": "icon.svg"
+          },
+          {
+            "id": "layer",
+            "padding": 10.0,
+            "item-spacing": 10.0,
+            "clip-content": false
+          }
+        ]
+      }
+    }
+  },
+  "parameters": {
+    "on add button tapped": {
+      "data-type": "void-callback",
+      "required": false,
+      "description": ""
+    }
+  },
+  "ambients": {
+    "md.sys.color.on-surface": {
+      "data-type": "color",
+      "description": null
+    },
+    "md.sys.typescale.title-large.font": {
+      "data-type": "typeface",
+      "description": null
+    },
+    "md.sys.typescale.title-large.weight": {
+      "data-type": "double",
+      "description": null
+    },
+    "md.sys.typescale.title-large.size": {
+      "data-type": "double",
+      "description": null
+    },
+    "md.sys.typescale.title-large.tracking": {
+      "data-type": "double",
+      "description": null
+    },
+    "md.sys.typescale.title-large.line-height": {
+      "data-type": "double",
+      "description": null
+    },
+    "md.sys.typescale.label-medium.font": {
+      "data-type": "typeface",
+      "description": null
+    },
+    "md.sys.typescale.label-medium.weight": {
+      "data-type": "double",
+      "description": null
+    },
+    "md.sys.typescale.label-medium.size": {
+      "data-type": "double",
+      "description": null
+    },
+    "md.sys.typescale.label-medium.tracking": {
+      "data-type": "double",
+      "description": null
+    },
+    "md.sys.typescale.label-medium.line-height": {
+      "data-type": "double",
+      "description": null
+    }
+  },
+  "previews": [
+    {
+      "design": "Add event",
+      "size": {
+        "width": 375.0,
+        "height": 82.0
+      },
+      "ambients": {
+        "md.sys.color.on-surface": {
+          "alpha": 1.0,
+          "hue": 264.0,
+          "saturation": 0.15625,
+          "value": 0.12549019607843137
+        },
+        "md.sys.typescale.title-large.weight": 400.0,
+        "md.sys.typescale.title-large.size": 22.0,
+        "md.sys.typescale.title-large.line-height": 1.272727279663086,
+        "md.sys.typescale.label-medium.weight": 500.0,
+        "md.sys.typescale.label-medium.size": 12.0,
+        "md.sys.typescale.label-medium.tracking": 0.5,
+        "md.sys.typescale.label-medium.line-height": 1.3333332824707032
+      }
+    }
+  ],
+  "adin-component-search-paths": [],
+  "image-search-paths": [],
+  "vector-search-paths": []
+}
\ No newline at end of file
diff --git a/app/src/main/ui-packages/add_event/add_event_preview.png b/app/src/main/ui-packages/add_event/add_event_preview.png
new file mode 100644
index 0000000..6bbbc9c
Binary files /dev/null and b/app/src/main/ui-packages/add_event/add_event_preview.png differ
diff --git a/app/src/main/ui-packages/add_event/config.json b/app/src/main/ui-packages/add_event/config.json
new file mode 100644
index 0000000..dfafd61
--- /dev/null
+++ b/app/src/main/ui-packages/add_event/config.json
@@ -0,0 +1,4 @@
+{
+  "preview-theme": "androidx.compose.material3.MaterialTheme",
+  "ambient-translations-path": "app/src/main/ui-package-resources/style-mappings/m3_design_kit.json"
+}
\ No newline at end of file
diff --git a/app/src/main/ui-packages/add_event/icon.svg b/app/src/main/ui-packages/add_event/icon.svg
new file mode 100644
index 0000000..af47706
--- /dev/null
+++ b/app/src/main/ui-packages/add_event/icon.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 16H3.425L13.2 6.225L11.775 4.8L2 14.575V16ZM0 18V13.75L13.2 0.575C13.4 0.391667 13.6208 0.25 13.8625 0.15C14.1042 0.05 14.3583 0 14.625 0C14.8917 0 15.15 0.05 15.4 0.15C15.65 0.25 15.8667 0.4 16.05 0.6L17.425 2C17.625 2.18333 17.7708 2.4 17.8625 2.65C17.9542 2.9 18 3.15 18 3.4C18 3.66667 17.9542 3.92083 17.8625 4.1625C17.7708 4.40417 17.625 4.625 17.425 4.825L4.25 18H0ZM12.475 5.525L11.775 4.8L13.2 6.225L12.475 5.525Z" fill="#49454F"/>
+</svg>
diff --git a/app/src/main/ui-packages/navigation_bar/navigation_bar.json b/app/src/main/ui-packages/navigation_bar/navigation_bar.json
index 733df75..0adb41b 100644
--- a/app/src/main/ui-packages/navigation_bar/navigation_bar.json
+++ b/app/src/main/ui-packages/navigation_bar/navigation_bar.json
@@ -5,7 +5,7 @@
     "type": "figma",
     "file": "7RzB5mC9Qj82hGEbAM11GM",
     "node": "38:3",
-    "version": "2205486309991144776",
+    "version": "2205685389783780702",
     "component-id": "915162a5cdf4f7f91ace42d239b4d1faf0d5c6e7"
   },
   "default": "Navigation bar",
diff --git a/app/src/main/ui-packages/top_app_bar/FONTS.txt b/app/src/main/ui-packages/top_app_bar/FONTS.txt
new file mode 100644
index 0000000..86bbcc4
--- /dev/null
+++ b/app/src/main/ui-packages/top_app_bar/FONTS.txt
@@ -0,0 +1 @@
+Roboto
\ No newline at end of file
diff --git a/app/src/main/ui-packages/top_app_bar/VERSION.txt b/app/src/main/ui-packages/top_app_bar/VERSION.txt
new file mode 100644
index 0000000..a487dd1
--- /dev/null
+++ b/app/src/main/ui-packages/top_app_bar/VERSION.txt
@@ -0,0 +1 @@
+0.3.12
\ No newline at end of file
diff --git a/app/src/main/ui-packages/top_app_bar/config.json b/app/src/main/ui-packages/top_app_bar/config.json
new file mode 100644
index 0000000..dfafd61
--- /dev/null
+++ b/app/src/main/ui-packages/top_app_bar/config.json
@@ -0,0 +1,4 @@
+{
+  "preview-theme": "androidx.compose.material3.MaterialTheme",
+  "ambient-translations-path": "app/src/main/ui-package-resources/style-mappings/m3_design_kit.json"
+}
\ No newline at end of file
diff --git a/app/src/main/ui-packages/top_app_bar/icon.svg b/app/src/main/ui-packages/top_app_bar/icon.svg
new file mode 100644
index 0000000..fc358a8
--- /dev/null
+++ b/app/src/main/ui-packages/top_app_bar/icon.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 17V15H2V8C2 6.61667 2.41667 5.39167 3.25 4.325C4.08333 3.24167 5.16667 2.53333 6.5 2.2V1.5C6.5 1.08333 6.64167 0.733333 6.925 0.449999C7.225 0.15 7.58333 0 8 0C8.41667 0 8.76667 0.15 9.05 0.449999C9.35 0.733333 9.5 1.08333 9.5 1.5V2.2C10.8333 2.53333 11.9167 3.24167 12.75 4.325C13.5833 5.39167 14 6.61667 14 8V15H16V17H0ZM8 20C7.45 20 6.975 19.8083 6.575 19.425C6.19167 19.025 6 18.55 6 18H10C10 18.55 9.8 19.025 9.4 19.425C9.01667 19.8083 8.55 20 8 20ZM4 15H12V8C12 6.9 11.6083 5.95833 10.825 5.175C10.0417 4.39167 9.1 4 8 4C6.9 4 5.95833 4.39167 5.175 5.175C4.39167 5.95833 4 6.9 4 8V15Z" fill="#49454F"/>
+</svg>
diff --git a/app/src/main/ui-packages/top_app_bar/icon1.svg b/app/src/main/ui-packages/top_app_bar/icon1.svg
new file mode 100644
index 0000000..176fd23
--- /dev/null
+++ b/app/src/main/ui-packages/top_app_bar/icon1.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.72933 6C10.7902 6 11.8076 6.42143 12.5578 7.17157C13.3079 7.92172 13.7293 8.93913 13.7293 10C13.7293 11.0609 13.3079 12.0783 12.5578 12.8284C11.8076 13.5786 10.7902 14 9.72933 14C8.66847 14 7.65105 13.5786 6.9009 12.8284C6.15076 12.0783 5.72933 11.0609 5.72933 10C5.72933 8.93913 6.15076 7.92172 6.9009 7.17157C7.65105 6.42143 8.66847 6 9.72933 6ZM9.72933 8C9.1989 8 8.69019 8.21071 8.31512 8.58579C7.94005 8.96086 7.72933 9.46957 7.72933 10C7.72933 10.5304 7.94005 11.0391 8.31512 11.4142C8.69019 11.7893 9.1989 12 9.72933 12C10.2598 12 10.7685 11.7893 11.1435 11.4142C11.5186 11.0391 11.7293 10.5304 11.7293 10C11.7293 9.46957 11.5186 8.96086 11.1435 8.58579C10.7685 8.21071 10.2598 8 9.72933 8ZM7.72933 20C7.47933 20 7.26933 19.82 7.22933 19.58L6.85933 16.93C6.22933 16.68 5.68933 16.34 5.16933 15.94L2.67933 16.95C2.45933 17.03 2.18933 16.95 2.06933 16.73L0.0693316 13.27C-0.0606684 13.05 -0.000668302 12.78 0.189332 12.63L2.29933 10.97L2.22933 10L2.29933 9L0.189332 7.37C-0.000668302 7.22 -0.0606684 6.95 0.0693316 6.73L2.06933 3.27C2.18933 3.05 2.45933 2.96 2.67933 3.05L5.16933 4.05C5.68933 3.66 6.22933 3.32 6.85933 3.07L7.22933 0.42C7.26933 0.18 7.47933 0 7.72933 0H11.7293C11.9793 0 12.1893 0.18 12.2293 0.42L12.5993 3.07C13.2293 3.32 13.7693 3.66 14.2893 4.05L16.7793 3.05C16.9993 2.96 17.2693 3.05 17.3893 3.27L19.3893 6.73C19.5193 6.95 19.4593 7.22 19.2693 7.37L17.1593 9L17.2293 10L17.1593 11L19.2693 12.63C19.4593 12.78 19.5193 13.05 19.3893 13.27L17.3893 16.73C17.2693 16.95 16.9993 17.04 16.7793 16.95L14.2893 15.95C13.7693 16.34 13.2293 16.68 12.5993 16.93L12.2293 19.58C12.1893 19.82 11.9793 20 11.7293 20H7.72933ZM8.97933 2L8.60933 4.61C7.40933 4.86 6.34933 5.5 5.57933 6.39L3.16933 5.35L2.41933 6.65L4.52933 8.2C4.12933 9.37 4.12933 10.64 4.52933 11.8L2.40933 13.36L3.15933 14.66L5.58933 13.62C6.35933 14.5 7.40933 15.14 8.59933 15.38L8.96933 18H10.4893L10.8593 15.39C12.0493 15.14 13.0993 14.5 13.8693 13.62L16.2993 14.66L17.0493 13.36L14.9293 11.81C15.3293 10.64 15.3293 9.37 14.9293 8.2L17.0393 6.65L16.2893 5.35L13.8793 6.39C13.1093 5.5 12.0493 4.86 10.8493 4.62L10.4793 2H8.97933Z" fill="#49454F"/>
+</svg>
diff --git a/app/src/main/ui-packages/top_app_bar/top_app_bar.json b/app/src/main/ui-packages/top_app_bar/top_app_bar.json
new file mode 100644
index 0000000..72094ef
--- /dev/null
+++ b/app/src/main/ui-packages/top_app_bar/top_app_bar.json
@@ -0,0 +1,457 @@
+{
+  "name": "top_app_bar",
+  "version": 33,
+  "source-key": {
+    "type": "figma",
+    "file": "7RzB5mC9Qj82hGEbAM11GM",
+    "node": "71:3",
+    "version": "2205685389783780702",
+    "component-id": "be1e47a9eb28efdd3c5b0590ec33e84c60626aa5"
+  },
+  "default": "Top app bar",
+  "design": {
+    "atoms": [
+      {
+        "type": "group",
+        "id": "top_level",
+        "root": "true"
+      },
+      {
+        "type": "group",
+        "id": "Title"
+      },
+      {
+        "type": "group",
+        "id": "Buttons"
+      },
+      {
+        "type": "text",
+        "id": "LifeMap title"
+      },
+      {
+        "type": "text",
+        "id": "subtitle"
+      },
+      {
+        "type": "group",
+        "id": "Notifications icon"
+      },
+      {
+        "type": "group",
+        "id": "Settings icon"
+      },
+      {
+        "type": "group",
+        "id": "container"
+      },
+      {
+        "type": "group",
+        "id": "state-layer"
+      },
+      {
+        "type": "group",
+        "id": "Icon"
+      },
+      {
+        "type": "vector",
+        "id": "icon"
+      },
+      {
+        "type": "group",
+        "id": "container1"
+      },
+      {
+        "type": "group",
+        "id": "state-layer1"
+      },
+      {
+        "type": "group",
+        "id": "Icon1"
+      },
+      {
+        "type": "vector",
+        "id": "icon1"
+      }
+    ],
+    "modes": {
+      "Top app bar": {
+        "rules": [
+          {
+            "id": "top_level",
+            "padding": {
+              "left": 20.0,
+              "top": 55.0,
+              "right": 20.0,
+              "bottom": 20.0
+            },
+            "size-constraints": {
+              "width-constraints": {
+                "sizing-mode": "proportional",
+                "value": 1.0
+              },
+              "height-constraints": {
+                "sizing-mode": "shrink"
+              }
+            },
+            "stroke-alignment": "center",
+            "arrangement": "row",
+            "main-axis-align": "space-between",
+            "children": [
+              "Title",
+              "Buttons"
+            ],
+            "background-color": {
+              "alpha": 1.0,
+              "hue": 0.0,
+              "saturation": 0.0,
+              "value": 0.9215686274509803
+            },
+            "clip-content": false
+          },
+          {
+            "id": "Title",
+            "size-constraints": {
+              "width-constraints": {
+                "sizing-mode": "shrink"
+              },
+              "height-constraints": {
+                "sizing-mode": "shrink"
+              }
+            },
+            "cross-axis-align": "start",
+            "children": [
+              "LifeMap title",
+              "subtitle"
+            ],
+            "item-spacing": -1.0,
+            "clip-content": false
+          },
+          {
+            "id": "Buttons",
+            "size-constraints": {
+              "width-constraints": {
+                "sizing-mode": "shrink"
+              },
+              "height-constraints": {
+                "sizing-mode": "shrink"
+              }
+            },
+            "arrangement": "row",
+            "main-axis-align": "start",
+            "children": [
+              "Notifications icon",
+              "Settings icon"
+            ],
+            "clip-content": false
+          },
+          {
+            "id": "LifeMap title",
+            "font-weight": "^md.sys.typescale.title-large.weight",
+            "color": "^md.sys.color.on-surface",
+            "annotated-text-content": {
+              "text": "LifeMap",
+              "annotated-text-span-list": [
+                {
+                  "span-start": 0,
+                  "span-length": 7,
+                  "annotated-text-style": {
+                    "font-weight": 700.0,
+                    "text-size": 22.0,
+                    "letter-spacing": 0.0,
+                    "line-height": 1.272727279663086,
+                    "typeface": "Roboto"
+                  }
+                }
+              ]
+            },
+            "overflow": "visible",
+            "text-align": "left",
+            "text-size": "^md.sys.typescale.title-large.size",
+            "letter-spacing": "^md.sys.typescale.title-large.tracking",
+            "line-height": "^md.sys.typescale.title-large.line-height",
+            "typeface": "^md.sys.typescale.title-large.font"
+          },
+          {
+            "id": "subtitle",
+            "font-weight": "^md.sys.typescale.label-medium.weight",
+            "color": "^md.sys.color.on-surface",
+            "text-content": "Personal life events",
+            "overflow": "visible",
+            "text-align": "left",
+            "text-size": "^md.sys.typescale.label-medium.size",
+            "letter-spacing": "^md.sys.typescale.label-medium.tracking",
+            "line-height": "^md.sys.typescale.label-medium.line-height",
+            "typeface": "^md.sys.typescale.label-medium.font"
+          },
+          {
+            "id": "Notifications icon",
+            "tap-handler": "$on notifications icon tapped",
+            "size-constraints": {
+              "width-constraints": {
+                "sizing-mode": "fixed",
+                "value": 32.0
+              },
+              "height-constraints": {
+                "sizing-mode": "fixed",
+                "value": 32.0
+              }
+            },
+            "children": [
+              "container"
+            ],
+            "item-spacing": 10.0,
+            "clip-content": false
+          },
+          {
+            "id": "Settings icon",
+            "tap-handler": "$on settings icon tapped",
+            "size-constraints": {
+              "width-constraints": {
+                "sizing-mode": "fixed",
+                "value": 32.0
+              },
+              "height-constraints": {
+                "sizing-mode": "fixed",
+                "value": 32.0
+              }
+            },
+            "children": [
+              "container1"
+            ],
+            "item-spacing": 10.0,
+            "clip-content": false
+          },
+          {
+            "id": "container",
+            "border-radius": 100.0,
+            "size-constraints": {
+              "width-constraints": {
+                "sizing-mode": "shrink"
+              },
+              "height-constraints": {
+                "sizing-mode": "shrink"
+              }
+            },
+            "arrangement": "row",
+            "children": [
+              "state-layer"
+            ],
+            "item-spacing": 10.0
+          },
+          {
+            "id": "state-layer",
+            "padding": 8.0,
+            "size-constraints": {
+              "width-constraints": {
+                "sizing-mode": "shrink"
+              },
+              "height-constraints": {
+                "sizing-mode": "shrink"
+              }
+            },
+            "arrangement": "row",
+            "children": [
+              "Icon"
+            ],
+            "item-spacing": 10.0,
+            "clip-content": false
+          },
+          {
+            "id": "Icon",
+            "size-constraints": {
+              "width-constraints": {
+                "sizing-mode": "fixed",
+                "value": 24.0
+              },
+              "height-constraints": {
+                "sizing-mode": "fixed",
+                "value": 24.0
+              }
+            },
+            "is-structured": false,
+            "children": [
+              "icon"
+            ]
+          },
+          {
+            "id": "icon",
+            "margin": {
+              "left": 4.0,
+              "top": 2.0,
+              "right": 4.0,
+              "bottom": 2.0
+            },
+            "size-constraints": {
+              "width-constraints": {
+                "sizing-mode": "proportional",
+                "value": 1.0
+              },
+              "height-constraints": {
+                "sizing-mode": "proportional",
+                "value": 1.0
+              }
+            },
+            "vector-content": "icon.svg"
+          },
+          {
+            "id": "container1",
+            "border-radius": 100.0,
+            "size-constraints": {
+              "width-constraints": {
+                "sizing-mode": "shrink"
+              },
+              "height-constraints": {
+                "sizing-mode": "shrink"
+              }
+            },
+            "arrangement": "row",
+            "children": [
+              "state-layer1"
+            ],
+            "item-spacing": 10.0
+          },
+          {
+            "id": "state-layer1",
+            "padding": 8.0,
+            "size-constraints": {
+              "width-constraints": {
+                "sizing-mode": "shrink"
+              },
+              "height-constraints": {
+                "sizing-mode": "shrink"
+              }
+            },
+            "arrangement": "row",
+            "children": [
+              "Icon1"
+            ],
+            "item-spacing": 10.0,
+            "clip-content": false
+          },
+          {
+            "id": "Icon1",
+            "size-constraints": {
+              "width-constraints": {
+                "sizing-mode": "fixed",
+                "value": 24.0
+              },
+              "height-constraints": {
+                "sizing-mode": "fixed",
+                "value": 24.0
+              }
+            },
+            "is-structured": false,
+            "children": [
+              "icon1"
+            ]
+          },
+          {
+            "id": "icon1",
+            "margin": {
+              "left": 2.270660400390625,
+              "top": 2.0,
+              "right": 2.2706756591796875,
+              "bottom": 2.0
+            },
+            "size-constraints": {
+              "width-constraints": {
+                "sizing-mode": "proportional",
+                "value": 1.0
+              },
+              "height-constraints": {
+                "sizing-mode": "proportional",
+                "value": 1.0
+              }
+            },
+            "vector-content": "icon1.svg"
+          }
+        ]
+      }
+    }
+  },
+  "parameters": {
+    "on notifications icon tapped": {
+      "data-type": "void-callback",
+      "required": false,
+      "description": ""
+    },
+    "on settings icon tapped": {
+      "data-type": "void-callback",
+      "required": false,
+      "description": ""
+    }
+  },
+  "ambients": {
+    "md.sys.color.on-surface": {
+      "data-type": "color",
+      "description": null
+    },
+    "md.sys.typescale.title-large.font": {
+      "data-type": "typeface",
+      "description": null
+    },
+    "md.sys.typescale.title-large.weight": {
+      "data-type": "double",
+      "description": null
+    },
+    "md.sys.typescale.title-large.size": {
+      "data-type": "double",
+      "description": null
+    },
+    "md.sys.typescale.title-large.tracking": {
+      "data-type": "double",
+      "description": null
+    },
+    "md.sys.typescale.title-large.line-height": {
+      "data-type": "double",
+      "description": null
+    },
+    "md.sys.typescale.label-medium.font": {
+      "data-type": "typeface",
+      "description": null
+    },
+    "md.sys.typescale.label-medium.weight": {
+      "data-type": "double",
+      "description": null
+    },
+    "md.sys.typescale.label-medium.size": {
+      "data-type": "double",
+      "description": null
+    },
+    "md.sys.typescale.label-medium.tracking": {
+      "data-type": "double",
+      "description": null
+    },
+    "md.sys.typescale.label-medium.line-height": {
+      "data-type": "double",
+      "description": null
+    }
+  },
+  "previews": [
+    {
+      "design": "Top app bar",
+      "size": {
+        "width": 375.0,
+        "height": 118.0
+      },
+      "ambients": {
+        "md.sys.color.on-surface": {
+          "alpha": 1.0,
+          "hue": 264.0,
+          "saturation": 0.15625,
+          "value": 0.12549019607843137
+        },
+        "md.sys.typescale.title-large.weight": 400.0,
+        "md.sys.typescale.title-large.size": 22.0,
+        "md.sys.typescale.title-large.line-height": 1.272727279663086,
+        "md.sys.typescale.label-medium.weight": 500.0,
+        "md.sys.typescale.label-medium.size": 12.0,
+        "md.sys.typescale.label-medium.tracking": 0.5,
+        "md.sys.typescale.label-medium.line-height": 1.3333332824707032
+      }
+    }
+  ],
+  "adin-component-search-paths": [],
+  "image-search-paths": [],
+  "vector-search-paths": []
+}
\ No newline at end of file
diff --git a/app/src/main/ui-packages/top_app_bar/top_app_bar_preview.png b/app/src/main/ui-packages/top_app_bar/top_app_bar_preview.png
new file mode 100644
index 0000000..508ea9d
Binary files /dev/null and b/app/src/main/ui-packages/top_app_bar/top_app_bar_preview.png differ