diff --git a/packages/view/src/components/BranchSelector/BranchSelector.const.ts b/packages/view/src/components/BranchSelector/BranchSelector.const.ts
new file mode 100644
index 00000000..a444b877
--- /dev/null
+++ b/packages/view/src/components/BranchSelector/BranchSelector.const.ts
@@ -0,0 +1 @@
+export const SLICE_LENGTH = 15;
diff --git a/packages/view/src/components/BranchSelector/BranchSelector.tsx b/packages/view/src/components/BranchSelector/BranchSelector.tsx
index 3792e576..5425f30f 100644
--- a/packages/view/src/components/BranchSelector/BranchSelector.tsx
+++ b/packages/view/src/components/BranchSelector/BranchSelector.tsx
@@ -8,6 +8,8 @@ import { sendFetchAnalyzedDataCommand } from "services";
 import "./BranchSelector.scss";
 import { useLoadingStore } from "store";
 
+import { SLICE_LENGTH } from "./BranchSelector.const";
+
 const BranchSelector = () => {
   const { branchList, selectedBranch, setSelectedBranch } = useGlobalData();
   const { setLoading } = useLoadingStore((state) => state);
@@ -53,8 +55,9 @@ const BranchSelector = () => {
             <MenuItem
               key={option}
               value={option}
+              title={option}
             >
-              {option}
+              {option.length <= SLICE_LENGTH ? option : `${option.slice(0, SLICE_LENGTH)}...`}
             </MenuItem>
           ))}
         </Select>
diff --git a/packages/view/src/fake-assets/branch-list.json b/packages/view/src/fake-assets/branch-list.json
index b8a91dc6..94dbe1d5 100644
--- a/packages/view/src/fake-assets/branch-list.json
+++ b/packages/view/src/fake-assets/branch-list.json
@@ -1,4 +1,4 @@
 {
-  "branchList": ["main", "develop", "release", "origin/HEAD"],
+  "branchList": ["main", "develop", "release", "origin/HEAD", "feature/SelectedClusterGroup"],
   "head": "main"
 }