diff --git a/src/components/App.tsx b/src/components/App.tsx
index f7457be..a12346c 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -9,7 +9,7 @@ import WheelShareLoggedOut from './WheelShareLoggedOut';
 const Authenticator = lazy(() => import('./Authentication/Authenticator'));
 const CarpoolPage = lazy(() => import('./Carpool/CarpoolPage'));
 const EventPage = lazy(() => import('./Event/EventPage'));
-const Group = lazy(() => import('./Group'));
+const Group = lazy(() => import('./Group/GroupPage'));
 
 const style: CSSProperties = {
 	display: 'flex',
@@ -36,13 +36,13 @@ export default function App() {
 									component={user ? WheelShare : WheelShareLoggedOut}
 								/>
 								<Suspense fallback={null}>
-									<Route path="/groups/:id" component={Group} />
 									<Route
 										component={Authenticator}
 										path="/auth/:provider/callback"
 									/>
 									<Route path="/carpools/:id" component={CarpoolPage} />
 									<Route path="/events/:id" component={EventPage} />
+									<Route path="/groups/:id" component={Group} />
 								</Suspense>
 							</Switch>
 						</BrowserRouter>
diff --git a/src/components/Group.tsx b/src/components/Group.tsx
deleted file mode 100644
index eaccfb9..0000000
--- a/src/components/Group.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { useEffect, useState } from 'react';
-import { useParams } from 'react-router';
-import { Link } from 'react-router-dom';
-import { getGroup, getGroupEvents } from './api';
-import EventCreatorLink from './EventCreator/EventCreatorLink';
-import EventStream from './EventStream';
-import GroupSettingsLink from './GroupSettings/GroupSettingsLink';
-import { IEvent, IGroup } from './types';
-import UILink from './UI/UILink';
-
-export default function Group() {
-	const { id } = useParams<{ id: string }>();
-	const [loading, setLoading] = useState(true);
-	const [group, setGroup] = useState<IGroup | null>(null);
-	const [events, setEvents] = useState<IEvent[]>([]);
-
-	useEffect(() => {
-		setLoading(true);
-		getGroup(+id)
-			.then(setGroup)
-			.finally(() => setLoading(false));
-
-		getGroupEvents(+id).then(setEvents);
-	}, [id]);
-
-	if (!group && !loading) {
-		return (
-			<div style={{ textAlign: 'center' }}>
-				<h1>Group Not Found</h1>
-				<Link to="/">Home</Link>
-			</div>
-		);
-	}
-
-	if (!group) {
-		return null;
-	}
-
-	const { name } = group;
-
-	return (
-		<div
-			style={{
-				textAlign: 'center',
-				maxWidth: '30rem',
-				marginLeft: 'auto',
-				marginRight: 'auto',
-			}}
-		>
-			<h1>{name}</h1>
-			<UILink href="/">Home</UILink>
-			<br />
-			<br />
-			<GroupSettingsLink group={group} />
-			<br />
-			<EventCreatorLink group={group} />
-			<br />
-			{events && events.length > 0 ? (
-				<EventStream events={events} />
-			) : (
-				<span>
-					There are no events yet. Click 'create event' above to add one!
-				</span>
-			)}
-		</div>
-	);
-}
diff --git a/src/components/Group/Group.tsx b/src/components/Group/Group.tsx
new file mode 100644
index 0000000..4baf95c
--- /dev/null
+++ b/src/components/Group/Group.tsx
@@ -0,0 +1,35 @@
+import events from 'events';
+import EventCreatorLink from '../EventCreator/EventCreatorLink';
+import EventStream from '../EventStream';
+import GroupSettingsLink from '../GroupSettings/GroupSettingsLink';
+import { IGroup } from '../types';
+import UILink from '../UI/UILink';
+
+export default function Group({ group }: { group: IGroup }) {
+	return (
+		<div
+			style={{
+				textAlign: 'center',
+				maxWidth: '30rem',
+				marginLeft: 'auto',
+				marginRight: 'auto',
+			}}
+		>
+			<h1>{group.name}</h1>
+			<UILink href="/">Home</UILink>
+			<br />
+			<br />
+			<GroupSettingsLink group={group} />
+			<br />
+			<EventCreatorLink group={group} />
+			<br />
+			{events && events.length > 0 ? (
+				<EventStream events={group.events} />
+			) : (
+				<span>
+					There are no events yet. Click 'create event' above to add one!
+				</span>
+			)}
+		</div>
+	);
+}
diff --git a/src/components/Group/GroupPage.tsx b/src/components/Group/GroupPage.tsx
new file mode 100644
index 0000000..bffa7ae
--- /dev/null
+++ b/src/components/Group/GroupPage.tsx
@@ -0,0 +1,46 @@
+import { useEffect, useState } from 'react';
+import { useParams } from 'react-router';
+import { Link } from 'react-router-dom';
+import { getGroup, getGroupEvents } from '../api';
+import { IGroup } from '../types';
+import Group from './Group';
+
+export default function GroupPage() {
+	const { id } = useParams<{ id: string }>();
+	const [loading, setLoading] = useState(true);
+	const [group, setGroup] = useState<IGroup | null>(null);
+
+	useEffect(() => {
+		async function load() {
+			setLoading(true);
+			try {
+				const group = await getGroup(+id);
+				const events = await getGroupEvents(+id);
+
+				setGroup({ ...group, events });
+			} catch (e) {
+				console.error(e);
+				setGroup(null);
+			}
+
+			setLoading(false);
+		}
+
+		load();
+	}, [id]);
+
+	if (!group && !loading) {
+		return (
+			<div style={{ textAlign: 'center' }}>
+				<h1>Group Not Found</h1>
+				<Link to="/">Home</Link>
+			</div>
+		);
+	}
+
+	if (!group) {
+		return null;
+	}
+
+	return <Group group={group} />;
+}