diff --git a/docker/keycloak/realm-export.json b/docker/keycloak/realm-export.json
index 0aebab4d..acf72774 100644
--- a/docker/keycloak/realm-export.json
+++ b/docker/keycloak/realm-export.json
@@ -666,7 +666,8 @@
       "alwaysDisplayInConsole": false,
       "clientAuthenticatorType": "client-secret",
       "redirectUris": [
-        "http://localhost:3000/rpc/domain/authentication/login/feature"
+        "http://localhost:3000/rpc/domain/authentication/login",
+        "http://localhost:5173/rpc/domain/authentication/login"
       ],
       "webOrigins": [
         "https://www.keycloak.org"
diff --git a/segments/bff.json b/segments/bff.json
index b15ab48a..ea14b39e 100644
--- a/segments/bff.json
+++ b/segments/bff.json
@@ -24,6 +24,7 @@
     "./domain/reaction/createWithComment": { "default": {  "access": "public" } },
     "./domain/reaction/getByIdAggregated": { "default": {  "access": "public" } },
     "./domain/reaction/getByPostAggregated": { "default": {  "access": "public" } },
+    "./domain/reaction/getByReactionAggregated": { "default": { "access": "public"} },
     "./domain/reaction/remove": { "default": {  "access": "public" } },
     "./domain/reaction/toggleRating": { "default": {  "access": "public" } },
  
diff --git a/src/domain/notification/aggregate/aggregate.ts b/src/domain/notification/aggregate/aggregate.ts
index 21c01170..9023887b 100644
--- a/src/domain/notification/aggregate/aggregate.ts
+++ b/src/domain/notification/aggregate/aggregate.ts
@@ -9,10 +9,11 @@ import type { AggregatedData } from './types';
 
 export default async function aggregate(requester: Requester, data: DataModel): Promise<AggregatedData>
 {
-    const [relationData, postData, reactionData] = await Promise.all([
+    const [relationData, postData, targetReactionData, sourceReactionData] = await Promise.all([
         getRelationData(data.receiverId, data.senderId),
-        data.postId ? getPostData(requester, data.postId) : undefined,
-        data.reactionId ? getReactionData(requester, data.reactionId) : undefined
+        data.targetPostId ? getPostData(requester, data.targetPostId) : undefined,
+        data.targetReactionId ? getReactionData(requester, data.targetReactionId) : undefined,
+        data.sourceReactionId ? getReactionData(requester, data.sourceReactionId) : undefined
     ]);
 
     return {
@@ -20,7 +21,8 @@ export default async function aggregate(requester: Requester, data: DataModel):
         createdAt: data.createdAt,
         type: data.type,
         relation: relationData,
-        post: postData,
-        reaction: reactionData
+        targetPost: postData,
+        targetReaction: targetReactionData,
+        sourceReaction: sourceReactionData
     };
 }
diff --git a/src/domain/notification/aggregate/types.ts b/src/domain/notification/aggregate/types.ts
index 7b1434f5..e1f5d63f 100644
--- a/src/domain/notification/aggregate/types.ts
+++ b/src/domain/notification/aggregate/types.ts
@@ -8,8 +8,9 @@ import { DataModel } from '../types';
 type AggregatedData = Pick<DataModel, 'id' | 'createdAt' | 'type'> &
 {
     readonly relation: AggregatedRelationData;
-    readonly post?: AggregatedPostData;
-    readonly reaction?: AggregatedReactionData;
+    readonly targetPost?: AggregatedPostData;
+    readonly targetReaction?: AggregatedReactionData;
+    readonly sourceReaction?: AggregatedReactionData;
 };
 
 export type { AggregatedData };
diff --git a/src/domain/notification/create/create.ts b/src/domain/notification/create/create.ts
index e09126d2..126348b3 100644
--- a/src/domain/notification/create/create.ts
+++ b/src/domain/notification/create/create.ts
@@ -5,14 +5,14 @@ import { Type } from '../definitions';
 import createData from './createData';
 import insertData from './insertData';
 
-export default async function feature(type: Type, senderId: string, receiverId: string, postId: string | undefined = undefined, reactionId: string | undefined = undefined): Promise<void>
+export default async function feature(type: Type, senderId: string, receiverId: string, targetPostId: string | undefined = undefined, targetReactionId: string | undefined = undefined, sourceReactionId: string | undefined = undefined): Promise<void>
 {
     if (senderId === receiverId)
     {
         return;
     }
 
-    const data = createData(type, senderId, receiverId, postId, reactionId);
+    const data = createData(type, senderId, receiverId, targetPostId, targetReactionId, sourceReactionId);
 
     try
     {
diff --git a/src/domain/notification/create/createData.ts b/src/domain/notification/create/createData.ts
index c36b5e90..31cb06b9 100644
--- a/src/domain/notification/create/createData.ts
+++ b/src/domain/notification/create/createData.ts
@@ -3,7 +3,7 @@ import { generateId } from '^/integrations/utilities/crypto';
 
 import { DataModel } from '../types';
 
-export default function createData(type: string, senderId: string, receiverId: string, postId: string | undefined = undefined, reactionId: string | undefined = undefined): DataModel
+export default function createData(type: string, senderId: string, receiverId: string, targetPostId: string | undefined = undefined, targetReactionId: string | undefined = undefined, sourceReactionId: string | undefined = undefined): DataModel
 {
     return {
         id: generateId(),
@@ -11,7 +11,8 @@ export default function createData(type: string, senderId: string, receiverId: s
         type,
         senderId,
         receiverId,
-        postId,
-        reactionId
+        targetPostId,
+        targetReactionId,
+        sourceReactionId
     };
 }
diff --git a/src/domain/notification/definitions.ts b/src/domain/notification/definitions.ts
index 4bfc9128..bd2f47d9 100644
--- a/src/domain/notification/definitions.ts
+++ b/src/domain/notification/definitions.ts
@@ -5,7 +5,8 @@ export const Types = {
     STARTED_FOLLOWING: 'started-following',
     RATED_POST: 'rated-post',
     RATED_REACTION: 'rated-reaction',
-    ADDED_REACTION: 'added-reaction'
+    ADDED_REACTION_POST: 'added-reaction-post',
+    ADDED_REACTION_REACTION: 'added-reaction-reaction'
 } as const;
 
 type TypeKeys = keyof typeof Types;
diff --git a/src/domain/notification/types.ts b/src/domain/notification/types.ts
index f8c58578..2b7a6ab0 100644
--- a/src/domain/notification/types.ts
+++ b/src/domain/notification/types.ts
@@ -7,8 +7,9 @@ type DataModel = BaseDataModel &
     readonly type: string;
     readonly senderId: string;
     readonly receiverId: string;
-    readonly postId?: string;
-    readonly reactionId?: string;
+    readonly targetPostId?: string;
+    readonly targetReactionId?: string;
+    readonly sourceReactionId?: string;
 };
 
 export type { DataModel };
diff --git a/src/domain/post/toggleRating/toggleRating.ts b/src/domain/post/toggleRating/toggleRating.ts
index d29b277f..901f1221 100644
--- a/src/domain/post/toggleRating/toggleRating.ts
+++ b/src/domain/post/toggleRating/toggleRating.ts
@@ -28,7 +28,7 @@ export default async function toggleRating(requester: Requester, postId: string)
 
         const post = await getPost(postId);
 
-        await createNotification(Types.RATED_POST, requester.id, post.creatorId, postId);
+        await createNotification(Types.RATED_POST, requester.id, post.creatorId, postId, undefined);
 
         return true;
     }
diff --git a/src/domain/reaction/remove/ReactionNotFound.ts b/src/domain/reaction/ReactionNotFound.ts
similarity index 100%
rename from src/domain/reaction/remove/ReactionNotFound.ts
rename to src/domain/reaction/ReactionNotFound.ts
diff --git a/src/domain/reaction/aggregate/aggregate.ts b/src/domain/reaction/aggregate/aggregate.ts
index 57ca25e1..11fc86dd 100644
--- a/src/domain/reaction/aggregate/aggregate.ts
+++ b/src/domain/reaction/aggregate/aggregate.ts
@@ -21,8 +21,10 @@ export default async function aggregate(requester: Requester, data: DataModel):
         id: data.id,
         createdAt: data.createdAt,
         ratingCount: data.ratingCount,
+        reactionCount: data.reactionCount,
         creator: relationData,
         postId: data.postId,
+        reactionId: data.reactionId,
         hasRated,
         comic: comicData,
         comment: commentData,
diff --git a/src/domain/reaction/aggregate/types.ts b/src/domain/reaction/aggregate/types.ts
index cb126353..158b388e 100644
--- a/src/domain/reaction/aggregate/types.ts
+++ b/src/domain/reaction/aggregate/types.ts
@@ -1,11 +1,11 @@
 
 import type { AggregatedData as AggregatedComicData } from '^/domain/comic/aggregate';
-import type { DataModel as CommentData } from '^/domain/comment/types';
+import type { DataModel as CommentData } from '^/domain/comment';
 import type { AggregatedData as AggregatedRelationData } from '^/domain/relation/aggregate';
 
 import type { DataModel } from '../types';
 
-type AggregatedData = Pick<DataModel, 'id' | 'createdAt' | 'ratingCount' | 'postId'> &
+type AggregatedData = Pick<DataModel, 'id' | 'createdAt' | 'ratingCount' | 'reactionCount' | 'postId' | 'reactionId'> &
 {
     readonly creator: AggregatedRelationData;
     readonly hasRated: boolean;
diff --git a/src/domain/reaction/create/create.ts b/src/domain/reaction/create/create.ts
index c04f822d..8674072f 100644
--- a/src/domain/reaction/create/create.ts
+++ b/src/domain/reaction/create/create.ts
@@ -1,33 +1,48 @@
 
 import logger from '^/integrations/logging';
 
-import { Types } from '^/domain/notification';
 import createNotification from '^/domain/notification/create';
+import { Types } from '^/domain/notification/definitions';
 import retrievePost from '^/domain/post/getById';
-import updateReactionCount from '^/domain/post/updateReactionCount';
+import updatePostReactionCount from '^/domain/post/updateReactionCount';
+
+import retrieveReaction from '../getById';
+import updateReactionReactionCount from '../updateReactionCount';
 
 import createData from './createData';
 import eraseData from './eraseData';
 import insertData from './insertData';
 import validateData from './validateData';
 
-export default async function create(creatorId: string, postId: string, comicId: string | undefined = undefined, commentId: string | undefined = undefined): Promise<string>
+export default async function feature(creatorId: string, postId: string | undefined = undefined, reactionId: string | undefined = undefined, comicId: string | undefined = undefined, commentId: string | undefined = undefined): Promise<string>
 {
     let id;
 
     try
     {
-        const data = createData(creatorId, postId, comicId, commentId);
+        const data = createData(creatorId, postId, reactionId, comicId, commentId);
 
         validateData(data);
 
         id = await insertData(data);
 
-        await updateReactionCount(postId, 'increase');
+        if (postId !== undefined)
+        {
+            await updatePostReactionCount(postId, 'increase');
+
+            const post = await retrievePost(postId);
+
+            await createNotification(Types.ADDED_REACTION_POST, creatorId, post.creatorId, postId, undefined, id);
+        }
+
+        if (reactionId !== undefined)
+        {
+            await updateReactionReactionCount(reactionId, 'increase');
 
-        const post = await retrievePost(postId);
+            const reaction = await retrieveReaction(reactionId);
 
-        await createNotification(Types.ADDED_REACTION, creatorId, post.creatorId, postId, id);
+            await createNotification(Types.ADDED_REACTION_REACTION, creatorId, reaction.creatorId, undefined, reactionId, id);
+        }
 
         return id;
     }
diff --git a/src/domain/reaction/create/createData.ts b/src/domain/reaction/create/createData.ts
index 1baa7558..3952d8fb 100644
--- a/src/domain/reaction/create/createData.ts
+++ b/src/domain/reaction/create/createData.ts
@@ -3,15 +3,17 @@ import { generateId } from '^/integrations/utilities/crypto';
 
 import { DataModel } from '../types';
 
-export default function createData(creatorId: string, postId: string, comicId: string | undefined = undefined, commentId: string | undefined = undefined): DataModel
+export default function createData(creatorId: string, postId: string | undefined = undefined, reactionId: string | undefined = undefined, comicId: string | undefined = undefined, commentId: string | undefined = undefined): DataModel
 {
     return {
         id: generateId(),
         createdAt: new Date().toISOString(),
         creatorId,
         postId,
+        reactionId,
         comicId,
         commentId,
-        ratingCount: 0
+        ratingCount: 0,
+        reactionCount: 0
     };
 }
diff --git a/src/domain/reaction/create/types.ts b/src/domain/reaction/create/types.ts
index 71e759c5..20fddeb9 100644
--- a/src/domain/reaction/create/types.ts
+++ b/src/domain/reaction/create/types.ts
@@ -1,6 +1,6 @@
 
 import { DataModel } from '../types';
 
-type ValidationModel = Pick<DataModel, 'creatorId' | 'postId' | 'comicId' | 'commentId'>;
+type ValidationModel = Pick<DataModel, 'creatorId' | 'postId' | 'reactionId' | 'comicId' | 'commentId'>;
 
 export type { ValidationModel };
diff --git a/src/domain/reaction/create/validateData.ts b/src/domain/reaction/create/validateData.ts
index b499cb6c..4cd474a7 100644
--- a/src/domain/reaction/create/validateData.ts
+++ b/src/domain/reaction/create/validateData.ts
@@ -9,13 +9,23 @@ import { ValidationModel } from './types';
 const schema: ValidationSchema =
 {
     creatorId: requiredIdValidation,
-    postId: requiredIdValidation,
+    postId: optionalIdValidation,
+    reactionId: optionalIdValidation,
     comicId: optionalIdValidation,
     commentId: optionalIdValidation
 };
 
-export default function validateData({ creatorId, postId, comicId, commentId }: ValidationModel): void
+export default function validateData({ creatorId, postId, reactionId, comicId, commentId }: ValidationModel): void
 {
+    if (postId === undefined && reactionId === undefined)
+    {
+        const messages = new Map()
+            .set('postId', 'Either postId or reactionId must be provided')
+            .set('reactionId', 'Either postId or reactionId must be provided');
+
+        throw new InvalidReaction(messages);
+    }
+
     if (comicId === undefined && commentId === undefined)
     {
         const messages = new Map()
diff --git a/src/domain/reaction/createWithComic/createWithComic.ts b/src/domain/reaction/createWithComic/createWithComic.ts
index 38957689..25ef2e2b 100644
--- a/src/domain/reaction/createWithComic/createWithComic.ts
+++ b/src/domain/reaction/createWithComic/createWithComic.ts
@@ -4,9 +4,9 @@ import createComic from '^/domain/comic/create';
 
 import createReaction from '../create';
 
-export default async function createWithComic(requester: Requester, postId: string, imageData: string): Promise<string>
+export default async function createWithComic(requester: Requester, imageData: string, postId: string | undefined = undefined, reactionId: string | undefined = undefined): Promise<string>
 {
     const comicId = await createComic(imageData);
 
-    return createReaction(requester.id, postId, comicId);
+    return createReaction(requester.id, postId, reactionId, comicId);
 }
diff --git a/src/domain/reaction/createWithComment/createWithComment.ts b/src/domain/reaction/createWithComment/createWithComment.ts
index 8fcba79b..70ffff71 100644
--- a/src/domain/reaction/createWithComment/createWithComment.ts
+++ b/src/domain/reaction/createWithComment/createWithComment.ts
@@ -4,9 +4,9 @@ import createComment from '^/domain/comment/create';
 
 import createReaction from '../create';
 
-export default async function createWithComment(requester: Requester, postId: string, message: string): Promise<string>
+export default async function createWithComment(requester: Requester, message: string, postId: string | undefined = undefined, reactionId: string | undefined = undefined): Promise<string>
 {
     const commentId = await createComment(message);
 
-    return createReaction(requester.id, postId, undefined, commentId);
+    return createReaction(requester.id, postId, reactionId, undefined, commentId);
 }
diff --git a/src/domain/reaction/getById/getById.ts b/src/domain/reaction/getById/getById.ts
index 954137d2..ce4e02b0 100644
--- a/src/domain/reaction/getById/getById.ts
+++ b/src/domain/reaction/getById/getById.ts
@@ -1,10 +1,24 @@
 
-import database from '^/integrations/database';
+import database, { RecordQuery } from '^/integrations/database';
 
 import { RECORD_TYPE } from '../definitions';
+import ReactionNotFound from '../ReactionNotFound';
 import type { DataModel } from '../types';
 
 export default async function getById(id: string): Promise<DataModel>
 {
-    return database.readRecord(RECORD_TYPE, id) as Promise<DataModel>;
+    const query: RecordQuery =
+    {
+        id: { 'EQUALS': id },
+        deleted: { 'EQUALS': false }
+    };
+
+    const record = await database.findRecord(RECORD_TYPE, query);
+
+    if (record === undefined)
+    {
+        throw new ReactionNotFound();
+    }
+
+    return record as DataModel;
 }
diff --git a/src/domain/reaction/getByReaction/getByReaction.ts b/src/domain/reaction/getByReaction/getByReaction.ts
new file mode 100644
index 00000000..64427c08
--- /dev/null
+++ b/src/domain/reaction/getByReaction/getByReaction.ts
@@ -0,0 +1,18 @@
+
+import database, { RecordQuery, RecordSort, SortDirections } from '^/integrations/database';
+
+import { RECORD_TYPE } from '../definitions';
+import type { DataModel } from '../types';
+
+export default async function getByReaction(reactionId: string, limit: number, offset: number): Promise<DataModel[]>
+{
+    const query: RecordQuery =
+    {
+        reactionId: { 'EQUALS': reactionId },
+        deleted: { 'EQUALS': false }
+    };
+
+    const sort: RecordSort = { createdAt: SortDirections.DESCENDING };
+
+    return database.searchRecords(RECORD_TYPE, query, undefined, sort, limit, offset) as Promise<DataModel[]>;
+}
diff --git a/src/domain/reaction/getByReaction/index.ts b/src/domain/reaction/getByReaction/index.ts
new file mode 100644
index 00000000..c681a8a1
--- /dev/null
+++ b/src/domain/reaction/getByReaction/index.ts
@@ -0,0 +1,2 @@
+
+export { default } from './getByReaction';
diff --git a/src/domain/reaction/getByReactionAggregated/getByReactionAggregated.ts b/src/domain/reaction/getByReactionAggregated/getByReactionAggregated.ts
new file mode 100644
index 00000000..e73c67c6
--- /dev/null
+++ b/src/domain/reaction/getByReactionAggregated/getByReactionAggregated.ts
@@ -0,0 +1,14 @@
+
+import type { Requester } from '^/domain/authentication/types';
+import { Range } from '^/domain/common/validateRange';
+
+import aggregate from '../aggregate';
+import type { AggregatedData } from '../aggregate/types';
+import getByReaction from '../getByReaction/getByReaction';
+
+export default async function getByReactionAggregated(requester: Requester, reactionId: string, range: Range): Promise<AggregatedData[]>
+{
+    const data = await getByReaction(reactionId, range.limit, range.offset);
+
+    return Promise.all(data.map(item => aggregate(requester, item)));
+}
diff --git a/src/domain/reaction/getByReactionAggregated/index.ts b/src/domain/reaction/getByReactionAggregated/index.ts
new file mode 100644
index 00000000..9452a0f6
--- /dev/null
+++ b/src/domain/reaction/getByReactionAggregated/index.ts
@@ -0,0 +1,2 @@
+
+export { default } from './getByReactionAggregated';
diff --git a/src/domain/reaction/index.ts b/src/domain/reaction/index.ts
index 273c9eea..0dc6060a 100644
--- a/src/domain/reaction/index.ts
+++ b/src/domain/reaction/index.ts
@@ -2,3 +2,5 @@
 export { RECORD_TYPE } from './definitions';
 
 export type { DataModel } from './types';
+
+export { default as ReactionNotFound } from './ReactionNotFound';
diff --git a/src/domain/reaction/remove/index.ts b/src/domain/reaction/remove/index.ts
index e9da62e9..16bee921 100644
--- a/src/domain/reaction/remove/index.ts
+++ b/src/domain/reaction/remove/index.ts
@@ -1,4 +1,2 @@
 
 export { default } from './remove';
-
-export { default as ReactionNotFound } from './ReactionNotFound';
diff --git a/src/domain/reaction/remove/remove.ts b/src/domain/reaction/remove/remove.ts
index b13f6607..0a9b7262 100644
--- a/src/domain/reaction/remove/remove.ts
+++ b/src/domain/reaction/remove/remove.ts
@@ -1,10 +1,11 @@
 
 import logger from '^/integrations/logging';
 
-import { Requester } from '^/domain/authentication';
-import updateReactionCount from '^/domain/post/updateReactionCount';
+import type { Requester } from '^/domain/authentication/types';
+import updatePostReactionCount from '^/domain/post/updateReactionCount';
+import ReactionNotFound from '^/domain/reaction/ReactionNotFound';
+import updateReactionReactionCount from '^/domain/reaction/updateReactionCount';
 
-import ReactionNotFound from './ReactionNotFound';
 import deleteData from './deleteData';
 import retrieveOwnedData from './retrieveOwnedData';
 
@@ -20,11 +21,20 @@ export default async function remove(requester: Requester, id: string): Promise<
         throw new ReactionNotFound();
     }
 
-    let reactionCount;
+    let postReactionCount;
+    let reactionReactionCount;
 
     try
     {
-        reactionCount = await updateReactionCount(reaction.postId, 'decrease');
+        if (reaction.postId !== undefined)
+        {
+            postReactionCount = await updatePostReactionCount(reaction.postId, 'decrease');
+        }
+
+        if (reaction.reactionId !== undefined)
+        {
+            reactionReactionCount = await updateReactionReactionCount(reaction.reactionId, 'decrease');
+        }
 
         await deleteData(reaction.id);
     }
@@ -32,9 +42,14 @@ export default async function remove(requester: Requester, id: string): Promise<
     {
         logger.logError('Failed to remove reaction', error);
 
-        if (reactionCount !== undefined)
+        if (postReactionCount !== undefined)
+        {
+            await updatePostReactionCount(reaction.postId as string, 'increase');
+        }
+
+        if (reactionReactionCount !== undefined)
         {
-            await updateReactionCount(reaction.postId, 'increase');
+            await updateReactionReactionCount(reaction.reactionId as string, 'increase');
         }
 
         throw error;
diff --git a/src/domain/reaction/types.ts b/src/domain/reaction/types.ts
index b2285356..c21f8701 100644
--- a/src/domain/reaction/types.ts
+++ b/src/domain/reaction/types.ts
@@ -5,10 +5,12 @@ type DataModel = BaseDataModel &
 {
     readonly createdAt: string;
     readonly creatorId: string;
-    readonly postId: string;
+    readonly postId: string | undefined;
+    readonly reactionId: string | undefined;
     readonly comicId: string | undefined;
     readonly commentId: string | undefined;
     readonly ratingCount: number;
+    readonly reactionCount: number;
 };
 
 export type { CountOperation, DataModel };
diff --git a/src/domain/reaction/updateReactionCount/index.ts b/src/domain/reaction/updateReactionCount/index.ts
new file mode 100644
index 00000000..dbb4f583
--- /dev/null
+++ b/src/domain/reaction/updateReactionCount/index.ts
@@ -0,0 +1,2 @@
+
+export { default } from './updateReactionCount';
diff --git a/src/domain/reaction/updateReactionCount/updateReactionCount.ts b/src/domain/reaction/updateReactionCount/updateReactionCount.ts
new file mode 100644
index 00000000..5b3664fd
--- /dev/null
+++ b/src/domain/reaction/updateReactionCount/updateReactionCount.ts
@@ -0,0 +1,18 @@
+
+import getById from '../getById';
+import update from '../update';
+
+import type { CountOperation } from '../types';
+
+export default async function updateReactionCount(id: string, operation: CountOperation): Promise<number>
+{
+    const data = await getById(id);
+
+    const reactionCount = operation === 'increase'
+        ? data.reactionCount + 1
+        : data.reactionCount - 1;
+
+    await update(id, { reactionCount });
+
+    return reactionCount;
+}
diff --git a/src/webui/Routes.tsx b/src/webui/Routes.tsx
index 6dd16713..9bbf5a31 100644
--- a/src/webui/Routes.tsx
+++ b/src/webui/Routes.tsx
@@ -13,8 +13,10 @@ import Logout from './features/Logout';
 import NotFound from './features/NotFound';
 import Notifications from './features/Notifications';
 import PostDetails from './features/PostDetails';
+import PostHighlight from './features/PostHighlight';
 import Profile from './features/Profile';
 import ReactionDetails from './features/ReactionDetails';
+import ReactionHighlight from './features/ReactionHighlight';
 import Timeline from './features/Timeline';
 
 export default function Component()
@@ -39,7 +41,9 @@ export default function Component()
         <Route path="/profile/:nickname/:tab?" element={protect(<Profile />)} />
         <Route path="/edit/profile" element={protect(<EditProfile />)} />
         <Route path="/post/:postId" element={protect(<PostDetails />)} />
-        <Route path="/post/:postId/reaction/:reactionId" element={protect(<ReactionDetails />)} />
+        <Route path="/reaction/:reactionId" element={protect(<ReactionDetails />)} />
+        <Route path="/reaction/:reactionId/highlight/:highlightId" element={protect(<ReactionHighlight />)} />
+        <Route path="/post/:postId/highlight/:highlightId" element={protect(<PostHighlight />)} />
         <Route path="/logout" element={protect(<Logout />)} />
 
         <Route path="*" element={<NotFound />} />
diff --git a/src/webui/components/common/BackButton.tsx b/src/webui/components/common/BackButton.tsx
new file mode 100644
index 00000000..9b1d3aca
--- /dev/null
+++ b/src/webui/components/common/BackButton.tsx
@@ -0,0 +1,15 @@
+
+import { Button } from '^/webui/designsystem';
+
+type Props = {
+    readonly onClick: () => void;
+};
+
+export default function Component({ onClick }: Props)
+{
+    return <Button
+        type={'secondary'}
+        text='Back'
+        onClick={onClick}
+    />;
+}
diff --git a/src/webui/components/common/BackRow.tsx b/src/webui/components/common/BackRow.tsx
new file mode 100644
index 00000000..8426753f
--- /dev/null
+++ b/src/webui/components/common/BackRow.tsx
@@ -0,0 +1,16 @@
+
+
+import { Row } from '^/webui/designsystem';
+
+import BackButton from './BackButton';
+
+type Props = {
+    readonly onClick: () => void;
+};
+
+export default function Component({ onClick }: Props)
+{
+    return <Row alignX='justify' gap='small'>
+        <BackButton onClick={onClick} />
+    </Row>;
+}
diff --git a/src/webui/components/index.ts b/src/webui/components/index.ts
index fd7fb0f1..d65fed51 100644
--- a/src/webui/components/index.ts
+++ b/src/webui/components/index.ts
@@ -24,6 +24,7 @@ export { default as NotificationPanelList } from './notification/PanelList';
 export { default as PostDetailsPanel } from './post/DetailsPanel';
 export { default as PostPanelGrid } from './post/PanelGrid';
 export { default as PostPanelList } from './post/PanelList';
+export { default as ReactionDetailsPanel } from './reaction/DetailsPanel';
 export { default as ReactionLargePanel } from './reaction/LargePanel';
 export { default as ReactionPanelList } from './reaction/PanelList';
 export { default as SingleReactionRow } from './reaction/SingleReactionRow';
diff --git a/src/webui/components/notification/Panel.tsx b/src/webui/components/notification/Panel.tsx
index 31dcf553..ccbfe26c 100644
--- a/src/webui/components/notification/Panel.tsx
+++ b/src/webui/components/notification/Panel.tsx
@@ -1,13 +1,12 @@
 
 import type { AggregatedData as AggregatedNotificationData } from '^/domain/notification/aggregate';
-import type { AggregatedData as AggregatedPostData } from '^/domain/post/aggregate';
-import type { AggregatedData as AggregatedReactionData } from '^/domain/reaction/aggregate';
 import type { AggregatedData as AggregatedRelationData } from '^/domain/relation/aggregate';
 
 import { Column, Panel } from '^/webui/designsystem';
 
 import TimeElapsed from '../relation/TimeElapsed';
-import AddedReaction from './elementary/AddedReaction';
+import AddedPostReaction from './elementary/AddedPostReaction';
+import AddedReactionReaction from './elementary/AddedReactionReaction';
 import RatedPost from './elementary/RatedPost';
 import RatedReaction from './elementary/RatedReaction';
 import StartedFollowing from './elementary/StartedFollowing';
@@ -16,22 +15,22 @@ type Props = {
     readonly notification: AggregatedNotificationData;
     readonly onFollowClick: (relation: AggregatedRelationData) => Promise<void>;
     readonly onCreatorClick: (relation: AggregatedRelationData) => void;
-    readonly onReactionClick: (reaction: AggregatedReactionData) => void;
-    readonly onPostClick: (post: AggregatedPostData) => void;
+    readonly onNotificationClick: (notification: AggregatedNotificationData) => void;
 };
 
-function getContent(notification: AggregatedNotificationData, onReactionClick: (reaction: AggregatedReactionData) => void, onPostClick: (post: AggregatedPostData) => void)
+function getContent(notification: AggregatedNotificationData, onNotificationClick: (notification: AggregatedNotificationData) => void)
 {
     switch (notification.type)
     {
         case 'started-following': return <StartedFollowing isFollowing={notification.relation.established} />;
-        case 'rated-post': return <RatedPost post={notification.post as AggregatedPostData} onPostClick={onPostClick} />;
-        case 'rated-reaction': return <RatedReaction reaction={notification.reaction as AggregatedReactionData} onReactionClick={onReactionClick} />;
-        case 'added-reaction': return <AddedReaction notification={notification} onReactionClick={onReactionClick} />;
+        case 'rated-post': return <RatedPost notification={notification} onPostClick={onNotificationClick} />;
+        case 'rated-reaction': return <RatedReaction notification={notification} onReactionClick={onNotificationClick} />;
+        case 'added-reaction-post': return <AddedPostReaction notification={notification} onPostHighlightClick={onNotificationClick} />;
+        case 'added-reaction-reaction': return <AddedReactionReaction notification={notification} onReactionHighlightClick={onNotificationClick} />;
     }
 }
 
-export default function Component({ notification, onFollowClick, onCreatorClick, onReactionClick, onPostClick }: Props)
+export default function Component({ notification, onFollowClick, onCreatorClick, onNotificationClick }: Props)
 {
     return <Panel>
         <Column gap='medium' alignX='stretch'>
@@ -41,7 +40,7 @@ export default function Component({ notification, onFollowClick, onCreatorClick,
                 onFollowClick={onFollowClick}
                 onCreatorClick={onCreatorClick}
             />
-            {getContent(notification, onReactionClick, onPostClick)}
+            {getContent(notification, onNotificationClick)}
         </Column>
     </Panel>;
 }
diff --git a/src/webui/components/notification/PanelList.tsx b/src/webui/components/notification/PanelList.tsx
index 7ecfe7d2..b866f8cb 100644
--- a/src/webui/components/notification/PanelList.tsx
+++ b/src/webui/components/notification/PanelList.tsx
@@ -1,7 +1,5 @@
 
 import type { AggregatedData as AggregatedNotificationData } from '^/domain/notification/aggregate';
-import type { AggregatedData as AggregatedPostData } from '^/domain/post/aggregate';
-import type { AggregatedData as AggregatedReactionData } from '^/domain/reaction/aggregate';
 import type { AggregatedData as AggregatedRelationData } from '^/domain/relation/aggregate';
 
 import { Column } from '^/webui/designsystem';
@@ -12,11 +10,10 @@ type Props = {
     readonly notifications: AggregatedNotificationData[];
     readonly onFollowClick: (relation: AggregatedRelationData) => Promise<void>;
     readonly onCreatorClick: (relation: AggregatedRelationData) => void;
-    readonly onReactionClick: (reaction: AggregatedReactionData) => void;
-    readonly onPostClick: (post: AggregatedPostData) => void;
+    readonly onNotificationClick: (notification: AggregatedNotificationData) => void;
 };
 
-export default function Component({ notifications, onFollowClick, onCreatorClick, onReactionClick, onPostClick }: Props)
+export default function Component({ notifications, onFollowClick, onCreatorClick, onNotificationClick }: Props)
 {
     return <Column gap='medium' alignX='stretch'>
         {
@@ -26,8 +23,7 @@ export default function Component({ notifications, onFollowClick, onCreatorClick
                     notification={notification}
                     onFollowClick={onFollowClick}
                     onCreatorClick={onCreatorClick}
-                    onReactionClick={onReactionClick}
-                    onPostClick={onPostClick}
+                    onNotificationClick={onNotificationClick}
                 />
             )
         }
diff --git a/src/webui/components/notification/elementary/AddedPostReaction.tsx b/src/webui/components/notification/elementary/AddedPostReaction.tsx
new file mode 100644
index 00000000..9a3b087c
--- /dev/null
+++ b/src/webui/components/notification/elementary/AddedPostReaction.tsx
@@ -0,0 +1,18 @@
+
+import type { AggregatedData as AggregatedNotificationData } from '^/domain/notification/aggregate';
+import { ClickArea, Image, Row, Text } from '^/webui/designsystem';
+
+type Props = {
+    readonly notification: AggregatedNotificationData;
+    readonly onPostHighlightClick: (notification: AggregatedNotificationData) => void;
+};
+
+export default function Component({ notification, onPostHighlightClick }: Props)
+{
+    return <Row alignX='justify' alignY='stretch' gap='medium'>
+        <Text value='I added a reaction to your post.' />
+        <ClickArea onClick={() => onPostHighlightClick(notification)}>
+            <Image source={notification.targetPost?.comic.image.dataUrl as string} width='150px' />
+        </ClickArea>
+    </Row>;
+}
diff --git a/src/webui/components/notification/elementary/AddedReaction.tsx b/src/webui/components/notification/elementary/AddedReaction.tsx
deleted file mode 100644
index 4a1f5138..00000000
--- a/src/webui/components/notification/elementary/AddedReaction.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-
-import type { AggregatedData as AggregatedNotificationData } from '^/domain/notification/aggregate';
-import type { AggregatedData as AggregatedReactionData } from '^/domain/reaction/aggregate';
-import { ClickArea, Image, Row, Text } from '^/webui/designsystem';
-
-type Props = {
-    readonly notification: AggregatedNotificationData;
-    readonly onReactionClick: (reaction: AggregatedReactionData) => void;
-};
-
-export default function Component({ notification, onReactionClick }: Props)
-{
-    return <Row alignX='justify' alignY='stretch' gap='medium'>
-        <Text value='I added a reaction to your post.' />
-        <ClickArea onClick={() => onReactionClick(notification.reaction as AggregatedReactionData)}>
-            <Image source={notification.post?.comic.image.dataUrl as string} width='150px' />
-        </ClickArea>
-    </Row>;
-}
diff --git a/src/webui/components/notification/elementary/AddedReactionReaction.tsx b/src/webui/components/notification/elementary/AddedReactionReaction.tsx
new file mode 100644
index 00000000..a0c47c58
--- /dev/null
+++ b/src/webui/components/notification/elementary/AddedReactionReaction.tsx
@@ -0,0 +1,20 @@
+
+import type { AggregatedData as AggregatedNotificationData } from '^/domain/notification/aggregate';
+import { Border, ClickArea, Column, Text } from '^/webui/designsystem';
+
+type Props = {
+    readonly notification: AggregatedNotificationData;
+    readonly onReactionHighlightClick: (notification: AggregatedNotificationData) => void;
+};
+
+export default function Component({ notification, onReactionHighlightClick }: Props)
+{
+    return <Column alignX='stretch' alignY='justify' gap='medium'>
+        <Text value='I added a reaction to your reaction.' />
+        <ClickArea onClick={() => onReactionHighlightClick(notification)}>
+            <Border size='small' padding='small'>
+                <Text size='small' wrap='normal' value={notification.targetReaction?.comment?.message as string} />
+            </Border>
+        </ClickArea>
+    </Column>;
+}
diff --git a/src/webui/components/notification/elementary/RatedComicReaction.tsx b/src/webui/components/notification/elementary/RatedComicReaction.tsx
index acb8acbf..8cc1dc77 100644
--- a/src/webui/components/notification/elementary/RatedComicReaction.tsx
+++ b/src/webui/components/notification/elementary/RatedComicReaction.tsx
@@ -1,19 +1,21 @@
 
 import { ClickArea, Image, Row, Text } from '^/webui/designsystem';
 
-import type { AggregatedData as AggregatedReactionData } from '^/domain/reaction/aggregate';
+import type { AggregatedData as AggregatedNotificationData } from '^/domain/notification/aggregate';
 
 type Props = {
-    readonly reaction: AggregatedReactionData;
-    readonly onReactionClick: (reaction: AggregatedReactionData) => void;
+    readonly notification: AggregatedNotificationData;
+    readonly onReactionClick: (notification: AggregatedNotificationData) => void;
 };
 
-export default function Component({ reaction, onReactionClick }: Props)
+export default function Component({ notification, onReactionClick }: Props)
 {
+    const dataUrl = notification.targetReaction?.comic?.image.dataUrl as string;
+
     return <Row alignX='justify' alignY='stretch' gap='medium'>
         <Text value='I like your reaction.' />
-        <ClickArea onClick={() => onReactionClick(reaction)} >
-            <Image source={reaction.comic?.image.dataUrl as string} width='150px' />
+        <ClickArea onClick={() => onReactionClick(notification)} >
+            <Image source={dataUrl} width='150px' />
         </ClickArea>
     </Row>;
 }
diff --git a/src/webui/components/notification/elementary/RatedCommentReaction.tsx b/src/webui/components/notification/elementary/RatedCommentReaction.tsx
index f44c9b5f..1adfa94f 100644
--- a/src/webui/components/notification/elementary/RatedCommentReaction.tsx
+++ b/src/webui/components/notification/elementary/RatedCommentReaction.tsx
@@ -1,20 +1,20 @@
 
 import { Border, ClickArea, Column, Text } from '^/webui/designsystem';
 
-import type { AggregatedData as AggregatedReactionData } from '^/domain/reaction/aggregate';
+import type { AggregatedData as AggregatedNotificationData } from '^/domain/notification/aggregate';
 
 type Props = {
-    readonly reaction: AggregatedReactionData;
-    readonly onReactionClick: (reaction: AggregatedReactionData) => void;
+    readonly notification: AggregatedNotificationData;
+    readonly onReactionClick: (notification: AggregatedNotificationData) => void;
 };
 
-export default function Component({ reaction, onReactionClick }: Props)
+export default function Component({ notification, onReactionClick }: Props)
 {
     return <Column alignX='stretch' alignY='justify' gap='medium'>
         <Text value='I like your reaction.' />
-        <ClickArea onClick={() => onReactionClick(reaction)} >
+        <ClickArea onClick={() => onReactionClick(notification)} >
             <Border size='small' padding='small'>
-                <Text size='small' wrap='normal' value={reaction.comment?.message as string} />
+                <Text size='small' wrap='normal' value={notification.targetReaction?.comment?.message as string} />
             </Border>
         </ClickArea>
     </Column>;
diff --git a/src/webui/components/notification/elementary/RatedPost.tsx b/src/webui/components/notification/elementary/RatedPost.tsx
index a292ee31..0d5a4493 100644
--- a/src/webui/components/notification/elementary/RatedPost.tsx
+++ b/src/webui/components/notification/elementary/RatedPost.tsx
@@ -1,19 +1,21 @@
 
 import { ClickArea, Image, Row, Text } from '^/webui/designsystem';
 
-import type { AggregatedData as AggregatedPostData } from '^/domain/post/aggregate';
+import type { AggregatedData as AggregatedPostData } from '^/domain/notification/aggregate';
 
 type Props = {
-    readonly post: AggregatedPostData;
-    readonly onPostClick: (post: AggregatedPostData) => void;
+    readonly notification: AggregatedPostData;
+    readonly onPostClick: (notification: AggregatedPostData) => void;
 };
 
-export default function Component({ post, onPostClick }: Props)
+export default function Component({ notification, onPostClick }: Props)
 {
+    const dataUrl = notification.targetPost?.comic.image.dataUrl as string;
+
     return <Row gap='medium' alignX='justify'>
         <Text value='I like your comic.' />
-        <ClickArea onClick={() => onPostClick(post)} >
-            <Image source={post.comic.image.dataUrl} width='150px' />
+        <ClickArea onClick={() => onPostClick(notification)} >
+            <Image source={dataUrl} width='150px' />
         </ClickArea>
     </Row>;
 }
diff --git a/src/webui/components/notification/elementary/RatedReaction.tsx b/src/webui/components/notification/elementary/RatedReaction.tsx
index cf1c7d15..0145ed48 100644
--- a/src/webui/components/notification/elementary/RatedReaction.tsx
+++ b/src/webui/components/notification/elementary/RatedReaction.tsx
@@ -1,16 +1,17 @@
 
-import { AggregatedData as AggregatedReactionData } from '^/domain/reaction/aggregate';
+import { AggregatedData as AggregatedReactionData } from '^/domain/notification/aggregate';
+
 import RatedComicReaction from '../elementary/RatedComicReaction';
 import RatedCommentReaction from '../elementary/RatedCommentReaction';
 
 type Props = {
-    readonly reaction: AggregatedReactionData;
-    readonly onReactionClick: (reaction: AggregatedReactionData) => void;
+    readonly notification: AggregatedReactionData;
+    readonly onReactionClick: (notification: AggregatedReactionData) => void;
 };
 
-export default function Component({ reaction, onReactionClick }: Props)
+export default function Component({ notification, onReactionClick }: Props)
 {
-    return reaction.comic !== undefined
-        ? <RatedComicReaction reaction={reaction} onReactionClick={onReactionClick} />
-        : <RatedCommentReaction reaction={reaction} onReactionClick={onReactionClick} />;
+    return notification.targetReaction?.comic !== undefined
+        ? <RatedComicReaction notification={notification} onReactionClick={onReactionClick} />
+        : <RatedCommentReaction notification={notification} onReactionClick={onReactionClick} />;
 }
diff --git a/src/webui/components/post/DetailsPanel.tsx b/src/webui/components/post/DetailsPanel.tsx
index 8af588f8..15395e10 100644
--- a/src/webui/components/post/DetailsPanel.tsx
+++ b/src/webui/components/post/DetailsPanel.tsx
@@ -5,7 +5,7 @@ import type { AggregatedData as AggregatedRelationData } from '^/domain/relation
 import { Column, Panel, Row } from '^/webui/designsystem';
 
 import ComicImage from '../comic/Image';
-import RatingEngagement from '../rating/Engagement';
+import EngagementRow from '../post/elementary/EngagementRow';
 import TimeElapsed from '../relation/TimeElapsed';
 import DeleteButton from './DeleteButton';
 
@@ -15,9 +15,10 @@ type Props = {
     readonly onCreatorClick: (relation: AggregatedRelationData) => void;
     readonly onRatingClick: (post: AggregatedPostData) => Promise<boolean>;
     readonly onDeleteClick: (post: AggregatedPostData) => Promise<void>;
+    readonly onReactionClick: (post: AggregatedPostData) => void;
 };
 
-export default function Component({ post, onFollowClick, onCreatorClick, onRatingClick, onDeleteClick }: Props)
+export default function Component({ post, onFollowClick, onCreatorClick, onRatingClick, onReactionClick, onDeleteClick }: Props)
 {
     return <Panel padding='medium'>
         <Column gap='medium' alignX='stretch'>
@@ -29,10 +30,12 @@ export default function Component({ post, onFollowClick, onCreatorClick, onRatin
             />
             <ComicImage comic={post.comic} />
             <Row alignX='justify'>
-                <RatingEngagement
-                    isEngaged={post.hasRated}
-                    count={post.ratingCount}
-                    onClick={() => onRatingClick(post)}
+                <EngagementRow
+                    isRated={post.hasRated}
+                    ratingCount={post.ratingCount}
+                    reactionCount={post.reactionCount}
+                    onRatingClick={() => onRatingClick(post)}
+                    onReactionClick={() => onReactionClick(post)}
                 />
                 {
                     post.creator.self
diff --git a/src/webui/components/reaction/DetailsPanel.tsx b/src/webui/components/reaction/DetailsPanel.tsx
new file mode 100644
index 00000000..c82d83bc
--- /dev/null
+++ b/src/webui/components/reaction/DetailsPanel.tsx
@@ -0,0 +1,60 @@
+
+import type { AggregatedData as AggregatedReactionData } from '^/domain/reaction/aggregate';
+import type { AggregatedData as AggregatedRelationData } from '^/domain/relation/aggregate';
+
+import { Column, Panel, Row } from '^/webui/designsystem';
+
+import Comment from '^/webui/components/comment/Comment';
+import Image from '../comic/Image';
+import TimeElapsed from '../relation/TimeElapsed';
+import DeleteButton from './DeleteButton';
+import EngagementRow from './elementary/EngagementRow';
+
+type Props = {
+    readonly reaction: AggregatedReactionData;
+    readonly onFollowClick: (relation: AggregatedRelationData) => Promise<void>;
+    readonly onCreatorClick: (relation: AggregatedRelationData) => void;
+    readonly onRatingClick: (reaction: AggregatedReactionData) => Promise<boolean>;
+    readonly onDeleteClick: (reaction: AggregatedReactionData) => Promise<void>;
+    readonly onReactionClick: (reaction: AggregatedReactionData) => void;
+};
+
+export default function Component({ reaction, onFollowClick, onCreatorClick, onRatingClick, onReactionClick, onDeleteClick }: Props)
+{
+    return <Panel padding='medium'>
+        <Column gap='medium' alignX='stretch'>
+            <TimeElapsed
+                date={reaction.createdAt}
+                relation={reaction.creator}
+                onFollowClick={() => onFollowClick(reaction.creator)}
+                onCreatorClick={() => onCreatorClick(reaction.creator)}
+            />
+            {
+                reaction.comic !== undefined
+                    ?
+                    <Image comic={reaction.comic} />
+                    : null
+            }
+            {
+                reaction.comment !== undefined
+                    ?
+                    <Comment text={reaction.comment.message} />
+                    : null
+            }
+            <Row alignX='justify'>
+                <EngagementRow
+                    isRated={reaction.hasRated}
+                    ratingCount={reaction.ratingCount}
+                    reactionCount={reaction.reactionCount}
+                    onRatingClick={() => onRatingClick(reaction)}
+                    onReactionClick={() => onReactionClick(reaction)}
+                />
+                {
+                    reaction.creator.self
+                        ? <DeleteButton onClick={() => onDeleteClick(reaction)} />
+                        : null
+                }
+            </Row>
+        </Column>
+    </Panel>;
+}
diff --git a/src/webui/components/reaction/LargePanel.tsx b/src/webui/components/reaction/LargePanel.tsx
index bff7e6bf..d5ecedf4 100644
--- a/src/webui/components/reaction/LargePanel.tsx
+++ b/src/webui/components/reaction/LargePanel.tsx
@@ -3,12 +3,12 @@ import type { AggregatedData as AggregatedReactionData } from '^/domain/reaction
 import type { AggregatedData as AggregatedRelationData } from '^/domain/relation/aggregate';
 
 import Image from '^/webui/components/comic/Image';
-import { Column, Panel, Row } from '^/webui/designsystem';
+import { ClickArea, Column, Panel, Row } from '^/webui/designsystem';
 
 import Comment from '../comment/Comment';
-import RatingEngagement from '../rating/Engagement';
 import TimeElapsed from '../relation/TimeElapsed';
 import DeleteButton from './DeleteButton';
+import EngagementRow from './elementary/EngagementRow';
 
 type Props = {
     readonly reaction: AggregatedReactionData;
@@ -16,9 +16,10 @@ type Props = {
     readonly onCreatorClick: (relation: AggregatedRelationData) => void;
     readonly onRatingClick: (reaction: AggregatedReactionData) => Promise<boolean>;
     readonly onDeleteClick: (relation: AggregatedReactionData) => Promise<void>;
+    readonly onReactionClick: (reaction: AggregatedReactionData) => void;
 };
 
-export default function Component({ reaction, onFollowClick, onCreatorClick, onRatingClick, onDeleteClick }: Props)
+export default function Component({ reaction, onFollowClick, onCreatorClick, onRatingClick, onDeleteClick, onReactionClick }: Props)
 {
     return <Panel padding='medium'>
         <Column gap='medium' alignX='stretch'>
@@ -30,19 +31,27 @@ export default function Component({ reaction, onFollowClick, onCreatorClick, onR
             />
             {
                 reaction.comment !== undefined
-                    ? <Comment text={reaction.comment.message} />
+                    ?
+                    <ClickArea onClick={() => onReactionClick(reaction)} >
+                        <Comment text={reaction.comment.message} />
+                    </ClickArea>
                     : null
             }
             {
                 reaction.comic !== undefined
-                    ? <Image comic={reaction.comic} />
+                    ?
+                    <ClickArea onClick={() => onReactionClick(reaction)} >
+                        <Image comic={reaction.comic} />
+                    </ClickArea>
                     : null
             }
             <Row alignX='justify'>
-                <RatingEngagement
-                    isEngaged={reaction.hasRated}
-                    count={reaction.ratingCount}
-                    onClick={() => onRatingClick(reaction)}
+                <EngagementRow
+                    isRated={reaction.hasRated}
+                    ratingCount={reaction.ratingCount}
+                    reactionCount={reaction.reactionCount}
+                    onRatingClick={() => onRatingClick(reaction)}
+                    onReactionClick={() => onReactionClick(reaction)}
                 />
                 {
                     reaction.creator.self
diff --git a/src/webui/components/reaction/PanelList.tsx b/src/webui/components/reaction/PanelList.tsx
index e6bf8c4b..8ef3b3e3 100644
--- a/src/webui/components/reaction/PanelList.tsx
+++ b/src/webui/components/reaction/PanelList.tsx
@@ -12,9 +12,10 @@ type Props = {
     readonly onCreatorClick: (relation: AggregatedRelationData) => void;
     readonly onRatingClick: (reaction: AggregatedReactionData) => Promise<boolean>;
     readonly onDeleteClick: (reaction: AggregatedReactionData) => Promise<void>;
+    readonly onReactionClick: (reaction: AggregatedReactionData) => void;
 };
 
-export default function Component({ reactions, onFollowClick, onCreatorClick, onRatingClick, onDeleteClick }: Props)
+export default function Component({ reactions, onFollowClick, onCreatorClick, onRatingClick, onDeleteClick, onReactionClick }: Props)
 {
     return <Column gap='medium' alignX='stretch'>
         {
@@ -26,6 +27,7 @@ export default function Component({ reactions, onFollowClick, onCreatorClick, on
                     onCreatorClick={onCreatorClick}
                     onRatingClick={onRatingClick}
                     onDeleteClick={onDeleteClick}
+                    onReactionClick={onReactionClick}
                 />
             )
         }
diff --git a/src/webui/components/reaction/elementary/EngagementRow.tsx b/src/webui/components/reaction/elementary/EngagementRow.tsx
new file mode 100644
index 00000000..ece2c11a
--- /dev/null
+++ b/src/webui/components/reaction/elementary/EngagementRow.tsx
@@ -0,0 +1,21 @@
+
+import { Row } from '^/webui/designsystem';
+
+import RatingEngagement from '../../rating/Engagement';
+import ReactionEngagement from '../../reaction/Engagement';
+
+type Props = {
+    readonly isRated: boolean;
+    readonly ratingCount: number;
+    readonly reactionCount: number;
+    readonly onRatingClick: () => Promise<boolean>;
+    readonly onReactionClick: () => void;
+};
+
+export default function Component({ isRated, ratingCount, reactionCount, onRatingClick, onReactionClick }: Props)
+{
+    return <Row gap='medium' alignY='center'>
+        <RatingEngagement isEngaged={isRated} count={ratingCount} onClick={onRatingClick} />
+        <ReactionEngagement reactionCount={reactionCount} onClick={onReactionClick} />
+    </Row>;
+}
diff --git a/src/webui/features/CreateReaction.tsx b/src/webui/features/CreatePostReaction.tsx
similarity index 76%
rename from src/webui/features/CreateReaction.tsx
rename to src/webui/features/CreatePostReaction.tsx
index f62f78ac..53970235 100644
--- a/src/webui/features/CreateReaction.tsx
+++ b/src/webui/features/CreatePostReaction.tsx
@@ -5,8 +5,8 @@ import type { AggregatedData as AggregatedReactionData } from '^/domain/reaction
 import { ComicEditor, CommentForm } from '^/webui/components';
 import { Ruler, Tab, Tabs } from '^/webui/designsystem';
 
-import useCreateComicReaction from './hooks/useCreateComicReaction';
-import useCreateCommentReaction from './hooks/useCreateCommentReaction';
+import useCreatePostComicReaction from './hooks/useCreatePostComicReaction';
+import useCreatePostCommentReaction from './hooks/useCreatePostCommentReaction';
 
 type Props = {
     readonly post: AggregatedPostData;
@@ -17,8 +17,8 @@ const MESSAGE_MAX_LENGTH = 1000;
 
 export default function Feature({ post, handleDone }: Props)
 {
-    const createComicReaction = useCreateComicReaction(post, handleDone);
-    const createCommentReaction = useCreateCommentReaction(post, handleDone);
+    const createComicReaction = useCreatePostComicReaction(post, handleDone);
+    const createCommentReaction = useCreatePostCommentReaction(post, handleDone);
 
     return <Tabs separator={<Ruler direction='horizontal' size='small' />}>
         <Tab id='comic' title='Comic'>
diff --git a/src/webui/features/CreateReactionReaction.tsx b/src/webui/features/CreateReactionReaction.tsx
new file mode 100644
index 00000000..e635f7db
--- /dev/null
+++ b/src/webui/features/CreateReactionReaction.tsx
@@ -0,0 +1,31 @@
+
+import type { AggregatedData as AggregatedReactionData } from '^/domain/reaction/aggregate';
+
+import { ComicEditor, CommentForm } from '^/webui/components';
+import { Ruler, Tab, Tabs } from '^/webui/designsystem';
+
+import useCreateComicReaction from './hooks/useCreateReactionComicReaction';
+import useCreateCommentReaction from './hooks/useCreateReactionCommentReaction';
+
+type Props = {
+    readonly reaction: AggregatedReactionData;
+    readonly handleDone: (reaction?: AggregatedReactionData) => void;
+};
+
+
+const MESSAGE_MAX_LENGTH = 1000;
+
+export default function Feature({ reaction, handleDone }: Props)
+{
+    const createComicReaction = useCreateComicReaction(reaction, handleDone);
+    const createCommentReaction = useCreateCommentReaction(reaction, handleDone);
+
+    return <Tabs separator={<Ruler direction='horizontal' size='small' />}>
+        <Tab id='comic' title='Comic'>
+            <ComicEditor onCreate={createComicReaction} onCancel={() => handleDone(undefined)} />
+        </Tab>
+        <Tab id='comment' title='Comment'>
+            <CommentForm limit={MESSAGE_MAX_LENGTH} onCreate={createCommentReaction} onCancel={() => handleDone(undefined)} />
+        </Tab>
+    </Tabs>;
+}
diff --git a/src/webui/features/Notifications.tsx b/src/webui/features/Notifications.tsx
index f58e8f4a..c9b3b919 100644
--- a/src/webui/features/Notifications.tsx
+++ b/src/webui/features/Notifications.tsx
@@ -6,9 +6,8 @@ import { Column } from '^/webui/designsystem';
 
 import useEstablishRelation from './hooks/useEstablishRelation';
 import useNotifications from './hooks/useNotifications';
-import useViewPostDetails from './hooks/useViewPostDetails';
+import useViewNotificationDetails from './hooks/useViewNotificationDetails';
 import useViewProfile from './hooks/useViewProfile';
-import useViewReactionDetails from './hooks/useViewReactionDetails';
 
 const SCROLL_THRESHOLD = 0.7;
 
@@ -16,8 +15,7 @@ export default function Feature()
 {
     const establishRelation = useEstablishRelation();
     const viewProfile = useViewProfile();
-    const viewReactionDetails = useViewReactionDetails();
-    const viewPostDetails = useViewPostDetails();
+    const viewNotification = useViewNotificationDetails();
 
     const [notifications, isLoading, isFinished, getMoreNotifications, , refresh] = useNotifications();
 
@@ -29,8 +27,7 @@ export default function Feature()
                         notifications={notifications as AggregatedNotificationData[]}
                         onFollowClick={establishRelation}
                         onCreatorClick={viewProfile}
-                        onReactionClick={viewReactionDetails}
-                        onPostClick={viewPostDetails}
+                        onNotificationClick={viewNotification}
                     />
                 </ResultSet>
             </ScrollLoader>
diff --git a/src/webui/features/PostDetails.tsx b/src/webui/features/PostDetails.tsx
index 7aec153b..511ec5df 100644
--- a/src/webui/features/PostDetails.tsx
+++ b/src/webui/features/PostDetails.tsx
@@ -11,9 +11,10 @@ import useEstablishRelation from './hooks/useEstablishRelation';
 import usePost from './hooks/usePost';
 import useRemovePost from './hooks/useRemovePost';
 import useTogglePostRating from './hooks/useTogglePostRating';
+import useViewPostDetails from './hooks/useViewPostDetails';
 import useViewProfile from './hooks/useViewProfile';
 
-import Reactions from './Reactions';
+import PostReactions from './PostReactions';
 
 export default function Feature()
 {
@@ -23,6 +24,7 @@ export default function Feature()
     const togglePostRating = useTogglePostRating();
     const viewProfile = useViewProfile();
     const removePost = useRemovePost();
+    const viewPostDetails = useViewPostDetails();
 
     const [post] = usePost();
 
@@ -44,10 +46,11 @@ export default function Feature()
                 onFollowClick={establishRelation}
                 onRatingClick={togglePostRating}
                 onCreatorClick={viewProfile}
+                onReactionClick={viewPostDetails}
                 onDeleteClick={deletePost}
             />
             <Ruler direction='horizontal' />
-            <Reactions post={post as AggregatedPostData} />
+            <PostReactions post={post as AggregatedPostData} />
         </LoadingContainer>
     </Column>;
 }
diff --git a/src/webui/features/PostHighlight.tsx b/src/webui/features/PostHighlight.tsx
new file mode 100644
index 00000000..57ed2575
--- /dev/null
+++ b/src/webui/features/PostHighlight.tsx
@@ -0,0 +1,85 @@
+
+import { useCallback } from 'react';
+
+import type { AggregatedData as AggregatedPostData } from '^/domain/post/aggregate';
+import type { AggregatedData as AggregatedReactionData } from '^/domain/reaction/aggregate';
+
+import { ConfirmationPanel, LoadingContainer, PostDetailsPanel, ReactionLargePanel, SingleReactionRow } from '../components';
+import { useAppContext } from '../contexts';
+import { Column, Ruler } from '../designsystem';
+
+import useEstablishRelation from './hooks/useEstablishRelation';
+import useHighlightReaction from './hooks/useHighlight';
+import usePost from './hooks/usePost';
+import useRemovePost from './hooks/useRemovePost';
+import useRemoveReaction from './hooks/useRemoveReaction';
+import useTogglePostRating from './hooks/useTogglePostRating';
+import useToggleReactionRating from './hooks/useToggleReactionRating';
+import useViewPostDetails from './hooks/useViewPostDetails';
+import useViewProfile from './hooks/useViewProfile';
+import useViewReactionDetails from './hooks/useViewReactionDetails';
+
+export default function Feature()
+{
+    const { showModal, closeModal } = useAppContext();
+
+    const establishRelation = useEstablishRelation();
+    const togglePostRating = useTogglePostRating();
+    const toggleReactionRating = useToggleReactionRating();
+    const viewProfile = useViewProfile();
+    const removePost = useRemovePost();
+    const removeHighlight = useRemoveReaction();
+    const viewPostDetails = useViewPostDetails();
+    const viewReactionDetails = useViewReactionDetails();
+
+    const [post] = usePost();
+    const [highlight] = useHighlightReaction();
+
+    const deletePost = useCallback(async (post: AggregatedPostData) =>
+    {
+        const panel = <ConfirmationPanel
+            message='Are you sure you want to delete this post?'
+            onConfirm={() => { closeModal(); removePost(post); }}
+            onCancel={() => closeModal()} />;
+
+        showModal(panel);
+
+    }, [showModal, closeModal, removePost]);
+
+    const deleteHighlight = useCallback(async (highlight: AggregatedReactionData) =>
+    {
+        const panel = <ConfirmationPanel
+            message='Are you sure you want to delete this reaction?'
+            onConfirm={() => { closeModal(); removeHighlight(highlight); }}
+            onCancel={() => closeModal()} />;
+
+        showModal(panel);
+
+    }, [showModal, closeModal, removeHighlight]);
+
+    return <Column gap='medium' alignX='stretch'>
+        <LoadingContainer data={post}>
+            <PostDetailsPanel
+                post={post as AggregatedPostData}
+                onFollowClick={establishRelation}
+                onRatingClick={togglePostRating}
+                onCreatorClick={viewProfile}
+                onDeleteClick={deletePost}
+                onReactionClick={viewPostDetails}
+            />
+        </LoadingContainer>
+        <Ruler direction='horizontal' />
+        <SingleReactionRow onShowClick={() => viewPostDetails(post as AggregatedPostData)} />
+        <LoadingContainer data={(highlight)}>
+            <ReactionLargePanel
+                key={highlight?.id}
+                reaction={highlight as AggregatedReactionData}
+                onFollowClick={establishRelation}
+                onCreatorClick={viewProfile}
+                onRatingClick={toggleReactionRating}
+                onDeleteClick={deleteHighlight}
+                onReactionClick={viewReactionDetails}
+            />
+        </LoadingContainer>
+    </Column>;
+}
diff --git a/src/webui/features/Reactions.tsx b/src/webui/features/PostReactions.tsx
similarity index 89%
rename from src/webui/features/Reactions.tsx
rename to src/webui/features/PostReactions.tsx
index b0b522e5..26785638 100644
--- a/src/webui/features/Reactions.tsx
+++ b/src/webui/features/PostReactions.tsx
@@ -9,12 +9,13 @@ import { useAppContext } from '^/webui/contexts';
 import { Column } from '^/webui/designsystem';
 
 import useEstablishRelation from './hooks/useEstablishRelation';
-import useReactions from './hooks/useReactions';
+import useReactions from './hooks/usePostReactions';
 import useRemoveReactionFromList from './hooks/useRemoveReactionFromList';
 import useToggleReactionRating from './hooks/useToggleReactionRating';
 import useViewProfile from './hooks/useViewProfile';
+import useViewReactionDetails from './hooks/useViewReactionDetails';
 
-import CreateReaction from './CreateReaction';
+import CreatePostReaction from './CreatePostReaction';
 
 type Props = {
     readonly post: AggregatedPostData;
@@ -28,6 +29,7 @@ export default function Feature({ post }: Props)
 
     const establishRelation = useEstablishRelation();
     const viewProfile = useViewProfile();
+    const viewReactionDetails = useViewReactionDetails();
     const toggleReactionRating = useToggleReactionRating();
 
     const [reactions, isLoading, isFinished, getMoreReactions, setReactions, refresh] = useReactions(post);
@@ -46,7 +48,7 @@ export default function Feature({ post }: Props)
 
     const createReaction = useCallback(() =>
     {
-        const content = <CreateReaction
+        const content = <CreatePostReaction
             post={post}
             handleDone={(reaction?: AggregatedReactionData) => { closeModal(); addReaction(reaction); }}
         />;
@@ -77,6 +79,7 @@ export default function Feature({ post }: Props)
                         onCreatorClick={viewProfile}
                         onRatingClick={toggleReactionRating}
                         onDeleteClick={deleteReaction}
+                        onReactionClick={viewReactionDetails}
                     />
                 </ResultSet>
             </ScrollLoader>
diff --git a/src/webui/features/ReactionDetails.tsx b/src/webui/features/ReactionDetails.tsx
index d6e51a71..f0655346 100644
--- a/src/webui/features/ReactionDetails.tsx
+++ b/src/webui/features/ReactionDetails.tsx
@@ -1,49 +1,36 @@
 
 import { useCallback } from 'react';
 
-import type { AggregatedData as AggregatedPostData } from '^/domain/post/aggregate';
 import type { AggregatedData as AggregatedReactionData } from '^/domain/reaction/aggregate';
 
-import { ConfirmationPanel, LoadingContainer, PostDetailsPanel, ReactionLargePanel, SingleReactionRow } from '../components';
-import { useAppContext } from '../contexts';
-import { Column, Ruler } from '../designsystem';
+import { ConfirmationPanel, LoadingContainer, ReactionDetailsPanel } from '^/webui/components';
+import { useAppContext } from '^/webui/contexts';
+import { Column, Ruler } from '^/webui/designsystem';
 
 import useEstablishRelation from './hooks/useEstablishRelation';
-import usePost from './hooks/usePost';
+import useGoBack from './hooks/useGoBack';
 import useReaction from './hooks/useReaction';
-import useRemovePost from './hooks/useRemovePost';
 import useRemoveReaction from './hooks/useRemoveReaction';
-import useTogglePostRating from './hooks/useTogglePostRating';
 import useToggleReactionRating from './hooks/useToggleReactionRating';
-import useViewPostDetails from './hooks/useViewPostDetails';
 import useViewProfile from './hooks/useViewProfile';
+import useViewReactionDetails from './hooks/useViewReactionDetails';
+
+import BackRow from '../components/common/BackRow';
+import ReactionReactions from './ReactionReactions';
 
 export default function Feature()
 {
     const { showModal, closeModal } = useAppContext();
 
     const establishRelation = useEstablishRelation();
-    const togglePostRating = useTogglePostRating();
     const toggleReactionRating = useToggleReactionRating();
     const viewProfile = useViewProfile();
-    const removePost = useRemovePost();
+    const viewReactionDetails = useViewReactionDetails();
     const removeReaction = useRemoveReaction();
-    const viewPostDetails = useViewPostDetails();
+    const goBack = useGoBack();
 
-    const [post] = usePost();
     const [reaction] = useReaction();
 
-    const deletePost = useCallback(async (post: AggregatedPostData) =>
-    {
-        const panel = <ConfirmationPanel
-            message='Are you sure you want to delete this post?'
-            onConfirm={() => { closeModal(); removePost(post); }}
-            onCancel={() => closeModal()} />;
-
-        showModal(panel);
-
-    }, [showModal, closeModal, removePost]);
-
     const deleteReaction = useCallback(async (reaction: AggregatedReactionData) =>
     {
         const panel = <ConfirmationPanel
@@ -56,26 +43,18 @@ export default function Feature()
     }, [showModal, closeModal, removeReaction]);
 
     return <Column gap='medium' alignX='stretch'>
-        <LoadingContainer data={post}>
-            <PostDetailsPanel
-                post={post as AggregatedPostData}
-                onFollowClick={establishRelation}
-                onRatingClick={togglePostRating}
-                onCreatorClick={viewProfile}
-                onDeleteClick={deletePost}
-            />
-        </LoadingContainer>
-        <Ruler direction='horizontal' />
-        <SingleReactionRow onShowClick={() => viewPostDetails(post as AggregatedPostData)} />
-        <LoadingContainer data={(reaction)}>
-            <ReactionLargePanel
-                key={reaction?.id}
+        <BackRow onClick={() => goBack(reaction as AggregatedReactionData)} />
+        <LoadingContainer data={reaction}>
+            <ReactionDetailsPanel
                 reaction={reaction as AggregatedReactionData}
                 onFollowClick={establishRelation}
-                onCreatorClick={viewProfile}
                 onRatingClick={toggleReactionRating}
+                onCreatorClick={viewProfile}
+                onReactionClick={viewReactionDetails}
                 onDeleteClick={deleteReaction}
             />
+            <Ruler direction='horizontal' />
+            <ReactionReactions reaction={reaction as AggregatedReactionData} />
         </LoadingContainer>
     </Column>;
 }
diff --git a/src/webui/features/ReactionHighlight.tsx b/src/webui/features/ReactionHighlight.tsx
new file mode 100644
index 00000000..ac39279a
--- /dev/null
+++ b/src/webui/features/ReactionHighlight.tsx
@@ -0,0 +1,79 @@
+
+import { useCallback } from 'react';
+
+import type { AggregatedData as AggregatedReactionData } from '^/domain/reaction/aggregate';
+
+import { ConfirmationPanel, LoadingContainer, ReactionDetailsPanel, ReactionLargePanel, SingleReactionRow } from '../components';
+import { useAppContext } from '../contexts';
+import { Column, Ruler } from '../designsystem';
+
+import useEstablishRelation from './hooks/useEstablishRelation';
+import useHighlight from './hooks/useHighlight';
+import useReaction from './hooks/useReaction';
+import useRemoveReaction from './hooks/useRemoveReaction';
+import useToggleReactionRating from './hooks/useToggleReactionRating';
+import useViewProfile from './hooks/useViewProfile';
+import useViewReactionDetails from './hooks/useViewReactionDetails';
+
+export default function Feature()
+{
+    const { showModal, closeModal } = useAppContext();
+
+    const establishRelation = useEstablishRelation();
+    const toggleReactionRating = useToggleReactionRating();
+    const viewProfile = useViewProfile();
+    const removeReaction = useRemoveReaction();
+    const removeHighlight = useRemoveReaction();
+    const viewReactionDetails = useViewReactionDetails();
+
+    const [reaction] = useReaction();
+    const [highlight] = useHighlight();
+
+    const deleteReaction = useCallback(async (reaction: AggregatedReactionData) =>
+    {
+        const panel = <ConfirmationPanel
+            message='Are you sure you want to delete this reaction?'
+            onConfirm={() => { closeModal(); removeReaction(reaction); }}
+            onCancel={() => closeModal()} />;
+
+        showModal(panel);
+
+    }, [showModal, closeModal, removeReaction]);
+
+    const deleteHighlight = useCallback(async (highlight: AggregatedReactionData) =>
+    {
+        const panel = <ConfirmationPanel
+            message='Are you sure you want to delete this reaction?'
+            onConfirm={() => { closeModal(); removeHighlight(highlight); }}
+            onCancel={() => closeModal()} />;
+
+        showModal(panel);
+
+    }, [showModal, closeModal, removeHighlight]);
+
+    return <Column gap='medium' alignX='stretch'>
+        <LoadingContainer data={reaction}>
+            <ReactionDetailsPanel
+                reaction={reaction as AggregatedReactionData}
+                onFollowClick={establishRelation}
+                onRatingClick={toggleReactionRating}
+                onCreatorClick={viewProfile}
+                onDeleteClick={deleteReaction}
+                onReactionClick={viewReactionDetails}
+            />
+        </LoadingContainer>
+        <Ruler direction='horizontal' />
+        <SingleReactionRow onShowClick={() => viewReactionDetails(reaction as AggregatedReactionData)} />
+        <LoadingContainer data={(highlight)}>
+            <ReactionLargePanel
+                key={highlight?.id}
+                reaction={highlight as AggregatedReactionData}
+                onFollowClick={establishRelation}
+                onCreatorClick={viewProfile}
+                onRatingClick={toggleReactionRating}
+                onDeleteClick={deleteHighlight}
+                onReactionClick={viewReactionDetails}
+            />
+        </LoadingContainer>
+    </Column>;
+}
diff --git a/src/webui/features/ReactionReactions.tsx b/src/webui/features/ReactionReactions.tsx
new file mode 100644
index 00000000..e44af3c1
--- /dev/null
+++ b/src/webui/features/ReactionReactions.tsx
@@ -0,0 +1,87 @@
+
+import { useCallback } from 'react';
+
+import type { AggregatedData as AggregatedReactionData } from '^/domain/reaction/aggregate';
+
+import { ConfirmationPanel, OrderAndAddRow, PullToRefresh, ReactionPanelList, ResultSet, ScrollLoader } from '^/webui/components';
+import { useAppContext } from '^/webui/contexts';
+import { Column } from '^/webui/designsystem';
+
+import useEstablishRelation from './hooks/useEstablishRelation';
+import useReactions from './hooks/useReactionReactions';
+import useRemoveReactionFromList from './hooks/useRemoveReactionFromList';
+import useToggleReactionRating from './hooks/useToggleReactionRating';
+import useViewProfile from './hooks/useViewProfile';
+import useViewReactionDetails from './hooks/useViewReactionDetails';
+
+import CreateReactionReaction from './CreateReactionReaction';
+
+type Props = {
+    readonly reaction: AggregatedReactionData;
+};
+
+const SCROLL_THRESHOLD = 0.8;
+
+export default function Feature({ reaction }: Props)
+{
+    const { showModal, closeModal } = useAppContext();
+
+    const establishRelation = useEstablishRelation();
+    const viewProfile = useViewProfile();
+    const viewReactionDetails = useViewReactionDetails();
+    const toggleReactionRating = useToggleReactionRating();
+
+    const [reactions, isLoading, isFinished, getMoreReactions, setReactions, refresh] = useReactions(reaction);
+
+    const removeReaction = useRemoveReactionFromList(reactions as AggregatedReactionData[], setReactions);
+
+    const addReaction = useCallback((reaction?: AggregatedReactionData) =>
+    {
+        if (reaction === undefined) return;
+
+        const result = [reaction, ...reactions as AggregatedReactionData[]];
+
+        setReactions(result);
+
+    }, [reactions, setReactions]);
+
+    const createReaction = useCallback(() =>
+    {
+        const content = <CreateReactionReaction
+            reaction={reaction}
+            handleDone={(reaction?: AggregatedReactionData) => { closeModal(); addReaction(reaction); }}
+        />;
+
+        showModal(content);
+
+    }, [addReaction, closeModal, reaction, showModal]);
+
+    const deleteReaction = useCallback(async (reaction: AggregatedReactionData) =>
+    {
+        const panel = <ConfirmationPanel
+            message='Are you sure you want to delete this reaction?'
+            onConfirm={() => { closeModal(); removeReaction(reaction); }}
+            onCancel={() => closeModal()} />;
+
+        showModal(panel);
+
+    }, [showModal, closeModal, removeReaction]);
+
+    return <Column alignX='stretch'>
+        <OrderAndAddRow selected='recent' reactionHandler={createReaction} />
+        <PullToRefresh onRefresh={refresh}>
+            <ScrollLoader onLoad={getMoreReactions} isLoading={isLoading} isFinished={isFinished} threshold={SCROLL_THRESHOLD}>
+                <ResultSet data={reactions} isLoading={isLoading}>
+                    <ReactionPanelList
+                        reactions={reactions as AggregatedReactionData[]}
+                        onFollowClick={establishRelation}
+                        onCreatorClick={viewProfile}
+                        onRatingClick={toggleReactionRating}
+                        onDeleteClick={deleteReaction}
+                        onReactionClick={viewReactionDetails}
+                    />
+                </ResultSet>
+            </ScrollLoader>
+        </PullToRefresh>
+    </Column>;
+}
diff --git a/src/webui/features/hooks/useCreateComicReaction.ts b/src/webui/features/hooks/useCreatePostComicReaction.ts
similarity index 80%
rename from src/webui/features/hooks/useCreateComicReaction.ts
rename to src/webui/features/hooks/useCreatePostComicReaction.ts
index 9ec9fa94..b8904059 100644
--- a/src/webui/features/hooks/useCreateComicReaction.ts
+++ b/src/webui/features/hooks/useCreatePostComicReaction.ts
@@ -7,11 +7,11 @@ import type { AggregatedData as AggregatedReactionData } from '^/domain/reaction
 import createComicReaction from '^/domain/reaction/createWithComic';
 import getReaction from '^/domain/reaction/getByIdAggregated';
 
-export default function useCreateComicReaction(post: AggregatedPostData, handleDone: (reaction?: AggregatedReactionData) => void)
+export default function useCreatePostComicReaction(post: AggregatedPostData, handleDone: (reaction?: AggregatedReactionData) => void)
 {
     return useCallback(async (imageData: string) =>
     {
-        const reactionId = await createComicReaction(requester, post.id, imageData);
+        const reactionId = await createComicReaction(requester, imageData, post.id);
         const reaction = await getReaction(requester, reactionId);
 
         handleDone(reaction);
diff --git a/src/webui/features/hooks/useCreateCommentReaction.ts b/src/webui/features/hooks/useCreatePostCommentReaction.ts
similarity index 90%
rename from src/webui/features/hooks/useCreateCommentReaction.ts
rename to src/webui/features/hooks/useCreatePostCommentReaction.ts
index b7e5a5b3..5fa221e4 100644
--- a/src/webui/features/hooks/useCreateCommentReaction.ts
+++ b/src/webui/features/hooks/useCreatePostCommentReaction.ts
@@ -9,9 +9,9 @@ import getReaction from '^/domain/reaction/getByIdAggregated';
 
 export default function useCreateCommentReaction(post: AggregatedPostData, handleDone: (reaction?: AggregatedReactionData) => void)
 {
-    return useCallback(async (imageData: string) =>
+    return useCallback(async (comment: string) =>
     {
-        const reactionId = await createCommentReaction(requester, post.id, imageData);
+        const reactionId = await createCommentReaction(requester, comment, post.id);
         const reaction = await getReaction(requester, reactionId);
 
         handleDone(reaction);
diff --git a/src/webui/features/hooks/useCreateReactionComicReaction.ts b/src/webui/features/hooks/useCreateReactionComicReaction.ts
new file mode 100644
index 00000000..e2a818f0
--- /dev/null
+++ b/src/webui/features/hooks/useCreateReactionComicReaction.ts
@@ -0,0 +1,19 @@
+
+import { useCallback } from 'react';
+
+import requester from '^/domain/authentication/requester';
+import type { AggregatedData as AggregatedReactionData } from '^/domain/reaction/aggregate';
+import createComicReaction from '^/domain/reaction/createWithComic';
+import getReaction from '^/domain/reaction/getByIdAggregated';
+
+export default function useCreateReactionComicReaction(sourceReaction: AggregatedReactionData, handleDone: (reaction?: AggregatedReactionData) => void)
+{
+    return useCallback(async (imageData: string) =>
+    {
+        const targetReactionId = await createComicReaction(requester, imageData, undefined, sourceReaction.id);
+        const reaction = await getReaction(requester, targetReactionId);
+
+        handleDone(reaction);
+
+    }, [sourceReaction, handleDone]);
+}
diff --git a/src/webui/features/hooks/useCreateReactionCommentReaction.ts b/src/webui/features/hooks/useCreateReactionCommentReaction.ts
new file mode 100644
index 00000000..823b2fa4
--- /dev/null
+++ b/src/webui/features/hooks/useCreateReactionCommentReaction.ts
@@ -0,0 +1,19 @@
+
+import { useCallback } from 'react';
+
+import requester from '^/domain/authentication/requester';
+import type { AggregatedData as AggregatedReactionData } from '^/domain/reaction/aggregate';
+import createCommentReaction from '^/domain/reaction/createWithComment';
+import getReaction from '^/domain/reaction/getByIdAggregated';
+
+export default function useCreateCommentReaction(sourceReaction: AggregatedReactionData, handleDone: (reaction?: AggregatedReactionData) => void)
+{
+    return useCallback(async (comment: string) =>
+    {
+        const targetReactionId = await createCommentReaction(requester, comment, undefined, sourceReaction.id);
+        const reaction = await getReaction(requester, targetReactionId);
+
+        handleDone(reaction);
+
+    }, [sourceReaction, handleDone]);
+}
diff --git a/src/webui/features/hooks/useGoBack.ts b/src/webui/features/hooks/useGoBack.ts
new file mode 100644
index 00000000..6df8e3ae
--- /dev/null
+++ b/src/webui/features/hooks/useGoBack.ts
@@ -0,0 +1,24 @@
+
+import { useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import type { AggregatedData as AggregatedReactionData } from '^/domain/reaction/aggregate';
+
+export default function useGoBack()
+{
+    const navigate = useNavigate();
+
+    return useCallback((reaction: AggregatedReactionData) =>
+    {
+        if (reaction.postId !== undefined)
+        {
+            navigate(`/post/${reaction.postId}`);
+        }
+        else
+        {
+            navigate(`/reaction/${reaction.reactionId}`);
+        }
+
+
+    }, [navigate]);
+}
diff --git a/src/webui/features/hooks/useHighlight.ts b/src/webui/features/hooks/useHighlight.ts
new file mode 100644
index 00000000..edbbc23f
--- /dev/null
+++ b/src/webui/features/hooks/useHighlight.ts
@@ -0,0 +1,22 @@
+
+import { useCallback } from 'react';
+import { useParams } from 'react-router-dom';
+
+import requester from '^/domain/authentication/requester';
+import get from '^/domain/reaction/getByIdAggregated';
+
+import { useLoadData } from '^/webui/hooks';
+
+export default function useReaction()
+{
+    const { highlightId } = useParams();
+
+    const getReaction = useCallback(async () =>
+    {
+        return highlightId !== undefined
+            ? get(requester, highlightId)
+            : undefined;
+    }, [highlightId]);
+
+    return useLoadData(getReaction, [highlightId]);
+}
diff --git a/src/webui/features/hooks/useReactions.ts b/src/webui/features/hooks/usePostReactions.ts
similarity index 88%
rename from src/webui/features/hooks/useReactions.ts
rename to src/webui/features/hooks/usePostReactions.ts
index d6430c56..2e318693 100644
--- a/src/webui/features/hooks/useReactions.ts
+++ b/src/webui/features/hooks/usePostReactions.ts
@@ -7,7 +7,7 @@ import getReactionsByPost from '^/domain/reaction/getByPostAggregated';
 
 import { usePagination } from '^/webui/hooks';
 
-export default function useReactions(post: AggregatedPostData)
+export default function usePostReactions(post: AggregatedPostData)
 {
     const limit = 15;
 
diff --git a/src/webui/features/hooks/useReactionReactions.ts b/src/webui/features/hooks/useReactionReactions.ts
new file mode 100644
index 00000000..2350fcbb
--- /dev/null
+++ b/src/webui/features/hooks/useReactionReactions.ts
@@ -0,0 +1,21 @@
+
+import { useCallback } from 'react';
+
+import requester from '^/domain/authentication/requester';
+import type { AggregatedData as AggregatedReactionData } from '^/domain/reaction/aggregate';
+import getReactionsByReaction from '^/domain/reaction/getByReactionAggregated';
+
+import { usePagination } from '^/webui/hooks';
+
+export default function useReactionReactions(reaction: AggregatedReactionData)
+{
+    const limit = 15;
+
+    const getData = useCallback((page: number) =>
+    {
+        return getReactionsByReaction(requester, reaction.id, { limit, offset: page * limit });
+
+    }, [reaction]);
+
+    return usePagination(getData, limit, [reaction]);
+}
diff --git a/src/webui/features/hooks/useViewNotificationDetails.ts b/src/webui/features/hooks/useViewNotificationDetails.ts
new file mode 100644
index 00000000..59d20d39
--- /dev/null
+++ b/src/webui/features/hooks/useViewNotificationDetails.ts
@@ -0,0 +1,23 @@
+
+import { useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import type { AggregatedData as NotificationView } from '^/domain/notification/aggregate/types';
+
+export default function useViewNotificationDetails()
+{
+    const navigate = useNavigate();
+
+    return useCallback((notification: NotificationView) =>
+    {
+
+        switch (notification.type)
+        {
+            case 'added-reaction-reaction': return navigate(`/reaction/${notification.targetReaction?.id}/highlight/${notification.sourceReaction?.id}`);
+            case 'rated-reaction': return navigate(`/reaction/${notification.targetReaction?.id}`);
+            case 'added-reaction-post': return navigate(`/post/${notification.targetPost?.id}/highlight/${notification.sourceReaction?.id}`);
+            case 'rated-post': return navigate(`/post/${notification.targetPost?.id}`);
+        }
+
+    }, [navigate]);
+}
diff --git a/src/webui/features/hooks/useViewPostHighlightDetails.ts b/src/webui/features/hooks/useViewPostHighlightDetails.ts
new file mode 100644
index 00000000..5e42fb17
--- /dev/null
+++ b/src/webui/features/hooks/useViewPostHighlightDetails.ts
@@ -0,0 +1,16 @@
+
+import { useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import type { AggregatedData as NotificationView } from '^/domain/notification/aggregate/types';
+
+export default function useViewPostHighlightDetails()
+{
+    const navigate = useNavigate();
+
+    return useCallback((notification: NotificationView) =>
+    {
+        navigate(`/post/${notification.targetPost?.id}/highlight/${notification.sourceReaction?.id}`);
+
+    }, [navigate]);
+}
diff --git a/src/webui/features/hooks/useViewReactionDetails.ts b/src/webui/features/hooks/useViewReactionDetails.ts
index f50cff91..e0a928ef 100644
--- a/src/webui/features/hooks/useViewReactionDetails.ts
+++ b/src/webui/features/hooks/useViewReactionDetails.ts
@@ -10,7 +10,7 @@ export default function useViewReactionDetails()
 
     return useCallback((reaction: AggregatedReactionData) =>
     {
-        navigate(`/post/${reaction.postId}/reaction/${reaction.id}`);
+        navigate(`/reaction/${reaction.id}`);
 
     }, [navigate]);
 }
diff --git a/src/webui/features/hooks/useViewReactionHighlightDetails.ts b/src/webui/features/hooks/useViewReactionHighlightDetails.ts
new file mode 100644
index 00000000..b6479d24
--- /dev/null
+++ b/src/webui/features/hooks/useViewReactionHighlightDetails.ts
@@ -0,0 +1,16 @@
+
+import { useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import type { AggregatedData as NotificationView } from '^/domain/notification/aggregate/types';
+
+export default function useViewReactionHighlightDetails()
+{
+    const navigate = useNavigate();
+
+    return useCallback((notification: NotificationView) =>
+    {
+        navigate(`/reaction/${notification.targetReaction?.reactionId}/highlight/${notification.sourceReaction?.id}`);
+
+    }, [navigate]);
+}
diff --git a/test/domain/notification/create.spec.ts b/test/domain/notification/create.spec.ts
index d1bf4afe..f1df06b2 100644
--- a/test/domain/notification/create.spec.ts
+++ b/test/domain/notification/create.spec.ts
@@ -1,11 +1,11 @@
 
 import { beforeEach, describe, expect, it } from 'vitest';
 
-import { RECORD_TYPE as NOTIFICATION_RECORD_TYPE, Types } from '^/domain/notification';
-import create from '^/domain/notification/create';
-
 import database from '^/integrations/database';
 
+import { DataModel, RECORD_TYPE as NOTIFICATION_RECORD_TYPE, Types } from '^/domain/notification';
+import create from '^/domain/notification/create';
+
 import { DATABASES } from './fixtures/databases.fixture';
 import { REQUESTERS } from './fixtures/requesters.fixture';
 import { VALUES } from './fixtures/values.fixture';
@@ -22,7 +22,7 @@ describe('domain/notification/create', () =>
     {
         await create(Types.RATED_POST, VALUES.IDS.CREATOR1, VALUES.IDS.CREATOR2, VALUES.IDS.POST_RATED);
 
-        const notifications = await database.searchRecords(NOTIFICATION_RECORD_TYPE, {});
+        const notifications = await database.searchRecords(NOTIFICATION_RECORD_TYPE, {}) as DataModel[];
         expect(notifications).toHaveLength(1);
 
         const notification = notifications[0];
@@ -30,8 +30,8 @@ describe('domain/notification/create', () =>
         expect(notification.createdAt).toBeDefined();
         expect(notification.senderId).toBe(REQUESTERS.CREATOR1.id);
         expect(notification.receiverId).toBe(VALUES.IDS.CREATOR2);
-        expect(notification?.postId).toBe(VALUES.IDS.POST_RATED);
-        expect(notification?.reactionId).toBe(undefined);
+        expect(notification?.targetPostId).toBe(VALUES.IDS.POST_RATED);
+        expect(notification?.targetReactionId).toBe(undefined);
     });
 
     it('should create a notification by liking a comic reaction', async () =>
@@ -46,8 +46,8 @@ describe('domain/notification/create', () =>
         expect(notification.createdAt).toBeDefined();
         expect(notification.senderId).toBe(REQUESTERS.CREATOR1.id);
         expect(notification.receiverId).toBe(VALUES.IDS.CREATOR2);
-        expect(notification?.postId).toBe(undefined);
-        expect(notification.reactionId).toBe(VALUES.IDS.REACTION_LIKED);
+        expect(notification?.targetPostId).toBe(undefined);
+        expect(notification.targetReactionId).toBe(VALUES.IDS.REACTION_LIKED);
     });
 
     it('should create a notification when someone gets followed', async () =>
@@ -66,16 +66,36 @@ describe('domain/notification/create', () =>
 
     it('should create a notification when a reaction is added to a post', async () =>
     {
-        await create(Types.ADDED_REACTION, VALUES.IDS.CREATOR1, VALUES.IDS.CREATOR2);
+        await create(Types.ADDED_REACTION_POST, VALUES.IDS.CREATOR1, VALUES.IDS.CREATOR2, VALUES.IDS.POST_REACTION, undefined, VALUES.IDS.REACTION_REACTION);
+
+        const notifications = await database.searchRecords(NOTIFICATION_RECORD_TYPE, {});
+        expect(notifications).toHaveLength(1);
+
+        const notification = notifications[0];
+        expect(notification.type).toBe(Types.ADDED_REACTION_POST);
+        expect(notification.createdAt).toBeDefined();
+        expect(notification.senderId).toBe(VALUES.IDS.CREATOR1);
+        expect(notification.receiverId).toBe(VALUES.IDS.CREATOR2);
+        expect(notification.targetPostId).toBe(VALUES.IDS.POST_REACTION);
+        expect(notification.targetReactionId).toBe(undefined);
+        expect(notification.sourceReactionId).toBe(VALUES.IDS.REACTION_REACTION);
+    });
+
+    it('should create a notification when a reaction is added to a reaction', async () =>
+    {
+        await create(Types.ADDED_REACTION_REACTION, VALUES.IDS.CREATOR1, VALUES.IDS.CREATOR2, undefined, VALUES.IDS.REACTION_REACTION, VALUES.IDS.POST_REACTION);
 
         const notifications = await database.searchRecords(NOTIFICATION_RECORD_TYPE, {});
         expect(notifications).toHaveLength(1);
 
         const notification = notifications[0];
-        expect(notification.type).toBe(Types.ADDED_REACTION);
+        expect(notification.type).toBe(Types.ADDED_REACTION_REACTION);
         expect(notification.createdAt).toBeDefined();
         expect(notification.senderId).toBe(VALUES.IDS.CREATOR1);
         expect(notification.receiverId).toBe(VALUES.IDS.CREATOR2);
+        expect(notification.targetPostId).toBe(undefined);
+        expect(notification.targetReactionId).toBe(VALUES.IDS.REACTION_REACTION);
+        expect(notification.sourceReactionId).toBe(VALUES.IDS.POST_REACTION);
     });
 
     it('should do nothing on failure', async () =>
diff --git a/test/domain/notification/fixtures/records.fixture.ts b/test/domain/notification/fixtures/records.fixture.ts
index f2ee72ea..6c03b071 100644
--- a/test/domain/notification/fixtures/records.fixture.ts
+++ b/test/domain/notification/fixtures/records.fixture.ts
@@ -36,11 +36,11 @@ export const RECORDS: Record<string, RecordData[]> =
     ],
 
     NOTIFICATIONS: [
-        { id: VALUES.IDS.NOTIFICATION1, createdAt: new Date(), type: Types.STARTED_FOLLOWING, senderId: VALUES.IDS.CREATOR1, receiverId: VALUES.IDS.CREATOR2, postId: undefined, reactionId: undefined },
-        { id: VALUES.IDS.NOTIFICATION2, createdAt: new Date(), type: Types.STARTED_FOLLOWING, senderId: VALUES.IDS.CREATOR2, receiverId: VALUES.IDS.CREATOR1, postId: undefined, reactionId: undefined },
-        { id: VALUES.IDS.NOTIFICATION3, createdAt: new Date('01-05-2024'), type: Types.RATED_POST, senderId: VALUES.IDS.CREATOR3, receiverId: VALUES.IDS.CREATOR2, postId: VALUES.IDS.POST_RATED, reactionId: undefined },
-        { id: VALUES.IDS.NOTIFICATION4, createdAt: new Date('01-04-2024'), type: Types.RATED_REACTION, senderId: VALUES.IDS.CREATOR2, receiverId: VALUES.IDS.CREATOR1, postId: undefined, reactionId: VALUES.IDS.REACTION_LIKED },
-        { id: VALUES.IDS.NOTIFICATION5, createdAt: new Date('01-03-2024'), type: Types.RATED_POST, senderId: VALUES.IDS.CREATOR1, receiverId: VALUES.IDS.CREATOR1, postId: VALUES.IDS.POST_DELETED, reactionId: undefined },
+        { id: VALUES.IDS.NOTIFICATION1, createdAt: new Date(), type: Types.STARTED_FOLLOWING, senderId: VALUES.IDS.CREATOR1, receiverId: VALUES.IDS.CREATOR2, targetPostId: undefined, targetReactionId: undefined },
+        { id: VALUES.IDS.NOTIFICATION2, createdAt: new Date(), type: Types.STARTED_FOLLOWING, senderId: VALUES.IDS.CREATOR2, receiverId: VALUES.IDS.CREATOR1, targetPostId: undefined, targetReactionId: undefined },
+        { id: VALUES.IDS.NOTIFICATION3, createdAt: new Date('01-05-2024'), type: Types.RATED_POST, senderId: VALUES.IDS.CREATOR3, receiverId: VALUES.IDS.CREATOR2, targetPostId: VALUES.IDS.POST_RATED, targetReactionId: undefined },
+        { id: VALUES.IDS.NOTIFICATION4, createdAt: new Date('01-04-2024'), type: Types.RATED_REACTION, senderId: VALUES.IDS.CREATOR2, receiverId: VALUES.IDS.CREATOR1, targetPostId: undefined, targetReactionId: VALUES.IDS.REACTION_LIKED },
+        { id: VALUES.IDS.NOTIFICATION5, createdAt: new Date('01-03-2024'), type: Types.RATED_POST, senderId: VALUES.IDS.CREATOR1, receiverId: VALUES.IDS.CREATOR1, targetPostId: VALUES.IDS.POST_DELETED, targetReactionId: undefined },
     ],
 
 };
diff --git a/test/domain/notification/fixtures/values.fixture.ts b/test/domain/notification/fixtures/values.fixture.ts
index 439b7037..a2175303 100644
--- a/test/domain/notification/fixtures/values.fixture.ts
+++ b/test/domain/notification/fixtures/values.fixture.ts
@@ -6,8 +6,10 @@ export const VALUES =
         IMAGE: 'I1',
         POST_RATED: 'P1',
         POST_DELETED: 'P2',
+        POST_REACTION: 'P3',
 
         REACTION_LIKED: 'R1',
+        REACTION_REACTION: 'R2',
 
         RATING1: '1',
         RATING2: '2',
diff --git a/test/domain/notification/getRecentAggregated.spec.ts b/test/domain/notification/getRecentAggregated.spec.ts
index 7fa457b0..daf98736 100644
--- a/test/domain/notification/getRecentAggregated.spec.ts
+++ b/test/domain/notification/getRecentAggregated.spec.ts
@@ -25,13 +25,13 @@ describe('domain/notification/getallAggregated', () =>
         const notification2 = result[1];
 
         expect(notification1.type).toBe(Types.STARTED_FOLLOWING);
-        expect(notification1.post).toBe(undefined);
-        expect(notification1.reaction).toBe(undefined);
+        expect(notification1.targetPost).toBe(undefined);
+        expect(notification1.targetReaction).toBe(undefined);
         expect(notification1.relation.following.id).toBe(VALUES.IDS.CREATOR1);
 
         expect(notification2.type).toBe(Types.RATED_POST);
-        expect(notification2.post?.id).toBe(VALUES.IDS.POST_RATED);
-        expect(notification2.reaction).toBe(undefined);
+        expect(notification2.targetPost?.id).toBe(VALUES.IDS.POST_RATED);
+        expect(notification2.targetReaction).toBe(undefined);
         expect(notification2.relation.following.id).toBe(VALUES.IDS.CREATOR3);
 
     });
@@ -46,13 +46,13 @@ describe('domain/notification/getallAggregated', () =>
         const notification2 = result[1];
 
         expect(notification1.type).toBe(Types.STARTED_FOLLOWING);
-        expect(notification1.post).toBe(undefined);
-        expect(notification1.reaction).toBe(undefined);
+        expect(notification1.targetPost).toBe(undefined);
+        expect(notification1.targetReaction).toBe(undefined);
         expect(notification1.relation.following.id).toBe(VALUES.IDS.CREATOR2);
 
         expect(notification2.type).toBe(Types.RATED_REACTION);
-        expect(notification2.post).toBe(undefined);
-        expect(notification2.reaction?.id).toBe(VALUES.IDS.REACTION_LIKED);
+        expect(notification2.targetPost).toBe(undefined);
+        expect(notification2.targetReaction?.id).toBe(VALUES.IDS.REACTION_LIKED);
         expect(notification2.relation.following.id).toBe(VALUES.IDS.CREATOR2);
 
     });
diff --git a/test/domain/reaction/create.spec.ts b/test/domain/reaction/create.spec.ts
index bc3b0d6c..8a860aad 100644
--- a/test/domain/reaction/create.spec.ts
+++ b/test/domain/reaction/create.spec.ts
@@ -2,8 +2,9 @@
 import { beforeEach, describe, expect, it } from 'vitest';
 
 import { PostNotFound } from '^/domain/post';
-import { RECORD_TYPE as REACTION_RECORD_TYPE } from '^/domain/reaction';
-import create, { InvalidReaction } from '^/domain/reaction/create';
+import { RECORD_TYPE as REACTION_RECORD_TYPE, ReactionNotFound } from '^/domain/reaction';
+import create from '^/domain/reaction/create';
+import InvalidReaction from '^/domain/reaction/create/InvalidReaction';
 
 import database from '^/integrations/database';
 
@@ -19,6 +20,12 @@ beforeEach(async () =>
 
 describe('domain/reaction/create', () =>
 {
+    it('should fail when post and reaction ids are missing', async () =>
+    {
+        const promise = create(REQUESTERS.OWNER.id, VALUES.IDS.POST_MISSING, VALUES.IDS.REACTION_MISSING, undefined, VALUES.IDS.COMMENT);
+        await expect(promise).rejects.toThrow(InvalidReaction);
+    });
+
     it('should fail when comic and comment ids are missing', async () =>
     {
         const promise = create(REQUESTERS.OWNER.id, VALUES.IDS.POST_EXISTING, VALUES.IDS.COMIC_MISSING, VALUES.IDS.COMMENT_MISSING);
@@ -28,10 +35,20 @@ describe('domain/reaction/create', () =>
     it('should rollback created data at non-existing post comment reaction', async () =>
     {
         // This should fail at the last action when incrementing post's reaction count
-        const promise = create(REQUESTERS.OWNER.id, VALUES.IDS.POST_NOT_EXISTING, VALUES.MESSAGES.VALID_COMMENT);
+        const promise = create(REQUESTERS.OWNER.id, VALUES.IDS.POST_NOT_EXISTING, undefined, VALUES.MESSAGES.VALID_COMMENT);
         await expect(promise).rejects.toThrow(PostNotFound);
 
-        const reactions = await database.searchRecords(REACTION_RECORD_TYPE, {});
+        const reactions = await database.searchRecords(REACTION_RECORD_TYPE, { postId: { 'EQUALS': undefined } });
+        expect(reactions).toHaveLength(5);
+    });
+
+    it('should rollback created data at non-existing reaction comment reaction', async () =>
+    {
+        // This should fail at the last action when incrementing reaction's reaction count
+        const promise = create(REQUESTERS.OWNER.id, undefined, VALUES.IDS.REACTION_NOT_EXISTING, undefined, VALUES.MESSAGES.VALID_COMMENT);
+        await expect(promise).rejects.toThrow(ReactionNotFound);
+
+        const reactions = await database.searchRecords(REACTION_RECORD_TYPE, { reactionId: { 'EQUALS': undefined } });
         expect(reactions).toHaveLength(5);
     });
 });
diff --git a/test/domain/reaction/createComic.spec.ts b/test/domain/reaction/createComic.spec.ts
index ac63a275..2b802924 100644
--- a/test/domain/reaction/createComic.spec.ts
+++ b/test/domain/reaction/createComic.spec.ts
@@ -19,13 +19,14 @@ beforeEach(async () =>
 
 describe('domain/reaction/createComic', () =>
 {
-    it('should create a comic reaction', async () =>
+    it('should create a comic reaction on a post', async () =>
     {
-        const reactionId = await create(REQUESTERS.OWNER, VALUES.IDS.POST_EXISTING, VALUES.COMIC_DATA_URL);
+        const reactionId = await create(REQUESTERS.OWNER, VALUES.COMIC_DATA_URL, VALUES.IDS.POST_EXISTING);
 
         const reaction = await database.readRecord(REACTION_RECORD_TYPE, reactionId);
         expect(reaction?.creatorId).toBe(REQUESTERS.OWNER.id);
         expect(reaction?.postId).toBe(VALUES.IDS.POST_EXISTING);
+        expect(reaction?.reactionId).toBeUndefined();
         expect(reaction?.commentId).toBeUndefined();
         expect(reaction?.ratingCount).toBe(0);
         expect(reaction?.createdAt).toBeDefined();
@@ -37,4 +38,24 @@ describe('domain/reaction/createComic', () =>
         expect(post?.ratingCount).toBe(0);
         expect(post?.reactionCount).toBe(1);
     });
+
+    it('should create a comic reaction on a reaction', async () =>
+    {
+        const reactionId = await create(REQUESTERS.OWNER, VALUES.COMIC_DATA_URL, undefined, VALUES.IDS.REACTION_COMIC);
+
+        const reaction = await database.readRecord(REACTION_RECORD_TYPE, reactionId);
+        expect(reaction?.creatorId).toBe(REQUESTERS.OWNER.id);
+        expect(reaction?.postId).toBeUndefined();
+        expect(reaction?.reactionId).toBe(VALUES.IDS.REACTION_COMIC);
+        expect(reaction?.commentId).toBeUndefined();
+        expect(reaction?.ratingCount).toBe(0);
+        expect(reaction?.createdAt).toBeDefined();
+
+        const reaction1 = await database.readRecord(REACTION_RECORD_TYPE, reaction.reactionId as string);
+        expect(reaction1?.creatorId).toBe(REQUESTERS.OWNER.id);
+        expect(reaction1?.comicId).toBeDefined();
+        expect(reaction1?.createdAt).toBeDefined();
+        expect(reaction1?.ratingCount).toBe(0);
+        expect(reaction1?.reactionCount).toBe(1);
+    });
 });
diff --git a/test/domain/reaction/createComment.spec.ts b/test/domain/reaction/createComment.spec.ts
index 229ca09c..f351580b 100644
--- a/test/domain/reaction/createComment.spec.ts
+++ b/test/domain/reaction/createComment.spec.ts
@@ -21,7 +21,7 @@ describe('domain/reaction/createComment', () =>
 {
     it('should create a comment reaction', async () =>
     {
-        const reactionId = await create(REQUESTERS.OWNER, VALUES.IDS.POST_EXISTING, VALUES.MESSAGES.VALID_COMMENT);
+        const reactionId = await create(REQUESTERS.OWNER, VALUES.MESSAGES.VALID_COMMENT, VALUES.IDS.POST_EXISTING);
 
         const reaction = await database.readRecord(REACTION_RECORD_TYPE, reactionId);
         expect(reaction?.creatorId).toBe(REQUESTERS.OWNER.id);
diff --git a/test/domain/reaction/fixtures/records.fixture.ts b/test/domain/reaction/fixtures/records.fixture.ts
index 8ad29881..e5336ef3 100644
--- a/test/domain/reaction/fixtures/records.fixture.ts
+++ b/test/domain/reaction/fixtures/records.fixture.ts
@@ -11,7 +11,7 @@ export const RECORDS: Record<string, RecordData[]> =
     ],
 
     COMMENTS: [
-        { id: VALUES.IDS.COMMENT, message: VALUES.MESSAGES.COMMENT }
+        { id: VALUES.IDS.COMMENT, message: VALUES.MESSAGES.VALID_COMMENT }
     ],
 
     CREATORS: [
@@ -27,11 +27,16 @@ export const RECORDS: Record<string, RecordData[]> =
     ],
 
     REACTIONS: [
-        { id: VALUES.IDS.REACTION_DELETED, creatorId: REQUESTERS.OWNER.id, postId: VALUES.IDS.POST_EXISTING, comicId: undefined, commentId: undefined, ratingCount: 0, createdAt: new Date(), deleted: true },
-        { id: VALUES.IDS.REACTION_COMIC, creatorId: REQUESTERS.OWNER.id, postId: VALUES.IDS.POST_EXISTING, comicId: VALUES.IDS.COMIC, commentId: undefined, ratingCount: 0, createdAt: new Date(), deleted: false },
-        { id: VALUES.IDS.REACTION_COMMENT, creatorId: REQUESTERS.OWNER.id, postId: VALUES.IDS.POST_EXISTING, comicId: undefined, commentId: VALUES.IDS.COMMENT, ratingCount: 0, createdAt: new Date(), deleted: false },
-        { id: VALUES.IDS.REACTION_RATED, creatorId: REQUESTERS.OWNER.id, postId: VALUES.IDS.POST_EXISTING, comicId: undefined, commentId: VALUES.IDS.COMMENT, ratingCount: 10, createdAt: new Date() },
-        { id: VALUES.IDS.REACTION_UNRATED, creatorId: REQUESTERS.OWNER.id, postId: VALUES.IDS.POST_EXISTING, comicId: undefined, commentId: VALUES.IDS.COMMENT, ratingCount: 0, createdAt: new Date(), deleted: false }
+        { id: VALUES.IDS.REACTION_DELETED, creatorId: REQUESTERS.OWNER.id, postId: VALUES.IDS.POST_EXISTING, comicId: undefined, commentId: undefined, ratingCount: 0, reactionCount: 0, createdAt: new Date(), deleted: true },
+        { id: VALUES.IDS.REACTION_COMIC, creatorId: REQUESTERS.OWNER.id, postId: VALUES.IDS.POST_EXISTING, comicId: VALUES.IDS.COMIC, commentId: undefined, ratingCount: 0, reactionCount: 0, createdAt: new Date(), deleted: false },
+        { id: VALUES.IDS.REACTION_COMMENT, creatorId: REQUESTERS.OWNER.id, postId: VALUES.IDS.POST_EXISTING, comicId: undefined, commentId: VALUES.IDS.COMMENT, ratingCount: 0, reactionCount: 0, createdAt: new Date(), deleted: false },
+        { id: VALUES.IDS.REACTION_RATED, creatorId: REQUESTERS.OWNER.id, postId: VALUES.IDS.POST_EXISTING, comicId: undefined, commentId: VALUES.IDS.COMMENT, ratingCount: 10, reactionCount: 0, createdAt: new Date(), deleted: false },
+        { id: VALUES.IDS.REACTION_UNRATED, creatorId: REQUESTERS.OWNER.id, postId: VALUES.IDS.POST_EXISTING, comicId: undefined, commentId: VALUES.IDS.COMMENT, ratingCount: 0, reactionCount: 0, createdAt: new Date(), deleted: false },
+        { id: VALUES.IDS.REACTION_DELETED, creatorId: REQUESTERS.OWNER.id, reactionId: VALUES.IDS.REACTION_EXISTING, comicId: undefined, commentId: undefined, ratingCount: 0, reactionCount: 0, createdAt: new Date(), deleted: true },
+        { id: VALUES.IDS.REACTION_COMIC, creatorId: REQUESTERS.OWNER.id, reactionId: VALUES.IDS.REACTION_EXISTING, comicId: VALUES.IDS.COMIC, commentId: undefined, ratingCount: 0, reactionCount: 0, createdAt: new Date(), deleted: false },
+        { id: VALUES.IDS.REACTION_COMMENT, creatorId: REQUESTERS.OWNER.id, reactionId: VALUES.IDS.REACTION_EXISTING, comicId: undefined, commentId: VALUES.IDS.COMMENT, ratingCount: 0, reactionCount: 0, createdAt: new Date(), deleted: false },
+        { id: VALUES.IDS.REACTION_RATED, creatorId: REQUESTERS.OWNER.id, reactionId: VALUES.IDS.REACTION_EXISTING, comicId: undefined, commentId: VALUES.IDS.COMMENT, ratingCount: 10, reactionCount: 0, createdAt: new Date(), deleted: false },
+        { id: VALUES.IDS.REACTION_UNRATED, creatorId: REQUESTERS.OWNER.id, reactionId: VALUES.IDS.REACTION_EXISTING, comicId: undefined, commentId: VALUES.IDS.COMMENT, ratingCount: 0, reactionCount: 0, createdAt: new Date(), deleted: false }
     ],
 
     RATINGS: [
diff --git a/test/domain/reaction/fixtures/values.fixture.ts b/test/domain/reaction/fixtures/values.fixture.ts
index 1d2876fb..c5529670 100644
--- a/test/domain/reaction/fixtures/values.fixture.ts
+++ b/test/domain/reaction/fixtures/values.fixture.ts
@@ -9,6 +9,8 @@ export const VALUES =
         COMMENT: '1',
         COMMENT_MISSING: undefined,
         IMAGE: '1',
+        POST_MISSING: undefined,
+        REACTION_MISSING: undefined,
 
         POST_EXISTING: '1',
         POST_NOT_EXISTING: '2',
@@ -20,7 +22,8 @@ export const VALUES =
         REACTION_UNRATED: '3',
         REACTION_NOT_EXISTING: '4',
         REACTION_COMIC: '5',
-        REACTION_COMMENT: '6'
+        REACTION_COMMENT: '6',
+        REACTION_EXISTING: '7'
     },
 
     MESSAGES: {
diff --git a/test/domain/reaction/getByPostAggregated.spec.ts b/test/domain/reaction/getByPostAggregated.spec.ts
index 121f490f..f44cb7c8 100644
--- a/test/domain/reaction/getByPostAggregated.spec.ts
+++ b/test/domain/reaction/getByPostAggregated.spec.ts
@@ -15,6 +15,15 @@ beforeEach(async () =>
 
 describe('domain/reaction/getByPostAggregated', () =>
 {
+    it('should give the aggregated post reaction data', async () =>
+    {
+        const reactions = await getByPost(REQUESTERS.OWNER, VALUES.IDS.POST_EXISTING, VALUES.RANGE);
+        expect(reactions.length).toBe(4);
+        expect(reactions[0].id).toBe(VALUES.IDS.REACTION_COMIC);
+        expect(reactions[0].comic?.id).toBe(VALUES.IDS.COMIC);
+        expect(reactions[0].comment).toBeUndefined();
+    });
+
     it('should not retrieve deleted reactions', async () =>
     {
         const reactions = await getByPost(REQUESTERS.OWNER, VALUES.IDS.POST_EXISTING, VALUES.RANGE);
diff --git a/test/domain/reaction/getByReactionAggregated.spec.ts b/test/domain/reaction/getByReactionAggregated.spec.ts
new file mode 100644
index 00000000..f3a6ebdc
--- /dev/null
+++ b/test/domain/reaction/getByReactionAggregated.spec.ts
@@ -0,0 +1,32 @@
+
+import { beforeEach, describe, expect, it } from 'vitest';
+
+import getByReaction from '^/domain/reaction/getByReactionAggregated';
+
+import { DATABASES, FILE_STORES, REQUESTERS, VALUES } from './fixtures';
+
+beforeEach(async () =>
+{
+    await Promise.all([
+        DATABASES.withEverything(),
+        FILE_STORES.withImage()
+    ]);
+});
+
+describe('domain/reaction/getByReactionAggregated', () =>
+{
+    it('should give the aggregated reaction reaction data', async () =>
+    {
+        const reactions = await getByReaction(REQUESTERS.OWNER, VALUES.IDS.REACTION_EXISTING, VALUES.RANGE);
+        expect(reactions.length).toBe(4);
+        expect(reactions[0].id).toBe(VALUES.IDS.REACTION_COMIC);
+        expect(reactions[0].comic?.id).toBe(VALUES.IDS.COMIC);
+        expect(reactions[0].comment).toBeUndefined();
+    });
+
+    it('should not retrieve deleted reactions', async () =>
+    {
+        const reactions = await getByReaction(REQUESTERS.OWNER, VALUES.IDS.REACTION_EXISTING, VALUES.RANGE);
+        expect(reactions).not.toContainEqual({ id: VALUES.IDS.REACTION_DELETED });
+    });
+});
diff --git a/test/domain/reaction/toggleRating.spec.ts b/test/domain/reaction/toggleRating.spec.ts
index d9257896..a203c43c 100644
--- a/test/domain/reaction/toggleRating.spec.ts
+++ b/test/domain/reaction/toggleRating.spec.ts
@@ -31,7 +31,7 @@ describe('domain/post/toggleRating', () =>
     {
         // This should fail at the last action when changing the post's rating count
         const promise = toggleRating(REQUESTERS.OWNER, VALUES.IDS.REACTION_NOT_EXISTING);
-        await expect(promise).rejects.toThrow('Record not found');
+        await expect(promise).rejects.toThrow('Reaction not found');
 
         const rating = await database.findRecord(RATING_RECORD_TYPE, QUERIES.RATING_NOT_EXISTING);
         expect(rating).toBeUndefined();