diff --git a/viewer/src/components/Player.tsx b/viewer/src/components/Player.tsx
index 21b8edb..8f450c3 100644
--- a/viewer/src/components/Player.tsx
+++ b/viewer/src/components/Player.tsx
@@ -15,6 +15,7 @@ export default function Player() {
     return (
         <>
             <WebVttPlayer
+                className="w-full h-full overflow-hidden position-absolute"
                 preload={false}
                 audio={audioUrl}
                 videoUrl={videoUrl}
diff --git a/viewer/src/components/WebVttPlayer/WebVttPlayer.tsx b/viewer/src/components/WebVttPlayer/WebVttPlayer.tsx
index db119dd..470c679 100644
--- a/viewer/src/components/WebVttPlayer/WebVttPlayer.tsx
+++ b/viewer/src/components/WebVttPlayer/WebVttPlayer.tsx
@@ -87,57 +87,64 @@ export default function WebVttPlayer(props: WebVttPlayerProps) {
 
     return (
         <>
-            <div className="webvtt-player">
-                <div className="media">
-                    <div className="player">
-                        {/* <VideoPlayer playerRef={video} playing={playing} videoUrl={props.videoUrl} transcriptUrl={props.transcript} /> */}
-                        {/* a vanilla video element with source and tracks. so much easier oh my god */}
-                        <video
-                            preload={preload}
-                            ref={nativePlayerRef}
-                            crossOrigin="anonymous"
-                            controls={true}
-                        >
-                            <source src={props.videoUrl} type="video/mp4" />
-                            <track
-                                ref={trackRef}
-                                kind="subtitles"
-                                src={props.transcript}
-                                srcLang="en"
-                                default={true}
-                            />
-                            <track default
-                                kind="metadata"
-                                src={props.metadataUrl}
-                                ref={metatrackRef} />
-                        </video>
-                    </div>
-                    <div className="tracks">
-                        {trackLoaded ? (
-                            <>
-                                <Transcript
-                                    url={props.transcript}
-                                    seek={seek}
-                                    track={trackRef.current.track}
-                                    query={query}
-                                />
-                            </>
-                        ) : (
-                            "Loading transcript..."
-                        )}
-                        {metatrackLoaded && props.metadataUrl ? (
-                            <>
-                                <Metadata
-                                    url={props.metadataUrl}
-                                    seek={seek}
-                                    track={metatrackRef.current.track}
-                                />
-                            </>
-                        ) : (
-                            "\nLoading metadata..." // TODO: make better logic for showing if we wanna serve metadata
-                        )}
+            <div className="flex w-full overflow-hidden">
+                <div className="w-1/2 player">
+                    {/* <VideoPlayer playerRef={video} playing={playing} videoUrl={props.videoUrl} transcriptUrl={props.transcript} /> */}
+                    {/* a vanilla video element with source and tracks. so much easier oh my god */}
+                    <video
+                        // width="75%"
+                        preload={preload}
+                        ref={nativePlayerRef}
+                        crossOrigin="anonymous"
+                        controls={true}
+                        autoPlay={true}
+                    >
+                        <source src={props.videoUrl} type="video/mp4" />
+                        <track
+                            ref={trackRef}
+                            kind="subtitles"
+                            src={props.transcript}
+                            srcLang="en"
+                            default={true}
+                        />
+                        <track default
+                            kind="metadata"
+                            src={props.metadataUrl}
+                            ref={metatrackRef} />
+                    </video>
+                </div>
+                <div className="w-1/2">
+                    <div className="webvtt-player">
+                        <div className="media h-1\/3">
+                            <div className="tracks">
+                                {trackLoaded ? (
+                                    <>
+                                        <Transcript
+                                            url={props.transcript}
+                                            seek={seek}
+                                            track={trackRef.current.track}
+                                            query={query}
+                                        />
+                                    </>
+                                ) : (
+                                    "Loading transcript..."
+                                )}
+                                {metatrackLoaded && props.metadataUrl ? (
+                                    <>
+                                        <Metadata
+                                            url={props.metadataUrl}
+                                            seek={seek}
+                                            track={metatrackRef.current.track}
+                                        />
+                                    </>
+                                ) : (
+                                    "\nLoading metadata..." // TODO: make better logic for showing if we wanna serve metadata
+                                )}
+                            </div>
+                        </div>
                     </div>
                 </div>
+
             </div>
         </>
     );
diff --git a/viewer/src/pages/index.tsx b/viewer/src/pages/index.tsx
index e2c394f..c857d29 100644
--- a/viewer/src/pages/index.tsx
+++ b/viewer/src/pages/index.tsx
@@ -25,23 +25,22 @@ const Home: NextPage = () => {
         <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')} className="bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 py-2 px-4 absolute top-4 right-4">
           toggle theme
         </button>
-        <div className="container flex flex-col items-center justify-center gap-12 px-4 py-16 ">
-          {/* should hug upper-lefthand side */}
-          {/* text in the upper-lefthand corner with some padding */}
+        <div className="px-4 py-32 pb-0 position-absolute">
           <div className="titles">
             <h1 className="text-1xl font-extrabold tracking-tight text-black dark:text-white sm:text-[3rem] top-4 left-4 absolute">
               documentary metadata viewer
             </h1>
             {/* hug the left-hand side of the screen */}
-            <h2 className=" tracking-tight text-gray-500 dark:text-white  top-20 left-6 absolute"><i>current film</i>: MIT: REGRESSIONS intro</h2>
+            <h2 className=" tracking-tight text-gray-500 dark:text-white  top-20 left-6 absolute"><i>current film</i>: <a href="https://www.youtube.com/watch?v=TGKk3iwoI9I&ab_channel=MIT%3AREGRESSIONS">MIT: REGRESSIONS intro</a> &nbsp; | &nbsp; <a href="https://github.com/mit-regressions/viewer/blob/igel-t3-initial/viewer/public/data/MIT%20Regressions%20intro%20metadata.vtt">metadata source</a></h2>
+            {/* <h2 className=" tracking-tight text-gray-500 dark:text-white  top-24 left-6 absolute"><i>metadata file source (VTT)</i>: <a href="https://www.youtube.com/watch?v=TGKk3iwoI9I&ab_channel=MIT%3AREGRESSIONS">MIT: REGRESSIONS intro</a></h2> */}
           </div>
          
 
           <Player />
 
-          <div className="flex flex-col items-center gap-2">
+          {/* <div className="flex flex-col items-center gap-2">
             <AuthShowcase />
-          </div>
+          </div> */}
         </div>
       </main>
     </>