diff --git a/Accordion/Accordion_Menu_02/README.md b/Accordion/Accordion_Menu_02/README.md
new file mode 100644
index 00000000..2153c5c6
--- /dev/null
+++ b/Accordion/Accordion_Menu_02/README.md
@@ -0,0 +1,8 @@
+## Awesome Accordion Menu
+
+ Tech Stack Used 
+ 
+
+### Preview
+
+
diff --git a/Accordion/Accordion_Menu_02/assets/Accordion_menu_preview.jpg b/Accordion/Accordion_Menu_02/assets/Accordion_menu_preview.jpg
new file mode 100644
index 00000000..5c768449
Binary files /dev/null and b/Accordion/Accordion_Menu_02/assets/Accordion_menu_preview.jpg differ
diff --git a/Accordion/Accordion_Menu_02/code/index.html b/Accordion/Accordion_Menu_02/code/index.html
new file mode 100644
index 00000000..1c4d892b
--- /dev/null
+++ b/Accordion/Accordion_Menu_02/code/index.html
@@ -0,0 +1,42 @@
+
+
+
+
+
+
+ Awesome accordion menu
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Accordion/Accordion_Menu_02/code/style.css b/Accordion/Accordion_Menu_02/code/style.css
new file mode 100644
index 00000000..48cb129f
--- /dev/null
+++ b/Accordion/Accordion_Menu_02/code/style.css
@@ -0,0 +1,81 @@
+*{
+ padding: 0;
+ margin: 0;
+ box-sizing: border-box;
+}
+.body{
+ background-color: #fcdc29;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-top: 200px;
+ font-family: 'lato';
+}
+.main{
+ width: 250px;
+ display: block;
+ border-radius: 10px;
+ overflow: hidden;
+}
+.item{
+ border-top: 1px solid #ef584a;
+ overflow: hidden;
+}
+.btn{
+ display: block;
+ position: relative;
+ padding: 15px 20px;
+ background-color: #ff6f61;
+ color: #fff;
+ text-decoration: none;
+}
+.subitem{
+ background: #273057;
+ transition: max-height 0.7s;
+ max-height: 0;
+}
+.subitem a{
+ display: block;
+ padding: 15px 20px;
+ color: #fff;
+ font-size: 14px;
+ border-bottom: 1px solid #394c7f;
+ position: relative;
+ text-decoration: none;
+}
+
+.subitem a:hover:before{
+ content: '';
+ opacity: 1;
+ transition: opacity 0.3s;
+ border-top: 24px solid transparent;
+ border-left: 11px solid #fcdc29;
+ border-bottom: 24px solid transparent;
+ position: absolute;
+ width: 6px;
+ height: 0;
+ left: 0;
+ top:0;
+}
+
+.subitem a:hover:after{
+ content: '';
+ opacity: 1;
+ transition: opacity 0.3s;
+ border-top: 24px solid transparent;
+ border-right: 11px solid #fcdc29;
+ border-bottom: 24px solid transparent;
+ position: absolute;
+ width: 6px;
+ height: 0;
+ right: 0;
+ top:0;
+}
+.subitem a:hover{
+ background: linear-gradient(to bottom, #273057 0%,#273057 50%,#394c7f 51%,#394c7f 100%);
+ transition: all 0.3s ease-in-out;
+ border-bottom: 0px solid #394c7f;
+}
+.item:target .subitem{
+ max-height: 150px;
+}