diff --git a/index.html b/index.html
index 06fb723..4b87690 100644
--- a/index.html
+++ b/index.html
@@ -123,6 +123,50 @@
     <p class="term-input"><span class="folder">󰉋 ~/fun-facts</span> <span class="status"></span> <span class="blink">█</span></p>
 </div>
 
+<!-- quotes -->
+<div id="quotes" class="terminal">
+    <div class="term-titlebar">
+        <img src="./assets/terminal.svg">
+        <p><a href="#quotes">~/quotes</a></p>
+        <div> <div id="minimize-btn"></div> <div id="maximize-btn"></div> <div id="close-btn"></div> </div>
+    </div>
+    <section>
+        <h2><a href="#quotes">quotes</a></h2>
+        <p>quotes left behind from friends! usually from the fediverse!</p>
+        <div class="socials-contacts-list">
+            <span class="quotes-container" id="limineow">
+                <p>"can you make my quote say that i am extremely homophobic and definitely not gay"</p>
+                <small>~ <a href="https://grimgreenfo.rest/@root" target="_blank">limineow</a></small>
+            </span>
+            <span class="quotes-container" id="bready">
+                <p>"*slaps visor* this synth can fit so much brainrot in him"</p>
+                <small>~ <a href="https://lethallava.land/@breaadyboy" target="_blank">breaadyboy</a></small>
+            </span>
+            <span class="quotes-container" id="mikoto">
+                <p>"The evolution of @sneexy from plush yoshi to robo dragon thing is interesting"</p>
+                <small>~ <a href="https://akko.wtf/users/mikoto" target="_blank">mikoto</a></small>
+            </span>
+            <span class="quotes-container" id="av70">
+                <p>"im deporting you until you say ur sorry"</p>
+                <small>~ <a href="https://akko.eepy.zone/users/av70" target="_blank">av70</a></small>
+            </span>
+            <span class="quotes-container" id="vozy">
+                <p>"what a horrible day to have beaten the other sperm to the egg 22 years ago"</p>
+                <small>~ <a href="https://wetdry.world/@vozercozer" target="_blank">vozercozer</a></small>
+            </span>
+            <span class="quotes-container" id="guigui">
+                <p>"they'll never expect the french inquisition"</p>
+                <small>~ <a href="https://wetdry.world/@guigui" target="_blank">guigui</a></small>
+            </span>
+            <span class="quotes-container" id="binbows">
+                <p>"skibidi toilet will be mine yeah"</p>
+                <small>~ <a href="https://labyrinth.zone/users/binbows" target="_blank">binbows</a></small>
+            </span>
+        </div>
+    </section>
+    <p class="term-input"><span class="folder">󰉋 ~/quotes</span> <span class="status"></span> <span class="blink">█</span></p>
+</div>
+
 <!-- buttons -->
 <div id="buttons" class="terminal">
     <div class="term-titlebar">
diff --git a/style.css b/style.css
index 1e91496..221b371 100644
--- a/style.css
+++ b/style.css
@@ -333,7 +333,7 @@ a {
     color: var(--green);
 }
 /* smol text */
-small {
+small, small a {
     font-size: 14px;
 }
 /* lists need some styling */
@@ -505,6 +505,144 @@ socials and links
     }
 }
 
+/*
+quotes
+*/
+.quotes-container {
+    display: inline-block;
+    text-align: center;
+    margin: .3em;
+    padding: .2em;
+    border-radius: 1em;
+    background-color: var(--crust);
+    p, a, small {
+        padding-left: 1mm;
+        padding-right: 1mm;
+        margin-top: .8mm;
+        margin-bottom: .8mm;
+    }
+}
+#limineow {
+    background-color: color-mix(in srgb, var(--red) 25%, transparent);
+    p, a, small {
+        color: var(--text);
+        text-decoration: none;
+    }
+    a:hover {
+        color: var(--red);
+        text-decoration: underline;
+        small {
+            color: var(--red) !important;
+            text-decoration: underline;
+        }
+    }
+}
+#limineow {
+    background-color: color-mix(in srgb, var(--red) 25%, transparent);
+    p, a, small {
+        color: var(--text);
+        text-decoration: none;
+    }
+    a:hover {
+        color: var(--red);
+        text-decoration: underline;
+        small {
+            color: var(--red) !important;
+            text-decoration: underline;
+        }
+    }
+}
+#bready {
+    background-color: color-mix(in srgb, var(--peach) 25%, transparent);
+    p, a, small {
+        color: var(--text);
+        text-decoration: none;
+    }
+    a:hover {
+        color: var(--peach);
+        text-decoration: underline;
+        small {
+            color: var(--peach) !important;
+            text-decoration: underline;
+        }
+    }
+}
+#mikoto {
+    background-color: color-mix(in srgb, var(--lavender) 25%, transparent);
+    p, a, small {
+        color: var(--text);
+        text-decoration: none;
+    }
+    a:hover {
+        color: var(--lavender);
+        text-decoration: underline;
+        small {
+            color: var(--lavender) !important;
+            text-decoration: underline;
+        }
+    }
+}
+#av70 {
+    background-color: color-mix(in srgb, var(--mauve) 25%, transparent);
+    p, a, small {
+        color: var(--text);
+        text-decoration: none;
+    }
+    a:hover {
+        color: var(--mauve);
+        text-decoration: underline;
+        small {
+            color: var(--mauve) !important;
+            text-decoration: underline;
+        }
+    }
+}
+#vozy {
+    background-color: color-mix(in srgb, var(--pink) 25%, transparent);
+    p, a, small {
+        color: var(--text);
+        text-decoration: none;
+    }
+    a:hover {
+        color: var(--pink);
+        text-decoration: underline;
+        small {
+            color: var(--pink) !important;
+            text-decoration: underline;
+        }
+    }
+}
+#guigui {
+    background-color: color-mix(in srgb, var(--green) 25%, transparent);
+    p, a, small {
+        color: var(--text);
+        text-decoration: none;
+    }
+    a:hover {
+        color: var(--green);
+        text-decoration: underline;
+        small {
+            color: var(--green) !important;
+            text-decoration: underline;
+        }
+    }
+}
+#binbows {
+    background-color: color-mix(in srgb, var(--crust) 25%, transparent);
+    p, a, small {
+        color: var(--text);
+        text-decoration: none;
+    }
+    a:hover {
+        color: var(--text);
+        text-decoration: underline;
+        small {
+            color: var(--text) !important;
+            text-decoration: underline;
+        }
+    }
+}
+
 /*
 buttons
 */