diff --git a/src/core/client/stream/components/Comment.css b/src/core/client/stream/components/Comment.css
index d43780d8f..3981c1eee 100644
--- a/src/core/client/stream/components/Comment.css
+++ b/src/core/client/stream/components/Comment.css
@@ -5,7 +5,3 @@
 .gutterBottom {
   margin-bottom: calc(2px * $spacing-unit);
 }
-
-.author {
-  font-weight: $font-weight-medium;
-}
diff --git a/src/core/client/stream/components/Comment.tsx b/src/core/client/stream/components/Comment.tsx
index c1b3f9303..2f91166ed 100644
--- a/src/core/client/stream/components/Comment.tsx
+++ b/src/core/client/stream/components/Comment.tsx
@@ -5,6 +5,7 @@ import { StatelessComponent } from "react";
 import { Typography } from "talk-ui/components";
 
 import * as styles from "./Comment.css";
+import Username from "./Username";
 
 export interface CommentProps {
   className?: string;
@@ -21,9 +22,7 @@ const Comment: StatelessComponent<CommentProps> = props => {
   });
   return (
     <div className={rootClassName}>
-      <Typography className={styles.author} gutterBottom>
-        {props.author && props.author.username}
-      </Typography>
+      {props.author && <Username>{props.author.username}</Username>}
       <Typography>{props.body}</Typography>
     </div>
   );
diff --git a/src/core/client/stream/components/Indent.css b/src/core/client/stream/components/Indent.css
new file mode 100644
index 000000000..c8b46961a
--- /dev/null
+++ b/src/core/client/stream/components/Indent.css
@@ -0,0 +1,9 @@
+.root {
+  margin-left: 2px;
+  border-left: 2px solid;
+  padding-left: 5px;
+}
+
+.level0 {
+  border-color: $palette-secondary-darkest;
+}
diff --git a/src/core/client/stream/components/Indent.tsx b/src/core/client/stream/components/Indent.tsx
index 49222acff..7ea8fddf3 100644
--- a/src/core/client/stream/components/Indent.tsx
+++ b/src/core/client/stream/components/Indent.tsx
@@ -1,16 +1,15 @@
+import cn from "classnames";
 import React, { StatelessComponent } from "react";
 
+import * as styles from "./Indent.css";
+
 export interface IndentProps {
   level?: number;
   children: React.ReactNode;
 }
 
 const Indent: StatelessComponent<IndentProps> = props => {
-  return (
-    <div style={{ marginLeft: "16px", marginTop: "8px", marginBottom: "8px" }}>
-      {props.children}
-    </div>
-  );
+  return <div className={cn(styles.root, styles.level0)}>{props.children}</div>;
 };
 
 export default Indent;
diff --git a/src/core/client/stream/components/Username.css b/src/core/client/stream/components/Username.css
new file mode 100644
index 000000000..5f84423cd
--- /dev/null
+++ b/src/core/client/stream/components/Username.css
@@ -0,0 +1,3 @@
+.root {
+  font-weight: $font-weight-medium;
+}
diff --git a/src/core/client/stream/components/Username.spec.tsx b/src/core/client/stream/components/Username.spec.tsx
new file mode 100644
index 000000000..c4f1c1dfe
--- /dev/null
+++ b/src/core/client/stream/components/Username.spec.tsx
@@ -0,0 +1,12 @@
+import { shallow } from "enzyme";
+import React from "react";
+
+import Username from "./Username";
+
+it("renders correctly", () => {
+  const props = {
+    children: "Marvin",
+  };
+  const wrapper = shallow(<Username {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/src/core/client/stream/components/Username.tsx b/src/core/client/stream/components/Username.tsx
new file mode 100644
index 000000000..3424e1f62
--- /dev/null
+++ b/src/core/client/stream/components/Username.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import { StatelessComponent } from "react";
+
+import { Typography } from "talk-ui/components";
+
+import * as styles from "./Username.css";
+
+export interface CommentProps {
+  children: string;
+}
+
+const Username: StatelessComponent<CommentProps> = props => {
+  return (
+    <Typography className={styles.root} gutterBottom>
+      {props.children}
+    </Typography>
+  );
+};
+
+export default Username;
diff --git a/src/core/client/stream/components/__snapshots__/Comment.spec.tsx.snap b/src/core/client/stream/components/__snapshots__/Comment.spec.tsx.snap
index 4b009e257..ce67dff86 100644
--- a/src/core/client/stream/components/__snapshots__/Comment.spec.tsx.snap
+++ b/src/core/client/stream/components/__snapshots__/Comment.spec.tsx.snap
@@ -4,12 +4,9 @@ exports[`renders username and body 1`] = `
 <div
   className="root"
 >
-  <withPropsOnChange(Typography)
-    className="author"
-    gutterBottom={true}
-  >
+  <Username>
     Marvin
-  </withPropsOnChange(Typography)>
+  </Username>
   <withPropsOnChange(Typography)>
     Woof
   </withPropsOnChange(Typography)>
@@ -20,12 +17,9 @@ exports[`renders with gutterBottom 1`] = `
 <div
   className="root gutterBottom"
 >
-  <withPropsOnChange(Typography)
-    className="author"
-    gutterBottom={true}
-  >
+  <Username>
     Marvin
-  </withPropsOnChange(Typography)>
+  </Username>
   <withPropsOnChange(Typography)>
     Woof
   </withPropsOnChange(Typography)>
diff --git a/src/core/client/stream/components/__snapshots__/Username.spec.tsx.snap b/src/core/client/stream/components/__snapshots__/Username.spec.tsx.snap
new file mode 100644
index 000000000..2323b1c31
--- /dev/null
+++ b/src/core/client/stream/components/__snapshots__/Username.spec.tsx.snap
@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<withPropsOnChange(Typography)
+  className="root"
+  gutterBottom={true}
+>
+  Marvin
+</withPropsOnChange(Typography)>
+`;
diff --git a/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
index cbecb8711..b9595be1b 100644
--- a/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
@@ -41,7 +41,7 @@ exports[`loads more comments 1`] = `
         className="root gutterBottom"
       >
         <p
-          className="root body1 gutterBottom author"
+          className="root body1 gutterBottom root"
         >
           Markus
         </p>
@@ -57,7 +57,7 @@ exports[`loads more comments 1`] = `
         className="root gutterBottom"
       >
         <p
-          className="root body1 gutterBottom author"
+          className="root body1 gutterBottom root"
         >
           Lukas
         </p>
@@ -73,7 +73,7 @@ exports[`loads more comments 1`] = `
         className="root gutterBottom"
       >
         <p
-          className="root body1 gutterBottom author"
+          className="root body1 gutterBottom root"
         >
           Isabelle
         </p>
@@ -129,7 +129,7 @@ exports[`renders comment stream 1`] = `
         className="root gutterBottom"
       >
         <p
-          className="root body1 gutterBottom author"
+          className="root body1 gutterBottom root"
         >
           Markus
         </p>
@@ -145,7 +145,7 @@ exports[`renders comment stream 1`] = `
         className="root gutterBottom"
       >
         <p
-          className="root body1 gutterBottom author"
+          className="root body1 gutterBottom root"
         >
           Lukas
         </p>
diff --git a/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
index 3e6552967..1dbd60833 100644
--- a/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
@@ -41,7 +41,7 @@ exports[`renders comment stream 1`] = `
         className="root gutterBottom"
       >
         <p
-          className="root body1 gutterBottom author"
+          className="root body1 gutterBottom root"
         >
           Markus
         </p>
@@ -57,7 +57,7 @@ exports[`renders comment stream 1`] = `
         className="root gutterBottom"
       >
         <p
-          className="root body1 gutterBottom author"
+          className="root body1 gutterBottom root"
         >
           Markus
         </p>
@@ -68,19 +68,13 @@ exports[`renders comment stream 1`] = `
         </p>
       </div>
       <div
-        style={
-          Object {
-            "marginBottom": "8px",
-            "marginLeft": "16px",
-            "marginTop": "8px",
-          }
-        }
+        className="root level0"
       >
         <div
           className="root gutterBottom"
         >
           <p
-            className="root body1 gutterBottom author"
+            className="root body1 gutterBottom root"
           >
             Markus
           </p>
@@ -94,7 +88,7 @@ exports[`renders comment stream 1`] = `
           className="root gutterBottom"
         >
           <p
-            className="root body1 gutterBottom author"
+            className="root body1 gutterBottom root"
           >
             Lukas
           </p>
diff --git a/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
index c49e46241..a7610a65c 100644
--- a/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
@@ -41,7 +41,7 @@ exports[`renders comment stream 1`] = `
         className="root gutterBottom"
       >
         <p
-          className="root body1 gutterBottom author"
+          className="root body1 gutterBottom root"
         >
           Markus
         </p>
@@ -57,7 +57,7 @@ exports[`renders comment stream 1`] = `
         className="root gutterBottom"
       >
         <p
-          className="root body1 gutterBottom author"
+          className="root body1 gutterBottom root"
         >
           Lukas
         </p>
diff --git a/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
index ced8cfb6a..c744dd323 100644
--- a/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
@@ -41,7 +41,7 @@ exports[`renders comment stream 1`] = `
         className="root gutterBottom"
       >
         <p
-          className="root body1 gutterBottom author"
+          className="root body1 gutterBottom root"
         >
           Markus
         </p>
@@ -52,19 +52,13 @@ exports[`renders comment stream 1`] = `
         </p>
       </div>
       <div
-        style={
-          Object {
-            "marginBottom": "8px",
-            "marginLeft": "16px",
-            "marginTop": "8px",
-          }
-        }
+        className="root level0"
       >
         <div
           className="root gutterBottom"
         >
           <p
-            className="root body1 gutterBottom author"
+            className="root body1 gutterBottom root"
           >
             Lukas
           </p>
@@ -131,7 +125,7 @@ exports[`show all replies 1`] = `
         className="root gutterBottom"
       >
         <p
-          className="root body1 gutterBottom author"
+          className="root body1 gutterBottom root"
         >
           Markus
         </p>
@@ -142,19 +136,13 @@ exports[`show all replies 1`] = `
         </p>
       </div>
       <div
-        style={
-          Object {
-            "marginBottom": "8px",
-            "marginLeft": "16px",
-            "marginTop": "8px",
-          }
-        }
+        className="root level0"
       >
         <div
           className="root gutterBottom"
         >
           <p
-            className="root body1 gutterBottom author"
+            className="root body1 gutterBottom root"
           >
             Lukas
           </p>
@@ -168,7 +156,7 @@ exports[`show all replies 1`] = `
           className="root gutterBottom"
         >
           <p
-            className="root body1 gutterBottom author"
+            className="root body1 gutterBottom root"
           >
             Isabelle
           </p>
diff --git a/src/core/client/ui/theme/variables.ts b/src/core/client/ui/theme/variables.ts
index dc5fd9ed7..4c4a54332 100644
--- a/src/core/client/ui/theme/variables.ts
+++ b/src/core/client/ui/theme/variables.ts
@@ -7,7 +7,7 @@ const variables = {
   palette: {
     /* Primary colors */
     primary: {
-      darker: "#0D5B8F",
+      darkest: "#0D5B8F",
       dark: "#2B7EB5",
       main: "#3498DB",
       light: "#67B2E4",
@@ -15,7 +15,7 @@ const variables = {
     },
     /* Secondary colors */
     secondary: {
-      darker: "#404345",
+      darkest: "#404345",
       dark: "#65696B",
       main: "#787D80",
       light: "#9A9DA0",
@@ -23,7 +23,7 @@ const variables = {
     },
     /* Success colors */
     success: {
-      darker: "#03AB61",
+      darkest: "#03AB61",
       dark: "#02BD6B",
       main: "#00CD73",
       light: "#40D996",
@@ -31,7 +31,7 @@ const variables = {
     },
     /* Error colors */
     error: {
-      darker: "#F50F0C",
+      darkest: "#F50F0C",
       dark: "#FF1F1C",
       main: "#FA4643",
       light: "#F26563",