diff --git a/assets/css/style.css b/assets/css/style.css
index db4733e..4bb124e 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -315,6 +315,38 @@ footer {
 
 /* END FOOTER */
 
+/*
+** MASTODON TOOTS
+*/
+.toot {
+  margin-bottom: 2rem;
+  padding: 15px;
+  border: 1px solid #656565;
+  border-radius: 10px;
+}
+.toot .date {
+  vertical-align: top;
+  margin-bottom: 0;
+}
+.toot-avatar { display: inline-block; }
+.toot .e-content img { border: 2px solid black; }
+
+.toot .e-content p:first-of-type {
+  display: inline-block;
+}
+.toot-photos {
+  display: flex;
+  justify-content: space-evenly;
+  flex-wrap: wrap;
+}
+main .e-content .toot-photos img {
+  width: 100%;
+  max-width: 300px;
+}
+.toot-social { margin-top: 1rem; }
+
+/* END TOOTS */
+
 /*
 ** EXTRA
 */
diff --git a/layouts/shortcodes/displayToots.html b/layouts/shortcodes/displayToots.html
index 0d25c20..f34a188 100644
--- a/layouts/shortcodes/displayToots.html
+++ b/layouts/shortcodes/displayToots.html
@@ -1,34 +1,6 @@
 {{ $url := .Get 0 }}
 {{ $dataJ := getJSON $url  }}
 
-<style>
-    .toot {
-        margin-bottom: 2rem;
-        padding: 15px;
-        border: 1px solid #656565;
-        border-radius: 10px;
-    }
-    .toot .date {
-        vertical-align: top;
-        margin-bottom: 0;
-    }
-    .toot-avatar { display: inline-block; }
-    .toot .e-content img { border: 2px solid black; }
-
-    .toot .e-content p:first-of-type {
-        display: inline-block;
-    }
-    .toot-photos {
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-    }
-    main .e-content .toot-photos img {
-        width: 100%;
-        max-width: 300px;
-    }
-    .toot-social { margin-top: 1rem; }
-</style>
 
 {{ range sort $dataJ "created_at" "desc" }}
 {{ if ne .content "" }}
diff --git a/layouts/shortcodes/unsafe.html b/layouts/shortcodes/unsafe.html
new file mode 100644
index 0000000..88c822a
--- /dev/null
+++ b/layouts/shortcodes/unsafe.html
@@ -0,0 +1 @@
+{{ .Inner }}
\ No newline at end of file
diff --git a/layouts/toots/list.html b/layouts/toots/list.html
new file mode 100644
index 0000000..23220ab
--- /dev/null
+++ b/layouts/toots/list.html
@@ -0,0 +1,41 @@
+{{ define "main"}}
+  {{ partial "header.html" . }}
+  <main>
+    <style>main { text-align: left; }</style> 
+    {{ partial "search.html" . }}
+    <p>
+        This is an experimental page showing my toots from Mastodon. 
+        Currently, this does not support boosts and it does not automatically refresh. 
+        Feel free to check out 
+        <a href="https://fosstodon.org/@brozek">my profile at Fosstodon</a>
+    </p>
+    {{ $listPageDateFormat := .Site.Params.listPageDateFormat | default "January, 2006"}}
+    {{ range $index, $value := .Pages.GroupByDate $listPageDateFormat }}
+    {{ range .Pages }}
+      <article class="toot h-entry">
+        <div class="e-content">
+                <img class="toot-avatar" width=50 src="{{ .Params.account.avatar }}"/>
+            <p class="date">Tooted on <time class="dt-published" datetime='{{ .Date }}'>{{ dateFormat "January 2, 2006 15:04" (time .Date) }}</time></p>
+            {{ .Content | safeHTML }}
+            {{ if gt (len .Params.media_attachments) 0 }}
+            <div class="toot-photos">
+            {{ range .Params.media_attachments}}
+                {{ if eq .type "image" }}
+                <img src="{{ .preview_url }}" alt="{{ .description }}"/>
+                {{ end }}
+            {{ end }}
+            </div>
+            {{ end }}
+        </div>
+        <div class="toot-social">
+            <span><i class='fas fa-share'></i> {{ .Params.replies_count }} </span>
+            <span><i class='fas fa-retweet'></i> {{ .Params.reblogs_count }} </span>
+            <span><i class='fas fa-star'></i> {{ .Params.favourites_count }} </span>
+            <span>| Source: <a href="{{ .Params.syndication }}">{{ .Params.syndication }}</a></span>
+        </div>
+    </article>
+      {{ end }}
+      {{ end }}
+  </main>
+  {{ partial "footer.html" . }}
+{{ end }}
diff --git a/layouts/toots/single.html b/layouts/toots/single.html
new file mode 100644
index 0000000..0de7d16
--- /dev/null
+++ b/layouts/toots/single.html
@@ -0,0 +1,31 @@
+{{ define "main"}}
+{{ .Scratch.Set "customTitleHeaderSet" true }}
+{{ .Scratch.Set "customTitleHeader" "Toots" }}
+{{ .Scratch.Set "customTitleHeaderLink" "/toots" }}
+{{ partial "header.html" . }}
+<main>
+  <article class="toot h-entry">
+      <div class="e-content">
+              <img class="toot-avatar" width=50 src="{{ .Params.account.avatar }}"/>
+          <p class="date">Tooted on <time class="dt-published" datetime='{{ .Date }}'>{{ dateFormat "January 2, 2006 15:04" (time .Date) }}</time></p>
+          {{ .Content | safeHTML }}
+          {{ if gt (len .Params.media_attachments) 0 }}
+          <div class="toot-photos">
+          {{ range .Params.media_attachments}}
+              {{ if eq .type "image" }}
+              <img src="{{ .preview_url }}" alt="{{ .description }}"/>
+              {{ end }}
+          {{ end }}
+          </div>
+          {{ end }}
+      </div>
+      <div class="toot-social">
+          <span><i class='fas fa-share'></i> {{ .Params.replies_count }} </span>
+          <span><i class='fas fa-retweet'></i> {{ .Params.reblogs_count }} </span>
+          <span><i class='fas fa-star'></i> {{ .Params.favourites_count }} </span>
+          <span>| Source: <a href="{{ .Params.syndication }}">{{ .Params.syndication }}</a></span>
+      </div>
+  </article>
+</main>
+{{ partial "footer.html" . }}
+{{ end }}