diff --git a/public/icons/logout.svg b/public/icons/logout.svg
new file mode 100644
index 00000000..a28a25c8
--- /dev/null
+++ b/public/icons/logout.svg
@@ -0,0 +1,4 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path
+  d="M16.1785 3.05371C15.1421 3.05371 14.3035 3.89486 14.3035 4.92871C14.3035 5.96256 15.1421 6.80371 16.1785 6.80371C17.215 6.80371 18.0535 5.96256 18.0535 4.92871C18.0535 3.89486 17.215 3.05371 16.1785 3.05371ZM14.6785 7.55371C14.4051 7.55371 14.1473 7.61621 13.9129 7.72038L10.9181 9.12923C10.7723 9.19694 10.6577 9.31413 10.5926 9.45736L9.12124 12.7308C9.07957 12.8089 9.05353 12.8975 9.05353 12.9912C9.05353 13.3011 9.30613 13.5537 9.61603 13.5537C9.8478 13.5537 10.0483 13.4131 10.1343 13.2126V13.21L11.702 10.5303L12.4858 10.249L11.7462 12.6761L11.7541 12.6787C11.7098 12.8376 11.6785 13.0042 11.6785 13.1787C11.6785 13.8923 12.0822 14.5068 12.6707 14.8245L12.6655 14.8298L15.5848 16.9626L16.5874 20.5225H16.59C16.6837 20.8298 16.965 21.0537 17.3035 21.0537C17.7176 21.0537 18.0535 20.7178 18.0535 20.3037C18.0535 20.2282 18.0379 20.1553 18.0171 20.085H18.0197L17.2671 16.3454C17.2436 16.223 17.1968 16.1058 17.1317 15.999L15.4806 13.2881L16.4806 9.99902L16.4572 9.99121C16.5145 9.81152 16.5535 9.62663 16.5535 9.42871C16.5535 8.39486 15.715 7.55371 14.6785 7.55371ZM17.1681 10.5355L16.603 12.0771L17.0353 12.4001C17.0718 12.4261 17.1108 12.4469 17.1525 12.4626L19.8869 13.5042C19.8973 13.5094 19.9103 13.512 19.9207 13.5173L19.9363 13.5225C19.9936 13.5407 20.0535 13.5537 20.116 13.5537C20.4259 13.5537 20.6785 13.3011 20.6785 12.9912C20.6785 12.7699 20.5483 12.5771 20.3608 12.486L17.9233 11.21L17.1681 10.5355ZM8.91551 13.9313C8.69676 13.9105 8.47801 14.0225 8.36863 14.2282L7.43895 15.9886L6.11343 15.2829C5.74884 15.0876 5.29572 15.2256 5.1004 15.5928L3.33738 18.9053C3.14468 19.2673 3.2853 19.723 3.64988 19.9183L4.48582 20.3636C4.47801 20.1058 4.5379 19.8454 4.66551 19.611C4.92593 19.1188 5.43374 18.8115 5.99103 18.8115C6.23322 18.8115 6.47801 18.874 6.69155 18.9886C6.80353 19.0485 6.9077 19.1188 6.99884 19.21L7.98843 17.348C7.99103 17.3454 7.99103 17.3454 7.99363 17.3428L8.2254 16.9027L8.43113 16.5173V16.5146L9.36343 14.7542C9.50926 14.4782 9.40249 14.1396 9.12905 13.9938C9.06134 13.9574 8.98843 13.9365 8.91551 13.9313ZM11.8608 15.3532L11.4988 17.0225L9.93113 19.8844L9.89988 19.9417C9.83999 20.0485 9.80353 20.1709 9.80353 20.3037C9.80353 20.7178 10.1395 21.0537 10.5535 21.0537C10.8244 21.0537 11.0613 20.9079 11.1916 20.6917L13.7332 16.7334L11.8608 15.3532ZM6.05613 19.5641C5.76447 19.5407 5.4728 19.6865 5.32697 19.96C5.13165 20.3271 5.27228 20.7803 5.63686 20.9756C6.00145 21.1683 6.45718 21.0303 6.65249 20.6657C6.8452 20.2985 6.70718 19.8454 6.33999 19.6501C6.24884 19.6006 6.15249 19.5745 6.05613 19.5641Z" fill="currentColor"/>
+</svg>
diff --git a/public/icons/profile.svg b/public/icons/profile.svg
new file mode 100644
index 00000000..23c7e580
--- /dev/null
+++ b/public/icons/profile.svg
@@ -0,0 +1,4 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path
+  d="M12.4285 3.05347C11.392 3.05347 10.5535 3.89461 10.5535 4.92847C10.5535 5.96232 11.392 6.80347 12.4285 6.80347C13.4649 6.80347 14.3035 5.96232 14.3035 4.92847C14.3035 3.89461 13.4649 3.05347 12.4285 3.05347ZM12.4285 7.55347C10.3113 7.55347 9.05347 9.05347 9.05347 10.1785V14.6785C9.05347 15.0925 9.3894 15.4285 9.80347 15.4285H10.1785V21.7852C10.1785 22.2097 10.5222 22.5535 10.9467 22.5535C11.3582 22.5535 11.6941 22.2332 11.7149 21.8243L12.017 15.4285H12.8399L13.142 21.8243C13.1628 22.2332 13.4988 22.5535 13.9102 22.5535C14.3347 22.5535 14.6785 22.2097 14.6785 21.7852V15.4285H15.0535C15.4675 15.4285 15.8035 15.0925 15.8035 14.6785V10.1785C15.8035 9.05347 14.5457 7.55347 12.4285 7.55347Z" fill="currentColor"/>
+</svg>
diff --git a/src/components/Feed/ArticleCard/ArticleCard.module.scss b/src/components/Feed/ArticleCard/ArticleCard.module.scss
index 336d82c8..d19865b1 100644
--- a/src/components/Feed/ArticleCard/ArticleCard.module.scss
+++ b/src/components/Feed/ArticleCard/ArticleCard.module.scss
@@ -603,6 +603,7 @@
 .shoutCardDetailsItem {
   align-items: center;
   display: flex;
+  font-size: 1.4rem;
   margin-right: 1.2rem;
   white-space: nowrap;
 
diff --git a/src/components/Feed/FeedArticlePopup/FeedArticlePopup.module.scss b/src/components/Feed/FeedArticlePopup/FeedArticlePopup.module.scss
index 54b1df3a..d9141883 100644
--- a/src/components/Feed/FeedArticlePopup/FeedArticlePopup.module.scss
+++ b/src/components/Feed/FeedArticlePopup/FeedArticlePopup.module.scss
@@ -1,7 +1,4 @@
 .feedArticlePopup {
-  box-shadow: none !important;
-  border: 1px solid rgb(0 0 0 / 15%);
-  border-radius: 1.6rem;
   padding: 0 !important;
   text-align: left;
   overflow: hidden;
diff --git a/src/components/Nav/ProfilePopup.tsx b/src/components/Nav/ProfilePopup.tsx
index ce645d6d..bdaa9f60 100644
--- a/src/components/Nav/ProfilePopup.tsx
+++ b/src/components/Nav/ProfilePopup.tsx
@@ -6,8 +6,10 @@ import { useLocalize } from '../../context/localize'
 import { useSession } from '../../context/session'
 import { router } from '../../stores/router'
 import { Popup } from '../_shared/Popup'
+import { Icon } from '../_shared/Icon'
 
 import styles from '../_shared/Popup/Popup.module.scss'
+import {clsx} from 'clsx';
 
 type ProfilePopupProps = Omit<PopupProps, 'children'>
 
@@ -19,27 +21,44 @@ export const ProfilePopup = (props: ProfilePopupProps) => {
     <Popup {...props} horizontalAnchor="right" variant="bordered">
       <ul class="nodash">
         <li>
-          <a href={getPagePath(router, 'author', { slug: author().slug })}>{t('Profile')}</a>
+          <a class={styles.action} href={getPagePath(router, 'author', { slug: author().slug })}>
+            <Icon name="profile" class={styles.icon}/>
+            {t('Profile')}
+          </a>
         </li>
         <li>
-          <a href={getPagePath(router, 'drafts')}>{t('Drafts')}</a>
+          <a class={styles.action} href={getPagePath(router, 'drafts')}>
+            <Icon name="pencil-outline" class={styles.icon}/>
+            {t('Drafts')}
+          </a>
         </li>
         <li>
-          <a href={`${getPagePath(router, 'author', { slug: author().slug })}?m=following`}>
+          <a class={styles.action} href={`${getPagePath(router, 'author', { slug: author().slug })}?m=following`}>
+            <Icon name="feed-all" class={styles.icon}/>
             {t('Subscriptions')}
           </a>
         </li>
         <li>
-          <a href={`${getPagePath(router, 'authorComments', { slug: author().slug })}`}>{t('Comments')}</a>
+          <a class={styles.action} href={`${getPagePath(router, 'authorComments', { slug: author().slug })}`}>
+            <Icon name="comment" class={styles.icon}/>
+            {t('Comments')}
+          </a>
         </li>
         <li>
-          <a href="#">{t('Bookmarks')}</a>
+          <a class={styles.action} href="#">
+            <Icon name="bookmark" class={styles.icon}/>
+            {t('Bookmarks')}
+          </a>
         </li>
         <li>
-          <a href={getPagePath(router, 'profileSettings')}>{t('Settings')}</a>
+          <a class={styles.action} href={getPagePath(router, 'profileSettings')}>
+            <Icon name="settings" class={styles.icon}/>
+            {t('Settings')}
+          </a>
         </li>
         <li class={styles.topBorderItem}>
-          <span class="link" onClick={() => signOut()}>
+          <span class={clsx(styles.action, 'link')} onClick={() => signOut()}>
+            <Icon name="logout" class={styles.icon}/>
             {t('Logout')}
           </span>
         </li>
diff --git a/src/components/_shared/DropDown/DropDown.tsx b/src/components/_shared/DropDown/DropDown.tsx
index 48115e5b..ba144b30 100644
--- a/src/components/_shared/DropDown/DropDown.tsx
+++ b/src/components/_shared/DropDown/DropDown.tsx
@@ -6,6 +6,7 @@ import { For, Show, createSignal } from 'solid-js'
 import { Popup } from '../Popup'
 
 import styles from './DropDown.module.scss'
+import popupStyles from '../Popup/Popup.module.scss'
 
 export type Option = {
   value: string | number
@@ -56,16 +57,20 @@ export const DropDown = <TOption extends Option = Option>(props: Props<TOption>)
         onVisibilityChange={(isVisible) => setIsPopupVisible(isVisible)}
         {...props.popupProps}
       >
-        <For each={props.options}>
-          {(option) => (
-            <div
-              class={clsx('link', { [styles.active]: props.currentOption.value === option.value })}
-              onClick={() => props.onChange(option)}
-            >
-              {option.title}
-            </div>
-          )}
-        </For>
+        <ul class="nodash">
+          <For each={props.options}>
+            {(option) => (
+              <li>
+                <button
+                  class={clsx(popupStyles.action, {[styles.active]: props.currentOption.value === option.value})}
+                  onClick={() => props.onChange(option)}
+                >
+                  {option.title}
+                </button>
+              </li>
+            )}
+          </For>
+        </ul>
       </Popup>
     </Show>
   )
diff --git a/src/components/_shared/Popup/Popup.module.scss b/src/components/_shared/Popup/Popup.module.scss
index 5db976f9..5d27cd6e 100644
--- a/src/components/_shared/Popup/Popup.module.scss
+++ b/src/components/_shared/Popup/Popup.module.scss
@@ -8,10 +8,14 @@
 
 .popup {
   background: var(--background-color);
+  border: 1px solid rgb(0 0 0 / 15%);
+  border-radius: 1.6rem;
+  box-shadow: 0 8px 16px 0 rgb(0 0 0 / 5%);
   color: var(--default-color);
   cursor: default;
   min-width: 144px;
   opacity: 1;
+  overflow: hidden;
   position: absolute;
   text-align: left;
   top: calc(100% + 11px);
@@ -21,6 +25,7 @@
     margin-bottom: 0;
 
     li {
+      margin: 0;
       position: relative;
 
       &:last-child {
@@ -29,33 +34,19 @@
     }
   }
 
-  &.bordered {
-    @include font-size(1.6rem);
-
-    border: 2px solid #000;
-    padding: 2.4rem;
-
-    ul li {
-      margin-bottom: 1.6rem;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-  }
-
   &.tiny {
     @include font-size(1.4rem);
 
-    box-shadow: 0 4px 60px rgb(0 0 0 / 10%);
-    padding: 1rem;
+    .action {
+      padding: 0.5rem 1rem;
+    }
 
-    ul li {
-      margin-bottom: 1rem;
+    li:first-child .action {
+      padding-top: 1rem;
+    }
 
-      &:last-child {
-        margin-bottom: 0;
-      }
+    li:last-child .action {
+      padding-bottom: 1rem;
     }
   }
 
@@ -75,7 +66,6 @@
 
   .topBorderItem {
     border-top: 2px solid;
-    padding-top: 1em;
   }
 
   a:link,
@@ -83,26 +73,58 @@
     border: none;
     white-space: nowrap;
 
-    &:hover {
-      .icon img {
-        filter: invert(0);
-      }
+    &:before {
+      content: '';
+      height: 100%;
+      left: 0;
+      position: absolute;
+      top: 0;
+      width: 100%;
     }
   }
 
   .icon {
     display: inline-block;
-    width: 3.6rem;
+    margin-right: 1rem;
+    width: 2.4rem;
 
     img {
       display: inline-block;
-      filter: invert(1);
-      max-height: 2rem;
-      max-width: 2rem;
+      max-height: 2.4rem;
+      max-width: 2.4rem;
       transition: filter 0.3s;
       vertical-align: middle;
     }
   }
+
+  .action {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 8px 16px;
+    font-size: inherit;
+    font-weight: 500;
+    text-align: left;
+    white-space: nowrap;
+
+    &:hover {
+      background: var(--black-500);
+      color: var(--black-50) !important;
+
+      .icon img {
+        filter: invert(1);
+      }
+    }
+  }
+
+  li:first-child .action {
+    padding-top: 16px;
+  }
+
+  li:last-child .action {
+    padding-bottom: 16px;
+  }
 }
 
 // TODO: animation
diff --git a/src/components/_shared/Popup/Popup.tsx b/src/components/_shared/Popup/Popup.tsx
index e9e2a49c..1d9fb7b2 100644
--- a/src/components/_shared/Popup/Popup.tsx
+++ b/src/components/_shared/Popup/Popup.tsx
@@ -14,7 +14,7 @@ export type PopupProps = {
   children: JSX.Element
   onVisibilityChange?: (isVisible: boolean) => void
   horizontalAnchor?: HorizontalAnchor
-  variant?: 'bordered' | 'tiny'
+  variant?: 'tiny'
   closePopup?: boolean
 }
 
@@ -54,7 +54,6 @@ export const Popup = (props: PopupProps) => {
           class={clsx(styles.popup, props.popupCssClass, {
             [styles.horizontalAnchorCenter]: horizontalAnchor === 'center',
             [styles.horizontalAnchorRight]: horizontalAnchor === 'right',
-            [styles.bordered]: props.variant === 'bordered',
             [styles.tiny]: props.variant === 'tiny',
           })}
         >
diff --git a/src/components/_shared/ShareLinks/ShareLinks.module.scss b/src/components/_shared/ShareLinks/ShareLinks.module.scss
index d65ee4aa..0066714d 100644
--- a/src/components/_shared/ShareLinks/ShareLinks.module.scss
+++ b/src/components/_shared/ShareLinks/ShareLinks.module.scss
@@ -7,9 +7,6 @@
     white-space: nowrap;
 
     &:hover {
-      background: #000;
-      color: #fff;
-
       .icon img {
         filter: invert(0);
       }
@@ -17,7 +14,7 @@
 
     .icon {
       display: inline-block;
-      width: 3.6rem;
+      width: 2rem;
 
       img {
         display: inline-block;
diff --git a/src/components/_shared/ShareLinks/ShareLinks.tsx b/src/components/_shared/ShareLinks/ShareLinks.tsx
index 0e1bd98f..3034aaa8 100644
--- a/src/components/_shared/ShareLinks/ShareLinks.tsx
+++ b/src/components/_shared/ShareLinks/ShareLinks.tsx
@@ -8,6 +8,7 @@ import { Icon } from '../Icon'
 import { Popover } from '../Popover'
 
 import styles from './ShareLinks.module.scss'
+import popupStyles from '../Popup/Popup.module.scss'
 
 type Props = {
   title: string
@@ -53,26 +54,26 @@ export const ShareLinks = (props: Props) => {
     <div class={clsx(styles.ShareLinks, props.class, { [styles.inModal]: props.variant === 'inModal' })}>
       <ul class="nodash">
         <li>
-          <button role="button" class={styles.shareControl} onClick={() => handleShare(FACEBOOK)}>
-            <Icon name="facebook-white" class={styles.icon} />
+          <button role="button" class={clsx(styles.shareControl, popupStyles.action)} onClick={() => handleShare(FACEBOOK)}>
+            <Icon name="facebook-white" class={clsx(styles.icon, popupStyles.icon)} />
             Facebook
           </button>
         </li>
         <li>
-          <button role="button" class={styles.shareControl} onClick={() => handleShare(TWITTER)}>
-            <Icon name="twitter-white" class={styles.icon} />
+          <button role="button" class={clsx(styles.shareControl, popupStyles.action)} onClick={() => handleShare(TWITTER)}>
+            <Icon name="twitter-white" class={clsx(styles.icon, popupStyles.icon)} />
             Twitter
           </button>
         </li>
         <li>
-          <button role="button" class={styles.shareControl} onClick={() => handleShare(TELEGRAM)}>
-            <Icon name="telegram-white" class={styles.icon} />
+          <button role="button" class={clsx(styles.shareControl, popupStyles.action)} onClick={() => handleShare(TELEGRAM)}>
+            <Icon name="telegram-white" class={clsx(styles.icon, popupStyles.icon)} />
             Telegram
           </button>
         </li>
         <li>
-          <button role="button" class={styles.shareControl} onClick={() => handleShare(VK)}>
-            <Icon name="vk-white" class={styles.icon} />
+          <button role="button" class={clsx(styles.shareControl, popupStyles.action)} onClick={() => handleShare(VK)}>
+            <Icon name="vk-white" class={clsx(styles.icon, popupStyles.icon)} />
             VK
           </button>
         </li>
@@ -80,8 +81,8 @@ export const ShareLinks = (props: Props) => {
           <Show
             when={props.variant === 'inModal'}
             fallback={
-              <button role="button" class={styles.shareControl} onClick={copyLink}>
-                <Icon name="link-white" class={styles.icon} />
+              <button role="button" class={clsx(styles.shareControl, popupStyles.action)} onClick={copyLink}>
+                <Icon name="link-white" class={clsx(styles.icon, popupStyles.icon)} />
                 {t('Copy link')}
               </button>
             }
@@ -93,7 +94,7 @@ export const ShareLinks = (props: Props) => {
               <Popover content={t('Copy link')}>
                 {(triggerRef: (el) => void) => (
                   <div class={styles.copyButton} onClick={copyLink} ref={triggerRef}>
-                    <Icon name="copy" class={styles.icon} />
+                    <Icon name="copy" class={clsx(styles.icon, popupStyles.icon)} />
                   </div>
                 )}
               </Popover>