diff --git a/demo/src/pages/layout/mod.rs b/demo/src/pages/layout/mod.rs
index b0bb3ba..198f9c4 100644
--- a/demo/src/pages/layout/mod.rs
+++ b/demo/src/pages/layout/mod.rs
@@ -74,27 +74,51 @@ pub fn LayoutPage() -> impl IntoView {
                 <tbody>
                     <tr>
                         <td>"style"</td>
-                        <td>"MaybeSignal<String>"</td>
-                        <td>"Default::default()"</td>
+                        <td>
+                            <Text code=true>"MaybeSignal<String>"</Text>
+                        </td>
+                        <td>
+                            <Text code=true>"Default::default()"</Text>
+                        </td>
                         <td>"Layout's style."</td>
                     </tr>
                     <tr>
                         <td>"position"</td>
-                        <td>"LayoutPosition"</td>
-                        <td>"LayoutPosition::Static"</td>
+                        <td>
+                            <Text code=true>"LayoutPosition"</Text>
+                        </td>
+                        <td>
+                            <Text code=true>"LayoutPosition::Static"</Text>
+                        </td>
                         <td>
                             "static position will make it css position set to static. absolute position will make it css position set to absolute and left, right, top, bottom to 0. absolute position is very useful when you want to make content scroll in a fixed container or make the whole page's layout in a fixed position. You may need to change the style of the component to make it display as you expect."
                         </td>
                     </tr>
                     <tr>
                         <td>"has_sider"</td>
-                        <td>"MaybeSignal<bool>"</td>
-                        <td>"false"</td>
+                        <td>
+                            <Text code=true>"MaybeSignal<bool>"</Text>
+                        </td>
+                        <td>
+                            <Text code=true>"false"</Text>
+                        </td>
                         <td>"Whether the component has sider inside. If so it must be true."</td>
                     </tr>
+                    <tr>
+                        <td>"class"</td>
+                        <td>
+                            <Text code=true>"MaybeSignal<String>"</Text>
+                        </td>
+                        <td>
+                            <Text code=true>"Default::default()"</Text>
+                        </td>
+                        <td>"Addtional classes for the layout element."</td>
+                    </tr>
                     <tr>
                         <td>"children"</td>
-                        <td>"Children"</td>
+                        <td>
+                            <Text code=true>"Children"</Text>
+                        </td>
                         <td></td>
                         <td>"Layout's content."</td>
                     </tr>
@@ -113,13 +137,29 @@ pub fn LayoutPage() -> impl IntoView {
                 <tbody>
                     <tr>
                         <td>"style"</td>
-                        <td>"MaybeSignal<String>"</td>
-                        <td>"Default::default()"</td>
+                        <td>
+                            <Text code=true>"MaybeSignal<String>"</Text>
+                        </td>
+                        <td>
+                            <Text code=true>"Default::default()"</Text>
+                        </td>
                         <td>"LayoutHeader's style."</td>
                     </tr>
+                    <tr>
+                        <td>"class"</td>
+                        <td>
+                            <Text code=true>"MaybeSignal<String>"</Text>
+                        </td>
+                        <td>
+                            <Text code=true>"Default::default()"</Text>
+                        </td>
+                        <td>"Addtional classes for the layout header element."</td>
+                    </tr>
                     <tr>
                         <td>"children"</td>
-                        <td>"Children"</td>
+                        <td>
+                            <Text code=true>"Children"</Text>
+                        </td>
                         <td></td>
                         <td>"LayoutHeader's content."</td>
                     </tr>
diff --git a/src/layout/layout_header.rs b/src/layout/layout_header.rs
index 3815abc..04ff82e 100644
--- a/src/layout/layout_header.rs
+++ b/src/layout/layout_header.rs
@@ -1,12 +1,14 @@
+use crate::utils::class_list::class_list;
 use leptos::*;
 
 #[component]
 pub fn LayoutHeader(
+    #[prop(optional, into)] class: MaybeSignal<String>,
     #[prop(optional, into)] style: MaybeSignal<String>,
     children: Children,
 ) -> impl IntoView {
     view! {
-        <div class="thaw-layout-header" style=move || style.get()>
+        <div class=class_list!["thaw-layout-header", move || class.get()] style=move || style.get()>
             {children()}
         </div>
     }
diff --git a/src/layout/layout_sider.rs b/src/layout/layout_sider.rs
index 2c365d1..ee192eb 100644
--- a/src/layout/layout_sider.rs
+++ b/src/layout/layout_sider.rs
@@ -1,14 +1,15 @@
-use crate::utils::mount_style;
+use crate::utils::{class_list::class_list, mount_style};
 use leptos::*;
 
 #[component]
 pub fn LayoutSider(
+    #[prop(optional, into)] class: MaybeSignal<String>,
     #[prop(optional, into)] style: MaybeSignal<String>,
     children: Children,
 ) -> impl IntoView {
     mount_style("layout-sider", include_str!("./layout-sider.css"));
     view! {
-        <div class="thaw-layout-sider" style=move || style.get()>
+        <div class=class_list!["thaw-layout-sider", move || class.get()] style=move || style.get()>
             {children()}
         </div>
     }
diff --git a/src/layout/mod.rs b/src/layout/mod.rs
index c3faa18..fe26f1e 100644
--- a/src/layout/mod.rs
+++ b/src/layout/mod.rs
@@ -1,7 +1,7 @@
 mod layout_header;
 mod layout_sider;
 
-use crate::utils::mount_style;
+use crate::utils::{class_list::class_list, mount_style};
 pub use layout_header::*;
 pub use layout_sider::*;
 use leptos::*;
@@ -24,6 +24,7 @@ impl LayoutPosition {
 
 #[component]
 pub fn Layout(
+    #[prop(optional, into)] class: MaybeSignal<String>,
     #[prop(optional, into)] style: MaybeSignal<String>,
     #[prop(optional)] position: LayoutPosition,
     #[prop(optional, into)] has_sider: MaybeSignal<bool>,
@@ -40,11 +41,18 @@ pub fn Layout(
     });
     view! {
         <div
-            class="thaw-layout"
-            class=("thaw-layout--absolute-positioned", position == LayoutPosition::Absolute)
+            class=class_list![gen_class(position), move || class.get()]
             style=move || style.get()
         >
             {children()}
         </div>
     }
 }
+
+fn gen_class(position: LayoutPosition) -> String {
+    let mut class = String::from("thaw-layout");
+    if position == LayoutPosition::Absolute {
+        class.push_str("thaw-layout--absolute-positioned");
+    }
+    class
+}