diff --git a/src/sections/General/Navigation/index.js b/src/sections/General/Navigation/index.js
index 5e5017338c99..168cb4463424 100644
--- a/src/sections/General/Navigation/index.js
+++ b/src/sections/General/Navigation/index.js
@@ -256,6 +256,30 @@ const Navigation = () => {
     closeDropDown();
   };
 
+
+  useEffect(() => {
+    const plusButtons = document.querySelectorAll(".plus");
+
+    plusButtons.forEach((plus, index) => {
+      plus.addEventListener("click", () => {
+        const index = plus.getAttribute("data-index");
+        const mobileNavSubitemContainer = document.querySelector(`.mobile-nav-subitem-container[data-index='${index}']`);
+
+        if (mobileNavSubitemContainer.style.display === "block" && plus.style.transform == "rotate(180deg)") {
+          mobileNavSubitemContainer.style.display = "none";
+          plus.style.transform = "rotate(0deg)";
+
+        } else {
+          mobileNavSubitemContainer.style.display = "block";
+          plus.style.transform = "rotate(180deg)";
+        }
+      });
+    });
+  }, []);
+
+
+
+
   return (
     <NavigationWrap
       className={`nav-block ${scroll ? "scrolled" : ""}`}
@@ -296,56 +320,67 @@ const Navigation = () => {
                           : "mobile-nav-item"
                       }
                     >
-                      <Link
-                        to={menu.path}
-                        onClick={changeDropdownState}
-                        className="menu-item"
-                        activeClassName="nav-link-active"
-                      >
-                        {menu.name}
-                      </Link>
-                      <ul>
-                        {menu.subItems !== undefined &&
-                          menu.subItems.map((subItems, index) => {
-                            return (
-                              <li key={index} className="mobile-nav-subitem">
-                                {subItems.externalLink ? (
-                                  <a
-                                    href={subItems.path}
-                                    target="_blank"
-                                    onClick={() => {
-                                      changeDropdownState();
-                                      closeDropDown();
-                                    }}
-                                    className="mobile-sub-menu-item"
-                                    rel="noreferrer"
-                                  >
-                                    {subItems.name}
-                                  </a>
-                                ) : (
-                                  <Link
-                                    to={subItems.path}
-                                    onClick={() => {
-                                      changeDropdownState();
-                                      closeDropDown();
-                                    }}
-                                    className="mobile-sub-menu-item"
-                                    activeClassName="nav-link-active"
-                                  >
-                                    {subItems.name}
-                                  </Link>
-                                )}
-                              </li>
-                            );
-                          })}
-                      </ul>
+                      <div className="wrapper">
+                        <Link
+                          to={menu.path}
+                          onClick={changeDropdownState}
+                          className="menu-item"
+                          activeClassName="nav-link-active"
+                        >
+                          {menu.name}
+                        </Link>
+                        {menu.subItems !== undefined && (
+                          <div className="plus" data-index={index}>
+                            <span></span>
+                          </div>
+                        )}
+                      </div>
+                      {menu.subItems !== undefined && (
+                        <div className="mobile-nav-subitem-container" data-index={index}>
+                          <ul>
+                            {menu.subItems !== undefined &&
+                              menu.subItems.map((subItems, index) => {
+                                return (
+                                  <li key={index} className="mobile-nav-subitem">
+                                    {subItems.externalLink ? (
+                                      <a
+                                        href={subItems.path}
+                                        target="_blank"
+                                        onClick={() => {
+                                          changeDropdownState();
+                                          closeDropDown();
+                                        }}
+                                        className="mobile-sub-menu-item"
+                                        rel="noreferrer"
+                                      >
+                                        {subItems.name}
+                                      </a>
+                                    ) : (
+                                      <Link
+                                        to={subItems.path}
+                                        onClick={() => {
+                                          changeDropdownState();
+                                          closeDropDown();
+                                        }}
+                                        className="mobile-sub-menu-item"
+                                        activeClassName="nav-link-active"
+                                      >
+                                        {subItems.name}
+                                      </Link>
+                                    )}
+                                  </li>
+                                );
+                              })}
+                          </ul>
+                        </div>
+                      )}
                     </li>
                   ))}
                 </ul>
                 {!userData && (
                   <div>
                     <ul>
-                      <li>
+                      <li className="get-started-list">
                         <Button
                           id="get-started"
                           secondary
@@ -358,9 +393,9 @@ const Navigation = () => {
                     </ul>
                   </div>
                 )}
-                <div>
+                <div className="playground">
                   <ul>
-                    <li className="mobile-nav-item">
+                    <li className="mobile-nav-item" id="playground-list">
                       {/* <a href="https://calendar.google.com/calendar/appointments/schedules/AcZssZ3pmcApaDP4xd8hvG5fy8ylxuFxD3akIRc5vpWJ60q-HemQi80SFFAVftbiIsq9pgiA2o8yvU56?gv=true" className="menu-item">Book Demo</a> */}
                       <a href="https://play.meshery.io" className="menu-item">
                         Playground
diff --git a/src/sections/General/Navigation/navigation.style.js b/src/sections/General/Navigation/navigation.style.js
index 9a73d434887d..7f0bd859a278 100644
--- a/src/sections/General/Navigation/navigation.style.js
+++ b/src/sections/General/Navigation/navigation.style.js
@@ -492,6 +492,48 @@ const NavigationWrap = styled.header`
       margin-top: -34px;
     }
   }
+
+  .get-started-list{
+    width: 100%;
+  }
+
+  #get-started{
+    width: 100%;  
+  }
+
+  .playground{
+    padding: 6px;
+    width: 94%;
+    margin: 10px auto auto;
+    display: flex;
+    justify-content: center;
+    border: 1px solid ${(props) => props.theme.menuHoverColor};
+    border-radius: 0.2rem;
+    ul{
+      width: 100%;
+      a{
+        display: flex;
+        justify-content: center;
+        color: ${(props) => props.theme.menuHoverColor}; 
+      }
+    }
+  }
+
+  @media only screen and (min-width: 300px) and (max-width: 580px){
+    .playground{
+      width: 91.5%;
+    }
+    
+  }
+
+  @media screen and (max-width: 420px) {
+    .playground{
+      width: 90.5%;
+    }
+  }
+  #playground-list{
+    width: 100%;
+  }
   @media only screen and (min-width: 912px) and (max-width: 992px) {
     .nav {
       margin-left: 1.375rem;
@@ -544,7 +586,7 @@ const NavigationWrap = styled.header`
     }
     .mobile-dropdown {
       position: relative;
-      padding: 10px 0 10px 15px;
+      padding: 10px 0 32px;
       display: block;
       background: ${(props) => props.theme.grey141414ToGreyFAFAFA};
       border-radius: 10px;
@@ -578,6 +620,7 @@ const NavigationWrap = styled.header`
     .mobile-collapsed {
       display: flex;
       flex-direction: column;
+      overflow: hidden;
     }
     .mobile-menu-icon {
       display: inline-block;
@@ -622,7 +665,8 @@ const NavigationWrap = styled.header`
         font-size: 16px;
         font-weight: 600;
         line-height: 2rem;
-        font-size: 1.25rem;
+        font-size: 1.0rem;
+        width: 100%;
       }
       a:before {
         content: none;
@@ -631,17 +675,99 @@ const NavigationWrap = styled.header`
         display: list-item;
       }
     }
+    .wrapper {
+
+      display: flex;
+      justify-content: space-between;
+      padding: 10px 0;
+
+    }
+
+    .mobile-nav-subitem-container{
+      display:none;
+      background: ${(props) => props.theme.subItemColor}; 
+      padding: -1px 0 13px;
+      border-radius: 0.2rem;
+      margin-bottom: 10px;
+      border-radius: 6px;
+      box-shadow:  ${(props) => props.theme.subItemBoxShadow} -1px 1px 10px;
+    }
+
+    .plus {
+      position: relative;
+      height: 50px;
+      width: 50px;
+      display: flex;
+      justify-content: center;
+      margin-right: 13px;
+      transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+    }
+    .plus span {
+    position: absolute;
+    width: 15px;
+    height: 10px;
+    display: flex;
+    justify-content: center;
+    margin-top: 18px;
+  }
+
+  .plus span::before,
+  .plus span::after {
+      content: '';
+    position: absolute;
+    width: 2.5px; /* Thickness of the arrow lines */
+    height: 100%; /* Ensure lines cover the full span */
+    transform-origin: bottom;
+    background-color: ${(props) => props.theme.menuColor};
+  }
+
+  .plus span::before {
+      transform: rotate(45deg);
+  }
+
+  .plus span::after {
+  transform: rotate(-45deg);
+}
+
+    .plus:hover{
+    cursor: pointer;
+    }
+
+    .playground{
+    margin-top: 17px
+    }
+
+    #playground-list > .menu-item {
+        font-weight: 600;
+      line-height: 1.6rem;
+      font-size: 0.9rem;
+      width: 100%;
+    }
+
     .mobile-nav-subitem {
       padding-left: 10px;
       padding-top: 0.4rem;
+      background-color: ${(props) => props.theme.subItemColor};
+      padding: 12px 0;
+      transition: background-color 0.8s ease;
+      border-top-left-radius: 5px;
+      &:hover{
+        background-color: ${(props) => props.theme.subitemHover};
+      }
     }
+
     .mobile-sub-menu-item {
-      font-size: 1.1rem;
+      font-size: 1rem;
+      font-weight: bold;
+      &:hover {
+        color: ${(props) => props.theme.menuColor};
+      }
     }
   }
 
   .nav-link-active {
-    color: ${(props) => props.theme.menuHoverColor};
+  color: ${(props) => props.theme.menuHoverColor};
+  
     transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
   }
 
diff --git a/src/theme/app/themeStyles.js b/src/theme/app/themeStyles.js
index f4f8e83b9af9..a4497bfaca8b 100644
--- a/src/theme/app/themeStyles.js
+++ b/src/theme/app/themeStyles.js
@@ -51,6 +51,16 @@ const lighttheme = {
   // charcoal
   menuColor: "#3c494f",
 
+  //light grey
+  //subItemColor: "#c1c1c1a6",
+  //subItemColor: "linear-gradient(90deg, rgb(226, 226, 226) 0%, rgb(190, 190, 190) 83%, rgb(189, 189, 189) 98%);",
+  subItemColor: "#e7eff3",
+
+  subItemBoxShadow: "#5F5F5F",
+
+
+  //light grey
+  subitemHover: "#c4e5f9",
   // caribbean green (light green)
   menuHoverColor: "#00b39f",
   linkColor: "#00b39f",
@@ -279,11 +289,22 @@ export const darktheme = {
 
   // charcoal
   menuColor: "#ffffff",
+
+
+  //medium grey(accent_grey-code 10)
+  subItemColor: "#15272f",
+
+
+  subItemBoxShadow: "grey",
   // 00D3A9
   // caribbean green (light green)
   menuHoverColor: "#00D3A9",
   linkColor: "#00D3A9",
 
+  //light grey
+  subitemHover: "#2c4f5e",
+
+
   // saffron (dark yellow)
   highlightColor: "#EBC017",
   saffronColor: "#EBC017",
@@ -292,6 +313,7 @@ export const darktheme = {
   highlightLightColor: "#EAD07D",
   saffronLightColor: "#EAD07D",
 
+
   // Shadow Sizes
   projectPageShadowsize: "5px",
   projectShadowsize: "5px",