diff --git a/Iceshrimp.Frontend/Components/ProfileInfo.razor.css b/Iceshrimp.Frontend/Components/ProfileInfo.razor.css
index 09c0c5dc..fc9b8e7c 100644
--- a/Iceshrimp.Frontend/Components/ProfileInfo.razor.css
+++ b/Iceshrimp.Frontend/Components/ProfileInfo.razor.css
@@ -6,8 +6,11 @@
     word-break: break-word;
 }
 
+.fields,
 .data {
     margin: 1rem 0;
+    background-color: var(--background-color);
+    border-radius: 8px;
 }
 
 .metadata {
@@ -22,12 +25,14 @@
         display: flex;
         column-gap: 0.5rem;
         margin: 0.2rem 0;
-    
+        padding: 11px 16px;
+        border-bottom: solid 2px var(--foreground-color);
+
         .field-name {
             font-weight: 600;
             width: 10rem;
             word-wrap: break-word;
-            
+
             .ph {
                 vertical-align: text-bottom;
             }
@@ -46,6 +51,7 @@
 
 .section {
     text-align: center;
+
     .field-data {
         font-weight: 600;
     }
@@ -73,6 +79,7 @@
 }
 
 ::deep {
+
     /* For some reason ph-lock aligns differently than the other icons. This fixes that */
     .badge .ph-lock {
         vertical-align: middle;
@@ -82,18 +89,18 @@
 @media (max-width: 640px) {
     ::deep .field {
         flex-direction: column;
-        
+
         .field-name {
             width: auto;
         }
     }
-    
+
     ::deep .field .field-value {
         width: auto;
     }
-    
+
     ::deep {
-        .field + .field {
+        .field+.field {
             margin-top: 0.5rem;
         }
     }