diff --git a/app/src/app/new/page.tsx b/app/src/app/new/page.tsx
index 749ec1e..8c69326 100644
--- a/app/src/app/new/page.tsx
+++ b/app/src/app/new/page.tsx
@@ -1,3 +1,4 @@
+import NavigateBack from "@/components/NavigateBack";
 import RecorderCard from "@/components/RecorderCard";
 import { Metadata } from "next";
 
@@ -7,8 +8,13 @@ export const metadata: Metadata = {
 
 const page = () => {
   return (
-    <div className="flex flex-col h-screen md:flex-row w-full justify-center items-center gap-4 pt-16 px-0 md:px-16">
-      <RecorderCard />
+    <div className="flex flex-col w-full h-screen pt-16 px-0 md:px-16">
+      <div className="flex justify-start w-full px-4 mt-8">
+        <NavigateBack href="/" />
+      </div>
+      <div className="flex flex-1 justify-center items-center">
+        <RecorderCard />
+      </div>
     </div>
   );
 };
diff --git a/app/src/app/register/page.tsx b/app/src/app/register/page.tsx
index 683ef1f..f88c27c 100644
--- a/app/src/app/register/page.tsx
+++ b/app/src/app/register/page.tsx
@@ -1,3 +1,4 @@
+import NavigateBack from "@/components/NavigateBack";
 import RegisterForm from "@/components/RegisterForm";
 
 import { Metadata } from "next";
@@ -8,10 +9,15 @@ export const metadata: Metadata = {
 
 const page = async () => {
   return (
-    <div className="flex flex-col md:flex-row w-full h-screen justify-center items-center gap-4 pt-16 px-0 md:px-16">
-      <RegisterForm />
+    <div className="flex flex-col w-full h-screen pt-16 px-0 md:px-16">
+      <div className="flex justify-start w-full px-4 mt-8">
+        <NavigateBack />
+      </div>
+      <div className="flex flex-1 justify-center items-center">
+        <RegisterForm />
+      </div>
     </div>
   );
 };
 
-export default page;
+export default page;
\ No newline at end of file
diff --git a/app/src/app/transcriptions/[transcription_id]/page.tsx b/app/src/app/transcriptions/[transcription_id]/page.tsx
index 41d5972..bdc3cd4 100644
--- a/app/src/app/transcriptions/[transcription_id]/page.tsx
+++ b/app/src/app/transcriptions/[transcription_id]/page.tsx
@@ -1,6 +1,7 @@
 // transcriptions / [transcription_id] / page.tsx
 
 import DetailedTranscription from "@/components/DetailedTranscription";
+import NavigateBack from "@/components/NavigateBack";
 import { db } from "@/db";
 import { transcriptions } from "@/db/schema";
 import { eq } from "drizzle-orm";
@@ -26,10 +27,16 @@ const page = async (props: PageProps) => {
     .where(eq(transcriptions.id, transcription_id));
 
   return (
-    <div className="flex flex-col w-full min-h-screen overflow-y-auto justify-center items-center gap-4 pt-16 px-0 md:px-16">
-      {transcription.length > 0 && (
-        <DetailedTranscription transcription={transcription[0]} />
-      )}
+
+    <div className="flex flex-col w-full h-screen pt-16 px-0 md:px-16">
+      <div className="flex justify-start w-full px-4 mt-8">
+        <NavigateBack subHeading={`Transcription for ${transcription[0].documentName}`} />
+      </div>
+      <div className="flex flex-1 justify-center items-center">
+        {transcription.length > 0 && (
+          <DetailedTranscription transcription={transcription[0]} />
+        )}
+      </div>
     </div>
   );
 };
diff --git a/app/src/app/transcriptions/page.tsx b/app/src/app/transcriptions/page.tsx
index 3fb6ad9..99b53b1 100644
--- a/app/src/app/transcriptions/page.tsx
+++ b/app/src/app/transcriptions/page.tsx
@@ -1,3 +1,4 @@
+import NavigateBack from "@/components/NavigateBack";
 import TranscriptionItem from "@/components/TranscriptionItem";
 import { db } from "@/db";
 import { transcriptions } from "@/db/schema";
@@ -26,11 +27,16 @@ const page = async () => {
     .orderBy(desc(transcriptions.createdAt));
 
   return (
-    <div className="flex flex-col w-full h-screen overflow-y-hidden justify-center items-center gap-4 pt-16 px-0 md:px-16">
-      <div className="flex flex-col w-full max-h-96 overflow-y-auto gap-4">
-        {userTranscriptions.map((transcription, idx) => (
-          <TranscriptionItem key={idx} index={idx} transcription={transcription} />
-        ))}
+    <div className="flex flex-col w-full h-screen pt-16 px-0 md:px-16">
+      <div className="flex justify-start w-full px-4 mt-8">
+        <NavigateBack subHeading="Transcriptions" />
+      </div>
+      <div className="flex flex-1 justify-center items-center">
+        <div className="flex flex-col w-full max-h-96 overflow-y-auto gap-4">
+          {userTranscriptions.map((transcription, idx) => (
+            <TranscriptionItem key={idx} index={idx} transcription={transcription} />
+          ))}
+        </div>
       </div>
     </div>
   );
diff --git a/app/src/components/NavigateBack.tsx b/app/src/components/NavigateBack.tsx
new file mode 100644
index 0000000..0616c8a
--- /dev/null
+++ b/app/src/components/NavigateBack.tsx
@@ -0,0 +1,31 @@
+'use client'
+
+import { useRouter } from "next/navigation"
+import { Button } from "./ui/button"
+import { ArrowLeftIcon } from "lucide-react"
+
+interface NavigateBackProps {
+  href?: string
+  subHeading?: string
+}
+
+const NavigateBack = (props: NavigateBackProps) => {
+  const { href, subHeading } = props
+  const router = useRouter()
+
+  const handleBack = () => {
+    href ? router.push(href) : router.back()
+  }
+
+  return (
+    <div className="flex justify-between items-center w-full">
+        <Button className="flex gap-4" variant={"ghost"} onClick={handleBack}>
+          <ArrowLeftIcon className="w-6 h-6" />
+          Back
+        </Button>
+        {subHeading && <div className="w-full flex justify-center items-center text-2xl font-bold">{subHeading}</div>}
+    </div>
+  )
+}
+
+export default NavigateBack
\ No newline at end of file
diff --git a/app/src/components/RegisterForm.tsx b/app/src/components/RegisterForm.tsx
index 14c9ebe..9113c39 100644
--- a/app/src/components/RegisterForm.tsx
+++ b/app/src/components/RegisterForm.tsx
@@ -19,10 +19,11 @@ import { useMutation } from "@tanstack/react-query";
 import axios, { AxiosError } from "axios";
 import { toast } from "sonner";
 import { useRouter } from "next/navigation";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 
 const RegisterForm = () => {
   const router = useRouter();
+  const [isPersistingUser,setIsPersistingUser] = useState(false);
 
   useEffect(() => {
     if (typeof window !== "undefined" && localStorage.getItem("user")) {
@@ -51,6 +52,7 @@ const RegisterForm = () => {
       }
       form.reset();
       router.push("/new");
+      setIsPersistingUser(false);
     },
     onError: (error) => {
       if (error instanceof AxiosError) {
@@ -67,6 +69,7 @@ const RegisterForm = () => {
   });
 
   const onSubmit = (data: RegisterUserRequest) => {
+    setIsPersistingUser(true);
     mutate(data);
   };
 
@@ -110,7 +113,8 @@ const RegisterForm = () => {
           />
         </div>
         <Button
-          isLoading={isPending}
+          isLoading={isPersistingUser || isPending}
+          disabled={isPersistingUser || isPending}
           type="submit"
           className="bg-[#668D7E] hover:bg-[#668D7E] text-white w-full"
         >