diff --git a/www/app/transcripts/new/page.tsx b/www/app/transcripts/new/page.tsx
index d9105a4f..b7a65325 100644
--- a/www/app/transcripts/new/page.tsx
+++ b/www/app/transcripts/new/page.tsx
@@ -44,6 +44,12 @@ const TranscriptCreate = () => {
     getAudioStream,
   } = useAudioDevice();
   const [hasRecorded, setHasRecorded] = useState(false);
+  const [transcriptStarted, setTranscriptStarted] = useState(false);
+
+  useEffect(() => {
+    if (!transcriptStarted && webSockets.transcriptText.length !== 0)
+      setTranscriptStarted(true);
+  }, [webSockets.transcriptText]);
 
   return (
     <>
@@ -69,15 +75,30 @@ const TranscriptCreate = () => {
               useActiveTopic={useActiveTopic}
               autoscroll={true}
             />
+
             <section
-              className={`w-full h-full bg-blue-400/20 rounded-lg md:rounded-xl px-2 md:px-4 flex flex-col justify-center align-center`}
+              className={`w-full h-full bg-blue-400/20 rounded-lg md:rounded-xl p-2 md:px-4`}
             >
               {!hasRecorded ? (
-                <div className="py-2 h-auto">
-                  <LiveTrancription text={webSockets.transcriptText} />
-                </div>
+                <>
+                  {transcriptStarted && (
+                    <h2 className="md:text-lg font-bold">Transcription</h2>
+                  )}
+                  <div className="flex flex-col justify-center align center text-center h-full">
+                    <div className="py-2 h-auto">
+                      {!transcriptStarted ? (
+                        <div className="text-center text-gray-500">
+                          The conversation transcript will appear here after you
+                          start recording.
+                        </div>
+                      ) : (
+                        <LiveTrancription text={webSockets.transcriptText} />
+                      )}
+                    </div>
+                  </div>
+                </>
               ) : (
-                <div className="flex flex-col justify-center align center text-center">
+                <div className="flex flex-col justify-center align center text-center h-full text-gray-500">
                   <div className="p-2 md:p-4">
                     <FontAwesomeIcon
                       icon={faGear}
diff --git a/www/app/transcripts/topicList.tsx b/www/app/transcripts/topicList.tsx
index 3a60e1b4..2dc7532c 100644
--- a/www/app/transcripts/topicList.tsx
+++ b/www/app/transcripts/topicList.tsx
@@ -61,9 +61,11 @@ export function TopicList({
   }, [activeTopic, autoscroll]);
 
   return (
-    <section className="relative w-full h-full bg-blue-400/20 rounded-lg md:rounded-xl p-2 md:p-4 flex flex-col justify-center align-center">
+    <section className="relative w-full h-full bg-blue-400/20 rounded-lg md:rounded-xl p-2 md:px-4 flex flex-col justify-center align-center">
       {topics.length > 0 ? (
         <>
+          <h2 className="md:text-lg font-bold mb-2">Topics</h2>
+
           {autoscroll && (
             <ScrollToBottom
               visible={!autoscrollEnabled}
@@ -108,7 +110,7 @@ export function TopicList({
           </div>
         </>
       ) : (
-        <div className="text-center text-gray-500 p-4">
+        <div className="text-center text-gray-500">
           Discussion topics will appear here after you start recording.
           <br />
           It may take up to 5 minutes of conversation for the first topic to