diff --git a/frontend/src/app.sass b/frontend/src/app.sass
index fe1160511..6ee3f9a04 100644
--- a/frontend/src/app.sass
+++ b/frontend/src/app.sass
@@ -1745,3 +1745,28 @@ video
   font-size: .5em
   font-family: var(--font-monospace)
   color: var(--color-fontsec)
+
+.exam-office-label
+  --lbl-padding-vert: 5px
+  --lbl-padding-hori: 15px
+  padding: var(--lbl-padding-vert) var(--lbl-padding-hori)
+  border-radius: 20px 20px 20px 20px
+  font-weight: 600
+  text-align: center
+  width: fit-content
+  margin: 0 auto
+  &.success
+    background-color: var(--color-success-dark)
+    color: var(--color-lightwhite)
+  &.error
+    background-color: var(--color-error)
+    color: var(--color-lightwhite)
+  &.warning
+    background-color: var(--color-warning)
+    color: var(--color-lightwhite)
+  &.info
+    background-color: var(--color-lightblack)
+    color: var(--color-lightwhite)
+  &.nonactive
+    background-color: var(--color-nonactive)
+    color: var(--color-nonactive-dark)
diff --git a/src/Handler/ExamOffice/Exams.hs b/src/Handler/ExamOffice/Exams.hs
index 366f226d6..0f61875e6 100644
--- a/src/Handler/ExamOffice/Exams.hs
+++ b/src/Handler/ExamOffice/Exams.hs
@@ -283,11 +283,7 @@ postEOExamsR = do
             -- TODO: use select frontend util
             if
               | Just (Just (Entity _ ExamOfficeLabel{..})) <- mLabel
-              -> return $ cell
-                [whamlet|
-                  $newline never
-                  #{examOfficeLabelName} (_{examOfficeLabelStatus}, #{tshow examOfficeLabelPriority})
-                |]
+              -> return $ cell $(widgetFile "widgets/exam-office-label")
               | otherwise -> return $ cell mempty
 
           colSynced = Colonnade.singleton (fromSortable . Sortable (Just "synced") $ i18nCell MsgExamSynchronised) $ \x -> flip runReader x $ do
diff --git a/templates/widgets/exam-office-label.hamlet b/templates/widgets/exam-office-label.hamlet
new file mode 100644
index 000000000..db8d43354
--- /dev/null
+++ b/templates/widgets/exam-office-label.hamlet
@@ -0,0 +1,4 @@
+$newline never
+
+<div .exam-office-label .#{toPathPiece examOfficeLabelStatus}>
+  #{examOfficeLabelName}