diff --git a/pages/components/Banner.md b/pages/components/Banner.md
index 8e843d4..68a5aba 100644
--- a/pages/components/Banner.md
+++ b/pages/components/Banner.md
@@ -1 +1,7 @@
-# Banner
\ No newline at end of file
+# Banner
+
+## description
+
+body
+
+[link](http://)
\ No newline at end of file
diff --git a/pages/components/Toastr.md b/pages/components/Toastr.md
index e69de29..5d5f6b0 100644
--- a/pages/components/Toastr.md
+++ b/pages/components/Toastr.md
@@ -0,0 +1,28 @@
+# Toastr
+Describe what the component is and when it is used. Keep it short.
+
+<insert component> -- added by developer
+
+## Usage
+Describe use cases and when not to use the component
+Ref to *related component* (if applicable)
+Include design *principles* (if applicable)
+
+## Anatomy
+<image shows the composition of the component with annotations> 
+Ref [Banners - Material Design](https://material.io/design/components/banners.html#anatomy)
+list of the anatomies
+
+Breakdown of anatomies 
+(Describe every part in detail, e.g. definition, usage, principle)
+Noted that: for component containing text, we should always have a section talk about the writing (e.g. length restriction and tone)
+
+## List the variation of the component (if applicable)
+
+## (Optional) Placement 
+Describe where the component should be placed
+
+## (Optional) Order and alignment
+
+## Implementation -- added by developer
+## Demo -- added by developer
\ No newline at end of file