diff --git a/net/web/src/session/Session.jsx b/net/web/src/session/Session.jsx
index f14e6a7e..95ccb77e 100644
--- a/net/web/src/session/Session.jsx
+++ b/net/web/src/session/Session.jsx
@@ -210,7 +210,7 @@ export function Session() {
               { state.cards && (
                 <div class="reframe">
                   <Cards closeCards={closeCards} openContact={actions.openContact} openChannel={openConversation} openListing={actions.openListing} />
-                  <Drawer bodyStyle={{ padding: 0 }} placement="bottom" closable={false} visible={state.listing}
+                  <Drawer bodyStyle={{ padding: 0 }} visible={state.listing} closable={false}
                       onClose={actions.closeListing} getContainer={false} height={'100%'}
                       style={{ position: 'absolute', overflow: 'hidden' }}>
                     <Listing closeListing={actions.closeListing} openContact={actions.openContact} />
@@ -263,7 +263,7 @@ export function Session() {
                 { state.cards && (
                   <Cards closeCards={closeCards} openContact={actions.openContact} openChannel={openConversation} openListing={actions.openListing} />
                 )}
-                <Drawer bodyStyle={{ padding: 0 }} placement="bottom" closable={false} visible={state.listing}
+                <Drawer bodyStyle={{ padding: 0 }} visible={state.listing} closable={false}
                     onClose={actions.closeListing} getContainer={false} height={'100%'}
                     style={{ overflow: 'hidden', position: 'absolute' }}>
                   <Listing closeListing={actions.closeListing} openContact={actions.openContact} />
diff --git a/net/web/src/session/Session.styled.js b/net/web/src/session/Session.styled.js
index 184273e2..4f06a29f 100644
--- a/net/web/src/session/Session.styled.js
+++ b/net/web/src/session/Session.styled.js
@@ -185,8 +185,8 @@ export const SessionWrapper = styled.div`
     }
     .right {
       min-width: 256px;
-      max-width: 384px;
-      width: 20%;
+      max-width: 400px;
+      width: 24%;
       height: 100%;
       display: flex;
       flex-direction: column;
diff --git a/net/web/src/session/cards/Cards.jsx b/net/web/src/session/cards/Cards.jsx
index e2a6a962..21cd4dde 100644
--- a/net/web/src/session/cards/Cards.jsx
+++ b/net/web/src/session/cards/Cards.jsx
@@ -1,6 +1,6 @@
 import { Input, Modal, List, Button } from 'antd';
 import { CardsWrapper } from './Cards.styled';
-import { SortAscendingOutlined, UpOutlined, DoubleRightOutlined, UserOutlined, SearchOutlined } from '@ant-design/icons';
+import { SortAscendingOutlined, UpOutlined, RightOutlined, UserOutlined, SearchOutlined } from '@ant-design/icons';
 import { useCards } from './useCards.hook';
 import { CardItem } from './cardItem/CardItem';
 
@@ -56,15 +56,13 @@ export function Cards({ closeCards, openContact, openChannel, openListing }) {
           <Input bordered={false} allowClear={true} placeholder="Contacts" prefix={<SearchOutlined />}
               spellCheck="false" onChange={(e) => actions.onFilter(e.target.value)} />
         </div>
-        { state.display === 'small' && (
-          <div className="inline">
-            <Button type="primary" icon={<UserOutlined />} onClick={openListing}>Add</Button>
-          </div>
-        )}
+        <div className="inline">
+          <Button type="primary" icon={<UserOutlined />} onClick={openListing}>Add</Button>
+        </div>
         { state.display !== 'small' && (
           <div className="inline">
             <div className="dismiss" onClick={closeCards} >
-              <DoubleRightOutlined />
+              <RightOutlined />
             </div>
           </div>
         )}
@@ -82,15 +80,7 @@ export function Cards({ closeCards, openContact, openChannel, openListing }) {
           <div className="empty">No Contacts</div>
         )}
       </div>
-      { state.display !== 'small' && (
-        <div className="bar">
-          <div className="add" onClick={openListing}>
-            <UpOutlined />
-            <div className="label">Find New Contact</div>
-          </div>
-        </div>
-      )}
-      </CardsWrapper>
+    </CardsWrapper>
   );
 }
 
diff --git a/net/web/src/session/listing/Listing.jsx b/net/web/src/session/listing/Listing.jsx
index 4894eabb..96437e93 100644
--- a/net/web/src/session/listing/Listing.jsx
+++ b/net/web/src/session/listing/Listing.jsx
@@ -1,6 +1,6 @@
 import { Modal, Button, Input, List } from 'antd';
 import { ListingWrapper } from './Listing.styled';
-import { UserOutlined, FilterOutlined, DownOutlined, CloseOutlined, DatabaseOutlined, SearchOutlined } from '@ant-design/icons';
+import { UserOutlined, FilterOutlined, RightOutlined, CloseOutlined, DatabaseOutlined, SearchOutlined } from '@ant-design/icons';
 import { useListing } from './useListing.hook';
 import { ListingItem } from './listingItem/ListingItem';
 
@@ -56,7 +56,7 @@ export function Listing({ closeListing, openContact }) {
         </div>
         <div class="inline">
           { state.display !== 'small' && (
-            <Button type="text" icon={<DownOutlined />} onClick={closeListing}></Button>
+            <Button type="text" icon={<RightOutlined />} onClick={closeListing}></Button>
           )}
           { state.display === 'small' && (
             <Button type="text" icon={<CloseOutlined />} onClick={closeListing}></Button>