diff --git a/package.json b/package.json
index 1318686b14..ca58b7ea8d 100644
--- a/package.json
+++ b/package.json
@@ -265,4 +265,4 @@
     ]
   },
   "pre-commit": "lint:staged"
-}
+}
\ No newline at end of file
diff --git a/src/components/flyout/index.js b/src/components/flyout/index.js
index f04c3f6386..25c530bf1d 100644
--- a/src/components/flyout/index.js
+++ b/src/components/flyout/index.js
@@ -14,7 +14,7 @@ const StyledFlyout = styled(FlexRow)`
   top: 36px;
   z-index: ${zIndex.flyout};
   color: ${({ theme }) => theme.text.default};
-  transition: ${Transition.dropdown.off};
+  ${props => props.style};
 `;
 
 const StyledRow = styled(FlexCol)`
diff --git a/src/views/thread/components/actionBar.js b/src/views/thread/components/actionBar.js
index 3949da36ef..b4e65e8d55 100644
--- a/src/views/thread/components/actionBar.js
+++ b/src/views/thread/components/actionBar.js
@@ -2,6 +2,7 @@
 import * as React from 'react';
 import { connect } from 'react-redux';
 import Clipboard from 'react-clipboard.js';
+import { Manager, Reference, Popper } from 'react-popper';
 import { addToastWithTimeout } from '../../../actions/toasts';
 import { openModal } from '../../../actions/modals';
 import Icon from '../../../components/icons';
@@ -11,6 +12,8 @@ import Flyout from '../../../components/flyout';
 import { track } from '../../../helpers/events';
 import type { GetThreadType } from 'shared/graphql/queries/thread/getThread';
 import toggleThreadNotificationsMutation from 'shared/graphql/mutations/thread/toggleThreadNotifications';
+import OutsideClickHandler from '../../../components/outsideClickHandler';
+
 import {
   FollowButton,
   ShareButtons,
@@ -42,11 +45,19 @@ type Props = {
 type State = {
   notificationStateLoading: boolean,
   flyoutOpen: boolean,
+  isSettingsBtnHovering: boolean,
 };
 class ActionBar extends React.Component<Props, State> {
   state = {
     notificationStateLoading: false,
     flyoutOpen: false,
+    isSettingsBtnHovering: false,
+  };
+
+  toggleHover = () => {
+    this.setState(({ isSettingsBtnHovering }) => ({
+      isSettingsBtnHovering: !isSettingsBtnHovering,
+    }));
   };
 
   toggleFlyout = val => {
@@ -216,7 +227,11 @@ class ActionBar extends React.Component<Props, State> {
       isLockingThread,
       isPinningThread,
     } = this.props;
-    const { notificationStateLoading, flyoutOpen } = this.state;
+    const {
+      notificationStateLoading,
+      flyoutOpen,
+      isSettingsBtnHovering,
+    } = this.state;
     const isPinned = thread.community.pinnedThreadId === thread.id;
 
     const shouldRenderActionsDropdown = this.shouldRenderActionsDropdown();
@@ -350,129 +365,158 @@ class ActionBar extends React.Component<Props, State> {
 
           <div style={{ display: 'flex' }}>
             {shouldRenderActionsDropdown && (
-              <DropWrap className={flyoutOpen ? 'open' : ''}>
-                <IconButton
-                  glyph="settings"
-                  tipText={'Thread settings'}
-                  tipLocation={'top-left'}
-                  onClick={this.toggleFlyout}
-                  dataCy="thread-actions-dropdown-trigger"
-                />
-                <Flyout data-cy="thread-actions-dropdown">
-                  <FlyoutRow hideAbove={768}>
-                    <TextButton
-                      icon={
-                        thread.receiveNotifications
-                          ? 'notification-fill'
-                          : 'notification'
-                      }
-                      hoverColor={'brand.alt'}
-                      onClick={this.toggleNotification}
-                      dataCy={'thread-dropdown-notifications'}
-                    >
-                      {thread.receiveNotifications ? 'Subscribed' : 'Notify me'}
-                    </TextButton>
-                  </FlyoutRow>
-
-                  {shouldRenderEditThreadAction && (
-                    <FlyoutRow>
-                      <TextButton
-                        icon="edit"
-                        onClick={this.props.toggleEdit}
-                        hoverColor={'space.default'}
-                        dataCy={'thread-dropdown-edit'}
-                      >
-                        <Label>Edit post</Label>
-                      </TextButton>
-                    </FlyoutRow>
-                  )}
-
-                  {shouldRenderPinThreadAction && (
-                    <FlyoutRow>
-                      <TextButton
-                        icon={isPinned ? 'pin-fill' : 'pin'}
-                        hoverColor={
-                          isPinned ? 'warn.default' : 'special.default'
-                        }
-                        onClick={this.props.togglePinThread}
-                        dataCy={'thread-dropdown-pin'}
-                        loading={isPinningThread}
-                        disabled={isPinningThread}
-                      >
-                        <Label>
-                          {isPinned ? 'Unpin thread' : 'Pin thread'}
-                        </Label>
-                      </TextButton>
-                    </FlyoutRow>
-                  )}
-
-                  {shouldRenderMoveThreadAction && (
-                    <FlyoutRow hideBelow={1024}>
-                      <TextButton
-                        icon={'channel'}
-                        hoverColor={'special.default'}
-                        onClick={this.triggerChangeChannel}
-                        dataCy={'thread-dropdown-move'}
-                      >
-                        Move thread
-                      </TextButton>
-                    </FlyoutRow>
-                  )}
-
-                  {shouldRenderLockThreadAction && (
-                    <FlyoutRow>
-                      <TextButton
-                        icon={thread.isLocked ? 'private' : 'private-unlocked'}
-                        hoverColor={
-                          thread.isLocked ? 'success.default' : 'warn.alt'
-                        }
-                        onClick={this.props.threadLock}
-                        dataCy={'thread-dropdown-lock'}
-                        loading={isLockingThread}
-                        disabled={isLockingThread}
-                      >
-                        <Label>
-                          {thread.isLocked ? 'Unlock chat' : 'Lock chat'}
-                        </Label>
-                      </TextButton>
-                    </FlyoutRow>
-                  )}
-
-                  {shouldRenderDeleteThreadAction && (
-                    <FlyoutRow>
-                      <TextButton
-                        icon="delete"
-                        hoverColor="warn.default"
-                        onClick={this.props.triggerDelete}
-                        dataCy={'thread-dropdown-delete'}
+              <DropWrap
+                onMouseEnter={this.toggleHover}
+                onMouseLeave={this.toggleHover}
+              >
+                <Manager>
+                  <Reference>
+                    {({ ref }) => {
+                      return (
+                        <IconButton
+                          glyph="settings"
+                          tipText={'Thread settings'}
+                          tipLocation={'left'}
+                          onClick={this.toggleFlyout}
+                          dataCy="thread-actions-dropdown-trigger"
+                          innerRef={ref}
+                        />
+                      );
+                    }}
+                  </Reference>
+                  {(isSettingsBtnHovering || flyoutOpen) && (
+                    <OutsideClickHandler onOutsideClick={this.toggleFlyout}>
+                      <Popper
+                        placement="bottom-end"
+                        modifiers={{
+                          preventOverflow: { enabled: true },
+                          flip: {
+                            boundariesElement: 'scrollParent',
+                            behavior: ['top', 'bottom', 'top'],
+                          },
+                          hide: { enable: false },
+                        }}
                       >
-                        <Label>Delete</Label>
-                      </TextButton>
-                    </FlyoutRow>
+                        {({ style, ref, placement }) => {
+                          return (
+                            <Flyout
+                              data-cy="thread-actions-dropdown"
+                              innerRef={ref}
+                              style={style}
+                            >
+                              <FlyoutRow hideAbove={768}>
+                                <TextButton
+                                  icon={
+                                    thread.receiveNotifications
+                                      ? 'notification-fill'
+                                      : 'notification'
+                                  }
+                                  hoverColor={'brand.alt'}
+                                  onClick={this.toggleNotification}
+                                  dataCy={'thread-dropdown-notifications'}
+                                >
+                                  {thread.receiveNotifications
+                                    ? 'Subscribed'
+                                    : 'Notify me'}
+                                </TextButton>
+                              </FlyoutRow>
+
+                              {shouldRenderEditThreadAction && (
+                                <FlyoutRow>
+                                  <TextButton
+                                    icon="edit"
+                                    onClick={this.props.toggleEdit}
+                                    hoverColor={'space.default'}
+                                    dataCy={'thread-dropdown-edit'}
+                                  >
+                                    <Label>Edit post</Label>
+                                  </TextButton>
+                                </FlyoutRow>
+                              )}
+
+                              {shouldRenderPinThreadAction && (
+                                <FlyoutRow>
+                                  <TextButton
+                                    icon={isPinned ? 'pin-fill' : 'pin'}
+                                    hoverColor={
+                                      isPinned
+                                        ? 'warn.default'
+                                        : 'special.default'
+                                    }
+                                    onClick={this.props.togglePinThread}
+                                    dataCy={'thread-dropdown-pin'}
+                                    loading={isPinningThread}
+                                    disabled={isPinningThread}
+                                  >
+                                    <Label>
+                                      {isPinned ? 'Unpin thread' : 'Pin thread'}
+                                    </Label>
+                                  </TextButton>
+                                </FlyoutRow>
+                              )}
+
+                              {shouldRenderMoveThreadAction && (
+                                <FlyoutRow hideBelow={1024}>
+                                  <TextButton
+                                    icon={'channel'}
+                                    hoverColor={'special.default'}
+                                    onClick={this.triggerChangeChannel}
+                                    dataCy={'thread-dropdown-move'}
+                                  >
+                                    Move thread
+                                  </TextButton>
+                                </FlyoutRow>
+                              )}
+
+                              {shouldRenderLockThreadAction && (
+                                <FlyoutRow>
+                                  <TextButton
+                                    icon={
+                                      thread.isLocked
+                                        ? 'private'
+                                        : 'private-unlocked'
+                                    }
+                                    hoverColor={
+                                      thread.isLocked
+                                        ? 'success.default'
+                                        : 'warn.alt'
+                                    }
+                                    onClick={this.props.threadLock}
+                                    dataCy={'thread-dropdown-lock'}
+                                    loading={isLockingThread}
+                                    disabled={isLockingThread}
+                                  >
+                                    <Label>
+                                      {thread.isLocked
+                                        ? 'Unlock chat'
+                                        : 'Lock chat'}
+                                    </Label>
+                                  </TextButton>
+                                </FlyoutRow>
+                              )}
+
+                              {shouldRenderDeleteThreadAction && (
+                                <FlyoutRow>
+                                  <TextButton
+                                    icon="delete"
+                                    hoverColor="warn.default"
+                                    onClick={this.props.triggerDelete}
+                                    dataCy={'thread-dropdown-delete'}
+                                  >
+                                    <Label>Delete</Label>
+                                  </TextButton>
+                                </FlyoutRow>
+                              )}
+                            </Flyout>
+                          );
+                        }}
+                      </Popper>
+                    </OutsideClickHandler>
                   )}
-                </Flyout>
+                </Manager>
               </DropWrap>
             )}
           </div>
-          {flyoutOpen && (
-            <div
-              style={{
-                position: 'fixed',
-                left: 0,
-                right: 0,
-                top: 0,
-                bottom: 0,
-                background: 'transparent',
-                zIndex: 3002,
-              }}
-              data-cy={'thread-dropdown-close'}
-              onClick={() =>
-                setTimeout(() => {
-                  this.toggleFlyout(false);
-                })
-              }
-            />
-          )}
         </ActionBarContainer>
       );
     }
diff --git a/src/views/thread/style.js b/src/views/thread/style.js
index f0232b7fac..76da42bf19 100644
--- a/src/views/thread/style.js
+++ b/src/views/thread/style.js
@@ -184,17 +184,9 @@ export const DropWrap = styled(FlexCol)`
   }
 
   .flyout {
-    display: none;
     position: absolute;
-    top: 100%;
-    right: 0;
-    transition: ${Transition.hover.off};
-  }
-
-  &:hover .flyout,
-  &.open > .flyout {
-    display: inline-block;
-    transition: ${Transition.hover.on};
+    right: auto;
+    width: 200px;
   }
 `;