diff --git a/.storybook/decorators.js b/.storybook/decorators.js
index ff04f30..961e4b6 100644
--- a/.storybook/decorators.js
+++ b/.storybook/decorators.js
@@ -6,8 +6,6 @@ import { Provider as ReduxProvider } from 'react-redux'
 import configureStore from '../codebases/compdem/client-admin/src/store'
 import { MemoryRouter } from 'react-router'
 
-const store = configureStore()
-
 export const withThemeUi = (Story) => (
   <ThemeProvider theme={compdemAdminTheme}>
     <Story />
@@ -20,11 +18,32 @@ export const withDelibThemeUi = (Story) => (
   </ThemeProvider>
 )
 
-export const withRedux = (Story) => (
-  <ReduxProvider store={store}>
-    <Story />
-  </ReduxProvider>
-)
+/**
+ *
+ * Provide components support for redux-store
+ * optionally passing custom initial state, and using default initial state if not passed
+ *
+ * @example
+ * export const MyComponent = () => Template.bind({})
+ * MyComponent.parameters = {
+ *   store: {
+ *     initialState: {
+ *       foo: 'bar'
+ *     },
+ *   }
+ * };
+ *
+ * Source: https://github.com/yannbf/mealdrop/blob/main/.storybook/decorators.tsx#L118
+ */
+export const withRedux = (Story, { parameters }) => {
+  // Creates a store by merging optional custom initialState
+  const store = configureStore(parameters.store?.initialState)
+  return (
+    <ReduxProvider store={store}>
+      <Story />
+    </ReduxProvider>
+  )
+}
 
 export const svgDecorator = (Story) => (
   <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="100">
diff --git a/.storybook/utils.js b/.storybook/utils.js
index 91bf0f8..773afbb 100644
--- a/.storybook/utils.js
+++ b/.storybook/utils.js
@@ -31,6 +31,16 @@ export const getComments = () => {
   return commentsData
 }
 
+export const getUnmoderatedComments = () => {
+  return commentsData.filter(comment => comment.mod === 0)
+}
+export const getAcceptedComments = () => {
+  return commentsData.filter(comment => comment.mod === 1)
+}
+export const getRejectedComments = () => {
+  return commentsData.filter(comment => comment.mod === -1)
+}
+
 // Simulates response data from /api/v3/reports?report_id=r3bpnywujybyru4rkx92i
 export const getReports = () => {
   return reportsData
diff --git a/codebases/compdem b/codebases/compdem
index e69e4df..24604e5 160000
--- a/codebases/compdem
+++ b/codebases/compdem
@@ -1 +1 @@
-Subproject commit e69e4df9ab34ee536823eedf7aca9cf4e9b03d39
+Subproject commit 24604e5fa1a1e32357b18237b33510c26d3bd3fb
diff --git a/package-lock.json b/package-lock.json
index 606982d..4d83d8b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -44,7 +44,8 @@
         "react-dom": "^16.14.0",
         "react-redux": "7.2.2",
         "react-router-dom": "^5.2.0",
-        "redux-thunk": "~2.3.0",
+        "redux": "4.0.5",
+        "redux-thunk": "2.3.0",
         "storybook": "^8.3.2",
         "storybook-branch-switcher": "^0.5.0"
       }
@@ -6701,11 +6702,12 @@
       }
     },
     "node_modules/redux": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
-      "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.0.5.tgz",
+      "integrity": "sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==",
       "dependencies": {
-        "@babel/runtime": "^7.9.2"
+        "loose-envify": "^1.4.0",
+        "symbol-observable": "^1.2.0"
       }
     },
     "node_modules/redux-thunk": {
@@ -7334,6 +7336,14 @@
         "webpack": ">=2"
       }
     },
+    "node_modules/symbol-observable": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
+      "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
diff --git a/package.json b/package.json
index 25e4ac8..b1fd84f 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,8 @@
     "react-dom": "^16.14.0",
     "react-redux": "7.2.2",
     "react-router-dom": "^5.2.0",
-    "redux-thunk": "~2.3.0",
+    "redux": "4.0.5",
+    "redux-thunk": "2.3.0",
     "storybook": "^8.3.2",
     "storybook-branch-switcher": "^0.5.0"
   },
diff --git a/stories/compdem/client-admin/ModerateCommentsAccepted.stories.js b/stories/compdem/client-admin/ModerateCommentsAccepted.stories.js
new file mode 100644
index 0000000..b6a23ad
--- /dev/null
+++ b/stories/compdem/client-admin/ModerateCommentsAccepted.stories.js
@@ -0,0 +1,23 @@
+import React from "react";
+import { withRedux, withThemeUi } from "../../../.storybook/decorators";
+import ModerateCommentsAccepted from "../../../codebases/compdem/client-admin/src/components/conversation-admin/comment-moderation/moderate-comments-accepted";
+import { getAcceptedComments } from "../../../.storybook/utils";
+
+export default {
+  component: ModerateCommentsAccepted,
+  decorators: [withThemeUi, withRedux],
+  parameters: {
+    store: {
+      initialState: {
+        mod_comments_accepted: {},
+      },
+    },
+  },
+};
+
+const Template = (args) => <ModerateCommentsAccepted {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  accepted_comments: getAcceptedComments(),
+};
diff --git a/stories/compdem/client-admin/ModerateCommentsRejected.stories.js b/stories/compdem/client-admin/ModerateCommentsRejected.stories.js
new file mode 100644
index 0000000..ddd1315
--- /dev/null
+++ b/stories/compdem/client-admin/ModerateCommentsRejected.stories.js
@@ -0,0 +1,23 @@
+import React from "react";
+import { withRedux, withThemeUi } from "../../../.storybook/decorators";
+import ModerateCommentsRejected from "../../../codebases/compdem/client-admin/src/components/conversation-admin/comment-moderation/moderate-comments-rejected";
+import { getRejectedComments } from "../../../.storybook/utils";
+
+export default {
+  component: ModerateCommentsRejected,
+  decorators: [withThemeUi, withRedux],
+  parameters: {
+    store: {
+      initialState: {
+        mod_comments_rejected: {},
+      },
+    },
+  },
+};
+
+const Template = (args) => <ModerateCommentsRejected {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  rejected_comments: getRejectedComments(),
+};
diff --git a/stories/compdem/client-admin/ModerateCommentsTodo.stories.js b/stories/compdem/client-admin/ModerateCommentsTodo.stories.js
new file mode 100644
index 0000000..cf9cfb1
--- /dev/null
+++ b/stories/compdem/client-admin/ModerateCommentsTodo.stories.js
@@ -0,0 +1,23 @@
+import React from "react";
+import { withRedux, withThemeUi } from "../../../.storybook/decorators";
+import { getUnmoderatedComments } from "../../../.storybook/utils";
+import ModerateCommentsTodo from "../../../codebases/compdem/client-admin/src/components/conversation-admin/comment-moderation/moderate-comments-todo";
+
+export default {
+  component: ModerateCommentsTodo,
+  decorators: [withThemeUi, withRedux],
+  parameters: {
+    store: {
+      initialState: {
+        mod_comments_unmoderated: {},
+      },
+    },
+  },
+};
+
+const Template = (args) => <ModerateCommentsTodo {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  unmoderated_comments: getUnmoderatedComments(),
+}