diff --git a/src/components/Video.tsx b/src/components/Video.tsx
new file mode 100644
index 00000000..cd7bb28e
--- /dev/null
+++ b/src/components/Video.tsx
@@ -0,0 +1,77 @@
+import { APIAttachment } from "@spacebarchat/spacebar-api-types/v9";
+import React from "react";
+import { PuffLoader } from "react-spinners";
+import styled from "styled-components";
+import { calculateImageRatio, calculateScaledDimensions } from "../utils/Message";
+
+const Container = styled.div`
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	min-height: 300px;
+	min-width: 300px;
+	background-color: var(--background-primary);
+	border-radius: 10px;
+`;
+
+interface Props {
+	attachment: APIAttachment;
+}
+
+function Video({ attachment }: Props) {
+	const ref = React.useRef<HTMLVideoElement>(null);
+	const [isLoading, setLoading] = React.useState(true);
+	const [dimensions, setDimensions] = React.useState({ width: 0, height: 0 });
+	const [isErrored, setErrored] = React.useState(false);
+
+	const url = attachment.proxy_url && attachment.proxy_url.length > 0 ? attachment.proxy_url : attachment.url;
+
+	const onLoadedMetadata = (e: React.SyntheticEvent<HTMLVideoElement, Event>) => {
+		const video = e.target as HTMLVideoElement;
+		const width = video.videoWidth;
+		const height = video.videoHeight;
+		const ratio = calculateImageRatio(width, height, 300, 300);
+		const scaledDimensions = calculateScaledDimensions(width, height, ratio, 300, 300);
+		setDimensions({ width: scaledDimensions.scaledWidth, height: scaledDimensions.scaledHeight });
+		setLoading(false);
+	};
+
+	const onError = () => {
+		setErrored(true);
+	};
+
+	// TODO: poster
+	// TODO: the server doesn't return height and width yet for videos
+	return (
+		<>
+			{isLoading && !isErrored && (
+				<Container>
+					<PuffLoader size={"42px"} color="var(--primary)" />
+				</Container>
+			)}
+			{isErrored && (
+				<Container>
+					<p>Failed to load video</p>
+				</Container>
+			)}
+
+			{!isErrored && (
+				<video
+					style={isLoading ? { display: "none" } : {}}
+					playsInline
+					controls
+					preload="metadata"
+					width={dimensions.width}
+					height={dimensions.height}
+					ref={ref}
+					onLoadedMetadata={onLoadedMetadata}
+					onError={onError}
+				>
+					<source src={url} type={attachment.content_type} />
+				</video>
+			)}
+		</>
+	);
+}
+
+export default Video;
diff --git a/src/components/messaging/Message.tsx b/src/components/messaging/Message.tsx
index 8a28f7b1..b8644e73 100644
--- a/src/components/messaging/Message.tsx
+++ b/src/components/messaging/Message.tsx
@@ -22,6 +22,7 @@ const Container = styled.div<{ isHeader?: boolean }>`
 	flex-direction: row;
 	position: relative;
 	padding: 2px 12px;
+	margin-top: ${(props) => (props.isHeader ? "20px" : undefined)};
 
 	&:hover {
 		background-color: var(--background-primary-highlight);
@@ -138,6 +139,7 @@ function Message({ message, isHeader, isSending, isFailed }: Props) {
 	// }, [isSending, isFailed]);
 
 	// handles creating the message content based on the message type
+	// TODO: probably move this to a separate component
 	const renderMessageContent = React.useCallback(() => {
 		switch (message.type) {
 			case MessageType.Default:
@@ -158,7 +160,6 @@ function Message({ message, isHeader, isSending, isFailed }: Props) {
 						{"embeds" in message
 							? message.embeds.map((embed, index) => (
 									<Fragment key={index}>
-										{" "}
 										<MessageEmbed key={index} embed={embed} contextMenuItems={contextMenuItems} />;
 									</Fragment>
 							  ))
diff --git a/src/components/messaging/MessageAttachment.tsx b/src/components/messaging/MessageAttachment.tsx
index 7dde2e2f..4508e6f5 100644
--- a/src/components/messaging/MessageAttachment.tsx
+++ b/src/components/messaging/MessageAttachment.tsx
@@ -6,6 +6,7 @@ import { ContextMenuContext } from "../../contexts/ContextMenuContext";
 import useLogger from "../../hooks/useLogger";
 import { calculateImageRatio, calculateScaledDimensions } from "../../utils/Message";
 import { IContextMenuItem } from "../ContextMenuItem";
+import Video from "../Video";
 import AttachmentPreviewModal from "../modals/AttachmentPreviewModal";
 
 const Attachment = styled.div<{ withPointer?: boolean }>`
@@ -44,15 +45,7 @@ export default function MessageAttachment({ attachment, contextMenuItems, maxWid
 		);
 		finalElement = <Image src={url} alt={attachment.filename} width={scaledWidth} height={scaledHeight} />;
 	} else if (attachment.content_type?.startsWith("video")) {
-		{
-			/* TODO: poster thumbnail */
-		}
-		finalElement = (
-			<video playsInline controls preload="metadata" height={200}>
-				{/* TODO: the server doesn't return height and width yet for videos */}
-				<source src={url} type={attachment.content_type} />
-			</video>
-		);
+		finalElement = <Video attachment={attachment} />;
 	} else {
 		logger.warn(`Unknown attachment type: ${attachment.content_type}`);
 	}
diff --git a/src/components/messaging/MessageGroup.tsx b/src/components/messaging/MessageGroup.tsx
index b066bec4..b7314c62 100644
--- a/src/components/messaging/MessageGroup.tsx
+++ b/src/components/messaging/MessageGroup.tsx
@@ -1,35 +1,31 @@
 import { observer } from "mobx-react-lite";
-import { Fragment } from "react";
-import styled from "styled-components";
-import { default as MessageObject } from "../../stores/objects/Message";
-import QueuedMessage, { QueuedMessageStatus } from "../../stores/objects/QueuedMessage";
+import { MessageGroup } from "../../stores/MessageStore";
+import { QueuedMessageStatus } from "../../stores/objects/QueuedMessage";
 import Message from "./Message";
 
-const Container = styled.div`
-	margin-top: 20px;
-`;
-
 interface Props {
-	messages: (MessageObject | QueuedMessage)[];
+	group: MessageGroup;
 }
 
 /**
  * Component that handles rendering a group of messages from the same author
  */
-function MessageGroup({ messages }: Props) {
+function MessageGroup({ group }: Props) {
+	const { messages } = group;
 	return (
-		<Container>
-			{messages.map((message, index) => (
-				<Fragment key={message.id}>
+		<>
+			{messages.map((message, index) => {
+				return (
 					<Message
+						key={message.id}
 						message={message}
-						isHeader={index === 0}
+						isHeader={index === messages.length - 1}
 						isSending={"status" in message && message.status === QueuedMessageStatus.SENDING}
 						isFailed={"status" in message && message.status === QueuedMessageStatus.FAILED}
 					/>
-				</Fragment>
-			))}
-		</Container>
+				);
+			})}
+		</>
 	);
 }
 
diff --git a/src/components/messaging/MessageInput.tsx b/src/components/messaging/MessageInput.tsx
index 0c829e08..4fc531de 100644
--- a/src/components/messaging/MessageInput.tsx
+++ b/src/components/messaging/MessageInput.tsx
@@ -119,7 +119,7 @@ function MessageInput({ channel }: Props) {
 				const error = e instanceof Error ? e.message : typeof e === "string" ? e : "Unknown error";
 				msg.fail(error);
 			}
-		} else {
+		} else if (shouldFail) {
 			msg.fail("Message queue experiment");
 		}
 	}, [content, attachments, channel, canSendMessage]);
diff --git a/src/components/messaging/MessageList.tsx b/src/components/messaging/MessageList.tsx
index 84bf9e40..cfdb638f 100644
--- a/src/components/messaging/MessageList.tsx
+++ b/src/components/messaging/MessageList.tsx
@@ -1,10 +1,11 @@
 import { observer } from "mobx-react-lite";
-import React, { Fragment } from "react";
+import React from "react";
 import InfiniteScroll from "react-infinite-scroll-component";
 import PulseLoader from "react-spinners/PulseLoader";
 import styled from "styled-components";
 import useLogger from "../../hooks/useLogger";
 import { useAppStore } from "../../stores/AppStore";
+import { MessageGroup as MessageGroupType } from "../../stores/MessageStore";
 import Channel from "../../stores/objects/Channel";
 import Guild from "../../stores/objects/Guild";
 import { Permissions } from "../../utils/Permissions";
@@ -35,6 +36,7 @@ function MessageList({ guild, channel }: Props) {
 	const logger = useLogger("MessageList.tsx");
 	const [hasMore, setHasMore] = React.useState(true);
 	const [canView, setCanView] = React.useState(false);
+	const messageGroups = channel.messages.groups;
 
 	// handles the permission check
 	React.useEffect(() => {
@@ -53,30 +55,33 @@ function MessageList({ guild, channel }: Props) {
 		}
 	}, [guild, channel, canView]);
 
-	const fetchMore = async () => {
+	const fetchMore = React.useCallback(() => {
 		if (!channel.messages.count) {
 			return;
 		}
-
 		// get last group
-		const lastGroup = channel.messages.grouped[channel.messages.grouped.length - 1];
+		const lastGroup = messageGroups[messageGroups.length - 1];
 		// ignore queued messages
-		if ("status" in lastGroup) return;
+		if ("status" in lastGroup.messages[0]) return;
 		// get first message in the group to use as before
-		const before = lastGroup[0].id;
+		const before = lastGroup.messages[0].id;
 		logger.debug(`Fetching 50 messages before ${before} for channel ${channel.id}`);
-
 		channel.getMessages(app, false, 50, before).then((r) => {
 			if (r !== 50) setHasMore(false);
 			else setHasMore(true);
 		});
-	};
+	}, [channel, setHasMore]);
+
+	const renderGroup = React.useCallback(
+		(group: MessageGroupType) => <MessageGroup key={group.messages[0].id} group={group} />,
+		[],
+	);
 
 	return (
 		<Container id="scrollable-div">
 			{canView ? (
 				<InfiniteScroll
-					dataLength={channel.messages.grouped.length}
+					dataLength={messageGroups.length}
 					next={fetchMore}
 					style={{
 						display: "flex",
@@ -107,11 +112,7 @@ function MessageList({ guild, channel }: Props) {
 						</EndMessageContainer>
 					}
 				>
-					{channel.messages.grouped.map((group, index) => (
-						<Fragment key={index}>
-							<MessageGroup messages={group} />
-						</Fragment>
-					))}
+					{messageGroups.map((group) => renderGroup(group))}
 				</InfiniteScroll>
 			) : (
 				<div
diff --git a/src/stores/MessageQueue.ts b/src/stores/MessageQueue.ts
index d9b16b1d..da208c91 100644
--- a/src/stores/MessageQueue.ts
+++ b/src/stores/MessageQueue.ts
@@ -8,7 +8,7 @@ import type { QueuedMessageData } from "./objects/QueuedMessage";
 import QueuedMessage, { QueuedMessageStatus } from "./objects/QueuedMessage";
 
 export default class MessageQueue {
-	@observable private readonly messages: IObservableArray<QueuedMessage>;
+	@observable readonly messages: IObservableArray<QueuedMessage>;
 
 	constructor(private readonly app: AppStore) {
 		this.messages = observable.array([]);
diff --git a/src/stores/MessageStore.ts b/src/stores/MessageStore.ts
index 56b26002..5291995e 100644
--- a/src/stores/MessageStore.ts
+++ b/src/stores/MessageStore.ts
@@ -4,29 +4,34 @@ import { action, computed, makeObservable, observable } from "mobx";
 import useLogger from "../hooks/useLogger";
 import Logger from "../utils/Logger";
 import AppStore from "./AppStore";
-import Message from "./objects/Message";
-import QueuedMessage from "./objects/QueuedMessage";
+import Message, { MessageLike } from "./objects/Message";
+import User from "./objects/User";
+
+export interface MessageGroup {
+	author: User;
+	messages: MessageLike[];
+}
 
 export default class MessageStore {
 	private readonly app: AppStore;
 	private readonly channelId;
 	private readonly logger: Logger;
 
-	@observable private readonly messagesArr: IObservableArray<Message>;
+	@observable private readonly messages: IObservableArray<Message>;
 
 	constructor(app: AppStore, channelId: string) {
 		this.app = app;
 		this.channelId = channelId;
 		this.logger = useLogger("MessageStore.ts");
 
-		this.messagesArr = observable.array([]);
+		this.messages = observable.array([]);
 
 		makeObservable(this);
 	}
 
 	@action
 	add(message: APIMessage) {
-		this.messagesArr.push(new Message(this.app, message));
+		this.messages.push(new Message(this.app, message));
 	}
 
 	@action
@@ -35,39 +40,11 @@ export default class MessageStore {
 	}
 
 	get(id: string) {
-		return this.messagesArr.find((message) => message.id === id);
-	}
-
-	@computed
-	get grouped() {
-		const messages = [...this.messagesArr, ...this.app.queue.get(this.channelId)];
-		const sortedGroups = messages
-			.slice()
-			.sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime())
-			.reduce((groups, message) => {
-				const lastGroup = groups[groups.length - 1];
-				const lastMessage = lastGroup?.[lastGroup.length - 1];
-				if (
-					lastMessage &&
-					lastMessage.author.id === message.author.id &&
-					message.timestamp.getTime() - lastMessage.timestamp.getTime() <= 7 * 60 * 1000
-				) {
-					// add to last group
-					lastGroup.push(message);
-				} else {
-					// create new group
-					groups.push([message]);
-				}
-				return groups;
-			}, [] as (Message | QueuedMessage)[][])
-			.map((group) => group.sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime()))
-			.reverse();
-
-		return sortedGroups;
+		return this.messages.find((message) => message.id === id);
 	}
 
 	has(id: string) {
-		return this.messagesArr.some((message) => message.id === id);
+		return this.messages.some((message) => message.id === id);
 	}
 
 	@action
@@ -76,7 +53,7 @@ export default class MessageStore {
 		if (!message) {
 			return;
 		}
-		this.messagesArr.remove(message);
+		this.messages.remove(message);
 	}
 
 	@action
@@ -87,11 +64,46 @@ export default class MessageStore {
 		}
 		const newMessage = new Message(this.app, message);
 		// replace
-		this.messagesArr[this.messagesArr.indexOf(oldMessage)] = newMessage;
+		this.messages[this.messages.indexOf(oldMessage)] = newMessage;
 	}
 
 	@computed
 	get count() {
-		return this.messagesArr.length;
+		return this.messages.length;
+	}
+
+	@computed get groups(): MessageGroup[] {
+		// Sort messages by timestamp in descending order (most recent first)
+		const sortedMessages: MessageLike[] = [...this.messages, ...this.app.queue.messages.values()]
+			.slice()
+			.sort((a, b) => {
+				return b.timestamp.getTime() - a.timestamp.getTime();
+			});
+
+		const sortedGroups = sortedMessages
+			.slice()
+			.sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime())
+			.reduce((groups, message) => {
+				const lastGroup = groups[groups.length - 1];
+				const lastMessage = lastGroup?.messages[lastGroup.messages.length - 1];
+				if (
+					lastMessage &&
+					lastMessage.author.id === message.author.id &&
+					message.timestamp.getTime() - lastMessage.timestamp.getTime() <= 10 * 60 * 1000
+				) {
+					// add to last group
+					lastGroup.messages.unshift(message);
+				} else {
+					// create new group
+					groups.push({
+						author: message.author,
+						messages: [message],
+					});
+				}
+				return groups;
+			}, [] as MessageGroup[])
+			.reverse();
+
+		return sortedGroups;
 	}
 }