diff --git a/templates/widgets/communication/recipientAdd.hamlet b/templates/widgets/communication/recipientAdd.hamlet
index 6f992e6bd..3c99d2964 100644
--- a/templates/widgets/communication/recipientAdd.hamlet
+++ b/templates/widgets/communication/recipientAdd.hamlet
@@ -1,5 +1,5 @@
 $newline never
-<div .category__entry-add>
+<div .recipient-category__option-add>
   #{csrf}
   ^{fvInput addView}
   ^{fvInput submitView}
diff --git a/templates/widgets/communication/recipientEmail.hamlet b/templates/widgets/communication/recipientEmail.hamlet
index ed3964879..5290fcef2 100644
--- a/templates/widgets/communication/recipientEmail.hamlet
+++ b/templates/widgets/communication/recipientEmail.hamlet
@@ -1,7 +1,6 @@
 $newline never
-<div .category__option>
+<div .recipient-category__option>
   #{csrf}
   ^{fvInput tickView}
-  <label for=#{fvId tickView}>
-    <span style="font-family: monospace">
-      #{email}
+  <label .recipient-category__option-label for=#{fvId tickView}>
+    #{email}
diff --git a/templates/widgets/communication/recipientLayout.hamlet b/templates/widgets/communication/recipientLayout.hamlet
index 9f0ff360f..680778623 100644
--- a/templates/widgets/communication/recipientLayout.hamlet
+++ b/templates/widgets/communication/recipientLayout.hamlet
@@ -1,11 +1,12 @@
 $newline never
 $forall category <- activeCategories
-  <div .category>
+  <div .recipient-category>
     <input type=checkbox id=#{checkedIdent category} :elem category checkedCategories:checked>
-    <label for=#{checkedIdent category}>
+    <label .recipient-category__label for=#{checkedIdent category}>
       _{category}
 
-    <fieldset uw-interactive-fieldset data-conditional-input=#{checkedIdent category} .interactive-fieldset--target>
+    $# TODO: only add fieldset if there are options to choose from
+    <fieldset .recipient-category__fieldset uw-interactive-fieldset data-conditional-input=#{checkedIdent category}>
       $forall optIx <- categoryIndices category
         ^{cellWdgts ! optIx}
 
diff --git a/templates/widgets/communication/recipientLayout.lucius b/templates/widgets/communication/recipientLayout.lucius
new file mode 100644
index 000000000..c7636f072
--- /dev/null
+++ b/templates/widgets/communication/recipientLayout.lucius
@@ -0,0 +1,40 @@
+.recipient-category {
+  max-width: 400px;
+  padding: 3px 0;
+
+  &:not(:last-child) {
+    margin-bottom: 7px;
+  }
+
+  &:not(:first-child) {
+    margin-top: 7px;
+  }
+}
+
+.recipient-category__option {
+  display: flex;
+
+  &:not(:last-child) {
+    margin-bottom: 10px;
+  }
+}
+
+.recipient-category__label,
+.recipient-category__option-label {
+  margin-left: 15px;
+  vertical-align: top;
+}
+
+.recipient-category__fieldset {
+  margin: 7px 0 5px 9px;
+  padding: 5px 0 10px;
+  border-left: 1px solid #bcbcbc;
+  padding-left: 16px;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.recipient-category__option-add {
+  display: flex;
+  align-items: center;
+}
diff --git a/templates/widgets/communication/recipientName.hamlet b/templates/widgets/communication/recipientName.hamlet
index 1da8a7fe3..96b650b0d 100644
--- a/templates/widgets/communication/recipientName.hamlet
+++ b/templates/widgets/communication/recipientName.hamlet
@@ -1,6 +1,6 @@
 $newline never
-<div .category__option>
+<div .recipient-category__option>
   #{csrf}
   ^{fvInput tickView}
-  <label for=#{fvId tickView}>
+  <label .recipient-category__option-label for=#{fvId tickView}>
     #{nameHtml userDisplayName userSurname}