diff --git a/app/javascript/gabsocial/actions/compose.js b/app/javascript/gabsocial/actions/compose.js
index dddda92f..55991900 100644
--- a/app/javascript/gabsocial/actions/compose.js
+++ b/app/javascript/gabsocial/actions/compose.js
@@ -162,15 +162,14 @@ export function handleComposeSubmit(dispatch, getState, response, status) {
     }
   };
 
-  if (response.data.visibility !== 'direct') {
+  if (response.data.in_reply_to_id === null && response.data.visibility === 'public') {
     insertIfOnline('home');
-  } else if (response.data.in_reply_to_id === null && response.data.visibility === 'public') {
     insertIfOnline('community');
     insertIfOnline('public');
   }
 }
 
-export function submitCompose(routerHistory, group) {
+export function submitCompose(group, replyToId=null) {
   return function (dispatch, getState) {
     if (!me) return;
 
@@ -189,6 +188,8 @@ export function submitCompose(routerHistory, group) {
     //   return hasProtocol ? match : `http://${match}`
     // })
 
+    const inReplyToId = getState().getIn(['compose', 'in_reply_to'], null) || replyToId
+
     console.log("markdown:", markdown)
 
     dispatch(submitComposeRequest());
@@ -208,7 +209,7 @@ export function submitCompose(routerHistory, group) {
       status,
       markdown,
       scheduled_at,
-      in_reply_to_id: getState().getIn(['compose', 'in_reply_to'], null),
+      in_reply_to_id: inReplyToId,
       quote_of_id: getState().getIn(['compose', 'quote_of_id'], null),
       media_ids: media.map(item => item.get('id')),
       sensitive: getState().getIn(['compose', 'sensitive']),
@@ -221,9 +222,6 @@ export function submitCompose(routerHistory, group) {
         'Idempotency-Key': getState().getIn(['compose', 'idempotencyKey']),
       },
     }).then(function (response) {
-      if (response.data.visibility === 'direct' && getState().getIn(['conversations', 'mounted']) <= 0 && routerHistory) {
-        routerHistory.push('/messages');
-      }
       handleComposeSubmit(dispatch, getState, response, status);
     }).catch(function (error) {
       dispatch(submitComposeFail(error));
diff --git a/app/javascript/gabsocial/assets/add_icon.js b/app/javascript/gabsocial/assets/add_icon.js
index 42d373de..6a35151d 100644
--- a/app/javascript/gabsocial/assets/add_icon.js
+++ b/app/javascript/gabsocial/assets/add_icon.js
@@ -1,8 +1,6 @@
 const AddIcon = ({
   className = '',
-  width = '16px',
-  height = '16px',
-  viewBox = '0 0 64 64',
+  size = '16px',
   title = 'Add',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const AddIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 64 64'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/angle_right_icon.js b/app/javascript/gabsocial/assets/angle_right_icon.js
index bbd4451f..e6311bba 100644
--- a/app/javascript/gabsocial/assets/angle_right_icon.js
+++ b/app/javascript/gabsocial/assets/angle_right_icon.js
@@ -1,8 +1,6 @@
 const AngleRightIcon = ({
   className = '',
-  width = '16px',
-  height = '16px',
-  viewBox = '0 0 64 64',
+  size = '16px',
   title = '',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const AngleRightIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 64 64'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/apps_icon.js b/app/javascript/gabsocial/assets/apps_icon.js
index ebc9a79f..bc724a35 100644
--- a/app/javascript/gabsocial/assets/apps_icon.js
+++ b/app/javascript/gabsocial/assets/apps_icon.js
@@ -1,8 +1,6 @@
 const AppsIcon = ({
   className = '',
-  width = '16px',
-  height = '16px',
-  viewBox = '0 0 80 80',
+  size = '16px',
   title = 'Apps',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const AppsIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 80 80'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/audio_icon.js b/app/javascript/gabsocial/assets/audio_icon.js
index 99d3a58d..8efc45fe 100644
--- a/app/javascript/gabsocial/assets/audio_icon.js
+++ b/app/javascript/gabsocial/assets/audio_icon.js
@@ -1,8 +1,6 @@
 const AudioIcon = ({
   className = '',
-  width = '24px',
-  height = '24px',
-  viewBox = '0 0 24 24',
+  size = '24px',
   title = '',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const AudioIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 24 24'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/audio_mute_icon.js b/app/javascript/gabsocial/assets/audio_mute_icon.js
index dadc103d..d3639571 100644
--- a/app/javascript/gabsocial/assets/audio_mute_icon.js
+++ b/app/javascript/gabsocial/assets/audio_mute_icon.js
@@ -1,9 +1,7 @@
 const AudioMuteIcon = ({
   className = '',
-  width = '24px',
-  height = '24px',
-  viewBox = '0 0 24 24',
-  title = 'Error',
+  size = '24px',
+  title = '',
 }) => (
   <svg
     className={className}
@@ -11,9 +9,9 @@ const AudioMuteIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 24 24'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/back_icon.js b/app/javascript/gabsocial/assets/back_icon.js
index 4cf5137c..ff0132ad 100644
--- a/app/javascript/gabsocial/assets/back_icon.js
+++ b/app/javascript/gabsocial/assets/back_icon.js
@@ -1,8 +1,6 @@
 const BackIcon = ({
   className = '',
-  width = '16px',
-  height = '16px',
-  viewBox = '0 0 60 60',
+  size = '16px',
   title = 'Back',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const BackIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 60 60'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/blockquote_icon.js b/app/javascript/gabsocial/assets/blockquote_icon.js
index 54955705..20ce7c3b 100644
--- a/app/javascript/gabsocial/assets/blockquote_icon.js
+++ b/app/javascript/gabsocial/assets/blockquote_icon.js
@@ -1,8 +1,6 @@
 const BlockQuoteIcon = ({
   className = '',
-  width = '16px',
-  height = '16px',
-  viewBox = '0 0 34 32',
+  size = '16px',
   title = 'Block Quote',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const BlockQuoteIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 34 32'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/bold_icon.js b/app/javascript/gabsocial/assets/bold_icon.js
index ee39beda..a8f823e9 100644
--- a/app/javascript/gabsocial/assets/bold_icon.js
+++ b/app/javascript/gabsocial/assets/bold_icon.js
@@ -1,8 +1,6 @@
 const BoldIcon = ({
   className = '',
-  width = '16px',
-  height = '16px',
-  viewBox = '0 0 34 32',
+  size = '16px',
   title = 'Strikethrough',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const BoldIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 34 32'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/calendar_icon.js b/app/javascript/gabsocial/assets/calendar_icon.js
index cbc74f60..439b3d35 100644
--- a/app/javascript/gabsocial/assets/calendar_icon.js
+++ b/app/javascript/gabsocial/assets/calendar_icon.js
@@ -1,8 +1,6 @@
 const CalendarIcon = ({
   className = '',
-  width = '26px',
-  height = '26px',
-  viewBox = '0 0 48 48',
+  size = '26px',
   title = 'Calendar',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const CalendarIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 48 48'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/chat_icon.js b/app/javascript/gabsocial/assets/chat_icon.js
index 8f7de4d8..4c75b526 100644
--- a/app/javascript/gabsocial/assets/chat_icon.js
+++ b/app/javascript/gabsocial/assets/chat_icon.js
@@ -1,8 +1,6 @@
 const ChatIcon = ({
   className = '',
-  width = '16px',
-  height = '16px',
-  viewBox = '0 0 64 64',
+  size = '16px',
   title = 'Chat',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const ChatIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 64 64'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/circle_icon.js b/app/javascript/gabsocial/assets/circle_icon.js
index a9d27e0c..8f0bd842 100644
--- a/app/javascript/gabsocial/assets/circle_icon.js
+++ b/app/javascript/gabsocial/assets/circle_icon.js
@@ -1,8 +1,6 @@
 const CircleIcon = ({
   className = '',
-  width = '16px',
-  height = '16px',
-  viewBox = '0 0 48 48',
+  size = '16px',
   title = '',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const CircleIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 48 48'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/close_icon.js b/app/javascript/gabsocial/assets/close_icon.js
index 0b731314..a35183d4 100644
--- a/app/javascript/gabsocial/assets/close_icon.js
+++ b/app/javascript/gabsocial/assets/close_icon.js
@@ -1,8 +1,6 @@
 const CloseIcon = ({
   className = '',
-  width = '16px',
-  height = '16px',
-  viewBox = '0 0 24 24',
+  size = '16px',
   title = 'Close',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const CloseIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 24 24'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/code_icon.js b/app/javascript/gabsocial/assets/code_icon.js
index 2ac11ce6..086a8366 100644
--- a/app/javascript/gabsocial/assets/code_icon.js
+++ b/app/javascript/gabsocial/assets/code_icon.js
@@ -1,8 +1,6 @@
 const CodeIcon = ({
   className = '',
-  width = '24px',
-  height = '24px',
-  viewBox = '0 0 48 48',
+  size = '24px',
   title = 'Code',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const CodeIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 48 48'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/comment_icon.js b/app/javascript/gabsocial/assets/comment_icon.js
index 8d8aadd5..7ab8d1ff 100644
--- a/app/javascript/gabsocial/assets/comment_icon.js
+++ b/app/javascript/gabsocial/assets/comment_icon.js
@@ -1,8 +1,6 @@
 const CommentIcon = ({
   className = '',
-  width = '26px',
-  height = '26px',
-  viewBox = '0 0 48 48',
+  size = '26px',
   title = 'Comment',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const CommentIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 48 48'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/copy_icon.js b/app/javascript/gabsocial/assets/copy_icon.js
index 2b8e4e25..fb1947c7 100644
--- a/app/javascript/gabsocial/assets/copy_icon.js
+++ b/app/javascript/gabsocial/assets/copy_icon.js
@@ -1,8 +1,6 @@
 const CopyIcon = ({
   className = '',
-  width = '24px',
-  height = '24px',
-  viewBox = '0 0 48 48',
+  size = '24px',
   title = 'Copy',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const CopyIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 48 48'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/dissenter_icon.js b/app/javascript/gabsocial/assets/dissenter_icon.js
index 1176a4a5..bfa63524 100644
--- a/app/javascript/gabsocial/assets/dissenter_icon.js
+++ b/app/javascript/gabsocial/assets/dissenter_icon.js
@@ -1,8 +1,6 @@
 const DissenterIcon = ({
   className = '',
-  width = '32px',
-  height = '32px',
-  viewBox = '0 0 64 64',
+  size = '32px',
   title = 'Dissenter',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const DissenterIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 64 64'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/donor_icon.js b/app/javascript/gabsocial/assets/donor_icon.js
index de574f3e..4e9eb006 100644
--- a/app/javascript/gabsocial/assets/donor_icon.js
+++ b/app/javascript/gabsocial/assets/donor_icon.js
@@ -1,8 +1,6 @@
 const DonorIcon = ({
   className = '',
-  width = '24px',
-  height = '24px',
-  viewBox = '0 0 24 24',
+  size = '24px',
   title = 'Gab.com Donor',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const DonorIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 24 24'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/ellipsis_icon.js b/app/javascript/gabsocial/assets/ellipsis_icon.js
index 5ffffe7d..c558466e 100644
--- a/app/javascript/gabsocial/assets/ellipsis_icon.js
+++ b/app/javascript/gabsocial/assets/ellipsis_icon.js
@@ -1,8 +1,6 @@
 const EllipsisIcon = ({
   className = '',
-  width = '16px',
-  height = '16px',
-  viewBox = '0 0 24 24',
+  size = '16px',
   title = 'Ellipsis',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const EllipsisIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 24 24'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/email_icon.js b/app/javascript/gabsocial/assets/email_icon.js
index 9860041d..efc4e3d3 100644
--- a/app/javascript/gabsocial/assets/email_icon.js
+++ b/app/javascript/gabsocial/assets/email_icon.js
@@ -1,8 +1,6 @@
 const EmailIcon = ({
   className = '',
-  width = '24px',
-  height = '24px',
-  viewBox = '0 0 48 48',
+  size = '24px',
   title = 'Email',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const EmailIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 48 48'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/error_icon.js b/app/javascript/gabsocial/assets/error_icon.js
index 54bb637b..d0ea7dc6 100644
--- a/app/javascript/gabsocial/assets/error_icon.js
+++ b/app/javascript/gabsocial/assets/error_icon.js
@@ -1,8 +1,6 @@
 const ErrorIcon = ({
   className = '',
-  width = '32px',
-  height = '32px',
-  viewBox = '0 0 64 64',
+  size = '32px',
   title = 'Error',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const ErrorIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 64 64'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/fullscreen_icon.js b/app/javascript/gabsocial/assets/fullscreen_icon.js
index d8253b73..ac0aff6b 100644
--- a/app/javascript/gabsocial/assets/fullscreen_icon.js
+++ b/app/javascript/gabsocial/assets/fullscreen_icon.js
@@ -1,8 +1,6 @@
 const FullscreenIcon = ({
   className = '',
-  width = '24px',
-  height = '24px',
-  viewBox = '0 0 32 32',
+  size = '24px',
   title = 'Fullscreen',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const FullscreenIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 32 32'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/gab_logo.js b/app/javascript/gabsocial/assets/gab_logo.js
index 293e70c7..db26a01a 100644
--- a/app/javascript/gabsocial/assets/gab_logo.js
+++ b/app/javascript/gabsocial/assets/gab_logo.js
@@ -1,8 +1,6 @@
 const GabLogo = ({
   className = _s.fillColorBrand,
-  width = '50px',
-  height = '30px',
-  viewBox = '0 0 50 30'
+  size = '50px',
 }) => (
   <svg
     className={className}
@@ -10,9 +8,9 @@ const GabLogo = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 50 30'
     xmlSpace='preserve'
   >
     <g>
diff --git a/app/javascript/gabsocial/assets/gif_icon.js b/app/javascript/gabsocial/assets/gif_icon.js
index 4e7cd28c..c4c14801 100644
--- a/app/javascript/gabsocial/assets/gif_icon.js
+++ b/app/javascript/gabsocial/assets/gif_icon.js
@@ -1,8 +1,6 @@
 const GifIcon = ({
   className = '',
-  width = '26px',
-  height = '26px',
-  viewBox = '0 0 64 64',
+  size = '26px',
   title = 'Gif',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const GifIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 64 64'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/globe_icon.js b/app/javascript/gabsocial/assets/globe_icon.js
index 5bb4905d..ee5f1d44 100644
--- a/app/javascript/gabsocial/assets/globe_icon.js
+++ b/app/javascript/gabsocial/assets/globe_icon.js
@@ -1,9 +1,7 @@
 // : todo : fill, stroke colors
 const GlobeIcon = ({
   className = '',
-  width = '12px',
-  height = '12px',
-  viewBox = '0 0 28 28',
+  size = '12px',
   title = 'Globe',
 }) => (
   <svg
@@ -12,9 +10,9 @@ const GlobeIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 28 28'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/group_add_icon.js b/app/javascript/gabsocial/assets/group_add_icon.js
index 3614f360..8aafc69a 100644
--- a/app/javascript/gabsocial/assets/group_add_icon.js
+++ b/app/javascript/gabsocial/assets/group_add_icon.js
@@ -1,8 +1,6 @@
 const GroupAddIcon = ({
   className = '',
-  width = '24px',
-  height = '24px',
-  viewBox = '0 0 64 64',
+  size = '24px',
   title = 'Group Add',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const GroupAddIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 64 64'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/group_icon.js b/app/javascript/gabsocial/assets/group_icon.js
index a3800351..3d8c20bd 100644
--- a/app/javascript/gabsocial/assets/group_icon.js
+++ b/app/javascript/gabsocial/assets/group_icon.js
@@ -1,8 +1,6 @@
 const GroupIcon = ({
-  className = 'header-nav__item__icon',
-  width = '26px',
-  height = '26px',
-  viewBox = '0 0 48 48',
+  className = '',
+  size = '26px',
   title = 'Group',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const GroupIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 48 48'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/happy_icon.js b/app/javascript/gabsocial/assets/happy_icon.js
index 5d42fa8b..db53c7ae 100644
--- a/app/javascript/gabsocial/assets/happy_icon.js
+++ b/app/javascript/gabsocial/assets/happy_icon.js
@@ -1,8 +1,6 @@
 const HappyIcon = ({
   className = '',
-  width = '16px',
-  height = '16px',
-  viewBox = '0 0 64 64',
+  size = '16px',
   title = '',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const HappyIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 64 64'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/hidden_icon.js b/app/javascript/gabsocial/assets/hidden_icon.js
index 5e60d5da..f9a0a5ce 100644
--- a/app/javascript/gabsocial/assets/hidden_icon.js
+++ b/app/javascript/gabsocial/assets/hidden_icon.js
@@ -1,8 +1,6 @@
 const HiddenIcon = ({
   className = '',
-  width = '16px',
-  height = '16px',
-  viewBox = '0 0 48 48',
+  size = '16px',
   title = 'Hidden',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const HiddenIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 48 48'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/home_icon.js b/app/javascript/gabsocial/assets/home_icon.js
index 773e2b48..46b0e9c6 100644
--- a/app/javascript/gabsocial/assets/home_icon.js
+++ b/app/javascript/gabsocial/assets/home_icon.js
@@ -1,8 +1,6 @@
 const HomeIcon = ({
   className = '',
-  width = '26px',
-  height = '26px',
-  viewBox = '0 0 48 48',
+  size = '26px',
   title = 'Home',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const HomeIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 48 48'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/investor_icon.js b/app/javascript/gabsocial/assets/investor_icon.js
index ed4da684..3f21174a 100644
--- a/app/javascript/gabsocial/assets/investor_icon.js
+++ b/app/javascript/gabsocial/assets/investor_icon.js
@@ -1,8 +1,6 @@
 const InvestorIcon = ({
   className = '',
-  width = '24px',
-  height = '24px',
-  viewBox = '0 0 24 24',
+  size = '24px',
   title = 'Gab.com Investor',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const InvestorIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 24 24'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/italic_icon.js b/app/javascript/gabsocial/assets/italic_icon.js
index 0f6c4e9e..c21c82b4 100644
--- a/app/javascript/gabsocial/assets/italic_icon.js
+++ b/app/javascript/gabsocial/assets/italic_icon.js
@@ -1,8 +1,6 @@
 const ItalicIcon = ({
   className = '',
-  width = '16px',
-  height = '16px',
-  viewBox = '0 0 34 32',
+  size = '16px',
   title = 'Italic',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const ItalicIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 34 32'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/like_icon.js b/app/javascript/gabsocial/assets/like_icon.js
index 9fbb5c6d..bb773b94 100644
--- a/app/javascript/gabsocial/assets/like_icon.js
+++ b/app/javascript/gabsocial/assets/like_icon.js
@@ -1,8 +1,6 @@
 const LikeIcon = ({
   className = '',
-  width = '26px',
-  height = '26px',
-  viewBox = '0 0 48 48',
+  size = '26px',
   title = 'Like',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const LikeIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 48 48'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/liked_icon.js b/app/javascript/gabsocial/assets/liked_icon.js
index 8dbe6aea..bdef6471 100644
--- a/app/javascript/gabsocial/assets/liked_icon.js
+++ b/app/javascript/gabsocial/assets/liked_icon.js
@@ -1,8 +1,6 @@
 const LikedIcon = ({
   className = '',
-  width = '26px',
-  height = '26px',
-  viewBox = '0 0 48 48',
+  size = '26px',
   title = 'Liked',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const LikedIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 48 48'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/link_icon.js b/app/javascript/gabsocial/assets/link_icon.js
index 6fb2230f..14facba7 100644
--- a/app/javascript/gabsocial/assets/link_icon.js
+++ b/app/javascript/gabsocial/assets/link_icon.js
@@ -1,8 +1,6 @@
 const LinkIcon = ({
   className = '',
-  width = '16px',
-  height = '16px',
-  viewBox = '0 0 64 64',
+  size = '16px',
   title = 'Link',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const LinkIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 64 64'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/list_add_icon.js b/app/javascript/gabsocial/assets/list_add_icon.js
index fb46321b..14094958 100644
--- a/app/javascript/gabsocial/assets/list_add_icon.js
+++ b/app/javascript/gabsocial/assets/list_add_icon.js
@@ -1,8 +1,6 @@
 const ListAddIcon = ({
   className = '',
-  width = '24px',
-  height = '24px',
-  viewBox = '0 0 24 24',
+  size = '24px',
   title = 'List Add',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const ListAddIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 24 24'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/list_icon.js b/app/javascript/gabsocial/assets/list_icon.js
index d4d81361..d77a4926 100644
--- a/app/javascript/gabsocial/assets/list_icon.js
+++ b/app/javascript/gabsocial/assets/list_icon.js
@@ -1,8 +1,6 @@
 const ListIcon = ({
   className = '',
-  width = '26px',
-  height = '26px',
-  viewBox = '0 0 64 64',
+  size = '26px',
   title = 'List',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const ListIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 64 64'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/loading_icon.js b/app/javascript/gabsocial/assets/loading_icon.js
index 3559d308..4f0b9eda 100644
--- a/app/javascript/gabsocial/assets/loading_icon.js
+++ b/app/javascript/gabsocial/assets/loading_icon.js
@@ -1,16 +1,14 @@
 const LoadingIcon = ({
   className = '',
-  width = '24px',
-  height = '24px',
-  viewBox = '0 0 100 100',
+  size = '24px',
 }) => (
   <svg
     className={className}
     xmlns='http://www.w3.org/2000/svg'
     style={{shapeRendering: 'auto'}}
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 100 100'
     preserveAspectRatio='xMidYMid'
   >
     <g transform='translate(82,50)'>
diff --git a/app/javascript/gabsocial/assets/lock_filled_icon.js b/app/javascript/gabsocial/assets/lock_filled_icon.js
index ff28e505..1f865071 100644
--- a/app/javascript/gabsocial/assets/lock_filled_icon.js
+++ b/app/javascript/gabsocial/assets/lock_filled_icon.js
@@ -1,8 +1,6 @@
 const LockFilledIcon = ({
   className = '',
-  width = '24px',
-  height = '24px',
-  viewBox = '0 0 48 48',
+  size = '24px',
   title = 'Lock',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const LockFilledIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 48 48'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/lock_icon.js b/app/javascript/gabsocial/assets/lock_icon.js
index 5f1504c1..9fc20ef1 100644
--- a/app/javascript/gabsocial/assets/lock_icon.js
+++ b/app/javascript/gabsocial/assets/lock_icon.js
@@ -1,8 +1,6 @@
 const LockIcon = ({
   className = '',
-  width = '24px',
-  height = '24px',
-  viewBox = '0 0 48 48',
+  size = '24px',
   title = 'Lock',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const LockIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 48 48'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/media_icon.js b/app/javascript/gabsocial/assets/media_icon.js
index 6512e152..90a4be89 100644
--- a/app/javascript/gabsocial/assets/media_icon.js
+++ b/app/javascript/gabsocial/assets/media_icon.js
@@ -1,8 +1,6 @@
 const MediaIcon = ({
   className = '',
-  width = '16px',
-  height = '16px',
-  viewBox = '0 0 64 64',
+  size = '16px',
   title = 'Media',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const MediaIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 64 64'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/minimize_fullscreen_icon.js b/app/javascript/gabsocial/assets/minimize_fullscreen_icon.js
index 42af9d13..a76a3803 100644
--- a/app/javascript/gabsocial/assets/minimize_fullscreen_icon.js
+++ b/app/javascript/gabsocial/assets/minimize_fullscreen_icon.js
@@ -1,8 +1,6 @@
 const MinimizeFullscreenIcon = ({
   className = '',
-  width = '24px',
-  height = '24px',
-  viewBox = '0 0 32 32',
+  size = '24px',
   title = 'Minimize Fullscreen',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const MinimizeFullscreenIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 32 32'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/missing_icon.js b/app/javascript/gabsocial/assets/missing_icon.js
index dbf596c9..5381b81f 100644
--- a/app/javascript/gabsocial/assets/missing_icon.js
+++ b/app/javascript/gabsocial/assets/missing_icon.js
@@ -1,8 +1,6 @@
 const MissingIcon = ({
   className = '',
-  width = '32px',
-  height = '32px',
-  viewBox = '0 0 84 84',
+  size = '32px',
   title = 'Missing',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const MissingIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 84 84'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/more_icon.js b/app/javascript/gabsocial/assets/more_icon.js
index 6f9aaac1..1076558b 100644
--- a/app/javascript/gabsocial/assets/more_icon.js
+++ b/app/javascript/gabsocial/assets/more_icon.js
@@ -1,8 +1,6 @@
 const MoreIcon = ({
   className = '',
-  width = '16px',
-  height = '16px',
-  viewBox = '0 0 64 64',
+  size = '16px',
   title = 'More',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const MoreIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 64 64'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/notifications_icon.js b/app/javascript/gabsocial/assets/notifications_icon.js
index 584e74e7..4cd49d1a 100644
--- a/app/javascript/gabsocial/assets/notifications_icon.js
+++ b/app/javascript/gabsocial/assets/notifications_icon.js
@@ -1,8 +1,6 @@
 const NotificationsIcon = ({
   className = '',
-  width = '26px',
-  height = '26px',
-  viewBox = '0 0 48 48',
+  size = '26px',
   title = 'Notifications',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const NotificationsIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 48 48'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/ol_list_icon.js b/app/javascript/gabsocial/assets/ol_list_icon.js
index 073eb1c4..0c4fe7d3 100644
--- a/app/javascript/gabsocial/assets/ol_list_icon.js
+++ b/app/javascript/gabsocial/assets/ol_list_icon.js
@@ -1,8 +1,6 @@
 const OLListIcon = ({
   className = '',
-  width = '16px',
-  height = '16px',
-  viewBox = '0 0 34 32',
+  size = '16px',
   title = 'Ordered List',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const OLListIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 34 32'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/pause_icon.js b/app/javascript/gabsocial/assets/pause_icon.js
index 0a39ddcb..45d8ea05 100644
--- a/app/javascript/gabsocial/assets/pause_icon.js
+++ b/app/javascript/gabsocial/assets/pause_icon.js
@@ -1,8 +1,6 @@
 const PauseIcon = ({
   className = '',
-  width = '16px',
-  height = '16px',
-  viewBox = '0 0 64 64',
+  size = '16px',
   title = 'Pause',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const PauseIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 64 64'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/pencil_icon.js b/app/javascript/gabsocial/assets/pencil_icon.js
index b63d2b3d..4e2610f5 100644
--- a/app/javascript/gabsocial/assets/pencil_icon.js
+++ b/app/javascript/gabsocial/assets/pencil_icon.js
@@ -1,8 +1,6 @@
 const PencilIcon = ({
   className = '',
-  width = '16px',
-  height = '16px',
-  viewBox = '0 0 64 64',
+  size = '16px',
   title = 'Pencil',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const PencilIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 64 64'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/pin_icon.js b/app/javascript/gabsocial/assets/pin_icon.js
index 7a142e49..523611ad 100644
--- a/app/javascript/gabsocial/assets/pin_icon.js
+++ b/app/javascript/gabsocial/assets/pin_icon.js
@@ -1,8 +1,6 @@
 const PinIcon = ({
   className = '',
-  width = '16px',
-  height = '16px',
-  viewBox = '0 0 32 32',
+  size = '16px',
   title = 'Pin',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const PinIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 32 32'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/play_icon.js b/app/javascript/gabsocial/assets/play_icon.js
index d4b7dc93..53ecfab4 100644
--- a/app/javascript/gabsocial/assets/play_icon.js
+++ b/app/javascript/gabsocial/assets/play_icon.js
@@ -1,8 +1,6 @@
 const PlayIcon = ({
   className = '',
-  width = '16px',
-  height = '16px',
-  viewBox = '0 0 64 64',
+  size = '16px',
   title = 'Play',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const PlayIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 64 64'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/poll_icon.js b/app/javascript/gabsocial/assets/poll_icon.js
index e803c6ed..5caa8135 100644
--- a/app/javascript/gabsocial/assets/poll_icon.js
+++ b/app/javascript/gabsocial/assets/poll_icon.js
@@ -1,8 +1,6 @@
 const PollIcon = ({
   className = '',
-  width = '16px',
-  height = '16px',
-  viewBox = '0 0 48 48',
+  size = '16px',
   title = 'Poll',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const PollIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 48 48'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/pro_icon.js b/app/javascript/gabsocial/assets/pro_icon.js
index 326900e6..d3d9cd73 100644
--- a/app/javascript/gabsocial/assets/pro_icon.js
+++ b/app/javascript/gabsocial/assets/pro_icon.js
@@ -1,8 +1,6 @@
 const ProIcon = ({
   className = '',
-  width = '24px',
-  height = '24px',
-  viewBox = '0 0 24 24',
+  size = '24px',
   title = 'GabPRO Account',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const ProIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 24 24'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/repost_icon.js b/app/javascript/gabsocial/assets/repost_icon.js
index aa2b05ac..a05bf202 100644
--- a/app/javascript/gabsocial/assets/repost_icon.js
+++ b/app/javascript/gabsocial/assets/repost_icon.js
@@ -1,8 +1,6 @@
 const CloseIcon = ({
   className = '',
-  width = '16px',
-  height = '16px',
-  viewBox = '0 0 48 48',
+  size = '16px',
   title = 'Close',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const CloseIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 48 48'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/rich_text_icon.js b/app/javascript/gabsocial/assets/rich_text_icon.js
index c770a194..98fb24fd 100644
--- a/app/javascript/gabsocial/assets/rich_text_icon.js
+++ b/app/javascript/gabsocial/assets/rich_text_icon.js
@@ -1,8 +1,6 @@
 const RichTextIcon = ({
   className = '',
-  width = '26px',
-  height = '26px',
-  viewBox = '0 0 64 64',
+  size = '26px',
   title = 'Rich Text',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const RichTextIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 64 64'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/search_alt_icon.js b/app/javascript/gabsocial/assets/search_alt_icon.js
index 9630e305..bb9ffd50 100644
--- a/app/javascript/gabsocial/assets/search_alt_icon.js
+++ b/app/javascript/gabsocial/assets/search_alt_icon.js
@@ -1,7 +1,6 @@
 const SearchAltIcon = ({
   className = '',
-  width = '16px',
-  height = '16px',
+  size = '16px',
   viewBox = '0 0 64 64',
   title = 'Search',
 }) => (
@@ -11,8 +10,8 @@ const SearchAltIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
+    width={size}
+    height={size}
     viewBox={viewBox}
     xmlSpace='preserve'
     aria-label={title}
diff --git a/app/javascript/gabsocial/assets/search_icon.js b/app/javascript/gabsocial/assets/search_icon.js
index 9d4f2eab..20fecece 100644
--- a/app/javascript/gabsocial/assets/search_icon.js
+++ b/app/javascript/gabsocial/assets/search_icon.js
@@ -1,8 +1,6 @@
 const SearchIcon = ({
   className = '',
-  width = '16px',
-  height = '16px',
-  viewBox = '0 0 48 48',
+  size = '16px',
   title = 'Search',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const SearchIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 48 48'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/select_icon.js b/app/javascript/gabsocial/assets/select_icon.js
new file mode 100644
index 00000000..b938bde7
--- /dev/null
+++ b/app/javascript/gabsocial/assets/select_icon.js
@@ -0,0 +1,25 @@
+const SelectIcon = ({
+  className = '',
+  size = '16px',
+  title = 'Select',
+}) => (
+  <svg
+    className={className}
+    version='1.1'
+    xmlns='http://www.w3.org/2000/svg'
+    x='0px'
+    y='0px'
+    width={size}
+    height={size}
+    viewBox='0 0 32 32'
+    xmlSpace='preserve'
+    aria-label={title}
+  >
+    <g>
+      <path d="M 8.535156 14.222656 L 23.464844 14.222656 C 24.070312 14.222656 24.625 13.890625 24.90625 13.355469 C 25.1875 12.820312 25.148438 12.175781 24.808594 11.675781 L 17.25 0.632812 C 16.980469 0.238281 16.53125 0.00390625 16.054688 0 C 15.574219 0 15.125 0.234375 14.851562 0.625 L 7.195312 11.667969 C 6.851562 12.167969 6.8125 12.816406 7.09375 13.351562 C 7.375 13.886719 7.929688 14.222656 8.535156 14.222656 Z M 8.535156 14.222656" />
+      <path d="M 23.464844 17.777344 L 8.535156 17.777344 C 7.929688 17.777344 7.375 18.113281 7.09375 18.648438 C 6.8125 19.183594 6.851562 19.832031 7.195312 20.332031 L 14.851562 31.375 C 15.125 31.765625 15.574219 32 16.054688 32 C 16.53125 31.996094 16.980469 31.761719 17.25 31.367188 L 24.808594 20.324219 C 25.148438 19.824219 25.1875 19.179688 24.90625 18.644531 C 24.625 18.109375 24.070312 17.777344 23.464844 17.777344 Z M 23.464844 17.777344" />
+    </g>
+  </svg>
+)
+
+export default SelectIcon
\ No newline at end of file
diff --git a/app/javascript/gabsocial/assets/share_icon.js b/app/javascript/gabsocial/assets/share_icon.js
index 311f6076..56bacef2 100644
--- a/app/javascript/gabsocial/assets/share_icon.js
+++ b/app/javascript/gabsocial/assets/share_icon.js
@@ -1,8 +1,6 @@
 const ShareIcon = ({
   className = '',
-  width = '16px',
-  height = '16px',
-  viewBox = '0 0 24 24',
+  size = '16px',
   title = 'Share',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const ShareIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 24 24'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/shop_icon.js b/app/javascript/gabsocial/assets/shop_icon.js
index dcddcc44..a448a1da 100644
--- a/app/javascript/gabsocial/assets/shop_icon.js
+++ b/app/javascript/gabsocial/assets/shop_icon.js
@@ -1,8 +1,6 @@
 const ShopIcon = ({
   className = '',
-  width = '26px',
-  height = '26px',
-  viewBox = '0 0 64 64',
+  size = '26px',
   title = 'Shop',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const ShopIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 64 64'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/strikethrough_icon.js b/app/javascript/gabsocial/assets/strikethrough_icon.js
index c02dbdb8..8bbfe637 100644
--- a/app/javascript/gabsocial/assets/strikethrough_icon.js
+++ b/app/javascript/gabsocial/assets/strikethrough_icon.js
@@ -1,8 +1,6 @@
 const StrikethroughIcon = ({
   className = '',
-  width = '16px',
-  height = '16px',
-  viewBox = '0 0 34 32',
+  size = '16px',
   title = 'Strikethrough',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const StrikethroughIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 34 32'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/subtract_icon.js b/app/javascript/gabsocial/assets/subtract_icon.js
index 5716665b..4ce2ec72 100644
--- a/app/javascript/gabsocial/assets/subtract_icon.js
+++ b/app/javascript/gabsocial/assets/subtract_icon.js
@@ -1,8 +1,6 @@
 const SubtractIcon = ({
   className = '',
-  width = '16px',
-  height = '16px',
-  viewBox = '0 0 64 64',
+  size = '16px',
   title = 'Subtract',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const SubtractIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 64 64'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/text_size_icon.js b/app/javascript/gabsocial/assets/text_size_icon.js
index 934975e0..38cfa19b 100644
--- a/app/javascript/gabsocial/assets/text_size_icon.js
+++ b/app/javascript/gabsocial/assets/text_size_icon.js
@@ -1,8 +1,6 @@
 const TextSizeIcon = ({
   className = '',
-  width = '16px',
-  height = '16px',
-  viewBox = '0 0 34 32',
+  size = '16px',
   title = 'Text Size',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const TextSizeIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 34 32'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/trends_icon.js b/app/javascript/gabsocial/assets/trends_icon.js
index 1e050ecf..94c7c9fc 100644
--- a/app/javascript/gabsocial/assets/trends_icon.js
+++ b/app/javascript/gabsocial/assets/trends_icon.js
@@ -1,8 +1,6 @@
 const TrendsIcon = ({
   className = '',
-  width = '32px',
-  height = '32px',
-  viewBox = '0 0 80 80',
+  size = '32px',
   title = 'Trends',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const TrendsIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 80 80'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/ul_list_icon.js b/app/javascript/gabsocial/assets/ul_list_icon.js
index 53c9fb18..15839965 100644
--- a/app/javascript/gabsocial/assets/ul_list_icon.js
+++ b/app/javascript/gabsocial/assets/ul_list_icon.js
@@ -1,8 +1,6 @@
 const ULListIcon = ({
   className = '',
-  width = '16px',
-  height = '16px',
-  viewBox = '0 0 34 32',
+  size = '16px',
   title = 'Unordered List',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const ULListIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 34 32'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/underline_icon.js b/app/javascript/gabsocial/assets/underline_icon.js
index 8e8a29f2..503fceed 100644
--- a/app/javascript/gabsocial/assets/underline_icon.js
+++ b/app/javascript/gabsocial/assets/underline_icon.js
@@ -1,8 +1,6 @@
 const UnderlineIcon = ({
   className = '',
-  width = '16px',
-  height = '16px',
-  viewBox = '0 0 34 32',
+  size = '16px',
   title = 'Underline',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const UnderlineIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 34 32'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/unlock_filled_icon.js b/app/javascript/gabsocial/assets/unlock_filled_icon.js
index 5cc39ae9..45a7c982 100644
--- a/app/javascript/gabsocial/assets/unlock_filled_icon.js
+++ b/app/javascript/gabsocial/assets/unlock_filled_icon.js
@@ -1,8 +1,6 @@
 const UnlockFilledIcon = ({
   className = '',
-  width = '24px',
-  height = '24px',
-  viewBox = '0 0 48 48',
+  size = '24px',
   title = 'Unlock',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const UnlockFilledIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 48 48'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/verified_icon.js b/app/javascript/gabsocial/assets/verified_icon.js
index 6a55569d..a107ebd4 100644
--- a/app/javascript/gabsocial/assets/verified_icon.js
+++ b/app/javascript/gabsocial/assets/verified_icon.js
@@ -1,8 +1,6 @@
 const VerifiedIcon = ({
   className = '',
-  width = '24px',
-  height = '24px',
-  viewBox = '0 0 24 24',
+  size = '24px',
   title = 'Verified Account',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const VerifiedIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 24 24'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/warning_icon.js b/app/javascript/gabsocial/assets/warning_icon.js
index 2293ae48..29b9da8d 100644
--- a/app/javascript/gabsocial/assets/warning_icon.js
+++ b/app/javascript/gabsocial/assets/warning_icon.js
@@ -1,8 +1,6 @@
 const WarningIcon = ({
   className = '',
-  width = '16px',
-  height = '16px',
-  viewBox = '0 0 48 48',
+  size = '16px',
   title = 'Warning',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const WarningIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 48 48'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/assets/website_icon.js b/app/javascript/gabsocial/assets/website_icon.js
index 6547db52..dd8286be 100644
--- a/app/javascript/gabsocial/assets/website_icon.js
+++ b/app/javascript/gabsocial/assets/website_icon.js
@@ -1,8 +1,6 @@
 const WebsiteIcon = ({
   className = '',
-  width = '16px',
-  height = '16px',
-  viewBox = '0 0 48 48',
+  size = '16px',
   title = 'Website',
 }) => (
   <svg
@@ -11,9 +9,9 @@ const WebsiteIcon = ({
     xmlns='http://www.w3.org/2000/svg'
     x='0px'
     y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
+    width={size}
+    height={size}
+    viewBox='0 0 48 48'
     xmlSpace='preserve'
     aria-label={title}
   >
diff --git a/app/javascript/gabsocial/components/account.js b/app/javascript/gabsocial/components/account.js
index a6df881e..e73deaff 100644
--- a/app/javascript/gabsocial/components/account.js
+++ b/app/javascript/gabsocial/components/account.js
@@ -16,33 +16,16 @@ import { openModal } from '../actions/modal'
 import { initMuteModal } from '../actions/mutes'
 import { unfollowModal } from '../initial_state'
 import { makeGetAccount } from '../selectors'
+import AccountActionButton from './account_action_button'
 import Avatar from './avatar'
 import DisplayName from './display_name'
 import Button from './button'
-import Text from './text'
 
-const messages = defineMessages({
-  follow: { id: 'follow', defaultMessage: 'Follow' },
-  unfollow: { id: 'unfollow', defaultMessage: 'Unfollow' },
-  requested: { id: 'requested', defaultMessage: 'Requested' },
-  unblock: { id: 'unblock', defaultMessage: 'Unblock' },
-  unmute: { id: 'unmute', defaultMessage: 'Unmute' },
-  mute_notifications: { id: 'account.mute_notifications', defaultMessage: 'Mute notifications from @{name}' },
-  unmute_notifications: { id: 'account.unmute_notifications', defaultMessage: 'Unmute notifications from @{name}' },
-  unfollowConfirm: { id: 'confirmations.unfollow.confirm', defaultMessage: 'Unfollow' },
+const makeMapStateToProps = (state, props) => ({
+  account: makeGetAccount()(state, props.id),
 })
 
-const makeMapStateToProps = () => {
-  const getAccount = makeGetAccount()
-
-  const mapStateToProps = (state, props) => ({
-    account: getAccount(state, props.id),
-  })
-
-  return mapStateToProps
-}
-
-const mapDispatchToProps = (dispatch, { intl }) => ({
+const mapDispatchToProps = (dispatch) => ({
 
   onFollow (account) {
     if (account.getIn(['relationship', 'following']) || account.getIn(['relationship', 'requested'])) {
@@ -102,25 +85,13 @@ class Account extends ImmutablePureComponent {
     dismissAction: PropTypes.func,
   }
 
-  handleFollow = () => {
-    this.props.onFollow(this.props.account)
-  }
-
-  handleBlock = () => {
-    this.props.onBlock(this.props.account)
-  }
-
-  handleMute = () => {
-    this.props.onMute(this.props.account)
-  }
-
-  handleMuteNotifications = () => {
-    this.props.onMuteNotifications(this.props.account, true)
-  }
-
-  handleUnmuteNotifications = () => {
-    this.props.onMuteNotifications(this.props.account, false)
-  }
+  updateOnProps = [
+    'account',
+    'isHidden',
+    'compact',
+    'expanded',
+    'showDismiss',
+  ]
 
   handleAction = () => {
     this.props.onActionClick(this.props.account)
@@ -155,64 +126,26 @@ class Account extends ImmutablePureComponent {
       )
     }
 
-    // : todo : cleanup
-    let buttonOptions
-    let buttonText
-
-    if (onActionClick && actionIcon) {
-      buttonText = actionTitle
-      buttonOptions = {
-        onClick: this.handleAction,
-        outline: true,
-        color: 'brand',
-        backgroundColor: 'none',
-      }
-    } else if (account.get('id') !== me && account.get('relationship', null) !== null) {
-      const following = account.getIn(['relationship', 'following'])
-      const requested = account.getIn(['relationship', 'requested'])
-      const blocking = account.getIn(['relationship', 'blocking'])
-
-      // : todo :
-      // unmute
-
-      if (requested || blocking) {
-        buttonText = intl.formatMessage(requested ? messages.requested : messages.unblock)
-        buttonOptions = {
-          narrow: true,
-          onClick: requested ? this.handleUnrequest : this.handleBlock,
-          color: 'primary',
-          backgroundColor: 'tertiary',
-          className: _s.mt5,
-        }
-      } else if (!account.get('moved') || following) {
-        buttonOptions = {
-          narrow: true,
-          outline: !following,
-          color: !following ? 'brand' : 'white',
-          backgroundColor: !following ? 'none' : 'brand',
-          className: _s.mt5,
-          onClick: this.handleFollow,
-        }
-        buttonText = intl.formatMessage(following ? messages.unfollow : messages.follow)
-      }
-    }
-
-    const button = !buttonOptions ? null : (
-      <Button {...buttonOptions}>
-        <Text color='inherit'>{buttonText}</Text>
+    const actionButton = (onActionClick && actionIcon) ? (
+      <Button
+        onClick={this.handleAction}
+        isOutline={true}
+        color='brand'
+        backgroundColor='none'
+      >
+        {actionTitle}
       </Button>
-    )
+    ) :  <AccountActionButton account={account} isSmall />
 
     const avatarSize = compact ? 42 : 52
-    const dismissBtn = (
+    const dismissBtn = !showDismiss ? null : (
       <Button
-        narrow
+        isNarrow
         backgroundColor='none'
         className={_s.px5}
         onClick={dismissAction}
         icon='close'
-        iconWidth='8px'
-        iconHeight='8px'
+        iconSize='8px'
         iconClassName={_s.fillColorSecondary}
       />
     )
@@ -235,12 +168,12 @@ class Account extends ImmutablePureComponent {
             className={[_s.default, _s.alignItemsStart, _s.px10, _s.flexGrow1].join(' ')}
           >
             <DisplayName account={account} multiline={compact} />
-            {!compact && button}
+            {!compact && actionButton}
           </NavLink>
 
           <div className={[_s.default].join(' ')}>
-            {showDismiss && dismissBtn}
-            {compact && button}
+            {dismissBtn}
+            {compact && actionButton}
           </div>
 
         </div>
diff --git a/app/javascript/gabsocial/components/account_action_button.js b/app/javascript/gabsocial/components/account_action_button.js
index 06b1eaec..908764e7 100644
--- a/app/javascript/gabsocial/components/account_action_button.js
+++ b/app/javascript/gabsocial/components/account_action_button.js
@@ -1,54 +1,160 @@
-wimport classNames from 'classnames/bind'
-
-const cx = classNames.bind(_s)
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import { injectIntl, defineMessages } from 'react-intl'
+import {
+  followAccount,
+  unfollowAccount,
+  unblockAccount,
+} from '../actions/accounts'
+import { openModal } from '../actions/modal'
+import { me, unfollowModal } from '../initial_state'
+import Button from './button'
+import Text from './text'
 
 // : todo :
 
-export default class AccountActionButton extends PureComponent {
+const messages = defineMessages({
+  follow: { id: 'follow', defaultMessage: 'Follow' },
+  following: { id: 'following', defaultMessage: 'Following' },
+  unfollow: { id: 'unfollow', defaultMessage: 'Unfollow' },
+  requested: { id: 'requested', defaultMessage: 'Requested' },
+  unblock: { id: 'unblock', defaultMessage: 'Unblock' },
+  blocked: { id: 'account.blocked', defaultMessage: 'Blocked' },
+  followers: { id: 'account.followers', defaultMessage: 'Followers' },
+  follows: { id: 'account.follows', defaultMessage: 'Follows' },
+})
+
+const mapDispatchToProps = (dispatch) => ({
+
+  onFollow(account) {
+    if (account.getIn(['relationship', 'following']) || account.getIn(['relationship', 'requested'])) {
+      if (unfollowModal) {
+        dispatch(openModal('UNFOLLOW', {
+          accountId: account.get('id'),
+        }));
+      } else {
+        dispatch(unfollowAccount(account.get('id')));
+      }
+    } else {
+      dispatch(followAccount(account.get('id')));
+    }
+  },
+
+  onBlock(account) {
+    if (account.getIn(['relationship', 'blocking'])) {
+      dispatch(unblockAccount(account.get('id')));
+    } else {
+      dispatch(openModal('BLOCK_ACCOUNT', {
+        accountId: account.get('id'),
+      }));
+    }
+  },
+
+});
+
+export default
+@injectIntl
+@connect(null, mapDispatchToProps)
+class AccountActionButton extends ImmutablePureComponent {
+
   static propTypes = {
-    children: PropTypes.any,
-    size: PropTypes.oneOf(Object.keys(SIZES)),
-    center: PropTypes.bool,
+    account: ImmutablePropTypes.map,
+    intl: PropTypes.object.isRequired,
+    isSmall: PropTypes.bool,
+    onBlock: PropTypes.func.isRequired,
+    onFollow: PropTypes.func.isRequired,
   }
 
-  static defaultProps = {
-    size: SIZES.h1,
+  updateOnProps = [
+    'account',
+  ]
+
+  handleFollow = () => {
+    this.props.onFollow(this.props.account)
+  }
+
+  handleBlock = () => {
+    this.props.onBlock(this.props.account)
   }
 
   render() {
-    const { children, size, center } = this.props
+    const {
+      account,
+      intl,
+      isSmall,
+    } = this.props
 
-    const classes = cx({
-      default: 1,
-      text: 1,
-      textAlignCenter: center,
+    if (!account) return null
 
-      colorPrimary: [SIZES.h1, SIZES.h3].indexOf(size) > -1,
-      colorSecondary: [SIZES.h2, SIZES.h4, SIZES.h5].indexOf(size) > -1,
+    // Wait until the relationship is loaded
+    if (!account.get('relationship')) return null
 
-      fontSize24PX: size === SIZES.h1,
-      fontSize19PX: size === SIZES.h2,
-      fontSize16PX: size === SIZES.h3,
-      fontSize13PX: size === SIZES.h4,
-      fontSize12PX: size === SIZES.h5,
+    // Don't show if is me
+    if (account.get('id') === me) return null
 
-      mt5: [SIZES.h2, SIZES.h4].indexOf(size) > -1,
+    const isBlockedBy = account.getIn(['relationship', 'blocked_by'])
 
-      lineHeight2: size === SIZES.h5,
-      py2: size === SIZES.h5,
+    // Don't show
+    if (isBlockedBy) return null
 
-      // fontWeightNormal: weight === WEIGHTS.normal,
-      fontWeightMedium: [SIZES.h1, SIZES.h5].indexOf(size) > -1,
-      fontWeightBold: [SIZES.h3, SIZES.h4].indexOf(size) > -1,
-    })
+    let buttonText = ''
+    let buttonOptions = {}
 
-    return React.createElement(
-      size,
-      {
-        className: classes,
-        role: 'heading',
-      },
-      children,
+    const isRequested = account.getIn(['relationship', 'requested'])
+    const isBlocking = account.getIn(['relationship', 'blocking'])
+    const isFollowing = account.getIn(['relationship', 'following'])
+
+    if (isRequested) {
+      buttonText = intl.formatMessage(messages.requested)
+      buttonOptions = {
+        onClick: this.handleFollow,
+        color: 'primary',
+        backgroundColor: 'tertiary',
+      }
+    } else if (isBlocking) {
+      buttonText = intl.formatMessage(messages.blocked)
+      buttonOptions = {
+        onClick: this.handleBlock,
+        color: 'white',
+        backgroundColor: 'danger',
+      }
+    } else if (isFollowing) {
+      buttonText = intl.formatMessage(messages.following)
+      buttonOptions = {
+        onClick: this.handleFollow,
+        color: 'white',
+        backgroundColor: 'brand',
+      }
+    } else {
+      buttonText = intl.formatMessage(messages.follow)
+      buttonOptions = {
+        onClick: this.handleFollow,
+        color: 'brand',
+        backgroundColor: 'none',
+        isOutline: true,
+      }
+    }
+
+    const textClassName = isSmall ? null : _s.px10
+    const textSize = isSmall ? 'normal' : 'medium'
+    const textWeight = isSmall ? 'normal' : 'bold'
+
+    return (
+      <Button
+        {...buttonOptions}
+        isNarrow
+        className={[_s.justifyContentCenter, _s.alignItemsCenter].join(' ')}
+      >
+        <Text
+          color='inherit'
+          weight={textWeight}
+          size={textSize}
+          className={textClassName}
+        >
+          {buttonText}
+        </Text>
+      </Button>
     )
   }
+
 }
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/avatar.js b/app/javascript/gabsocial/components/avatar.js
index 269c4925..b8edb9dd 100644
--- a/app/javascript/gabsocial/components/avatar.js
+++ b/app/javascript/gabsocial/components/avatar.js
@@ -1,20 +1,21 @@
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
-import { Map as ImmutableMap } from 'immutable'
 import { autoPlayGif } from '../initial_state'
 import Image from './image'
 
-export default
-class Avatar extends ImmutablePureComponent {
+/**
+ * Renders an avatar component
+ * @param {map} [props.account] - the account for image
+ * @param {number} [props.size=40] - the size of the avatar
+ */
+export default class Avatar extends ImmutablePureComponent {
 
   static propTypes = {
     account: ImmutablePropTypes.map,
-    size: PropTypes.number.isRequired,
-    animate: PropTypes.bool,
+    size: PropTypes.number,
   }
 
   static defaultProps = {
-    animate: autoPlayGif,
     size: 40,
   }
 
@@ -41,17 +42,17 @@ class Avatar extends ImmutablePureComponent {
   }
 
   render() {
-    const { account, size, animate } = this.props
+    const { account, size } = this.props
     const { hovering, sameImg } = this.state
 
-    const shouldAnimate = animate || !sameImg
+    const shouldAnimate = autoPlayGif || !sameImg
 
     const options = {
       alt: !account ? 'Avatar' : account.get('display_name'),
       className: [_s.default, _s.circle, _s.overflowHidden].join(' '),
       onMouseEnter: shouldAnimate ? this.handleMouseEnter : undefined,
       onMouseLeave: shouldAnimate ? this.handleMouseLeave : undefined,
-      src: !account ? undefined : account.get((hovering || animate) ? 'avatar' : 'avatar_static'),
+      src: !account ? undefined : account.get((hovering || autoPlayGif) ? 'avatar' : 'avatar_static'),
       alt: !account ? undefined : account.get('display_name'),
       style: {
         width: `${size}px`,
diff --git a/app/javascript/gabsocial/components/block.js b/app/javascript/gabsocial/components/block.js
index d8ec1ae6..3873640c 100644
--- a/app/javascript/gabsocial/components/block.js
+++ b/app/javascript/gabsocial/components/block.js
@@ -1,7 +1,10 @@
+/**
+ * Renders a block component
+ */
 export default class Block extends PureComponent {
 
   static propTypes = {
-    children: PropTypes.node,
+    children: PropTypes.any,
   }
 
   render() {
diff --git a/app/javascript/gabsocial/components/button.js b/app/javascript/gabsocial/components/button.js
index 78e53aa9..59056270 100644
--- a/app/javascript/gabsocial/components/button.js
+++ b/app/javascript/gabsocial/components/button.js
@@ -3,8 +3,10 @@ import { NavLink } from 'react-router-dom'
 import classNames from 'classnames/bind'
 import Icon from './icon'
 
+// Bind CSS Modules global variable `_s` to classNames module
 const cx = classNames.bind(_s)
 
+// Define colors for enumeration for Button component `color`, `backgroundColor` props
 const COLORS = {
   primary: 'primary',
   secondary: 'secondary',
@@ -16,29 +18,60 @@ const COLORS = {
   none: 'none',
 }
 
+/**
+ * Renders a button component
+ * @param {string} [props.backgroundColor='brand'] - background color of the button
+ * @param {func|node} [props.buttonRef] - ref to send to button component
+ * @param {string} [props.className] - add custom className
+ * @param {string} [props.color='white'] - text color of the button
+ * @param {string} [props.href] - href to send to on click
+ * @param {string} [props.icon] - prepend icon id
+ * @param {string} [props.iconClassName] - add custom className to icon
+ * @param {string} [props.iconSize] - size of the icon
+ * @param {bool} [props.isBlock] - if button is width: 100%
+ * @param {bool} [props.isDisabled] - if the button is disabled
+ * @param {bool} [props.isNarrow] - if the button is narrow
+ * @param {bool} [props.isOutline] - if the button is outline design
+ * @param {bool} [props.noClasses] - if the button has no default classes
+ * @param {func} [props.onClick] - function to call on button click
+ * @param {func} [props.onMouseEnter] - function to call on button mouse enter
+ * @param {func} [props.onMouseLeave] - function to call on button mouse leave
+ * @param {bool} [props.radiusSmall] - if the button has small radius
+ * @param {bool} [props.text] - if the button is just text (i.e. link)
+ * @param {bool} [props.title] - `title` attribute for button
+ * @param {bool} [props.to] - `to` to send to on click
+ * @param {bool} [props.type] - `type` attribute for button
+ * @param {bool} [props.underlineOnHover] - if the button has underline on hover
+ */
 export default class Button extends PureComponent {
 
   static propTypes = {
-    children: PropTypes.node,
-    to: PropTypes.string,
-    href: PropTypes.string,
-    onClick: PropTypes.func,
-    className: PropTypes.string,
-    icon: PropTypes.string,
-    iconWidth: PropTypes.string,
-    iconHeight: PropTypes.string,
-    iconClassName: PropTypes.string,
-    color: PropTypes.string,
     backgroundColor: PropTypes.string,
-    block: PropTypes.bool,
-    text: PropTypes.bool,
-    disabled: PropTypes.bool,
-    outline: PropTypes.bool,
-    narrow: PropTypes.bool,
-    underlineOnHover: PropTypes.bool,
-    radiusSmall: PropTypes.bool,
+    buttonRef: PropTypes.oneOfType([
+      PropTypes.func,
+      PropTypes.node,
+    ]),
+    children: PropTypes.node,
+    className: PropTypes.string,
+    color: PropTypes.string,
+    href: PropTypes.string,
+    icon: PropTypes.string,
+    iconClassName: PropTypes.string,
+    iconSize: PropTypes.string,
+    isBlock: PropTypes.bool,
+    isDisabled: PropTypes.bool,
+    isNarrow: PropTypes.bool,
+    isText: PropTypes.bool,
     noClasses: PropTypes.bool,
-    buttonRef: PropTypes.func,
+    onClick: PropTypes.func,
+    onMouseEnter: PropTypes.func,
+    onMouseLeave: PropTypes.func,
+    isOutline: PropTypes.bool,
+    radiusSmall: PropTypes.bool,
+    title: PropTypes.string,
+    to: PropTypes.string,
+    type: PropTypes.string,
+    underlineOnHover: PropTypes.bool,
   }
 
   static defaultProps = {
@@ -47,15 +80,18 @@ export default class Button extends PureComponent {
   }
 
   handleClick = (e) => {
-    if (!this.props.disabled && this.props.onClick) {
+    if (!this.props.isDisabled && this.props.onClick) {
       this.props.onClick(e)
     }
   }
 
   setRef = (c) => {
-    const { buttonRef } = this.props
-    if (buttonRef) buttonRef(c)
-    this.node = c
+    try {
+      this.node = c
+      this.props.buttonRef(c) 
+    } catch (error) {
+      //
+    }
   }
 
   focus() {
@@ -64,36 +100,31 @@ export default class Button extends PureComponent {
 
   render() {
     const {
-      block,
-      className,
-      disabled,
-      text,
-      to,
-      icon,
-      iconWidth,
-      iconHeight,
-      iconClassName,
-      children,
-      href,
-      outline,
-      color,
       backgroundColor,
-      underlineOnHover,
-      narrow,
-      radiusSmall,
+      children,
+      className,
+      color,
+      href,
+      icon,
+      iconClassName,
+      iconSize,
+      isBlock,
+      isDisabled,
+      isNarrow,
+      isOutline,
+      isText,
       noClasses,
-      ...otherProps
+      onClick,
+      onMouseEnter,
+      onMouseLeave,
+      radiusSmall,
+      title,
+      to,
+      type,
+      underlineOnHover,
     } = this.props
 
-    const theIcon = !!icon ? (
-      <Icon
-        id={icon}
-        width={iconWidth}
-        height={iconHeight}
-        className={iconClassName}
-      />
-    ) : undefined
-
+    // Style the component according to props
     const classes = noClasses ? className : cx(className, {
       default: 1,
       noUnderline: 1,
@@ -102,8 +133,8 @@ export default class Button extends PureComponent {
       textAlignCenter: 1,
       outlineNone: 1,
       flexRow: !!children && !!icon,
-      cursorNotAllowed: disabled,
-      opacity05: disabled,
+      cursorNotAllowed: isDisabled,
+      opacity05: isDisabled,
 
       backgroundColorPrimary: backgroundColor === COLORS.white,
       backgroundColorBlack: backgroundColor === COLORS.black,
@@ -119,17 +150,17 @@ export default class Button extends PureComponent {
       colorWhite: !!children && color === COLORS.white,
       colorBrand: !!children && color === COLORS.brand,
 
-      borderColorBrand: color === COLORS.brand && outline,
-      border1PX: outline,
+      borderColorBrand: color === COLORS.brand && isOutline,
+      border1PX: isOutline,
 
-      circle: !text,
+      circle: !isText,
       radiusSmall: radiusSmall,
 
-      py5: narrow,
-      py10: !text && !narrow,
-      px15: !text,
+      py5: isNarrow,
+      py10: !isText && !isNarrow,
+      px15: !isText,
 
-      width100PC: block,
+      width100PC: isBlock,
 
       underline_onHover: underlineOnHover,
 
@@ -138,17 +169,25 @@ export default class Button extends PureComponent {
       backgroundColorBrandDark_onHover: backgroundColor === COLORS.brand,
       backgroundColorDangerDark_onHover: backgroundColor === COLORS.danger,
 
-      backgroundColorBrand_onHover: color === COLORS.brand && outline,
-      colorWhite_onHover: !!children && color === COLORS.brand && outline,
+      backgroundColorBrand_onHover: color === COLORS.brand && isOutline,
+      colorWhite_onHover: !!children && color === COLORS.brand && isOutline,
 
       fillColorSecondary: !!icon && color === COLORS.secondary,
       fillColorWhite: !!icon && color === COLORS.white,
       fillColorBrand: !!icon && color === COLORS.brand,
-      fillColorWhite_onHover: !!icon && color === COLORS.brand && outline,
+      fillColorWhite_onHover: !!icon && color === COLORS.brand && isOutline,
     })
 
     const tagName = !!href ? 'a' : !!to ? 'NavLink' : 'button'
 
+    const theIcon = !!icon ? (
+      <Icon
+        id={icon}
+        size={iconSize}
+        className={iconClassName}
+      />
+    ) : undefined
+
     const theChildren = !!icon ? (
       <Fragment>
         {theIcon}
@@ -156,24 +195,36 @@ export default class Button extends PureComponent {
       </Fragment>
     ) : children
 
-    const options = {
-      disabled,
-      className: classes,
-      ref: this.setRef,
-      to: to || undefined,
-      href: href || undefined,
-      onClick: this.handleClick || undefined,
-      ...otherProps,
+    const handlers = {
+      onClick: !!onClick ? this.handleClick : undefined,
+      onMouseEnter: !!onMouseEnter ? onMouseEnter : undefined,
+      onMouseLeave: !!onMouseLeave ? onMouseLeave : undefined,
     }
 
     if (tagName === 'NavLink' && !!to) {
       return (
-        <NavLink {...options}>
+        <NavLink
+          title={title}
+          className={classes}
+          disabled={isDisabled}
+          to={to}
+          {...handlers}
+        >
           {theChildren}
         </NavLink>
       )
     }
 
+    const options = {
+      title,
+      type,
+      disabled: isDisabled,
+      className: classes,
+      href: href || undefined,
+      ref: this.setRef,
+      ...handlers,
+    }
+
     return React.createElement(tagName, options, theChildren)
   }
 
diff --git a/app/javascript/gabsocial/components/character_counter.js b/app/javascript/gabsocial/components/character_counter.js
index 4e76d150..377cdc4b 100644
--- a/app/javascript/gabsocial/components/character_counter.js
+++ b/app/javascript/gabsocial/components/character_counter.js
@@ -1,5 +1,10 @@
 import { length } from 'stringz'
 
+/**
+ * Renders a character counter
+ * @param {string} props.text - text to use to measure
+ * @param {number} props.max - max text allowed
+ */
 export default class CharacterCounter extends PureComponent {
 
   static propTypes = {
@@ -9,6 +14,7 @@ export default class CharacterCounter extends PureComponent {
 
   render () {
     const { text, max } = this.props
+
     const actualRadius = '16'
     const radius = 12
     const circumference = 2 * Math.PI * radius
@@ -20,7 +26,6 @@ export default class CharacterCounter extends PureComponent {
         <svg width={actualRadius * 2} height={actualRadius * 2} viewBox={`0 0 ${actualRadius * 2} ${actualRadius * 2}`}>
           <circle fill='none' cx={actualRadius} cy={actualRadius} r={radius} fill="none" stroke="#e6e6e6" strokeWidth="2" />
           <circle style={{
-              // transform: 'rotate(-90deg)',
               strokeDashoffset: dashoffset,
               strokeDasharray: circumference,
             }}
diff --git a/app/javascript/gabsocial/components/column_header.js b/app/javascript/gabsocial/components/column_header.js
index d3ddbc40..b565661b 100644
--- a/app/javascript/gabsocial/components/column_header.js
+++ b/app/javascript/gabsocial/components/column_header.js
@@ -1,6 +1,6 @@
-import TabBar from './tab_bar'
 import Button from './button'
 import Heading from './heading'
+import TabBar from './tab_bar'
 
 export default class ColumnHeader extends PureComponent {
 
@@ -44,8 +44,7 @@ export default class ColumnHeader extends PureComponent {
             backgroundColor='none'
             className={[_s.alignItemsCenter, _s.pl0, _s.justifyContentCenter].join(' ')}
             icon='back'
-            iconWidth='20px'
-            iconHeight='20px'
+            iconSize='20px'
             iconClassName={[_s.mr5, _s.fillColorPrimary].join(' ')}
             onClick={this.handleBackClick}
           />
@@ -57,10 +56,7 @@ export default class ColumnHeader extends PureComponent {
           </Heading>
         </div>
 
-        {
-          !!tabs &&
-          <TabBar tabs={tabs} />
-        }
+        <TabBar tabs={tabs} />
 
         {
           !!actions &&
@@ -75,8 +71,7 @@ export default class ColumnHeader extends PureComponent {
                   className={[_s.ml5, _s.fillColorBrand_onHover, _s.backgroundColorBrandLightOpaque_onHover, _s.px10].join(' ')}
                   icon={action.icon}
                   iconClassName={_s.inheritFill}
-                  iconWidth='15px'
-                  iconHeight='15px'
+                  iconSize='15px'
                 />
               ))
             }
diff --git a/app/javascript/gabsocial/components/column_indicator.js b/app/javascript/gabsocial/components/column_indicator.js
index 7a690bef..da2503f5 100644
--- a/app/javascript/gabsocial/components/column_indicator.js
+++ b/app/javascript/gabsocial/components/column_indicator.js
@@ -31,7 +31,7 @@ class ColumnIndicator extends PureComponent {
 
     return (
       <div className={[_s.default, _s.width100PC, _s.justifyContentCenter, _s.alignItemsCenter, _s.py15].join(' ')}>
-        <Icon id={type} width='44px' height='44px' />
+        <Icon id={type} size='44px' />
         {
           type !== 'loading' &&
           <Text
diff --git a/app/javascript/gabsocial/components/comment.js b/app/javascript/gabsocial/components/comment.js
index 5af7ed92..951d4993 100644
--- a/app/javascript/gabsocial/components/comment.js
+++ b/app/javascript/gabsocial/components/comment.js
@@ -17,19 +17,9 @@ const messages = defineMessages({
   follow: { id: 'follow', defaultMessage: 'Follow' },
 })
 
-const makeMapStateToProps = () => {
-  const getStatus = makeGetStatus()
-
-  const mapStateToProps = (state, props) => {
-    const status = getStatus(state, props)
-
-    return {
-      status,
-    }
-  }
-
-  return mapStateToProps
-}
+const makeMapStateToProps = (state, props) => ({
+  status: makeGetStatus()(state, props)
+})
 
 export default
 @injectIntl
@@ -81,7 +71,7 @@ class Comment extends ImmutablePureComponent {
               <div className={[_s.default, _s.flexRow, _s.mt5].join(' ')}>
                 
                 <Button
-                  text
+                  isText
                   radiusSmall
                   backgroundColor='none'
                   color='tertiary'
@@ -93,7 +83,7 @@ class Comment extends ImmutablePureComponent {
                 </Button>
 
                 <Button
-                  text
+                  isText
                   radiusSmall
                   backgroundColor='none'
                   color='tertiary'
@@ -105,7 +95,7 @@ class Comment extends ImmutablePureComponent {
                 </Button>
 
                 <Button
-                  text
+                  isText
                   radiusSmall
                   backgroundColor='none'
                   color='tertiary'
diff --git a/app/javascript/gabsocial/components/comment_header.js b/app/javascript/gabsocial/components/comment_header.js
index 8a0452d1..749837b8 100644
--- a/app/javascript/gabsocial/components/comment_header.js
+++ b/app/javascript/gabsocial/components/comment_header.js
@@ -42,7 +42,7 @@ class CommentHeader extends ImmutablePureComponent {
             <Fragment>
               <DotTextSeperator />
               <Button
-                text
+                isText
                 underlineOnHover
                 backgroundColor='none'
                 color='tertiary'
@@ -61,7 +61,7 @@ class CommentHeader extends ImmutablePureComponent {
             <Fragment>
               <DotTextSeperator />
                 <Button
-                  text
+                  isText
                   underlineOnHover
                   backgroundColor='none'
                   color='tertiary'
@@ -81,7 +81,7 @@ class CommentHeader extends ImmutablePureComponent {
             <Fragment>
               <DotTextSeperator />
                 <Button
-                  text
+                  isText
                   underlineOnHover
                   backgroundColor='none'
                   color='tertiary'
@@ -99,7 +99,7 @@ class CommentHeader extends ImmutablePureComponent {
           <DotTextSeperator />
 
           <Button
-            text
+            isText
             underlineOnHover
             backgroundColor='none'
             color='tertiary'
diff --git a/app/javascript/gabsocial/components/comment_list.js b/app/javascript/gabsocial/components/comment_list.js
index 92cbb213..ff678b1d 100644
--- a/app/javascript/gabsocial/components/comment_list.js
+++ b/app/javascript/gabsocial/components/comment_list.js
@@ -36,7 +36,7 @@ export default class CommentList extends ImmutablePureComponent {
           size > 0 && size > max &&
           <div className={[_s.default, _s.flexRow, _s.px15, _s.pb5, _s.mb10, _s.alignItemsCenter].join(' ')}>
             <Button
-              text
+              isText
               backgroundColor='none'
               color='tertiary'
             >
diff --git a/app/javascript/gabsocial/components/display_name.js b/app/javascript/gabsocial/components/display_name.js
index b98385d0..a15bd403 100644
--- a/app/javascript/gabsocial/components/display_name.js
+++ b/app/javascript/gabsocial/components/display_name.js
@@ -1,6 +1,5 @@
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
-import debounce from 'lodash.debounce'
 import classNames from 'classnames/bind'
 import { openPopover, closePopover } from '../actions/popover'
 import Icon from './icon'
@@ -12,7 +11,7 @@ const mapDispatchToProps = (dispatch) => ({
     dispatch(openPopover('USER_INFO', props))
   },
   closeUserInfoPopover() {
-    dispatch(closePopover())
+    dispatch(closePopover('USER_INFO'))
   }
 })
 
@@ -31,20 +30,29 @@ class DisplayName extends ImmutablePureComponent {
     noUsername: PropTypes.bool,
   }
 
-  handleMouseEnter = debounce(() => {
-    this.props.openUserInfoPopover({
-      targetRef: this.node,
-      position: 'top',
-      account: this.props.account,
-    })
-  }, 1000, { leading: true })
+  mouseOverTimeout = null
 
-  handleMouseLeave = debounce(() => {
-    this.props.closeUserInfoPopover()
-  }, 1000, { leading: true })
+  handleMouseEnter = () => {
+    if (this.mouseOverTimeout) return null
+    this.mouseOverTimeout = setTimeout(() => {
+      this.props.openUserInfoPopover({
+        targetRef: this.node,
+        position: 'top',
+        account: this.props.account,
+      })
+    }, 650)
+  }
+
+  handleMouseLeave = () => {
+    if (this.mouseOverTimeout) {
+      clearTimeout(this.mouseOverTimeout)
+      this.mouseOverTimeout = null
+      this.props.closeUserInfoPopover()
+    }
+  }
 
   setRef = (n) => {
-    this.node = n;
+    this.node = n
   }
 
   render() {
@@ -105,12 +113,12 @@ class DisplayName extends ImmutablePureComponent {
       !!large ? '19px' :
       !!small ? '14px' : '16px'
 
-    const domain = account.get('acct').split('@')[1];
+    const domain = account.get('acct').split('@')[1]
     const isRemoteUser = !!domain
 
+    // : todo : remote
     console.log("domain, isRemoteUser:", domain, isRemoteUser)
-    
-    // : todo :
+
     return (
       <span {...containerOptions} ref={this.setRef}>
         <div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
@@ -122,19 +130,19 @@ class DisplayName extends ImmutablePureComponent {
           </bdi>
           {
             account.get('is_verified') &&
-            <Icon id='verified' width={iconSize} height={iconSize} className={_s.default} />
+            <Icon id='verified' size={iconSize} className={_s.default} />
           }
           {
             account.get('is_pro') &&
-            <Icon id='pro' width='16px' height='16px' className={_s.default} />
+            <Icon id='pro' size={iconSize} className={_s.default} />
           }
           {
             account.get('is_donor') &&
-            <Icon id='donor' width='16px' height='16px' className={_s.default} />
+            <Icon id='donor' size={iconSize} className={_s.default} />
           }
           {
             account.get('is_investor') &&
-            <Icon id='investor' width='16px' height='16px' className={_s.default} />
+            <Icon id='investor' size={iconSize} className={_s.default} />
           }
         </div>
         {
diff --git a/app/javascript/gabsocial/components/divider.js b/app/javascript/gabsocial/components/divider.js
index 4a110e7d..0d48090c 100644
--- a/app/javascript/gabsocial/components/divider.js
+++ b/app/javascript/gabsocial/components/divider.js
@@ -1,27 +1,33 @@
 import classnames from 'classnames/bind'
 
+// Bind CSS Modules global variable `_s` to classNames module
 const cx = classnames.bind(_s)
 
+/**
+ * Renders a divider component
+ * @param {bool} [props.isInvisible] - to style the tab bar larger
+ * @param {bool} [props.isSmall] - if item is active
+ */
 export default class Divider extends PureComponent {
+
   static propTypes = {
-    small: PropTypes.bool,
-    invisible: PropTypes.bool,
+    isInvisible: PropTypes.bool,
+    isSmall: PropTypes.bool,
   }
 
   render() {
-    const { small, invisible } = this.props
+    const { isSmall, isInvisible } = this.props
 
     const classes = cx({
       default: 1,
-      borderBottom1PX: !invisible,
-      borderColorSecondary2: !invisible,
+      borderBottom1PX: !isInvisible,
+      borderColorSecondary2: !isInvisible,
       width100PC: 1,
-      mb15: !small,
-      my10: small || invisible,
+      mb15: !isSmall,
+      my10: isSmall || isInvisible,
     })
 
-    return (
-      <div className={classes} />
-    )
+    return <div className={classes} />
   }
+
 }
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/file_input.js b/app/javascript/gabsocial/components/file_input.js
index 57299e28..356f19a8 100644
--- a/app/javascript/gabsocial/components/file_input.js
+++ b/app/javascript/gabsocial/components/file_input.js
@@ -65,7 +65,7 @@ export default class FileInput extends PureComponent {
           />
           {
             !file &&
-            <div className={[_s.positionAbsolute, _s.cursorPointer].join(' ')}>
+            <div className={[_s.posAbs, _s.cursorPointer].join(' ')}>
               <Text size='medium' color='secondary'>
                 Click Here to Upload
               </Text>
diff --git a/app/javascript/gabsocial/components/floating_action_button.js b/app/javascript/gabsocial/components/floating_action_button.js
index 609bbe0f..bff09b09 100644
--- a/app/javascript/gabsocial/components/floating_action_button.js
+++ b/app/javascript/gabsocial/components/floating_action_button.js
@@ -1,9 +1,22 @@
+import { defineMessages, injectIntl } from 'react-intl'
+import { openModal } from '../actions/modal'
 import Button from './button'
 
-export default class FloatingActionButton extends PureComponent {
+const messages = defineMessages({
+  gab: { id: 'gab', defaultMessage: 'Gab' }, 
+})
+
+const mapDispatchToProps = (dispatch) => ({
+  onOpenCompose: () => dispatch(openModal('COMPOSE')),
+})
+
+export default
+@injectIntl
+@connect(null, mapDispatchToProps)
+class FloatingActionButton extends PureComponent {
   static propTypes = {
-    onClick: PropTypes.func.isRequired,
-    message: PropTypes.string.isRequired,
+    intl: PropTypes.object.isRequired,
+    onOpenCompose: PropTypes.func.isRequired,
   }
 
   shouldComponentUpdate(nextProps) {
@@ -11,14 +24,16 @@ export default class FloatingActionButton extends PureComponent {
   }
 
   render() {
-    const { onClick, message } = this.props
+    const { intl, onOpenCompose } = this.props
+
+    const message = intl.formatMessage(messages.gab)
 
     return (
       <Button
-        onClick={onClick}
+        onClick={onOpenCompose}
         color='white'
         backgroundColor='brand'
-        className={[_s.positionFixed, _s.z4, _s.py15, _s.mb15, _s.mr15, _s.bottom0, _s.right0].join(' ')}
+        className={[_s.posFixed, _s.z4, _s.py15, _s.mb15, _s.mr15, _s.bottom0, _s.right0].join(' ')}
         title={message}
         aria-label={message}
         icon='pencil'
diff --git a/app/javascript/gabsocial/components/footer.js b/app/javascript/gabsocial/components/footer.js
index d15a89ba..292f4806 100644
--- a/app/javascript/gabsocial/components/footer.js
+++ b/app/javascript/gabsocial/components/footer.js
@@ -2,6 +2,8 @@ import { NavLink, withRouter } from 'react-router-dom';
 import { FormattedMessage, injectIntl } from 'react-intl';
 import NotificationCounter from '../notification_counter';
 
+// : todo :
+
 const links = [
   <NavLink key='pr1' className='footer-bar__link' to='/home' data-preview-title-id='column.home'>
     <i className='tabs-bar__link__icon home' />
diff --git a/app/javascript/gabsocial/components/group_collection_item.js b/app/javascript/gabsocial/components/group_collection_item.js
index cc49395e..a9c7ff12 100644
--- a/app/javascript/gabsocial/components/group_collection_item.js
+++ b/app/javascript/gabsocial/components/group_collection_item.js
@@ -91,11 +91,11 @@ class GroupCollectionItem extends ImmutablePureComponent {
 
           {
             (isMember || isAdmin) &&
-            <div className={[_s.default, _s.flexRow, _s.positionAbsolute, _s.top0, _s.right0, _s.pt10, _s.mr10].join(' ')}>
+            <div className={[_s.default, _s.flexRow, _s.posAbs, _s.top0, _s.right0, _s.pt10, _s.mr10].join(' ')}>
               {
                 isMember &&
                 <Text
-                  badge
+                  isBadge
                   className={_s.backgroundColorWhite}
                   size='extraSmall'
                   color='brand'
@@ -106,7 +106,7 @@ class GroupCollectionItem extends ImmutablePureComponent {
               {
                 isAdmin &&
                 <Text
-                  badge
+                  isBadge
                   className={[_s.backgroundColorBlack, _s.ml5].join(' ')}
                   size='extraSmall'
                   color='white'
diff --git a/app/javascript/gabsocial/components/hashtag_item.js b/app/javascript/gabsocial/components/hashtag_item.js
index 1be22975..4fbb47a3 100644
--- a/app/javascript/gabsocial/components/hashtag_item.js
+++ b/app/javascript/gabsocial/components/hashtag_item.js
@@ -32,8 +32,8 @@ export default class HashtagItem extends ImmutablePureComponent {
       <NavLink
         to='/tags/test'
         className={[_s.default, _s.noUnderline, _s.backgroundSubtle_onHover, _s.px15, _s.py5].join(' ')}
-        onMouseEnter={() => this.handleOnMouseEnter()}
-        onMouseLeave={() => this.handleOnMouseLeave()}
+        onMouseEnter={this.handleOnMouseEnter}
+        onMouseLeave={this.handleOnMouseLeave}
       >
         <div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
           <div>
@@ -42,13 +42,12 @@ export default class HashtagItem extends ImmutablePureComponent {
             </Text>
           </div>
           <Button
-            text
+            isText
             backgroundColor='none'
             color='none'
             title='Remove'
             icon='caret-down'
-            iconWidth='8px'
-            iconHeight='8px'
+            iconSize='8px'
             iconClassName={_s.fillColorSecondary}
             className={_s.marginLeftAuto}
           />
diff --git a/app/javascript/gabsocial/components/heading.js b/app/javascript/gabsocial/components/heading.js
index 5e6a869b..a4abd1c1 100644
--- a/app/javascript/gabsocial/components/heading.js
+++ b/app/javascript/gabsocial/components/heading.js
@@ -1,7 +1,9 @@
 import classNames from 'classnames/bind'
 
+// Bind CSS Modules global variable `_s` to classNames module
 const cx = classNames.bind(_s)
 
+// Define sizes for enumeration for Heading component `size` prop
 const SIZES = {
   h1: 'h1',
   h2: 'h2',
@@ -11,11 +13,17 @@ const SIZES = {
   h6: 'h6',
 }
 
+/**
+ * Renders an H-tag
+ * @param {bool} [props.isCentered] - if text is centered within the element
+ * @param {string} [props.size='h1'] - the size of the heading
+ */
 export default class Heading extends PureComponent {
+
   static propTypes = {
     children: PropTypes.any,
+    isCentered: PropTypes.bool,
     size: PropTypes.oneOf(Object.keys(SIZES)),
-    center: PropTypes.bool,
   }
 
   static defaultProps = {
@@ -25,6 +33,7 @@ export default class Heading extends PureComponent {
   render() {
     const { children, size, center } = this.props
 
+    // Each size has it's own custom style
     const classes = cx({
       default: 1,
       text: 1,
@@ -44,7 +53,6 @@ export default class Heading extends PureComponent {
       lineHeight2: size === SIZES.h5,
       py2: size === SIZES.h5,
 
-      // fontWeightNormal: weight === WEIGHTS.normal,
       fontWeightMedium: [SIZES.h1, SIZES.h5].indexOf(size) > -1,
       fontWeightBold: [SIZES.h3, SIZES.h4].indexOf(size) > -1,
     })
@@ -58,4 +66,5 @@ export default class Heading extends PureComponent {
       children,
     )
   }
+
 }
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/icon.js b/app/javascript/gabsocial/components/icon.js
index d2c21317..373deb99 100644
--- a/app/javascript/gabsocial/components/icon.js
+++ b/app/javascript/gabsocial/components/icon.js
@@ -53,6 +53,7 @@ import RepostIcon from '../assets/repost_icon'
 import RichTextIcon from '../assets/rich_text_icon'
 import SearchIcon from '../assets/search_icon'
 import SearchAltIcon from '../assets/search_alt_icon'
+import SelectIcon from '../assets/select_icon'
 import ShareIcon from '../assets/share_icon'
 import ShopIcon from '../assets/shop_icon'
 import StrikethroughIcon from '../assets/strikethrough_icon'
@@ -121,6 +122,7 @@ const ICONS = {
   'rich-text': RichTextIcon,
   'search': SearchIcon,
   'search-alt': SearchAltIcon,
+  'select': SelectIcon,
   'share': ShareIcon,
   'shop': ShopIcon,
   'strikethrough': StrikethroughIcon,
@@ -141,17 +143,16 @@ export default class Icon extends PureComponent {
   static propTypes = {
     id: PropTypes.string.isRequired,
     className: PropTypes.string,
-    width: PropTypes.string,
-    height: PropTypes.string,
+    size: PropTypes.string,
   }
 
   render() {
-    const { id, ...options } = this.props
+    const { id, size, className } = this.props
 
     // : todo : add all required icons
     const Asset = ICONS[id] || CircleIcon
 
-    return <Asset {...options} />
+    return <Asset size={size} className={className} />
 
   }
 
diff --git a/app/javascript/gabsocial/components/image.js b/app/javascript/gabsocial/components/image.js
index c7bd1354..5b079415 100644
--- a/app/javascript/gabsocial/components/image.js
+++ b/app/javascript/gabsocial/components/image.js
@@ -8,8 +8,14 @@ export default class Image extends PureComponent {
     alt: PropTypes.string.isRequired,
     src: PropTypes.string,
     className: PropTypes.string,
-    width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    width: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+    ]),
+    height: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+    ]),
     fit: PropTypes.oneOf(['contain', 'cover', 'tile', 'none']),
     nullable: PropTypes.bool,
     lazy: PropTypes.bool,
diff --git a/app/javascript/gabsocial/components/input.js b/app/javascript/gabsocial/components/input.js
index ef9f0df8..b574ca8a 100644
--- a/app/javascript/gabsocial/components/input.js
+++ b/app/javascript/gabsocial/components/input.js
@@ -91,7 +91,7 @@ export default class Input extends PureComponent {
         <div className={[_s.default, _s.backgroundColorPrimary, _s.border1PX, _s.borderColorSecondary, _s.flexRow, _s.circle, _s.alignItemsCenter].join(' ')}>
           {
             !!prependIcon &&
-            <Icon id={prependIcon} width='16px' height='16px' className={[_s.ml15, _s.mr5].join(' ')} />
+            <Icon id={prependIcon} size='16px' className={[_s.ml15, _s.mr5].join(' ')} />
           }
 
           <input
@@ -117,8 +117,7 @@ export default class Input extends PureComponent {
               onClick={onClear}
               icon='close'
               iconClassName={_s.inheritFill}
-              iconHeight='10px'
-              iconWidth='10px'
+              iconSize='10px'
             />
           }
         </div>
diff --git a/app/javascript/gabsocial/components/intersection_observer_article.js b/app/javascript/gabsocial/components/intersection_observer_article.js
index 2c2a0e18..7e5c7e1e 100644
--- a/app/javascript/gabsocial/components/intersection_observer_article.js
+++ b/app/javascript/gabsocial/components/intersection_observer_article.js
@@ -26,9 +26,18 @@ class IntersectionObserverArticle extends React.Component {
 
   static propTypes = {
     intersectionObserverWrapper: PropTypes.object.isRequired,
-    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    index: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    listLength: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    id: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+    ]),
+    index: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+    ]),
+    listLength: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+    ]),
     saveHeightKey: PropTypes.string,
     cachedHeight: PropTypes.number,
     onHeightChange: PropTypes.func,
diff --git a/app/javascript/gabsocial/components/link_footer.js b/app/javascript/gabsocial/components/link_footer.js
index 22f345df..2b6fc029 100644
--- a/app/javascript/gabsocial/components/link_footer.js
+++ b/app/javascript/gabsocial/components/link_footer.js
@@ -104,7 +104,7 @@ class LinkFooter extends PureComponent {
 
               return (
                 <Button
-                  text
+                  isText
                   underlineOnHover
                   color='none'
                   backgroundColor='none'
diff --git a/app/javascript/gabsocial/components/list.js b/app/javascript/gabsocial/components/list.js
index a0dd9a62..177dc9ab 100644
--- a/app/javascript/gabsocial/components/list.js
+++ b/app/javascript/gabsocial/components/list.js
@@ -1,4 +1,5 @@
 import ImmutablePureComponent from 'react-immutable-pure-component'
+import ImmutablePropTypes from 'react-immutable-proptypes'
 import Block from './block'
 import ScrollableList from './scrollable_list'
 import ListItem from './list_item'
@@ -8,7 +9,8 @@ export default class List extends ImmutablePureComponent {
   static propTypes = {
     items: PropTypes.oneOfType([
       PropTypes.array,
-      // immutatable...
+      ImmutablePropTypes.map,
+      ImmutablePropTypes.list,
     ]),
     scrollKey: PropTypes.string,
     emptyMessage: PropTypes.any,
diff --git a/app/javascript/gabsocial/components/list_item.js b/app/javascript/gabsocial/components/list_item.js
index facbb192..96455c58 100644
--- a/app/javascript/gabsocial/components/list_item.js
+++ b/app/javascript/gabsocial/components/list_item.js
@@ -72,8 +72,7 @@ export default class ListItem extends PureComponent {
           !!icon &&
           <Icon
             id={icon}
-            width={iconSize}
-            height={iconSize}
+            size={iconSize}
             className={iconClasses}
           />
         }
@@ -86,8 +85,7 @@ export default class ListItem extends PureComponent {
           !hideArrow &&
           <Icon
             id='angle-right'
-            width='10px'
-            height='10px'
+            size='10px'
             className={[_s.marginLeftAuto, _s.fillColorBlack].join(' ')}
           />
         }
diff --git a/app/javascript/gabsocial/components/load_more.js b/app/javascript/gabsocial/components/load_more.js
index 9b131fa0..8812ff31 100644
--- a/app/javascript/gabsocial/components/load_more.js
+++ b/app/javascript/gabsocial/components/load_more.js
@@ -35,7 +35,7 @@ class LoadMore extends PureComponent {
     return (
       <div className={[_s.default, _s.py10, _s.px10].join(' ')}>
         <Button
-          block
+          isBlock
           radiusSmall
           backgroundColor='tertiary'
           color='primary'
@@ -53,7 +53,7 @@ class LoadMore extends PureComponent {
           {
             gap &&
             <Text align='center'>
-              <Icon id='ellipsis' />
+              <Icon id='ellipsis' size='14px' />
             </Text>
           }
         </Button>
diff --git a/app/javascript/gabsocial/components/media_gallery.js b/app/javascript/gabsocial/components/media_gallery.js
index 18b4150d..aed09ea5 100644
--- a/app/javascript/gabsocial/components/media_gallery.js
+++ b/app/javascript/gabsocial/components/media_gallery.js
@@ -151,7 +151,7 @@ class Item extends ImmutablePureComponent {
 
     if (attachment.get('type') === 'unknown') {
       return (
-        <div className={[_s.default, _s.positionAbsolute].join(' ')} key={attachment.get('id')} style={{ position, float, left, top, right, bottom, height, borderRadius, width: `${width}%` }}>
+        <div className={[_s.default, _s.posAbs].join(' ')} key={attachment.get('id')} style={{ position, float, left, top, right, bottom, height, borderRadius, width: `${width}%` }}>
           <a className={[_s.default, _s.heigh100PC, _s.width100PC, _s.cursorPointer].join(' ')} href={attachment.get('remote_url')} target='_blank' rel='noreferrer noopener'>
             <canvas width={32} height={32} ref={this.setCanvasRef} className={[_s.default, _s.heigh100PC, _s.width100PC].join(' ')} />
           </a>
@@ -216,7 +216,7 @@ class Item extends ImmutablePureComponent {
             playsInline
           />
 
-          <div className={[_s.default, _s.positionAbsolute, _s.z2, _s.radiusSmall, _s.backgroundColorOpaque, _s.px5, _s.py5, _s.mr10, _s.mb10, _s.bottom0, _s.right0].join(' ')}>
+          <div className={[_s.default, _s.posAbs, _s.z2, _s.radiusSmall, _s.backgroundColorOpaque, _s.px5, _s.py5, _s.mr10, _s.mb10, _s.bottom0, _s.right0].join(' ')}>
             <Text size='extraSmall' color='white' weight='medium'>GIF</Text>
           </div>
         </div>
@@ -224,7 +224,7 @@ class Item extends ImmutablePureComponent {
     }
 
     return (
-      <div className={[_s.defeault, _s.positionAbsolute].join(' ')} key={attachment.get('id')} style={{ position, float, left, top, right, bottom, height, width: `${width}%` }}>
+      <div className={[_s.defeault, _s.posAbs].join(' ')} key={attachment.get('id')} style={{ position, float, left, top, right, bottom, height, width: `${width}%` }}>
         {
           !visible && !this.state.loaded &&
           <canvas width={32} height={32} ref={this.setCanvasRef} className={[_s.default, _s.heigh100PC, _s.width100PC].join(' ')} />
@@ -257,6 +257,7 @@ class MediaGallery extends PureComponent {
 
   static defaultProps = {
     standalone: false,
+    height: 110,
   };
 
   state = {
@@ -517,7 +518,7 @@ class MediaGallery extends PureComponent {
     //If reduced (i.e. like in a quoted post)
     //then we need to make media smaller
     if (reduced) {
-      style.height = width / 2
+      style.height = width / 2 || '50%'
     }
 
     if (!visible) {
@@ -568,7 +569,7 @@ class MediaGallery extends PureComponent {
 
         {
           visible && sensitive &&
-          <div className={[_s.positionAbsolute, _s.z2, _s.top0, _s.right0, _s.mt10, _s.mr10].join(' ')}>
+          <div className={[_s.posAbs, _s.z2, _s.top0, _s.right0, _s.mt10, _s.mr10].join(' ')}>
             <Button
               title={intl.formatMessage(messages.toggle_visible)}
               icon='hidden'
diff --git a/app/javascript/gabsocial/components/media_item.js b/app/javascript/gabsocial/components/media_item.js
index 302a27c6..1d253091 100644
--- a/app/javascript/gabsocial/components/media_item.js
+++ b/app/javascript/gabsocial/components/media_item.js
@@ -77,7 +77,7 @@ export default class MediaItem extends ImmutablePureComponent {
 
     const containerClasses = cx({
       default: 1,
-      positionAbsolute: 1,
+      posAbs: 1,
       top0: 1,
       height100PC: 1,
       width100PC: 1,
@@ -96,7 +96,7 @@ export default class MediaItem extends ImmutablePureComponent {
     })
 
     return (
-      <div className={[_s.default, _s.width25PC, _s.paddingTop25PC].join(' ')}>
+      <div className={[_s.default, _s.width25PC, _s.pt25PC].join(' ')}>
         <div className={containerClasses}>
           <NavLink
             to={status.get('url')} /* : todo : */
@@ -125,20 +125,19 @@ export default class MediaItem extends ImmutablePureComponent {
               />
             }
 
-            <div className={[_s.default, _s.alignItemsCenter, _s.justifyContentCenter, _s.height100PC, _s.width100PC, _s.z3, _s.positionAbsolute].join(' ')}>
+            <div className={[_s.default, _s.alignItemsCenter, _s.justifyContentCenter, _s.height100PC, _s.width100PC, _s.z3, _s.posAbs].join(' ')}>
               {
                 !visible &&
                 <Icon
                   id='hidden'
-                  width='22px'
-                  height='22px'
+                  size='22px'
                   className={[_s.fillColorWhite].join('')}
                 />
               }
 
               {
                 !!badge &&
-                <div className={[_s.default, _s.positionAbsolute, _s.radiusSmall, _s.backgroundColorOpaque, _s.px5, _s.py5, _s.mr5, _s.my5, _s.bottom0, _s.right0].join(' ')}>
+                <div className={[_s.default, _s.posAbs, _s.radiusSmall, _s.backgroundColorOpaque, _s.px5, _s.py5, _s.mr5, _s.my5, _s.bottom0, _s.right0].join(' ')}>
                   <Text size='extraSmall' color='white'>
                     {badge}
                   </Text>
diff --git a/app/javascript/gabsocial/components/modal/boost_modal.js b/app/javascript/gabsocial/components/modal/boost_modal.js
index 300deddd..9e122d40 100644
--- a/app/javascript/gabsocial/components/modal/boost_modal.js
+++ b/app/javascript/gabsocial/components/modal/boost_modal.js
@@ -14,6 +14,8 @@ const messages = defineMessages({
   combo: { id: 'boost_modal.combo', defaultMessage: 'You can press {combo} to skip this next time' },
 });
 
+// : todo :
+
 export default
 @injectIntl
 class BoostModal extends ImmutablePureComponent {
diff --git a/app/javascript/gabsocial/components/modal/community_timeline_settings_modal.js b/app/javascript/gabsocial/components/modal/community_timeline_settings_modal.js
index 2b06a266..d02544f9 100644
--- a/app/javascript/gabsocial/components/modal/community_timeline_settings_modal.js
+++ b/app/javascript/gabsocial/components/modal/community_timeline_settings_modal.js
@@ -74,7 +74,6 @@ class CommunityTimelineSettingsModal extends ImmutablePureComponent {
         </div>
 
         <Button
-          centered
           backgroundColor='brand'
           color='white'
           className={_s.justifyContentCenter}
diff --git a/app/javascript/gabsocial/components/modal/confirmation_modal.js b/app/javascript/gabsocial/components/modal/confirmation_modal.js
index 8a18e61a..f031a68f 100644
--- a/app/javascript/gabsocial/components/modal/confirmation_modal.js
+++ b/app/javascript/gabsocial/components/modal/confirmation_modal.js
@@ -58,7 +58,7 @@ class ConfirmationModal extends PureComponent {
           <div className={[_s.default, _s.px15, _s.py15].join(' ')}>
             <div className={[_s.default, _s.px15, _s.py15].join(' ')}>
 
-              <Heading size='h1' center>
+              <Heading size='h1' isCentered>
                 {title}
               </Heading>
 
diff --git a/app/javascript/gabsocial/components/modal/edit_profile_modal.js b/app/javascript/gabsocial/components/modal/edit_profile_modal.js
index 120275c3..283fe033 100644
--- a/app/javascript/gabsocial/components/modal/edit_profile_modal.js
+++ b/app/javascript/gabsocial/components/modal/edit_profile_modal.js
@@ -21,6 +21,7 @@ class EditProfileModal extends ImmutablePureComponent {
 
     return (
       <ModalLayout>
+        test
       </ModalLayout>
     )
   }
diff --git a/app/javascript/gabsocial/components/modal/embed_modal.js b/app/javascript/gabsocial/components/modal/embed_modal.js
index 3c9bd6a2..af75a4d3 100644
--- a/app/javascript/gabsocial/components/modal/embed_modal.js
+++ b/app/javascript/gabsocial/components/modal/embed_modal.js
@@ -99,7 +99,7 @@ class EmbedModal extends ImmutablePureComponent {
             />
             {
               !oembed && 
-              <Icon id='loading' height='34px' width='34px' className={[_s.positionAbsolute, _s.z3].join(' ')} />
+              <Icon id='loading' size='34px' className={[_s.posAbs, _s.z3].join(' ')} />
             }
           </div>
 
diff --git a/app/javascript/gabsocial/components/modal/gif_picker_modal.js b/app/javascript/gabsocial/components/modal/gif_picker_modal.js
index 7bfd877b..ab83128e 100644
--- a/app/javascript/gabsocial/components/modal/gif_picker_modal.js
+++ b/app/javascript/gabsocial/components/modal/gif_picker_modal.js
@@ -131,8 +131,7 @@ class GifPickerModal extends PureComponent {
               onClick={this.onHandleCloseModal}
               color='secondary'
               icon='close'
-              iconWidth='10px'
-              iconWidth='10px'
+              iconSize='10px'
             />
           </div>
           <div className={[_s.default, _s.heightMin50VH, _s.heightMax80VH, _s.overflowYScroll].join(' ')}>
@@ -258,8 +257,8 @@ class GifCategoriesCollection extends PureComponent {
                   height={150}
                   src={category.image}
                 />
-                <div className={[_s.default, _s.positionAbsolute, _s.videoPlayerControlsBackground, _s.right0, _s.bottom0, _s.left0, _s.py10, _s.px10].join(' ')}>
-                  <Text color='white' weight='bold' size='large' align='left'>
+                <div className={[_s.default, _s.posAbs, _s.videoPlayerControlsBackground, _s.right0, _s.bottom0, _s.left0, _s.py10, _s.px10].join(' ')}>
+                  <Text color='white' weight='bold' size='large'>
                     {category.searchterm}
                   </Text>
                 </div>
diff --git a/app/javascript/gabsocial/components/modal/group_timeline_settings_modal.js b/app/javascript/gabsocial/components/modal/group_timeline_settings_modal.js
index 21498cf8..a09fe61a 100644
--- a/app/javascript/gabsocial/components/modal/group_timeline_settings_modal.js
+++ b/app/javascript/gabsocial/components/modal/group_timeline_settings_modal.js
@@ -40,7 +40,6 @@ class HomeTimelineSettingsModal extends ImmutablePureComponent {
         </div>
 
         <Button
-          centered
           backgroundColor='brand'
           color='white'
           icon='pro'
diff --git a/app/javascript/gabsocial/components/modal/hashtag_timeline_settings_modal.js b/app/javascript/gabsocial/components/modal/hashtag_timeline_settings_modal.js
index a357f86d..b0e2fe4f 100644
--- a/app/javascript/gabsocial/components/modal/hashtag_timeline_settings_modal.js
+++ b/app/javascript/gabsocial/components/modal/hashtag_timeline_settings_modal.js
@@ -70,7 +70,6 @@ class HashtagTimelineSettingsModal extends ImmutablePureComponent {
         </div>
 
         <Button
-          centered
           backgroundColor='brand'
           color='white'
           className={_s.justifyContentCenter}
diff --git a/app/javascript/gabsocial/components/modal/home_timeline_settings_modal.js b/app/javascript/gabsocial/components/modal/home_timeline_settings_modal.js
index eeecf8dd..045be3a5 100644
--- a/app/javascript/gabsocial/components/modal/home_timeline_settings_modal.js
+++ b/app/javascript/gabsocial/components/modal/home_timeline_settings_modal.js
@@ -103,7 +103,6 @@ class HomeTimelineSettingsModal extends ImmutablePureComponent {
         </div>
 
         <Button
-          centered
           backgroundColor='brand'
           color='white'
           className={_s.justifyContentCenter}
diff --git a/app/javascript/gabsocial/components/modal/list_timeline_settings_modal.js b/app/javascript/gabsocial/components/modal/list_timeline_settings_modal.js
index 1ca5ea31..59fd7cc0 100644
--- a/app/javascript/gabsocial/components/modal/list_timeline_settings_modal.js
+++ b/app/javascript/gabsocial/components/modal/list_timeline_settings_modal.js
@@ -103,7 +103,6 @@ class ListTimelineSettingsModal extends ImmutablePureComponent {
         </div>
 
         <Button
-          centered
           backgroundColor='brand'
           color='white'
           className={_s.justifyContentCenter}
diff --git a/app/javascript/gabsocial/components/modal/media_modal.js b/app/javascript/gabsocial/components/modal/media_modal.js
index a389ecc5..e9f1441c 100644
--- a/app/javascript/gabsocial/components/modal/media_modal.js
+++ b/app/javascript/gabsocial/components/modal/media_modal.js
@@ -18,6 +18,8 @@ const messages = defineMessages({
 
 export const previewState = 'previewMediaModal';
 
+// : todo :
+
 export default
 @injectIntl
 class MediaModal extends ImmutablePureComponent {
diff --git a/app/javascript/gabsocial/components/modal/modal_base.js b/app/javascript/gabsocial/components/modal/modal_base.js
index 84fd21aa..a76c736a 100644
--- a/app/javascript/gabsocial/components/modal/modal_base.js
+++ b/app/javascript/gabsocial/components/modal/modal_base.js
@@ -137,13 +137,13 @@ class ModalBase extends PureComponent {
           <Fragment>
             <div
               role='presentation'
-              className={[_s.default, _s.backgroundColorOpaque, _s.positionFixed, _s.z3, _s.top0, _s.right0, _s.bottom0, _s.left0].join(' ')}
+              className={[_s.default, _s.backgroundColorOpaque, _s.posFixed, _s.z3, _s.top0, _s.right0, _s.bottom0, _s.left0].join(' ')}
             />
             <div
               ref={this.setDialog}
               role='dialog'
               onClick={this.handleOnClose}
-              className={[_s.default, _s.positionFixed, _s.alignItemsCenter, _s.justifyContentCenter, _s.z4, _s.width100PC, _s.height100PC, _s.top0, _s.rightAuto, _s.bottomAuto, _s.left0].join(' ')}
+              className={[_s.default, _s.posFixed, _s.alignItemsCenter, _s.justifyContentCenter, _s.z4, _s.width100PC, _s.height100PC, _s.top0, _s.rightAuto, _s.bottomAuto, _s.left0].join(' ')}
             >
               {children}
             </div>
diff --git a/app/javascript/gabsocial/components/modal/modal_layout.js b/app/javascript/gabsocial/components/modal/modal_layout.js
index 209389cf..202a490b 100644
--- a/app/javascript/gabsocial/components/modal/modal_layout.js
+++ b/app/javascript/gabsocial/components/modal/modal_layout.js
@@ -65,8 +65,7 @@ class ModalLayout extends PureComponent {
                 onClick={this.onHandleCloseModal}
                 color='secondary'
                 icon='close'
-                iconWidth='10px'
-                iconWidth='10px'
+                iconSize='10px'
               />
             }
           </div>
diff --git a/app/javascript/gabsocial/components/modal/modal_root.js b/app/javascript/gabsocial/components/modal/modal_root.js
index 58137a1d..ed515ecc 100644
--- a/app/javascript/gabsocial/components/modal/modal_root.js
+++ b/app/javascript/gabsocial/components/modal/modal_root.js
@@ -20,6 +20,7 @@ import BoostModal from './boost_modal'
 import CommunityTimelineSettingsModal from './community_timeline_settings_modal'
 import ComposeModal from './compose_modal'
 import ConfirmationModal from './confirmation_modal'
+import EditProfileModal from './edit_profile_modal'
 import GifPickerModal from './gif_picker_modal'
 import GroupCreateModal from './group_create_modal'
 import GroupDeleteModal from './group_delete_modal'
@@ -46,6 +47,7 @@ const MODAL_COMPONENTS = {
   COMMUNITY_TIMELINE_SETTINGS: () => Promise.resolve({ default: CommunityTimelineSettingsModal }),
   COMPOSE: () => Promise.resolve({ default: ComposeModal }),
   CONFIRM: () => Promise.resolve({ default: ConfirmationModal }),
+  EDIT_PROFILE: () => Promise.resolve({ default: EditProfileModal }),
   EMBED: () => Promise.resolve({ default: EmbedModal }),
   GIF_PICKER: () => Promise.resolve({ default: GifPickerModal }),
   GROUP_CREATE: () => Promise.resolve({ default: GroupCreateModal }),
diff --git a/app/javascript/gabsocial/components/modal/pro_upgrade_modal.js b/app/javascript/gabsocial/components/modal/pro_upgrade_modal.js
index 735bdee8..7400dc77 100644
--- a/app/javascript/gabsocial/components/modal/pro_upgrade_modal.js
+++ b/app/javascript/gabsocial/components/modal/pro_upgrade_modal.js
@@ -45,7 +45,6 @@ class ProUpgradeModal extends ImmutablePureComponent {
         </div>
 
         <Button
-          centered
           backgroundColor='brand'
           color='white'
           icon='pro'
diff --git a/app/javascript/gabsocial/components/modal/report_modal.js b/app/javascript/gabsocial/components/modal/report_modal.js
index 5b3f0a28..b7acf66f 100644
--- a/app/javascript/gabsocial/components/modal/report_modal.js
+++ b/app/javascript/gabsocial/components/modal/report_modal.js
@@ -151,9 +151,9 @@ class ReportModal extends ImmutablePureComponent {
             }
             
             <Button
-              disabled={isSubmitting}
+              isDisabled={isSubmitting}
               onClick={this.handleSubmit}
-              className={_s.marginTopAuto}
+              className={_s.mtAuto}
             >
               {intl.formatMessage(messages.submit)}
             </Button>
diff --git a/app/javascript/gabsocial/components/moved_note.js b/app/javascript/gabsocial/components/moved_note.js
index 74c9518e..83620d01 100644
--- a/app/javascript/gabsocial/components/moved_note.js
+++ b/app/javascript/gabsocial/components/moved_note.js
@@ -5,6 +5,7 @@ import { NavLink } from 'react-router-dom'
 import DisplayName from './display_name'
 import Icon from './icon'
 
+// : todo :
 export default class MovedNote extends ImmutablePureComponent {
 
   static contextTypes = {
diff --git a/app/javascript/gabsocial/components/panel/group_info_panel.js b/app/javascript/gabsocial/components/panel/group_info_panel.js
index 65cd96d3..78138a8d 100644
--- a/app/javascript/gabsocial/components/panel/group_info_panel.js
+++ b/app/javascript/gabsocial/components/panel/group_info_panel.js
@@ -37,17 +37,17 @@ class GroupInfoPanel extends ImmutablePureComponent {
               {group.get('title')}
             </Heading>
 
-            <Divider small />
+            <Divider isSmall />
 
             <div className={[_s.default, _s.flexRow, _s.justifyContentCenter].join(' ')}>
               <div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
-                <Icon id='group' height='14px' width='14px' />
+                <Icon id='group' size='14px' />
                 <Text size='small' className={_s.ml5}>
                   {intl.formatMessage(messages.members)}
                 </Text>
               </div>
               <Button
-                text
+                isText
                 to={`/groups/${group.get('id')}/members`}
                 color='brand'
                 backgroundColor='none'
@@ -61,7 +61,7 @@ class GroupInfoPanel extends ImmutablePureComponent {
               </Button>
             </div>
 
-            <Divider small />
+            <Divider isSmall />
 
             <Text>
               {group.get('description')}
diff --git a/app/javascript/gabsocial/components/panel/list_details_panel.js b/app/javascript/gabsocial/components/panel/list_details_panel.js
index b8bf00ed..5aa964d3 100644
--- a/app/javascript/gabsocial/components/panel/list_details_panel.js
+++ b/app/javascript/gabsocial/components/panel/list_details_panel.js
@@ -55,10 +55,10 @@ class ListDetailsPanel extends ImmutablePureComponent {
             </Text>
           </div>
 
-          <Divider small />
+          <Divider isSmall />
 
           <div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
-            <Icon id='calendar' width='12px' height='12px' className={_s.fillColorSecondary} />
+            <Icon id='calendar' size='12px' className={_s.fillColorSecondary} />
             <Text
               size='small'
               color='secondary'
@@ -72,11 +72,11 @@ class ListDetailsPanel extends ImmutablePureComponent {
             </Text>
           </div>
 
-          <Divider small />
+          <Divider isSmall />
 
           <div className={[_s.default].join(' ')}>
             <div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
-              <Icon id='group' width='12px' height='12px' className={_s.fillColorSecondary} />
+              <Icon id='group' size='12px' className={_s.fillColorSecondary} />
               <Text
                 size='small'
                 color='secondary'
diff --git a/app/javascript/gabsocial/components/panel/lists_panel.js b/app/javascript/gabsocial/components/panel/lists_panel.js
index 6d629a36..1fa909ca 100644
--- a/app/javascript/gabsocial/components/panel/lists_panel.js
+++ b/app/javascript/gabsocial/components/panel/lists_panel.js
@@ -1,17 +1,11 @@
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import { defineMessages, injectIntl } from 'react-intl'
-import { createSelector } from 'reselect'
+import { getOrderedLists } from '../../selectors'
 import { fetchLists } from '../../actions/lists'
 import PanelLayout from './panel_layout'
 import List from '../list'
 
-const getOrderedLists = createSelector([state => state.get('lists')], lists => {
-  if (!lists) return lists
-
-  return lists.toList().filter(item => !!item).sort((a, b) => a.get('title').localeCompare(b.get('title')))
-})
-
 const messages = defineMessages({
   title: { id: 'lists.subheading', defaultMessage: 'Your Lists' },
   show_all: { id: 'groups.sidebar-panel.show_all', defaultMessage: 'Show all' },
diff --git a/app/javascript/gabsocial/components/panel/panel_layout.js b/app/javascript/gabsocial/components/panel/panel_layout.js
index 1efaff31..abdc5d0a 100644
--- a/app/javascript/gabsocial/components/panel/panel_layout.js
+++ b/app/javascript/gabsocial/components/panel/panel_layout.js
@@ -45,7 +45,7 @@ export default class PanelLayout extends PureComponent {
                   (!!headerButtonTitle && (!!headerButtonAction || !!headerButtonTo)) &&
                   <div className={[_s.default, _s.marginLeftAuto].join(' ')}>
                     <Button
-                      text
+                      isText
                       backgroundColor='none'
                       color='brand'
                       to={headerButtonTo}
@@ -82,14 +82,14 @@ export default class PanelLayout extends PureComponent {
             (!!footerButtonTitle && (!!footerButtonAction || !!footerButtonTo)) &&
             <div className={[_s.default, _s.borderColorSecondary, _s.borderTop1PX].join(' ')}>
               <Button
-                text
+                isText
                 color='none'
                 backgroundColor='none'
                 to={footerButtonTo}
                 onClick={footerButtonAction}
                 className={[_s.px15, _s.py15, _s.backgroundSubtle_onHover].join(' ')}
               >
-                <Text color='brand' align='left' size='medium'>
+                <Text color='brand' size='medium'>
                   {footerButtonTitle}
                 </Text>
               </Button>
diff --git a/app/javascript/gabsocial/components/panel/profile_info_panel.js b/app/javascript/gabsocial/components/panel/profile_info_panel.js
index e18d78da..a5b1cb8b 100644
--- a/app/javascript/gabsocial/components/panel/profile_info_panel.js
+++ b/app/javascript/gabsocial/components/panel/profile_info_panel.js
@@ -62,12 +62,12 @@ class ProfileInfoPanel extends ImmutablePureComponent {
             hasNote &&
             <Fragment>
               <div className={_s.dangerousContent} dangerouslySetInnerHTML={content} />
-              <Divider small />
+              <Divider isSmall />
             </Fragment>
           }
 
           <div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
-            <Icon id='calendar' width='12px' height='12px' className={_s.fillColorSecondary} />
+            <Icon id='calendar' size='12px' className={_s.fillColorSecondary} />
             <Text
               size='small'
               color='secondary'
@@ -85,7 +85,7 @@ class ProfileInfoPanel extends ImmutablePureComponent {
             <div className={[_s.default]}>
               {identityProofs.map((proof, i) => (
                 <Fragment>
-                  <Divider small />
+                  <Divider isSmall />
                   <dl className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')} key={`profile-identity-proof-${i}`}>
                     <dt
                       className={_s.dangerousContent}
@@ -96,7 +96,7 @@ class ProfileInfoPanel extends ImmutablePureComponent {
                     <dd className='verified'>
                       <a href={proof.get('proof_url')} target='_blank' rel='noopener noreferrer'>
                         <span title={intl.formatMessage(messages.linkVerifiedOn, { date: intl.formatDate(proof.get('updated_at'), dateFormatOptions) })}>
-                          <Icon id='check' className='verified__mark' />
+                          <Icon id='check' size='12px' className='verified__mark' />
                         </span>
                       </a>
                       <a href={proof.get('profile_url')} target='_blank' rel='noopener noreferrer'>
@@ -113,7 +113,7 @@ class ProfileInfoPanel extends ImmutablePureComponent {
               {
                 fields.map((pair, i) => (
                   <Fragment>
-                    <Divider small />
+                    <Divider isSmall />
                     <dl className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')} key={`profile-field-${i}`}>
                       <dt
                         className={[_s.text, _s.dangerousContent].join(' ')}
diff --git a/app/javascript/gabsocial/components/panel/user_panel.js b/app/javascript/gabsocial/components/panel/user_panel.js
index 6776f75a..fde223e4 100644
--- a/app/javascript/gabsocial/components/panel/user_panel.js
+++ b/app/javascript/gabsocial/components/panel/user_panel.js
@@ -6,6 +6,7 @@ import classNames from 'classnames/bind'
 import { me } from '../../initial_state'
 import { makeGetAccount } from '../../selectors'
 import { shortNumberFormat } from '../../utils/numbers'
+import { openModal } from '../../actions/modal'
 import Button from '../button'
 import DisplayName from '../display_name'
 import Avatar from '../avatar'
@@ -20,25 +21,37 @@ const messages = defineMessages({
   followers: { id: 'account.followers', defaultMessage: 'Followers' },
   follows: { id: 'account.follows', defaultMessage: 'Follows' },
   edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' },
+  headerPhoto: { id: 'header_photo', defaultMessage: 'Header photo' },
 })
 
 const mapStateToProps = (state) => ({
   account: makeGetAccount()(state, me),
 })
 
+const mapDispatchToProps = (dispatch) => ({
+  onOpenEditProfile() {
+    dispatch(openModal('EDIT_PROFILE'))
+  },
+})
+
 export default
-@connect(mapStateToProps)
+@connect(mapStateToProps, mapDispatchToProps)
 @injectIntl
 class UserPanel extends ImmutablePureComponent {
   static propTypes = {
-    account: ImmutablePropTypes.map,
+    account: ImmutablePropTypes.map.isRequired,
     intl: PropTypes.object.isRequired,
+    onOpenEditProfile: PropTypes.func.isRequired,
   }
 
   state = {
     hovering: false,
   }
 
+  updateOnProps = [
+    'account'
+  ]
+
   handleOnMouseEnter = () => {
     this.setState({ hovering: true })
   }
@@ -47,12 +60,16 @@ class UserPanel extends ImmutablePureComponent {
     this.setState({ hovering: false })
   }
 
+  handleOnOpenEditProfile = () => {
+    this.props.onOpenEditProfile()
+  }
+
   render() {
     const { account, intl } = this.props
     const { hovering } = this.state
 
     const buttonClasses = cx({
-      positionAbsolute: 1,
+      posAbs: 1,
       mt10: 1,
       mr10: 1,
       top0: 1,
@@ -60,14 +77,17 @@ class UserPanel extends ImmutablePureComponent {
       displayNone: !hovering,
     })
 
+    const acct = account.get('acct')
+
     return (
       <PanelLayout noPadding>
         <div
           className={[_s.default, _s.height122PX].join(' ')}
-          onMouseEnter={() => this.handleOnMouseEnter()}
-          onMouseLeave={() => this.handleOnMouseLeave()}
+          onMouseEnter={this.handleOnMouseEnter}
+          onMouseLeave={this.handleOnMouseLeave}
         >
           <Image
+            alt={intl.formatMessage(messages.headerPhoto)}
             className={_s.height122PX}
             src={account.get('header_static')}
           />
@@ -76,6 +96,7 @@ class UserPanel extends ImmutablePureComponent {
             backgroundColor='secondary'
             radiusSmall
             className={buttonClasses}
+            onClick={this.handleOnOpenEditProfile}
           >
             {intl.formatMessage(messages.edit_profile)}
           </Button>
@@ -83,9 +104,9 @@ class UserPanel extends ImmutablePureComponent {
 
         <NavLink
           className={[_s.default, _s.flexRow, _s.py10, _s.px15, _s.noUnderline].join(' ')}
-          to={`/${account.get('acct')}`}
+          to={`/${acct}`}
         >
-          <div className={[_s.default, _s.marginTopNeg30PX, _s.circle, _s.borderColorWhite, _s.border2PX].join(' ')}>
+          <div className={[_s.default, _s.mtNeg30PX, _s.circle, _s.borderColorWhite, _s.border2PX].join(' ')}>
             <Avatar account={account} size={62} />
           </div>
           <div className={[_s.default, _s.ml15].join(' ')}>
@@ -95,17 +116,17 @@ class UserPanel extends ImmutablePureComponent {
 
         <div className={[_s.default, _s.mb15, _s.mt5, _s.flexRow, _s.px15].join(' ')}>
           <UserStat
-            to={`/${account.get('acct')}`}
+            to={`/${acct}`}
             title={intl.formatMessage(messages.gabs)}
             value={shortNumberFormat(account.get('statuses_count'))}
           />
           <UserStat
-            to={`/${account.get('acct')}/followers`}
+            to={`/${acct}/followers`}
             title={intl.formatMessage(messages.followers)}
             value={shortNumberFormat(account.get('followers_count'))}
           />
           <UserStat
-            to={`/${account.get('acct')}/following`}
+            to={`/${acct}/following`}
             title={intl.formatMessage(messages.follows)}
             value={shortNumberFormat(account.get('following_count'))}
           />
diff --git a/app/javascript/gabsocial/components/panel/who_to_follow_panel.js b/app/javascript/gabsocial/components/panel/who_to_follow_panel.js
index 970336d9..95a2eda7 100644
--- a/app/javascript/gabsocial/components/panel/who_to_follow_panel.js
+++ b/app/javascript/gabsocial/components/panel/who_to_follow_panel.js
@@ -1,19 +1,19 @@
-import { defineMessages, injectIntl } from 'react-intl';
-import { fetchSuggestions, dismissSuggestion } from '../../actions/suggestions';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import Account from '../../components/account';
-import PanelLayout from './panel_layout';
+import { defineMessages, injectIntl } from 'react-intl'
+import { fetchSuggestions, dismissSuggestion } from '../../actions/suggestions'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import Account from '../../components/account'
+import PanelLayout from './panel_layout'
 
 const messages = defineMessages({
   dismissSuggestion: { id: 'suggestions.dismiss', defaultMessage: 'Dismiss suggestion' },
   title: { id: 'who_to_follow.title', defaultMessage: 'Who to Follow' },
   show_more: { id: 'who_to_follow.more', defaultMessage: 'Show more' },
-});
+})
 
 const mapStateToProps = (state) => ({
   suggestions: state.getIn(['suggestions', 'items']),
-});
+})
 
 const mapDispatchToProps = (dispatch) => ({
   fetchSuggestions: () => dispatch(fetchSuggestions()),
@@ -26,25 +26,26 @@ export default
 class WhoToFollowPanel extends ImmutablePureComponent {
 
   static propTypes = {
-    suggestions: ImmutablePropTypes.list.isRequired,
-    fetchSuggestions: PropTypes.func.isRequired,
     dismissSuggestion: PropTypes.func.isRequired,
+    fetchSuggestions: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
-  };
+    suggestions: ImmutablePropTypes.list.isRequired,
+  }
+
+  updateOnProps = [
+    'suggestions',
+  ]
 
   componentDidMount () {
-    this.props.fetchSuggestions();
+    this.props.fetchSuggestions()
   }
 
   render() {
-    const { intl, /* suggestions, */ dismissSuggestion } = this.props;
-    // : testing!!! :
-    const suggestions = [
-      "1","1","1",
-    ]
-    // if (suggestions.isEmpty()) {
-    //   return null;
-    // }
+    const { intl, suggestions, dismissSuggestion } = this.props
+
+    if (suggestions.isEmpty()) {
+      return null
+    }
 
     return (
       <PanelLayout
@@ -53,16 +54,18 @@ class WhoToFollowPanel extends ImmutablePureComponent {
         footerButtonTo='/explore'
       >
         <div className={_s.default}>
-          {suggestions && suggestions.map(accountId => (
-            <Account
-              showDismiss
-              key={accountId}
-              id={accountId}
-              dismissAction={dismissSuggestion}
-            />
-          ))}
+          {
+            suggestions.map(accountId => (
+              <Account
+                showDismiss
+                key={accountId}
+                id={accountId}
+                dismissAction={dismissSuggestion}
+              />
+            ))
+          }
         </div>
       </PanelLayout>
-    );
-  };
-};
\ No newline at end of file
+    )
+  }
+}
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/poll.js b/app/javascript/gabsocial/components/poll.js
index 6fb43a52..52c735be 100644
--- a/app/javascript/gabsocial/components/poll.js
+++ b/app/javascript/gabsocial/components/poll.js
@@ -87,7 +87,7 @@ class Poll extends ImmutablePureComponent {
 
     const chartClasses = cx({
       default: 1,
-      positionAbsolute: 1,
+      posAbs: 1,
       top0: 1,
       left0: 1,
       radiusSmall: 1,
@@ -199,9 +199,9 @@ class Poll extends ImmutablePureComponent {
           {
             !showResults &&
             <Button
-              narrow
+              isNarrow
               className={_s.mr10}
-              disabled={disabled}
+              isDisabled={disabled}
               onClick={this.handleVote}
             >
               <Text color='inherit' size='small' className={_s.px10}>
diff --git a/app/javascript/gabsocial/components/popover/popover_base.js b/app/javascript/gabsocial/components/popover/popover_base.js
index 24529be4..cb78b524 100644
--- a/app/javascript/gabsocial/components/popover/popover_base.js
+++ b/app/javascript/gabsocial/components/popover/popover_base.js
@@ -49,10 +49,13 @@ class PopoverBase extends ImmutablePureComponent {
     onOpen: PropTypes.func.isRequired,
     onClose: PropTypes.func.isRequired,
     position: PropTypes.string,
-    openPopoverType: PropTypes.number,
+    openPopoverType: PropTypes.string,
     visible: PropTypes.bool,
     targetRef: PropTypes.node,
-    innerRef: PropTypes.node,
+    innerRef: PropTypes.oneOfType([
+      PropTypes.node,
+      PropTypes.func,
+    ]),
   }
 
   static defaultProps = {
@@ -124,7 +127,6 @@ class PopoverBase extends ImmutablePureComponent {
 
     console.log('targetRef:', targetRef)
 
-
     return (
       <Manager>
         <Popper
diff --git a/app/javascript/gabsocial/components/popover/popover_root.js b/app/javascript/gabsocial/components/popover/popover_root.js
index 04fe6dba..58f2e3b6 100644
--- a/app/javascript/gabsocial/components/popover/popover_root.js
+++ b/app/javascript/gabsocial/components/popover/popover_root.js
@@ -145,10 +145,7 @@ class PopoverRoot extends PureComponent {
   }
 
   render() {
-    const {
-      type,
-      props,
-    } = this.props
+    const { type, props } = this.props
     const visible = !!type
 
     console.log("POPOVER_COMPONENTS[type]:", type, POPOVER_COMPONENTS[type]);
diff --git a/app/javascript/gabsocial/components/popover/remote_user_info_popover.js b/app/javascript/gabsocial/components/popover/remote_user_info_popover.js
deleted file mode 100644
index 3fb505a5..00000000
--- a/app/javascript/gabsocial/components/popover/remote_user_info_popover.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import ImmutablePropTypes from 'react-immutable-proptypes'
-import ImmutablePureComponent from 'react-immutable-pure-component'
-import { shortNumberFormat } from '../../utils/numbers'
-import PopoverLayout from './popover_layout'
-import Avatar from '../avatar'
-import Button from '../button'
-import DisplayName from '../display_name'
-import Text from '../text'
-
-export default class RemoteUserInfoPopover extends ImmutablePureComponent {
-  static propTypes = {
-    account: ImmutablePropTypes.map.isRequired,
-  }
-
-  render() {
-    const { account } = this.props
-
-    const content = !account ? null : { __html: account.get('note_emojified') }
-
-    return (
-      <PopoverLayout>
-        <div className={[_s.default, _s.px15, _s.py15].join(' ')} style={{width: '260px'}}>
-          
-          <div className={[_s.default, _s.flexRow].join(' ')}>
-            <div className={[_s.default, _s.flexGrow1].join(' ')}>
-              <Avatar account={account} size={42} />
-              <DisplayName account={account} multiline noHover />
-            </div>
-            <div className={[_s.default, _s.marginLeftAuto].join(' ')}>
-              <Button
-                color='white'
-              >
-                <Text size='medium' weight='bold' color='inherit'>
-                  Following
-                </Text>
-              </Button>
-            </div>
-          </div>
-
-          <div className={[_s.default, _s.my10].join(' ')}>
-            <div className={_s.dangerousContent} dangerouslySetInnerHTML={content} />
-          </div>
-
-          <div className={[_s.default, _s.flexRow].join(' ')}>
-            <div>
-              <Text size='small'>
-                {shortNumberFormat(account.get('following_count'))}
-                Following
-              </Text>
-            </div>
-            <div>
-              <Text size='small'>
-                {shortNumberFormat(account.get('followers_count'))}
-                Followers
-              </Text>
-            </div>
-          </div>
-
-        </div>
-      </PopoverLayout>
-    )
-  }
-}
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/popover/status_visibility_popover.js b/app/javascript/gabsocial/components/popover/status_visibility_popover.js
index c2b210f7..6d2e6c31 100644
--- a/app/javascript/gabsocial/components/popover/status_visibility_popover.js
+++ b/app/javascript/gabsocial/components/popover/status_visibility_popover.js
@@ -106,7 +106,7 @@ class StatusVisibilityDropdown extends PureComponent {
                   onClick={() => this.handleChange(option.value)}
                   className={containerClasses}
                 >
-                  <Icon id={option.icon} height='16px' width='16px' className={iconClasses} />
+                  <Icon id={option.icon} size='16px' className={iconClasses} />
                   <div className={[_s.default, _s.px10, _s.pt2].join(' ')}>
                     <Text size='medium' color={isActive ? 'white' : 'primary'}>
                       {option.title}
diff --git a/app/javascript/gabsocial/components/popover/user_info_popover.js b/app/javascript/gabsocial/components/popover/user_info_popover.js
index c3eca9b8..362f9fb7 100644
--- a/app/javascript/gabsocial/components/popover/user_info_popover.js
+++ b/app/javascript/gabsocial/components/popover/user_info_popover.js
@@ -1,11 +1,10 @@
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
-import { shortNumberFormat } from '../../utils/numbers'
+import { NavLink } from 'react-router-dom'
 import PopoverLayout from './popover_layout'
+import AccountActionButton from '../account_action_button'
 import Avatar from '../avatar'
-import Button from '../button'
 import DisplayName from '../display_name'
-import Text from '../text'
 
 export default class UserInfoPopover extends ImmutablePureComponent {
   static propTypes = {
@@ -16,46 +15,32 @@ export default class UserInfoPopover extends ImmutablePureComponent {
     const { account } = this.props
 
     const content = !account ? null : { __html: account.get('note_emojified') }
+    const to = !account ? '' : `/${account.get('acct')}`
+    
+    // : todo : is remote
 
     return (
-      <PopoverLayout>
-        <div className={[_s.default, _s.px15, _s.py15].join(' ')} style={{width: '260px'}}>
+      <PopoverLayout width={280}>
+        <div className={[_s.default, _s.width100PC, _s.px15, _s.py15].join(' ')}>
           
           <div className={[_s.default, _s.flexRow].join(' ')}>
-            <div className={[_s.default, _s.flexGrow1].join(' ')}>
+            <NavLink
+              to={to}
+              className={[_s.default, _s.noUnderline, _s.flexGrow1].join(' ')}
+            >
               <Avatar account={account} size={42} />
               <DisplayName account={account} multiline noHover />
-            </div>
+            </NavLink>
+
             <div className={[_s.default, _s.marginLeftAuto].join(' ')}>
-              <Button
-                color='white'
-              >
-                <Text size='medium' weight='bold' color='inherit'>
-                  Following
-                </Text>
-              </Button>
+              <AccountActionButton account={account} />
             </div>
           </div>
 
-          <div className={[_s.default, _s.my10].join(' ')}>
+          <div className={[_s.default, _s.mt10].join(' ')}>
             <div className={_s.dangerousContent} dangerouslySetInnerHTML={content} />
           </div>
 
-          <div className={[_s.default, _s.flexRow].join(' ')}>
-            <div>
-              <Text size='small'>
-                {shortNumberFormat(account.get('following_count'))}
-                Following
-              </Text>
-            </div>
-            <div>
-              <Text size='small'>
-                {shortNumberFormat(account.get('followers_count'))}
-                Followers
-              </Text>
-            </div>
-          </div>
-
         </div>
       </PopoverLayout>
     )
diff --git a/app/javascript/gabsocial/components/profile_header.js b/app/javascript/gabsocial/components/profile_header.js
index cb745a25..e656196d 100644
--- a/app/javascript/gabsocial/components/profile_header.js
+++ b/app/javascript/gabsocial/components/profile_header.js
@@ -1,18 +1,11 @@
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'
+import { defineMessages, injectIntl } from 'react-intl'
 import Sticky from 'react-stickynode'
 import classNames from 'classnames/bind'
-import {
-  followAccount,
-  unfollowAccount,
-  blockAccount,
-  unblockAccount,
-} from '../actions/accounts'
-import { openPopover, closePopover } from '../actions/popover'
-import { initReport } from '../actions/reports'
-import { openModal } from '../actions/modal'
-import { unfollowModal, me } from '../initial_state'
+import { openPopover } from '../actions/popover'
+import { me } from '../initial_state'
+import AccountActionButton from './account_action_button'
 import Avatar from './avatar'
 import Button from './button'
 import DisplayName from './display_name'
@@ -25,72 +18,28 @@ import Text from './text'
 const cx = classNames.bind(_s)
 
 const messages = defineMessages({
-  follow: { id: 'follow', defaultMessage: 'Follow' },
-  following: { id: 'following', defaultMessage: 'Following' },
-  unfollow: { id: 'unfollow', defaultMessage: 'Unfollow' },
-  requested: { id: 'requested', defaultMessage: 'Requested' },
-  unblock: { id: 'unblock', defaultMessage: 'Unblock' },
-  blocked: { id: 'account.blocked', defaultMessage: 'Blocked' },
   followers: { id: 'account.followers', defaultMessage: 'Followers' },
   follows: { id: 'account.follows', defaultMessage: 'Follows' },
   profile: { id: 'account.profile', defaultMessage: 'Profile' },
+  headerPhoto: { id: 'header_photo', defaultMessage: 'Header photo' },
 })
 
-const mapStateToProps = (state) => ({
-  
-})
-
-const mapDispatchToProps = (dispatch, { intl }) => ({
+const mapDispatchToProps = (dispatch) => ({
 
   openProfileOptionsPopover(props) {
-    console.log('props:', props)
     dispatch(openPopover('PROFILE_OPTIONS', props))
   },
 
-  onFollow(account) {
-    if (account.getIn(['relationship', 'following']) || account.getIn(['relationship', 'requested'])) {
-      if (unfollowModal) {
-        dispatch(openModal('UNFOLLOW', {
-          accountId: account.get('id'),
-        }));
-      } else {
-        dispatch(unfollowAccount(account.get('id')));
-      }
-    } else {
-      dispatch(followAccount(account.get('id')));
-    }
-  },
-
-  onBlock(account) {
-    if (account.getIn(['relationship', 'blocking'])) {
-      dispatch(unblockAccount(account.get('id')));
-    } else {
-      dispatch(openModal('BLOCK_ACCOUNT', {
-        accountId: account.get('id'),
-      }));
-    }
-  },
-
-  onRepostToggle(account) {
-    if (account.getIn(['relationship', 'showing_reblogs'])) {
-      dispatch(followAccount(account.get('id'), false));
-    } else {
-      dispatch(followAccount(account.get('id'), true));
-    }
-  },
-
 });
 
 export default
-@connect(mapStateToProps, mapDispatchToProps)
+@connect(null, mapDispatchToProps)
 @injectIntl
 class ProfileHeader extends ImmutablePureComponent {
 
   static propTypes = {
     account: ImmutablePropTypes.map,
     intl: PropTypes.object.isRequired,
-    onFollow: PropTypes.func.isRequired,
-    onBlock: PropTypes.func.isRequired,
     openProfileOptionsPopover: PropTypes.func.isRequired,
   }
 
@@ -107,14 +56,6 @@ class ProfileHeader extends ImmutablePureComponent {
     })
   }
 
-  handleFollow = () => {
-    this.props.onFollow(this.props.account)
-  }
-
-  handleBlock = () => {
-    this.props.onBlock(this.props.account)
-  }
-
   // : todo :
   makeInfo = () => {
     const { account, intl } = this.props
@@ -178,64 +119,11 @@ class ProfileHeader extends ImmutablePureComponent {
 
     const headerSrc = !!account ? account.get('header') : ''
     const headerMissing = headerSrc.indexOf('/headers/original/missing.png') > -1 || !headerSrc
-    const avatarSize = headerMissing ? '75' : '150'
-
-    let buttonText = ''
-    let buttonOptions = {}
-
-    if (!account) {
-      //
-    } else {
-      if (!account.get('relationship')) {
-        // Wait until the relationship is loaded
-      } else {
-        const isRequested = account.getIn(['relationship', 'requested'])
-        const isBlocking = account.getIn(['relationship', 'blocking'])
-        const isFollowing = account.getIn(['relationship', 'following'])
-        const isBlockedBy = account.getIn(['relationship', 'blocked_by'])
-
-        if (isRequested) {
-          buttonText = intl.formatMessage(messages.requested)
-          buttonOptions = {
-            onClick: this.handleFollow,
-            color: 'primary',
-            backgroundColor: 'tertiary',
-          }
-        } else if (isBlocking) {
-          buttonText = intl.formatMessage(messages.blocked)
-          buttonOptions = {
-            onClick: this.handleBlock,
-            color: 'white',
-            backgroundColor: 'danger',
-          }
-        } else if (isFollowing) {
-          buttonText = intl.formatMessage(messages.following)
-          buttonOptions = {
-            onClick: this.handleFollow,
-            color: 'white',
-            backgroundColor: 'brand',
-          }
-        } else if (isBlockedBy) {
-          //Don't show
-        }
-        else {
-          buttonText = intl.formatMessage(messages.follow)
-          buttonOptions = {
-            onClick: this.handleFollow,
-            color: 'brand',
-            backgroundColor: 'none',
-            outline: true,
-          }
-        }
-      }
-    }
-
-    console.log('buttonOptions:', buttonText, buttonOptions)
-    console.log('account: ', account)
+    const avatarSize = headerMissing ? 75 : 150
 
     const avatarContainerClasses = cx({
       circle: 1,
-      marginTopNeg75PX: !headerMissing,
+      mtNeg75PX: !headerMissing,
       borderColorWhite: 1,
       border2PX: 1,
     })
@@ -263,7 +151,7 @@ class ProfileHeader extends ImmutablePureComponent {
           !headerMissing &&
           <div className={[_s.default, _s.height350PX, _s.width100PC, _s.radiusSmall, _s.overflowHidden].join(' ')}>
             <Image
-              alt='Cover Photo'
+              alt={intl.formatMessage(messages.headerPhoto)}
               className={_s.height350PX}
               src={headerSrc}
             />
@@ -281,7 +169,7 @@ class ProfileHeader extends ImmutablePureComponent {
               <DisplayName account={account} multiline large />
               {
                 account && account.get('locked') &&
-                <Icon id='lock-filled' height='14px' width='14px' className={[_s.mt10, _s.ml10].join(' ')} />
+                <Icon id='lock-filled' size='14px' className={[_s.mt10, _s.ml10].join(' ')} />
               }
               {
                 /* : todo :
@@ -294,7 +182,7 @@ class ProfileHeader extends ImmutablePureComponent {
           <Sticky enabled onStateChange={this.onStickyStateChange}>
             <div className={[_s.default, _s.flexRow, _s.backgroundColorSecondary3, _s.borderBottom1PX, _s.borderColorSecondary, _s.height53PX].join(' ')}>
               <div className={tabBarContainerClasses}>
-                <TabBar tabs={tabs} large />
+                <TabBar tabs={tabs} isLarge />
               </div>
 
               <div className={stickyBarContainerClasses}>
@@ -308,7 +196,7 @@ class ProfileHeader extends ImmutablePureComponent {
                 account && account.get('id') === me &&
                 <div className={[_s.default, _s.flexRow, _s.marginLeftAuto, _s.py5].join(' ')}>
                   <Button
-                    outline
+                    isOutline
                     backgroundColor='none'
                     color='brand'
                     className={[_s.justifyContentCenter, _s.alignItemsCenter].join(' ')}
@@ -331,10 +219,9 @@ class ProfileHeader extends ImmutablePureComponent {
                 <div className={[_s.default, _s.flexRow, _s.marginLeftAuto, _s.py5].join(' ')}>
                   <div ref={this.setOpenMoreNodeRef}>
                     <Button
-                      outline
+                      isOutline
                       icon='ellipsis'
-                      iconWidth='18px'
-                      iconHeight='18px'
+                      iconSize='18px'
                       iconClassName={_s.inheritFill}
                       color='brand'
                       backgroundColor='none'
@@ -345,11 +232,10 @@ class ProfileHeader extends ImmutablePureComponent {
 
                   <form action='https://chat.gab.com/private-message' method='POST'>
                     <Button
+                      isOutline
                       type='submit'
-                      outline
                       icon='chat'
-                      iconWidth='18px'
-                      iconHeight='18px'
+                      iconSize='18px'
                       iconClassName={_s.inheritFill}
                       color='brand'
                       backgroundColor='none'
@@ -358,23 +244,7 @@ class ProfileHeader extends ImmutablePureComponent {
                     <input type='hidden' value={account.get('username')} name='username' />
                   </form>
 
-                  {
-                    !!buttonText &&
-                    <Button
-                      {...buttonOptions}
-                      narrow
-                      className={[_s.justifyContentCenter, _s.alignItemsCenter].join(' ')}
-                    >
-                      <Text
-                        color='inherit'
-                        weight='bold'
-                        size='medium'
-                        className={_s.px10}
-                      >
-                        {buttonText}
-                      </Text>
-                    </Button>
-                  }
+                  <AccountActionButton account={account} />
 
                 </div>
               }
diff --git a/app/javascript/gabsocial/components/progress_bar.js b/app/javascript/gabsocial/components/progress_bar.js
index de7c7043..2c07afd5 100644
--- a/app/javascript/gabsocial/components/progress_bar.js
+++ b/app/javascript/gabsocial/components/progress_bar.js
@@ -24,28 +24,26 @@ export default class ProgressBar extends PureComponent {
       width: `${completed}%`,
     }
 
-    const containerOptions = {
-      href,
-      className: cx({
-        default: 1,
-        backgroundPanel: !small,
-        backgroundSubtle2: small,
-        noUnderline: 1,
-        circle: 1,
-        overflowHidden: 1,
-        cursorPointer: 1,
-        height22PX: !small,
-        height4PX: small,
-      }),
-    }
+    const containerClassName = cx({
+      default: 1,
+      backgroundPanel: !small,
+      backgroundSubtle2: small,
+      noUnderline: 1,
+      circle: 1,
+      overflowHidden: 1,
+      cursorPointer: 1,
+      height22PX: !small,
+      height4PX: small,
+    })
 
     return (
       <Button 
+        href={href}
         noClasses
-        {...containerOptions}
+        className={containerClassName}
       >
         <div className={[_s.default, _s.backgroundColorBrandDark, _s.circle, _s.height100PC].join(' ')} style={style} />
-        <div className={[_s.default, _s.positionAbsolute,  _s.width100PC, _s.height100PC, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
+        <div className={[_s.default, _s.posAbs,  _s.width100PC, _s.height100PC, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
           {
             !!title &&
             <Text size='small' weight='bold' color='white'>
diff --git a/app/javascript/gabsocial/components/rich_text_editor_bar.js b/app/javascript/gabsocial/components/rich_text_editor_bar.js
index c00e4218..5ae328e8 100644
--- a/app/javascript/gabsocial/components/rich_text_editor_bar.js
+++ b/app/javascript/gabsocial/components/rich_text_editor_bar.js
@@ -135,8 +135,7 @@ class RichTextEditorBar extends PureComponent {
           className={[_s.px10, _s.noSelect, _s.marginLeftAuto].join(' ')}
           icon='fullscreen'
           iconClassName={_s.inheritFill}
-          iconWidth='12px'
-          iconHeight='12px'
+          iconSize='12px'
           radiusSmall
         />
       </div>
@@ -196,8 +195,7 @@ class StyleButton extends PureComponent {
         title={label}
         icon={icon}
         iconClassName={_s.inheritFill}
-        iconWidth='12px'
-        iconHeight='12px'
+        iconSize='12px'
         radiusSmall
       />
     )
diff --git a/app/javascript/gabsocial/components/scrollable_list.js b/app/javascript/gabsocial/components/scrollable_list.js
index 3b49c487..e0978d2c 100644
--- a/app/javascript/gabsocial/components/scrollable_list.js
+++ b/app/javascript/gabsocial/components/scrollable_list.js
@@ -19,7 +19,10 @@ export default class ScrollableList extends PureComponent {
     isLoading: PropTypes.bool,
     showLoading: PropTypes.bool,
     hasMore: PropTypes.bool,
-    emptyMessage: PropTypes.string,
+    emptyMessage: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.object,
+    ]),
     children: PropTypes.node,
     onScrollToTop: PropTypes.func,
     onScroll: PropTypes.func,
diff --git a/app/javascript/gabsocial/components/search.js b/app/javascript/gabsocial/components/search.js
index 090556e6..a8e30550 100644
--- a/app/javascript/gabsocial/components/search.js
+++ b/app/javascript/gabsocial/components/search.js
@@ -31,9 +31,8 @@ class Search extends PureComponent {
     submitted: PropTypes.bool,
     onShow: PropTypes.func.isRequired,
     onChange: PropTypes.func.isRequired,
-    onKeyUp: PropTypes.func.isRequired,
     withOverlay: PropTypes.bool,
-    handleClear: PropTypes.func.isRequired,
+    onClear: PropTypes.func.isRequired,
     onSubmit: PropTypes.func.isRequired,
   }
 
@@ -78,7 +77,7 @@ class Search extends PureComponent {
     const {
       value,
       submitted,
-      handleClear,
+      onClear,
       withOverlay
     } = this.props
     const { expanded } = this.state
@@ -97,7 +96,7 @@ class Search extends PureComponent {
           onKeyUp={this.handleKeyUp}
           onFocus={this.handleFocus}
           onBlur={this.handleBlur}
-          onClear={handleClear}
+          onClear={onClear}
         />
 
         {
diff --git a/app/javascript/gabsocial/components/select.js b/app/javascript/gabsocial/components/select.js
index 03dc9b38..957f4328 100644
--- a/app/javascript/gabsocial/components/select.js
+++ b/app/javascript/gabsocial/components/select.js
@@ -1,22 +1,34 @@
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
+import Icon from './icon'
 
+/**
+ * Renders a select element with options
+ * @param {func} props.onChange - function to call on option selection
+ * @param {object} props.options - options for selection
+ * @param {string} [props.value] - value to set selected
+ */
 export default class Select extends ImmutablePureComponent {
 
   static propTypes = {
+    onChange: PropTypes.func.isRequired,
     options: PropTypes.oneOf([
       ImmutablePropTypes.map,
       PropTypes.object,
-    ]),
+    ]).isRequired,
     value: PropTypes.string,
-    onChange: PropTypes.func,
   }
 
+  updateOnProps = [
+    'options',
+    'value',
+  ]
+
   render() {
     const {
       value,
       options,
-      onChange
+      onChange,
     } = this.props
 
     return (
@@ -27,13 +39,18 @@ export default class Select extends ImmutablePureComponent {
           onChange={onChange}
         >
           {
-            options.map(option => (
+            options.map((option) => (
               <option key={`option-${option.value}`} value={option.value}>
                 {option.title}
               </option>
             ))
           }
         </select>
+        <Icon
+          id='select'
+          size='14px'
+          className={[_s.fillColorSecondary, _s.posAbs, _s.right0, _s.mr10, _s.bottom0, _s.mb15].join(' ')}
+        />
       </div>
     )
   }
diff --git a/app/javascript/gabsocial/components/sidebar.js b/app/javascript/gabsocial/components/sidebar.js
index 1483f5f9..f6608a8b 100644
--- a/app/javascript/gabsocial/components/sidebar.js
+++ b/app/javascript/gabsocial/components/sidebar.js
@@ -196,7 +196,7 @@ class Sidebar extends ImmutablePureComponent {
     return (
       <header role='banner' className={[_s.default, _s.flexGrow1, _s.z3, _s.alignItemsEnd].join(' ')}>
         <div className={[_s.default, _s.width240PX].join(' ')}>
-          <div className={[_s.default, _s.positionFixed, _s.top0, _s.height100PC].join(' ')}>
+          <div className={[_s.default, _s.posFixed, _s.top0, _s.height100PC].join(' ')}>
             <div className={[_s.default, _s.height100PC, _s.alignItemsStart, _s.width240PX, _s.pr15, _s.py10, _s.overflowYScroll].join(' ')}>
 
               <SidebarHeader />
@@ -228,7 +228,7 @@ class Sidebar extends ImmutablePureComponent {
 
               <Responsive min={Constants.BREAKPOINT_SMALL}>
                 <Button
-                  block
+                  isBlock
                   onClick={this.handleOpenComposeModal}
                   className={[_s.py15, _s.fontSize15PX, _s.fontWeightBold].join(' ')}
                 >
diff --git a/app/javascript/gabsocial/components/sidebar_section_item.js b/app/javascript/gabsocial/components/sidebar_section_item.js
index 13c52e2d..0c54701a 100644
--- a/app/javascript/gabsocial/components/sidebar_section_item.js
+++ b/app/javascript/gabsocial/components/sidebar_section_item.js
@@ -117,7 +117,7 @@ export default class SidebarSectionItem extends PureComponent {
           <div className={[_s.default]}>
             {
               icon && 
-              <Icon id={icon} className={iconClasses} width={iconSize} height={iconSize} />
+              <Icon id={icon} className={iconClasses} size={iconSize} />
             }
             
             {
diff --git a/app/javascript/gabsocial/components/status.js b/app/javascript/gabsocial/components/status.js
index 4b61eef1..1615bb1b 100644
--- a/app/javascript/gabsocial/components/status.js
+++ b/app/javascript/gabsocial/components/status.js
@@ -145,7 +145,7 @@ class Status extends ImmutablePureComponent {
   // Compensate height changes
   componentDidUpdate(prevProps, prevState, snapshot) {
     if (!prevState.loadedComments && this.state.loadedComments && this.props.status) {
-      const commentCount = this.props.status.get('replies_count');
+      const commentCount = this.props.status.get('replies_count')
       if (commentCount > 0) {
         this.props.onFetchComments(this.props.status.get('id'))
         this._measureHeight(prevState.height !== this.state.height)
@@ -166,50 +166,50 @@ class Status extends ImmutablePureComponent {
   }
 
   handleMoveUp = id => {
-    const { status, ancestorsIds, descendantsIds } = this.props;
+    const { status, ancestorsIds, descendantsIds } = this.props
 
     if (id === status.get('id')) {
-      this._selectChild(ancestorsIds.size - 1, true);
+      this._selectChild(ancestorsIds.size - 1, true)
     } else {
-      let index = ancestorsIds.indexOf(id);
+      let index = ancestorsIds.indexOf(id)
 
       if (index === -1) {
-        index = descendantsIds.indexOf(id);
-        this._selectChild(ancestorsIds.size + index, true);
+        index = descendantsIds.indexOf(id)
+        this._selectChild(ancestorsIds.size + index, true)
       } else {
-        this._selectChild(index - 1, true);
+        this._selectChild(index - 1, true)
       }
     }
   }
 
   handleMoveDown = id => {
-    const { status, ancestorsIds, descendantsIds } = this.props;
+    const { status, ancestorsIds, descendantsIds } = this.props
 
     if (id === status.get('id')) {
-      this._selectChild(ancestorsIds.size + 1, false);
+      this._selectChild(ancestorsIds.size + 1, false)
     } else {
-      let index = ancestorsIds.indexOf(id);
+      let index = ancestorsIds.indexOf(id)
 
       if (index === -1) {
-        index = descendantsIds.indexOf(id);
-        this._selectChild(ancestorsIds.size + index + 2, false);
+        index = descendantsIds.indexOf(id)
+        this._selectChild(ancestorsIds.size + index + 2, false)
       } else {
-        this._selectChild(index + 1, false);
+        this._selectChild(index + 1, false)
       }
     }
   }
 
   _selectChild(index, align_top) {
-    const container = this.node;
-    const element = container.querySelectorAll('.focusable')[index];
+    const container = this.node
+    const element = container.querySelectorAll('.focusable')[index]
 
     if (element) {
       if (align_top && container.scrollTop > element.offsetTop) {
-        element.scrollIntoView(true);
+        element.scrollIntoView(true)
       } else if (!align_top && container.scrollTop + container.clientHeight < element.offsetTop + element.offsetHeight) {
-        element.scrollIntoView(false);
+        element.scrollIntoView(false)
       }
-      element.focus();
+      element.focus()
     }
   }
 
@@ -358,7 +358,7 @@ class Status extends ImmutablePureComponent {
       reblogContent = status.get('contentHtml')
     }
 
-    const handlers = this.props.isMuted ? {} : {
+    const handlers = (this.props.isMuted || isChild) ? {} : {
       reply: this.handleHotkeyReply,
       favorite: this.handleHotkeyFavorite,
       repost: this.handleHotkeyRepost,
@@ -379,7 +379,7 @@ class Status extends ImmutablePureComponent {
             {status.get('content')}
           </div>
         </HotKeys>
-      );
+      )
     }
 
     if (status.get('filtered') || status.getIn(['reblog', 'filtered'])) {
@@ -421,7 +421,6 @@ class Status extends ImmutablePureComponent {
                 reduced={isChild}
                 media={status.get('media_attachments')}
                 sensitive={status.get('sensitive')}
-                height={110}
                 onOpenMedia={this.props.onOpenMedia}
                 cacheWidth={this.props.cacheMediaWidth}
                 defaultWidth={this.props.cachedMediaWidth}
@@ -501,7 +500,7 @@ class Status extends ImmutablePureComponent {
               {
                 !!status.get('quote') && !isChild &&
                 <div className={[_s.default, _s.mt10, _s.px10].join(' ')}>
-                  <Status status={status.get('quoted_status')} isChild />
+                  <Status status={status.get('quoted_status')} isChild intl={intl} />
                 </div>
               }
 
diff --git a/app/javascript/gabsocial/components/status_action_bar_item.js b/app/javascript/gabsocial/components/status_action_bar_item.js
index 9797f9df..02295993 100644
--- a/app/javascript/gabsocial/components/status_action_bar_item.js
+++ b/app/javascript/gabsocial/components/status_action_bar_item.js
@@ -43,7 +43,7 @@ export default class StatusActionBarItem extends PureComponent {
     return (
       <div className={[_s.default, _s.flexNormal, _s.px5].join(' ')}>
         <Button
-          block
+          isBlock
           radiusSmall
           backgroundColor='none'
           title={altTitle}
@@ -51,11 +51,9 @@ export default class StatusActionBarItem extends PureComponent {
           buttonRef={buttonRef}
           className={btnClasses}
           onClick={onClick}
-          active={active}
-          disabled={disabled}
+          isDisabled={disabled}
           icon={icon}
-          iconWidth='16px'
-          iconHeight='16px'
+          iconSize='16px'
           iconClassName={[_s.default, _s.mr10, _s.inheritFill].join(' ')}
         >
           <Text color='inherit' size='small' weight={weight}>
diff --git a/app/javascript/gabsocial/components/status_card.js b/app/javascript/gabsocial/components/status_card.js
index 24c5faf5..6d7eeb46 100644
--- a/app/javascript/gabsocial/components/status_card.js
+++ b/app/javascript/gabsocial/components/status_card.js
@@ -120,7 +120,7 @@ export default class Card extends ImmutablePureComponent {
     return (
       <div
         ref={this.setRef}
-        className={[_s.default, _s.backgroundColorSecondary3, _s.positionAbsolute, _s.top0, _s.right0, _s.bottom0, _s.left0, _s.statusCardVideo].join(' ')}
+        className={[_s.default, _s.backgroundColorSecondary3, _s.posAbs, _s.top0, _s.right0, _s.bottom0, _s.left0, _s.statusCardVideo].join(' ')}
         dangerouslySetInnerHTML={content}
       />
     )
@@ -162,8 +162,8 @@ export default class Card extends ImmutablePureComponent {
         <p className={[_s.default, _s.displayFlex, _s.text, _s.my5, _s.overflowWrapBreakWord, _s.colorSecondary, _s.fontSize13PX, _s.fontWeightNormal].join(' ')}>
           {trim(card.get('description') || '', maxDescription)}
         </p>
-        <span className={[_s.default, _s.marginTopAuto, _s.flexRow, _s.alignItemsCenter, _s.colorSecondary, _s.text, _s.displayFlex, _s.textOverflowEllipsis, _s.fontSize13PX].join(' ')}>
-          <Icon id='link' width='10px' height='10px' className={[_s.fillColorSecondary, _s.mr5].join(' ')} fixedWidth />
+        <span className={[_s.default, _s.mtAuto, _s.flexRow, _s.alignItemsCenter, _s.colorSecondary, _s.text, _s.displayFlex, _s.textOverflowEllipsis, _s.fontSize13PX].join(' ')}>
+          <Icon id='link' size='10px' className={[_s.fillColorSecondary, _s.mr5].join(' ')} fixedWidth />
           {provider}
         </span>
       </div>
@@ -172,7 +172,7 @@ export default class Card extends ImmutablePureComponent {
     // : todo : use <Image />
     let embed = ''
     const thumbnail = interactive ?
-      <img alt={''} src={cardImg} className={[_s.default, _s.objectFitCover, _s.positionAbsolute, _s.width100PC, _s.height100PC, _s.top0, _s.right0, _s.bottom0, _s.left0].join(' ')} />
+      <img alt={''} src={cardImg} className={[_s.default, _s.objectFitCover, _s.posAbs, _s.width100PC, _s.height100PC, _s.top0, _s.right0, _s.bottom0, _s.left0].join(' ')} />
       :
       <img alt={''} src={cardImg} className={[_s.default, _s.objectFitCover, _s.width330PX, _s.height220PX].join(' ')} />
 
@@ -191,16 +191,16 @@ export default class Card extends ImmutablePureComponent {
         <div className={[_s.default, _s.width100PC, _s.px10].join(' ')}>
           <div className={[_s.default, _s.overflowHidden, _s.width100PC, _s.borderColorSecondary2, _s.border1PX, _s.radiusSmall].join(' ')}>
             <div className={[_s.default, _s.width100PC].join(' ')}>
-              <div className={[_s.default, _s.width100PC, _s.paddingTop5625PC].join(' ')}>
+              <div className={[_s.default, _s.width100PC, _s.pt5625PC].join(' ')}>
                 { !!embed && embed}
                 { !embed && thumbnail}
                 { !embed &&
-                  <div className={[_s.default, _s.positionAbsolute, _s.top0, _s.right0, _s.left0, _s.bottom0, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
+                  <div className={[_s.default, _s.posAbs, _s.top0, _s.right0, _s.left0, _s.bottom0, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
                     <button
                       className={[_s.default, _s.cursorPointer, _s.backgroundColorOpaque, _s.radiusSmall, _s.py15, _s.px15].join(' ')}
                       onClick={this.handleEmbedClick}
                     >
-                      <Icon id={iconVariant} className={[_s.fillColorWhite].join(' ')} />
+                      <Icon id={iconVariant} size='22px' className={[_s.fillColorWhite].join(' ')} />
                     </button>
                   </div>
                 }
@@ -219,7 +219,7 @@ export default class Card extends ImmutablePureComponent {
     } else {
       embed = (
         <div className={[_s.default, _s.py15, _s.px15, _s.width72PX, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
-          <Icon id='website' width='22px' height='22px' className={_s.fillColorSecondary} />
+          <Icon id='website' size='22px' className={_s.fillColorSecondary} />
         </div>
       )
     }
diff --git a/app/javascript/gabsocial/components/status_check_box.js b/app/javascript/gabsocial/components/status_check_box.js
index b512e415..fde5e8eb 100644
--- a/app/javascript/gabsocial/components/status_check_box.js
+++ b/app/javascript/gabsocial/components/status_check_box.js
@@ -63,7 +63,7 @@ class StatusCheckBox extends ImmutablePureComponent {
       } else {
         media = (
           <Bundle fetchComponent={MediaGallery} loading={this.renderLoadingMediaGallery} >
-            {Component => <Component media={status.get('media_attachments')} sensitive={status.get('sensitive')} height={110} onOpenMedia={noop} />}
+            {Component => <Component media={status.get('media_attachments')} sensitive={status.get('sensitive')} onOpenMedia={noop} />}
           </Bundle>
         );
       }
diff --git a/app/javascript/gabsocial/components/status_content.js b/app/javascript/gabsocial/components/status_content.js
index 6e5e3e68..38162248 100644
--- a/app/javascript/gabsocial/components/status_content.js
+++ b/app/javascript/gabsocial/components/status_content.js
@@ -201,7 +201,7 @@ class StatusContent extends ImmutablePureComponent {
 
       const mentionLinks = status.get('mentions').map(item => (
         <Button
-          text
+          isText
           backgroundColor='none'
           to={`/${item.get('acct')}`}
           href={`/${item.get('acct')}`}
@@ -253,7 +253,7 @@ class StatusContent extends ImmutablePureComponent {
 
           <div className={spoilerContainerClasses}>
             <div className={[_s.default, _s.flexRow, _s.mr5].join(' ')}>
-              <Icon id='warning' height='14px' width='14px' className={[_s.fillColorBlack, _s.mt2, _s.mr5].join(' ')}/>
+              <Icon id='warning' size='14px' className={[_s.fillColorBlack, _s.mt2, _s.mr5].join(' ')}/>
               <div
                 className={_s.statusContent}
                 dangerouslySetInnerHTML={spoilerContent}
@@ -263,7 +263,7 @@ class StatusContent extends ImmutablePureComponent {
 
             <div className={[_s.default, _s.mt10, _s.alignItemsStart].join(' ')}>
               <Button
-                narrow
+                isNarrow
                 radiusSmall
                 backgroundColor='tertiary'
                 color='primary'
@@ -317,7 +317,7 @@ class StatusContent extends ImmutablePureComponent {
           {
             this.state.collapsed &&
             <Button
-              text
+              isText
               underlineOnHover
               color='primary'
               backgroundColor='none'
diff --git a/app/javascript/gabsocial/components/status_header.js b/app/javascript/gabsocial/components/status_header.js
index 079e06b7..4bc0befa 100644
--- a/app/javascript/gabsocial/components/status_header.js
+++ b/app/javascript/gabsocial/components/status_header.js
@@ -99,12 +99,11 @@ class StatusHeader extends ImmutablePureComponent {
               {
                 !reduced && !!me &&
                 <Button
-                  text
+                  isText
                   backgroundColor='none'
                   color='none'
                   icon='ellipsis'
-                  iconWidth='20px'
-                  iconHeight='20px'
+                  iconSize='20px'
                   iconClassName={_s.fillColorSecondary}
                   className={_s.marginLeftAuto}
                   onClick={this.handleOpenStatusOptionsPopover}
@@ -115,7 +114,7 @@ class StatusHeader extends ImmutablePureComponent {
 
             <div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.lineHeight15].join(' ')}>
               <Button
-                text
+                isText
                 underlineOnHover
                 backgroundColor='none'
                 color='none'
@@ -128,14 +127,14 @@ class StatusHeader extends ImmutablePureComponent {
 
               <DotTextSeperator />
 
-              <Icon id={visibilityIcon} width='12px' height='12px' className={[_s.default, _s.displayInline, _s.ml5, _s.fillColorSecondary].join(' ')} />
+              <Icon id={visibilityIcon} size='12px' className={[_s.default, _s.displayInline, _s.ml5, _s.fillColorSecondary].join(' ')} />
 
               {
                 !!status.get('group') &&
                 <Fragment>
                   <DotTextSeperator />
                   <Button
-                    text
+                    isText
                     underlineOnHover
                     backgroundColor='none'
                     color='none'
@@ -154,7 +153,7 @@ class StatusHeader extends ImmutablePureComponent {
                 <Fragment>
                   <DotTextSeperator />
                   <Button
-                    text
+                    isText
                     underlineOnHover
                     backgroundColor='none'
                     color='none'
diff --git a/app/javascript/gabsocial/components/status_list.js b/app/javascript/gabsocial/components/status_list.js
index 94d2192a..0ec1273e 100644
--- a/app/javascript/gabsocial/components/status_list.js
+++ b/app/javascript/gabsocial/components/status_list.js
@@ -89,7 +89,7 @@ class StatusList extends ImmutablePureComponent {
     withGroupAdmin: PropTypes.bool,
     onScrollToTop: PropTypes.func,
     onScroll: PropTypes.func,
-    promotion: PropTypes.object,
+    promotion: PropTypes.object, // : todo :
     promotedStatus: ImmutablePropTypes.map,
     fetchStatus: PropTypes.func,
   };
diff --git a/app/javascript/gabsocial/components/status_prepend.js b/app/javascript/gabsocial/components/status_prepend.js
index e7ca6bdd..a31754da 100644
--- a/app/javascript/gabsocial/components/status_prepend.js
+++ b/app/javascript/gabsocial/components/status_prepend.js
@@ -42,7 +42,7 @@ class StatusPrepend extends ImmutablePureComponent {
     return (
       <div className={[_s.default, _s.width100PC, _s.alignItemsStart, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
         <div className={[_s.default, _s.width100PC, _s.flexRow, _s.alignItemsCenter, _s.py5, _s.px15].join(' ')}>
-          <Icon id={iconId} width='12px' height='12px' className={[_s.fillColorSecondary, _s.mr5].join(' ')} />
+          <Icon id={iconId} size='12px' className={[_s.fillColorSecondary, _s.mr5].join(' ')} />
           {
             isRepost &&
             <div className={[_s.default, _s.flexRow].join(' ')}>
diff --git a/app/javascript/gabsocial/components/switch.js b/app/javascript/gabsocial/components/switch.js
index dbe299f8..c0e47b3c 100644
--- a/app/javascript/gabsocial/components/switch.js
+++ b/app/javascript/gabsocial/components/switch.js
@@ -45,7 +45,7 @@ export default class Switch extends PureComponent {
       height20PX: 1,
       width20PX: 1,
       circle: 1,
-      positionAbsolute: 1,
+      posAbs: 1,
       backgroundSubtle2: !checked,
       backgroundColorPrimary: checked,
       left0: !checked,
diff --git a/app/javascript/gabsocial/components/tab_bar.js b/app/javascript/gabsocial/components/tab_bar.js
index 06c3aab5..30b9ae2e 100644
--- a/app/javascript/gabsocial/components/tab_bar.js
+++ b/app/javascript/gabsocial/components/tab_bar.js
@@ -1,22 +1,40 @@
 import TabBarItem from './tab_bar_item'
 
+/**
+ * Renders a tab bar component
+ * @param {array} [props.tabs] - tab bar data for creating `TabBarItem`
+ * @param {bool} [props.isLarge] - to style the tab bar larger
+ */
 export default class TabBar extends PureComponent {
+
   static propTypes = {
     tabs: PropTypes.array,
-    large: PropTypes.bool,
+    isLarge: PropTypes.bool,
   }
 
   render() {
-    const { tabs, large } = this.props
+    const { tabs, isLarge } = this.props
 
     return (
       <div className={[_s.default, _s.height53PX, _s.px5, _s.flexRow].join(' ')}>
-        { !!tabs &&
+        {
+          // Check for if tabs exist or not.
+          // We don't `return null` because it maintains 53px height if no tabs.
+          !!tabs &&
           tabs.map((tab, i) => (
-            <TabBarItem key={`tab-bar-item-${i}`} {...tab} large={large} />
+            <TabBarItem
+              key={`tab-bar-item-${i}`}
+              title={tab.title}
+              onClick={tab.onClick}
+              icon={tab.icon}
+              to={tab.to}
+              active={tab.active}
+              isLarge={isLarge}
+            />
           ))
         }
       </div>
     )
   }
+
 }
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/tab_bar_item.js b/app/javascript/gabsocial/components/tab_bar_item.js
index 9cd467a3..e92b2750 100644
--- a/app/javascript/gabsocial/components/tab_bar_item.js
+++ b/app/javascript/gabsocial/components/tab_bar_item.js
@@ -4,19 +4,29 @@ import Button from './button'
 import Icon from './icon'
 import Text from './text'
 
+// Bind CSS Modules global variable `_s` to classNames module
 const cx = classNames.bind(_s)
 
+/**
+ * Renders a tab bar item component
+ * @param {string} [props.icon] - icon to use
+ * @param {bool} [props.isLarge] - to style the tab bar larger
+ * @param {bool} [props.isActive] - if item is active
+ * @param {func} [props.onClick] - function to call on click
+ * @param {string} [props.title] - title to use
+ * @param {string} [props.to] - location to direct to on click
+ */
 export default
 @withRouter
 class TabBarItem extends PureComponent {
+
   static propTypes = {
-    location: PropTypes.object.isRequired,
-    title: PropTypes.string,
-    onClick: PropTypes.func,
     icon: PropTypes.string,
+    isLarge: PropTypes.bool,
+    isActive: PropTypes.bool,
+    onClick: PropTypes.func,
+    title: PropTypes.string,
     to: PropTypes.string,
-    large: PropTypes.bool,
-    active: PropTypes.bool,
   }
 
   state = {
@@ -24,6 +34,8 @@ class TabBarItem extends PureComponent {
   }
 
   componentDidUpdate(prevProps) {
+    // If user navigates to different page, ensure tab bar item
+    // with this.props.to that is on location is set to active.
     if (this.props.location !== prevProps.location) {
       const isCurrent = this.props.to === this.props.location.pathname
 
@@ -39,13 +51,16 @@ class TabBarItem extends PureComponent {
       to,
       onClick,
       location,
-      large,
+      isLarge,
       icon,
-      active
+      isActive,
     } = this.props
     const { isCurrent } = this.state
 
-    const isActive = active || (isCurrent === -1 ? to === location.pathname : false)
+    // Combine state, props, location to make absolutely
+    // sure of active status.
+    const active = isActive ||
+      (isCurrent === -1 ? to === location.pathname : false)
 
     const containerClasses = cx({
       default: 1,
@@ -60,10 +75,10 @@ class TabBarItem extends PureComponent {
       outlineNone: 1,
       cursorPointer: 1,
       backgroundTransparent: 1,
-      borderColorTransparent: !isActive,
-      borderColorBrand: isActive,
-      mr5: large,
-      mr2: !large,
+      borderColorTransparent: !active,
+      borderColorBrand: active,
+      mr5: isLarge,
+      mr2: !isLarge,
     })
 
     const textParentClasses = cx({
@@ -72,21 +87,21 @@ class TabBarItem extends PureComponent {
       alignItemsCenter: 1,
       justifyContentCenter: 1,
       radiusSmall: 1,
-      px10: !large,
-      px15: large,
-      backgroundSubtle2Dark_onHover: !isActive,
+      px10: !isLarge,
+      px15: isLarge,
+      backgroundSubtle2Dark_onHover: !active,
     })
 
     const textOptions = {
-      size: !!large ? 'normal' : 'small',
-      color: isActive ? 'brand' : large ? 'secondary' : 'primary',
-      weight: isActive ? 'bold' : large ? 'medium' : 'normal',
+      size: !!isLarge ? 'normal' : 'small',
+      color: active ? 'brand' : isLarge ? 'secondary' : 'primary',
+      weight: active ? 'bold' : isLarge ? 'medium' : 'normal',
     }
 
     const iconOptions = {
       id: icon,
-      width: !!large ? 20 : 14,
-      height: !!large ? 20 : 14,
+      width: !!isLarge ? 20 : 14,
+      height: !!isLarge ? 20 : 14,
     }
 
     return (
@@ -97,17 +112,20 @@ class TabBarItem extends PureComponent {
         noClasses
       >
         <span className={textParentClasses}>
-          { !!title &&
-          <Text {...textOptions}>
-            {title}
-          </Text>
+          {
+            !!title &&
+            <Text {...textOptions}>
+              {title}
+            </Text>
           }
 
-          { !!icon &&
+          {
+            !!icon &&
             <Icon {...iconOptions} />
           }
         </span>
       </Button>
     )
   }
+
 }
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/text.js b/app/javascript/gabsocial/components/text.js
index 840401a5..ec08356b 100644
--- a/app/javascript/gabsocial/components/text.js
+++ b/app/javascript/gabsocial/components/text.js
@@ -1,7 +1,9 @@
 import classNames from 'classnames/bind'
 
+// Bind CSS Modules global variable `_s` to classNames module
 const cx = classNames.bind(_s)
 
+// Define colors for enumeration for Text component `color` prop
 const COLORS = {
   primary: 'primary',
   secondary: 'secondary',
@@ -10,9 +12,9 @@ const COLORS = {
   error: 'error',
   white: 'white',
   inherit: 'inherit',
-  pro: 'pro',
 }
 
+// Define sizes for enumeration for Text component `size` prop
 const SIZES = {
   extraSmall: 'extraSmall',
   small: 'small',
@@ -22,6 +24,7 @@ const SIZES = {
   extraLarge: 'extraLarge',
 }
 
+// Define weights for enumeration for Text component `weight` prop
 const WEIGHTS = {
   normal: 'normal',
   medium: 'medium',
@@ -29,27 +32,42 @@ const WEIGHTS = {
   extraBold: 'extraBold',
 }
 
+// Define alignments for enumeration for Text component `align` prop
 const ALIGNMENTS = {
   center: 'center',
   left: 'left',
 }
 
+/**
+ * Renders a text component
+ * @param {string} [props.align='left] - the alignment of the text
+ * @param {bool} [props.isBadge] - to style the text as a badge
+ * @param {string} [props.className] - add custom className
+ * @param {string} [props.color='primary'] color of the text
+ * @param {bool} [props.hasUnderline] - if the text is underlined
+ * @param {string} [props.htmlFor] - define the `for` attribute on the tag
+ * @param {string} [props.size='normal'] size of the text
+ * @param {string} [props.tagName='span'] tagName of the text element
+ * @param {string} [props.weight='normal'] weight of the text
+ */
 export default class Text extends PureComponent {
+
   static propTypes = {
-    tagName: PropTypes.string,
-    className: PropTypes.string,
-    children: PropTypes.any,
-    color: PropTypes.oneOf(Object.keys(COLORS)),
-    size: PropTypes.oneOf(Object.keys(SIZES)),
-    weight: PropTypes.oneOf(Object.keys(WEIGHTS)),
     align: PropTypes.oneOf(Object.keys(ALIGNMENTS)),
-    underline: PropTypes.bool,
-    badge: PropTypes.bool,
+    isBadge: PropTypes.bool,
+    children: PropTypes.any,
+    className: PropTypes.string,
+    color: PropTypes.oneOf(Object.keys(COLORS)),
+    hasUnderline: PropTypes.bool,
     htmlFor: PropTypes.string,
+    size: PropTypes.oneOf(Object.keys(SIZES)),
+    tagName: PropTypes.string,
+    weight: PropTypes.oneOf(Object.keys(WEIGHTS)),
   }
 
   static defaultProps = {
     tagName: 'span',
+    align: ALIGNMENTS.left,
     color: COLORS.primary,
     size: SIZES.normal,
     weight: WEIGHTS.normal,
@@ -63,26 +81,26 @@ export default class Text extends PureComponent {
       color,
       size,
       weight,
-      underline,
       align,
       htmlFor,
-      badge
+      isBadge,
+      hasUnderline,
     } = this.props
 
+    // Style the component according to props
     const classes = cx(className, {
       default: 1,
       text: 1,
 
-      radiusSmall: badge,
-      lineHeight15: badge,
-      px5: badge,
+      radiusSmall: isBadge,
+      lineHeight15: isBadge,
+      px5: isBadge,
 
       colorPrimary: color === COLORS.primary,
       colorSecondary: color === COLORS.secondary,
       colorTertiary: color === COLORS.tertiary,
       colorBrand: color === COLORS.brand,
       colorWhite: color === COLORS.white,
-      colorGabPro: color === COLORS.pro,
       inherit: color === COLORS.inherit,
 
       fontSize19PX: size === SIZES.large,
@@ -99,7 +117,7 @@ export default class Text extends PureComponent {
       textAlignLeft: align === ALIGNMENTS.left,
       textAlignCenter: align === ALIGNMENTS.center,
 
-      underline: underline,
+      underline: hasUnderline,
     })
 
     return React.createElement(
@@ -111,4 +129,5 @@ export default class Text extends PureComponent {
       children,
     )
   }
+
 }
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/timeline_queue_button_header.js b/app/javascript/gabsocial/components/timeline_queue_button_header.js
index f5025547..e1544de0 100644
--- a/app/javascript/gabsocial/components/timeline_queue_button_header.js
+++ b/app/javascript/gabsocial/components/timeline_queue_button_header.js
@@ -27,7 +27,7 @@ export default class TimelineQueueButtonHeader extends PureComponent {
 
     const classes = cx({
       default: 1,
-      positionFixed: 1,
+      posFixed: 1,
       displayNone: !hasItems,
       top80PX: 1,
       z4: 1,
@@ -37,7 +37,7 @@ export default class TimelineQueueButtonHeader extends PureComponent {
     return (
       <div className={classes}>
         <Button
-          narrow
+          isNarrow
           color='white'
           backgroundColor='brand'
           onClick={onClick}
diff --git a/app/javascript/gabsocial/components/upload_area.js b/app/javascript/gabsocial/components/upload_area.js
index 77b8cde6..27c0efd9 100644
--- a/app/javascript/gabsocial/components/upload_area.js
+++ b/app/javascript/gabsocial/components/upload_area.js
@@ -54,7 +54,7 @@ class UploadArea extends PureComponent {
       >
         {({ backgroundOpacity, backgroundScale }) => (
           <div
-            className={[_s.default, _s.alignItemsCenter, _s.justifyContentCenter, _s.backgroundColorPrimaryOpaque, _s.width100PC, _s.height100PC, _s.positionAbsolute, _s.top0, _s.rightAuto, _s.bottomAuto, _s.left0].join(' ')}
+            className={[_s.default, _s.alignItemsCenter, _s.justifyContentCenter, _s.backgroundColorPrimaryOpaque, _s.width100PC, _s.height100PC, _s.posAbs, _s.top0, _s.rightAuto, _s.bottomAuto, _s.left0].join(' ')}
             style={{
               visibility: active ? 'visible' : 'hidden',
               opacity: backgroundOpacity
@@ -62,7 +62,7 @@ class UploadArea extends PureComponent {
           >
             <div className={[_s.default, _s.width340PX, _s.height260PX, _s.px10, _s.py10].join(' ')}>
               <div
-                className={[_s.default, _s.positionAbsolute, _s.backgroundColorPrimary, _s.height100PC, _s.width100PC, _s.radiusSmall].join(' ')}
+                className={[_s.default, _s.posAbs, _s.backgroundColorPrimary, _s.height100PC, _s.width100PC, _s.radiusSmall].join(' ')}
                 style={{
                   transform: `scale(${backgroundScale})`
                 }}
diff --git a/app/javascript/gabsocial/components/user_stat.js b/app/javascript/gabsocial/components/user_stat.js
index 0825cdc0..a0a2978d 100644
--- a/app/javascript/gabsocial/components/user_stat.js
+++ b/app/javascript/gabsocial/components/user_stat.js
@@ -1,11 +1,21 @@
 import { NavLink } from 'react-router-dom'
 import Text from './text'
 
+/**
+ * Renders a user stat component
+ * @param {string} props.title - bottom title
+ * @param {string} props.to - location to go to on click
+ * @param {string} props.value - top value
+ */
 export default class UserStat extends PureComponent {
+
   static propTypes = {
-    to: PropTypes.string,
-    title: PropTypes.string,
-    value: PropTypes.string,
+    title: PropTypes.string.isRequired,
+    to: PropTypes.string.isRequired,
+    value: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.object,
+    ]).isRequired,
   }
 
   state = {
@@ -29,16 +39,17 @@ export default class UserStat extends PureComponent {
         to={to}
         title={`${value} ${title}`}
         className={[_s.default, _s.flexGrow1, _s.cursorPointer, _s.noUnderline, _s.pr15].join(' ')}
-        onMouseEnter={() => this.handleOnMouseEnter()}
-        onMouseLeave={() => this.handleOnMouseLeave()}
+        onMouseEnter={this.handleOnMouseEnter}
+        onMouseLeave={this.handleOnMouseLeave}
       >
         <Text size='large' weight='bold' color='brand'>
           {value}
         </Text>
-        <Text size='small' weight='medium' color='secondary' underline={hovering}>
+        <Text size='small' weight='medium' color='secondary' hasUnderline={hovering}>
           {title}
         </Text>
       </NavLink>
     )
   }
+
 }
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/video.js b/app/javascript/gabsocial/components/video.js
index 79fee3f8..7bde0448 100644
--- a/app/javascript/gabsocial/components/video.js
+++ b/app/javascript/gabsocial/components/video.js
@@ -456,7 +456,7 @@ class Video extends PureComponent {
 
     const seekHandleClasses = cx({
       default: 1,
-      positionAbsolute: 1,
+      posAbs: 1,
       circle: 1,
       px10: 1,
       py10: 1,
@@ -472,13 +472,13 @@ class Video extends PureComponent {
       default: 1,
       radiusSmall: 1,
       mt10: 1,
-      positionAbsolute: 1,
+      posAbs: 1,
       height4PX: 1,
     })
 
     const volumeControlClasses = cx({
       default: 1,
-      positionAbsolute: 1,
+      posAbs: 1,
       backgroundColorOpaque: 1,
       videoPlayerVolume: 1,
       height122PX: 1,
@@ -503,7 +503,7 @@ class Video extends PureComponent {
             width={32}
             height={32}
             ref={this.setCanvasRef}
-            className={[_s.default, _s.positionAbsolute, _s.height100PC, _s.width100PC, _s.top0, _s.left0].join(' ')}
+            className={[_s.default, _s.posAbs, _s.height100PC, _s.width100PC, _s.top0, _s.left0].join(' ')}
           />
         }
 
@@ -550,19 +550,19 @@ class Video extends PureComponent {
           ref={this.setVolumeRef}
         >
           <div
-            className={[_s.default, _s.radiusSmall, _s.my10, _s.positionAbsolute, _s.width4PX, _s.ml10, _s.backgroundColorPrimaryOpaque].join(' ')}
+            className={[_s.default, _s.radiusSmall, _s.my10, _s.posAbs, _s.width4PX, _s.ml10, _s.backgroundColorPrimaryOpaque].join(' ')}
             style={{
               height: '102px',
             }}
           />
           <div
-            className={[_s.default, _s.radiusSmall, _s.my10, _s.bottom0, _s.positionAbsolute, _s.width4PX, _s.ml10, _s.backgroundColorPrimary].join(' ')}
+            className={[_s.default, _s.radiusSmall, _s.my10, _s.bottom0, _s.posAbs, _s.width4PX, _s.ml10, _s.backgroundColorPrimary].join(' ')}
             style={{
               height: `${volumeHeight}px`
             }}
           />
           <span
-            className={[_s.default, _s.cursorPointer, _s.positionAbsolute, _s.circle, _s.px5, _s.boxShadow1, _s.marginBottomNeg5PX, _s.py5, _s.backgroundColorPrimary, _s.z3].join(' ')}
+            className={[_s.default, _s.cursorPointer, _s.posAbs, _s.circle, _s.px5, _s.boxShadow1, _s.marginBottomNeg5PX, _s.py5, _s.backgroundColorPrimary, _s.z3].join(' ')}
             tabIndex='0'
             style={{
               marginLeft: '7px',
@@ -571,7 +571,7 @@ class Video extends PureComponent {
           />
         </div>
 
-        <div className={[_s.default, _s.z2, _s.px15, _s.videoPlayerControlsBackground, _s.positionAbsolute, _s.bottom0, _s.right0, _s.left0].join(' ')}>
+        <div className={[_s.default, _s.z2, _s.px15, _s.videoPlayerControlsBackground, _s.posAbs, _s.bottom0, _s.right0, _s.left0].join(' ')}>
 
           <div
             className={[_s.default, _s.cursorPointer, _s.height22PX, _s.videoPlayerSeek].join(' ')}
@@ -594,13 +594,12 @@ class Video extends PureComponent {
 
           <div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.pb5, _s.noSelect].join(' ')}>
             <Button
-              narrow
+              isNarrow
               backgroundColor='none'
               aria-label={intl.formatMessage(paused ? messages.play : messages.pause)}
               onClick={this.togglePlay}
               icon={paused ? 'play' : 'pause'}
-              iconWidth='16px'
-              iconHeight='16px'
+              iconSize='16px'
               iconClassName={_s.fillColorWhite}
               className={_s.pl0}
             />
@@ -613,14 +612,13 @@ class Video extends PureComponent {
               </Text>
 
               <Button
-                narrow
+                isNarrow
                 backgroundColor='none'
                 type='button'
                 aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)}
                 onClick={this.toggleMute}
                 icon={muted ? 'audio-mute' : 'audio'}
-                iconWidth='24px'
-                iconHeight='24px'
+                iconSize='24px'
                 iconClassName={_s.fillColorWhite}
                 className={[_s.px10, _s.ml10].join(' ')}
                 onMouseEnter={this.handleMouseEnterAudio}
@@ -628,13 +626,12 @@ class Video extends PureComponent {
               />
 
               <Button
-                narrow
+                isNarrow
                 backgroundColor='none'
                 aria-label={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)}
                 onClick={this.toggleFullscreen}
                 icon={fullscreen ? 'minimize-fullscreen' : 'fullscreen'}
-                iconWidth='20px'
-                iconHeight='20px'
+                iconSize='20px'
                 iconClassName={_s.fillColorWhite}
                 className={[_s.px10, _s.pr0].join(' ')}
               />
diff --git a/app/javascript/gabsocial/containers/status_container.js b/app/javascript/gabsocial/containers/status_container.js
index 3c14d8f8..5ed347f8 100644
--- a/app/javascript/gabsocial/containers/status_container.js
+++ b/app/javascript/gabsocial/containers/status_container.js
@@ -276,4 +276,4 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
   },
 });
 
-export default injectIntl(connect(makeMapStateToProps, mapDispatchToProps)(Status));
+export default connect(makeMapStateToProps, mapDispatchToProps)(Status);
diff --git a/app/javascript/gabsocial/features/compose/components/compose_extra_button.js b/app/javascript/gabsocial/features/compose/components/compose_extra_button.js
index 6a75bb53..84b4a535 100644
--- a/app/javascript/gabsocial/features/compose/components/compose_extra_button.js
+++ b/app/javascript/gabsocial/features/compose/components/compose_extra_button.js
@@ -47,13 +47,12 @@ export default class ComposeExtraButton extends PureComponent {
         <Button
           className={btnClasses}
           title={title}
-          disabled={disabled}
+          isDisabled={disabled}
           onClick={onClick}
           backgroundColor='none'
           iconClassName={iconClasses}
           icon={icon}
-          iconWidth={iconSize}
-          iconHeight={iconSize}
+          iconSize={iconSize}
         />
         {children}
       </div>
diff --git a/app/javascript/gabsocial/features/compose/components/compose_form/compose_form.js b/app/javascript/gabsocial/features/compose/components/compose_form/compose_form.js
index 9a219a7a..dc0d5b16 100644
--- a/app/javascript/gabsocial/features/compose/components/compose_form/compose_form.js
+++ b/app/javascript/gabsocial/features/compose/components/compose_form/compose_form.js
@@ -43,10 +43,6 @@ class ComposeForm extends ImmutablePureComponent {
     composeFocused: false,
   }
 
-  static contextTypes = {
-    router: PropTypes.object,
-  };
-
   static propTypes = {
     intl: PropTypes.object.isRequired,
     edit: PropTypes.bool,
@@ -81,6 +77,7 @@ class ComposeForm extends ImmutablePureComponent {
     scheduledAt: PropTypes.instanceOf(Date),
     setScheduledAt: PropTypes.func.isRequired,
     replyToId: PropTypes.string,
+    reduxReplyToId: PropTypes.string,
     hasPoll: PropTypes.bool,
   };
 
@@ -141,7 +138,7 @@ class ComposeForm extends ImmutablePureComponent {
       return;
     }
 
-    this.props.onSubmit(this.context.router ? this.context.router.history : null, this.props.group);
+    this.props.onSubmit(this.props.group, this.props.replyToId);
   }
 
   onSuggestionsClearRequested = () => {
@@ -234,15 +231,18 @@ class ComposeForm extends ImmutablePureComponent {
       scheduledAt,
       spoiler,
       replyToId,
+      reduxReplyToId,
       hasPoll,
       isUploading,
       isMatch,
+      isChangingUpload,
+      isSubmitting,
     } = this.props
-    const disabled = this.props.isSubmitting;
+    const disabled = isSubmitting
     const text = [this.props.spoilerText, countableText(this.props.text)].join('');
-    const disabledButton = disabled || isUploading || this.props.isChangingUpload || length(text) > maxPostCharacterCount || (text.length !== 0 && text.trim().length === 0 && !anyMedia);
+    const disabledButton = disabled || isUploading || isChangingUpload || length(text) > maxPostCharacterCount || (text.length !== 0 && text.trim().length === 0 && !anyMedia);
     const shouldAutoFocus = autoFocus && !showSearch && !isMobile(window.innerWidth)
-
+    
     const parentContainerClasses = cx({
       default: 1,
       width100PC: 1,
@@ -272,6 +272,12 @@ class ComposeForm extends ImmutablePureComponent {
       marginLeftAuto: shouldCondense,
     })
 
+    const commentPublishBtnClasses = cx({
+      default: 1,
+      justifyContentCenter: 1,
+      displayNone: length(this.props.text) === 0 || anyMedia,
+    })
+
     return (
       <div className={parentContainerClasses}>
         <div className={[_s.default, _s.flexRow, _s.width100PC].join(' ')}>
@@ -288,6 +294,16 @@ class ComposeForm extends ImmutablePureComponent {
             onClick={this.handleClick}
           >
 
+            {
+              !!reduxReplyToId && !shouldCondense &&
+              <div className={[_s.default, _s.px15, _s.py10, _s.mt5].join(' ')}>
+                <StatusContainer
+                  id={reduxReplyToId}
+                  isChild
+                />
+              </div>
+            }
+
             {
               !!spoiler &&
               <div className={[_s.default, _s.px15, _s.py10, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
@@ -311,7 +327,7 @@ class ComposeForm extends ImmutablePureComponent {
 
             <AutosuggestTextbox
               ref={(isModalOpen && shouldCondense) ? null : this.setAutosuggestTextarea}
-              placeholder={intl.formatMessage(shouldCondense ? messages.commentPlaceholder : messages.placeholder)}
+              placeholder={intl.formatMessage((shouldCondense || !!reduxReplyToId) ? messages.commentPlaceholder : messages.placeholder)}
               disabled={disabled}
               value={this.props.text}
               onChange={this.handleChange}
@@ -350,7 +366,7 @@ class ComposeForm extends ImmutablePureComponent {
             }
 
             {
-              quoteOfId &&
+              !!quoteOfId &&
               <div className={[_s.default, _s.px15, _s.py10, _s.mt5].join(' ')}>
                 <StatusContainer
                   id={quoteOfId}
@@ -386,10 +402,10 @@ class ComposeForm extends ImmutablePureComponent {
                 <EmojiPickerButton small={shouldCondense} isMatch={isMatch} />
 
                 {
-                  shouldCondense /* && (hasPoll || anyMedia || text) */ &&
-                  <div className={[_s.default, _s.justifyContentCenter].join(' ')}>
+                  shouldCondense &&
+                  <div className={commentPublishBtnClasses}>
                     <Button
-                      narrow
+                      isNarrow
                       onClick={this.handleSubmit}
                       disabled={disabledButton}
                       className={_s.px10}
@@ -405,12 +421,11 @@ class ComposeForm extends ImmutablePureComponent {
                 <CharacterCounter max={maxPostCharacterCount} text={text} />
               }
 
-              { /* : todo : show send on shouldCondense if any text */
-                !shouldCondense &&
+              {
+                !shouldCondense && !disabledButton &&
                 <Button
                   className={[_s.fontSize15PX, _s.px15].join(' ')}
                   onClick={this.handleSubmit}
-                  disabled={disabledButton}
                 >
                   {intl.formatMessage(scheduledAt ? messages.schedulePost : messages.publish)}
                 </Button>
diff --git a/app/javascript/gabsocial/features/compose/components/media_upload_item.js b/app/javascript/gabsocial/features/compose/components/media_upload_item.js
index a6353c03..7ca859a4 100644
--- a/app/javascript/gabsocial/features/compose/components/media_upload_item.js
+++ b/app/javascript/gabsocial/features/compose/components/media_upload_item.js
@@ -32,8 +32,8 @@ const mapDispatchToProps = (dispatch) => ({
     dispatch(changeUploadCompose(id, { description }));
   },
 
-  onSubmit (router) {
-    dispatch(submitCompose(router));
+  onSubmit () {
+    dispatch(submitCompose());
   },
 
 });
@@ -69,7 +69,7 @@ class Upload extends ImmutablePureComponent {
 
   handleSubmit = () => {
     this.handleInputBlur()
-    this.props.onSubmit(this.context.router.history)
+    this.props.onSubmit()
   }
 
   handleUndoClick = e => {
@@ -117,7 +117,7 @@ class Upload extends ImmutablePureComponent {
 
     const descriptionContainerClasses = cx({
       default: 1,
-      positionAbsolute: 1,
+      posAbs: 1,
       right0: 1,
       bottom0: 1,
       left0: 1,
@@ -149,10 +149,9 @@ class Upload extends ImmutablePureComponent {
             title={intl.formatMessage(messages.delete)}
             onClick={this.handleUndoClick}
             icon='close'
-            iconWidth='10px'
-            iconHeight='10px'
+            iconSize='10px'
             iconClassName={_s.inherit}
-            className={[_s.top0, _s.right0, _s.positionAbsolute, _s.mr5, _s.mt5, _s.px10].join(' ')}
+            className={[_s.top0, _s.right0, _s.posAbs, _s.mr5, _s.mt5, _s.px10].join(' ')}
           />
 
           <div className={descriptionContainerClasses}>
diff --git a/app/javascript/gabsocial/features/compose/components/poll_form.js b/app/javascript/gabsocial/features/compose/components/poll_form.js
index da2cd037..dd68ed2f 100644
--- a/app/javascript/gabsocial/features/compose/components/poll_form.js
+++ b/app/javascript/gabsocial/features/compose/components/poll_form.js
@@ -34,16 +34,15 @@ class PollFormOption extends ImmutablePureComponent {
     onFetchSuggestions: PropTypes.func.isRequired,
     onSuggestionSelected: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
-  };
+  }
 
   handleOptionTitleChange = e => {
     this.props.onChange(this.props.index, e.target.value);
-  };
+  }
 
   handleOptionRemove = () => {
     this.props.onRemove(this.props.index);
-  };
-
+  }
 
   handleToggleMultiple = e => {
     this.props.onToggleMultiple();
@@ -103,13 +102,11 @@ class PollFormOption extends ImmutablePureComponent {
         {
           index > 1 &&
           <Button
-            narrow
-            circle
+            isNarrow
             backgroundColor='none'
             className={[_s.ml5, _s.justifyContentCenter].join(' ')}
             icon='close'
-            iconWidth='8px'
-            iconHeight='8px'
+            iconSize='8px'
             iconClassName={_s.fillColorSecondary}
             disabled={index <= 1}
             title={intl.formatMessage(messages.remove_option)}
@@ -117,7 +114,7 @@ class PollFormOption extends ImmutablePureComponent {
           />
         }
       </li>
-    );
+    )
   }
 
 }
@@ -139,19 +136,15 @@ class PollForm extends ImmutablePureComponent {
     onFetchSuggestions: PropTypes.func.isRequired,
     onSuggestionSelected: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
-  };
+  }
 
-  handleAddOption = () => {
-    this.props.onAddOption('');
-  };
-
-  handleSelectDuration = e => {
-    this.props.onChangeSettings(e.target.value, this.props.isMultiple);
-  };
+  handleSelectDuration = (e) => {
+    this.props.onChangeSettings(e.target.value, this.props.isMultiple)
+  }
 
   handleToggleMultiple = () => {
-    this.props.onChangeSettings(this.props.expiresIn, !this.props.isMultiple);
-  };
+    this.props.onChangeSettings(this.props.expiresIn, !this.props.isMultiple)
+  }
 
   render() {
     const {
@@ -161,8 +154,9 @@ class PollForm extends ImmutablePureComponent {
       onChangeOption,
       onRemoveOption,
       intl,
+      onAddOption,
       ...otherProps
-    } = this.props;
+    } = this.props
 
     if (!options) return null
 
@@ -189,14 +183,13 @@ class PollForm extends ImmutablePureComponent {
           {
             options.size < 4 && (
               <Button
-                outline
+                isOutline
                 backgroundColor='none'
                 color='brand'
                 className={[_s.alignItemsCenter, _s.mr10].join(' ')}
-                onClick={this.handleAddOption}
+                onClick={onAddOption}
                 icon='add'
-                iconWidth='14px'
-                iconHeight='14px'
+                iconSize='14px'
                 iconClassName={_s.mr5}
               >
                 <Text color='inherit'>
diff --git a/app/javascript/gabsocial/features/compose/components/search_results/search_results.js b/app/javascript/gabsocial/features/compose/components/search_results/search_results.js
index 86876282..1de34da4 100644
--- a/app/javascript/gabsocial/features/compose/components/search_results/search_results.js
+++ b/app/javascript/gabsocial/features/compose/components/search_results/search_results.js
@@ -12,6 +12,8 @@ import Button from '../../../../components/button'
 import Text from '../../../../components/text'
 import Account from '../../../../components/account'
 
+// : todo :
+
 export default class SearchResults extends ImmutablePureComponent {
 
   static propTypes = {
@@ -51,7 +53,7 @@ export default class SearchResults extends ImmutablePureComponent {
             </Heading>
             <div className={[_s.default, _s.marginLeftAuto].join(' ')}>
               <Button
-                text
+                isText
                 backgroundColor='none'
                 color='brand'
                 to='/search/people'
diff --git a/app/javascript/gabsocial/features/compose/components/status_visibility_button.js b/app/javascript/gabsocial/features/compose/components/status_visibility_button.js
index 37b0d5bb..0e432fed 100644
--- a/app/javascript/gabsocial/features/compose/components/status_visibility_button.js
+++ b/app/javascript/gabsocial/features/compose/components/status_visibility_button.js
@@ -24,7 +24,6 @@ export default
 class StatusVisibilityButton extends PureComponent {
 
   static propTypes = {
-    onClick: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
     small: PropTypes.bool,
     onOpenPopover: PropTypes.func.isRequired,
diff --git a/app/javascript/gabsocial/features/compose/components/upload_form.js b/app/javascript/gabsocial/features/compose/components/upload_form.js
index ecda8b3a..ca850436 100644
--- a/app/javascript/gabsocial/features/compose/components/upload_form.js
+++ b/app/javascript/gabsocial/features/compose/components/upload_form.js
@@ -7,7 +7,7 @@ import SensitiveMediaButton from './sensitive_media_button'
 const mapStateToProps = (state) => ({
   mediaIds: state.getIn(['compose', 'media_attachments']).map(item => item.get('id')),
   isUploading: state.getIn(['compose', 'is_uploading']),
-  uploadProgress: state.getIn(['compose', 'progress']),
+  uploadProgress: state.getIn(['compose', 'progress'], 0),
 });
 
 export default
diff --git a/app/javascript/gabsocial/features/compose/containers/compose_form_container.js b/app/javascript/gabsocial/features/compose/containers/compose_form_container.js
index 36016553..466725dd 100644
--- a/app/javascript/gabsocial/features/compose/containers/compose_form_container.js
+++ b/app/javascript/gabsocial/features/compose/containers/compose_form_container.js
@@ -18,8 +18,6 @@ const mapStateToProps = (state, { replyToId }) => {
   const reduxReplyToId = state.getIn(['compose', 'in_reply_to'])
   const isMatch = reduxReplyToId || replyToId ? reduxReplyToId === replyToId : true
 
-  // console.log("isMatch:", isMatch, reduxReplyToId, replyToId)
-
   return {
     isMatch,
     edit: !isMatch ? null : state.getIn(['compose', 'id']) !== null,
@@ -41,6 +39,7 @@ const mapStateToProps = (state, { replyToId }) => {
     scheduledAt: !isMatch ? null : state.getIn(['compose', 'scheduled_at']),
     account: state.getIn(['accounts', me]),
     hasPoll: !isMatch ? false : state.getIn(['compose', 'poll']),
+    reduxReplyToId,
   }
 }
 
@@ -50,8 +49,8 @@ const mapDispatchToProps = (dispatch) => ({
     dispatch(changeCompose(text, markdown))
   },
 
-  onSubmit(router, group) {
-    dispatch(submitCompose(router, group))
+  onSubmit(group, replyToId) {
+    dispatch(submitCompose(group, replyToId))
   },
 
   onClearSuggestions() {
diff --git a/app/javascript/gabsocial/features/compose/containers/poll_form_container.js b/app/javascript/gabsocial/features/compose/containers/poll_form_container.js
index 8188ca4c..110f1483 100644
--- a/app/javascript/gabsocial/features/compose/containers/poll_form_container.js
+++ b/app/javascript/gabsocial/features/compose/containers/poll_form_container.js
@@ -14,8 +14,8 @@ const mapStateToProps = (state) => ({
 });
 
 const mapDispatchToProps = (dispatch) => ({
-  onAddOption(title) {
-    dispatch(addPollOption(title));
+  onAddOption() {
+    dispatch(addPollOption(''))
   },
 
   onRemoveOption(index) {
diff --git a/app/javascript/gabsocial/features/group_create.js b/app/javascript/gabsocial/features/group_create.js
index ea118d00..a7d6f709 100644
--- a/app/javascript/gabsocial/features/group_create.js
+++ b/app/javascript/gabsocial/features/group_create.js
@@ -120,7 +120,7 @@ class Create extends ImmutablePureComponent {
 					placeholder={'New group title...'}
 				/>
 
-				<Divider invisible />
+				<Divider isInvisible />
 
 				<Textarea
 					title={intl.formatMessage(messages.description)}
@@ -130,7 +130,7 @@ class Create extends ImmutablePureComponent {
 					placeholder={'Some group description...'}
 				/>
 
-				<Divider invisible />
+				<Divider isInvisible />
 
 				<FileInput
 					title={intl.formatMessage(coverImage === null ? messages.coverImage : messages.coverImageChange)}
@@ -140,11 +140,9 @@ class Create extends ImmutablePureComponent {
 					height='145px'
 				/>
 
-				<Divider invisible />
+				<Divider isInvisible />
 
-				<Button
-					className={_s.ml10}
-				>
+				<Button className={_s.ml10}>
 					<Text color='white'>
 						{intl.formatMessage(!!group ? messages.update : messages.create)}
 					</Text>
diff --git a/app/javascript/gabsocial/features/group_timeline.js b/app/javascript/gabsocial/features/group_timeline.js
index 799ab685..05799a9a 100644
--- a/app/javascript/gabsocial/features/group_timeline.js
+++ b/app/javascript/gabsocial/features/group_timeline.js
@@ -35,7 +35,10 @@ class GroupTimeline extends ImmutablePureComponent {
 		dispatch: PropTypes.func.isRequired,
 		columnId: PropTypes.string,
 		hasUnread: PropTypes.bool,
-		group: PropTypes.oneOfType([ImmutablePropTypes.map, PropTypes.bool]),
+		group: PropTypes.oneOfType([
+			ImmutablePropTypes.map,
+			PropTypes.bool,
+		]),
 		relationships: ImmutablePropTypes.map,
 		intl: PropTypes.object.isRequired,
 	}
diff --git a/app/javascript/gabsocial/features/groups_timeline/components/panel.js b/app/javascript/gabsocial/features/groups_timeline/components/panel.js
index 68eb45e7..6f48e0ff 100644
--- a/app/javascript/gabsocial/features/groups_timeline/components/panel.js
+++ b/app/javascript/gabsocial/features/groups_timeline/components/panel.js
@@ -7,6 +7,8 @@ const messages = defineMessages({
     group_admin: { id: 'groups.detail.role_admin', defaultMessage: 'You\'re an admin' }
 });
 
+// : todo :
+
 export default
 @injectIntl
 class GroupPanel extends ImmutablePureComponent {
diff --git a/app/javascript/gabsocial/features/list_create-old/components/list/list.js b/app/javascript/gabsocial/features/list_create-old/components/list/list.js
index f9d6987a..aedee0e3 100644
--- a/app/javascript/gabsocial/features/list_create-old/components/list/list.js
+++ b/app/javascript/gabsocial/features/list_create-old/components/list/list.js
@@ -20,6 +20,8 @@ const mapDispatchToProps = (dispatch, { listId }) => ({
   onAdd: () => dispatch(addToListAdder(listId)),
 });
 
+// : todo :
+
 export default
 @connect(MapStateToProps, mapDispatchToProps)
 @injectIntl
diff --git a/app/javascript/gabsocial/features/list_create-old/list_adder.js b/app/javascript/gabsocial/features/list_create-old/list_adder.js
index caeaeee4..e8861e34 100644
--- a/app/javascript/gabsocial/features/list_create-old/list_adder.js
+++ b/app/javascript/gabsocial/features/list_create-old/list_adder.js
@@ -1,21 +1,13 @@
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { defineMessages, injectIntl } from 'react-intl';
-import { createSelector } from 'reselect';
+import { getOrderedLists } from '../../selectors'
 import { setupListAdder, resetListAdder } from '../../actions/lists';
 import List from './components/list';
 import Account from '../../components/account';
 import Button from '../../components/button';
 // import NewListForm from '../lists_directory/components/new_list_form';
 
-const getOrderedLists = createSelector([state => state.get('lists')], lists => {
-  if (!lists) {
-    return lists;
-  }
-
-  return lists.toList().filter(item => !!item).sort((a, b) => a.get('title').localeCompare(b.get('title')));
-});
-
 const mapStateToProps = (state, { accountId }) => ({
   listIds: getOrderedLists(state).map(list => list.get('id')),
   account: state.getIn(['accounts', accountId]),
diff --git a/app/javascript/gabsocial/features/list_timeline.js b/app/javascript/gabsocial/features/list_timeline.js
index 35979143..d3b32c40 100644
--- a/app/javascript/gabsocial/features/list_timeline.js
+++ b/app/javascript/gabsocial/features/list_timeline.js
@@ -30,7 +30,10 @@ class ListTimeline extends ImmutablePureComponent {
   static propTypes = {
     params: PropTypes.object.isRequired,
     dispatch: PropTypes.func.isRequired,
-    list: PropTypes.oneOfType([ImmutablePropTypes.map, PropTypes.bool]),
+    list: PropTypes.oneOfType([
+      ImmutablePropTypes.map,
+      PropTypes.bool,
+    ]),
     intl: PropTypes.object.isRequired,
   };
 
diff --git a/app/javascript/gabsocial/features/lists_directory.js b/app/javascript/gabsocial/features/lists_directory.js
index 7559927f..e2b7b899 100644
--- a/app/javascript/gabsocial/features/lists_directory.js
+++ b/app/javascript/gabsocial/features/lists_directory.js
@@ -1,7 +1,7 @@
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import ImmutablePropTypes from 'react-immutable-proptypes'
-import { createSelector } from 'reselect'
 import { defineMessages, injectIntl } from 'react-intl'
+import { getOrderedLists } from '../selectors'
 import { fetchLists } from '../actions/lists'
 import ColumnIndicator from '../components/column_indicator'
 import List from '../components/list'
@@ -11,12 +11,6 @@ const messages = defineMessages({
   empty: { id: 'empty_column.lists', defaultMessage: 'You don\'t have any lists yet. When you create one, it will show up here.' },
 })
 
-const getOrderedLists = createSelector([state => state.get('lists')], lists => {
-  if (!lists) return lists
-
-  return lists.toList().filter(item => !!item).sort((a, b) => a.get('title').localeCompare(b.get('title')))
-})
-
 const mapStateToProps = (state) => ({
   lists: getOrderedLists(state),
 })
@@ -46,7 +40,7 @@ class ListsDirectory extends ImmutablePureComponent {
     'lists'
   ]
 
-  componentWillMount() {
+  componentDidMount() {
     this.props.onFetchLists()
       .then(() => this.setState({ fetched: true }))
       .catch(() => this.setState({ fetched: true }))
diff --git a/app/javascript/gabsocial/features/notifications/components/notification.js b/app/javascript/gabsocial/features/notifications/components/notification.js
index c937292e..094765e3 100644
--- a/app/javascript/gabsocial/features/notifications/components/notification.js
+++ b/app/javascript/gabsocial/features/notifications/components/notification.js
@@ -88,7 +88,7 @@ class Notification extends ImmutablePureComponent {
         <div className={[_s.default, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
           <div className={[_s.default, _s.flexRow, _s.my10, _s.py10, _s.px10].join(' ')}>
 
-            <Icon id={icon} height='20px' width='20px' className={_s.mt5} />
+            <Icon id={icon} size='20px' className={_s.mt5} />
 
             <div className={[_s.default, _s.ml15, _s.flexNormal].join(' ')}>
               <div className={[_s.default, _s.flexRow].join(' ')}>
diff --git a/app/javascript/gabsocial/features/ui/util/page_title.js b/app/javascript/gabsocial/features/ui/util/page_title.js
index 1eb9a0ba..1524e966 100644
--- a/app/javascript/gabsocial/features/ui/util/page_title.js
+++ b/app/javascript/gabsocial/features/ui/util/page_title.js
@@ -7,7 +7,7 @@ export default class PageTitle extends PureComponent {
       PropTypes.string,
     ]),
     path: PropTypes.oneOfType([
-      PropTypes.sting,
+      PropTypes.string,
       PropTypes.array,
     ]),
   }
diff --git a/app/javascript/gabsocial/layouts/layout.js b/app/javascript/gabsocial/layouts/layout.js
index d12b660a..2a159cc3 100644
--- a/app/javascript/gabsocial/layouts/layout.js
+++ b/app/javascript/gabsocial/layouts/layout.js
@@ -49,7 +49,7 @@ export default class Layout extends PureComponent {
 
           {
             !noHeader &&
-            <div className={[_s.default, _s.height53PX, _s.borderBottom1PX, _s.borderColorSecondary2, _s.backgroundColorSecondary3, _s.z3, _s.top0, _s.positionFixed].join(' ')}>
+            <div className={[_s.default, _s.height53PX, _s.borderBottom1PX, _s.borderColorSecondary2, _s.backgroundColorSecondary3, _s.z3, _s.top0, _s.posFixed].join(' ')}>
               <div className={[_s.default, _s.height53PX, _s.pl15, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween].join(' ')}>
                 <div className={[_s.default, _s.width645PX].join(' ')}>
                   <ColumnHeader
diff --git a/app/javascript/gabsocial/layouts/search_layout.js b/app/javascript/gabsocial/layouts/search_layout.js
index 27412ba6..e6b6afc3 100644
--- a/app/javascript/gabsocial/layouts/search_layout.js
+++ b/app/javascript/gabsocial/layouts/search_layout.js
@@ -13,9 +13,6 @@ export default class SearchLayout extends PureComponent {
   render() {
     const { children, showBackBtn, layout, actions } = this.props
 
-    // const shouldHideFAB = path => path.match(/^\/posts\/|^\/search|^\/getting-started/);
-    // const floatingActionButton = shouldHideFAB(this.context.router.history.location.pathname) ? null : <button key='floating-action-button' onClick={this.handleOpenComposeModal} className='floating-action-button' aria-label={intl.formatMessage(messages.publish)}></button>;
-
     const tabs = [
       {
         title: 'Top',
@@ -47,7 +44,7 @@ export default class SearchLayout extends PureComponent {
 
         <main role='main' className={[_s.default, _s.flexShrink1, _s.flexGrow1, _s.borderColorSecondary2, _s.borderLeft1PX].join(' ')}>
 
-          <div className={[_s.default, _s.height53PX, _s.borderBottom1PX, _s.borderColorSecondary2, _s.backgroundColorSecondary3, _s.z3, _s.top0, _s.positionFixed].join(' ')}>
+          <div className={[_s.default, _s.height53PX, _s.borderBottom1PX, _s.borderColorSecondary2, _s.backgroundColorSecondary3, _s.z3, _s.top0, _s.posFixed].join(' ')}>
             <div className={[_s.default, _s.height53PX, _s.pl15, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween].join(' ')}>
               <div className={[_s.default, _s.width645PX].join(' ')}>
                 <ColumnHeader
diff --git a/app/javascript/gabsocial/layouts/settings_layout.js b/app/javascript/gabsocial/layouts/settings_layout.js
index c334a722..d07b92ab 100644
--- a/app/javascript/gabsocial/layouts/settings_layout.js
+++ b/app/javascript/gabsocial/layouts/settings_layout.js
@@ -20,7 +20,7 @@ export default class SettingsLayout extends PureComponent {
 
         <main role='main' className={[_s.default, _s.flexShrink1, _s.flexGrow1, _s.borderColorSecondary2, _s.borderLeft1PX].join(' ')}>
 
-          <div className={[_s.default, _s.height53PX, _s.borderBottom1PX, _s.borderColorSecondary2, _s.backgroundColorSecondary3, _s.z3, _s.top0, _s.positionFixed].join(' ')}>
+          <div className={[_s.default, _s.height53PX, _s.borderBottom1PX, _s.borderColorSecondary2, _s.backgroundColorSecondary3, _s.z3, _s.top0, _s.posFixed].join(' ')}>
             <div className={[_s.default, _s.height53PX, _s.pl15, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween].join(' ')}>
               <div className={[_s.default, _s.width100PC].join(' ')}>
                 <ColumnHeader
diff --git a/app/javascript/gabsocial/selectors/index.js b/app/javascript/gabsocial/selectors/index.js
index be2a91aa..d7b77590 100644
--- a/app/javascript/gabsocial/selectors/index.js
+++ b/app/javascript/gabsocial/selectors/index.js
@@ -132,3 +132,9 @@ export const getAccountGallery = createSelector([
 
   return medias;
 });
+
+export const getOrderedLists = createSelector([state => state.get('lists')], lists => {
+  if (!lists) return lists
+
+  return lists.toList().filter(item => !!item).sort((a, b) => a.get('title').localeCompare(b.get('title')))
+})
\ No newline at end of file
diff --git a/app/javascript/styles/global.css b/app/javascript/styles/global.css
index 959ed041..4faad746 100644
--- a/app/javascript/styles/global.css
+++ b/app/javascript/styles/global.css
@@ -395,7 +395,6 @@ body {
   background-color: #c72c5b;
 }
 
-
 .colorPrimary {
   color: #2d3436;
 }
@@ -484,19 +483,11 @@ body {
   line-height: 2em;
 }
 
-.positionFixed {
+.posFixed {
   position: fixed;
 }
 
-.positionSticky {
-  position: sticky;
-}
-
-.positionRelative {
-  position: relative;
-}
-
-.positionAbsolute {
+.posAbs {
   position: absolute;
 }
 
@@ -934,23 +925,23 @@ body {
   margin-top: 5px;
 }
 
-.marginTopAuto {
+.mtAuto {
   margin-top: auto;
 }
 
-.marginTopNeg30PX {
+.mtNeg30PX {
   margin-top: -30px;
 }
 
-.marginTopNeg75PX {
+.mtNeg75PX {
   margin-top: -75px;
 }
 
-.paddingTop5625PC {
+.pt5625PC {
   padding-top: 56.25%;
 }
 
-.paddingTop25PC {
+.pt25PC {
   padding-top: 25%;
 }
 
diff --git a/app/models/status.rb b/app/models/status.rb
index 208aa9af..ca2bdb94 100644
--- a/app/models/status.rb
+++ b/app/models/status.rb
@@ -291,7 +291,7 @@ class Status < ApplicationRecord
     end
 
     def as_home_timeline(account)
-      query = where(account: [account] + account.following)
+      query = where(account: [account] + account.following).without_replies
 
       # if account.user.allows_group_in_home_feed?
       #   query = query.or(where(group: account.groups))
@@ -301,7 +301,7 @@ class Status < ApplicationRecord
     end
 
     def as_group_timeline(group)
-      where(group: group)
+      where(group: group).without_replies
     end
 
     def as_direct_timeline(account, limit = 20, max_id = nil, since_id = nil, cache_ids = false)
@@ -352,7 +352,7 @@ class Status < ApplicationRecord
     end
 
     def as_tag_timeline(tag, account = nil, local_only = false)
-      query = timeline_scope(local_only).tagged_with(tag)
+      query = timeline_scope(local_only).tagged_with(tag).without_replies
 
       apply_timeline_filters(query, account, local_only)
     end