diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html
index 567baa70a..717682a5a 100644
--- a/.storybook/preview-body.html
+++ b/.storybook/preview-body.html
@@ -1,6 +1,6 @@
 <script>
   window.platform = "JetBrains";
-  window.ide = "IntelliJ IDEA";
+  window.ide = "IDEA";
   window.theme;
   window.mainFont;
   window.codeFont;
diff --git a/public/images/gettingStartedVideoThumbnail_dark.png b/public/images/gettingStartedVideoThumbnail_dark.png
new file mode 100644
index 000000000..32ecd3085
Binary files /dev/null and b/public/images/gettingStartedVideoThumbnail_dark.png differ
diff --git a/public/images/gettingStartedVideoThumbnail_light.png b/public/images/gettingStartedVideoThumbnail_light.png
new file mode 100644
index 000000000..a1bd44228
Binary files /dev/null and b/public/images/gettingStartedVideoThumbnail_light.png differ
diff --git a/public/images/observabilityButton_dark.gif b/public/images/observabilityButton_dark.gif
deleted file mode 100644
index b1820b34b..000000000
Binary files a/public/images/observabilityButton_dark.gif and /dev/null differ
diff --git a/public/images/observabilityButton_light.gif b/public/images/observabilityButton_light.gif
deleted file mode 100644
index 5d386766a..000000000
Binary files a/public/images/observabilityButton_light.gif and /dev/null differ
diff --git a/src/components/InstallationWizard/FinishStep/index.tsx b/src/components/InstallationWizard/FinishStep/index.tsx
index 3765d562b..db04bd429 100644
--- a/src/components/InstallationWizard/FinishStep/index.tsx
+++ b/src/components/InstallationWizard/FinishStep/index.tsx
@@ -1,20 +1,19 @@
 import { DefaultTheme, useTheme } from "styled-components";
 import { getThemeKind } from "../../common/App/styles";
 import { GearIcon } from "../../common/icons/GearIcon";
-import { LightBulbIcon } from "../../common/icons/LightBulbIcon";
-import { OpenTelemetryLogoIcon } from "../../common/icons/OpenTelemetryLogoIcon";
+import { PlayCircleIcon } from "../../common/icons/PlayCircleIcon";
 import { PlayIcon } from "../../common/icons/PlayIcon";
 import { Link } from "../styles";
 import * as s from "./styles";
 import { FinishStepProps } from "./types";
 
-const getTipIconColor = (theme: DefaultTheme): string => {
+const getPlayIconColor = (theme: DefaultTheme) => {
   switch (theme.mode) {
     case "light":
-      return "#788ca9";
+      return "#3538cd";
     case "dark":
     case "dark-jetbrains":
-      return "#b9c2eb";
+      return "#dadada";
   }
 };
 
@@ -50,25 +49,25 @@ export const FinishStep = (props: FinishStepProps) => {
       <s.IllustrationContainer>
         <s.RunOrDebugIllustration src={`/images/runOrDebug_${themeKind}.gif`} />
       </s.IllustrationContainer>
-      <s.SectionTitle icon={OpenTelemetryLogoIcon}>
-        Observability Panel
-      </s.SectionTitle>
+      <s.SectionTitle>Getting Started</s.SectionTitle>
       <s.SectionDescription>
-        You&apos;ll be able to see the results in the observability panel below,
-        you can open it by clicking on the &quot;Telescope&quot;.
+        We&apos;ve prepared a short video to show you the ropes on getting
+        started analyzing your code with Digma.
       </s.SectionDescription>
-      <s.IllustrationContainer>
-        <s.ObservabilityPanelIllustration
-          src={`/images/observabilityPanel_${themeKind}.gif`}
-        />
-      </s.IllustrationContainer>
-      <s.TipContainer>
-        <s.TipIconContainer>
-          <LightBulbIcon size={16} color={getTipIconColor(theme)} />
-        </s.TipIconContainer>
-        More and more information about your code will continue to appear as you
-        perform more actions.
-      </s.TipContainer>
+      <Link
+        href={"https://www.youtube.com/watch?v=jzBEXfCrnlg"}
+        target={"_blank"}
+        rel={"noopener noreferrer"}
+      >
+        <s.IllustrationContainer>
+          <s.PlayIconContainer>
+            <PlayCircleIcon size={32} color={getPlayIconColor(theme)} />
+          </s.PlayIconContainer>
+          <s.GettingStartedVideoThumbnail
+            src={`/images/gettingStartedVideoThumbnail_${themeKind}.png`}
+          />
+        </s.IllustrationContainer>
+      </Link>
     </s.Container>
   );
 };
diff --git a/src/components/InstallationWizard/FinishStep/styles.ts b/src/components/InstallationWizard/FinishStep/styles.ts
index c6774449d..b43285ae8 100644
--- a/src/components/InstallationWizard/FinishStep/styles.ts
+++ b/src/components/InstallationWizard/FinishStep/styles.ts
@@ -22,36 +22,24 @@ export const SectionDescription = styled(CommonSectionDescription)`
 
 export const IllustrationContainer = styled(CommonIllustrationContainer)`
   margin: 0 0 12px;
+  position: relative;
 `;
 
-export const ObservabilityPanelIllustration = styled.img`
+export const PlayIconContainer = styled.div`
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  height: 32px;
+  width: 32px;
+`;
+
+export const GettingStartedVideoThumbnail = styled.img`
   width: 100%;
 `;
 
 export const RunOrDebugIllustration = styled.img`
   width: 206px;
 `;
-
-export const TipContainer = styled.div`
-  display: flex;
-  flex-shrink: 0;
-  gap: 4px;
-  font-weight: 500;
-  font-size: 12px;
-  margin-top: 8px;
-
-  color: ${({ theme }) => {
-    switch (theme.mode) {
-      case "light":
-        return "#788ca9";
-      case "dark":
-      case "dark-jetbrains":
-        return "#b9c2eb";
-    }
-  }};
-`;
-
-export const TipIconContainer = styled.div`
-  display: flex;
-  flex-shrink: 0;
-`;
diff --git a/src/components/InstallationWizard/InstallationTypeButton/index.tsx b/src/components/InstallationWizard/InstallationTypeButton/index.tsx
new file mode 100644
index 000000000..88d63e2a5
--- /dev/null
+++ b/src/components/InstallationWizard/InstallationTypeButton/index.tsx
@@ -0,0 +1,22 @@
+import * as s from "./styles";
+import { InstallationTypeButtonProps } from "./types";
+
+export const InstallationTypeButton = (props: InstallationTypeButtonProps) => {
+  const handleClick = () => {
+    props.onClick(props.installationType);
+  };
+
+  return (
+    <s.InstallationTypeButton onClick={handleClick} disabled={props.disabled}>
+      <s.InstallationTypeButtonIconContainer disabled={props.disabled}>
+        {props.icon}
+      </s.InstallationTypeButtonIconContainer>
+      <s.InstallationTypeButtonTextContainer>
+        <s.InstallationTypeButtonTitle disabled={props.disabled}>
+          {props.title}
+        </s.InstallationTypeButtonTitle>
+        {props.description}
+      </s.InstallationTypeButtonTextContainer>
+    </s.InstallationTypeButton>
+  );
+};
diff --git a/src/components/InstallationWizard/InstallationTypeButton/styles.ts b/src/components/InstallationWizard/InstallationTypeButton/styles.ts
new file mode 100644
index 000000000..2602261cd
--- /dev/null
+++ b/src/components/InstallationWizard/InstallationTypeButton/styles.ts
@@ -0,0 +1,136 @@
+import styled from "styled-components";
+import { InstallationTypeButtonElementProps } from "./types";
+
+export const InstallationTypeButton = styled.button`
+  display: flex;
+  padding: 12px;
+  gap: 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  line-height: 14px;
+  border: 1px solid transparent;
+
+  color: ${({ theme }) => {
+    switch (theme.mode) {
+      case "light":
+        return "#828797";
+      case "dark":
+      case "dark-jetbrains":
+        return "#9b9b9b";
+    }
+  }};
+
+  background: ${({ theme }) => {
+    switch (theme.mode) {
+      case "light":
+        return "#f1f5fa";
+      case "dark":
+      case "dark-jetbrains":
+        return "#2e2e2e";
+    }
+  }};
+
+  &:hover {
+    border: 1px solid
+      ${({ theme, disabled }) => {
+        if (disabled) {
+          return "transparent";
+        }
+
+        switch (theme.mode) {
+          case "light":
+            return "#b9c2eb";
+          case "dark":
+          case "dark-jetbrains":
+            return "#49494d";
+        }
+      }};
+  }
+
+  &:active {
+    border: 1px solid
+      ${({ theme, disabled }) => {
+        if (disabled) {
+          return "transparent";
+        }
+
+        switch (theme.mode) {
+          case "light":
+            return "#7891d0";
+          case "dark":
+          case "dark-jetbrains":
+            return "#7c7c94";
+        }
+      }};
+  }
+
+  &:disabled {
+    color: ${({ theme }) => {
+      switch (theme.mode) {
+        case "light":
+          return "#b9c0d4";
+        case "dark":
+        case "dark-jetbrains":
+          return "#9b9b9b";
+      }
+    }};
+  }
+`;
+
+export const InstallationTypeButtonIconContainer = styled.span<InstallationTypeButtonElementProps>`
+  display: flex;
+  flex-shrink: 0;
+  height: 72px;
+  width: 72px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+
+  background: ${({ theme }) => {
+    switch (theme.mode) {
+      case "light":
+        return "#fbfdff";
+      case "dark":
+      case "dark-jetbrains":
+        return "#3c3c3c";
+    }
+  }};
+
+  ${({ disabled }) => (disabled ? "opacity: 0.5;" : "")}
+`;
+
+export const InstallationTypeButtonTextContainer = styled.span`
+  display: flex;
+  flex-direction: column;
+  text-align: start;
+`;
+
+export const InstallationTypeButtonTitle = styled.span<InstallationTypeButtonElementProps>`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 16px;
+  margin-bottom: 8px;
+
+  color: ${({ disabled, theme }) => {
+    if (disabled) {
+      switch (theme.mode) {
+        case "light":
+          return "#b9c0d4";
+        case "dark":
+        case "dark-jetbrains":
+          return "#9b9b9b";
+      }
+    }
+
+    switch (theme.mode) {
+      case "light":
+        return "#4d668a";
+      case "dark":
+      case "dark-jetbrains":
+        return "#fff";
+    }
+  }};
+`;
diff --git a/src/components/InstallationWizard/InstallationTypeButton/types.ts b/src/components/InstallationWizard/InstallationTypeButton/types.ts
new file mode 100644
index 000000000..234d79e6b
--- /dev/null
+++ b/src/components/InstallationWizard/InstallationTypeButton/types.ts
@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+import { InstallationType } from "../types";
+
+export type InstallationTypeButtonProps = {
+  disabled?: boolean;
+  installationType: InstallationType;
+  icon: ReactNode;
+  title: ReactNode;
+  description: ReactNode;
+  onClick: (installationType: InstallationType) => void;
+};
+
+export type InstallationTypeButtonElementProps = {
+  disabled?: boolean;
+};
diff --git a/src/components/InstallationWizard/ObservabilityStep/index.tsx b/src/components/InstallationWizard/ObservabilityStep/index.tsx
index 1ff0dcfdd..3c48f41e0 100644
--- a/src/components/InstallationWizard/ObservabilityStep/index.tsx
+++ b/src/components/InstallationWizard/ObservabilityStep/index.tsx
@@ -2,11 +2,11 @@ import { useState } from "react";
 import { useTheme } from "styled-components";
 import { getThemeKind } from "../../common/App/styles";
 import { Loader } from "../../common/Loader";
-import { ToggleSwitch } from "../../common/ToggleSwitch";
 import { OpenTelemetryLogoIcon } from "../../common/icons/OpenTelemetryLogoIcon";
 import { CodeSnippet } from "../CodeSnippet";
 import { SectionTitle } from "../SectionTitle";
-import { Link, MainButton, SectionDescription } from "../styles";
+import { Tip } from "../Tip";
+import { Link, MainButton } from "../styles";
 import * as s from "./styles";
 import { ObservabilityStepProps } from "./types";
 
@@ -38,7 +38,7 @@ export const ObservabilityStep = (props: ObservabilityStepProps) => {
     setIsCollectorModified(true);
   };
 
-  const handleObservabilityContainerClick = () => {
+  const handleObservabilityToggleSwitch = () => {
     props.onObservabilityChange(!props.isObservabilityEnabled);
   };
 
@@ -74,7 +74,7 @@ export const ObservabilityStep = (props: ObservabilityStepProps) => {
   ) : (
     <s.Container>
       <SectionTitle>How to get started?</SectionTitle>
-      <s.ObservabilityContainer onClick={handleObservabilityContainerClick}>
+      <s.ObservabilityContainer>
         <OpenTelemetryLogoIcon size={32} />
         <s.ObservabilityTitle>
           Observe your application in one click
@@ -85,9 +85,11 @@ export const ObservabilityStep = (props: ObservabilityStepProps) => {
           </span>
           <span>You can just toggle observability on now to get started</span>
           <s.ObservabilityToggleSwitchContainer>
-            <ToggleSwitch
+            <s.ObservabilityToggleSwitch
+              onChange={handleObservabilityToggleSwitch}
               checked={props.isObservabilityEnabled}
               label={"Click here"}
+              size={"large"}
             />
           </s.ObservabilityToggleSwitchContainer>
         </s.ObservabilityDescription>
@@ -99,15 +101,10 @@ export const ObservabilityStep = (props: ObservabilityStepProps) => {
           </s.CongratulationsTextContainer>
         )}
       </s.ObservabilityContainer>
-      <SectionDescription>
-        You can always expand the Digma side panel and open the Settings menu as
-        seen bellow
-      </SectionDescription>
-      <s.IllustrationContainer>
-        <s.ObservabilityButtonIllustration
-          src={`/images/observabilityButton_${themeKind}.gif`}
-        />
-      </s.IllustrationContainer>
+      <Tip>
+        You can always expand the Digma side panel and open the settings menu to
+        toggle observability on/off later
+      </Tip>
       <s.StepFooter>
         <MainButton onClick={handleNextButtonClick}>Next</MainButton>
         <Link onClick={handleAlreadyUsingOTELLinkClick}>
diff --git a/src/components/InstallationWizard/ObservabilityStep/styles.ts b/src/components/InstallationWizard/ObservabilityStep/styles.ts
index 3305912d6..f1c54c477 100644
--- a/src/components/InstallationWizard/ObservabilityStep/styles.ts
+++ b/src/components/InstallationWizard/ObservabilityStep/styles.ts
@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import { ToggleSwitch } from "../../common/ToggleSwitch";
 import * as s from "../styles";
 
 export const Container = styled.div`
@@ -17,29 +18,6 @@ export const ObservabilityContainer = styled.div`
   gap: 12px;
   align-items: center;
   justify-content: center;
-  user-select: none;
-  cursor: pointer;
-
-  background: ${({ theme }) => {
-    switch (theme.mode) {
-      case "light":
-        return "#e5eaf1";
-      case "dark":
-      case "dark-jetbrains":
-        return "#303031";
-    }
-  }};
-
-  border: 1px solid
-    ${({ theme }) => {
-      switch (theme.mode) {
-        case "light":
-          return "#7891d0";
-        case "dark":
-        case "dark-jetbrains":
-          return "#9b9b9b";
-      }
-    }};
 `;
 
 export const ObservabilityTitle = styled.span`
@@ -79,11 +57,23 @@ export const ObservabilityDescription = styled.div`
 `;
 
 export const ObservabilityToggleSwitchContainer = styled.div`
-  padding-top: 12px;
+  padding: 32px 0 12px;
   display: flex;
   justify-content: center;
 `;
 
+export const ObservabilityToggleSwitch = styled(ToggleSwitch)`
+  color: ${({ theme }) => {
+    switch (theme.mode) {
+      case "light":
+        return "#426dda";
+      case "dark":
+      case "dark-jetbrains":
+        return "#7891d0";
+    }
+  }};
+`;
+
 export const CongratulationsTextContainer = styled.div`
   display: flex;
   align-items: center;
diff --git a/src/components/InstallationWizard/SectionTitle/index.tsx b/src/components/InstallationWizard/SectionTitle/index.tsx
index 1fec48cd6..41e8566c8 100644
--- a/src/components/InstallationWizard/SectionTitle/index.tsx
+++ b/src/components/InstallationWizard/SectionTitle/index.tsx
@@ -17,9 +17,11 @@ export const SectionTitle = (props: SectionTitleProps) => {
 
   return (
     <s.Container className={props.className}>
-      <s.IconContainer>
-        {props.icon && <props.icon size={16} color={getIconColor(theme)} />}
-      </s.IconContainer>
+      {props.icon && (
+        <s.IconContainer>
+          <props.icon size={16} color={getIconColor(theme)} />
+        </s.IconContainer>
+      )}
       {props.children}
     </s.Container>
   );
diff --git a/src/components/InstallationWizard/Step/index.tsx b/src/components/InstallationWizard/Step/index.tsx
index 9ca1a99a5..32f0182a4 100644
--- a/src/components/InstallationWizard/Step/index.tsx
+++ b/src/components/InstallationWizard/Step/index.tsx
@@ -7,7 +7,6 @@ import * as s from "./styles";
 import { StepProps } from "./types";
 
 const TRANSITION_CLASS_NAME = "step";
-const SKIP_LINK_TRANSITION_CLASS_NAME = "skip-link";
 const NUMBER_TRANSITION_CLASS_NAME = "number-link";
 const DEFAULT_TRANSITION_DURATION = 300; // in milliseconds
 
@@ -20,15 +19,10 @@ export const Step = (props: StepProps) => {
       : DEFAULT_TRANSITION_DURATION;
 
   const containerRef = useRef<HTMLDivElement>(null);
-  const skipLinkRef = useRef<HTMLAnchorElement>(null);
   const numberRef = useRef<HTMLSpanElement>(null);
 
   const { observe, height } = useDimensions();
 
-  const handleSkipLinkClick = () => {
-    props.onSkip();
-  };
-
   const handleHeaderClick = () => {
     if (props.status === "completed") {
       props.onGoToStep(props.stepIndex);
@@ -83,25 +77,7 @@ export const Step = (props: StepProps) => {
                 </s.Number>
               </CSSTransition>
             </s.NumberContainer>
-
             {props.data.title}
-            <CSSTransition
-              in={isActive}
-              timeout={transitionDuration}
-              classNames={SKIP_LINK_TRANSITION_CLASS_NAME}
-              nodeRef={skipLinkRef}
-              mountOnEnter={true}
-              unmountOnExit={true}
-            >
-              <s.SkipLink
-                ref={skipLinkRef}
-                onClick={handleSkipLinkClick}
-                transitionClassName={SKIP_LINK_TRANSITION_CLASS_NAME}
-                transitionDuration={transitionDuration}
-              >
-                Skip for now
-              </s.SkipLink>
-            </CSSTransition>
           </s.Header>
           <s.Content ref={observe}>{props.data.content}</s.Content>
         </s.ContentContainer>
diff --git a/src/components/InstallationWizard/Step/styles.ts b/src/components/InstallationWizard/Step/styles.ts
index 48b34a3a6..8d05236e5 100644
--- a/src/components/InstallationWizard/Step/styles.ts
+++ b/src/components/InstallationWizard/Step/styles.ts
@@ -1,11 +1,9 @@
 import styled, { DefaultTheme } from "styled-components";
-import { Link } from "../styles";
 import {
   ContainerProps,
   HeaderProps,
   NumberContainerProps,
-  NumberProps,
-  TransitionProps
+  NumberProps
 } from "./types";
 
 const HEADER_HEIGHT = 40; // in pixels;
@@ -43,34 +41,6 @@ export const Container = styled.div<ContainerProps>`
   overflow: hidden;
 `;
 
-export const SkipLink = styled(Link)<TransitionProps>`
-  padding: 2px 4px;
-  font-weight: 400;
-  margin-left: auto;
-
-  ${({ transitionClassName, transitionDuration }) => {
-    return `
-      &.${transitionClassName}-enter {
-        opacity: 0;
-      }
-      
-      &.${transitionClassName}-enter-active {
-        opacity: 1;
-        transition: opacity ${transitionDuration}ms ease-out;
-      }
-
-      &.${transitionClassName}-exit {
-        opacity: 1;
-      }
-
-      &.${transitionClassName}-exit-active {
-        opacity: 0;
-        transition: opacity ${transitionDuration}ms ease-out;
-      }
-      `;
-  }}
-`;
-
 export const Header = styled.div<HeaderProps>`
   display: flex;
   gap: 4px;
diff --git a/src/components/InstallationWizard/Step/types.ts b/src/components/InstallationWizard/Step/types.ts
index daea9e69f..c07444c45 100644
--- a/src/components/InstallationWizard/Step/types.ts
+++ b/src/components/InstallationWizard/Step/types.ts
@@ -17,7 +17,6 @@ export interface StepProps {
   stepIndex: number;
   status: StepStatus;
   transitionDuration?: number;
-  onSkip: () => void;
   onGoToStep: (stepIndex: number) => void;
 }
 
diff --git a/src/components/InstallationWizard/Tip/index.tsx b/src/components/InstallationWizard/Tip/index.tsx
new file mode 100644
index 000000000..92847ec3d
--- /dev/null
+++ b/src/components/InstallationWizard/Tip/index.tsx
@@ -0,0 +1,27 @@
+import { DefaultTheme, useTheme } from "styled-components";
+import { LightBulbIcon } from "../../common/icons/LightBulbIcon";
+import * as s from "./styles";
+import { TipProps } from "./types";
+
+const getTipIconColor = (theme: DefaultTheme): string => {
+  switch (theme.mode) {
+    case "light":
+      return "#788ca9";
+    case "dark":
+    case "dark-jetbrains":
+      return "#b9c2eb";
+  }
+};
+
+export const Tip = (props: TipProps) => {
+  const theme = useTheme();
+
+  return (
+    <s.TipContainer>
+      <s.TipIconContainer>
+        <LightBulbIcon size={16} color={getTipIconColor(theme)} />
+      </s.TipIconContainer>
+      {props.children}
+    </s.TipContainer>
+  );
+};
diff --git a/src/components/InstallationWizard/Tip/styles.ts b/src/components/InstallationWizard/Tip/styles.ts
new file mode 100644
index 000000000..86f455ec8
--- /dev/null
+++ b/src/components/InstallationWizard/Tip/styles.ts
@@ -0,0 +1,25 @@
+import styled from "styled-components";
+
+export const TipContainer = styled.div`
+  display: flex;
+  flex-shrink: 0;
+  gap: 4px;
+  font-weight: 500;
+  font-size: 12px;
+  margin-top: 8px;
+
+  color: ${({ theme }) => {
+    switch (theme.mode) {
+      case "light":
+        return "#788ca9";
+      case "dark":
+      case "dark-jetbrains":
+        return "#b9c2eb";
+    }
+  }};
+`;
+
+export const TipIconContainer = styled.div`
+  display: flex;
+  flex-shrink: 0;
+`;
diff --git a/src/components/InstallationWizard/Tip/types.ts b/src/components/InstallationWizard/Tip/types.ts
new file mode 100644
index 000000000..3c560c4d3
--- /dev/null
+++ b/src/components/InstallationWizard/Tip/types.ts
@@ -0,0 +1,5 @@
+import { ReactNode } from "react";
+
+export interface TipProps {
+  children: ReactNode;
+}
diff --git a/src/components/InstallationWizard/index.tsx b/src/components/InstallationWizard/index.tsx
index bb5bd5c87..22e861509 100644
--- a/src/components/InstallationWizard/index.tsx
+++ b/src/components/InstallationWizard/index.tsx
@@ -1,18 +1,28 @@
 import { useEffect, useRef, useState } from "react";
 import { CSSTransition } from "react-transition-group";
+import { useTheme } from "styled-components";
 import { dispatcher } from "../../dispatcher";
 import { IDE } from "../../globals";
 import { usePrevious } from "../../hooks/usePrevious";
 import { ide } from "../../platform";
 import { addPrefix } from "../../utils/addPrefix";
 import { actions as globalActions } from "../common/App";
+import { getThemeKind } from "../common/App/styles";
+import { CloudDownloadIcon } from "../common/icons/CloudDownloadIcon";
+import { DigmaGreetingIcon } from "../common/icons/DigmaGreetingIcon";
+import { OpenTelemetryDisplayIcon } from "../common/icons/OpenTelemetryDisplayIcon";
 import { FinishStep } from "./FinishStep";
 import { InstallStep } from "./InstallStep";
+import { InstallationTypeButton } from "./InstallationTypeButton";
 import { ObservabilityStep } from "./ObservabilityStep";
 import { Step } from "./Step";
 import { StepData, StepStatus } from "./Step/types";
 import * as s from "./styles";
-import { ConnectionCheckResultData, ConnectionCheckStatus } from "./types";
+import {
+  ConnectionCheckResultData,
+  ConnectionCheckStatus,
+  InstallationType
+} from "./types";
 
 const ACTION_PREFIX = "INSTALLATION_WIZARD";
 
@@ -57,6 +67,12 @@ const TRANSITION_DURATION = 300; // in milliseconds
 
 const firstStep = window.wizardSkipInstallationStep === true ? 1 : 0;
 
+// TO DO:
+// add environment variable for presetting the correct installation type
+// if Digma already installed
+const preselectedInstallationType =
+  window.wizardSkipInstallationStep === true ? "local" : undefined;
+
 const getStepStatus = (index: number, currentStep: number): StepStatus => {
   if (index < currentStep) {
     return "completed";
@@ -78,6 +94,11 @@ export const InstallationWizard = () => {
   const [connectionCheckStatus, setConnectionCheckStatus] =
     useState<ConnectionCheckStatus>();
   const footerContentRef = useRef<HTMLDivElement>(null);
+  const [installationType, setInstallationType] = useState<
+    InstallationType | undefined
+  >(preselectedInstallationType);
+  const theme = useTheme();
+  const themeKind = getThemeKind(theme);
 
   useEffect(() => {
     if (previousStep === 0 && currentStep === 1) {
@@ -180,22 +201,18 @@ export const InstallationWizard = () => {
     setCurrentStep(currentStep + 1);
   };
 
-  const handleSkipStep = () => {
-    if (currentStep < steps.length - 1) {
-      setCurrentStep(currentStep + 1);
-    } else {
-      window.sendMessageToDigma({
-        action: actions.FINISH
-      });
-    }
-  };
-
   const handleGoToStep = (stepIndex: number) => {
     if (stepIndex < currentStep) {
       setCurrentStep(stepIndex);
     }
   };
 
+  const handleInstallationTypeButtonClick = (
+    installationType: InstallationType
+  ) => {
+    setInstallationType(installationType);
+  };
+
   const handleFinishButtonClick = () => {
     window.sendMessageToDigma({
       action: actions.FINISH
@@ -244,42 +261,101 @@ export const InstallationWizard = () => {
 
   return (
     <s.Container>
-      <s.Header>
-        <s.HeaderTitle>Install Digma</s.HeaderTitle>
-        <s.HeaderSubtitle>
-          Follow the steps to configure your projects
-        </s.HeaderSubtitle>
-      </s.Header>
+      {installationType ? (
+        <s.Header>
+          <s.HeaderTitle>Install Digma</s.HeaderTitle>
+          <s.HeaderSubtitle>
+            Follow the steps to configure your projects
+          </s.HeaderSubtitle>
+        </s.Header>
+      ) : (
+        <s.WelcomeContainer>
+          <s.WelcomeTitleContainer>
+            <s.WelcomeIconContainer>
+              <DigmaGreetingIcon themeKind={themeKind} />
+            </s.WelcomeIconContainer>
+            <s.WelcomeTitle>Welcome to Digma!</s.WelcomeTitle>
+          </s.WelcomeTitleContainer>
+          <s.WelcomeText>
+            Digma is an IDE plugin for analyzing code runtime data. It enables
+            rapid development in complex projects by linting and detecting
+            issues as they appear, highlighting possible risks in code and
+            providing code change analysis and context
+          </s.WelcomeText>
+          <s.InstallationTypeText>
+            Select installation type:
+          </s.InstallationTypeText>
+          <s.InstallationTypeButtonsContainer>
+            <InstallationTypeButton
+              key={"local"}
+              installationType={"local"}
+              onClick={handleInstallationTypeButtonClick}
+              icon={
+                <OpenTelemetryDisplayIcon themeKind={themeKind} height={43} />
+              }
+              title={<>Local Install Only</>}
+              description={
+                <>
+                  <span>Digma will be installed locally</span>
+                  <span>
+                    All observability data will be saved on the local machine
+                    only
+                  </span>
+                </>
+              }
+            />
+            <InstallationTypeButton
+              key={"cloud"}
+              installationType={"cloud"}
+              onClick={handleInstallationTypeButtonClick}
+              icon={<CloudDownloadIcon themeKind={themeKind} height={43} />}
+              title={
+                <>
+                  Use Digma Cloud
+                  <s.Badge>Coming Soon</s.Badge>
+                </>
+              }
+              description={
+                <>Data will be sent anonymously to Digma for processing</>
+              }
+              disabled={true}
+            />
+          </s.InstallationTypeButtonsContainer>
+        </s.WelcomeContainer>
+      )}
       {steps.map((step, i) => (
         <Step
           key={step.title}
-          onSkip={handleSkipStep}
           onGoToStep={handleGoToStep}
           data={step}
           stepIndex={i}
-          status={getStepStatus(i, currentStep)}
+          status={
+            installationType ? getStepStatus(i, currentStep) : "not-completed"
+          }
           transitionDuration={TRANSITION_DURATION}
         />
       ))}
-      <s.Footer>
-        <CSSTransition
-          in={currentStep === steps.length - 1}
-          timeout={TRANSITION_DURATION}
-          classNames={footerTransitionClassName}
-          nodeRef={footerContentRef}
-          mountOnEnter={true}
-        >
-          <s.FooterContent
-            ref={footerContentRef}
-            transitionClassName={footerTransitionClassName}
-            transitionDuration={TRANSITION_DURATION}
+      {installationType && (
+        <s.Footer>
+          <CSSTransition
+            in={currentStep === steps.length - 1}
+            timeout={TRANSITION_DURATION}
+            classNames={footerTransitionClassName}
+            nodeRef={footerContentRef}
+            mountOnEnter={true}
           >
-            <s.MainButton onClick={handleFinishButtonClick}>
-              Finish
-            </s.MainButton>
-          </s.FooterContent>
-        </CSSTransition>
-      </s.Footer>
+            <s.FooterContent
+              ref={footerContentRef}
+              transitionClassName={footerTransitionClassName}
+              transitionDuration={TRANSITION_DURATION}
+            >
+              <s.MainButton onClick={handleFinishButtonClick}>
+                Finish
+              </s.MainButton>
+            </s.FooterContent>
+          </CSSTransition>
+        </s.Footer>
+      )}
     </s.Container>
   );
 };
diff --git a/src/components/InstallationWizard/styles.ts b/src/components/InstallationWizard/styles.ts
index 5db398528..7323812f2 100644
--- a/src/components/InstallationWizard/styles.ts
+++ b/src/components/InstallationWizard/styles.ts
@@ -77,6 +77,7 @@ export const HeaderSubtitle = styled.span`
 export const Link = styled(CommonLink)`
   font-size: 12px;
   line-height: 14px;
+  width: max-content;
 `;
 
 export const Footer = styled.div`
@@ -159,3 +160,93 @@ export const MainButton = styled(Button)`
   line-height: 14px;
   width: 100%;
 `;
+
+export const WelcomeContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 20px 16px;
+  margin-bottom: auto;
+`;
+
+export const WelcomeTitleContainer = styled.div`
+  display: flex;
+  gap: 4px;
+  align-items: center;
+`;
+
+export const WelcomeIconContainer = styled.div`
+  height: 40px;
+`;
+
+export const WelcomeTitle = styled.span`
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 16px;
+
+  color: ${({ theme }) => {
+    switch (theme.mode) {
+      case "light":
+        return "#4d668a";
+      case "dark":
+      case "dark-jetbrains":
+        return "#fff";
+    }
+  }};
+`;
+
+export const WelcomeText = styled.span`
+  font-size: 12px;
+  line-height: 14px;
+  text-align: center;
+  letter-spacing: -0.1px;
+  padding: 20px 0;
+
+  color: ${({ theme }) => {
+    switch (theme.mode) {
+      case "light":
+        return "#828797";
+      case "dark":
+      case "dark-jetbrains":
+        return "#9b9b9b";
+    }
+  }};
+`;
+
+export const InstallationTypeText = styled.span`
+  font-size: 12px;
+  line-height: 14px;
+  padding-bottom: 4px;
+
+  color: ${({ theme }) => {
+    switch (theme.mode) {
+      case "light":
+        return "#828797";
+      case "dark":
+      case "dark-jetbrains":
+        return "#9b9b9b";
+    }
+  }};
+`;
+
+export const InstallationTypeButtonsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+
+export const Badge = styled.span`
+  color: #fff;
+  font-weight: 400;
+  border-radius: 4px;
+  padding: 2px 4px;
+
+  background: ${({ theme }) => {
+    switch (theme.mode) {
+      case "light":
+        return "#7891d0";
+      case "dark":
+      case "dark-jetbrains":
+        return "#4b5fab";
+    }
+  }};
+`;
diff --git a/src/components/InstallationWizard/types.ts b/src/components/InstallationWizard/types.ts
index 61792b51e..c4864ca03 100644
--- a/src/components/InstallationWizard/types.ts
+++ b/src/components/InstallationWizard/types.ts
@@ -8,3 +8,5 @@ export type ConnectionCheckStatus =
 export interface ConnectionCheckResultData {
   result: ConnectionCheckResult;
 }
+
+export type InstallationType = "local" | "cloud";
diff --git a/src/components/common/ToggleSwitch/index.tsx b/src/components/common/ToggleSwitch/index.tsx
index 323c70fdf..e9944cdf0 100644
--- a/src/components/common/ToggleSwitch/index.tsx
+++ b/src/components/common/ToggleSwitch/index.tsx
@@ -2,16 +2,22 @@ import * as s from "./styles";
 import { ToggleSwitchProps } from "./types";
 
 export const ToggleSwitch = (props: ToggleSwitchProps) => {
+  const size = props.size || "small";
+
   const handleContainerClick = () => {
     if (props.onChange) {
       props.onChange(!props.checked);
     }
   };
   return (
-    <s.Container onClick={handleContainerClick}>
+    <s.Container
+      onClick={handleContainerClick}
+      className={props.className}
+      size={size}
+    >
       {props.label}
-      <s.SwitchContainer isChecked={props.checked}>
-        <s.Circle isChecked={props.checked} />
+      <s.SwitchContainer isChecked={props.checked} size={size}>
+        <s.Circle isChecked={props.checked} size={size} />
       </s.SwitchContainer>
     </s.Container>
   );
diff --git a/src/components/common/ToggleSwitch/styles.ts b/src/components/common/ToggleSwitch/styles.ts
index 6fe33a2bf..84f2ecb9c 100644
--- a/src/components/common/ToggleSwitch/styles.ts
+++ b/src/components/common/ToggleSwitch/styles.ts
@@ -1,17 +1,54 @@
 import styled from "styled-components";
-import { CircleProps, SwitchContainerProps } from "./types";
+import {
+  CircleProps,
+  ContainerProps,
+  SwitchContainerProps,
+  ToggleSwitchSize
+} from "./types";
 
-export const Container = styled.div`
+const getCircleRadius = (size: ToggleSwitchSize): number => {
+  switch (size) {
+    case "large":
+      return 5;
+    case "small":
+      return 2.5;
+  }
+};
+
+export const Container = styled.div<ContainerProps>`
   display: flex;
-  font-size: 10px;
-  font-weight: 500;
-  line-height: 12px;
-  gap: 10px;
-  padding: 8px 2px 8px 0;
+  gap: 8px;
   align-items: center;
   cursor: pointer;
   user-select: none;
 
+  font-weight: ${({ size }) => {
+    switch (size) {
+      case "large":
+        return "600";
+      case "small":
+        return "500";
+    }
+  }};
+
+  font-size: ${({ size }) => {
+    switch (size) {
+      case "large":
+        return "16px";
+      case "small":
+        return "10px";
+    }
+  }};
+
+  line-height: ${({ size }) => {
+    switch (size) {
+      case "large":
+        return "19px";
+      case "small":
+        return "12px";
+    }
+  }};
+
   color: ${({ theme }) => {
     switch (theme.mode) {
       case "light":
@@ -24,9 +61,9 @@ export const Container = styled.div`
 `;
 
 export const SwitchContainer = styled.div<SwitchContainerProps>`
-  border-radius: 8px;
-  width: 28px;
-  height: 16px;
+  border-radius: ${({ size }) => 2 * getCircleRadius(size)}px;
+  width: ${({ size }) => 7 * getCircleRadius(size)}px;
+  height: ${({ size }) => 4 * getCircleRadius(size)}px;
   transition: background 300ms;
   display: flex;
   align-items: center;
@@ -43,13 +80,16 @@ export const SwitchContainer = styled.div<SwitchContainerProps>`
 `;
 
 export const Circle = styled.div<CircleProps>`
-  width: 8px;
-  height: 8px;
+  width: ${({ size }) => 2 * getCircleRadius(size)}px;
+  height: ${({ size }) => 2 * getCircleRadius(size)}px;
   border-radius: 50%;
   transition-property: background, margin-left;
   transition-duration: 300ms;
 
-  margin-left: ${({ isChecked }) => (isChecked ? "16px" : "4px")};
+  margin-left: ${({ isChecked, size }) =>
+    isChecked
+      ? `${4 * getCircleRadius(size)}px`
+      : `${getCircleRadius(size)}px`};
   background: ${({ isChecked, theme }) => {
     switch (theme.mode) {
       case "light":
diff --git a/src/components/common/ToggleSwitch/types.ts b/src/components/common/ToggleSwitch/types.ts
index 70cf47cd3..209ce92ab 100644
--- a/src/components/common/ToggleSwitch/types.ts
+++ b/src/components/common/ToggleSwitch/types.ts
@@ -1,11 +1,23 @@
+export type ToggleSwitchSize = "large" | "small";
+
 export interface ToggleSwitchProps {
   label: string;
   checked: boolean;
+  size?: ToggleSwitchSize;
   onChange?: (value: boolean) => void;
+  className?: string;
+}
+
+export interface ContainerProps {
+  size: ToggleSwitchSize;
 }
 
 export interface SwitchContainerProps {
   isChecked: boolean;
+  size: ToggleSwitchSize;
 }
 
-export type CircleProps = SwitchContainerProps;
+export interface CircleProps {
+  isChecked: boolean;
+  size: ToggleSwitchSize;
+}
diff --git a/src/components/common/icons/CloudDownloadIcon.tsx b/src/components/common/icons/CloudDownloadIcon.tsx
new file mode 100644
index 000000000..633a6ac15
--- /dev/null
+++ b/src/components/common/icons/CloudDownloadIcon.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import { ThemeableIconProps } from "./types";
+
+interface CloudDownloadIconProps extends ThemeableIconProps {
+  height?: number;
+}
+
+const CloudDownloadIconComponent = (props: CloudDownloadIconProps) => {
+  const height = props.height || 40;
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height={height}
+      fill="none"
+      viewBox="0 0 52 43"
+    >
+      <path
+        fill={props.themeKind === "light" ? "#7891d0" : "#353f6f"}
+        d="M39.6575 37.6079H11.8714C5.8769 37.6079 1 32.6611 1 26.5807c0-6.0804 4.8769-11.0272 10.8714-11.0272h1.9767a13.4581 13.4581 0 0 1 4.8446-5.4098 13.1583 13.1583 0 0 1 7.0717-2.0636c6.9522 0 12.7468 5.4535 13.2861 12.4557h.607c4.6448 0 8.4237 3.8293 8.4237 8.5361 0 4.7068-3.7789 8.536-8.4237 8.536Z"
+      />
+      <path
+        fill="#4F5DA3"
+        d="M41.7371 35.5279H13.9509c-5.9944 0-10.8713-4.9468-10.8713-11.0273 0-6.0804 4.8769-11.0272 10.8713-11.0272h1.9768a13.4582 13.4582 0 0 1 4.8446-5.4098A13.1584 13.1584 0 0 1 27.844 6c6.9522 0 12.7468 5.4535 13.2861 12.4558h.607c4.6448 0 8.4237 3.8292 8.4237 8.536 0 4.7068-3.7789 8.5361-8.4237 8.5361Z"
+      />
+      <path
+        fill="#E6E6E6"
+        d="M26.4383 17.4583a5.7292 5.7292 0 1 0 5.7293 5.7292 5.7357 5.7357 0 0 0-5.7293-5.7292Zm2.0746 6.4818-1.7628 1.7628a.4418.4418 0 0 1-.3118.1293.4405.4405 0 0 1-.3118-.1293l-1.7629-1.7628a.441.441 0 0 1 .6236-.6237l1.0104 1.0109V20.984a.441.441 0 0 1 .129-.3117.441.441 0 0 1 .6233 0 .4407.4407 0 0 1 .1291.3117v3.3433l1.0103-1.0109a.441.441 0 0 1 .6236.6237Z"
+      />
+    </svg>
+  );
+};
+
+export const CloudDownloadIcon = React.memo(CloudDownloadIconComponent);
diff --git a/src/components/common/icons/DigmaGreetingIcon.tsx b/src/components/common/icons/DigmaGreetingIcon.tsx
new file mode 100644
index 000000000..9581de312
--- /dev/null
+++ b/src/components/common/icons/DigmaGreetingIcon.tsx
@@ -0,0 +1,275 @@
+import React from "react";
+import { ThemeableIconProps } from "./types";
+
+interface DigmaGreetingIconProps extends ThemeableIconProps {
+  height?: number;
+}
+
+const DigmaGreetingIconComponent = (props: DigmaGreetingIconProps) => {
+  const height = props.height || 40;
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height={height}
+      fill="none"
+      viewBox="0 0 133 103"
+    >
+      <g clipPath="url(#greeting-clip-1)">
+        <path
+          fill={props.themeKind === "light" ? "#a3afe8" : "#4f5da3"}
+          d="m98.84 73.938-18.887 2.949a4 4 0 0 0-2.963 2.167l-2.085 4.182a4 4 0 0 0 1.909 5.418l24.803 11.406a1.99 1.99 0 0 0 2.59-.87c2.024-3.8 7.087-13.406 10.594-20.88 2.344-4.995 5.481-11.649 7.773-16.509 1.334-2.828-.945-6.025-4.053-5.685l-.454.05a4 4 0 0 0-2.476 1.232L101.134 72.73a3.999 3.999 0 0 1-2.293 1.208Z"
+        />
+        <path
+          fill={props.themeKind === "light" ? "#68719e" : "#353f6e"}
+          d="m73.902 87.378 27.787 12.685a2 2 0 0 0 2.609-.905l4.113-7.993 2.449-4.802 2.465-4.972 9.529-20.065-1.762-2.142-19.339 23.188a2 2 0 0 1-1.536.719H75.312l-1.41 4.287Z"
+        />
+        <g filter="url(#greeting-filter-1)">
+          <path
+            stroke={props.themeKind === "light" ? "#68719e" : "#353f6e"}
+            d="m82.265 82.802 18.395.47c.307.007.601-.126.797-.363l17.727-21.462"
+          />
+        </g>
+        <g clipPath="url(#greeting-clip-2)">
+          <g filter="url(#greeting-filter-2)">
+            <path
+              fill={props.themeKind === "light" ? "#a3afe8" : "#4f5da3"}
+              d="M132.008 46.767a2.82 2.82 0 0 0-1.193-.37l.341-.591a2.842 2.842 0 0 0-.675-3.635 2.843 2.843 0 0 0-3.695.103 2.844 2.844 0 0 0-4.887.064l-3.25 5.63-.024-.734a2.843 2.843 0 0 0-4.842-2.019 2.844 2.844 0 0 0-.846 1.998c-.307 3.783-.386 6.546.154 8.614.545 2.092 1.708 3.521 3.89 4.78a8.947 8.947 0 0 0 12.209-3.27l3.859-6.685a2.845 2.845 0 0 0-1.041-3.885Z"
+            />
+          </g>
+          <g filter="url(#greeting-filter-3)">
+            <path
+              fill={props.themeKind === "light" ? "#68719e" : "#353f6e"}
+              d="m122.671 52.764 4.16-10.492-5.026 9.992.866.5Z"
+            />
+          </g>
+          <g filter="url(#greeting-filter-4)">
+            <path
+              fill={props.themeKind === "light" ? "#68719e" : "#353f6e"}
+              d="m125.115 54.221 5.749-7.936-6.615 7.436.866.5Z"
+            />
+          </g>
+          <g filter="url(#greeting-filter-5)">
+            <path
+              fill={props.themeKind === "light" ? "#68719e" : "#353f6e"}
+              d="m119.569 51.367-.918-3.424.187 3.62.731-.196Z"
+            />
+          </g>
+        </g>
+        <path
+          fill={props.themeKind === "light" ? "#a3afe8" : "#4f5da3"}
+          d="M101.64 100.094 68.547 84.808l32.618 14.036a2 2 0 0 0 2.566-.916l21.047-40.598-11.141 23.316-4.49 9.077-4.891 9.473a2 2 0 0 1-2.616.898Z"
+        />
+        <g filter="url(#greeting-filter-6)" opacity=".5">
+          <path
+            fill={props.themeKind === "light" ? "#68719e" : "#353f6e"}
+            d="M85.57 85.354c-4.25 5.91-8.156 5.005-10.286 3.22-2.13-1.787-.776-5.697 2.573-9.69 3.35-3.992 5.427-2.31 9.282-3.11 2.13 1.786 1.78 5.588-1.57 9.58Z"
+          />
+        </g>
+        <path
+          fill={props.themeKind === "light" ? "#a3afe8" : "#4f5da3"}
+          d="M97.997 49.324c-.537-9.396-21.476-29.812-24.872-33.027C69.729 13.082 64.05 4.887 62.386 5c-1.751.162 1.014 16.672 1.229 28.484.214 11.812-2.403 15.892-3.309 15.67-.906-.22-3.98-.67-3.98-.67s-3.08.443-3.98.67c-.9.229-3.537-3.852-3.302-15.67C49.28 21.665 52.024 5.163 50.26 5c-1.651-.127-7.336 8.054-10.738 11.296-3.403 3.241-24.322 23.61-24.86 33.027-.422 7.45 2.457 9.597 8.78 12.59 6.321 2.993 8.301 3.893 7.852 5.53-.45 1.638-4.524 2.316-4.752 6.33-.228 4.013.738 10.395 11.832 15.22 11.094 4.826 14.765 6.189 17.953 6.189 3.188 0 6.86-1.343 17.953-6.188 11.094-4.846 11.604-12.631 11.41-16.638-.195-4.007-3.84-3.275-4.29-4.913-.449-1.637 1.524-2.537 7.847-5.53 6.322-2.993 9.174-5.14 8.751-12.59Z"
+        />
+        <path
+          fill={props.themeKind === "light" ? "#68719e" : "#353f6e"}
+          d="M85.171 72.476c-.221-3.839-3.805-3.134-4.255-4.698a.482.482 0 0 1 0-.107l-7.624-2.013-14.277-1.832s-3.473 2.226-2.44 2.295c1.782.119 1.901 2.111 3.084 3.29 1.182 1.18 6.325 7.898 13.17 7.67 6.846-.229 8.926-5.215 11.175-2.316 1.248 1.61-2.014 9.067-8.114 10.946-6.101 1.88-10.967 3.84-14.135 4.698a26.457 26.457 0 0 1-10.879.396c-3.557-.671-16.523-4.396-16.778-4.476a27.993 27.993 0 0 0 4.214 2.12c11 4.625 14.618 5.927 17.806 5.927 3.188 0 6.785-1.296 17.772-5.947 10.986-4.65 11.503-12.127 11.281-15.953Z"
+        />
+        <path
+          fill={props.themeKind === "light" ? "#68719e" : "#353f6e"}
+          d="M32.89 70.746s2.557 6.201 14.92 5.14c1.543-.132 1.783-1.746 2.2-2.869.675-1.816 1.87-2.393 3.025-3.6 1.122-1.174 1.917-3.06 3.528-3.326 2.208-.365 2.373-3.276 2.313-5.312-.181-6.208-8.215-11.523-8.215-11.523L32.89 70.746Z"
+        />
+        <path
+          fill={props.themeKind === "light" ? "#68719e" : "#353f6e"}
+          d="M55.916 67.878c0-.249-.275-.343-.389-.135-.416.719-.799 2.356-1.57 3.04-1.007.88-2.235 1.974-1.8 3.121.437 1.148 1.679.35 2.686-.442.416-.343.67-.537.845-.672a.67.67 0 0 0 .262-.55l-.034-4.362Zm.846-.158c0-.249.269-.343.39-.135.416.718.798 2.363 1.57 3.04 1 .88 2.228 1.974 1.799 3.121-.43 1.148-1.678.356-2.685-.436a20.46 20.46 0 0 0-.846-.671.67.67 0 0 1-.261-.55l.033-4.37Z"
+        />
+        <path
+          fill="#E2E7FF"
+          d="M69.917 78.988a28.964 28.964 0 0 1-.41 4.027c1.195-.268 3.309-1.543 3.9-3.12a9.747 9.747 0 0 0-3.49-.907Z"
+        />
+        <path
+          fill={props.themeKind === "light" ? "#68719e" : "#353f6e"}
+          d="M81.407 80.061c-1.846 1.524-4.873.946-8.101.087a3.147 3.147 0 0 0-1.523-.791 5.885 5.885 0 0 0-1.9-.148 7.245 7.245 0 0 1-1.61-.383c-3.933-2.16-10.638-2.147-10.638-2.147s-5.819 0-10.436 2.167c-4.43 2.094-10.47 3.497-13.302 1.215a7.665 7.665 0 0 1-2.014-2.986c-.174-.437.376-.766.618-.376.98 1.577 2.396 2.241 4.315 2.584 5.248.933 11.658-3.396 20.805-3.396 9.148 0 16.06 2.798 20.806 3.396 1.94.248 3.355-1.007 4.315-2.584.242-.39.792-.06.618.376a7.523 7.523 0 0 1-1.953 2.986Z"
+        />
+        <path
+          fill={props.themeKind === "light" ? "#68719e" : "#353f6e"}
+          d="M53.508 81.202c-.672-.477.67-1.544 3.751-1.544 2.852 0 3.967.926 3.812 1.343-.282.731-2.456-.162-3.9-.162-1.442 0-2.992.833-3.663.363ZM48.413 7.129s-9.67 12.698-14.194 17.228c-4.524 4.53-13.833 16.376-15.739 19.644-1.906 3.269-4.329 10.927 2.685 15.316-3.503-8.53 3.215-11.027 5.37-10.631 2.153.396 1.959 8.107 1.959 8.107l3.476 4.55 12.752-.885 7.087-10.33-2.59-2.415A18.248 18.248 0 0 0 40.084 44c-5.516-.59-7.57-.409-7.57-.409s.785-5.141 6.564-4.248c-1.678-2.497-2.276-15.625 9.335-32.215Zm18.235 8.959s1.416 9.745 1.49 15.564c.074 5.818 1.416 14.839-1.114 17.221-2.53 2.383 1.537 3.356 1.537 3.356l15.61 9.671s3.913-.671 5.78-1.913c1.865-1.241 4.885-3.315 5.442-5.819-2.53 2.578-4.698 4.517-6.45 2.39-1.751-2.128-.536-12.269-7.006-17.228 1.08 2.275-.262 6.04-2.799 5.597-2.537-.443-6.523-6.457-7.51-11.577-.987-5.121-4.98-17.262-4.98-17.262Z"
+        />
+        <path
+          fill="#E2E7FF"
+          d="m27.4 52.961-6.711-5.926a2.954 2.954 0 0 1 .697-4.864 2.959 2.959 0 0 1 3.262.468l6.611 5.839A11.947 11.947 0 0 0 27.4 52.96Z"
+        />
+        <path
+          fill="#A5AFD4"
+          d="M55.205 60.469v.053a14.356 14.356 0 0 1-14.308 14.356 14.41 14.41 0 0 0 14.308-14.41Zm-28.711-.161c0-.336 0-.671.047-.993-.02.328-.047.657-.047.993ZM40.85 74.88a14.363 14.363 0 0 1-14.363-14.355v-.074a14.41 14.41 0 0 0 14.363 14.43Z"
+        />
+        <path
+          fill="#E2E7FF"
+          d="M26.494 60.311c0-.336 0-.671.047-.993a14.476 14.476 0 0 1 6.128-10.738 14.228 14.228 0 0 1 8.18-2.611 14.41 14.41 0 0 1 14.356 14.456v.047a14.41 14.41 0 0 1-14.308 14.41h-.047a14.41 14.41 0 0 1-14.363-14.43c0-.067.007-.1.007-.141Z"
+        />
+        <path
+          fill={props.themeKind === "light" ? "#68719e" : "#353f6e"}
+          d="M40.903 72.397c6.48 0 11.732-5.253 11.732-11.732 0-6.479-5.252-11.731-11.732-11.731-6.479 0-11.731 5.252-11.731 11.731 0 6.48 5.252 11.732 11.731 11.732Z"
+        />
+        <path
+          fill="#E2E7FF"
+          d="m30.293 52.816 22.342 2.866-2.269-2.866s-3.194-2.987-3.402-3.06c-.209-.074-3.269-1.638-4.658-1.638-1.39 0-4.658-1.181-6.04-.483-1.383.698-5.967 4.792-5.967 4.792l-.006.389Z"
+        />
+        <path
+          fill="#E2E7FF"
+          d="m43.85 62.653 9.872-3.685-3.329-5.872-15.302 10.18 13.765-5.086-5.006 4.463Z"
+        />
+        <path
+          fill={props.themeKind === "light" ? "#68719e" : "#353f6e"}
+          d="M28.078 52.251s-6.161-5.557-6.35-5.758a2.013 2.013 0 0 1-.1-2.013c.396-.557.08.402.37 1.06.288.658 7.563 4.698 7.563 4.698l-1.483 2.013Z"
+        />
+        <path
+          fill="#E2E7FF"
+          d="m85.279 52.813 6.55-5.778a2.886 2.886 0 0 0 .222-4.074 2.886 2.886 0 0 0-4.067-.222l-6.457 5.698a11.664 11.664 0 0 1 3.752 4.376Z"
+        />
+        <path
+          fill="#A5AFD4"
+          d="M57.782 60.469v.053a14.356 14.356 0 0 0 14.309 14.356 14.41 14.41 0 0 1-14.309-14.41Zm28.712-.161c0-.336 0-.671-.047-.993.027.328.047.657.047.993ZM72.145 74.88A14.355 14.355 0 0 0 86.5 60.526v-.074a14.403 14.403 0 0 1-14.356 14.43Z"
+        />
+        <path
+          fill="#E2E7FF"
+          d="M86.494 60.313c0-.335 0-.67-.047-.993a14.478 14.478 0 0 0-6.128-10.738 14.209 14.209 0 0 0-8.174-2.584 14.41 14.41 0 0 0-14.363 14.456v.047a14.41 14.41 0 0 0 14.309 14.41h.054A14.403 14.403 0 0 0 86.5 60.48c0-.094-.006-.127-.006-.168Z"
+        />
+        <path
+          fill={props.themeKind === "light" ? "#68719e" : "#353f6e"}
+          d="M72.024 72.397c6.48 0 11.731-5.253 11.731-11.732 0-6.479-5.252-11.731-11.731-11.731-6.48 0-11.732 5.252-11.732 11.731 0 6.48 5.253 11.732 11.732 11.732Z"
+        />
+        <path
+          fill="#E2E7FF"
+          d="m81.856 52.816-22.013 3.268 1.342-2.96s3.792-3.295 4.027-3.355c.235-.06 3.242-1.651 4.63-1.651 1.39 0 4.659-1.181 6.041-.483 1.383.698 5.967 4.792 5.967 4.792l.006.389Z"
+        />
+        <path
+          fill="#E2E7FF"
+          d="m74.944 61.812 9.872-3.685-3.329-5.879-15.295 10.188 13.758-5.094-5.006 4.47Z"
+        />
+        <path
+          fill={props.themeKind === "light" ? "#68719e" : "#353f6e"}
+          d="M85.05 52.556s6.162-5.557 6.35-5.758a2.014 2.014 0 0 0 .1-2.014c-.396-.557-.08.403-.376 1.067-.295.665-7.557 4.698-7.557 4.698l1.484 2.007Z"
+        />
+      </g>
+      <defs>
+        <filter
+          id="greeting-filter-1"
+          width="43.317"
+          height="28.643"
+          x="79.252"
+          y="58.129"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+          <feGaussianBlur
+            result="effect1_foregroundBlur_1156_25639"
+            stdDeviation="1.5"
+          />
+        </filter>
+        <filter
+          id="greeting-filter-2"
+          width="22.734"
+          height="22.884"
+          x="111.696"
+          y="40.917"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix
+            in="SourceAlpha"
+            result="hardAlpha"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          />
+          <feOffset dy="1" />
+          <feGaussianBlur stdDeviation=".5" />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix values="0 0 0 0 0.207843 0 0 0 0 0.247059 0 0 0 0 0.431373 0 0 0 0.3 0" />
+          <feBlend
+            in2="BackgroundImageFix"
+            result="effect1_dropShadow_1156_25639"
+          />
+          <feBlend
+            in="SourceGraphic"
+            in2="effect1_dropShadow_1156_25639"
+            result="shape"
+          />
+        </filter>
+        <filter
+          id="greeting-filter-3"
+          width="7.025"
+          height="12.493"
+          x="120.805"
+          y="41.272"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+          <feGaussianBlur
+            result="effect1_foregroundBlur_1156_25639"
+            stdDeviation=".5"
+          />
+        </filter>
+        <filter
+          id="greeting-filter-4"
+          width="8.615"
+          height="9.937"
+          x="123.249"
+          y="45.285"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+          <feGaussianBlur
+            result="effect1_foregroundBlur_1156_25639"
+            stdDeviation=".5"
+          />
+        </filter>
+        <filter
+          id="greeting-filter-5"
+          width="2.918"
+          height="5.62"
+          x="117.651"
+          y="46.943"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+          <feGaussianBlur
+            result="effect1_foregroundBlur_1156_25639"
+            stdDeviation=".5"
+          />
+        </filter>
+        <filter
+          id="greeting-filter-6"
+          width="28.212"
+          height="28.144"
+          x="67.26"
+          y="68.773"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+          <feGaussianBlur
+            result="effect1_foregroundBlur_1156_25639"
+            stdDeviation="3.5"
+          />
+        </filter>
+        <clipPath id="greeting-clip-1">
+          <path fill="#fff" d="M0 0h133v103H0z" />
+        </clipPath>
+        <clipPath id="greeting-clip-2">
+          <path fill="#fff" d="m117.91 32.998 22.517 13-13 22.517-22.517-13z" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export const DigmaGreetingIcon = React.memo(DigmaGreetingIconComponent);
diff --git a/src/components/common/icons/OpenTelemetryDisplayIcon.tsx b/src/components/common/icons/OpenTelemetryDisplayIcon.tsx
new file mode 100644
index 000000000..d8024f5a7
--- /dev/null
+++ b/src/components/common/icons/OpenTelemetryDisplayIcon.tsx
@@ -0,0 +1,72 @@
+import React from "react";
+import { ThemeableIconProps } from "./types";
+
+interface OpenTelemetryDisplayIconProps extends ThemeableIconProps {
+  height?: number;
+}
+
+const OpenTelemetryDisplayIconComponent = (
+  props: OpenTelemetryDisplayIconProps
+) => {
+  const height = props.height || 40;
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height={height}
+      fill="none"
+      viewBox="0 0 52 43"
+    >
+      <path
+        fill="#4F5DA3"
+        stroke={props.themeKind === "light" ? "#7891d0" : "#353f6e"}
+        d="M2.27 1.5h47.764c.09 0 .181.02.27.063a.778.778 0 0 1 .25.197c.075.089.139.198.183.323.045.125.068.261.068.4v31.998a1.5 1.5 0 0 1-1.5 1.5H3a1.5 1.5 0 0 1-1.5-1.5V2.484c0-.284.097-.544.252-.724a.687.687 0 0 1 .519-.26Z"
+      />
+      <path
+        fill="#4F5DA3"
+        d="M49.06 1H2.246c-.33 0-.648.152-.881.422C1.13 1.692 1 2.06 1 2.442V33.48a2 2 0 0 0 2 2h45.305a2 2 0 0 0 2-2V2.44c0-.189-.032-.376-.094-.551a1.474 1.474 0 0 0-.27-.468 1.251 1.251 0 0 0-.405-.312A1.1 1.1 0 0 0 49.06 1Z"
+      />
+      <path fill="#313131" d="M48.764 3.65H2.516v25.418h46.248V3.651Z" />
+      <path
+        fill="#E6E6E6"
+        d="M26.207 33.545a1.27 1.27 0 1 0 0-2.541 1.27 1.27 0 0 0 0 2.541Z"
+      />
+      <path
+        fill={props.themeKind === "light" ? "#313131" : "#fff"}
+        d="M3.593 4.72a.241.241 0 1 0 0-.483.241.241 0 0 0 0 .483Zm.915 0a.241.241 0 1 0 0-.483.241.241 0 0 0 0 .483Zm.915 0a.241.241 0 1 0 0-.483.241.241 0 0 0 0 .483Z"
+      />
+      <g clipPath="url(#opentelemetry-display-clip-1)">
+        <path
+          fill="#4B5FAB"
+          d="M29.161 15.391a.35.35 0 0 1-.107.266c-.257.257-.514.513-.77.771-.035.036-.054.032-.088 0a1.728 1.728 0 0 0-1.035-.476 1.75 1.75 0 0 0-1.191.296c-.037.025-.06.02-.09-.01-.32-.323-.643-.644-.964-.967a.365.365 0 0 1 0-.51 832.51 832.51 0 0 1 1.627-1.628.375.375 0 0 1 .526.009c.118.115.234.233.35.35l1.62 1.619a.376.376 0 0 1 .122.28Z"
+        />
+        <path
+          fill="#F6A81C"
+          d="M31.242 14.153a.348.348 0 0 1-.109.262c-.238.237-.479.47-.71.713a.38.38 0 0 1-.546.005l-.02-.019-2.778-2.778c-.14-.14-.172-.307-.09-.466a.327.327 0 0 1 .06-.078c.246-.247.492-.494.74-.74a.363.363 0 0 1 .506 0l2.848 2.848c.07.07.1.156.1.253h-.001Z"
+        />
+        <path
+          fill="#4B5FAB"
+          d="M23.787 19.961a.363.363 0 0 1-.277-.106l-1.17-1.172a.353.353 0 0 1-.002-.508c.69-.692 1.382-1.383 2.074-2.074a.356.356 0 0 1 .509 0c.182.18.362.363.545.543.033.032.04.057.012.098-.174.26-.27.546-.295.859-.022.291.025.57.14.837.025.059.02.095-.027.142-.426.422-.85.847-1.273 1.272a.343.343 0 0 1-.236.109Z"
+        />
+        <path
+          fill="#F6A81C"
+          d="M25.778 17.72c0-.66.531-1.186 1.197-1.186.649.001 1.183.54 1.183 1.194 0 .658-.539 1.188-1.207 1.185a1.185 1.185 0 0 1-1.173-1.193Zm.607.005a.58.58 0 1 0 1.16-.001.573.573 0 0 0-.58-.581.58.58 0 0 0-.58.582ZM21.94 21.81a.28.28 0 0 1-.217-.088L20.47 20.47a.297.297 0 0 1 0-.425.298.298 0 0 1 .425 0l.151.152c.036.036.072.036.107.001l.693-.692c.153-.154.348-.154.5-.002l.347.346c.15.15.149.346-.002.497l-.696.697c-.034.034-.034.068.001.102l.156.156a.3.3 0 0 1 .064.326.29.29 0 0 1-.276.183Z"
+        />
+      </g>
+      <path
+        fill="#4F5DA3"
+        d="M32.349 40.988H19.852l.424-5.507h11.65l.423 5.507Z"
+      />
+      <path fill="#4F5DA3" d="M33.197 40.35h-13.98v1.27h13.98v-1.27Z" />
+      <defs>
+        <clipPath id="opentelemetry-display-clip-1">
+          <path fill="#fff" d="M20.38 10.949h10.861V21.81h-10.86z" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export const OpenTelemetryDisplayIcon = React.memo(
+  OpenTelemetryDisplayIconComponent
+);
diff --git a/src/components/common/icons/PlayCircleIcon.tsx b/src/components/common/icons/PlayCircleIcon.tsx
new file mode 100644
index 000000000..db397cc00
--- /dev/null
+++ b/src/components/common/icons/PlayCircleIcon.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { useIconProps } from "./hooks";
+import { IconProps } from "./types";
+
+const PlayCircleIconComponent = (props: IconProps) => {
+  const { size, color } = useIconProps(props);
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 32 33"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M16 3.5C13.4288 3.5 10.9154 4.26244 8.77759 5.6909C6.63975 7.11935 4.97351 9.14968 3.98957 11.5251C3.00563 13.9006 2.74819 16.5144 3.2498 19.0362C3.75141 21.5579 4.98953 23.8743 6.80762 25.6924C8.6257 27.5105 10.9421 28.7486 13.4638 29.2502C15.9856 29.7518 18.5995 29.4944 20.9749 28.5104C23.3503 27.5265 25.3807 25.8603 26.8091 23.7224C28.2376 21.5846 29 19.0712 29 16.5C28.9964 13.0533 27.6256 9.74882 25.1884 7.31163C22.7512 4.87445 19.4467 3.50364 16 3.5ZM16 27.5C13.8244 27.5 11.6977 26.8549 9.88873 25.6462C8.07979 24.4375 6.66989 22.7195 5.83733 20.7095C5.00477 18.6995 4.78693 16.4878 5.21137 14.354C5.63581 12.2202 6.68345 10.2602 8.22183 8.72183C9.76021 7.18345 11.7202 6.1358 13.854 5.71136C15.9878 5.28692 18.1995 5.50476 20.2095 6.33733C22.2195 7.16989 23.9375 8.57979 25.1462 10.3887C26.3549 12.1977 27 14.3244 27 16.5C26.9967 19.4164 25.8367 22.2123 23.7745 24.2745C21.7123 26.3367 18.9164 27.4967 16 27.5ZM20.555 15.6675L14.555 11.6675C14.4044 11.567 14.2293 11.5093 14.0484 11.5005C13.8675 11.4918 13.6877 11.5323 13.528 11.6177C13.3684 11.7032 13.2349 11.8304 13.1419 11.9858C13.0489 12.1412 12.9999 12.3189 13 12.5V20.5C12.9999 20.6811 13.0489 20.8588 13.1419 21.0142C13.2349 21.1696 13.3684 21.2968 13.528 21.3823C13.6877 21.4677 13.8675 21.5082 14.0484 21.4995C14.2293 21.4907 14.4044 21.433 14.555 21.3325L20.555 17.3325C20.6922 17.2412 20.8047 17.1175 20.8825 16.9722C20.9603 16.827 21.001 16.6648 21.001 16.5C21.001 16.3352 20.9603 16.173 20.8825 16.0278C20.8047 15.8825 20.6922 15.7588 20.555 15.6675ZM15 18.6313V14.375L18.1975 16.5L15 18.6313Z"
+        fill={color}
+      />
+    </svg>
+  );
+};
+
+export const PlayCircleIcon = React.memo(PlayCircleIconComponent);
diff --git a/src/components/common/icons/types.ts b/src/components/common/icons/types.ts
index 363775105..254a07c52 100644
--- a/src/components/common/icons/types.ts
+++ b/src/components/common/icons/types.ts
@@ -13,3 +13,7 @@ export interface IconProps {
 export interface RotatableIconProps extends IconProps {
   direction?: DIRECTION;
 }
+
+export interface ThemeableIconProps {
+  themeKind?: "light" | "dark";
+}