diff --git a/backend/api/controllers/groupController.js b/backend/api/controllers/groupController.js
index 3a8b1c9f..22dd93cb 100644
--- a/backend/api/controllers/groupController.js
+++ b/backend/api/controllers/groupController.js
@@ -23,8 +23,10 @@ exports.group_create = (req, res) => {
   });
 };
 
+// lean option means only return name and id
 exports.group_all_groups = (req, res) => {
-  Group.find({}, (err, groups) => {
+  const projection = req.query.lean === "true" ? 'title' : '';
+  Group.find({}, projection, {}, (err, groups) => {
     if (err) res.status(err.status).send(err.message);
     else res.status(200).send(groups);
   });
diff --git a/package-lock.json b/package-lock.json
index 835de428..5e32fb47 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -39,8 +39,8 @@
         "graceful-fs": "^4.2.4",
         "javascript-time-ago": "^2.5.11",
         "jsonwebtoken": "^9.0.0",
-        "linkify-react": "^3.0.4",
-        "linkifyjs": "^3.0.5",
+        "linkify-react": "^4.1.3",
+        "linkifyjs": "^4.1.3",
         "locale": "^0.1.0",
         "lodash": "^4.17.21",
         "migrate-mongoose": "^4.0.0",
@@ -75,6 +75,7 @@
         "request": "^2.88.2",
         "request-promise": "^4.2.6",
         "rwlock": "^5.0.0",
+        "sanitize-html": "^2.13.0",
         "single-line-log": "^1.1.2",
         "socket.io": "^4.5.1",
         "socket.io-client": "^4.5.1",
@@ -110,6 +111,7 @@
         "@types/react-router-bootstrap": "^0.24.5",
         "@types/react-router-dom": "^5.1.7",
         "@types/react-tagcloud": "^1.1.7",
+        "@types/sanitize-html": "^2.13.0",
         "chai": "^3.3.0",
         "clarinet": "^0.12.4",
         "cross-env": "^7.0.3",
@@ -4161,6 +4163,15 @@
       "version": "0.12.1",
       "license": "MIT"
     },
+    "node_modules/@types/sanitize-html": {
+      "version": "2.13.0",
+      "resolved": "https://registry.npmjs.org/@types/sanitize-html/-/sanitize-html-2.13.0.tgz",
+      "integrity": "sha512-X31WxbvW9TjIhZZNyNBZ/p5ax4ti7qsNDBDEnH4zAgmEh35YnFD1UiS6z9Cd34kKm0LslFW0KPmTQzu/oGtsqQ==",
+      "dev": true,
+      "dependencies": {
+        "htmlparser2": "^8.0.0"
+      }
+    },
     "node_modules/@types/scheduler": {
       "version": "0.16.2",
       "license": "MIT"
@@ -8245,14 +8256,15 @@
       }
     },
     "node_modules/domelementtype": {
-      "version": "2.2.0",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
       "funding": [
         {
           "type": "github",
           "url": "https://github.com/sponsors/fb55"
         }
-      ],
-      "license": "BSD-2-Clause"
+      ]
     },
     "node_modules/domexception": {
       "version": "2.0.1",
@@ -11093,6 +11105,64 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/htmlparser2": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz",
+      "integrity": "sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==",
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.0.1",
+        "entities": "^4.4.0"
+      }
+    },
+    "node_modules/htmlparser2/node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/htmlparser2/node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/htmlparser2/node_modules/domutils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
+      "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
     "node_modules/http-deceiver": {
       "version": "1.2.7",
       "license": "MIT"
@@ -13568,16 +13638,18 @@
       "license": "MIT"
     },
     "node_modules/linkify-react": {
-      "version": "3.0.4",
-      "license": "MIT",
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/linkify-react/-/linkify-react-4.1.3.tgz",
+      "integrity": "sha512-rhI3zM/fxn5BfRPHfi4r9N7zgac4vOIxub1wHIWXLA5ENTMs+BGaIaFO1D1PhmxgwhIKmJz3H7uCP0Dg5JwSlA==",
       "peerDependencies": {
-        "linkifyjs": "^3.0.0",
+        "linkifyjs": "^4.0.0",
         "react": ">= 15.0.0"
       }
     },
     "node_modules/linkifyjs": {
-      "version": "3.0.5",
-      "license": "MIT"
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-4.1.3.tgz",
+      "integrity": "sha512-auMesunaJ8yfkHvK4gfg1K0SaKX/6Wn9g2Aac/NwX+l5VdmFZzo/hdPGxEOETj+ryRa4/fiOPjeeKURSAJx1sg=="
     },
     "node_modules/load-json-file": {
       "version": "1.1.0",
@@ -15795,6 +15867,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/parse-srcset": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/parse-srcset/-/parse-srcset-1.0.2.tgz",
+      "integrity": "sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q=="
+    },
     "node_modules/parse5": {
       "version": "6.0.1",
       "license": "MIT"
@@ -18961,6 +19038,38 @@
       "dev": true,
       "license": "BSD-3-Clause"
     },
+    "node_modules/sanitize-html": {
+      "version": "2.13.0",
+      "resolved": "https://registry.npmjs.org/sanitize-html/-/sanitize-html-2.13.0.tgz",
+      "integrity": "sha512-Xff91Z+4Mz5QiNSLdLWwjgBDm5b1RU6xBT0+12rapjiaR7SwfRdjw8f+6Rir2MXKLrDicRFHdb51hGOAxmsUIA==",
+      "dependencies": {
+        "deepmerge": "^4.2.2",
+        "escape-string-regexp": "^4.0.0",
+        "htmlparser2": "^8.0.0",
+        "is-plain-object": "^5.0.0",
+        "parse-srcset": "^1.0.2",
+        "postcss": "^8.3.11"
+      }
+    },
+    "node_modules/sanitize-html/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/sanitize-html/node_modules/is-plain-object": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+      "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/sanitize.css": {
       "version": "13.0.0",
       "license": "CC0-1.0"
diff --git a/package.json b/package.json
index d04e400d..ed89c54d 100644
--- a/package.json
+++ b/package.json
@@ -68,8 +68,8 @@
     "graceful-fs": "^4.2.4",
     "javascript-time-ago": "^2.5.11",
     "jsonwebtoken": "^9.0.0",
-    "linkify-react": "^3.0.4",
-    "linkifyjs": "^3.0.5",
+    "linkify-react": "^4.1.3",
+    "linkifyjs": "^4.1.3",
     "locale": "^0.1.0",
     "lodash": "^4.17.21",
     "migrate-mongoose": "^4.0.0",
@@ -104,6 +104,7 @@
     "request": "^2.88.2",
     "request-promise": "^4.2.6",
     "rwlock": "^5.0.0",
+    "sanitize-html": "^2.13.0",
     "single-line-log": "^1.1.2",
     "socket.io": "^4.5.1",
     "socket.io-client": "^4.5.1",
@@ -139,6 +140,7 @@
     "@types/react-router-bootstrap": "^0.24.5",
     "@types/react-router-dom": "^5.1.7",
     "@types/react-tagcloud": "^1.1.7",
+    "@types/sanitize-html": "^2.13.0",
     "chai": "^3.3.0",
     "clarinet": "^0.12.4",
     "cross-env": "^7.0.3",
diff --git a/public/index.html b/public/index.html
index 9827df99..0f9d018e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,10 +3,12 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta name="description" content="Aggie is a social media monitoring application. " />
+    <meta
+      name="description"
+      content="Aggie is a social media monitoring application. "
+    />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index 6ab1900d..00000000
--- a/src/App.css
+++ /dev/null
@@ -1,63 +0,0 @@
-/* .App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-/* .color-nav {
-  background-color: #0e7c41;
-} */
-/* 
-button.toolTipIcon {
-  padding: 0;
-  margin: 0;
-  background-color: transparent;
-  border: 0;
-}
-button.toolTipIcon:hover {
-  color: transparent;
-  background-color: transparent;
-  border: 0;
-} */
-
-/* // remove bootstrap defaults temporarily while we switch to tailwind
-h1,
-h2,
-h3,
-h4,
-p {
-  margin: 0;
-} */
diff --git a/src/App.tsx b/src/App.tsx
index 1705c35a..fa6b00c3 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -11,7 +11,6 @@ import { getSession } from "./api/session";
 import type { AxiosError } from "axios";
 import type { Session } from "./api/session/types";
 
-import "./App.css";
 //import "@yaireo/tagify/dist/tagify.css";
 
 import AggieNavbar from "./components/AggieNavbar";
diff --git a/src/api/common.ts b/src/api/common.ts
index 2e46e55b..8bdfcee4 100644
--- a/src/api/common.ts
+++ b/src/api/common.ts
@@ -16,6 +16,7 @@ export const MEDIA_OPTIONS = [
   "RSS",
   // "elmo",
   // "SMS GH",
+  "truthsocial",
   "youtube",
   "facebook",
 ] as const;
diff --git a/src/api/groups/index.ts b/src/api/groups/index.ts
index 1db27aaf..592c4afd 100644
--- a/src/api/groups/index.ts
+++ b/src/api/groups/index.ts
@@ -45,8 +45,23 @@ export const getGroups_old = async (
   }
 };
 
-export const getAllGroups = async () => {
-  const { data } = await axios.get("/api/group/all");
+const defaultAllGroups = {
+  lean: "true",
+};
+
+interface LeanGroups {
+  total: number;
+  results: Pick<Group, "title" | "_id">[];
+}
+export const getAllGroups = async (
+  options: Partial<typeof defaultAllGroups> = defaultAllGroups
+) => {
+  options = { ...defaultAllGroups, ...options };
+  const params = new URLSearchParams(options);
+  const { data } = await axios.get<
+    Pick<Group, "title" | "_id">[] | Groups | undefined
+  >("/api/group/all?" + params.toString());
+
   return data;
 };
 
diff --git a/src/components/SocialMediaPost/MediaPreview.tsx b/src/components/SocialMediaPost/MediaPreview.tsx
index baf5b2c6..600d3856 100644
--- a/src/components/SocialMediaPost/MediaPreview.tsx
+++ b/src/components/SocialMediaPost/MediaPreview.tsx
@@ -2,6 +2,7 @@ import { useState } from "react";
 import { MediaOptions } from "../../api/common";
 import { Report } from "../../api/reports/types";
 import YouTube, { YouTubeProps } from "react-youtube";
+import { getTweetImages } from "./reportParser";
 
 interface IProps {
   mediaUrl: string;
@@ -10,8 +11,11 @@ interface IProps {
 }
 const MediaPreview = ({ mediaUrl, media, report }: IProps) => {
   const [loaded, setLoaded] = useState(false);
-
-  if (!mediaUrl) return <></>;
+  function formatTwitter(index: number, total: number) {
+    if (total === 1) return "h-auto col-span-2 max-h-[60vh]";
+    if (total === 3 && index === 2) return "h-full col-span-2";
+    return "h-full";
+  }
   switch (media) {
     case "youtube":
       return (
@@ -19,7 +23,31 @@ const MediaPreview = ({ mediaUrl, media, report }: IProps) => {
           <YoutubeVideo src={report.url} />{" "}
         </div>
       );
+
+    case "twitter": {
+      const images = getTweetImages(report);
+      console.log(images);
+
+      if (!images || images.length === 0) return <></>;
+      return (
+        <div className='min-h-[30vh] relative grid grid-cols-2 gap-1'>
+          {images.map((url: string, index: number) => (
+            <img
+              key={index}
+              className={`w-full rounded object-cover ${formatTwitter(
+                index,
+                images.length
+              )}`}
+              src={url}
+              onLoad={() => setLoaded(true)}
+            />
+          ))}
+        </div>
+      );
+    }
     default:
+      if (!mediaUrl) return <></>;
+
       return (
         <div className='min-h-[30vh] relative'>
           {!loaded && (
diff --git a/src/components/SocialMediaPost/PostListItem.tsx b/src/components/SocialMediaPost/PostListItem.tsx
new file mode 100644
index 00000000..f98673cf
--- /dev/null
+++ b/src/components/SocialMediaPost/PostListItem.tsx
@@ -0,0 +1,5 @@
+const PostListItem = () => {
+  return <></>;
+};
+
+export default PostListItem;
diff --git a/src/components/SocialMediaPost/PostReactions.tsx b/src/components/SocialMediaPost/PostReactions.tsx
index 7ce6259d..a863880f 100644
--- a/src/components/SocialMediaPost/PostReactions.tsx
+++ b/src/components/SocialMediaPost/PostReactions.tsx
@@ -38,7 +38,8 @@ const PostReactions = ({ stats, media }: IProps) => {
       return <></>;
     return (
       <span className='flex gap-1 items-center'>
-        <FontAwesomeIcon icon={props.icon} /> {props.value}
+        <FontAwesomeIcon icon={props.icon} />{" "}
+        {Number(props.value).toLocaleString()}
       </span>
     );
   };
diff --git a/src/components/SocialMediaPost/SocialMediaIcon.tsx b/src/components/SocialMediaPost/SocialMediaIcon.tsx
index d3813a05..611cd6f6 100644
--- a/src/components/SocialMediaPost/SocialMediaIcon.tsx
+++ b/src/components/SocialMediaPost/SocialMediaIcon.tsx
@@ -19,6 +19,7 @@ const mediaIcons: Record<MediaOptions, IconDefinition | BrandsDef> = {
   twitter: faTwitter,
   RSS: faRss,
   facebook: faFacebook,
+  truthsocial: faQuestionCircle,
   // elmo: faQuestionCircle,
   // "SMS GH": faQuestionCircle,
 };
@@ -28,7 +29,6 @@ const SocialMediaIcon = ({
 }: {
   mediaKey: MediaOptions | undefined;
 }) => {
-  console.log(mediaKey);
   if (!!mediaKey && mediaKey in mediaIcons) {
     //@ts-ignore
     return <FontAwesomeIcon icon={mediaIcons[mediaKey]} />;
diff --git a/src/components/SocialMediaPost/index.tsx b/src/components/SocialMediaPost/index.tsx
index 657534b3..4865fe9e 100644
--- a/src/components/SocialMediaPost/index.tsx
+++ b/src/components/SocialMediaPost/index.tsx
@@ -4,75 +4,36 @@ import {
   Report,
   TwitterStatistics,
 } from "../../api/reports/types";
-import { formatAuthor, formatText } from "../../utils/format";
+import { formatText } from "../../utils/format";
 import PostReactions from "./PostReactions";
 import MediaPreview from "./MediaPreview";
 import SocialMediaIcon from "./SocialMediaIcon";
-import { MediaOptions } from "../../api/common";
+
 import DateTime from "../DateTime";
-interface IProps {
-  report: Report;
-  showMedia?: boolean;
-}
+
+import {
+  parseContentType,
+  isTwitterReply,
+  parseTwitterQuote,
+  parseTwitterRetweet,
+  sanitize,
+} from "./reportParser";
 
 import { faExternalLink } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-type ContentType = "default" | "twitterQuote" | "twitterRetweet";
-
+interface IProps {
+  report: Report;
+  showMedia?: boolean;
+}
 const SocialMediaPost = ({ report, showMedia }: IProps) => {
-  const contentType = isRetweet(report._media, report.metadata);
-
-  function isRetweet(
-    _media: MediaOptions[],
-    metadata: BaseMetadata
-  ): ContentType {
-    if (!_media || _media[0] !== "twitter") return "default";
-    const rawPostData = (metadata.rawAPIResponse.attributes as any)?.post_data;
-    if (!rawPostData) return "default";
-    const isQuoteRetweet = rawPostData.quoted_status_result?.result;
-    if (isQuoteRetweet) {
-      return "twitterQuote";
-    }
-    const isRetweet = rawPostData.retweeted_status_result?.result;
-    if (isRetweet) {
-      return "twitterRetweet";
-    }
-    return "default";
-  }
-
-  function getTwitterUserDetails(rawPostData: any) {
-    const userData = rawPostData?.core?.user_results?.result?.legacy;
-    if (!userData) return undefined;
-    return {
-      name: userData.name,
-      username: userData.screen_name,
-      followers: userData.followers_count,
-      url: userData.url,
-      createdAt: userData.created_at,
-    };
-  }
+  const contentType = parseContentType(report._media, report.metadata);
 
   const QuoteContent = (props: { report: Report }) => {
     const { report } = props;
-    const rawPostData = (report.metadata.rawAPIResponse.attributes as any)
-      ?.post_data;
-
-    const retweetResult = rawPostData.quoted_status_result?.result;
 
-    const innerAuthor = getTwitterUserDetails(retweetResult);
-
-    const post = {
-      content: retweetResult.legacy?.full_text,
-      authoredAt: retweetResult.legacy?.created_at,
-    };
-    const postStats: TwitterStatistics = {
-      reply_count: retweetResult.legacy?.reply_count,
-      retweet_count:
-        retweetResult.legacy?.retweet_count + retweetResult.legacy?.quote_count,
-      like_count: retweetResult.legacy?.favorite_count,
-      view_count: retweetResult.views?.count,
-    };
+    const { author, authoredAt, content, statistics } =
+      parseTwitterQuote(report);
 
     return (
       <>
@@ -95,10 +56,10 @@ const SocialMediaPost = ({ report, showMedia }: IProps) => {
         )}
         <div className='border border-slate-300 py-2 px-2 rounded-lg'>
           <div>
-            <h2 className='font-medium'>{innerAuthor?.username}</h2>
+            <h2 className='font-medium'>{author?.username}</h2>
             <p className='text-sm text-slate-600'>
               {" "}
-              <DateTime dateString={post.authoredAt} />
+              <DateTime dateString={authoredAt} />
             </p>
           </div>
           <div className='whitespace-pre-line my-2'>
@@ -108,11 +69,11 @@ const SocialMediaPost = ({ report, showMedia }: IProps) => {
                 className: "underline text-blue-600 hover:bg-slate-100 ",
               }}
             >
-              {formatText(post.content)}
+              {formatText(content)}
             </Linkify>
           </div>
           <div className='flex gap-3 text-sm text-slate-500 font-medium mt-1 items-center'>
-            <PostReactions stats={postStats} media={report._media[0]} />
+            <PostReactions stats={statistics} media={report._media[0]} />
           </div>
         </div>
       </>
@@ -121,32 +82,18 @@ const SocialMediaPost = ({ report, showMedia }: IProps) => {
 
   const RetweetContent = (props: { report: Report }) => {
     const { report } = props;
-    const rawPostData = (report.metadata.rawAPIResponse.attributes as any)
-      ?.post_data;
-
-    const retweetResult = rawPostData.retweeted_status_result?.result;
-
-    const innerAuthor = getTwitterUserDetails(retweetResult);
-
-    const post = {
-      content: retweetResult.legacy?.full_text,
-      authoredAt: retweetResult.legacy?.created_at,
-    };
-    const postStats: TwitterStatistics = {
-      reply_count: retweetResult.legacy?.reply_count,
-      retweet_count:
-        retweetResult.legacy?.retweet_count + retweetResult.legacy?.quote_count,
-      like_count: retweetResult.legacy?.favorite_count,
-      view_count: retweetResult.views?.count,
-    };
+    const { author, authoredAt, content, statistics } =
+      parseTwitterRetweet(report);
 
     return (
       <>
         <p>Retweeted:</p>
         <div className='border border-slate-300 py-2 px-2 rounded-lg'>
           <div>
-            <h2 className='font-medium'>{innerAuthor?.username}</h2>
-            <p className='text-sm text-slate-600'>{post.authoredAt}</p>
+            <h2 className='font-medium'>{author?.username}</h2>
+            <p className='text-sm text-slate-600'>
+              <DateTime dateString={authoredAt} />
+            </p>
           </div>
           <div className='whitespace-pre-line my-2'>
             <Linkify
@@ -155,91 +102,128 @@ const SocialMediaPost = ({ report, showMedia }: IProps) => {
                 className: "underline text-blue-600 hover:bg-slate-100 ",
               }}
             >
-              {formatText(post.content)}
+              {formatText(content)}
             </Linkify>
           </div>
           <div className='flex gap-3 text-sm text-slate-500 font-medium mt-1 items-center'>
-            <PostReactions stats={postStats} media={report._media[0]} />
+            <PostReactions stats={statistics} media={report._media[0]} />
           </div>
         </div>
       </>
     );
   };
 
+  const TwitterReply = (props: { report: Report }) => {
+    const { report } = props;
+
+    const { author, url } = isTwitterReply(report);
+    if (!author || !url) return <></>;
+
+    return (
+      <div className=''>
+        <p className='text-xs text-slate-600 italic'>
+          Replying to {author}'s{" "}
+          <a href={url} className='underline' target='_blank'>
+            post
+          </a>
+        </p>
+        <div className='border-l-2 border-slate-400 ml-3 h-6 my-1'></div>
+      </div>
+    );
+  };
+
   return (
-    <div className='pt-1 pb-2  bg-white rounded-xl border border-slate-300 text-base '>
-      <div className='px-3 pt-2'>
-        <div className='flex justify-between mb-2'>
-          {/* <TagsList values={report.smtcTags} /> */}
-          <div className=' font-medium  '>
-            <a
-              target='_blank'
-              href={report.metadata.accountUrl}
-              title={`open ${report._media[0]} account`}
-              className='hover:underline hover:bg-slate-100 group hover:text-blue-600'
-            >
-              <h1>
-                <span className='mr-1 text-slate-600 '>
-                  <SocialMediaIcon mediaKey={report._media[0]} />
-                </span>
-                {report.author}
-                <span className='opacity-0 group-hover:opacity-100'>
-                  <FontAwesomeIcon icon={faExternalLink} size='xs' />
-                </span>
-              </h1>
-            </a>
-            <p className='text-slate-600 text-xs font-normal mt-1'>
-              <DateTime dateString={report.authoredAt} />
-            </p>
-          </div>
-          <p className='flex flex-col items-end gap-1'>
-            <a
-              target='_blank'
-              href={report.url}
-              className='ml-1 px-2 py-1 rounded-full border border-slate-200 font-medium text-xs inline-flex gap-1 items-center bg-slate-100 hover:bg-white text-nowrap'
-            >
-              <span>Open Post</span>
-              <FontAwesomeIcon icon={faExternalLink} />
-            </a>
+    <div className='pb-2 px-3 pt-3 bg-white rounded-xl border border-slate-300 text-base '>
+      {report._media[0] === "twitter" && <TwitterReply report={report} />}
+      <div className='flex justify-between mb-2'>
+        {/* <TagsList values={report.smtcTags} /> */}
+        <div className=' font-medium  '>
+          <a
+            target='_blank'
+            href={report.metadata.accountUrl}
+            title={`open ${report._media[0]} account`}
+            className='hover:underline hover:bg-slate-100 group hover:text-blue-600'
+          >
+            <h1>
+              <span className='mr-1 text-slate-600 '>
+                <SocialMediaIcon mediaKey={report._media[0]} />
+              </span>
+              {report.author}
+              <span className='opacity-0 group-hover:opacity-100'>
+                <FontAwesomeIcon icon={faExternalLink} size='xs' />
+              </span>
+            </h1>
+          </a>
+          <p className='text-slate-600 text-xs font-normal mt-1'>
+            <DateTime dateString={report.authoredAt} />
           </p>
         </div>
-        {contentType === "twitterRetweet" && <RetweetContent report={report} />}
-        {contentType === "twitterQuote" && <QuoteContent report={report} />}
-
-        {contentType === "default" && (
-          <>
-            <div className='whitespace-pre-line mb-1'>
-              <Linkify
-                options={{
-                  target: "_blank",
-                  className: "underline text-blue-600 hover:bg-slate-100 ",
-                }}
-              >
-                {formatText(report.content)}
-              </Linkify>
-            </div>
-            {showMedia && (
-              <MediaPreview
-                mediaUrl={report.metadata.mediaUrl}
-                media={report._media[0]}
-                report={report}
-              />
-            )}
-          </>
-        )}
+        <p className='flex flex-col items-end gap-1'>
+          <a
+            target='_blank'
+            href={report.url}
+            className='ml-1 px-2 py-1 rounded-full border border-slate-200 font-medium text-xs inline-flex gap-1 items-center bg-slate-100 hover:bg-white text-nowrap'
+          >
+            <span>Open Post</span>
+            <FontAwesomeIcon icon={faExternalLink} />
+          </a>
+        </p>
+      </div>
 
-        <div className='flex justify-between'>
-          <div className='flex gap-3 text-sm text-slate-500 font-medium mt-1 items-center'>
-            <PostReactions
-              stats={report.metadata.actualStatistics}
+      {contentType === "twitterRetweet" && <RetweetContent report={report} />}
+      {contentType === "twitterQuote" && <QuoteContent report={report} />}
+      {contentType === "truthsocial" && (
+        <>
+          <div className='whitespace-pre-line break-all mb-1'>
+            <p
+              className='truthsocial'
+              dangerouslySetInnerHTML={{
+                __html: sanitize(report.content),
+              }}
+            ></p>
+          </div>
+          {showMedia && (
+            <MediaPreview
+              mediaUrl={report.metadata.mediaUrl}
               media={report._media[0]}
+              report={report}
             />
+          )}
+        </>
+      )}
+      {contentType === "default" && (
+        <>
+          <div className='whitespace-pre-line mb-1'>
+            <Linkify
+              options={{
+                target: "_blank",
+                className: "underline text-blue-600 hover:bg-slate-100 ",
+              }}
+            >
+              {formatText(report.content)}
+            </Linkify>
           </div>
-          <p className='text-xs text-slate-600 text-right'>
-            last fetched: <br />
-            <DateTime dateString={report.fetchedAt} />
-          </p>
+          {showMedia && (
+            <MediaPreview
+              mediaUrl={report.metadata.mediaUrl}
+              media={report._media[0]}
+              report={report}
+            />
+          )}
+        </>
+      )}
+
+      <div className='flex justify-between'>
+        <div className='flex gap-3 text-sm text-slate-500 font-medium mt-1 items-center'>
+          <PostReactions
+            stats={report.metadata.actualStatistics}
+            media={report._media[0]}
+          />
         </div>
+        <p className='text-xs text-slate-600 text-right'>
+          last fetched: <br />
+          <DateTime dateString={report.fetchedAt} />
+        </p>
       </div>
     </div>
   );
diff --git a/src/components/SocialMediaPost/reportParser.ts b/src/components/SocialMediaPost/reportParser.ts
new file mode 100644
index 00000000..d6bd7215
--- /dev/null
+++ b/src/components/SocialMediaPost/reportParser.ts
@@ -0,0 +1,126 @@
+/**
+ * parsing the mess of metadata that we get from various sources.
+ * this is a very trial-and-error process.
+ */
+import {
+  BaseMetadata,
+  Report,
+  TwitterStatistics,
+} from "../../api/reports/types";
+import sanitizeHtml from "sanitize-html";
+import { MediaOptions } from "../../api/common";
+
+type ContentType =
+  | "default"
+  | "twitterQuote"
+  | "twitterRetweet"
+  | "truthsocial";
+
+export function parseContentType(
+  _media: MediaOptions[],
+  metadata: BaseMetadata
+): ContentType {
+  if (!_media) return "default";
+  if (_media[0] === "truthsocial") return "truthsocial";
+  if (_media[0] !== "twitter") return "default";
+  const rawPostData = (metadata.rawAPIResponse.attributes as any)?.post_data;
+  if (!rawPostData) return "default";
+  const isQuoteRetweet = rawPostData.quoted_status_result?.result;
+  if (isQuoteRetweet) {
+    return "twitterQuote";
+  }
+  const isRetweet = rawPostData.retweeted_status_result?.result;
+  if (isRetweet) {
+    return "twitterRetweet";
+  }
+  return "default";
+}
+
+export function parseTwitterUser(rawPostData: any) {
+  const userData = rawPostData?.core?.user_results?.result?.legacy;
+  if (!userData) return undefined;
+  return {
+    name: userData.name,
+    username: userData.screen_name,
+    followers: userData.followers_count,
+    url: userData.url,
+    createdAt: userData.created_at,
+  };
+}
+
+export function isTwitterReply(report: Report) {
+  const rawPostData = (report.metadata.rawAPIResponse.attributes as any)
+    ?.post_data;
+  const name = rawPostData?.in_reply_to_screen_name;
+  const id = rawPostData?.in_reply_to_status_id_str;
+  return {
+    author: name,
+    url: !!name && !!id ? `https://x.com/${name}/status/${id}` : undefined,
+  };
+}
+
+export function getTweetImages(report: Report) {
+  const rawPostData = (report.metadata.rawAPIResponse.attributes as any)
+    ?.search_data_fields;
+
+  const images = rawPostData?.media_data?.map((imgData: any) => {
+    return imgData.thumb_url + "?format=jpg&name=medium";
+  });
+  return images as string[];
+}
+
+export function parseTwitterRetweet(report: Report) {
+  const rawPostData = (report.metadata.rawAPIResponse.attributes as any)
+    ?.post_data;
+  const retweetResult = rawPostData?.retweeted_status_result?.result;
+
+  const innerAuthor = parseTwitterUser(retweetResult);
+
+  const statistics: TwitterStatistics = {
+    reply_count: retweetResult.legacy?.reply_count,
+    retweet_count:
+      retweetResult.legacy?.retweet_count + retweetResult.legacy?.quote_count,
+    like_count: retweetResult.legacy?.favorite_count,
+    view_count: retweetResult.views?.count,
+  };
+
+  return {
+    author: innerAuthor,
+    authoredAt: retweetResult.legacy?.created_at,
+    content: retweetResult.legacy?.full_text,
+    statistics,
+  };
+}
+
+export function parseTwitterQuote(report: Report) {
+  const rawPostData = (report.metadata.rawAPIResponse.attributes as any)
+    ?.post_data;
+  const quotedResult = rawPostData.quoted_status_result?.result;
+
+  const innerAuthor = parseTwitterUser(quotedResult);
+
+  const statistics: TwitterStatistics = {
+    reply_count: quotedResult.legacy?.reply_count,
+    retweet_count:
+      quotedResult.legacy?.retweet_count + quotedResult.legacy?.quote_count,
+    like_count: quotedResult.legacy?.favorite_count,
+    view_count: quotedResult.views?.count,
+  };
+
+  return {
+    author: innerAuthor,
+    authoredAt: quotedResult.legacy?.created_at,
+    content: quotedResult.legacy?.full_text,
+    statistics,
+  };
+}
+
+// temporary, should be done server-side
+export function sanitize(string: string) {
+  return sanitizeHtml(string, {
+    allowedAttributes: {
+      ...sanitizeHtml.defaults.allowedAttributes,
+      span: ["class"],
+    },
+  });
+}
diff --git a/src/components/filters/FilterDropdown.tsx b/src/components/filters/FilterDropdown.tsx
index d7ff27c9..8f99aca7 100644
--- a/src/components/filters/FilterDropdown.tsx
+++ b/src/components/filters/FilterDropdown.tsx
@@ -25,16 +25,21 @@ const FilterDropdown = ({
   return (
     <Popover className='relative'>
       <Popover.Button
-        className={`focus-theme py-1 hover:bg-slate-100 ui-open:bg-slate-100 rounded ${
-          value ? "bg-slate-200 px-2" : "px-1"
-        }`}
+        className={({ open }) =>
+          `focus-theme py-1 hover:bg-slate-100 ${
+            open ? "bg-slate-100" : ""
+          } rounded ${value ? "bg-slate-200 px-2" : "px-1"}`
+        }
       >
-        <FontAwesomeIcon
-          icon={faCaretDown}
-          className='ui-open:rotate-180 mr-1 text-slate-500'
-        />
-
-        {value ? value : label}
+        {({ open }) => (
+          <>
+            <FontAwesomeIcon
+              icon={faCaretDown}
+              className={`${open ? "rotate-180" : ""} mr-1 text-slate-500`}
+            />
+            {value ? value : label}
+          </>
+        )}
       </Popover.Button>
       <Popover.Panel className='absolute mt-1 right-0 rounded-lg border border-slate-300  bg-slate-100 overflow-hidden min-w-[12em] drop-shadow-lg z-10'>
         {({ close }) => (
diff --git a/src/hooks/useQueryParamsInternal.ts b/src/hooks/useQueryParamsInternal.ts
new file mode 100644
index 00000000..2aefd4f8
--- /dev/null
+++ b/src/hooks/useQueryParamsInternal.ts
@@ -0,0 +1,57 @@
+import { omitBy, isNil } from "lodash";
+import { useEffect, useState } from "react";
+import { IuseQueryParams } from "./useQueryParams";
+
+/**
+ *  same as useQueryParams but uses internal useState instead of URLSearchParams.
+ *
+ * @param initialParams initialize with object
+ * */
+export function useQueryParamsInternal<T extends object>(initialParams?: T) {
+  // lets initialize searchparams with some data we pass in.
+  const [query, setQuery] = useState<T>(initialParams || ({} as T));
+
+  // this exists only for compatibility with useQueryParams
+  // this forces an extra render which isnt good but idk how else to achieve this
+  const searchParams = new URLSearchParams(query as Record<string, string>);
+
+  /** gets all parameters and returns defined object */
+  const getAllParams = (): T => {
+    return query;
+  };
+
+  /**
+   * returns a parameter, if null then returns an empty string.
+   * @param key parameter key, defined by object when initalized
+   * @returns value as string
+   */
+  const getParam = (key: keyof T): string => {
+    if (key in query) return query[key] as string;
+    return "";
+  };
+
+  /**
+   * sets multiple parameters at once. accepts an object with properties that exist in initialized object type
+   * @param values
+   */
+  const setParams = (values: Partial<T>) => {
+    const combine = { ...query, ...values };
+    const removeEmpty = omitBy(combine, (v) => isNil(v) || v === "");
+
+    setQuery(removeEmpty as T);
+  };
+
+  /** clears all parameters */
+  const clearAllParams = () => {
+    setQuery({} as T);
+  };
+
+  return {
+    searchParams: searchParams,
+    query,
+    getAllParams,
+    setParams,
+    getParam,
+    clearAllParams,
+  };
+}
diff --git a/src/index.css b/src/index.css
index b4698f11..28648215 100644
--- a/src/index.css
+++ b/src/index.css
@@ -39,7 +39,7 @@ body {
   height: 100%;
   width: 100%;
   background: #fafafa;
-  @apply font-emojisans;
+  @apply font-emojisans scroll-smooth;
 }
 
 html {
@@ -54,3 +54,12 @@ code {
 #root {
   width: 100%;
 }
+
+/* truth social needs special css*/
+.truthsocial .quote-inline {
+  @apply text-xs flex;
+}
+/* truth social needs special css*/
+.truthsocial a {
+  @apply text-blue-600 underline;
+}
diff --git a/src/index.tsx b/src/index.tsx
index b45f78d7..c9ce146b 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -15,6 +15,7 @@ import en from "javascript-time-ago/locale/en";
 
 import App from "./App";
 
+//locale for rendering relative time react
 TimeAgo.addDefaultLocale(en);
 
 // default queryClient stuff. will need to refactor as this is deprecated in v5
@@ -22,6 +23,7 @@ TimeAgo.addDefaultLocale(en);
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
+      staleTime: 10000,
       onError: (err) => {
         const error = err as AxiosError;
         if (error.response && error.response.status === 401) {
diff --git a/src/pages/Reports/AllReportsList.tsx b/src/pages/Reports/AllReportsList.tsx
index b2579c7e..cecc19fc 100644
--- a/src/pages/Reports/AllReportsList.tsx
+++ b/src/pages/Reports/AllReportsList.tsx
@@ -15,17 +15,7 @@ import Pagination from "../../components/Pagination";
 import AggieCheck from "../../components/AggieCheck";
 import AggieButton from "../../components/AggieButton";
 
-import {
-  faMinus,
-  faEnvelopeOpen,
-  faEnvelope,
-  faXmark,
-  faDotCircle,
-  faPlus,
-  faCaretDown,
-  faFile,
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faMinus } from "@fortawesome/free-solid-svg-icons";
 import MultiSelectActions from "./components/MultiSelectActions";
 
 interface IProps {}
@@ -38,19 +28,25 @@ const AllReportsList = ({}: IProps) => {
   const { searchParams, getAllParams, setParams, getParam } =
     useQueryParams<ReportQueryState>();
 
-  const reportsQuery = useQuery(["reports"], () => getReports(getAllParams()));
+  const reportsQuery = useQuery(["reports"], () => getReports(getAllParams()), {
+    refetchInterval: 120000,
+  });
   const { status: reportsStatus } = reportsQuery;
   useEffect(() => {
     // refetch on filter change
     reportsQuery.refetch();
     multiSelect.set([]);
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
   }, [searchParams]);
 
-  useEffect(() => {
-    if (reportsStatus === "success") {
-      window.scrollTo(0, 0);
-    }
-  }, [reportsStatus]);
+  // useEffect(() => {
+  //   if (reportsStatus === "success") {
+  //     window.scrollTo(0, 0);
+  //   }
+  // }, [reportsStatus]);
 
   const multiSelect = useMultiSelect({
     allItems: reportsQuery.data?.results,
@@ -59,8 +55,6 @@ const AllReportsList = ({}: IProps) => {
 
   function onReportItemClick(id: string, isRead: boolean) {
     navigate({ pathname: id, search: searchParams.toString() });
-    if (!isRead)
-      setRead.mutate({ reportIds: [id], read: true, currentPageId: id });
   }
 
   return (
@@ -107,7 +101,7 @@ const AllReportsList = ({}: IProps) => {
       </div>
 
       <div className='flex flex-col border border-slate-300 rounded-lg overflow-hidden'>
-        {reportsQuery.isSuccess && !!reportsQuery.data?.results ? (
+        {!!reportsQuery.data?.results && reportsQuery.data?.total > 0 ? (
           reportsQuery.data?.results.map((report) => (
             <div
               onClick={() => onReportItemClick(report._id, report.read)}
diff --git a/src/pages/Reports/Report/index.tsx b/src/pages/Reports/Report/index.tsx
index 86f6c5a4..e0caeeb7 100644
--- a/src/pages/Reports/Report/index.tsx
+++ b/src/pages/Reports/Report/index.tsx
@@ -24,7 +24,11 @@ const Report = () => {
   const queryData = useUpdateQueryData();
   const { setRead, setIrrelevance } = useReportMutations();
 
-  const reportQuery = useQuery(["report", id], () => getReport(id));
+  const {
+    data: report,
+    isLoading,
+    isFetched,
+  } = useQuery(["report", id], () => getReport(id));
   const sourcesQuery = useQuery(["sources"], getSources);
 
   function newIncidentFromReport() {
@@ -34,6 +38,19 @@ const Report = () => {
 
     navigate("/incidents/new?" + params.toString());
   }
+  //mark as read
+  const [ranOnce, setRanOnce] = useState("");
+
+  useEffect(() => {
+    if (!report || !id || ranOnce === id) return;
+
+    if (!report.read) {
+      setRead.mutate({ reportIds: [id], read: true, currentPageId: id });
+    }
+
+    setRanOnce(id);
+  }, [report, id]);
+
   function getSourceFromId(ids: string[]) {
     if (!sourcesQuery.data) return <>none</>;
 
@@ -63,199 +80,103 @@ const Report = () => {
     return names;
   }
 
-  const [tags, setTags] = useState<Tag[] | []>([]);
-  const tagsQuery = useQuery(["tags"], getTags, {
-    enabled: !!reportQuery.data,
-  });
-  const tagsUpdateMutation = useMutation(
-    (tagsUpdateInfo: { reportId: string; tags: Tag[] }) => {
-      return setSelectedTags([tagsUpdateInfo.reportId], tagsUpdateInfo.tags);
-    },
-    {
-      onSuccess: (data) => {
-        // TODO: Instead of refetching, just use a React useState to adjust the UI on Success
-        reportQuery.refetch();
-        queryData.update<Reports>(["reports"], (data) => {
-          return {
-            results: data?.results.map((i) =>
-              i._id === reportQuery.data?._id
-                ? { ...i, smtcTags: tags.map((tag) => tag._id) }
-                : i
-            ),
-          };
-        });
-      },
-      onError: (error: AxiosError) => {
-        if (
-          error &&
-          error.response &&
-          error.response.status &&
-          error.response.data
-        ) {
-          // setShowAlert(false);
-          // setAlertMessage({
-          //   header: "Failed to update tags (" + error.response.status + ")",
-          //   //@ts-ignore
-          //   body: error.response.data,
-          // });
-          // setShowAlert(true);
-        } else {
-          console.error("Uncaught tags update error.");
-        }
-      },
-    }
-  );
-
-  // lol
-  const emptyTag: Tag = {
-    isCommentTag: false,
-    name: "",
-    color: "",
-    description: "",
-    user: {
-      _id: "",
-      username: "",
-    },
-    updatedAt: "",
-    storedAt: "",
-    __v: 0,
-    _id: "",
-  };
-  useEffect(() => {
-    if (!reportQuery.data) return;
-    if (!tagsQuery.data) return;
-    console.log(reportQuery.data);
-    setTags(
-      reportQuery.data.smtcTags.map(
-        (id) => tagsQuery.data?.find((tag) => tag._id === id) || emptyTag
-      )
-    );
-  }, [tagsQuery.isSuccess]);
-
   const [addReportModal, setAddReportModal] = useState(false);
   function addReportsToIncidents() {
     setAddReportModal(true);
   }
   // refactor to be more pretty and have placeholders
-  if (reportQuery.isLoading)
+  if (isLoading)
     return (
       <span className='pt-4 sticky top-0 font-medium text-center'>
         ...loading
       </span>
     );
-  if (reportQuery.data) {
-    console.log(reportQuery.data);
-    return (
-      <article className='pt-4 sticky top-0 overflow-y-auto max-h-[93vh] '>
-        <AddReportsToIncidents
-          selection={id ? [id] : undefined}
-          isOpen={addReportModal}
-          queryKey={["reports"]}
-          onClose={() => setAddReportModal(false)}
-        />
-        <nav className='pl-3 pr-2 py-2 flex justify-between items-center rounded-lg text-xs border border-slate-300 mb-2 shadow-md bg-white'>
-          <div className='flex gap-1 items-center'>
-            <p>Mark as:</p>
+  if (!report || !id) return <> error loading page</>;
+  return (
+    <article className='pt-4 pr-2 sticky top-0 overflow-y-auto max-h-[93vh]  '>
+      <AddReportsToIncidents
+        selection={id ? [id] : undefined}
+        isOpen={addReportModal}
+        queryKey={["reports"]}
+        onClose={() => setAddReportModal(false)}
+      />
+      <nav className='pl-3 pr-2 py-2 flex justify-between items-center rounded-lg text-xs border border-slate-300 mb-2 shadow-md bg-white'>
+        <div className='flex gap-1 items-center'>
+          <p>Mark as:</p>
+          <AggieButton
+            variant='secondary'
+            onClick={() =>
+              setRead.mutate({
+                reportIds: id ? [id] : [],
+                read: !report.read,
+                currentPageId: id,
+              })
+            }
+            loading={setRead.isLoading}
+            disabled={!report || setRead.isLoading}
+          >
+            {report.read ? <> unread</> : <> read</>}
+          </AggieButton>
+          <AggieButton
+            variant='secondary'
+            onClick={() =>
+              setIrrelevance.mutate({
+                reportIds: id ? [id] : [],
+                irrelevant: report.irrelevant === "true" ? "false" : "true",
+                currentPageId: id,
+              })
+            }
+            loading={setIrrelevance.isLoading}
+            disabled={!report || setIrrelevance.isLoading}
+          >
+            {report.irrelevant === "true" ? <>relevant</> : <>irrelevant</>}
+          </AggieButton>
+        </div>
+        <div className='flex gap-1'>
+          <div className='flex font-medium'>
             <AggieButton
-              variant='secondary'
-              onClick={() =>
-                setRead.mutate({
-                  reportIds: id ? [id] : [],
-                  read: !reportQuery.data?.read,
-                  currentPageId: id,
-                })
-              }
-              loading={setRead.isLoading}
-              disabled={!reportQuery.data || setRead.isLoading}
+              className='px-2 py-1 rounded-l-lg bg-slate-100 border border-slate-300 hover:bg-slate-200'
+              onClick={addReportsToIncidents}
             >
-              {reportQuery.data?.read ? <> unread</> : <> read</>}
+              <FontAwesomeIcon icon={faPlus} />
+              Attach Incident
             </AggieButton>
-            <AggieButton
+            <DropdownMenu
               variant='secondary'
-              onClick={() =>
-                setIrrelevance.mutate({
-                  reportIds: id ? [id] : [],
-                  irrelevant:
-                    reportQuery.data?.irrelevant === "true" ? "false" : "true",
-                  currentPageId: id,
-                })
+              buttonElement={
+                <FontAwesomeIcon
+                  icon={faCaretDown}
+                  className='ui-open:rotate-180'
+                />
               }
-              loading={setIrrelevance.isLoading}
-              disabled={!reportQuery.data || setIrrelevance.isLoading}
+              className='px-2 py-1 rounded-r-lg border-y border-r'
+              panelClassName='right-0'
             >
-              {reportQuery.data?.irrelevant === "true" ? (
-                <>relevant</>
-              ) : (
-                <>irrelevant</>
-              )}
-            </AggieButton>
-          </div>
-          <div className='flex gap-1'>
-            <div className='flex font-medium'>
               <AggieButton
-                className='px-2 py-1 rounded-l-lg bg-slate-100 border border-slate-300 hover:bg-slate-200'
-                onClick={addReportsToIncidents}
+                className='px-3 py-2 hover:bg-slate-200'
+                onClick={newIncidentFromReport}
               >
-                <FontAwesomeIcon icon={faPlus} />
-                Attach Incident
+                <FontAwesomeIcon icon={faFile} />
+                Create New Incident with Report
               </AggieButton>
-              <DropdownMenu
-                variant='secondary'
-                buttonElement={
-                  <FontAwesomeIcon
-                    icon={faCaretDown}
-                    className='ui-open:rotate-180'
-                  />
-                }
-                className='px-2 py-1 rounded-r-lg border-y border-r'
-                panelClassName='right-0'
-              >
-                <AggieButton
-                  className='px-3 py-2 hover:bg-slate-200'
-                  onClick={newIncidentFromReport}
-                >
-                  <FontAwesomeIcon icon={faFile} />
-                  Create New Incident with Report
-                </AggieButton>
-              </DropdownMenu>
-            </div>
-          </div>
-        </nav>
-        <div className='flex flex-col gap-1 my-2'>
-          <div className='grid grid-cols-3'>
-            <p className='font-medium text-sm py-1 px-2 '>Source</p>
-            <p className='col-span-2 '>
-              {getSourceFromId(reportQuery.data._sources)}
-            </p>
-          </div>
-          <div className='grid grid-cols-3'>
-            <p className='font-medium text-sm py-1 px-2 '>Tags</p>
-            <p className='col-span-2'>
-              Tags don't work right now
-              {/* {tagsQuery.data && reportQuery.data._id && (
-                <TagsTypeahead
-                  id={reportQuery.data._id}
-                  options={tagsQuery.data}
-                  selected={tags}
-                  onChange={setTags}
-                  onBlur={() => {
-                    tagsUpdateMutation.mutate({
-                      reportId: reportQuery.data?._id || "",
-                      tags: tags,
-                    });
-                  }}
-                  variant={"table"}
-                />
-              )} */}
-            </p>
+            </DropdownMenu>
           </div>
         </div>
+      </nav>
+      <div className='flex flex-col gap-1 my-2'>
+        <div className='grid grid-cols-3'>
+          <p className='font-medium text-sm py-1 px-2 '>Source</p>
+          <p className='col-span-2 '>{getSourceFromId(report._sources)}</p>
+        </div>
+        <div className='grid grid-cols-3'>
+          <p className='font-medium text-sm py-1 px-2 '>Tags</p>
+          <p className='col-span-2'>Tags don't work right now</p>
+        </div>
+      </div>
 
-        <SocialMediaPost report={reportQuery.data} showMedia />
-      </article>
-    );
-  }
-  return <> error loading page</>;
+      <SocialMediaPost report={report} showMedia />
+    </article>
+  );
 };
 
 export default Report;
diff --git a/src/pages/Reports/components/AddReportsToIncident.tsx b/src/pages/Reports/components/AddReportsToIncident.tsx
index 72c4d118..366eb34a 100644
--- a/src/pages/Reports/components/AddReportsToIncident.tsx
+++ b/src/pages/Reports/components/AddReportsToIncident.tsx
@@ -1,5 +1,6 @@
-import { MouseEvent, useState } from "react";
+import { useEffect, useState } from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useQueryParamsInternal } from "../../../hooks/useQueryParamsInternal";
 
 import { getGroups } from "../../../api/groups";
 import { setReportsToGroup } from "../../../api/reports";
@@ -12,6 +13,8 @@ import AggieButton from "../../../components/AggieButton";
 import SocialMediaPost from "../../../components/SocialMediaPost";
 
 import NestedIncidentsList from "./NestedIncidentsList";
+import IncidentsFilters from "../../incidents/IncidentsFilters";
+import { GroupQueryState } from "../../../api/groups/types";
 
 interface IAddReportsToIncidents {
   isOpen: boolean;
@@ -27,6 +30,14 @@ const AddReportsToIncidents = ({
 }: IAddReportsToIncidents) => {
   const [selectedIncident, setSelectedIncident] = useState<Group>();
   const queryClient = useQueryClient();
+  const {
+    searchParams,
+    query,
+    getAllParams,
+    getParam,
+    setParams,
+    clearAllParams,
+  } = useQueryParamsInternal<GroupQueryState>();
 
   function ReportsFromSelection(
     ids: string[] | undefined,
@@ -42,7 +53,18 @@ const AddReportsToIncidents = ({
     if (!getReports) return [];
     return getReports;
   }
-  const { data: incidents } = useQuery(["groups"], () => getGroups());
+
+  const { data: incidents, refetch } = useQuery({
+    queryKey: ["groups"],
+    queryFn: () => getGroups(getAllParams()),
+    enabled: isOpen && !!selection,
+    staleTime: 10000,
+  });
+
+  useEffect(() => {
+    if (!isOpen || !selection) return;
+    refetch();
+  }, [query]);
 
   const addReportsMutation = useMutation({
     mutationFn: setReportsToGroup,
@@ -92,12 +114,20 @@ const AddReportsToIncidents = ({
             ))}
           </div>
 
-          <div className='overflow-y-scroll  bg-white border border-slate-300 rounded-lg'>
-            <NestedIncidentsList
-              incidents={incidents}
-              selectedIncident={selectedIncident}
-              onIncidentClicked={(item) => setSelectedIncident(item)}
+          <div>
+            <IncidentsFilters
+              get={getParam}
+              set={setParams}
+              isQuery={!!searchParams.size}
+              clearAll={clearAllParams}
             />
+            <div className='overflow-y-scroll  bg-white border border-slate-300 rounded-lg'>
+              <NestedIncidentsList
+                incidents={incidents}
+                selectedIncident={selectedIncident}
+                onIncidentClicked={(item) => setSelectedIncident(item)}
+              />
+            </div>
           </div>
         </Dialog.Panel>
       </div>
diff --git a/src/pages/Reports/components/ReportListItem.tsx b/src/pages/Reports/components/ReportListItem.tsx
index 21b0b2b3..e32ecc3e 100644
--- a/src/pages/Reports/components/ReportListItem.tsx
+++ b/src/pages/Reports/components/ReportListItem.tsx
@@ -13,6 +13,10 @@ import AggieCheck from "../../../components/AggieCheck";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCheck } from "@fortawesome/free-solid-svg-icons";
 import DateTime from "../../../components/DateTime";
+import {
+  parseContentType,
+  sanitize,
+} from "../../../components/SocialMediaPost/reportParser";
 //TODO: refactor and clean up tech debt
 interface IProps {
   report: Report;
@@ -27,7 +31,8 @@ const ReportListItem = ({
   isSelectMode,
   onCheckChange,
 }: IProps) => {
-  const queryClient = useQueryClient();
+  const contentType = parseContentType(report._media, report.metadata);
+
   const { id: currentPageId } = useParams();
   const navigate = useNavigate();
 
@@ -36,9 +41,6 @@ const ReportListItem = ({
     () => getGroup(report._group),
     { enabled: !!report._group }
   );
-  function prettyDate(datestring: string) {
-    // TODO: pretty dastes like "1 day ago" and "3 minutes ago"
-  }
 
   function onChange(e: React.MouseEvent<HTMLDivElement>) {
     e.stopPropagation();
@@ -117,9 +119,18 @@ const ReportListItem = ({
           </div>
         </header>
         <div>
-          <p className=' text-black max-h-[10em] line-clamp-5'>
-            {formatText(report.content)}
-          </p>
+          {contentType === "truthsocial" ? (
+            <p
+              className='truthsocial text-black'
+              dangerouslySetInnerHTML={{
+                __html: sanitize(report.content),
+              }}
+            ></p>
+          ) : (
+            <p className=' text-black max-h-[10em] line-clamp-5'>
+              {formatText(report.content)}
+            </p>
+          )}
         </div>
       </div>
       <div className='flex flex-col'>
diff --git a/src/pages/Reports/components/ReportsFilters.tsx b/src/pages/Reports/components/ReportsFilters.tsx
index f22309df..2507fd41 100644
--- a/src/pages/Reports/components/ReportsFilters.tsx
+++ b/src/pages/Reports/components/ReportsFilters.tsx
@@ -12,6 +12,8 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faSearch, faXmarkSquare } from "@fortawesome/free-solid-svg-icons";
 import AggieButton from "../../../components/AggieButton";
 import Pagination from "../../../components/Pagination";
+import { getAllGroups, getGroups } from "../../../api/groups";
+import { useCallback } from "react";
 
 interface IReportFilters {
   reportCount?: number;
@@ -22,16 +24,29 @@ const ReportFilters = ({ reportCount, headerElement }: IReportFilters) => {
   const { searchParams, getParam, setParams, clearAllParams } =
     useQueryParams<ReportQueryState>();
 
-  const sourcesQuery = useQuery(["sources"], getSources);
-
-  function sourcesRemapComboBox(query: typeof sourcesQuery) {
-    if (!query.data) return [];
-    const array = query.data.map((source) => ({
+  const { data: sources } = useQuery(["sources"], getSources);
+  function sourcesRemapComboBox(query: typeof sources) {
+    if (!query) return [];
+    const array = query.map((source) => ({
       key: source._id,
       value: source.nickname,
     }));
     return [{ key: "", value: "All Sources" }, ...array];
   }
+  const sourcesList = useCallback(sourcesRemapComboBox, [sources]);
+
+  const { data: groups } = useQuery(["allgroups"], () => getAllGroups());
+
+  function groupsRemapComboBox(query: typeof groups) {
+    if (!query || "total" in query) return [];
+    const array = query?.map((group) => ({
+      key: group._id,
+      value: group.title,
+    }));
+    if (!array) return [];
+    return [{ key: "", value: "All Incidents" }, ...array];
+  }
+  const groupsList = useCallback(groupsRemapComboBox, [groups]);
 
   return (
     <>
@@ -63,7 +78,7 @@ const ReportFilters = ({ reportCount, headerElement }: IReportFilters) => {
                     className='hover:underline hover:bg-slate-100 px-2 py-1 text-sm rounded'
                     onClick={() => {
                       clearAllParams();
-                      resetForm();
+                      resetForm({ values: { keywords: "" } });
                     }}
                   >
                     <FontAwesomeIcon icon={faXmarkSquare} />
@@ -94,12 +109,20 @@ const ReportFilters = ({ reportCount, headerElement }: IReportFilters) => {
           />
           <FilterComboBox
             label='Sources'
-            list={sourcesRemapComboBox(sourcesQuery)}
+            list={sourcesList(sources)}
             onChange={(e) => {
               setParams({ sourceId: e.key });
             }}
             selectedKey={getParam("sourceId")}
           />
+          <FilterComboBox
+            label='Incidents'
+            list={groupsList(groups)}
+            onChange={(e) => {
+              setParams({ groupId: e.key });
+            }}
+            selectedKey={getParam("groupId")}
+          />
         </div>
       </div>
     </>
diff --git a/src/pages/Reports/index.tsx b/src/pages/Reports/index.tsx
index a9042b9c..d6ff2477 100644
--- a/src/pages/Reports/index.tsx
+++ b/src/pages/Reports/index.tsx
@@ -16,9 +16,7 @@ const Reports = () => {
   const { searchParams, getAllParams, getParam } =
     useQueryParams<ReportQueryState>();
 
-  const reportsQuery = useQuery(["reports"], () => getReports(getAllParams()), {
-    refetchInterval: 60000,
-  });
+  const reportsQuery = useQuery(["reports"], () => getReports(getAllParams()));
 
   return (
     <section className='max-w-screen-2xl mx-auto px-4 grid grid-cols-3 gap-3'>
diff --git a/src/pages/Reports/useReportMutations.ts b/src/pages/Reports/useReportMutations.ts
index 68f3c514..73b74b46 100644
--- a/src/pages/Reports/useReportMutations.ts
+++ b/src/pages/Reports/useReportMutations.ts
@@ -34,7 +34,7 @@ export const useReportMutations = (
     }) => setSelectedRead(params.reportIds, params.read),
     onMutate: (params) => {
       // update reports list
-      queryData.queryClient.cancelQueries(options.key);
+      //queryData.queryClient.cancelQueries(options.key);
       const contextReports = queryData.update<Reports>(options.key, (data) => {
         const updateData = updateByIds(params.reportIds, data.results, {
           read: params.read,
diff --git a/src/pages/incidents/IncidentsFilters.tsx b/src/pages/incidents/IncidentsFilters.tsx
index 7e024491..94d73309 100644
--- a/src/pages/incidents/IncidentsFilters.tsx
+++ b/src/pages/incidents/IncidentsFilters.tsx
@@ -1,9 +1,9 @@
 import { useQuery } from "@tanstack/react-query";
-import { useQueryParams } from "../../hooks/useQueryParams";
+import { IuseQueryParams, useQueryParams } from "../../hooks/useQueryParams";
 
 import { getUsers } from "../../api/users";
 import { VERACITY_OPTIONS, ESCALATED_OPTIONS } from "../../api/common";
-import type { GroupSearchState } from "../../objectTypes";
+import type { GroupQueryState } from "../../api/groups/types";
 
 import { Field, Form, Formik } from "formik";
 import FilterComboBox from "../../components/filters/FilterComboBox";
@@ -17,12 +17,19 @@ import Pagination from "../../components/Pagination";
 import { formatPageCount } from "../../utils/format";
 
 interface IIncidentFilters {
+  isQuery: boolean;
+  get: (value: keyof GroupQueryState) => string;
+  set: (values: GroupQueryState) => void;
+  clearAll: () => void;
   reportCount?: number;
 }
-const IncidentsFilters = ({ reportCount }: IIncidentFilters) => {
-  const { searchParams, getParam, setParams, clearAllParams } =
-    useQueryParams<GroupSearchState>();
-
+const IncidentsFilters = ({
+  reportCount,
+  get,
+  set,
+  clearAll,
+  isQuery,
+}: IIncidentFilters) => {
   const usersQuery = useQuery(["users"], getUsers);
 
   function usersRemapComboBox(query: typeof usersQuery) {
@@ -36,14 +43,13 @@ const IncidentsFilters = ({ reportCount }: IIncidentFilters) => {
 
   function onSearch() {}
 
-  const closedFilter = getParam("closed");
   return (
     <>
       <div className='flex justify-between mb-2 '>
         <div className='flex gap-1'>
           <Formik
-            initialValues={{ title: getParam("title") }}
-            onSubmit={(e) => setParams(e)}
+            initialValues={{ title: get("title") }}
+            onSubmit={(e) => set(e)}
           >
             {({ resetForm }) => (
               <Form className='flex gap-1'>
@@ -62,11 +68,11 @@ const IncidentsFilters = ({ reportCount }: IIncidentFilters) => {
                   </button>
                 </div>
 
-                {!!searchParams.size && (
+                {isQuery && (
                   <AggieButton
                     className='hover:underline hover:bg-slate-100 px-2 py-1 text-sm rounded'
                     onClick={() => {
-                      clearAllParams();
+                      clearAll();
                       resetForm();
                     }}
                   >
@@ -80,12 +86,12 @@ const IncidentsFilters = ({ reportCount }: IIncidentFilters) => {
         </div>
         <div className='text-xs flex items-center gap-2'>
           <p className={"font-medium text-slate-600"}>
-            {formatPageCount(Number(getParam("page")), 50, reportCount)}
+            {formatPageCount(Number(get("page")), 50, reportCount)}
           </p>
           <Pagination
-            currentPage={Number(getParam("page")) || 0}
+            currentPage={Number(get("page")) || 0}
             totalCount={reportCount || 0}
-            onPageChange={(num) => setParams({ page: num })}
+            onPageChange={(num) => set({ page: num })}
             size={0}
           />
         </div>
@@ -98,42 +104,40 @@ const IncidentsFilters = ({ reportCount }: IIncidentFilters) => {
               true: "Closed",
               all: "All",
             }}
-            value={getParam("closed")}
+            value={get("closed")}
             defaultValue={"false"}
-            onChange={(e) =>
-              setParams({ closed: e === "false" ? undefined : e })
-            }
+            onChange={(e) => set({ closed: e === "false" ? undefined : e })}
           />
         </div>
         <div className='flex items-center gap-1'>
           <FilterListbox
             label='Veracity'
             options={[...VERACITY_OPTIONS]}
-            value={getParam("veracity")}
-            onChange={(e) => setParams({ veracity: e })}
+            value={get("veracity")}
+            onChange={(e) => set({ veracity: e })}
           />
           <FilterListbox
             label='Escalated'
             options={[...ESCALATED_OPTIONS]}
-            value={getParam("escalated")}
-            onChange={(e) => setParams({ escalated: e })}
+            value={get("escalated")}
+            onChange={(e) => set({ escalated: e })}
           />
 
           <FilterComboBox
             label='Creator'
             list={usersRemapComboBox(usersQuery)}
             onChange={(e) => {
-              setParams({ creator: e.key });
+              set({ creator: e.key });
             }}
-            selectedKey={getParam("creator")}
+            selectedKey={get("creator")}
           />
           <FilterComboBox
             label='Assignee'
             list={usersRemapComboBox(usersQuery)}
             onChange={(e) => {
-              setParams({ assignedTo: e.key });
+              set({ assignedTo: e.key });
             }}
-            selectedKey={getParam("assignedTo")}
+            selectedKey={get("assignedTo")}
             optionalItems={[{ key: "none", value: "Not Assigned" }]}
           />
         </div>
diff --git a/src/pages/incidents/index.tsx b/src/pages/incidents/index.tsx
index d8b8a948..f0784684 100644
--- a/src/pages/incidents/index.tsx
+++ b/src/pages/incidents/index.tsx
@@ -15,7 +15,7 @@ import Pagination from "../../components/Pagination";
 import { formatPageCount } from "../../utils/format";
 
 const Incidents = () => {
-  const { searchParams, getAllParams, getParam, setParams } =
+  const { searchParams, getAllParams, getParam, setParams, clearAllParams } =
     useQueryParams<GroupQueryState>();
 
   const groupsQuery = useQuery(["groups"], () => getGroups(getAllParams()), {
@@ -41,6 +41,10 @@ const Incidents = () => {
 
       <IncidentsFilters
         reportCount={groupsQuery.data && groupsQuery.data.total}
+        get={getParam}
+        set={setParams}
+        isQuery={!!searchParams.size}
+        clearAll={clearAllParams}
       />
       <div className='border border-slate-300 rounded-lg bg-white'>
         {!!groupsQuery.data && !!groupsQuery.data.total ? (