diff --git a/quartz/components/RecentNotes.tsx b/quartz/components/RecentNotes.tsx
index bb7ba199..5e992b48 100644
--- a/quartz/components/RecentNotes.tsx
+++ b/quartz/components/RecentNotes.tsx
@@ -24,11 +24,11 @@ const defaultOptions: Options = {
 export default ((userOpts?: Partial<Options>) => {
   const opts = { ...defaultOptions, ...userOpts }
   function RecentNotes(props: QuartzComponentProps) {
-    const { allFiles, fileData } = props
+    const { allFiles, fileData, displayClass } = props
     const pages = allFiles.filter(opts.filter).sort(opts.sort).slice(0, opts.limit)
     const remaining = Math.max(0, pages.length - opts.limit)
     return (
-      <div class="recent-notes">
+      <div class={`recent-notes ${displayClass}`}>
         <h3>{opts.title}</h3>
         <ul class="recent-ul">
           {pages.map((page) => {
diff --git a/quartz/components/TableOfContents.tsx b/quartz/components/TableOfContents.tsx
index 67f29d58..46045659 100644
--- a/quartz/components/TableOfContents.tsx
+++ b/quartz/components/TableOfContents.tsx
@@ -13,13 +13,13 @@ const defaultOptions: Options = {
   layout: "modern",
 }
 
-function TableOfContents({ fileData }: QuartzComponentProps) {
+function TableOfContents({ fileData, displayClass }: QuartzComponentProps) {
   if (!fileData.toc) {
     return null
   }
 
   return (
-    <div class="desktop-only">
+    <div class={`toc ${displayClass}`}>
       <button type="button" id="toc">
         <h3>Table of Contents</h3>
         <svg
diff --git a/quartz/components/styles/recentNotes.scss b/quartz/components/styles/recentNotes.scss
index 05871f50..72676719 100644
--- a/quartz/components/styles/recentNotes.scss
+++ b/quartz/components/styles/recentNotes.scss
@@ -1,11 +1,12 @@
 .recent-notes {
   & > h3 {
+    margin: 0.5rem 0 0 0;
     font-size: 1rem;
   }
 
   & > ul.recent-ul {
     list-style: none;
-    margin-top: 1.5rem;
+    margin-top: 1rem;
     padding-left: 0;
 
     & > li {