diff --git a/src/front/Components/DesignSystem/Dropdown/DropdownMenu/classes.module.scss b/src/front/Components/DesignSystem/Dropdown/DropdownMenu/classes.module.scss
index d8742a45..a56ca26e 100644
--- a/src/front/Components/DesignSystem/Dropdown/DropdownMenu/classes.module.scss
+++ b/src/front/Components/DesignSystem/Dropdown/DropdownMenu/classes.module.scss
@@ -30,6 +30,7 @@
 		overflow: visible;
 		.content {
 			max-height: 500px;
+			overflow: auto;
 			opacity: 1;
 		}
 	}
diff --git a/src/front/Components/DesignSystem/SearchBlockList/DropdownNavigation/index.tsx b/src/front/Components/DesignSystem/SearchBlockList/DropdownNavigation/index.tsx
index 50c7ef77..990f292d 100644
--- a/src/front/Components/DesignSystem/SearchBlockList/DropdownNavigation/index.tsx
+++ b/src/front/Components/DesignSystem/SearchBlockList/DropdownNavigation/index.tsx
@@ -1,8 +1,8 @@
-import React, { useCallback, useEffect } from "react";
+import React, { useEffect } from "react";
 import { IBlock } from "../BlockList/Block";
 import classes from "./classes.module.scss";
-import Typography, { ETypo, ETypoColor } from "../../Typography";
-import { ChevronDownIcon } from "@heroicons/react/24/outline";
+import Dropdown from "../../Dropdown";
+import { IOption } from "../../Dropdown/DropdownMenu/DropdownOption";
 type IProps = {
 	blocks: IBlock[];
 	onSelectedBlock: (block: IBlock) => void;
@@ -11,72 +11,25 @@ type IProps = {
 
 export default function DropdownNavigation({ blocks, onSelectedBlock, defaultSelectedBlock = blocks[0] }: IProps) {
 	const [selectedBlock, setSelectedBlock] = React.useState<IBlock | null>(defaultSelectedBlock ?? null);
-	const [isDropdownOpened, setIsDropdownOpened] = React.useState<boolean>(false);
-	const rootRef = React.useRef<HTMLDivElement>(null);
-
-	const selectBlock = useCallback(
-		(id: string) => {
-			setIsDropdownOpened(false);
-			setSelectedBlock(blocks.find((folder) => folder.id === id)!);
-			onSelectedBlock && onSelectedBlock(blocks.find((folder) => folder.id === id)!);
-		},
-		[blocks, onSelectedBlock],
-	);
-
-	const handleOnClick = () => setIsDropdownOpened((prev) => !prev);
-
-	useEffect(() => {
-		// on click outside of root, close dropdown
-		const handleClickOutside = (event: MouseEvent) => {
-			if (rootRef.current && !rootRef.current.contains(event.target as Node)) {
-				setIsDropdownOpened(false);
-			}
-		};
-		document.addEventListener("mousedown", handleClickOutside);
-		return () => document.removeEventListener("mousedown", handleClickOutside);
-	}, []);
 
 	useEffect(() => {
 		if (defaultSelectedBlock) setSelectedBlock(defaultSelectedBlock);
 	}, [defaultSelectedBlock]);
-	return (
-		<div className={classes["root"]} data-is-opened={isDropdownOpened} ref={rootRef}>
-			{selectedBlock && (
-				<>
-					<div className={classes["dropdown-header"]} onClick={handleOnClick}>
-						<div className={classes["text-container"]}>
-							{selectedBlock.secondaryText && (
-								<Typography typo={ETypo.TEXT_MD_LIGHT} color={ETypoColor.NAVIGATION_BUTTON_CONTRAST_DEFAULT}>
-									{selectedBlock.secondaryText}
-								</Typography>
-							)}
-							<Typography typo={ETypo.TEXT_MD_BOLD} color={ETypoColor.NAVIGATION_BUTTON_CONTRAST_DEFAULT}>
-								{selectedBlock.primaryText}
-							</Typography>
-						</div>
-						<ChevronDownIcon height="24" width="24" color={`var(${ETypoColor.NAVIGATION_BUTTON_CONTRAST_DEFAULT})`} />
-					</div>
 
-					{isDropdownOpened && (
-						<div className={classes["dropdown-content"]}>
-							{blocks
-								.filter((block) => block.id !== selectedBlock.id)
-								.map((block) => (
-									<div key={block.id} className={classes["dropdown-item"]} onClick={() => selectBlock(block.id)}>
-										{block.secondaryText && (
-											<Typography typo={ETypo.TEXT_MD_LIGHT} color={ETypoColor.NAVIGATION_BUTTON_CONTRAST_DEFAULT}>
-												{block.secondaryText}
-											</Typography>
-										)}
-										<Typography typo={ETypo.TEXT_MD_BOLD} color={ETypoColor.NAVIGATION_BUTTON_CONTRAST_DEFAULT}>
-											{block.primaryText}
-										</Typography>
-									</div>
-								))}
-						</div>
-					)}
-				</>
-			)}
+	return (
+		<div className={classes["root"]}>
+			<Dropdown
+				options={blocks.map((block) => {
+					return {
+						id: block.id,
+						label: {
+							subtext: block.primaryText,
+							text: block.secondaryText,
+						},
+					} as IOption;
+				})}
+				selectedOption={selectedBlock ? { id: selectedBlock.id, label: selectedBlock.primaryText } : undefined}
+			/>
 		</div>
 	);
 }