diff --git a/src/client/channel.jsx b/src/client/channel.jsx
index 8260a82..1ac92c3 100644
--- a/src/client/channel.jsx
+++ b/src/client/channel.jsx
@@ -32,35 +32,37 @@ export default function Channel(props) {
     </>
   );
   return (
-    <div className="channel">
-      {React.cloneElement(
-        href ? <Link to={href} /> : <div />,
-        {className: 'channel__link', title: name},
-        [React.cloneElement(content, {key: name})],
-      )}
-      <div
-        className="channel__actions"
-      >
-        {actions.map(({icon, label, onClick}, i) => (
-          <button
-            className="channel__action"
-            // eslint-disable-next-line react/no-array-index-key
-            key={i}
-            onClick={onClick}
-            title={label}
-            type="button"
-          >
-            <span
-              className="channel__icon"
-              role="img"
-              aria-label={label}
+    <li className="channel__item">
+      <div className="channel">
+        {React.cloneElement(
+          href ? <Link to={href} /> : <div />,
+          {className: 'channel__link', title: name},
+          [React.cloneElement(content, {key: name})],
+        )}
+        <div
+          className="channel__actions"
+        >
+          {actions.map(({icon, label, onClick}, i) => (
+            <button
+              className="channel__action"
+              // eslint-disable-next-line react/no-array-index-key
+              key={i}
+              onClick={onClick}
+              title={label}
+              type="button"
             >
-              {icon}
-            </span>
-          </button>
-        ))}
+              <span
+                className="channel__icon"
+                role="img"
+                aria-label={label}
+              >
+                {icon}
+              </span>
+            </button>
+          ))}
+        </div>
       </div>
-    </div>
+    </li>
   );
 }
 
diff --git a/src/client/channel.scss b/src/client/channel.scss
index 5c3b55c..3d42ddc 100644
--- a/src/client/channel.scss
+++ b/src/client/channel.scss
@@ -1,5 +1,28 @@
 @import '~/client/scss/colors.scss';
 
+.channel__item {
+  position: relative;
+  width: 100%;
+  &:nth-of-type(even) {
+    background-color: rgba(0, 0, 0, 0.1);
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.2);
+    }
+  }
+  &:nth-of-type(odd) {
+    background-color: rgba(0, 0, 0, 0.2);
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+  }
+  &.active[class] {
+    background-color: $color-active;
+    &:hover {
+      background-color: lighten($color-active, 5%);
+    }
+  }
+}
+
 .channel {
   position: relative;
 }
diff --git a/src/client/chat--leftFriends.jsx b/src/client/chat--leftFriends.jsx
index 3ae9316..40d117b 100644
--- a/src/client/chat--leftFriends.jsx
+++ b/src/client/chat--leftFriends.jsx
@@ -91,17 +91,13 @@ export default function ChatLeftFriends() {
                 },
               ];
               return (
-                <li
-                  className="friends__item"
-                >
-                  <Channel
-                    key={JSON.stringify(friendship)}
-                    actions={favoritesActions}
-                    href={`/chat/u/${channel}`}
-                    name={channel}
-                    prefix="/u/"
-                  />
-                </li>
+                <Channel
+                  key={JSON.stringify(friendship)}
+                  actions={favoritesActions}
+                  href={`/chat/u/${channel}`}
+                  name={channel}
+                  prefix="/u/"
+                />
               );
             })}
           </ul>
@@ -120,17 +116,13 @@ export default function ChatLeftFriends() {
                 },
               ];
               return (
-                <li
+                <Channel
                   key={channel}
-                  className="friends__item"
-                >
-                  <Channel
-                    actions={favoritesActions}
-                    href={`/chat/u/${channel}`}
-                    name={channel}
-                    prefix="/u/"
-                  />
-                </li>
+                  actions={favoritesActions}
+                  href={`/chat/u/${channel}`}
+                  name={channel}
+                  prefix="/u/"
+                />
               );
             })}
           </ul>
@@ -167,17 +159,13 @@ export default function ChatLeftFriends() {
                     },
                   ];
                   return (
-                    <li
+                    <Channel
                       key={channel}
-                      className="friends__item"
-                    >
-                      <Channel
-                        actions={friendsActions}
-                        href={`/chat/u/${channel}`}
-                        name={channel}
-                        prefix="/u/"
-                      />
-                    </li>
+                      actions={friendsActions}
+                      href={`/chat/u/${channel}`}
+                      name={channel}
+                      prefix="/u/"
+                    />
                   );
                 })
             )}
diff --git a/src/client/chat--leftFriends.scss b/src/client/chat--leftFriends.scss
index 06d1385..94741e0 100644
--- a/src/client/chat--leftFriends.scss
+++ b/src/client/chat--leftFriends.scss
@@ -37,26 +37,3 @@
   text-transform: uppercase;
   white-space: nowrap;
 }
-
-.friends__item {
-  position: relative;
-  width: 100%;
-  &:nth-of-type(even) {
-    background-color: rgba(0, 0, 0, 0.1);
-    &:hover {
-      background-color: rgba(255, 255, 255, 0.2);
-    }
-  }
-  &:nth-of-type(odd) {
-    background-color: rgba(0, 0, 0, 0.2);
-    &:hover {
-      background-color: rgba(255, 255, 255, 0.1);
-    }
-  }
-  &.active[class] {
-    background-color: $color-active;
-    &:hover {
-      background-color: lighten($color-active, 5%);
-    }
-  }
-}
diff --git a/src/client/chat--leftRooms.jsx b/src/client/chat--leftRooms.jsx
index f8cadcb..d03d4d3 100644
--- a/src/client/chat--leftRooms.jsx
+++ b/src/client/chat--leftRooms.jsx
@@ -70,17 +70,13 @@ export default function ChatLeftRooms() {
                 },
               ];
               return (
-                <li
-                  className="channels__item"
+                <Channel
                   key={channel}
-                >
-                  <Channel
-                    actions={favoritesActions}
-                    href={`/chat/r/${channel}`}
-                    name={channel}
-                    prefix="/r/"
-                  />
-                </li>
+                  actions={favoritesActions}
+                  href={`/chat/r/${channel}`}
+                  name={channel}
+                  prefix="/r/"
+                />
               );
             })}
           </ul>
@@ -104,17 +100,13 @@ export default function ChatLeftRooms() {
                 },
               ];
               return (
-                <li
-                  className="channels__item"
+                <Channel
                   key={channel}
-                >
-                  <Channel
-                    actions={recentActions}
-                    href={`/chat/r/${channel}`}
-                    name={channel}
-                    prefix="/r/"
-                  />
-                </li>
+                  actions={recentActions}
+                  href={`/chat/r/${channel}`}
+                  name={channel}
+                  prefix="/r/"
+                />
               );
             })}
           </ul>
diff --git a/src/client/chat--leftRooms.scss b/src/client/chat--leftRooms.scss
index a0c04e4..2d85dce 100644
--- a/src/client/chat--leftRooms.scss
+++ b/src/client/chat--leftRooms.scss
@@ -36,26 +36,3 @@
   padding: 2.5em 1em 0.625em 1.375em;
   text-transform: uppercase;
 }
-
-.channels__item {
-  position: relative;
-  width: 100%;
-  &:nth-of-type(even) {
-    background-color: rgba(0, 0, 0, 0.1);
-    &:hover {
-      background-color: rgba(255, 255, 255, 0.2);
-    }
-  }
-  &:nth-of-type(odd) {
-    background-color: rgba(0, 0, 0, 0.2);
-    &:hover {
-      background-color: rgba(255, 255, 255, 0.1);
-    }
-  }
-  &.active[class] {
-    background-color: $color-active;
-    &:hover {
-      background-color: lighten($color-active, 5%);
-    }
-  }
-}
diff --git a/src/client/chat--rightBlocked.jsx b/src/client/chat--rightBlocked.jsx
index 1c13cfe..4259a33 100644
--- a/src/client/chat--rightBlocked.jsx
+++ b/src/client/chat--rightBlocked.jsx
@@ -28,16 +28,12 @@ export default function ChatRightBlocked(props) {
             },
           ];
           return (
-            <li
+            <Channel
               key={id}
-              className="blocked__item"
-            >
-              <Channel
-                actions={blockedActions}
-                name={usernames[id]}
-                prefix="/u/"
-              />
-            </li>
+              actions={blockedActions}
+              name={usernames[id] || '?'}
+              prefix="/u/"
+            />
           );
         })}
       </ul>
diff --git a/src/client/chat--rightBlocked.scss b/src/client/chat--rightBlocked.scss
index c7c87cc..5fa8a9c 100644
--- a/src/client/chat--rightBlocked.scss
+++ b/src/client/chat--rightBlocked.scss
@@ -8,26 +8,3 @@
   padding: 2.5em 1em 0.625em 1.375em;
   text-transform: uppercase;
 }
-
-.blocked__item {
-  position: relative;
-  width: 100%;
-  &:nth-of-type(even) {
-    background-color: rgba(0, 0, 0, 0.1);
-    &:hover {
-      background-color: rgba(255, 255, 255, 0.2);
-    }
-  }
-  &:nth-of-type(odd) {
-    background-color: rgba(0, 0, 0, 0.2);
-    &:hover {
-      background-color: rgba(255, 255, 255, 0.1);
-    }
-  }
-  &.active[class] {
-    background-color: $color-active;
-    &:hover {
-      background-color: lighten($color-active, 5%);
-    }
-  }
-}
diff --git a/src/client/chat--rightUsers.jsx b/src/client/chat--rightUsers.jsx
index df25428..73f5403 100644
--- a/src/client/chat--rightUsers.jsx
+++ b/src/client/chat--rightUsers.jsx
@@ -114,21 +114,17 @@ export default function ChatRightUsers() {
             }
           }
           return (
-            <li
-              className="users__item"
+            <Channel
               key={id}
-            >
-              <Channel
-                actions={userActions}
-                href={(
-                  (hasFriendship && userId !== id)
-                    ? `/chat/u/${username}`
-                    : null
-                )}
-                name={username || '?'}
-                prefix="/u/"
-              />
-            </li>
+              actions={userActions}
+              href={(
+                (hasFriendship && userId !== id)
+                  ? `/chat/u/${username}`
+                  : null
+              )}
+              name={username || '?'}
+              prefix="/u/"
+            />
           );
         })}
       </ul>
diff --git a/src/client/chat--rightUsers.scss b/src/client/chat--rightUsers.scss
index 50f4838..b91f37e 100644
--- a/src/client/chat--rightUsers.scss
+++ b/src/client/chat--rightUsers.scss
@@ -9,26 +9,3 @@
   text-transform: uppercase;
   white-space: nowrap;
 }
-
-.users__item {
-  position: relative;
-  width: 100%;
-  &:nth-of-type(even) {
-    background-color: rgba(0, 0, 0, 0.1);
-    &:hover {
-      background-color: rgba(255, 255, 255, 0.2);
-    }
-  }
-  &:nth-of-type(odd) {
-    background-color: rgba(0, 0, 0, 0.2);
-    &:hover {
-      background-color: rgba(255, 255, 255, 0.1);
-    }
-  }
-  &.active[class] {
-    background-color: $color-active;
-    &:hover {
-      background-color: lighten($color-active, 5%);
-    }
-  }
-}