diff --git a/package.json b/package.json
index 3eddbe5..df38331 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@beeinventor/dasiot-react-component-lib",
-  "version": "1.8.3",
+  "version": "1.8.4",
   "module": "lib/index.js",
   "types": "lib/index.d.ts",
   "files": [
diff --git a/src/components/Dropdown/Dropdown.stories.tsx b/src/components/Dropdown/Dropdown.stories.tsx
index 5013a89..f26b6f3 100644
--- a/src/components/Dropdown/Dropdown.stories.tsx
+++ b/src/components/Dropdown/Dropdown.stories.tsx
@@ -27,6 +27,11 @@ const list: DropDownItem[] = [
     value: 'A004',
     name: 'Distributor C',
   },
+  {
+    id: 'A004',
+    value: 'A004',
+    name: 'Very long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long',
+  },
 ];
 
 const meta: Meta<typeof Dropdown> = {
@@ -64,6 +69,30 @@ export const Default: Story = {
   render: () => <Dropdown list={list} onSelect={() => {}} />,
 };
 
+export const FixItemTooLong: Story = {
+  render: () => (
+    <Dropdown
+      list={list}
+      onSelect={() => {}}
+      popperProps={{
+        sx: {
+          '& .Dropdown-icon': {
+            flexShrink: 0,
+          },
+          '& .Dropdown-item': {
+            '> span': {
+              minWidth: 0,
+              textOverflow: 'ellipsis',
+              overflow: 'hidden',
+              whiteSpace: 'nowrap',
+            },
+          },
+        },
+      }}
+    />
+  ),
+};
+
 export const Exceptance: Story = {
   render: () => (
     <Dropdown
diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
index cf411bc..5ff5885 100644
--- a/src/components/Dropdown/Dropdown.tsx
+++ b/src/components/Dropdown/Dropdown.tsx
@@ -36,6 +36,13 @@ const Root = styled(Box)(({ theme }) => ({
     opacity: 0.3,
     pointerEvents: 'none',
   },
+
+  '& .selected-name': {
+    minWidth: 0,
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+  },
 }));
 
 const List = styled(Box)(({ theme }) => ({
@@ -148,7 +155,7 @@ const Dropdown: React.FC<DropDownProps> = (props) => {
         <Icon className="Dropdown-icon">
           {selectedItem?.id === item.id && <img src={CheckSvg} />}
         </Icon>
-        {item.name}
+        <span title={item.name}>{item.name}</span>
       </Item>
     ));
 
@@ -172,7 +179,12 @@ const Dropdown: React.FC<DropDownProps> = (props) => {
         onClick={handleOnClickSelect}
         {...otherProps}
       >
-        {selectedItem?.name ?? placeholder}
+        <span
+          className="selected-name"
+          title={selectedItem?.name ?? placeholder}
+        >
+          {selectedItem?.name ?? placeholder}
+        </span>
         <Icon className="Dropdown-icon">
           {isOpen ? <KeyboardArrowUp /> : <KeyboardArrowDown />}
         </Icon>