diff --git a/src/components/Tag/Tag.scss b/src/components/Tag/Tag.scss
index c322cd592..7bc1082f0 100644
--- a/src/components/Tag/Tag.scss
+++ b/src/components/Tag/Tag.scss
@@ -1,38 +1,70 @@
 .Tag {
-    display: flex;
+    display: inline-flex;
     align-items: center;
 
-    padding: var(--space-50) var(--space-75);
-    border-radius: var(--border-radius);
+    padding: var(--space-25) var(--space-50);
+    gap: var(--space-50);
+    border-radius: var(--space-50);
+    border: 1px solid var(--color-border-subtle);
+    cursor: default;
+    background-color: var(--bg-color, white); // Fallback to --color-background if bgColor isn't provided
+    
+    &[disabled] {
+        color: var(--color-text-disabled);
+    }
 
     &--isSelected {
-        box-shadow: 0 0 0 2px var(--color-brand-50);
+        box-shadow: 0 0 0 var(--space-25) var(--color-brand-50);
     }
 
-    &--clickable {
+    &--clickable:not([disabled]) {
         cursor: pointer;
+
+        &:hover:not([disabled]){
+            background-color: var(--color-background-neutral-subtlest-hover);
+        }
+
+        &:focus:not([disabled]) {
+            outline: none;
+            box-shadow: 0 0 0 var(--space-25) var(--color-info-20);
+        }
     }
 
     &__text{
+        composes: OneUI-label-text from global;
         margin: 0;
 
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
+        &[disabled] {
+            color: var(--color-text-disabled);
+        }
     }
 
     &__deleteButton {
         display: flex;
+        justify-content: center;
         align-items: center;
 
-        min-width: 15px;
-        min-height: 15px;
+        min-width: var(--space-200);
+        height: var(--space-200);
 
-        border: 0;
+        border: none;
+        border-radius: var(--space-25);
         cursor: pointer;
         background-color: var(--transparent);
 
         padding: 0;
-        margin-left: var(--space-50);
+
+        &:focus:not([disabled]) {
+            outline: none;
+            box-shadow: 0 0 0 var(--space-25) var(--color-info-20);
+        }
+        &[disabled] {
+            fill: var(--color-text-disabled);
+            cursor: default;
+        }
+    
     }
 }
diff --git a/src/components/Tag/Tag.tsx b/src/components/Tag/Tag.tsx
index 015f02329..b499dc9f9 100644
--- a/src/components/Tag/Tag.tsx
+++ b/src/components/Tag/Tag.tsx
@@ -1,8 +1,7 @@
 import * as React from 'react';
-import { MdClose } from 'react-icons/md';
+import Close from '@material-design-icons/svg/round/close.svg';
 import { bem } from '../../utils';
-import { Text } from '../Text';
-import { ENTER_KEY, Size } from '../../constants';
+import { ENTER_KEY } from '../../constants';
 import styles from './Tag.scss';
 
 export interface Props extends React.HTMLAttributes<HTMLDivElement> {
@@ -12,8 +11,6 @@ export interface Props extends React.HTMLAttributes<HTMLDivElement> {
     bgColor?: string;
     /** Max-width of a component */
     maxWidth?: string;
-    /** Size of the text */
-    size?: Size;
     /** Callback, that is fired when a user clicks on a delete icon */
     onDelete?: (e: React.KeyboardEvent | React.MouseEvent) => void;
     /** Callback, that is fired when a user clicks on an element */
@@ -24,6 +21,8 @@ export interface Props extends React.HTMLAttributes<HTMLDivElement> {
     contentStyle?: React.CSSProperties;
     /** Close label name for ARIA labelling, it is used when needs to clear data from component */
     closeLabel?: string;
+    /** Should tag be disabled or not */
+    disabled?: boolean;
 }
 
 const { block, elem } = bem('Tag', styles);
@@ -32,15 +31,15 @@ export const Tag = React.forwardRef<HTMLDivElement, Props>(
     (
         {
             children,
-            bgColor = 'var(--color-background)',
-            maxWidth = 'fit-content',
-            size = 'large',
+            bgColor,
+            maxWidth = '224px',
             onDelete = undefined,
             onClick = undefined,
             isSelected = false,
             contentClassName,
             contentStyle,
             closeLabel,
+            disabled,
             ...rest
         },
         ref
@@ -65,15 +64,15 @@ export const Tag = React.forwardRef<HTMLDivElement, Props>(
 
         const handleDeleteButtonKeyPress = (e: React.KeyboardEvent) => {
             e.stopPropagation();
-            e.preventDefault();
 
             if (e.key === ENTER_KEY) {
+                e.preventDefault();
                 onDelete?.(e);
             }
         };
 
         return (
-            <div
+            <span
                 {...rest}
                 ref={ref}
                 {...block({ isSelected, clickable: !!onClick, ...rest })}
@@ -84,29 +83,35 @@ export const Tag = React.forwardRef<HTMLDivElement, Props>(
                     onKeyPress: handleTagKeyPress,
                 })}
                 style={{
-                    backgroundColor: bgColor,
+                    '--bg-color': bgColor,
                     maxWidth,
                 }}
+                disabled={disabled}
             >
-                <Text
-                    size={size}
+                <span
                     {...(areChildrenString && { title: children })}
                     {...elem('text', { elemClassName: contentClassName })}
+                    disabled={disabled}
                     style={contentStyle}
                 >
                     {children}
-                </Text>
+                </span>
                 {onDelete && (
                     <button
                         onClick={handleDeleteClick}
                         onKeyDown={handleDeleteButtonKeyPress}
                         type="button"
+                        disabled={disabled}
                         {...elem('deleteButton')}
                     >
-                        <MdClose size="15px" aria-label={closeLabel} />
+                        <Close
+                            aria-label={closeLabel}
+                            style={{ width: '100%', height: '100%' }}
+                            viewBox="0 0 24 24"
+                        />
                     </button>
                 )}
-            </div>
+            </span>
         );
     }
 );
diff --git a/src/components/Tag/__tests__/Tag.spec.tsx b/src/components/Tag/__tests__/Tag.spec.tsx
index 05d40118f..76bce2322 100644
--- a/src/components/Tag/__tests__/Tag.spec.tsx
+++ b/src/components/Tag/__tests__/Tag.spec.tsx
@@ -13,7 +13,6 @@ describe('<Tag> component', () => {
     const text = 'Tag text';
     const bgColor = '#ccc';
     const maxWidth = '30px';
-    const textSize = 'large';
     const closeLabel = 'close label';
 
     it('should render correctly with minimum amount of props', () => {
@@ -29,7 +28,6 @@ describe('<Tag> component', () => {
                 isSelected
                 bgColor={bgColor}
                 maxWidth={maxWidth}
-                size={textSize}
                 onClick={onTagClick}
                 onDelete={onDeleteClick}
                 contentClassName="my-class"
@@ -43,10 +41,7 @@ describe('<Tag> component', () => {
 
         expect(view.container).toMatchSnapshot();
         expect(button).toBeInTheDocument();
-        expect(button).toHaveAttribute(
-            'style',
-            'background-color: rgb(204, 204, 204); max-width: 30px;'
-        );
+        expect(button).toHaveAttribute('style', '--bg-color: #ccc; max-width: 30px;');
     });
 
     it('should invoke callback when onClick event is called', async () => {
diff --git a/src/components/Tag/__tests__/__snapshots__/Tag.spec.tsx.snap b/src/components/Tag/__tests__/__snapshots__/Tag.spec.tsx.snap
index 6e325a9fa..4eb5f2eae 100644
--- a/src/components/Tag/__tests__/__snapshots__/Tag.spec.tsx.snap
+++ b/src/components/Tag/__tests__/__snapshots__/Tag.spec.tsx.snap
@@ -2,57 +2,45 @@
 
 exports[`<Tag> component should render correctly with full list of props 1`] = `
 <div>
-  <div
+  <span
     class="Tag Tag--isSelected Tag--clickable"
     role="button"
-    style="background-color: rgb(204, 204, 204); max-width: 30px;"
+    style="--bg-color: #ccc; max-width: 30px;"
     tabindex="0"
   >
-    <p
+    <span
       class="Tag__text my-class"
       style="color: red;"
       title="Tag text"
     >
       Tag text
-    </p>
+    </span>
     <button
       class="Tag__deleteButton"
       type="button"
     >
       <svg
-        fill="currentColor"
-        height="15px"
-        stroke="currentColor"
-        stroke-width="0"
+        data-testid="default-icon"
+        style="width: 100%; height: 100%;"
         viewBox="0 0 24 24"
-        width="15px"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M0 0h24v24H0z"
-          fill="none"
-        />
-        <path
-          d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-        />
-      </svg>
+      />
     </button>
-  </div>
+  </span>
 </div>
 `;
 
 exports[`<Tag> component should render correctly with minimum amount of props 1`] = `
 <div>
-  <div
+  <span
     class="Tag"
-    style="max-width: fit-content;"
+    style="max-width: 224px;"
   >
-    <p
+    <span
       class="Tag__text"
       title="Tag text"
     >
       Tag text
-    </p>
-  </div>
+    </span>
+  </span>
 </div>
 `;
diff --git a/src/components/Teaser/__tests__/__snapshots__/Teaser.spec.tsx.snap b/src/components/Teaser/__tests__/__snapshots__/Teaser.spec.tsx.snap
index fade2a4a5..a79a2097e 100644
--- a/src/components/Teaser/__tests__/__snapshots__/Teaser.spec.tsx.snap
+++ b/src/components/Teaser/__tests__/__snapshots__/Teaser.spec.tsx.snap
@@ -325,28 +325,28 @@ exports[`Teaser should render with all props defined 1`] = `
       <div
         class="Teaser__bottom"
       >
-        <div
+        <span
           class="Tag"
-          style="background-color: yellow; max-width: fit-content;"
+          style="--bg-color: yellow; max-width: 224px;"
         >
-          <p
+          <span
             class="Tag__text"
             title="First Tag"
           >
             First Tag
-          </p>
-        </div>
-        <div
+          </span>
+        </span>
+        <span
           class="Tag"
-          style="background-color: lightblue; max-width: fit-content;"
+          style="--bg-color: lightblue; max-width: 224px;"
         >
-          <p
+          <span
             class="Tag__text"
             title="Second Tag"
           >
             Second Tag
-          </p>
-        </div>
+          </span>
+        </span>
       </div>
     </div>
   </div>
diff --git a/stories/atoms/Tag.stories.tsx b/stories/atoms/Tag.stories.tsx
index fda764736..2ca08053b 100644
--- a/stories/atoms/Tag.stories.tsx
+++ b/stories/atoms/Tag.stories.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { FiCheck } from 'react-icons/fi';
 import { Tag } from '@textkernel/oneui';
 
 const meta: Meta<typeof Tag> = {
@@ -10,9 +9,6 @@ const meta: Meta<typeof Tag> = {
         bgColor: {
             options: ['#3eff2b', '#ffa139', 'var(--color-background)'],
         },
-        size: {
-            options: ['small', 'medium', 'large'],
-        },
     },
 };
 
@@ -23,10 +19,14 @@ type Story = StoryObj<typeof Tag>;
 export const _Tag: Story = {
     name: 'Tag',
     args: {
-        bgColor: '#3eff2b',
         isSelected: false,
-        maxWidth: 'fit-content',
         children: 'This is an extremely long long text!',
+        onClick: () => {
+            console.log('onClick: The tag has been clicked');
+        },
+        onDelete: () => {
+            console.log('onDelete: The delete button has been clicked');
+        },
     },
     render: (args) => (
         <div
@@ -39,18 +39,35 @@ export const _Tag: Story = {
     ),
 };
 
-export const TagWithIcon: Story = {
-    name: 'Tag with icon',
+export const ReadOnlyTag: Story = {
+    name: 'ReadOnly Tag',
     args: {
-        bgColor: '#3eff2b',
-        isSelected: false,
-        maxWidth: 'fit-content',
-        children: (
-            <>
-                <FiCheck />
-                Some text
-            </>
-        ),
+        children: <>Read Only</>,
+        contentClassName: 'test-class',
+        contentStyle: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 'var(--space-75)',
+        },
+        onDelete: undefined,
+        onClick: undefined,
+    },
+    render: (args) => (
+        <div
+            style={{
+                padding: '5px',
+            }}
+        >
+            <Tag {...args} />
+        </div>
+    ),
+};
+
+export const ColoredTag: Story = {
+    name: 'Colored Tag',
+    args: {
+        bgColor: '#0097D1',
+        children: <>Colored Tag</>,
         contentClassName: 'test-class',
         contentStyle: {
             display: 'flex',
diff --git a/stories/molecules/Teaser.stories.tsx b/stories/molecules/Teaser.stories.tsx
index 240b1e2dc..e479cff23 100644
--- a/stories/molecules/Teaser.stories.tsx
+++ b/stories/molecules/Teaser.stories.tsx
@@ -34,12 +34,8 @@ export const WithAllFields: Story = {
         matchingIndicatorPercentage: 50,
         bottom: (
             <div style={{ display: 'flex', gap: '8px' }}>
-                <Tag bgColor="yellow" size="small">
-                    First
-                </Tag>
-                <Tag bgColor="lightblue" size="small">
-                    Second
-                </Tag>
+                <Tag bgColor="yellow">First</Tag>
+                <Tag bgColor="lightblue">Second</Tag>
             </div>
         ),
         disabled: true,
@@ -73,12 +69,10 @@ export const WithoutCheckbox: Story = {
         date: 'about 1 month ago',
         bottom: (
             <div style={{ display: 'flex', gap: '8px' }}>
-                <Tag bgColor="yellow" size="small" onDelete={() => console.log('Deleted')}>
+                <Tag bgColor="yellow" onDelete={() => console.log('Deleted')}>
                     First
                 </Tag>
-                <Tag bgColor="lightblue" size="small">
-                    Second
-                </Tag>
+                <Tag bgColor="lightblue">Second</Tag>
             </div>
         ),
     },
@@ -149,12 +143,10 @@ export const VariantThree: Story = {
         date: 'Today',
         bottom: (
             <div style={{ display: 'flex', gap: '8px' }}>
-                <Tag bgColor="yellow" size="small" onDelete={() => console.log('Deleted')}>
+                <Tag bgColor="yellow" onDelete={() => console.log('Deleted')}>
                     First
                 </Tag>
-                <Tag bgColor="lightblue" size="small">
-                    Second
-                </Tag>
+                <Tag bgColor="lightblue">Second</Tag>
             </div>
         ),
     },