diff --git a/app.vue b/app.vue
index 62bd208..6d41bab 100644
--- a/app.vue
+++ b/app.vue
@@ -26,8 +26,6 @@ await indexedDBStore.startup();
 
 const isLoggedIn = ref(isUserLoggedIn());
 
-console.error(isLoggedIn.value);
-
 const store = useStore();
 store.state.loaded = false;
 
diff --git a/components/input/FvMessageSender.vue b/components/input/FvMessageSender.vue
index 651828d..8b6dff0 100644
--- a/components/input/FvMessageSender.vue
+++ b/components/input/FvMessageSender.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // Thanks https://github.com/cinnyapp/cinny/blob/f14d70ea3508a8467c0a27b9d61c8ab6661054ab/src/client/state/RoomsInput.js for some code
 import { encryptAttachment } from "matrix-encrypt-attachment";
-import { UploadProgress } from "matrix-js-sdk";
+import { MatrixClient, UploadProgress } from "matrix-js-sdk";
 import emojis from "emoji.json";
 import parse from "snarkdown";
 import { MatrixRoom } from "~/classes/Room";
@@ -9,9 +9,11 @@ import { useStore } from "~/utils/store";
 import { getBlobSafeMimeType } from "~/utils/mime";
 import { encodeBlurhash } from "~/utils/blurhash";
 import { getVideoThumbnail, loadVideo } from "~/utils/video";
+import { MatrixUser } from "~/classes/User";
 
 const props = defineProps<{
 	room: MatrixRoom;
+	typing: Set<string>;
 }>();
 
 const emit = defineEmits<{
@@ -291,7 +293,7 @@ const eventReplyingTo = computed(
 </script>
 
 <template>
-	<form class="w-full px-3 pb-7" @submit.prevent="send">
+	<form class="w-full px-3" @submit.prevent="send">
 		<input
 			ref="fileInput"
 			multiple
@@ -360,7 +362,7 @@ const eventReplyingTo = computed(
 							<img
 								v-if="file.type.includes('image')"
 								:src="fileToURL(file)"
-								class="h-full" />
+								class="h-full w-full object-cover" />
 							<Icon
 								v-else
 								name="ic:round-insert-drive-file"
@@ -435,5 +437,22 @@ const eventReplyingTo = computed(
 				</button>
 			</div>
 		</div>
+
+		<div
+			class="h-7 text-xs flex flex-row gap-1 text-gray-300 p-1 items-center">
+			<span v-if="[...typing].length > 0">
+				<strong>{{
+					[...typing]
+						.map(t =>
+							new MatrixUser(
+								t,
+								store.client as MatrixClient
+							).getDisplayName()
+						)
+						.join(", ")
+				}}</strong>
+				{{ [...typing].length === 1 ? "is" : "are" }} typing...
+			</span>
+		</div>
 	</form>
 </template>
diff --git a/components/login/Login.vue b/components/login/Login.vue
index 70e6f65..9c31423 100644
--- a/components/login/Login.vue
+++ b/components/login/Login.vue
@@ -66,6 +66,7 @@ const submit = async (e: Event) => {
 		};
 
 		flowStage.value = FlowStage.Login;
+		error.value = null;
 		loading.value = false;
 	} else if (flowStage.value === FlowStage.Login) {
 		if (!homeserverData.value) return;
diff --git a/components/messages/FvMessage.vue b/components/messages/FvMessage.vue
index 8dd7455..92fd28a 100644
--- a/components/messages/FvMessage.vue
+++ b/components/messages/FvMessage.vue
@@ -59,7 +59,7 @@ const reply = room.room.findEventById(event.value.event.replyEventId ?? "");
 
 const log = console.error;
 
-const body: string = props.message.getContent().body;
+const body: string = props.message.getContent().body ?? "";
 
 const bodyHtml = document.createElement("div");
 const replyBody = document.createElement("div");
@@ -108,6 +108,21 @@ const setReply = () => {
 		text: "",
 	};
 };
+
+// Mark as read on visible
+const messageRef = ref(null);
+useIntersectionObserver(messageRef, ([{ isIntersecting }]) => {
+	if (isIntersecting) {
+		if (
+			!room.room.hasUserReadEvent(
+				store.client?.getUserId() ?? "",
+				event.value.event.getId() ?? ""
+			)
+		) {
+			store.client?.sendReadReceipt(event.value.event as MatrixEvent);
+		}
+	}
+});
 </script>
 
 <template>
@@ -117,6 +132,7 @@ const setReply = () => {
 		enter-to-class="opacity-100 translate-x-0">
 		<div
 			v-if="message"
+			ref="messageRef"
 			:class="[
 				'flex flex-col px-6 py-1 gap-1 hover:bg-dark-700 relative group duration-200',
 				showHeader && 'mt-2',
diff --git a/components/messages/FvMessageSkeleton.vue b/components/messages/FvMessageSkeleton.vue
index 32bd334..ce2fd14 100644
--- a/components/messages/FvMessageSkeleton.vue
+++ b/components/messages/FvMessageSkeleton.vue
@@ -6,7 +6,7 @@ const amountOfSubMessages = Math.ceil(Math.random() * 3);
 	<div
 		v-for="index in amountOfSubMessages"
 		:key="index"
-		:class="['mb-3', index === 1 && 'mt-3']">
+		:class="['mb-3 px-6', index === 1 && 'mt-3']">
 		<div class="flex flex-row gap-2 w-full max-w-full">
 			<div v-if="index > 1" class="w-10 shrink-0"></div>
 			<div
diff --git a/components/previews/FvRoomPreview.vue b/components/previews/FvRoomPreview.vue
index c6946fa..0a63640 100644
--- a/components/previews/FvRoomPreview.vue
+++ b/components/previews/FvRoomPreview.vue
@@ -24,13 +24,13 @@ try {
 // Is "online" or "offline"
 const presence = dmUser && dmUser.getPresenceStatus();
 
-const unreadCount = props.room.room.getUnreadNotificationCount();
+const unreadCount = props.room.room.getRoomUnreadNotificationCount();
 </script>
 
 <template>
 	<NuxtLink
 		:to="`/room/${room.id}`"
-		class="flex flex-row gap-2 duration-200 hover:bg-dark-700 p-2 rounded">
+		class="flex flex-row gap-2 duration-200 hover:bg-dark-800 p-2 rounded">
 		<div
 			class="h-8 w-8 relative rounded-full shrink-0 flex items-center justify-center shrink-0 shadow">
 			<img
diff --git a/components/users/FvUser.vue b/components/users/FvUser.vue
index cda5917..8ae0f61 100644
--- a/components/users/FvUser.vue
+++ b/components/users/FvUser.vue
@@ -9,7 +9,7 @@ const presence = props.user.getPresenceStatus();
 </script>
 <template>
 	<div
-		class="flex flex-row gap-2 duration-200 hover:bg-dark-700 p-2 rounded items-center">
+		class="flex flex-row gap-2 duration-200 hover:bg-dark-800 p-2 rounded items-center">
 		<div
 			class="h-8 w-8 relative rounded-full shrink-0 flex items-center justify-center shrink-0 shadow">
 			<img
diff --git a/layouts/default.vue b/layouts/default.vue
index 04f74ea..9da6bee 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -43,9 +43,11 @@ const timelineChange = async () => {
 };
 
 store.client?.on(RoomEvent.Timeline, timelineChange);
+store.client?.on(RoomEvent.Receipt, timelineChange);
 
 onUnmounted(() => {
 	store.client?.off(RoomEvent.Timeline, timelineChange);
+	store.client?.off(RoomEvent.Receipt, timelineChange);
 });
 
 await timelineChange();
@@ -58,7 +60,7 @@ onMounted(() => {
 
 <template>
 	<div
-		class="max-w-full w-full h-screen bg-dark-800 flex flex-row divide-gray-400 p-0 overflow-hidden font-inter">
+		class="max-w-full w-full h-screen bg-dark-800 flex flex-row divide-gray-400 p-0 overflow-hidden font-['Inter']">
 		<div
 			class="w-16 bg-dark-950 shrink-0 md:flex flex-col items-center py-2 gap-3 hidden">
 			<div
@@ -81,14 +83,20 @@ onMounted(() => {
 			</TransitionGroup>
 		</div>
 		<div
-			class="bg-dark-900 p-1 md:flex flex-col gap-1 overflow-x-hidden no-scrollbar overflow-y-scroll relative w-60 shrink-0 hidden">
-			<TransitionGroup move-class="duration-200 transition-all">
-				<PreviewsFvRoomPreview
-					v-for="{ room, lastMessage } of roomList"
-					:key="room.id"
-					:room="(room as any)"
-					:last-message="(lastMessage as any)" />
-			</TransitionGroup>
+			class="bg-dark-900 md:flex flex-col gap-1 overflow-hidden relative w-70 shrink-0 hidden">
+			<div class="w-full py-3 px-3 border-b border-dark-800">
+				<h1 class="font-semibold text-lg text-white">Conversations</h1>
+			</div>
+			<div
+				class="p-1 flex-col gap-1 flex no-scrollbar overflow-y-scroll overflow-x-hidden">
+				<TransitionGroup move-class="duration-200 transition-all">
+					<PreviewsFvRoomPreview
+						v-for="{ room, lastMessage } of roomList"
+						:key="room.id"
+						:room="(room as any)"
+						:last-message="(lastMessage as any)" />
+				</TransitionGroup>
+			</div>
 		</div>
 		<slot />
 	</div>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 53e69f7..8510d9c 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -10,6 +10,7 @@ export default defineNuxtConfig({
 		"@vueuse/nuxt",
 		"@pinia/nuxt",
 		"nuxt-twemoji",
+		"@nuxtjs/google-fonts",
 	],
 	spaLoadingTemplate: false,
 	ssr: false,
@@ -26,6 +27,13 @@ export default defineNuxtConfig({
 			wasm(),
 		],
 	},
+	googleFonts: {
+		families: {
+			Inter: true,
+		},
+		subsets: "latin",
+		download: true,
+	},
 	runtimeConfig: {
 		public: {
 			TOKEN: process.env.TOKEN,
diff --git a/package.json b/package.json
index 220a0fc..70dd92c 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
 	"devDependencies": {
 		"@nuxt/devtools": "latest",
 		"@nuxtjs/eslint-config-typescript": "^12.0.0",
+		"@nuxtjs/google-fonts": "^3.0.2",
 		"@types/node": "^18",
 		"@typescript-eslint/parser": "^6.2.1",
 		"eslint": "^8.43.0",
diff --git a/pages/index.vue b/pages/index.vue
index a2dda31..8bf7886 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,3 +1,5 @@
 <template>
-	<div>No content</div>
+	<div class="w-full h-full flex flex-col p-4">
+		<h1 class="text-gray-200 font-bold">Select a conversation to begin</h1>
+	</div>
 </template>
diff --git a/pages/room/[id].vue b/pages/room/[id].vue
index 8854cef..1accf14 100644
--- a/pages/room/[id].vue
+++ b/pages/room/[id].vue
@@ -62,17 +62,28 @@ const ready = () => {
 	timeline.value = roomTimeline.timeline;
 };
 
+const typingMembers = ref<Set<string>>(new Set());
+
+const updateTypingMembers = (members: Set<string>) => {
+	typingMembers.value = members;
+};
+
 // Add event listeners for timeline updates
 roomTimeline
 	.on(events.events.timeline.EVENT, newEvent)
-	.on(events.events.timeline.READY, ready);
+	.on(events.events.timeline.READY, ready)
+	.on(events.events.timeline.TYPING_MEMBERS_UPDATED, updateTypingMembers);
 
 // Remove event listeners on route leave or unmount
 function removeListeners() {
 	roomTimeline.removeInternalListeners();
 	roomTimeline
 		.off(events.events.timeline.EVENT, newEvent)
-		.off(events.events.timeline.READY, ready);
+		.off(events.events.timeline.READY, ready)
+		.off(
+			events.events.timeline.TYPING_MEMBERS_UPDATED,
+			updateTypingMembers
+		);
 }
 onBeforeRouteLeave(removeListeners);
 onUnmounted(removeListeners);
@@ -167,6 +178,7 @@ useHead({
 					</button>
 				</Transition>
 				<InputFvMessageSender
+					:typing="typingMembers"
 					:room="(room as MatrixRoom)"
 					@send="event_id => {}" />
 			</div>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a2f3f21..66a7291 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -58,6 +58,9 @@ devDependencies:
   '@nuxtjs/eslint-config-typescript':
     specifier: ^12.0.0
     version: 12.0.0(eslint@8.46.0)(typescript@5.1.6)
+  '@nuxtjs/google-fonts':
+    specifier: ^3.0.2
+    version: 3.0.2
   '@types/node':
     specifier: ^18
     version: 18.17.1
@@ -1279,6 +1282,17 @@ packages:
       - supports-color
     dev: true
 
+  /@nuxtjs/google-fonts@3.0.2:
+    resolution: {integrity: sha512-9DY0NcBnx/I6+3Lr7NeB64k5A7GbqCN1pqVgU9ld00NEXSpDUht2+lG8mcC5UnmpTi8KCdCJckDbD/bqW3ncYg==}
+    dependencies:
+      '@nuxt/kit': 3.6.5
+      google-fonts-helper: 3.3.1
+      pathe: 1.1.1
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+    dev: true
+
   /@pinia/nuxt@0.4.11(typescript@5.1.6)(vue@3.3.4):
     resolution: {integrity: sha512-bhuNFngJpmBCdAqWguezNJ/oJFR7wvKieqiZrmmdmPR07XjsidAw8RLXHMZE9kUm32M9E6T057OBbG/22jERTg==}
     dependencies:
@@ -4939,6 +4953,15 @@ packages:
       merge2: 1.4.1
       slash: 4.0.0
 
+  /google-fonts-helper@3.3.1:
+    resolution: {integrity: sha512-zMycq4nUUaplGe7pzCOGBC52LB3VpwxS9temmCx1EucEaBdBEpG5MeQlJhtRu63gKI1hb/l+yHkasQtee59sFA==}
+    dependencies:
+      deepmerge: 4.3.1
+      hookable: 5.5.3
+      ofetch: 1.1.1
+      ufo: 1.2.0
+    dev: true
+
   /gopd@1.0.1:
     resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}
     dependencies: