diff --git a/common/navigation-data.js b/common/navigation-data.js
index f0420b7a..54347ea9 100644
--- a/common/navigation-data.js
+++ b/common/navigation-data.js
@@ -75,6 +75,14 @@ export const generate = ({ library = [], slates = [] }) => [
     children: null,
     ignore: true,
   },
+  {
+    id: "V1_NAVIGATION_SLATES_FOLLOWING",
+    decorator: "SLATES_FOLLOWING",
+    name: "Slates",
+    pageTitle: "Slates",
+    children: null,
+    ignore: true,
+  },
   {
     id: "V1_NAVIGATION_DIRECTORY",
     decorator: "DIRECTORY",
@@ -82,6 +90,14 @@ export const generate = ({ library = [], slates = [] }) => [
     pageTitle: "Your directory",
     children: null,
   },
+  {
+    id: "V1_NAVIGATION_DIRECTORY_FOLLOWERS",
+    decorator: "DIRECTORY_FOLLOWERS",
+    name: "Directory",
+    pageTitle: "Your directory",
+    children: null,
+    ignore: true,
+  },
   {
     id: "V1_NAVIGATION_SLATE",
     decorator: "PUBLIC_SLATE",
diff --git a/common/svg.js b/common/svg.js
index 5c02911e..726bc311 100644
--- a/common/svg.js
+++ b/common/svg.js
@@ -1637,7 +1637,7 @@ export const Filter = (props) => (
   </svg>
 );
 
-export const Menu = (props) => (
+export const MenuAlt = (props) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
@@ -1659,6 +1659,20 @@ export const Menu = (props) => (
   </svg>
 );
 
+export const Menu = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}
+  >
+    <path d="M4 8H8V4H4V8ZM10 20H14V16H10V20ZM4 20H8V16H4V20ZM4 14H8V10H4V14ZM10 14H14V10H10V14ZM16 4V8H20V4H16ZM10 8H14V4H10V8ZM16 14H20V10H16V14ZM16 20H20V16H16V20Z" />
+  </svg>
+);
+
 export const Globe = (props) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
diff --git a/components/core/Application.js b/components/core/Application.js
index 95669be1..07292b9f 100644
--- a/components/core/Application.js
+++ b/components/core/Application.js
@@ -85,9 +85,11 @@ const SCENES = {
   SLATE: <SceneSlate />,
   SETTINGS_DEVELOPER: <SceneSettingsDeveloper />,
   EDIT_ACCOUNT: <SceneEditAccount />,
-  SLATES: <SceneSlates />,
+  SLATES: <SceneSlates tab={0} />,
+  SLATES_FOLLOWING: <SceneSlates tab={1} />,
   LOCAL_DATA: <SceneLocalData />,
-  DIRECTORY: <SceneDirectory />,
+  DIRECTORY: <SceneDirectory tab={0} />,
+  DIRECTORY_FOLLOWERS: <SceneDirectory tab={1} />,
   FILECOIN: <SceneArchive />,
   MAKE_DEAL: <SceneMakeFilecoinDeal />,
 };
diff --git a/components/core/ApplicationHeader.js b/components/core/ApplicationHeader.js
index 722f9d14..33356168 100644
--- a/components/core/ApplicationHeader.js
+++ b/components/core/ApplicationHeader.js
@@ -232,7 +232,7 @@ export default class ApplicationHeader extends React.Component {
               </Boundary>
             ) : null}
           </span>
-          <span css={STYLES_MOBILE_HIDDEN} style={{ marginLeft: 60 }}>
+          <span css={STYLES_MOBILE_HIDDEN} style={{ marginLeft: 32 }}>
             <span
               css={STYLES_ICON_ELEMENT}
               style={
diff --git a/components/core/CircleButtonGray.js b/components/core/CircleButtonGray.js
index 25d6aee5..f7345f24 100644
--- a/components/core/CircleButtonGray.js
+++ b/components/core/CircleButtonGray.js
@@ -7,8 +7,8 @@ const STYLES_BUTTON = css`
   background-color: ${Constants.system.white};
   color: ${Constants.system.pitchBlack};
   display: inline-flex;
-  width: 36px;
-  height: 36px;
+  width: 40px;
+  height: 40px;
   border-radius: 4px;
   background-size: cover;
   background-position: 50% 50%;
@@ -18,7 +18,7 @@ const STYLES_BUTTON = css`
   cursor: pointer;
   user-select: none;
   flex-shrink: 0;
-  box-shadow: 0 0 0 1px ${Constants.system.bgGray} inset;
+  ${"" /* box-shadow: 0 0 0 1px ${Constants.system.bgGray} inset; */}
 
   :hover {
     background-color: rgb(253, 253, 253);
diff --git a/components/core/SlatePicker.js b/components/core/SlatePicker.js
index 5e0876b3..518eff08 100644
--- a/components/core/SlatePicker.js
+++ b/components/core/SlatePicker.js
@@ -10,14 +10,13 @@ import { LoaderSpinner } from "~/components/system/components/Loaders";
 const STYLES_SLATE_NAME = css`
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
   font-family: ${Constants.font.medium};
   color: ${Constants.system.black};
 `;
 
 const STYLES_SLATE_NAME_DARK = css`
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-family: ${Constants.font.medium};
+  ${STYLES_SLATE_NAME}
   color: ${Constants.system.white};
 `;
 
@@ -50,6 +49,7 @@ const STYLES_SLATE_LIST = css`
 const STYLES_SLATE_LINE = css`
   display: flex;
   align-items: center;
+  justify-content: space-between;
   width: 100%;
   padding: 12px 16px;
   background-color: ${Constants.system.white};
@@ -139,34 +139,49 @@ export class SlatePicker extends React.Component {
                   css={this.props.dark ? STYLES_SLATE_LINE_DARK : STYLES_SLATE_LINE}
                   onClick={() => this.props.onAdd(slate)}
                 >
-                  <div css={STYLES_ICON_BOX}>
-                    {selected[slate.id] ? (
-                      <SVG.Slate
-                        height="24px"
-                        style={{
-                          marginRight: 8,
-                          pointerEvents: "none",
-                          color: this.props.dark ? Constants.system.white : Constants.system.black,
-                        }}
-                      />
-                    ) : (
-                      <SVG.PlusCircle
-                        height="24px"
-                        style={{
-                          marginRight: 8,
-                          pointerEvents: "none",
-                        }}
-                      />
-                    )}
-                  </div>
                   <div
-                    css={this.props.dark ? STYLES_SLATE_NAME_DARK : STYLES_SLATE_NAME}
-                    style={{
-                      color: selected[slate.id] ? this.props.selectedColor : "inherit",
-                    }}
+                    style={{ minWidth: "10%", width: "100%", display: "flex", flexWrap: "nowrap" }}
                   >
-                    {Strings.getPresentationSlateName(slate)}
+                    <div css={STYLES_ICON_BOX}>
+                      {selected[slate.id] ? (
+                        <SVG.Slate
+                          height="24px"
+                          style={{
+                            marginRight: 8,
+                            pointerEvents: "none",
+                            color: this.props.dark
+                              ? Constants.system.white
+                              : Constants.system.black,
+                          }}
+                        />
+                      ) : (
+                        <SVG.PlusCircle
+                          height="24px"
+                          style={{
+                            marginRight: 8,
+                            pointerEvents: "none",
+                          }}
+                        />
+                      )}
+                    </div>
+                    <div
+                      css={this.props.dark ? STYLES_SLATE_NAME_DARK : STYLES_SLATE_NAME}
+                      style={{
+                        color: selected[slate.id] ? this.props.selectedColor : "inherit",
+                      }}
+                    >
+                      {Strings.getPresentationSlateName(slate)}
+                    </div>
                   </div>
+                  {slate.data.public ? (
+                    <div style={{ flexShrink: 0, marginLeft: 16 }}>
+                      <SVG.Globe height="24px" />
+                    </div>
+                  ) : (
+                    <div style={{ flexShrink: 0, marginLeft: 16 }}>
+                      <SVG.SecurityLock height="24px" />
+                    </div>
+                  )}
                 </div>
               ))}
             </div>
diff --git a/components/core/SlatePreviewBlock.js b/components/core/SlatePreviewBlock.js
index bdd30597..490be2e5 100644
--- a/components/core/SlatePreviewBlock.js
+++ b/components/core/SlatePreviewBlock.js
@@ -429,31 +429,14 @@ export class SlatePreviewBlock extends React.Component {
           <React.Fragment>
             <div css={STYLES_TITLE_LINE}>
               <div css={STYLES_TITLE}>{this.props.slate.data.name}</div>
-              {this.props.isOwner ? (
-                this.props.slate.data.public ? (
-                  <div
-                    css={STYLES_TAG}
-                    style={{
-                      borderColor: Constants.system.brand,
-                      color: Constants.system.brand,
-                    }}
-                  >
-                    Public
-                  </div>
-                ) : (
-                  <div
-                    css={STYLES_TAG}
-                    style={{
-                      color: Constants.system.darkGray,
-                      borderColor: Constants.system.darkGray,
-                    }}
-                  >
-                    Private
-                  </div>
-                )
-              ) : (
-                <div style={{ height: 32 }} />
-              )}
+              <div style={{ height: "18px" }}>
+                {this.props.isOwner && !this.props.slate.data.public ? (
+                  <SVG.SecurityLock
+                    height="18px"
+                    style={{ color: Constants.system.grayBlack, marginRight: 24 }}
+                  />
+                ) : null}
+              </div>
               {this.props.username ? (
                 <div
                   style={{ marginLeft: "auto" }}
@@ -471,13 +454,15 @@ export class SlatePreviewBlock extends React.Component {
               ) : null}
             </div>
             <span css={STYLES_MOBILE_HIDDEN}>
-              {this.props.slate.data.body ? (
-                <div css={STYLES_BODY}>{this.props.slate.data.body}</div>
-              ) : this.props.isOwner ? (
-                <div style={{ height: "44px" }} />
-              ) : (
-                <div style={{ height: "40px" }} />
-              )}
+              <div style={{ height: "44px" }}>
+                {this.props.slate.data.body ? (
+                  <div css={STYLES_BODY}>{this.props.slate.data.body}</div>
+                ) : this.props.isOwner ? (
+                  <div style={{ height: "44px" }} />
+                ) : (
+                  <div style={{ height: "40px" }} />
+                )}
+              </div>
               <div
                 style={{
                   width: "100%",
@@ -624,3 +609,25 @@ export default class SlatePreviewBlocks extends React.Component {
     );
   }
 }
+
+// this.props.slate.data.public ? (
+//                   <div
+//                     css={STYLES_TAG}
+//                     style={{
+//                       borderColor: Constants.system.brand,
+//                       color: Constants.system.brand,
+//                     }}
+//                   >
+//                     Public
+//                   </div>
+//                 ) : (
+//                   <div
+//                     css={STYLES_TAG}
+//                     style={{
+//                       color: Constants.system.darkGray,
+//                       borderColor: Constants.system.darkGray,
+//                     }}
+//                   >
+//                     Private
+//                   </div>
+//                 )
diff --git a/components/sidebars/SidebarSingleSlateSettings.js b/components/sidebars/SidebarSingleSlateSettings.js
index 43cb3d4b..baae0811 100644
--- a/components/sidebars/SidebarSingleSlateSettings.js
+++ b/components/sidebars/SidebarSingleSlateSettings.js
@@ -91,27 +91,31 @@ export default class SidebarSingleSlateSettings extends React.Component {
   };
 
   _handleDelete = async (e) => {
-    this.setState({ loading: true });
+    // this.setState({ loading: true });
 
     if (
       !window.confirm("Are you sure you want to delete this Slate? This action is irreversible.")
     ) {
-      return this.setState({ loading: false });
+      return;
+      // return this.setState({ loading: false });
     }
 
+    let slates = this.props.viewer.slates.filter((slate) => slate.id !== this.props.current.id);
+    this.props.onUpdateViewer({ slates });
+
+    this.props.onAction({
+      type: "NAVIGATE",
+      value: "V1_NAVIGATION_SLATES",
+    });
+
     const response = await Actions.deleteSlate({
       id: this.props.current.id,
     });
 
     if (Events.hasError(response)) {
-      this.setState({ loading: false });
+      // this.setState({ loading: false });
       return;
     }
-
-    await this.props.onAction({
-      type: "NAVIGATE",
-      value: "V1_NAVIGATION_SLATES",
-    });
   };
 
   render() {
diff --git a/components/system/components/GlobalCarousel.js b/components/system/components/GlobalCarousel.js
index 8e71c5ed..51c3eda2 100644
--- a/components/system/components/GlobalCarousel.js
+++ b/components/system/components/GlobalCarousel.js
@@ -79,7 +79,7 @@ const STYLES_EXPANDER = css`
   position: absolute;
   padding: 4px;
   top: 16px;
-  right: 16px;
+  left: 16px;
   cursor: pointer;
 
   :hover {
@@ -95,12 +95,12 @@ const STYLES_DISMISS_BOX = css`
   cursor: pointer;
 
   :hover {
-    color: ${Constants.system.black};
+    color: ${Constants.system.white};
   }
 
-  @media (min-width: ${Constants.sizes.mobile}px) {
+  ${"" /* @media (min-width: ${Constants.sizes.mobile}px) {
     display: none;
-  }
+  } */}
 `;
 
 const STYLES_MOBILE_HIDDEN = css`
@@ -366,20 +366,27 @@ export class GlobalCarousel extends React.Component {
           </span>
           {slide}
           <span css={STYLES_MOBILE_HIDDEN}>
-            <div
-              css={STYLES_EXPANDER}
-              onClick={() => this.setState({ showSidebar: !this.state.showSidebar })}
-            >
-              {this.state.showSidebar ? (
+            {this.state.showSidebar ? (
+              <div
+                css={STYLES_EXPANDER}
+                onClick={() => this.setState({ showSidebar: !this.state.showSidebar })}
+              >
                 <SVG.Maximize height="24px" />
-              ) : (
-                <SVG.Minimize height="24px" />
-              )}
-            </div>
+              </div>
+            ) : (
+              <div style={{ display: "flex", flexDirection: "row" }}>
+                <div
+                  css={STYLES_EXPANDER}
+                  onClick={() => this.setState({ showSidebar: !this.state.showSidebar })}
+                >
+                  <SVG.Minimize height="24px" />
+                </div>
+                <div css={STYLES_DISMISS_BOX} onClick={this._handleClose}>
+                  <SVG.Dismiss height="24px" />
+                </div>
+              </div>
+            )}
           </span>
-          <div css={STYLES_DISMISS_BOX} onClick={this._handleClose}>
-            <SVG.Dismiss height="24px" />
-          </div>
         </div>
         <span css={STYLES_MOBILE_HIDDEN}>
           {this.state.carouselType === "data" ? (
diff --git a/scenes/SceneDirectory.js b/scenes/SceneDirectory.js
index 8ca093bc..359d725b 100644
--- a/scenes/SceneDirectory.js
+++ b/scenes/SceneDirectory.js
@@ -138,7 +138,6 @@ export default class SceneDirectory extends React.Component {
 
   state = {
     copyValue: "",
-    tab: 0,
     contextMenu: null,
   };
 
@@ -476,10 +475,16 @@ export default class SceneDirectory extends React.Component {
         <ScenePageHeader title="Directory" />
         <SecondaryTabGroup
           tabs={["Following", "Followers"]}
-          value={this.state.tab}
-          onChange={(value) => this.setState({ tab: value })}
+          value={this.props.tab}
+          onChange={(value) => {
+            if (value === 0) {
+              this.props.onAction({ type: "NAVIGATE", value: "V1_NAVIGATION_DIRECTORY" });
+            } else {
+              this.props.onAction({ type: "NAVIGATE", value: "V1_NAVIGATION_DIRECTORY_FOLLOWERS" });
+            }
+          }}
         />
-        {/* {this.state.tab === 0 ? (
+        {/* {this.props.tab === 0 ? (
           requests && requests.length ? (
             requests
           ) : (
@@ -489,7 +494,7 @@ export default class SceneDirectory extends React.Component {
             </EmptyState>
           )
         ) : null}
-        {this.state.tab === 1 ? (
+        {this.props.tab === 1 ? (
           trusted && trusted.length ? (
             trusted
           ) : (
@@ -499,7 +504,7 @@ export default class SceneDirectory extends React.Component {
             </EmptyState>
           )
         ) : null} */}
-        {this.state.tab === 0 ? (
+        {this.props.tab === 0 ? (
           following && following.length ? (
             following
           ) : (
@@ -509,7 +514,7 @@ export default class SceneDirectory extends React.Component {
             </EmptyState>
           )
         ) : null}
-        {this.state.tab === 1 ? (
+        {this.props.tab === 1 ? (
           followers && followers.length ? (
             followers
           ) : (
diff --git a/scenes/SceneSlate.js b/scenes/SceneSlate.js
index e0ecb81f..0004dbb6 100644
--- a/scenes/SceneSlate.js
+++ b/scenes/SceneSlate.js
@@ -240,9 +240,9 @@ export default class SceneSlate extends React.Component {
       <div style={{ display: `flex` }}>
         <div onClick={this._handleFollow}>
           {this.state.isFollowing ? (
-            <ButtonSecondary style={{ minHeight: 36 }}>Unfollow</ButtonSecondary>
+            <ButtonSecondary>Unfollow</ButtonSecondary>
           ) : (
-            <ButtonPrimary style={{ minHeight: 36 }}>Follow</ButtonPrimary>
+            <ButtonPrimary>Follow</ButtonPrimary>
           )}
         </div>
         <CircleButtonGray
diff --git a/scenes/SceneSlates.js b/scenes/SceneSlates.js
index 0c8775c2..25ec8a54 100644
--- a/scenes/SceneSlates.js
+++ b/scenes/SceneSlates.js
@@ -15,10 +15,6 @@ import EmptyState from "~/components/core/EmptyState";
 
 // TODO(jim): Slates design.
 export default class SceneSlates extends React.Component {
-  state = {
-    tab: 0,
-  };
-
   _handleAdd = () => {
     this.props.onAction({
       name: "Create slate",
@@ -60,8 +56,17 @@ export default class SceneSlates extends React.Component {
           actions={
             <SecondaryTabGroup
               tabs={["My Slates", "Following"]}
-              value={this.state.tab}
-              onChange={(value) => this.setState({ tab: value })}
+              value={this.props.tab}
+              onChange={(value) => {
+                if (value === 0) {
+                  this.props.onAction({ type: "NAVIGATE", value: "V1_NAVIGATION_SLATES" });
+                } else {
+                  this.props.onAction({
+                    type: "NAVIGATE",
+                    value: "V1_NAVIGATION_SLATES_FOLLOWING",
+                  });
+                }
+              }}
               style={{ margin: "0 0 24px 0" }}
             />
           }
@@ -69,7 +74,7 @@ export default class SceneSlates extends React.Component {
         {/* <ScenePageHeader
           title="Slates"
           actions={
-            this.state.tab === 0 ? (
+            this.props.tab === 0 ? (
               <CircleButtonGray onClick={this._handleAdd} style={{ marginLeft: 12 }}>
                 <SVG.Plus height="16px" />
               </CircleButtonGray>
@@ -77,7 +82,7 @@ export default class SceneSlates extends React.Component {
           }
         /> */}
 
-        {this.state.tab === 0 ? (
+        {this.props.tab === 0 ? (
           this.props.viewer.slates && this.props.viewer.slates.length ? (
             <SlatePreviewBlocks
               isOwner
@@ -98,7 +103,7 @@ export default class SceneSlates extends React.Component {
           )
         ) : null}
 
-        {this.state.tab === 1 ? (
+        {this.props.tab === 1 ? (
           subscriptions && subscriptions.length ? (
             <SlatePreviewBlocks
               slates={subscriptions}