diff --git a/packages/components/src/CommentItem/CommentItem.tsx b/packages/components/src/CommentItem/CommentItem.tsx
index 40a6df3a4d..fb38bd6c24 100644
--- a/packages/components/src/CommentItem/CommentItem.tsx
+++ b/packages/components/src/CommentItem/CommentItem.tsx
@@ -61,11 +61,10 @@ export const CommentItem = (props: CommentItemProps) => {
   }
 
   return (
-    <Box data-cy="comment">
+    <Box id={`comment:${_id}`} data-cy="comment">
       <Flex
         p="3"
         bg={'white'}
-        mb={4}
         sx={{
           width: '100%',
           flexDirection: 'column',
diff --git a/packages/components/src/CommentList/CommentList.stories.tsx b/packages/components/src/CommentList/CommentList.stories.tsx
index 22cf05962a..0bbec04b66 100644
--- a/packages/components/src/CommentList/CommentList.stories.tsx
+++ b/packages/components/src/CommentList/CommentList.stories.tsx
@@ -1,35 +1,53 @@
 import type { ComponentStory, ComponentMeta } from '@storybook/react'
 import { CommentList } from './CommentList'
+import { faker } from '@faker-js/faker'
 
 export default {
   title: 'Components/CommentList',
   component: CommentList,
 } as ComponentMeta<typeof CommentList>
 
-const comments = [
-  {
-    _created: '2022-06-15T09:41:09.571Z',
-    _creatorId: 'TestCreatorID',
-    _id: 'testID',
-    creatorName: 'TestName',
-    isUserVerified: false,
-    text: 'Test text one',
-    isEditable: true,
-  },
-  {
-    _created: '2022-06-15T09:41:09.571Z',
-    _creatorId: 'TestCreatorID2',
-    _id: 'testID2',
-    creatorName: 'TestName2',
-    isUserVerified: false,
-    text: 'Test text two',
-    isEditable: true,
-  },
-]
+const createComments = (numberOfComments = 2, commentOverloads = {}) =>
+  [...Array(numberOfComments).keys()].slice(0).map(() => ({
+    _created: faker.date.past().toString(),
+    creatorCountry: faker.address.countryCode().toLowerCase(),
+    _creatorId: faker.internet.userName(),
+    _id: faker.database.mongodbObjectId(),
+    creatorName: faker.internet.userName(),
+    isUserVerified: faker.datatype.boolean(),
+    text: faker.lorem.text(),
+    isEditable: faker.datatype.boolean(),
+    ...commentOverloads,
+  }))
 
 export const Default: ComponentStory<typeof CommentList> = () => (
   <CommentList
-    comments={comments}
+    comments={createComments(2)}
+    articleTitle="Test article"
+    handleDelete={() => Promise.resolve()}
+    handleEditRequest={() => Promise.resolve()}
+    handleEdit={() => Promise.resolve()}
+  />
+)
+
+export const Expandable: ComponentStory<typeof CommentList> = () => (
+  <CommentList
+    comments={createComments(20)}
+    articleTitle="Test article"
+    handleDelete={() => Promise.resolve()}
+    handleEditRequest={() => Promise.resolve()}
+    handleEdit={() => Promise.resolve()}
+  />
+)
+
+const highlightedCommentList = createComments(20, { isEditable: false })
+
+export const Highlighted: ComponentStory<typeof CommentList> = () => (
+  <CommentList
+    comments={highlightedCommentList}
+    highlightedCommentId={
+      highlightedCommentList[highlightedCommentList.length - 2]._id
+    }
     articleTitle="Test article"
     handleDelete={() => Promise.resolve()}
     handleEditRequest={() => Promise.resolve()}
diff --git a/packages/components/src/CommentList/CommentList.tsx b/packages/components/src/CommentList/CommentList.tsx
index d7dbdda523..d25a8f56d1 100644
--- a/packages/components/src/CommentList/CommentList.tsx
+++ b/packages/components/src/CommentList/CommentList.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import ReactGA from 'react-ga4'
 import { Box } from 'theme-ui'
 import { Button, CommentItem } from '../'
@@ -10,16 +10,39 @@ export const CommentList: React.FC<{
   handleEdit: (_id: string, comment: string) => Promise<void>
   handleEditRequest: () => Promise<void>
   handleDelete: (_id: string) => Promise<void>
+  highlightedCommentId?: string
   articleTitle?: string
 }> = ({
   articleTitle,
   comments,
   handleEditRequest,
   handleDelete,
+  highlightedCommentId,
   handleEdit,
 }) => {
   const [moreComments, setMoreComments] = useState(1)
   const shownComments = moreComments * MAX_COMMENTS
+  const scrollIntoRelevantComment = (commentId: string) => {
+    setTimeout(() => {
+      // the delay is needed, otherwise the scroll is not happening in Firefox
+      document
+        .getElementById(`comment:${commentId}`)
+        ?.scrollIntoView({ behavior: 'smooth', block: 'start' })
+    }, 0)
+  }
+
+  useEffect(() => {
+    if (!highlightedCommentId) return
+
+    const i = comments.findIndex((comment) =>
+      highlightedCommentId.includes(comment._id),
+    )
+    if (i >= 0) {
+      setMoreComments(Math.floor(i / MAX_COMMENTS) + 1)
+      scrollIntoRelevantComment(highlightedCommentId)
+    }
+  }, [highlightedCommentId])
+
   return (
     <Box
       mb={4}
@@ -29,11 +52,20 @@ export const CommentList: React.FC<{
       }}
     >
       {comments &&
-        comments
-          .slice(0, shownComments)
-          .map((comment: Comment) => (
+        comments.slice(0, shownComments).map((comment: Comment) => (
+          <Box
+            key={comment._id}
+            sx={{
+              marginBottom: 4,
+              border: `${
+                highlightedCommentId === comment._id
+                  ? '2px dashed black'
+                  : 'none'
+              }`,
+              borderRadius: 1,
+            }}
+          >
             <CommentItem
-              key={comment._id}
               {...comment}
               isUserVerified={!!comment.isUserVerified}
               isEditable={!!comment.isEditable}
@@ -41,7 +73,8 @@ export const CommentList: React.FC<{
               handleDelete={handleDelete}
               handleEdit={handleEdit}
             />
-          ))}
+          </Box>
+        ))}
       {comments && comments.length > shownComments && (
         <Button
           sx={{ width: 'max-content', margin: '0 auto' }}
diff --git a/packages/components/src/NotificationItem/NotificationItem.stories.tsx b/packages/components/src/NotificationItem/NotificationItem.stories.tsx
index 613d15cb46..40be6c4fd6 100644
--- a/packages/components/src/NotificationItem/NotificationItem.stories.tsx
+++ b/packages/components/src/NotificationItem/NotificationItem.stories.tsx
@@ -1,3 +1,4 @@
+import { faker } from '@faker-js/faker'
 import type { ComponentStory, ComponentMeta } from '@storybook/react'
 import { NotificationItem } from './NotificationItem'
 
@@ -7,45 +8,25 @@ export default {
 } as ComponentMeta<typeof NotificationItem>
 
 export const Default: ComponentStory<typeof NotificationItem> = () => (
-  <NotificationItem
-    triggeredBy={{
-      displayName: 'Example User',
-      userId: 'abc',
-    }}
-    type="howto_useful"
-    relevantUrl="http://example.com"
-  />
+  <NotificationItem type="howto_useful">
+    {faker.lorem.sentence()}
+  </NotificationItem>
 )
 
 export const Comment: ComponentStory<typeof NotificationItem> = () => (
-  <NotificationItem
-    triggeredBy={{
-      displayName: 'Example User',
-      userId: 'abc',
-    }}
-    type="new_comment"
-    relevantUrl="http://example.com"
-  />
+  <NotificationItem type="new_comment">
+    {faker.lorem.sentence()}
+  </NotificationItem>
 )
 
 export const CommentResearch: ComponentStory<typeof NotificationItem> = () => (
-  <NotificationItem
-    triggeredBy={{
-      displayName: 'Example User',
-      userId: 'abc',
-    }}
-    type="new_comment_research"
-    relevantUrl="http://example.com"
-  />
+  <NotificationItem type="new_comment_research">
+    {faker.lorem.sentence()}
+  </NotificationItem>
 )
 
 export const UsefulResearch: ComponentStory<typeof NotificationItem> = () => (
-  <NotificationItem
-    triggeredBy={{
-      displayName: 'Example User',
-      userId: 'abc',
-    }}
-    type="research_useful"
-    relevantUrl="http://example.com"
-  />
+  <NotificationItem type="research_useful">
+    {faker.lorem.sentence()}
+  </NotificationItem>
 )
diff --git a/packages/components/src/NotificationItem/NotificationItem.tsx b/packages/components/src/NotificationItem/NotificationItem.tsx
index 5d32e0bff3..809732be51 100644
--- a/packages/components/src/NotificationItem/NotificationItem.tsx
+++ b/packages/components/src/NotificationItem/NotificationItem.tsx
@@ -1,18 +1,28 @@
-import { Link } from 'react-router-dom'
+import { ThemeProvider } from '@emotion/react'
 import { Flex, Box } from 'theme-ui'
 import { Icon } from '../Icon/Icon'
+import type { availableGlyphs } from '../Icon/types'
 
-export interface NotificationItemProps {
-  triggeredBy: {
-    displayName: string
-    userId: string
-  }
-  type: string
-  relevantUrl?: string
+type notificationType =
+  | 'howto_mention'
+  | 'new_comment'
+  | 'howto_useful'
+  | 'new_comment_research'
+  | 'research_useful'
+
+export interface UserNotificationItem {
+  type: notificationType
+  children: React.ReactNode
+}
+
+function getIconByType(type: notificationType): availableGlyphs {
+  return ['howto_useful', 'research_useful'].includes(type)
+    ? 'useful'
+    : 'comment'
 }
 
-export const NotificationItem = (props: NotificationItemProps) => {
-  const { triggeredBy, relevantUrl, type } = props
+export const NotificationItem = (props: UserNotificationItem) => {
+  const { type } = props
   return (
     <Flex
       bg={'white'}
@@ -27,72 +37,25 @@ export const NotificationItem = (props: NotificationItemProps) => {
         fontFamily: 'Inter, sans-serif',
       }}
     >
-      {['howto_useful', 'research_useful'].includes(type) ? (
+      <ThemeProvider
+        theme={{
+          styles: {
+            a: {
+              textDecoration: 'underline',
+              padding: '0 .25em',
+              color: '#61646b',
+              display: 'inline',
+            },
+          },
+        }}
+      >
         <Flex style={{ textAlign: 'left', color: 'black' }}>
           <Box sx={{ opacity: 0.6 }}>
-            <Icon glyph="useful" size={15} mr={2} />
-          </Box>
-          <Box>
-            Yay,
-            <Link
-              style={{
-                textDecoration: 'underline',
-                padding: '3px',
-                color: '#61646b',
-              }}
-              to={'/u/' + triggeredBy.userId}
-            >
-              {triggeredBy.displayName}
-            </Link>
-            found your
-            <Link
-              style={{
-                textDecoration: 'underline',
-                padding: '3px',
-                color: '#61646b',
-                fontWeight: 500,
-                display: 'inline',
-              }}
-              to={relevantUrl || ''}
-            >
-              {type === 'howto_useful' ? 'how-to' : 'research'}
-            </Link>
-            useful
-          </Box>
-        </Flex>
-      ) : (
-        <Flex>
-          <Box sx={{ opacity: 0.6 }}>
-            <Icon glyph="comment" size={15} mr={2} />
-          </Box>
-          <Box style={{ textAlign: 'left' }}>
-            New comment on your
-            <Link
-              style={{
-                textDecoration: 'underline',
-                padding: '3px',
-                color: '#61646b',
-              }}
-              to={relevantUrl || ''}
-            >
-              {type == 'new_comment_research' ? 'Research' : 'how-to'}
-            </Link>
-            by
-            <Link
-              style={{
-                textDecoration: 'underline',
-                padding: '3px',
-                color: '#61646b',
-                fontWeight: 500,
-                display: 'inline',
-              }}
-              to={'/u/' + triggeredBy.userId}
-            >
-              {triggeredBy.displayName}
-            </Link>
+            <Icon glyph={getIconByType(type)} size={15} mr={2} />
           </Box>
+          {props.children}
         </Flex>
-      )}
+      </ThemeProvider>
     </Flex>
   )
 }
diff --git a/packages/components/src/NotificationList/NotificationList.stories.tsx b/packages/components/src/NotificationList/NotificationList.stories.tsx
index 32bec98581..0fbd0b94b5 100644
--- a/packages/components/src/NotificationList/NotificationList.stories.tsx
+++ b/packages/components/src/NotificationList/NotificationList.stories.tsx
@@ -1,5 +1,8 @@
+import { faker } from '@faker-js/faker'
 import type { ComponentStory, ComponentMeta } from '@storybook/react'
+import { InternalLink } from '../InternalLink/InternalLink'
 import { NotificationList } from './NotificationList'
+import type { UserNotificationList } from './NotificationList'
 
 export default {
   title: 'Components/NotificationList',
@@ -8,38 +11,50 @@ export default {
 
 const notifications = [
   {
-    triggeredBy: {
-      displayName: 'Example User',
-      userId: 'abc',
-    },
+    type: 'howto_mention',
+    children: (
+      <>
+        {faker.lorem.words(4)} <InternalLink to="#">Example Link</InternalLink>
+      </>
+    ),
+  },
+  {
     type: 'new_comment',
-    relevantUrl: 'https://example.com',
+    children: (
+      <>
+        {faker.lorem.words(4)}{' '}
+        <InternalLink to="/">{faker.lorem.words(2)}</InternalLink>
+      </>
+    ),
   },
   {
-    triggeredBy: {
-      displayName: 'Example User',
-      userId: 'abc',
-    },
     type: 'howto_useful',
-    relevantUrl: 'https://example.com',
+    children: (
+      <>
+        {faker.lorem.words(4)}{' '}
+        <InternalLink to="/">{faker.lorem.words(2)}</InternalLink>
+      </>
+    ),
   },
   {
-    triggeredBy: {
-      displayName: 'Example User',
-      userId: 'abc',
-    },
     type: 'new_comment_research',
-    relevantUrl: 'https://example.com',
+    children: (
+      <>
+        {faker.lorem.words(4)}{' '}
+        <InternalLink to="/">{faker.lorem.words(2)}</InternalLink>
+      </>
+    ),
   },
   {
-    triggeredBy: {
-      displayName: 'Example User',
-      userId: 'abc',
-    },
     type: 'research_useful',
-    relevantUrl: 'https://example.com',
+    children: (
+      <>
+        {faker.lorem.words(4)}{' '}
+        <InternalLink to="/">{faker.lorem.words(2)}</InternalLink>
+      </>
+    ),
   },
-]
+] as UserNotificationList
 
 export const Default: ComponentStory<typeof NotificationList> = () => (
   <NotificationList notifications={notifications} />
diff --git a/packages/components/src/NotificationList/NotificationList.tsx b/packages/components/src/NotificationList/NotificationList.tsx
index deeb120b4b..bb9bac1b51 100644
--- a/packages/components/src/NotificationList/NotificationList.tsx
+++ b/packages/components/src/NotificationList/NotificationList.tsx
@@ -2,12 +2,12 @@ import styled from '@emotion/styled'
 import { Box, Card, Text } from 'theme-ui'
 import { Button } from '../Button/Button'
 import { NotificationItem } from '../NotificationItem/NotificationItem'
-import type { NotificationItemProps as Notification } from '../NotificationItem/NotificationItem'
+import type { UserNotificationItem } from '../NotificationItem/NotificationItem'
 
-export type UserNotificationList = Notification[]
+export type UserNotificationList = UserNotificationItem[]
 
 export interface Props {
-  notifications: Notification[]
+  notifications: UserNotificationList
   sx?: any
   handleOnClick?: () => void
 }
@@ -31,7 +31,10 @@ export const NotificationList = (props: Props) => {
         <>
           <ModalItem style={{ textAlign: 'center' }}>Notifications</ModalItem>
           {notifications.map((notification, idx) => (
-            <NotificationItem key={idx} {...(notification as any)} />
+            <NotificationItem
+              key={idx}
+              {...(notification as any)}
+            ></NotificationItem>
           ))}
           <Button
             style={{
diff --git a/src/mocks/howto.mock.tsx b/src/mocks/howto.mock.tsx
index 63ffd7dcf7..f333d5a72b 100644
--- a/src/mocks/howto.mock.tsx
+++ b/src/mocks/howto.mock.tsx
@@ -34,6 +34,7 @@ export const HOWTO_MOCK: IHowto[] = [
     ],
     tags: {},
     files: [],
+    mentions: [],
     ...MOCK_DB_META('howTo1'),
     _createdBy: 'ExampleUser',
     moderation: 'draft',
@@ -60,6 +61,7 @@ export const HOWTO_MOCK: IHowto[] = [
     ],
     tags: {},
     files: [],
+    mentions: [],
     ...MOCK_DB_META('howTo2'),
     _createdBy: 'ExampleUser',
     moderation: 'awaiting-moderation',
@@ -86,6 +88,7 @@ export const HOWTO_MOCK: IHowto[] = [
     ],
     tags: {},
     files: [],
+    mentions: [],
     ...MOCK_DB_META('howTo3'),
     _createdBy: 'ExampleUser',
     moderation: 'accepted',
diff --git a/src/models/howto.models.tsx b/src/models/howto.models.tsx
index 1cc1df76a9..5b74dcc713 100644
--- a/src/models/howto.models.tsx
+++ b/src/models/howto.models.tsx
@@ -5,6 +5,11 @@ import type { IUploadedFileMeta } from '../stores/storage'
 import type { ICategory } from './categories.model'
 import type { IComment } from './'
 
+type UserMention = {
+  username: string
+  location: string
+}
+
 // By default all how-to form input fields come as strings
 // The IHowto interface can imposes the correct formats on fields
 // Additionally convert from local filemeta to uploaded filemeta
@@ -17,6 +22,7 @@ export interface IHowto extends IHowtoFormInput, IModerable {
   // Comments were added in V2, old howto's may not have the property
   comments?: IComment[]
   total_downloads?: number
+  mentions: UserMention[]
 }
 
 /**
diff --git a/src/models/user.models.tsx b/src/models/user.models.tsx
index 6891a930a6..673901e528 100644
--- a/src/models/user.models.tsx
+++ b/src/models/user.models.tsx
@@ -92,5 +92,6 @@ export interface INotification {
 export type NotificationType =
   | 'new_comment'
   | 'howto_useful'
+  | 'howto_mention'
   | 'new_comment_research'
   | 'research_useful'
diff --git a/src/pages/Howto/Content/Howto/HowToComments/HowToComments.tsx b/src/pages/Howto/Content/Howto/HowToComments/HowToComments.tsx
index 04a7fbe5d4..a9094ea5da 100644
--- a/src/pages/Howto/Content/Howto/HowToComments/HowToComments.tsx
+++ b/src/pages/Howto/Content/Howto/HowToComments/HowToComments.tsx
@@ -117,6 +117,7 @@ export const HowToComments = ({ comments }: IProps) => {
           handleEdit={handleEdit}
           handleEditRequest={handleEditRequest}
           handleDelete={handleDelete}
+          highlightedCommentId={window.location.hash.replace('#comment:', '')}
         />
       </Flex>
       <Box
diff --git a/src/pages/common/Header/Header.tsx b/src/pages/common/Header/Header.tsx
index 58fce4b34b..56454b45c1 100644
--- a/src/pages/common/Header/Header.tsx
+++ b/src/pages/common/Header/Header.tsx
@@ -15,6 +15,7 @@ import { observer, inject } from 'mobx-react'
 import type { MobileMenuStore } from 'src/stores/MobileMenu/mobilemenu.store'
 import type { UserStore } from 'src/stores/User/user.store'
 import { isModuleSupported, MODULE } from 'src/modules'
+import { getFormattedNotifications } from './getFormattedNotifications'
 
 interface IInjectedProps {
   mobileMenuStore: MobileMenuStore
@@ -98,7 +99,7 @@ export class Header extends Component {
   render() {
     const menu = this.injected.mobileMenuStore
     const user = this.injected.userStore.user
-    const notifications = this.injected.userStore.getUserNotifications()
+    const notifications = getFormattedNotifications(this.injected.userStore)
     const areThereNotifications = Boolean(notifications.length)
     const isLoggedInUser = !!user
 
diff --git a/src/pages/common/Header/getFormattedNotifications.tsx b/src/pages/common/Header/getFormattedNotifications.tsx
new file mode 100644
index 0000000000..4cb77c0c01
--- /dev/null
+++ b/src/pages/common/Header/getFormattedNotifications.tsx
@@ -0,0 +1,89 @@
+import type { UserNotificationList } from 'oa-components'
+import { InternalLink } from 'oa-components'
+import type { INotification } from 'src/models'
+import type { UserStore } from 'src/stores/User/user.store'
+import { Box } from 'theme-ui'
+
+function getFormattedMessage(notification: INotification) {
+  switch (notification.type) {
+    case 'new_comment':
+      return (
+        <Box>
+          New comment on your
+          <InternalLink to={notification.relevantUrl || ''}>
+            how-to
+          </InternalLink>
+          by
+          <InternalLink to={'/u/' + notification.triggeredBy.userId}>
+            {notification.triggeredBy.displayName}
+          </InternalLink>
+        </Box>
+      )
+    case 'howto_mention':
+      return (
+        <Box>
+          You were mentioned in a
+          <InternalLink to={notification.relevantUrl || ''}>
+            how-to
+          </InternalLink>
+          by
+          <InternalLink to={'/u/' + notification.triggeredBy.userId}>
+            {notification.triggeredBy.displayName}
+          </InternalLink>
+        </Box>
+      )
+    case 'howto_useful':
+      return (
+        <Box>
+          Yay,
+          <InternalLink to={'/u/' + notification.triggeredBy.userId}>
+            {notification.triggeredBy.displayName}
+          </InternalLink>
+          found your
+          <InternalLink to={notification.relevantUrl || ''}>
+            how-to
+          </InternalLink>
+          useful
+        </Box>
+      )
+    case 'research_useful':
+      return (
+        <Box>
+          Yay,
+          <InternalLink to={'/u/' + notification.triggeredBy.userId}>
+            {notification.triggeredBy.displayName}
+          </InternalLink>
+          found your
+          <InternalLink to={notification.relevantUrl || ''}>
+            research
+          </InternalLink>
+          useful
+        </Box>
+      )
+    case 'new_comment_research':
+      return (
+        <Box>
+          New comment on your
+          <InternalLink to={notification.relevantUrl || ''}>
+            research
+          </InternalLink>
+          by
+          <InternalLink to={'/u/' + notification.triggeredBy.userId}>
+            {notification.triggeredBy.displayName}
+          </InternalLink>
+        </Box>
+      )
+    default:
+      return <></>
+      break
+  }
+}
+
+export function getFormattedNotifications(
+  userStore: UserStore,
+): UserNotificationList {
+  return userStore.getUserNotifications().map((notification) => ({
+    type: notification.type,
+    children: getFormattedMessage(notification),
+  }))
+}
diff --git a/src/stores/Howto/howto.store.test.ts b/src/stores/Howto/howto.store.test.ts
index bd2c57a944..8d97261490 100644
--- a/src/stores/Howto/howto.store.test.ts
+++ b/src/stores/Howto/howto.store.test.ts
@@ -1,7 +1,7 @@
 jest.mock('../common/module.store')
 import type { IHowtoDB } from 'src/models'
 import { FactoryComment } from 'src/test/factories/Comment'
-import { FactoryHowto } from 'src/test/factories/Howto'
+import { FactoryHowto, FactoryHowtoStep } from 'src/test/factories/Howto'
 import { FactoryUser } from 'src/test/factories/User'
 import type { RootStore } from '..'
 import { HowtoStore } from './howto.store'
@@ -29,10 +29,11 @@ async function factory(howtoOverloads: Partial<IHowtoDB> = {}) {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
   store.userStore = {
-    getUserProfile: jest.fn().mockResolvedValue(
+    triggerNotification: jest.fn(),
+    getUserProfile: jest.fn().mockImplementation((userName) =>
       FactoryUser({
         _authID: 'userId',
-        userName: 'username',
+        userName,
       }),
     ),
   }
@@ -51,6 +52,114 @@ async function factory(howtoOverloads: Partial<IHowtoDB> = {}) {
 describe('howto.store', () => {
   describe('uploadHowTo', () => {
     it.todo('updates an existing item')
+
+    it('captures mentions within description', async () => {
+      const { store, howToItem, setFn } = await factory({
+        description: '@username',
+      })
+
+      // Act
+      await store.uploadHowTo(howToItem)
+
+      const [newHowto] = setFn.mock.calls[0]
+      expect(setFn).toHaveBeenCalledTimes(1)
+      expect(newHowto.description).toBe('@@{userId:username}')
+      expect(newHowto.mentions).toHaveLength(1)
+    })
+
+    it('captures mentions within a how-step', async () => {
+      const { store, howToItem, setFn } = await factory({
+        steps: [
+          FactoryHowtoStep({ text: 'Step description featuring a @username' }),
+        ],
+      })
+
+      // Act
+      await store.uploadHowTo(howToItem)
+
+      const [newHowto] = setFn.mock.calls[0]
+      expect(setFn).toHaveBeenCalledTimes(1)
+      expect(newHowto.steps[0].text).toBe(
+        'Step description featuring a @@{userId:username}',
+      )
+      expect(newHowto.mentions).toHaveLength(1)
+    })
+
+    it('creates notifications for any new mentions in description', async () => {
+      const { store, howToItem, setFn } = await factory({
+        description: '@username',
+        mentions: [
+          {
+            username: 'username',
+            location: 'description',
+          },
+        ],
+        comments: [
+          FactoryComment({
+            text: '@commentauthor',
+          }),
+        ],
+      })
+
+      await store.uploadHowTo({
+        ...howToItem,
+      })
+
+      expect(setFn).toHaveBeenCalledTimes(1)
+      expect(store.userStore.triggerNotification).toBeCalledTimes(1)
+      expect(store.userStore.triggerNotification).toBeCalledWith(
+        'howto_mention',
+        'commentauthor',
+        `/how-to/${howToItem.slug}#comment:${howToItem.comments[0]._id}`,
+      )
+    })
+
+    it('creates notifications for any new mentions in a how-to step', async () => {
+      const { store, howToItem, setFn } = await factory({
+        description: '@username',
+        mentions: [
+          {
+            username: 'username',
+            location: 'description',
+          },
+        ],
+        steps: [
+          {
+            images: [
+              {
+                downloadUrl: 'string',
+                fullPath: 'string',
+                name: 'string',
+                type: 'string',
+                size: 2300,
+                timeCreated: 'string',
+                updated: 'string',
+              },
+            ],
+            title: 'How to step',
+            text: 'Step description featuring a howto',
+          },
+        ],
+        comments: [
+          FactoryComment({
+            text: '@commentauthor',
+          }),
+        ],
+      })
+
+      await store.uploadHowTo({
+        ...howToItem,
+      })
+
+      expect(setFn).toHaveBeenCalledTimes(1)
+      expect(store.userStore.triggerNotification).toBeCalledTimes(1)
+      expect(store.userStore.triggerNotification).toBeCalledWith(
+        'howto_mention',
+        'commentauthor',
+        `/how-to/${howToItem.slug}#comment:${howToItem.comments[0]._id}`,
+      )
+    })
+
     it('preserves @mention on existing comments', async () => {
       const comments = [
         FactoryComment({
@@ -71,6 +180,14 @@ describe('howto.store', () => {
       const [newHowto] = setFn.mock.calls[0]
       expect(setFn).toHaveBeenCalledTimes(1)
       expect(newHowto.comments[1].text).toBe('@@{userId:username}')
+      expect(newHowto.mentions).toEqual(
+        expect.arrayContaining([
+          {
+            username: 'username',
+            location: `comment:${newHowto.comments[1]._id}`,
+          },
+        ]),
+      )
     })
   })
 
@@ -91,6 +208,14 @@ describe('howto.store', () => {
             text: 'short comment including @@{userId:username}',
           }),
         )
+        expect(newHowto.mentions).toEqual(
+          expect.arrayContaining([
+            {
+              username: 'username',
+              location: 'comment:' + newHowto.comments[0]._id,
+            },
+          ]),
+        )
       })
 
       it('preserves @mentions in description', async () => {
@@ -105,6 +230,14 @@ describe('howto.store', () => {
         const [newHowto] = setFn.mock.calls[0]
         expect(setFn).toHaveBeenCalledTimes(1)
         expect(newHowto.description).toBe('@@{userId:username}')
+        expect(newHowto.mentions).toEqual(
+          expect.arrayContaining([
+            {
+              username: 'username',
+              location: 'description',
+            },
+          ]),
+        )
       })
 
       it('preserves @mentions in existing comments', async () => {
@@ -127,6 +260,14 @@ describe('howto.store', () => {
         expect(newHowto.comments[0].text).toBe(
           'Existing comment @@{userId:username}',
         )
+        expect(newHowto.mentions).toEqual(
+          expect.arrayContaining([
+            {
+              username: 'username',
+              location: 'comment:' + newHowto.comments[0]._id,
+            },
+          ]),
+        )
       })
     })
 
diff --git a/src/stores/Howto/howto.store.tsx b/src/stores/Howto/howto.store.tsx
index 44b3a3d62b..6ff950f4ea 100644
--- a/src/stores/Howto/howto.store.tsx
+++ b/src/stores/Howto/howto.store.tsx
@@ -105,7 +105,11 @@ export class HowtoStore extends ModuleStore {
   public async setActiveHowtoBySlug(slug: string) {
     // clear any cached data and then load the new howto
     logger.debug(`setActiveHowtoBySlug:`, { slug })
-    this.activeHowto = undefined
+
+    if (!slug) {
+      this.activeHowto = undefined
+    }
+
     const collection = await this.db
       .collection<IHowto>(COLLECTION_NAME)
       .getWhere('slug', '==', slug)
@@ -170,7 +174,7 @@ export class HowtoStore extends ModuleStore {
         total_downloads: totalDownloads! + 1,
       }
 
-      await dbRef.set(updatedHowto)
+      await this.updateHowtoItem(updatedHowto)
       return updatedHowto.total_downloads
     }
   }
@@ -193,17 +197,25 @@ export class HowtoStore extends ModuleStore {
     if (!hasAdminRights(toJS(this.activeUser))) {
       return false
     }
-    const ref = this.db.collection(COLLECTION_NAME).doc(howto._id)
-    // NOTE CC - 2021-07-06 mobx updates try write to db as observable, so need to convert toJS
-    return ref.set(toJS(howto))
+    return this.updateHowtoItem(toJS(howto))
   }
 
   public needsModeration(howto: IHowto) {
     return needsModeration(howto, toJS(this.activeUser))
   }
 
-  private async addUserReference(text: string): Promise<string> {
-    return await changeMentionToUserReference(text, this.userStore)
+  private async addUserReference(msg: string): Promise<{
+    text: string
+    users: string[]
+  }> {
+    const { text, mentionedUsers: users } = await changeMentionToUserReference(
+      msg,
+      this.userStore,
+    )
+    return {
+      text,
+      users,
+    }
   }
 
   @action
@@ -211,45 +223,123 @@ export class HowtoStore extends ModuleStore {
     try {
       const user = this.activeUser
       const howto = this.activeHowto
-      const comment = text.slice(0, MAX_COMMENT_LENGTH).trim()
-      if (user && howto && comment) {
-        const userCountry = getUserCountry(user)
+      if (user && howto && text) {
         const newComment: IComment = {
           _id: randomID(),
           _created: new Date().toISOString(),
           _creatorId: user._id,
           creatorName: user.userName,
-          creatorCountry: userCountry,
-          text: await this.addUserReference(comment),
+          creatorCountry: getUserCountry(user),
+          text: text.slice(0, MAX_COMMENT_LENGTH).trim(),
         }
         logger.debug('addComment.newComment', { newComment })
 
-        const updatedHowto: IHowto = {
+        // Update and refresh the active howto
+        const updated = await this.updateHowtoItem({
           ...toJS(howto),
-          description: await this.addUserReference(howto.description),
-          comments: await Promise.all(
-            [...toJS(howto.comments || []), newComment].map(async (comment) => {
-              comment.text = await this.addUserReference(comment.text)
-              return comment
-            }),
-          ),
-        }
-
-        const dbRef = this.db
-          .collection<IHowto>(COLLECTION_NAME)
-          .doc(updatedHowto._id)
-
-        await dbRef.set(updatedHowto)
+          comments: [...toJS(howto.comments || []), newComment],
+        })
 
-        // Refresh the active howto
-        this.activeHowto = await dbRef.get()
+        await this.setActiveHowtoBySlug(updated?.slug || '')
       }
     } catch (err) {
+      console.log({ err })
       console.error(err)
       throw new Error(err)
     }
   }
 
+  private async updateHowtoItem(howToItem: IHowto) {
+    const dbRef = this.db.collection<IHowto>(COLLECTION_NAME).doc(howToItem._id)
+
+    logger.debug('updateHowtoItem', {
+      before: this.activeHowto,
+      after: howToItem,
+    })
+
+    const { text: description, users } = await this.addUserReference(
+      howToItem.description,
+    )
+
+    const mentions = users.map((username) => ({
+      username,
+      location: 'description',
+    }))
+
+    const comments = await Promise.all(
+      [...toJS(howToItem.comments || [])].map(async (comment) => {
+        const { text, users } = await this.addUserReference(comment.text)
+        comment.text = text
+
+        users.forEach((username) => {
+          mentions.push({
+            username,
+            location: `comment:${comment._id}`,
+          })
+        })
+
+        return comment
+      }),
+    )
+
+    const steps = await Promise.all(
+      [...toJS(howToItem.steps || [])].map(async (step) => {
+        const { text, users } = await this.addUserReference(step.text)
+
+        users.forEach((username) => {
+          mentions.push({
+            username,
+            location: `step`,
+          })
+        })
+
+        return {
+          ...step,
+          text,
+        }
+      }),
+    )
+
+    await dbRef.set({
+      ...howToItem,
+      description,
+      comments,
+      mentions,
+      steps,
+    })
+
+    // After successfully updating the database document queue up all the notifications
+    // Should a notification be issued?
+    // - Only if the mention did not exist in the document before.
+    // How do we decide whether a mention existed in the document previously?
+    // - Based on combination of username/location
+    // Location: Where in the document does the mention exist?
+    // - Introduction
+    // - Steps
+    // - Comments
+    const previousMentionsList = howToItem.mentions || []
+    logger.debug(`Mentions:`, {
+      before: previousMentionsList,
+      after: mentions,
+    })
+
+    // Previous mentions
+    const previousMentions = previousMentionsList.map(
+      (mention) => `${mention.username}.${mention.location}`,
+    )
+
+    mentions.forEach((mention) => {
+      if (!previousMentions.includes(`${mention.username}.${mention.location}`))
+        this.userStore.triggerNotification(
+          'howto_mention',
+          mention.username,
+          `/how-to/${howToItem.slug}#${mention.location}`,
+        )
+    })
+
+    return await dbRef.get()
+  }
+
   @action
   public async editComment(id: string, newText: string) {
     try {
@@ -261,30 +351,16 @@ export class HowtoStore extends ModuleStore {
           (comment) => comment._creatorId === user._id && comment._id === id,
         )
         if (commentIndex !== -1) {
-          comments[commentIndex].text = (await this.addUserReference(newText))
+          comments[commentIndex].text = newText
             .slice(0, MAX_COMMENT_LENGTH)
             .trim()
           comments[commentIndex]._edited = new Date().toISOString()
 
-          const updatedHowto: IHowto = {
-            ...toJS(howto),
-            description: await this.addUserReference(howto.description),
-            comments: await Promise.all(
-              comments.map(async (comment) => ({
-                ...comment,
-                text: await this.addUserReference(comment.text),
-              })),
-            ),
-          }
-
-          const dbRef = this.db
-            .collection<IHowto>(COLLECTION_NAME)
-            .doc(updatedHowto._id)
-
-          await dbRef.set(updatedHowto)
-
           // Refresh the active howto
-          this.activeHowto = await dbRef.get()
+          this.activeHowto = await this.updateHowtoItem({
+            ...toJS(howto),
+            comments,
+          })
         }
       }
     } catch (err) {
@@ -299,32 +375,16 @@ export class HowtoStore extends ModuleStore {
       const howto = this.activeHowto
       const user = this.activeUser
       if (id && howto && user && howto.comments) {
-        const comments = await Promise.all(
-          toJS(howto.comments)
-            .filter(
-              (comment) =>
-                !(comment._creatorId === user._id && comment._id === id),
-            )
-            .map(async (comment) => ({
-              ...comment,
-              text: await this.addUserReference(comment.text),
-            })),
-        )
-
-        const updatedHowto: IHowto = {
+        // Refresh the active howto with the updated item
+        await this.updateHowtoItem({
           ...toJS(howto),
-          description: await this.addUserReference(howto.description),
-          comments,
-        }
-
-        const dbRef = this.db
-          .collection<IHowto>(COLLECTION_NAME)
-          .doc(updatedHowto._id)
-
-        await dbRef.set(updatedHowto)
+          comments: toJS(howto.comments).filter(
+            (comment) =>
+              !(comment._creatorId === user._id && comment._id === id),
+          ),
+        })
 
-        // Refresh the active howto
-        this.activeHowto = await dbRef.get()
+        await this.setActiveHowtoBySlug(howto.slug)
       }
     } catch (err) {
       console.error(err)
@@ -379,15 +439,10 @@ export class HowtoStore extends ModuleStore {
       const userCountry = getUserCountry(user)
 
       const howTo: IHowto = {
+        mentions: [],
         ...values,
-        description: await this.addUserReference(values.description),
+        comments,
         _createdBy: values._createdBy ? values._createdBy : user.userName,
-        comments: await Promise.all(
-          comments.map(async (c) => ({
-            ...c,
-            text: await this.addUserReference(c.text),
-          })),
-        ),
         cover_image: processedCover,
         steps: processedSteps,
         fileLink: values.fileLink ?? '',
@@ -409,10 +464,9 @@ export class HowtoStore extends ModuleStore {
 
       logger.debug('populating database', howTo)
       // set the database document
-      await dbRef.set(howTo)
+      this.activeHowto = await this.updateHowtoItem(howTo)
       this.updateUploadStatus('Database')
       logger.debug('post added')
-      this.activeHowto = await dbRef.get()
       // complete
       this.updateUploadStatus('Complete')
     } catch (error) {
@@ -438,8 +492,7 @@ export class HowtoStore extends ModuleStore {
       step.images = imgMeta
       stepsWithImgMeta.push({
         ...step,
-        text: await this.addUserReference(step.text),
-        images: imgMeta.map((f) => {
+        images: (imgMeta || []).map((f) => {
           if (f === undefined) {
             return null
           }
diff --git a/src/stores/Research/research.store.tsx b/src/stores/Research/research.store.tsx
index a05be29fb1..892a7addea 100644
--- a/src/stores/Research/research.store.tsx
+++ b/src/stores/Research/research.store.tsx
@@ -165,7 +165,7 @@ export class ResearchStore extends ModuleStore {
   }
 
   private async addUserReference(text: string): Promise<string> {
-    return await changeMentionToUserReference(text, this.userStore)
+    return (await changeMentionToUserReference(text, this.userStore)).text
   }
 
   public async addComment(
@@ -201,7 +201,9 @@ export class ResearchStore extends ModuleStore {
           )
           const newImg = imgMeta.map((img) => ({ ...img }))
           updateWithMeta.images = newImg
-        } else updateWithMeta.images = []
+        } else {
+          updateWithMeta.images = []
+        }
 
         updateWithMeta.comments = updateWithMeta.comments
           ? [...toJS(updateWithMeta.comments), newComment]
diff --git a/src/stores/User/user.store.test.ts b/src/stores/User/user.store.test.ts
new file mode 100644
index 0000000000..dff1d4bc76
--- /dev/null
+++ b/src/stores/User/user.store.test.ts
@@ -0,0 +1,84 @@
+jest.mock('../common/module.store')
+import { faker } from '@faker-js/faker'
+import { FactoryUser } from 'src/test/factories/User'
+import type { RootStore } from '..'
+import { UserStore } from './user.store'
+
+describe('user.store', () => {
+  describe('triggerNotification', () => {
+    it('adds a new notification to user', async () => {
+      const store = new UserStore({} as RootStore)
+
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      store.db.getWhere.mockReturnValue([FactoryUser()])
+
+      // Act
+      await store.triggerNotification(
+        'howto_mention',
+        'example',
+        'https://example.com',
+      )
+
+      // Expect
+      const [newUser] = store.db.set.mock.calls[0]
+      expect(store.db.set).toBeCalledTimes(1)
+      expect(newUser.notifications).toHaveLength(1)
+      expect(newUser.notifications[0]).toEqual(
+        expect.objectContaining({
+          type: 'howto_mention',
+        }),
+      )
+    })
+
+    it('throws error when invalid user passed', async () => {
+      const store = new UserStore({} as RootStore)
+
+      // Act
+      await expect(
+        store.triggerNotification(
+          'howto_mention',
+          'non-existent-user',
+          'https://example.com',
+        ),
+      ).rejects.toThrow('User not found')
+    })
+  })
+
+  describe('getUserNotifications', () => {
+    it('returns only unread messages', () => {
+      const store = new UserStore({} as RootStore)
+
+      store._testSetUser(
+        FactoryUser({
+          notifications: [
+            {
+              _id: faker.database.mongodbObjectId(),
+              _created: faker.date.past().toString(),
+              triggeredBy: {
+                displayName: faker.internet.userName(),
+                userId: faker.internet.userName(),
+              },
+              relevantUrl: faker.internet.url(),
+              type: 'new_comment',
+              read: true,
+            },
+            {
+              _id: faker.database.mongodbObjectId(),
+              _created: faker.date.past().toString(),
+              triggeredBy: {
+                displayName: faker.internet.userName(),
+                userId: faker.internet.userName(),
+              },
+              relevantUrl: faker.internet.url(),
+              type: 'new_comment',
+              read: false,
+            },
+          ],
+        }),
+      )
+
+      expect(store.getUserNotifications()).toHaveLength(1)
+    })
+  })
+})
diff --git a/src/stores/User/user.store.ts b/src/stores/User/user.store.ts
index f81f9c88e2..9a4d0b80ef 100644
--- a/src/stores/User/user.store.ts
+++ b/src/stores/User/user.store.ts
@@ -352,9 +352,6 @@ export class UserStore extends ModuleStore {
     }
   }
 
-  // use firebase auth to listen to change to signed in user
-  // on sign in want to load user profile
-  // strange implementation return the unsubscribe object on subscription, so stored
   @action
   public async triggerNotification(
     type: NotificationType,
@@ -386,6 +383,10 @@ export class UserStore extends ModuleStore {
 
         const user = lookup[0]
 
+        if (!user) {
+          throw new Error('User not found.')
+        }
+
         const updatedUser: IUser = {
           ...toJS(user),
           notifications: user.notifications
@@ -400,7 +401,7 @@ export class UserStore extends ModuleStore {
         await dbRef.set(updatedUser)
       }
     } catch (err) {
-      console.error(err)
+      logger.error(err)
       throw new Error(err)
     }
   }
@@ -454,6 +455,10 @@ export class UserStore extends ModuleStore {
       throw new Error(err)
     }
   }
+
+  // use firebase auth to listen to change to signed in user
+  // on sign in want to load user profile
+  // strange implementation return the unsubscribe object on subscription, so stored
   // to authUnsubscribe variable for use later
   private _listenToAuthStateChanges(checkEmailVerification = false) {
     this.authUnsubscribe = auth.onAuthStateChanged((authUser) => {
@@ -473,6 +478,14 @@ export class UserStore extends ModuleStore {
   private _unsubscribeFromAuthStateChanges() {
     this.authUnsubscribe()
   }
+
+  /**
+   * Do not use.
+   * This exists for testing purposes only.
+   */
+  public _testSetUser(user: IUserPPDB) {
+    this.user = user
+  }
 }
 
 interface IUserUpdateStatus {
diff --git a/src/stores/common/mentions/index.test.ts b/src/stores/common/mentions/index.test.ts
index aa772da10e..3bded356f9 100644
--- a/src/stores/common/mentions/index.test.ts
+++ b/src/stores/common/mentions/index.test.ts
@@ -32,9 +32,10 @@ describe('changeMentionToUserReference', () => {
         'a simple @​fish containing multiple usernames, @seconduser. One fake @user',
         mockUserStore as unknown as UserStore,
       ),
-    ).toEqual(
-      'a simple @@{fish:FISH} containing multiple usernames, @@{seconduser:seconduser}. One fake @​user',
-    )
+    ).toEqual({
+      text: 'a simple @@{fish:FISH} containing multiple usernames, @@{seconduser:seconduser}. One fake @​user',
+      mentionedUsers: ['FISH', 'seconduser'],
+    })
   })
 
   it('extracts valid user names', async () => {
@@ -56,7 +57,10 @@ describe('changeMentionToUserReference', () => {
         'a simple email@fish.com',
         mockUserStore as unknown as UserStore,
       ),
-    ).toEqual('a simple email@fish.com')
+    ).toEqual({
+      text: 'a simple email@fish.com',
+      mentionedUsers: [],
+    })
   })
 
   it('handles errors when fetching user', async () => {
@@ -67,7 +71,10 @@ describe('changeMentionToUserReference', () => {
         'a simple email@fish.com',
         mockUserStore as unknown as UserStore,
       ),
-    ).toEqual('a simple email@fish.com')
+    ).toEqual({
+      text: 'a simple email@fish.com',
+      mentionedUsers: [],
+    })
   })
 })
 
diff --git a/src/stores/common/mentions/index.ts b/src/stores/common/mentions/index.ts
index 2babb675b9..afdb224926 100644
--- a/src/stores/common/mentions/index.ts
+++ b/src/stores/common/mentions/index.ts
@@ -11,17 +11,23 @@ import type { UserStore } from '../../User/user.store'
  *
  * @param text string
  * @param userStore UserStore
- * @returns Promise<string>
+ * @returns Promise<{
+ *   text: string;
+ *   mentionedUsers: string[],
+ * }>
  */
 export const changeMentionToUserReference = async function (
   text: string,
   userStore: UserStore,
-): Promise<string> {
+): Promise<{
+  text: string
+  mentionedUsers: string[]
+}> {
   const mentions = text.match(/\B@[​a-z0-9_-]+/g)
   const mentionedUsers = new Set<string>()
 
   if (!mentions) {
-    return text
+    return { text, mentionedUsers: [] }
   }
 
   for (const mention of mentions) {
@@ -42,7 +48,7 @@ export const changeMentionToUserReference = async function (
       logger.debug('Unable to find matching profile', { mention })
     }
   }
-  return text
+  return { text, mentionedUsers: Array.from(mentionedUsers) }
 }
 
 export const changeUserReferenceToPlainText = function (text: string) {
diff --git a/src/test/factories/Howto.ts b/src/test/factories/Howto.ts
index 4ba513fee0..3b6a6a0f78 100644
--- a/src/test/factories/Howto.ts
+++ b/src/test/factories/Howto.ts
@@ -1,4 +1,4 @@
-import type { IHowtoDB } from 'src/models'
+import type { IHowtoDB, IHowtoStep } from 'src/models'
 import { faker } from '@faker-js/faker'
 
 export const FactoryHowto = (
@@ -27,6 +27,7 @@ export const FactoryHowto = (
   _deleted: faker.datatype.boolean(),
   _createdBy: faker.internet.userName(),
   steps: [],
+  mentions: [],
   cover_image: {
     downloadUrl: '',
     name: '',
@@ -38,3 +39,22 @@ export const FactoryHowto = (
   },
   ...howtoOverloads,
 })
+
+export const FactoryHowtoStep = (
+  howtoStepOverloads: Partial<IHowtoStep> = {},
+): IHowtoStep => ({
+  images: [
+    {
+      downloadUrl: faker.internet.url(),
+      fullPath: faker.internet.url(),
+      name: faker.lorem.text(),
+      type: 'string',
+      size: 2300,
+      timeCreated: faker.date.past().toString(),
+      updated: faker.date.past().toString(),
+    },
+  ],
+  title: faker.lorem.text(),
+  text: faker.lorem.paragraphs(2),
+  ...howtoStepOverloads,
+})