diff --git a/src/app/(home)/players/[id]/_components/games-table.tsx b/src/app/(home)/players/[id]/_components/games-table.tsx
index e2eb0a2..e22b924 100644
--- a/src/app/(home)/players/[id]/_components/games-table.tsx
+++ b/src/app/(home)/players/[id]/_components/games-table.tsx
@@ -198,15 +198,16 @@ export function GamesTable({ games }: { games: SelectGames[] }) {
   >(null)
 
   // Use the tRPC useQuery hook to fetch the transcript
-  const { data: transcriptContent, isLoading } = api.history.getTranscript.useQuery(
-    { gameNumber: transcriptGameNumber ?? 0 },
-    {
-      // Only fetch when we have a game number and the dialog is open
-      enabled: transcriptGameNumber !== null && isDialogOpen,
-      // Don't refetch on window focus
-      refetchOnWindowFocus: false,
-    }
-  )
+  const { data: transcriptContent, isLoading } =
+    api.history.getTranscript.useQuery(
+      { gameNumber: transcriptGameNumber ?? 0 },
+      {
+        // Only fetch when we have a game number and the dialog is open
+        enabled: transcriptGameNumber !== null && isDialogOpen,
+        // Don't refetch on window focus
+        refetchOnWindowFocus: false,
+      }
+    )
 
   // New openTranscript function that sets state instead of opening a new window
   const openTranscript = (gameNumber: number): void => {
@@ -299,18 +300,31 @@ export function GamesTable({ games }: { games: SelectGames[] }) {
       <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
         <DialogContent className='max-h-[80vh] w-full overflow-y-auto sm:max-w-[calc(100%-2rem)] '>
           <DialogHeader>
-            <DialogTitle>
-              {transcriptGameNumber
-                ? `Game Transcript #${transcriptGameNumber}`
-                : 'Game Transcript'}
-            </DialogTitle>
+            <div className='flex items-center justify-between'>
+              <DialogTitle>
+                {transcriptGameNumber
+                  ? `Game Transcript #${transcriptGameNumber}`
+                  : 'Game Transcript'}
+              </DialogTitle>
+              {transcriptGameNumber && (
+                <Button variant='outline' size='sm' asChild>
+                  <Link
+                    href={`/transcript/${transcriptGameNumber}`}
+                    target='_blank'
+                    rel='noopener noreferrer'
+                  >
+                    Open in New Page
+                  </Link>
+                </Button>
+              )}
+            </div>
           </DialogHeader>
           {/* Use iframe to isolate the transcript content and prevent style leakage */}
           <div className='!h-[60vh] mt-4 w-full'>
             {isLoading ? (
               <div className='flex h-full w-full items-center justify-center'>
                 <div className='text-center'>
-                  <div className='mb-2 h-6 w-6 animate-spin rounded-full border-b-2 border-t-2 border-gray-900 dark:border-gray-100'></div>
+                  <div className='mb-2 h-6 w-6 animate-spin rounded-full border-gray-900 border-t-2 border-b-2 dark:border-gray-100'></div>
                   <p>Loading transcript...</p>
                 </div>
               </div>
diff --git a/src/app/transcript/[gameNumber]/page.tsx b/src/app/transcript/[gameNumber]/page.tsx
new file mode 100644
index 0000000..b9108a2
--- /dev/null
+++ b/src/app/transcript/[gameNumber]/page.tsx
@@ -0,0 +1,64 @@
+'use client'
+
+import { api } from '@/trpc/react'
+import { useParams } from 'next/navigation'
+import { useEffect, useState } from 'react'
+
+export default function TranscriptPage() {
+  const params = useParams()
+  const gameNumber = Number.parseInt(params.gameNumber as string, 10)
+  const [error, setError] = useState<string | null>(null)
+
+  // Use the tRPC useQuery hook to fetch the transcript
+  const { data: transcriptContent, isLoading } =
+    api.history.getTranscript.useQuery(
+      { gameNumber },
+      {
+        // Don't refetch on window focus
+        refetchOnWindowFocus: false,
+        onError: (err) => {
+          setError(`Failed to load transcript: ${err.message}`)
+        },
+      }
+    )
+
+  // Use useEffect to set the document title
+  useEffect(() => {
+    document.title = `Game Transcript #${gameNumber}`
+  }, [gameNumber])
+
+  if (isLoading) {
+    return (
+      <div className='flex h-screen w-screen items-center justify-center'>
+        <div className='text-center'>
+          <div className='mb-2 h-6 w-6 animate-spin rounded-full border-gray-900 border-t-2 border-b-2'></div>
+          <p>Loading transcript...</p>
+        </div>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className='flex h-screen w-screen items-center justify-center'>
+        <p className='text-red-500'>{error}</p>
+      </div>
+    )
+  }
+
+  if (!transcriptContent) {
+    return (
+      <div className='flex h-screen w-screen items-center justify-center'>
+        <p>Failed to load transcript. Please try again.</p>
+      </div>
+    )
+  }
+
+  // Return the transcript content directly as HTML
+  return (
+    <div
+      className='transcript-container'
+      dangerouslySetInnerHTML={{ __html: transcriptContent }}
+    />
+  )
+}
diff --git a/src/app/transcript/layout.tsx b/src/app/transcript/layout.tsx
new file mode 100644
index 0000000..dbd318b
--- /dev/null
+++ b/src/app/transcript/layout.tsx
@@ -0,0 +1,11 @@
+export default function TranscriptLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang='en'>
+      <body>{children}</body>
+    </html>
+  )
+}