diff --git a/README.md b/README.md
index 062eaed..16b043d 100644
--- a/README.md
+++ b/README.md
@@ -29,11 +29,11 @@ Possible candidates are [CssinRust](https://github.com/lukidoescode/css-in-rust)
 
 ### How install it
 1. Install the sass module: `npm install yew-styles`
-2. Add the yew_style crate with the features needed for your project in Cargo.toml file: 
+2. Add the yew_style crate with the features needed for your project in Cargo.toml file:
 ```toml
 yew_styles = { version="0.9", features=["button", "text", "navbar"] }
 ```
-3. Import the main.css file in you main javascript/typescript file project: 
+3. Import the main.css file in you main javascript/typescript file project:
 ```typescript
     import 'node_modules/yew-styles/main.css';
 ```
@@ -70,7 +70,7 @@ First, open an issue describing about the fix, improvement or implementation and
 If the contribution is a fix or small improvement in a component, only a pull request to master explaining what resolve or improve that, is required.
 If it is an implementation, please follow the next requirements:
 
-* Firstable open an issue describing about the component 
+* Firstable open an issue describing about the component
 * Unit tests, which checks that the component is created and
 its logic works, in the same file where it is implemented (test events is not needed for now)
 * One component per file, if multiple components have connections between them, it is possible create subfolder
@@ -103,7 +103,7 @@ Please check our [code of conduct](CODE_OF_CONDUCT.md)
 
 ## Roadmap
 
-- [x] Button 
+- [x] Button
 - [x] Layout
 - [x] Navbar
 - [x] Form
diff --git a/app/yew-styles/_navbar.sass b/app/yew-styles/_navbar.sass
index 948705c..920f8ae 100644
--- a/app/yew-styles/_navbar.sass
+++ b/app/yew-styles/_navbar.sass
@@ -28,7 +28,7 @@
             &.navbar-container-mobile
                 flex-direction: row !important
                 width: 100%
-        
+
         @include get-branch(50px)
 
         .navbar-dropdown
@@ -73,7 +73,7 @@
                 position: absolute
                 left: 0
                 top: 40px
-                
+
                 z-index: 1
 
                 &.active
@@ -113,4 +113,4 @@
     width: 100%
 
     &.navbar-container-mobile
-        width: auto
\ No newline at end of file
+        width: auto
diff --git a/crate/Cargo.lock b/crate/Cargo.lock
index 7656f40..00d434b 100644
--- a/crate/Cargo.lock
+++ b/crate/Cargo.lock
@@ -916,7 +916,7 @@ dependencies = [
 
 [[package]]
 name = "yew_style_page"
-version = "0.9.2"
+version = "0.9.3"
 dependencies = [
  "Inflector",
  "cfg-if 1.0.0",
@@ -938,7 +938,7 @@ dependencies = [
 
 [[package]]
 name = "yew_styles"
-version = "0.9.2"
+version = "0.9.3"
 dependencies = [
  "getrandom",
  "rand",
diff --git a/crate/Cargo.toml b/crate/Cargo.toml
index 6f5835e..9112bda 100644
--- a/crate/Cargo.toml
+++ b/crate/Cargo.toml
@@ -6,7 +6,7 @@ license = "MIT/Apache-2.0"
 name = "yew_style_page"
 readme = "./README.md"
 repository = "https://github.com/spielrs/yew-styles-page.git"
-version = "0.9.2"
+version = "0.9.3"
 
 [lib]
 crate-type = ["cdylib"]
diff --git a/crate/src/page/carousel_page.rs b/crate/src/page/carousel_page.rs
index aa1cfc3..d9001cf 100644
--- a/crate/src/page/carousel_page.rs
+++ b/crate/src/page/carousel_page.rs
@@ -2,6 +2,7 @@ use super::highlighters::get_carousel;
 use yew::prelude::*;
 use yew::services::ConsoleService;
 use yew::utils::document;
+use yew_assets::communication_assets::{CommunicationAssets, CommunicationIcon};
 use yew_prism::Prism;
 use yew_styles::carousel::{Carousel, CarouselControls, CarouselDot, CarouselImage};
 use yew_styles::styles::Size;
@@ -171,6 +172,8 @@ impl Component for CarouselPage {
                     <li><b>{"class_name: "}</b>{"general property to add custom class styles"}</li>
                 </ul>
 
+                <p><b>{"This component has a optional children prop, in case that it is not included a default dot icon will be added"}</b></p>
+
                 <h3>{"Carousel Image"}</h3>
                 <ul>
                     <li><b>{"img_src: "}</b>{"Url image path. Required."}</li>
@@ -216,7 +219,9 @@ fn get_dots(active_image: Vec<bool>, link: ComponentLink<CarouselPage>) -> Html
 
     for (i, _) in active_image.clone().into_iter().enumerate() {
         dot.push(html! {
-            <CarouselDot active=active_image[i] onclick_signal = link.callback(move |_| Msg::ChangeImage(i))/>
+            <CarouselDot active=active_image[i] onclick_signal = link.callback(move |_| Msg::ChangeImage(i))>
+                <CommunicationAssets size=("12".to_string(), "12".to_string()) icon=CommunicationIcon::Smile/>
+            </CarouselDot>
         })
     }
 
diff --git a/crate/src/page/highlighters.rs b/crate/src/page/highlighters.rs
index 4bf8cbd..2bcb1b5 100644
--- a/crate/src/page/highlighters.rs
+++ b/crate/src/page/highlighters.rs
@@ -45,11 +45,11 @@ pub fn navbar_code() -> String {
                 <span>{\"Shop\"}</span>
             </NavbarItem>
             <NavbarItem
-                onclick_signal=link.callback(move |_| Msg::ChangeMenu(String::from(\"About us\")))>   
+                onclick_signal=link.callback(move |_| Msg::ChangeMenu(String::from(\"About us\")))>
                 <span>{\"About us\"}</span>
             </NavbarItem>
             <NavbarItem
-                onclick_signal=link.callback(move |_| Msg::ChangeMenu(String::from(\"Contact\")))>   
+                onclick_signal=link.callback(move |_| Msg::ChangeMenu(String::from(\"Contact\")))>
                 <span>{\"Contact\"}</span>
             </NavbarItem>
             <NavbarDropdown main_content=html!{
@@ -60,7 +60,7 @@ pub fn navbar_code() -> String {
             }>
                 <NavbarDropdownItem
                     onclick_signal=link
-                        .callback(move |_: MouseEvent| Msg::ChangeType(String::from(\"menu 1\".to_string())))>{\"menu 1\"}        
+                        .callback(move |_: MouseEvent| Msg::ChangeType(String::from(\"menu 1\".to_string())))>{\"menu 1\"}
                 </NavbarDropdownItem>
                 <NavbarDropdownItem
                     onclick_signal=link
@@ -432,9 +432,15 @@ pub fn get_carousel() -> String {
     <CarouselImage active=active_image[1] img_src=image.to_owned()/>
     <CarouselImage active=active_image[2] img_src=image.to_owned()/>
     <CarouselImage active=active_image[3] img_src=image.to_owned()/>
-    <CarouselDot active=active_image[1] onclick_signal = link.callback(move |_| Msg::ChangeImage(1))/>
-    <CarouselDot active=active_image[2] onclick_signal = link.callback(move |_| Msg::ChangeImage(2))/>
-    <CarouselDot active=active_image[3] onclick_signal = link.callback(move |_| Msg::ChangeImage(3))/>
+    <CarouselDot active=active_image[1] onclick_signal = link.callback(move |_| Msg::ChangeImage(1))>
+        <CommunicationAssets size=(\"12\".to_string(), \"12\".to_string()) icon=CommunicationIcon::Smile/>
+    </CarouselDot>
+    <CarouselDot active=active_image[2] onclick_signal = link.callback(move |_| Msg::ChangeImage(2))>
+        <CommunicationAssets size=(\"12\".to_string(), \"12\".to_string()) icon=CommunicationIcon::Smile/>
+    </CarouselDot>
+    <CarouselDot active=active_image[3] onclick_signal = link.callback(move |_| Msg::ChangeImage(3))>
+        <CommunicationAssets size=(\"12\".to_string(), \"12\".to_string()) icon=CommunicationIcon::Smile/>
+    </CarouselDot>
     <CarouselControls
         controls_size=Size::Small
         prev_signal=link.callback(|_| Msg::Prev)
diff --git a/crate/yew_styles/Cargo.toml b/crate/yew_styles/Cargo.toml
index 7e0dc0b..1880281 100644
--- a/crate/yew_styles/Cargo.toml
+++ b/crate/yew_styles/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "yew_styles"
-version = "0.9.2"
+version = "0.9.3"
 description = "Framework styles for yew"
 documentation = "https://docs.rs/crate/yew_styles"
 authors = ["Francisco Jesus Navarro Cortes <spieljs@gmail.com>"]
@@ -51,4 +51,4 @@ web-sys = {version = "0.3", features = ["HtmlDocument", "HtmlCollection", "CssSt
 rand = {version="0.8", features = ["getrandom"]}
 getrandom = {version = "0.2", features= ["js"]}
 wasm-bindgen-test = "0.3"
-yew_assets={version = "0.1.2", features = ["ux_assets", "editing_assets", "controller_assets", "object_assets"]}
\ No newline at end of file
+yew_assets={version = "0.1.2", features = ["ux_assets", "editing_assets", "controller_assets", "object_assets"]}
diff --git a/crate/yew_styles/src/components/carousel/carousel_container.rs b/crate/yew_styles/src/components/carousel/carousel_container.rs
index 8e5fcf4..ad53ec8 100644
--- a/crate/yew_styles/src/components/carousel/carousel_container.rs
+++ b/crate/yew_styles/src/components/carousel/carousel_container.rs
@@ -138,8 +138,11 @@ use yew::{utils, App};
 ///     fn view(&self) -> Html {
 ///         html! {
 ///             <div>
-///                 
-///                 <Carousel class_name="fill-background">
+///                 <Carousel
+///                     class_name="fill-background"
+///                     onwheel_signal= self.link.callback(Msg::Scroll)
+///                     onmouseover_signal= self.link.callback(|_| Msg::ShowScroll)
+///                     onmouseleave_signal= self.link.callback(|_| Msg::HideScroll)>
 ///                     {get_images(self.images.to_vec(), self.active_image.to_vec())}
 ///                     {get_dots(self.active_image.to_vec(), self.link.clone())}
 ///                     {get_controls(self.link.clone())}
@@ -161,12 +164,14 @@ use yew::{utils, App};
 ///         .collect::<Html>()
 /// }
 ///
-/// fn get_dots(active_image: Vec<bool>, link: ComponentLink<App>) -> Html {
+/// fn get_dots(active_image: Vec<bool>, link: ComponentLink<CarouselPage>) -> Html {
 ///     let mut dot = vec![];
 ///
 ///     for (i, _) in active_image.clone().into_iter().enumerate() {
 ///         dot.push(html! {
-///             <CarouselDot active=active_image[i] onclick_signal = link.callback(move |_| Msg::ChangeImage(i))/>
+///             <CarouselDot active=active_image[i] onclick_signal = link.callback(move |_| Msg::ChangeImage(i))>
+///                 <CommunicationAssets size=("12".to_string(), "12".to_string()) icon=CommunicationIcon::Smile/>
+///             </CarouselDot>
 ///         })
 ///     }
 ///
@@ -175,15 +180,10 @@ use yew::{utils, App};
 ///
 /// fn get_controls(link: ComponentLink<App>) -> Html {
 ///     html! {
-///         <Carousel
-///             class_name="fill-background"
-///             onwheel_signal= self.link.callback(Msg::Scroll)
-///             onmouseover_signal= self.link.callback(|_| Msg::ShowScroll)
-///             onmouseleave_signal= self.link.callback(|_| Msg::HideScroll)>
-///             {get_images(self.images.to_vec(), self.active_image.to_vec())}
-///             {get_dots(self.active_image.to_vec(), self.link.clone())}
-///             {get_controls(self.link.clone())}
-///         </Carousel>
+///         <CarouselControls
+///             controls_size=Size::Small
+///             prev_signal=link.callback(|_| Msg::Prev)
+///             next_signal=link.callback(|_| Msg::Next)/>
 ///     }
 /// }
 /// ```
diff --git a/crate/yew_styles/src/components/carousel/carousel_controls.rs b/crate/yew_styles/src/components/carousel/carousel_controls.rs
index bcee458..5649c90 100644
--- a/crate/yew_styles/src/components/carousel/carousel_controls.rs
+++ b/crate/yew_styles/src/components/carousel/carousel_controls.rs
@@ -4,7 +4,7 @@ use yew::prelude::*;
 use yew::{utils, App};
 use yew_assets::controller_assets::{ControllerAssets, ControllerIcon};
 
-/// # Carousel Component
+/// # Carousel Controls
 ///
 /// ## Features required
 ///
@@ -140,8 +140,11 @@ use yew_assets::controller_assets::{ControllerAssets, ControllerIcon};
 ///     fn view(&self) -> Html {
 ///         html! {
 ///             <div>
-///                 
-///                 <Carousel class_name="fill-background">
+///                 <Carousel
+///                     class_name="fill-background"
+///                     onwheel_signal= self.link.callback(Msg::Scroll)
+///                     onmouseover_signal= self.link.callback(|_| Msg::ShowScroll)
+///                     onmouseleave_signal= self.link.callback(|_| Msg::HideScroll)>
 ///                     {get_images(self.images.to_vec(), self.active_image.to_vec())}
 ///                     {get_dots(self.active_image.to_vec(), self.link.clone())}
 ///                     {get_controls(self.link.clone())}
@@ -163,12 +166,14 @@ use yew_assets::controller_assets::{ControllerAssets, ControllerIcon};
 ///         .collect::<Html>()
 /// }
 ///
-/// fn get_dots(active_image: Vec<bool>, link: ComponentLink<App>) -> Html {
+/// fn get_dots(active_image: Vec<bool>, link: ComponentLink<CarouselPage>) -> Html {
 ///     let mut dot = vec![];
 ///
 ///     for (i, _) in active_image.clone().into_iter().enumerate() {
 ///         dot.push(html! {
-///             <CarouselDot active=active_image[i] onclick_signal = link.callback(move |_| Msg::ChangeImage(i))/>
+///             <CarouselDot active=active_image[i] onclick_signal = link.callback(move |_| Msg::ChangeImage(i))>
+///                 <CommunicationAssets size=("12".to_string(), "12".to_string()) icon=CommunicationIcon::Smile/>
+///             </CarouselDot>
 ///         })
 ///     }
 ///
@@ -177,15 +182,10 @@ use yew_assets::controller_assets::{ControllerAssets, ControllerIcon};
 ///
 /// fn get_controls(link: ComponentLink<App>) -> Html {
 ///     html! {
-///         <Carousel
-///             class_name="fill-background"
-///             onwheel_signal= self.link.callback(Msg::Scroll)
-///             onmouseover_signal= self.link.callback(|_| Msg::ShowScroll)
-///             onmouseleave_signal= self.link.callback(|_| Msg::HideScroll)>
-///             {get_images(self.images.to_vec(), self.active_image.to_vec())}
-///             {get_dots(self.active_image.to_vec(), self.link.clone())}
-///             {get_controls(self.link.clone())}
-///         </Carousel>
+///         <CarouselControls
+///             controls_size=Size::Small
+///             prev_signal=link.callback(|_| Msg::Prev)
+///             next_signal=link.callback(|_| Msg::Next)/>
 ///     }
 /// }
 /// ```
diff --git a/crate/yew_styles/src/components/carousel/carousel_dot.rs b/crate/yew_styles/src/components/carousel/carousel_dot.rs
index 5654f30..3e103b1 100644
--- a/crate/yew_styles/src/components/carousel/carousel_dot.rs
+++ b/crate/yew_styles/src/components/carousel/carousel_dot.rs
@@ -4,7 +4,7 @@ use yew::prelude::*;
 use yew::{utils, App};
 use yew_assets::object_assets::{ObjectAssets, ObjectIcon};
 
-/// # Carousel Component
+/// # Carousel Dots
 ///
 /// ## Features required
 ///
@@ -140,8 +140,11 @@ use yew_assets::object_assets::{ObjectAssets, ObjectIcon};
 ///     fn view(&self) -> Html {
 ///         html! {
 ///             <div>
-///                 
-///                 <Carousel class_name="fill-background">
+///                 <Carousel
+///                     class_name="fill-background"
+///                     onwheel_signal= self.link.callback(Msg::Scroll)
+///                     onmouseover_signal= self.link.callback(|_| Msg::ShowScroll)
+///                     onmouseleave_signal= self.link.callback(|_| Msg::HideScroll)>
 ///                     {get_images(self.images.to_vec(), self.active_image.to_vec())}
 ///                     {get_dots(self.active_image.to_vec(), self.link.clone())}
 ///                     {get_controls(self.link.clone())}
@@ -163,12 +166,14 @@ use yew_assets::object_assets::{ObjectAssets, ObjectIcon};
 ///         .collect::<Html>()
 /// }
 ///
-/// fn get_dots(active_image: Vec<bool>, link: ComponentLink<App>) -> Html {
+/// fn get_dots(active_image: Vec<bool>, link: ComponentLink<CarouselPage>) -> Html {
 ///     let mut dot = vec![];
 ///
 ///     for (i, _) in active_image.clone().into_iter().enumerate() {
 ///         dot.push(html! {
-///             <CarouselDot active=active_image[i] onclick_signal = link.callback(move |_| Msg::ChangeImage(i))/>
+///             <CarouselDot active=active_image[i] onclick_signal = link.callback(move |_| Msg::ChangeImage(i))>
+///                 <CommunicationAssets size=("12".to_string(), "12".to_string()) icon=CommunicationIcon::Smile/>
+///             </CarouselDot>
 ///         })
 ///     }
 ///
@@ -177,15 +182,10 @@ use yew_assets::object_assets::{ObjectAssets, ObjectIcon};
 ///
 /// fn get_controls(link: ComponentLink<App>) -> Html {
 ///     html! {
-///         <Carousel
-///             class_name="fill-background"
-///             onwheel_signal= self.link.callback(Msg::Scroll)
-///             onmouseover_signal= self.link.callback(|_| Msg::ShowScroll)
-///             onmouseleave_signal= self.link.callback(|_| Msg::HideScroll)>
-///             {get_images(self.images.to_vec(), self.active_image.to_vec())}
-///             {get_dots(self.active_image.to_vec(), self.link.clone())}
-///             {get_controls(self.link.clone())}
-///         </Carousel>
+///         <CarouselControls
+///             controls_size=Size::Small
+///             prev_signal=link.callback(|_| Msg::Prev)
+///             next_signal=link.callback(|_| Msg::Next)/>
 ///     }
 /// }
 /// ```
@@ -216,6 +216,9 @@ pub struct Props {
     /// General property to add custom id
     #[prop_or_default]
     pub id: String,
+    /// In case that children is not included will add a dot icon by default
+    #[prop_or_default]
+    pub children: Option<Children>,
 }
 
 pub enum Msg {
@@ -268,7 +271,17 @@ impl Component for CarouselDot {
                 ref=self.props.code_ref.clone()
                 onclick=self.link.callback(Msg::DotClicked)
             >
-                <ObjectAssets size=("12".to_string(), "12".to_string()) icon=ObjectIcon::Circle class_name="carousel-dot-assets"/>
+            {
+                if let Some(children) = self.props.children.clone() {
+                    html! {
+                        <>{children }</>
+                    }
+                } else {
+                    html!{
+                        <ObjectAssets size=("12".to_string(), "12".to_string()) icon=ObjectIcon::Circle class_name="carousel-dot-assets"/>
+                    }
+                }
+            }
             </div>
         }
     }
@@ -284,6 +297,7 @@ fn should_create_carousel_dot_component() {
         active: false,
         onclick_signal: Callback::noop(),
         key: "".to_string(),
+        children: None,
     };
 
     let carousel: App<CarouselDot> = App::new();
diff --git a/crate/yew_styles/src/components/carousel/carousel_image.rs b/crate/yew_styles/src/components/carousel/carousel_image.rs
index c3796fe..2aadd83 100644
--- a/crate/yew_styles/src/components/carousel/carousel_image.rs
+++ b/crate/yew_styles/src/components/carousel/carousel_image.rs
@@ -2,7 +2,7 @@ use wasm_bindgen_test::*;
 use yew::prelude::*;
 use yew::{utils, App};
 
-/// # Carousel Component
+/// # Carousel Images
 ///
 /// ## Features required
 ///
@@ -138,8 +138,11 @@ use yew::{utils, App};
 ///     fn view(&self) -> Html {
 ///         html! {
 ///             <div>
-///                 
-///                 <Carousel class_name="fill-background">
+///                 <Carousel
+///                     class_name="fill-background"
+///                     onwheel_signal= self.link.callback(Msg::Scroll)
+///                     onmouseover_signal= self.link.callback(|_| Msg::ShowScroll)
+///                     onmouseleave_signal= self.link.callback(|_| Msg::HideScroll)>
 ///                     {get_images(self.images.to_vec(), self.active_image.to_vec())}
 ///                     {get_dots(self.active_image.to_vec(), self.link.clone())}
 ///                     {get_controls(self.link.clone())}
@@ -161,12 +164,14 @@ use yew::{utils, App};
 ///         .collect::<Html>()
 /// }
 ///
-/// fn get_dots(active_image: Vec<bool>, link: ComponentLink<App>) -> Html {
+/// fn get_dots(active_image: Vec<bool>, link: ComponentLink<CarouselPage>) -> Html {
 ///     let mut dot = vec![];
 ///
 ///     for (i, _) in active_image.clone().into_iter().enumerate() {
 ///         dot.push(html! {
-///             <CarouselDot active=active_image[i] onclick_signal = link.callback(move |_| Msg::ChangeImage(i))/>
+///             <CarouselDot active=active_image[i] onclick_signal = link.callback(move |_| Msg::ChangeImage(i))>
+///                 <CommunicationAssets size=("12".to_string(), "12".to_string()) icon=CommunicationIcon::Smile/>
+///             </CarouselDot>
 ///         })
 ///     }
 ///
@@ -175,15 +180,10 @@ use yew::{utils, App};
 ///
 /// fn get_controls(link: ComponentLink<App>) -> Html {
 ///     html! {
-///         <Carousel
-///             class_name="fill-background"
-///             onwheel_signal= self.link.callback(Msg::Scroll)
-///             onmouseover_signal= self.link.callback(|_| Msg::ShowScroll)
-///             onmouseleave_signal= self.link.callback(|_| Msg::HideScroll)>
-///             {get_images(self.images.to_vec(), self.active_image.to_vec())}
-///             {get_dots(self.active_image.to_vec(), self.link.clone())}
-///             {get_controls(self.link.clone())}
-///         </Carousel>
+///         <CarouselControls
+///             controls_size=Size::Small
+///             prev_signal=link.callback(|_| Msg::Prev)
+///             next_signal=link.callback(|_| Msg::Next)/>
 ///     }
 /// }
 /// ```
diff --git a/crate/yew_styles/src/components/navbar/navbar_component.rs b/crate/yew_styles/src/components/navbar/navbar_component.rs
index 3cd11d0..2afe459 100644
--- a/crate/yew_styles/src/components/navbar/navbar_component.rs
+++ b/crate/yew_styles/src/components/navbar/navbar_component.rs
@@ -64,7 +64,7 @@ use yew_assets::ux_assets::{UxAssets, UxIcon};
 ///                     .dyn_into::<Element>()
 ///                     .unwrap()
 ///                     .class_list();
-///             
+///
 ///                 let target_parent = mouse_event
 ///                     .target()
 ///                     .unwrap()
@@ -73,7 +73,7 @@ use yew_assets::ux_assets::{UxAssets, UxIcon};
 ///                     .parent_element()
 ///                     .unwrap()
 ///                     .tag_name();
-///                 
+///
 ///                 if !target_class.value().contains("navbar-menu") && target_parent != "svg" {
 ///                     self.close_navbar_mobile = true;
 ///                 } else {
@@ -111,11 +111,11 @@ use yew_assets::ux_assets::{UxAssets, UxIcon};
 ///                                 <span>{"Shop"}</span>
 ///                             </NavbarItem>
 ///                             <NavbarItem
-///                                 onclick_signal=link.callback(move |_| Msg::ChangeMenu(String::from("About us")))>   
+///                                 onclick_signal=link.callback(move |_| Msg::ChangeMenu(String::from("About us")))>
 ///                                 <span>{"About us"}</span>
 ///                             </NavbarItem>
 ///                             <NavbarItem
-///                                 onclick_signal=link.callback(move |_| Msg::ChangeMenu(String::from("Contact")))>   
+///                                 onclick_signal=link.callback(move |_| Msg::ChangeMenu(String::from("Contact")))>
 ///                                 <span>{"Contact"}</span>
 ///                             </NavbarItem>
 ///                         </NavbarContainer>
@@ -294,7 +294,11 @@ impl Component for Navbar {
                     class_name="navbar-container-mobile">
                     {get_branch(self.props.branch.clone())}
                 </NavbarContainer>
-                    {self.props.children.clone()}
+                    {if !self.display_menu {
+                        html!{<>{self.props.children.clone()}</>}
+                    }else {
+                        html!{}
+                    } }
                 </div>
             </>
         }
diff --git a/crate/yew_styles/src/components/navbar/navbar_dropdown/navbar_dropdown_container.rs b/crate/yew_styles/src/components/navbar/navbar_dropdown/navbar_dropdown_container.rs
index 6addf65..6ae8c6f 100644
--- a/crate/yew_styles/src/components/navbar/navbar_dropdown/navbar_dropdown_container.rs
+++ b/crate/yew_styles/src/components/navbar/navbar_dropdown/navbar_dropdown_container.rs
@@ -80,11 +80,11 @@ use yew::{utils, App};
 ///                            <span>{"Shop"}</span>
 ///                        </NavbarItem>
 ///                        <NavbarItem
-///                            onclick_signal=link.callback(move |_| Msg::ChangeMenu(String::from("About us")))>   
+///                            onclick_signal=link.callback(move |_| Msg::ChangeMenu(String::from("About us")))>
 ///                            <span>{"About us"}</span>
 ///                        </NavbarItem>
 ///                        <NavbarItem
-///                            onclick_signal=link.callback(move |_| Msg::ChangeMenu(String::from("Contact")))>   
+///                            onclick_signal=link.callback(move |_| Msg::ChangeMenu(String::from("Contact")))>
 ///                            <span>{"Contact"}</span>
 ///                        </NavbarItem>
 ///                        <NavbarDropdown main_content=html!{