diff --git a/src/components/Assets/Assets.stories.tsx b/src/components/Assets/Assets.stories.tsx
index 460964847..0fe51a129 100644
--- a/src/components/Assets/Assets.stories.tsx
+++ b/src/components/Assets/Assets.stories.tsx
@@ -17,6 +17,4 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
-export const Default: Story = {
-  args: {}
-};
+export const Default: Story = {};
diff --git a/src/components/Documentation/pages/RunDigma/GetEnvironmentIdInstruction.tsx/index.tsx b/src/components/Documentation/pages/RunDigma/GetEnvironmentIdInstruction.tsx/index.tsx
index 0a1bf0e25..0d2f2695f 100644
--- a/src/components/Documentation/pages/RunDigma/GetEnvironmentIdInstruction.tsx/index.tsx
+++ b/src/components/Documentation/pages/RunDigma/GetEnvironmentIdInstruction.tsx/index.tsx
@@ -7,32 +7,42 @@ export const GetEnvironmentIdInstruction = () => {
   const theme = useTheme();
   const themeKind = getThemeKind(theme);
 
+  const steps = [
+    {
+      id: "how-to-setup-menu-item",
+      description: (
+        <span>
+          Click on the environment options menu in the observability panel and
+          select How to setup
+        </span>
+      ),
+      image: (
+        <img src={`/images/howToSetupEnvironmentMenuItem_${themeKind}.svg`} />
+      )
+    },
+    {
+      id: "copy-environment-id",
+      description: (
+        <span>Copy the Environment ID value from the instructions page</span>
+      ),
+      image: <img src={`/images/environmentId_${themeKind}.svg`} />
+    }
+  ];
+
   return (
     <s.Container>
       <s.TitleSection>
         <span>Follow the steps to get your Environment ID</span>
-        <s.Arrow src={"/images/longArrow.svg"} />
       </s.TitleSection>
-      <s.Section>
-        <SectionNumber>1</SectionNumber>
-        <s.SectionContent>
-          <span>
-            Click on hamburger menu next to your Environment in the
-            Observability panel, and choose <s.Term>How to setup</s.Term>
-          </span>
-          <img src={`/images/howToSetupEnvironmentMenuItem_${themeKind}.svg`} />
-        </s.SectionContent>
-      </s.Section>
-      <s.Section>
-        <s.SectionContent>
-          <SectionNumber>2</SectionNumber>
-          <span>
-            On the <s.Term>How to setup your Digma Environment</s.Term> screen
-            you can find your Environment ID
-          </span>
-          <img src={`/images/environmentId_${themeKind}.svg`} />
-        </s.SectionContent>
-      </s.Section>
+      {steps.map((x, i) => (
+        <s.Section key={x.id}>
+          <SectionNumber>{i + 1}</SectionNumber>
+          <s.SectionContent>
+            {x.description}
+            {x.image}
+          </s.SectionContent>
+        </s.Section>
+      ))}
     </s.Container>
   );
 };
diff --git a/src/components/Documentation/pages/RunDigma/GetEnvironmentIdInstruction.tsx/styles.ts b/src/components/Documentation/pages/RunDigma/GetEnvironmentIdInstruction.tsx/styles.ts
index dc7efbac5..6ea99bd34 100644
--- a/src/components/Documentation/pages/RunDigma/GetEnvironmentIdInstruction.tsx/styles.ts
+++ b/src/components/Documentation/pages/RunDigma/GetEnvironmentIdInstruction.tsx/styles.ts
@@ -1,20 +1,15 @@
 import styled from "styled-components";
-import { footnoteRegularTypography } from "../../../../common/App/typographies";
+import {
+  footnoteRegularTypography,
+  subheadingBoldTypography
+} from "../../../../common/App/typographies";
 
 export const Container = styled.div`
   display: flex;
   gap: 16px;
   padding: 16px;
   border-radius: 4px;
-  background: ${({ theme }) => {
-    switch (theme.mode) {
-      case "light":
-        return "#f7f8fa";
-      case "dark":
-      case "dark-jetbrains":
-        return "#2b2d30";
-    }
-  }};
+  background: ${({ theme }) => theme.colors.v3.surface.primary};
 
   & > * {
     flex: 1 1 0;
@@ -28,9 +23,10 @@ export const Section = styled.div`
 `;
 
 export const TitleSection = styled(Section)`
+  ${subheadingBoldTypography}
+
+  color: ${({ theme }) => theme.colors.v3.text.primary};
   padding: 16px 0 24px;
-  font-size: 16px;
-  font-weight: 700;
 `;
 
 export const SectionContent = styled.div`
@@ -40,14 +36,3 @@ export const SectionContent = styled.div`
   flex-direction: column;
   gap: 12px;
 `;
-
-export const Term = styled.span`
-  font-weight: 700;
-`;
-
-export const Arrow = styled.img`
-  display: block;
-  margin-top: auto;
-  width: 25%;
-  min-width: 33px;
-`;
diff --git a/src/components/Documentation/pages/RunDigma/runDigmaWithCommandLine.tsx b/src/components/Documentation/pages/RunDigma/runDigmaWithCommandLine.tsx
index 79273c0de..8c5a1d18f 100644
--- a/src/components/Documentation/pages/RunDigma/runDigmaWithCommandLine.tsx
+++ b/src/components/Documentation/pages/RunDigma/runDigmaWithCommandLine.tsx
@@ -41,7 +41,7 @@ export const runDigmaWithCommandLine: PageContent = {
   </build>
 </profile>`}
             language={"xml"}
-          ></CodeSnippet>
+          />
           <span>
             To collect data with Digma when you run your application from
             command line you should now run:
diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationsInsightCard/constants.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationsInsightCard/constants.ts
index 02cb81b7e..9480c3d7d 100644
--- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationsInsightCard/constants.ts
+++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationsInsightCard/constants.ts
@@ -1,4 +1,4 @@
 import { typographies } from "../../../../../common/App/typographies";
 
-export const LABEL_HEIGHT = typographies.captionOne.lineHeight;
+export const LABEL_HEIGHT = typographies.captionOne.lineHeight || 14;
 export const DIVIDER = " | ";
diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/AsyncTag/AsyncTag.stories.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/AsyncTag/AsyncTag.stories.tsx
index 3837003fc..bead0b053 100644
--- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/AsyncTag/AsyncTag.stories.tsx
+++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/AsyncTag/AsyncTag.stories.tsx
@@ -16,6 +16,4 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
-  args: {}
-};
+export const Default: Story = {};
diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/ProductionAffectionBar/ProductionAffectionBar.stories.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/ProductionAffectionBar/ProductionAffectionBar.stories.tsx
index 7047c5f62..4340b3aab 100644
--- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/ProductionAffectionBar/ProductionAffectionBar.stories.tsx
+++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/ProductionAffectionBar/ProductionAffectionBar.stories.tsx
@@ -16,9 +16,7 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const WithoutTicket: Story = {
-  args: {}
-};
+export const WithoutTicket: Story = {};
 
 export const WithTicket: Story = {
   args: {
diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/RecalculateBar/RecalculateBar.stories.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/RecalculateBar/RecalculateBar.stories.tsx
index 0c40dbff7..9b3d22c93 100644
--- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/RecalculateBar/RecalculateBar.stories.tsx
+++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/RecalculateBar/RecalculateBar.stories.tsx
@@ -16,6 +16,4 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
-  args: {}
-};
+export const Default: Story = {};
diff --git a/src/components/Insights/styles.ts b/src/components/Insights/styles.ts
index 5993699b4..51a4a1279 100644
--- a/src/components/Insights/styles.ts
+++ b/src/components/Insights/styles.ts
@@ -7,7 +7,7 @@ export const Container = styled.div`
   flex-direction: column;
   padding: 8px 0;
   gap: 8px;
-  height: 100%;
+  min-height: 100%;
   box-sizing: border-box;
   background: ${({ theme }) => theme.colors.v3.surface.primary};
   position: relative;
diff --git a/src/components/Main/Authentication/Authentication.stories.tsx b/src/components/Main/Authentication/Authentication.stories.tsx
index c4d83af0c..d8e69a2f2 100644
--- a/src/components/Main/Authentication/Authentication.stories.tsx
+++ b/src/components/Main/Authentication/Authentication.stories.tsx
@@ -15,6 +15,4 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
-  args: {}
-};
+export const Default: Story = {};
diff --git a/src/components/Main/Authentication/Login/Login.stories.tsx b/src/components/Main/Authentication/Login/Login.stories.tsx
index 3479ab983..06942caa0 100644
--- a/src/components/Main/Authentication/Login/Login.stories.tsx
+++ b/src/components/Main/Authentication/Login/Login.stories.tsx
@@ -16,12 +16,15 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
-  args: {}
+export const Default: Story = {};
+
+export const WithSuccessMessage: Story = {
+  args: {
+    successMessage: "Message"
+  }
 };
 
 export const Failed: Story = {
-  args: {},
   play: () => {
     setTimeout(
       () =>
diff --git a/src/components/Main/Authentication/Login/index.tsx b/src/components/Main/Authentication/Login/index.tsx
index 44003512c..7983a0974 100644
--- a/src/components/Main/Authentication/Login/index.tsx
+++ b/src/components/Main/Authentication/Login/index.tsx
@@ -14,7 +14,8 @@ import {
   Loader,
   SubmitButton
 } from "../styles";
-import { LoginFormValues } from "./types";
+import * as s from "./../styles";
+import { LoginFormValues, LoginProps } from "./types";
 import { useLogin } from "./useLogin";
 
 const formDefaultValues: LoginFormValues = {
@@ -22,7 +23,7 @@ const formDefaultValues: LoginFormValues = {
   email: ""
 };
 
-export const Login = () => {
+export const Login = ({ successMessage, onLogin }: LoginProps) => {
   const {
     handleSubmit,
     control,
@@ -59,6 +60,7 @@ export const Login = () => {
   }, [clearErrors, watch]);
 
   const onSubmit = (data: LoginFormValues) => {
+    onLogin();
     login({ email: data.email, password: data.password });
     sendUserActionTrackingEvent("login form submitted");
   };
@@ -119,6 +121,7 @@ export const Login = () => {
           form={"loginForm"}
         />
       </ButtonsContainer>
+      {successMessage && <s.SuccessMessage>{successMessage}</s.SuccessMessage>}
       <InfoMessage>Forgot password? Contact the Digma admin</InfoMessage>
       {isLoading && (
         <Loader>
diff --git a/src/components/Main/Authentication/Login/types.ts b/src/components/Main/Authentication/Login/types.ts
index 1b1a0f47b..9108a23b3 100644
--- a/src/components/Main/Authentication/Login/types.ts
+++ b/src/components/Main/Authentication/Login/types.ts
@@ -1,3 +1,8 @@
+export interface LoginProps {
+  successMessage?: string;
+  onLogin: () => void;
+}
+
 export interface LoginFormValues {
   password: string;
   email: string;
diff --git a/src/components/Main/Authentication/Registration/Registration.stories.tsx b/src/components/Main/Authentication/Registration/Registration.stories.tsx
index 6ddabb0ed..fafa3f464 100644
--- a/src/components/Main/Authentication/Registration/Registration.stories.tsx
+++ b/src/components/Main/Authentication/Registration/Registration.stories.tsx
@@ -16,12 +16,9 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
-  args: {}
-};
+export const Default: Story = {};
 
 export const Failed: Story = {
-  args: {},
   play: () => {
     setTimeout(
       () =>
diff --git a/src/components/Main/Authentication/Registration/index.tsx b/src/components/Main/Authentication/Registration/index.tsx
index e60dd964c..0bd8b76e9 100644
--- a/src/components/Main/Authentication/Registration/index.tsx
+++ b/src/components/Main/Authentication/Registration/index.tsx
@@ -9,7 +9,7 @@ import { Spinner } from "../../../common/v3/Spinner";
 import { TextField } from "../../../common/v3/TextField";
 import * as s from "./../styles";
 import { Loader } from "./../styles";
-import { RegisterFormValues } from "./types";
+import { RegisterFormValues, RegistrationProps } from "./types";
 import { useRegistration } from "./useRegistration";
 
 const validateEmail = (email: string): string | boolean => {
@@ -44,7 +44,7 @@ const formDefaultValues: RegisterFormValues = {
   confirmPassword: ""
 };
 
-export const Registration = () => {
+export const Registration = ({ onRegister }: RegistrationProps) => {
   const {
     handleSubmit,
     control,
@@ -85,6 +85,12 @@ export const Registration = () => {
     });
   }, [clearErrors, watch, setResponseStatus]);
 
+  useEffect(() => {
+    if (isSucceed) {
+      onRegister();
+    }
+  }, [isSucceed, onRegister]);
+
   const onSubmit = (data: RegisterFormValues) => {
     register({ email: data.email, password: data.password });
     sendUserActionTrackingEvent("registration form submitted");
@@ -175,9 +181,6 @@ export const Registration = () => {
       </s.Form>
       {errorMessage && <s.ErrorMessage>{errorMessage}</s.ErrorMessage>}
       {responseStatus && <s.ErrorMessage>{responseStatus}</s.ErrorMessage>}
-      {isSucceed && (
-        <s.SuccessMessage>User created successfully!</s.SuccessMessage>
-      )}
       <s.ButtonsContainer>
         <s.SubmitButton
           isDisabled={!isValid || isLoading}
diff --git a/src/components/Main/Authentication/Registration/types.ts b/src/components/Main/Authentication/Registration/types.ts
index 8729b8c42..e59bfc626 100644
--- a/src/components/Main/Authentication/Registration/types.ts
+++ b/src/components/Main/Authentication/Registration/types.ts
@@ -1,3 +1,7 @@
+export interface RegistrationProps {
+  onRegister: () => void;
+}
+
 export interface RegisterFormValues {
   password: string;
   email: string;
diff --git a/src/components/Main/Authentication/index.tsx b/src/components/Main/Authentication/index.tsx
index a244813a0..a91f32142 100644
--- a/src/components/Main/Authentication/index.tsx
+++ b/src/components/Main/Authentication/index.tsx
@@ -10,11 +10,26 @@ import * as s from "./styles";
 
 const AuthenticationComponent = () => {
   const [option, setOption] = useState<"login" | "register">("login");
+  const [loginSuccessMessage, setLoginSuccessMessage] = useState<string>();
+
+  const handleRegister = () => {
+    setOption("login");
+    setLoginSuccessMessage("Account registered successfully! Please login");
+  };
+
+  const handleLogin = () => {
+    setLoginSuccessMessage("");
+  };
 
   const handleSlackLinkClick = () => {
     openURLInDefaultBrowser(SLACK_WORKSPACE_URL);
   };
 
+  const handleToggleValueChange = (option: "login" | "register") => {
+    setOption(option);
+    setLoginSuccessMessage("");
+  };
+
   return (
     <s.Container>
       <s.ContentContainer>
@@ -42,9 +57,13 @@ const AuthenticationComponent = () => {
               }
             ]}
             value={option}
-            onValueChange={(option) => setOption(option)}
+            onValueChange={handleToggleValueChange}
           />
-          {option === "login" ? <Login /> : <Registration />}
+          {option === "login" ? (
+            <Login successMessage={loginSuccessMessage} onLogin={handleLogin} />
+          ) : (
+            <Registration onRegister={handleRegister} />
+          )}
         </s.InputForm>
       </s.ContentContainer>
       <s.Footer>
diff --git a/src/components/Main/Authentication/styles.ts b/src/components/Main/Authentication/styles.ts
index 7bbf34745..fe1fbfeb1 100644
--- a/src/components/Main/Authentication/styles.ts
+++ b/src/components/Main/Authentication/styles.ts
@@ -10,7 +10,7 @@ import { Link } from "../../common/v3/Link";
 
 export const Container = styled.div`
   padding: 10px;
-  height: 100%;
+  min-height: 100%;
   gap: 16px;
   display: flex;
   flex-direction: column;
@@ -100,6 +100,7 @@ export const ErrorMessage = styled(StatusMessage)`
 
 export const SuccessMessage = styled(StatusMessage)`
   color: ${({ theme }) => theme.colors.v3.status.success};
+  text-align: center;
 `;
 
 export const SubmitButton = styled(Button)`
diff --git a/src/components/Navigation/CodeButton/AnimatedCodeButton/AnimatedCodeButton.stories.tsx b/src/components/Navigation/CodeButton/AnimatedCodeButton/AnimatedCodeButton.stories.tsx
index 4dabe329e..4b9da87c3 100644
--- a/src/components/Navigation/CodeButton/AnimatedCodeButton/AnimatedCodeButton.stories.tsx
+++ b/src/components/Navigation/CodeButton/AnimatedCodeButton/AnimatedCodeButton.stories.tsx
@@ -17,6 +17,4 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
-export const Default: Story = {
-  args: {}
-};
+export const Default: Story = {};
diff --git a/src/components/Navigation/EnvironmentBar/EnvironmentBar.stories.tsx b/src/components/Navigation/EnvironmentBar/EnvironmentBar.stories.tsx
index ff26ca2d5..ea346d0c8 100644
--- a/src/components/Navigation/EnvironmentBar/EnvironmentBar.stories.tsx
+++ b/src/components/Navigation/EnvironmentBar/EnvironmentBar.stories.tsx
@@ -27,6 +27,4 @@ export const Default: Story = {
   }
 };
 
-export const Disabled: Story = {
-  args: {}
-};
+export const Disabled: Story = {};
diff --git a/src/components/Navigation/KebabMenu/KebabMenu.stories.tsx b/src/components/Navigation/KebabMenu/KebabMenu.stories.tsx
index c0d201a76..80908c9f2 100644
--- a/src/components/Navigation/KebabMenu/KebabMenu.stories.tsx
+++ b/src/components/Navigation/KebabMenu/KebabMenu.stories.tsx
@@ -17,6 +17,4 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
-export const Default: Story = {
-  args: {}
-};
+export const Default: Story = {};
diff --git a/src/components/Navigation/ScopeBar/ScopeBar.stories.tsx b/src/components/Navigation/ScopeBar/ScopeBar.stories.tsx
index f8eb28512..f79c96fca 100644
--- a/src/components/Navigation/ScopeBar/ScopeBar.stories.tsx
+++ b/src/components/Navigation/ScopeBar/ScopeBar.stories.tsx
@@ -65,9 +65,7 @@ const mockedCodeContext: CodeContext = {
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 
-export const Default: Story = {
-  args: {}
-};
+export const Default: Story = {};
 
 export const Home: Story = {
   args: {
diff --git a/src/components/Navigation/ScopeNavigation/ScopeNavigation.stories.tsx b/src/components/Navigation/ScopeNavigation/ScopeNavigation.stories.tsx
index eeab49964..818a6e027 100644
--- a/src/components/Navigation/ScopeNavigation/ScopeNavigation.stories.tsx
+++ b/src/components/Navigation/ScopeNavigation/ScopeNavigation.stories.tsx
@@ -17,10 +17,6 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
-export const Default: Story = {
-  args: {}
-};
+export const Default: Story = {};
 
-export const Disabled: Story = {
-  args: {}
-};
+export const Disabled: Story = {};
diff --git a/src/components/RecentActivity/CreateEnvironmentWizard/EnvironmentTypeStep/EnvironmentTypeStep.stories.tsx b/src/components/RecentActivity/CreateEnvironmentWizard/EnvironmentTypeStep/EnvironmentTypeStep.stories.tsx
index 2642e3fec..119c46a49 100644
--- a/src/components/RecentActivity/CreateEnvironmentWizard/EnvironmentTypeStep/EnvironmentTypeStep.stories.tsx
+++ b/src/components/RecentActivity/CreateEnvironmentWizard/EnvironmentTypeStep/EnvironmentTypeStep.stories.tsx
@@ -16,6 +16,4 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
-export const Default: Story = {
-  args: {}
-};
+export const Default: Story = {};
diff --git a/src/components/RecentActivity/CreateEnvironmentWizard/RegisterStep/RegisterStep.stories.tsx b/src/components/RecentActivity/CreateEnvironmentWizard/RegisterStep/RegisterStep.stories.tsx
index 11a0d5749..5f8a8beb9 100644
--- a/src/components/RecentActivity/CreateEnvironmentWizard/RegisterStep/RegisterStep.stories.tsx
+++ b/src/components/RecentActivity/CreateEnvironmentWizard/RegisterStep/RegisterStep.stories.tsx
@@ -16,6 +16,4 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
-export const Default: Story = {
-  args: {}
-};
+export const Default: Story = {};
diff --git a/src/components/RecentActivity/EnvironmentInstructionsPanel/EnvironmentInstructionsPanel.stories.tsx b/src/components/RecentActivity/EnvironmentInstructionsPanel/EnvironmentInstructionsPanel.stories.tsx
index 4884a8871..d0b8bf507 100644
--- a/src/components/RecentActivity/EnvironmentInstructionsPanel/EnvironmentInstructionsPanel.stories.tsx
+++ b/src/components/RecentActivity/EnvironmentInstructionsPanel/EnvironmentInstructionsPanel.stories.tsx
@@ -16,7 +16,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
-export const Local: Story = {
+export const Private: Story = {
   args: {
     environment: {
       name: "MY_ENV",
@@ -31,7 +31,7 @@ export const Local: Story = {
   }
 };
 
-export const Shared: Story = {
+export const Public: Story = {
   args: {
     environment: {
       name: "MY_ENV",
diff --git a/src/components/RecentActivity/EnvironmentInstructionsPanel/index.tsx b/src/components/RecentActivity/EnvironmentInstructionsPanel/index.tsx
index 8fbc65939..eade37a6d 100644
--- a/src/components/RecentActivity/EnvironmentInstructionsPanel/index.tsx
+++ b/src/components/RecentActivity/EnvironmentInstructionsPanel/index.tsx
@@ -2,18 +2,19 @@ import copy from "copy-to-clipboard";
 import { useContext, useState } from "react";
 import { useTheme } from "styled-components";
 import { actions as globalActions } from "../../../actions";
-import { CENTRAL_ON_PREM_INSTALLATION_GUIDE_URL } from "../../../constants";
+import { INSTRUMENTATION_DOCUMENTATION_URL } from "../../../constants";
 import { openURLInDefaultBrowser } from "../../../utils/actions/openURLInDefaultBrowser";
 import { sendUserActionTrackingEvent } from "../../../utils/actions/sendUserActionTrackingEvent";
-import { getHostnameFromURL } from "../../../utils/getHostNameFromURL";
 import { ConfigContext } from "../../common/App/ConfigContext";
 import { getThemeKind } from "../../common/App/styles";
 import { EnvironmentType } from "../../common/App/types";
+import { CodeSnippet } from "../../common/CodeSnippet";
 import { Link } from "../../common/Link";
-import { CopyIcon } from "../../common/icons/12px/CopyIcon";
+import { CopyIcon } from "../../common/icons/16px/CopyIcon";
 import { DesktopIcon } from "../../common/icons/DesktopIcon";
 import { InfinityIcon } from "../../common/icons/InfinityIcon";
 import { PlayButtonWithCursorIcon } from "../../common/icons/PlayButtonWithCursorIcon";
+import { IconButton } from "../../common/v3/IconButton";
 import { Tooltip } from "../../common/v3/Tooltip";
 import { SetupOrgDigmaPanel } from "../SetupOrgDigmaPanel";
 import { Overlay } from "../common/Overlay";
@@ -31,7 +32,7 @@ const getEnvironmentVariableString = (
   environmentId: string
 ) =>
   isMicrometerProject
-    ? `MANAGEMENT_OPENTELEMETRY_RESOURCE-ATTRIBUTES_digma_environment=${environmentId}`
+    ? `MANAGEMENT_OPENTELEMETRY_RESOURCE-ATTRIBUTES_digma_environment_id=${environmentId}`
     : `OTEL_RESOURCE_ATTRIBUTES=digma.environment.id=${environmentId}`;
 
 export const EnvironmentInstructionsPanel = (
@@ -42,8 +43,6 @@ export const EnvironmentInstructionsPanel = (
   const theme = useTheme();
   const themeKind = getThemeKind(theme);
   const config = useContext(ConfigContext);
-  const hostname =
-    getHostnameFromURL(config.digmaApiUrl) || "[DIGMA_BACKEND_URL]";
   const environmentVariableString = getEnvironmentVariableString(
     config.isMicrometerProject,
     props.environment.id
@@ -51,9 +50,8 @@ export const EnvironmentInstructionsPanel = (
 
   const { addToRunConfig, state } = useAddToRunConfig(props.environment.id);
 
-  const handleOrgDigmaSetupGuideLinkClick = () => {
-    // setIsOrgDigmaSetupGuideVisible(true);
-    openURLInDefaultBrowser(CENTRAL_ON_PREM_INSTALLATION_GUIDE_URL);
+  const handleDocumentationLinkClick = () => {
+    openURLInDefaultBrowser(INSTRUMENTATION_DOCUMENTATION_URL);
   };
 
   const handleAddToRunConfigLinkClick = () => {
@@ -72,16 +70,12 @@ export const EnvironmentInstructionsPanel = (
     setIsOrgDigmaSetupGuideVisible(false);
   };
 
-  const close = () => {
+  const handleCloseButtonClick = () => {
     if (props.onClose) {
       props.onClose();
     }
   };
 
-  const handleCloseButtonClick = () => {
-    close();
-  };
-
   if (isOrgDigmaSetupGuideVisible) {
     return (
       <Overlay>
@@ -112,20 +106,48 @@ export const EnvironmentInstructionsPanel = (
               <s.EnvironmentId>{environmentId}</s.EnvironmentId>
             </Tooltip>
             <Tooltip title={"Copy"}>
-              <s.CopyButton onClick={handleCopyButtonClick}>
-                <CopyIcon />
-              </s.CopyButton>
+              <IconButton
+                onClick={handleCopyButtonClick}
+                icon={{
+                  component: CopyIcon,
+                  size: 16
+                }}
+              />
             </Tooltip>
           </s.EnvironmentIdContainer>
         </s.HeaderContentContainer>
-        <s.CloseButton
-          onClick={handleCloseButtonClick}
-          buttonType={"secondary"}
-          label={"Close"}
-        />
+        {props.onClose && (
+          <s.CloseButton
+            onClick={handleCloseButtonClick}
+            buttonType={"secondary"}
+            label={"Close"}
+          />
+        )}
       </>
     );
   };
+
+  const renderActions = () => (
+    <s.ActionContainer>
+      <s.AddToConfigContainer>
+        <s.Link onClick={handleAddToRunConfigLinkClick}>
+          Add to the active run config
+        </s.Link>
+        {state === AddToRunConfigState.success && (
+          <s.AddToConfigSuccessMessage>
+            Successfully added
+          </s.AddToConfigSuccessMessage>
+        )}
+        {state === AddToRunConfigState.failure && (
+          <s.AddToConfigFailureMessage>
+            Failed to add
+          </s.AddToConfigFailureMessage>
+        )}
+      </s.AddToConfigContainer>
+      <s.Link onClick={handleTroubleshootLinkClick}>Troubleshoot</s.Link>
+    </s.ActionContainer>
+  );
+
   const environmentTypesContent: Record<
     EnvironmentType,
     EnvironmentInstructionsPanelContent
@@ -141,27 +163,8 @@ export const EnvironmentInstructionsPanel = (
               Set up the following environment variables when running your code
               to tag the observability data with this run config:
             </span>
-            <s.CodeSection text={environmentVariableString} />
-            <s.ActionContainer>
-              <s.AddToConfigContainer>
-                <s.Link onClick={handleAddToRunConfigLinkClick}>
-                  Add to the active run config
-                </s.Link>
-                {state === AddToRunConfigState.success && (
-                  <s.AddToConfigSuccessMessage>
-                    Successfully added
-                  </s.AddToConfigSuccessMessage>
-                )}
-                {state === AddToRunConfigState.failure && (
-                  <s.AddToConfigFailureMessage>
-                    Failed to add
-                  </s.AddToConfigFailureMessage>
-                )}
-              </s.AddToConfigContainer>
-              <s.Link onClick={handleTroubleshootLinkClick}>
-                Troubleshoot
-              </s.Link>
-            </s.ActionContainer>
+            <CodeSnippet text={environmentVariableString} />
+            {renderActions()}
           </>
         )
       },
@@ -188,20 +191,13 @@ export const EnvironmentInstructionsPanel = (
         content: (
           <>
             <span>
-              Add the following to your build/prod deployment scripts,
-              don&apos;t forget to set the <code>SERVICE_NAME</code> variable
+              Please see our{" "}
+              <Link onClick={handleDocumentationLinkClick}>
+                Digma Developer Guide
+              </Link>{" "}
+              for the best way to instrument your application and send data to
+              Digma. Use the following environment ID: {props.environment.id}
             </span>
-            <s.CodeSection
-              text={`curl --create-dirs -O -L --output-dir ./otel https://github.com/open-telemetry/opentelemetry-java-instrumentation/releases/download/v2.1.0/opentelemetry-javaagent.jar
-
-curl --create-dirs -O -L --output-dir ./otel https://github.com/digma-ai/otel-java-instrumentation/releases/latest/download/digma-otel-agent-extension.jar
-
-export JAVA_TOOL_OPTIONS="-javaagent:/otel/opentelemetry-javaagent.jar -Dotel.exporter.otlp.endpoint=http://${hostname}:5050 -Dotel.javaagent.extensions=/otel/digma-otel-agent-extension.jar -Dotel.metrics.exporter=none -Dotel.logs.exporter=none -Dotel.exporter.otlp.protocol=grpc"
-
-export OTEL_SERVICE_NAME={--ENTER YOUR SERVICE NAME HERE--}
-export OTEL_RESOURCE_ATTRIBUTES=digma.environment.id="${props.environment.id}"`}
-              language={"bash"}
-            />
           </>
         )
       },
@@ -233,14 +229,6 @@ export OTEL_RESOURCE_ATTRIBUTES=digma.environment.id="${props.environment.id}"`}
   return (
     <s.Container>
       <s.Header>{renderHeaderContent(content.title)}</s.Header>
-      {props.environment.type === "Public" && (
-        <span>
-          CI/Prod environments require Digma to be installed in your
-          organization. Follow{" "}
-          <Link onClick={handleOrgDigmaSetupGuideLinkClick}>these steps</Link>{" "}
-          to set that up.
-        </span>
-      )}
       <s.ContentContainer>
         <s.Section>
           <s.SectionHeader>
diff --git a/src/components/RecentActivity/EnvironmentInstructionsPanel/styles.ts b/src/components/RecentActivity/EnvironmentInstructionsPanel/styles.ts
index 2772a83f8..99faa4132 100644
--- a/src/components/RecentActivity/EnvironmentInstructionsPanel/styles.ts
+++ b/src/components/RecentActivity/EnvironmentInstructionsPanel/styles.ts
@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import { getCodeFont } from "../../common/App/styles";
 import {
   bodyMediumTypography,
   footnoteRegularTypography,
@@ -146,10 +147,11 @@ export const EnvironmentIdLabel = styled.span`
 `;
 
 export const EnvironmentIdContainer = styled.div`
+  ${({ theme }) => getCodeFont(theme.codeFont)}
+
   display: flex;
-  gap: 8px;
   align-items: center;
-  padding: 6px 8px;
+  padding-left: 8px;
   border-radius: 4px;
   border: 1px solid ${({ theme }) => theme.colors.v3.surface.gray};
   max-width: 299px;
@@ -164,15 +166,6 @@ export const EnvironmentId = styled.span`
   overflow: hidden;
 `;
 
-export const CopyButton = styled.button`
-  color: ${({ theme }) => theme.colors.v3.icon.secondary};
-  border: none;
-  background: none;
-  padding: 0;
-  display: flex;
-  cursor: pointer;
-`;
-
 export const CloseButton = styled(Button)`
   margin-left: auto;
 `;
diff --git a/src/components/RecentActivity/EnvironmentMenu/index.tsx b/src/components/RecentActivity/EnvironmentMenu/index.tsx
index b4ea8e11a..5ca95174a 100644
--- a/src/components/RecentActivity/EnvironmentMenu/index.tsx
+++ b/src/components/RecentActivity/EnvironmentMenu/index.tsx
@@ -14,11 +14,9 @@ export const EnvironmentMenu = (props: EnvironmentMenuProps) => {
             key={item.value}
             onClick={() => handleMenuItemClick(item.value)}
           >
-            {item.icon && (
-              <s.IconContainer>
-                <item.icon color={"currentColor"} size={16} />
-              </s.IconContainer>
-            )}
+            <s.IconContainer>
+              <item.icon color={"currentColor"} size={16} />
+            </s.IconContainer>
             {item.label}
           </s.ListItem>
         ))}
diff --git a/src/components/RecentActivity/EnvironmentMenu/types.ts b/src/components/RecentActivity/EnvironmentMenu/types.ts
index 986f9bf1c..54f828c0b 100644
--- a/src/components/RecentActivity/EnvironmentMenu/types.ts
+++ b/src/components/RecentActivity/EnvironmentMenu/types.ts
@@ -1,11 +1,13 @@
 import { MemoExoticComponent } from "react";
 import { IconProps } from "../../common/icons/types";
 
+export interface EnvironmentMenuItem {
+  label: string;
+  value: string;
+  icon: MemoExoticComponent<(props: IconProps) => JSX.Element>;
+}
+
 export interface EnvironmentMenuProps {
-  items: {
-    label: string;
-    value: string;
-    icon?: MemoExoticComponent<(props: IconProps) => JSX.Element>;
-  }[];
+  items: EnvironmentMenuItem[];
   onSelect: (value: string) => void;
 }
diff --git a/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/getEnvironmentTabIdPrefix.ts b/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/getEnvironmentTabIdPrefix.ts
new file mode 100644
index 000000000..031f040ad
--- /dev/null
+++ b/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/getEnvironmentTabIdPrefix.ts
@@ -0,0 +1,2 @@
+export const getEnvironmentTabId = (environmentId: string) =>
+  `environment-tab-${environmentId}`;
diff --git a/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/index.tsx b/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/index.tsx
index addc23263..30ccee95e 100644
--- a/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/index.tsx
+++ b/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/index.tsx
@@ -1,43 +1,21 @@
-import { useCallback, useRef, useState } from "react";
+import { useState } from "react";
 import { greenScale } from "../../../common/App/v2colors";
 import { EnvironmentIcon } from "../../../common/EnvironmentIcon";
-import { KebabMenuButton } from "../../../common/KebabMenuButton";
 import { NewPopover } from "../../../common/NewPopover";
 import { Tooltip } from "../../../common/Tooltip";
 import { TrashBinIcon } from "../../../common/icons/16px/TrashBinIcon";
 import { WrenchIcon } from "../../../common/icons/16px/WrenchIcon";
 import { Badge } from "../../Badge";
 import { EnvironmentMenu } from "../../EnvironmentMenu";
+import { EnvironmentMenuItem } from "../../EnvironmentMenu/types";
+import { getEnvironmentTabId } from "./getEnvironmentTabIdPrefix";
 import * as s from "./styles";
 import { EnvironmentTabProps } from "./types";
 
 export const EnvironmentTab = (props: EnvironmentTabProps) => {
-  const [isHovered, setIsHovered] = useState(false);
-  const [isFocused, setIsFocused] = useState(false);
   const [isMenuOpen, setIsMenuOpen] = useState(false);
 
-  const containerRef = useRef<HTMLLIElement>(null);
-
-  const handleMouseEnter = useCallback(() => {
-    setIsHovered(true);
-  }, []);
-  const handleMouseLeave = useCallback(() => {
-    setIsHovered(false);
-  }, []);
-
-  const handleFocus = useCallback(() => {
-    setIsFocused(true);
-  }, []);
-
-  const handleBlur = useCallback(() => {
-    setIsFocused(false);
-  }, []);
-
   const handleClick = () => {
-    if (containerRef.current) {
-      containerRef.current.scrollIntoView(false);
-    }
-
     props.onClick(props.environment);
   };
 
@@ -54,26 +32,25 @@ export const EnvironmentTab = (props: EnvironmentTabProps) => {
     setIsMenuOpen(false);
   };
 
-  const menuItems = [
+  const menuItems: EnvironmentMenuItem[] = [
     { label: "How to setup", value: "setup-instructions", icon: WrenchIcon },
     { label: "Delete", value: "delete", icon: TrashBinIcon }
   ];
 
+  const environmentTabId = getEnvironmentTabId(props.environment.id);
+
   return (
     <s.Container
-      ref={containerRef}
+      id={environmentTabId}
       $isSelected={props.isSelected}
-      $isPending={props.environment.isPending}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-      onFocus={handleFocus}
-      onBlur={handleBlur}
       onClick={handleClick}
     >
       <EnvironmentIcon environment={props.environment} />
       <Tooltip title={props.environment.name}>
         <s.LabelContainer>
-          <s.Label>{props.environment.name}</s.Label>
+          <s.Label $isSelected={props.isSelected}>
+            {props.environment.name}
+          </s.Label>
           {props.environment.hasRecentActivity && (
             <Badge
               backgroundColor={greenScale[300]}
@@ -82,7 +59,7 @@ export const EnvironmentTab = (props: EnvironmentTabProps) => {
           )}
         </s.LabelContainer>
       </Tooltip>
-      {menuItems.length > 0 && (isHovered || isFocused || isMenuOpen) && (
+      {menuItems.length > 0 && (
         <NewPopover
           content={
             <EnvironmentMenu
@@ -95,7 +72,10 @@ export const EnvironmentTab = (props: EnvironmentTabProps) => {
           placement={"bottom-start"}
         >
           <span>
-            <KebabMenuButton />
+            <s.StyledKebabMenuButton
+              $isMenuOpen={isMenuOpen}
+              $isSelected={props.isSelected}
+            />
           </span>
         </NewPopover>
       )}
diff --git a/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/styles.ts b/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/styles.ts
index f9344d8ee..d10509bd7 100644
--- a/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/styles.ts
+++ b/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/styles.ts
@@ -1,47 +1,51 @@
-import styled from "styled-components";
-import { ContainerProps } from "./types";
+import styled, { css } from "styled-components";
+import { subscriptRegularTypography } from "../../../common/App/typographies";
+import { KebabMenuButton } from "../../../common/KebabMenuButton";
+import {
+  ContainerProps,
+  LabelProps,
+  StyledKebabMenuButtonProps
+} from "./types";
+
+export const StyledKebabMenuButton = styled(
+  KebabMenuButton
+)<StyledKebabMenuButtonProps>`
+  color: ${({ theme, $isMenuOpen }) =>
+    $isMenuOpen ? theme.colors.v3.icon.primary : theme.colors.v3.icon.tertiary};
+
+  &:hover,
+  &:focus,
+  &:active {
+    color: ${({ theme, $isSelected, $isMenuOpen }) =>
+      $isSelected || $isMenuOpen
+        ? theme.colors.v3.icon.primary
+        : theme.colors.v3.icon.tertiary};
+  }
+`;
 
 export const Container = styled.li<ContainerProps>`
+  ${subscriptRegularTypography}
+
   display: flex;
   cursor: pointer;
-  font-size: 13px;
-  padding: 0 4px;
+  padding: 0 8px;
   user-select: none;
   align-items: center;
   gap: 4px;
   box-sizing: border-box;
-  color: ${({ theme, $isPending, $isSelected }) => {
-    if ($isPending) {
-      return theme.colors.tab.text.disabled;
-    }
+  color: ${({ theme, $isSelected }) =>
+    $isSelected
+      ? theme.colors.v3.icon.primary
+      : theme.colors.v3.icon.secondary};
 
-    if ($isSelected) {
-      return theme.colors.tab.text.focus;
-    }
-
-    return theme.colors.tab.text.default;
-  }};
-  background: ${({ theme }) => theme.colors.tab.background.default};
-  border-bottom: ${({ theme, $isSelected }) =>
-    $isSelected ? `1px solid ${theme.colors.tab.borderBottom.focus}` : "none"};
-
-  &:hover,
-  &:focus {
-    color: ${({ theme, $isPending, $isSelected }) => {
-      if ($isPending) {
-        return theme.colors.tab.text.disabled;
-      }
-
-      if ($isSelected) {
-        return theme.colors.tab.text.focus;
-      }
-
-      return theme.colors.tab.text.hover;
-    }};
-    background: ${({ theme }) => theme.colors.tab.background.hover};
-    border-bottom: ${({ theme }) =>
-      `1px solid ${theme.colors.tab.borderBottom.hover}`};
-  }
+  ${({ $isSelected }) =>
+    $isSelected
+      ? css`
+          background: ${({ theme }) => theme.colors.v3.surface.primaryLight};
+          border-bottom: 1px solid
+            ${({ theme }) => theme.colors.v3.stroke.brandPrimary};
+        `
+      : ""}
 `;
 
 export const LabelContainer = styled.div`
@@ -50,9 +54,13 @@ export const LabelContainer = styled.div`
   gap: 8px;
 `;
 
-export const Label = styled.span`
+export const Label = styled.span<LabelProps>`
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
   max-width: 110px;
+  color: ${({ theme, $isSelected }) =>
+    $isSelected
+      ? theme.colors.v3.text.primary
+      : theme.colors.v3.text.secondary};
 `;
diff --git a/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/types.ts b/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/types.ts
index 12533ff92..2bd47b9e2 100644
--- a/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/types.ts
+++ b/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/types.ts
@@ -1,3 +1,4 @@
+import { KebabMenuButtonProps } from "../../../common/KebabMenuButton/types";
 import { ExtendedEnvironment } from "../../types";
 
 export interface TabThemeColors {
@@ -29,5 +30,11 @@ export interface EnvironmentTabProps {
 
 export interface ContainerProps {
   $isSelected: boolean;
-  $isPending?: boolean;
 }
+
+export type LabelProps = ContainerProps;
+
+export type StyledKebabMenuButtonProps = ContainerProps &
+  KebabMenuButtonProps & {
+    $isMenuOpen: boolean;
+  };
diff --git a/src/components/RecentActivity/EnvironmentPanel/styles.ts b/src/components/RecentActivity/EnvironmentPanel/styles.ts
index 16fe413b0..3392d4ae4 100644
--- a/src/components/RecentActivity/EnvironmentPanel/styles.ts
+++ b/src/components/RecentActivity/EnvironmentPanel/styles.ts
@@ -23,15 +23,19 @@ export const Container = styled.div`
 export const EnvironmentListContainer = styled.div`
   display: flex;
   flex-grow: 1;
-  overflow: hidden;
+  overflow-x: auto;
   scroll-behavior: smooth;
   gap: 12px;
   height: 100%;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 `;
 
 export const EnvironmentList = styled.ul`
   display: flex;
-  gap: 12px;
   margin: 0;
   padding: 0;
 `;
diff --git a/src/components/RecentActivity/WelcomeScreen/WelcomeScreen.stories.tsx b/src/components/RecentActivity/WelcomeScreen/WelcomeScreen.stories.tsx
index c72aeb28e..d269c98cc 100644
--- a/src/components/RecentActivity/WelcomeScreen/WelcomeScreen.stories.tsx
+++ b/src/components/RecentActivity/WelcomeScreen/WelcomeScreen.stories.tsx
@@ -13,6 +13,4 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
-  args: {}
-};
+export const Default: Story = {};
diff --git a/src/components/RecentActivity/WelcomeScreen/index.tsx b/src/components/RecentActivity/WelcomeScreen/index.tsx
index f150c3a7a..16ba0de81 100644
--- a/src/components/RecentActivity/WelcomeScreen/index.tsx
+++ b/src/components/RecentActivity/WelcomeScreen/index.tsx
@@ -2,16 +2,14 @@ import { DigmaLoginLogo } from "../../common/icons/DigmaLoginLogo";
 import { RecentActivityContainerBackgroundGradient } from "../styles";
 import * as s from "./styles";
 
-export const WelcomeScreen = () => {
-  return (
-    <s.NoUserContainer>
-      <s.Background />
-      <RecentActivityContainerBackgroundGradient />
-      <DigmaLoginLogo />
-      <s.Container>
-        <s.Title>Welcome to Digma</s.Title>
-        <s.Text>Please sign-in/sign-up first to use Digma</s.Text>
-      </s.Container>
-    </s.NoUserContainer>
-  );
-};
+export const WelcomeScreen = () => (
+  <s.Container>
+    <s.Background />
+    <RecentActivityContainerBackgroundGradient />
+    <DigmaLoginLogo />
+    <s.TextContainer>
+      <s.Title>Welcome to Digma</s.Title>
+      <s.Text>Please sign-in/sign-up first to use Digma</s.Text>
+    </s.TextContainer>
+  </s.Container>
+);
diff --git a/src/components/RecentActivity/WelcomeScreen/styles.ts b/src/components/RecentActivity/WelcomeScreen/styles.ts
index 2b201b99d..5a4d4f837 100644
--- a/src/components/RecentActivity/WelcomeScreen/styles.ts
+++ b/src/components/RecentActivity/WelcomeScreen/styles.ts
@@ -4,7 +4,7 @@ import {
   subscriptRegularTypography
 } from "../../common/App/typographies";
 
-export const NoUserContainer = styled.div`
+export const Container = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -14,9 +14,11 @@ export const NoUserContainer = styled.div`
   gap: 12px;
   color: ${({ theme }) => theme.colors.v3.text.primary};
   height: 100%;
+  overflow: hidden;
+  box-sizing: border-box;
 `;
 
-export const Container = styled.div`
+export const TextContainer = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
diff --git a/src/components/RecentActivity/index.tsx b/src/components/RecentActivity/index.tsx
index 5b7729704..2df861478 100644
--- a/src/components/RecentActivity/index.tsx
+++ b/src/components/RecentActivity/index.tsx
@@ -9,6 +9,7 @@ import { isBoolean } from "../../typeGuards/isBoolean";
 import { ChangeEnvironmentPayload } from "../../types";
 import { groupBy } from "../../utils/groupBy";
 import { ConfigContext } from "../common/App/ConfigContext";
+import { Environment } from "../common/App/types";
 import { RegistrationDialog } from "../common/RegistrationDialog";
 import { RegistrationFormValues } from "../common/RegistrationDialog/types";
 import { ListIcon } from "../common/icons/ListIcon";
@@ -18,6 +19,7 @@ import { DeleteEnvironmentConfirmation } from "./DeleteEnvironmentConfirmation";
 import { Digmathon } from "./Digmathon";
 import { EnvironmentInstructionsPanel } from "./EnvironmentInstructionsPanel";
 import { EnvironmentPanel } from "./EnvironmentPanel";
+import { getEnvironmentTabId } from "./EnvironmentPanel/EnvironmentTab/getEnvironmentTabIdPrefix";
 import { ViewMode } from "./EnvironmentPanel/types";
 import { LiveView } from "./LiveView";
 import { NoData } from "./NoData";
@@ -30,6 +32,7 @@ import { Overlay } from "./common/Overlay";
 import * as s from "./styles";
 import {
   EntrySpan,
+  EnvironmentInstructionsVisibility,
   ExtendedEnvironment,
   RecentActivityProps,
   ViewModeOption
@@ -51,6 +54,22 @@ const viewModeOptions: ViewModeOption[] = [
   }
 ];
 
+const changeSelectedEnvironment = (
+  environments: Environment[] | undefined,
+  environmentId: string
+) => {
+  const environmentToSelect = environments?.find((x) => x.id === environmentId);
+
+  if (environmentToSelect) {
+    window.sendMessageToDigma<ChangeEnvironmentPayload>({
+      action: globalActions.CHANGE_ENVIRONMENT,
+      payload: {
+        environment: environmentToSelect.id
+      }
+    });
+  }
+};
+
 export const RecentActivity = (props: RecentActivityProps) => {
   const [selectedEnvironment, setSelectedEnvironment] =
     useState<ExtendedEnvironment>();
@@ -84,9 +103,12 @@ export const RecentActivity = (props: RecentActivityProps) => {
   } = useDigmathonProgressData();
   const previousIsDigmathonCompleted = usePrevious(isDigmathonCompleted);
   const [
-    areEnvironmentInstructionsVisible,
-    setAreEnvironmentInstructionsVisible
-  ] = useState(false);
+    environmentInstructionsVisibility,
+    setEnvironmentInstructionsVisibility
+  ] = useState<EnvironmentInstructionsVisibility>({
+    isOpen: false,
+    keepOpen: false
+  });
 
   const environmentActivities = useMemo(
     () => (data ? groupBy(data.entries, (x) => x.environment) : {}),
@@ -106,24 +128,18 @@ export const RecentActivity = (props: RecentActivityProps) => {
   );
 
   useEffect(() => {
-    setSelectedEnvironment((selectedEnvironment) => {
-      const environmentToSelect = environments.find(
-        (x) => x.id === selectedEnvironment?.id
-      );
-
-      if (environmentToSelect) {
-        environmentToSelect.isNew = environmentToSelect?.hasRecentActivity
-          ? false
-          : selectedEnvironment?.isNew;
-        return environmentToSelect;
+    if (selectedEnvironment?.id) {
+      setEnvironmentInstructionsVisibility((state) => ({
+        isOpen: selectedEnvironment.id === state.newlyCreatedEnvironmentId,
+        keepOpen: false
+      }));
+
+      const environmentTabId = getEnvironmentTabId(selectedEnvironment.id);
+      const environmentTabElement = document.getElementById(environmentTabId);
+      if (environmentTabElement) {
+        environmentTabElement.scrollIntoView(false);
       }
-
-      return environments[0];
-    });
-  }, [environments]);
-
-  useEffect(() => {
-    setAreEnvironmentInstructionsVisible(false);
+    }
   }, [selectedEnvironment?.id]);
 
   useEffect(() => {
@@ -160,6 +176,18 @@ export const RecentActivity = (props: RecentActivityProps) => {
     }
   }, [previousIsDigmathonCompleted, isDigmathonCompleted]);
 
+  useEffect(() => {
+    const environmentToSelect = environments.find(
+      (x) => x.id === config.environment?.id
+    );
+
+    if (environmentToSelect) {
+      setSelectedEnvironment(environmentToSelect);
+    } else {
+      setSelectedEnvironment(environments[0]);
+    }
+  }, [config.environment?.id, environments]);
+
   useEffect(() => {
     if (
       previousUserRegistrationEmail !== config.userRegistrationEmail &&
@@ -175,20 +203,7 @@ export const RecentActivity = (props: RecentActivityProps) => {
   ]);
 
   const handleEnvironmentSelect = (environment: ExtendedEnvironment) => {
-    setSelectedEnvironment(environment);
-
-    const environmentToSelect = config.environments?.find(
-      (x) => x.id === environment.id
-    );
-
-    if (environmentToSelect) {
-      window.sendMessageToDigma<ChangeEnvironmentPayload>({
-        action: globalActions.CHANGE_ENVIRONMENT,
-        payload: {
-          environment: environmentToSelect.id
-        }
-      });
-    }
+    changeSelectedEnvironment(config.environments, environment.id);
   };
 
   const handleSpanLinkClick = (span: EntrySpan) => {
@@ -243,11 +258,17 @@ export const RecentActivity = (props: RecentActivityProps) => {
   };
 
   const handleEnvironmentSetupInstructionsShow = () => {
-    setAreEnvironmentInstructionsVisible(true);
+    setEnvironmentInstructionsVisibility({
+      isOpen: true,
+      keepOpen: true
+    });
   };
 
   const handleEnvironmentSetupInstructionsClose = () => {
-    setAreEnvironmentInstructionsVisible(false);
+    setEnvironmentInstructionsVisibility({
+      isOpen: false,
+      keepOpen: false
+    });
   };
 
   const handleDigmathonModeButtonClick = () => {
@@ -282,15 +303,12 @@ export const RecentActivity = (props: RecentActivityProps) => {
   };
 
   const renderContent = () => {
-    if (
-      selectedEnvironment &&
-      (selectedEnvironment.isNew || areEnvironmentInstructionsVisible)
-    ) {
+    if (selectedEnvironment && environmentInstructionsVisibility.isOpen) {
       return (
         <EnvironmentInstructionsPanel
           environment={selectedEnvironment}
           onClose={
-            areEnvironmentInstructionsVisible
+            environmentInstructionsVisibility.keepOpen
               ? handleEnvironmentSetupInstructionsClose
               : undefined
           }
@@ -348,8 +366,12 @@ export const RecentActivity = (props: RecentActivityProps) => {
         if (newEnvId) {
           const newEnv = environments.find((x) => x.id == newEnvId);
           if (newEnv) {
-            newEnv.isNew = true;
-            setSelectedEnvironment(newEnv);
+            changeSelectedEnvironment(config.environments, newEnv.id);
+            setEnvironmentInstructionsVisibility({
+              isOpen: true,
+              newlyCreatedEnvironmentId: newEnv.id,
+              keepOpen: false
+            });
           }
         }
         setShowCreationWizard(false);
diff --git a/src/components/RecentActivity/types.ts b/src/components/RecentActivity/types.ts
index 541073709..c6ddf76fd 100644
--- a/src/components/RecentActivity/types.ts
+++ b/src/components/RecentActivity/types.ts
@@ -73,7 +73,6 @@ export interface Environment {
 
 export interface ExtendedEnvironment extends Environment {
   hasRecentActivity: boolean;
-  isNew?: boolean;
 }
 
 export interface RecentActivityData {
@@ -124,3 +123,9 @@ export interface EnvironmentCreatedData {
   errors?: ErrorResponseData[];
   id: string;
 }
+
+export interface EnvironmentInstructionsVisibility {
+  isOpen: boolean;
+  newlyCreatedEnvironmentId?: string;
+  keepOpen: boolean;
+}
diff --git a/src/components/Tests/Tests.stories.tsx b/src/components/Tests/Tests.stories.tsx
index 9764db579..a86b7de8a 100644
--- a/src/components/Tests/Tests.stories.tsx
+++ b/src/components/Tests/Tests.stories.tsx
@@ -88,6 +88,4 @@ export const Error: Story = {
   }
 };
 
-export const Loading: Story = {
-  args: {}
-};
+export const Loading: Story = {};
diff --git a/src/components/common/App/typographies.ts b/src/components/common/App/typographies.ts
index c1472d2d9..8a75b8bb8 100644
--- a/src/components/common/App/typographies.ts
+++ b/src/components/common/App/typographies.ts
@@ -2,6 +2,26 @@ import { css } from "styled-components";
 import { Typographies } from "../../../styled";
 
 export const typographies: Typographies = {
+  code: {
+    fontSize: 14,
+    fontWeight: {
+      light: 300,
+      regular: 400,
+      medium: 500,
+      semibold: 600,
+      bold: 700
+    }
+  },
+  subheading: {
+    fontSize: 16,
+    fontWeight: {
+      light: 300,
+      regular: 400,
+      medium: 500,
+      semibold: 600,
+      bold: 700
+    }
+  },
   body: {
     fontSize: 14,
     fontWeight: {
@@ -142,3 +162,13 @@ export const bodySemiboldTypography = css`
   font-weight: ${typographies.body.fontWeight.semibold};
   line-height: ${typographies.body.lineHeight}px;
 `;
+
+export const subheadingBoldTypography = css`
+  font-size: ${typographies.subheading.fontSize}px;
+  font-weight: ${typographies.subheading.fontWeight.bold};
+`;
+
+export const codeRegularTypography = css`
+  font-size: ${typographies.code.fontSize}px;
+  font-weight: ${typographies.code.fontWeight.regular};
+`;
diff --git a/src/components/common/CodeSnippet/index.tsx b/src/components/common/CodeSnippet/index.tsx
index 7d4430f91..409c9fd84 100644
--- a/src/components/common/CodeSnippet/index.tsx
+++ b/src/components/common/CodeSnippet/index.tsx
@@ -6,7 +6,9 @@ import {
   atomOneLight
 } from "react-syntax-highlighter/dist/esm/styles/hljs";
 import { DefaultTheme, useTheme } from "styled-components";
-import { CopyIcon } from "../icons/CopyIcon";
+import { CopyIcon } from "../icons/16px/CopyIcon";
+import { IconButton } from "../v3/IconButton";
+import { Tooltip } from "../v3/Tooltip";
 import * as s from "./styles";
 import { CodeSnippetProps, HighlighterTheme } from "./types";
 
@@ -38,7 +40,7 @@ const CodeSnippetComponent = (
           language={props.language}
           style={highlighterTheme}
           customStyle={{
-            padding: 0,
+            padding: "6px 0 6px 8px",
             color: "inherit",
             background: "none"
           }}
@@ -51,12 +53,15 @@ const CodeSnippetComponent = (
       ) : (
         <s.Code>{props.text}</s.Code>
       )}
-      <s.CopyButton
-        onClick={handleCopyButtonClick}
-        icon={{
-          component: CopyIcon
-        }}
-      />
+      <Tooltip title={"Copy"}>
+        <IconButton
+          onClick={handleCopyButtonClick}
+          icon={{
+            component: CopyIcon,
+            size: 16
+          }}
+        />
+      </Tooltip>
     </s.Container>
   );
 };
diff --git a/src/components/common/CodeSnippet/styles.ts b/src/components/common/CodeSnippet/styles.ts
index 43a434252..5be1ad890 100644
--- a/src/components/common/CodeSnippet/styles.ts
+++ b/src/components/common/CodeSnippet/styles.ts
@@ -1,45 +1,22 @@
 import styled from "styled-components";
 import { getCodeFont } from "../App/styles";
-import { FloatingIconButton } from "../FloatingIconButton";
+import { codeRegularTypography } from "../App/typographies";
 
 export const Container = styled.div`
-  padding: 4px 4px 4px 8px;
   border-radius: 4px;
   display: flex;
-  gap: 27px;
   align-items: flex-start;
   justify-content: space-between;
-  background: ${({ theme }) => {
-    switch (theme.mode) {
-      case "light":
-        return "#f7f8fa";
-      case "dark":
-      case "dark-jetbrains":
-        return "#2b2d30";
-    }
-  }};
+  border: 1px solid ${({ theme }) => theme.colors.v3.surface.gray};
 `;
 
 export const Code = styled.code`
+  ${codeRegularTypography}
+
   ${({ theme }) => getCodeFont(theme.codeFont)}
 
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 20px;
-  letter-spacing: -0.1px;
   white-space: pre-wrap;
   word-break: break-word;
-  color: ${({ theme }) => {
-    switch (theme.mode) {
-      case "light":
-        return "#494b57";
-      case "dark":
-      case "dark-jetbrains":
-        return "#dfe1e5";
-    }
-  }};
-`;
-
-export const CopyButton = styled(FloatingIconButton)`
-  padding: 3px;
+  padding: 6px 0 6px 8px;
+  color: ${({ theme }) => theme.colors.v3.text.primary};
 `;
diff --git a/src/components/common/FloatingIconButton/index.tsx b/src/components/common/FloatingIconButton/index.tsx
deleted file mode 100644
index 51deca3d3..000000000
--- a/src/components/common/FloatingIconButton/index.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from "react";
-import * as s from "./styles";
-import { FloatingIconButtonProps } from "./types";
-
-export const FloatingIconButton = (props: FloatingIconButtonProps) => {
-  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
-    if (props.onClick) {
-      props.onClick(e);
-    }
-  };
-
-  return (
-    <s.Button
-      className={props.className}
-      onClick={handleClick}
-      disabled={props.disabled}
-    >
-      <props.icon.component
-        size={props.icon.size || 14}
-        color={"currentColor"}
-      />
-    </s.Button>
-  );
-};
diff --git a/src/components/common/FloatingIconButton/styles.ts b/src/components/common/FloatingIconButton/styles.ts
deleted file mode 100644
index 81124a853..000000000
--- a/src/components/common/FloatingIconButton/styles.ts
+++ /dev/null
@@ -1,110 +0,0 @@
-import styled from "styled-components";
-
-export const Button = styled.button`
-  padding: 6px;
-  border-radius: 4px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: max-content;
-  user-select: none;
-  box-shadow: ${({ theme }) => {
-    switch (theme.mode) {
-      case "light":
-        return "1px 1px 3px rgb(0 0 0 / 15%)";
-      case "dark":
-      case "dark-jetbrains":
-        return "1px 1px 4px rgb(0 0 0 / 25%)";
-    }
-  }};
-  background: ${({ theme }) => {
-    switch (theme.mode) {
-      case "light":
-        return "#f1f5fa";
-      case "dark":
-      case "dark-jetbrains":
-        return "#2e2e2e";
-    }
-  }};
-  border: 1px solid
-    ${({ theme }) => {
-      switch (theme.mode) {
-        case "light":
-          return "#fbfdff";
-        case "dark":
-        case "dark-jetbrains":
-          return "#383838";
-      }
-    }};
-  color: ${({ theme }) => {
-    switch (theme.mode) {
-      case "light":
-        return "#494b57";
-      case "dark":
-      case "dark-jetbrains":
-        return "#dfe1e5";
-    }
-  }};
-
-  &:hover,
-  &:focus {
-    color: #7891d0;
-    background: ${({ theme }) => {
-      switch (theme.mode) {
-        case "light":
-          return "#f1f5fa";
-        case "dark":
-        case "dark-jetbrains":
-          return "#49494d";
-      }
-    }};
-  }
-
-  &:active {
-    color: #b9c2eb;
-    background: ${({ theme }) => {
-      switch (theme.mode) {
-        case "light":
-          return "#f1f5fa";
-        case "dark":
-        case "dark-jetbrains":
-          return "#2e2e2e";
-      }
-    }};
-    border: 1px solid
-      ${({ theme }) => {
-        switch (theme.mode) {
-          case "light":
-            return "#fbfdff";
-          case "dark":
-          case "dark-jetbrains":
-            return "#383838";
-        }
-      }};
-  }
-
-  &:disabled {
-    cursor: initial;
-    color: #49494d;
-    background: ${({ theme }) => {
-      switch (theme.mode) {
-        case "light":
-          return "#f1f5fa";
-        case "dark":
-        case "dark-jetbrains":
-          return "#2e2e2e";
-      }
-    }};
-    border: 1px solid
-      ${({ theme }) => {
-        switch (theme.mode) {
-          case "light":
-            return "#fbfdff";
-          case "dark":
-          case "dark-jetbrains":
-            return "#383838";
-        }
-      }};
-  }
-`;
diff --git a/src/components/common/KebabMenuButton/index.tsx b/src/components/common/KebabMenuButton/index.tsx
index 0273804a5..afb1b517b 100644
--- a/src/components/common/KebabMenuButton/index.tsx
+++ b/src/components/common/KebabMenuButton/index.tsx
@@ -3,8 +3,11 @@ import { ThreeDotsIcon } from "../icons/ThreeDotsIcon";
 import * as s from "./styles";
 import { KebabMenuButtonProps } from "./types";
 
-export const KebabMenuButton = (props: KebabMenuButtonProps) => (
-  <s.Container disabled={props.disabled}>
+export const KebabMenuButton = ({
+  disabled,
+  className
+}: KebabMenuButtonProps) => (
+  <s.Container disabled={disabled} className={className}>
     <ThreeDotsIcon color={"currentColor"} size={14} />
   </s.Container>
 );
diff --git a/src/components/common/KebabMenuButton/types.ts b/src/components/common/KebabMenuButton/types.ts
index 6fbbb199d..3cd455b8b 100644
--- a/src/components/common/KebabMenuButton/types.ts
+++ b/src/components/common/KebabMenuButton/types.ts
@@ -1,3 +1,4 @@
 export interface KebabMenuButtonProps {
   disabled?: boolean;
+  className?: string;
 }
diff --git a/src/components/common/SearchInput/SearchInput.stories.tsx b/src/components/common/SearchInput/SearchInput.stories.tsx
index 01c8355d2..b9f57a6fe 100644
--- a/src/components/common/SearchInput/SearchInput.stories.tsx
+++ b/src/components/common/SearchInput/SearchInput.stories.tsx
@@ -17,9 +17,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
-export const Default: Story = {
-  args: {}
-};
+export const Default: Story = {};
 
 export const Disabled: Story = {
   args: {
diff --git a/src/components/common/icons/16px/CopyIcon.tsx b/src/components/common/icons/16px/CopyIcon.tsx
new file mode 100644
index 000000000..ae4320d6f
--- /dev/null
+++ b/src/components/common/icons/16px/CopyIcon.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import { useIconProps } from "../hooks";
+import { IconProps } from "../types";
+
+const CopyIconComponent = (props: IconProps) => {
+  const { size, color } = useIconProps(props);
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      fill="none"
+      viewBox="0 0 16 16"
+    >
+      <g
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        clipPath="url(#copy-clip-1)"
+      >
+        <path d="M10.5 10.5h3v-8h-8v3" />
+        <path d="M10.5 5.5h-8v8h8v-8Z" />
+      </g>
+      <defs>
+        <clipPath id="copy-clip-1">
+          <path fill="#fff" d="M0 0h16v16H0z" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export const CopyIcon = React.memo(CopyIconComponent);
diff --git a/src/components/common/v3/IconButton/index.tsx b/src/components/common/v3/IconButton/index.tsx
new file mode 100644
index 000000000..4cc69f56a
--- /dev/null
+++ b/src/components/common/v3/IconButton/index.tsx
@@ -0,0 +1,27 @@
+import React, { ForwardedRef, forwardRef } from "react";
+import * as s from "./styles";
+import { IconButtonProps } from "./types";
+
+const IconButtonComponent = (
+  { onClick, className, disabled, icon }: IconButtonProps,
+  ref: ForwardedRef<HTMLButtonElement>
+) => {
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    if (onClick) {
+      onClick(e);
+    }
+  };
+
+  return (
+    <s.Button
+      className={className}
+      onClick={handleClick}
+      disabled={disabled}
+      ref={ref}
+    >
+      <icon.component size={icon.size} color={"currentColor"} />
+    </s.Button>
+  );
+};
+
+export const IconButton = forwardRef(IconButtonComponent);
diff --git a/src/components/common/v3/IconButton/styles.ts b/src/components/common/v3/IconButton/styles.ts
new file mode 100644
index 000000000..d2280083f
--- /dev/null
+++ b/src/components/common/v3/IconButton/styles.ts
@@ -0,0 +1,25 @@
+import styled from "styled-components";
+
+export const Button = styled.button`
+  padding: 6px;
+  cursor: pointer;
+  display: flex;
+  flex-shrink: 0;
+  user-select: none;
+  background: none;
+  border: none;
+  color: ${({ theme }) => theme.colors.v3.icon.tertiary};
+
+  &:hover,
+  &:focus {
+    color: ${({ theme }) => theme.colors.v3.icon.primary};
+  }
+
+  &:active {
+    color: ${({ theme }) => theme.colors.v3.icon.brandTertiary};
+  }
+
+  &:disabled {
+    color: ${({ theme }) => theme.colors.v3.icon.disabled};
+  }
+`;
diff --git a/src/components/common/FloatingIconButton/types.ts b/src/components/common/v3/IconButton/types.ts
similarity index 74%
rename from src/components/common/FloatingIconButton/types.ts
rename to src/components/common/v3/IconButton/types.ts
index 3c318a52a..42111304d 100644
--- a/src/components/common/FloatingIconButton/types.ts
+++ b/src/components/common/v3/IconButton/types.ts
@@ -1,7 +1,7 @@
 import { ComponentType, MouseEventHandler } from "react";
-import { IconProps } from "../icons/types";
+import { IconProps } from "../../icons/types";
 
-export interface FloatingIconButtonProps {
+export interface IconButtonProps {
   icon: {
     component: ComponentType<IconProps>;
     color?: string;
diff --git a/src/components/common/v3/NewTag/NewTag.stories.tsx b/src/components/common/v3/NewTag/NewTag.stories.tsx
index b539d7cbf..fd4f071da 100644
--- a/src/components/common/v3/NewTag/NewTag.stories.tsx
+++ b/src/components/common/v3/NewTag/NewTag.stories.tsx
@@ -15,6 +15,4 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
-  args: {}
-};
+export const Default: Story = {};
diff --git a/src/constants.ts b/src/constants.ts
index c9e94e052..5ac64d7ad 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -15,6 +15,9 @@ export const SETUP_PLUGIN_TO_ORGANIZATION_DIGMA_URL =
 export const CENTRAL_ON_PREM_INSTALLATION_GUIDE_URL =
   "https://docs.digma.ai/digma-developer-guide/installation/central-on-prem-install";
 
+export const INSTRUMENTATION_DOCUMENTATION_URL =
+  "https://docs.digma.ai/digma-developer-guide/instrumentation";
+
 export const PERCENTILES: {
   label: string;
   percentile: number;
diff --git a/src/styled.d.ts b/src/styled.d.ts
index 065a6c7d7..f2d88520e 100644
--- a/src/styled.d.ts
+++ b/src/styled.d.ts
@@ -140,7 +140,7 @@ interface FontWeights {
 }
 
 interface FontStyle {
-  lineHeight: number;
+  lineHeight?: number;
   fontSize: number;
   fontWeight: FontWeights;
 }
@@ -151,6 +151,8 @@ export interface Typographies {
   footNote: FontStyle;
   subscript: FontStyle;
   body: FontStyle;
+  subheading: FontStyle;
+  code: FontStyle;
 }
 
 declare module "styled-components" {