diff --git a/components/status/StatusCard.vue b/components/status/StatusCard.vue
index dd094c56..804c3ec3 100644
--- a/components/status/StatusCard.vue
+++ b/components/status/StatusCard.vue
@@ -101,7 +101,7 @@ const showRebloggedByAvatarOnAvatar = rebloggedBy && avatarOnAvatar && reblogged
         <div
           space-y-2
           :class="{
-            'my3 p1 px4 br2 bg-fade border-primary border-1 rounded-3 rounded-tl-none': status.visibility === 'direct',
+            'my3 p1 px4 br2 bg-fade border-primary-light border-1 rounded-3 rounded-tl-none': status.visibility === 'direct',
           }"
         >
           <StatusSpoiler :enabled="status.sensitive || isFiltered" :filter="isFiltered">
@@ -114,8 +114,9 @@ const showRebloggedByAvatarOnAvatar = rebloggedBy && avatarOnAvatar && reblogged
               v-if="status.mediaAttachments?.length"
               :status="status"
               minimized
+              :class="status.visibility === 'direct' ? 'pb4' : ''"
             />
-            <StatusPreviewCard v-if="status.card" :card="status.card" />
+            <StatusPreviewCard v-if="status.card" :card="status.card" :class="status.visibility === 'direct' ? 'pb4' : ''" />
           </StatusSpoiler>
           <StatusCard
             v-if="status.reblog"
diff --git a/components/status/StatusDetails.vue b/components/status/StatusDetails.vue
index 8651afd8..15db7324 100644
--- a/components/status/StatusDetails.vue
+++ b/components/status/StatusDetails.vue
@@ -26,7 +26,7 @@ const visibility = $computed(() => STATUS_VISIBILITIES.find(v => v.value === sta
       </AccountHoverWrapper>
     </NuxtLink>
     <div
-      :class="status.visibility === 'direct' ? 'my2 p1 px4 br2 bg-fade border-primary border-1 rounded-3 rounded-tl-none' : ''"
+      :class="status.visibility === 'direct' ? 'my2 p1 px4 br2 bg-fade border-primary-light border-1 rounded-3 rounded-tl-none' : ''"
     >
       <StatusSpoiler :enabled="status.sensitive">
         <template #spoiler>
@@ -39,8 +39,9 @@ const visibility = $computed(() => STATUS_VISIBILITIES.find(v => v.value === sta
         <StatusMedia
           v-if="status.mediaAttachments?.length"
           :status="status"
+          :class="status.visibility === 'direct' ? 'pb4' : ''"
         />
-        <StatusPreviewCard v-if="status.card" :card="status.card" />
+        <StatusPreviewCard v-if="status.card" :card="status.card" :class="status.visibility === 'direct' ? 'pb4' : ''" />
       </StatusSpoiler>
     </div>
     <div flex="~ gap-1" items-center text-secondary text-sm>
diff --git a/styles/vars.css b/styles/vars.css
index 157019b6..cba5576b 100644
--- a/styles/vars.css
+++ b/styles/vars.css
@@ -1,6 +1,7 @@
 :root {
   --c-primary: #EA9E44;
   --c-primary-active: #C16929;
+  --c-primary-light: #EA9E4466;
   --c-border: #eee;
 
   --c-bg-base: #fff;
diff --git a/unocss.config.ts b/unocss.config.ts
index 7d1fe679..d05f385f 100644
--- a/unocss.config.ts
+++ b/unocss.config.ts
@@ -15,6 +15,7 @@ export default defineConfig({
       'border-base': 'border-$c-border',
       'border-strong': 'border-$c-text-base',
       'border-bg-base': 'border-$c-bg-base',
+      'border-primary-light': 'border-$c-primary-light',
 
       // background
       'bg-base': 'bg-$c-bg-base',