diff --git a/index.html b/index.html
index 84dc37d..4648677 100644
--- a/index.html
+++ b/index.html
@@ -183,12 +183,25 @@
             <h1><span class="anchors"><a href="#user-reviews">~/user-reviews</a></span></h1>
             <small>(note: some of these may or may not be related to me at all)</small>
             <section class="quotes">
-                <p>god i fucking love men</p>
-                <small><i><a href="https://lethallava.land/@limineow" target="_blank">limineow</a></i></small>
-                <p>elephantastic, 10/10</p>
-                <small><i><a href="https://based.social/@rexo" target="_blank">rexo</a></i></small>
-                <p>5/7, perfect website</p>
-                <small><i><a href="https://moth.zone/users/eri" target="_blank">eri</a></i></small>
+                <section class="quote">
+                    <p>god i fucking love men</p>
+                    <small><i><a href="https://lethallava.land/@limineow" target="_blank">limineow</a></i></small>
+                </section>
+                    
+                <section class="quote">
+                    <p>elephantastic, 10/10</p>
+                    <small><i><a href="https://based.social/@rexo" target="_blank">rexo</a></i></small>
+                </section> 
+
+                <section class="quote">
+                    <p>5/7, perfect website</p>
+                    <small><i><a href="https://moth.zone/users/eri" target="_blank">eri</a></i></small>
+                </section>
+
+                <section class="quote">
+                    <p>7.8/10, too little water</p>
+                    <small><i><a href="https://lea.pet/@SweetCoffy" target="_blank">SweetCoffy</a></i></small>
+                </section>
             </section>
         </article>
     </div>
diff --git a/style.css b/style.css
index 0a0ee4d..a7ad6fb 100644
--- a/style.css
+++ b/style.css
@@ -554,27 +554,29 @@ footer > .dot {
 /* -- end of puke code -- */
 
 .quotes {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
     text-align: center;
 }
 
-.quotes > p::before {
+.quote > p::before {
     content: "“";
 }
 
-.quotes > p::after {
+.quote > p::after {
     content: "”";
 }
 
-.quotes > p::before, .quotes > p::after {
+.quote > p::before, .quote > p::after {
     color: var(--header);
     font-size: 28px;
 }
 
-.quotes > p {
+.quote > p {
     font-size: 24px;
 }
 
-.quotes > small::before {
+.quote > small::before {
     content: "-";
     padding-right: 1em;
     text-shadow: 0px 0px 8px var(--accent-1);
@@ -583,7 +585,7 @@ footer > .dot {
     padding-left: 3em;
 }
 
-.quotes > small, .quotes > small > i > a {
+.quote > small, .quote > small > i > a {
     text-shadow: 0px 0px 8px var(--header);
     color: var(--fg);
     font-size: 16px;
@@ -639,7 +641,13 @@ footer > .dot {
         display: none;
     }
 
-    .quotes > small::before {
+    .quotes {
+        grid-template-columns: unset;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .quote > small::before {
         padding-left: unset;
     }