diff --git a/src/components/Article/Comment.tsx b/src/components/Article/Comment.tsx
index 28f91655..0c04c101 100644
--- a/src/components/Article/Comment.tsx
+++ b/src/components/Article/Comment.tsx
@@ -1,7 +1,7 @@
 import styles from './Comment.module.scss'
 import { Icon } from '../_shared/Icon'
 import { AuthorCard } from '../Author/Card'
-import { Show, createMemo, createSignal, For, lazy, Suspense } from 'solid-js'
+import { Show, createMemo, createSignal, For, lazy, Suspense, createEffect } from 'solid-js'
 import { clsx } from 'clsx'
 import type { Author, Reaction } from '../../graphql/types.gen'
 import MD from './MD'
@@ -30,6 +30,7 @@ export const Comment = (props: Props) => {
   const [isReplyVisible, setIsReplyVisible] = createSignal(false)
   const [loading, setLoading] = createSignal<boolean>(false)
   const [editMode, setEditMode] = createSignal<boolean>(false)
+  const [submitted, setSubmitted] = createSignal<boolean>(false)
   const { session } = useSession()
 
   const {
@@ -66,6 +67,7 @@ export const Comment = (props: Props) => {
       })
       setIsReplyVisible(false)
       setLoading(false)
+      setSubmitted(true)
     } catch (error) {
       console.error('[handleCreate reaction]:', error)
     }
@@ -94,6 +96,7 @@ export const Comment = (props: Props) => {
   }
 
   const createdAt = new Date(comment()?.createdAt)
+
   return (
     <li class={clsx(styles.comment, { [styles.isNew]: !isCommentAuthor() && createdAt > props.lastSeen })}>
       <Show when={!!body()}>
@@ -201,7 +204,12 @@ export const Comment = (props: Props) => {
 
             <Show when={isReplyVisible()}>
               <Suspense fallback={<p>{t('Loading')}</p>}>
-                <CommentEditor placeholder={''} onSubmit={(value) => handleCreate(value)} />
+                <CommentEditor
+                  placeholder={''}
+                  clear={submitted()}
+                  onSubmit={(value) => handleCreate(value)}
+                  cancel={() => setIsReplyVisible(false)}
+                />
               </Suspense>
             </Show>
           </Show>
diff --git a/src/components/Article/CommentsTree.tsx b/src/components/Article/CommentsTree.tsx
index 5e4a9c88..69591e64 100644
--- a/src/components/Article/CommentsTree.tsx
+++ b/src/components/Article/CommentsTree.tsx
@@ -39,15 +39,16 @@ type Props = {
 }
 
 export const CommentsTree = (props: Props) => {
+  const { session } = useSession()
+  const { t } = useLocalize()
   const [commentsOrder, setCommentsOrder] = createSignal<CommentsOrder>('createdAt')
+  const [newReactions, setNewReactions] = createSignal<Reaction[]>([])
+  const [submitted, setSubmitted] = createSignal(false)
   const {
     reactionEntities,
     actions: { createReaction }
   } = useReactions()
 
-  const { t } = useLocalize()
-  const [newReactions, setNewReactions] = createSignal<Reaction[]>([])
-
   const comments = createMemo(() =>
     Object.values(reactionEntities).filter((reaction) => reaction.kind === 'COMMENT')
   )
@@ -78,7 +79,7 @@ export const CommentsTree = (props: Props) => {
       setCookie()
     } else if (currentDate > dateFromLocalStorage) {
       const newComments = comments().filter((c) => {
-        if (c.replyTo) {
+        if (c.replyTo || c.createdBy.slug === session()?.user.slug) {
           return
         }
         const created = new Date(c.createdAt)
@@ -89,8 +90,6 @@ export const CommentsTree = (props: Props) => {
     }
   })
 
-  const { session } = useSession()
-  const [submitted, setSubmitted] = createSignal<boolean>(false)
   const handleSubmitComment = async (value) => {
     try {
       await createReaction({
@@ -113,38 +112,39 @@ export const CommentsTree = (props: Props) => {
             <span class={styles.newReactions}>&nbsp;+{newReactions().length}</span>
           </Show>
         </h2>
-
-        <ul class={clsx(styles.commentsViewSwitcher, 'view-switcher')}>
-          <Show when={newReactions().length > 0}>
-            <li classList={{ selected: commentsOrder() === 'newOnly' }}>
+        <Show when={comments().length > 0}>
+          <ul class={clsx(styles.commentsViewSwitcher, 'view-switcher')}>
+            <Show when={newReactions().length > 0}>
+              <li classList={{ selected: commentsOrder() === 'newOnly' }}>
+                <Button
+                  variant="inline"
+                  value={t('New only')}
+                  onClick={() => {
+                    setCommentsOrder('newOnly')
+                  }}
+                />
+              </li>
+            </Show>
+            <li classList={{ selected: commentsOrder() === 'createdAt' }}>
               <Button
                 variant="inline"
-                value={t('New only')}
+                value={t('By time')}
                 onClick={() => {
-                  setCommentsOrder('newOnly')
+                  setCommentsOrder('createdAt')
                 }}
               />
             </li>
-          </Show>
-          <li classList={{ selected: commentsOrder() === 'createdAt' }}>
-            <Button
-              variant="inline"
-              value={t('By time')}
-              onClick={() => {
-                setCommentsOrder('createdAt')
-              }}
-            />
-          </li>
-          <li classList={{ selected: commentsOrder() === 'rating' }}>
-            <Button
-              variant="inline"
-              value={t('By rating')}
-              onClick={() => {
-                setCommentsOrder('rating')
-              }}
-            />
-          </li>
-        </ul>
+            <li classList={{ selected: commentsOrder() === 'rating' }}>
+              <Button
+                variant="inline"
+                value={t('By rating')}
+                onClick={() => {
+                  setCommentsOrder('rating')
+                }}
+              />
+            </li>
+          </ul>
+        </Show>
       </div>
       <ul class={styles.comments}>
         <For each={sortedComments().filter((r) => !r.replyTo)}>
diff --git a/src/components/Article/FullArticle.tsx b/src/components/Article/FullArticle.tsx
index ead27868..c299fbf8 100644
--- a/src/components/Article/FullArticle.tsx
+++ b/src/components/Article/FullArticle.tsx
@@ -23,6 +23,7 @@ import { useLocalize } from '../../context/localize'
 
 interface ArticleProps {
   article: Shout
+  scrollToComments?: boolean
 }
 
 interface MediaItem {
@@ -88,6 +89,22 @@ export const FullArticle = (props: ArticleProps) => {
     return mi
   })
 
+  const commentsRef: { current: HTMLDivElement } = { current: null }
+
+  const scrollToComments = () => {
+    window.scrollTo({
+      top: commentsRef.current.offsetTop - 96,
+      left: 0,
+      behavior: 'smooth'
+    })
+  }
+
+  createEffect(() => {
+    if (props.scrollToComments) {
+      scrollToComments()
+    }
+  })
+
   const {
     actions: { loadReactionsBy }
   } = useReactions()
@@ -186,12 +203,10 @@ export const FullArticle = (props: ArticleProps) => {
                   {props.article.stat?.viewed}
                 </div>
               </Show>
-
-              <a href="#comments" class={styles.shoutStatsItem}>
+              <div class={styles.shoutStatsItem} onClick={scrollToComments}>
                 <Icon name="comment" class={styles.icon} />
                 {props.article.stat?.commented ?? ''}
-              </a>
-
+              </div>
               <div class={styles.shoutStatsItem}>
                 <SharePopup
                   title={props.article.title}
@@ -251,7 +266,7 @@ export const FullArticle = (props: ArticleProps) => {
                 )}
               </For>
             </div>
-            <div id="comments">
+            <div id="comments" ref={(el) => (commentsRef.current = el)}>
               <Show when={isReactionsLoaded()}>
                 <CommentsTree
                   shoutId={props.article.id}
diff --git a/src/components/Nav/Header.tsx b/src/components/Nav/Header.tsx
index 6a5775ab..0407cb3b 100644
--- a/src/components/Nav/Header.tsx
+++ b/src/components/Nav/Header.tsx
@@ -15,9 +15,11 @@ import { useLocalize } from '../../context/localize'
 
 type Props = {
   title?: string
+  slug?: string
   isHeaderFixed?: boolean
   articleBody?: string
   cover?: string
+  scrollToComments?: (value: boolean) => void
 }
 
 export const Header = (props: Props) => {
@@ -78,6 +80,10 @@ export const Header = (props: Props) => {
     })
   })
 
+  const scrollToComments = (value) => {
+    props.scrollToComments(value)
+  }
+
   return (
     <header
       class={styles.mainHeader}
@@ -138,9 +144,9 @@ export const Header = (props: Props) => {
                 containerCssClass={styles.control}
                 trigger={<Icon name="share-outline" class={styles.icon} />}
               />
-              <a href={getPagePath(router, 'inbox')} class={styles.control}>
+              <div onClick={() => scrollToComments(true)} class={styles.control}>
                 <Icon name="comments-outline" class={styles.icon} />
-              </a>
+              </div>
               <a href={getPagePath(router, 'create')} class={styles.control}>
                 <Icon name="pencil-outline" class={styles.icon} />
               </a>
diff --git a/src/components/_shared/CommentEditor/CommentEditor.tsx b/src/components/_shared/CommentEditor/CommentEditor.tsx
index 819627cf..e17e4ba9 100644
--- a/src/components/_shared/CommentEditor/CommentEditor.tsx
+++ b/src/components/_shared/CommentEditor/CommentEditor.tsx
@@ -21,6 +21,7 @@ type Props = {
   placeholder?: string
   onSubmit: (value: string) => void
   clear?: boolean
+  cancel?: () => void
   initialContent?: string
 }
 
@@ -69,6 +70,9 @@ const CommentEditor = (props: Props) => {
   const clearEditor = () => {
     editorViewRef.current.destroy()
     initEditor()
+    if (props.cancel) {
+      props.cancel()
+    }
   }
 
   createEffect(() => {
@@ -76,7 +80,6 @@ const CommentEditor = (props: Props) => {
       clearEditor()
     }
   })
-
   return (
     <div class={styles.commentEditor}>
       <div class={clsx('ProseMirrorOverrides', styles.textarea)} ref={(el) => (editorElRef.current = el)} />
diff --git a/src/components/_shared/PageLayout.tsx b/src/components/_shared/PageLayout.tsx
index 30a7e84c..23ca13fd 100644
--- a/src/components/_shared/PageLayout.tsx
+++ b/src/components/_shared/PageLayout.tsx
@@ -2,7 +2,7 @@ import type { JSX } from 'solid-js'
 import { Header } from '../Nav/Header'
 import { Footer } from '../Discours/Footer'
 
-import { Show } from 'solid-js'
+import { createEffect, createSignal, Show } from 'solid-js'
 import { clsx } from 'clsx'
 import '../../styles/app.scss'
 import styles from './PageLayout.module.scss'
@@ -10,6 +10,7 @@ import { Meta } from '@solidjs/meta'
 
 type PageLayoutProps = {
   headerTitle?: string
+  slug?: string
   articleBody?: string
   cover?: string
   children: JSX.Element
@@ -17,19 +18,29 @@ type PageLayoutProps = {
   hideFooter?: boolean
   class?: string
   withPadding?: boolean
+  scrollToComments?: (value: boolean) => void
 }
 
 export const PageLayout = (props: PageLayoutProps) => {
   const isHeaderFixed = props.isHeaderFixed === undefined ? true : props.isHeaderFixed
+  const [scrollToComments, setScrollToComments] = createSignal<boolean>(false)
+
+  createEffect(() => {
+    if (props.scrollToComments) {
+      props.scrollToComments(scrollToComments())
+    }
+  })
 
   return (
     <>
       <Meta name="viewport" content="width=device-width, initial-scale=1" />
       <Header
+        slug={props.slug}
         title={props.headerTitle}
         articleBody={props.articleBody}
         cover={props.articleBody}
         isHeaderFixed={isHeaderFixed}
+        scrollToComments={(value) => setScrollToComments(value)}
       />
       <main
         class={clsx('main-content', {
diff --git a/src/components/_shared/Popup/Popup.module.scss b/src/components/_shared/Popup/Popup.module.scss
index c9859bbf..f4f4da7e 100644
--- a/src/components/_shared/Popup/Popup.module.scss
+++ b/src/components/_shared/Popup/Popup.module.scss
@@ -2,6 +2,10 @@
   position: relative;
 }
 
+.trigger {
+  cursor: pointer;
+}
+
 .popup {
   background: #fff;
   color: #000;
diff --git a/src/components/_shared/Popup/Popup.tsx b/src/components/_shared/Popup/Popup.tsx
index 835d16a2..e25718fe 100644
--- a/src/components/_shared/Popup/Popup.tsx
+++ b/src/components/_shared/Popup/Popup.tsx
@@ -37,7 +37,9 @@ export const Popup = (props: PopupProps) => {
 
   return (
     <span class={clsx(styles.container, props.containerCssClass)} ref={(el) => (containerRef.current = el)}>
-      <span onClick={toggle}>{props.trigger}</span>
+      <span class={styles.trigger} onClick={toggle}>
+        {props.trigger}
+      </span>
       <Show when={isVisible()}>
         <div
           class={clsx(styles.popup, props.popupCssClass, {
diff --git a/src/pages/article.page.tsx b/src/pages/article.page.tsx
index bece4351..c522b76d 100644
--- a/src/pages/article.page.tsx
+++ b/src/pages/article.page.tsx
@@ -1,4 +1,4 @@
-import { createMemo, onMount, Show } from 'solid-js'
+import { createMemo, createSignal, onMount, Show } from 'solid-js'
 import type { Shout } from '../graphql/types.gen'
 import { PageLayout } from '../components/_shared/PageLayout'
 import type { PageProps } from './types'
@@ -48,12 +48,21 @@ export const ArticlePage = (props: PageProps) => {
     script.dataset.ackeeDomainId = '1004abeb-89b2-4e85-ad97-74f8d2c8ed2d'
     document.body.appendChild(script)
   })
+  const [scrollToComments, setScrollToComments] = createSignal<boolean>(false)
 
   return (
-    <PageLayout headerTitle={article()?.title || ''} articleBody={article()?.body} cover={article()?.cover}>
+    <PageLayout
+      headerTitle={article()?.title || ''}
+      slug={article()?.slug}
+      articleBody={article()?.body}
+      cover={article()?.cover}
+      scrollToComments={(value) => {
+        setScrollToComments(value)
+      }}
+    >
       <ReactionsProvider>
         <Show when={Boolean(article())} fallback={<Loading />}>
-          <FullArticle article={article()} />
+          <FullArticle article={article()} scrollToComments={scrollToComments()} />
         </Show>
       </ReactionsProvider>
     </PageLayout>
diff --git a/src/styles/Article.module.scss b/src/styles/Article.module.scss
index abdd02e7..ef42c9e5 100644
--- a/src/styles/Article.module.scss
+++ b/src/styles/Article.module.scss
@@ -172,13 +172,20 @@ img {
 
   a {
     border: none;
-
+    text-decoration: none;
     &:hover {
-      .icon {
-        filter: invert(1);
+      background: unset;
+      color: #000;
+
+      img {
+        filter: unset;
       }
     }
   }
+
+  &:hover {
+    cursor: pointer;
+  }
 }
 
 .shoutStatsItemLikes {