diff --git a/layouts/partials/aside.html b/layouts/partials/aside.html
index 3fb8231..a162165 100644
--- a/layouts/partials/aside.html
+++ b/layouts/partials/aside.html
@@ -42,7 +42,11 @@
 <hr>
 <h3>status.lol</h3>
 <script src="https://status.lol/jbowdre.js?time&link&fluent&pretty"></script>
+<hr>
+<h3>shoutouts</h3>
+<script src="https://shoutouts.lol/embed/kz-49_TpBK2YexqL6Gyf.js" defer></script>
 {{- if eq .Site.Params.analytics true }}
 <hr>
+<h3>webring</h3>
 <a href="" target="_blank" class="tinylytics_webring" title="Tinylytics Webring">️🕸<img class="tinylytics_webring_avatar" src="" style="display: none"/>💍</a>
 {{- end }}
\ No newline at end of file
diff --git a/static/css/custom.css b/static/css/custom.css
index 706c21f..ef4c247 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -315,6 +315,24 @@ a.tinylytics_webring {
   font-size: 1.5rem;
 }
 
+/* shoutouts styling */
+.shoutout .shoutout__container .shoutout__title:before {
+  content: none;
+}
+
+.shoutout .shoutout__container .shoutout__title {
+  font-size: 1rem;
+  margin: 0;
+  margin-bottom: 0.5rem;
+  font-weight: 400;
+}
+
+.shoutout .shoutout__container .shoutout__content {
+  font-style: italic;
+  font-size: 0.9rem;
+  line-height: 1.2rem;
+}
+
 /* post front matter styling*/
 .frontmatter hr {
   margin-bottom: 0rem;