diff --git a/.changeset/smooth-baboons-beg.md b/.changeset/smooth-baboons-beg.md
new file mode 100644
index 0000000000..4c1c04ba5c
--- /dev/null
+++ b/.changeset/smooth-baboons-beg.md
@@ -0,0 +1,6 @@
+---
+'@commercetools-uikit/tag': minor
+---
+
+Component UI styling updates.  
+
diff --git a/packages/components/tag/src/tag-body.tsx b/packages/components/tag/src/tag-body.tsx
index f33f33c903..ebbe0406df 100644
--- a/packages/components/tag/src/tag-body.tsx
+++ b/packages/components/tag/src/tag-body.tsx
@@ -30,18 +30,6 @@ const defaultProps: Pick<TTagProps, 'type' | 'isDisabled' | 'isDraggable'> = {
 type TBody = Pick<TTagBodyProps, 'to' | 'as'>;
 const Body = styled.div<TBody>``;
 
-const getClickableContentWrapperStyles = (type: TTagBodyProps['type']) => {
-  return type === 'warning'
-    ? []
-    : [
-        css`
-          &:hover {
-            border-color: ${designTokens.colorNeutral};
-          }
-        `,
-      ];
-};
-
 const getTextDetailColor = (isDisabled: TTagBodyProps['isDisabled']) => {
   if (isDisabled) return designTokens.colorNeutral60;
   return designTokens.colorSolid;
@@ -51,20 +39,13 @@ const getContentWrapperStyles = (props: TTagBodyProps) => {
   return css`
     position: relative;
     display: flex;
-    box-sizing: border-box;
     align-items: center;
-    border-radius: ${designTokens.borderRadius2};
     padding: ${designTokens.spacing05} ${designTokens.spacing25};
     white-space: normal;
     text-align: left;
     min-width: 0;
     overflow-wrap: break-word;
     hyphens: auto;
-    border-style: solid;
-    border-width: 1px;
-    border-color: ${props.type === 'warning'
-      ? designTokens.colorWarning
-      : designTokens.borderColorForTag};
     color: ${designTokens.colorSolid};
     fill: ${designTokens.colorNeutral40};
 
@@ -93,15 +74,6 @@ const TagBody = (props: TTagBodyProps) => {
       as={props.as}
       css={[
         getContentWrapperStyles(props),
-        Boolean(props.onRemove) &&
-          css`
-            border-right: ${!props.isDisabled && '0'};
-            border-top-right-radius: 0;
-            border-bottom-right-radius: 0;
-          `,
-        !props.isDisabled &&
-          Boolean(props.onClick) &&
-          getClickableContentWrapperStyles(props.type),
         !props.isDisabled &&
           Boolean(props.onClick) &&
           css`
@@ -117,9 +89,9 @@ const TagBody = (props: TTagBodyProps) => {
         {props.isDraggable && !props.isDisabled ? (
           <DragIcon data-testid="drag-icon" size="medium" />
         ) : null}
-        <Text.Body tone={textTone} as="span">
+        <Text.Detail tone={textTone} as="span">
           {props.children}
-        </Text.Body>
+        </Text.Detail>
       </Spacings.Inline>
     </Body>
   );
diff --git a/packages/components/tag/src/tag.spec.js b/packages/components/tag/src/tag.spec.js
index c7103ef047..82de76b265 100644
--- a/packages/components/tag/src/tag.spec.js
+++ b/packages/components/tag/src/tag.spec.js
@@ -5,6 +5,20 @@ it('should render text as children', () => {
   render(<Tag>Bread</Tag>);
   expect(screen.getByText('Bread')).toBeInTheDocument();
 });
+
+it('should render multiple text children', () => {
+  render(
+    <Tag>
+      <span>Bread</span>
+      <span>Peanut Butter</span>
+      <span>Honey</span>
+    </Tag>
+  );
+  expect(screen.getByText('Bread')).toBeInTheDocument();
+  expect(screen.getByText('Peanut Butter')).toBeInTheDocument();
+  expect(screen.getByText('Honey')).toBeInTheDocument();
+});
+
 it('should render html markup as children', () => {
   const error = jest.spyOn(console, 'error').mockImplementation(() => {});
   render(
@@ -108,10 +122,26 @@ describe('when `to` is set', () => {
     );
     screen.getByText('Bread').click();
     expect(onClick).toHaveBeenCalled();
-
     expect(history.location.pathname).toBe('/foo');
   });
 
+  it('should redirect on link click if text children proceed it', () => {
+    const { history } = render(
+      <Tag>
+        <span>Bread</span>
+        <span>Peanut Butter</span>
+        <span onClick={() => history.push('/honey')}>Honey</span>
+      </Tag>
+    );
+
+    expect(screen.getByText('Bread')).toBeInTheDocument();
+    expect(screen.getByText('Peanut Butter')).toBeInTheDocument();
+    expect(screen.getByText('Honey')).toBeInTheDocument();
+
+    screen.getByText('Honey').click();
+    expect(history.location.pathname).toBe('/honey');
+  });
+
   it('should not redirect when removed', () => {
     const onRemove = jest.fn();
     const { history } = render(
@@ -126,7 +156,7 @@ describe('when `to` is set', () => {
     expect(onRemove).toHaveBeenCalled();
 
     // ensure the pathname is not "/foo", otherwise a redirect would have
-    // happend
+    // happened
     expect(history.location.pathname).toBe('/');
   });
 
@@ -140,7 +170,7 @@ describe('when `to` is set', () => {
     screen.getByText('Bread').click();
 
     // ensure the pathname is not "/foo", otherwise a redirect would have
-    // happend
+    // happened
     expect(history.location.pathname).toBe('/');
   });
 });
diff --git a/packages/components/tag/src/tag.tsx b/packages/components/tag/src/tag.tsx
index 73c39cce24..d61463fefe 100644
--- a/packages/components/tag/src/tag.tsx
+++ b/packages/components/tag/src/tag.tsx
@@ -88,18 +88,28 @@ const Tag = (props: TTagProps) => {
             cursor: pointer;
             text-decoration: none;
           }
+          box-sizing: border-box;
           cursor: default;
           min-width: 0;
           display: flex;
-          background-color: ${props.type === 'warning'
+          border-radius: ${designTokens.borderRadius20};
+          border-style: solid;
+          border-width: 1px;
+          background-color: ${props.isDisabled
+            ? designTokens.colorNeutral95
+            : props.type === 'warning'
             ? designTokens.colorWarning95
             : designTokens.backgroundColorForTag};
-
+          border-color: ${props.isDisabled
+            ? designTokens.colorNeutral
+            : props.type === 'warning'
+            ? designTokens.colorWarning85
+            : designTokens.borderColorForTag};
           ${props.onClick &&
           `&:hover {
             background-color: ${
               props.type === 'warning'
-                ? designTokens.colorWarning95
+                ? designTokens.colorWarning85
                 : designTokens.backgroundColorForTagWhenHovered
             };
           }`}
@@ -124,25 +134,9 @@ const Tag = (props: TTagProps) => {
             onClick={props.onRemove}
             css={[
               css`
-                border-color: ${props.type === 'warning'
-                  ? designTokens.colorWarning
-                  : designTokens.borderColorForTag};
                 padding: 0 ${designTokens.spacing25};
-                border-radius: 0 ${designTokens.borderRadius2}
-                  ${designTokens.borderRadius2} 0;
                 display: flex;
                 align-items: center;
-                background: inherit;
-                border-style: solid;
-                border-width: 1px 1px 1px 0;
-                :not(:disabled)&:hover,
-                :not(:disabled)&:focus {
-                  border-color: ${props.type === 'warning'
-                    ? designTokens.colorWarning
-                    : designTokens.borderColorForTag};
-
-                  fill: ${designTokens.colorError};
-                }
                 fill: ${designTokens.colorNeutral40};
                 &:disabled {
                   fill: ${designTokens.colorNeutral60};