diff --git a/app/javascript/gabsocial/components/popover/error_popover.js b/app/javascript/gabsocial/components/popover/error_popover.js
index 96b0b146..bddb62a7 100644
--- a/app/javascript/gabsocial/components/popover/error_popover.js
+++ b/app/javascript/gabsocial/components/popover/error_popover.js
@@ -1,21 +1,28 @@
-import Block from '../block'
+import PopoverLayout from './popover_layout'
 import ColumnIndicator from '../column_indicator'
 
 export default class ErrorPopover extends PureComponent {
 
+  static defaultProps = {
+    isXS: PropTypes.bool,
+    onClose: PropTypes.func,
+  }
+
   render() {
+    const { isXS } = this.props
+    
     return (
-      <div className={_s.width250PX}>
-        <Block>
+      <PopoverLayout
+        width={250}
+        isXS={isXS}
+        onClose={this.props.onClose}
+      >
           <div className={[_s.default, _s.px15, _s.py15, _s.mt15, _s.mb15].join(' ')}>
             <div className={[_s.default, _s.px15, _s.py15, _s.mt15, _s.mb15, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
-
               <ColumnIndicator type='error' message='Error loading popover' />
-
             </div>
           </div>
-        </Block>
-      </div>
+      </PopoverLayout>
     )
   }
 
diff --git a/app/javascript/gabsocial/components/popover/loading_popover.js b/app/javascript/gabsocial/components/popover/loading_popover.js
index 509fa6ba..9cbc1927 100644
--- a/app/javascript/gabsocial/components/popover/loading_popover.js
+++ b/app/javascript/gabsocial/components/popover/loading_popover.js
@@ -1,22 +1,29 @@
-import Block from '../block'
+import PopoverLayout from './popover_layout'
 import ColumnIndicator from '../column_indicator'
 
 export default class LoadingPopover extends PureComponent {
 
+  static defaultProps = {
+    isXS: PropTypes.bool,
+    onClose: PropTypes.func,
+  }
+
   render() {
+    const { isXS } = this.props
+    
     return (
-      <div className={_s.width250PX}>
-        <Block>
+      <PopoverLayout
+        width={250}
+        isXS={isXS}
+        onClose={this.props.onClose}
+      >
           <div className={[_s.default, _s.px15, _s.py15, _s.mt15, _s.mb15].join(' ')}>
             <div className={[_s.default, _s.px15, _s.py15, _s.mt15, _s.mb15, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
-
               <ColumnIndicator type='loading' />
-
             </div>
           </div>
-        </Block>
-      </div>
+      </PopoverLayout>
     )
   }
 
-}
\ No newline at end of file
+}
diff --git a/app/javascript/gabsocial/components/popover/popover_root.js b/app/javascript/gabsocial/components/popover/popover_root.js
index 08d8de46..0af67f9b 100644
--- a/app/javascript/gabsocial/components/popover/popover_root.js
+++ b/app/javascript/gabsocial/components/popover/popover_root.js
@@ -108,11 +108,17 @@ class PopoverRoot extends PureComponent {
   }
 
   renderLoading = () => {
-    return <LoadingPopover />
+    const { width } = this.state
+    const isXS = width <= BREAKPOINT_EXTRA_SMALL
+
+    return <LoadingPopover isXS={isXS} onClose={this.props.onClose} />
   }
 
   renderError = () => {
-    return <ErrorPopover />
+    const { width } = this.state
+    const isXS = width <= BREAKPOINT_EXTRA_SMALL
+
+    return <ErrorPopover isXS={isXS} onClose={this.props.onClose} />
   }
 
   render() {