diff --git a/app/src/main/java/be/ugent/sel/studeez/common/composable/FloatingActionButtonComposable.kt b/app/src/main/java/be/ugent/sel/studeez/common/composable/FloatingActionButtonComposable.kt
new file mode 100644
index 0000000..15005fa
--- /dev/null
+++ b/app/src/main/java/be/ugent/sel/studeez/common/composable/FloatingActionButtonComposable.kt
@@ -0,0 +1,62 @@
+package be.ugent.sel.studeez.common.composable
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.material.FloatingActionButton
+import androidx.compose.material.Icon
+import androidx.compose.material.IconButton
+import androidx.compose.material.Text
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Add
+import androidx.compose.material.icons.filled.Check
+import androidx.compose.material.icons.filled.DateRange
+import androidx.compose.material.icons.filled.Person
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.tooling.preview.Preview
+import be.ugent.sel.studeez.ui.theme.StudeezTheme
+
+@Composable
+fun CollapsedAddButton() {
+    FloatingActionButton(
+        onClick = { /* TODO popup add options */ }
+    ) {
+        Icon(imageVector = Icons.Default.Add, contentDescription = "fab")
+    }
+}
+
+@Composable
+fun ExpandedAddButton() {
+    Row() {
+        IconButton(onClick = { /* TODO Go to next step */ }) {
+            Column (horizontalAlignment = Alignment.CenterHorizontally) {
+                Icon(imageVector = Icons.Default.Check, contentDescription = "Task")
+                Text(text = "Task")
+            }
+        }
+        IconButton(onClick = { /* TODO Go to next step */ }) {
+            Column (horizontalAlignment = Alignment.CenterHorizontally) {
+                Icon(imageVector = Icons.Default.Person, contentDescription = "Friend")
+                Text(text = "Friend")
+            }
+        }
+        IconButton(onClick = { /* TODO Go to next step */ }) {
+            Column (horizontalAlignment = Alignment.CenterHorizontally) {
+                Icon(imageVector = Icons.Default.DateRange, contentDescription = "Session")
+                Text(text = "Session")
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+fun CollapsedAddButtonPreview() {
+    StudeezTheme { CollapsedAddButton() }
+}
+
+@Preview
+@Composable
+fun ExpandedAddButtonPreview() {
+    StudeezTheme { ExpandedAddButton() }
+}
\ No newline at end of file
diff --git a/app/src/main/java/be/ugent/sel/studeez/common/composable/NavigationBarComposable.kt b/app/src/main/java/be/ugent/sel/studeez/common/composable/NavigationBarComposable.kt
new file mode 100644
index 0000000..61964eb
--- /dev/null
+++ b/app/src/main/java/be/ugent/sel/studeez/common/composable/NavigationBarComposable.kt
@@ -0,0 +1,63 @@
+package be.ugent.sel.studeez.common.composable
+
+import androidx.compose.material.BottomNavigation
+import androidx.compose.material.BottomNavigationItem
+import androidx.compose.material.Icon
+import androidx.compose.material.Text
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Check
+import androidx.compose.material.icons.filled.List
+import androidx.compose.material.icons.filled.Person
+import androidx.compose.material.icons.outlined.DateRange
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import be.ugent.sel.studeez.ui.theme.StudeezTheme
+
+@Composable
+fun NavigationBar() {
+    // TODO Pass functions and new screens.
+    // TODO Pass which screen is selected.
+    // TODO Disabled -> HIGH/MEDIUM_EMPHASIS if the page is implemented
+    BottomNavigation(
+        elevation = 10.dp
+    ) {
+        BottomNavigationItem(
+            icon = { Icon(imageVector = Icons.Default.List, "Home") },
+            label = { Text(text = "Home") },
+            selected = false, // TODO
+            onClick = { /* TODO */ }
+        )
+
+        BottomNavigationItem(
+            icon = { Icon(imageVector = Icons.Default.Check, "Tasks") },
+            label = { Text(text = "Tasks") },
+            selected = false, // TODO
+            onClick = { /* TODO */ }
+        )
+
+        // Hack to space the entries in the navigation bar, make space for fab
+        BottomNavigationItem(icon = {}, onClick = {}, selected = false)
+
+        BottomNavigationItem(
+            icon = { Icon(imageVector = Icons.Outlined.DateRange, "Sessions") },
+            label = { Text(text = "Sessions") },
+            selected = false, // TODO
+            onClick = { /* TODO */ }
+        )
+
+        BottomNavigationItem(
+            icon = { Icon(imageVector = Icons.Default.Person, "Profile") },
+            label = { Text(text = "Profile") },
+            selected = false, // TODO
+            onClick = { /* TODO */ }
+        )
+
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun NavigationBarPreview() {
+    StudeezTheme { NavigationBar() }
+}
\ No newline at end of file
diff --git a/app/src/main/java/be/ugent/sel/studeez/common/composable/ToolbarComposable.kt b/app/src/main/java/be/ugent/sel/studeez/common/composable/ToolbarComposable.kt
new file mode 100644
index 0000000..2e3d635
--- /dev/null
+++ b/app/src/main/java/be/ugent/sel/studeez/common/composable/ToolbarComposable.kt
@@ -0,0 +1,77 @@
+package be.ugent.sel.studeez.common.composable
+
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.material.*
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Menu
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.tooling.preview.Preview
+import be.ugent.sel.studeez.ui.theme.StudeezTheme
+
+// TODO Add option for button in top right corner as extra button
+
+@Composable
+// Contains floatingActionButton and bottom bar, used in the main four screens.
+fun PrimaryScreenToolbar(
+    title: String,
+    content: (PaddingValues) -> Unit
+) {
+    Scaffold(
+        // Everything at the top of the screen
+        topBar = { TopAppBar(
+            title = { Text(text = title) },
+            navigationIcon = {
+                IconButton(onClick = { /* TODO open sidemenu */ }) {
+                    Icon(imageVector = Icons.Default.Menu, contentDescription = "Menu")
+                }
+            }
+        ) },
+
+        // Everything at the bottom of the screen
+        bottomBar = { NavigationBar() }, // TODO Pass arguments so that the current tab etc can be shown
+        floatingActionButtonPosition = FabPosition.Center,
+        isFloatingActionButtonDocked = true,
+        floatingActionButton = { CollapsedAddButton() }
+    ) { paddingValues ->
+        content(paddingValues)
+    }
+}
+
+@Composable
+// Does not contain floatingActionButton and bottom bar, used in all the other screens
+fun SecondaryScreenToolbar(
+    title: String,
+    content: (PaddingValues) -> Unit
+) {
+    Scaffold(
+        // Everything at the top of the screen
+        topBar = { TopAppBar(
+            title = { Text(text = title) },
+            navigationIcon = {
+                IconButton(onClick = { /* TODO open sidemenu */ }) {
+                    Icon(imageVector = Icons.Default.Menu, contentDescription = "Menu")
+                }
+            }
+        ) },
+    ) { paddingValues ->
+        content(paddingValues)
+    }
+}
+
+@Preview
+@Composable
+fun PrimaryScreenToolbarPreview() {
+    StudeezTheme { PrimaryScreenToolbar(
+        "Preview screen",
+        {}
+    ) }
+}
+
+@Preview
+@Composable
+fun SecondaryScreenToolbarPreview() {
+    StudeezTheme { SecondaryScreenToolbar(
+        "Preview screen",
+        {}
+    )}
+}
\ No newline at end of file