diff --git a/src/app/document/view/[slug]/DocumentViewer.tsx b/src/app/document/view/[slug]/DocumentViewer.tsx
index ada6f48..c48b39a 100644
--- a/src/app/document/view/[slug]/DocumentViewer.tsx
+++ b/src/app/document/view/[slug]/DocumentViewer.tsx
@@ -50,11 +50,13 @@ export default function DocumentViewer({ slug }: Readonly<{ slug: string }>) {
           {epoch2datestring(dates[dates.length - 1])}
         </span>
       </p>
-      <ItemBadge itemName={type as DocumentType} />
-      <Status statusName={status} />
-      <span className='inline-block border-gray-200 border-2 rounded px-2 py-1.5 mr-2 shadow-sm shadow-slate-300'>
-        Revision {latest}
-      </span>
+      <div className='flex flex-wrap gap-2'>
+        <ItemBadge itemName={type as DocumentType} />
+        <Status statusName={status} />
+        <span className='border-gray-200 border-2 rounded px-2 py-1.5 mr-2 shadow-sm shadow-slate-300'>
+          Revision {latest}
+        </span>
+      </div>
       <hr className='my-4' />
       <h4 className='text-2xl mt-5 font-serif font-semibold'>Abstract</h4>
       <p className='my-4 text-xl text-slate-600 font-serif text-balance'>
diff --git a/src/app/globals.css b/src/app/globals.css
index f1ec6f8..0222888 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -21,11 +21,11 @@ a:hover {
 }
 
 .button-default {
-  @apply bg-blue-600 text-slate-100 hover:bg-blue-400 font-semibold rounded py-2 px-4 my-2 shadow-sm shadow-slate-500;
+  @apply bg-blue-600 text-slate-100 hover:bg-blue-400 font-semibold rounded py-2 px-4 my-2 shadow-sm shadow-slate-400;
 }
 
 .badge-base {
-  @apply px-3 py-1.5 rounded inline-block w-fit mr-2 my-1 text-slate-50 border-2 shadow-sm shadow-slate-500;
+  @apply px-3 py-1.5 rounded inline-block w-fit text-slate-50 border-2 shadow-sm shadow-slate-400;
 }
 
 .badge-draft {