diff --git a/src/data/projects/dropdown.md b/src/data/projects/dropdown.md
new file mode 100644
index 000000000..fbdde309e
--- /dev/null
+++ b/src/data/projects/dropdown.md
@@ -0,0 +1,30 @@
+---
+title: 'Custom Dropdown'  
+description: 'Create a custom dropdown using HTML, CSS, and JavaScript.'  
+isNew: false  
+sort: 18  
+difficulty: 'beginner'  
+nature: 'JavaScript'  
+skills:  
+  - 'HTML'  
+  - 'CSS'  
+  - 'JavaScript'  
+  - 'DOM Manipulation'  
+seo:  
+  title: 'Build a Custom Dropdown Menu with JavaScript'  
+  description: 'Learn how to create a fully customizable dropdown menu that allows users to select an item and see the selection reflected in the dropdown.'  
+  keywords:  
+    - 'custom dropdown'
+    - 'javascript dropdown'
+    - 'html and css'  
+roadmapIds:  
+  - 'frontend'
+---
+
+You will create a custom dropdown menu that lets users select an item from a list. The dropdown should have a default state showing a placeholder text, an open state revealing all options, and a selected state where the chosen item is displayed. When an item is selected, the dropdown closes, and the selected item is highlighted.
+
+Given below is the mockup showing the dropdown in its default, open, and selected states:
+
+[![Custom Dropdown](https://assets.roadmap.sh/guest/dropdown-1f4b3.png)](https://assets.roadmap.sh/guest/dropdown-1f4b3.png)
+
+This project will help you practice DOM manipulation, event handling, and creating responsive and interactive elements with JavaScript.
\ No newline at end of file