diff --git a/themes/animated/README.md b/themes/animated/README.md
new file mode 100644
index 0000000..f1e4744
--- /dev/null
+++ b/themes/animated/README.md
@@ -0,0 +1,9 @@
+# Themes: Animated
+
+## What it does
+
+Employs an animated PNG image as the headerURL image in a theme.
+
+## What it shows
+
+How to use an animated image in a theme.
diff --git a/themes/animated/manifest.json b/themes/animated/manifest.json
new file mode 100755
index 0000000..e7c9751
--- /dev/null
+++ b/themes/animated/manifest.json
@@ -0,0 +1,19 @@
+{
+
+  "description": "Theme using an animated PNG file as the headerURL image. See https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Examples#themes",
+  "manifest_version": 2,
+  "name": "animated",
+  "version": "1.0",
+  "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/themes/animated",
+
+  "theme": {
+    "images": {
+      "headerURL": "parrot.png"
+    },
+    
+    "colors": {
+       "accentcolor": "#ffffff",
+       "textcolor": "#000"
+    }
+  }
+}
diff --git a/themes/animated/parrot.png b/themes/animated/parrot.png
new file mode 100755
index 0000000..e77366b
Binary files /dev/null and b/themes/animated/parrot.png differ
diff --git a/themes/animated/parrot_frames/1.png b/themes/animated/parrot_frames/1.png
new file mode 100755
index 0000000..2acd576
Binary files /dev/null and b/themes/animated/parrot_frames/1.png differ
diff --git a/themes/animated/parrot_frames/10.png b/themes/animated/parrot_frames/10.png
new file mode 100755
index 0000000..071b908
Binary files /dev/null and b/themes/animated/parrot_frames/10.png differ
diff --git a/themes/animated/parrot_frames/2.png b/themes/animated/parrot_frames/2.png
new file mode 100755
index 0000000..cca931a
Binary files /dev/null and b/themes/animated/parrot_frames/2.png differ
diff --git a/themes/animated/parrot_frames/3.png b/themes/animated/parrot_frames/3.png
new file mode 100755
index 0000000..7c57152
Binary files /dev/null and b/themes/animated/parrot_frames/3.png differ
diff --git a/themes/animated/parrot_frames/4.png b/themes/animated/parrot_frames/4.png
new file mode 100755
index 0000000..14dff5e
Binary files /dev/null and b/themes/animated/parrot_frames/4.png differ
diff --git a/themes/animated/parrot_frames/5.png b/themes/animated/parrot_frames/5.png
new file mode 100755
index 0000000..e1ff036
Binary files /dev/null and b/themes/animated/parrot_frames/5.png differ
diff --git a/themes/animated/parrot_frames/6.png b/themes/animated/parrot_frames/6.png
new file mode 100755
index 0000000..17c05ec
Binary files /dev/null and b/themes/animated/parrot_frames/6.png differ
diff --git a/themes/animated/parrot_frames/7.png b/themes/animated/parrot_frames/7.png
new file mode 100755
index 0000000..3f28616
Binary files /dev/null and b/themes/animated/parrot_frames/7.png differ
diff --git a/themes/animated/parrot_frames/8.png b/themes/animated/parrot_frames/8.png
new file mode 100755
index 0000000..eb02e61
Binary files /dev/null and b/themes/animated/parrot_frames/8.png differ
diff --git a/themes/animated/parrot_frames/9.png b/themes/animated/parrot_frames/9.png
new file mode 100755
index 0000000..f73dd3d
Binary files /dev/null and b/themes/animated/parrot_frames/9.png differ
diff --git a/themes/weta_fade/README.md b/themes/weta_fade/README.md
new file mode 100644
index 0000000..e2fd8d1
--- /dev/null
+++ b/themes/weta_fade/README.md
@@ -0,0 +1,10 @@
+# Themes: weta_fade
+
+## What it does
+
+Employs a PNG image as the headerURL image in a theme.
+
+## What it shows
+
+How to create a single image theme, using a faded edge and background color to ensure
+the image works well on a range of screen sizes.
diff --git a/themes/weta_fade/manifest.json b/themes/weta_fade/manifest.json
new file mode 100644
index 0000000..30145f7
--- /dev/null
+++ b/themes/weta_fade/manifest.json
@@ -0,0 +1,19 @@
+{
+
+  "description": "Theme using a PNG as the headerURL image, employing a faded edge. See https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Examples#themes",
+  "manifest_version": 2,
+  "name": "weta_fade",
+  "version": "1.0",
+  "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/themes/weta_fade",
+
+  "theme": {
+    "images": {
+      "headerURL": "weta.png"
+    },
+    
+    "colors": {
+       "accentcolor": "#adb09f",
+       "textcolor": "#000"
+    }
+  }
+}
diff --git a/themes/weta_fade/weta.png b/themes/weta_fade/weta.png
new file mode 100755
index 0000000..8b79595
Binary files /dev/null and b/themes/weta_fade/weta.png differ
diff --git a/themes/weta_fade_chrome/README.md b/themes/weta_fade_chrome/README.md
new file mode 100644
index 0000000..2de7d43
--- /dev/null
+++ b/themes/weta_fade_chrome/README.md
@@ -0,0 +1,9 @@
+# Themes: Animated
+
+## What it does
+
+Employs an PNG image as the Chrome compatible theme_frame image in a theme.
+
+## What it shows
+
+How to use the Chrome compatible keys in a theme's manifest.json file to make a theme available for Firefox and Chrome.
diff --git a/themes/weta_fade_chrome/manifest.json b/themes/weta_fade_chrome/manifest.json
new file mode 100755
index 0000000..ea0d35d
--- /dev/null
+++ b/themes/weta_fade_chrome/manifest.json
@@ -0,0 +1,21 @@
+{
+
+  "description": "Version of the weta_fade theme using the Chrome compatible manifest keys. See https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Examples#themes",
+  "manifest_version": 2,
+  "name": "weta_fade_chrome",
+  "version": "1.0",
+  "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/themes/weta_fade_chrome",
+
+
+  "theme": {
+    "images": {
+        "theme_frame": "weta.png"
+    },
+    
+    "colors": {
+         "frame": [ 173 , 176 , 159 ],
+         "tab_text": [ 0 , 0 , 0 ]
+    }
+  }
+
+}
diff --git a/themes/weta_fade_chrome/weta.png b/themes/weta_fade_chrome/weta.png
new file mode 100755
index 0000000..8b79595
Binary files /dev/null and b/themes/weta_fade_chrome/weta.png differ
diff --git a/themes/weta_mirror/README.md b/themes/weta_mirror/README.md
new file mode 100644
index 0000000..7610d42
--- /dev/null
+++ b/themes/weta_mirror/README.md
@@ -0,0 +1,9 @@
+# Themes: Animated
+
+## What it does
+
+Employs two PNG images to create a mirror effect with the theme images.
+
+## What it shows
+
+How to use "additional_backgrounds": in conjunction with "additional_backgrounds_alignment": to place multiple images within the browser header.
diff --git a/themes/weta_mirror/empty.png b/themes/weta_mirror/empty.png
new file mode 100755
index 0000000..ceafa98
Binary files /dev/null and b/themes/weta_mirror/empty.png differ
diff --git a/themes/weta_mirror/manifest.json b/themes/weta_mirror/manifest.json
new file mode 100755
index 0000000..7a6749d
--- /dev/null
+++ b/themes/weta_mirror/manifest.json
@@ -0,0 +1,24 @@
+{
+
+  "description": "Theme using multiple additional_backgrounds images. See https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Examples#themes",
+  "manifest_version": 2,
+  "name": "weta_mirror",
+  "version": "1.0",
+  "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/themes/weta_mirror",
+
+  "theme": {
+    "images": {
+      "headerURL": "empty.png",
+      "additional_backgrounds": [ "weta.png", "weta-left.png"]
+    },
+
+    "properties": {
+      "additional_backgrounds_alignment": [ "right top" , "left top" ]
+    },
+    
+    "colors": {
+       "accentcolor": "#adb09f",
+       "textcolor": "#000"
+    }
+  }
+}
diff --git a/themes/weta_mirror/weta-left.png b/themes/weta_mirror/weta-left.png
new file mode 100755
index 0000000..1c7d816
Binary files /dev/null and b/themes/weta_mirror/weta-left.png differ
diff --git a/themes/weta_mirror/weta.png b/themes/weta_mirror/weta.png
new file mode 100755
index 0000000..8b79595
Binary files /dev/null and b/themes/weta_mirror/weta.png differ
diff --git a/themes/weta_tiled/README.md b/themes/weta_tiled/README.md
new file mode 100644
index 0000000..11d539d
--- /dev/null
+++ b/themes/weta_tiled/README.md
@@ -0,0 +1,9 @@
+# Themes: Animated
+
+## What it does
+
+Tiles a PNG imagein the browser header.
+
+## What it shows
+
+How to use "additional_backgrounds": in conjunction with "additional_backgrounds_alignment": and "additional_backgrounds_tiling": to place an image within the browser header and then tile it.
diff --git a/themes/weta_tiled/empty.png b/themes/weta_tiled/empty.png
new file mode 100755
index 0000000..ceafa98
Binary files /dev/null and b/themes/weta_tiled/empty.png differ
diff --git a/themes/weta_tiled/manifest.json b/themes/weta_tiled/manifest.json
new file mode 100644
index 0000000..347b65c
--- /dev/null
+++ b/themes/weta_tiled/manifest.json
@@ -0,0 +1,25 @@
+{
+
+  "description": "Theme with a single image placed centrally and then tiled. See https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Examples#themes",
+  "manifest_version": 2,
+  "name": "weta_tiled",
+  "version": "1.0",
+  "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/themes/weta_tiled",
+
+  "theme": {
+    "images": {
+      "headerURL": "empty.png",
+      "additional_backgrounds": [ "weta_for_tiling.png"]
+    },
+
+    "properties": {
+      "additional_backgrounds_alignment": [ "top" ],
+      "additional_backgrounds_tiling": [ "repeat"  ]
+   },
+    
+    "colors": {
+       "accentcolor": "#adb09f",
+       "textcolor": "#000"
+    }
+  }
+}
diff --git a/themes/weta_tiled/weta_for_tiling.png b/themes/weta_tiled/weta_for_tiling.png
new file mode 100755
index 0000000..467a548
Binary files /dev/null and b/themes/weta_tiled/weta_for_tiling.png differ