diff --git a/src/main.tsx b/src/main.tsx
index ba0d766f4..d4f109f99 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -215,7 +215,7 @@ class LineText extends React.Component<{sw : ScreenWindow, line : LineType}, {}>
         let isSelected = mobx.computed(() => (sw.selectedLine.get() == line.linenum), {name: "computed-isSelected"}).get();
         let isFocused = mobx.computed(() => (sw.focusType.get() == "cmd"), {name: "computed-isFocused"}).get();
         return (
-            <div className="line line-text top-border" data-lineid={line.lineid} data-linenum={line.linenum} data-windowid={line.windowid} onClick={this.clickHandler}>
+            <div className="line line-text top-border focus-parent" data-lineid={line.lineid} data-linenum={line.linenum} data-windowid={line.windowid} onClick={this.clickHandler}>
                 <div className={cn("focus-indicator", {"selected": isSelected}, {"active": isSelected && isFocused})}/>
                 <LineAvatar line={line} cmd={null}/>
                 <div className="line-content">
@@ -744,8 +744,8 @@ class LineCmd extends React.Component<{sw : ScreenWindow, line : LineType, width
                     </div>
                     <div key="meta" className="meta-wrap">
                         <div key="meta1" className="meta meta-line1">
-                            <div className="user" style={{display: "none"}}>{line.userid}</div>
                             <div className="ts">{formattedTime}</div>
+                            <div>&nbsp;</div>
                             <div className="termopts">
                                 ({termOpts.rows}x{termOpts.cols})
                                 <If condition={cmd.isRunning() && false}><i onClick={this.handleResizeButton} className="resize-button fa fa-arrows-alt"/></If>
@@ -2775,6 +2775,23 @@ class HistoryView extends React.Component<{}, {}> {
     }
 }
 
+@mobxReact.observer
+class Bookmark extends React.Component<{bookmark : BookmarkType}, {}> {
+    render() {
+        let bm = this.props.bookmark;
+        let isSelected = false;
+        return (
+            <div className="bookmark focus-parent">
+                <div className={cn("focus-indicator", {"active": isSelected})}/>
+                <div>bookmark - {bm.bookmarkid}</div>
+                <div>
+                    <code>{bm.cmdstr}</code>
+                </div>
+            </div>
+        );
+    }
+}
+
 @mobxReact.observer
 class BookmarksView extends React.Component<{}, {}> {
     render() {
@@ -2784,10 +2801,13 @@ class BookmarksView extends React.Component<{}, {}> {
         let bookmark : BookmarkType = null;
         return (
             <div className={cn("bookmarks-view", {"is-hidden": isHidden})}>
-                <div className="bookmarks-title">BOOKMARKS</div>
-                <div>
+                <div className="bookmarks-title">
+                    <i className="fa fa-bookmark" style={{marginRight: 10}}/>
+                    BOOKMARKS
+                </div>
+                <div className="bookmarks-list">
                     <For index="idx" each="bookmark" of={bookmarks}>
-                        <div>bookmark {idx} -- {JSON.stringify(bookmark)}</div>
+                        <Bookmark key={bookmark.bookmarkid} bookmark={bookmark}/>
                     </For>
                 </div>
             </div>
diff --git a/src/sh2.less b/src/sh2.less
index 224d31367..0541e2011 100644
--- a/src/sh2.less
+++ b/src/sh2.less
@@ -119,9 +119,26 @@ html, body, #main {
 
 .bookmarks-view {
     .bookmarks-title {
-        margin: 10px 0 10px 15px;
+        margin: 20px 10px 10px 15px;
+        padding-bottom: 12px;
         .mono-font(1.5rem);
         color: @term-bright-white;
+        border-bottom: 1px solid white;
+    }
+
+    .bookmarks-list {
+        color: white;
+        margin-left: 20px;
+    }
+
+    .bookmark {
+        border-top: 1px solid #ccc;
+        padding: 5px 5px 5px 0;
+        margin-bottom: 5px;
+    }
+
+    .bookmark:first-child {
+        border-top: 0;
     }
 }
 
@@ -680,41 +697,10 @@ html, body, #main {
         border-top: none;
     }
 
-    &:hover .focus-indicator {
-        display: block;
-        background-color: #222;
-    }
-
     &:hover .meta .termopts {
         display: block;
     }
 
-    .focus-indicator {
-        position: absolute;
-        display: none;
-        width: 5px;
-        border-radius: 3px;
-        height: calc(100% - 20px);
-        top: 10px;
-        left: 0;
-        z-index: 8;
-
-        &.selected {
-            display: block;
-            background-color: #666;
-        }
-
-        &.active, &.active.selected {
-            display: block;
-            background-color: @tab-blue;
-        }
-
-        &.active.selected.fg-focus {
-            display: block;
-            background-color: @tab-green;
-        }
-    }
-
     .avatar {
         max-height: 38px;
         width: 38px;
@@ -817,18 +803,18 @@ html, body, #main {
             margin-right: 10px;
         }
         
-        .ts {
+        .ts, .termopts {
+            display: flex;
             color: #aaa;
             margin-top: 5px;
             .mono-font(11px);
         }
 
         .termopts {
-            margin-left: 10px;
+            display: flex;
             color: #aaa;
-            margin-top: 7px;
-            font-size: 12px;
-            .mono-font(10px);
+            margin-top: 5px;
+            .mono-font(11px);
             display: none;
 
             .resize-button {
@@ -987,17 +973,9 @@ body .xterm .xterm-viewport {
     }
 
     .focus-indicator {
-        position: absolute;
-        background-color: #666;
-        width: 5px;
-        border-radius: 3px;
         height: 90%;
         top: 5%;
         left: 4px;
-
-        &.active {
-            background-color: @tab-blue;
-        }
     }
 
     &.has-history {
@@ -1731,6 +1709,37 @@ input[type=checkbox] {
     }
 }
 
+.focus-parent:hover .focus-indicator {
+    display: block;
+    background-color: #222;
+}
+
+.focus-indicator {
+    position: absolute;
+    display: none;
+    width: 5px;
+    border-radius: 3px;
+    height: calc(100% - 20px);
+    top: 10px;
+    left: 0;
+    z-index: 8;
+
+    &.selected {
+        display: block;
+        background-color: #666;
+    }
+    
+    &.active, &.active.selected {
+        display: block;
+        background-color: @tab-blue;
+    }
+    
+    &.active.selected.fg-focus {
+        display: block;
+        background-color: @tab-green;
+    }
+}
+
 @keyframes loader-ring {
     0% {
         transform: rotate(0deg);