diff --git a/frontend/packages/console-app/src/components/cloud-shell/CloudShellExec.tsx b/frontend/packages/console-app/src/components/cloud-shell/CloudShellExec.tsx
new file mode 100644
index 00000000000..f8e7351ff79
--- /dev/null
+++ b/frontend/packages/console-app/src/components/cloud-shell/CloudShellExec.tsx
@@ -0,0 +1,149 @@
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { Base64 } from 'js-base64';
+import { LoadError } from '@console/internal/components/utils';
+import { connectToFlags, WithFlagsProps } from '@console/internal/reducers/features';
+import { impersonateStateToProps } from '@console/internal/reducers/ui';
+import { FLAGS } from '@console/shared';
+import { WSFactory } from '@console/internal/module/ws-factory';
+import { resourceURL } from '@console/internal/module/k8s';
+import { PodModel } from '@console/internal/models';
+import Terminal, { ImperativeTerminalType } from './Terminal';
+import TerminalLoadingBox from './TerminalLoadingBox';
+
+// pod exec WS protocol is FD prefixed, base64 encoded data (sometimes json stringified)
+
+// Channel 0 is STDIN, 1 is STDOUT, 2 is STDERR (if TTY is not requested), and 3 is a special error channel - 4 is C&C
+// The server only reads from STDIN, writes to the other three.
+// see also: https://github.com/kubernetes/kubernetes/pull/13885
+
+type Props = {
+  container: string;
+  podname: string;
+  namespace: string;
+  shcommand?: string[];
+};
+
+type StateProps = {
+  impersonate?: {
+    subprotocols: string[];
+  };
+};
+
+type CloudShellExecProps = Props & StateProps & WithFlagsProps;
+
+const NO_SH =
+  'starting container process caused "exec: \\"sh\\": executable file not found in $PATH"';
+
+const CloudShellExec: React.FC<CloudShellExecProps> = ({
+  container,
+  podname,
+  namespace,
+  shcommand,
+  flags,
+  impersonate,
+}) => {
+  const [wsOpen, setWsOpen] = React.useState<boolean>(false);
+  const [wsError, setWsError] = React.useState<string>();
+  const ws = React.useRef<WSFactory>();
+  const terminal = React.useRef<ImperativeTerminalType>();
+
+  const onData = React.useCallback((data: string): void => {
+    ws.current && ws.current.send(`0${Base64.encode(data)}`);
+  }, []);
+
+  React.useEffect(() => {
+    let unmounted: boolean;
+    const usedClient = flags[FLAGS.OPENSHIFT] ? 'oc' : 'kubectl';
+    const cmd = shcommand || ['sh', '-i', '-c', 'TERM=xterm sh'];
+    const subprotocols = (impersonate?.subprotocols || []).concat('base64.channel.k8s.io');
+
+    const urlOpts = {
+      ns: namespace,
+      name: podname,
+      path: 'exec',
+      queryParams: {
+        stdout: '1',
+        stdin: '1',
+        stderr: '1',
+        tty: '1',
+        container,
+        command: cmd.map((c) => encodeURIComponent(c)).join('&command='),
+      },
+    };
+
+    const path = resourceURL(PodModel, urlOpts);
+    const wsOpts = {
+      host: 'auto',
+      reconnect: true,
+      jsonParse: false,
+      path,
+      subprotocols,
+    };
+
+    const websocket: WSFactory = new WSFactory(`${podname}-terminal`, wsOpts);
+    let previous;
+
+    websocket
+      .onmessage((msg) => {
+        const currentTerminal = terminal.current;
+        // error channel
+        if (msg[0] === '3') {
+          if (previous.includes(NO_SH)) {
+            const errMsg = `This container doesn't have a /bin/sh shell. Try specifying your command in a terminal with:\r\n\r\n ${usedClient} -n ${namespace} exec ${podname} -ti <command>`;
+            currentTerminal && currentTerminal.reset();
+            currentTerminal && currentTerminal.onConnectionClosed(errMsg);
+            websocket.destroy();
+            previous = '';
+            return;
+          }
+        }
+        const data = Base64.decode(msg.slice(1));
+        currentTerminal && currentTerminal.onDataReceived(data);
+        previous = data;
+      })
+      .onopen(() => {
+        const currentTerminal = terminal.current;
+        currentTerminal && currentTerminal.reset();
+        previous = '';
+        if (!unmounted) setWsOpen(true);
+      })
+      .onclose((evt) => {
+        if (!evt || evt.wasClean === true) {
+          return;
+        }
+        const currentTerminal = terminal.current;
+        const error = evt.reason || 'The terminal connection has closed.';
+        currentTerminal && currentTerminal.onConnectionClosed(error);
+        websocket.destroy();
+        if (!unmounted) setWsError(error);
+      }) // eslint-disable-next-line no-console
+      .onerror((evt) => console.error(`WS error?! ${evt}`));
+
+    if (ws.current !== websocket) {
+      ws.current && ws.current.destroy();
+      ws.current = websocket;
+      const currentTerminal = terminal.current;
+      currentTerminal && currentTerminal.onConnectionClosed(`connecting to ${container}`);
+    }
+
+    return () => {
+      unmounted = true;
+      websocket.destroy();
+    };
+  }, [container, flags, impersonate, namespace, podname, shcommand]);
+
+  if (wsError) {
+    return <LoadError message={wsError} label="OpenShift command line terminal" canRetry={false} />;
+  }
+
+  if (wsOpen) {
+    return <Terminal onData={onData} ref={terminal} />;
+  }
+
+  return <TerminalLoadingBox />;
+};
+
+export default connect<StateProps>(impersonateStateToProps)(
+  connectToFlags<CloudShellExecProps & WithFlagsProps>(FLAGS.OPENSHIFT)(CloudShellExec),
+);
diff --git a/frontend/packages/console-app/src/components/cloud-shell/CloudShellTab.scss b/frontend/packages/console-app/src/components/cloud-shell/CloudShellTab.scss
index 944353fc43d..ee20bcc85bb 100644
--- a/frontend/packages/console-app/src/components/cloud-shell/CloudShellTab.scss
+++ b/frontend/packages/console-app/src/components/cloud-shell/CloudShellTab.scss
@@ -1,16 +1,19 @@
 .co-cloud-shell-tab {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  background-color: var(--pf-global--Color--dark-100);
+  &__body {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+  }
+
   &__header {
-    flex-shrink: 0;
-    min-height: var(--pf-global--target-size--MinHeight);
     background-color: var(--pf-global--palette--black-200);
-    display: flex;
     align-items: center;
+    display: flex;
+    flex-shrink: 0;
+    min-height: var(--pf-global--target-size--MinHeight);
     &-text {
       padding: 0 var(--pf-global--spacer--md);
     }
diff --git a/frontend/packages/console-app/src/components/cloud-shell/CloudShellTab.tsx b/frontend/packages/console-app/src/components/cloud-shell/CloudShellTab.tsx
index 7fa3c0df840..ad8c99a94e4 100644
--- a/frontend/packages/console-app/src/components/cloud-shell/CloudShellTab.tsx
+++ b/frontend/packages/console-app/src/components/cloud-shell/CloudShellTab.tsx
@@ -1,16 +1,18 @@
 import * as React from 'react';
+import { InlineTechPreviewBadge } from '@console/shared';
 import CloudShellTerminal from './CloudShellTerminal';
 import './CloudShellTab.scss';
-import { InlineTechPreviewBadge } from '@console/shared';
 
 const CloudShellTab: React.FC = () => (
-  <div className="co-cloud-shell-tab">
+  <>
     <div className="co-cloud-shell-tab__header">
       <div className="co-cloud-shell-tab__header-text">OpenShift command line terminal</div>
       <InlineTechPreviewBadge />
     </div>
-    <CloudShellTerminal />
-  </div>
+    <div className="co-cloud-shell-tab__body">
+      <CloudShellTerminal />
+    </div>
+  </>
 );
 
 export default CloudShellTab;
diff --git a/frontend/packages/console-app/src/components/cloud-shell/CloudShellTerminal.scss b/frontend/packages/console-app/src/components/cloud-shell/CloudShellTerminal.scss
new file mode 100644
index 00000000000..42ae1173750
--- /dev/null
+++ b/frontend/packages/console-app/src/components/cloud-shell/CloudShellTerminal.scss
@@ -0,0 +1,7 @@
+.co-cloudshell-terminal {
+  &__container {
+    background-color: #000;
+    color: var(--pf-global--Color--light-100);
+    height: 100%;
+  }
+}
diff --git a/frontend/packages/console-app/src/components/cloud-shell/CloudShellTerminal.tsx b/frontend/packages/console-app/src/components/cloud-shell/CloudShellTerminal.tsx
index ea697698dd1..e6a754deb3e 100644
--- a/frontend/packages/console-app/src/components/cloud-shell/CloudShellTerminal.tsx
+++ b/frontend/packages/console-app/src/components/cloud-shell/CloudShellTerminal.tsx
@@ -3,15 +3,19 @@ import { connect } from 'react-redux';
 import { RootState } from '@console/internal/redux';
 import { referenceForModel } from '@console/internal/module/k8s/k8s';
 import { useK8sWatchResource } from '@console/internal/components/utils/k8s-watch-hook';
-import { LoadingBox, StatusBox } from '@console/internal/components/utils/status-box';
+import { StatusBox, LoadError } from '@console/internal/components/utils/status-box';
 import { WorkspaceModel } from '../../models';
-import CloudShellTerminalFrame from './CloudShellTerminalFrame';
+import CloudshellExec from './CloudShellExec';
+import TerminalLoadingBox from './TerminalLoadingBox';
 import {
   CLOUD_SHELL_LABEL,
   CLOUD_SHELL_USER_ANNOTATION,
   CloudShellResource,
+  TerminalInitData,
+  initTerminal,
 } from './cloud-shell-utils';
 import CloudShellSetup from './setup/CloudShellSetup';
+import './CloudShellTerminal.scss';
 
 type StateProps = {
   username: string;
@@ -32,7 +36,40 @@ const resource = {
 };
 
 const CloudShellTerminal: React.FC<CloudShellTerminalProps> = ({ username, onCancel }) => {
-  const [data, loaded, loadError] = useK8sWatchResource<CloudShellResource>(resource);
+  const [data, loaded, loadError] = useK8sWatchResource<CloudShellResource[]>(resource);
+  const [initData, setInitData] = React.useState<TerminalInitData>();
+  const [initError, setInitError] = React.useState<string>();
+  let workspace: CloudShellResource;
+  let workspaceName: string;
+  let workspaceNamespace: string;
+  let workspacePhase: string;
+
+  if (Array.isArray(data)) {
+    workspace = data.find(
+      (ws) => ws?.metadata?.annotations?.[CLOUD_SHELL_USER_ANNOTATION] === username,
+    );
+    workspacePhase = workspace?.status?.phase;
+    workspaceName = workspace?.metadata?.name;
+    workspaceNamespace = workspace?.metadata?.namespace;
+  }
+
+  React.useEffect(() => {
+    let unmounted = false;
+
+    if (workspacePhase === 'Running') {
+      initTerminal(username, workspaceName, workspaceNamespace)
+        .then((res: TerminalInitData) => {
+          if (!unmounted) setInitData(res);
+        })
+        .catch(() => {
+          if (!unmounted) setInitError('Failed to connect to your OpenShift command line terminal');
+        });
+    }
+
+    return () => {
+      unmounted = true;
+    };
+  }, [username, workspaceName, workspaceNamespace, workspacePhase]);
 
   if (loadError) {
     return (
@@ -40,29 +77,39 @@ const CloudShellTerminal: React.FC<CloudShellTerminalProps> = ({ username, onCan
     );
   }
 
-  if (!loaded) {
-    return <LoadingBox />;
+  if (initError) {
+    return <LoadError message={initError} label="OpenShift command line terminal" />;
   }
 
-  if (Array.isArray(data)) {
-    const workspace = data.find(
-      (d) => d?.metadata?.annotations?.[CLOUD_SHELL_USER_ANNOTATION] === username,
+  if (!loaded || (workspaceName && !initData)) {
+    return (
+      <div className="co-cloudshell-terminal__container">
+        <TerminalLoadingBox />
+      </div>
+    );
+  }
+
+  if (initData && workspaceNamespace) {
+    return (
+      <div className="co-cloudshell-terminal__container">
+        <CloudshellExec
+          namespace={workspaceNamespace}
+          container={initData.container}
+          podname={initData.pod}
+          shcommand={initData.cmd || []}
+        />
+      </div>
     );
-    if (workspace) {
-      const running = workspace.status?.phase === 'Running';
-      const url = workspace.status?.ideUrl;
-      return <CloudShellTerminalFrame loading={!running} url={url} />;
-    }
   }
 
   return <CloudShellSetup onCancel={onCancel} />;
 };
 
+// For testing
+export const InternalCloudShellTerminal = CloudShellTerminal;
+
 const stateToProps = (state: RootState): StateProps => ({
   username: state.UI.get('user')?.metadata?.name || '',
 });
 
-// exposed for testing
-export const InternalCloudShellTerminal = CloudShellTerminal;
-
 export default connect(stateToProps)(CloudShellTerminal);
diff --git a/frontend/packages/console-app/src/components/cloud-shell/CloudShellTerminalFrame.scss b/frontend/packages/console-app/src/components/cloud-shell/CloudShellTerminalFrame.scss
deleted file mode 100644
index 19b3af9d863..00000000000
--- a/frontend/packages/console-app/src/components/cloud-shell/CloudShellTerminalFrame.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-.co-cloud-shell-terminal-frame {
-  // match color to iframe terminal page
-  background-color: #000;
-  width: 100%;
-  height: 100%;
-  color: var(--pf-global--Color--light-100);
-  overflow: hidden;
-  position: absolute;
-
-  & > iframe {
-    height: 100%;
-    width: 100%;
-    border: 0;
-  }
-}
diff --git a/frontend/packages/console-app/src/components/cloud-shell/CloudShellTerminalFrame.tsx b/frontend/packages/console-app/src/components/cloud-shell/CloudShellTerminalFrame.tsx
deleted file mode 100644
index d694d0a5c52..00000000000
--- a/frontend/packages/console-app/src/components/cloud-shell/CloudShellTerminalFrame.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as React from 'react';
-import { LoadingBox } from '@console/internal/components/utils/status-box';
-import './CloudShellTerminalFrame.scss';
-
-type CloudShellTerminalFrameProps = {
-  loading?: boolean;
-  url?: string;
-};
-
-const CloudShellTerminalFrame: React.FC<CloudShellTerminalFrameProps> = ({ loading, url }) => (
-  <div className="co-cloud-shell-terminal-frame">
-    {loading ? (
-      <LoadingBox message="Connecting to your OpenShift command line terminal…" />
-    ) : (
-      <iframe title="Command line terminal" src={url} />
-    )}
-  </div>
-);
-
-export default CloudShellTerminalFrame;
diff --git a/frontend/packages/console-app/src/components/cloud-shell/Terminal.scss b/frontend/packages/console-app/src/components/cloud-shell/Terminal.scss
new file mode 100644
index 00000000000..d69858136d2
--- /dev/null
+++ b/frontend/packages/console-app/src/components/cloud-shell/Terminal.scss
@@ -0,0 +1,8 @@
+.co-terminal {
+  height: 100%;
+
+  > .terminal {
+    height: 100%;
+  }
+}
+
diff --git a/frontend/packages/console-app/src/components/cloud-shell/Terminal.tsx b/frontend/packages/console-app/src/components/cloud-shell/Terminal.tsx
new file mode 100644
index 00000000000..db3dc9ff334
--- /dev/null
+++ b/frontend/packages/console-app/src/components/cloud-shell/Terminal.tsx
@@ -0,0 +1,84 @@
+import * as React from 'react';
+import { Terminal as XTerminal, ITerminalOptions } from 'xterm';
+import { fit } from 'xterm/lib/addons/fit/fit';
+
+import './Terminal.scss';
+
+const terminalOptions: ITerminalOptions = {
+  fontFamily: 'monospace',
+  fontSize: 16,
+  cursorBlink: false,
+  cols: 80,
+  rows: 25,
+};
+
+type TerminalProps = {
+  onData: (data: string) => void;
+};
+
+export type ImperativeTerminalType = {
+  focus: () => void;
+  reset: () => void;
+  onDataReceived: (data) => void;
+  onConnectionClosed: (msg: string) => void;
+};
+
+const Terminal = React.forwardRef<ImperativeTerminalType, TerminalProps>(({ onData }, ref) => {
+  const terminal = React.useRef<XTerminal>();
+  const terminalRef = React.useRef<HTMLDivElement>();
+
+  React.useEffect(() => {
+    const term: XTerminal = new XTerminal(terminalOptions);
+    term.open(terminalRef.current);
+    term.focus();
+
+    const resizeObserver: ResizeObserver = new ResizeObserver(() => {
+      window.requestAnimationFrame(() => fit(term));
+    });
+
+    resizeObserver.observe(terminalRef.current);
+
+    if (terminal.current !== term) {
+      terminal.current && terminal.current.destroy();
+      terminal.current = term;
+    }
+
+    return () => {
+      term.destroy();
+      resizeObserver.disconnect();
+    };
+  }, []);
+
+  React.useEffect(() => {
+    const term = terminal.current;
+    term.on('data', onData);
+
+    return () => {
+      term.off('data', onData);
+    };
+  }, [onData]);
+
+  React.useImperativeHandle(ref, () => ({
+    focus: () => {
+      terminal.current && terminal.current.focus();
+    },
+    reset: () => {
+      if (!terminal.current) return;
+      terminal.current.reset();
+      terminal.current.clear();
+      terminal.current.setOption('disableStdin', false);
+    },
+    onDataReceived: (data) => {
+      terminal.current && terminal.current.write(data);
+    },
+    onConnectionClosed: (msg) => {
+      if (!terminal.current) return;
+      terminal.current.write(`\x1b[31m${msg || 'disconnected'}\x1b[m\r\n`);
+      terminal.current.setOption('disableStdin', true);
+    },
+  }));
+
+  return <div className="co-terminal" ref={terminalRef} />;
+});
+
+export default Terminal;
diff --git a/frontend/packages/console-app/src/components/cloud-shell/TerminalLoadingBox.tsx b/frontend/packages/console-app/src/components/cloud-shell/TerminalLoadingBox.tsx
new file mode 100644
index 00000000000..8da3d7fa347
--- /dev/null
+++ b/frontend/packages/console-app/src/components/cloud-shell/TerminalLoadingBox.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { LoadingBox } from '@console/internal/components/utils/status-box';
+
+type TerminalLoadingBoxProps = {
+  message?: string;
+};
+
+const TerminalLoadingBox: React.FC<TerminalLoadingBoxProps> = ({ message }) => (
+  <LoadingBox message={message || 'Connecting to your OpenShift command line terminal ...'} />
+);
+
+export default TerminalLoadingBox;
diff --git a/frontend/packages/console-app/src/components/cloud-shell/__tests__/CloudShellTerminal.spec.tsx b/frontend/packages/console-app/src/components/cloud-shell/__tests__/CloudShellTerminal.spec.tsx
index 2e79c4a2bae..7293fa90c8f 100644
--- a/frontend/packages/console-app/src/components/cloud-shell/__tests__/CloudShellTerminal.spec.tsx
+++ b/frontend/packages/console-app/src/components/cloud-shell/__tests__/CloudShellTerminal.spec.tsx
@@ -1,11 +1,10 @@
 import * as React from 'react';
 import { shallow } from 'enzyme';
 import { useK8sWatchResource } from '@console/internal/components/utils/k8s-watch-hook';
-import { LoadingBox } from '@console/internal/components/utils/status-box';
+import { StatusBox } from '@console/internal/components/utils/status-box';
 import { InternalCloudShellTerminal } from '../CloudShellTerminal';
+import TerminalLoadingBox from '../TerminalLoadingBox';
 import CloudShellSetup from '../setup/CloudShellSetup';
-import { CLOUD_SHELL_USER_ANNOTATION } from '../cloud-shell-utils';
-import CloudShellTerminalFrame from '../CloudShellTerminalFrame';
 
 jest.mock('@console/internal/components/utils/k8s-watch-hook', () => ({
   useK8sWatchResource: jest.fn(),
@@ -15,29 +14,18 @@ describe('CloudShellTerminal', () => {
   it('should display loading box', () => {
     (useK8sWatchResource as jest.Mock).mockReturnValueOnce([null, false]);
     const wrapper = shallow(<InternalCloudShellTerminal username="user" />);
-    expect(wrapper.find(LoadingBox)).toHaveLength(1);
+    expect(wrapper.find(TerminalLoadingBox)).toHaveLength(1);
   });
 
-  it('should display form if loaded and no workspace', () => {
-    (useK8sWatchResource as jest.Mock).mockReturnValueOnce([[], true]);
+  it('should display error statusBox', () => {
+    (useK8sWatchResource as jest.Mock).mockReturnValueOnce([null, false, true]);
     const wrapper = shallow(<InternalCloudShellTerminal username="user" />);
-    expect(wrapper.find(CloudShellSetup)).toHaveLength(1);
+    expect(wrapper.find(StatusBox)).toHaveLength(1);
   });
 
-  it('should display terminal if loaded with matching workspace', () => {
-    (useK8sWatchResource as jest.Mock).mockReturnValueOnce([
-      [
-        {
-          metadata: { annotations: { [CLOUD_SHELL_USER_ANNOTATION]: 'user' } },
-          status: { phase: 'Running', ideUrl: 'testURL' },
-        },
-      ],
-      true,
-    ]);
+  it('should display form if loaded and no workspace', () => {
+    (useK8sWatchResource as jest.Mock).mockReturnValueOnce([[], true]);
     const wrapper = shallow(<InternalCloudShellTerminal username="user" />);
-    const frame = wrapper.find(CloudShellTerminalFrame);
-    expect(frame).toHaveLength(1);
-    expect(frame.props().loading).toBe(false);
-    expect(frame.props().url).toBe('testURL');
+    expect(wrapper.find(CloudShellSetup)).toHaveLength(1);
   });
 });
diff --git a/frontend/packages/console-app/src/components/cloud-shell/__tests__/CloudShellTerminalFrame.spec.tsx b/frontend/packages/console-app/src/components/cloud-shell/__tests__/CloudShellTerminalFrame.spec.tsx
deleted file mode 100644
index 84fd881b13a..00000000000
--- a/frontend/packages/console-app/src/components/cloud-shell/__tests__/CloudShellTerminalFrame.spec.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as React from 'react';
-import { shallow } from 'enzyme';
-import { LoadingBox } from '@console/internal/components/utils';
-import CloudShellTerminalFrame from '../CloudShellTerminalFrame';
-
-describe('CloudShellTerminalFrame', () => {
-  it('should render LoadingBox', () => {
-    const wrapper = shallow(<CloudShellTerminalFrame loading />);
-    expect(wrapper.find(LoadingBox).exists()).toBe(true);
-    expect(wrapper.find('iframe').exists()).toBe(false);
-
-    wrapper.setProps({ loading: false });
-    expect(wrapper.find(LoadingBox).exists()).toBe(false);
-  });
-
-  it('should render iframe', () => {
-    const wrapper = shallow(<CloudShellTerminalFrame url="test" />);
-    const iframe = wrapper.find('iframe');
-    expect(iframe.props().src).toBe('test');
-  });
-});
diff --git a/frontend/packages/console-app/src/components/cloud-shell/__tests__/TerminalLoadingBox.spec.tsx b/frontend/packages/console-app/src/components/cloud-shell/__tests__/TerminalLoadingBox.spec.tsx
new file mode 100644
index 00000000000..ac1b8b15814
--- /dev/null
+++ b/frontend/packages/console-app/src/components/cloud-shell/__tests__/TerminalLoadingBox.spec.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import { LoadingBox } from '@console/internal/components/utils/status-box';
+import TerminalLoadingBox from '../TerminalLoadingBox';
+
+describe('TerminalLoadingBox', () => {
+  it('should send default message if message prop is not there', () => {
+    const terminalLoadingWrapper = shallow(<TerminalLoadingBox />);
+    const loadingBox = terminalLoadingWrapper.find(LoadingBox);
+    expect(loadingBox.exists()).toBe(true);
+    expect(loadingBox.prop('message')).toEqual(
+      'Connecting to your OpenShift command line terminal ...',
+    );
+  });
+
+  it('should forward message prop to loading box component', () => {
+    const terminalLoadingWrapper = shallow(<TerminalLoadingBox message="test" />);
+    const loadingBox = terminalLoadingWrapper.find(LoadingBox);
+    expect(loadingBox.exists()).toBe(true);
+    expect(loadingBox.prop('message')).toEqual('test');
+  });
+});
diff --git a/frontend/packages/console-app/src/components/cloud-shell/cloud-shell-utils.ts b/frontend/packages/console-app/src/components/cloud-shell/cloud-shell-utils.ts
index 85286881366..401821fd65a 100644
--- a/frontend/packages/console-app/src/components/cloud-shell/cloud-shell-utils.ts
+++ b/frontend/packages/console-app/src/components/cloud-shell/cloud-shell-utils.ts
@@ -1,10 +1,12 @@
 import { K8sResourceKind } from '@console/internal/module/k8s';
 import { getRandomChars } from '@console/shared';
+import { coFetchJSON } from '@console/internal/co-fetch';
 
 type environment = {
   value: string;
   name: string;
 };
+
 type DevfileComponent = {
   type?: string;
   id?: string;
@@ -34,6 +36,8 @@ export type CloudShellResource = K8sResourceKind & {
   };
 };
 
+export type TerminalInitData = { pod: string; container: string; cmd: string[] };
+
 export const CLOUD_SHELL_LABEL = 'console.openshift.io/cloudshell';
 export const CLOUD_SHELL_USER_ANNOTATION = 'console.openshift.io/cloudshell-user';
 
@@ -59,21 +63,21 @@ export const newCloudShellWorkSpace = (
   spec: {
     started: true,
     devfile: {
-      apiVersion: '0.0.1',
+      apiVersion: '1.0.0',
       metadata: {
-        name: 'cloud-shell',
+        name,
       },
       components: [
         {
-          alias: 'cloud-shell',
+          alias: 'command-line-terminal',
           type: 'cheEditor',
-          id: 'eclipse/cloud-shell/nightly',
+          id: 'che-incubator/command-line-terminal/4.5.0',
         },
         {
           type: 'dockerimage',
           memoryLimit: '256Mi',
           alias: 'dev',
-          image: 'quay.io/eclipse/che-sidecar-openshift-connector:0.1.2-2601509',
+          image: 'registry.redhat.io/codeready-workspaces/plugin-openshift-rhel8:2.1',
           args: ['tail', '-f', '/dev/null'],
           env: [
             {
@@ -86,3 +90,18 @@ export const newCloudShellWorkSpace = (
     },
   },
 });
+
+export const initTerminal = (
+  username: string,
+  workspaceName: string,
+  workspaceNamespace: string,
+): Promise<TerminalInitData> => {
+  const url = `/api/terminal/${workspaceNamespace}/${workspaceName}/exec/init`;
+  const payload = {
+    kubeconfig: {
+      username,
+      namespace: workspaceNamespace,
+    },
+  };
+  return coFetchJSON.post(url, payload);
+};
diff --git a/frontend/packages/console-app/src/types/ResizeObserver.d.ts b/frontend/packages/console-app/src/types/ResizeObserver.d.ts
new file mode 100644
index 00000000000..69b7b022d1e
--- /dev/null
+++ b/frontend/packages/console-app/src/types/ResizeObserver.d.ts
@@ -0,0 +1,239 @@
+/**
+ * The **ResizeObserver** interface reports changes to the dimensions of an
+ * [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element)'s content
+ * or border box, or the bounding box of an
+ * [SVGElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGElement).
+ *
+ * > **Note**: The content box is the box in which content can be placed,
+ * > meaning the border box minus the padding and border width. The border box
+ * > encompasses the content, padding, and border. See
+ * > [The box model](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model)
+ * > for further explanation.
+ *
+ * `ResizeObserver` avoids infinite callback loops and cyclic dependencies that
+ * are often created when resizing via a callback function. It does this by only
+ * processing elements deeper in the DOM in subsequent frames. Implementations
+ * should, if they follow the specification, invoke resize events before paint
+ * and after layout.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver
+ */
+declare class ResizeObserver {
+  /**
+   * The **ResizeObserver** constructor creates a new `ResizeObserver` object,
+   * which can be used to report changes to the content or border box of an
+   * `Element` or the bounding box of an `SVGElement`.
+   *
+   * @example
+   * var ResizeObserver = new ResizeObserver(callback)
+   *
+   * @param callback
+   * The function called whenever an observed resize occurs. The function is
+   * called with two parameters:
+   * * **entries**
+   *   An array of
+   *   [ResizeObserverEntry](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry)
+   *   objects that can be used to access the new dimensions of the element
+   *   after each change.
+   * * **observer**
+   *   A reference to the `ResizeObserver` itself, so it will definitely be
+   *   accessible from inside the callback, should you need it. This could be
+   *   used for example to automatically unobserve the observer when a certain
+   *   condition is reached, but you can omit it if you don't need it.
+   *
+   * The callback will generally follow a pattern along the lines of:
+   * ```js
+   * function(entries, observer) {
+   *   for (let entry of entries) {
+   *     // Do something to each entry
+   *     // and possibly something to the observer itself
+   *   }
+   * }
+   * ```
+   *
+   * The following snippet is taken from the
+   * [resize-observer-text.html](https://mdn.github.io/dom-examples/resize-observer/resize-observer-text.html)
+   * ([see source](https://github.com/mdn/dom-examples/blob/master/resize-observer/resize-observer-text.html))
+   * example:
+   * @example
+   * const resizeObserver = new ResizeObserver(entries => {
+   *   for (let entry of entries) {
+   *     if(entry.contentBoxSize) {
+   *       h1Elem.style.fontSize = Math.max(1.5, entry.contentBoxSize.inlineSize/200) + 'rem';
+   *       pElem.style.fontSize = Math.max(1, entry.contentBoxSize.inlineSize/600) + 'rem';
+   *     } else {
+   *       h1Elem.style.fontSize = Math.max(1.5, entry.contentRect.width/200) + 'rem';
+   *       pElem.style.fontSize = Math.max(1, entry.contentRect.width/600) + 'rem';
+   *     }
+   *   }
+   * });
+   *
+   * resizeObserver.observe(divElem);
+   */
+  constructor(callback: ResizeObserverCallback);
+
+  /**
+   * The **disconnect()** method of the
+   * [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
+   * interface unobserves all observed
+   * [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) or
+   * [SVGElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGElement)
+   * targets.
+   */
+  disconnect: () => void;
+
+  /**
+   * The `observe()` method of the
+   * [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
+   * interface starts observing the specified
+   * [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) or
+   * [SVGElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGElement).
+   *
+   * @example
+   * resizeObserver.observe(target, options);
+   *
+   * @param target
+   * A reference to an
+   * [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) or
+   * [SVGElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGElement)
+   * to be observed.
+   *
+   * @param options
+   * An options object allowing you to set options for the observation.
+   * Currently this only has one possible option that can be set.
+   */
+  observe: (target: Element, options?: ResizeObserverObserveOptions) => void;
+
+  /**
+   * The **unobserve()** method of the
+   * [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
+   * interface ends the observing of a specified
+   * [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) or
+   * [SVGElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGElement).
+   */
+  unobserve: (target: Element) => void;
+}
+
+interface ResizeObserverObserveOptions {
+  /**
+   * Sets which box model the observer will observe changes to. Possible values
+   * are `content-box` (the default), and `border-box`.
+   *
+   * @default "content-box"
+   */
+  box?: 'content-box' | 'border-box';
+}
+
+/**
+ * The function called whenever an observed resize occurs. The function is
+ * called with two parameters:
+ *
+ * @param entries
+ * An array of
+ * [ResizeObserverEntry](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry)
+ * objects that can be used to access the new dimensions of the element after
+ * each change.
+ *
+ * @param observer
+ * A reference to the `ResizeObserver` itself, so it will definitely be
+ * accessible from inside the callback, should you need it. This could be used
+ * for example to automatically unobserve the observer when a certain condition
+ * is reached, but you can omit it if you don't need it.
+ *
+ * The callback will generally follow a pattern along the lines of:
+ * @example
+ * function(entries, observer) {
+ *   for (let entry of entries) {
+ *     // Do something to each entry
+ *     // and possibly something to the observer itself
+ *   }
+ * }
+ *
+ * @example
+ * const resizeObserver = new ResizeObserver(entries => {
+ *   for (let entry of entries) {
+ *     if(entry.contentBoxSize) {
+ *       h1Elem.style.fontSize = Math.max(1.5, entry.contentBoxSize.inlineSize/200) + 'rem';
+ *       pElem.style.fontSize = Math.max(1, entry.contentBoxSize.inlineSize/600) + 'rem';
+ *     } else {
+ *       h1Elem.style.fontSize = Math.max(1.5, entry.contentRect.width/200) + 'rem';
+ *       pElem.style.fontSize = Math.max(1, entry.contentRect.width/600) + 'rem';
+ *     }
+ *   }
+ * });
+ *
+ * resizeObserver.observe(divElem);
+ */
+type ResizeObserverCallback = (entries: ResizeObserverEntry[], observer: ResizeObserver) => void;
+
+/**
+ * The **ResizeObserverEntry** interface represents the object passed to the
+ * [ResizeObserver()](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/ResizeObserver)
+ * constructor's callback function, which allows you to access the new
+ * dimensions of the
+ * [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) or
+ * [SVGElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGElement)
+ * being observed.
+ */
+interface ResizeObserverEntry {
+  /**
+   * An object containing the new border box size of the observed element when
+   * the callback is run.
+   */
+  readonly borderBoxSize: ResizeObserverEntryBoxSize;
+
+  /**
+   * An object containing the new content box size of the observed element when
+   * the callback is run.
+   */
+  readonly contentBoxSize: ResizeObserverEntryBoxSize;
+
+  /**
+   * A [DOMRectReadOnly](https://developer.mozilla.org/en-US/docs/Web/API/DOMRectReadOnly)
+   * object containing the new size of the observed element when the callback is
+   * run. Note that this is better supported than the above two properties, but
+   * it is left over from an earlier implementation of the Resize Observer API,
+   * is still included in the spec for web compat reasons, and may be deprecated
+   * in future versions.
+   */
+  // node_modules/typescript/lib/lib.dom.d.ts
+  readonly contentRect: DOMRectReadOnly;
+
+  /**
+   * A reference to the
+   * [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) or
+   * [SVGElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGElement)
+   * being observed.
+   */
+  readonly target: Element;
+}
+
+/**
+ * The **borderBoxSize** read-only property of the
+ * [ResizeObserverEntry](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry)
+ * interface returns an object containing the new border box size of the
+ * observed element when the callback is run.
+ */
+interface ResizeObserverEntryBoxSize {
+  /**
+   * The length of the observed element's border box in the block dimension. For
+   * boxes with a horizontal
+   * [writing-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode),
+   * this is the vertical dimension, or height; if the writing-mode is vertical,
+   * this is the horizontal dimension, or width.
+   */
+  blockSize: number;
+
+  /**
+   * The length of the observed element's border box in the inline dimension.
+   * For boxes with a horizontal
+   * [writing-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode),
+   * this is the horizontal dimension, or width; if the writing-mode is
+   * vertical, this is the vertical dimension, or height.
+   */
+  inlineSize: number;
+}
+
+interface Window {
+  ResizeObserver: typeof ResizeObserver;
+}