diff --git a/package-lock.json b/package-lock.json
index 3f52dee..f664850 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "lemmy-modder",
-  "version": "1.3.8",
+  "version": "1.3.9",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "lemmy-modder",
-      "version": "1.3.8",
+      "version": "1.3.9",
       "license": "MIT",
       "dependencies": {
         "@babel/core": "^7.23.2",
@@ -40,6 +40,8 @@
         "react-redux": "^8.1.1",
         "react-router-dom": "^6.18.0",
         "redux": "^4.2.1",
+        "redux-persist": "^6.0.0",
+        "remove-markdown": "^0.5.0",
         "sass": "^1.69.5",
         "sass-loader": "^13.3.2",
         "sonner": "^1.1.0",
@@ -7157,6 +7159,14 @@
         "@babel/runtime": "^7.9.2"
       }
     },
+    "node_modules/redux-persist": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/redux-persist/-/redux-persist-6.0.0.tgz",
+      "integrity": "sha512-71LLMbUq2r02ng2We9S215LtPu3fY0KgaGE0k8WRgl6RkqxtGfl7HUozz1Dftwsb0D/5mZ8dwAaPbtnzfvbEwQ==",
+      "peerDependencies": {
+        "redux": ">4.0.0"
+      }
+    },
     "node_modules/redux-thunk": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.2.tgz",
@@ -7238,6 +7248,11 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/remove-markdown": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/remove-markdown/-/remove-markdown-0.5.0.tgz",
+      "integrity": "sha512-x917M80K97K5IN1L8lUvFehsfhR8cYjGQ/yAMRI9E7JIKivtl5Emo5iD13DhMr+VojzMCiYk8V2byNPwT/oapg=="
+    },
     "node_modules/renderkid": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/renderkid/-/renderkid-3.0.0.tgz",
diff --git a/package.json b/package.json
index ab02794..39ade2d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "lemmy-modder",
-  "version": "1.3.8",
+  "version": "1.3.9",
   "description": "Lemmy Moderation App",
   "author": "tgxn",
   "license": "MIT",
@@ -45,6 +45,8 @@
     "react-redux": "^8.1.1",
     "react-router-dom": "^6.18.0",
     "redux": "^4.2.1",
+    "remove-markdown": "^0.5.0",
+    "redux-persist": "^6.0.0",
     "sass": "^1.69.5",
     "sass-loader": "^13.3.2",
     "sonner": "^1.1.0",
diff --git a/src/App.jsx b/src/App.jsx
index 07efe35..6cbed6a 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -21,11 +21,12 @@ import Dashboard from "./pages/Dashboard";
 import Actions from "./pages/Actions";
 import Approvals from "./pages/Approvals";
 import Reports from "./pages/Reports";
+import Messages from "./pages/Messages";
 import Login from "./pages/Login";
 
-import AppStore from "./store";
-import { selectIsInElectron } from "./reducers/configReducer";
-import { selectCurrentUser } from "./reducers/accountReducer";
+import { store } from "./redux/store";
+import { selectIsInElectron } from "./redux/reducer/configReducer";
+import { selectCurrentUser } from "./redux/reducer/accountReducer";
 
 function PageRouter() {
   const theme = useTheme();
@@ -182,6 +183,48 @@ function PageRouter() {
                 </Box>
               }
             />
+            <Route
+              path="/messages"
+              element={
+                <Box
+                  sx={{
+                    overflow: "auto",
+                    height: "calc(100% - 50px)",
+                    width: "100%",
+                  }}
+                >
+                  <Container
+                    maxWidth={"lg"}
+                    sx={{
+                      py: 2,
+                    }}
+                  >
+                    <Messages />
+                  </Container>
+                </Box>
+              }
+            />
+            <Route
+              path="/messages/:user"
+              element={
+                <Box
+                  sx={{
+                    overflow: "auto",
+                    height: "calc(100% - 50px)",
+                    width: "100%",
+                  }}
+                >
+                  <Container
+                    maxWidth={"lg"}
+                    sx={{
+                      py: 2,
+                    }}
+                  >
+                    <Messages />
+                  </Container>
+                </Box>
+              }
+            />
           </Routes>
         </Box>
       </HashRouter>
@@ -195,7 +238,7 @@ export default function App() {
     <QueryClientProvider client={queryClient}>
       <ReactQueryDevtools initialIsOpen={false} buttonPosition="bottom-left" />
 
-      <Provider store={AppStore}>
+      <Provider store={store}>
         <PageRouter />
       </Provider>
     </QueryClientProvider>
diff --git a/src/components/Actions/CommentButtons.jsx b/src/components/Actions/CommentButtons.jsx
index 46f2dce..0735c54 100644
--- a/src/components/Actions/CommentButtons.jsx
+++ b/src/components/Actions/CommentButtons.jsx
@@ -9,7 +9,7 @@ import { useLemmyHttpAction } from "../../hooks/useLemmyHttp.js";
 
 import { BaseActionButton, ActionConfirmButton, InputElement, ConfirmDialog } from "./BaseElements.jsx";
 import { getSiteData } from "../../hooks/getSiteData";
-import { selectShowResolved, selectMandatoryModComment } from "../../reducers/configReducer.js";
+import { selectShowResolved, selectMandatoryModComment } from "../../redux/reducer/configReducer.js";
 
 export const ResolveCommentReportButton = ({ report, ...props }) => {
   const queryClient = useQueryClient();
diff --git a/src/components/Actions/GenButtons.jsx b/src/components/Actions/GenButtons.jsx
index b0ea57f..9cc5b90 100644
--- a/src/components/Actions/GenButtons.jsx
+++ b/src/components/Actions/GenButtons.jsx
@@ -16,7 +16,7 @@ import {
   ConfirmDialog,
 } from "./BaseElements.jsx";
 
-import { selectMandatoryModComment } from "../../reducers/configReducer";
+import { selectMandatoryModComment } from "../../redux/reducer/configReducer";
 
 // banFromCommunity
 export const BanUserCommunityButton = ({ person, community, isBanned, ...props }) => {
diff --git a/src/components/Actions/PMButtons.jsx b/src/components/Actions/PMButtons.jsx
index 1f17645..fef7586 100644
--- a/src/components/Actions/PMButtons.jsx
+++ b/src/components/Actions/PMButtons.jsx
@@ -11,7 +11,7 @@ import { useLemmyHttpAction } from "../../hooks/useLemmyHttp.js";
 
 import { BaseActionButton, ActionConfirmButton, InputElement, ConfirmDialog } from "./BaseElements.jsx";
 import { getSiteData } from "../../hooks/getSiteData";
-import { selectShowResolved, selectMandatoryModComment } from "../../reducers/configReducer.js";
+import { selectShowResolved, selectMandatoryModComment } from "../../redux/reducer/configReducer.js";
 
 // allow resolving / unresolving a post report
 // resolvePrivateMessageReport
diff --git a/src/components/Actions/PostButtons.jsx b/src/components/Actions/PostButtons.jsx
index 8fc40af..b22e19e 100644
--- a/src/components/Actions/PostButtons.jsx
+++ b/src/components/Actions/PostButtons.jsx
@@ -11,9 +11,9 @@ import { useLemmyHttpAction } from "../../hooks/useLemmyHttp.js";
 
 import { BaseActionButton, ActionConfirmButton, InputElement, ConfirmDialog } from "./BaseElements.jsx";
 import { getSiteData } from "../../hooks/getSiteData";
-import { selectShowResolved } from "../../reducers/configReducer.js";
+import { selectShowResolved } from "../../redux/reducer/configReducer.js";
 
-import { selectMandatoryModComment } from "../../reducers/configReducer";
+import { selectMandatoryModComment } from "../../redux/reducer/configReducer";
 
 // allow resolving / unresolving a post report
 export const ResolvePostReportButton = ({ report, ...props }) => {
diff --git a/src/components/Actions/RegistrationButtons.jsx b/src/components/Actions/RegistrationButtons.jsx
index d789eff..eeb596e 100644
--- a/src/components/Actions/RegistrationButtons.jsx
+++ b/src/components/Actions/RegistrationButtons.jsx
@@ -13,7 +13,7 @@ import { useLemmyHttpAction } from "../../hooks/useLemmyHttp.js";
 import { getSiteData } from "../../hooks/getSiteData";
 
 import { BaseActionButton, ActionConfirmButton, InputElement, ConfirmDialog } from "./BaseElements.jsx";
-import { selectHideReadApprovals } from "../../reducers/configReducer.js";
+import { selectHideReadApprovals } from "../../redux/reducer/configReducer.js";
 
 export const ApproveButton = ({ registration, ...props }) => {
   const queryClient = useQueryClient();
diff --git a/src/components/Content/PostThumb.jsx b/src/components/Content/PostThumb.jsx
index 8e5335d..e649386 100644
--- a/src/components/Content/PostThumb.jsx
+++ b/src/components/Content/PostThumb.jsx
@@ -12,7 +12,7 @@ import LaunchIcon from "@mui/icons-material/Launch";
 import { SanitizedLink } from "../Display.jsx";
 import { Image, Video } from "./Image.jsx";
 
-import { selectBlurNsfw, selectNsfwWords } from "../../reducers/configReducer";
+import { selectBlurNsfw, selectNsfwWords } from "../../redux/reducer/configReducer";
 
 function ThumbWrapper({ width = 200, tooltip, modal = null, children }) {
   return (
diff --git a/src/components/Filters.jsx b/src/components/Filters.jsx
index e58c568..7c75d79 100644
--- a/src/components/Filters.jsx
+++ b/src/components/Filters.jsx
@@ -10,7 +10,7 @@ import Checkbox from "@mui/joy/Checkbox";
 
 import Chip from "@mui/joy/Chip";
 
-import { selectFilterCommunity, selectFilterType, selectHideReadApprovals, selectModLogType, selectShowRemoved, selectShowResolved, setConfigItem } from "../reducers/configReducer";
+import { selectFilterCommunity, selectFilterType, selectHideReadApprovals, selectModLogType, selectShowRemoved, selectShowResolved, setConfigItem } from "../redux/reducer/configReducer";
 
 import { getSiteData } from "../hooks/getSiteData";
 import { getModLogTypeNames } from "../utils";
diff --git a/src/components/Header/AccountMenu.jsx b/src/components/Header/AccountMenu.jsx
index 1972856..f91e11b 100644
--- a/src/components/Header/AccountMenu.jsx
+++ b/src/components/Header/AccountMenu.jsx
@@ -7,9 +7,7 @@ import { useQueryClient } from "@tanstack/react-query";
 import { LemmyHttp } from "lemmy-js-client";
 import { Toaster, toast } from "sonner";
 
-import Button from "@mui/joy/Button";
 import Menu from "@mui/joy/Menu";
-import MenuList from "@mui/joy/MenuList";
 import MenuButton from "@mui/joy/MenuButton";
 import Dropdown from "@mui/joy/Dropdown";
 import MenuItem from "@mui/joy/MenuItem";
@@ -19,10 +17,9 @@ import ListItemContent from "@mui/joy/ListItemContent";
 // user role icons
 import VerifiedUserIcon from "@mui/icons-material/VerifiedUser";
 import SupervisedUserCircleIcon from "@mui/icons-material/SupervisedUserCircle";
-import AccountBoxIcon from "@mui/icons-material/AccountBox";
 import ArrowDropDown from "@mui/icons-material/ArrowDropDown";
 
-import { logoutCurrent, selectUsers } from "../../reducers/accountReducer";
+import { logoutCurrent, selectUsers } from "../../redux/reducer/accountReducer";
 
 import { getSiteData } from "../../hooks/getSiteData";
 
@@ -31,7 +28,7 @@ import { BasicInfoTooltip } from "../Tooltip.jsx";
 
 import { parseActorId, getUserRole } from "../../utils.js";
 
-import { setAccountIsLoading, setCurrentUser } from "../../reducers/accountReducer";
+import { setAccountIsLoading, setCurrentUser } from "../../redux/reducer/accountReducer";
 
 import { RoleIcons } from "../Shared/Icons.jsx";
 import { Typography } from "@mui/material";
@@ -78,7 +75,7 @@ function UserListItem({ user }) {
           }
 
           // TODO we need to update the user's details in the saved accounts array too, if this is a saved session
-          dispatch(setCurrentUser(user.base, user.jwt, getSite));
+          dispatch(setCurrentUser({base: user.base, jwt: user.jwt, site: getSite}));
         } catch (e) {
           toast(typeof e == "string" ? e : e.message);
         } finally {
@@ -125,16 +122,11 @@ export default function AccountMenu() {
           startDecorator={<UserAvatar size="20px" source={localPerson?.avatar} />}
           endDecorator={<ArrowDropDown />}
           sx={{
-            mx: 1,
+            mx: 1, // margin on both sides of the button
             borderRadius: 4,
-
-            // fontSize: "14px",
-            // overflow: "hidden",
             display: "flex",
-            // flexDirection: "row",
             alignItems: "center",
             justifyContent: "center",
-            // gap: 1,
           }}
         >
           <Typography sx={{ pr: 1 }}>
diff --git a/src/components/Header/ConfigModal.jsx b/src/components/Header/ConfigModal.jsx
index 8a0dae9..bf7a0c9 100644
--- a/src/components/Header/ConfigModal.jsx
+++ b/src/components/Header/ConfigModal.jsx
@@ -17,11 +17,10 @@ import Divider from "@mui/joy/Divider";
 import {
   selectMandatoryModComment,
   setConfigItem,
-  setConfigItemJson,
   selectBlurNsfw,
   selectShowAvatars,
   selectNsfwWords,
-} from "../../reducers/configReducer";
+} from "../../redux/reducer/configReducer";
 
 function BooleanSetting({ label, subtext, value, onChange }) {
   return (
@@ -133,7 +132,7 @@ export default function ConfigModal({ open, onClose }) {
               label="NSFW Words List"
               subtext="list of words to also mark as NSFW"
               value={nsfwWords}
-              onChange={(e) => dispatch(setConfigItemJson("nsfwWords", e))}
+              onChange={(e) => dispatch(setConfigItem("nsfwWords", e))}
             />
           )}
         </Box>
diff --git a/src/components/Header/NotificationMenu.jsx b/src/components/Header/NotificationMenu.jsx
new file mode 100644
index 0000000..a30f7ec
--- /dev/null
+++ b/src/components/Header/NotificationMenu.jsx
@@ -0,0 +1,134 @@
+import React from "react";
+
+import { useNavigate, useLocation } from "react-router-dom";
+
+import IconButton from "@mui/joy/IconButton";
+import Chip from "@mui/joy/Chip";
+import Menu from "@mui/joy/Menu";
+import MenuButton from "@mui/joy/MenuButton";
+import Dropdown from "@mui/joy/Dropdown";
+import MenuItem from "@mui/joy/MenuItem";
+import ListItemDecorator from "@mui/joy/ListItemDecorator";
+import ListItemContent from "@mui/joy/ListItemContent";
+import Badge from "@mui/joy/Badge";
+
+import NotificationsIcon from "@mui/icons-material/Notifications";
+import ChatIcon from "@mui/icons-material/Chat";
+
+import { useLemmyHttp } from "../../hooks/useLemmyHttp";
+import { getSiteData } from "../../hooks/getSiteData";
+
+import { BasicInfoTooltip } from "../Tooltip.jsx";
+
+export default function NotificationMenu() {
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const { localUser, localPerson, userRole } = getSiteData();
+
+  const {
+    isLoading: unreadCountLoading,
+    isFetching: unreadCountFetching,
+    error: unreadCountError,
+    data: unreadCountData,
+  } = useLemmyHttp("getUnreadCount");
+
+  const headerUnreadCount = React.useMemo(() => {
+    if (!unreadCountData) return null;
+
+    console.log("unreadCountData", unreadCountData);
+    // return unreadCountData.replies + unreadCountData.mentions + unreadCountData.private_messages;
+    return unreadCountData.private_messages; // TODO we only show pms for now
+  }, [unreadCountData]);
+
+  return (
+    <Dropdown>
+      <Badge
+        invisible={headerUnreadCount == 0}
+        size="sm"
+        anchorOrigin={{
+          vertical: "top",
+          horizontal: "left",
+        }}
+        color="danger"
+      >
+        <BasicInfoTooltip
+          title={`Notifications (${headerUnreadCount} unread)`}
+          placement="bottom"
+          variant="soft"
+        >
+          <IconButton
+            component={MenuButton}
+            size="sm"
+            variant="outlined"
+            color="neutral"
+            // onClick={() => {
+            //   navigate("/messages");
+            // }}
+            sx={{
+              mr: 1,
+              // p: "2px",
+              borderRadius: 4,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            <NotificationsIcon />
+          </IconButton>
+        </BasicInfoTooltip>
+      </Badge>
+
+      <Menu
+      //  placement="bottom-end"
+      >
+        <MenuItem
+          sx={{
+            color: "text.body",
+          }}
+          onClick={() => {
+            navigate("/messages");
+          }}
+        >
+          <ListItemDecorator>
+            <ChatIcon />
+          </ListItemDecorator>
+          <ListItemContent>Messages</ListItemContent>
+          <Chip size="sm" variant="soft" color="primary">
+            {unreadCountData && unreadCountData.private_messages}
+          </Chip>
+        </MenuItem>
+        {/* <MenuItem
+          disabled
+          sx={{
+            color: "text.body",
+          }}
+        >
+          <ListItemDecorator>
+            <ReplyIcon />
+          </ListItemDecorator>
+
+          <ListItemContent>Replies</ListItemContent>
+          <Chip size="sm" variant="soft" color="primary">
+            {unreadCountData && unreadCountData.replies}
+          </Chip>
+        </MenuItem>
+        <MenuItem
+          disabled
+          sx={{
+            color: "text.body",
+          }}
+        >
+          <ListItemDecorator>
+            <EmailIcon />
+          </ListItemDecorator>
+
+          <ListItemContent>Mentions</ListItemContent>
+          <Chip size="sm" variant="soft" color="primary">
+            {unreadCountData && unreadCountData.mentions}
+          </Chip>
+        </MenuItem> */}
+      </Menu>
+    </Dropdown>
+  );
+}
diff --git a/src/components/Header/SiteMenu.jsx b/src/components/Header/SiteMenu.jsx
index b166c2c..2d39ee8 100644
--- a/src/components/Header/SiteMenu.jsx
+++ b/src/components/Header/SiteMenu.jsx
@@ -15,12 +15,28 @@ import { getSiteData } from "../../hooks/getSiteData";
 
 import { BasicInfoTooltip } from "../Tooltip.jsx";
 
+import { ContentIcons } from "../Shared/Icons.jsx";
+
 export default function SiteMenu() {
   const location = useLocation();
   const navigate = useNavigate();
 
   const { baseUrl, siteData, localPerson, userRole } = getSiteData();
 
+  const {
+    isLoading: unreadCountLoading,
+    isFetching: unreadCountFetching,
+    error: unreadCountError,
+    data: unreadCountData,
+  } = useLemmyHttp("getUnreadCount");
+
+  const headerUnreadCount = React.useMemo(() => {
+    if (!unreadCountData) return null;
+
+    console.log("unreadCountData", unreadCountData);
+    return unreadCountData.replies + unreadCountData.mentions + unreadCountData.private_messages;
+  }, [unreadCountData]);
+
   const {
     isLoading: reportCountsLoading,
     isFetching: reportCountsFetching,
@@ -75,6 +91,36 @@ export default function SiteMenu() {
           <DashboardIcon />
         </Button>
       </BasicInfoTooltip>
+      {/* 
+      <BasicInfoTooltip title="PMs" placement="bottom" variant="soft">
+        <Button
+          size="sm"
+          color={location.pathname == "/messages" ? "primary" : "neutral"}
+          variant={location.pathname == "/messages" ? "solid" : "soft"}
+          onClick={() => {
+            navigate("/messages");
+          }}
+          endDecorator={
+            siteData && (
+              <Chip
+                startDecorator={unreadCountLoading ? <CircularProgress size="sm" /> : <HowToRegIcon />}
+                color={!unreadCountLoading && headerUnreadCount > 0 ? "danger" : "success"}
+                sx={{
+                  borderRadius: 6,
+                }}
+              >
+                {headerUnreadCount !== null ? headerUnreadCount : "0"}
+              </Chip>
+            )
+          }
+          sx={{
+            mr: 1,
+            borderRadius: 4,
+          }}
+        >
+          Messages
+        </Button>
+      </BasicInfoTooltip> */}
 
       {userRole != "user" && (
         <BasicInfoTooltip title="Reports" placement="bottom" variant="soft">
diff --git a/src/components/Header/UserMenu.jsx b/src/components/Header/UserMenu.jsx
index fdec2f6..1889ca9 100644
--- a/src/components/Header/UserMenu.jsx
+++ b/src/components/Header/UserMenu.jsx
@@ -1,23 +1,30 @@
 import React from "react";
 
+import { useNavigate, useLocation } from "react-router-dom";
+
 import { useDispatch, useSelector } from "react-redux";
 
 import { useQueryClient, useIsFetching } from "@tanstack/react-query";
 
+import Chip from "@mui/joy/Chip";
 import Button from "@mui/joy/Button";
 import IconButton from "@mui/joy/IconButton";
 import CircularProgress from "@mui/joy/CircularProgress";
+import Badge from "@mui/joy/Badge";
 
 import CachedIcon from "@mui/icons-material/Cached";
 import LogoutIcon from "@mui/icons-material/Logout";
-import ArrowDropDown from "@mui/icons-material/ArrowDropDown";
+import DashboardIcon from "@mui/icons-material/Dashboard";
+import FlagIcon from "@mui/icons-material/Flag";
+import HowToRegIcon from "@mui/icons-material/HowToReg";
+import NotificationsIcon from "@mui/icons-material/Notifications";
 
 // user role icons
 import VerifiedUserIcon from "@mui/icons-material/VerifiedUser";
 import SupervisedUserCircleIcon from "@mui/icons-material/SupervisedUserCircle";
 import AccountBoxIcon from "@mui/icons-material/AccountBox";
 
-import { logoutCurrent, selectUsers } from "../../reducers/accountReducer";
+import { logoutCurrent, selectUsers } from "../../redux/reducer/accountReducer";
 
 import { useLemmyHttp, refreshAllData } from "../../hooks/useLemmyHttp";
 import { getSiteData } from "../../hooks/getSiteData";
@@ -26,10 +33,14 @@ import { BasicInfoTooltip } from "../Tooltip.jsx";
 
 import { parseActorId } from "../../utils.js";
 import AccountMenu from "./AccountMenu.jsx";
+import NotificationMenu from "./NotificationMenu.jsx";
 
-import { selectAccountIsLoading } from "../../reducers/accountReducer";
+import { selectAccountIsLoading } from "../../redux/reducer/accountReducer";
 
 export default function UserMenu() {
+  const location = useLocation();
+  const navigate = useNavigate();
+
   const dispatch = useDispatch();
 
   const queryClient = useQueryClient();
@@ -74,6 +85,8 @@ export default function UserMenu() {
 
   return (
     <>
+      <NotificationMenu />
+
       <BasicInfoTooltip title="Reload all data" placement="bottom" variant="soft">
         <IconButton
           disabled={anythingLoading}
diff --git a/src/components/Messages/ChatMessage.jsx b/src/components/Messages/ChatMessage.jsx
new file mode 100644
index 0000000..ce7e8bd
--- /dev/null
+++ b/src/components/Messages/ChatMessage.jsx
@@ -0,0 +1,167 @@
+import React from "react";
+
+import { useQueryClient } from "@tanstack/react-query";
+
+import Box from "@mui/joy/Box";
+import Tooltip from "@mui/joy/Tooltip";
+import ListItem from "@mui/joy/ListItem";
+import ListItemContent from "@mui/joy/ListItemContent";
+import Card from "@mui/joy/Card";
+import CardContent from "@mui/joy/CardContent";
+
+import Avatar from "@mui/joy/Avatar";
+import Button from "@mui/joy/Button";
+import List from "@mui/joy/List";
+import IconButton from "@mui/joy/IconButton";
+import Menu from "@mui/joy/Menu";
+import MenuItem from "@mui/joy/MenuItem";
+import MenuButton from "@mui/joy/MenuButton";
+import Apps from "@mui/icons-material/Apps";
+import Dropdown from "@mui/joy/Dropdown";
+
+import { getSiteData } from "../../hooks/getSiteData";
+import { useLemmyHttpAction } from "../../hooks/useLemmyHttp";
+
+import { MomentAdjustedTimeAgo, UserAvatar, SquareChip } from "../Display.jsx";
+import { PersonMetaTitle, PersonMetaLine, CommunityMetaLine } from "../Shared/ActorMeta.jsx";
+
+import SafeMD from "../Shared/SafeMD.jsx";
+
+export default function ChatMessage({ message, showTime = true }) {
+  const queryClient = useQueryClient();
+  const { baseUrl, siteData, localPerson, userRole } = getSiteData();
+
+  // mark as read
+  const {
+    isLoading: pmReadIsLoading,
+    isSuccess: pmReadIsSuccess,
+    data: pmReadData,
+    error: pmReadError,
+    callAction: pmReadCallAction,
+  } = useLemmyHttpAction("markPrivateMessageAsRead");
+
+  const { creator, recipient, private_message } = message;
+
+  const messageIsMine = creator.id == localPerson.id;
+
+  React.useEffect(() => {
+    if (pmReadIsSuccess) {
+      queryClient.invalidateQueries({ queryKey: ["lemmyHttp", localPerson.id, "getPrivateMessages"] });
+      queryClient.invalidateQueries({ queryKey: ["lemmyHttp", localPerson.id, "getUnreadCount"] });
+    }
+  }, [pmReadData]);
+
+  return (
+    <ListItem
+      sx={{
+        display: "flex",
+        alignItems: messageIsMine ? "flex-end" : "flex-start",
+        textAlign: messageIsMine ? "left" : "right",
+        justifyContent: messageIsMine ? "flex-end" : "flex-start",
+        flexDirection: "column",
+        gap: 0,
+      }}
+    >
+      <ListItemContent
+        sx={{
+          // position: "absolute",
+          display: "flex",
+          right: messageIsMine ? "15px" : "unset",
+          left: messageIsMine ? "unset" : "25px",
+          top: "0",
+          mt: 0,
+          mb: 0.5,
+          px: 1,
+        }}
+      >
+        <UserAvatar source={creator.avatar} />
+        <Box
+          sx={{
+            pr: 1,
+            pl: 1,
+          }}
+        >
+          <PersonMetaTitle display="outline" creator={creator} />
+        </Box>
+      </ListItemContent>
+
+      <Box
+        sx={{
+          display: "flex",
+          // mt: 3,
+          flexDirection: "column",
+          width: "80%",
+          textAlign: messageIsMine ? "right" : "left",
+        }}
+      >
+        <Card
+          variant="soft"
+          color={private_message.read !== true ? "primary" : "neutral"}
+          // onClick={
+          //   messageIsMine
+          //     ? null
+          //     : () => {
+          //         pmReadCallAction({
+          //           private_message_id: private_message.id,
+          //           read: !private_message.read,
+          //         });
+          //       }
+          // }
+          sx={{
+            position: "relative",
+            // cursor: messageIsMine ? "default" : "pointer",
+            p: 1,
+            m: 0,
+          }}
+        >
+          <Tooltip
+            // open={true}
+            // title={!messageIsMine && (private_message.read === true ? "Mark Unread" : "Mark Read")}
+            title={
+              <Box>
+                {!messageIsMine && (
+                  <Button
+                    variant="soft"
+                    size="md"
+                    onClick={() => {
+                      pmReadCallAction({
+                        private_message_id: private_message.id,
+                        read: !private_message.read,
+                      });
+                    }}
+                  >
+                    {private_message.read === true ? "Mark Unread" : "Mark Read"}
+                  </Button>
+                )}
+              </Box>
+            }
+            placement={messageIsMine ? "top-start" : "top-end"}
+            variant="soft"
+          >
+            <CardContent
+              sx={{
+                textAlign: "left",
+              }}
+            >
+              <SafeMD>{private_message.content}</SafeMD>
+            </CardContent>
+          </Tooltip>
+        </Card>
+      </Box>
+
+      <Box
+        sx={{
+          display: "flex",
+          justifyContent: messageIsMine ? "flex-start" : "flex-end",
+          alignItems: messageIsMine ? "flex-start" : "flex-end",
+          right: messageIsMine ? "0" : "unset",
+          left: messageIsMine ? "unset" : "0",
+          px: 1,
+          fontSize: 12,
+        }}
+      >
+        <MomentAdjustedTimeAgo fromNow children={private_message.published} />
+      </Box>
+    </ListItem>
+  );
+}
diff --git a/src/components/Messages/PMSheet.jsx b/src/components/Messages/PMSheet.jsx
new file mode 100644
index 0000000..052ac71
--- /dev/null
+++ b/src/components/Messages/PMSheet.jsx
@@ -0,0 +1,264 @@
+import React, { useState, useEffect, useRef } from "react";
+
+import { useQueryClient } from "@tanstack/react-query";
+
+import Box from "@mui/joy/Box";
+import Sheet from "@mui/joy/Sheet";
+import Divider from "@mui/joy/Divider";
+import List from "@mui/joy/List";
+import Button from "@mui/joy/Button";
+import Textarea from "@mui/joy/Textarea";
+import Typography from "@mui/joy/Typography";
+import IconButton from "@mui/joy/IconButton";
+
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+
+import { getSiteData } from "../../hooks/getSiteData";
+import { useLemmyHttpAction } from "../../hooks/useLemmyHttp";
+
+import { PersonMetaTitle, PersonMetaLine, CommunityMetaLine } from "../Shared/ActorMeta.jsx";
+
+import ChatMessage from "./ChatMessage.jsx";
+
+export default function PMSheet({ selectedChat }) {
+  const queryClient = useQueryClient();
+  const { baseUrl, siteData, localPerson, userRole } = getSiteData();
+
+  const messagesListRef = useRef(null);
+
+  const [message, setMessage] = useState("");
+  const [userId, setUserId] = useState(null);
+
+  const {
+    isLoading: sendPMIsLoading,
+    isSuccess: sendPMIsSuccess,
+    data: sendPMData,
+    error: sendPMError,
+    callAction: sendPMCallAction,
+  } = useLemmyHttpAction("createPrivateMessage");
+
+  const onMessageChange = (e) => {
+    setMessage(e.target.value);
+  };
+
+  const handleSendMessage = async () => {
+    console.log("response", selectedChat, message);
+
+    if (message == "") return;
+
+    sendPMCallAction({
+      recipient_id: selectedChat.person.id,
+      content: message,
+    });
+
+    setMessage("");
+  };
+
+  // invalidate pms on send success
+  React.useEffect(() => {
+    if (sendPMIsSuccess) {
+      setUserId(null); // force scroll to bottom
+      queryClient.invalidateQueries({ queryKey: ["lemmyHttp", localPerson.id, "getPrivateMessages"] });
+    }
+  }, [sendPMData]);
+
+  // scroll to bottom when a new user is loaded
+  const scrollToBottom = () => {
+    // messagesListRef.current?.scrollIntoView({
+    //   block: "nearest",
+    //   inline: "center",
+    //   behavior: "smooth",
+    //   alignToTop: false,
+    // });
+    messagesListRef.current?.scrollIntoView(false);
+  };
+
+  // TODO this seems a bit hacky, but it works to scroll the chat down to the bottom
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      if (selectedChat !== null) {
+        // if the user is not the currently loaded one
+        if (selectedChat?.person?.id !== userId) {
+          console.log("selectedChat changed userid", userId, selectedChat?.person?.id);
+          scrollToBottom();
+          setUserId(selectedChat?.person?.id);
+        }
+      }
+    }, 1);
+
+    return () => clearTimeout(timer);
+  }, [selectedChat]);
+
+  if (!selectedChat) {
+    return (
+      <Sheet
+        sx={{
+          p: 1,
+          ml: 1,
+          borderRadius: 6,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: 1,
+          maxHeight: "650px",
+          flexGrow: 1,
+        }}
+      >
+        <ArrowBackIcon sx={{ fontSize: 64 }} />
+        <Typography sx={{ fontWeight: "bold" }}>No conversation selected, phoose select one</Typography>
+      </Sheet>
+    );
+  }
+
+  return (
+    <Sheet
+      sx={{
+        p: 0,
+        ml: 1,
+        borderRadius: 6,
+        display: "flex",
+        flexDirection: "column",
+        gap: 0,
+        maxHeight: "650px",
+        flexGrow: 1,
+      }}
+    >
+      <Box
+        sx={{
+          p: 1,
+          display: "flex",
+          flexDirection: "row",
+          alignItems: "space-between",
+          justifyContent: "space-between",
+        }}
+      >
+        <PersonMetaLine display="outline" creator={selectedChat.person} />
+        <ConversationActions selectedChat={selectedChat} />
+      </Box>
+
+      <Divider />
+
+      <List
+        // ref={messagesListRef}
+        sx={{
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          flexDirection: "column",
+          minHeight: "200px",
+          overflow: "auto",
+          p: 0,
+          m: 0,
+          gap: 0.5,
+        }}
+      >
+        {selectedChat.messages.map((message, index) => (
+          <ChatMessage key={index} message={message} />
+        ))}
+        <div ref={messagesListRef} />
+      </List>
+
+      <Divider />
+
+      <Box sx={{}}>
+        <Textarea
+          sx={{
+            border: 0,
+          }}
+          placeholder="Type message here…"
+          minRows={2}
+          value={message}
+          onChange={onMessageChange}
+          onKeyDown={(e) => {
+            // ctrl+enter to send
+            if (e.ctrlKey && e.key === "Enter") {
+              handleSendMessage();
+            }
+          }}
+          endDecorator={
+            <Box
+              sx={{
+                display: "flex",
+                gap: "var(--Textarea-paddingBlock)",
+                pt: "var(--Textarea-paddingBlock)",
+                borderTop: "1px solid",
+                borderColor: "divider",
+                flex: "auto",
+              }}
+            >
+              <Button
+                loading={sendPMIsLoading}
+                disabled={message == ""}
+                onClick={handleSendMessage}
+                sx={{ ml: "auto" }}
+              >
+                Send
+              </Button>
+            </Box>
+          }
+        />
+      </Box>
+    </Sheet>
+  );
+}
+
+import MarkChatReadIcon from "@mui/icons-material/MarkChatRead";
+function ConversationActions({ selectedChat }) {
+  const queryClient = useQueryClient();
+  // currently, the api only supports `mark_all_as_read` and not a specific conversation or PM
+  // we have to run thru the ones for this conversation and mark them as read
+
+  const { baseUrl, siteData, localPerson, userRole } = getSiteData();
+
+  // mark as read
+  const {
+    isLoading: pmReadIsLoading,
+    isSuccess: pmReadIsSuccess,
+    data: pmReadData,
+    error: pmReadError,
+    callAction: pmReadCallAction,
+  } = useLemmyHttpAction("markPrivateMessageAsRead");
+
+  // mark all messages in this conversation as read
+  const markAllRead = async () => {
+    for (const message of selectedChat.messages) {
+      if (!message.private_message.read) {
+        console.log("marking as read", message);
+        pmReadCallAction({
+          private_message_id: message.private_message.id,
+          read: true,
+        });
+      }
+    }
+  };
+
+  // refresh when returned ok
+  React.useEffect(() => {
+    if (pmReadIsSuccess) {
+      queryClient.invalidateQueries({ queryKey: ["lemmyHttp", localPerson.id, "getPrivateMessages"] });
+      queryClient.invalidateQueries({ queryKey: ["lemmyHttp", localPerson.id, "getUnreadCount"] });
+    }
+  }, [pmReadData]);
+
+  const hasUnread = React.useMemo(() => {
+    return selectedChat.messages.some((message) => !message.private_message.read);
+  }, [selectedChat]);
+
+  return (
+    <Box>
+      {/* <IconButton size="small" tooltip="Report Conversation">
+        <DeleteIcon fontSize="small" />
+      </IconButton> */}
+      <Button
+        disabled={!hasUnread}
+        size="sm"
+        tooltip="Mark All Read"
+        startDecorator={<MarkChatReadIcon />}
+        onClick={markAllRead}
+      >
+        Mark All Read
+      </Button>
+    </Box>
+  );
+}
diff --git a/src/components/Messages/ThreadedPMs.jsx b/src/components/Messages/ThreadedPMs.jsx
new file mode 100644
index 0000000..ee21bd5
--- /dev/null
+++ b/src/components/Messages/ThreadedPMs.jsx
@@ -0,0 +1,252 @@
+import React from "react";
+
+import { useNavigate, useParams } from "react-router-dom";
+
+import Box from "@mui/joy/Box";
+import Avatar from "@mui/joy/Avatar";
+import List from "@mui/joy/List";
+import Button from "@mui/joy/Button";
+import ListItemButton from "@mui/joy/ListItemButton";
+import ListItemContent from "@mui/joy/ListItemContent";
+import ListItemDecorator from "@mui/joy/ListItemDecorator";
+import Typography from "@mui/joy/Typography";
+import Badge from "@mui/joy/Badge";
+import CircularProgress from "@mui/joy/CircularProgress";
+
+import SoapIcon from "@mui/icons-material/Soap";
+
+import { getSiteData } from "../../hooks/getSiteData";
+import useLemmyInfinite from "../../hooks/useLemmyInfinite";
+
+import { PersonMetaTitle } from "../Shared/ActorMeta.jsx";
+
+import PMSheet from "./PMSheet.jsx";
+
+function ConversationList({ flatConversations, selectedChat, setSelectedChatUser }) {
+  return (
+    <List aria-labelledby="ellipsis-list-demo" sx={{ "--ListItemDecorator-size": "56px", p: 0, gap: 0.5 }}>
+      {flatConversations &&
+        flatConversations.length != 0 &&
+        flatConversations.map((conversation, index) => {
+          console.log("conversation", conversation);
+          return (
+            <ListItemButton
+              key={index}
+              onClick={() => setSelectedChatUser(conversation.person)}
+              // variant="outlined"
+              variant={selectedChat && selectedChat.personFQUN == conversation.personFQUN ? "solid" : "soft"}
+              sx={{
+                p: 1,
+                cursor: "pointer",
+                borderRadius: 6,
+              }}
+            >
+              <Badge
+                invisible={conversation.hasUnread === false}
+                anchorOrigin={{
+                  vertical: "top",
+                  horizontal: "left",
+                }}
+              >
+                <ListItemDecorator>
+                  <Avatar src={conversation.person.avatar} />
+                </ListItemDecorator>
+              </Badge>
+              <ListItemContent>
+                <Typography level="title-sm" component="div" noWrap>
+                  <PersonMetaTitle noAvatar noLink display="outline" creator={conversation.person} />
+                </Typography>
+                <Typography level="body-sm" component="div" noWrap>
+                  {conversation.lastMessage.content}
+                </Typography>
+              </ListItemContent>
+            </ListItemButton>
+          );
+        })}
+    </List>
+  );
+}
+
+export default function ThreadedPMs({ pms }) {
+  const navigate = useNavigate();
+  const routeParams = useParams();
+
+  const { baseUrl, siteData, localPerson, userRole } = getSiteData();
+
+  const {
+    isLoading: privateMessagesLoading,
+    isFetching: privateMessagesFetching,
+    isFetchingNextPage: privateMessagesFetchingNextPage,
+    hasNextPage: privateMessagesHasNextPage,
+    fetchNextPage: privateMessagesFetchNextPage,
+    refetch: privateMessagesRefetch,
+    error: privateMessagesError,
+    data: privateMessagesData,
+  } = useLemmyInfinite({
+    callLemmyMethod: "getPrivateMessages",
+    formData: {
+      unread_only: false, // we still need to display other messages in conversation which might not be read
+    },
+    countResultElement: "private_messages",
+  });
+
+  // because the pm messages might include additoonal people, we wanna map it into a threaded view of personn-chat too
+
+  // this should be an object with the key being the person id, and the value being the chat data
+  const flatConversations = React.useMemo(() => {
+    if (privateMessagesLoading) return null;
+    if (!privateMessagesData) return null;
+
+    console.log("privateMessagesData", privateMessagesData);
+
+    let allMessages = [];
+    privateMessagesData.pages?.forEach((page) => {
+      allMessages = [...allMessages, ...page.data];
+    });
+
+    console.log("allMessages", allMessages);
+
+    // get all the unique people and sort conversations, including the last message with newest first
+    let sortedConversations = {}; // key use `creator.id`
+
+    allMessages.forEach((message) => {
+      // console.log("message", message);
+
+      const currentUserCreatedMessage = message.creator.id == localPerson.id;
+      const otherPerson = message.creator.id == localPerson.id ? message.recipient : message.creator;
+
+      // check if there is an entry for this person yet
+      if (!sortedConversations[otherPerson.id]) {
+        sortedConversations[otherPerson.id] = {
+          person: otherPerson,
+          personFQUN: `${otherPerson.name}@${otherPerson.actor_id.split("/")[2]}`,
+          messages: [],
+          hasUnread: false,
+        };
+      }
+
+      if (message.private_message.read == false) {
+        sortedConversations[otherPerson.id].hasUnread = true;
+      }
+
+      sortedConversations[otherPerson.id].messages.push(message);
+    });
+
+    // sort all the messages in each conversation and add the last message
+    let flatConversations = [];
+    Object.keys(sortedConversations).forEach((personId) => {
+      const conversation = sortedConversations[personId];
+
+      // sort the messages by newest first
+      conversation.messages.sort((a, b) => {
+        return (
+          new Date(b.private_message.published).getTime() - new Date(a.private_message.published).getTime()
+        );
+      });
+
+      // add the last message to the conversation
+      conversation.lastMessage = conversation.messages[0].private_message;
+
+      // now put the messages in oldest-first order
+      conversation.messages = conversation.messages.sort((a, b) => {
+        return (
+          new Date(a.private_message.published).getTime() - new Date(b.private_message.published).getTime()
+        );
+      });
+
+      flatConversations.push(conversation);
+    });
+
+    console.log("flatConversations", flatConversations);
+
+    // sort them all by last message
+    flatConversations.sort((a, b) => {
+      return new Date(b.lastMessage.published).getTime() - new Date(a.lastMessage.published).getTime();
+    });
+
+    return flatConversations;
+  }, [privateMessagesData]);
+
+  const setSelectedChatUser = (person) => {
+    navigate(`/messages/${person.name}@${person.actor_id.split("/")[2]}`);
+  };
+
+  const selectedChat = React.useMemo(() => {
+    if (!flatConversations) return null;
+    if (!routeParams.user) return null;
+
+    return flatConversations.find((pm) => pm.personFQUN == routeParams.user);
+  }, [flatConversations, routeParams.user]);
+
+  if (privateMessagesLoading) {
+    return (
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          gap: 4,
+          p: 2,
+          mt: 8,
+          borderRadius: 4,
+          // border: "1px solid",
+          // borderColor: "grey.500",
+        }}
+      >
+        <CircularProgress size="lg" color="primary" />
+        <Box sx={{ fontWeight: "bold" }}>Loading...</Box>
+      </Box>
+    );
+  }
+
+  if (!flatConversations || flatConversations?.length == 0) {
+    return (
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: 2,
+          mt: 8,
+        }}
+      >
+        <SoapIcon sx={{ fontSize: 64 }} />
+        <Box sx={{ fontWeight: "bold" }}>You have no PMs!</Box>
+      </Box>
+    );
+  }
+
+  return (
+    <Box sx={{ width: "100%", display: "flex", flexDirection: "row", overflow: "hidden" }}>
+      {/* pm list view */}
+      <Box sx={{ width: 300 }}>
+        <ConversationList
+          flatConversations={flatConversations}
+          selectedChat={selectedChat}
+          setSelectedChatUser={setSelectedChatUser}
+        />
+        {privateMessagesHasNextPage && (
+          <Box
+            sx={{
+              display: "flex",
+              justifyContent: "center",
+              mt: 2,
+            }}
+          >
+            <Button
+              variant="outlined"
+              onClick={() => privateMessagesFetchNextPage()}
+              loading={privateMessagesFetchingNextPage}
+            >
+              Load More
+            </Button>
+          </Box>
+        )}
+      </Box>
+
+      {/* pm chat view */}
+      <PMSheet selectedChat={selectedChat} />
+    </Box>
+  );
+}
diff --git a/src/components/Shared/ActorMeta.jsx b/src/components/Shared/ActorMeta.jsx
index a08fec5..3a33cb9 100644
--- a/src/components/Shared/ActorMeta.jsx
+++ b/src/components/Shared/ActorMeta.jsx
@@ -23,11 +23,10 @@ import { PersonMetaChips } from "./UserChips.jsx";
 
 import {
   setConfigItem,
-  setConfigItemJson,
   selectBlurNsfw,
   selectShowAvatars,
   selectNsfwWords,
-} from "../../reducers/configReducer";
+} from "../../redux/reducer/configReducer";
 
 export function PersonMetaLine({ creator, by = false, sx }) {
   const { baseUrl, siteData, localPerson, userRole } = getSiteData();
@@ -66,13 +65,7 @@ export function PersonMetaLine({ creator, by = false, sx }) {
         {creator.display_name && (
           <Typography sx={{ fontSize: "15px", px: 1 }}>{creator.display_name}</Typography>
         )}
-        <Tooltip
-          placement="top-start"
-          variant="outlined"
-          title={<UserTooltip user={creator} />}
-          arrow
-          // disableInteractive
-        >
+        <Tooltip placement="top-start" variant="outlined" title={<UserTooltip user={creator} />} arrow>
           <Link href={creator.actor_id} target="_blank" rel="noopener noreferrer" sx={{ pb: 0.7, pl: 1 }}>
             <Typography component="span" sx={{ mr: 0.25 }}>
               {creator.name}
@@ -86,33 +79,56 @@ export function PersonMetaLine({ creator, by = false, sx }) {
 
       {/* Post Author Meta */}
       <PersonMetaChips person={creator} />
-      {/* <Box sx={{ display: "flex", gap: 1 }}>
-        {baseUrl != actorInstanceBaseUrl && <FediverseChipLink href={fediverseUserLink} size="sm" />}
+    </Box>
+  );
+}
 
-        {creator.admin && (
-          <SquareChip
-            color={"primary"}
-            tooltip="User is site admin"
-            iconOnly={<SecurityIcon fontSize="small" />}
-          />
-        )}
+export function PersonMetaTitle({ creator, sx }) {
+  const { baseUrl, siteData, localPerson, userRole } = getSiteData();
 
-        {creator.banned && (
-          <SquareChip color={"danger"} tooltip="User is banned" iconOnly={<BlockIcon fontSize="small" />} />
-        )}
+  const actorInstanceBaseUrl = creator.actor_id.split("/")[2];
 
-        {creator.bot_account && (
-          <SquareChip
-            color={"warning"}
-            tooltip="User is bot account"
-            iconOnly={<SmartToyIcon fontSize="small" />}
-          />
+  // console.log("creator", creator);
+
+  let localUserLink = `https://${baseUrl}/u/${creator.name}`;
+  if (baseUrl != actorInstanceBaseUrl) localUserLink = `${localUserLink}@${actorInstanceBaseUrl}`;
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "row",
+        gap: 1,
+        py: 0.0,
+        ...sx,
+      }}
+    >
+      <Box
+        sx={{
+          fontSize: "14px",
+          overflow: "hidden",
+          display: "flex",
+          flexDirection: "row",
+          alignItems: "center",
+        }}
+      >
+        {creator.display_name && (
+          <Typography sx={{ fontSize: "14px", px: 1 }}>{creator.display_name}</Typography>
         )}
 
-        {creator.deleted && (
-          <SquareChip color={"danger"} tooltip="User is deleted" iconOnly={<DeleteIcon fontSize="small" />} />
+        {/* <Link href={creator.actor_id} target="_blank" rel="noopener noreferrer" sx={{ pb: 0.7, pl: 1 }}> */}
+        <Typography component="span" sx={{ mr: 0.25 }}>
+          {creator.name}
+        </Typography>
+
+        {baseUrl != actorInstanceBaseUrl && (
+          <Typography component="span">@{creator.actor_id.split("/")[2]}</Typography>
         )}
-      </Box> */}
+        {/* </Link> */}
+      </Box>
+
+      {/* Post Author Meta */}
+      <PersonMetaChips person={creator} />
     </Box>
   );
 }
diff --git a/src/components/Shared/Icons.jsx b/src/components/Shared/Icons.jsx
index fadf6d0..b84e037 100644
--- a/src/components/Shared/Icons.jsx
+++ b/src/components/Shared/Icons.jsx
@@ -5,22 +5,38 @@ import VerifiedUserIcon from "@mui/icons-material/VerifiedUser";
 import SupervisedUserCircleIcon from "@mui/icons-material/SupervisedUserCircle";
 import AccountBoxIcon from "@mui/icons-material/AccountBox";
 
+export const RoleIcons = {
+  user: (...props) => <AccountBoxIcon {...props} />,
+  mod: (...props) => <SupervisedUserCircleIcon {...props} />,
+  admin: (...props) => <VerifiedUserIcon {...props} />,
+
+  UserIcon: AccountBoxIcon,
+  ModIcon: SupervisedUserCircleIcon,
+  AdminIcon: VerifiedUserIcon,
+};
+
 // content icons
+import StickyNote2Icon from "@mui/icons-material/StickyNote2";
 import ForumIcon from "@mui/icons-material/Forum";
-import FormatQuoteIcon from "@mui/icons-material/FormatQuote";
+import DraftsIcon from "@mui/icons-material/Drafts";
 
 // approval icons
 import HelpIcon from "@mui/icons-material/Help";
 
-export const RoleIcons = {
-  user: (...props) => <AccountBoxIcon {...props} />,
-  mod: (...props) => <SupervisedUserCircleIcon {...props} />,
-  admin: (...props) => <VerifiedUserIcon {...props} />,
+export const ContentIcons = {
+  PostIcon: StickyNote2Icon,
+  CommentIcon: ForumIcon,
+  PMIcon: DraftsIcon,
+  ApprovalIcon: HelpIcon,
 };
 
-export const ContentIcons = {
-  post: (...props) => <ForumIcon {...props} />,
-  comment: (...props) => <FormatQuoteIcon {...props} />,
-  pm: (...props) => <ForumIcon {...props} />,
-  approval: (...props) => <HelpIcon {...props} />,
+// notification icons reply mention pm
+import ReplyIcon from "@mui/icons-material/Reply";
+import ChatIcon from "@mui/icons-material/Chat";
+import EmailIcon from "@mui/icons-material/Email";
+
+export const NotificationIcons = {
+  ReplyIcon,
+  MentionIcon: ChatIcon,
+  PMIcon: EmailIcon,
 };
diff --git a/src/components/Shared/SafeMD.jsx b/src/components/Shared/SafeMD.jsx
new file mode 100644
index 0000000..ca8bce8
--- /dev/null
+++ b/src/components/Shared/SafeMD.jsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+import removeMd from "remove-markdown";
+
+import Typography from "@mui/joy/Typography";
+
+// time in formats `2023-07-14T04:12:07.720101` are in GMT and must be adjusted to unix epoch for moment display// replace .720101 with Z
+export default function SafeMD({ children, ...props }) {
+  const stripped = removeMd(children);
+
+  return (
+    <Typography
+      sx={{
+        whiteSpace: "pre-wrap",
+      }}
+      {...props}
+    >
+      {stripped}
+    </Typography>
+  );
+}
diff --git a/src/components/Shared/UserChips.jsx b/src/components/Shared/UserChips.jsx
index 7da6adc..562c378 100644
--- a/src/components/Shared/UserChips.jsx
+++ b/src/components/Shared/UserChips.jsx
@@ -49,7 +49,7 @@ export function SiteAdminChip({ person }) {
     <SquareChip
       variant="outlined"
       color={"danger"}
-      tooltip="User is site admin"
+      tooltip="Site Admin"
       iconOnly={<SecurityIcon fontSize="small" />}
     />
   );
@@ -58,22 +58,16 @@ export function SiteAdminChip({ person }) {
 export function BannedUserChip({ person }) {
   if (!person.banned) return null;
 
-  return <SquareChip color={"danger"} tooltip="User is banned" iconOnly={<BlockIcon fontSize="small" />} />;
+  return <SquareChip color={"danger"} tooltip="Banned" iconOnly={<BlockIcon fontSize="small" />} />;
 }
 
 export function BotAccountChip({ person }) {
   if (!person.bot_account) return null;
 
-  return (
-    <SquareChip
-      color={"warning"}
-      tooltip="User is bot account"
-      iconOnly={<SmartToyIcon fontSize="small" />}
-    />
-  );
+  return <SquareChip color={"warning"} tooltip="Bot Account" iconOnly={<SmartToyIcon fontSize="small" />} />;
 }
 export function DeletedUserChip({ person }) {
   if (!person.deleted) return null;
 
-  return <SquareChip color={"danger"} tooltip="User is deleted" iconOnly={<DeleteIcon fontSize="small" />} />;
+  return <SquareChip color={"danger"} tooltip="Deleted User" iconOnly={<DeleteIcon fontSize="small" />} />;
 }
diff --git a/src/components/Tooltip.jsx b/src/components/Tooltip.jsx
index 0675303..721bec1 100644
--- a/src/components/Tooltip.jsx
+++ b/src/components/Tooltip.jsx
@@ -24,11 +24,10 @@ import { PersonMetaChips } from "./Shared/UserChips.jsx";
 
 import {
   setConfigItem,
-  setConfigItemJson,
   selectBlurNsfw,
   selectShowAvatars,
   selectNsfwWords,
-} from "../reducers/configReducer";
+} from "../redux/reducer/configReducer";
 
 export const UserTooltip = ({ user, ...props }) => {
   console.log("user", user);
@@ -97,6 +96,7 @@ export const UserTooltip = ({ user, ...props }) => {
               (action) =>
                 userModActionsData[action].length > 0 && (
                   <ListItem
+                    key={action}
                     fontSize="sm"
                     endAction={<Chip color="danger">{userModActionsData[action].length}</Chip>}
                   >
diff --git a/src/hooks/getSiteData.js b/src/hooks/getSiteData.js
index b27a2ac..d9c0f15 100644
--- a/src/hooks/getSiteData.js
+++ b/src/hooks/getSiteData.js
@@ -1,7 +1,7 @@
 import { useMemo } from "react";
 
 import { useSelector } from "react-redux";
-import { selectCurrentUser } from "../reducers/accountReducer";
+import { selectCurrentUser } from "../redux/reducer/accountReducer";
 
 // accessor for the site data returned at the time of login
 export function getSiteData() {
diff --git a/src/hooks/useLemmyHttp.js b/src/hooks/useLemmyHttp.js
index 7ea96f6..64b4cbb 100644
--- a/src/hooks/useLemmyHttp.js
+++ b/src/hooks/useLemmyHttp.js
@@ -7,7 +7,11 @@ import { getSiteData } from "../hooks/getSiteData";
 
 import { LemmyHttp } from "lemmy-js-client";
 
-import { selectCurrentUser, updateCurrentUserData, setAccountIsLoading } from "../reducers/accountReducer";
+import {
+  selectCurrentUser,
+  updateCurrentUserData,
+  setAccountIsLoading,
+} from "../redux/reducer/accountReducer";
 
 export function useLemmyHttp(callLemmyMethod, formData = {}) {
   const currentUser = useSelector(selectCurrentUser);
@@ -21,7 +25,6 @@ export function useLemmyHttp(callLemmyMethod, formData = {}) {
     return formDataArray;
   }, [formData]);
 
-
   const { baseUrl, siteData, localPerson, userRole } = getSiteData();
 
   const { isSuccess, isLoading, isError, error, data, isFetching, refetch } = useQuery({
diff --git a/src/hooks/useLemmyInfinite.js b/src/hooks/useLemmyInfinite.js
index a7d5700..a372258 100644
--- a/src/hooks/useLemmyInfinite.js
+++ b/src/hooks/useLemmyInfinite.js
@@ -7,7 +7,7 @@ import { getSiteData } from "../hooks/getSiteData";
 import { useSelector } from "react-redux";
 
 import { LemmyHttp } from "lemmy-js-client";
-import { selectCurrentUser } from "../reducers/accountReducer";
+import { selectCurrentUser } from "../redux/reducer/accountReducer";
 
 export default function useLemmyInfinite({
   callLemmyMethod,
diff --git a/src/hooks/useLemmyModLog.js b/src/hooks/useLemmyModLog.js
index 1aeaa0f..f9be9bc 100644
--- a/src/hooks/useLemmyModLog.js
+++ b/src/hooks/useLemmyModLog.js
@@ -10,7 +10,7 @@ import { LemmyHttp } from "lemmy-js-client";
 
 import useLemmyInfinite from "./useLemmyInfinite";
 import { getModLogTypeNames } from "../utils";
-import { selectModLogCommunityId, selectModLogType } from "../reducers/configReducer";
+import { selectModLogCommunityId, selectModLogType } from "../redux/reducer/configReducer";
 
 // gets paginated / infinite list of reports from lemmy
 export default function useLemmyModLog() {
diff --git a/src/hooks/useLemmyReports.js b/src/hooks/useLemmyReports.js
index a17a5c0..8a3d0b4 100644
--- a/src/hooks/useLemmyReports.js
+++ b/src/hooks/useLemmyReports.js
@@ -15,7 +15,7 @@ import {
   selectOrderBy,
   selectShowRemoved,
   selectShowResolved,
-} from "../reducers/configReducer";
+} from "../redux/reducer/configReducer";
 
 // gets paginated / infinite list of reports from lemmy
 export default function useLemmyReports() {
diff --git a/src/pages/Actions.jsx b/src/pages/Actions.jsx
index ad7304b..56cdc50 100644
--- a/src/pages/Actions.jsx
+++ b/src/pages/Actions.jsx
@@ -19,7 +19,7 @@ import { getSiteData } from "../hooks/getSiteData";
 import { parseActorId } from "../utils";
 
 import ModLogAccordians from "../components/Activity/ModLogAccordians";
-import { selectModLogType } from "../reducers/configReducer";
+import { selectModLogType } from "../redux/reducer/configReducer";
 
 export default function Actions() {
   const { baseUrl, siteData, localPerson, userRole } = getSiteData();
diff --git a/src/pages/Approvals.jsx b/src/pages/Approvals.jsx
index b82b6b1..f320086 100644
--- a/src/pages/Approvals.jsx
+++ b/src/pages/Approvals.jsx
@@ -19,7 +19,7 @@ import useLemmyInfinite from "../hooks/useLemmyInfinite";
 import ApprovalsList from "../components/ApprovalsList.jsx";
 
 import { getSiteData } from "../hooks/getSiteData";
-import { selectHideReadApprovals } from "../reducers/configReducer";
+import { selectHideReadApprovals } from "../redux/reducer/configReducer";
 
 export default function Approvals() {
   const hideReadApprovals = useSelector(selectHideReadApprovals);
diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx
index ed2f748..f91f897 100644
--- a/src/pages/Login.jsx
+++ b/src/pages/Login.jsx
@@ -29,10 +29,10 @@ import {
   setCurrentUser,
   selectAccountIsLoading,
   selectUsers,
-} from "../reducers/accountReducer";
+} from "../redux/reducer/accountReducer";
 
 import { BasicInfoTooltip } from "../components/Tooltip.jsx";
-import { selectIsInElectron } from "../reducers/configReducer";
+import { selectIsInElectron } from "../redux/reducer/configReducer";
 
 export default function LoginForm() {
   const domainLock = window?.RuntimeConfig?.DomainLock != "" ? window?.RuntimeConfig?.DomainLock : false;
@@ -98,11 +98,13 @@ export default function LoginForm() {
           auth: auth.jwt,
         });
 
+        // save if they chose to
         if (saveSession) {
-          dispatch(addUser(instanceBase, auth.jwt, getSite));
-        } else {
-          dispatch(setCurrentUser(instanceBase, auth.jwt, getSite));
+          dispatch(addUser({ base: instanceBase, jwt: auth.jwt, site: getSite }));
         }
+
+        // always set the current user on login
+        dispatch(setCurrentUser({ base: instanceBase, jwt: auth.jwt, site: getSite }));
       } else {
         setLoginError(auth);
       }
@@ -311,8 +313,6 @@ export default function LoginForm() {
                       variant="outlined"
                       color="neutral"
                       onClick={async () => {
-                        // setIsLoading(true);
-
                         dispatch(setAccountIsLoading(true));
 
                         try {
@@ -322,36 +322,22 @@ export default function LoginForm() {
                             auth: user.jwt,
                           });
 
-                          if (!getSite.my_user) {
-                            // set instance base to the current instance
+                          if (!getSite || !getSite.my_user) {
+                            // set instance base to the current instance for easy login
                             setInstanceBase(user.base);
                             setUsername(user.site.my_user.local_user_view?.person.name);
 
                             throw new Error("jwt does not provide auth, re-authenticate");
                           }
 
-                          // if (saveSession) {
-                          //   dispatch(addUser(user.base, auth.jwt, getSite));
-                          // } else {
-                          // dispatch(setCurrentUser(user.base, auth.jwt, getSite));
-                          dispatch(setCurrentUser(user.base, user.jwt, getSite));
-                          // }
+                          // session is already saved
+                          dispatch(setCurrentUser({ base: user.base, jwt: user.jwt, site: getSite }));
                         } catch (e) {
                           setLoginError(typeof e == "string" ? e : e.message);
                         } finally {
                           // setIsLoading(false);
                           dispatch(setAccountIsLoading(false));
                         }
-
-                        // if (!expired) {
-
-                        // dispatch(setCurrentUser(user.base, user.jwt, user.site));
-                        // } else {
-                        //   // set the form values
-                        //   setInstanceBase(jwt.iss);
-                        //   setUsername(user.site.my_user?.local_user_view?.person.name);
-                        //   setPassword("");
-                        // }
                       }}
                     >
                       <ListItemContent
diff --git a/src/pages/Messages.jsx b/src/pages/Messages.jsx
new file mode 100644
index 0000000..d504178
--- /dev/null
+++ b/src/pages/Messages.jsx
@@ -0,0 +1,75 @@
+import React from "react";
+
+import Box from "@mui/joy/Box";
+import CircularProgress from "@mui/joy/CircularProgress";
+
+import { useLemmyHttp } from "../hooks/useLemmyHttp";
+
+import ThreadedPMs from "../components/Messages/ThreadedPMs.jsx";
+
+export default function Messages() {
+  const {
+    isLoading: unreadCountLoading,
+    isFetching: unreadCountFetching,
+    error: unreadCountError,
+    data: unreadCountData,
+  } = useLemmyHttp("getUnreadCount");
+
+  const headerUnreadCount = React.useMemo(() => {
+    if (!unreadCountData) return null;
+
+    console.log("unreadCountData", unreadCountData);
+    return unreadCountData.replies + unreadCountData.mentions + unreadCountData.private_messages;
+  }, [unreadCountData]);
+
+  if (unreadCountLoading) {
+    return (
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          gap: 4,
+          p: 2,
+          mt: 8,
+          borderRadius: 4,
+          // border: "1px solid",
+          // borderColor: "grey.500",
+        }}
+      >
+        <CircularProgress size="lg" color="primary" />
+        <Box sx={{ fontWeight: "bold" }}>Loading...</Box>
+      </Box>
+    );
+  }
+
+  if (unreadCountError) {
+    return (
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          gap: 4,
+          p: 2,
+          mt: 8,
+          borderRadius: 4,
+        }}
+      >
+        <Box sx={{ fontWeight: "bold" }}>Error!</Box>
+      </Box>
+    );
+  }
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        gap: 2,
+      }}
+    >
+      <ThreadedPMs />
+    </Box>
+  );
+}
diff --git a/src/reducers.js b/src/reducers.js
deleted file mode 100644
index ed5d396..0000000
--- a/src/reducers.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { combineReducers } from "redux";
-
-import accountReducer from "./reducers/accountReducer";
-import configReducer from "./reducers/configReducer";
-
-const reducers = combineReducers({
-  accountReducer,
-  configReducer,
-});
-
-export default reducers;
diff --git a/src/reducers/accountReducer.js b/src/redux/reducer/accountReducer.js
similarity index 65%
rename from src/reducers/accountReducer.js
rename to src/redux/reducer/accountReducer.js
index a698734..0972b95 100644
--- a/src/reducers/accountReducer.js
+++ b/src/redux/reducer/accountReducer.js
@@ -1,31 +1,4 @@
-export const setAccountIsLoading = (isLoading) => ({
-  type: "setAccountIsLoading",
-  payload: { isLoading },
-});
-
-export const addUser = (base, jwt, site) => ({
-  type: "addUser",
-  payload: { base, jwt, site },
-});
-
-export const setCurrentUser = (base, jwt, site) => ({
-  type: "setCurrentUser",
-  payload: { base, jwt, site },
-});
-
-export const updateCurrentUserData = (site) => ({
-  type: "updateCurrentUserData",
-  payload: { site },
-});
-
-export const logoutCurrent = () => ({
-  type: "logoutCurrent",
-});
-
-export const setUsers = (users) => ({
-  type: "setUsers",
-  payload: { users },
-});
+import { createSlice } from "@reduxjs/toolkit";
 
 // both stored arrays include the full data for the current user, since we might not always have a saved user
 const storedUsers = localStorage.getItem("users");
@@ -38,24 +11,23 @@ const initialState = {
   currentUser: storedCurrentUser ? JSON.parse(storedCurrentUser) : null, // { base, jwt, site }
 };
 
-const accountReducer = (state = initialState, action = {}) => {
-  switch (action.type) {
-    case "setAccountIsLoading":
-      return {
-        ...state,
-        accountIsLoading: action.payload.isLoading,
-      };
-
-    case "setUsers":
+const accountReducer = createSlice({
+  name: "accountReducer",
+  initialState,
+  reducers: {
+    setAccountIsLoading: (state, action) => {
+      state.accountIsLoading = action.payload;
+    },
+    setUsers: (state, action) => {
       if (action.payload) {
-        localStorage.setItem("users", JSON.stringify(action.payload.users));
+        localStorage.setItem("users", JSON.stringify(action.payload));
       }
       return {
         ...state,
-        users: action.payload.users,
+        users: action.payload,
       };
-
-    case "addUser":
+    },
+    addUser: (state, action) => {
       // remove old if they already exist
       const cleanUsers = state.users.filter(
         (u) =>
@@ -65,7 +37,6 @@ const accountReducer = (state = initialState, action = {}) => {
               action.payload.site.my_user.local_user_view.person.name
           ),
       );
-
       // add new, save to local storage
       const newUsers = [...cleanUsers, action.payload];
       if (action.payload == null) {
@@ -79,8 +50,9 @@ const accountReducer = (state = initialState, action = {}) => {
         users: newUsers,
         currentUser: action.payload,
       };
-
-    case "setCurrentUser":
+    },
+    setCurrentUser: (state, action) => {
+      console.log("setCurrentUser", action);
       if (action.payload === null) {
         localStorage.removeItem("currentUser");
       } else {
@@ -90,32 +62,38 @@ const accountReducer = (state = initialState, action = {}) => {
         ...state,
         currentUser: action.payload,
       };
-
-    // this should update the current user's `site` data
-    case "updateCurrentUserData":
+    },
+    updateCurrentUserData: (state, action) => {
       const newCurrentUser = {
         ...state.currentUser,
-        site: action.payload.site,
+        site: action.payload,
       };
       localStorage.setItem("currentUser", JSON.stringify(newCurrentUser));
       return {
         ...state,
         currentUser: newCurrentUser,
       };
-
-    case "logoutCurrent":
+    },
+    logoutCurrent: (state) => {
       localStorage.removeItem("currentUser");
       return {
         ...state,
         currentUser: null,
       };
+    },
+  },
+});
 
-    default:
-      return state;
-  }
-};
+export default accountReducer.reducer;
 
-export default accountReducer;
+export const {
+  setAccountIsLoading,
+  addUser,
+  updateCurrentUserData,
+  logoutCurrent,
+  setCurrentUser,
+  setUsers,
+} = accountReducer.actions;
 
 export const selectIsLoading = (state) => state.accountReducer.isLoading;
 export const selectAccountIsLoading = (state) => state.accountReducer.accountIsLoading;
diff --git a/src/reducers/configReducer.js b/src/redux/reducer/configReducer.js
similarity index 65%
rename from src/reducers/configReducer.js
rename to src/redux/reducer/configReducer.js
index afae92d..117681f 100644
--- a/src/reducers/configReducer.js
+++ b/src/redux/reducer/configReducer.js
@@ -1,26 +1,14 @@
-export function setConfigItem(configKey, configValue) {
-  console.log("setConfigItem", configKey, configValue);
-  return {
-    type: "setConfigItem",
-    payload: { configKey, configValue },
-  };
-}
-export function setConfigItemJson(configKey, configValue) {
-  console.log("setConfigItemJson", configKey, configValue);
-  return {
-    type: "setConfigItemJson",
-    payload: { configKey, configValue },
-  };
-}
+import { createSlice } from "@reduxjs/toolkit";
 
-function loadWithDefault(key, defaultValue = null, parseJson = true) {
+// load json stored values from localStorage with a default
+function loadWithDefault(key, defaultValue = null) {
   const storedValue = localStorage.getItem(key);
 
   if (storedValue) {
     try {
       return JSON.parse(storedValue);
     } catch (e) {
-      console.error("Error parsiong json config", e);
+      console.warn("no saved json config", key);
       return storedValue;
     }
   } else {
@@ -56,30 +44,40 @@ const initialState = {
   nsfwWords: loadWithDefault("config.nsfwWords", []),
 };
 
-const configReducer = (state = initialState, action = {}) => {
-  switch (action.type) {
-    case "setConfigItem":
-      const newConfig = {
-        ...state,
-        [action.payload.configKey]: action.payload.configValue,
-      };
-      localStorage.setItem(`config.${action.payload.configKey}`, action.payload.configValue);
-      return newConfig;
-
-    case "setConfigItemJson":
-      const newConfigJson = {
-        ...state,
-        [action.payload.configKey]: action.payload.configValue,
-      };
-      localStorage.setItem(`config.${action.payload.configKey}`, JSON.stringify(action.payload.configValue));
-      return newConfigJson;
-
-    default:
-      return state;
-  }
-};
-
-export default configReducer;
+const configReducer = createSlice({
+  name: "configReducer",
+  initialState,
+  reducers: {
+    setConfigItem: {
+      reducer(state, action) {
+        console.log("setConfigItem", action.payload);
+
+        const newConfig = {
+          ...state,
+          [action.payload.configKey]: action.payload.configValue,
+        };
+        localStorage.setItem(
+          `config.${action.payload.configKey}`,
+          JSON.stringify(action.payload.configValue),
+        );
+        return newConfig;
+      },
+      // extract the arguments from the action
+      prepare(...args) {
+        return {
+          payload: {
+            configKey: args[0],
+            configValue: args[1],
+          },
+        };
+      },
+    },
+  },
+});
+
+export default configReducer.reducer;
+
+export const { setConfigItem } = configReducer.actions;
 
 export const selectIsInElectron = (state) => state.configReducer.isInElectron;
 export const selectFilterCommunity = (state) => state.configReducer.filterCommunity;
diff --git a/src/redux/store.js b/src/redux/store.js
new file mode 100644
index 0000000..9759ec0
--- /dev/null
+++ b/src/redux/store.js
@@ -0,0 +1,34 @@
+import { configureStore } from "@reduxjs/toolkit";
+import {
+  FLUSH,
+  PAUSE,
+  PERSIST,
+  PURGE,
+  REGISTER,
+  REHYDRATE,
+  persistStore,
+} from "redux-persist";
+import thunk from "redux-thunk";
+import { setupListeners } from "@reduxjs/toolkit/dist/query";
+
+import accountReducer from "./reducer/accountReducer";
+import configReducer from "./reducer/configReducer";
+
+
+export const store = configureStore({
+  reducer: {
+    // Add the generated reducer as a specific top-level slice
+    accountReducer,
+    configReducer
+  },
+  middleware: (getDefaultMiddleware) => 
+   getDefaultMiddleware({
+      serializableCheck: {
+        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
+      },
+    })
+      .concat(thunk)
+});
+
+setupListeners(store.dispatch);
+export const persistor = persistStore(store);
diff --git a/src/store.js b/src/store.js
deleted file mode 100644
index bbbba9e..0000000
--- a/src/store.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import { configureStore } from "@reduxjs/toolkit";
-
-import combinedReducers from "./reducers";
-
-export default configureStore({
-  reducer: combinedReducers,
-});
diff --git a/webpack.common.js b/webpack.common.js
index ebc3cad..599df92 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -4,9 +4,6 @@ const path = require("path");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
 
-const package = require("./package.json");
-const packageVersion = package.version;
-
 module.exports = {
   entry: "./src/index.jsx",
   output: {
@@ -26,9 +23,6 @@ module.exports = {
     new CopyWebpackPlugin({
       patterns: [{ from: "public", to: "" }],
     }),
-    new webpack.EnvironmentPlugin({
-      PACKAGE_VERSION: packageVersion,
-    }),
   ],
   module: {
     rules: [
diff --git a/webpack.dev.config.js b/webpack.dev.config.js
index 44458c2..039e6a1 100644
--- a/webpack.dev.config.js
+++ b/webpack.dev.config.js
@@ -3,6 +3,10 @@ const { merge } = require("webpack-merge");
 
 const common = require("./webpack.common.js");
 
+// get git branch and short commit
+const gitBranch = require("child_process").execSync("git rev-parse --abbrev-ref HEAD").toString().trim();
+const gitCommit = require("child_process").execSync("git rev-parse --short HEAD").toString().trim();
+
 module.exports = merge(common, {
   mode: "development",
   devtool: "inline-source-map",
@@ -23,6 +27,7 @@ module.exports = merge(common, {
   plugins: [
     new webpack.EnvironmentPlugin({
       NODE_ENV: "development",
+      PACKAGE_VERSION: `git-${gitBranch}-${gitCommit}`,
     }),
   ],
 });
diff --git a/webpack.prod.config.js b/webpack.prod.config.js
index f2e4916..d97bbbb 100644
--- a/webpack.prod.config.js
+++ b/webpack.prod.config.js
@@ -6,6 +6,9 @@ const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
 
 const common = require("./webpack.common.js");
 
+const package = require("./package.json");
+const packageVersion = package.version;
+
 module.exports = merge(common, {
   mode: "production",
   devtool: false,
@@ -19,6 +22,7 @@ module.exports = merge(common, {
   plugins: [
     new webpack.EnvironmentPlugin({
       NODE_ENV: "production",
+      PACKAGE_VERSION: packageVersion,
     }),
   ],
   performance: {