diff --git a/docs/atoms/chip.md b/docs/atoms/chip.md
new file mode 100644
index 0000000..e69de29
diff --git a/docs/atoms/icon.md b/docs/atoms/icon.md
new file mode 100644
index 0000000..e69de29
diff --git a/docs/atoms/text.md b/docs/atoms/text.md
new file mode 100644
index 0000000..e69de29
diff --git a/docs/atoms/textfield.md b/docs/atoms/textfield.md
new file mode 100644
index 0000000..e69de29
diff --git a/docs/index.md b/docs/index.md
index 600969d..4b2ffbc 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -30,34 +30,33 @@ use to build your app.
 
 The **Atomic Design System** is a methodology for creating scalable, consistent, and reusable user interfaces by breaking down the UI into fundamental building blocks. It organizes components into five hierarchical levels:
 
-1. [**Atoms**](#atoms)
-   The basic building blocks, such as buttons, icons, text inputs, and colors. These are the smallest indivisible elements of a UI.
+1. [**Atoms**](#atoms): The basic building blocks, such as buttons, icons, text inputs, and colors. These are the smallest indivisible elements of a UI.
 
-2. [**Molecules**](#molecules)
-   Simple combinations of atoms that work together, such as a search input with a button.
+2. [**Molecules**](#molecules): Simple combinations of atoms that work together, such as a search input with a button.
 
-3. [**Organisms**](#organisms)
-   More complex components composed of molecules and atoms, such as a header or a product card.
+3. [**Organisms**](#organisms): More complex components composed of molecules and atoms, such as a header or a product card.
 
-4. **Templates**  
-   Layouts that arrange organisms in a specific structure, providing a blueprint for pages.
+4. **Templates**: Layouts that arrange organisms in a specific structure, providing a blueprint for pages.
 
-5. **Pages**  
-   Fully-realized templates populated with real content, forming complete screens in an application.
+5. **Pages**: Fully-realized templates populated with real content, forming complete screens in an application.
 
 The atomic design system emphasizes **modularity** and **reusability**, making it easier to maintain, scale, and adapt the UI across different platforms while ensuring a consistent user experience.
 
+!!! info "About Templates and Pages"
+
+    `Templates` and `Pages` levels are not managed by **CZAN**, as they represent screens, which are the responsibility of the library user to implement.
+
 #### Atoms
 
 Atoms are the basic building blocks of the user interface. They represent the simplest, indivisible components of a design. Atoms are often used on their own, but are also combined with others to create more complex elements.
 
 Examples:
 
-- Text
 - [Button](atoms/button.md)
-- Text field
+- Chip
 - Icon
-- Chip, etc.
+- Text
+- TextField, etc.
 
 #### Molecules
 
diff --git a/docs/molecules/cardtip.md b/docs/molecules/cardtip.md
new file mode 100644
index 0000000..e69de29
diff --git a/docs/molecules/numerickeyboard.md b/docs/molecules/numerickeyboard.md
new file mode 100644
index 0000000..e69de29
diff --git a/docs/molecules/tabs.md b/docs/molecules/tabs.md
new file mode 100644
index 0000000..e69de29
diff --git a/docs/organisms/card.md b/docs/organisms/card.md
new file mode 100644
index 0000000..e69de29
diff --git a/mkdocs.yml b/mkdocs.yml
index 627a416..ffd95d0 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -38,6 +38,7 @@ theme:
         name: Switch to light mode
   features:
     - content.code.copy
+    - navigation.expand
 
 markdown_extensions:
   - admonition
@@ -55,3 +56,13 @@ nav:
   - "Setup": setup.md
   - "Atoms":
       - "Button": atoms/button.md
+      - "Chip": atoms/chip.md
+      - "Icon": atoms/icon.md
+      - "Text": atoms/text.md
+      - "TextField": atoms/textfield.md
+  - "Molecules":
+      - "CardTip": molecules/cardtip.md
+      - "NumericKeyboard": molecules/numerickeyboard.md
+      - "Tabs": molecules/tabs.md
+  - "Organisms":
+      - "Card": organisms/card.md
\ No newline at end of file