diff --git a/apps/cyberstorm-remix/app/c/community.tsx b/apps/cyberstorm-remix/app/c/community.tsx
index ac9aca8cd..e5b10e85d 100644
--- a/apps/cyberstorm-remix/app/c/community.tsx
+++ b/apps/cyberstorm-remix/app/c/community.tsx
@@ -7,7 +7,7 @@ import {
   NewLink,
 } from "@thunderstore/cyberstorm";
 import "./Community.css";
-import { getDapper } from "cyberstorm/dapper/sessionUtils";
+// import { getDapper } from "cyberstorm/dapper/sessionUtils";
 import { PackageSearch } from "~/commonComponents/PackageSearch/PackageSearch";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faBook } from "@fortawesome/free-solid-svg-icons";
@@ -16,6 +16,7 @@ import { ApiError } from "@thunderstore/thunderstore-api";
 import { PackageOrderOptions } from "~/commonComponents/PackageSearch/PackageOrder";
 import { faArrowUpRight } from "@fortawesome/pro-solid-svg-icons";
 import { PageHeader } from "~/commonComponents/PageHeader/PageHeader";
+import { DapperTs } from "@thunderstore/dapper-ts";
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
   return [
@@ -27,7 +28,11 @@ export const meta: MetaFunction<typeof loader> = ({ data }) => {
 export async function loader({ request, params }: LoaderFunctionArgs) {
   if (params.communityId) {
     try {
-      const dapper = await getDapper();
+      const dapper = new DapperTs({
+        apiHost: process.env.PUBLIC_API_URL,
+        sessionId: undefined,
+        csrfToken: undefined,
+      });
       const searchParams = new URL(request.url).searchParams;
       const ordering =
         searchParams.get("ordering") ?? PackageOrderOptions.Updated;
@@ -79,7 +84,7 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
 export async function clientLoader({ request, params }: LoaderFunctionArgs) {
   if (params.communityId) {
     try {
-      const dapper = await getDapper(true);
+      const dapper = window.Dapper;
       const searchParams = new URL(request.url).searchParams;
       const ordering =
         searchParams.get("ordering") ?? PackageOrderOptions.Updated;
diff --git a/apps/cyberstorm-remix/app/communities/communities.tsx b/apps/cyberstorm-remix/app/communities/communities.tsx
index 309c56e66..196661077 100644
--- a/apps/cyberstorm-remix/app/communities/communities.tsx
+++ b/apps/cyberstorm-remix/app/communities/communities.tsx
@@ -26,8 +26,9 @@ import {
   useSearchParams,
 } from "@remix-run/react";
 import { Communities } from "@thunderstore/dapper/types";
-import { getDapper } from "cyberstorm/dapper/sessionUtils";
+// import { getDapper } from "cyberstorm/dapper/sessionUtils";
 import { PageHeader } from "~/commonComponents/PageHeader/PageHeader";
+import { DapperTs } from "@thunderstore/dapper-ts";
 
 export const meta: MetaFunction = () => {
   return [
@@ -69,7 +70,11 @@ export async function loader({ request }: LoaderFunctionArgs) {
   const order = searchParams.get("order") ?? SortOptions.Popular;
   const search = searchParams.get("search");
   const page = undefined;
-  const dapper = await getDapper();
+  const dapper = new DapperTs({
+    apiHost: process.env.PUBLIC_API_URL,
+    sessionId: undefined,
+    csrfToken: undefined,
+  });
   return await dapper.getCommunities(page, order ?? "", search ?? "");
   // REMIX TODO: Add sentry and try except so, that we get a proper error page
   // throw new Response("Community not found", { status: 404 });
@@ -80,7 +85,7 @@ export async function clientLoader({ request }: LoaderFunctionArgs) {
   const order = searchParams.get("order") ?? SortOptions.Popular;
   const search = searchParams.get("search");
   const page = undefined;
-  const dapper = await getDapper(true);
+  const dapper = window.Dapper;
   return await dapper.getCommunities(page, order ?? "", search ?? "");
   // REMIX TODO: Add sentry and try except so, that we get a proper error page
   // throw new Response("Community not found", { status: 404 });
diff --git a/apps/cyberstorm-remix/app/p/packageListing.tsx b/apps/cyberstorm-remix/app/p/packageListing.tsx
index aa3500799..d77d9147e 100644
--- a/apps/cyberstorm-remix/app/p/packageListing.tsx
+++ b/apps/cyberstorm-remix/app/p/packageListing.tsx
@@ -3,14 +3,14 @@ import {
   Outlet,
   useLoaderData,
   useLocation,
+  useOutletContext,
   useRevalidator,
 } from "@remix-run/react";
 import {
-  Button,
   CopyButton,
-  Dialog,
   Heading,
   Image,
+  Modal,
   NewBreadCrumbs,
   NewButton,
   NewIcon,
@@ -19,7 +19,6 @@ import {
   Tabs,
 } from "@thunderstore/cyberstorm";
 import "./packageListing.css";
-import { getDapper } from "cyberstorm/dapper/sessionUtils";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { ApiError } from "@thunderstore/thunderstore-api";
 import { ThunderstoreLogo } from "@thunderstore/cyberstorm/src/svg/svg";
@@ -33,7 +32,7 @@ import {
   faThumbTack,
 } from "@fortawesome/free-solid-svg-icons";
 import TeamMembers from "./components/TeamMembers/TeamMembers";
-import { ReactNode, useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useHydrated } from "remix-utils/use-hydrated";
 import {
   PackageDeprecateAction,
@@ -51,6 +50,8 @@ import {
   formatFileSize,
   formatInteger,
 } from "@thunderstore/cyberstorm/src/utils/utils";
+import { DapperTs } from "@thunderstore/dapper-ts";
+import { OutletContextShape } from "~/root";
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
   return [
@@ -62,7 +63,11 @@ export const meta: MetaFunction<typeof loader> = ({ data }) => {
 export async function loader({ params }: LoaderFunctionArgs) {
   if (params.communityId && params.namespaceId && params.packageId) {
     try {
-      const dapper = await getDapper();
+      const dapper = new DapperTs({
+        apiHost: process.env.PUBLIC_API_URL,
+        sessionId: undefined,
+        csrfToken: undefined,
+      });
       return {
         community: await dapper.getCommunity(params.communityId),
         communityFilters: await dapper.getCommunityFilters(params.communityId),
@@ -72,7 +77,6 @@ export async function loader({ params }: LoaderFunctionArgs) {
           params.packageId
         ),
         team: await dapper.getTeamDetails(params.namespaceId),
-        currentUser: await dapper.getCurrentUser(),
       };
     } catch (error) {
       if (error instanceof ApiError) {
@@ -86,44 +90,69 @@ export async function loader({ params }: LoaderFunctionArgs) {
   throw new Response("Package not found", { status: 404 });
 }
 
-export async function clientLoader({ params }: LoaderFunctionArgs) {
-  if (params.communityId && params.namespaceId && params.packageId) {
-    try {
-      const dapper = await getDapper(true);
-      return {
-        community: await dapper.getCommunity(params.communityId),
-        communityFilters: await dapper.getCommunityFilters(params.communityId),
-        listing: await dapper.getPackageListingDetails(
-          params.communityId,
-          params.namespaceId,
-          params.packageId
-        ),
-        team: await dapper.getTeamDetails(params.namespaceId),
-        currentUser: await dapper.getCurrentUser(),
-      };
-    } catch (error) {
-      if (error instanceof ApiError) {
-        throw new Response("Package not found", { status: 404 });
-      } else {
-        // REMIX TODO: Add sentry
-        throw error;
-      }
-    }
-  }
-  throw new Response("Package not found", { status: 404 });
-}
+// export async function clientLoader({ params }: LoaderFunctionArgs) {
+//   if (params.communityId && params.namespaceId && params.packageId) {
+//     try {
+//       const dapper = window.Dapper;
+//       return {
+//         community: await dapper.getCommunity(params.communityId),
+//         communityFilters: await dapper.getCommunityFilters(params.communityId),
+//         listing: await dapper.getPackageListingDetails(
+//           params.communityId,
+//           params.namespaceId,
+//           params.packageId
+//         ),
+//         team: await dapper.getTeamDetails(params.namespaceId),
+//         currentUser: await dapper.getCurrentUser(),
+//       };
+//     } catch (error) {
+//       if (error instanceof ApiError) {
+//         throw new Response("Package not found", { status: 404 });
+//       } else {
+//         // REMIX TODO: Add sentry
+//         throw error;
+//       }
+//     }
+//   }
+//   throw new Response("Package not found", { status: 404 });
+// }
 
 export default function Community() {
-  const { community, communityFilters, listing, team, currentUser } =
-    useLoaderData<typeof loader | typeof clientLoader>();
-  const revalidator = useRevalidator();
+  const { community, communityFilters, listing, team } =
+    useLoaderData<typeof loader>();
+
   const location = useLocation();
 
-  const rpc = currentUser.rated_packages_cyberstorm as string[];
-  const [isLiked, setIsLiked] = useState(
-    rpc.includes(`${listing.namespace}-${listing.name}`)
-  );
-  const [isRefetching, setIsRefetching] = useState(false);
+  const outletContext = useOutletContext() as OutletContextShape;
+  const currentUser = outletContext.currentUser;
+  const config = outletContext.requestConfig;
+
+  const [isLiked, setIsLiked] = useState(false);
+
+  // TODO: VERY CRITICAL TO FIGURE OUT !!! Figure out if this is stupid or not? I'm not sure if Remix will let fetch part of the client loader.
+  // Ideally we could just tell Remix to use the clientLoader to fetch all related data, but it seems like it just doesnt do it, so we have to do this.
+  const fetchAndSetRatedPackages = async () => {
+    const dapper = window.Dapper;
+    if (currentUser?.username) {
+      const rp = await dapper.getRatedPackages();
+      setIsLiked(
+        rp.rated_packages.includes(`${listing.namespace}-${listing.name}`)
+      );
+    }
+  };
+
+  const revalidator = useRevalidator();
+
+  const revalidateLoaderData = async () => {
+    if (revalidator.state === "idle") {
+      revalidator.revalidate();
+    }
+  };
+
+  useEffect(() => {
+    fetchAndSetRatedPackages();
+  }, []);
+
   const isHydrated = useHydrated();
   const startsHydrated = useRef(isHydrated);
 
@@ -149,64 +178,6 @@ export default function Community() {
   }, []);
   // END: For sidebar meta dates
 
-  useEffect(() => {
-    if (!startsHydrated.current && isHydrated) return;
-    if (
-      currentUser.rated_packages_cyberstorm.length > 0 &&
-      typeof currentUser.rated_packages_cyberstorm[0] === "string"
-    ) {
-      const rpc = currentUser.rated_packages_cyberstorm as string[];
-      setIsLiked(rpc.includes(`${listing.namespace}-${listing.name}`));
-    }
-    setIsRefetching(false);
-  }, [currentUser]);
-
-  // REMIX TODO: Move current user to stand-alone loader and revalidate only currentUser
-  async function useUpdateLikeStatus() {
-    if (!isRefetching) {
-      setIsRefetching(true);
-      revalidator.revalidate();
-    }
-  }
-
-  // REMIX TODO: Move current user to stand-alone loader and revalidate only currentUser
-  async function useUpdatePackageData() {
-    if (!isRefetching) {
-      setIsRefetching(true);
-      revalidator.revalidate();
-    }
-  }
-
-  // // Header helpers
-  // const packageDetailsMeta = [
-  //   <CyberstormLink
-  //     linkId="Team"
-  //     key="team"
-  //     community={listing.community_identifier}
-  //     team={listing.namespace}
-  //   >
-  //     <Button.Root plain colorScheme="transparentPrimary" paddingSize="small">
-  //       <Button.ButtonIcon>
-  //         <FontAwesomeIcon icon={faUsers} />
-  //       </Button.ButtonIcon>
-  //       <Button.ButtonLabel>{listing.namespace}</Button.ButtonLabel>
-  //     </Button.Root>
-  //   </CyberstormLink>,
-  // ];
-
-  // if (listing.website_url) {
-  //   packageDetailsMeta.push(
-  //     <a key="website" href={listing.website_url}>
-  //       <Button.Root plain colorScheme="transparentPrimary" paddingSize="small">
-  //         <Button.ButtonLabel>{listing.website_url}</Button.ButtonLabel>
-  //         <Button.ButtonIcon>
-  //           <FontAwesomeIcon icon={faArrowUpRight} />
-  //         </Button.ButtonIcon>
-  //       </Button.Root>
-  //     </a>
-  //   );
-  // }
-
   // Sidebar helpers
   const mappedPackageTagList = listing.categories.map((category) => {
     return (
@@ -228,59 +199,53 @@ export default function Community() {
             ? "source"
             : "details";
 
-  const updateTimeDelta = Math.round(
-    (Date.now() - Date.parse(listing.last_updated)) / 86400000
+  const managementTools = (
+    <Modal
+      popoverId="packageManagementTools"
+      trigger={
+        <NewButton
+          csVariant="primary"
+          {...{
+            popovertarget: "packageManagementTools",
+            popovertargetaction: "open",
+          }}
+        >
+          <NewIcon csMode="inline" noWrapper>
+            <FontAwesomeIcon icon={faCog} />
+          </NewIcon>
+          Manage
+        </NewButton>
+      }
+    >
+      <PackageEditForm
+        options={communityFilters.package_categories.map((cat) => {
+          return { label: cat.name, value: cat.slug };
+        })}
+        community={listing.community_identifier}
+        namespace={listing.namespace}
+        package={listing.name}
+        current_categories={listing.categories}
+        isDeprecated={listing.is_deprecated}
+        dataUpdateTrigger={revalidateLoaderData}
+        deprecationButton={
+          <NewButton
+            primitiveType="button"
+            onClick={PackageDeprecateAction({
+              packageName: listing.name,
+              namespace: listing.namespace,
+              isDeprecated: listing.is_deprecated,
+              dataUpdateTrigger: revalidateLoaderData,
+              config: config,
+            })}
+            csVariant={listing.is_deprecated ? "warning" : "primary"}
+          >
+            {listing.is_deprecated ? "Undeprecate" : "Deprecate"}
+          </NewButton>
+        }
+        config={config}
+      />
+    </Modal>
   );
-  const isNew = updateTimeDelta < 3;
-  if (
-    !listing.is_pinned &&
-    !listing.is_nsfw &&
-    !listing.is_deprecated &&
-    !isNew
-  ) {
-    return null;
-  }
-  const flagList: ReactNode[] = [];
-  if (listing.is_pinned) {
-    flagList.push(
-      <NewTag csSize="small" csModifiers={["dark"]} csVariant="blue">
-        <NewIcon noWrapper csMode="inline">
-          <FontAwesomeIcon icon={faThumbTack} />
-        </NewIcon>
-        Pinned
-      </NewTag>
-    );
-  }
-  if (listing.is_deprecated) {
-    flagList.push(
-      <NewTag csSize="small" csModifiers={["dark"]} csVariant="yellow">
-        <NewIcon noWrapper csMode="inline">
-          <FontAwesomeIcon icon={faWarning} />
-        </NewIcon>
-        Deprecated
-      </NewTag>
-    );
-  }
-  if (listing.is_nsfw) {
-    flagList.push(
-      <NewTag csSize="small" csModifiers={["dark"]} csVariant="pink">
-        <NewIcon noWrapper csMode="inline">
-          <FontAwesomeIcon icon={faLips} />
-        </NewIcon>
-        NSFW
-      </NewTag>
-    );
-  }
-  if (isNew) {
-    flagList.push(
-      <NewTag csSize="small" csModifiers={["dark"]} csVariant="green">
-        <NewIcon noWrapper csMode="inline">
-          <FontAwesomeIcon icon={faSparkles} />
-        </NewIcon>
-        New
-      </NewTag>
-    );
-  }
 
   return (
     <>
@@ -368,69 +333,12 @@ export default function Community() {
             }
           />
           <div className="headerActions">
-            {/* <a
-              href={listing.install_url}
-              className={headerStyles.installButton}
-            >
-              <Button.Root plain paddingSize="huge" colorScheme="fancyAccent">
-                <Button.ButtonIcon iconSize="big">
-                  <ThunderstoreLogo />
-                </Button.ButtonIcon>
-                <Button.ButtonLabel fontSize="huge" fontWeight="800">
-                  Install
-                </Button.ButtonLabel>
-              </Button.Root>
-            </a> */}
             {/* TODO: Admin tools */}
-            {currentUser.teams.some(function (cuTeam) {
+            {currentUser?.teams.some(function (cuTeam) {
               return cuTeam?.name === listing.team.name;
-            }) ? (
-              <Dialog.Root
-                title="Manage Package"
-                trigger={
-                  <Button.Root colorScheme="primary" paddingSize="medium">
-                    <Button.ButtonIcon>
-                      <FontAwesomeIcon icon={faCog} />
-                    </Button.ButtonIcon>
-                    <Button.ButtonLabel>Manage</Button.ButtonLabel>
-                  </Button.Root>
-                }
-              >
-                {/* package management */}
-                <PackageEditForm
-                  options={communityFilters.package_categories.map((cat) => {
-                    return { label: cat.name, value: cat.slug };
-                  })}
-                  community={listing.community_identifier}
-                  namespace={listing.namespace}
-                  package={listing.name}
-                  current_categories={listing.categories}
-                  isDeprecated={listing.is_deprecated}
-                  packageDataUpdateTrigger={useUpdatePackageData}
-                  deprecationButton={
-                    <Button.Root
-                      type="button"
-                      onClick={PackageDeprecateAction({
-                        packageName: listing.name,
-                        namespace: listing.namespace,
-                        isDeprecated: listing.is_deprecated,
-                        packageDataUpdateTrigger: useUpdatePackageData,
-                      })}
-                      colorScheme={
-                        listing.is_deprecated ? "warning" : "default"
-                      }
-                      paddingSize="large"
-                    >
-                      {listing.is_deprecated ? (
-                        <Button.ButtonLabel>Undeprecate</Button.ButtonLabel>
-                      ) : (
-                        <Button.ButtonLabel>Deprecate</Button.ButtonLabel>
-                      )}
-                    </Button.Root>
-                  }
-                />
-              </Dialog.Root>
-            ) : null}
+            })
+              ? managementTools
+              : null}
           </div>
         </div>
       </header>
@@ -566,15 +474,16 @@ export default function Community() {
             <NewButton
               primitiveType="button"
               onClick={PackageLikeAction({
-                isLoggedIn: Boolean(currentUser.username),
+                isLoggedIn: Boolean(currentUser?.username),
                 packageName: listing.name,
                 namespace: listing.namespace,
                 isLiked: isLiked,
-                currentUserUpdateTrigger: useUpdateLikeStatus,
+                dataUpdateTrigger: fetchAndSetRatedPackages,
+                config: config,
               })}
               tooltipText="Like"
               icon={faThumbsUp}
-              csVariant="secondary"
+              csVariant={isLiked ? "success" : "secondary"}
             />
             {/* <ReportButton onClick={TODO} /> */}
           </div>
@@ -667,7 +576,44 @@ export default function Community() {
               {mappedPackageTagList}
             </div>
             <div className="nimbus-packagelisting__sidebar__wrapper__categories_or_tags">
-              {flagList}
+              {listing.is_pinned ? (
+                <NewTag csSize="small" csModifiers={["dark"]} csVariant="blue">
+                  <NewIcon noWrapper csMode="inline">
+                    <FontAwesomeIcon icon={faThumbTack} />
+                  </NewIcon>
+                  Pinned
+                </NewTag>
+              ) : null}
+              {listing.is_deprecated ? (
+                <NewTag
+                  csSize="small"
+                  csModifiers={["dark"]}
+                  csVariant="yellow"
+                >
+                  <NewIcon noWrapper csMode="inline">
+                    <FontAwesomeIcon icon={faWarning} />
+                  </NewIcon>
+                  Deprecated
+                </NewTag>
+              ) : null}
+              {listing.is_nsfw ? (
+                <NewTag csSize="small" csModifiers={["dark"]} csVariant="pink">
+                  <NewIcon noWrapper csMode="inline">
+                    <FontAwesomeIcon icon={faLips} />
+                  </NewIcon>
+                  NSFW
+                </NewTag>
+              ) : null}
+              {Math.round(
+                (Date.now() - Date.parse(listing.last_updated)) / 86400000
+              ) < 3 ? (
+                <NewTag csSize="small" csModifiers={["dark"]} csVariant="green">
+                  <NewIcon noWrapper csMode="inline">
+                    <FontAwesomeIcon icon={faSparkles} />
+                  </NewIcon>
+                  New
+                </NewTag>
+              ) : null}
             </div>
           </div>
 
diff --git a/apps/cyberstorm-remix/app/p/tabs/Changelog/Changelog.tsx b/apps/cyberstorm-remix/app/p/tabs/Changelog/Changelog.tsx
index 2eaf7e410..f91931621 100644
--- a/apps/cyberstorm-remix/app/p/tabs/Changelog/Changelog.tsx
+++ b/apps/cyberstorm-remix/app/p/tabs/Changelog/Changelog.tsx
@@ -1,13 +1,18 @@
 import styles from "../../../Markdown.module.css";
-import { getDapper } from "cyberstorm/dapper/sessionUtils";
+// import { getDapper } from "cyberstorm/dapper/sessionUtils";
 import { ApiError } from "@thunderstore/thunderstore-api";
 import { useLoaderData } from "@remix-run/react";
 import { LoaderFunctionArgs } from "@remix-run/node";
+import { DapperTs } from "@thunderstore/dapper-ts";
 
 export async function loader({ params }: LoaderFunctionArgs) {
   if (params.namespaceId && params.packageId) {
     try {
-      const dapper = await getDapper();
+      const dapper = new DapperTs({
+        apiHost: process.env.PUBLIC_API_URL,
+        sessionId: undefined,
+        csrfToken: undefined,
+      });
       return {
         status: "ok",
         message: "",
@@ -39,7 +44,7 @@ export async function loader({ params }: LoaderFunctionArgs) {
 export async function clientLoader({ params }: LoaderFunctionArgs) {
   if (params.namespaceId && params.packageId) {
     try {
-      const dapper = await getDapper(true);
+      const dapper = window.Dapper;
       return {
         status: "ok",
         message: "",
diff --git a/apps/cyberstorm-remix/app/p/tabs/Readme/Readme.tsx b/apps/cyberstorm-remix/app/p/tabs/Readme/Readme.tsx
index bdbdc7f7a..2b6cd83b2 100644
--- a/apps/cyberstorm-remix/app/p/tabs/Readme/Readme.tsx
+++ b/apps/cyberstorm-remix/app/p/tabs/Readme/Readme.tsx
@@ -1,13 +1,18 @@
 import { LoaderFunctionArgs } from "@remix-run/node";
-import { getDapper } from "cyberstorm/dapper/sessionUtils";
+// import { getDapper } from "cyberstorm/dapper/sessionUtils";
 import styles from "../../../Markdown.module.css";
 import { ApiError } from "@thunderstore/thunderstore-api";
 import { useLoaderData } from "@remix-run/react";
+import { DapperTs } from "@thunderstore/dapper-ts";
 
 export async function loader({ params }: LoaderFunctionArgs) {
   if (params.namespaceId && params.packageId) {
     try {
-      const dapper = await getDapper();
+      const dapper = new DapperTs({
+        apiHost: process.env.PUBLIC_API_URL,
+        sessionId: undefined,
+        csrfToken: undefined,
+      });
       return {
         status: "ok",
         message: "",
@@ -39,7 +44,7 @@ export async function loader({ params }: LoaderFunctionArgs) {
 export async function clientLoader({ params }: LoaderFunctionArgs) {
   if (params.namespaceId && params.packageId) {
     try {
-      const dapper = await getDapper(true);
+      const dapper = window.Dapper;
       return {
         status: "ok",
         message: "",
diff --git a/apps/cyberstorm-remix/app/p/tabs/Required/Required.tsx b/apps/cyberstorm-remix/app/p/tabs/Required/Required.tsx
index 38a0c0ccb..0fd987da6 100644
--- a/apps/cyberstorm-remix/app/p/tabs/Required/Required.tsx
+++ b/apps/cyberstorm-remix/app/p/tabs/Required/Required.tsx
@@ -1,15 +1,20 @@
 import "./Required.css";
 import { Heading } from "@thunderstore/cyberstorm";
 import { LoaderFunctionArgs } from "@remix-run/node";
-import { getDapper } from "cyberstorm/dapper/sessionUtils";
+// import { getDapper } from "cyberstorm/dapper/sessionUtils";
 import { ApiError } from "@thunderstore/thunderstore-api";
 import { useLoaderData } from "@remix-run/react";
 import { ListingDependency } from "~/commonComponents/ListingDependency/ListingDependency";
+import { DapperTs } from "@thunderstore/dapper-ts";
 
 export async function loader({ params }: LoaderFunctionArgs) {
   if (params.communityId && params.namespaceId && params.packageId) {
     try {
-      const dapper = await getDapper();
+      const dapper = new DapperTs({
+        apiHost: process.env.PUBLIC_API_URL,
+        sessionId: undefined,
+        csrfToken: undefined,
+      });
       return {
         listing: await dapper.getPackageListingDetails(
           params.communityId,
@@ -32,7 +37,7 @@ export async function loader({ params }: LoaderFunctionArgs) {
 export async function clientLoader({ params }: LoaderFunctionArgs) {
   if (params.communityId && params.namespaceId && params.packageId) {
     try {
-      const dapper = await getDapper(true);
+      const dapper = window.Dapper;
       return {
         listing: await dapper.getPackageListingDetails(
           params.communityId,
diff --git a/apps/cyberstorm-remix/app/p/tabs/Versions/Versions.tsx b/apps/cyberstorm-remix/app/p/tabs/Versions/Versions.tsx
index febadeffc..2be400d78 100644
--- a/apps/cyberstorm-remix/app/p/tabs/Versions/Versions.tsx
+++ b/apps/cyberstorm-remix/app/p/tabs/Versions/Versions.tsx
@@ -14,15 +14,20 @@ import {
   NewAlert,
 } from "@thunderstore/cyberstorm";
 import { LoaderFunctionArgs } from "@remix-run/node";
-import { getDapper } from "cyberstorm/dapper/sessionUtils";
+// import { getDapper } from "cyberstorm/dapper/sessionUtils";
 import { ApiError } from "@thunderstore/thunderstore-api";
 import { useLoaderData } from "@remix-run/react";
 import { versionsSchema } from "@thunderstore/dapper-ts/src/methods/package";
+import { DapperTs } from "@thunderstore/dapper-ts";
 
 export async function loader({ params }: LoaderFunctionArgs) {
   if (params.namespaceId && params.packageId) {
     try {
-      const dapper = await getDapper();
+      const dapper = new DapperTs({
+        apiHost: process.env.PUBLIC_API_URL,
+        sessionId: undefined,
+        csrfToken: undefined,
+      });
       return {
         status: "ok",
         message: "",
@@ -54,7 +59,7 @@ export async function loader({ params }: LoaderFunctionArgs) {
 export async function clientLoader({ params }: LoaderFunctionArgs) {
   if (params.namespaceId && params.packageId) {
     try {
-      const dapper = await getDapper(true);
+      const dapper = window.Dapper;
       return {
         status: "ok",
         message: "",
diff --git a/apps/cyberstorm-remix/app/root.tsx b/apps/cyberstorm-remix/app/root.tsx
index fcc0d72fa..d96b339c5 100644
--- a/apps/cyberstorm-remix/app/root.tsx
+++ b/apps/cyberstorm-remix/app/root.tsx
@@ -9,23 +9,18 @@ import {
   Scripts,
   // ScrollRestoration,
   isRouteErrorResponse,
-  useLoaderData,
+  redirect,
   useLocation,
   useRouteError,
+  useRouteLoaderData,
 } from "@remix-run/react";
 // import { LinksFunction } from "@remix-run/react/dist/routeModules";
 import { Provider as RadixTooltip } from "@radix-ui/react-tooltip";
 
-import {
-  MobileNavigationMenu,
-  MobileUserPopoverContent,
-  Navigation,
-} from "cyberstorm/navigation/Navigation";
 import { LinkLibrary } from "cyberstorm/utils/LinkLibrary";
 import { AdContainer, LinkingProvider } from "@thunderstore/cyberstorm";
 import { DapperTs } from "@thunderstore/dapper-ts";
-// import { CurrentUser } from "@thunderstore/dapper/types";
-// import { getDapper } from "cyberstorm/dapper/sessionUtils";
+import { CurrentUser } from "@thunderstore/dapper/types";
 
 import { captureRemixErrorBoundaryError, withSentry } from "@sentry/remix";
 import {
@@ -35,11 +30,10 @@ import {
 import { useEffect, useRef, useState } from "react";
 import { useHydrated } from "remix-utils/use-hydrated";
 import Toast from "@thunderstore/cyberstorm/src/components/Toast";
-import { SessionProvider } from "@thunderstore/ts-api-react";
-import { CurrentUser } from "@thunderstore/dapper/types";
+import { SessionProvider, useSession } from "@thunderstore/ts-api-react";
 import { Footer } from "./commonComponents/Footer/Footer";
-// Disabled until we have "rated_packages_cyberstorm" available in the currentUser django endpoint
-// import { getDapper } from "cyberstorm/dapper/sessionUtils";
+import { NavigationWrapper } from "cyberstorm/navigation/NavigationWrapper";
+import { RequestConfig } from "@thunderstore/thunderstore-api";
 
 // REMIX TODO: https://remix.run/docs/en/main/route/links
 // export const links: LinksFunction = () => [{ rel: "stylesheet", href: styles }];
@@ -71,6 +65,11 @@ declare global {
   }
 }
 
+export type OutletContextShape = {
+  currentUser: CurrentUser | undefined;
+  requestConfig: RequestConfig;
+};
+
 export const meta: MetaFunction = () => {
   return [
     { title: "Thunderstore" },
@@ -95,34 +94,16 @@ export async function loader() {
   };
 }
 
-// export async function clientLoader() {
-//   const dapper = await getDapper(true);
-
-//   return {
-//     envStuff: {
-//       ENV: getPublicEnvVariables([
-//         "PUBLIC_API_URL",
-//         "PUBLIC_CLIENT_SENTRY_DSN",
-//         "PUBLIC_SITE_URL",
-//       ]),
-//     },
-//     currentUser: await dapper.getCurrentUser(),
-//   };
-// }
-
 export function shouldRevalidate() {
   return false;
 }
 
 const adContainerIds = ["right-column-1", "right-column-2", "right-column-3"];
 
-function Root() {
-  const loaderOutput = useLoaderData<typeof loader>();
-  const parsedLoaderOutput: {
-    envStuff: {
-      ENV: publicEnvVariables;
-    };
-  } = JSON.parse(JSON.stringify(loaderOutput));
+export function Layout({ children }: { children: React.ReactNode }) {
+  const data = useRouteLoaderData<typeof loader>("root");
+  // const error = useRouteError();
+  // console.log(error);
 
   const location = useLocation();
   const shouldShowAds = location.pathname.startsWith("/teams")
@@ -135,25 +116,6 @@ function Root() {
           ? false
           : true;
 
-  const isHydrated = useHydrated();
-  const startsHydrated = useRef(isHydrated);
-  // Disabled until we have "rated_packages_cyberstorm" available in the currentUser django endpoint
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [currentUser, setCurrentUser] = useState<CurrentUser>();
-
-  // Disabled until we have "rated_packages_cyberstorm" available in the currentUser django endpoint
-  // useEffect(() => {
-  //   if (!startsHydrated.current && isHydrated) return;
-  //   const fetchAndSetUser = async () => {
-  //     const dapper = await getDapper(true);
-  //     const fetchedUser = await dapper.getCurrentUser();
-  //     if (fetchedUser?.username) {
-  //       setCurrentUser(fetchedUser);
-  //     }
-  //   };
-  //   fetchAndSetUser();
-  // }, []);
-
   return (
     <html lang="en">
       <head>
@@ -184,35 +146,27 @@ function Root() {
         <Links />
       </head>
       <body>
-        <script
-          dangerouslySetInnerHTML={{
-            __html: `window.ENV = ${JSON.stringify(
-              parsedLoaderOutput.envStuff.ENV
-            )}`,
-          }}
-        />
         <SessionProvider
-          domain={parsedLoaderOutput.envStuff.ENV.PUBLIC_API_URL}
+          apiHost={
+            data?.envStuff.ENV.PUBLIC_API_URL ?? "APIHOST_MISSING_IN_ENV"
+          }
         >
           <LinkingProvider value={LinkLibrary}>
             <Toast.Provider toastDuration={10000}>
               <RadixTooltip delayDuration={80}>
-                <div className="nimbus-root">
-                  {/* REMIX TODO: For whatever reason the Navigation seems to cause suspense boundary errors. Couldn't find a reason why */}
-                  <Navigation
-                    hydrationCheck={!startsHydrated.current && isHydrated}
-                    currentUser={currentUser}
+                {data ? (
+                  <script
+                    dangerouslySetInnerHTML={{
+                      __html: `window.ENV = ${JSON.stringify(
+                        data.envStuff.ENV
+                      )}`,
+                    }}
                   />
-                  <MobileNavigationMenu />
-                  {!startsHydrated.current && isHydrated && currentUser ? (
-                    <MobileUserPopoverContent user={currentUser} />
-                  ) : (
-                    <MobileUserPopoverContent />
-                  )}
+                ) : null}
+                <div className="nimbus-root">
+                  <NavigationWrapper />
                   <section className="nimbus-root__content">
-                    <div className="nimbus-root__outlet">
-                      <Outlet />
-                    </div>
+                    <div className="nimbus-root__outlet">{children}</div>
                     <div className="nimbus-root__ads-container">
                       {shouldShowAds
                         ? adContainerIds.map((cid, k_i) => (
@@ -223,18 +177,44 @@ function Root() {
                   </section>
                   <Footer />
                 </div>
+                {shouldShowAds ? <AdsInit /> : null}
               </RadixTooltip>
             </Toast.Provider>
           </LinkingProvider>
         </SessionProvider>
         {/* <ScrollRestoration /> */}
         <Scripts />
-        {shouldShowAds ? <AdsInit /> : null}
       </body>
     </html>
   );
 }
 
+function App() {
+  const [currentUser, setCurrentUser] = useState<CurrentUser | undefined>(
+    undefined
+  );
+  const [requestConfig, setRequestConfig] = useState<RequestConfig>();
+
+  const session = useSession();
+  useEffect(() => {
+    // INIT DAPPER
+    window.Dapper = new DapperTs(session.getConfig(), () => {
+      session.clearSession();
+      redirect("/communities");
+    });
+    setCurrentUser(session.getSessionCurrentUser(true));
+    setRequestConfig(session.getConfig());
+  }, []);
+
+  return (
+    <Outlet
+      context={{ currentUser: currentUser, requestConfig: requestConfig }}
+    />
+  );
+}
+
+export default withSentry(App);
+
 // REMIX TODO: We don't have any data available in the root ErrorBoundary, so we might want to change the designs
 export function ErrorBoundary() {
   // REMIX TODO: We need to call the loader separately somehow to get the CurrentUser
@@ -252,58 +232,25 @@ export function ErrorBoundary() {
   }
   const isResponseError = isRouteErrorResponse(error);
   return (
-    <html lang="en">
-      <head>
-        <title>Oh no!</title>
-        <Meta />
-        <Links />
-      </head>
-      <body>
-        {/* <script
-          dangerouslySetInnerHTML={{
-            __html: `window.ENV = ${process.env.PUBLIC_API_URL}`,
-          }}
-        /> */}
-        <Scripts />
-        <LinkingProvider value={LinkLibrary}>
-          <Toast.Provider toastDuration={10000}>
-            <RadixTooltip delayDuration={300}>
-              <div className="nimbus-root">
-                {/* <Navigation user={getEmptyUser} /> */}
-                <section className="nimbus-root__content">
-                  <div className="nimbus-root__side-containers" />
-                  <div className="nimbus-root__middle-container">
-                    <div className="nimbus-error">
-                      <div
-                        className="nimbus-error__glitch"
-                        data-text={isResponseError ? error.status : 500}
-                      >
-                        <span>{isResponseError ? error.status : 500}</span>
-                      </div>
-                      <div className="nimbus-error__description">
-                        {isResponseError ? error.data : "Internal server error"}
-                      </div>
-                      {!isResponseError && (
-                        <div className="nimbus-error__flavor">
-                          Beep boop. Server something error happens.
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                  <div className="nimbus-root__side-containers"></div>
-                </section>
-                <Footer />
-              </div>
-            </RadixTooltip>
-          </Toast.Provider>
-        </LinkingProvider>
-      </body>
-    </html>
+    <div className="nimbus-error">
+      <div
+        className="nimbus-error__glitch"
+        data-text={isResponseError ? error.status : 500}
+      >
+        <span>{isResponseError ? error.status : 500}</span>
+      </div>
+      <div className="nimbus-error__description">
+        {isResponseError ? error.data : "Internal server error"}
+      </div>
+      {!isResponseError && (
+        <div className="nimbus-error__flavor">
+          Beep boop. Server something error happens.
+        </div>
+      )}
+    </div>
   );
 }
 
-export default withSentry(Root);
-
 // Temporary solution for implementing ads
 // REMIX TODO: Move to dynamic html
 function AdsInit() {
diff --git a/apps/cyberstorm-remix/cyberstorm/dapper/sessionUtils.ts b/apps/cyberstorm-remix/cyberstorm/dapper/sessionUtils.ts
index 85803ed7d..7709427ee 100644
--- a/apps/cyberstorm-remix/cyberstorm/dapper/sessionUtils.ts
+++ b/apps/cyberstorm-remix/cyberstorm/dapper/sessionUtils.ts
@@ -1,98 +1,19 @@
 /* eslint-disable prettier/prettier */
 import { redirect } from "@remix-run/react";
 import { DapperTs } from "@thunderstore/dapper-ts";
-import { RequestConfig } from "@thunderstore/thunderstore-api";
+import { emptyUser } from "@thunderstore/dapper-ts/src/methods/currentUser";
+import { CurrentUser } from "@thunderstore/dapper/types";
+import { useSession } from "@thunderstore/ts-api-react";
+import { createContext } from "react";
 
-export async function getDapper(isClient = false) {
+export function getDapper(isClient = false) {
   if (isClient) {
-    // Disabled until we have "rated_packages_cyberstorm" available in the currentUser django endpoint
-    // const getCookie = (cookieName: string) =>
-    //   new RegExp(`${cookieName}=([^;]+);`).exec(document.cookie[-1] === ";" ? document.cookie : document.cookie + ";")?.[1];
-    const deleteCookie = (name: string) => {
-      const date = new Date();
-      date.setTime(0);
-      document.cookie = `${name}=${null}; expires=${date.toUTCString()}; path=/`;
-    };
-
-    const removeSession = () => {
-      deleteCookie("sessionid");
-      deleteCookie("csrftoken");
+    const session = useSession();
+    // TODO: Add "ValidateDapper" and stop always returning a new dapper.
+    return new DapperTs(session.getConfig(), () => {
+      session.clearSession();
       redirect("/communities");
-    };
-    const dapper = window.Dapper;
-
-    let shouldRemakeDapper = false;
-
-    // Disabled until we have "rated_packages_cyberstorm" available in the currentUser django endpoint
-    // const cookie = getCookie("sessionid");
-    // const csrftoken = getCookie("csrftoken");
-
-    const cookie = undefined;
-    const csrftoken = undefined;
-
-    const newConfig: RequestConfig = {
-      apiHost: window.ENV.PUBLIC_API_URL,
-      sessionId: cookie ?? undefined,
-      csrfToken: csrftoken ?? undefined,
-    };
-
-    if (dapper) {
-      // REMIX TODO: Security issues?
-      // API url has changed
-      // if (dapper.config.apiHost !== window.ENV.PUBLIC_API_URL) {
-      //   newConfig.apiHost = window.ENV.PUBLIC_API_URL;
-      //   shouldRemakeDapper = true;
-      // }
-
-      // sessionId is old
-      if (
-        dapper.config.sessionId &&
-        typeof cookie === "string" &&
-        dapper.config.sessionId !== cookie
-      ) {
-        newConfig.sessionId = cookie;
-        shouldRemakeDapper = true;
-      }
-
-      // sessionId is not set and cookie exists
-      if (!dapper.config.sessionId && typeof cookie === "string") {
-        newConfig.sessionId = cookie;
-        shouldRemakeDapper = true;
-      }
-
-      // csrfToken is old
-      if (
-        dapper.config.csrfToken &&
-        typeof csrftoken === "string" &&
-        dapper.config.csrfToken !== csrftoken
-      ) {
-        newConfig.csrfToken = csrftoken;
-        shouldRemakeDapper = true;
-      }
-
-      // csrfToken is not set and cookie exists
-      if (!dapper.config.csrfToken && typeof csrftoken === "string") {
-        newConfig.csrfToken = csrftoken;
-        shouldRemakeDapper = true;
-      }
-    } else {
-      shouldRemakeDapper = true;
-    }
-
-    const createNewDapper = () => {
-      const newDapper = new DapperTs(newConfig, removeSession);
-      window.Dapper = newDapper;
-      return newDapper;
-    };
-
-    // Dapper should exist at this point, but we are ensuring it for type safety and idiot me safety
-    const existingDapper = shouldRemakeDapper
-      ? createNewDapper()
-      : dapper
-        ? dapper
-        : new DapperTs(newConfig, removeSession);
-
-    return existingDapper;
+    });
   } else {
     return new DapperTs({
       apiHost: process.env.PUBLIC_API_URL,
@@ -101,3 +22,6 @@ export async function getDapper(isClient = false) {
     });
   }
 }
+
+export const CurrentUserContext = createContext<CurrentUser>(emptyUser);
+export const CurrentUserProvider = CurrentUserContext.Provider;
diff --git a/apps/cyberstorm-remix/cyberstorm/navigation/DesktopUserDropdown.tsx b/apps/cyberstorm-remix/cyberstorm/navigation/DesktopUserDropdown.tsx
index 339af92ab..79aacc075 100644
--- a/apps/cyberstorm-remix/cyberstorm/navigation/DesktopUserDropdown.tsx
+++ b/apps/cyberstorm-remix/cyberstorm/navigation/DesktopUserDropdown.tsx
@@ -1,8 +1,7 @@
-import { faSignOut, faUsers, faCog } from "@fortawesome/free-solid-svg-icons";
+import { faSignOut } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import styles from "./Navigation.module.css";
-// import dropdownStyles from "../../../../packages/cyberstorm/src/newComponents/DropDown/DropDown.module.css";
 import {
   Avatar,
   NewDropDown,
@@ -29,11 +28,13 @@ export function DesktopUserDropdown(props: { user: CurrentUser }) {
       }
     >
       <NewDropDownItem rootClasses={styles.dropDownUserInfo}>
-        <Avatar src={avatar} username={user.username} size="small" />
-        <p className={styles.dropdownUserInfoDetails}>{user.username}</p>
+        <div>
+          <Avatar src={avatar} username={user.username} size="small" />
+          <p className={styles.dropdownUserInfoDetails}>{user.username}</p>
+        </div>
       </NewDropDownItem>
       <NewDropDownDivider />
-      <NewDropDownItem asChild>
+      {/* <NewDropDownItem asChild>
         <NewLink
           primitiveType="cyberstormLink"
           linkId="Settings"
@@ -44,8 +45,8 @@ export function DesktopUserDropdown(props: { user: CurrentUser }) {
           </NewIcon>
           Settings
         </NewLink>
-      </NewDropDownItem>
-      <NewDropDownItem asChild>
+      </NewDropDownItem> */}
+      {/* <NewDropDownItem asChild>
         <NewLink
           primitiveType="cyberstormLink"
           linkId="Teams"
@@ -56,7 +57,7 @@ export function DesktopUserDropdown(props: { user: CurrentUser }) {
           </NewIcon>
           Teams
         </NewLink>
-      </NewDropDownItem>
+      </NewDropDownItem> */}
       <NewDropDownItem asChild>
         <NewLink
           primitiveType="link"
diff --git a/apps/cyberstorm-remix/cyberstorm/navigation/Navigation.tsx b/apps/cyberstorm-remix/cyberstorm/navigation/Navigation.tsx
index be6ab85ff..83dcbbd68 100644
--- a/apps/cyberstorm-remix/cyberstorm/navigation/Navigation.tsx
+++ b/apps/cyberstorm-remix/cyberstorm/navigation/Navigation.tsx
@@ -20,9 +20,8 @@ import {
   ThunderstoreLogo,
 } from "@thunderstore/cyberstorm/src/svg/svg";
 import { DevelopersDropDown } from "./DevelopersDropDown";
-// Disabled until we have "rated_packages_cyberstorm" available in the currentUser django endpoint
-// import { DesktopUserDropdown } from "./DesktopUserDropdown";
-// import { DesktopLoginPopover } from "./DesktopLoginPopover";
+import { DesktopUserDropdown } from "./DesktopUserDropdown";
+import { DesktopLoginPopover } from "./DesktopLoginPopover";
 import { CurrentUser } from "@thunderstore/dapper/types";
 
 import { faSignOut } from "@fortawesome/free-solid-svg-icons";
@@ -35,8 +34,6 @@ export function Navigation(props: {
   hydrationCheck: boolean;
   currentUser?: CurrentUser;
 }) {
-  // Disabled until we have "rated_packages_cyberstorm" available in the currentUser django endpoint
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { hydrationCheck, currentUser } = props;
   return (
     <>
@@ -75,12 +72,11 @@ export function Navigation(props: {
           >
             Get App
           </NewButton>
-          {/* Disabled until we have "rated_packages_cyberstorm" available in the currentUser django endpoint */}
-          {/* {hydrationCheck && currentUser ? (
+          {hydrationCheck && currentUser ? (
             <DesktopUserDropdown user={currentUser} />
           ) : (
             <DesktopLoginPopover />
-          )} */}
+          )}
         </div>
       </header>
 
@@ -107,8 +103,7 @@ export function Navigation(props: {
           </NewIcon>
           Browse
         </NewLink>
-        {/* Disabled until we have "rated_packages_cyberstorm" available in the currentUser django endpoint */}
-        {/* <button
+        <button
           {...{
             popovertarget: "mobileNavAccount",
             popovertargetaction: "open",
@@ -123,7 +118,7 @@ export function Navigation(props: {
             size="verySmoll"
           />
           Account
-        </button> */}
+        </button>
       </nav>
     </>
   );
diff --git a/apps/cyberstorm-remix/cyberstorm/navigation/NavigationWrapper.tsx b/apps/cyberstorm-remix/cyberstorm/navigation/NavigationWrapper.tsx
new file mode 100644
index 000000000..cf618101d
--- /dev/null
+++ b/apps/cyberstorm-remix/cyberstorm/navigation/NavigationWrapper.tsx
@@ -0,0 +1,42 @@
+import { useSession } from "@thunderstore/ts-api-react";
+import { useHydrated } from "remix-utils/use-hydrated";
+import { useEffect, useRef, useState } from "react";
+import {
+  MobileNavigationMenu,
+  MobileUserPopoverContent,
+  Navigation,
+} from "./Navigation";
+import { CurrentUser } from "@thunderstore/dapper/types";
+
+export function NavigationWrapper() {
+  const isHydrated = useHydrated();
+  const startsHydrated = useRef(isHydrated);
+
+  // We have to do this CurrentUser thing manually, because we dont' have access to useOutletContext in the Navigation.
+  // As it's deep enough in the tree.
+  const [currentUser, setCurrentUser] = useState<CurrentUser>();
+  const session = useSession();
+  useEffect(() => {
+    const cu = session.getSessionCurrentUser();
+    if (cu.username) {
+      setCurrentUser(session.getSessionCurrentUser());
+    } else {
+      setCurrentUser(undefined);
+    }
+  }, []);
+
+  return (
+    <>
+      <Navigation
+        hydrationCheck={!startsHydrated.current && isHydrated}
+        currentUser={currentUser}
+      />
+      <MobileNavigationMenu />
+      {!startsHydrated.current && isHydrated && currentUser ? (
+        <MobileUserPopoverContent user={currentUser} />
+      ) : (
+        <MobileUserPopoverContent />
+      )}
+    </>
+  );
+}
diff --git a/packages/cyberstorm-forms/src/actions/PackageDeprecateAction.tsx b/packages/cyberstorm-forms/src/actions/PackageDeprecateAction.tsx
index 04efb5239..629bf9110 100644
--- a/packages/cyberstorm-forms/src/actions/PackageDeprecateAction.tsx
+++ b/packages/cyberstorm-forms/src/actions/PackageDeprecateAction.tsx
@@ -3,13 +3,17 @@ import {
   ApiAction,
   PackageDeprecateActionSchema,
 } from "@thunderstore/ts-api-react-actions";
-import { packageDeprecate } from "@thunderstore/thunderstore-api";
+import {
+  packageDeprecate,
+  RequestConfig,
+} from "@thunderstore/thunderstore-api";
 
 export function PackageDeprecateAction(props: {
   packageName: string;
   namespace: string;
   isDeprecated: boolean;
-  packageDataUpdateTrigger: () => Promise<void>;
+  dataUpdateTrigger: () => Promise<void>;
+  config: RequestConfig;
 }) {
   const { onSubmitSuccess, onSubmitError } = useFormToaster({
     successMessage: `${
@@ -18,7 +22,7 @@ export function PackageDeprecateAction(props: {
   });
 
   function onActionSuccess() {
-    props.packageDataUpdateTrigger();
+    props.dataUpdateTrigger();
     onSubmitSuccess();
   }
 
@@ -32,6 +36,7 @@ export function PackageDeprecateAction(props: {
     endpoint: packageDeprecate,
     onSubmitSuccess: onActionSuccess,
     onSubmitError: onActionError,
+    config: props.config,
   });
 
   return function () {
diff --git a/packages/cyberstorm-forms/src/actions/PackageLikeAction.tsx b/packages/cyberstorm-forms/src/actions/PackageLikeAction.tsx
index de131fdd8..2d9796613 100644
--- a/packages/cyberstorm-forms/src/actions/PackageLikeAction.tsx
+++ b/packages/cyberstorm-forms/src/actions/PackageLikeAction.tsx
@@ -3,14 +3,15 @@ import {
   ApiAction,
   packageLikeActionSchema,
 } from "@thunderstore/ts-api-react-actions";
-import { packageLike } from "@thunderstore/thunderstore-api";
+import { packageLike, RequestConfig } from "@thunderstore/thunderstore-api";
 
 export function PackageLikeAction(props: {
   isLoggedIn: boolean;
   packageName: string;
   namespace: string;
   isLiked: boolean;
-  currentUserUpdateTrigger: () => Promise<void>;
+  dataUpdateTrigger: () => Promise<void>;
+  config: RequestConfig;
 }) {
   const { onSubmitSuccess, onSubmitError } = useFormToaster({
     successMessage: `${props.isLiked ? "Unliked" : "Liked"} package ${
@@ -22,20 +23,20 @@ export function PackageLikeAction(props: {
   });
 
   function onActionSuccess() {
-    props.currentUserUpdateTrigger();
+    props.dataUpdateTrigger();
     onSubmitSuccess();
   }
 
   function onActionError() {
     onSubmitError();
   }
-
   const onSubmit = ApiAction({
     schema: packageLikeActionSchema,
     meta: { namespace_id: props.namespace, package_name: props.packageName },
     endpoint: packageLike,
     onSubmitSuccess: onActionSuccess,
     onSubmitError: onActionError,
+    config: props.config,
   });
 
   return function () {
diff --git a/packages/cyberstorm-forms/src/forms/PackageEditForm.tsx b/packages/cyberstorm-forms/src/forms/PackageEditForm.tsx
index 30e912162..2f0e5e66e 100644
--- a/packages/cyberstorm-forms/src/forms/PackageEditForm.tsx
+++ b/packages/cyberstorm-forms/src/forms/PackageEditForm.tsx
@@ -1,5 +1,8 @@
 import styles from "./PackageEditForm.module.css";
-import { packageEditCategories } from "@thunderstore/thunderstore-api";
+import {
+  packageEditCategories,
+  RequestConfig,
+} from "@thunderstore/thunderstore-api";
 import {
   ApiForm,
   packageEditFormSchema,
@@ -27,7 +30,8 @@ export function PackageEditForm(props: {
   current_categories: { slug: string; name: string }[];
   isDeprecated: boolean;
   deprecationButton: ReactNode;
-  packageDataUpdateTrigger: () => Promise<void>;
+  dataUpdateTrigger: () => Promise<void>;
+  config: RequestConfig;
 }) {
   const { onSubmitSuccess, onSubmitError } = useFormToaster({
     successMessage: "Changes saved!",
@@ -36,7 +40,7 @@ export function PackageEditForm(props: {
   return (
     <ApiForm
       onSubmitSuccess={() => {
-        props.packageDataUpdateTrigger();
+        props.dataUpdateTrigger();
         onSubmitSuccess();
       }}
       onSubmitError={onSubmitError}
@@ -48,6 +52,7 @@ export function PackageEditForm(props: {
         current_categories: props.current_categories.map((cat) => cat.slug),
       }}
       endpoint={packageEditCategories}
+      config={props.config}
       formProps={{ className: styles.root }}
     >
       <div className={styles.dialog}>
diff --git a/packages/cyberstorm-theme/src/components.tsx b/packages/cyberstorm-theme/src/components.tsx
index 2d2f2509a..8f387b64a 100644
--- a/packages/cyberstorm-theme/src/components.tsx
+++ b/packages/cyberstorm-theme/src/components.tsx
@@ -110,6 +110,8 @@ export { type MenuVariants, MenuVariantsList } from "./components/Menu/Menu";
 export {
   type ModalVariants,
   ModalVariantsList,
+  type ModalSizes,
+  ModalSizesList,
 } from "./components/Modal/Modal";
 export {
   type AdContainerVariants,
diff --git a/packages/cyberstorm-theme/src/components/Modal/Modal.css b/packages/cyberstorm-theme/src/components/Modal/Modal.css
index dfa8bb805..f976c5423 100644
--- a/packages/cyberstorm-theme/src/components/Modal/Modal.css
+++ b/packages/cyberstorm-theme/src/components/Modal/Modal.css
@@ -1,16 +1,25 @@
 @layer theme-components {
-  /* VARIANTS DEFAULT STATE */
-  .ts-modal:where(.ts-variant--primary) {
-    --modal-color: var(--modal-primary-color--default);
+  /* VARIANTS */
+  .ts-modal:where(.ts-variant--default) {
+    --modal-box-shadow: var(--modal-box-shadow--default);
+    --modal-background: var(--modal-background--default);
+    --modal-border: var(--modal-border--default);
+  }
 
-    &:where(:hover) {
-      --modal-color: var(--modal-primary-color--hover);
-    }
+  /* SIZES */
+  .ts-modal:where(.ts-size--medium) {
+    --modal-border-radius: var(--modal-md-border-radius);
+    --modal-content-padding: var(--modal-md-content-padding);
+    --modal-content-gap: var(--modal-md-content-gap);
   }
 
   /* TOKENS */
   :root {
-    --modal-primary-color--default: var(--color-text-accent);
-    --modal-primary-color--hover: var(--color-text-primary);
+    --modal-box-shadow--default: var(--shadow-lg);
+    --modal-background--default: var(--color-surface-2);
+    --modal-border--default: 1px solid var(--color-surface-7);
+    --modal-md-border-radius: var(--radius-md);
+    --modal-md-content-padding: 3rem 5.5rem;
+    --modal-md-content-gap: 2rem;
   }
 }
diff --git a/packages/cyberstorm-theme/src/components/Modal/Modal.ts b/packages/cyberstorm-theme/src/components/Modal/Modal.ts
index cd93b22f1..f3a68c2de 100644
--- a/packages/cyberstorm-theme/src/components/Modal/Modal.ts
+++ b/packages/cyberstorm-theme/src/components/Modal/Modal.ts
@@ -1,3 +1,7 @@
 // Variants
-export const ModalVariantsList = ["primary"] as const;
-export type ModalVariants = "primary";
+export const ModalVariantsList = ["default"] as const;
+export type ModalVariants = "default";
+
+// Sizes
+export const ModalSizesList = ["medium"] as const;
+export type ModalSizes = "medium";
diff --git a/packages/cyberstorm-theme/src/index.tsx b/packages/cyberstorm-theme/src/index.tsx
index 34efd92de..9c1a20abf 100644
--- a/packages/cyberstorm-theme/src/index.tsx
+++ b/packages/cyberstorm-theme/src/index.tsx
@@ -19,3 +19,4 @@ import "./components/Image/Image.css";
 import "./components/AdContainer/AdContainer.css";
 import "./components/Pagination/Pagination.css";
 import "./components/Tabs/Tabs.css";
+import "./components/Modal/Modal.css";
diff --git a/packages/cyberstorm/src/newComponents/Modal/Modal.css b/packages/cyberstorm/src/newComponents/Modal/Modal.css
index 7501eeb37..a2ad75cca 100644
--- a/packages/cyberstorm/src/newComponents/Modal/Modal.css
+++ b/packages/cyberstorm/src/newComponents/Modal/Modal.css
@@ -3,29 +3,27 @@
     position: fixed;
     top: 50%;
     left: 50%;
-    border: 1px solid var(--color-6);
-    border-radius: var(--frame-modal-border-radius);
-    background: var(--color-2);
-    box-shadow: var(--shadow-lg);
+    border: var(--modal-border);
+    border-radius: var(--modal-border-radius);
+    background: var(--modal-background);
+
+    box-shadow: var(--modal-box-shadow);
     transform: translate(-50%, -50%);
   }
 
-  .ts-modal__wrapper {
+  .ts-modal__content {
     display: flex;
     flex-direction: column;
-    gap: var(--frame-modal-gap);
+    gap: var(--modal-content-gap);
     align-items: flex-start;
     align-self: stretch;
     justify-content: center;
-    padding: var(--frame-modal-padding);
-    background: transparent;
+    padding: var(--modal-content-padding);
   }
 
-  /* .modalCloseButton {
+  .ts-modal__button {
     position: absolute;
     top: 1rem;
     right: 1rem;
-    width: 2.75rem;
-    height: 2.75rem;
-  } */
+  }
 }
diff --git a/packages/cyberstorm/src/newComponents/Modal/Modal.tsx b/packages/cyberstorm/src/newComponents/Modal/Modal.tsx
index c4710d251..55a3e9d71 100644
--- a/packages/cyberstorm/src/newComponents/Modal/Modal.tsx
+++ b/packages/cyberstorm/src/newComponents/Modal/Modal.tsx
@@ -2,18 +2,20 @@ import { ReactNode } from "react";
 import { Frame, FrameModalProps } from "../../primitiveComponents/Frame/Frame";
 import "./Modal.css";
 import { NewButton } from "../..";
-import { faXmark } from "@fortawesome/free-solid-svg-icons";
 import { ModalVariants } from "@thunderstore/cyberstorm-theme/src/components";
 import { classnames, componentClasses } from "../../utils/utils";
+import { faXmarkLarge } from "@fortawesome/pro-solid-svg-icons";
+import { ModalSizes } from "@thunderstore/cyberstorm-theme/src/components/Modal/Modal";
 
 interface Props extends Omit<FrameModalProps, "primitiveType"> {
   trigger: ReactNode;
   csVariant?: ModalVariants;
+  csSize?: ModalSizes;
 }
 
 // TODO: Add storybook story
 export function Modal(props: Props) {
-  const { children, csVariant = "primary" } = props;
+  const { children, csVariant = "default", csSize = "medium" } = props;
 
   return (
     <>
@@ -23,11 +25,7 @@ export function Modal(props: Props) {
         popoverId={props.popoverId}
         rootClasses={classnames(
           "ts-modal",
-          ...componentClasses(csVariant, undefined, undefined)
-        )}
-        wrapperClasses={classnames(
-          "ts-modal__wrapper",
-          ...componentClasses(csVariant, undefined, undefined)
+          ...componentClasses(csVariant, csSize, undefined)
         )}
       >
         <NewButton
@@ -39,9 +37,10 @@ export function Modal(props: Props) {
           csSize="medium"
           csModifiers={["ghost"]}
           tooltipText="Close"
-          icon={faXmark}
+          icon={faXmarkLarge}
+          rootClasses="ts-modal__button"
         />
-        {children}
+        <div className="ts-modal__content">{children}</div>
       </Frame>
     </>
   );
diff --git a/packages/cyberstorm/src/primitiveComponents/Frame/Frame.tsx b/packages/cyberstorm/src/primitiveComponents/Frame/Frame.tsx
index 97bc94098..2448d568a 100644
--- a/packages/cyberstorm/src/primitiveComponents/Frame/Frame.tsx
+++ b/packages/cyberstorm/src/primitiveComponents/Frame/Frame.tsx
@@ -49,8 +49,6 @@ export interface FrameModalProps
     PrimitiveComponentDefaultProps {
   primitiveType: "modal";
   popoverId: string;
-  wrapperClasses?: string;
-  noWrapper?: boolean;
 }
 
 export interface FrameIconProps
@@ -198,12 +196,8 @@ export const Frame = React.forwardRef<
     }
     if (primitiveType === "modal") {
       const fRef = forwardedRef as React.ForwardedRef<HTMLDivElement>;
-      const {
-        wrapperClasses,
-        popoverId,
-        noWrapper,
-        ...strippedForwardedProps
-      } = forwardedProps as FrameModalProps;
+      const { popoverId, ...strippedForwardedProps } =
+        forwardedProps as FrameModalProps;
       return (
         <TooltipWrapper tooltipText={tooltipText} tooltipSide={tooltipSide}>
           <div
@@ -213,13 +207,7 @@ export const Frame = React.forwardRef<
             className={rootClasses}
             ref={fRef}
           >
-            {noWrapper ? (
-              children
-            ) : (
-              <div className={rootClasses}>
-                <div className={wrapperClasses}>{children}</div>
-              </div>
-            )}
+            {children}
           </div>
         </TooltipWrapper>
       );
diff --git a/packages/dapper-fake/src/fakers/user.ts b/packages/dapper-fake/src/fakers/user.ts
index 1ca2be902..572fdb03b 100644
--- a/packages/dapper-fake/src/fakers/user.ts
+++ b/packages/dapper-fake/src/fakers/user.ts
@@ -13,8 +13,6 @@ export const getFakeCurrentUser = async () => {
       getFakeOAuthConnection("GitHub"),
       getFakeOAuthConnection("Overwolf"),
     ],
-    rated_packages: [],
-    rated_packages_cyberstorm: [],
     subscription: {
       expires:
         faker.helpers.maybe(() =>
diff --git a/packages/dapper-ts/src/index.ts b/packages/dapper-ts/src/index.ts
index 9eecb0f1c..0135591c3 100644
--- a/packages/dapper-ts/src/index.ts
+++ b/packages/dapper-ts/src/index.ts
@@ -4,6 +4,8 @@ import { RequestConfig } from "@thunderstore/thunderstore-api";
 import { getDynamicHTML } from "./methods/dynamicHTML";
 import { getCommunities, getCommunity } from "./methods/communities";
 import { getCommunityFilters } from "./methods/communityFilters";
+import { getRatedPackages } from "./methods/ratedPackages";
+export { ratedPackagesSchema } from "./methods/ratedPackages";
 import { getCurrentUser, emptyUser } from "./methods/currentUser";
 export const getEmptyUser = emptyUser;
 export { dependencyShema } from "./methods/packageListings";
@@ -39,6 +41,7 @@ export class DapperTs implements DapperTsInterface {
     this.getCommunities = this.getCommunities.bind(this);
     this.getCommunity = this.getCommunity.bind(this);
     this.getCommunityFilters = this.getCommunityFilters.bind(this);
+    this.getRatedPackages = this.getRatedPackages.bind(this);
     this.getCurrentUser = this.getCurrentUser.bind(this);
     this.getPackageChangelog = this.getPackageChangelog.bind(this);
     this.getPackageListings = this.getPackageListings.bind(this);
@@ -54,6 +57,7 @@ export class DapperTs implements DapperTsInterface {
   public getCommunities = getCommunities;
   public getCommunity = getCommunity;
   public getCommunityFilters = getCommunityFilters;
+  public getRatedPackages = getRatedPackages;
   public getCurrentUser = getCurrentUser;
   public getPackageChangelog = getPackageChangelog;
   public getPackageListings = getPackageListings;
diff --git a/packages/dapper-ts/src/methods/currentUser.ts b/packages/dapper-ts/src/methods/currentUser.ts
index 6d2647667..914451013 100644
--- a/packages/dapper-ts/src/methods/currentUser.ts
+++ b/packages/dapper-ts/src/methods/currentUser.ts
@@ -20,8 +20,6 @@ export const currentUserSchema = z.object({
   username: z.string().nonempty(),
   capabilities: z.string().array(),
   connections: oAuthConnectionSchema.array(),
-  rated_packages: z.string().array(),
-  rated_packages_cyberstorm: z.string().array(),
   subscription: z.object({
     expires: z.string().datetime().nullable(),
   }),
@@ -32,8 +30,6 @@ const schema = z.object({
   username: z.string().nonempty(),
   capabilities: z.string().array(),
   connections: oAuthConnectionSchema.array(),
-  rated_packages: z.string().array(),
-  rated_packages_cyberstorm: z.string().array(),
   subscription: z.object({
     expires: z.string().datetime().nullable(),
   }),
@@ -44,8 +40,6 @@ export const emptyUser = {
   username: null,
   capabilities: [],
   connections: [],
-  rated_packages: [],
-  rated_packages_cyberstorm: [],
   subscription: { expires: null },
   teams: [],
 };
@@ -60,6 +54,12 @@ export async function getCurrentUser(this: DapperTsInterface) {
     const parsed = schema.safeParse(data);
 
     if (!parsed.success) {
+      // Sometimes the endpoint will be called without auths and we need to return empty user manually here.
+      // If the username is null it's equivalent gracefully "saying no current user"
+      if (data.username === null) {
+        return emptyUser;
+      }
+
       throw new Error(formatErrorMessage(parsed.error));
     }
 
diff --git a/packages/dapper-ts/src/methods/ratedPackages.ts b/packages/dapper-ts/src/methods/ratedPackages.ts
new file mode 100644
index 000000000..e4be7b765
--- /dev/null
+++ b/packages/dapper-ts/src/methods/ratedPackages.ts
@@ -0,0 +1,24 @@
+import { z } from "zod";
+import { fetchRatedPackages } from "@thunderstore/thunderstore-api";
+
+import { DapperTsInterface } from "../index";
+import { formatErrorMessage } from "../utils";
+
+export const ratedPackagesSchema = z.object({
+  rated_packages: z.string().array(),
+});
+
+const schema = z.object({
+  rated_packages: z.string().array(),
+});
+
+export async function getRatedPackages(this: DapperTsInterface) {
+  const data = await fetchRatedPackages(this.config);
+  const parsed = schema.safeParse(data);
+
+  if (!parsed.success) {
+    throw new Error(formatErrorMessage(parsed.error));
+  }
+
+  return parsed.data;
+}
diff --git a/packages/dapper/src/types/user.ts b/packages/dapper/src/types/user.ts
index ae8b81cfe..bcabf117d 100644
--- a/packages/dapper/src/types/user.ts
+++ b/packages/dapper/src/types/user.ts
@@ -4,8 +4,6 @@ export interface CurrentUser {
   username: string | null;
   capabilities: string[];
   connections: OAuthConnection[];
-  rated_packages: string[];
-  rated_packages_cyberstorm: string[];
   subscription: {
     expires: string | null;
   };
diff --git a/packages/thunderstore-api/src/apiFetch.ts b/packages/thunderstore-api/src/apiFetch.ts
index 166bae2de..cb03f203c 100644
--- a/packages/thunderstore-api/src/apiFetch.ts
+++ b/packages/thunderstore-api/src/apiFetch.ts
@@ -46,7 +46,11 @@ export async function apiFetch2(args: apiFetchArgs) {
   const { config, path, request, query, useSession = false } = args;
   const usedConfig: RequestConfig = useSession
     ? config
-    : { apiHost: config.apiHost, csrfToken: undefined, sessionId: undefined };
+    : {
+        apiHost: config.apiHost,
+        csrfToken: undefined,
+        sessionId: undefined,
+      };
   const url = getUrl(usedConfig, path, query);
 
   const response = await fetchRetry(url, {
diff --git a/packages/thunderstore-api/src/fetch/__tests__/currentUser.ts b/packages/thunderstore-api/src/fetch/__tests__/currentUser.ts
index c4ef541c3..a6ed319ea 100644
--- a/packages/thunderstore-api/src/fetch/__tests__/currentUser.ts
+++ b/packages/thunderstore-api/src/fetch/__tests__/currentUser.ts
@@ -1,13 +1,11 @@
-// import { config } from "./defaultConfig";
-// import { fetchCurrentUser } from "../currentUser";
+import { config } from "./defaultConfig";
+import { fetchCurrentUser } from "../currentUser";
 
 it("receives emptyish object when querying without session id", async () => {
-  // const response = await fetchCurrentUser(config);
-  // expect(response).toHaveProperty("username", null);
-  // expect(response).toHaveProperty("capabilities", []);
-  // expect(response).toHaveProperty("connections", []);
-  // expect(response).toHaveProperty("rated_packages", []);
-  // expect(response).toHaveProperty("rated_packages_cyberstorm", []);
-  // expect(response).toHaveProperty("subscription", { expires: null });
-  // expect(response).toHaveProperty("teams", []);
+  const response = await fetchCurrentUser(config);
+  expect(response).toHaveProperty("username", null);
+  expect(response).toHaveProperty("capabilities", []);
+  expect(response).toHaveProperty("connections", []);
+  expect(response).toHaveProperty("subscription", { expires: null });
+  expect(response).toHaveProperty("teams", []);
 });
diff --git a/packages/thunderstore-api/src/fetch/packageLike.ts b/packages/thunderstore-api/src/fetch/packageLike.ts
index 76af03526..7e41ffa8d 100644
--- a/packages/thunderstore-api/src/fetch/packageLike.ts
+++ b/packages/thunderstore-api/src/fetch/packageLike.ts
@@ -25,5 +25,6 @@ export function packageLike(
       cache: "no-store",
       body: JSON.stringify(data),
     },
+    useSession: true,
   });
 }
diff --git a/packages/thunderstore-api/src/fetch/ratedPackages.ts b/packages/thunderstore-api/src/fetch/ratedPackages.ts
new file mode 100644
index 000000000..2b771aabf
--- /dev/null
+++ b/packages/thunderstore-api/src/fetch/ratedPackages.ts
@@ -0,0 +1,9 @@
+import { RequestConfig } from "../index";
+import { apiFetch } from "../apiFetch";
+
+export async function fetchRatedPackages(config: RequestConfig) {
+  const path = "api/experimental/current-user/rated-packages/";
+  const request = { cache: "no-store" as RequestCache };
+
+  return await apiFetch(config, path, undefined, request, true);
+}
diff --git a/packages/thunderstore-api/src/index.ts b/packages/thunderstore-api/src/index.ts
index 01e4027d7..d145a1c50 100644
--- a/packages/thunderstore-api/src/index.ts
+++ b/packages/thunderstore-api/src/index.ts
@@ -13,6 +13,7 @@ export * from "./fetch/communityFilters";
 export * from "./fetch/communityList";
 export * from "./fetch/communityPackageListings";
 export * from "./fetch/currentUser";
+export * from "./fetch/ratedPackages";
 export * from "./fetch/namespacePackageListings";
 export * from "./fetch/packageChangelog";
 export * from "./fetch/packageDependantsListings";
diff --git a/packages/ts-api-react-actions/src/ApiAction.tsx b/packages/ts-api-react-actions/src/ApiAction.tsx
index ca5274226..3213f1988 100644
--- a/packages/ts-api-react-actions/src/ApiAction.tsx
+++ b/packages/ts-api-react-actions/src/ApiAction.tsx
@@ -1,6 +1,6 @@
 import { useCallback } from "react";
 import { z, ZodObject, ZodRawShape } from "zod";
-import { ApiError } from "@thunderstore/thunderstore-api";
+import { ApiError, RequestConfig } from "@thunderstore/thunderstore-api";
 import { ApiEndpoint } from "@thunderstore/ts-api-react";
 import { useApiAction } from "./useApiAction";
 
@@ -11,10 +11,11 @@ export interface ApiActionProps<
   Z extends ZodRawShape,
 > {
   schema: Schema;
-  endpoint: ApiEndpoint<z.infer<Schema>, Meta, Result>;
+  endpoint: ApiEndpoint<RequestConfig, z.infer<Schema>, Meta, Result>;
   meta: Meta;
   onSubmitSuccess?: (result: Result) => void;
   onSubmitError?: (error: Error | ApiError | unknown) => void;
+  config: RequestConfig;
 }
 
 export function ApiAction<
@@ -23,8 +24,9 @@ export function ApiAction<
   Result extends object,
   Z extends ZodRawShape,
 >(props: ApiActionProps<Schema, Meta, Result, Z>) {
-  const { meta, endpoint, onSubmitSuccess, onSubmitError } = props;
+  const { meta, endpoint, onSubmitSuccess, onSubmitError, config } = props;
   const submitHandler = useApiAction({
+    config,
     meta: meta,
     endpoint: endpoint,
   });
diff --git a/packages/ts-api-react-actions/src/useApiAction.ts b/packages/ts-api-react-actions/src/useApiAction.ts
index f608660e2..3bf8746cf 100644
--- a/packages/ts-api-react-actions/src/useApiAction.ts
+++ b/packages/ts-api-react-actions/src/useApiAction.ts
@@ -2,25 +2,28 @@ import { z, ZodObject, ZodRawShape } from "zod";
 import { ApiEndpoint, useApiCall } from "@thunderstore/ts-api-react";
 
 export type UseApiActionArgs<
+  RequestConfig,
   Schema extends ZodObject<Z>,
   Meta extends object,
   Result extends object,
   Z extends ZodRawShape,
 > = {
+  config: RequestConfig;
   meta: Meta;
-  endpoint: ApiEndpoint<z.infer<Schema>, Meta, Result>;
+  endpoint: ApiEndpoint<RequestConfig, z.infer<Schema>, Meta, Result>;
 };
 export function useApiAction<
+  ConfigPromise,
   Schema extends ZodObject<Z>,
   Meta extends object,
   Result extends object,
   Z extends ZodRawShape,
->(args: UseApiActionArgs<Schema, Meta, Result, Z>) {
-  const { meta, endpoint } = args;
+>(args: UseApiActionArgs<ConfigPromise, Schema, Meta, Result, Z>) {
+  const { config, meta, endpoint } = args;
   const apiCall = useApiCall(endpoint);
 
   const submitHandler = async (data: z.infer<Schema>) => {
-    return await apiCall(data, meta);
+    return await apiCall(config, data, meta);
   };
 
   return submitHandler;
diff --git a/packages/ts-api-react-forms/src/ApiForm.tsx b/packages/ts-api-react-forms/src/ApiForm.tsx
index 213ff7a85..ff3e25e88 100644
--- a/packages/ts-api-react-forms/src/ApiForm.tsx
+++ b/packages/ts-api-react-forms/src/ApiForm.tsx
@@ -2,7 +2,7 @@
 
 import { HTMLAttributes, PropsWithChildren, useCallback } from "react";
 import { z, ZodObject, ZodRawShape } from "zod";
-import { ApiError } from "@thunderstore/thunderstore-api";
+import { ApiError, RequestConfig } from "@thunderstore/thunderstore-api";
 import { ApiEndpoint } from "@thunderstore/ts-api-react";
 import { FormProvider } from "react-hook-form";
 import { useApiForm } from "./useApiForm";
@@ -14,10 +14,11 @@ export type ApiFormProps<
   Z extends ZodRawShape,
 > = {
   schema: Schema;
-  endpoint: ApiEndpoint<z.infer<Schema>, Meta, Result>;
+  endpoint: ApiEndpoint<RequestConfig, z.infer<Schema>, Meta, Result>;
   meta: Meta;
   onSubmitSuccess?: (result: Result) => void;
   onSubmitError?: (error: Error | ApiError | unknown) => void;
+  config: RequestConfig;
   formProps?: Omit<HTMLAttributes<HTMLFormElement>, "onSubmit">;
 };
 export function ApiForm<
@@ -26,7 +27,8 @@ export function ApiForm<
   Result extends object,
   Z extends ZodRawShape,
 >(props: PropsWithChildren<ApiFormProps<Schema, Meta, Result, Z>>) {
-  const { schema, meta, endpoint, onSubmitSuccess, onSubmitError } = props;
+  const { config, schema, meta, endpoint, onSubmitSuccess, onSubmitError } =
+    props;
   const { form, submitHandler } = useApiForm({
     schema: schema,
     meta: meta,
@@ -35,7 +37,7 @@ export function ApiForm<
   const onSubmit = useCallback(
     async (data: z.infer<Schema>) => {
       try {
-        const result = await submitHandler(data);
+        const result = await submitHandler(config, data);
         if (onSubmitSuccess) {
           onSubmitSuccess(result);
         }
diff --git a/packages/ts-api-react-forms/src/useApiForm.ts b/packages/ts-api-react-forms/src/useApiForm.ts
index d01378e55..cf2ec2c2c 100644
--- a/packages/ts-api-react-forms/src/useApiForm.ts
+++ b/packages/ts-api-react-forms/src/useApiForm.ts
@@ -3,6 +3,7 @@ import { useForm, UseFormReturn } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { handleFormApiErrors } from "./errors";
 import { ApiEndpoint, useApiCall } from "@thunderstore/ts-api-react";
+import { RequestConfig } from "@thunderstore/thunderstore-api";
 
 export type UseApiFormArgs<
   Schema extends ZodObject<Z>,
@@ -12,7 +13,7 @@ export type UseApiFormArgs<
 > = {
   schema: Schema;
   meta: Meta;
-  endpoint: ApiEndpoint<z.infer<Schema>, Meta, Result>;
+  endpoint: ApiEndpoint<RequestConfig, z.infer<Schema>, Meta, Result>;
 };
 export type UseApiFormReturn<
   Schema extends ZodObject<Z>,
@@ -20,7 +21,10 @@ export type UseApiFormReturn<
   Z extends ZodRawShape,
 > = {
   form: UseFormReturn<z.infer<Schema>>;
-  submitHandler: (data: z.infer<Schema>) => Promise<Result>;
+  submitHandler: (
+    config: RequestConfig,
+    data: z.infer<Schema>
+  ) => Promise<Result>;
 };
 export function useApiForm<
   Schema extends ZodObject<Z>,
@@ -37,9 +41,12 @@ export function useApiForm<
     mode: "onSubmit",
     resolver: zodResolver(schema),
   });
-  const submitHandler = async (data: z.infer<Schema>) => {
+  const submitHandler = async (
+    config: RequestConfig,
+    data: z.infer<Schema>
+  ) => {
     try {
-      return await apiCall(data, meta);
+      return await apiCall(config, data, meta);
     } catch (e) {
       handleFormApiErrors(e, schema, form.setError);
       throw e;
diff --git a/packages/ts-api-react/package.json b/packages/ts-api-react/package.json
index ef514f8e8..1a15c1326 100644
--- a/packages/ts-api-react/package.json
+++ b/packages/ts-api-react/package.json
@@ -15,7 +15,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.25.6",
-    "@thunderstore/thunderstore-api": "*",
+    "@thunderstore/dapper": "^0.1.0",
+    "@thunderstore/thunderstore-api": "^0.1.0",
     "@types/react": "^18.3.8",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
diff --git a/packages/ts-api-react/src/SessionContext.tsx b/packages/ts-api-react/src/SessionContext.tsx
index d23ce7b99..b3d3006b3 100644
--- a/packages/ts-api-react/src/SessionContext.tsx
+++ b/packages/ts-api-react/src/SessionContext.tsx
@@ -1,123 +1,201 @@
 "use client";
 import {
   createContext,
-  Dispatch,
+  // Dispatch,
   PropsWithChildren,
-  SetStateAction,
+  // SetStateAction,
   useContext,
   useEffect,
-  useState,
+  // useState,
 } from "react";
 
 import { StorageManager } from "./storage";
+import { RequestConfig } from "@thunderstore/thunderstore-api";
+import { CurrentUser } from "@thunderstore/dapper/types";
+import { DapperTs } from "@thunderstore/dapper-ts";
+import {
+  currentUserSchema,
+  emptyUser,
+} from "@thunderstore/dapper-ts/src/methods/currentUser";
 
 interface ContextInterface {
-  /** User email from provider's state or localStorage. */
-  email?: string;
   /** Remove session data from provider's state and localStorage. */
   clearSession: () => void;
-  /** False while session id from localStorage is being validated */
-  isReady: boolean;
-  /** Session id from provider's state or localStorage. */
-  sessionId?: string;
-  /** Store session data in provider's state and localStorage. */
-  setSession: (sessionData: LoginResponse) => void;
-  /** Session id from provider's state or localStorage. */
-  csrfToken?: string;
-  /** Username from provider's state or localStorage. */
-  username?: string;
-  /** Domain of the session */
-  domain?: string;
+  /** Remove session cookies. */
+  clearCookies: () => void;
+  /** Get RequestConfig for Dapper usage */
+  getConfig: () => RequestConfig;
+  /** Check if session is valid and try to repair if not */
+  sessionValid: () => boolean;
+  /** apiHost of the session */
+  apiHost?: string;
+  /** Async function to update currentUser */
+  updateCurrentUser: () => Promise<void>;
+  /** Function to get the currentUser */
+  getSessionCurrentUser: (forceUpdateCurrentUser?: boolean) => CurrentUser;
 }
 
-interface LoginResponse {
-  email: string;
+interface SessionData {
+  apiHost: string;
   sessionId: string;
   username: string;
   csrfToken?: string;
 }
 
 const SessionContext = createContext<ContextInterface | null>(null);
-const EMAIL_KEY = "email";
 const ID_KEY = "id";
-const CSRF_TOKEN = "csrftoken";
+const CSRF_TOKEN_KEY = "csrftoken";
 const USERNAME_KEY = "username";
+const API_HOST_KEY = "apiHost";
+
+// CurrentUser objects keys
+const CURRENT_USER_KEY = "currentUser";
 
 interface Props extends PropsWithChildren {
-  domain?: string;
+  apiHost: string;
 }
 
 /**
  * For managing data API's session id.
  *
- * This app has two backend: Next.js backend mostly used for SSR, and
+ * This app has two backend: Remix backend mostly used for SSR, and
  * Django API backend for fetching actual data. The session id for
  * authenticating with the latter is stored in the localStorage, and
  * should be accessed via this convenience provider.
  */
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function SessionProvider(props: Props) {
-  const [_session, _setSession] = useState<LoginResponse>();
   const _storage = new StorageManager("Session");
 
   useEffect(() => {
-    // Check if the browser has a Django "sessionid" cookie
-    // Same code is repeated inside useValidateSession
-    // TODO: There's something weird going on, because the first load
-    // of the page after login, doesn't grab the sessionid
-    if (_storage.safeGetValue(ID_KEY) === null) {
-      const sessionid = document.cookie
-        .split("; ")
-        .find((row) => row.startsWith("sessionid="))
-        ?.split("=")[1];
-      if (sessionid) {
-        _storage.setValue(ID_KEY, sessionid);
-      }
-      const csrftoken = document.cookie
-        .split("; ")
-        .find((row) => row.startsWith("csrftoken="))
-        ?.split("=")[1];
-      if (csrftoken) {
-        _storage.setValue(CSRF_TOKEN, csrftoken);
-      }
+    const sessionidCookie = getCookie("sessionid");
+    const csrftokenCookie = getCookie("csrftoken");
+
+    if (sessionidCookie && csrftokenCookie) {
+      setSession({
+        sessionId: sessionidCookie,
+        csrfToken: csrftokenCookie,
+        username: "",
+        apiHost: props.apiHost,
+      });
+    } else {
+      _storage.setValue(API_HOST_KEY, props.apiHost);
+      sessionValid();
     }
   }, []);
 
-  const [isReady, sessionId, csrfToken] = useValidateSession(
-    _session,
-    _setSession,
-    _storage,
-    props.domain
-  );
-
-  const setSession = (sessionData: LoginResponse) => {
-    _setSession(sessionData);
-    _storage.setValue(EMAIL_KEY, sessionData.email);
+  const setSession = (sessionData: SessionData) => {
+    _storage.setValue(API_HOST_KEY, sessionData.apiHost);
     _storage.setValue(ID_KEY, sessionData.sessionId);
     if (sessionData.csrfToken) {
-      _storage.setValue(CSRF_TOKEN, sessionData.csrfToken);
+      _storage.setValue(CSRF_TOKEN_KEY, sessionData.csrfToken);
     }
     _storage.setValue(USERNAME_KEY, sessionData.username);
   };
 
   const clearSession = () => {
-    _setSession(undefined);
-    _storage.removeValue(EMAIL_KEY);
     _storage.removeValue(ID_KEY);
-    _storage.removeValue(CSRF_TOKEN);
+    _storage.removeValue(CSRF_TOKEN_KEY);
     _storage.removeValue(USERNAME_KEY);
+    _storage.removeValue(API_HOST_KEY);
+  };
+
+  const clearCookies = () => {
+    deleteCookie("sessionid");
+    deleteCookie("csrftoken");
+  };
+
+  const getConfig = (): RequestConfig => {
+    const apiHost = _storage.safeGetValue(API_HOST_KEY);
+    const sessionId = _storage.safeGetValue(ID_KEY);
+    const csrfToken = _storage.safeGetValue(CSRF_TOKEN_KEY);
+    return {
+      // THIS IS NOT KOSHER
+      apiHost: apiHost ?? "",
+      sessionId: sessionId ?? "",
+      csrfToken: csrfToken ?? "",
+    };
+  };
+
+  // Check current session and try to fix it if cookies are not the same as storage
+  const sessionValid = (): boolean => {
+    const sessionidCookie = getCookie("sessionid");
+    const csrftokenCookie = getCookie("csrftoken");
+    const storedSessionId = _storage.safeGetValue(ID_KEY);
+    const storedCsrfToken = _storage.safeGetValue(CSRF_TOKEN_KEY);
+    const storedUsername = _storage.safeGetValue(USERNAME_KEY);
+    const storedApiHost = _storage.safeGetValue(API_HOST_KEY);
+
+    if (storedSessionId && storedCsrfToken) {
+      // Has storage values
+      if (sessionidCookie && csrftokenCookie) {
+        // Has cookies
+        if (
+          sessionidCookie === storedSessionId &&
+          csrftokenCookie === storedCsrfToken
+        ) {
+          // cookies match to storage yes
+          return true;
+        } else {
+          // cookies match to storage no
+          return false;
+        }
+      } else {
+        // storage values yes, cookies not needed for fetches, is ok
+        return true;
+      }
+    } else {
+      // No storage values but cookies
+      if (sessionidCookie && csrftokenCookie) {
+        setSession({
+          sessionId: sessionidCookie,
+          csrfToken: csrftokenCookie,
+          username: storedUsername ?? "",
+          apiHost: storedApiHost ?? "",
+        });
+        return true;
+      }
+      return false;
+    }
+  };
+
+  const storeCurrentUser = (currentUser: CurrentUser) => {
+    _storage.setJsonValue(CURRENT_USER_KEY, currentUser);
+  };
+
+  const updateCurrentUser = async () => {
+    const dapper = new DapperTs(getConfig(), clearSession);
+    const currentUser = await dapper.getCurrentUser();
+    storeCurrentUser(currentUser);
+  };
+
+  const getSessionCurrentUser = (
+    forceUpdateCurrentUser: boolean = false
+  ): CurrentUser => {
+    if (forceUpdateCurrentUser) {
+      (async () => {
+        await updateCurrentUser();
+      })();
+    }
+
+    const currentUser = _storage.safeGetJsonValue(CURRENT_USER_KEY);
+    const parsed = currentUserSchema.safeParse(currentUser);
+    if (!parsed.success) {
+      return currentUser.username === null ? emptyUser : currentUser;
+    } else {
+      return currentUser;
+    }
   };
 
   const value = {
     clearSession,
-    email: _session?.email,
-    isReady,
-    sessionId,
-    csrfToken,
+    clearCookies,
+    getConfig,
+    sessionValid,
+    updateCurrentUser,
+    getSessionCurrentUser,
     setSession,
-    username: _session?.username,
-    domain: props.domain,
+    apiHost: props.apiHost,
   };
 
   return (
@@ -127,6 +205,19 @@ export function SessionProvider(props: Props) {
   );
 }
 
+const getCookie = (cookieName: string) => {
+  const cookie = new RegExp(`${cookieName}=([^;]+);`).exec(
+    document.cookie[-1] === ";" ? document.cookie : document.cookie + ";"
+  )?.[1];
+  return cookie ? cookie : null;
+};
+
+const deleteCookie = (name: string) => {
+  const date = new Date();
+  date.setTime(0);
+  document.cookie = `${name}=${null}; expires=${date.toUTCString()}; path=/`;
+};
+
 /**
  * For accessing data API's session id.
  *
@@ -134,8 +225,7 @@ export function SessionProvider(props: Props) {
  * * sessionId?: string
  * * csrfToken?: string
  * * username?: string
- * * email?: string
- * * setSession: ({email: string, sessionId: string, username: string}) => void
+ * * setSession: ({sessionId: string, username: string}) => void
  * * clearSession: () => void
  */
 export const useSession = (): ContextInterface => {
@@ -154,87 +244,79 @@ export const useSession = (): ContextInterface => {
  * Omits the call if session id is already set in the porovider's
  * internal state.
  */
-const useValidateSession = (
-  _session: LoginResponse | undefined,
-  _setSession: Dispatch<SetStateAction<LoginResponse | undefined>>,
-  _storage: StorageManager,
-  domain?: string
-): [
-  /** Is the validation process ready? */
-  boolean,
-  /** Session id if it's valid, otherwise undefined */
-  string | undefined,
-  /** Session id if it's valid, otherwise undefined */
-  string | undefined,
-] => {
-  const [isValid, setIsValid] = useState<boolean>();
-  const stateSessionId = _session?.sessionId;
-  const stateCsrfToken = _session?.csrfToken;
-  const storedSessionId = _storage.safeGetValue(ID_KEY);
-  const storedCsrfToken = _storage.safeGetValue(CSRF_TOKEN);
+// const useValidateSession = (
+//   _session: SessionData | undefined,
+//   _setSession: Dispatch<SetStateAction<SessionData | undefined>>,
+//   _storage: StorageManager,
+//   apiHost?: string
+// ): [
+//   /** Is the validation process ready? */
+//   boolean,
+//   /** Session id if it's valid, otherwise undefined */
+//   string | undefined,
+//   /** Session id if it's valid, otherwise undefined */
+//   string | undefined,
+// ] => {
+//   const [isValid, setIsValid] = useState<boolean>();
+//   const stateSessionId = _session?.sessionId;
+//   const stateCsrfToken = _session?.csrfToken;
+//   const storedSessionId = _storage.safeGetValue(ID_KEY);
+//   const storedCsrfToken = _storage.safeGetValue(CSRF_TOKEN_KEY);
 
-  useEffect(() => {
-    // Session id stored in SessionProvider's state is always valid, no
-    // need to call backend to check it nor read values from localStorage.
-    if (stateSessionId !== undefined && stateCsrfToken !== undefined) {
-      if (isValid !== true) {
-        setIsValid(true);
-      }
-      return;
-    }
+//   useEffect(() => {
+//     // Session id stored in SessionProvider's state is always valid, no
+//     // need to call backend to check it nor read values from localStorage.
+//     if (stateSessionId !== undefined && stateCsrfToken !== undefined) {
+//       if (isValid !== true) {
+//         setIsValid(true);
+//       }
+//       return;
+//     }
 
-    // If there's no session id in localStorage, there's nothing to do.
-    if (storedSessionId === null) {
-      if (isValid !== false) {
-        setIsValid(false);
-      }
-      return;
-    }
+//     // If there's no session id in localStorage, there's nothing to do.
+//     if (storedSessionId === null) {
+//       if (isValid !== false) {
+//         setIsValid(false);
+//       }
+//       return;
+//     }
 
-    const deleteCookie = (name: string) => {
-      const date = new Date();
-      date.setTime(0);
-      document.cookie = `${name}=${null}; expires=${date.toUTCString()}; path=/`;
-    };
+//     (async () => {
+//       const res = await fetch(`${apiHost}/api/experimental/auth/validate/`, {
+//         headers: {
+//           authorization: `Session ${storedSessionId}`,
+//           "Content-Type": "application/json",
+//         },
+//       });
 
-    (async () => {
-      const res = await fetch(`${domain}/api/experimental/auth/validate/`, {
-        headers: {
-          authorization: `Session ${storedSessionId}`,
-          "Content-Type": "application/json",
-        },
-      });
+//       if (res.status === 401) {
+//         _storage.removeValue(EMAIL_KEY);
+//         _storage.removeValue(ID_KEY);
+//         _storage.removeValue(CSRF_TOKEN_KEY);
+//         _storage.removeValue(USERNAME_KEY);
+//         return;
+//       }
 
-      if (res.status === 401) {
-        _storage.removeValue(EMAIL_KEY);
-        _storage.removeValue(ID_KEY);
-        _storage.removeValue(CSRF_TOKEN);
-        _storage.removeValue(USERNAME_KEY);
-        deleteCookie("sessionid");
-        deleteCookie("csrftoken");
-        // Router.push("/");
-        return;
-      }
+//       _setSession({
+//         apiHost: apiHost ?? "APIHOST_MISSING",
+//         email: _storage.safeGetValue(EMAIL_KEY) || "",
+//         sessionId: storedSessionId,
+//         csrfToken: storedCsrfToken === null ? undefined : storedCsrfToken,
+//         username: _storage.safeGetValue(USERNAME_KEY) || "",
+//       });
+//       setIsValid(true);
+//     })();
+//   }, [
+//     isValid,
+//     setIsValid,
+//     stateSessionId,
+//     storedSessionId,
+//     stateCsrfToken,
+//     storedCsrfToken,
+//   ]);
 
-      _setSession({
-        email: _storage.safeGetValue(EMAIL_KEY) || "",
-        sessionId: storedSessionId,
-        csrfToken: storedCsrfToken === null ? undefined : storedCsrfToken,
-        username: _storage.safeGetValue(USERNAME_KEY) || "",
-      });
-      setIsValid(true);
-    })();
-  }, [
-    isValid,
-    setIsValid,
-    stateSessionId,
-    storedSessionId,
-    stateCsrfToken,
-    storedCsrfToken,
-  ]);
-
-  const isReady = isValid !== undefined;
-  const sessionId = isValid ? storedSessionId || undefined : undefined;
-  const csrfToken = isValid ? storedCsrfToken || undefined : undefined;
-  return [isReady, sessionId, csrfToken];
-};
+//   const isReady = isValid !== undefined;
+//   const sessionId = isValid ? storedSessionId || undefined : undefined;
+//   const csrfToken = isValid ? storedCsrfToken || undefined : undefined;
+//   return [isReady, sessionId, csrfToken];
+// };
diff --git a/packages/ts-api-react/src/index.ts b/packages/ts-api-react/src/index.ts
index 0041f7ad2..72fce905a 100644
--- a/packages/ts-api-react/src/index.ts
+++ b/packages/ts-api-react/src/index.ts
@@ -1,4 +1,3 @@
 export { useSession, SessionProvider } from "./SessionContext";
-export { useApiConfig } from "./useApiConfig";
 export { useApiCall } from "./useApiCall";
 export type { ApiEndpoint } from "./useApiCall";
diff --git a/packages/ts-api-react/src/statelessFunctions.ts b/packages/ts-api-react/src/statelessFunctions.ts
new file mode 100644
index 000000000..6e27c1391
--- /dev/null
+++ b/packages/ts-api-react/src/statelessFunctions.ts
@@ -0,0 +1,130 @@
+"use client";
+import { StorageManager } from "./storage";
+import { RequestConfig } from "@thunderstore/thunderstore-api";
+
+interface LoginResponse {
+  apiHost: string;
+  email: string;
+  sessionId: string;
+  username: string;
+  csrfToken?: string;
+}
+
+const EMAIL_KEY = "email";
+const ID_KEY = "id";
+const CSRF_TOKEN_KEY = "csrftoken";
+const USERNAME_KEY = "username";
+const API_HOST_KEY = "apiHost";
+
+const getCookie = (cookieName: string) => {
+  const cookie = new RegExp(`${cookieName}=([^;]+);`).exec(
+    document.cookie[-1] === ";" ? document.cookie : document.cookie + ";"
+  )?.[1];
+  return cookie ? cookie : null;
+};
+
+const deleteCookie = (name: string) => {
+  const date = new Date();
+  date.setTime(0);
+  document.cookie = `${name}=${null}; expires=${date.toUTCString()}; path=/`;
+};
+
+// This function should preferably be used at the fetch end, when encountering a 401 oslt
+export function removeSession(_storage: StorageManager) {
+  _storage.removeValue(EMAIL_KEY);
+  _storage.removeValue(ID_KEY);
+  _storage.removeValue(CSRF_TOKEN_KEY);
+  _storage.removeValue(USERNAME_KEY);
+  _storage.removeValue(API_HOST_KEY);
+  deleteCookie("sessionid");
+  deleteCookie("csrftoken");
+}
+
+export function setSession(response: LoginResponse, _storage: StorageManager) {
+  _storage.setValue(API_HOST_KEY, response.apiHost);
+  _storage.setValue(EMAIL_KEY, response.email);
+  _storage.setValue(ID_KEY, response.sessionId);
+  if (response.csrfToken) {
+    _storage.setValue(CSRF_TOKEN_KEY, response.csrfToken);
+  }
+  _storage.setValue(USERNAME_KEY, response.username);
+}
+
+export function getConfig(_storage: StorageManager): RequestConfig {
+  const apiHost = _storage.safeGetValue(API_HOST_KEY);
+  const sessionId = _storage.safeGetValue(ID_KEY);
+  const csrfToken = _storage.safeGetValue(CSRF_TOKEN_KEY);
+  return {
+    apiHost: apiHost ?? "",
+    sessionId: sessionId ?? "",
+    csrfToken: csrfToken ?? "",
+  };
+}
+
+export function initSession(_storage: StorageManager, apiHost: string) {
+  const sessionidCookie = getCookie("sessionid");
+  const csrftokenCookie = getCookie("csrftoken");
+
+  if (sessionidCookie && csrftokenCookie) {
+    setSession(
+      {
+        email: "",
+        sessionId: sessionidCookie,
+        csrfToken: csrftokenCookie,
+        username: "",
+        apiHost: apiHost,
+      },
+      _storage
+    );
+  } else {
+    _storage.setValue(API_HOST_KEY, apiHost);
+    sessionValid(_storage);
+  }
+}
+
+// Check current session and try to fix it if cookies are not the same as storage
+export function sessionValid(_storage: StorageManager): boolean {
+  const sessionidCookie = getCookie("sessionid");
+  const csrftokenCookie = getCookie("csrftoken");
+  const storedSessionId = _storage.safeGetValue(ID_KEY);
+  const storedCsrfToken = _storage.safeGetValue(CSRF_TOKEN_KEY);
+  const storedEmail = _storage.safeGetValue(EMAIL_KEY);
+  const storedUsername = _storage.safeGetValue(USERNAME_KEY);
+  const storedApiHost = _storage.safeGetValue(API_HOST_KEY);
+
+  if (storedSessionId && storedCsrfToken) {
+    // Has storage values
+    if (sessionidCookie && csrftokenCookie) {
+      // Has cookies
+      if (
+        sessionidCookie === storedSessionId &&
+        csrftokenCookie === storedCsrfToken
+      ) {
+        // cookies match to storage yes
+        return true;
+      } else {
+        // cookies match to storage no
+        return false;
+      }
+    } else {
+      // storage values yes, cookies not needed for fetches, is ok
+      return true;
+    }
+  } else {
+    // No storage values but cookies
+    if (sessionidCookie && csrftokenCookie) {
+      setSession(
+        {
+          email: storedEmail ?? "",
+          sessionId: sessionidCookie,
+          csrfToken: csrftokenCookie,
+          username: storedUsername ?? "",
+          apiHost: storedApiHost ?? "",
+        },
+        _storage
+      );
+      return true;
+    }
+    return false;
+  }
+}
diff --git a/packages/ts-api-react/src/storage.ts b/packages/ts-api-react/src/storage.ts
index b64d4f7cf..ae1f0f477 100644
--- a/packages/ts-api-react/src/storage.ts
+++ b/packages/ts-api-react/src/storage.ts
@@ -23,6 +23,7 @@ export class StorageManager {
   safeGetValue(key: string): string | null {
     try {
       return this.getValue(key);
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
     } catch (e) {
       return null;
     }
@@ -44,4 +45,25 @@ export class StorageManager {
   _addNamespace(key: string): string {
     return this.namespace ? `${this.namespace}.${key}` : key;
   }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  setJsonValue(key: string, value: any): void {
+    this._storage.setItem(this._addNamespace(key), JSON.stringify(value));
+  }
+
+  /** Returns null if storage is unavailable, it contained no value or json threw an error. */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  safeGetJsonValue(key: string): any | null {
+    try {
+      const value = this.getValue(key);
+      if (value) {
+        return JSON.parse(value);
+      } else {
+        return null;
+      }
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    } catch (e) {
+      return null;
+    }
+  }
 }
diff --git a/packages/ts-api-react/src/useApiCall.ts b/packages/ts-api-react/src/useApiCall.ts
index 7cec3d059..362bbd0c7 100644
--- a/packages/ts-api-react/src/useApiCall.ts
+++ b/packages/ts-api-react/src/useApiCall.ts
@@ -1,19 +1,12 @@
-import { RequestConfig } from "@thunderstore/thunderstore-api";
-import { useSession } from "./SessionContext";
-
-export type ApiEndpoint<Data, Meta, Result> = (
+export type ApiEndpoint<RequestConfig, Data, Meta, Result> = (
   config: RequestConfig,
   data: Data,
   meta: Meta
 ) => Promise<Result>;
-export function useApiCall<Data, Meta, Result>(
-  endpoint: ApiEndpoint<Data, Meta, Result>
-): (data: Data, meta: Meta) => Promise<Result> {
-  const session = useSession();
-  const apiConfig = {
-    apiHost: session.domain,
-    sessionId: session.sessionId,
-    csrfToken: session.csrfToken,
+export function useApiCall<RequestConfig, Data, Meta, Result>(
+  endpoint: ApiEndpoint<RequestConfig, Data, Meta, Result>
+): (config: RequestConfig, data: Data, meta: Meta) => Promise<Result> {
+  return (config: RequestConfig, data: Data, meta: Meta) => {
+    return endpoint(config, data, meta);
   };
-  return (data: Data, meta: Meta) => endpoint(apiConfig, data, meta);
 }
diff --git a/packages/ts-api-react/src/useApiConfig.ts b/packages/ts-api-react/src/useApiConfig.ts
deleted file mode 100644
index 8d6767428..000000000
--- a/packages/ts-api-react/src/useApiConfig.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { RequestConfig } from "@thunderstore/thunderstore-api";
-
-export function useApiConfig(): RequestConfig {
-  // TODO: Create context manager & read from there instead of hardcoding
-  return {
-    apiHost: "http://thunderstore.temp",
-    sessionId: undefined,
-  };
-}