diff --git a/app/_layout.tsx b/app/_layout.tsx
index ff00e04..eecbe4c 100644
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -1,22 +1,26 @@
-import { AuthProvider } from '@/src/context/AuthContext';
-import { DefaultTheme as NativeDarkTheme, Theme, ThemeProvider } from '@react-navigation/native';
-import { Stack } from 'expo-router';
-import { StatusBar } from 'expo-status-bar';
-import 'react-native-reanimated';
+import { AuthProvider } from "@/src/context/AuthContext";
+import {
+  DefaultTheme as NativeDarkTheme,
+  Theme,
+  ThemeProvider,
+} from "@react-navigation/native";
+import { Stack } from "expo-router";
+import { StatusBar } from "expo-status-bar";
+import "react-native-reanimated";
 
 export const unstable_settings = {
-  anchor: '(tabs)',
+  anchor: "(tabs)",
 };
 
 export const DarkTheme: Theme = {
   dark: true,
   colors: {
-    primary: 'rgb(10, 132, 255)',
-    background: 'rgb(46, 46, 46)',
-    card: 'rgb(75, 75, 75)',
-    text: 'rgb(229, 229, 231)',
-    border: 'rgb(39, 39, 41)',
-    notification: 'rgb(255, 69, 58)',
+    primary: "rgb(10, 132, 255)",
+    background: "rgb(46, 46, 46)",
+    card: "rgb(75, 75, 75)",
+    text: "rgb(229, 229, 231)",
+    border: "rgb(39, 39, 41)",
+    notification: "rgb(255, 69, 58)",
   },
   fonts: NativeDarkTheme.fonts,
 };
@@ -25,9 +29,11 @@ export default function RootLayout() {
   return (
     <AuthProvider>
       <ThemeProvider value={DarkTheme}>
-        <Stack screenOptions={{headerShown: false}}>
-        {/* <Stack screenOptions={{headerShown: true}}> */}
-          <Stack.Screen name="modal" options={{ presentation: 'modal', title: 'Modal' }} />
+        <Stack screenOptions={{ headerShown: false }}>
+          <Stack.Screen
+            name="new"
+            options={{ presentation: "transparentModal", title: "Modal" }}
+          />
         </Stack>
         <StatusBar style="auto" />
       </ThemeProvider>
diff --git a/app/blog/[identifier]/index.tsx b/app/blog/[identifier]/index.tsx
index 88f0209..3a11e92 100644
--- a/app/blog/[identifier]/index.tsx
+++ b/app/blog/[identifier]/index.tsx
@@ -1,4 +1,5 @@
 import FeedPost from "@/src/components/FeedPost";
+import NavBar from "@/src/components/NavBar";
 import LoadingIndicator from "@/src/components/primitive/LoadingIndicator";
 import { Text } from "@/src/components/primitive/Text";
 import { AuthContext } from "@/src/context/AuthContext";
@@ -7,7 +8,12 @@ import { Profile, resolveProfile } from "@/src/lib/profile";
 import { fetchBlogPosts } from "@/src/lib/query/feed";
 import { useLocalSearchParams } from "expo-router";
 import { useContext, useEffect, useState } from "react";
-import { ScrollView, StyleSheet, useWindowDimensions, View } from "react-native";
+import {
+  ScrollView,
+  StyleSheet,
+  useWindowDimensions,
+  View,
+} from "react-native";
 
 const styles = StyleSheet.create({
   postScroller: {
@@ -33,7 +39,7 @@ export default function BlogPage() {
   const [profile, setProfile] = useState<Profile>();
   const windowDimensions = useWindowDimensions();
 
-  const smallScreen = windowDimensions.width < 700
+  const smallScreen = windowDimensions.width < 700;
 
   const { identifier: blogId } = useLocalSearchParams<{
     identifier?: string;
@@ -46,6 +52,7 @@ export default function BlogPage() {
     (async () => {
       const profile = await resolveProfile(blogId!);
       setProfile(profile);
+      if (profile === undefined) return;
       const fetchedThreads = await fetchBlogPosts(profile, authCtx);
       // console.log(fetchedThreads);
       setThreads(fetchedThreads);
@@ -53,23 +60,25 @@ export default function BlogPage() {
     })();
   }, [authCtx, blogId]);
 
-
   return (
-    <ScrollView contentContainerStyle={{ flexGrow: 1, alignItems: "center" }}>
-      <View
-        style={[
-          styles.postScroller,
-          smallScreen ? styles.postScrollerFullWidth : styles.postScrollerSlim,
-        ]}
-      >
-        {loading && <LoadingIndicator />}
-        {!loading && threads && threads.length === 0 && (
-          <Text style={{ textAlign: "center" }}>This account has no posts</Text>
-        )}
-        {threads?.map((thread) => (
-          <FeedPost key={thread.at(-1)!.uri} thread={thread} />
-        ))}
-      </View>
-    </ScrollView>
+    <>
+      <ScrollView contentContainerStyle={{ flexGrow: 1, alignItems: "center" }}>
+        <View
+          style={[
+            styles.postScroller,
+            smallScreen ? styles.postScrollerFullWidth : styles.postScrollerSlim,
+          ]}
+        >
+          {loading && <LoadingIndicator />}
+          {!loading && threads && threads.length === 0 && (
+            <Text style={{ textAlign: "center" }}>This account has no posts</Text>
+          )}
+          {threads?.map((thread) => (
+            <FeedPost key={thread.at(-1)!.uri} thread={thread} />
+          ))}
+        </View>
+      </ScrollView>
+      <NavBar />
+    </>
   );
 }
diff --git a/app/new.tsx b/app/new.tsx
index fb5c7f6..4a5e34f 100644
--- a/app/new.tsx
+++ b/app/new.tsx
@@ -1,24 +1,10 @@
 import Composer from "@/src/components/Composer";
-import { StyleSheet, View } from "react-native";
-
-const styles = StyleSheet.create({
-  container: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    flex: 1,
-    backgroundColor: "#19191946"
-  },
-  wrapper: {
-    width: 500,
-    flex: 1,
-    justifyContent: 'center',
-  },
-})
+import { Modal } from "@/src/components/primitive/Modal";
 
 export default function NewPostPage() {
-  return <View style={styles.container}>
-    <View style={styles.wrapper}>
+  return (
+    <Modal>
       <Composer />
-    </View>
-  </View>
-}
\ No newline at end of file
+    </Modal>
+  );
+}
diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
new file mode 100644
index 0000000..7acef98
--- /dev/null
+++ b/src/components/NavBar.tsx
@@ -0,0 +1,42 @@
+import { useRouter } from "expo-router";
+import { Button, StyleSheet, TouchableWithoutFeedback, View } from "react-native";
+
+const styles = StyleSheet.create({
+  alignLeft: {
+    position: "fixed",
+    top: 20,
+    transform: [
+      {
+        translateX: -250,
+      },
+      {
+        translateX: "-100%",
+      },
+    ],
+  },
+
+  navBarWrapper: {
+    width: "100%",
+    alignItems: "center",
+  },
+  navBar: {
+    padding: 10
+  }
+});
+
+export default function NavBar() {
+  const router = useRouter()
+  const openComposer = () => {
+    router.push("/new")
+  }
+
+  return (
+    <View style={styles.navBarWrapper}>
+      <View style={[styles.navBar, styles.alignLeft]}>
+        <View style={{ width: 100 }}>
+          <Button title="New post" onPress={openComposer} />
+        </View>
+      </View>
+    </View>
+  );
+}
diff --git a/src/components/primitive/Modal.tsx b/src/components/primitive/Modal.tsx
new file mode 100644
index 0000000..fbd606d
--- /dev/null
+++ b/src/components/primitive/Modal.tsx
@@ -0,0 +1,34 @@
+import { useRouter } from "expo-router";
+import {  StyleSheet, TouchableWithoutFeedback, View, ViewProps, ViewStyle } from "react-native";
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: "center",
+    justifyContent: "center",
+    flex: 1,
+    backgroundColor: "#222222c1",
+  },
+  wrapper: {
+    width: 500,
+    flex: 1,
+    justifyContent: "center",
+  },
+});
+
+export function Modal({ children, ...props }: ViewProps) {
+  const router = useRouter()
+
+  return (
+    <TouchableWithoutFeedback
+      onPress={() => router.canDismiss() && router.dismiss()}
+    >
+      <View style={styles.container} {...props}>
+        <View style={styles.wrapper}>
+          <TouchableWithoutFeedback>
+            {children}
+          </TouchableWithoutFeedback>
+        </View>
+      </View>
+    </TouchableWithoutFeedback>
+  )
+}
\ No newline at end of file