diff --git a/firestore.rules b/firestore.rules
index d87cbb91..e48205af 100644
--- a/firestore.rules
+++ b/firestore.rules
@@ -116,6 +116,10 @@ service cloud.firestore {
       	allow read: if request.auth.uid != null;
         allow write: if checkIsHomebrewOwner();
       }
+      match /oracles/oracles {
+      	allow read: if request.auth.uid != null;
+        allow write: if checkIsHomebrewOwner();
+      }
     }
     match /users/{userId} {
     	allow read: if true;
diff --git a/src/api-calls/homebrew/_getRef.ts b/src/api-calls/homebrew/_getRef.ts
index 22786283..79e47d77 100644
--- a/src/api-calls/homebrew/_getRef.ts
+++ b/src/api-calls/homebrew/_getRef.ts
@@ -5,7 +5,7 @@ import {
   collection,
   doc,
 } from "firebase/firestore";
-import { BaseExpansionOrRuleset } from "types/HomebrewCollection.type";
+import { BaseExpansionOrRuleset } from "types/homebrew/HomebrewCollection.type";
 
 export function constructHomebrewCollectionPath() {
   return "/homebrew";
diff --git a/src/api-calls/homebrew/createHomebrewExpansion.ts b/src/api-calls/homebrew/createHomebrewExpansion.ts
index a6121b5f..5c93979b 100644
--- a/src/api-calls/homebrew/createHomebrewExpansion.ts
+++ b/src/api-calls/homebrew/createHomebrewExpansion.ts
@@ -1,6 +1,6 @@
 import { addDoc } from "firebase/firestore";
 import { getHomebrewCollection } from "./_getRef";
-import { BaseExpansion } from "types/HomebrewCollection.type";
+import { BaseExpansion } from "types/homebrew/HomebrewCollection.type";
 import { createApiFunction } from "api-calls/createApiFunction";
 
 export const createHomebrewExpansion = createApiFunction<BaseExpansion, string>(
diff --git a/src/api-calls/homebrew/listenToHomebrewCollections.ts b/src/api-calls/homebrew/listenToHomebrewCollections.ts
index dd8ff5a4..9914c60f 100644
--- a/src/api-calls/homebrew/listenToHomebrewCollections.ts
+++ b/src/api-calls/homebrew/listenToHomebrewCollections.ts
@@ -1,5 +1,5 @@
 import { onSnapshot, query, where } from "firebase/firestore";
-import { BaseExpansionOrRuleset } from "types/HomebrewCollection.type";
+import { BaseExpansionOrRuleset } from "types/homebrew/HomebrewCollection.type";
 import { getHomebrewCollection } from "./_getRef";
 
 export function listenToHomebrewCollections(
diff --git a/src/api-calls/homebrew/oracles/_getRef.ts b/src/api-calls/homebrew/oracles/_getRef.ts
new file mode 100644
index 00000000..3302b660
--- /dev/null
+++ b/src/api-calls/homebrew/oracles/_getRef.ts
@@ -0,0 +1,15 @@
+import { DocumentReference, doc } from "firebase/firestore";
+import { constructHomebrewCollectionDocPath } from "../_getRef";
+import { firestore } from "config/firebase.config";
+import { DictKey, OracleTablesCollection } from "@datasworn/core";
+
+function constructHomebrewOracleDocPath(homebrewId: string) {
+  return `${constructHomebrewCollectionDocPath(homebrewId)}/oracles/oracles`;
+}
+
+export function getHomebrewOraclesDoc(homebrewId: string) {
+  return doc(
+    firestore,
+    constructHomebrewOracleDocPath(homebrewId)
+  ) as DocumentReference<Record<DictKey, OracleTablesCollection>>;
+}
diff --git a/src/api-calls/homebrew/oracles/listenToHomebrewOracles.ts b/src/api-calls/homebrew/oracles/listenToHomebrewOracles.ts
new file mode 100644
index 00000000..cd49e3ef
--- /dev/null
+++ b/src/api-calls/homebrew/oracles/listenToHomebrewOracles.ts
@@ -0,0 +1,29 @@
+import { OracleTablesCollection } from "@datasworn/core";
+import { getHomebrewOraclesDoc } from "./_getRef";
+import { onSnapshot } from "firebase/firestore";
+
+export function listenToHomebrewOracles(
+  homebrewId: string,
+  updateOracles: (
+    homebrewId: string,
+    oracles: Record<string, OracleTablesCollection>
+  ) => void,
+  onError: (error: unknown) => void,
+  onLoaded: () => void
+) {
+  return onSnapshot(
+    getHomebrewOraclesDoc(homebrewId),
+    (snapshot) => {
+      const doc = snapshot.data();
+      if (doc) {
+        updateOracles(homebrewId, doc);
+      } else {
+        onLoaded();
+      }
+    },
+    (error) => {
+      console.error(error);
+      onError(error);
+    }
+  );
+}
diff --git a/src/api-calls/homebrew/oracles/updateHomebrewOracles.ts b/src/api-calls/homebrew/oracles/updateHomebrewOracles.ts
new file mode 100644
index 00000000..393374ec
--- /dev/null
+++ b/src/api-calls/homebrew/oracles/updateHomebrewOracles.ts
@@ -0,0 +1,22 @@
+import { OracleTablesCollection } from "@datasworn/core";
+import { createApiFunction } from "api-calls/createApiFunction";
+import { PartialWithFieldValue, setDoc } from "firebase/firestore";
+import { getHomebrewOraclesDoc } from "./_getRef";
+
+export const updateHomebrewOracles = createApiFunction<
+  {
+    homebrewId: string;
+    oracles: PartialWithFieldValue<Record<string, OracleTablesCollection>>;
+  },
+  void
+>((params) => {
+  const { homebrewId, oracles } = params;
+
+  return new Promise((resolve, reject) => {
+    setDoc(getHomebrewOraclesDoc(homebrewId), oracles, { merge: true })
+      .then(() => {
+        resolve();
+      })
+      .catch(reject);
+  });
+}, "Failed to update oracles.");
diff --git a/src/api-calls/homebrew/rules/_getRef.ts b/src/api-calls/homebrew/rules/_getRef.ts
index 74f98dd4..a1d05472 100644
--- a/src/api-calls/homebrew/rules/_getRef.ts
+++ b/src/api-calls/homebrew/rules/_getRef.ts
@@ -1,7 +1,7 @@
 import { DocumentReference, doc } from "firebase/firestore";
 import { constructHomebrewCollectionDocPath } from "../_getRef";
 import { firestore } from "config/firebase.config";
-import { StoredRules } from "types/HomebrewCollection.type";
+import { StoredRules } from "types/homebrew/HomebrewRules.type";
 
 export function constructHomebrewRulesDocPath(homebrewId: string) {
   return `${constructHomebrewCollectionDocPath(homebrewId)}/rules/rules`;
diff --git a/src/api-calls/homebrew/rules/createHomebrewRules.ts b/src/api-calls/homebrew/rules/createHomebrewRules.ts
index e07684dc..babf3106 100644
--- a/src/api-calls/homebrew/rules/createHomebrewRules.ts
+++ b/src/api-calls/homebrew/rules/createHomebrewRules.ts
@@ -1,7 +1,7 @@
 import { createApiFunction } from "api-calls/createApiFunction";
 import { PartialWithFieldValue, updateDoc } from "firebase/firestore";
 import { getHomebrewRulesDoc } from "./_getRef";
-import { StoredRules } from "types/HomebrewCollection.type";
+import { StoredRules } from "types/homebrew/HomebrewRules.type";
 
 export const updateHomebrewRules = createApiFunction<
   {
diff --git a/src/api-calls/homebrew/rules/listenToHomebrewRules.ts b/src/api-calls/homebrew/rules/listenToHomebrewRules.ts
index 83c16dc1..6c222e61 100644
--- a/src/api-calls/homebrew/rules/listenToHomebrewRules.ts
+++ b/src/api-calls/homebrew/rules/listenToHomebrewRules.ts
@@ -1,5 +1,5 @@
 import { onSnapshot } from "firebase/firestore";
-import { StoredRules } from "types/HomebrewCollection.type";
+import { StoredRules } from "types/homebrew/HomebrewRules.type";
 import { getHomebrewRulesDoc } from "./_getRef";
 
 export function listenToHomebrewRules(
diff --git a/src/api-calls/homebrew/rules/updateExpansionRules.ts b/src/api-calls/homebrew/rules/updateExpansionRules.ts
index 79c59d91..49f84666 100644
--- a/src/api-calls/homebrew/rules/updateExpansionRules.ts
+++ b/src/api-calls/homebrew/rules/updateExpansionRules.ts
@@ -1,7 +1,7 @@
 import { createApiFunction } from "api-calls/createApiFunction";
 import { PartialWithFieldValue, setDoc } from "firebase/firestore";
 import { getHomebrewRulesDoc } from "./_getRef";
-import { StoredRules } from "types/HomebrewCollection.type";
+import { StoredRules } from "types/homebrew/HomebrewRules.type";
 
 export const updateExpansionRules = createApiFunction<
   {
diff --git a/src/api-calls/homebrew/updateHomebrewExpansion.ts b/src/api-calls/homebrew/updateHomebrewExpansion.ts
index c73763d0..7de398f9 100644
--- a/src/api-calls/homebrew/updateHomebrewExpansion.ts
+++ b/src/api-calls/homebrew/updateHomebrewExpansion.ts
@@ -1,6 +1,6 @@
 import { updateDoc } from "firebase/firestore";
 import { getHomebrewCollectionDoc } from "./_getRef";
-import { BaseExpansion } from "types/HomebrewCollection.type";
+import { BaseExpansion } from "types/homebrew/HomebrewCollection.type";
 import { createApiFunction } from "api-calls/createApiFunction";
 
 export const updateHomebrewExpansion = createApiFunction<
diff --git a/src/components/features/charactersAndCampaigns/CollapsibleSectionHeader.tsx b/src/components/features/charactersAndCampaigns/CollapsibleSectionHeader.tsx
index b80c25cb..01c5b07f 100644
--- a/src/components/features/charactersAndCampaigns/CollapsibleSectionHeader.tsx
+++ b/src/components/features/charactersAndCampaigns/CollapsibleSectionHeader.tsx
@@ -4,21 +4,25 @@ import {
   ListItemButton,
   ListItemIcon,
   ListSubheader,
+  ListSubheaderProps,
 } from "@mui/material";
 import OpenIcon from "@mui/icons-material/ChevronRight";
 
 export interface CollapsibleSectionHeaderProps {
+  component?: ListSubheaderProps["component"];
   text: string;
   forcedOpen?: boolean;
   open: boolean;
   toggleOpen: () => void;
+  disabled?: boolean;
 }
 
 export function CollapsibleSectionHeader(props: CollapsibleSectionHeaderProps) {
-  const { text, open, forcedOpen, toggleOpen } = props;
+  const { component, text, open, forcedOpen, toggleOpen, disabled } = props;
 
   return (
     <ListSubheader
+      component={component ?? "li"}
       disableGutters
       sx={(theme) => ({
         mt: open ? 0.5 : 0,
@@ -35,7 +39,7 @@ export function CollapsibleSectionHeader(props: CollapsibleSectionHeaderProps) {
       })}
     >
       {!forcedOpen ? (
-        <ListItemButton onClick={toggleOpen}>
+        <ListItemButton onClick={toggleOpen} disabled={disabled}>
           <Box sx={{ flexGrow: 1 }}>{text}</Box>
           <ListItemIcon sx={{ minWidth: "unset" }}>
             <OpenIcon
diff --git a/src/components/features/charactersAndCampaigns/LinkedDialog/LinkedDialog.tsx b/src/components/features/charactersAndCampaigns/LinkedDialog/LinkedDialog.tsx
index 8c242149..f88618d1 100644
--- a/src/components/features/charactersAndCampaigns/LinkedDialog/LinkedDialog.tsx
+++ b/src/components/features/charactersAndCampaigns/LinkedDialog/LinkedDialog.tsx
@@ -1,14 +1,46 @@
-import { Dialog } from "@mui/material";
+import { Dialog, SwipeableDrawer } from "@mui/material";
 import { useStore } from "stores/store";
 import { LinkedDialogContent } from "./LinkedDialogContent";
+import { useIsMobile } from "hooks/useIsMobile";
 
 export function LinkedDialog() {
-  const { isOpen, previousIds, openId } = useStore(
+  const { isOpen, previousIds, openId, newVersion } = useStore(
     (store) => store.appState.openDialogState
   );
   const handleBack = useStore((store) => store.appState.prevDialog);
   const handleClose = useStore((store) => store.appState.closeDialog);
 
+  const isMobile = useIsMobile();
+
+  if (isMobile && newVersion) {
+    return (
+      <SwipeableDrawer
+        anchor={"bottom"}
+        open={isOpen}
+        onOpen={() => {}}
+        disableSwipeToOpen
+        disableDiscovery
+        onClose={handleClose}
+        sx={{ pt: 1 }}
+        PaperProps={{
+          sx: (theme) => ({
+            top: theme.spacing(2),
+            borderTopLeftRadius: theme.shape.borderRadius,
+            borderTopRightRadius: theme.shape.borderRadius,
+          }),
+        }}
+      >
+        <LinkedDialogContent
+          id={openId}
+          isLastItem={previousIds.length === 0}
+          handleBack={handleBack}
+          handleClose={handleClose}
+          newVersion={newVersion}
+        />
+      </SwipeableDrawer>
+    );
+  }
+
   return (
     <Dialog open={isOpen} onClose={handleClose}>
       <LinkedDialogContent
@@ -16,6 +48,7 @@ export function LinkedDialog() {
         isLastItem={previousIds.length === 0}
         handleBack={handleBack}
         handleClose={handleClose}
+        newVersion={newVersion}
       />
     </Dialog>
   );
diff --git a/src/components/features/charactersAndCampaigns/LinkedDialog/LinkedDialogContent/LinkedDialogContent.tsx b/src/components/features/charactersAndCampaigns/LinkedDialog/LinkedDialogContent/LinkedDialogContent.tsx
index 2c755257..e71b9b98 100644
--- a/src/components/features/charactersAndCampaigns/LinkedDialog/LinkedDialogContent/LinkedDialogContent.tsx
+++ b/src/components/features/charactersAndCampaigns/LinkedDialog/LinkedDialogContent/LinkedDialogContent.tsx
@@ -2,16 +2,18 @@ import { DialogContent } from "@mui/material";
 import { LinkedDialogContentTitle } from "./LinkedDialogContentTitle";
 import { MoveDialogContent } from "./MoveDialogContent";
 import { OracleDialogContent } from "./OracleDialogContent";
+import { NewOracleDialogContent } from "./NewOracleDialogContent";
 
 export interface LinkedDialogContentProps {
   id?: string;
   handleBack: () => void;
   handleClose: () => void;
   isLastItem: boolean;
+  newVersion?: boolean;
 }
 
 export function LinkedDialogContent(props: LinkedDialogContentProps) {
-  const { id, handleBack, handleClose, isLastItem } = props;
+  const { id, handleBack, handleClose, isLastItem, newVersion } = props;
 
   if (id?.startsWith("ironsworn/moves") || id?.startsWith("starforged/moves")) {
     return (
@@ -26,8 +28,19 @@ export function LinkedDialogContent(props: LinkedDialogContentProps) {
 
   if (
     id?.startsWith("ironsworn/oracles") ||
-    id?.startsWith("starforged/oracles")
+    id?.startsWith("starforged/oracles") ||
+    (newVersion && id?.startsWith("starforged/collections/oracles"))
   ) {
+    if (newVersion) {
+      return (
+        <NewOracleDialogContent
+          id={id}
+          handleBack={handleBack}
+          handleClose={handleClose}
+          isLastItem={isLastItem}
+        />
+      );
+    }
     return (
       <OracleDialogContent
         id={id}
@@ -41,6 +54,7 @@ export function LinkedDialogContent(props: LinkedDialogContentProps) {
   return (
     <>
       <LinkedDialogContentTitle
+        id={id ?? ""}
         handleBack={handleBack}
         handleClose={handleClose}
         isLastItem={isLastItem}
diff --git a/src/components/features/charactersAndCampaigns/LinkedDialog/LinkedDialogContent/LinkedDialogContentTitle.tsx b/src/components/features/charactersAndCampaigns/LinkedDialog/LinkedDialogContent/LinkedDialogContentTitle.tsx
index 3fd5199b..378a77ec 100644
--- a/src/components/features/charactersAndCampaigns/LinkedDialog/LinkedDialogContent/LinkedDialogContentTitle.tsx
+++ b/src/components/features/charactersAndCampaigns/LinkedDialog/LinkedDialogContent/LinkedDialogContentTitle.tsx
@@ -1,16 +1,28 @@
-import { IconButton } from "@mui/material";
+import { IconButton, Tooltip } from "@mui/material";
 import { PropsWithChildren, ReactNode } from "react";
 import BackIcon from "@mui/icons-material/ChevronLeft";
+import CopyIcon from "@mui/icons-material/CopyAll";
 import { DialogTitleWithCloseButton } from "components/shared/DialogTitleWithCloseButton";
+import { getIsLocalEnvironment } from "functions/getGameSystem";
+import { useSnackbar } from "providers/SnackbarProvider";
 
 export interface LinkedDialogContentTitleProps extends PropsWithChildren {
+  id: string;
   handleBack: () => void;
   handleClose: () => void;
   isLastItem: boolean;
   actions?: ReactNode;
 }
 export function LinkedDialogContentTitle(props: LinkedDialogContentTitleProps) {
-  const { children, handleBack, handleClose, isLastItem, actions } = props;
+  const { children, id, handleBack, handleClose, isLastItem, actions } = props;
+
+  const { success } = useSnackbar();
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(id).then(() => {
+      success("Copied ID to clipboard");
+    });
+  };
 
   return (
     <DialogTitleWithCloseButton
@@ -18,14 +30,23 @@ export function LinkedDialogContentTitle(props: LinkedDialogContentTitleProps) {
       actions={
         <>
           {actions}
+          {getIsLocalEnvironment() && (
+            <Tooltip title={"Copy Id"}>
+              <IconButton onClick={handleCopy}>
+                <CopyIcon />
+              </IconButton>
+            </Tooltip>
+          )}
           {!isLastItem && (
-            <IconButton
-              aria-label={"Back"}
-              onClick={() => handleBack()}
-              sx={{ flexShrink: 0, marginLeft: 1 }}
-            >
-              <BackIcon />
-            </IconButton>
+            <Tooltip title={"Back"}>
+              <IconButton
+                aria-label={"Back"}
+                onClick={() => handleBack()}
+                sx={{ flexShrink: 0, marginLeft: 1 }}
+              >
+                <BackIcon />
+              </IconButton>
+            </Tooltip>
           )}
         </>
       }
diff --git a/src/components/features/charactersAndCampaigns/LinkedDialog/LinkedDialogContent/MoveDialogContent.tsx b/src/components/features/charactersAndCampaigns/LinkedDialog/LinkedDialogContent/MoveDialogContent.tsx
index 9ede0fde..f3e24f30 100644
--- a/src/components/features/charactersAndCampaigns/LinkedDialog/LinkedDialogContent/MoveDialogContent.tsx
+++ b/src/components/features/charactersAndCampaigns/LinkedDialog/LinkedDialogContent/MoveDialogContent.tsx
@@ -40,6 +40,7 @@ export function MoveDialogContent(props: MoveDialogContentProps) {
     return (
       <>
         <LinkedDialogContentTitle
+          id={id}
           handleBack={handleBack}
           handleClose={handleClose}
           isLastItem={isLastItem}
@@ -80,6 +81,7 @@ export function MoveDialogContent(props: MoveDialogContentProps) {
   return (
     <>
       <LinkedDialogContentTitle
+        id={id}
         handleBack={handleBack}
         handleClose={handleClose}
         isLastItem={isLastItem}
diff --git a/src/components/features/charactersAndCampaigns/LinkedDialog/LinkedDialogContent/NewOracleDialogContent/NewOracleDialogContent.tsx b/src/components/features/charactersAndCampaigns/LinkedDialog/LinkedDialogContent/NewOracleDialogContent/NewOracleDialogContent.tsx
new file mode 100644
index 00000000..baf3c0c2
--- /dev/null
+++ b/src/components/features/charactersAndCampaigns/LinkedDialog/LinkedDialogContent/NewOracleDialogContent/NewOracleDialogContent.tsx
@@ -0,0 +1,198 @@
+import { DialogContent, IconButton, Tooltip } from "@mui/material";
+import { LinkedDialogContentTitle } from "../LinkedDialogContentTitle";
+import PinnedIcon from "@mui/icons-material/PushPin";
+import { useStore } from "stores/store";
+import { useOracleMap } from "data/hooks/useRollableOracleMap";
+import { OracleRollableTable } from "./OracleRollableTable";
+import { MarkdownRenderer } from "components/shared/MarkdownRenderer";
+import { OracleTableSharedRolls } from "./OracleTableSharedRolls";
+import { OracleTableSharedResults } from "./OracleTableSharedResults";
+import { OracleCollection } from "./OracleCollection";
+
+export interface NewOracleDialogContentProps {
+  id: string;
+  handleBack: () => void;
+  handleClose: () => void;
+  isLastItem: boolean;
+}
+
+export function NewOracleDialogContent(props: NewOracleDialogContentProps) {
+  const { id, handleBack, handleClose, isLastItem } = props;
+
+  const oracles = useOracleMap();
+  const oracle = oracles[id];
+
+  const pinnedOracles = useStore((store) => store.settings.pinnedOraclesIds);
+  const updatePinnedOracles = useStore(
+    (store) => store.settings.togglePinnedOracle
+  );
+  // const { rollOracleTable } = useRoller();
+  // console.debug(oracles);
+  // console.debug(id);
+  // console.debug(oracle);
+
+  if (!oracle) {
+    return (
+      <>
+        <LinkedDialogContentTitle
+          id={id}
+          handleBack={handleBack}
+          handleClose={handleClose}
+          isLastItem={isLastItem}
+        >
+          Oracle Not Found
+        </LinkedDialogContentTitle>
+        <DialogContent>Sorry, we could not find that oracle.</DialogContent>
+      </>
+    );
+  }
+
+  const pinned = !!pinnedOracles[id];
+
+  return (
+    <>
+      <LinkedDialogContentTitle
+        id={id}
+        handleBack={handleBack}
+        handleClose={handleClose}
+        isLastItem={isLastItem}
+        actions={
+          <Tooltip title={pinned ? "Unpin Oracle" : "Pin Oracle"}>
+            <IconButton
+              color={pinned ? "primary" : "default"}
+              onClick={() => updatePinnedOracles(id, !pinned).catch(() => {})}
+            >
+              <PinnedIcon />
+            </IconButton>
+          </Tooltip>
+        }
+      >
+        {oracle.name}
+      </LinkedDialogContentTitle>
+      <DialogContent>
+        {oracle.summary &&
+          (oracle.oracle_type === "column_simple" ||
+            oracle.oracle_type === "column_details" ||
+            !oracle.description) && (
+            <MarkdownRenderer markdown={oracle.summary} />
+          )}
+        {oracle.oracle_type !== "column_simple" &&
+          oracle.oracle_type !== "column_details" &&
+          oracle.description && (
+            <MarkdownRenderer markdown={oracle.description} />
+          )}
+        {(oracle.oracle_type === "table_simple" ||
+          oracle.oracle_type === "column_simple" ||
+          oracle.oracle_type === "table_details" ||
+          oracle.oracle_type === "column_details") && (
+          <OracleRollableTable oracle={oracle} />
+        )}
+        {oracle.oracle_type === "table_shared_rolls" && (
+          <OracleTableSharedRolls oracle={oracle} />
+        )}
+        {(oracle.oracle_type === "table_shared_results" ||
+          oracle.oracle_type === "table_shared_details") && (
+          <OracleTableSharedResults oracle={oracle} />
+        )}
+        {oracle.oracle_type === "tables" && (
+          <OracleCollection collection={oracle} />
+        )}
+      </DialogContent>
+    </>
+  );
+
+  // const table = oracle.Table;
+  // const pinned = !!pinnedOracles[id];
+
+  // return (
+  //   <>
+  //       {oracle.Description && (
+  //         <MarkdownRenderer markdown={oracle.Description} />
+  //       )}
+  //       <Button
+  //         variant={"outlined"}
+  //         color={"inherit"}
+  //         onClick={() => rollOracleTable(id)}
+  //       >
+  //         Roll on the Table
+  //       </Button>
+  //       <Box
+  //         component={"table"}
+  //         mt={1}
+  //         border={1}
+  //         borderColor={(theme) => theme.palette.divider}
+  //         borderRadius={(theme) => `${theme.shape.borderRadius}px`}
+  //         sx={{ borderCollapse: "collapse" }}
+  //         width={"100%"}
+  //       >
+  //         <Box
+  //           component={"thead"}
+  //           bgcolor={(theme) => theme.palette.background.paperInlayDarker}
+  //         >
+  //           <tr>
+  //             <Typography
+  //               component={"th"}
+  //               variant={"body2"}
+  //               textAlign={"left"}
+  //               p={1}
+  //               minWidth={"8ch"}
+  //             >
+  //               <b>Roll</b>
+  //             </Typography>
+  //             <Typography
+  //               component={"th"}
+  //               variant={"body2"}
+  //               textAlign={"left"}
+  //               p={1}
+  //             >
+  //               <b>Result</b>
+  //             </Typography>
+  //           </tr>
+  //         </Box>
+  //         <tbody>
+  //           {table.map((entry, index) => {
+  //             const { Floor, Ceiling, Result } = entry;
+
+  //             if (Floor === null || Ceiling === null) {
+  //               return null;
+  //             }
+
+  //             const diff = (Ceiling ?? 100) - (Floor ?? 1);
+
+  //             return (
+  //               <Box
+  //                 key={index}
+  //                 component={"tr"}
+  //                 sx={(theme) => ({
+  //                   "&:nth-of-type(even)": {
+  //                     backgroundColor: theme.palette.background.paperInlay,
+  //                   },
+  //                 })}
+  //               >
+  //                 <Typography
+  //                   component={"td"}
+  //                   px={1}
+  //                   py={0.5}
+  //                   variant={"body2"}
+  //                   color={(theme) => theme.palette.text.secondary}
+  //                 >
+  //                   {diff === 0 ? Floor : `${Floor} - ${Ceiling}`}
+  //                 </Typography>
+  //                 <Typography
+  //                   component={"td"}
+  //                   px={1}
+  //                   py={0.5}
+  //                   variant={"body2"}
+  //                   color={(theme) => theme.palette.text.primary}
+  //                 >
+  //                   <MarkdownRenderer inheritColor markdown={Result} />
+  //                 </Typography>
+  //               </Box>
+  //             );
+  //           })}
+  //         </tbody>
+  //       </Box>
+  //     </DialogContent>
+  //   </>
+  // );
+}
diff --git a/src/components/features/charactersAndCampaigns/LinkedDialog/LinkedDialogContent/NewOracleDialogContent/OracleCollection.tsx b/src/components/features/charactersAndCampaigns/LinkedDialog/LinkedDialogContent/NewOracleDialogContent/OracleCollection.tsx
new file mode 100644
index 00000000..90c0812b
--- /dev/null
+++ b/src/components/features/charactersAndCampaigns/LinkedDialog/LinkedDialogContent/NewOracleDialogContent/OracleCollection.tsx
@@ -0,0 +1,26 @@
+import { OracleTablesCollection } from "@datasworn/core";
+import { OracleTablesCollectionSubList } from "components/sharedIronsworn/NewOracles/OracleTablesCollectionSubList";
+import { defaultActions } from "components/sharedIronsworn/NewOracles/defaultActions";
+
+export interface OracleCollectionProps {
+  collection: OracleTablesCollection;
+}
+
+export function OracleCollection(props: OracleCollectionProps) {
+  const { collection } = props;
+
+  return (
+    <OracleTablesCollectionSubList
+      oracles={collection.contents ?? {}}
+      subCollections={collection.collections ?? {}}
+      actions={defaultActions}
+      sx={{
+        borderColor: "divider",
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderRadius: 1,
+        overflow: "hidden",
+      }}
+    />
+  );
+}
diff --git a/src/components/features/charactersAndCampaigns/LinkedDialog/LinkedDialogContent/NewOracleDialogContent/OracleRollableTable.tsx b/src/components/features/charactersAndCampaigns/LinkedDialog/LinkedDialogContent/NewOracleDialogContent/OracleRollableTable.tsx
new file mode 100644
index 00000000..c2ab2266
--- /dev/null
+++ b/src/components/features/charactersAndCampaigns/LinkedDialog/LinkedDialogContent/NewOracleDialogContent/OracleRollableTable.tsx
@@ -0,0 +1,62 @@
+import {
+  OracleColumnDetails,
+  OracleColumnSimple,
+  OracleTableDetails,
+  OracleTableRowDetails,
+  OracleTableSimple,
+} from "@datasworn/core";
+import { MarkdownRenderer } from "components/shared/MarkdownRenderer";
+import {
+  SimpleTable,
+  SimpleTableColumnDefinition,
+} from "components/shared/SimpleTable";
+
+export interface OracleRollableTableProps {
+  oracle:
+    | OracleTableSimple
+    | OracleColumnSimple
+    | OracleTableDetails
+    | OracleColumnDetails;
+}
+
+export function OracleRollableTable(props: OracleRollableTableProps) {
+  const { oracle } = props;
+
+  const columns: SimpleTableColumnDefinition<(typeof oracle)["rows"][0]>[] = [
+    {
+      label: oracle.column_labels.roll,
+      renderer: (row) =>
+        row.min !== null && row.max !== null
+          ? row.max - row.min === 0
+            ? row.min
+            : `${row.min} - ${row.max}`
+          : null,
+      textColor: "text.secondary",
+    },
+    {
+      label: oracle.column_labels.result,
+      renderer: (row) => <MarkdownRenderer markdown={row.result} />,
+    },
+  ];
+
+  if (
+    oracle.oracle_type === "table_details" ||
+    oracle.oracle_type === "column_details"
+  ) {
+    columns.push({
+      label: oracle.column_labels.detail,
+      renderer: (row) =>
+        (row as OracleTableRowDetails).detail ? (
+          <MarkdownRenderer
+            markdown={(row as OracleTableRowDetails).detail ?? ""}
+          />
+        ) : null,
+    });
+  }
+
+  return (
+    <>
+      <SimpleTable columns={columns} rows={oracle.rows} />
+    </>
+  );
+}
diff --git a/src/components/features/charactersAndCampaigns/LinkedDialog/LinkedDialogContent/NewOracleDialogContent/OracleTableSharedResults.tsx b/src/components/features/charactersAndCampaigns/LinkedDialog/LinkedDialogContent/NewOracleDialogContent/OracleTableSharedResults.tsx
new file mode 100644
index 00000000..976e2328
--- /dev/null
+++ b/src/components/features/charactersAndCampaigns/LinkedDialog/LinkedDialogContent/NewOracleDialogContent/OracleTableSharedResults.tsx
@@ -0,0 +1,69 @@
+import {
+  OracleTableSharedResults as IOracleTableSharedResults,
+  OracleTableSharedDetails as IOracleTableSharedDetails,
+  OracleTableRowSimple,
+  OracleColumnSimple,
+  OracleColumnDetails,
+  OracleTableRowDetails,
+} from "@datasworn/core";
+import { MarkdownRenderer } from "components/shared/MarkdownRenderer";
+import {
+  SimpleTable,
+  SimpleTableColumnDefinition,
+} from "components/shared/SimpleTable";
+
+export interface OracleTableSharedResultsProps {
+  oracle: IOracleTableSharedResults | IOracleTableSharedDetails;
+}
+
+export function OracleTableSharedResults(props: OracleTableSharedResultsProps) {
+  const { oracle } = props;
+
+  const contentArr = Object.values(oracle.contents ?? {});
+  const rows = contentArr.length > 0 ? contentArr[0].rows : undefined;
+
+  if (!rows) {
+    return null;
+  }
+
+  const columns: SimpleTableColumnDefinition<OracleTableRowSimple>[] = [];
+
+  const contentValues:
+    | (OracleColumnSimple | OracleColumnDetails)[]
+    | undefined = oracle.contents ? Object.values(oracle.contents) : undefined;
+
+  contentValues?.forEach((subOracle) => {
+    columns.push({
+      label: subOracle.name,
+      renderer: (_, index) => {
+        const row = subOracle.rows[index];
+
+        return row.min !== null && row.max !== null
+          ? row.max - row.min === 0
+            ? row.min
+            : `${row.min} - ${row.max}`
+          : null;
+      },
+      textColor: "text.secondary",
+    });
+  });
+
+  columns.push({
+    label: oracle.column_labels.result,
+    renderer: (row) => <MarkdownRenderer markdown={row.result} />,
+  });
+
+  if (oracle.oracle_type === "table_shared_details") {
+    columns.push({
+      label: oracle.column_labels.detail,
+      renderer: (row) =>
+        (row as OracleTableRowDetails).detail ? (
+          <MarkdownRenderer
+            markdown={(row as OracleTableRowDetails).detail ?? ""}
+          />
+        ) : null,
+    });
+  }
+
+  return <SimpleTable columns={columns} rows={rows} />;
+}
diff --git a/src/components/features/charactersAndCampaigns/LinkedDialog/LinkedDialogContent/NewOracleDialogContent/OracleTableSharedRolls.tsx b/src/components/features/charactersAndCampaigns/LinkedDialog/LinkedDialogContent/NewOracleDialogContent/OracleTableSharedRolls.tsx
new file mode 100644
index 00000000..cc61ee86
--- /dev/null
+++ b/src/components/features/charactersAndCampaigns/LinkedDialog/LinkedDialogContent/NewOracleDialogContent/OracleTableSharedRolls.tsx
@@ -0,0 +1,50 @@
+import {
+  OracleTableSharedRolls as IOracleTableSharedRows,
+  OracleTableRowSimple,
+} from "@datasworn/core";
+import { MarkdownRenderer } from "components/shared/MarkdownRenderer";
+import {
+  SimpleTable,
+  SimpleTableColumnDefinition,
+} from "components/shared/SimpleTable";
+
+export interface OracleTableSharedRollsDialogContentProps {
+  oracle: IOracleTableSharedRows;
+}
+
+export function OracleTableSharedRolls(
+  props: OracleTableSharedRollsDialogContentProps
+) {
+  const { oracle } = props;
+
+  const contentArr = Object.values(oracle.contents ?? {});
+  const rows = contentArr.length > 0 ? contentArr[0].rows : undefined;
+
+  if (!rows) {
+    return null;
+  }
+
+  const columns: SimpleTableColumnDefinition<OracleTableRowSimple>[] = [
+    {
+      label: oracle.column_labels.roll,
+      renderer: (row) =>
+        row.min !== null && row.max !== null
+          ? row.max - row.min === 0
+            ? row.min
+            : `${row.min} - ${row.max}`
+          : null,
+      textColor: "text.secondary",
+    },
+  ];
+
+  Object.values(oracle.contents ?? {}).forEach((subOracle) => {
+    columns.push({
+      label: subOracle.name,
+      renderer: (_, index) => (
+        <MarkdownRenderer markdown={subOracle.rows[index].result} />
+      ),
+    });
+  });
+
+  return <SimpleTable columns={columns} rows={rows} />;
+}
diff --git a/src/components/features/charactersAndCampaigns/LinkedDialog/LinkedDialogContent/NewOracleDialogContent/index.ts b/src/components/features/charactersAndCampaigns/LinkedDialog/LinkedDialogContent/NewOracleDialogContent/index.ts
new file mode 100644
index 00000000..ba50934f
--- /dev/null
+++ b/src/components/features/charactersAndCampaigns/LinkedDialog/LinkedDialogContent/NewOracleDialogContent/index.ts
@@ -0,0 +1 @@
+export * from "./NewOracleDialogContent";
diff --git a/src/components/features/charactersAndCampaigns/LinkedDialog/LinkedDialogContent/OracleDialogContent.tsx b/src/components/features/charactersAndCampaigns/LinkedDialog/LinkedDialogContent/OracleDialogContent.tsx
index 2dccecfa..e5f1bec7 100644
--- a/src/components/features/charactersAndCampaigns/LinkedDialog/LinkedDialogContent/OracleDialogContent.tsx
+++ b/src/components/features/charactersAndCampaigns/LinkedDialog/LinkedDialogContent/OracleDialogContent.tsx
@@ -39,6 +39,7 @@ export function OracleDialogContent(props: OracleDialogContentProps) {
     return (
       <>
         <LinkedDialogContentTitle
+          id={id}
           handleBack={handleBack}
           handleClose={handleClose}
           isLastItem={isLastItem}
@@ -56,6 +57,7 @@ export function OracleDialogContent(props: OracleDialogContentProps) {
   return (
     <>
       <LinkedDialogContentTitle
+        id={id}
         handleBack={handleBack}
         handleClose={handleClose}
         isLastItem={isLastItem}
diff --git a/src/components/shared/ErrorRoute.tsx b/src/components/shared/ErrorRoute.tsx
index 8924ec1a..63648b51 100644
--- a/src/components/shared/ErrorRoute.tsx
+++ b/src/components/shared/ErrorRoute.tsx
@@ -21,7 +21,12 @@ export function ErrorRoute() {
       errorTrace = error.stack;
     }
 
-    if (errorMessage?.includes("Failed to fetch dynamically imported module")) {
+    if (
+      errorMessage?.includes("Failed to fetch dynamically imported module") ||
+      errorMessage
+        ?.toLocaleLowerCase()
+        .includes("error loading dynamically imported module")
+    ) {
       window.location.reload();
     } else {
       setErrorMessage(errorMessage);
diff --git a/src/components/shared/MarkdownRenderer.tsx b/src/components/shared/MarkdownRenderer.tsx
index 3ba89404..8eae497d 100644
--- a/src/components/shared/MarkdownRenderer.tsx
+++ b/src/components/shared/MarkdownRenderer.tsx
@@ -1,6 +1,7 @@
 import { Box, Link, Typography, useTheme } from "@mui/material";
 import { useCustomMoves } from "components/features/charactersAndCampaigns/MovesSection/useCustomMoves";
 import { useCustomOracles } from "components/features/charactersAndCampaigns/OracleSection/useCustomOracles";
+import { useOracleMap } from "data/hooks/useRollableOracleMap";
 import { moveMap } from "data/moves";
 import { oracleMap } from "data/oracles";
 import ReactMarkdown from "react-markdown";
@@ -23,6 +24,7 @@ export function MarkdownRenderer(props: MarkdownRendererProps) {
 
   const { allCustomOracleMap } = useCustomOracles();
   const { customMoveMap } = useCustomMoves();
+  const newOracleMap = useOracleMap();
 
   return (
     <ReactMarkdown
@@ -126,7 +128,37 @@ export function MarkdownRenderer(props: MarkdownRendererProps) {
           if (disableLinks) {
             return <>{props.children}</>;
           }
-          const href = props.href ?? "";
+
+          const propertiesHref = props.node.properties?.href;
+
+          const href = typeof propertiesHref === "string" ? propertiesHref : "";
+          // V2 versions
+          if (href.startsWith("id:")) {
+            const strippedHref = href.slice(3);
+            if (newOracleMap[strippedHref]) {
+              return (
+                <Link
+                  component={"button"}
+                  sx={{
+                    cursor: "pointer",
+                    verticalAlign: "baseline",
+                  }}
+                  color={
+                    theme.palette.mode === "light" ? "info.dark" : "info.light"
+                  }
+                  onClick={() => openDialog(strippedHref, true)}
+                >
+                  {props.children}
+                </Link>
+              );
+            }
+
+            console.error("Link: ", href);
+
+            // TODO - add handlers for this situation;
+            return <span>{props.children}</span>;
+          }
+          // V1 versions
           if (href.startsWith("ironsworn/") || href.startsWith("starforged/")) {
             if (
               (href.startsWith("ironsworn/moves") ||
diff --git a/src/components/shared/SimpleTable/SimpleTable.tsx b/src/components/shared/SimpleTable/SimpleTable.tsx
new file mode 100644
index 00000000..b3e82dd9
--- /dev/null
+++ b/src/components/shared/SimpleTable/SimpleTable.tsx
@@ -0,0 +1,90 @@
+import { Box, Typography, TypographyProps } from "@mui/material";
+import { ReactNode } from "react";
+
+export interface SimpleTableColumnDefinition<T> {
+  label: string;
+  renderer: (row: T, index: number) => ReactNode;
+  textColor?: TypographyProps["color"];
+}
+
+export interface SimpleTableProps<T> {
+  columns: SimpleTableColumnDefinition<T>[];
+  rows: T[];
+}
+
+export function SimpleTable<T>(props: SimpleTableProps<T>) {
+  const { columns, rows } = props;
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        overflowX: "auto",
+        mx: { xs: -3, sm: 0 },
+        px: { xs: 3, sm: 0 },
+      }}
+    >
+      <Box
+        component={"table"}
+        mt={1}
+        borderColor={"divider"}
+        sx={{
+          borderCollapse: "separate",
+          borderRadius: 1,
+          overflow: "hidden",
+          borderSpacing: 0,
+          borderWidth: "1px",
+          borderStyle: "solid",
+          overflowX: "auto",
+          width: "100%",
+        }}
+      >
+        <Box component={"thead"} bgcolor={"background.paperInlayDarker"}>
+          <tr>
+            {columns.map((column, index) => (
+              <Typography
+                key={index}
+                component={"th"}
+                variant={"body2"}
+                textAlign={"left"}
+                p={1}
+                minWidth={"8ch"}
+                fontWeight={700}
+              >
+                {column.label}
+              </Typography>
+            ))}
+          </tr>
+        </Box>
+        <tbody>
+          {rows.map((row, index) => {
+            return (
+              <Box
+                key={index}
+                component={"tr"}
+                sx={(theme) => ({
+                  "&:nth-of-type(even)": {
+                    backgroundColor: theme.palette.background.paperInlay,
+                  },
+                })}
+              >
+                {columns.map((column, columnIndex) => (
+                  <Typography
+                    key={columnIndex}
+                    component={"td"}
+                    px={1}
+                    py={0.5}
+                    variant={"body2"}
+                    color={column.textColor}
+                  >
+                    {column.renderer(row, index)}
+                  </Typography>
+                ))}
+              </Box>
+            );
+          })}
+        </tbody>
+      </Box>
+    </Box>
+  );
+}
diff --git a/src/components/shared/SimpleTable/index.ts b/src/components/shared/SimpleTable/index.ts
new file mode 100644
index 00000000..f4e4cd6e
--- /dev/null
+++ b/src/components/shared/SimpleTable/index.ts
@@ -0,0 +1 @@
+export * from "./SimpleTable";
diff --git a/src/components/sharedIronsworn/NewOracles/Actions.tsx b/src/components/sharedIronsworn/NewOracles/Actions.tsx
new file mode 100644
index 00000000..c9f77c58
--- /dev/null
+++ b/src/components/sharedIronsworn/NewOracles/Actions.tsx
@@ -0,0 +1,25 @@
+import { Box } from "@mui/material";
+import {
+  OracleListItemActionProps,
+  extraOracleListItemActionsProp,
+} from "./oracleListItemActions";
+
+export interface ActionsProps extends OracleListItemActionProps {
+  actions?: extraOracleListItemActionsProp;
+}
+
+export function Actions(props: ActionsProps) {
+  const { actions = [], ...actionProps } = props;
+
+  if (actions.length === 0) {
+    return null;
+  }
+
+  return (
+    <Box ml={1}>
+      {actions.map((Action, index) => (
+        <Action key={index} {...actionProps} />
+      ))}
+    </Box>
+  );
+}
diff --git a/src/components/sharedIronsworn/NewOracles/OracleCollectionList.tsx b/src/components/sharedIronsworn/NewOracles/OracleCollectionList.tsx
new file mode 100644
index 00000000..75623b3d
--- /dev/null
+++ b/src/components/sharedIronsworn/NewOracles/OracleCollectionList.tsx
@@ -0,0 +1,36 @@
+import { OracleTablesCollection } from "@datasworn/core";
+import { Box } from "@mui/material";
+import { OracleTablesCollectionItem } from "./OracleTablesCollectionItem";
+import { extraOracleListItemActionsProp } from "./oracleListItemActions";
+import { defaultActions } from "./defaultActions";
+
+export interface OracleCollectionListProps {
+  oracles: Record<string, OracleTablesCollection>;
+  listItemActions?: extraOracleListItemActionsProp;
+}
+
+export function OracleCollectionList(props: OracleCollectionListProps) {
+  const { oracles, listItemActions } = props;
+
+  const orderedOracleKeys = Object.keys(oracles).sort((o1, o2) => {
+    return oracles[o1].name.localeCompare(oracles[o2].name);
+  });
+
+  const listItemActionsWithDefault = [
+    ...(listItemActions ?? []),
+    ...defaultActions,
+  ];
+
+  return (
+    <Box component={"ul"} sx={{ listStyle: "none", p: 0 }}>
+      {orderedOracleKeys.map((oracleCollectionKey) => (
+        <OracleTablesCollectionItem
+          key={oracleCollectionKey}
+          collectionKey={oracleCollectionKey}
+          collection={oracles[oracleCollectionKey]}
+          listItemActions={listItemActionsWithDefault}
+        />
+      ))}
+    </Box>
+  );
+}
diff --git a/src/components/sharedIronsworn/NewOracles/OracleListItemActionOpenDialogButton.tsx b/src/components/sharedIronsworn/NewOracles/OracleListItemActionOpenDialogButton.tsx
new file mode 100644
index 00000000..7c6fff85
--- /dev/null
+++ b/src/components/sharedIronsworn/NewOracles/OracleListItemActionOpenDialogButton.tsx
@@ -0,0 +1,34 @@
+import { IconButton } from "@mui/material";
+import { OracleListItemActionProps } from "./oracleListItemActions";
+import TableIcon from "@mui/icons-material/ListAlt";
+import { useStore } from "stores/store";
+
+export function OracleListItemActionOpenDialogButton(
+  props: OracleListItemActionProps
+) {
+  const { item, disabled } = props;
+  const openDialog = useStore((store) => store.appState.openDialog);
+
+  const handleOpenClick = () => {
+    openDialog(item.id, true);
+  };
+
+  return (
+    <IconButton
+      aria-label={"View Full Table"}
+      disabled={disabled}
+      id={"open-table"}
+      onClick={handleOpenClick}
+      sx={{
+        "&:focus-visible": {
+          display: "inline-flex",
+        },
+        "&:hover": {
+          display: "inline-flex",
+        },
+      }}
+    >
+      <TableIcon />
+    </IconButton>
+  );
+}
diff --git a/src/components/sharedIronsworn/NewOracles/OracleRollableCollectionListItem.tsx b/src/components/sharedIronsworn/NewOracles/OracleRollableCollectionListItem.tsx
new file mode 100644
index 00000000..73f93ab3
--- /dev/null
+++ b/src/components/sharedIronsworn/NewOracles/OracleRollableCollectionListItem.tsx
@@ -0,0 +1,47 @@
+import {
+  OracleTableSharedDetails,
+  OracleTableSharedResults,
+  OracleTableSharedRolls,
+} from "@datasworn/core";
+import { ListItem, ListItemText } from "@mui/material";
+import { OracleSelectableRollableCollectionListItem } from "./OracleSelectableRollableCollectionListItem";
+import { extraOracleListItemActionsProp } from "./oracleListItemActions";
+import { Actions } from "./Actions";
+
+export interface OracleRollableCollectionListItemProps {
+  collection:
+    | OracleTableSharedRolls
+    | OracleTableSharedResults
+    | OracleTableSharedDetails;
+  actions?: extraOracleListItemActionsProp;
+  disabled?: boolean;
+}
+
+export function OracleRollableCollectionListItem(
+  props: OracleRollableCollectionListItemProps
+) {
+  const { collection, actions, disabled } = props;
+
+  if (collection.oracle_type === "table_shared_rolls") {
+    return (
+      <ListItem
+        sx={{
+          "&:nth-of-type(even)": {
+            bgcolor: "background.paperInlay",
+          },
+        }}
+      >
+        <ListItemText primary={collection.name} />
+        <Actions actions={actions} item={collection} disabled={disabled} />
+      </ListItem>
+    );
+  } else {
+    return (
+      <OracleSelectableRollableCollectionListItem
+        collection={collection}
+        actions={actions}
+        disabled={disabled}
+      />
+    );
+  }
+}
diff --git a/src/components/sharedIronsworn/NewOracles/OracleRollableListItem.tsx b/src/components/sharedIronsworn/NewOracles/OracleRollableListItem.tsx
new file mode 100644
index 00000000..1a837c0d
--- /dev/null
+++ b/src/components/sharedIronsworn/NewOracles/OracleRollableListItem.tsx
@@ -0,0 +1,26 @@
+import { OracleRollable } from "@datasworn/core";
+import { ListItem, ListItemText } from "@mui/material";
+import { extraOracleListItemActionsProp } from "./oracleListItemActions";
+import { Actions } from "./Actions";
+
+export interface OracleRollableListItemProps {
+  oracleRollable: OracleRollable;
+  actions?: extraOracleListItemActionsProp;
+  disabled?: boolean;
+}
+
+export function OracleRollableListItem(props: OracleRollableListItemProps) {
+  const { oracleRollable, actions, disabled } = props;
+  return (
+    <ListItem
+      sx={{
+        "&:nth-of-type(even)": {
+          bgcolor: "background.paperInlay",
+        },
+      }}
+    >
+      <ListItemText primary={oracleRollable.name} />
+      <Actions actions={actions} item={oracleRollable} disabled={disabled} />
+    </ListItem>
+  );
+}
diff --git a/src/components/sharedIronsworn/NewOracles/OracleSelectableRollableCollectionListItem.tsx b/src/components/sharedIronsworn/NewOracles/OracleSelectableRollableCollectionListItem.tsx
new file mode 100644
index 00000000..a49d0c8a
--- /dev/null
+++ b/src/components/sharedIronsworn/NewOracles/OracleSelectableRollableCollectionListItem.tsx
@@ -0,0 +1,63 @@
+import {
+  OracleTableSharedResults,
+  OracleTableSharedDetails,
+} from "@datasworn/core";
+import {
+  Box,
+  ListItem,
+  ListItemText,
+  MenuItem,
+  TextField,
+} from "@mui/material";
+import { useState } from "react";
+import { extraOracleListItemActionsProp } from "./oracleListItemActions";
+import { Actions } from "./Actions";
+
+export interface OracleSelectableRollableCollectionListItemProps {
+  collection: OracleTableSharedResults | OracleTableSharedDetails;
+  actions?: extraOracleListItemActionsProp;
+  disabled?: boolean;
+}
+
+export function OracleSelectableRollableCollectionListItem(
+  props: OracleSelectableRollableCollectionListItemProps
+) {
+  const { collection, actions, disabled } = props;
+
+  const options = collection.contents ?? {};
+  const keys = Object.keys(options);
+
+  const [selectedOption, setSelectedOption] = useState<string>(keys[0] ?? "");
+
+  return (
+    <ListItem
+      sx={{
+        "&:nth-of-type(even)": {
+          bgcolor: "background.paperInlay",
+        },
+      }}
+    >
+      <ListItemText primary={collection.name} />
+      <Box display={"flex"} alignItems={"center"}>
+        {keys.length > 0 && (
+          <TextField
+            aria-label={"Oracle Option"}
+            size={"small"}
+            select
+            sx={{ minWidth: 150 }}
+            value={selectedOption}
+            onChange={(evt) => setSelectedOption(evt.target.value)}
+            disabled={disabled}
+          >
+            {keys.map((key) => (
+              <MenuItem key={key} value={key}>
+                {options[key].name}
+              </MenuItem>
+            ))}
+          </TextField>
+        )}
+        <Actions actions={actions} item={collection} disabled={disabled} />
+      </Box>
+    </ListItem>
+  );
+}
diff --git a/src/components/sharedIronsworn/NewOracles/OracleTablesCollectionItem.tsx b/src/components/sharedIronsworn/NewOracles/OracleTablesCollectionItem.tsx
new file mode 100644
index 00000000..d0289b56
--- /dev/null
+++ b/src/components/sharedIronsworn/NewOracles/OracleTablesCollectionItem.tsx
@@ -0,0 +1,50 @@
+import { OracleTablesCollection } from "@datasworn/core";
+import { Box, Collapse } from "@mui/material";
+import { CollapsibleSectionHeader } from "components/features/charactersAndCampaigns/CollapsibleSectionHeader";
+import { useState } from "react";
+import { extraOracleListItemActionsProp } from "./oracleListItemActions";
+import { OracleTablesCollectionSubList } from "./OracleTablesCollectionSubList";
+
+export interface OracleTablesCollectionItemProps {
+  collectionKey: string;
+  collection: OracleTablesCollection;
+  labelPrefix?: string;
+  listItemActions?: extraOracleListItemActionsProp;
+  disabled?: boolean;
+}
+
+export function OracleTablesCollectionItem(
+  props: OracleTablesCollectionItemProps
+) {
+  const { collectionKey, collection, labelPrefix, listItemActions, disabled } =
+    props;
+
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const title = labelPrefix
+    ? `${labelPrefix} ꞏ ${collection.name}`
+    : collection.name;
+
+  return (
+    <Box component={"li"}>
+      <CollapsibleSectionHeader
+        component={"span"}
+        key={collectionKey}
+        text={title}
+        open={isExpanded}
+        toggleOpen={() => setIsExpanded((prevValue) => !prevValue)}
+        disabled={disabled}
+      />
+      <Collapse in={isExpanded}>
+        <OracleTablesCollectionSubList
+          oracles={collection.contents ?? {}}
+          subCollections={collection.collections ?? {}}
+          collectionPrefixLabel={title}
+          disabled={!isExpanded}
+          actions={listItemActions}
+          sx={{ mb: 0.5 }}
+        />
+      </Collapse>
+    </Box>
+  );
+}
diff --git a/src/components/sharedIronsworn/NewOracles/OracleTablesCollectionSubList.tsx b/src/components/sharedIronsworn/NewOracles/OracleTablesCollectionSubList.tsx
new file mode 100644
index 00000000..77cb1b1b
--- /dev/null
+++ b/src/components/sharedIronsworn/NewOracles/OracleTablesCollectionSubList.tsx
@@ -0,0 +1,125 @@
+import {
+  OracleCollection,
+  OracleTableRollable,
+  OracleTableSharedRolls,
+  OracleTableSharedDetails,
+  OracleTableSharedResults,
+  OracleTablesCollection,
+} from "@datasworn/core";
+import { List, SxProps } from "@mui/material";
+import { OracleRollableListItem } from "./OracleRollableListItem";
+import { extraOracleListItemActionsProp } from "./oracleListItemActions";
+import { OracleRollableCollectionListItem } from "./OracleRollableCollectionListItem";
+import { OracleTablesCollectionItem } from "./OracleTablesCollectionItem";
+
+export interface OracleTablesCollectionSubListProps {
+  oracles: Record<string, OracleTableRollable>;
+  subCollections: Record<string, OracleCollection>;
+  actions?: extraOracleListItemActionsProp;
+  disabled?: boolean;
+  collectionPrefixLabel?: string;
+  sx?: SxProps;
+}
+
+export function OracleTablesCollectionSubList(
+  props: OracleTablesCollectionSubListProps
+) {
+  const {
+    oracles,
+    subCollections,
+    actions,
+    disabled,
+    collectionPrefixLabel,
+    sx,
+  } = props;
+
+  const rollableSubCollections: Record<
+    string,
+    OracleTableSharedRolls | OracleTableSharedDetails | OracleTableSharedResults
+  > = {};
+  const nonRollableSubCollections: Record<string, OracleTablesCollection> = {};
+
+  const unsortedSubCollections = subCollections ?? {};
+  Object.keys(unsortedSubCollections).forEach((subCollectionKey) => {
+    if (unsortedSubCollections[subCollectionKey].oracle_type === "tables") {
+      nonRollableSubCollections[subCollectionKey] = unsortedSubCollections[
+        subCollectionKey
+      ] as OracleTablesCollection;
+    } else if (
+      unsortedSubCollections[subCollectionKey].oracle_type ===
+      "table_shared_rolls"
+    ) {
+      rollableSubCollections[subCollectionKey] = unsortedSubCollections[
+        subCollectionKey
+      ] as OracleTableSharedRolls;
+    } else if (
+      unsortedSubCollections[subCollectionKey].oracle_type ===
+      "table_shared_details"
+    ) {
+      rollableSubCollections[subCollectionKey] = unsortedSubCollections[
+        subCollectionKey
+      ] as OracleTableSharedDetails;
+    } else if (
+      unsortedSubCollections[subCollectionKey].oracle_type ===
+      "table_shared_results"
+    ) {
+      rollableSubCollections[subCollectionKey] = unsortedSubCollections[
+        subCollectionKey
+      ] as OracleTableSharedResults;
+    } else {
+      console.error(
+        "CAME ACROSS UNKNOWN COLLECTION TYPE:",
+        unsortedSubCollections[subCollectionKey].oracle_type
+      );
+    }
+  });
+
+  const sortedRollableKeys = Object.keys(oracles).sort((r1, r2) =>
+    oracles[r1].name.localeCompare(oracles[r2].name)
+  );
+  const sortedRollableSubCollectionKeys = Object.keys(
+    rollableSubCollections
+  ).sort((k1, k2) =>
+    rollableSubCollections[k1].name.localeCompare(
+      rollableSubCollections[k2].name
+    )
+  );
+  const sortedNonRollableSubCollectionKeys = Object.keys(
+    nonRollableSubCollections
+  ).sort((k1, k2) =>
+    nonRollableSubCollections[k1].name.localeCompare(
+      nonRollableSubCollections[k2].name
+    )
+  );
+
+  return (
+    <List disablePadding sx={sx}>
+      {sortedRollableKeys.map((oracleKey) => (
+        <OracleRollableListItem
+          key={oracleKey}
+          oracleRollable={oracles[oracleKey]}
+          actions={actions}
+          disabled={disabled}
+        />
+      ))}
+      {sortedRollableSubCollectionKeys.map((subCollectionKey) => (
+        <OracleRollableCollectionListItem
+          key={subCollectionKey}
+          collection={rollableSubCollections[subCollectionKey]}
+          actions={actions}
+          disabled={disabled}
+        />
+      ))}
+      {sortedNonRollableSubCollectionKeys.map((subCollectionKey) => (
+        <OracleTablesCollectionItem
+          key={subCollectionKey}
+          collectionKey={subCollectionKey}
+          collection={nonRollableSubCollections[subCollectionKey]}
+          labelPrefix={collectionPrefixLabel}
+          disabled={disabled}
+          listItemActions={actions}
+        />
+      ))}
+    </List>
+  );
+}
diff --git a/src/components/sharedIronsworn/NewOracles/defaultActions.ts b/src/components/sharedIronsworn/NewOracles/defaultActions.ts
new file mode 100644
index 00000000..32ceb403
--- /dev/null
+++ b/src/components/sharedIronsworn/NewOracles/defaultActions.ts
@@ -0,0 +1,3 @@
+import { OracleListItemActionOpenDialogButton } from "./OracleListItemActionOpenDialogButton";
+
+export const defaultActions = [OracleListItemActionOpenDialogButton];
diff --git a/src/components/sharedIronsworn/NewOracles/index.ts b/src/components/sharedIronsworn/NewOracles/index.ts
new file mode 100644
index 00000000..829fef21
--- /dev/null
+++ b/src/components/sharedIronsworn/NewOracles/index.ts
@@ -0,0 +1 @@
+export * from "./OracleCollectionList";
diff --git a/src/components/sharedIronsworn/NewOracles/oracleListItemActions.tsx b/src/components/sharedIronsworn/NewOracles/oracleListItemActions.tsx
new file mode 100644
index 00000000..e26add41
--- /dev/null
+++ b/src/components/sharedIronsworn/NewOracles/oracleListItemActions.tsx
@@ -0,0 +1,20 @@
+import {
+  OracleRollable,
+  OracleTableSharedDetails,
+  OracleTableSharedResults,
+  OracleTableSharedRolls,
+} from "@datasworn/core";
+import { ReactElement } from "react";
+
+export interface OracleListItemActionProps {
+  item:
+    | OracleTableSharedRolls
+    | OracleTableSharedResults
+    | OracleTableSharedDetails
+    | OracleRollable;
+  disabled?: boolean;
+}
+
+export type extraOracleListItemActionsProp = ((
+  props: OracleListItemActionProps
+) => ReactElement)[];
diff --git a/src/data/hooks/useOracles.ts b/src/data/hooks/useOracles.ts
new file mode 100644
index 00000000..135f5815
--- /dev/null
+++ b/src/data/hooks/useOracles.ts
@@ -0,0 +1,5 @@
+import { oracles } from "data/oraclesNew";
+
+export function useOracles() {
+  return oracles;
+}
diff --git a/src/data/hooks/useRollableOracleMap.ts b/src/data/hooks/useRollableOracleMap.ts
new file mode 100644
index 00000000..e0256c1b
--- /dev/null
+++ b/src/data/hooks/useRollableOracleMap.ts
@@ -0,0 +1,5 @@
+import { oracleMap } from "data/oraclesNew";
+
+export function useOracleMap() {
+  return oracleMap;
+}
diff --git a/src/data/oraclesNew.ts b/src/data/oraclesNew.ts
new file mode 100644
index 00000000..eed90a2e
--- /dev/null
+++ b/src/data/oraclesNew.ts
@@ -0,0 +1,61 @@
+import {
+  OracleRollable,
+  OracleTableSharedDetails,
+  OracleTableSharedResults,
+  OracleTableSharedRolls,
+  OracleTablesCollection,
+} from "@datasworn/core";
+import { oracles as ironswornOracles } from "@datasworn/ironsworn-classic/json/classic.json";
+import { oracles as starforgedOracles } from "@datasworn/starforged/json/starforged.json";
+import { getSystem } from "hooks/useGameSystem";
+import { GAME_SYSTEMS, GameSystemChooser } from "types/GameSystems.type";
+
+const gameSystem = getSystem();
+const gameSystemOracles: GameSystemChooser<
+  Record<string, OracleTablesCollection>
+> = {
+  [GAME_SYSTEMS.IRONSWORN]: ironswornOracles as Record<
+    string,
+    OracleTablesCollection
+  >,
+  [GAME_SYSTEMS.STARFORGED]: starforgedOracles as Record<
+    string,
+    OracleTablesCollection
+  >,
+};
+
+export const oracles = gameSystemOracles[gameSystem];
+
+/** ORACLES MAP - ALL ORACLES / TABLES THAT COULD POSSIBLY END UP BEING OPENED IN A DIALOG */
+export const oracleMap: Record<
+  string,
+  | OracleRollable
+  | OracleTableSharedRolls
+  | OracleTableSharedResults
+  | OracleTableSharedDetails
+  | OracleTablesCollection
+> = {};
+
+function parseOracleTablesCollectionIntoRollableOracleMap(
+  category: OracleTablesCollection
+) {
+  Object.values(category.contents ?? {}).forEach((oracleContent) => {
+    oracleMap[oracleContent.id] = oracleContent;
+  });
+  Object.values(category.collections ?? {}).forEach((subCollection) => {
+    if (subCollection.oracle_type === "tables") {
+      oracleMap[subCollection.id] = subCollection;
+      parseOracleTablesCollectionIntoRollableOracleMap(subCollection);
+    } else if (
+      subCollection.oracle_type === "table_shared_rolls" ||
+      subCollection.oracle_type === "table_shared_results" ||
+      subCollection.oracle_type === "table_shared_details"
+    ) {
+      oracleMap[subCollection.id] = subCollection;
+    }
+  });
+}
+
+Object.values(oracles).forEach((oracleCategory) => {
+  parseOracleTablesCollectionIntoRollableOracleMap(oracleCategory);
+});
diff --git a/src/data/rules.ts b/src/data/rules.ts
index 295b77e6..5f503c80 100644
--- a/src/data/rules.ts
+++ b/src/data/rules.ts
@@ -1,10 +1,10 @@
 import { Rules } from "@datasworn/core";
 import { rules as ironswornRules } from "@datasworn/ironsworn-classic/json/classic.json";
 import { rules as starforgedRules } from "@datasworn/starforged/json/starforged.json";
-import { getGameSystem } from "functions/getGameSystem";
+import { getSystem } from "hooks/useGameSystem";
 import { GAME_SYSTEMS, GameSystemChooser } from "types/GameSystems.type";
 
-const gameSystem = getGameSystem();
+const gameSystem = getSystem();
 const rulesMap: GameSystemChooser<Rules> = {
   [GAME_SYSTEMS.IRONSWORN]: ironswornRules as Rules,
   [GAME_SYSTEMS.STARFORGED]: starforgedRules as Rules,
diff --git a/src/pages/Homebrew/HomebrewEditorPage/HomebrewEditorPage.tsx b/src/pages/Homebrew/HomebrewEditorPage/HomebrewEditorPage.tsx
index 7edd8a63..edef3313 100644
--- a/src/pages/Homebrew/HomebrewEditorPage/HomebrewEditorPage.tsx
+++ b/src/pages/Homebrew/HomebrewEditorPage/HomebrewEditorPage.tsx
@@ -15,6 +15,7 @@ import { BASE_ROUTES, basePaths } from "routes";
 import { RulesSection } from "./RulesSection";
 import { useListenToHomebrewContent } from "stores/homebrew/useListenToHomebrewContent";
 import { useUpdateQueryStringValueWithoutNavigation } from "hooks/useUpdateQueryStringValueWithoutNavigation";
+import { OracleSection } from "./OracleSection";
 
 enum TABS {
   ABOUT = "about",
@@ -127,6 +128,7 @@ export function HomebrewEditorPage() {
           </StyledTabs>
           <Box role={"tabpanel"} sx={{ px: { xs: 2, sm: 3 } }}>
             {selectedTab === TABS.ABOUT && <AboutSection id={homebrewId} />}
+            {selectedTab === TABS.ORACLES && <OracleSection id={homebrewId} />}
             {selectedTab === TABS.RULES && <RulesSection id={homebrewId} />}
           </Box>
         </Box>
diff --git a/src/pages/Homebrew/HomebrewEditorPage/OracleSection/OracleSection.tsx b/src/pages/Homebrew/HomebrewEditorPage/OracleSection/OracleSection.tsx
new file mode 100644
index 00000000..d1f5f504
--- /dev/null
+++ b/src/pages/Homebrew/HomebrewEditorPage/OracleSection/OracleSection.tsx
@@ -0,0 +1,44 @@
+import { Box, LinearProgress } from "@mui/material";
+import { EmptyState } from "components/shared/EmptyState";
+import { OracleCollectionList } from "components/sharedIronsworn/NewOracles";
+import { useOracles } from "data/hooks/useOracles";
+import { useStore } from "stores/store";
+
+export interface OracleSectionProps {
+  id: string;
+}
+
+export function OracleSection(props: OracleSectionProps) {
+  const { id } = props;
+
+  const oracles = useStore(
+    (store) => store.homebrew.collections[id].oracles?.data ?? {}
+  );
+  const loading = useStore(
+    (store) => !store.homebrew.collections[id].oracles?.loaded
+  );
+
+  const testOracles = useOracles();
+
+  return (
+    <Box sx={{ mt: 2 }}>
+      <OracleCollectionList oracles={testOracles} />
+    </Box>
+  );
+
+  if (loading) {
+    return <LinearProgress sx={{ mx: { xs: -2, sm: -3 } }} />;
+  }
+
+  if (Object.keys(oracles).length === 0) {
+    return (
+      <EmptyState
+        showImage
+        title={"No Oracles Found"}
+        message={"Create your first Homebrew Oracle Collection"}
+      />
+    );
+  }
+
+  return <>Oracles Section</>;
+}
diff --git a/src/pages/Homebrew/HomebrewEditorPage/OracleSection/index.ts b/src/pages/Homebrew/HomebrewEditorPage/OracleSection/index.ts
new file mode 100644
index 00000000..80c0e597
--- /dev/null
+++ b/src/pages/Homebrew/HomebrewEditorPage/OracleSection/index.ts
@@ -0,0 +1 @@
+export * from "./OracleSection";
diff --git a/src/pages/Homebrew/HomebrewEditorPage/RulesSection/ConditionMeters/ConditionMeterAutocomplete.tsx b/src/pages/Homebrew/HomebrewEditorPage/RulesSection/ConditionMeters/ConditionMeterAutocomplete.tsx
index 19f73c95..17e10773 100644
--- a/src/pages/Homebrew/HomebrewEditorPage/RulesSection/ConditionMeters/ConditionMeterAutocomplete.tsx
+++ b/src/pages/Homebrew/HomebrewEditorPage/RulesSection/ConditionMeters/ConditionMeterAutocomplete.tsx
@@ -1,6 +1,6 @@
 import { Autocomplete, TextField, capitalize } from "@mui/material";
 import { useRules } from "data/hooks/useRules";
-import { StoredConditionMeter } from "types/HomebrewCollection.type";
+import { StoredConditionMeter } from "types/homebrew/HomebrewRules.type";
 
 export interface StatAutocompleteProps {
   conditionMeters: Record<string, StoredConditionMeter>;
diff --git a/src/pages/Homebrew/HomebrewEditorPage/RulesSection/ConditionMeters/ConditionMeterDialog.tsx b/src/pages/Homebrew/HomebrewEditorPage/RulesSection/ConditionMeters/ConditionMeterDialog.tsx
index dc4b664c..bfdf78d9 100644
--- a/src/pages/Homebrew/HomebrewEditorPage/RulesSection/ConditionMeters/ConditionMeterDialog.tsx
+++ b/src/pages/Homebrew/HomebrewEditorPage/RulesSection/ConditionMeters/ConditionMeterDialog.tsx
@@ -16,7 +16,7 @@ import { useEffect, useState } from "react";
 import {
   StoredConditionMeter,
   StoredRules,
-} from "types/HomebrewCollection.type";
+} from "types/homebrew/HomebrewRules.type";
 import { useForm, SubmitHandler, Controller } from "react-hook-form";
 import { convertIdPart } from "functions/dataswornIdEncoder";
 import { Preview } from "../../Preview";
diff --git a/src/pages/Homebrew/HomebrewEditorPage/RulesSection/ConditionMeters/ConditionMeterPreview.tsx b/src/pages/Homebrew/HomebrewEditorPage/RulesSection/ConditionMeters/ConditionMeterPreview.tsx
index 48154cbd..db776d48 100644
--- a/src/pages/Homebrew/HomebrewEditorPage/RulesSection/ConditionMeters/ConditionMeterPreview.tsx
+++ b/src/pages/Homebrew/HomebrewEditorPage/RulesSection/ConditionMeters/ConditionMeterPreview.tsx
@@ -2,7 +2,7 @@ import { Typography } from "@mui/material";
 import { Track } from "components/features/Track";
 import { StatComponent } from "components/features/characters/StatComponent";
 import { Control, useWatch } from "react-hook-form";
-import { StoredConditionMeter } from "types/HomebrewCollection.type";
+import { StoredConditionMeter } from "types/homebrew/HomebrewRules.type";
 
 export interface ConditionMeterPreviewProps {
   control: Control<StoredConditionMeter, unknown>;
diff --git a/src/pages/Homebrew/HomebrewEditorPage/RulesSection/ConditionMeters/ConditionMeters.tsx b/src/pages/Homebrew/HomebrewEditorPage/RulesSection/ConditionMeters/ConditionMeters.tsx
index f0cf75e2..55283736 100644
--- a/src/pages/Homebrew/HomebrewEditorPage/RulesSection/ConditionMeters/ConditionMeters.tsx
+++ b/src/pages/Homebrew/HomebrewEditorPage/RulesSection/ConditionMeters/ConditionMeters.tsx
@@ -10,7 +10,7 @@ import {
 import {
   StoredConditionMeter,
   StoredRules,
-} from "types/HomebrewCollection.type";
+} from "types/homebrew/HomebrewRules.type";
 import EditIcon from "@mui/icons-material/Edit";
 import DeleteIcon from "@mui/icons-material/Delete";
 import { useState } from "react";
@@ -96,6 +96,7 @@ export function ConditionMeters(props: ConditionMetersProps) {
                 }}
               >
                 <ListItemText
+                  secondaryTypographyProps={{ component: "span" }}
                   primary={conditionMeters[conditionMeterKey].label}
                   secondary={
                     <ClampedMarkdownRenderer
diff --git a/src/pages/Homebrew/HomebrewEditorPage/RulesSection/Impacts/ImpactCategoryDialog.tsx b/src/pages/Homebrew/HomebrewEditorPage/RulesSection/Impacts/ImpactCategoryDialog.tsx
index 913882f0..b6043485 100644
--- a/src/pages/Homebrew/HomebrewEditorPage/RulesSection/Impacts/ImpactCategoryDialog.tsx
+++ b/src/pages/Homebrew/HomebrewEditorPage/RulesSection/Impacts/ImpactCategoryDialog.tsx
@@ -3,7 +3,7 @@ import { useEffect, useState } from "react";
 import {
   StoredImpactCategory,
   StoredRules,
-} from "types/HomebrewCollection.type";
+} from "types/homebrew/HomebrewRules.type";
 import { Controller, SubmitHandler, useForm } from "react-hook-form";
 import {
   Button,
diff --git a/src/pages/Homebrew/HomebrewEditorPage/RulesSection/Impacts/ImpactDialog.tsx b/src/pages/Homebrew/HomebrewEditorPage/RulesSection/Impacts/ImpactDialog.tsx
index d53ebe6d..5feabf55 100644
--- a/src/pages/Homebrew/HomebrewEditorPage/RulesSection/Impacts/ImpactDialog.tsx
+++ b/src/pages/Homebrew/HomebrewEditorPage/RulesSection/Impacts/ImpactDialog.tsx
@@ -18,7 +18,7 @@ import {
   StoredConditionMeter,
   StoredImpact,
   StoredImpactCategory,
-} from "types/HomebrewCollection.type";
+} from "types/homebrew/HomebrewRules.type";
 import { ConditionMeterAutocomplete } from "../ConditionMeters/ConditionMeterAutocomplete";
 import { MarkdownEditor } from "components/shared/RichTextEditor/MarkdownEditor";
 
diff --git a/src/pages/Homebrew/HomebrewEditorPage/RulesSection/Impacts/Impacts.tsx b/src/pages/Homebrew/HomebrewEditorPage/RulesSection/Impacts/Impacts.tsx
index e50d2e0b..0cf0d37b 100644
--- a/src/pages/Homebrew/HomebrewEditorPage/RulesSection/Impacts/Impacts.tsx
+++ b/src/pages/Homebrew/HomebrewEditorPage/RulesSection/Impacts/Impacts.tsx
@@ -12,7 +12,7 @@ import {
   StoredImpact,
   StoredImpactCategory,
   StoredRules,
-} from "types/HomebrewCollection.type";
+} from "types/homebrew/HomebrewRules.type";
 import { ImpactCategoryDialog } from "./ImpactCategoryDialog";
 import { useStore } from "stores/store";
 import EditIcon from "@mui/icons-material/Edit";
@@ -155,6 +155,7 @@ export function Impacts(props: ImpactsProps) {
                   }}
                 >
                   <ListItemText
+                    secondaryTypographyProps={{ component: "span" }}
                     primary={impactCategories[categoryKey].label}
                     secondary={
                       <ClampedMarkdownRenderer
@@ -193,6 +194,7 @@ export function Impacts(props: ImpactsProps) {
                       .map((categoryContentKey) => (
                         <ListItem key={categoryContentKey}>
                           <ListItemText
+                            secondaryTypographyProps={{ component: "span" }}
                             primary={
                               impactCategories[categoryKey].contents[
                                 categoryContentKey
diff --git a/src/pages/Homebrew/HomebrewEditorPage/RulesSection/SpecialTracks/SpecialTrackDialog.tsx b/src/pages/Homebrew/HomebrewEditorPage/RulesSection/SpecialTracks/SpecialTrackDialog.tsx
index a54b30b2..379cf249 100644
--- a/src/pages/Homebrew/HomebrewEditorPage/RulesSection/SpecialTracks/SpecialTrackDialog.tsx
+++ b/src/pages/Homebrew/HomebrewEditorPage/RulesSection/SpecialTracks/SpecialTrackDialog.tsx
@@ -1,4 +1,7 @@
-import { StoredRules, StoredSpecialTrack } from "types/HomebrewCollection.type";
+import {
+  StoredRules,
+  StoredSpecialTrack,
+} from "types/homebrew/HomebrewRules.type";
 import { useForm, SubmitHandler, Controller } from "react-hook-form";
 import {
   Button,
diff --git a/src/pages/Homebrew/HomebrewEditorPage/RulesSection/SpecialTracks/SpecialTracks.tsx b/src/pages/Homebrew/HomebrewEditorPage/RulesSection/SpecialTracks/SpecialTracks.tsx
index c41875ed..3771dfd5 100644
--- a/src/pages/Homebrew/HomebrewEditorPage/RulesSection/SpecialTracks/SpecialTracks.tsx
+++ b/src/pages/Homebrew/HomebrewEditorPage/RulesSection/SpecialTracks/SpecialTracks.tsx
@@ -12,7 +12,10 @@ import { deleteField } from "firebase/firestore";
 import { useConfirm } from "material-ui-confirm";
 import { useState } from "react";
 import { useStore } from "stores/store";
-import { StoredRules, StoredSpecialTrack } from "types/HomebrewCollection.type";
+import {
+  StoredRules,
+  StoredSpecialTrack,
+} from "types/homebrew/HomebrewRules.type";
 import EditIcon from "@mui/icons-material/Edit";
 import DeleteIcon from "@mui/icons-material/Delete";
 import { SpecialTrackDialog } from "./SpecialTrackDialog";
@@ -89,6 +92,7 @@ export function SpecialTracks(props: SpecialTracksProps) {
                 }}
               >
                 <ListItemText
+                  secondaryTypographyProps={{ component: "span" }}
                   primary={specialTracks[specialTrackKey].label}
                   secondary={
                     <ClampedMarkdownRenderer
diff --git a/src/pages/Homebrew/HomebrewEditorPage/RulesSection/Stats/StatAutocomplete.tsx b/src/pages/Homebrew/HomebrewEditorPage/RulesSection/Stats/StatAutocomplete.tsx
index 818cf3d1..75bfdf5c 100644
--- a/src/pages/Homebrew/HomebrewEditorPage/RulesSection/Stats/StatAutocomplete.tsx
+++ b/src/pages/Homebrew/HomebrewEditorPage/RulesSection/Stats/StatAutocomplete.tsx
@@ -1,6 +1,6 @@
 import { Autocomplete, TextField, capitalize } from "@mui/material";
 import { useRules } from "data/hooks/useRules";
-import { StoredStat } from "types/HomebrewCollection.type";
+import { StoredStat } from "types/homebrew/HomebrewRules.type";
 
 export interface StatAutocompleteProps {
   stats: Record<string, StoredStat>;
diff --git a/src/pages/Homebrew/HomebrewEditorPage/RulesSection/Stats/StatDialog.tsx b/src/pages/Homebrew/HomebrewEditorPage/RulesSection/Stats/StatDialog.tsx
index f71df7d8..4baa9f46 100644
--- a/src/pages/Homebrew/HomebrewEditorPage/RulesSection/Stats/StatDialog.tsx
+++ b/src/pages/Homebrew/HomebrewEditorPage/RulesSection/Stats/StatDialog.tsx
@@ -1,4 +1,4 @@
-import { StoredRules, StoredStat } from "types/HomebrewCollection.type";
+import { StoredRules, StoredStat } from "types/homebrew/HomebrewRules.type";
 import { useForm, SubmitHandler, Controller } from "react-hook-form";
 import {
   Button,
diff --git a/src/pages/Homebrew/HomebrewEditorPage/RulesSection/Stats/StatPreviewComponent.tsx b/src/pages/Homebrew/HomebrewEditorPage/RulesSection/Stats/StatPreviewComponent.tsx
index 99f1d80c..b5ae3845 100644
--- a/src/pages/Homebrew/HomebrewEditorPage/RulesSection/Stats/StatPreviewComponent.tsx
+++ b/src/pages/Homebrew/HomebrewEditorPage/RulesSection/Stats/StatPreviewComponent.tsx
@@ -1,6 +1,6 @@
 import { Control, useWatch } from "react-hook-form";
 import { StatComponent } from "components/features/characters/StatComponent";
-import { StoredStat } from "types/HomebrewCollection.type";
+import { StoredStat } from "types/homebrew/HomebrewRules.type";
 export interface StatPreviewComponentProps {
   control: Control<StoredStat, unknown>;
 }
diff --git a/src/pages/Homebrew/HomebrewEditorPage/RulesSection/Stats/Stats.tsx b/src/pages/Homebrew/HomebrewEditorPage/RulesSection/Stats/Stats.tsx
index 1be5bbec..a7b91840 100644
--- a/src/pages/Homebrew/HomebrewEditorPage/RulesSection/Stats/Stats.tsx
+++ b/src/pages/Homebrew/HomebrewEditorPage/RulesSection/Stats/Stats.tsx
@@ -8,7 +8,7 @@ import {
   Typography,
 } from "@mui/material";
 import { useState } from "react";
-import { StoredRules, StoredStat } from "types/HomebrewCollection.type";
+import { StoredRules, StoredStat } from "types/homebrew/HomebrewRules.type";
 import { StatDialog } from "./StatDialog";
 import { useStore } from "stores/store";
 import { deleteField } from "firebase/firestore";
@@ -81,6 +81,7 @@ export function Stats(props: StatsProps) {
                 }}
               >
                 <ListItemText
+                  secondaryTypographyProps={{ component: "span" }}
                   primary={stats[statKey].label}
                   secondary={
                     <ClampedMarkdownRenderer
diff --git a/src/stores/appState/appState.slice.ts b/src/stores/appState/appState.slice.ts
index 6c5486ab..8c281378 100644
--- a/src/stores/appState/appState.slice.ts
+++ b/src/stores/appState/appState.slice.ts
@@ -5,7 +5,7 @@ import { defaultAppState } from "./appState.slice.default";
 export const createAppStateSlice: CreateSliceType<AppStateSlice> = (set) => ({
   ...defaultAppState,
 
-  openDialog: (id) => {
+  openDialog: (id, newVersion) => {
     set((store) => {
       const currentState = store.appState.openDialogState;
 
@@ -14,12 +14,14 @@ export const createAppStateSlice: CreateSliceType<AppStateSlice> = (set) => ({
           isOpen: true,
           previousIds: [...currentState.previousIds, currentState.openId],
           openId: id,
+          newVersion,
         };
       } else {
         store.appState.openDialogState = {
           isOpen: true,
           previousIds: [],
           openId: id,
+          newVersion,
         };
       }
     });
@@ -35,6 +37,7 @@ export const createAppStateSlice: CreateSliceType<AppStateSlice> = (set) => ({
           isOpen: true,
           openId: nextId,
           previousIds: newIds,
+          newVersion: store.appState.openDialogState.newVersion,
         };
       }
     });
diff --git a/src/stores/appState/appState.slice.type.ts b/src/stores/appState/appState.slice.type.ts
index b2c2dc83..78c2c6a5 100644
--- a/src/stores/appState/appState.slice.type.ts
+++ b/src/stores/appState/appState.slice.type.ts
@@ -3,6 +3,7 @@ import { Roll } from "types/DieRolls.type";
 export interface AppStateData {
   openDialogState: {
     isOpen: boolean;
+    newVersion?: boolean;
     openId?: string;
     previousIds: string[];
   };
@@ -17,7 +18,7 @@ export interface AppStateData {
 }
 
 export interface AppStateActions {
-  openDialog: (id: string) => void;
+  openDialog: (id: string, newVersion?: boolean) => void;
   prevDialog: () => void;
   closeDialog: () => void;
 
diff --git a/src/stores/homebrew/homebrew.slice.ts b/src/stores/homebrew/homebrew.slice.ts
index af20b664..122d529c 100644
--- a/src/stores/homebrew/homebrew.slice.ts
+++ b/src/stores/homebrew/homebrew.slice.ts
@@ -9,6 +9,8 @@ import { deleteHomebrewExpansion } from "api-calls/homebrew/deleteHomebrewExpans
 import { Unsubscribe } from "firebase/firestore";
 import { listenToHomebrewRules } from "api-calls/homebrew/rules/listenToHomebrewRules";
 import { updateExpansionRules } from "api-calls/homebrew/rules/updateExpansionRules";
+import { updateHomebrewOracles } from "api-calls/homebrew/oracles/updateHomebrewOracles";
+import { listenToHomebrewOracles } from "api-calls/homebrew/oracles/listenToHomebrewOracles";
 
 export const createHomebrewSlice: CreateSliceType<HomebrewSlice> = (set) => ({
   ...defaultHomebrewSlice,
@@ -91,6 +93,46 @@ export const createHomebrewSlice: CreateSliceType<HomebrewSlice> = (set) => ({
           }
         )
       );
+
+      unsubscribes.push(
+        listenToHomebrewOracles(
+          homebrewId,
+          (id, oracles) => {
+            set((store) => {
+              store.homebrew.collections[homebrewId] = {
+                ...(store.homebrew.collections[homebrewId] ?? {}),
+                oracles: {
+                  data: oracles,
+                  loaded: true,
+                },
+              };
+            });
+          },
+          (error) => {
+            set((store) => {
+              store.homebrew.collections[homebrewId] = {
+                ...(store.homebrew.collections[homebrewId] ?? {}),
+                oracles: {
+                  ...(store.homebrew.collections[homebrewId].oracles ?? {}),
+                  loaded: true,
+                  error: getErrorMessage(error, "Failed to load oracles"),
+                },
+              };
+            });
+          },
+          () => {
+            set((store) => {
+              store.homebrew.collections[homebrewId] = {
+                ...(store.homebrew.collections[homebrewId] ?? {}),
+                oracles: {
+                  ...(store.homebrew.collections[homebrewId].oracles ?? {}),
+                  loaded: true,
+                },
+              };
+            });
+          }
+        )
+      );
     });
 
     return () => {
@@ -111,4 +153,7 @@ export const createHomebrewSlice: CreateSliceType<HomebrewSlice> = (set) => ({
   updateExpansionRules: (homebrewId, rules) => {
     return updateExpansionRules({ homebrewId, rules });
   },
+  updateExpansionOracles: (homebrewId, oracles) => {
+    return updateHomebrewOracles({ homebrewId, oracles });
+  },
 });
diff --git a/src/stores/homebrew/homebrew.slice.type.ts b/src/stores/homebrew/homebrew.slice.type.ts
index 78f6dbec..c374e427 100644
--- a/src/stores/homebrew/homebrew.slice.type.ts
+++ b/src/stores/homebrew/homebrew.slice.type.ts
@@ -1,9 +1,10 @@
+import { OracleTablesCollection } from "@datasworn/core";
 import { PartialWithFieldValue, Unsubscribe } from "firebase/firestore";
 import {
   BaseExpansion,
   BaseExpansionOrRuleset,
-  StoredRules,
-} from "types/HomebrewCollection.type";
+} from "types/homebrew/HomebrewCollection.type";
+import { StoredRules } from "types/homebrew/HomebrewRules.type";
 
 export interface HomebrewEntry {
   base: BaseExpansionOrRuleset;
@@ -12,6 +13,11 @@ export interface HomebrewEntry {
     loaded: boolean;
     error?: string;
   };
+  oracles?: {
+    data?: Record<string, OracleTablesCollection>;
+    loaded: boolean;
+    error?: string;
+  };
 }
 
 export interface HomebrewSliceData {
@@ -35,6 +41,11 @@ export interface HomebrewSliceActions {
     expansionId: string,
     rules: PartialWithFieldValue<StoredRules>
   ) => Promise<void>;
+
+  updateExpansionOracles: (
+    expansionId: string,
+    oracles: PartialWithFieldValue<Record<string, OracleTablesCollection>>
+  ) => Promise<void>;
 }
 
 export type HomebrewSlice = HomebrewSliceData & HomebrewSliceActions;
diff --git a/src/types/homebrew/HomebrewCollection.type.ts b/src/types/homebrew/HomebrewCollection.type.ts
new file mode 100644
index 00000000..95de8c88
--- /dev/null
+++ b/src/types/homebrew/HomebrewCollection.type.ts
@@ -0,0 +1,24 @@
+import { Expansion, Ruleset } from "@datasworn/core";
+
+type RuleKeys =
+  | "oracles"
+  | "moves"
+  | "assets"
+  | "atlas"
+  | "npcs"
+  | "truths"
+  | "rarities"
+  | "delve_sites"
+  | "site_themes"
+  | "site_domains"
+  | "rules";
+
+type additions = {
+  uids: string[];
+  creatorUid: string;
+};
+
+export type BaseExpansion = Omit<Expansion, RuleKeys> & additions;
+export type BaseRuleset = Omit<Ruleset, RuleKeys> & additions;
+
+export type BaseExpansionOrRuleset = BaseExpansion | BaseRuleset;
diff --git a/src/types/homebrew/HomebrewOracles.type.ts b/src/types/homebrew/HomebrewOracles.type.ts
new file mode 100644
index 00000000..e58dcfcb
--- /dev/null
+++ b/src/types/homebrew/HomebrewOracles.type.ts
@@ -0,0 +1,82 @@
+import { DiceExpression, OracleDuplicateBehavior } from "@datasworn/core";
+
+/** ORACLE ROLLS */
+
+export interface StoredOracleRoll {
+  oracleId: string | null;
+  auto: boolean;
+  duplicates: OracleDuplicateBehavior;
+  dice: DiceExpression | null;
+  numberOfRolls: number;
+}
+
+export interface StoredOracleTableBase {
+  id: string;
+  name: string;
+  result: string;
+  oracleRolls?: StoredOracleRoll;
+  min: number | null;
+  max: number | null;
+}
+
+export interface StoredOracleTableSimple extends StoredOracleTableBase {}
+
+export interface StoredOracleTableDetails extends StoredOracleTableBase {
+  detail: string;
+}
+
+export type StoredOracleTableRollable =
+  | StoredOracleTableSimple
+  | StoredOracleTableDetails;
+
+/** ORACLE COLUMNS */
+
+export interface StoredOracleColumnSimple {
+  id: string;
+  type: "column_simple";
+  name: string;
+  summary?: string;
+  columnLabels: {
+    roll: string;
+    result: string;
+  };
+  replaces?: string;
+  dice: string;
+}
+
+/** ORACLE TABLES */
+
+export type StoredOracleCollection =
+  | StoredOracleTablesCollection
+  | StoredOracleTableSharedRolls
+  | StoredOracleTableSharedResults
+  | StoredOracleTableSharedDetails;
+
+interface BaseStoredOracleCollection {
+  id: string;
+  type: "tables" | "table_shared_rolls";
+  name: string;
+  description?: string;
+  enhances?: string;
+  replaces?: string;
+}
+
+export interface StoredOracleTableSharedRolls
+  extends BaseStoredOracleCollection {
+  type: "table_shared_rolls";
+  contents: { [key: string]: StoredOracleColumnSimple };
+  column_labels: {
+    roll: string;
+  };
+}
+
+export interface StoredOracleTableSharedResults {}
+
+export interface StoredOracleTableSharedDetails {}
+
+export interface StoredOracleTablesCollection
+  extends BaseStoredOracleCollection {
+  type: "tables";
+  contents?: { [key: string]: StoredOracleTableRollable };
+  collections?: { [key: string]: StoredOracleCollection };
+}
diff --git a/src/types/HomebrewCollection.type.ts b/src/types/homebrew/HomebrewRules.type.ts
similarity index 66%
rename from src/types/HomebrewCollection.type.ts
rename to src/types/homebrew/HomebrewRules.type.ts
index b4ee40b4..6bd805f5 100644
--- a/src/types/HomebrewCollection.type.ts
+++ b/src/types/homebrew/HomebrewRules.type.ts
@@ -1,28 +1,3 @@
-import { Expansion, Ruleset } from "@datasworn/core";
-
-type RuleKeys =
-  | "oracles"
-  | "moves"
-  | "assets"
-  | "atlas"
-  | "npcs"
-  | "truths"
-  | "rarities"
-  | "delve_sites"
-  | "site_themes"
-  | "site_domains"
-  | "rules";
-
-type additions = {
-  uids: string[];
-  creatorUid: string;
-};
-
-export type BaseExpansion = Omit<Expansion, RuleKeys> & additions;
-export type BaseRuleset = Omit<Ruleset, RuleKeys> & additions;
-
-export type BaseExpansionOrRuleset = BaseExpansion | BaseRuleset;
-
 export interface StoredStat {
   label: string;
   description: string;