diff --git a/net/web/src/carousel/Carousel.jsx b/net/web/src/carousel/Carousel.jsx
index 9f96983a..6ab0ea07 100644
--- a/net/web/src/carousel/Carousel.jsx
+++ b/net/web/src/carousel/Carousel.jsx
@@ -4,8 +4,9 @@ import { CarouselWrapper } from './Carousel.styled';
 import { RightOutlined, LeftOutlined, CloseOutlined, PictureOutlined, FireOutlined } from '@ant-design/icons';
 import ReactResizeDetector from 'react-resize-detector';
 
-export function Carousel({ ready, error, items, itemRenderer, itemRemove }) {
+export function Carousel({ pad, ready, error, items, itemRenderer, itemRemove }) {
   const [slots, setSlots] = useState([]);
+  const [padClass, setPadClass] = useState('');
   const [carouselRef, setCarouselRef] = useState(false);
   const [itemIndex, setItemIndex] = useState(0);
   const [scrollLeft, setScrollLeft] = useState('hidden');
@@ -133,11 +134,11 @@ export function Carousel({ ready, error, items, itemRenderer, itemRemove }) {
         </div>
       )}
       { ready && !error && (
-        <div class="carousel" ref={onRefSet}>
+        <div class="carousel" style={{ paddingLeft: pad + 32 }} ref={onRefSet}>
           {slots}
         </div>
       )}
-      <div class="left-arrow" onClick={onRight}><LeftOutlined style={{ visibility: scrollRight }} /></div>
+      <div class="left-arrow" onClick={onRight} style={{ marginLeft: pad, visibility: scrollRight }}><LeftOutlined /></div>
       <div class="right-arrow" onClick={onLeft} style={{ visibility: scrollLeft }}><RightOutlined /></div>
     </CarouselWrapper>
   );
diff --git a/net/web/src/carousel/Carousel.styled.js b/net/web/src/carousel/Carousel.styled.js
index b5a121cf..2929eaf6 100644
--- a/net/web/src/carousel/Carousel.styled.js
+++ b/net/web/src/carousel/Carousel.styled.js
@@ -6,7 +6,6 @@ export const CarouselWrapper = styled.div`
   display: grid;
   width: 100%;
   height: 128px;
-  margin-top: 16px;
 
   .carousel {
     display: flex;
@@ -46,7 +45,10 @@ export const CarouselWrapper = styled.div`
     margin-left: 8px;
     margin-right: 8px;
     justify-content: center;
-    color: ${Colors.grey};
+    color: ${Colors.text};
+    background-color: ${Colors.profileForm};
+    border-radius: 8px;
+    opacity: 0.7;
   }
 
   .right-arrow {
diff --git a/net/web/src/session/conversation/addTopic/AddTopic.jsx b/net/web/src/session/conversation/addTopic/AddTopic.jsx
index ae8cfa8b..66692d53 100644
--- a/net/web/src/session/conversation/addTopic/AddTopic.jsx
+++ b/net/web/src/session/conversation/addTopic/AddTopic.jsx
@@ -91,11 +91,11 @@ export function AddTopic({ cardId, channelId }) {
       <input type='file' name="asset" accept="image/*" ref={attachImage} onChange={e => onSelectImage(e)} style={{display: 'none'}}/>
       <input type='file' name="asset" accept="audio/*" ref={attachAudio} onChange={e => onSelectAudio(e)} style={{display: 'none'}}/>
       <input type='file' name="asset" accept="video/*" ref={attachVideo} onChange={e => onSelectVideo(e)} style={{display: 'none'}}/>
-      <div class="carousel">
-        { state.assets.length > 0 && (
-          <Carousel ready={true} items={state.assets} itemRenderer={renderItem} itemRemove={removeItem} />
-        )}
-      </div>
+      { state.assets.length > 0 && (
+        <div class="assets">
+          <Carousel pad={0} ready={true} items={state.assets} itemRenderer={renderItem} itemRemove={removeItem} />
+        </div>
+      )}
       <div class="message">
         <Input.TextArea ref={msg} placeholder="New Message" spellCheck="true" autoSize={{ minRows: 2, maxRows: 6 }}
             enterkeyhint="send" onKeyDown={(e) => keyDown(e)} onChange={(e) => actions.setMessageText(e.target.value)}
diff --git a/net/web/src/session/conversation/addTopic/AddTopic.styled.js b/net/web/src/session/conversation/addTopic/AddTopic.styled.js
index 5a089274..e5ee989d 100644
--- a/net/web/src/session/conversation/addTopic/AddTopic.styled.js
+++ b/net/web/src/session/conversation/addTopic/AddTopic.styled.js
@@ -14,6 +14,10 @@ export const AddTopicWrapper = styled.div`
     padding-bottom: 8px;
   }
 
+  .assets {
+    padding-top: 8px;
+  }
+
   .buttons {
     padding-left: 32px;
     padding-right: 32px;
diff --git a/net/web/src/session/conversation/topicItem/TopicItem.jsx b/net/web/src/session/conversation/topicItem/TopicItem.jsx
index 483cf0a6..dfe9e077 100644
--- a/net/web/src/session/conversation/topicItem/TopicItem.jsx
+++ b/net/web/src/session/conversation/topicItem/TopicItem.jsx
@@ -100,7 +100,7 @@ export function TopicItem({ host, topic }) {
     return (
       <TopicItemWrapper>
         <div class="avatar">
-          <Logo width={32} height={32} radius={4} imageUrl={state.imageUrl} />
+          <Logo width={32} height={32} radius={4} url={state.imageUrl} />
         </div>
         <div class="topic">
           <div class="info">
@@ -118,23 +118,25 @@ export function TopicItem({ host, topic }) {
 
   return (
     <TopicItemWrapper>
-      <div class="avatar">
-        <Logo width={32} height={32} radius={4} imageUrl={state.imageUrl} />
-      </div>
-      <div class="topic">
+      <div class="topic-header">
+        <div class="avatar">
+          <Logo width={32} height={32} radius={4} url={state.imageUrl} />
+        </div>
         <div class="info">
           <div class={nameClass}>{ name }</div>
           <div>{ getTime(offset) }</div>
         </div>
-        { state.assets.length > 0 && (
-          <Carousel ready={state.ready} error={state.error} items={state.assets} itemRenderer={renderAsset} />
-        )}
-        <div class="message">
-          <Message />
-        </div>
-        <div class="options">
-          <Options />
+      </div>
+      { state.assets.length > 0 && (
+        <div class="topic-assets">
+          <Carousel pad={40} ready={state.ready} error={state.error} items={state.assets} itemRenderer={renderAsset} />
         </div>
+      )}
+      <div class="message">
+        <Message />
+      </div>
+      <div class="options">
+        <Options />
       </div>
     </TopicItemWrapper>
   )
diff --git a/net/web/src/session/conversation/topicItem/TopicItem.styled.js b/net/web/src/session/conversation/topicItem/TopicItem.styled.js
index 1943dfbc..43c279e1 100644
--- a/net/web/src/session/conversation/topicItem/TopicItem.styled.js
+++ b/net/web/src/session/conversation/topicItem/TopicItem.styled.js
@@ -2,52 +2,28 @@ import styled from 'styled-components';
 
 export const TopicItemWrapper = styled.div`
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   width: 100%;
-  padding-left: 8px;
-  
-  .avatar {
-    height: 32px;
-    width: 32px;
-  }
 
-  .topic {
+  .topic-header {
     display: flex;
-    flex-direction: column;
-    padding-left: 8px;
-    flex-grow: 1;
+    flex-direction: row;
+    margin-left: 16px;
+    padding-left: 16px;
+    margin-right: 16px;
+    padding-top: 8px;
+    border-top: 1px solid #dddddd;
 
-    &:hover .options {
-      visibility: visible;
+    .avatar {
+      height: 32px;
+      width: 32px;
     }
 
-    .options {
-      position: absolute;
-      top: 0;
-      right: 0;
-      visibility: hidden;
-
-      .buttons {
-        display: flex;
-        flex-direction: row;
-        border-radius: 4px;
-        background-color: #eeeeee;
-        border: 1px solid #555555;
-        margin-top: 2px;
-
-        .button {
-          font-size: 14px;
-          margin-left: 8px;
-          margin-right: 8px;
-          cursor: pointer;
-        }
-      }
-    }
- 
     .info {
       display: flex;
       flex-direction: row;
       line-height: 1;
+      padding-left: 8px;
 
       .comments {
         padding-left: 8px;
@@ -72,26 +48,54 @@ export const TopicItemWrapper = styled.div`
         padding-right: 8px;
       }
     }
+  }
 
-    .message {
-      padding-top: 6px;
-      padding-right: 16px;
-      white-space: pre-line;
+  .options {
+    position: absolute;
+    top: 0;
+    right: 0;
+    visibility: hidden;
 
-      .editing {
+    .buttons {
+      display: flex;
+      flex-direction: row;
+      border-radius: 4px;
+      background-color: #eeeeee;
+      border: 1px solid #555555;
+      margin-top: 2px;
+
+      .button {
+        font-size: 14px;
+        margin-left: 8px;
+        margin-right: 8px;
+        cursor: pointer;
+      }
+    }
+  }
+
+  .topic-assets {
+    padding-top: 4px;
+  }
+
+  .message {
+    padding-right: 16px;
+    padding-left: 72px;
+    white-space: pre-line;
+    min-height: 4px;
+
+    .editing {
+      display: flex;
+      flex-direction: column;
+      border-radius: 4px;
+      border: 1px solid #aaaaaa;
+      width: 100%;
+
+      .controls {
         display: flex;
-        flex-direction: column;
-        border-radius: 4px;
-        border: 1px solid #aaaaaa;
-        width: 100%;
-
-        .controls {
-          display: flex;
-          flex-direction: row;
-          justify-content: flex-end;
-          padding-bottom: 8px;
-          padding-right: 8px;
-        }
+        flex-direction: row;
+        justify-content: flex-end;
+        padding-bottom: 8px;
+        padding-right: 8px;
       }
     }
   }
diff --git a/net/web/src/session/conversation/virtualList/VirtualList.jsx b/net/web/src/session/conversation/virtualList/VirtualList.jsx
index d77b3079..1c4b67bc 100644
--- a/net/web/src/session/conversation/virtualList/VirtualList.jsx
+++ b/net/web/src/session/conversation/virtualList/VirtualList.jsx
@@ -9,7 +9,7 @@ export function VirtualList({ id, items, itemRenderer, onMore }) {
   const OVERSCAN = 1024; // add slots in overscan of view
   const DEFAULT_ITEM_HEIGHT = 256;
   const DEFAULT_LIST_HEIGHT = 4096;
-  const GUTTER = 6;
+  const GUTTER = 1;
 
   const [ msg, setMsg ] = useState("YO");
 
diff --git a/net/web/src/session/conversation/virtualList/VirtualList.styled.js b/net/web/src/session/conversation/virtualList/VirtualList.styled.js
index 66c5767b..2d3cbda8 100644
--- a/net/web/src/session/conversation/virtualList/VirtualList.styled.js
+++ b/net/web/src/session/conversation/virtualList/VirtualList.styled.js
@@ -28,7 +28,4 @@ export const VirtualItem = styled.div`
   position: absolute;
   width: 100%;
   overflow: hidden;
-  &:hover {
-    background-color: #f0f5e0;
-  }
 `;