diff --git a/src/core/client/embed/index.html b/src/core/client/embed/index.html
index e0e8f74e6..2be8f9be9 100644
--- a/src/core/client/embed/index.html
+++ b/src/core/client/embed/index.html
@@ -9,7 +9,7 @@
   <style>
     body {
       margin: 0;
-      padding: 0 0 50px 0;
+      padding: 0 20px 50px 20px;
     }
   </style>
 </head>
diff --git a/src/core/client/stream/tabs/profile/components/CommentsHistory.tsx b/src/core/client/stream/tabs/profile/components/CommentsHistory.tsx
index 90cec49ff..654e0daf4 100644
--- a/src/core/client/stream/tabs/profile/components/CommentsHistory.tsx
+++ b/src/core/client/stream/tabs/profile/components/CommentsHistory.tsx
@@ -22,7 +22,7 @@ interface CommentsHistoryProps {
 
 const CommentsHistory: StatelessComponent<CommentsHistoryProps> = props => {
   return (
-    <HorizontalGutter>
+    <HorizontalGutter size="double">
       <Localized id="profile-historyComment-commentHistory">
         <Typography variant="heading3">Comment History</Typography>
       </Localized>
diff --git a/src/core/client/stream/tabs/profile/components/HistoryComment.css b/src/core/client/stream/tabs/profile/components/HistoryComment.css
index 3d3af60dd..058599b47 100644
--- a/src/core/client/stream/tabs/profile/components/HistoryComment.css
+++ b/src/core/client/stream/tabs/profile/components/HistoryComment.css
@@ -1,18 +1,12 @@
 .icon {
   color: var(--palette-text-secondary);
+  margin-right: calc(0.5 * var(--spacing-unit));
 }
 
-.button,
-.replies,
-.story {
+.replies {
   composes: button from "talk-ui/shared/typography.css";
 }
 
-.sideBar {
-  min-width: 180px;
-  padding-left: var(--spacing-unit);
-}
-
-.body {
-  word-break: break-all;
+.divider {
+  margin: calc(var(--spacing-unit) * 2) 0 !important;
 }
diff --git a/src/core/client/stream/tabs/profile/components/HistoryComment.tsx b/src/core/client/stream/tabs/profile/components/HistoryComment.tsx
index 920a5f380..4aca65531 100644
--- a/src/core/client/stream/tabs/profile/components/HistoryComment.tsx
+++ b/src/core/client/stream/tabs/profile/components/HistoryComment.tsx
@@ -7,6 +7,7 @@ import {
   Flex,
   HorizontalGutter,
   Icon,
+  MatchMedia,
   Typography,
 } from "talk-ui/components";
 import HTMLContent from "../../../components/HTMLContent";
@@ -26,52 +27,41 @@ export interface HistoryCommentProps {
 const HistoryComment: StatelessComponent<HistoryCommentProps> = props => {
   return (
     <HorizontalGutter>
-      <Flex direction="row" justifyContent="space-between">
-        <Typography variant="bodyCopy" container="div">
-          {props.body && (
-            <HTMLContent className={styles.body}>{props.body}</HTMLContent>
-          )}
-        </Typography>
-        <Flex className={styles.sideBar} direction="column">
-          <Flex direction="row" alignItems="center" itemGutter="half">
-            <Button
-              variant="underlined"
-              target="_parent"
-              href={props.conversationURL}
-              onClick={props.onGotoConversation}
-              anchor
-            >
-              <Icon>launch</Icon>
-              <Localized id="profile-historyComment-viewConversation">
-                <span>View Conversation</span>
-              </Localized>
-            </Button>
-          </Flex>
-          <Flex direction="row" alignItems="center" itemGutter="half">
-            <Icon className={styles.icon}>schedule</Icon>
-            <Timestamp>{props.createdAt}</Timestamp>
-          </Flex>
-        </Flex>
-      </Flex>
-      {!!props.replyCount && (
-        <Flex
-          direction="row"
-          alignItems="center"
-          itemGutter="half"
-          className={styles.replies}
-        >
-          <Icon className={styles.icon}>reply</Icon>
-          <Localized
-            id="profile-historyComment-replies"
-            $replyCount={props.replyCount}
-          >
-            <span>{"Replies {$replyCount}"}</span>
-          </Localized>
-        </Flex>
-      )}
       <Localized id="profile-historyComment-story" $title={props.asset.title}>
-        <span className={styles.story}>{"Story: {$title}"}</span>
+        <Typography variant="heading4">{"Story: {$title}"}</Typography>
       </Localized>
+      <Timestamp>{props.createdAt}</Timestamp>
+      <Typography variant="bodyCopy" container="div">
+        {props.body && <HTMLContent>{props.body}</HTMLContent>}
+      </Typography>
+      <Flex direction="row" alignItems="center" itemGutter>
+        {!!props.replyCount && (
+          <div className={styles.replies}>
+            <Icon className={styles.icon}>reply</Icon>
+            <Localized
+              id="profile-historyComment-replies"
+              $replyCount={props.replyCount}
+            >
+              <span>{"Replies {$replyCount}"}</span>
+            </Localized>
+          </div>
+        )}
+        <Button
+          variant="underlined"
+          target="_parent"
+          href={props.conversationURL}
+          onClick={props.onGotoConversation}
+          anchor
+        >
+          <Icon>launch</Icon>
+          <Localized id="profile-historyComment-viewConversation">
+            <span>View Conversation</span>
+          </Localized>
+        </Button>
+      </Flex>
+      <MatchMedia lteWidth="xs">
+        <hr className={styles.divider} />
+      </MatchMedia>
     </HorizontalGutter>
   );
 };