diff --git a/01-intro.Rmd b/01-intro.Rmd
index db3952fc..8cd1ca9f 100644
--- a/01-intro.Rmd
+++ b/01-intro.Rmd
@@ -5,6 +5,48 @@ ottrpal::set_knitr_image_path()
 
 # Introduction
 
+To add a warning box like the following use:
+
+`<div class = "warning">`
+
+Followed by the text you want inside/
+
+`</div>`
+
+The line above marks the end of the box.
+
+This will create the following:
+
+<div class = "warning">
+
+Followed by the text you want inside/
+
+</div>
+
+Here is a `<div class = "notice">` box:
+
+<div class = "notice">
+
+note text
+
+</div>
+
+Here is a `<div class = "github">` box:
+
+<div class = "github">
+
+github text
+
+</div>
+
+
+Here is a `<div class = "dictionary">` box:
+
+<div class = "dictionary">
+
+dictionary text
+
+</div>
 
 ## Motivation
 
diff --git a/assets/dictionary.png b/assets/dictionary.png
new file mode 100644
index 00000000..75ddac77
Binary files /dev/null and b/assets/dictionary.png differ
diff --git a/assets/github.png b/assets/github.png
new file mode 100644
index 00000000..a93acd3e
Binary files /dev/null and b/assets/github.png differ
diff --git a/assets/note.png b/assets/note.png
new file mode 100644
index 00000000..72de3aea
Binary files /dev/null and b/assets/note.png differ
diff --git a/assets/style.css b/assets/style.css
index 3c1d3167..1c15acfa 100755
--- a/assets/style.css
+++ b/assets/style.css
@@ -250,6 +250,78 @@ li.appendix span, li.part span { /* for TOC part names */
 /* Sidebar formating --------------------------------------------*/
 /* from r-pkgs.org*/
 
+
+div.notice{
+  border: 4px #68ace5;
+  border-style: solid;
+  padding: 1em;
+  margin: 1em 0;
+  padding-left: 100px;
+  background-size: 70px;
+  background-repeat: no-repeat;
+  background-position: 15px center;
+  min-height: 120px;
+  background-color: #e8ebee;
+}
+
+div.notice{
+  background-image: url("../assets/note.png");
+}
+
+div.warning{
+  border: 4px #e0471c;
+  border-style: solid;
+  padding: 1em;
+  margin: 1em 0;
+  padding-left: 100px;
+  background-size: 70px;
+  background-repeat: no-repeat;
+  background-position: 15px center;
+  min-height: 120px;
+  background-color: #e8ebee;
+}
+
+div.warning{
+  background-image: url("../assets/warning.png");
+}
+
+
+
+div.github{
+  border: 4px #000000;
+  border-style: solid;
+  padding: 1em;
+  margin: 1em 0;
+  padding-left: 100px;
+  background-size: 70px;
+  background-repeat: no-repeat;
+  background-position: 15px center;
+  min-height: 120px;
+  background-color: #e8ebee;
+}
+
+div.github{
+  background-image: url("../assets/github.png");
+}
+
+div.dictionary{
+  border: 4px #68ace5;
+  border-style: solid;
+  padding: 1em;
+  margin: 1em 0;
+  padding-left: 100px;
+  background-size: 70px;
+  background-repeat: no-repeat;
+  background-position: 15px center;
+  min-height: 120px;
+  background-color: #e8ebee;
+}
+
+div.dictionary{
+  background-image: url("../assets/dictionary.png");
+}
+
+
 div.rstudio-tip, div.tip, div.gotcha, div.design, div.hat{
   border: 4px #aed6d963;
   border-style: dashed solid;
diff --git a/assets/warning.png b/assets/warning.png
new file mode 100644
index 00000000..405fb61d
Binary files /dev/null and b/assets/warning.png differ
diff --git a/style-sets/itcr/copy-to-assets/style_ITN.css b/style-sets/itcr/copy-to-assets/style_ITN.css
index 6f005a26..3b317c85 100644
--- a/style-sets/itcr/copy-to-assets/style_ITN.css
+++ b/style-sets/itcr/copy-to-assets/style_ITN.css
@@ -271,6 +271,76 @@ li.appendix span, li.part span { /* for TOC part names */
 /* Sidebar formating --------------------------------------------*/
 /* from r-pkgs.org*/
 
+div.notice{
+  border: 4px #193a5c;
+  border-style: solid;
+  padding: 1em;
+  margin: 1em 0;
+  padding-left: 100px;
+  background-size: 70px;
+  background-repeat: no-repeat;
+  background-position: 15px center;
+  min-height: 120px;
+  background-color: #e8ebee;
+}
+
+div.notice{
+  background-image: url("../assets/note.png");
+}
+
+div.warning{
+  border: 4px #e0471c;
+  border-style: solid;
+  padding: 1em;
+  margin: 1em 0;
+  padding-left: 100px;
+  background-size: 70px;
+  background-repeat: no-repeat;
+  background-position: 15px center;
+  min-height: 120px;
+  background-color: #e8ebee;
+}
+
+div.warning{
+  background-image: url("../assets/warning.png");
+}
+
+
+
+div.github{
+  border: 4px #000000;
+  border-style: solid;
+  padding: 1em;
+  margin: 1em 0;
+  padding-left: 100px;
+  background-size: 70px;
+  background-repeat: no-repeat;
+  background-position: 15px center;
+  min-height: 120px;
+  background-color: #e8ebee;
+}
+
+div.github{
+  background-image: url("../assets/github.png");
+}
+
+div.dictionary{
+  border: 4px #193a5c;
+  border-style: solid;
+  padding: 1em;
+  margin: 1em 0;
+  padding-left: 100px;
+  background-size: 70px;
+  background-repeat: no-repeat;
+  background-position: 15px center;
+  min-height: 120px;
+  background-color: #e8ebee;
+}
+
+div.dictionary{
+  background-image: url("../assets/dictionary.png");
+}
+
 div.rstudio-tip, div.tip, div.gotcha, div.design, div.hat{
   border: 4px #aed6d963;
   border-style: dashed solid;