diff --git a/web/packages/teleport/src/DesktopSession/DesktopSession.tsx b/web/packages/teleport/src/DesktopSession/DesktopSession.tsx
index 051026cad56a2..4c421a7d6e403 100644
--- a/web/packages/teleport/src/DesktopSession/DesktopSession.tsx
+++ b/web/packages/teleport/src/DesktopSession/DesktopSession.tsx
@@ -23,7 +23,7 @@ import {
   ButtonSecondary,
   ButtonPrimary,
 } from 'design';
-import { Danger } from 'design/Alert';
+import { Danger, Info } from 'design/Alert';
 import Dialog, {
   DialogHeader,
   DialogTitle,
@@ -86,7 +86,7 @@ export function DesktopSession(props: State) {
 
   const computeErrorDialog = () => {
     // Websocket is closed but we haven't
-    // closed it on purpose or registered a fatal tdp error.
+    // closed it on purpose or registered a fatal TDP error.
     const unknownConnectionError =
       wsConnection === 'closed' &&
       !disconnected &&
@@ -96,7 +96,7 @@ export function DesktopSession(props: State) {
     if (fetchAttempt.status === 'failed') {
       errorText = fetchAttempt.statusText || 'fetch attempt failed';
     } else if (tdpConnection.status === 'failed') {
-      errorText = tdpConnection.statusText || 'tdp connection failed';
+      errorText = tdpConnection.statusText || 'TDP connection failed';
     } else if (tdpConnection.status === '') {
       errorText = tdpConnection.statusText || 'encountered a non-fatal error';
     } else if (unknownConnectionError) {
@@ -112,10 +112,15 @@ export function DesktopSession(props: State) {
     }
     const open = errorText !== '';
 
-    return { open, text: errorText };
+    return {
+      open,
+      text: errorText,
+      isError: unknownConnectionError || errorText === 'RDP connection failed',
+    };
   };
 
   const errorDialog = computeErrorDialog();
+  const Alert = errorDialog.isError ? Danger : Info;
 
   if (errorDialog.open) {
     return (
@@ -126,12 +131,14 @@ export function DesktopSession(props: State) {
           open={errorDialog.open}
         >
           <DialogHeader style={{ flexDirection: 'column' }}>
-            <DialogTitle>Error</DialogTitle>
+            <DialogTitle>
+              {errorDialog.isError ? 'Error' : 'Disconnected'}
+            </DialogTitle>
           </DialogHeader>
           <DialogContent>
             <>
-              <Danger children={<>{errorDialog.text}</>} />
-              Refresh the page to try again.
+              <Alert children={<>{errorDialog.text}</>} />
+              Refresh the page to reconnect.
             </>
           </DialogContent>
           <DialogFooter>
diff --git a/web/packages/teleport/src/DesktopSession/__snapshots__/DesktopSession.story.test.tsx.snap b/web/packages/teleport/src/DesktopSession/__snapshots__/DesktopSession.story.test.tsx.snap
index 5735526ab4edc..ddbf5707a14b8 100644
--- a/web/packages/teleport/src/DesktopSession/__snapshots__/DesktopSession.story.test.tsx.snap
+++ b/web/packages/teleport/src/DesktopSession/__snapshots__/DesktopSession.story.test.tsx.snap
@@ -874,7 +874,7 @@ exports[`connection error 1`] = `
   overflow: auto;
   word-break: break-word;
   line-height: 1.5;
-  background: #FF6257;
+  background: #039be5;
   color: #000000;
 }
 
@@ -985,7 +985,7 @@ exports[`connection error 1`] = `
           class="c5"
           color="text.main"
         >
-          Error
+          Disconnected
         </div>
       </div>
       <div
@@ -993,11 +993,11 @@ exports[`connection error 1`] = `
       >
         <div
           class="c7"
-          kind="danger"
+          kind="info"
         >
           some connection error
         </div>
-        Refresh the page to try again.
+        Refresh the page to reconnect.
       </div>
       <div
         class="c8"
@@ -1393,7 +1393,7 @@ exports[`fetch error 1`] = `
   overflow: auto;
   word-break: break-word;
   line-height: 1.5;
-  background: #FF6257;
+  background: #039be5;
   color: #000000;
 }
 
@@ -1504,7 +1504,7 @@ exports[`fetch error 1`] = `
           class="c5"
           color="text.main"
         >
-          Error
+          Disconnected
         </div>
       </div>
       <div
@@ -1512,11 +1512,11 @@ exports[`fetch error 1`] = `
       >
         <div
           class="c7"
-          kind="danger"
+          kind="info"
         >
           some fetch  error
         </div>
-        Refresh the page to try again.
+        Refresh the page to reconnect.
       </div>
       <div
         class="c8"
@@ -1590,7 +1590,7 @@ exports[`invalid processing 1`] = `
   overflow: auto;
   word-break: break-word;
   line-height: 1.5;
-  background: #FF6257;
+  background: #039be5;
   color: #000000;
 }
 
@@ -1701,7 +1701,7 @@ exports[`invalid processing 1`] = `
           class="c5"
           color="text.main"
         >
-          Error
+          Disconnected
         </div>
       </div>
       <div
@@ -1709,11 +1709,11 @@ exports[`invalid processing 1`] = `
       >
         <div
           class="c7"
-          kind="danger"
+          kind="info"
         >
           The application has detected an invalid internal application state.         Please file a bug report for this issue at         https://github.com/gravitational/teleport/issues/new?assignees=&labels=bug&template=bug_report.md
         </div>
-        Refresh the page to try again.
+        Refresh the page to reconnect.
       </div>
       <div
         class="c8"
@@ -2530,7 +2530,7 @@ exports[`unintended disconnect 1`] = `
         >
           Session disconnected for an unknown reason.
         </div>
-        Refresh the page to try again.
+        Refresh the page to reconnect.
       </div>
       <div
         class="c8"
diff --git a/web/packages/teleport/src/lib/tdp/codec.ts b/web/packages/teleport/src/lib/tdp/codec.ts
index 3d590f8c94292..f67e27cbf18ea 100644
--- a/web/packages/teleport/src/lib/tdp/codec.ts
+++ b/web/packages/teleport/src/lib/tdp/codec.ts
@@ -825,12 +825,17 @@ export default class Codec {
   decodeNotification(buffer: ArrayBuffer): Notification {
     const dv = new DataView(buffer);
     let offset = 0;
+
     offset += byteLength; // eat message type
+
     const messageLength = dv.getUint32(offset);
     offset += uint32Length; // eat messageLength
+
     const message = this.decodeStringMessage(buffer);
     offset += messageLength; // eat message
+
     const severity = dv.getUint8(offset);
+
     return {
       message,
       severity: toSeverity(severity),
@@ -858,8 +863,14 @@ export default class Codec {
   // decodeStringMessage decodes a tdp message of the form
   // | message type (N) | message_length uint32 | message []byte
   private decodeStringMessage(buffer: ArrayBuffer): string {
-    const offset = byteLength + uint32Length; // eat message type and message_length
-    return this.decoder.decode(new Uint8Array(buffer.slice(offset)));
+    const dv = new DataView(buffer);
+    let offset = byteLength; // eat message type
+    const msgLength = dv.getUint32(offset);
+    offset += uint32Length; // eat messageLength
+
+    return this.decoder.decode(
+      new Uint8Array(buffer.slice(offset, offset + msgLength))
+    );
   }
 
   // decodePngFrame decodes a raw tdp PNG frame message and returns it as a PngFrame