diff --git a/web/public/SF-Pro-Text-Bold.otf b/web/public/SF-Pro-Text-Bold.otf
new file mode 100755
index 0000000000..840d8109fb
Binary files /dev/null and b/web/public/SF-Pro-Text-Bold.otf differ
diff --git a/web/public/SF-Pro-Text-Semibold.otf b/web/public/SF-Pro-Text-Semibold.otf
new file mode 100755
index 0000000000..a20e7a0a7d
Binary files /dev/null and b/web/public/SF-Pro-Text-Semibold.otf differ
diff --git a/web/src/App.less b/web/src/App.less
index c9f8cbc190..c63137c59c 100644
--- a/web/src/App.less
+++ b/web/src/App.less
@@ -2,9 +2,22 @@
 
 @font-face {
   font-family: SFPro;
+  font-weight: normal;
   src: url('../public/SF-Pro-Text-Regular.otf') format('opentype');
 }
 
+@font-face {
+  font-family: SFPro;
+  font-weight: 600;
+  src: url('../public/SF-Pro-Text-Semibold.otf') format('opentype');
+}
+
+@font-face {
+  font-family: SFPro;
+  font-weight: bold;
+  src: url('../public/SF-Pro-Text-Bold.otf') format('opentype');
+}
+
 html,
 body {
   height: 100vh;
diff --git a/web/src/components/DocsBanner/DocsBanner.styled.ts b/web/src/components/DocsBanner/DocsBanner.styled.ts
index d1820112d7..b6bf7e6905 100644
--- a/web/src/components/DocsBanner/DocsBanner.styled.ts
+++ b/web/src/components/DocsBanner/DocsBanner.styled.ts
@@ -1,4 +1,4 @@
-import { Typography } from 'antd';
+import {Typography} from 'antd';
 import styled from 'styled-components';
 
 export const DocsBannerContainer = styled.div`
@@ -8,11 +8,11 @@ export const DocsBannerContainer = styled.div`
   padding: 12px 18px;
   border-radius: 2px;
   width: max-content;
-  background: ${({ theme }) => theme.color.backgroundInteractive};
+  background: ${({theme}) => theme.color.backgroundInteractive};
 `;
 
 export const Text = styled(Typography.Text)`
   a {
-    font-weight: 700;
+    font-weight: 600;
   }
 `;
diff --git a/web/src/components/EditTest/EditTest.styled.ts b/web/src/components/EditTest/EditTest.styled.ts
index b95471947e..234809ee45 100644
--- a/web/src/components/EditTest/EditTest.styled.ts
+++ b/web/src/components/EditTest/EditTest.styled.ts
@@ -5,7 +5,6 @@ export const Title = styled(Typography.Title)`
   && {
     font-size: ${({theme}) => theme.size.lg};
     margin-bottom: 25px;
-    font-weight: 700;
   }
 `;
 
diff --git a/web/src/components/EditTransaction/EditTransaction.styled.ts b/web/src/components/EditTransaction/EditTransaction.styled.ts
index b95471947e..234809ee45 100644
--- a/web/src/components/EditTransaction/EditTransaction.styled.ts
+++ b/web/src/components/EditTransaction/EditTransaction.styled.ts
@@ -5,7 +5,6 @@ export const Title = styled(Typography.Title)`
   && {
     font-size: ${({theme}) => theme.size.lg};
     margin-bottom: 25px;
-    font-weight: 700;
   }
 `;
 
diff --git a/web/src/components/RunDetailAutomateDefinition/RunDetailAutomateDefinition.styled.ts b/web/src/components/RunDetailAutomateDefinition/RunDetailAutomateDefinition.styled.ts
index 1d9a58bea4..a3a5459ca0 100644
--- a/web/src/components/RunDetailAutomateDefinition/RunDetailAutomateDefinition.styled.ts
+++ b/web/src/components/RunDetailAutomateDefinition/RunDetailAutomateDefinition.styled.ts
@@ -9,7 +9,6 @@ export const Title = styled(Typography.Title)`
   && {
     font-size: ${({theme}) => theme.size.lg};
     margin-bottom: 16px;
-    font-weight: 700;
   }
 `;
 
diff --git a/web/src/components/RunDetailAutomateMethods/RunDetailAutomateMethods.styled.ts b/web/src/components/RunDetailAutomateMethods/RunDetailAutomateMethods.styled.ts
index 4cc5422a48..8318ea9617 100644
--- a/web/src/components/RunDetailAutomateMethods/RunDetailAutomateMethods.styled.ts
+++ b/web/src/components/RunDetailAutomateMethods/RunDetailAutomateMethods.styled.ts
@@ -20,7 +20,6 @@ export const Title = styled(Typography.Title)`
   && {
     font-size: ${({theme}) => theme.size.lg};
     margin: 0;
-    font-weight: 700;
   }
 `;
 
@@ -87,11 +86,6 @@ export const Text = styled(Typography.Text)`
   font-size: ${({theme}) => theme.size.sm};
 `;
 
-export const StatusSpan = styled.span<{$isError: boolean}>`
-  color: ${({$isError, theme}) => ($isError ? theme.color.error : theme.color.success)};
-  font-weight: 700;
-`;
-
 export const HeadersList = styled.div`
   display: flex;
   flex-direction: column;
diff --git a/web/src/components/RunDetailTriggerResponse/RunDetailTriggerResponse.styled.ts b/web/src/components/RunDetailTriggerResponse/RunDetailTriggerResponse.styled.ts
index e5e547ff86..269786ea66 100644
--- a/web/src/components/RunDetailTriggerResponse/RunDetailTriggerResponse.styled.ts
+++ b/web/src/components/RunDetailTriggerResponse/RunDetailTriggerResponse.styled.ts
@@ -20,7 +20,6 @@ export const Title = styled(Typography.Title)`
   && {
     font-size: ${({theme}) => theme.size.lg};
     margin: 0;
-    font-weight: 700;
   }
 `;
 
@@ -83,7 +82,7 @@ export const Text = styled(Typography.Text)`
 
 export const StatusSpan = styled.span<{$isError: boolean}>`
   color: ${({$isError, theme}) => ($isError ? theme.color.error : theme.color.success)};
-  font-weight: 700;
+  font-weight: 600;
 `;
 
 export const HeadersList = styled.div`
diff --git a/web/src/components/RunEvents/RunEvents.styled.ts b/web/src/components/RunEvents/RunEvents.styled.ts
index 4c616ec3de..f05ac57da2 100644
--- a/web/src/components/RunEvents/RunEvents.styled.ts
+++ b/web/src/components/RunEvents/RunEvents.styled.ts
@@ -72,7 +72,7 @@ export const InfoIcon = styled(InfoCircleFilled)<{$isLarge?: boolean}>`
 `;
 
 export const Link = styled(Typography.Link)`
-  font-weight: bold;
+  font-weight: 600;
 `;
 
 export const ListContainer = styled.div`
diff --git a/web/src/components/Settings/DataStore/DataStore.styled.ts b/web/src/components/Settings/DataStore/DataStore.styled.ts
index 5da1f2d4b2..37eb8df553 100644
--- a/web/src/components/Settings/DataStore/DataStore.styled.ts
+++ b/web/src/components/Settings/DataStore/DataStore.styled.ts
@@ -5,7 +5,7 @@ export const Title = styled(Typography.Title)`
   && {
     font-size: ${({theme}) => theme.size.md};
     margin-bottom: 16px;
-    font-weight: 700;
+    font-weight: 600;
   }
 `;
 
diff --git a/web/src/components/Settings/DataStoreForm/DataStoreForm.styled.ts b/web/src/components/Settings/DataStoreForm/DataStoreForm.styled.ts
index dfc940b94e..194d3e8fe7 100644
--- a/web/src/components/Settings/DataStoreForm/DataStoreForm.styled.ts
+++ b/web/src/components/Settings/DataStoreForm/DataStoreForm.styled.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import {Typography} from 'antd';
-import { CheckCircleOutlined } from '@ant-design/icons';
+import {CheckCircleOutlined} from '@ant-design/icons';
 
 export const FormContainer = styled.div`
   display: grid;
@@ -73,7 +73,6 @@ export const DataStoreName = styled(Typography.Text)<{$isSelected: boolean}>`
 export const Title = styled(Typography.Title)`
   && {
     font-size: ${({theme}) => theme.size.md};
-    font-weight: 700;
     margin: 0 !important;
   }
 `;
diff --git a/web/src/components/Settings/DataStorePlugin/DataStorePluginForm.styled.ts b/web/src/components/Settings/DataStorePlugin/DataStorePluginForm.styled.ts
index cd4a00331b..1637e9dcc2 100644
--- a/web/src/components/Settings/DataStorePlugin/DataStorePluginForm.styled.ts
+++ b/web/src/components/Settings/DataStorePlugin/DataStorePluginForm.styled.ts
@@ -56,7 +56,6 @@ export const FormColumn = styled.div`
 export const Title = styled(Typography.Title)`
   && {
     font-size: ${({theme}) => theme.size.md};
-    font-weight: 700;
     margin: 0;
   }
 `;
diff --git a/web/src/components/TestSpecForm/Fields/AttributeField.styled.tsx b/web/src/components/TestSpecForm/Fields/AttributeField.styled.tsx
deleted file mode 100644
index 238c32be03..0000000000
--- a/web/src/components/TestSpecForm/Fields/AttributeField.styled.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import styled from 'styled-components';
-import {Form, Tag as AntdTag, Select as AntSelect} from 'antd';
-
-export const Container = styled.div`
-  display: inline-flex;
-  width: 100%;
-  .ant-select-item-option-active:hover {
-    background-color: #faf4fe !important;
-  }
-`;
-
-export const Select = styled(AntSelect)`
-  min-width: 88px;
-
-  > .ant-select-selector {
-    min-height: 100%;
-  }
-`;
-
-export const FormItem = styled(Form.Item)`
-  margin: 0;
-`;
-export const Sides = styled.div`
-  flex-basis: 50%;
-  max-width: 50%;
-  min-width: 50%;
-`;
-
-export const Tag = styled(AntdTag)`
-  background: #e7e8eb;
-`;
-
-export const Title = styled.p`
-  font-weight: bold;
-`;
-
-export const TagsContainer = styled.div`
-  margin-top: 8px;
-`;
-
-export const Content = styled.div`
-  padding: 10px 10px;
-`;
diff --git a/web/src/components/TestSpecForm/Fields/AttributeField.tsx b/web/src/components/TestSpecForm/Fields/AttributeField.tsx
deleted file mode 100644
index 44b7833888..0000000000
--- a/web/src/components/TestSpecForm/Fields/AttributeField.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import {FormItemProps, Select, Form} from 'antd';
-import {uniqBy} from 'lodash';
-import {useMemo, useState} from 'react';
-import SpanAttributeService from 'services/SpanAttribute.service';
-import {TSpanFlatAttribute} from 'types/Span.types';
-import {OtelReference} from '../hooks/useGetOTELSemanticConventionAttributesInfo';
-import * as S from './AttributeField.styled';
-import {useDropDownRenderComponent} from './useDropDownRenderComponent';
-
-interface IProps extends FormItemProps {
-  attributeList: TSpanFlatAttribute[];
-  reference: OtelReference;
-}
-
-const AttributeField = ({reference, attributeList, ...props}: IProps) => {
-  const [hoveredKey, setHoveredKey] = useState<string | undefined>(undefined);
-  const [newAttribute, setNewAttribute] = useState<string | undefined>(undefined);
-
-  const filteredAttributedList = useMemo(() => {
-    const list = uniqBy(attributeList, 'key');
-
-    return newAttribute ? [{key: newAttribute, value: ''}, ...list] : list;
-  }, [attributeList, newAttribute]);
-
-  return (
-    <Form.Item {...props}>
-      <S.Select
-        placeholder="Select Attribute"
-        showSearch
-        dropdownRender={useDropDownRenderComponent(reference, hoveredKey)}
-        dropdownStyle={hoveredKey ? {minWidth: 550, maxWidth: 550} : undefined}
-        filterOption={(search, option) =>
-          SpanAttributeService.getItMatchesAttributeByKey(reference, option?.key || '', search)
-        }
-        onSearch={searchValue => setNewAttribute(searchValue)}
-      >
-        {filteredAttributedList.map(({key}) => (
-          <Select.Option key={key} value={key}>
-            <div onFocus={() => {}} onMouseOver={() => setHoveredKey(key)}>
-              {key}
-            </div>
-          </Select.Option>
-        ))}
-      </S.Select>
-    </Form.Item>
-  );
-};
-
-export default AttributeField;
diff --git a/web/src/components/TestSpecForm/Fields/useDropDownRenderComponent.tsx b/web/src/components/TestSpecForm/Fields/useDropDownRenderComponent.tsx
deleted file mode 100644
index 39fc93b965..0000000000
--- a/web/src/components/TestSpecForm/Fields/useDropDownRenderComponent.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import parse from 'html-react-parser';
-import MarkdownIt from 'markdown-it';
-import React, {useMemo} from 'react';
-import SpanAttributeService from 'services/SpanAttribute.service';
-import {OtelReference} from '../hooks/useGetOTELSemanticConventionAttributesInfo';
-import * as S from './AttributeField.styled';
-
-export function useDropDownRenderComponent(
-  reference: OtelReference,
-  hoveredKey = ''
-): (menu: React.ReactElement) => React.ReactElement {
-  const otelReferenceModel = SpanAttributeService.getReferencePicker(reference, hoveredKey || '');
-  const description = useMemo(() => parse(MarkdownIt().render(otelReferenceModel.description)), [otelReferenceModel]);
-
-  return menu => {
-    return hoveredKey ? (
-      <S.Container>
-        <S.Sides>{menu}</S.Sides>
-        <S.Sides>
-          <S.Content>
-            <S.Title>{hoveredKey}</S.Title>
-            {otelReferenceModel.description !== '' ? description : 'There is no description for this attribute yet.'}
-            <S.TagsContainer>
-              {otelReferenceModel.tags.map(tag => (
-                <S.Tag key={tag}>{tag}</S.Tag>
-              ))}
-            </S.TagsContainer>
-          </S.Content>
-        </S.Sides>
-      </S.Container>
-    ) : (
-      menu
-    );
-  };
-}
diff --git a/web/src/components/TransactionRunResult/TransactionRunResult.styled.ts b/web/src/components/TransactionRunResult/TransactionRunResult.styled.ts
index 2ec190c976..5630e86402 100644
--- a/web/src/components/TransactionRunResult/TransactionRunResult.styled.ts
+++ b/web/src/components/TransactionRunResult/TransactionRunResult.styled.ts
@@ -98,7 +98,7 @@ export const EntryPointTag = styled(TextTag)`
 
 export const ExecutionStepStatus = styled.div`
   color: ${({theme}) => theme.color.textLight};
-  font-weight: 700;
+  font-weight: 600;
 `;
 
 export const ExecutionStepRunLink = styled(Link)`
diff --git a/web/src/pages/Environments/Environment.styled.tsx b/web/src/pages/Environments/Environment.styled.tsx
index 51fb93da2e..4b3d193118 100644
--- a/web/src/pages/Environments/Environment.styled.tsx
+++ b/web/src/pages/Environments/Environment.styled.tsx
@@ -47,15 +47,9 @@ export const VariablesText = styled(Typography)`
   flex-basis: 50%;
 `;
 
-export const HeaderText = styled(Typography)`
+export const HeaderText = styled(Typography.Text)`
   flex-basis: 50%;
-  font-weight: bold;
-  padding-left: 8px;
-`;
-
-export const HeaderTextRight = styled(Typography)`
-  flex-basis: 50%;
-  font-weight: bold;
+  font-weight: 600;
 `;
 
 export const VariablesMainContainer = styled.div`
diff --git a/web/src/pages/Environments/EnvironmentCard.tsx b/web/src/pages/Environments/EnvironmentCard.tsx
index 602ffd859e..325ebec12d 100644
--- a/web/src/pages/Environments/EnvironmentCard.tsx
+++ b/web/src/pages/Environments/EnvironmentCard.tsx
@@ -90,7 +90,7 @@ export const EnvironmentCard = ({
           <E.VariablesMainContainer>
             <E.HeaderContainer>
               <E.HeaderText>Key</E.HeaderText>
-              <E.HeaderTextRight>Value</E.HeaderTextRight>
+              <E.HeaderText>Value</E.HeaderText>
             </E.HeaderContainer>
             <E.VariablesContainer>
               {values.map(value => (