diff --git a/app/routes/__app/messages.$recipient.tsx b/app/routes/__app/messages.$recipient.tsx
index 194528f..edff921 100644
--- a/app/routes/__app/messages.$recipient.tsx
+++ b/app/routes/__app/messages.$recipient.tsx
@@ -1,5 +1,5 @@
 import type { MetaFunction } from "@remix-run/node";
-import { Link, useNavigate, useParams } from "@remix-run/react";
+import { Link, useParams } from "@remix-run/react";
 import { useLoaderData } from "superjson-remix";
 import { IoCall, IoChevronBack } from "react-icons/io5";
 
@@ -23,7 +23,6 @@ export const action = conversationAction;
 export const loader = conversationLoader;
 
 export default function ConversationPage() {
-	const navigate = useNavigate();
 	const params = useParams<{ recipient: string }>();
 	const recipient = decodeURIComponent(params.recipient ?? "");
 	const { conversation } = useLoaderData<ConversationLoaderData>();
@@ -31,9 +30,9 @@ export default function ConversationPage() {
 	return (
 		<section className="h-full">
 			<header className="absolute top-0 w-screen h-12 backdrop-filter backdrop-blur-sm bg-white bg-opacity-75 border-b items-center flex justify-between">
-				<span className="pl-2 cursor-pointer" onClick={() => navigate(-1)}>
+				<Link className="pl-2 cursor-pointer" to="/messages">
 					<IoChevronBack className="h-6 w-6" />
-				</span>
+				</Link>
 				<strong className="absolute right-0 left-0 text-center pointer-events-none">
 					{conversation?.formattedPhoneNumber ?? recipient}
 				</strong>
diff --git a/app/routes/__app/settings.tsx b/app/routes/__app/settings.tsx
index 38adf9f..0627cfd 100644
--- a/app/routes/__app/settings.tsx
+++ b/app/routes/__app/settings.tsx
@@ -1,8 +1,7 @@
 import type { MetaFunction } from "@remix-run/node";
-import { Link, NavLink, Outlet, useNavigate } from "@remix-run/react";
+import { Link, NavLink, Outlet } from "@remix-run/react";
 import clsx from "clsx";
 import {
-	IoChevronBack,
 	IoLogOutOutline,
 	IoNotificationsOutline,
 	IoCardOutline,
@@ -27,18 +26,8 @@ export const meta: MetaFunction = () => ({
 });
 
 export default function SettingsLayout() {
-	const navigate = useNavigate();
-
 	return (
 		<section>
-			<header className="bg-gray-100 px-2 sm:px-6 lg:px-8">
-				<header className="flex">
-					<span className="flex items-center cursor-pointer" onClick={() => navigate(-1)}>
-						<IoChevronBack className="h-8 w-8 mr-2" /> Back
-					</span>
-				</header>
-			</header>
-
 			<main className="flex flex-col flex-grow mx-auto w-full max-w-7xl pb-10 lg:py-12 lg:px-8">
 				<div className="flex flex-col flex-grow lg:grid lg:grid-cols-12 lg:gap-x-5">
 					<aside className="py-6 px-2 sm:px-6 lg:py-0 lg:px-0 lg:col-span-3">