diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 0007cc26..bb2138ff 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -23,7 +23,7 @@ module.exports = {
       },
       extends: [
         'plugin:@typescript-eslint/recommended',
-        // 'plugin:@typescript-eslint/recommended-requiring-type-checking', // 23-01-2024 681 problems
+        // 'plugin:@typescript-eslint/recommended-requiring-type-checking', // 30-01-2024 699 problems
       ],
       rules: {
         '@typescript-eslint/no-unused-vars': [
@@ -40,12 +40,12 @@ module.exports = {
   env: {
     browser: true,
     node: true,
-    mocha: true,
+    // mocha: true,
   },
   globals: {},
   rules: {
     // Solid
-    'solid/reactivity': 'off', // too many 'should be used within JSX'
+    'solid/reactivity': 'off',
     'solid/no-innerhtml': 'off',
 
     /** Unicorn **/
@@ -65,6 +65,7 @@ module.exports = {
     'unicorn/no-array-callback-reference': 'warn',
     'unicorn/no-array-method-this-argument': 'warn',
     'unicorn/no-for-loop': 'off',
+    'unicorn/prefer-switch': 'warn',
 
     'sonarjs/no-duplicate-string': ['warn', { threshold: 5 }],
     'sonarjs/prefer-immediate-return': 'warn',
diff --git a/.gitignore b/.gitignore
index e36653bf..c1695636 100644
--- a/.gitignore
+++ b/.gitignore
@@ -16,3 +16,4 @@ stats.html
 *.scss.d.ts
 pnpm-lock.yaml
 bun.lockb
+.jj
diff --git a/package-lock.json b/package-lock.json
index baa3c974..a56a55f5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,10 +10,11 @@
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
-        "@authorizerdev/authorizer-js": "1.2.11",
+        "@authorizerdev/authorizer-js": "2.0.0",
         "@solid-primitives/pagination": "0.2.10",
         "cropperjs": "1.6.1",
         "form-data": "4.0.0",
+        "ga-gtag": "1.2.0",
         "i18next": "22.4.15",
         "i18next-icu": "2.3.0",
         "idb": "7.1.1",
@@ -386,9 +387,9 @@
       }
     },
     "node_modules/@authorizerdev/authorizer-js": {
-      "version": "1.2.11",
-      "resolved": "https://registry.npmjs.org/@authorizerdev/authorizer-js/-/authorizer-js-1.2.11.tgz",
-      "integrity": "sha512-onATswFYM0QCmhFPJmjS+S7Z0GNqlekqkDdFK6Bj3OeMBDQufARRHmVIGVI+0IlB7TWW38D1l6WbTZin0ct+aA==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@authorizerdev/authorizer-js/-/authorizer-js-2.0.0.tgz",
+      "integrity": "sha512-PTVuCrCkZkVPoo+l0+9PVFyP9frLp/L3FUtQDtAaN+ERuqx97DNF20tIH8khSvnXrkKv3lTJ/5iFWddy+dTAwg==",
       "dependencies": {
         "cross-fetch": "^3.1.5"
       },
@@ -9531,6 +9532,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/ga-gtag": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/ga-gtag/-/ga-gtag-1.2.0.tgz",
+      "integrity": "sha512-j9gxutMdpGMdwaX1SzOG31Ddm+IGFjeNf+N3Z5g+BBpS8FSXOALlrM+ORIGc/QKszGJEDlw+6PfIsJZICsqsGQ=="
+    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
diff --git a/package.json b/package.json
index d52e5fc7..006bd345 100644
--- a/package.json
+++ b/package.json
@@ -30,10 +30,11 @@
     "typecheck:watch": "tsc --noEmit --watch"
   },
   "dependencies": {
-    "@authorizerdev/authorizer-js": "1.2.11",
+    "@authorizerdev/authorizer-js": "2.0.0",
     "@solid-primitives/pagination": "0.2.10",
     "cropperjs": "1.6.1",
     "form-data": "4.0.0",
+    "ga-gtag": "1.2.0",
     "i18next": "22.4.15",
     "i18next-icu": "2.3.0",
     "idb": "7.1.1",
@@ -149,7 +150,7 @@
     "typograf": "7.1.0",
     "uniqolor": "1.1.0",
     "vike": "0.4.148",
-    "vite": "4.5.1",
+    "vite": "4.5.2",
     "vite-plugin-mkcert": "1.16.0",
     "vite-plugin-sass-dts": "1.3.11",
     "vite-plugin-solid": "2.7.2",
diff --git a/src/components/App.tsx b/src/components/App.tsx
index 77a05db8..eae090f0 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -7,6 +7,7 @@ import { Dynamic } from 'solid-js/web'
 import { ConfirmProvider } from '../context/confirm'
 import { ConnectProvider } from '../context/connect'
 import { EditorProvider } from '../context/editor'
+import { FollowingProvider } from '../context/following'
 import { InboxProvider } from '../context/inbox'
 import { LocalizeProvider } from '../context/localize'
 import { MediaQueryProvider } from '../context/mediaQuery'
@@ -90,7 +91,7 @@ type Props = PageProps & { is404: boolean }
 
 export const App = (props: Props) => {
   const { page, searchParams } = useRouter<RootSearchParams>()
-  let is404 = props.is404
+  const is404 = createMemo(() => props.is404)
 
   createEffect(() => {
     if (!searchParams().m) {
@@ -106,8 +107,7 @@ export const App = (props: Props) => {
   const pageComponent = createMemo(() => {
     const result = pagesMap[page()?.route || 'home']
 
-    if (is404 || !result || page()?.path === '/404') {
-      is404 = false
+    if (is404() || !result || page()?.path === '/404') {
       return FourOuFourPage
     }
 
@@ -122,15 +122,17 @@ export const App = (props: Props) => {
           <SnackbarProvider>
             <ConfirmProvider>
               <SessionProvider onStateChangeCallback={console.log}>
-                <ConnectProvider>
-                  <NotificationsProvider>
-                    <EditorProvider>
-                      <InboxProvider>
-                        <Dynamic component={pageComponent()} {...props} />
-                      </InboxProvider>
-                    </EditorProvider>
-                  </NotificationsProvider>
-                </ConnectProvider>
+                <FollowingProvider>
+                  <ConnectProvider>
+                    <NotificationsProvider>
+                      <EditorProvider>
+                        <InboxProvider>
+                          <Dynamic component={pageComponent()} {...props} />
+                        </InboxProvider>
+                      </EditorProvider>
+                    </NotificationsProvider>
+                  </ConnectProvider>
+                </FollowingProvider>
               </SessionProvider>
             </ConfirmProvider>
           </SnackbarProvider>
diff --git a/src/components/Article/AudioPlayer/PlayerPlaylist.tsx b/src/components/Article/AudioPlayer/PlayerPlaylist.tsx
index 57bdaf2f..b4eec25f 100644
--- a/src/components/Article/AudioPlayer/PlayerPlaylist.tsx
+++ b/src/components/Article/AudioPlayer/PlayerPlaylist.tsx
@@ -1,3 +1,4 @@
+import { gtag } from 'ga-gtag'
 import { createSignal, For, lazy, Show } from 'solid-js'
 
 import { useLocalize } from '../../../context/localize'
@@ -24,6 +25,8 @@ type Props = {
   onChangeMediaIndex?: (direction: 'up' | 'down', index) => void
 }
 
+const getMediaTitle = (itm: MediaItem, idx: number) => `${idx}. ${itm.artist} - ${itm.title}`
+
 export const PlayerPlaylist = (props: Props) => {
   const { t } = useLocalize()
   const [activeEditIndex, setActiveEditIndex] = createSignal(-1)
@@ -34,6 +37,15 @@ export const PlayerPlaylist = (props: Props) => {
   const handleMediaItemFieldChange = (field: keyof MediaItem, value: string) => {
     props.onMediaItemFieldChange(activeEditIndex(), field, value)
   }
+
+  const play = (index: number) => {
+    const mi = props.media[index]
+    gtag('event', 'select_item', {
+      item_list_id: props.articleSlug,
+      item_list_name: getMediaTitle(mi, index),
+      items: props.media.map((it, ix) => getMediaTitle(it, ix)),
+    })
+  }
   return (
     <ul class={styles.playlist}>
       <For each={props.media}>
@@ -42,7 +54,7 @@ export const PlayerPlaylist = (props: Props) => {
             <div class={styles.playlistItem}>
               <button
                 class={styles.playlistItemPlayButton}
-                onClick={() => props.onPlayMedia(index())}
+                onClick={() => play(index())}
                 type="button"
                 aria-label="Play"
               >
diff --git a/src/components/Article/FullArticle.tsx b/src/components/Article/FullArticle.tsx
index e296bbb7..c04615a0 100644
--- a/src/components/Article/FullArticle.tsx
+++ b/src/components/Article/FullArticle.tsx
@@ -4,6 +4,7 @@ import { getPagePath } from '@nanostores/router'
 import { createPopper } from '@popperjs/core'
 import { Link, Meta } from '@solidjs/meta'
 import { clsx } from 'clsx'
+import { install } from 'ga-gtag'
 import { createEffect, For, createMemo, onMount, Show, createSignal, onCleanup, on } from 'solid-js'
 import { isServer } from 'solid-js/web'
 
@@ -321,9 +322,8 @@ export const FullArticle = (props: Props) => {
   )
 
   onMount(async () => {
-    await loadReactionsBy({
-      by: { shout: props.article.slug },
-    })
+    install('G-LQ4B87H8C2')
+    await loadReactionsBy({ by: { shout: props.article.slug } })
     setIsReactionsLoaded(true)
     document.title = props.article.title
     window?.addEventListener('resize', updateIframeSizes)
diff --git a/src/components/Author/AuthorBadge/AuthorBadge.tsx b/src/components/Author/AuthorBadge/AuthorBadge.tsx
index a596075a..2c90471b 100644
--- a/src/components/Author/AuthorBadge/AuthorBadge.tsx
+++ b/src/components/Author/AuthorBadge/AuthorBadge.tsx
@@ -2,13 +2,12 @@ import { openPage } from '@nanostores/router'
 import { clsx } from 'clsx'
 import { createEffect, createMemo, createSignal, Match, Show, Switch } from 'solid-js'
 
+import { useFollowing } from '../../../context/following'
 import { useLocalize } from '../../../context/localize'
 import { useMediaQuery } from '../../../context/mediaQuery'
 import { useSession } from '../../../context/session'
 import { Author, FollowingEntity } from '../../../graphql/schema/core.gen'
 import { router, useRouter } from '../../../stores/router'
-import { follow, unfollow } from '../../../stores/zine/common'
-// import { capitalize } from '../../../utils/capitalize'
 import { isCyrillic } from '../../../utils/cyrillic'
 import { translit } from '../../../utils/ru2en'
 import { Button } from '../../_shared/Button'
@@ -33,7 +32,7 @@ type Props = {
 export const AuthorBadge = (props: Props) => {
   const { mediaMatches } = useMediaQuery()
   const [isMobileView, setIsMobileView] = createSignal(false)
-  const [isSubscribing, setIsSubscribing] = createSignal(false)
+  const [followed, setFollowed] = createSignal(false)
 
   createEffect(() => {
     setIsMobileView(!mediaMatches.sm)
@@ -41,33 +40,14 @@ export const AuthorBadge = (props: Props) => {
 
   const {
     author,
-    subscriptions,
-    actions: { loadSubscriptions, requireAuthentication },
+    actions: { requireAuthentication },
   } = useSession()
+  const { setFollowing } = useFollowing()
   const { changeSearchParams } = useRouter()
   const { t, formatDate, lang } = useLocalize()
-  const subscribed = createMemo(() => {
-    const sss = subscriptions()
-    return sss?.authors.some((a: Author) => a?.slug === props.author.slug)
-  })
-
-  const subscribe = async (really = true) => {
-    setIsSubscribing(true)
-
-    await (really
-      ? follow({ what: FollowingEntity.Author, slug: props.author.slug })
-      : unfollow({ what: FollowingEntity.Author, slug: props.author.slug }))
-
-    await loadSubscriptions()
-    setIsSubscribing(false)
-  }
-  const handleSubscribe = (really: boolean) => {
-    requireAuthentication(() => {
-      subscribe(really)
-    }, 'subscribe')
-  }
 
   const initChat = () => {
+    // eslint-disable-next-line solid/reactivity
     requireAuthentication(() => {
       openPage(router, `inbox`)
       changeSearchParams({
@@ -88,6 +68,14 @@ export const AuthorBadge = (props: Props) => {
     return props.author.name
   })
 
+  const handleFollowClick = () => {
+    const value = !followed()
+    requireAuthentication(() => {
+      setFollowed(value)
+      setFollowing(FollowingEntity.Author, props.author.slug, value)
+    }, 'subscribe')
+  }
+
   return (
     <div class={clsx(styles.AuthorBadge, { [styles.nameOnly]: props.nameOnly })}>
       <div class={styles.basicInfo}>
@@ -135,37 +123,24 @@ export const AuthorBadge = (props: Props) => {
         <div class={styles.actions}>
           <Show
             when={!props.minimizeSubscribeButton}
-            fallback={
-              <CheckButton
-                text={t('Follow')}
-                checked={subscribed()}
-                onClick={() => handleSubscribe(!subscribed())}
-              />
-            }
+            fallback={<CheckButton text={t('Follow')} checked={followed()} onClick={handleFollowClick} />}
           >
             <Show
-              when={subscribed()}
+              when={followed()}
               fallback={
                 <Button
                   variant={props.iconButtons ? 'secondary' : 'bordered'}
                   size="S"
                   value={
-                    <Show
-                      when={props.iconButtons}
-                      fallback={
-                        <Show when={isSubscribing()} fallback={t('Subscribe')}>
-                          {t('subscribing...')}
-                        </Show>
-                      }
-                    >
+                    <Show when={props.iconButtons} fallback={t('Subscribe')}>
                       <Icon name="author-subscribe" class={stylesButton.icon} />
                     </Show>
                   }
-                  onClick={() => handleSubscribe(true)}
+                  onClick={handleFollowClick}
                   isSubscribeButton={true}
                   class={clsx(styles.actionButton, {
                     [styles.iconed]: props.iconButtons,
-                    [stylesButton.subscribed]: subscribed(),
+                    [stylesButton.subscribed]: followed(),
                   })}
                 />
               }
@@ -186,11 +161,11 @@ export const AuthorBadge = (props: Props) => {
                     <Icon name="author-unsubscribe" class={stylesButton.icon} />
                   </Show>
                 }
-                onClick={() => handleSubscribe(false)}
+                onClick={handleFollowClick}
                 isSubscribeButton={true}
                 class={clsx(styles.actionButton, {
                   [styles.iconed]: props.iconButtons,
-                  [stylesButton.subscribed]: subscribed(),
+                  [stylesButton.subscribed]: followed(),
                 })}
               />
             </Show>
diff --git a/src/components/Author/AuthorCard/AuthorCard.tsx b/src/components/Author/AuthorCard/AuthorCard.tsx
index 587dd564..336d908f 100644
--- a/src/components/Author/AuthorCard/AuthorCard.tsx
+++ b/src/components/Author/AuthorCard/AuthorCard.tsx
@@ -1,15 +1,15 @@
-import type { Author } from '../../../graphql/schema/core.gen'
+import type { Author, Community } from '../../../graphql/schema/core.gen'
 
 import { openPage, redirectPage } from '@nanostores/router'
 import { clsx } from 'clsx'
-import { createEffect, createMemo, createSignal, For, Show } from 'solid-js'
+import { createEffect, createMemo, createSignal, For, onMount, Show } from 'solid-js'
 
+import { useFollowing } from '../../../context/following'
 import { useLocalize } from '../../../context/localize'
 import { useSession } from '../../../context/session'
 import { FollowingEntity, Topic } from '../../../graphql/schema/core.gen'
 import { SubscriptionFilter } from '../../../pages/types'
 import { router, useRouter } from '../../../stores/router'
-import { follow, unfollow } from '../../../stores/zine/common'
 import { isCyrillic } from '../../../utils/cyrillic'
 import { isAuthor } from '../../../utils/isAuthor'
 import { translit } from '../../../utils/ru2en'
@@ -33,32 +33,14 @@ export const AuthorCard = (props: Props) => {
   const { t, lang } = useLocalize()
   const {
     author,
-    subscriptions,
     isSessionLoaded,
-    actions: { loadSubscriptions, requireAuthentication },
+    actions: { requireAuthentication },
   } = useSession()
-
-  const [isSubscribing, setIsSubscribing] = createSignal(false)
-  const [following, setFollowing] = createSignal<Array<Author | Topic>>(props.following)
+  const [authorSubs, setAuthorSubs] = createSignal<Array<Author | Topic | Community>>([])
   const [subscriptionFilter, setSubscriptionFilter] = createSignal<SubscriptionFilter>('all')
-
-  const subscribed = createMemo<boolean>(() =>
-    subscriptions().authors.some((a: Author) => a?.slug === props.author.slug),
-  )
-
-  const subscribe = async (really = true) => {
-    setIsSubscribing(true)
-
-    await (really
-      ? follow({ what: FollowingEntity.Author, slug: props.author.slug })
-      : unfollow({ what: FollowingEntity.Author, slug: props.author.slug }))
-
-    await loadSubscriptions()
-    setIsSubscribing(false)
-  }
-
   const isProfileOwner = createMemo(() => author()?.slug === props.author.slug)
-
+  const [followed, setFollowed] = createSignal()
+  const { setFollowing } = useFollowing()
   const name = createMemo(() => {
     if (lang() !== 'ru' && isCyrillic(props.author.name)) {
       if (props.author.name === 'Дискурс') {
@@ -71,9 +53,12 @@ export const AuthorCard = (props: Props) => {
     return props.author.name
   })
 
+  onMount(() => setAuthorSubs(props.following))
+
   // TODO: reimplement AuthorCard
   const { changeSearchParams } = useRouter()
   const initChat = () => {
+    // eslint-disable-next-line solid/reactivity
     requireAuthentication(() => {
       openPage(router, `inbox`)
       changeSearchParams({
@@ -82,30 +67,30 @@ export const AuthorCard = (props: Props) => {
     }, 'discussions')
   }
 
-  const handleSubscribe = () => {
-    requireAuthentication(() => {
-      subscribe(!subscribed())
-    }, 'subscribe')
-  }
-
   createEffect(() => {
     if (props.following) {
-      if (subscriptionFilter() === 'users') {
-        setFollowing(props.following.filter((s) => 'name' in s))
+      if (subscriptionFilter() === 'authors') {
+        setAuthorSubs(props.following.filter((s) => 'name' in s))
       } else if (subscriptionFilter() === 'topics') {
-        setFollowing(props.following.filter((s) => 'title' in s))
+        setAuthorSubs(props.following.filter((s) => 'title' in s))
+      } else if (subscriptionFilter() === 'communities') {
+        setAuthorSubs(props.following.filter((s) => 'title' in s))
       } else {
-        setFollowing(props.following)
+        setAuthorSubs(props.following)
       }
     }
   })
 
-  const followButtonText = createMemo(() => {
-    if (isSubscribing()) {
-      return t('subscribing...')
-    }
+  const handleFollowClick = () => {
+    const value = !followed()
+    requireAuthentication(() => {
+      setFollowed(value)
+      setFollowing(FollowingEntity.Author, props.author.slug, value)
+    }, 'subscribe')
+  }
 
-    if (subscribed()) {
+  const followButtonText = createMemo(() => {
+    if (followed()) {
       return (
         <>
           <span class={stylesButton.buttonSubscribeLabel}>{t('Following')}</span>
@@ -214,11 +199,11 @@ export const AuthorCard = (props: Props) => {
               fallback={
                 <div class={styles.authorActions}>
                   <Button
-                    onClick={handleSubscribe}
+                    onClick={handleFollowClick}
                     value={followButtonText()}
                     isSubscribeButton={true}
                     class={clsx({
-                      [stylesButton.subscribed]: subscribed(),
+                      [stylesButton.subscribed]: followed(),
                     })}
                   />
                   <Button
@@ -279,8 +264,8 @@ export const AuthorCard = (props: Props) => {
                   </button>
                   <span class="view-switcher__counter">{props.following.length}</span>
                 </li>
-                <li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'users' })}>
-                  <button type="button" onClick={() => setSubscriptionFilter('users')}>
+                <li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'authors' })}>
+                  <button type="button" onClick={() => setSubscriptionFilter('authors')}>
                     {t('Authors')}
                   </button>
                   <span class="view-switcher__counter">
@@ -300,7 +285,7 @@ export const AuthorCard = (props: Props) => {
               <div class={styles.listWrapper}>
                 <div class="row">
                   <div class="col-24">
-                    <For each={following()}>
+                    <For each={authorSubs()}>
                       {(subscription) =>
                         isAuthor(subscription) ? (
                           <AuthorBadge author={subscription} />
diff --git a/src/components/Feed/Row2.tsx b/src/components/Feed/Row2.tsx
index 73c5fa70..5fa5a6be 100644
--- a/src/components/Feed/Row2.tsx
+++ b/src/components/Feed/Row2.tsx
@@ -1,15 +1,10 @@
 import type { Shout } from '../../graphql/schema/core.gen'
 
-import { createComputed, createSignal, Show, For } from 'solid-js'
+import { createSignal, createEffect, For, Show } from 'solid-js'
 
 import { ArticleCard } from './ArticleCard'
-import { ArticleCardProps } from './ArticleCard/ArticleCard'
 
-const x = [
-  ['12', '12'],
-  ['8', '16'],
-  ['16', '8'],
-]
+const columnSizes = ['col-md-12', 'col-md-8', 'col-md-16']
 
 export const Row2 = (props: {
   articles: Shout[]
@@ -18,10 +13,10 @@ export const Row2 = (props: {
   noAuthorLink?: boolean
   noauthor?: boolean
 }) => {
-  const [y, setY] = createSignal(0)
+  const [columnIndex, setColumnIndex] = createSignal(0)
 
-  // FIXME: random can break hydration
-  createComputed(() => setY(Math.floor(Math.random() * x.length)))
+  // Update column index on component mount
+  createEffect(() => setColumnIndex(Math.floor(Math.random() * columnSizes.length)))
 
   return (
     <Show when={props.articles && props.articles.length > 0}>
@@ -29,31 +24,16 @@ export const Row2 = (props: {
         <div class="wide-container">
           <div class="row">
             <For each={props.articles}>
-              {(a, i) => {
-                // FIXME: refactor this, too ugly now
-                const className = `col-md-${props.isEqual ? '12' : x[y()][i()]}`
-                let desktopCoverSize: ArticleCardProps['desktopCoverSize']
-
-                switch (className) {
-                  case 'col-md-8': {
-                    desktopCoverSize = 'S'
-                    break
-                  }
-                  case 'col-md-12': {
-                    desktopCoverSize = 'M'
-                    break
-                  }
-                  default: {
-                    desktopCoverSize = 'L'
-                  }
-                }
-
+              {(article, _idx) => {
+                const className = columnSizes[props.isEqual ? 0 : columnIndex() % columnSizes.length]
+                const big = className === 'col-md-12' ? 'M' : 'L'
+                const desktopCoverSize = className === 'col-md-8' ? 'S' : big
                 return (
                   <div class={className}>
                     <ArticleCard
-                      article={a}
+                      article={article}
                       settings={{
-                        isWithCover: props.isEqual || x[y()][i()] === '16',
+                        isWithCover: props.isEqual || className === 'col-md-16',
                         nodate: props.isEqual || props.nodate,
                         noAuthorLink: props.noAuthorLink,
                         noauthor: props.noauthor,
diff --git a/src/components/Feed/Sidebar/Sidebar.tsx b/src/components/Feed/Sidebar/Sidebar.tsx
index 6d883d55..a2e4a6f4 100644
--- a/src/components/Feed/Sidebar/Sidebar.tsx
+++ b/src/components/Feed/Sidebar/Sidebar.tsx
@@ -2,8 +2,9 @@ import { getPagePath } from '@nanostores/router'
 import { clsx } from 'clsx'
 import { createSignal, For, Show } from 'solid-js'
 
+import { useFollowing } from '../../../context/following'
 import { useLocalize } from '../../../context/localize'
-import { useSession } from '../../../context/session'
+import { Author } from '../../../graphql/schema/core.gen'
 import { router, useRouter } from '../../../stores/router'
 import { useArticlesStore } from '../../../stores/zine/articles'
 import { useSeenStore } from '../../../stores/zine/seen'
@@ -15,7 +16,7 @@ import styles from './Sidebar.module.scss'
 export const Sidebar = () => {
   const { t } = useLocalize()
   const { seen } = useSeenStore()
-  const { subscriptions } = useSession()
+  const { subscriptions } = useFollowing()
   const { page } = useRouter()
   const { articlesByTopic } = useArticlesStore()
   const [isSubscriptionsVisible, setSubscriptionsVisible] = createSignal(true)
@@ -27,7 +28,6 @@ export const Sidebar = () => {
   const checkAuthorIsSeen = (authorSlug: string) => {
     return Boolean(seen()[authorSlug])
   }
-
   return (
     <div class={styles.sidebar}>
       <ul class={styles.feedFilters}>
@@ -111,7 +111,7 @@ export const Sidebar = () => {
         </li>
       </ul>
 
-      <Show when={subscriptions().authors.length > 0 || subscriptions().topics.length > 0}>
+      <Show when={subscriptions.authors.length > 0 || subscriptions.topics.length > 0}>
         <h4
           classList={{ [styles.opened]: isSubscriptionsVisible() }}
           onClick={() => {
@@ -122,22 +122,19 @@ export const Sidebar = () => {
         </h4>
 
         <ul class={clsx(styles.subscriptions, { [styles.hidden]: !isSubscriptionsVisible() })}>
-          <For each={subscriptions().authors}>
-            {(author) => (
+          <For each={subscriptions.authors}>
+            {(a: Author) => (
               <li>
-                <a
-                  href={`/author/${author.slug}`}
-                  classList={{ [styles.unread]: checkAuthorIsSeen(author.slug) }}
-                >
+                <a href={`/author/${a.slug}`} classList={{ [styles.unread]: checkAuthorIsSeen(a.slug) }}>
                   <div class={styles.sidebarItemName}>
-                    <Userpic name={author.name} userpic={author.pic} size="XS" class={styles.userpic} />
-                    <div class={styles.sidebarItemNameLabel}>{author.name}</div>
+                    <Userpic name={a.name} userpic={a.pic} size="XS" class={styles.userpic} />
+                    <div class={styles.sidebarItemNameLabel}>{a.name}</div>
                   </div>
                 </a>
               </li>
             )}
           </For>
-          <For each={subscriptions().topics}>
+          <For each={subscriptions.topics}>
             {(topic) => (
               <li>
                 <a
diff --git a/src/components/Nav/AuthModal/ForgotPasswordForm.tsx b/src/components/Nav/AuthModal/ForgotPasswordForm.tsx
index 8dc12583..4e147d92 100644
--- a/src/components/Nav/AuthModal/ForgotPasswordForm.tsx
+++ b/src/components/Nav/AuthModal/ForgotPasswordForm.tsx
@@ -27,7 +27,7 @@ export const ForgotPasswordForm = () => {
     setEmail(newEmail.toLowerCase())
   }
   const {
-    actions: { authorizer },
+    actions: { forgotPassword },
   } = useSession()
   const [submitError, setSubmitError] = createSignal('')
   const [isSubmitting, setIsSubmitting] = createSignal(false)
@@ -61,19 +61,23 @@ export const ForgotPasswordForm = () => {
 
     setIsSubmitting(true)
     try {
-      const response = await authorizer().forgotPassword({
+      const { data, errors } = await forgotPassword({
         email: email(),
         redirect_uri: window.location.origin,
       })
-      console.debug('[ForgotPasswordForm] authorizer response:', response)
-      if (response && response.message) setMessage(response.message)
-    } catch (error) {
-      console.error(error)
-      if (error?.code === 'user_not_found') {
+      console.debug('[ForgotPasswordForm] authorizer response:', data)
+      setMessage(data.message)
+
+      console.warn(errors)
+      if (errors.some((e) => e.cause === 'user_not_found')) {
         setIsUserNotFound(true)
         return
+      } else {
+        const errorText = errors.map((e) => e.message).join(' ') // FIXME
+        setSubmitError(errorText)
       }
-      setSubmitError(error?.message)
+    } catch (error) {
+      console.error(error)
     } finally {
       setIsSubmitting(false)
     }
diff --git a/src/components/Nav/Header/Header.tsx b/src/components/Nav/Header/Header.tsx
index fb597f05..0dd90e79 100644
--- a/src/components/Nav/Header/Header.tsx
+++ b/src/components/Nav/Header/Header.tsx
@@ -148,8 +148,10 @@ export const Header = (props: Props) => {
   }
 
   onMount(async () => {
-    const topics = await apiClient.getRandomTopics({ amount: RANDOM_TOPICS_COUNT })
-    setRandomTopics(topics)
+    if (window.location.pathname === '/' || window.location.pathname === '') {
+      const topics = await apiClient.getRandomTopics({ amount: RANDOM_TOPICS_COUNT })
+      setRandomTopics(topics)
+    }
   })
 
   const handleToggleMenuByLink = (event: MouseEvent, route: keyof typeof ROUTES) => {
diff --git a/src/components/ProfileSettings/ProfileSettings.tsx b/src/components/ProfileSettings/ProfileSettings.tsx
index 490c289a..29382f3b 100644
--- a/src/components/ProfileSettings/ProfileSettings.tsx
+++ b/src/components/ProfileSettings/ProfileSettings.tsx
@@ -38,7 +38,7 @@ export const ProfileSettings = () => {
   const [addLinkForm, setAddLinkForm] = createSignal<boolean>(false)
   const [incorrectUrl, setIncorrectUrl] = createSignal<boolean>(false)
   const [isUserpicUpdating, setIsUserpicUpdating] = createSignal(false)
-  const [userpicFile, setUserpicFile] = createSignal<any | null>(null)
+  const [userpicFile, setUserpicFile] = createSignal(null)
   const [uploadError, setUploadError] = createSignal(false)
   const [isFloatingPanelVisible, setIsFloatingPanelVisible] = createSignal(false)
   const [hostname, setHostname] = createSignal<string | null>(null)
diff --git a/src/components/Topic/Card.tsx b/src/components/Topic/Card.tsx
index 23dd980e..917aa396 100644
--- a/src/components/Topic/Card.tsx
+++ b/src/components/Topic/Card.tsx
@@ -1,12 +1,10 @@
-import type { Topic } from '../../graphql/schema/core.gen'
-
 import { clsx } from 'clsx'
 import { createMemo, createSignal, Show } from 'solid-js'
 
+import { useFollowing } from '../../context/following'
 import { useLocalize } from '../../context/localize'
 import { useSession } from '../../context/session'
-import { FollowingEntity } from '../../graphql/schema/core.gen'
-import { follow, unfollow } from '../../stores/zine/common'
+import { FollowingEntity, type Topic } from '../../graphql/schema/core.gen'
 import { capitalize } from '../../utils/capitalize'
 import { Button } from '../_shared/Button'
 import { CheckButton } from '../_shared/CheckButton'
@@ -36,32 +34,21 @@ interface TopicProps {
 
 export const TopicCard = (props: TopicProps) => {
   const { t, lang } = useLocalize()
+  const title = createMemo(() =>
+    capitalize(lang() === 'en' ? props.topic.slug.replaceAll('-', ' ') : props.topic.title || ''),
+  )
   const {
-    subscriptions,
-    isSessionLoaded,
-    actions: { loadSubscriptions, requireAuthentication },
+    author,
+    actions: { requireAuthentication },
   } = useSession()
+  const { setFollowing, loading: subLoading } = useFollowing()
+  const [followed, setFollowed] = createSignal()
 
-  const [isSubscribing, setIsSubscribing] = createSignal(false)
-
-  const subscribed = createMemo(() => {
-    return subscriptions().topics.some((topic) => topic.slug === props.topic.slug)
-  })
-
-  const subscribe = async (really = true) => {
-    setIsSubscribing(true)
-
-    await (really
-      ? follow({ what: FollowingEntity.Topic, slug: props.topic.slug })
-      : unfollow({ what: FollowingEntity.Topic, slug: props.topic.slug }))
-
-    await loadSubscriptions()
-    setIsSubscribing(false)
-  }
-
-  const handleSubscribe = () => {
+  const handleFollowClick = () => {
+    const value = !followed()
     requireAuthentication(() => {
-      subscribe(!subscribed())
+      setFollowed(value)
+      setFollowing(FollowingEntity.Topic, props.topic.slug, value)
     }, 'subscribe')
   }
 
@@ -69,12 +56,12 @@ export const TopicCard = (props: TopicProps) => {
     return (
       <>
         <Show when={props.iconButton}>
-          <Show when={subscribed()} fallback="+">
+          <Show when={followed()} fallback="+">
             <Icon name="check-subscribed" />
           </Show>
         </Show>
         <Show when={!props.iconButton}>
-          <Show when={subscribed()} fallback={t('Follow')}>
+          <Show when={followed()} fallback={t('Follow')}>
             <span class={stylesButton.buttonSubscribeLabelHovered}>{t('Unfollow')}</span>
             <span class={stylesButton.buttonSubscribeLabel}>{t('Following')}</span>
           </Show>
@@ -83,10 +70,6 @@ export const TopicCard = (props: TopicProps) => {
     )
   }
 
-  const title = createMemo(() =>
-    capitalize(lang() === 'en' ? props.topic.slug.replaceAll('-', ' ') : props.topic.title || ''),
-  )
-
   return (
     <div class={styles.topicContainer}>
       <div
@@ -141,24 +124,28 @@ export const TopicCard = (props: TopicProps) => {
           }}
         >
           <ShowOnlyOnClient>
-            <Show when={isSessionLoaded()}>
+            <Show when={author()}>
               <Show
                 when={!props.minimizeSubscribeButton}
                 fallback={
-                  <CheckButton text={t('Follow')} checked={subscribed()} onClick={handleSubscribe} />
+                  <CheckButton
+                    text={t('Follow')}
+                    checked={Boolean(followed())}
+                    onClick={handleFollowClick}
+                  />
                 }
               >
                 <Button
                   variant="bordered"
                   size="M"
                   value={subscribeValue()}
-                  onClick={handleSubscribe}
+                  onClick={handleFollowClick}
                   isSubscribeButton={true}
                   class={clsx(styles.actionButton, {
-                    [styles.isSubscribing]: isSubscribing(),
-                    [stylesButton.subscribed]: subscribed(),
+                    [styles.isSubscribing]: subLoading(),
+                    [stylesButton.subscribed]: followed(),
                   })}
-                  disabled={isSubscribing()}
+                  // disabled={subLoading()}
                 />
               </Show>
             </Show>
diff --git a/src/components/Topic/Full.tsx b/src/components/Topic/Full.tsx
index 0bdf8497..6ee7e206 100644
--- a/src/components/Topic/Full.tsx
+++ b/src/components/Topic/Full.tsx
@@ -1,12 +1,12 @@
 import type { Topic } from '../../graphql/schema/core.gen'
 
 import { clsx } from 'clsx'
-import { createMemo, Show } from 'solid-js'
+import { createEffect, createSignal, Show } from 'solid-js'
 
+import { useFollowing } from '../../context/following'
 import { useLocalize } from '../../context/localize'
 import { useSession } from '../../context/session'
 import { FollowingEntity } from '../../graphql/schema/core.gen'
-import { follow, unfollow } from '../../stores/zine/common'
 import { Button } from '../_shared/Button'
 
 import styles from './Full.module.scss'
@@ -16,23 +16,26 @@ type Props = {
 }
 
 export const FullTopic = (props: Props) => {
-  const {
-    subscriptions,
-    actions: { requireAuthentication, loadSubscriptions },
-  } = useSession()
-
   const { t } = useLocalize()
+  const { subscriptions, setFollowing } = useFollowing()
+  const {
+    actions: { requireAuthentication },
+  } = useSession()
+  const [followed, setFollowed] = createSignal()
 
-  const subscribed = createMemo(() =>
-    subscriptions().topics.some((topic) => topic.slug === props.topic?.slug),
-  )
+  createEffect(() => {
+    const subs = subscriptions
+    if (subs?.topics.length !== 0) {
+      const items = subs.topics || []
+      setFollowed(items.some((x: Topic) => x?.slug === props.topic?.slug))
+    }
+  })
 
-  const handleSubscribe = (really: boolean) => {
-    requireAuthentication(async () => {
-      await (really
-        ? follow({ what: FollowingEntity.Topic, slug: props.topic.slug })
-        : unfollow({ what: FollowingEntity.Topic, slug: props.topic.slug }))
-      loadSubscriptions()
+  const handleFollowClick = (_ev) => {
+    const really = !followed()
+    setFollowed(really)
+    requireAuthentication(() => {
+      setFollowing(FollowingEntity.Topic, props.topic.slug, really)
     }, 'follow')
   }
 
@@ -41,16 +44,11 @@ export const FullTopic = (props: Props) => {
       <h1>#{props.topic?.title}</h1>
       <p>{props.topic?.body}</p>
       <div class={clsx(styles.topicActions)}>
-        <Show when={!subscribed()}>
-          <Button variant="primary" onClick={() => handleSubscribe(true)} value={t('Follow the topic')} />
-        </Show>
-        <Show when={subscribed()}>
-          <Button
-            variant="primary"
-            onClick={() => handleSubscribe(false)}
-            value={t('Unfollow the topic')}
-          />
-        </Show>
+        <Button
+          variant="primary"
+          onClick={handleFollowClick}
+          value={followed() ? t('Unfollow the topic') : t('Follow the topic')}
+        />
         <a class={styles.write} href={`/create/?topicId=${props.topic?.id}`}>
           {t('Write about the topic')}
         </a>
diff --git a/src/components/Topic/TopicBadge/TopicBadge.tsx b/src/components/Topic/TopicBadge/TopicBadge.tsx
index baa410b6..9de4e234 100644
--- a/src/components/Topic/TopicBadge/TopicBadge.tsx
+++ b/src/components/Topic/TopicBadge/TopicBadge.tsx
@@ -1,17 +1,18 @@
 import { clsx } from 'clsx'
-import { createEffect, createMemo, createSignal, Show } from 'solid-js'
+import { createEffect, createSignal, Show } from 'solid-js'
 
+import { useFollowing } from '../../../context/following'
 import { useLocalize } from '../../../context/localize'
 import { useMediaQuery } from '../../../context/mediaQuery'
 import { useSession } from '../../../context/session'
 import { FollowingEntity, Topic } from '../../../graphql/schema/core.gen'
-import { follow, unfollow } from '../../../stores/zine/common'
 import { capitalize } from '../../../utils/capitalize'
 import { getImageUrl } from '../../../utils/getImageUrl'
 import { Button } from '../../_shared/Button'
 import { CheckButton } from '../../_shared/CheckButton'
 
 import styles from './TopicBadge.module.scss'
+
 type Props = {
   topic: Topic
   minimizeSubscribeButton?: boolean
@@ -21,29 +22,23 @@ export const TopicBadge = (props: Props) => {
   const { t, lang } = useLocalize()
   const { mediaMatches } = useMediaQuery()
   const [isMobileView, setIsMobileView] = createSignal(false)
-  const [isSubscribing, setIsSubscribing] = createSignal(false)
+  const {
+    actions: { requireAuthentication },
+  } = useSession()
+  const { setFollowing, loading: subLoading } = useFollowing()
+  const [followed, setFollowed] = createSignal()
+
+  const handleFollowClick = () => {
+    const value = !followed()
+    requireAuthentication(() => {
+      setFollowed(value)
+      setFollowing(FollowingEntity.Topic, props.topic.slug, value)
+    }, 'subscribe')
+  }
+
   createEffect(() => {
     setIsMobileView(!mediaMatches.sm)
   })
-  const {
-    subscriptions,
-    actions: { loadSubscriptions },
-  } = useSession()
-
-  const subscribed = createMemo(() =>
-    subscriptions().topics.some((topic) => topic.slug === props.topic.slug),
-  )
-
-  const subscribe = async (really = true) => {
-    setIsSubscribing(true)
-
-    await (really
-      ? follow({ what: FollowingEntity.Topic, slug: props.topic.slug })
-      : unfollow({ what: FollowingEntity.Topic, slug: props.topic.slug }))
-
-    await loadSubscriptions()
-    setIsSubscribing(false)
-  }
 
   const title = () =>
     lang() === 'en' ? capitalize(props.topic.slug.replaceAll('-', ' ')) : props.topic.title
@@ -82,23 +77,23 @@ export const TopicBadge = (props: Props) => {
         <Show
           when={!props.minimizeSubscribeButton}
           fallback={
-            <CheckButton text={t('Follow')} checked={subscribed()} onClick={() => subscribe(!subscribed)} />
+            <CheckButton text={t('Follow')} checked={Boolean(followed())} onClick={handleFollowClick} />
           }
         >
           <Show
-            when={subscribed()}
+            when={followed()}
             fallback={
               <Button
                 variant="primary"
                 size="S"
-                value={isSubscribing() ? t('subscribing...') : t('Subscribe')}
-                onClick={() => subscribe(true)}
+                value={subLoading() ? t('subscribing...') : t('Subscribe')}
+                onClick={handleFollowClick}
                 class={styles.subscribeButton}
               />
             }
           >
             <Button
-              onClick={() => subscribe(false)}
+              onClick={handleFollowClick}
               variant="bordered"
               size="S"
               value={t('Following')}
diff --git a/src/components/Views/AllTopics.tsx b/src/components/Views/AllTopics.tsx
index 655316a8..0fc38077 100644
--- a/src/components/Views/AllTopics.tsx
+++ b/src/components/Views/AllTopics.tsx
@@ -4,8 +4,8 @@ import { Meta } from '@solidjs/meta'
 import { clsx } from 'clsx'
 import { createEffect, createMemo, createSignal, For, Show } from 'solid-js'
 
+import { useFollowing } from '../../context/following'
 import { useLocalize } from '../../context/localize'
-import { useSession } from '../../context/session'
 import { useRouter } from '../../stores/router'
 import { setTopicsSort, useTopicsStore } from '../../stores/zine/topics'
 import { capitalize } from '../../utils/capitalize'
@@ -41,7 +41,7 @@ export const AllTopicsView = (props: Props) => {
     sortBy: searchParams().by || 'shouts',
   })
 
-  const { subscriptions } = useSession()
+  const { subscriptions } = useFollowing()
 
   createEffect(() => {
     if (!searchParams().by) {
@@ -76,7 +76,7 @@ export const AllTopicsView = (props: Props) => {
     return keys
   })
 
-  const subscribed = (topicSlug: string) => subscriptions().topics.some((topic) => topic.slug === topicSlug)
+  const subscribed = (topicSlug: string) => subscriptions.topics.some((topic) => topic.slug === topicSlug)
 
   const showMore = () => setLimit((oldLimit) => oldLimit + PAGE_SIZE)
   const [searchQuery, setSearchQuery] = createSignal('')
@@ -191,7 +191,7 @@ export const AllTopicsView = (props: Props) => {
                       {(topic) => (
                         <>
                           <TopicCard
-                            topic={topic as Topic}
+                            topic={topic}
                             compact={false}
                             subscribed={subscribed(topic.slug)}
                             showPublications={true}
diff --git a/src/components/Views/Author/Author.tsx b/src/components/Views/Author/Author.tsx
index 637115ce..2de280a3 100644
--- a/src/components/Views/Author/Author.tsx
+++ b/src/components/Views/Author/Author.tsx
@@ -1,10 +1,11 @@
-import type { Author, Shout, Topic } from '../../../graphql/schema/core.gen'
+import type { Author, Reaction, Shout, Topic } from '../../../graphql/schema/core.gen'
 
 import { getPagePath } from '@nanostores/router'
 import { Meta } from '@solidjs/meta'
 import { clsx } from 'clsx'
-import { Show, createMemo, createSignal, Switch, onMount, For, Match, createEffect } from 'solid-js'
+import { Show, createMemo, createSignal, Switch, onMount, For, Match, createEffect, on } from 'solid-js'
 
+import { useFollowing } from '../../../context/following'
 import { useLocalize } from '../../../context/localize'
 import { apiClient } from '../../../graphql/client/core'
 import { router, useRouter } from '../../../stores/router'
@@ -13,6 +14,7 @@ import { loadAuthor, useAuthorsStore } from '../../../stores/zine/authors'
 import { getImageUrl } from '../../../utils/getImageUrl'
 import { getDescription } from '../../../utils/meta'
 import { restoreScrollPosition, saveScrollPosition } from '../../../utils/scroll'
+import { byCreated } from '../../../utils/sortby'
 import { splitToPages } from '../../../utils/splitToPages'
 import { Loading } from '../../_shared/Loading'
 import { Comment } from '../../Article/Comment'
@@ -36,6 +38,7 @@ const LOAD_MORE_PAGE_SIZE = 9
 
 export const AuthorView = (props: Props) => {
   const { t } = useLocalize()
+  const { loadSubscriptions } = useFollowing()
   const { sortedArticles } = useArticlesStore({ shouts: props.shouts })
   const { authorEntities } = useAuthorsStore({ authors: [props.author] })
   const { page: getPage } = useRouter()
@@ -44,21 +47,32 @@ export const AuthorView = (props: Props) => {
   const [followers, setFollowers] = createSignal<Author[]>([])
   const [following, setFollowing] = createSignal<Array<Author | Topic>>([])
   const [showExpandBioControl, setShowExpandBioControl] = createSignal(false)
-  const author = createMemo(() => authorEntities()[props.authorSlug])
 
-  createEffect(async () => {
+  // current author
+  const [author, setAuthor] = createSignal<Author>()
+  createEffect(() => {
+    try {
+      const a = authorEntities()[props.authorSlug]
+      setAuthor(a)
+    } catch (error) {
+      console.debug(error)
+    }
+  })
+
+  createEffect(() => {
     if (author() && author().id && !author().stat) {
-      const a = await loadAuthor({ slug: '', author_id: author().id })
+      const a = loadAuthor({ slug: '', author_id: author().id })
       console.debug(`[AuthorView] loaded author:`, a)
     }
   })
 
   const bioContainerRef: { current: HTMLDivElement } = { current: null }
   const bioWrapperRef: { current: HTMLDivElement } = { current: null }
+
   const fetchSubscriptions = async (): Promise<{ authors: Author[]; topics: Topic[] }> => {
     try {
       const [getAuthors, getTopics] = await Promise.all([
-        apiClient.getAuthorFollowingUsers({ slug: props.authorSlug }),
+        apiClient.getAuthorFollowingAuthors({ slug: props.authorSlug }),
         apiClient.getAuthorFollowingTopics({ slug: props.authorSlug }),
       ])
       const authors = getAuthors
@@ -76,32 +90,27 @@ export const AuthorView = (props: Props) => {
     }
   }
 
-  onMount(async () => {
-    checkBioHeight()
-
-    // pagination
-    if (sortedArticles().length === PRERENDERED_ARTICLES_COUNT) {
-      await loadMore()
-    }
-  })
-
-  createEffect(async () => {
-    const slug = author()?.slug
-    if (slug) {
-      console.debug('[AuthorView] load subscriptions')
+  const fetchData = async () => {
+    const slug = author()?.slug || props.authorSlug
+    if (slug && getPage().route === 'authorComments' && author()) {
       try {
         const { authors, topics } = await fetchSubscriptions()
         setFollowing([...(authors || []), ...(topics || [])])
-        const userSubscribers = await apiClient.getAuthorFollowers({ slug })
-        setFollowers(userSubscribers || [])
+        const flwrs = await apiClient.getAuthorFollowers({ slug })
+        setFollowers(flwrs || [])
+        console.info('[components.Author] following data loaded')
       } catch (error) {
-        console.error('[AuthorView] error:', error)
+        console.error('[components.Author] fetch error', error)
       }
     }
-  })
+  }
 
   createEffect(() => {
-    document.title = author()?.name
+    if (author()) {
+      console.info('[components.Author] profile data loaded')
+      document.title = author().name
+      fetchData()
+    }
   })
 
   const loadMore = async () => {
@@ -115,42 +124,56 @@ export const AuthorView = (props: Props) => {
     restoreScrollPosition()
   }
 
+  onMount(() => {
+    checkBioHeight()
+
+    // pagination
+    if (sortedArticles().length === PRERENDERED_ARTICLES_COUNT) {
+      loadMore()
+      loadSubscriptions()
+    }
+  })
+
   const pages = createMemo<Shout[][]>(() =>
     splitToPages(sortedArticles(), PRERENDERED_ARTICLES_COUNT, LOAD_MORE_PAGE_SIZE),
   )
 
-  const [commented, setCommented] = createSignal([])
+  const fetchComments = async (commenter: Author) => {
+    const data = await apiClient.getReactionsBy({
+      by: { comment: true, created_by: commenter.id },
+    })
+    console.debug(`[components.Author] fetched ${data.length} comments`)
+    setCommented(data)
+  }
 
-  createEffect(async () => {
-    if (getPage().route === 'authorComments' && props.author) {
-      try {
-        const data = await apiClient.getReactionsBy({
-          by: { comment: true, created_by: props.author.id },
-        })
-        setCommented(data)
-      } catch (error) {
-        console.error('[getReactionsBy comment]', error)
-      }
+  const [commented, setCommented] = createSignal<Reaction[]>([])
+  createEffect(() => {
+    const a = author()
+    if (a) {
+      fetchComments(a)
     }
   })
 
-  const ogImage = props.author?.pic
-    ? getImageUrl(props.author.pic, { width: 1200 })
-    : getImageUrl('production/image/logo_image.png')
-  const description = getDescription(props.author?.bio)
-  const ogTitle = props.author?.name
+  const ogImage = createMemo(() =>
+    author()?.pic
+      ? getImageUrl(author()?.pic, { width: 1200 })
+      : getImageUrl('production/image/logo_image.png'),
+  )
+  const description = createMemo(() => getDescription(author()?.bio))
 
   return (
     <div class={styles.authorPage}>
-      <Meta name="descprition" content={description} />
-      <Meta name="og:type" content="profile" />
-      <Meta name="og:title" content={ogTitle} />
-      <Meta name="og:image" content={ogImage} />
-      <Meta name="og:description" content={description} />
-      <Meta name="twitter:card" content="summary_large_image" />
-      <Meta name="twitter:title" content={ogTitle} />
-      <Meta name="twitter:description" content={description} />
-      <Meta name="twitter:image" content={ogImage} />
+      <Show when={author()}>
+        <Meta name="descprition" content={description()} />
+        <Meta name="og:type" content="profile" />
+        <Meta name="og:title" content={author().name} />
+        <Meta name="og:image" content={ogImage()} />
+        <Meta name="og:description" content={description()} />
+        <Meta name="twitter:card" content="summary_large_image" />
+        <Meta name="twitter:title" content={author().name} />
+        <Meta name="twitter:description" content={description()} />
+        <Meta name="twitter:image" content={ogImage()} />
+      </Show>
       <div class="wide-container">
         <Show when={author()} fallback={<Loading />}>
           <>
diff --git a/src/components/Views/ProfileSubscriptions/ProfileSubscriptions.tsx b/src/components/Views/ProfileSubscriptions/ProfileSubscriptions.tsx
index e21f5f60..c41b549f 100644
--- a/src/components/Views/ProfileSubscriptions/ProfileSubscriptions.tsx
+++ b/src/components/Views/ProfileSubscriptions/ProfileSubscriptions.tsx
@@ -28,9 +28,10 @@ export const ProfileSubscriptions = () => {
 
   const fetchSubscriptions = async () => {
     try {
+      const slug = author()?.slug
       const [getAuthors, getTopics] = await Promise.all([
-        apiClient.getAuthorFollowingUsers({ slug: author()?.slug }),
-        apiClient.getAuthorFollowingTopics({ slug: author()?.slug }),
+        apiClient.getAuthorFollowingAuthors({ slug }),
+        apiClient.getAuthorFollowingTopics({ slug }),
       ])
       setFollowing([...getAuthors, ...getTopics])
       setFiltered([...getAuthors, ...getTopics])
@@ -42,7 +43,7 @@ export const ProfileSubscriptions = () => {
 
   createEffect(() => {
     if (following()) {
-      if (subscriptionFilter() === 'users') {
+      if (subscriptionFilter() === 'authors') {
         setFiltered(following().filter((s) => 'name' in s))
       } else if (subscriptionFilter() === 'topics') {
         setFiltered(following().filter((s) => 'title' in s))
@@ -80,8 +81,8 @@ export const ProfileSubscriptions = () => {
                       {t('All')}
                     </button>
                   </li>
-                  <li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'users' })}>
-                    <button type="button" onClick={() => setSubscriptionFilter('users')}>
+                  <li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'authors' })}>
+                    <button type="button" onClick={() => setSubscriptionFilter('authors')}>
                       {t('Authors')}
                     </button>
                   </li>
diff --git a/src/components/Views/PublishSettings/PublishSettings.tsx b/src/components/Views/PublishSettings/PublishSettings.tsx
index b5a144e4..1fe168be 100644
--- a/src/components/Views/PublishSettings/PublishSettings.tsx
+++ b/src/components/Views/PublishSettings/PublishSettings.tsx
@@ -1,6 +1,6 @@
 import { redirectPage } from '@nanostores/router'
 import { clsx } from 'clsx'
-import { createEffect, createSignal, lazy, onMount, Show } from 'solid-js'
+import { createEffect, createMemo, createSignal, lazy, onMount, Show } from 'solid-js'
 import { createStore } from 'solid-js/store'
 
 import { ShoutForm, useEditorContext } from '../../../context/editor'
@@ -16,7 +16,6 @@ import { Icon } from '../../_shared/Icon'
 import { Image } from '../../_shared/Image'
 import { TopicSelect, UploadModalContent } from '../../Editor'
 import { Modal } from '../../Nav/Modal'
-import { EMPTY_TOPIC } from '../Edit'
 
 import styles from './PublishSettings.module.scss'
 import stylesBeside from '../../Feed/Beside.module.scss'
@@ -36,21 +35,26 @@ const shorten = (str: string, maxLen: number) => {
   return `${result}...`
 }
 
+const EMPTY_TOPIC: Topic = {
+  id: -1,
+  slug: '',
+}
+const emptyConfig = {
+  coverImageUrl: '',
+  mainTopic: EMPTY_TOPIC,
+  slug: '',
+  title: '',
+  subtitle: '',
+  description: '',
+  selectedTopics: [],
+}
+
 export const PublishSettings = (props: Props) => {
   const { t } = useLocalize()
   const { author } = useSession()
   const { sortedTopics } = useTopicsStore()
-
   const [topics, setTopics] = createSignal<Topic[]>(sortedTopics())
 
-  onMount(async () => {
-    await loadAllTopics()
-  })
-
-  createEffect(() => {
-    setTopics(sortedTopics())
-  })
-
   const composeDescription = () => {
     if (!props.form.description) {
       const cleanFootnotes = props.form.body.replaceAll(/<footnote data-value=".*?">.*?<\/footnote>/g, '')
@@ -60,23 +64,32 @@ export const PublishSettings = (props: Props) => {
     return props.form.description
   }
 
-  const initialData: Partial<ShoutForm> = {
-    coverImageUrl: props.form.coverImageUrl,
-    mainTopic: props.form.mainTopic || EMPTY_TOPIC,
-    slug: props.form.slug,
-    title: props.form.title,
-    subtitle: props.form.subtitle,
-    description: composeDescription(),
-    selectedTopics: [],
-  }
+  const initialData = createMemo(() => {
+    return {
+      coverImageUrl: props.form?.coverImageUrl,
+      mainTopic: props.form?.mainTopic || EMPTY_TOPIC,
+      slug: props.form?.slug,
+      title: props.form?.title,
+      subtitle: props.form?.subtitle,
+      description: composeDescription(),
+      selectedTopics: [],
+    }
+  })
+
+  const [settingsForm, setSettingsForm] = createStore(emptyConfig)
+
+  onMount(() => {
+    setSettingsForm(initialData())
+    loadAllTopics()
+  })
+
+  createEffect(() => setTopics(sortedTopics()))
 
   const {
     formErrors,
     actions: { setForm, setFormErrors, saveShout, publishShout },
   } = useEditorContext()
 
-  const [settingsForm, setSettingsForm] = createStore(initialData)
-
   const handleUploadModalContentCloseSetCover = (image: UploadedFile) => {
     hideModal()
     setSettingsForm('coverImageUrl', image.url)
@@ -110,7 +123,7 @@ export const PublishSettings = (props: Props) => {
     })
   }
   const handleCancelClick = () => {
-    setSettingsForm(initialData)
+    setSettingsForm(initialData())
     handleBackClick()
   }
   const handlePublishSubmit = () => {
@@ -149,9 +162,9 @@ export const PublishSettings = (props: Props) => {
                   [styles.hasImage]: settingsForm.coverImageUrl,
                 })}
               >
-                <Show when={settingsForm.coverImageUrl ?? initialData.coverImageUrl}>
+                <Show when={settingsForm.coverImageUrl ?? initialData().coverImageUrl}>
                   <div class={styles.shoutCardCover}>
-                    <Image src={settingsForm.coverImageUrl} alt={initialData.title} width={800} />
+                    <Image src={settingsForm.coverImageUrl} alt={initialData().title} width={800} />
                   </div>
                 </Show>
                 <div class={styles.text}>
diff --git a/src/components/Views/Topic.tsx b/src/components/Views/Topic.tsx
index a6702147..1b3d059a 100644
--- a/src/components/Views/Topic.tsx
+++ b/src/components/Views/Topic.tsx
@@ -2,7 +2,7 @@ import type { Shout, Topic } from '../../graphql/schema/core.gen'
 
 import { Meta } from '@solidjs/meta'
 import { clsx } from 'clsx'
-import { For, Show, createMemo, onMount, createSignal } from 'solid-js'
+import { For, Show, createMemo, onMount, createSignal, createEffect } from 'solid-js'
 
 import { useLocalize } from '../../context/localize'
 import { useRouter } from '../../stores/router'
@@ -39,23 +39,27 @@ const LOAD_MORE_PAGE_SIZE = 9 // Row3 + Row3 + Row3
 export const TopicView = (props: Props) => {
   const { t, lang } = useLocalize()
   const { searchParams, changeSearchParams } = useRouter<TopicsPageSearchParams>()
-
   const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false)
-
   const { sortedArticles } = useArticlesStore({ shouts: props.shouts })
   const { topicEntities } = useTopicsStore({ topics: [props.topic] })
-
   const { authorsByTopic } = useAuthorsStore()
 
-  const topic = createMemo(() =>
-    props.topic?.slug in topicEntities() ? topicEntities()[props.topic.slug] : props.topic,
+  const [topic, setTopic] = createSignal<Topic>()
+  createEffect(() => {
+    const topics = topicEntities()
+    if (props.topicSlug && !topic() && topics) {
+      setTopic(topics[props.topicSlug])
+    }
+  })
+  const title = createMemo(
+    () =>
+      `#${capitalize(
+        lang() === 'en'
+          ? topic()?.slug.replace(/-/, ' ')
+          : topic()?.title || topic()?.slug.replace(/-/, ' '),
+        true,
+      )}`,
   )
-  const title = () =>
-    `#${capitalize(
-      lang() === 'en' ? topic()?.slug.replace(/-/, ' ') : topic()?.title || topic()?.slug.replace(/-/, ' '),
-      true,
-    )}`
-  onMount(() => (document.title = title()))
 
   const loadMore = async () => {
     saveScrollPosition()
diff --git a/src/context/editor.tsx b/src/context/editor.tsx
index 41975d52..6d7c550b 100644
--- a/src/context/editor.tsx
+++ b/src/context/editor.tsx
@@ -218,10 +218,10 @@ export const EditorProvider = (props: { children: JSX.Element }) => {
     }
   }
 
-  const deleteShout = async (shoutId: number) => {
+  const deleteShout = async (shout_id: number) => {
     try {
       await apiClient.deleteShout({
-        shoutId,
+        shout_id,
       })
       return true
     } catch {
diff --git a/src/context/following.tsx b/src/context/following.tsx
new file mode 100644
index 00000000..c826740b
--- /dev/null
+++ b/src/context/following.tsx
@@ -0,0 +1,122 @@
+import { createEffect, createSignal, createContext, Accessor, useContext, JSX, onMount } from 'solid-js'
+import { createStore } from 'solid-js/store'
+
+import { apiClient } from '../graphql/client/core'
+import { Author, Community, FollowingEntity, Topic } from '../graphql/schema/core.gen'
+
+import { useSession } from './session'
+
+type SubscriptionsData = {
+  topics?: Topic[]
+  authors?: Author[]
+  communities?: Community[]
+}
+
+interface FollowingContextType {
+  loading: Accessor<boolean>
+  subscriptions: SubscriptionsData
+  setSubscriptions: (subscriptions: SubscriptionsData) => void
+  setFollowing: (what: FollowingEntity, slug: string, value: boolean) => void
+  loadSubscriptions: () => void
+  follow: (what: FollowingEntity, slug: string) => Promise<void>
+  unfollow: (what: FollowingEntity, slug: string) => Promise<void>
+}
+
+const FollowingContext = createContext<FollowingContextType>()
+
+export function useFollowing() {
+  return useContext(FollowingContext)
+}
+
+const EMPTY_SUBSCRIPTIONS = {
+  topics: [],
+  authors: [],
+  communities: [],
+}
+
+export const FollowingProvider = (props: { children: JSX.Element }) => {
+  const [loading, setLoading] = createSignal<boolean>(false)
+  const [subscriptions, setSubscriptions] = createStore<SubscriptionsData>(EMPTY_SUBSCRIPTIONS)
+  const { author } = useSession()
+
+  const fetchData = async () => {
+    setLoading(true)
+    try {
+      if (apiClient.private) {
+        console.debug('[context.following] fetching subs data...')
+        const result = await apiClient.getMySubscriptions()
+        setSubscriptions(result || EMPTY_SUBSCRIPTIONS)
+        console.info('[context.following] subs:', subscriptions)
+      }
+    } catch (error) {
+      console.info('[context.following] cannot get subs', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const follow = async (what: FollowingEntity, slug: string) => {
+    if (!author()) return
+    try {
+      await apiClient.follow({ what, slug })
+      setSubscriptions((prevSubscriptions) => {
+        const updatedSubs = { ...prevSubscriptions }
+        if (!updatedSubs[what]) updatedSubs[what] = []
+        const exists = updatedSubs[what]?.some((entity) => entity.slug === slug)
+        if (!exists) updatedSubs[what].push(slug)
+        return updatedSubs
+      })
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  const unfollow = async (what: FollowingEntity, slug: string) => {
+    if (!author()) return
+    try {
+      await apiClient.unfollow({ what, slug })
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  createEffect(() => {
+    if (author()) {
+      console.debug('[context.following] author update detect')
+      fetchData()
+    }
+  })
+
+  const setFollowing = (what: FollowingEntity, slug: string, value = true) => {
+    setSubscriptions((prevSubscriptions) => {
+      const updatedSubs = { ...prevSubscriptions }
+      if (!updatedSubs[what]) updatedSubs[what] = []
+      if (value) {
+        const exists = updatedSubs[what]?.some((entity) => entity.slug === slug)
+        if (!exists) updatedSubs[what].push(slug)
+      } else {
+        updatedSubs[what] = (updatedSubs[what] || []).filter((x) => x !== slug)
+      }
+      return updatedSubs
+    })
+    try {
+      ;(value ? follow : unfollow)(what, slug)
+    } catch (error) {
+      console.error(error)
+    } finally {
+      fetchData()
+    }
+  }
+
+  const value: FollowingContextType = {
+    loading,
+    subscriptions,
+    setSubscriptions,
+    setFollowing,
+    loadSubscriptions: fetchData,
+    follow,
+    unfollow,
+  }
+
+  return <FollowingContext.Provider value={value}>{props.children}</FollowingContext.Provider>
+}
diff --git a/src/context/inbox.tsx b/src/context/inbox.tsx
index f518929c..22cbf22d 100644
--- a/src/context/inbox.tsx
+++ b/src/context/inbox.tsx
@@ -34,13 +34,13 @@ export const InboxProvider = (props: { children: JSX.Element }) => {
   const { sortedAuthors } = useAuthorsStore()
 
   const handleMessage = (sseMessage: SSEMessage) => {
-    console.log('[context.inbox]:', sseMessage)
-
     // handling all action types: create update delete join left seen
     if (sseMessage.entity === 'message') {
+      console.debug('[context.inbox]:', sseMessage.payload)
       const relivedMessage = sseMessage.payload
       setMessages((prev) => [...prev, relivedMessage])
     } else if (sseMessage.entity === 'chat') {
+      console.debug('[context.inbox]:', sseMessage.payload)
       const relivedChat = sseMessage.payload
       setChats((prev) => [...prev, relivedChat])
     }
diff --git a/src/context/reactions.tsx b/src/context/reactions.tsx
index c98ebcaa..5af22fe2 100644
--- a/src/context/reactions.tsx
+++ b/src/context/reactions.tsx
@@ -56,7 +56,7 @@ export const ReactionsProvider = (props: { children: JSX.Element }) => {
 
   const createReaction = async (input: ReactionInput): Promise<void> => {
     const reaction = await apiClient.createReaction(input)
-
+    if (!reaction) return
     const changes = {
       [reaction.id]: reaction,
     }
diff --git a/src/context/session.tsx b/src/context/session.tsx
index 0b872ab4..c2b8b8f7 100644
--- a/src/context/session.tsx
+++ b/src/context/session.tsx
@@ -1,5 +1,5 @@
 import type { AuthModalSource } from '../components/Nav/AuthModal/types'
-import type { Author, Result } from '../graphql/schema/core.gen'
+import type { Author } from '../graphql/schema/core.gen'
 import type { Accessor, JSX, Resource } from 'solid-js'
 
 import {
@@ -10,7 +10,10 @@ import {
   ConfigType,
   SignupInput,
   AuthorizeResponse,
-  // GraphqlQueryInput,
+  ApiResponse,
+  GenericResponse,
+  ForgotPasswordResponse,
+  ForgotPasswordInput,
 } from '@authorizerdev/authorizer-js'
 import {
   createContext,
@@ -41,19 +44,17 @@ const defaultConfig: ConfigType = {
 }
 
 export type SessionContextType = {
-  config: ConfigType
+  config: Accessor<ConfigType>
   session: Resource<AuthToken>
   author: Resource<Author | null>
   authError: Accessor<string>
   isSessionLoaded: Accessor<boolean>
-  subscriptions: Accessor<Result>
   isAuthenticated: Accessor<boolean>
   actions: {
     loadSession: () => AuthToken | Promise<AuthToken>
     setSession: (token: AuthToken | null) => void // setSession
     loadAuthor: (info?: unknown) => Author | Promise<Author>
     setAuthor: (a: Author) => void
-    loadSubscriptions: () => Promise<void>
     requireAuthentication: (
       callback: (() => Promise<void>) | (() => void),
       modalSource: AuthModalSource,
@@ -62,6 +63,9 @@ export type SessionContextType = {
     signIn: (params: LoginInput) => Promise<void>
     signOut: () => Promise<void>
     oauth: (provider: string) => Promise<void>
+    forgotPassword: (
+      params: ForgotPasswordInput,
+    ) => Promise<{ data: ForgotPasswordResponse; errors: Error[] }>
     changePassword: (password: string, token: string) => void
     confirmEmail: (input: VerifyEmailInput) => Promise<AuthToken | void> // email confirm callback is in auth.discours.io
     setIsSessionLoaded: (loaded: boolean) => void
@@ -77,11 +81,6 @@ export function useSession() {
   return useContext(SessionContext)
 }
 
-const EMPTY_SUBSCRIPTIONS = {
-  topics: [],
-  authors: [],
-}
-
 export const SessionProvider = (props: {
   onStateChangeCallback(state: AuthToken): unknown
   children: JSX.Element
@@ -91,12 +90,12 @@ export const SessionProvider = (props: {
     actions: { showSnackbar },
   } = useSnackbar()
   const { searchParams, changeSearchParams } = useRouter()
-  const [configuration, setConfig] = createSignal<ConfigType>(defaultConfig)
-  const authorizer = createMemo(() => new Authorizer(configuration()))
+  const [config, setConfig] = createSignal<ConfigType>(defaultConfig)
+  const authorizer = createMemo(() => new Authorizer(config()))
   const [oauthState, setOauthState] = createSignal<string>()
 
   // handle callback's redirect_uri
-  createEffect(async () => {
+  createEffect(() => {
     // oauth
     const state = searchParams()?.state
     if (state) {
@@ -120,43 +119,54 @@ export const SessionProvider = (props: {
   })
 
   // load
-  let minuteLater
+  let minuteLater: NodeJS.Timeout | null
 
   const [isSessionLoaded, setIsSessionLoaded] = createSignal(false)
   const [authError, setAuthError] = createSignal('')
-  const [session, { refetch: loadSession, mutate: setSession }] = createResource<AuthToken>(
-    async () => {
-      try {
-        const s = await authorizer().getSession()
+
+  // Function to load session data
+  const sessionData = async () => {
+    try {
+      const s: ApiResponse<AuthToken> = await authorizer().getSession()
+      if (s?.data) {
         console.info('[context.session] loading session', s)
 
         // Set session expiration time in local storage
-        const expires_at = new Date(Date.now() + s.expires_in * 1000)
+        const expires_at = new Date(Date.now() + s.data.expires_in * 1000)
         localStorage.setItem('expires_at', `${expires_at.getTime()}`)
 
         // Set up session expiration check timer
         minuteLater = setTimeout(checkSessionIsExpired, 60 * 1000)
-        console.info(`[context.session] will refresh in ${s.expires_in / 60} mins`)
+        console.info(`[context.session] will refresh in ${s.data.expires_in / 60} mins`)
 
         // Set the session loaded flag
         setIsSessionLoaded(true)
 
-        return s
-      } catch (error) {
-        console.info('[context.session] cannot refresh session', error)
-        setAuthError(error)
+        return s.data
+      } else {
+        console.info('[context.session] cannot refresh session', s.errors)
+        setAuthError(s.errors.pop().message)
 
         // Set the session loaded flag even if there's an error
         setIsSessionLoaded(true)
 
         return null
       }
-    },
-    {
-      ssrLoadFrom: 'initial',
-      initialValue: null,
-    },
-  )
+    } catch (error) {
+      console.info('[context.session] cannot refresh session', error)
+      setAuthError(error)
+
+      // Set the session loaded flag even if there's an error
+      setIsSessionLoaded(true)
+
+      return null
+    }
+  }
+
+  const [session, { refetch: loadSession, mutate: setSession }] = createResource<AuthToken>(sessionData, {
+    ssrLoadFrom: 'initial',
+    initialValue: null,
+  })
 
   const checkSessionIsExpired = () => {
     const expires_at_data = localStorage.getItem('expires_at')
@@ -177,26 +187,17 @@ export const SessionProvider = (props: {
   }
 
   onCleanup(() => clearTimeout(minuteLater))
-
-  const [author, { refetch: loadAuthor, mutate: setAuthor }] = createResource<Author | null>(
-    async () => {
-      const u = session()?.user
-      return u ? (await apiClient.getAuthorId({ user: u.id.trim() })) || null : null
-    },
-    {
-      ssrLoadFrom: 'initial',
-      initialValue: null,
-    },
-  )
-
-  const [subscriptions, setSubscriptions] = createSignal<Result>(EMPTY_SUBSCRIPTIONS)
-  const loadSubscriptions = async (): Promise<void> => {
-    const result = await apiClient.getMySubscriptions()
-    setSubscriptions(result || EMPTY_SUBSCRIPTIONS)
+  const authorData = async () => {
+    const u = session()?.user
+    return u ? (await apiClient.getAuthorId({ user: u.id.trim() })) || null : null
   }
+  const [author, { refetch: loadAuthor, mutate: setAuthor }] = createResource<Author | null>(authorData, {
+    ssrLoadFrom: 'initial',
+    initialValue: null,
+  })
 
   // when session is loaded
-  createEffect(async () => {
+  createEffect(() => {
     if (session()) {
       const token = session()?.access_token
       if (token) {
@@ -206,23 +207,24 @@ export const SessionProvider = (props: {
           notifierClient.connect(token)
           inboxClient.connect(token)
         }
-        if (!author()) {
-          const a = await loadAuthor()
-          if (a) {
-            await loadSubscriptions()
-            addAuthors([a])
-          } else {
-            reset()
-          }
-        }
+        if (!author()) loadAuthor()
+
         setIsSessionLoaded(true)
       }
     }
   })
 
+  // when author is loaded
+  createEffect(() => {
+    if (author()) {
+      addAuthors([author()])
+    } else {
+      reset()
+    }
+  })
+
   const reset = () => {
     setIsSessionLoaded(true)
-    setSubscriptions(EMPTY_SUBSCRIPTIONS)
     setSession(null)
     setAuthor(null)
   }
@@ -252,10 +254,10 @@ export const SessionProvider = (props: {
   )
 
   const [authCallback, setAuthCallback] = createSignal<() => void>(() => {})
-  const requireAuthentication = async (callback: () => void, modalSource: AuthModalSource) => {
+  const requireAuthentication = (callback: () => void, modalSource: AuthModalSource) => {
     setAuthCallback((_cb) => callback)
     if (!session()) {
-      await loadSession()
+      loadSession()
       if (!session()) {
         showModal('auth', modalSource)
       }
@@ -272,17 +274,20 @@ export const SessionProvider = (props: {
 
   // authorizer api proxy methods
   const signUp = async (params: SignupInput) => {
-    const authResult: void | AuthToken = await authorizer().signup(params)
-    if (authResult) setSession(authResult)
+    const authResult: ApiResponse<AuthToken> = await authorizer().signup(params)
+    if (authResult?.data) setSession(authResult.data)
+    if (authResult?.errors) console.error(authResult.errors)
   }
 
   const signIn = async (params: LoginInput) => {
-    const authResult: AuthToken | void = await authorizer().login(params)
-    if (authResult) setSession(authResult)
+    const authResult: ApiResponse<AuthToken> = await authorizer().login(params)
+    if (authResult?.data) setSession(authResult.data)
+    if (authResult?.errors) console.error(authResult.errors)
   }
 
   const signOut = async () => {
-    await authorizer().logout()
+    const authResult: ApiResponse<GenericResponse> = await authorizer().logout()
+    console.debug(authResult)
     reset()
     showSnackbar({ body: t("You've successfully logged out") })
   }
@@ -292,12 +297,22 @@ export const SessionProvider = (props: {
     console.debug('[context.session] change password response:', resp)
   }
 
+  const forgotPassword = async (params: ForgotPasswordInput) => {
+    const resp = await authorizer().forgotPassword(params)
+    console.debug('[context.session] change password response:', resp)
+    return { data: resp?.data, errors: resp.errors }
+  }
+
   const confirmEmail = async (input: VerifyEmailInput) => {
     console.debug(`[context.session] calling authorizer's verify email with`, input)
     try {
-      const at: void | AuthToken = await authorizer().verifyEmail(input)
-      if (at) setSession(at)
-      return at
+      const at: ApiResponse<AuthToken> = await authorizer().verifyEmail(input)
+      if (at?.data) {
+        setSession(at.data)
+        return at.data
+      } else {
+        console.warn(at?.errors)
+      }
     } catch (error) {
       console.warn(error)
     }
@@ -323,7 +338,6 @@ export const SessionProvider = (props: {
   const isAuthenticated = createMemo(() => Boolean(author()))
   const actions = {
     loadSession,
-    loadSubscriptions,
     requireAuthentication,
     signUp,
     signIn,
@@ -334,14 +348,14 @@ export const SessionProvider = (props: {
     setAuthor,
     authorizer,
     loadAuthor,
+    forgotPassword,
     changePassword,
     oauth,
   }
   const value: SessionContextType = {
     authError,
-    config: configuration(),
+    config,
     session,
-    subscriptions,
     isSessionLoaded,
     author,
     actions,
diff --git a/src/graphql/client/core.ts b/src/graphql/client/core.ts
index 38ed9705..ad149d8b 100644
--- a/src/graphql/client/core.ts
+++ b/src/graphql/client/core.ts
@@ -12,6 +12,8 @@ import type {
   QueryLoad_Authors_ByArgs,
   QueryLoad_Shouts_SearchArgs,
   QueryLoad_Shouts_Random_TopArgs,
+  Community,
+  MutationDelete_ShoutArgs,
 } from '../schema/core.gen'
 
 import { createGraphQLClient } from '../createGraphQLClient'
@@ -37,20 +39,24 @@ import authorBy from '../query/core/author-by'
 import authorFollowers from '../query/core/author-followers'
 import authorId from '../query/core/author-id'
 import authorsAll from '../query/core/authors-all'
-import authorFollowed from '../query/core/authors-followed-by'
 import authorsLoadBy from '../query/core/authors-load-by'
 import mySubscriptions from '../query/core/my-followed'
 import reactionsLoadBy from '../query/core/reactions-load-by'
 import topicBySlug from '../query/core/topic-by-slug'
 import topicsAll from '../query/core/topics-all'
-import userFollowedTopics from '../query/core/topics-by-author'
+import authorFollowedAuthors from '../query/core/authors-followed-by'
+import authorFollowedTopics from '../query/core/topics-followed-by'
+import authorFollowedCommunities from '../query/core/communities-followed-by'
 import topicsRandomQuery from '../query/core/topics-random'
 
 const publicGraphQLClient = createGraphQLClient('core')
 
 export const apiClient = {
   private: null,
-  connect: (token: string) => (apiClient.private = createGraphQLClient('core', token)), // NOTE: use it after token appears
+  connect: (token: string) => {
+    // NOTE: use it after token appears
+    apiClient.private = createGraphQLClient('core', token)
+  },
 
   getRandomTopShouts: async (params: QueryLoad_Shouts_Random_TopArgs) => {
     const response = await publicGraphQLClient.query(loadShoutsTopRandom, params).toPromise()
@@ -119,14 +125,18 @@ export const apiClient = {
     const response = await publicGraphQLClient.query(authorFollowers, { slug }).toPromise()
     return response.data.get_author_followers
   },
-  getAuthorFollowingUsers: async ({ slug }: { slug: string }): Promise<Author[]> => {
-    const response = await publicGraphQLClient.query(authorFollowed, { slug }).toPromise()
+  getAuthorFollowingAuthors: async ({ slug }: { slug: string }): Promise<Author[]> => {
+    const response = await publicGraphQLClient.query(authorFollowedAuthors, { slug }).toPromise()
     return response.data.get_author_followed
   },
   getAuthorFollowingTopics: async ({ slug }: { slug: string }): Promise<Topic[]> => {
-    const response = await publicGraphQLClient.query(userFollowedTopics, { slug }).toPromise()
+    const response = await publicGraphQLClient.query(authorFollowedTopics, { slug }).toPromise()
     return response.data.get_topics_by_author
   },
+  getAuthorFollowingCommunities: async ({ slug }: { slug: string }): Promise<Community[]> => {
+    const response = await publicGraphQLClient.query(authorFollowedCommunities, { slug }).toPromise()
+    return response.data.get_communities_by_author
+  },
   updateProfile: async (input: ProfileInput) => {
     const response = await apiClient.private.mutation(updateProfile, { profile: input }).toPromise()
     return response.data.update_profile
@@ -154,8 +164,8 @@ export const apiClient = {
     console.debug('[graphql.client.core] updateArticle:', response.data)
     return response.data.update_shout.shout
   },
-  deleteShout: async ({ shoutId }: { shoutId: number }): Promise<void> => {
-    const response = await apiClient.private.mutation(deleteShout, { shout_id: shoutId }).toPromise()
+  deleteShout: async (params: MutationDelete_ShoutArgs): Promise<void> => {
+    const response = await apiClient.private.mutation(deleteShout, params).toPromise()
     console.debug('[graphql.client.core] deleteShout:', response)
   },
   getDrafts: async (): Promise<Shout[]> => {
@@ -200,7 +210,7 @@ export const apiClient = {
     const resp = await publicGraphQLClient.query(shoutsLoadBy, { options }).toPromise()
     if (resp.error) console.error(resp)
 
-    return resp.data.load_shouts_by
+    return resp.data?.load_shouts_by
   },
 
   getShoutsSearch: async ({ text, limit, offset }: QueryLoad_Shouts_SearchArgs) => {
diff --git a/src/graphql/mutation/core/article-delete.ts b/src/graphql/mutation/core/article-delete.ts
index 9aa22fc1..6ac5578e 100644
--- a/src/graphql/mutation/core/article-delete.ts
+++ b/src/graphql/mutation/core/article-delete.ts
@@ -1,8 +1,8 @@
 import { gql } from '@urql/core'
 
 export default gql`
-  mutation DeleteShoutMutation($shoutId: Int!) {
-    delete_shout(shout_id: $shoutId) {
+  mutation DeleteShoutMutation($shout_id: Int!) {
+    delete_shout(shout_id: $shout_id) {
       error
     }
   }
diff --git a/src/graphql/mutation/core/reaction-create.ts b/src/graphql/mutation/core/reaction-create.ts
index c85d3353..72852d97 100644
--- a/src/graphql/mutation/core/reaction-create.ts
+++ b/src/graphql/mutation/core/reaction-create.ts
@@ -8,7 +8,6 @@ export default gql`
         id
         body
         kind
-        range
         created_at
         reply_to
         stat {
diff --git a/src/graphql/query/core/authors-load-by.ts b/src/graphql/query/core/authors-load-by.ts
index 11e11be2..427889c4 100644
--- a/src/graphql/query/core/authors-load-by.ts
+++ b/src/graphql/query/core/authors-load-by.ts
@@ -1,7 +1,7 @@
 import { gql } from '@urql/core'
 
 export default gql`
-  query AuthorsAllQuery($by: AuthorsBy, $limit: Int, $offset: Int) {
+  query AuthorsAllQuery($by: AuthorsBy!, $limit: Int, $offset: Int) {
     load_authors_by(by: $by, limit: $limit, offset: $offset) {
       id
       slug
diff --git a/src/graphql/query/core/communities-followed-by.ts b/src/graphql/query/core/communities-followed-by.ts
new file mode 100644
index 00000000..d5d33128
--- /dev/null
+++ b/src/graphql/query/core/communities-followed-by.ts
@@ -0,0 +1,17 @@
+import { gql } from '@urql/core'
+
+export default gql`
+  query LoadCommunitiesFollowedBy($slug: String, $user: String, $author_id: Int) {
+    get_communities_by_author(slug: $slug, user: $user, author_id: $author_id) {
+      id
+      slug
+      title
+      pic
+      stat {
+        shouts
+        followers
+        authors
+      }
+    }
+  }
+`
diff --git a/src/graphql/query/core/topics-by-author.ts b/src/graphql/query/core/topics-followed-by.ts
similarity index 77%
rename from src/graphql/query/core/topics-by-author.ts
rename to src/graphql/query/core/topics-followed-by.ts
index b5d7db23..b5299177 100644
--- a/src/graphql/query/core/topics-by-author.ts
+++ b/src/graphql/query/core/topics-followed-by.ts
@@ -1,7 +1,7 @@
 import { gql } from '@urql/core'
 
 export default gql`
-  query UserFollowingTopicsQuery($slug: String, $user: String, $author_id: Int) {
+  query LoadTopicsFollowedBy($slug: String, $user: String, $author_id: Int) {
     get_topics_by_author(slug: $slug, user: $user, author_id: $author_id) {
       id
       slug
diff --git a/src/pages/types.ts b/src/pages/types.ts
index c54208c1..b36a7612 100644
--- a/src/pages/types.ts
+++ b/src/pages/types.ts
@@ -50,4 +50,4 @@ export type UploadedFile = {
   originalFilename?: string
 }
 
-export type SubscriptionFilter = 'all' | 'users' | 'topics'
+export type SubscriptionFilter = 'all' | 'authors' | 'topics' | 'communities'
diff --git a/src/stores/zine/common.ts b/src/stores/zine/common.ts
deleted file mode 100644
index c874816b..00000000
--- a/src/stores/zine/common.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { apiClient } from '../../graphql/client/core'
-import { FollowingEntity } from '../../graphql/schema/core.gen'
-
-export const follow = async ({ what, slug }: { what: FollowingEntity; slug: string }) => {
-  await apiClient.follow({ what, slug })
-}
-export const unfollow = async ({ what, slug }: { what: FollowingEntity; slug: string }) => {
-  await apiClient.unfollow({ what, slug })
-}
diff --git a/src/utils/getImageUrl.ts b/src/utils/getImageUrl.ts
index ef59e6d8..6f249115 100644
--- a/src/utils/getImageUrl.ts
+++ b/src/utils/getImageUrl.ts
@@ -15,7 +15,7 @@ export const getImageUrl = (
   src: string,
   options: { width?: number; height?: number; noSizeUrlPart?: boolean } = {},
 ) => {
-  const filename = src.split('/').pop()
+  const filename = src?.split('/').pop()
   const isAudio = src.toLowerCase().split('.').pop() in ['wav', 'mp3', 'ogg', 'aif', 'flac']
   const base = isAudio ? cdnUrl : `${thumborUrl}/unsafe/`
   const sizeUrlPart = isAudio ? '' : getSizeUrlPart(options)
diff --git a/src/utils/useEscKeyDownHandler.ts b/src/utils/useEscKeyDownHandler.ts
index 3e19f505..b3430c31 100644
--- a/src/utils/useEscKeyDownHandler.ts
+++ b/src/utils/useEscKeyDownHandler.ts
@@ -1,9 +1,9 @@
 import { onCleanup, onMount } from 'solid-js'
 
-export const useEscKeyDownHandler = (onEscKeyDown: () => void) => {
+export const useEscKeyDownHandler = (onEscKeyDown: (ev) => void) => {
   const keydownHandler = (e: KeyboardEvent) => {
     if (e.key === 'Escape') {
-      onEscKeyDown()
+      onEscKeyDown(e)
     }
   }